/* =========================================================
   Global Custom Dropdown (Glassy Light Theme)
   Replaces every native <select> across the project.
   ========================================================= */

.cs-select {
    position: relative;
    box-sizing: border-box;
    z-index: 20;
    min-width: 0;
}

.cs-select.is-open {
    z-index: 1300;
}

.cs-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    pointer-events: none;
}

.cs-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1.5px solid rgba(109, 40, 217, 0.14);
    color: var(--gray-700);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-md);
    padding: 0.65rem 0.9rem;
    min-height: 2.55rem;
    transition: var(--transition-fast);
    box-shadow: 0 1px 2px rgba(26, 5, 51, 0.04);
}

.cs-trigger:hover {
    border-color: rgba(109, 40, 217, 0.35);
    background: rgba(255, 255, 255, 0.75);
}

.cs-select.is-open .cs-trigger {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.cs-trigger:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    background: rgba(0, 0, 0, 0.03);
}

.cs-trigger-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
    transition: transform 0.25s var(--ease-out-expo);
}

.cs-select.is-open .cs-arrow {
    transform: rotate(180deg);
}

.cs-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 100%;
    width: max-content;
    max-width: 320px;
    max-height: min(280px, calc(100vh - 1.5rem));
    z-index: 1200;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(109, 40, 217, 0.16);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(26, 5, 51, 0.16), 0 2px 8px rgba(26, 5, 51, 0.08);
    padding: 0.4rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    pointer-events: none;
}

/* The header location panel is portaled to body so fixed mobile geometry is
   independent of the sticky navbar's backdrop-filter containing block. */
.cs-location-panel {
    min-width: 0;
}

/* Native controls remain accessible as a progressive-enhancement fallback,
   but never expose the browser arrow or default visual chrome. */
select:not(.cs-native) {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--primary) 50%),
        linear-gradient(135deg, var(--primary) 50%, transparent 50%);
    background-position: calc(100% - 1rem) 50%, calc(100% - 0.7rem) 50%;
    background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
    background-repeat: no-repeat;
}

.cs-panel--up {
    top: auto;
    bottom: calc(100% + 8px);
    transform-origin: bottom center;
}

.cs-select.is-open .cs-panel,
.cs-location-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.cs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 240px;
    overflow-y: auto;
}

.cs-list::-webkit-scrollbar {
    width: 6px;
}

.cs-list::-webkit-scrollbar-thumb {
    background: rgba(109, 40, 217, 0.25);
    border-radius: var(--radius-full);
}

.cs-option {
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gray-700);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: var(--transition-fast);
}

.cs-option:hover {
    background: var(--primary-100);
    color: var(--primary-dark);
}

.cs-option.is-selected {
    background: var(--gradient-1);
    color: var(--white);
    font-weight: 600;
}

.cs-option.is-disabled {
    color: var(--gray-400);
    cursor: not-allowed;
}

/* Full-width contexts: form groups, filters, checkout */
.form-group .cs-select,
.filter-group .cs-select,
.filters-bar .cs-select {
    width: 100%;
}

/* Compact contexts inside search bar / nav */
.search-container .cs-select {
    flex-shrink: 0;
}

.search-container .cs-trigger {
    border: none;
    border-right: 1px solid var(--gray-200);
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    background: rgba(0, 0, 0, 0.03);
    min-height: 100%;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

.search-container .cs-select.is-open .cs-trigger {
    box-shadow: none;
    background: rgba(240, 120, 6, 0.06);
}

@media (max-width: 768px) {
    .cs-trigger {
        font-size: 0.8rem;
        padding: 0.55rem 0.75rem;
        min-height: 2.35rem;
    }
    .cs-panel {
        max-width: none;
    }

    .search-container .cs-trigger {
        padding: 0.55rem 0.65rem;
        font-size: 0.76rem;
    }
}

.cs-mobile-header,
.cs-mobile-search {
    display: none;
}

@media (max-width: 768px) {
    .cs-location-panel {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw;
        width: 100dvw;
        min-width: 0;
        min-height: 100vh;
        min-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        max-width: none;
        max-height: none;
        margin: 0 !important;
        box-sizing: border-box;
        z-index: 4000;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: var(--white);
        transform: translateX(100%);
    }

    .cs-location-panel.is-open {
        transform: translateX(0);
    }

    .cs-location-panel .cs-mobile-header {
        position: relative;
        display: block;
        flex: 0 0 calc(114px + env(safe-area-inset-top));
        min-height: calc(114px + env(safe-area-inset-top));
        height: calc(114px + env(safe-area-inset-top));
        padding: calc(14px + env(safe-area-inset-top)) 16px 20px;
        box-sizing: border-box;
        background: #6D28D9;
        border: 0;
        z-index: 2;
    }

    .cs-mobile-back {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 16px;
        top: calc(14px + env(safe-area-inset-top));
        width: 28px;
        height: 76px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #6D28D9;
        cursor: pointer;
        z-index: 3;
    }

    .cs-location-panel .cs-mobile-header strong {
        display: none;
    }

    .cs-location-panel .cs-mobile-search {
        display: flex;
        align-items: center;
        position: relative;
        width: 100%;
        height: 76px;
        margin: 0;
        padding: 0 16px 0 58px;
        box-sizing: border-box;
        border: 0;
        border-radius: 14px;
        background: #fff;
        color: #78909C;
    }

    .cs-mobile-search input {
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        color: #374151;
        font: 400 20px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    .cs-mobile-search input::placeholder { color: #78909C; opacity: 1; }

    .cs-location-panel .cs-list {
        flex: 1 1 auto;
        width: 100%;
        max-height: none;
        padding: 0 0 calc(5rem + env(safe-area-inset-bottom));
        overflow-y: auto;
    }

    .cs-location-empty {
        padding: 1.5rem;
        color: var(--gray-500);
        font-size: .95rem;
        text-align: center;
    }

    .cs-location-panel .cs-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 114px;
        padding: 1rem 28px 1rem 38px;
        box-sizing: border-box;
        border-bottom: 1px solid #E7EDF0;
        border-radius: 0;
        font: 400 24px/1.25 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        color: #374151;
    }

    .cs-location-panel .cs-option span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cs-location-panel .cs-option i {
        flex: 0 0 28px;
        color: #78909C;
        font-size: 28px;
    }

    .cs-location-panel .cs-option.is-selected {
        background: #fff;
        color: #273238;
        font-weight: 400;
    }

    .cs-location-panel .cs-option:active {
        background: #F8FAFC;
    }

    .cs-location-section {
        display: flex;
        align-items: center;
        min-height: 38px;
        padding: 0 38px;
        box-sizing: border-box;
        background: #EEF5F9;
        color: #78909C;
        font: 400 16px/1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        letter-spacing: 0;
    }

    .cs-mobile-chevron {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
    }
    .cs-mobile-chevron svg,
    .cs-option-chevron svg {
        display: block;
        width: 28px;
        height: 28px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .cs-mobile-back-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .cs-location-summary {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        gap: 7px;
        min-height: 110px;
        padding: 34px 38px 30px;
        box-sizing: border-box;
        color: #374151;
        font: 400 24px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
}

@media (max-width: 768px) {
    body.location-search-open {
        overflow: hidden;
    }

    body.location-search-open .mobile-bottom-nav {
        visibility: hidden;
        pointer-events: none;
    }
}