/* ================================================================
   HubBits & MorDocs — Customer Support: Guardian Passage v1
   Presentation-only layer.
   Existing customer guard, CSRF, ticket creation, attachment validation,
   transaction/rollback behavior, ownership binding, and routes are preserved.
   ================================================================ */

.support-form-page{
    --guardian-blue:#7898c8;
    --guardian-violet:#9f73ee;
    --guardian-gold:#d8bc78;
    --guardian-rose:#c982aa;
    --guardian-emerald:#77b49b;
    --guardian-ivory:#f3edf6;
}

/* A slightly cooler support atmosphere than the account gateways. */
.support-form-page::before{
    border-color:rgba(216,188,120,.052);
    box-shadow:
        0 0 0 94px rgba(120,152,200,.012),
        0 0 0 184px rgba(159,115,238,.014),
        0 0 104px rgba(74,54,142,.055);
}

.support-form-page .support-shell{
    padding-top:58px !important;
    padding-bottom:86px !important;
}

/* ----------------------------------------------------------------
   Guardian Passage panel
   ---------------------------------------------------------------- */

.support-form-page .support-guardian-passage{
    isolation:isolate;
    position:relative;
    overflow:hidden;
    width:min(100%, 980px);
    margin-inline:auto;
    padding:48px 50px 46px;
    border-color:rgba(216,188,120,.19);
    background:
        radial-gradient(circle at 88% 12%, rgba(120,152,200,.095), transparent 30%),
        radial-gradient(circle at 12% 95%, rgba(159,115,238,.068), transparent 29%),
        linear-gradient(145deg, rgba(255,255,255,.041), rgba(255,255,255,.009)),
        rgba(13,11,19,.97);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.050),
        inset 0 0 0 1px rgba(216,188,120,.015),
        0 32px 96px rgba(0,0,0,.48),
        0 0 62px rgba(81,63,150,.075);
}

.support-form-page .support-guardian-passage::before{
    right:8%;
    left:8%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(120,152,200,.19),
        rgba(216,188,120,.60),
        rgba(159,115,238,.17),
        transparent
    );
    box-shadow:
        0 0 8px rgba(216,188,120,.05),
        0 0 14px rgba(120,152,200,.04);
}

.support-form-page .support-guardian-passage::after{
    content:"";
    position:absolute;
    z-index:0;
    inset:10px;
    pointer-events:none;
    border:1px solid rgba(216,188,120,.045);
    border-radius:calc(var(--hb-radius-lg) - 7px);
    background:
        linear-gradient(135deg,rgba(120,152,200,.14) 0 1px,transparent 1px) top left / 20px 20px no-repeat,
        linear-gradient(225deg,rgba(216,188,120,.16) 0 1px,transparent 1px) top right / 20px 20px no-repeat,
        linear-gradient(45deg,rgba(159,115,238,.10) 0 1px,transparent 1px) bottom left / 20px 20px no-repeat,
        linear-gradient(315deg,rgba(120,152,200,.09) 0 1px,transparent 1px) bottom right / 20px 20px no-repeat;
    opacity:.72;
}

.support-form-page .support-guardian-passage > *{
    position:relative;
    z-index:2;
}

/* ----------------------------------------------------------------
   Heading + guardian sigil
   ---------------------------------------------------------------- */

.support-form-page .guardian-heading{
    align-items:center;
    gap:22px;
    margin-bottom:20px;
}

.support-form-page .guardian-heading h1{
    color:#f4eef7;
    text-shadow:
        0 0 20px rgba(120,152,200,.04),
        0 1px 0 rgba(255,255,255,.02);
}

.support-form-page .guardian-heading .form-intro{
    max-width:720px;
    color:#aaa3b0;
}

.support-form-page .guardian-sigil{
    position:relative;
    width:72px;
    height:72px;
    flex:0 0 72px;
    border-color:rgba(216,188,120,.44);
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 44%, rgba(120,152,200,.15), transparent 60%),
        radial-gradient(circle at 50% 80%, rgba(159,115,238,.08), transparent 46%),
        #0b0911;
    box-shadow:
        inset 0 0 0 5px rgba(255,255,255,.010),
        0 0 0 6px rgba(120,152,200,.026),
        0 0 31px rgba(120,152,200,.095);
    color:#dce9f8;
    transform:none;
    animation:hbGuardianSigilArrival 1.5s cubic-bezier(.18,.72,.22,1) .12s both;
}

.support-form-page .guardian-sigil svg{
    width:39px;
    height:39px;
    overflow:visible;
    fill:none;
    stroke:currentColor;
    stroke-width:1.45;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:
        drop-shadow(0 0 6px rgba(120,152,200,.28))
        drop-shadow(0 0 3px rgba(159,115,238,.11));
}

.support-form-page .guardian-sigil__ring{
    position:absolute;
    inset:-8px;
    border:1px solid rgba(216,188,120,.19);
    border-radius:50%;
    background:
        conic-gradient(
            from 12deg,
            transparent 0 22%,
            rgba(120,152,200,.15) 22% 23%,
            transparent 23% 52%,
            rgba(216,188,120,.13) 52% 53%,
            transparent 53% 77%,
            rgba(159,115,238,.12) 77% 78%,
            transparent 78%
        );
    opacity:.70;
    transform:rotate(18deg);
    transition:
        opacity .34s ease,
        transform .64s cubic-bezier(.2,.74,.2,1),
        box-shadow .36s ease;
}

.support-form-page .guardian-sigil::after{
    content:"";
    position:absolute;
    right:-5px;
    bottom:-5px;
    width:9px;
    height:9px;
    border:1px solid rgba(232,207,151,.50);
    background:linear-gradient(135deg,#6281ae,#835cbb);
    box-shadow:0 0 12px rgba(120,152,200,.18);
    transform:rotate(45deg);
}

/* ----------------------------------------------------------------
   Background guardian geometry
   ---------------------------------------------------------------- */

.support-form-page .guardian-ward-field{
    position:absolute !important;
    z-index:0 !important;
    right:-86px;
    top:245px;
    width:360px;
    height:360px;
    pointer-events:none;
    opacity:.34;
}

.support-form-page .guardian-ward-field > span{
    position:absolute;
    inset:0;
    border:1px solid rgba(120,152,200,.055);
    border-radius:50%;
}

.support-form-page .guardian-ward-field > span:nth-child(1){
    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(120,152,200,.058) 0 1deg,
            transparent 1deg 24deg
        );
    -webkit-mask:radial-gradient(circle,transparent 0 43%,#000 44% 45%,transparent 46%);
    mask:radial-gradient(circle,transparent 0 43%,#000 44% 45%,transparent 46%);
    animation:hbGuardianWardDrift 34s linear infinite;
}

.support-form-page .guardian-ward-field > span:nth-child(2){
    inset:62px;
    border-color:rgba(216,188,120,.055);
    box-shadow:
        0 0 0 22px rgba(120,152,200,.005),
        0 0 24px rgba(120,152,200,.016);
    animation:hbGuardianWardDriftReverse 42s linear infinite;
}

.support-form-page .guardian-ward-field > span:nth-child(3){
    inset:122px;
    border-color:rgba(159,115,238,.060);
    box-shadow:inset 0 0 20px rgba(159,115,238,.016);
}

/* ----------------------------------------------------------------
   Guardian channel status
   ---------------------------------------------------------------- */

.support-form-page .guardian-status{
    display:flex;
    align-items:center;
    gap:11px;
    margin:0 0 24px;
    padding:10px 12px;
    border:1px solid rgba(216,188,120,.095);
    border-radius:11px;
    background:
        radial-gradient(circle at 7% 0%, rgba(120,152,200,.055), transparent 42%),
        linear-gradient(90deg,rgba(159,115,238,.014),transparent 32%),
        rgba(8,6,11,.24);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.016),
        0 8px 18px rgba(0,0,0,.10);
}

.support-form-page .guardian-status__mark{
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    flex:0 0 31px;
    border:1px solid rgba(216,188,120,.21);
    border-radius:50%;
    background:rgba(120,152,200,.045);
    color:#d8bc78;
    box-shadow:0 0 12px rgba(120,152,200,.045);
}

.support-form-page .guardian-status small,
.support-form-page .guardian-status strong{
    display:block;
}

.support-form-page .guardian-status small{
    color:#74727c;
    font-size:8px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.support-form-page .guardian-status strong{
    margin-top:2px;
    color:#b9b5c1;
    font-size:11.5px;
}

/* ----------------------------------------------------------------
   Three-part support intake
   ---------------------------------------------------------------- */

.support-form-page .guardian-form-section{
    position:relative;
    overflow:hidden;
    margin-top:20px;
    padding:24px 24px 22px;
    border-color:rgba(204,193,218,.10);
    background:
        linear-gradient(145deg,rgba(255,255,255,.014),transparent 42%),
        rgba(7,6,10,.24);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.014),
        0 12px 25px rgba(0,0,0,.10);
}

.support-form-page .guardian-form-section::after{
    content:"";
    position:absolute;
    top:0;
    left:18%;
    right:18%;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(120,152,200,.13),
        rgba(216,188,120,.21),
        rgba(159,115,238,.12),
        transparent
    );
    opacity:.70;
}

.support-form-page .guardian-form-section legend{
    color:#e3d9e9;
}

.support-form-page .guardian-form-section legend > span[aria-hidden="true"]{
    border-color:rgba(216,188,120,.18);
    background:rgba(120,152,200,.035);
    color:#d8bc78;
    box-shadow:0 0 13px rgba(120,152,200,.035);
}

.support-form-page .guardian-form-section--issue{
    border-color:rgba(159,115,238,.115);
}

.support-form-page .guardian-form-section--evidence{
    border-color:rgba(120,152,200,.105);
}

/* Field surfaces stay practical and readable. */
.support-form-page .support-form input:not([type="file"]),
.support-form-page .support-form select,
.support-form-page .support-form textarea{
    border-color:rgba(199,204,220,.16);
    background:
        linear-gradient(90deg, rgba(120,152,200,.012), transparent 30%),
        rgba(5,4,8,.64);
}

.support-form-page .support-form input:not([type="file"]):focus-visible,
.support-form-page .support-form select:focus-visible,
.support-form-page .support-form textarea:focus-visible{
    border-color:rgba(130,163,208,.66);
    box-shadow:
        0 0 0 3px rgba(120,152,200,.10),
        0 0 24px rgba(87,91,166,.070),
        inset 0 0 18px rgba(120,152,200,.018);
}

.support-form-page .support-form input[type="file"]{
    border-color:rgba(120,152,200,.16);
    background:rgba(7,6,10,.48);
}

/* Ticket success block gets a sealed-record identity. */
.support-form-page .ticket-confirmation{
    border-color:rgba(119,180,155,.20);
    background:
        radial-gradient(circle at 8% 0%, rgba(119,180,155,.070), transparent 42%),
        rgba(8,12,11,.30);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.020),
        0 10px 24px rgba(19,44,36,.10);
}

.support-form-page .ticket-confirmation strong{
    color:#b8dfcf;
    text-shadow:0 0 14px rgba(119,180,155,.08);
}

/* Keep the submit in the shared arcane language. */
.support-form-page .guardian-submit{
    margin-top:8px;
    border-color:rgba(190,169,119,.30);
    background:
        radial-gradient(circle at 16% 0%, rgba(120,152,200,.12), transparent 44%),
        linear-gradient(135deg,#151321,#231a31 56%,#15121d);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        inset 0 -1px 0 rgba(216,188,120,.07),
        0 13px 30px rgba(29,26,65,.21);
    color:#f3eef7;
}

/* The whole chamber acknowledges active support entry, subtly. */
.support-form-page .support-guardian-passage:focus-within{
    border-color:rgba(216,188,120,.235);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.054),
        inset 0 0 0 1px rgba(216,188,120,.018),
        0 32px 96px rgba(0,0,0,.48),
        0 0 68px rgba(81,63,150,.09);
}

.support-form-page .support-guardian-passage:focus-within .guardian-sigil{
    border-color:rgba(145,177,220,.60);
    color:#f0f7ff;
    box-shadow:
        inset 0 0 0 5px rgba(120,152,200,.030),
        0 0 0 6px rgba(120,152,200,.032),
        0 0 33px rgba(120,152,200,.15);
}

.support-form-page .support-guardian-passage:focus-within .guardian-sigil__ring{
    opacity:.91;
    transform:rotate(108deg);
    box-shadow:0 0 18px rgba(120,152,200,.075);
}

/* ----------------------------------------------------------------
   Arrival / restrained ward movement
   ---------------------------------------------------------------- */

@keyframes hbGuardianSigilArrival{
    0%{
        opacity:.42;
        transform:scale(.93);
        box-shadow:
            inset 0 0 0 5px rgba(255,255,255,.006),
            0 0 0 4px rgba(120,152,200,.018),
            0 0 10px rgba(120,152,200,.025);
    }
    46%{
        opacity:1;
        transform:scale(1.035);
        box-shadow:
            inset 0 0 0 5px rgba(120,152,200,.024),
            0 0 0 6px rgba(120,152,200,.030),
            0 0 29px rgba(120,152,200,.12);
    }
    100%{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes hbGuardianWardDrift{
    to{transform:rotate(360deg);}
}

@keyframes hbGuardianWardDriftReverse{
    to{transform:rotate(-360deg);}
}

/* ----------------------------------------------------------------
   Responsive / accessibility
   ---------------------------------------------------------------- */

@media(max-width:760px){
    .support-form-page .support-shell{
        padding-top:42px !important;
        padding-bottom:64px !important;
    }

    .support-form-page .support-guardian-passage{
        padding:38px 24px 35px;
    }

    .support-form-page .guardian-heading{
        align-items:flex-start;
        gap:18px;
    }

    .support-form-page .guardian-sigil{
        width:64px;
        height:64px;
        flex-basis:64px;
    }

    .support-form-page .guardian-sigil svg{
        width:35px;
        height:35px;
    }

    .support-form-page .guardian-ward-field{
        right:-145px;
        top:260px;
        width:300px;
        height:300px;
        opacity:.25;
    }

    .support-form-page .guardian-form-section{
        padding:21px 19px 20px;
    }
}

@media(max-width:520px){
    .support-form-page .guardian-heading{
        display:block;
    }

    .support-form-page .guardian-sigil{
        margin-bottom:20px;
    }

    .support-form-page .support-guardian-passage{
        padding:33px 18px 30px;
    }

    .support-form-page .guardian-status{
        padding:9px 10px;
    }

    .support-form-page .guardian-form-section{
        padding:19px 16px 18px;
    }

    .support-form-page .guardian-submit{
        min-height:44px;
    }
}

@media(prefers-reduced-motion:reduce){
    .support-form-page .guardian-sigil,
    .support-form-page .guardian-sigil__ring,
    .support-form-page .guardian-ward-field > span{
        animation:none !important;
        transition:none !important;
    }
}