/* ═══════════════════════════════════════════════════════════════
   WOOKIT CORE — Dropdown
   Shared dropdown panel with open-state animation and mobile/tablet
   bottom-drawer behavior.
   ═══════════════════════════════════════════════════════════════ */

.wookit-dropdown {
    position: fixed;
    background: var(--wookit-dropdown-bg, var(--wookit-surface));
    border: var(--wookit-dropdown-border, none);
    border-radius: var(--wookit-radius-md);
    box-shadow: var(--wookit-dropdown-shadow);
    -webkit-backdrop-filter: var(--wookit-dropdown-backdrop, none);
    backdrop-filter: var(--wookit-dropdown-backdrop, none);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.18s;
    pointer-events: none;
    min-width: 250px;
    overflow: hidden;
    z-index: 10001;
}
.wookit-open .wookit-dropdown,
.wookit-dropdown-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ── Drawer handle (visible only on mobile/tablet) ── */
.wookit-drawer-handle {
    display: none;
}

/* ── Overlay backdrop (appended to body via JS) ── */
.wookit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s;
    -webkit-tap-highlight-color: transparent;
    pointer-events: none;
}
.wookit-overlay-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ── Mobile & Tablet: bottom drawer ── */
@media (max-width: 1024px) {
    .wookit-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        min-width: 100%;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        transform-origin: bottom center;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.28);
        transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.28s;
        z-index: 10001;
        background: var(--wookit-surface-alt);
    }
    .wookit-open .wookit-dropdown,
    .wookit-dropdown-open {
        transform: translateY(0);
    }

    /* Drawer handle */
    .wookit-drawer-handle {
        display: flex;
        justify-content: center;
        padding: 10px 0 8px;
        cursor: grab;
        -webkit-tap-highlight-color: transparent;
    }
    .wookit-drawer-handle::after {
        content: '';
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--wookit-border);
    }

    /* Drawer body — unified card */
    .wookit-drawer-body {
        background: var(--wookit-surface);
        border-radius: var(--wookit-radius-md);
        margin: 0 0 10px;
        overflow: hidden;
    }

    /* Body scroll lock */
    body.wookit-drawer-open {
        overflow: hidden;
        touch-action: none;
    }
}