/* ========================================
   CRITICAL FIX: Force login/profile button visibility on ALL screens
   Bootstrap's responsive classes hide elements below 576px (sm breakpoint)
   ======================================== */

/* Override Bootstrap's display utilities - MUST be at top with !important */
header.main-header .pull-right {
    display: flex !important;
}

/* Ensure all child elements are visible */
header.main-header .pull-right>* {
    display: flex !important;
}

/* Force user nav widget to always display */
.rt-user-nav-widget {
    display: block !important;
}

/* Force login/register button to always display */
header.main-header #open-signin-signup-popup,
header.main-header .rt-btn.book-btn {
    display: flex !important;
}

/* Hide navbar toggler on XL and larger screens (1200px+) */
@media (min-width: 1200px) {
    header.main-header .navbar-toggler {
        display: none !important;
    }
}

/* ========================================
   RESPONSIVE FIXES FOR MOBILE/TABLET HEADER
   ======================================== */

/* Fix for medium devices (tablets, small laptops) */
@media (max-width: 1199px) {
    header.main-header .pull-right {
        gap: 8px !important;
    }

    header.main-header .call-btn {
        font-size: 12px;
        padding: 8px 12px !important;
    }

    header.main-header .rt-btn span.icon {
        width: 25px;
        height: 25px;
    }

    .rt-user-nav-widget .toggle-btn {
        border-width: 2px;
    }

    .rt-user-nav-widget .toggle-btn img {
        width: 30px;
        height: 30px;
    }
}

/* Fix for tablets and mobile devices */
@media (max-width: 991px) {
    header.main-header .pull-right {
        margin-top: 0 !important;
        flex-wrap: nowrap;
        gap: 6px !important;
    }

    header.main-header .call-btn {
        font-size: 11px;
        padding: 6px 10px !important;
        white-space: nowrap;
    }

    header.main-header .rt-btn.book-btn {
        font-size: 12px;
        padding: 8px 12px !important;
    }

    .rt-user-nav-widget {
        position: relative;
    }

    .rt-user-nav-widget .user-dropdown {
        min-width: 250px;
        right: 0;
        top: calc(100% + 10px);
        position: fixed !important;
        z-index: 9999 !important;
    }
}

/* Fix for mobile devices */
@media (max-width: 767px) {
    header.main-header .container {
        gap: 10px !important;
    }

    header.main-header .navbar-brand img {
        max-width: 80px;
    }

    header.main-header .pull-right {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        margin-top: 0 !important;
        gap: 8px !important;
        flex-shrink: 0;
    }

    /* Show call button on mobile but with smaller text */
    header.main-header .call-btn {
        display: flex !important;
        font-size: 10px;
        padding: 6px 8px !important;
    }

    header.main-header .rt-btn.book-btn,
    header.main-header #open-signin-signup-popup {
        font-size: 11px;
        padding: 8px 10px !important;
        white-space: nowrap;
    }

    header.main-header .rt-btn.book-btn span.icon,
    header.main-header #open-signin-signup-popup span.icon {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }

    .rt-user-nav-widget {
        position: relative;
        z-index: 10000;
    }

    .rt-user-nav-widget .toggle-btn {
        border-width: 2px;
        position: relative;
        z-index: 10001;
    }

    .rt-user-nav-widget .toggle-btn img {
        width: 32px;
        height: 32px;
    }

    .rt-user-nav-widget .user-dropdown {
        min-width: 220px;
        right: 0;
        top: calc(100% + 8px);
        position: fixed !important;
        z-index: 10002 !important;
        transform: translateX(0) !important;
    }

    .rt-user-nav-widget .user-dropdown.show {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .rt-user-nav-widget .user-dropdown .dropdown-header {
        padding: 10px;
    }

    .rt-user-nav-widget .user-dropdown .dropdown-header img {
        width: 35px;
        height: 35px;
    }

    .rt-user-nav-widget .user-dropdown .dropdown-header span {
        font-size: 16px;
    }

    /* Ensure navbar toggler is visible */
    header.main-header .navbar-toggler {
        display: flex !important;
        order: 3;
        margin-left: 0;
    }
}

/* Fix for very small mobile devices */
@media (max-width: 480px) {
    header.main-header .navbar-brand img {
        max-width: 70px;
    }

    header.main-header .pull-right {
        gap: 6px !important;
    }

    header.main-header .call-btn {
        font-size: 9px;
        padding: 5px 6px !important;
    }

    header.main-header .rt-btn.book-btn,
    header.main-header #open-signin-signup-popup {
        font-size: 10px;
        padding: 6px 8px !important;
    }

    .rt-user-nav-widget .toggle-btn img {
        width: 28px;
        height: 28px;
    }

    .rt-user-nav-widget .user-dropdown {
        min-width: 200px;
    }
}

/* Hide header phone number on very small screens (below 452px) */
@media (max-width: 451px) {

    /* Hide phone number in header */
    header.main-header .call-btn {
        display: none !important;
    }

 /* IMPORTANT: Also hide in sticky header when scrolling */
    header.main-header.sticky-fixed .call-btn {
        display: none !important;
    }
    
    /* Make offcanvas-body a flex container */
    .offcanvas-body {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Show phone number in mobile menu at the bottom */
    .mobile-contact-link {
        display: block !important;
        margin-top: auto;
        padding: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        order: 999;
        /* Push to bottom */
    }

    /* Ensure menu items appear first */
    .offcanvas-body ul.main-menu {
        order: 1;
    }

    .mobile-contact-link .rt-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 12px 20px !important;
        font-size: 14px;
    }
}

/* Hide mobile contact link on larger screens */
@media (min-width: 452px) {
    .mobile-contact-link {
        display: none !important;
    }
}

/* Fix sticky header on mobile - SHOW CALL BUTTON */
@media (max-width: 991px) {
    header.main-header.sticky-fixed {
        padding: 5px 0;
    }

    header.main-header.sticky-fixed .pull-right {
        margin-top: 0 !important;
    }

    header.main-header.sticky-fixed .navbar-brand {
        display: block !important;
    }

    header.main-header.sticky-fixed .navbar-brand img {
        max-width: 70px;
    }

    /* IMPORTANT: Show call button in sticky header */
    header.main-header.sticky-fixed .call-btn {
        display: flex !important;
        /*font-size: 11px;*/
        /*padding: 6px 10px !important;*/
    }
}

/* Override: Hide call button in sticky header on very small screens */
@media (max-width: 451px) {
    header.main-header.sticky-fixed .call-btn {
        display: none !important;
    }
}

/* Ensure proper z-index for dropdowns on mobile */
@media (max-width: 991px) {
    .rt-user-nav-widget {
        z-index: 10000 !important;
    }

    .rt-user-nav-widget .user-dropdown {
        z-index: 10002 !important;
    }

    /* Ensure dropdown appears above everything */
    body.dropdown-open {
        overflow: visible !important;
    }
}

/* Additional fix for dropdown positioning on scroll */
@media (max-width: 767px) {
    header.main-header.sticky-fixed .rt-user-nav-widget .user-dropdown {
        position: absolute !important;
        top: calc(100% + 5px);
        right: 0;
    }
}