body.yc-search-open,
body:has(.search_header.shows--in-searching) {
    overflow:hidden;
}

.search_header {
    position:fixed;
    inset:0;
    z-index:999999;
    display:grid;
    grid-template-columns:minmax(0, 820px);
    align-items:start;
    justify-content:center;
    padding:clamp(96px, 14vh, 160px) 18px 24px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity 220ms ease, visibility 220ms ease;
}

.search_header.shows--in-searching {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.search_header.is-leaving {
    opacity:0;
    pointer-events:none;
}

.search_overlay {
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 50% 12%, rgba(67,147,74,.22), transparent 34%),
        rgba(2,18,13,.74);
    backdrop-filter:blur(18px) saturate(1.05);
}

.search_body {
    position:relative;
    grid-area:1 / 1;
    width:100%;
    min-width:0;
    max-height:calc(100dvh - clamp(120px, 18vh, 184px));
    overflow-x:hidden;
    overflow-y:auto;
    border-radius:36px;
    transform:translateY(22px) scale(.97);
    transform-origin:center top;
    transition:transform 280ms cubic-bezier(.2,.8,.2,1);
    scrollbar-width: #92cf9b transparent;
}

.search_body::-webkit-scrollbar {
    width:7px;
}

.search_body::-webkit-scrollbar-track {
    background:transparent;
}

.search_body::-webkit-scrollbar-thumb {
    border-radius:999px;
    background:rgba(7,133,79,.28);
}

.search_header.shows--in-searching .search_body {
    transform:translateY(0) scale(1);
}

.search_header.is-leaving .search_body {
    transform:translateY(14px) scale(.985);
}

.search_body::before,
.search_body::after {
    content:"";
    position:absolute;
    border-radius:999px;
    pointer-events:none;
}

.search_body h2 {
    position:relative;
    z-index:1;
    max-width:680px;
    margin:0 0 24px;
    color:#061b14;
    font-size:clamp(30px, 4vw, 52px);
    font-weight:900;
    line-height:1.2;
    letter-spacing:-.025em;
    overflow-wrap:anywhere;
}

html[dir="rtl"] .search_body h2 {
    letter-spacing:0;
}

.search_body p {
    position:relative;
    z-index:1;
    max-width:560px;
    margin:-12px 0 24px;
    color:#53655d;
    font-size:17px;
    font-weight:700;
    line-height:1.75;
}

.yc-search-kicker {
    position:relative;
    z-index:1;
    width:max-content;
    max-width:100%;
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
    padding:8px 13px;
    border:1px solid #d7eddf;
    border-radius:999px;
    color:#05633e;
    background:#edf8f1;
    font-size:13px;
    font-weight:900;
}

.search_body form {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    gap:12px;
    padding:10px;
    border:1px solid #d9eadf;
    border-radius:26px;
    background:#fff;
    box-shadow:0 18px 50px rgba(0,55,35,.13);
    transition:border-color var(--transition), box-shadow var(--transition);
}

.search_body form:has(> label) {
    grid-template-columns:auto minmax(0, 1fr) auto;
}

.search_body form:focus-within {
    border-color:#92cf9b;
    box-shadow:0 20px 58px rgba(0,107,69,.18), 0 0 0 4px rgba(67,147,74,.12);
}

.search_body form label {
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    color:#08764c;
    background:linear-gradient(135deg, #eff9f2, #e3f4e8);
    font-size:21px;
}

.search_body input[type="search"] {
    width:100%;
    min-width:0;
    height:62px;
    padding-inline:8px;
    border:0;
    outline:0;
    color:#071b14;
    background:transparent;
    font-size:21px;
    font-weight:850;
    text-align:start;
}

.search_body input[type="search"]::placeholder {
    color:#96a69e;
    font-weight:750;
    opacity:1;
}

.search_body input[type="search"]::-webkit-search-cancel-button {
    cursor:pointer;
}

.search_body form button[type="submit"] {
    width:auto;
    min-width:112px;
    min-height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 22px;
    border-radius:20px;
    color:#fff;
    background:linear-gradient(135deg, #07854f, #003d2b);
    box-shadow:0 14px 30px rgba(0,107,69,.30);
    font-size:15px;
    font-weight:900;
    white-space:nowrap;
    transition:transform var(--transition), background var(--transition), box-shadow var(--transition);
}

.search_closse {
    position:relative;
    grid-area:1 / 1;
    z-index:3;
    align-self:start;
    justify-self:end;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-block-start:-20px;
    margin-inline-end:-16px;
    border:1px solid rgba(255,255,255,.7);
    border-radius:17px;
    color:#063b29;
    background:#fff;
    box-shadow:0 18px 38px rgba(0,22,13,.24);
    font-size:18px;
    cursor:pointer;
    transition:transform var(--transition), color var(--transition), background var(--transition), box-shadow var(--transition);
}

.search_closse:focus-visible,
.search_body form button[type="submit"]:focus-visible {
    outline:3px solid rgba(255,127,0,.42);
    outline-offset:3px;
}

.search_body input[type="search"]:focus-visible {
    outline:0;
}

@media (hover:hover) and (pointer:fine) {
    .search_body form button[type="submit"]:hover {
        transform:translateY(-2px);
        box-shadow:0 20px 38px rgba(0,107,69,.38);
    }

    .search_closse:hover {
        color:#fff;
        background:#d53b3b;
        transform:rotate(5deg) scale(1.04);
    }
}

.search_body form button[type="submit"]:active,
.search_closse:active {
    transform:scale(.96);
}

/* =========================
   Tablet Responsive
========================= */

@media only screen and (max-width:991px) {
    .search_header {
        grid-template-columns:minmax(0, 720px);
        padding-block-start:clamp(82px, 11vh, 120px);
    }

    .search_body {
        max-height:calc(100dvh - clamp(106px, 15vh, 144px));
        padding:32px;
        border-radius:30px;
    }

    .search_body h2 {
        font-size:clamp(30px, 5vw, 42px);
    }

    .search_body form button[type="submit"] {
        min-width:102px;
    }
}

/* =========================
   Mobile App Search
========================= */

@media only screen and (max-width:767px) {
    .search_header {
        display:block;
        padding:0;
        overflow:hidden;
        background: #00000080;
    }

    .search_overlay {
        display:none;
    }

    .search_body {
        width:100%;
        height:100dvh;
        max-height:none;
        padding:
            max(82px, calc(env(safe-area-inset-top) + 66px))
            max(18px, env(safe-area-inset-right))
            max(24px, calc(env(safe-area-inset-bottom) + 18px))
            max(18px, env(safe-area-inset-left));
        border:0;
        border-radius:0;
        background:
            radial-gradient(circle at 92% 4%, rgba(16,184,178,.13), transparent 25%),
            linear-gradient(180deg, #fff 0%, #f8fbfa 100%);
        box-shadow:none;
        transform:translateY(100%);
        transform-origin:center bottom;
        transition:transform 360ms cubic-bezier(.22,.8,.2,1);
    }

    .search_header.shows--in-searching .search_body {
        transform:translateY(0);
    }

    .search_header.is-leaving .search_body {
        transform:translateY(100%);
    }

    .search_body::before {
        width:210px;
        height:210px;
        top:-100px;
        inset-inline-end:-90px;
        opacity:.7;
    }

    .search_body::after {
        display:none;
    }

    .search_body h2 {
        max-width:520px;
        margin-bottom:20px;
        font-size:clamp(27px, 7.4vw, 34px);
        line-height:1.3;
    }

    .search_body p {
        margin:-8px 0 18px;
        font-size:15px;
        line-height:1.7;
    }

    .yc-search-kicker {
        margin-bottom:12px;
        padding:7px 11px;
        font-size:12px;
    }

    .search_body form,
    .search_body form:has(> label) {
        grid-template-columns:minmax(0, 1fr) auto;
        gap:8px;
        padding:7px;
        border-radius:20px;
        box-shadow:0 16px 40px rgba(0,55,35,.10);
    }

    .search_body form label {
        display:none;
    }

    .search_body input[type="search"] {
        height:56px;
        padding-inline:11px;
        font-size:17px;
        font-weight:800;
    }

    .search_body form button[type="submit"] {
        min-width:86px;
        min-height:56px;
        padding:0 16px;
        border-radius:16px;
        font-size:14px;
        box-shadow:0 10px 24px rgba(0,107,69,.24);
    }

    .search_closse {
        position:absolute;
        top:max(14px, env(safe-area-inset-top));
        inset-inline-end:max(14px, env(safe-area-inset-right));
        width:46px;
        height:46px;
        margin:0;
        border-color:#e1ebe5;
        border-radius:15px;
        box-shadow:0 10px 28px rgba(0,22,13,.12);
    }
}

/* =========================
   Small Mobile Adjustments
========================= */

@media only screen and (max-width:390px) {
    .search_body {
        padding-block-start:max(76px, calc(env(safe-area-inset-top) + 62px));
        padding-inline:max(14px, env(safe-area-inset-left));
    }

    .search_body h2 {
        margin-bottom:16px;
        font-size:25px;
    }

    .search_body p {
        font-size:14px;
    }

    .search_body form {
        gap:6px;
        padding:6px;
        border-radius:18px;
    }

    .search_body input[type="search"] {
        height:52px;
        padding-inline:9px;
        font-size:16px;
    }

    .search_body form button[type="submit"] {
        min-width:74px;
        min-height:52px;
        padding-inline:12px;
        border-radius:14px;
        font-size:13px;
    }

    .search_closse {
        width:42px;
        height:42px;
        border-radius:14px;
        font-size:17px;
    }
}

@media only screen and (min-width:768px) and (max-height:620px) {
    .search_header {
        padding-block-start:42px;
    }

    .search_body {
        max-height:calc(100dvh - 66px);
    }
}

@media (prefers-reduced-motion:reduce) {
    .search_header,
    .search_body,
    .search_closse,
    .search_body form,
    .search_body form button[type="submit"] {
        transition:none;
    }
}