.hcc-desktop-search-modal {
    display: none;
}

.hcc-desktop-search-modal-scope-label,
.hcc-desktop-search-modal-pill,
.hcc-desktop-search-modal-pill span {
    font-family: Montserrat, var(--hcc-font, Arial), sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.32px;
    text-align: center;
}

.hcc-desktop-search-modal-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--hcc-border, #dfe1e7);
    background: #fff;
    color: var(--hcc-text-dark, #0d0d12);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    appearance: none;
    box-shadow: none;
}

.hcc-desktop-search-modal-pill img {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
    flex: 0 0 20px;
}

.hcc-desktop-search-modal-pill.is-active {
    background: #101820;
    border-color: #101820;
    color: #fff;
}

.hcc-desktop-search-modal-pill.is-active img {
    filter: brightness(0) invert(1);
}

.hcc-desktop-search-modal-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hcc-desktop-search-modal-suggestion {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: Montserrat, var(--hcc-font, Arial), sans-serif;
    appearance: none;
    box-shadow: none;
    outline: none;
}

.hcc-desktop-search-modal-suggestion img {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: block;
    object-fit: contain;
}

.hcc-desktop-search-modal-suggestion span {
    font-weight: 400;
    line-height: 1.6;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

.hcc-desktop-search-modal-col-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    color: var(--hcc-text-body, #666d80);
    font-family: Montserrat, var(--hcc-font, Arial), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.32px;
    text-transform: uppercase;
}

.hcc-desktop-search-modal-col-head img {
    width: 16px;
    height: 16px;
    display: block;
    flex: 0 0 16px;
}

body.hcc-search-open {
    overflow: hidden;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1023.98px) {
    .hcc-desktop-search-modal.is-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        position: fixed;
        inset: 0;
        z-index: 10100;
        padding: 0;
        background: #fff;
    }

    .hcc-desktop-search-modal-backdrop {
        display: none;
    }

    .hcc-desktop-search-modal-dialog {
        position: relative;
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    .hcc-desktop-search-modal-close--desktop {
        display: none;
    }

    .hcc-desktop-search-modal-close--mobile {
        display: inline-flex;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 999px;
        background: #fff;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
        box-shadow: 0 1px 1px rgba(13, 13, 18, 0.06);
    }

    .hcc-desktop-search-modal-panel {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
        background: #fff;
    }

    .hcc-desktop-search-modal-top {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 24px 8px 8px;
        flex-shrink: 0;
    }

    .hcc-desktop-search-modal-scope-label {
        display: none;
    }

    .hcc-desktop-search-modal-pills-scroll {
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .hcc-desktop-search-modal-pills {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        flex-wrap: nowrap;
        width: max-content;
        padding-right: 8px;
    }

    .hcc-desktop-search-modal-query {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-shrink: 0;
        padding: 16px;
        border-bottom: 1px solid var(--hcc-border, #dfe1e7);
    }

    .hcc-desktop-search-modal-input-icon {
        display: none;
    }

    .hcc-desktop-search-modal-input {
        flex: 1 1 auto;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--hcc-text-body, #666d80);
        font-family: Montserrat, var(--hcc-font, Arial), sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.55;
        padding: 0;
    }

    .hcc-desktop-search-modal-submit--desktop {
        display: none;
    }

    .hcc-desktop-search-modal-submit--mobile {
        display: inline-flex;
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        border: 0;
        border-radius: 999px;
        background: #101820;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
    }

    .hcc-desktop-search-modal-submit--mobile img {
        width: 20px;
        height: 20px;
        filter: brightness(0) invert(1);
    }

    .hcc-desktop-search-modal-suggestions {
        display: flex;
        flex: 1 1 auto;
        overflow-y: auto;
        flex-direction: column;
        gap: 24px;
        padding: 16px;
    }

    .hcc-desktop-search-modal-suggestion {
        padding: 12px 0;
    }

    .hcc-desktop-search-modal-suggestion span {
        font-size: 14px;
        letter-spacing: -0.28px;
    }

    body.hcc-search-open .header-mobile-copy {
        z-index: 999;
    }

    body.hcc-search-open .header-mobile-copy .hcc-header-search-bar {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .hcc-desktop-search-modal {
        position: fixed;
        inset: 0;
        z-index: 1400;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 80px 48px 48px;
        box-sizing: border-box;
    }

    .hcc-desktop-search-modal.is-open {
        display: flex;
    }

    .hcc-desktop-search-modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(16, 24, 32, 0.55);
    }

    .hcc-desktop-search-modal-dialog {
        position: relative;
        width: 100%;
        max-width: 1075px;
        margin: 0 auto;
        z-index: 1;
    }

    .hcc-desktop-search-modal-close--desktop {
        position: absolute;
        top: -60px;
        right: 0;
        width: 48px;
        height: 48px;
        border: 0;
        border-radius: 999px;
        background: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        box-shadow: 0 1px 2px rgba(13, 13, 18, 0.08);
    }

    .hcc-desktop-search-modal-close--mobile,
    .hcc-desktop-search-modal-submit--mobile {
        display: none;
    }

    .hcc-desktop-search-modal-panel {
        background: #fff;
        border-radius: 36px;
        overflow: hidden;
        font-family: var(--hcc-font, Montserrat, Arial, sans-serif);
        box-shadow: 0 24px 48px rgba(13, 13, 18, 0.12);
    }

    .hcc-desktop-search-modal-top {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        padding: 24px 24px 8px;
    }

    .hcc-desktop-search-modal-query {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 24px;
        border-bottom: 1px solid var(--hcc-border, #dfe1e7);
    }

    .hcc-desktop-search-modal-input-row {
        display: flex;
        align-items: center;
        gap: 16px;
        flex: 1 1 auto;
        min-width: 0;
    }

    .hcc-desktop-search-modal-input-icon {
        width: 52px;
        height: 52px;
        border-radius: 999px;
        background: var(--hcc-bg-soft, #fef3e9);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 52px;
    }

    .hcc-desktop-search-modal-input {
        flex: 1 1 auto;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--hcc-text-body, #666d80);
        font-family: var(--hcc-font, Montserrat, Arial, sans-serif);
        font-size: 24px;
        font-weight: 500;
        line-height: 1.55;
        padding: 0;
    }

    .hcc-desktop-search-modal-submit--desktop,
    .hcc-desktop-search-modal-analyze {
        flex: 0 0 150px;
        width: 150px;
        height: 52px;
        border: 0;
        border-radius: 999px;
        background: #101820;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        font-family: var(--hcc-font, Montserrat, Arial, sans-serif);
        font-size: 18px;
        font-weight: 700;
        padding: 8px 16px;
    }

    .hcc-desktop-search-modal-suggestions {
        display: flex;
        flex-direction: row;
        gap: 24px;
        padding: 36px 24px;
    }

    .hcc-desktop-search-modal-col {
        flex: 1 1 0;
        min-width: 0;
    }

    .hcc-desktop-search-modal-suggestion {
        padding: 16px 0;
    }

    .hcc-desktop-search-modal-suggestion span {
        font-size: 18px;
        letter-spacing: -0.36px;
    }
}

.hcc-desktop-search-modal-panel--widget {
    padding: 0;
}

.hcc-desktop-search-modal-widget-mount {
    width: 100%;
    min-width: 0;
}

.hcc-desktop-search-modal-widget-mount erha-search {
    display: block;
    width: 100%;
}

@media (max-width: 1023.98px) {
    .hcc-desktop-search-modal-widget-mount--mobile-only {
        display: none !important;
    }

    body.homepage-revamp-code .hcc-desktop-nav-search-widget erha-search,
    body.hcc-site-chrome .hcc-desktop-nav-search-widget erha-search {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .hcc-desktop-search-modal-widget-mount--mobile-only {
        display: none;
    }
}

/*
 * Sarana AI <erha-search> dialog uses data-z-index + 1 (default 10101).
 * Floating chrome stays in DOM; these caps keep it below header/search layers.
 */
body.hcc-site-chrome #floating-whatsapp,
body.hcc-site-chrome #back2top.btn-circle,
body.homepage-revamp-code #floating-whatsapp,
body.homepage-revamp-code #back2top.btn-circle {
    z-index: 8 !important;
}