/* ================================================================
   PRICING DROPDOWN - INDUSTRY-STANDARD OVERLAY APPROACH
   ================================================================
   CRITICAL REQUIREMENTS (GOOGLE/STRIPE/AWS BEHAVIOR):
   ✓ Dropdown is an OVERLAY - never participates in layout flow
   ✓ Hero height NEVER changes when dropdown opens
   ✓ Uses position: absolute (desktop) / fixed (mobile)
   ✓ Animations use ONLY opacity + transform (no height/max-height)
   ✓ Works identically in LTR and RTL modes
   ================================================================ */

/* ================================================================
   BASE WRAPPER - ESTABLISHES POSITIONING CONTEXT
   ================================================================ */
.pricing-dropdown-wrapper {
    /* Positioning context for absolute dropdown */
    position: relative;

    /* Layout */
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
    /* RTL-safe centering */

    /* Stacking - MUST be above pricing section (z-index: 10) */
    z-index: 500;
}

/* ================================================================
   DROPDOWN BUTTON - STAYS IN NORMAL FLOW
   ================================================================ */
.pricing-dropdown-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block: 16px;
    padding-inline: 24px;

    /* Appearance */
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;

    /* Typography */
    font-size: 16px;
    font-weight: 600;
    text-align: start;
    /* RTL-safe */

    /* Effects */
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Transition */
    transition: background 0.2s ease, border-color 0.2s ease;
}

.pricing-dropdown-btn:hover,
.pricing-dropdown-btn.active {
    background: rgba(255, 255, 255, 0.15);
    border-color: #00b19a;
}

/* Chevron icon */
.pricing-dropdown-btn i:last-child {
    margin-inline-start: auto;
    /* RTL-safe */
    font-size: 14px;
    transition: transform 0.2s ease;
}

.pricing-dropdown-btn.active i:last-child {
    transform: rotate(180deg);
}

/* ================================================================
   DROPDOWN MENU - ABSOLUTE OVERLAY (NEVER AFFECTS LAYOUT)
   ================================================================
   CRITICAL: This is an OVERLAY positioned OUTSIDE document flow.
   Opening/closing does NOT change hero section height.
   ================================================================ */
.pricing-dropdown-menu {
    /* CRITICAL: Absolute positioning - removes from layout flow */
    position: absolute;
    top: calc(100% + 12px);
    inset-inline: 0;
    /* RTL-safe left/right */

    /* Hidden state - use opacity + transform, NOT height */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;

    /* Appearance */
    background: #fff;
    border-radius: 16px;
    padding: 8px;

    /* Shadows & borders */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(0, 0, 0, 0.05);

    /* Flex layout for items */
    display: flex;
    flex-direction: column;

    /* SCROLLABLE: Limit height and allow scrolling */
    max-height: 300px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* Stacking - above everything */
    z-index: 1000;

    /* ALLOWED animation properties ONLY */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

/* ================================================================
   EXPANDED STATE - OVERLAY VISIBLE
   ================================================================ */
.pricing-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* ================================================================
   DROPDOWN ITEMS
   ================================================================ */
.pricing-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block: 14px;
    padding-inline: 16px;

    /* Appearance */
    color: #0f172a;
    background: transparent;
    border-radius: 10px;

    /* Typography */
    font-size: 15px;
    font-weight: 500;

    /* Interaction */
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

/* Item icon */
.pricing-dropdown-item i {
    width: 24px;
    text-align: center;
    color: #00b19a;
    font-size: 16px;
    flex-shrink: 0;
}

/* Hover state */
.pricing-dropdown-item:hover {
    background: #f1f5f9;
    color: #00b19a;
}

/* Active/selected state */
.pricing-dropdown-item.active {
    background: #f0fdf9;
    color: #00b19a;
    font-weight: 600;
}

/* ================================================================
   MOBILE STYLES (≤768px) - FIXED OVERLAY BOTTOM SHEET
   ================================================================
   REQUIREMENTS:
   - NO animations (instant open/close)
   - position: fixed (full viewport overlay)
   - Does NOT push hero, does NOT resize background
   ================================================================ */
@media (max-width: 768px) {
    .pricing-dropdown-wrapper {
        max-width: 100%;
        width: 100%;
    }

    .pricing-dropdown-btn {
        padding-block: 14px;
        padding-inline: 20px;
        font-size: 15px;
        /* NO transitions on mobile */
        transition: none;
    }

    .pricing-dropdown-btn i:last-child {
        transition: none;
    }

    /* Mobile: Fixed bottom sheet overlay */
    .pricing-dropdown-menu {
        /* FIXED position - completely detached from layout */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;

        /* Full width */
        width: 100%;
        max-width: 100%;

        /* Appearance */
        border-radius: 24px 24px 0 0;
        padding: 20px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));

        /* Shadow with backdrop */
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);

        /* Hidden state - NO animation on mobile */
        opacity: 0;
        visibility: hidden;
        transform: translateY(100%);
        transition: none !important;

        /* Stacking */
        z-index: 10000;

        /* Max height with scroll */
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pricing-dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Backdrop overlay for mobile */
    .pricing-dropdown-menu.show::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }

    .pricing-dropdown-item {
        padding-block: 16px;
        padding-inline: 16px;
        font-size: 16px;
        transition: none;
        border-bottom: 1px solid #f1f5f9;
    }

    .pricing-dropdown-item:last-child {
        border-bottom: none;
    }

    .pricing-dropdown-item i {
        font-size: 18px;
        width: 28px;
    }
}

/* ================================================================
   TABLET STYLES (769px - 991px)
   ================================================================ */
@media (min-width: 769px) and (max-width: 991px) {
    .pricing-dropdown-wrapper {
        max-width: 360px;
    }
}

/* ================================================================
   DESKTOP STYLES (≥992px)
   ================================================================ */
@media (min-width: 992px) {
    .pricing-dropdown-wrapper {
        max-width: 340px;
    }
}

/* ================================================================
   RTL SUPPORT - LOGICAL PROPERTIES
   ================================================================ */
[dir="rtl"] .pricing-dropdown-btn {
    text-align: right;
}

[dir="rtl"] .pricing-dropdown-item {
    flex-direction: row;
}