/* ============================================================
   SERVICE TECH VAULT
   SEARCH — NAVIGATION CONSOLE
   ============================================================ */

body.stv-global-theme.stv-search-console-page{
    background:
        radial-gradient(
            circle at 50% 4%,
            rgba(255,95,18,.22),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 45%,
            rgba(154,36,8,.11),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 66%,
            rgba(255,93,12,.08),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            #070504,
            #120a06 32%,
            #070605 100%
        ) !important;
}


/* ============================================================
   SEARCH HERO
   ============================================================ */

#stv-search-hero{
    width:min(
        calc(100% - 28px),
        1040px
    );

    margin:
        58px auto
        25px;

    text-align:center;
}

#stv-search-hero .stv-search-runes{
    color:#c64b17;

    font-family:Georgia,serif;

    font-size:17px;
    letter-spacing:.52em;
}

#stv-search-hero .stv-search-kicker{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    margin-top:16px;

    padding:
        7px 13px;

    border-radius:999px;

    color:#e8aa72;

    border:
        1px solid rgba(255,114,27,.26);

    background:
        rgba(255,88,12,.055);

    font-size:10px;
    font-weight:900;

    letter-spacing:.22em;

    text-transform:uppercase;
}

#stv-search-hero h1{
    margin:
        18px auto
        10px !important;

    max-width:880px;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        clamp(43px,7vw,82px) !important;

    line-height:.95;

    letter-spacing:-.04em;

    background:
        linear-gradient(
            180deg,
            #fff9f0 0%,
            #ffd19d 38%,
            #ff751f 72%,
            #aa2909 100%
        ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    color:transparent !important;
}

#stv-search-hero p{
    max-width:720px;

    margin:
        17px auto
        0;

    color:#c2ad98 !important;

    font-size:
        clamp(15px,2vw,19px);

    line-height:1.7;
}

#stv-search-hero .stv-search-purpose{
    margin-top:17px;

    color:#ff9637;

    font-family:Georgia,serif;

    font-size:
        clamp(16px,2.5vw,22px);

    font-weight:700;
}


/* ============================================================
   COMPASS / NAVIGATION MOTIF
   ============================================================ */

#stv-search-compass{
    position:relative;

    width:115px;
    height:115px;

    margin:
        28px auto
        4px;

    border:
        1px solid rgba(255,112,25,.30);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,105,20,.13),
            rgba(17,10,6,.70) 48%,
            rgba(6,5,4,.95) 70%
        );

    box-shadow:
        inset 0 0 28px rgba(255,91,10,.10),
        0 0 28px rgba(255,72,7,.07);
}

#stv-search-compass::before,
#stv-search-compass::after{
    content:"";

    position:absolute;

    left:50%;
    top:50%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255,118,28,.52),
            transparent
        );

    transform:
        translate(-50%,-50%);
}

#stv-search-compass::before{
    width:1px;
    height:85%;
}

#stv-search-compass::after{
    width:85%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,118,28,.52),
            transparent
        );
}

#stv-search-compass .needle{
    position:absolute;

    left:50%;
    top:50%;

    width:12px;
    height:70px;

    transform:
        translate(-50%,-50%)
        rotate(34deg);

    clip-path:
        polygon(
            50% 0,
            100% 50%,
            50% 100%,
            0 50%
        );

    background:
        linear-gradient(
            180deg,
            #ff9d3b 0%,
            #ff6818 47%,
            #55200e 50%,
            #21100a 100%
        );

    filter:
        drop-shadow(
            0 0 8px rgba(255,90,12,.35)
        );
}

#stv-search-compass .center{
    position:absolute;

    left:50%;
    top:50%;

    width:19px;
    height:19px;

    transform:
        translate(-50%,-50%);

    display:grid;
    place-items:center;

    z-index:3;

    border-radius:50%;

    color:#140702;

    background:#ff8127;

    font-family:Georgia,serif;
    font-size:11px;
    font-weight:900;
}


/* ============================================================
   QUICK NAVIGATION TYPES
   ============================================================ */

#stv-search-modes{
    width:min(
        calc(100% - 28px),
        1000px
    );

    margin:
        29px auto
        24px;

    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:10px;
}

.stv-search-mode{
    appearance:none;

    min-height:86px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:7px;

    padding:
        12px 8px;

    cursor:pointer;

    border:
        1px solid rgba(255,107,23,.23) !important;

    border-radius:17px !important;

    background:
        linear-gradient(
            145deg,
            rgba(27,17,10,.96),
            rgba(8,7,6,.98)
        ) !important;

    color:#decbb7 !important;

    box-shadow:
        0 12px 37px rgba(0,0,0,.20) !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease !important;
}

.stv-search-mode:hover,
.stv-search-mode:focus{
    transform:translateY(-2px);

    border-color:
        rgba(255,125,34,.60) !important;

    box-shadow:
        0 16px 45px rgba(0,0,0,.27),
        0 0 22px rgba(255,75,7,.07) !important;
}

.stv-search-mode.active{
    border-color:
        rgba(255,146,55,.80) !important;

    background:
        linear-gradient(
            145deg,
            rgba(80,30,10,.75),
            rgba(20,10,6,.98)
        ) !important;

    box-shadow:
        inset 0 0 25px rgba(255,93,12,.08),
        0 0 26px rgba(255,72,6,.12) !important;
}

.stv-search-mode .icon{
    font-size:24px;
}

.stv-search-mode .label{
    color:#fff0dd;

    font-size:11px;
    font-weight:900;

    letter-spacing:.04em;
}

.stv-search-mode .hint{
    color:#8e7966;

    font-size:9px;

    text-align:center;
}


/* ============================================================
   SEARCH CONSOLE
   ============================================================ */

#stv-search-console{
    width:min(
        calc(100% - 28px),
        900px
    );

    margin:
        0 auto
        35px;

    padding:5px;

    border-radius:25px;

    background:
        linear-gradient(
            135deg,
            rgba(255,115,27,.58),
            rgba(121,28,7,.14) 47%,
            rgba(255,136,41,.52)
        );

    box-shadow:
        0 25px 80px rgba(0,0,0,.34),
        0 0 33px rgba(255,72,7,.06);
}

#stv-search-console-inner{
    padding:
        28px;

    border-radius:21px;

    background:
        linear-gradient(
            145deg,
            rgba(24,15,10,.98),
            rgba(7,6,5,.99)
        );
}

#stv-search-console-title{
    margin-bottom:18px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;
}

#stv-search-console-title strong{
    color:#fff1df;

    font-family:Georgia,serif;

    font-size:
        clamp(20px,3vw,29px);
}

#stv-search-console-title span{
    color:#b34114;

    font-family:Georgia,serif;

    letter-spacing:.25em;
}


/* ============================================================
   EXISTING SEARCH FORM — RESTYLE WITHOUT REPLACING
   ============================================================ */

body.stv-search-console-page form.stv-search-enhanced,
body.stv-search-console-page .stv-search-form-enhanced{
    display:grid !important;

    grid-template-columns:
        170px
        minmax(0,1fr)
        auto !important;

    gap:9px !important;

    align-items:stretch !important;

    width:100% !important;

    max-width:none !important;

    margin:0 !important;
}

body.stv-search-console-page form.stv-search-enhanced label{
    grid-column:1 / -1;

    color:#a98e73 !important;

    font-size:11px !important;
    font-weight:850 !important;

    letter-spacing:.08em;

    text-transform:uppercase;
}

body.stv-search-console-page form.stv-search-enhanced select,
body.stv-search-console-page form.stv-search-enhanced input[type="search"],
body.stv-search-console-page form.stv-search-enhanced input[type="text"]{
    height:52px !important;

    min-height:52px !important;

    margin:0 !important;

    padding:
        0 14px !important;

    color:#fff3e3 !important;

    background:
        rgba(5,5,4,.80) !important;

    border:
        1px solid rgba(255,111,25,.25) !important;

    border-radius:13px !important;

    font-size:14px !important;

    box-shadow:
        inset 0 0 20px rgba(255,89,11,.025) !important;
}

body.stv-search-console-page form.stv-search-enhanced input::placeholder{
    color:#746353 !important;
}

body.stv-search-console-page form.stv-search-enhanced select:focus,
body.stv-search-console-page form.stv-search-enhanced input:focus{
    border-color:
        rgba(255,137,42,.76) !important;

    box-shadow:
        0 0 0 3px rgba(255,95,14,.09) !important;
}

body.stv-search-console-page form.stv-search-enhanced button,
body.stv-search-console-page form.stv-search-enhanced input[type="submit"]{
    min-width:115px !important;

    height:52px !important;

    margin:0 !important;

    padding:
        0 20px !important;

    border-radius:13px !important;

    color:#1c0802 !important;

    background:
        linear-gradient(
            180deg,
            #ffa349,
            #ff6819 56%,
            #dc410b
        ) !important;

    border:
        1px solid rgba(255,198,121,.64) !important;

    font-size:13px !important;

    font-weight:950 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        0 9px 27px rgba(255,65,5,.20) !important;
}


/* ============================================================
   SEARCH TIP
   ============================================================ */

#stv-search-tip{
    margin-top:16px;

    display:flex;
    align-items:flex-start;

    gap:10px;

    padding:
        12px 14px;

    border-radius:12px;

    border:
        1px solid rgba(255,110,25,.13);

    background:
        rgba(255,93,12,.035);
}

#stv-search-tip .rune{
    color:#ff7820;

    font-family:Georgia,serif;

    font-size:18px;
}

#stv-search-tip p{
    margin:0 !important;

    color:#8e7a67 !important;

    font-size:11px !important;
    line-height:1.6 !important;
}

#stv-search-tip strong{
    color:#cbb39a;
}


/* ============================================================
   RESULTS AREA
   ============================================================ */

#stv-search-results-shell{
    width:min(
        calc(100% - 28px),
        1100px
    );

    margin:
        40px auto
        80px;
}

#stv-search-results-heading{
    display:none;

    margin-bottom:18px;
}

#stv-search-results-heading.visible{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:15px;
}

#stv-search-results-heading h2{
    margin:0 !important;
    padding:0 !important;

    font-family:Georgia,serif;

    font-size:
        clamp(25px,4vw,37px) !important;
}

#stv-search-results-heading h2::before{
    display:none !important;
}

#stv-search-results-heading .runes{
    color:#ae3d12;

    font-family:Georgia,serif;

    letter-spacing:.30em;
}


/* Existing result cards */
body.stv-search-console-page
#stv-search-results-shell
a,
body.stv-search-console-page
#stv-search-results-shell
.card,
body.stv-search-console-page
#stv-search-results-shell
.result,
body.stv-search-console-page
#stv-search-results-shell
[class*="result"]{
    border-color:
        rgba(255,106,22,.21);
}


/* ============================================================
   LOADING / STATUS
   ============================================================ */

body.stv-search-console-page
.stv-search-status-enhanced{
    width:min(
        calc(100% - 28px),
        900px
    ) !important;

    margin:
        17px auto
        0 !important;

    padding:
        12px 15px !important;

    text-align:center;

    color:#8f7a67 !important;

    border-radius:12px;

    background:
        rgba(255,91,12,.025);

    font-size:11px !important;
}


/* ============================================================
   VAULT PATH STRIP
   ============================================================ */

#stv-search-path{
    width:min(
        calc(100% - 28px),
        1000px
    );

    margin:
        42px auto
        78px;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;

    gap:9px;

    color:#786451;

    font-size:10px;

    letter-spacing:.08em;

    text-transform:uppercase;
}

#stv-search-path a{
    color:#a68b71 !important;

    text-decoration:none;

    padding:
        7px 10px;

    border-radius:999px;

    border:
        1px solid rgba(255,104,22,.12);
}

#stv-search-path a:hover{
    color:#ff9a3d !important;

    border-color:
        rgba(255,115,28,.37);
}

#stv-search-path .arrow{
    color:#a83c12;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:780px){

    #stv-search-hero{
        margin-top:38px;
    }

    #stv-search-compass{
        width:90px;
        height:90px;
    }

    #stv-search-compass .needle{
        height:55px;
    }

    #stv-search-modes{
        grid-template-columns:
            repeat(2,1fr);
    }

    .stv-search-mode:last-child{
        grid-column:
            1 / -1;
    }

    #stv-search-console-inner{
        padding:
            21px 15px;
    }

    body.stv-search-console-page
    form.stv-search-enhanced{
        grid-template-columns:
            1fr !important;
    }

    body.stv-search-console-page
    form.stv-search-enhanced label{
        grid-column:auto;
    }

    body.stv-search-console-page
    form.stv-search-enhanced select,
    body.stv-search-console-page
    form.stv-search-enhanced input,
    body.stv-search-console-page
    form.stv-search-enhanced button{
        width:100% !important;
        min-width:0 !important;
    }

}

@media(max-width:430px){

    #stv-search-modes{
        gap:7px;
    }

    .stv-search-mode{
        min-height:76px;

        padding:
            10px 5px;
    }

    .stv-search-mode .icon{
        font-size:21px;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
    }

}