/*
 * Mobile Header Utilities v3
 *
 * Hard-isolated mobile drawer presentation for CTA / Booking / Language.
 * This file intentionally uses unique class names so Elementor/theme button
 * skins and the legacy mobile utility CSS cannot affect these controls.
 */

.acgh-header .acgh-mobile-v3-actions {
    display: none;
}

@media (max-width: 767px) {
    .acgh-header .acgh-inner > .acgh-actions {
        display: none !important;
    }

    .acgh-header .acgh-mobile-actions:not(.acgh-mobile-v3-actions) {
        display: none !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-actions {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 18px 0 0 !important;
        padding: 18px 0 0 !important;
        border-top: 1px solid #e8eef7 !important;
        background: transparent !important;
        overflow: visible !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-cta {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-controls {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 10px 0 0 !important;
        padding: 0 !important;
        direction: inherit !important;
        box-sizing: border-box !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-trigger,
    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-trigger:hover,
    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-trigger:focus,
    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-trigger:active {
        -webkit-appearance: none !important;
        appearance: none !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 50px !important;
        margin: 0 !important;
        padding: 9px 11px !important;
        border: 1px solid #dbe7f6 !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: #22324a !important;
        font-family: inherit !important;
        font-size: 13px !important;
        font-style: normal !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        letter-spacing: normal !important;
        text-align: center !important;
        text-decoration: none !important;
        text-transform: none !important;
        direction: inherit !important;
        cursor: pointer !important;
        box-shadow: 0 5px 16px rgba(15, 23, 42, .05) !important;
        transform: none !important;
        outline: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-trigger:hover,
    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-trigger:focus-visible {
        border-color: #b9d3f8 !important;
        background: #f7faff !important;
        background-color: #f7faff !important;
        color: #1769e0 !important;
        box-shadow: 0 7px 18px rgba(23, 105, 224, .10) !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-trigger.is-active,
    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-trigger.is-active:hover,
    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-trigger.is-active:focus {
        border-color: #8fbaf2 !important;
        background: #edf5ff !important;
        background-color: #edf5ff !important;
        color: #1769e0 !important;
        box-shadow: 0 8px 20px rgba(23, 105, 224, .12) !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-trigger:focus-visible {
        outline: 2px solid #1769e0 !important;
        outline-offset: 2px !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-icon {
        display: block !important;
        flex: 0 0 30px !important;
        width: 30px !important;
        height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
        box-shadow: none !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-label {
        display: block !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: inherit !important;
        font: inherit !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-panels {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-panel {
        position: static !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: auto !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: min(320px, 42dvh) !important;
        margin: 8px 0 0 !important;
        padding: 8px !important;
        border: 1px solid #e1e9f4 !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: #22324a !important;
        direction: inherit !important;
        text-align: start !important;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .10) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-panel[hidden] {
        display: none !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-panel::before,
    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-panel::after {
        display: none !important;
        content: none !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-panel .acgh-utility-menu {
        display: grid !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-panel .acgh-utility-link,
    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-panel .acgh-utility-link:visited {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 9px 10px !important;
        border: 0 !important;
        border-radius: 9px !important;
        background: transparent !important;
        background-color: transparent !important;
        color: #22324a !important;
        text-decoration: none !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-panel .acgh-utility-link:hover,
    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-panel .acgh-utility-link:focus-visible,
    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-panel .acgh-utility-link[aria-current="true"] {
        background: #f1f6fd !important;
        background-color: #f1f6fd !important;
        color: #1769e0 !important;
        outline: none !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-panel .acgh-language-code {
        background: #eef3f9 !important;
        color: #64748b !important;
    }
}

@media (max-width: 420px) {
    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-actions {
        margin-top: 16px !important;
        padding-top: 16px !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-controls {
        gap: 6px !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-trigger {
        gap: 6px !important;
        padding-inline: 8px !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-icon {
        flex-basis: 28px !important;
        width: 28px !important;
        height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
    }

    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-label {
        font-size: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-trigger,
    .acgh-header .alsarhan-menu-panel .acgh-mobile-v3-panel .acgh-utility-link {
        transition: none !important;
    }
}