/*
==============================================
  SKINCURA MOBILE RESPONSIVE ENHANCEMENTS
  Additional mobile-specific fixes
  Load this AFTER professional.css
==============================================
*/

/* ============================================
   TOP BAR MOBILE FIXES
============================================ */

/* Hide top bar on very small screens */
@media (max-width: 575px) {
    .top-bar {
        display: none !important;
    }
}

/* Top bar responsive for tablets and small desktops */
@media (min-width: 576px) and (max-width: 991px) {
    .top-bar {
        padding: 8px 0;
        font-size: 11px;
    }

    .top-bar ul li {
        display: block;
        margin-bottom: 5px;
    }

    /* Hide address on tablets, show only phone */
    .dlab-topbar-left ul li:nth-child(2) {
        display: none;
    }

    .dlab-topbar-right {
        text-align: right;
    }
}

/* ============================================
   MOBILE MENU OVERLAY
============================================ */

/* Backdrop overlay when menu is open */
@media (max-width: 991px) {

    /* Create overlay backdrop — pointer-events: none so it doesn't block menu clicks */
    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
        animation: fadeIn 0.3s;
        pointer-events: none;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* Prevent body scroll when menu open */
    body.menu-open {
        overflow: hidden;
    }
}

/* ============================================
   HAMBURGER ICON ANIMATION
============================================ */

/* HIDE toggle button on desktop by default */
.navbar-toggler {
    display: none !important;
}

/* SHOW toggle button ONLY on mobile devices */
@media (max-width: 991px) {
    .navbar-toggler {
        display: flex !important;
        border: none !important;
        background: transparent !important;
        padding: 12px 15px !important;
        position: relative !important;
        z-index: 1001 !important;
        margin-left: auto !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 8px !important;
        transition: all 0.3s ease !important;
    }

    /* .navbar-toggler:hover {
        background: rgba(127, 78, 89, 0.1) !important;
    } */

    .navbar-toggler:focus,
    .navbar-toggler:active {
        outline: none !important;
        box-shadow: none !important;
    }

    .navbar-toggler span {
        display: block !important;
        width: 28px !important;
        height: 3px !important;
        background: var(--primary) !important;
        margin: 4px 0 !important;
        transition: all 0.3s ease !important;
        border-radius: 3px !important;
    }
}

/* ============================================
   HEADER & NAVIGATION MOBILE FIXES
============================================ */

@media (max-width: 991px) {

    /* Site header - ensure solid background */
    .site-header {
        background: #ffffff !important;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08) !important;
        position: relative !important;
        z-index: 10000 !important;
    }

    /* Header wrapper */
    .site-header .main-bar-wraper {
        box-shadow: none !important;
    }

    /* Sticky header fixes */
    .sticky-header {
        position: relative !important;
        z-index: 10000 !important;
    }

    .sticky-header.is-fixed {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 10000 !important;
    }

    /* Logo sizing for mobile - LARGER SIZE */
    .logo-header img {
        max-height: 75px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .logo-header {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
    }

    .logo-header a {
        display: inline-block !important;
        line-height: 0 !important;
    }

    /* Main bar padding */
    .main-bar {
        padding: 15px 0 !important;
        position: relative !important;
        background: #ffffff !important;
        z-index: 10000 !important;
    }

    /* Ensure main bar container is positioned */
    .main-bar-wraper {
        position: relative !important;
        background: #ffffff !important;
        z-index: 10000 !important;
    }

    /* Main bar clearfix layout */
    .main-bar .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    /* Logo and toggle button layout */
    .main-bar .container>* {
        flex-shrink: 0 !important;
    }

    /* Container for proper menu positioning */
    .main-bar .container {
        position: relative !important;
        overflow: visible !important;
    }

    /* Allow menu to overflow container */
    .main-bar .container .navbar-collapse {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }

    /* Mobile menu improvements */
    .header-nav.navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #ffffff !important;
        background-clip: padding-box !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
        border-radius: 0 0 12px 12px !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 10px 0 20px 0 !important;
        z-index: 9999 !important;
        opacity: 1 !important;
        visibility: visible !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateX(0) !important;
    }

    /* Smooth scrollbar for mobile menu */
    .header-nav.navbar-collapse::-webkit-scrollbar {
        width: 5px !important;
    }

    .header-nav.navbar-collapse::-webkit-scrollbar-track {
        background: #f1f1f1 !important;
    }

    .header-nav.navbar-collapse::-webkit-scrollbar-thumb {
        background: var(--primary) !important;
        border-radius: 10px !important;
    }

    .header-nav.navbar-collapse::-webkit-scrollbar-thumb:hover {
        background: #555 !important;
    }

    /* Hide collapsed menu */
    .header-nav.navbar-collapse:not(.show) {
        display: none !important;
    }

    /* Make sure menu shows when open */
    .header-nav.navbar-collapse.show,
    .header-nav.navbar-collapse.collapsing {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }

    /* Force show menu items when navbar is shown */
    .header-nav.navbar-collapse.show .nav.navbar-nav,
    .header-nav.navbar-collapse.show .nav.navbar-nav>li,
    .header-nav.navbar-collapse.show .nav.navbar-nav>li>a {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Navigation list styling */
    .header-nav .nav.navbar-nav {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Menu items */
    .header-nav .nav>li {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid #f0f0f0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    .header-nav .nav>li:last-child {
        border-bottom: none !important;
    }

    /* Highlight active menu item */
    .header-nav .nav>li.active {
        background: rgba(127, 78, 89, 0.05) !important;
    }

    /* Add subtle left border for active items */
    .header-nav .nav>li.active::before {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 4px !important;
        background: var(--primary) !important;
    }

    /* Menu links */
    .header-nav .nav>li>a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 16px 20px !important;
        color: #333 !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        text-align: left !important;
        background: transparent !important;
        border: none !important;
        transition: all 0.3s ease !important;
    }

    .header-nav .nav>li>a:hover,
    .header-nav .nav>li.active>a {
        background: #f8f5f6 !important;
        color: var(--primary) !important;
        padding-left: 25px !important;
    }

    /* Add indicator for items with submenus */
    .header-nav .nav>li>a:has(.fa-chevron-down) {
        padding-right: 45px !important;
        position: relative !important;
    }

    /* Remove the underline effect on mobile */
    .header-nav .nav>li>a::before {
        display: none !important;
    }

    /* Dropdown icon */
    .header-nav .nav>li>a .fa-chevron-down {
        float: right !important;
        margin-top: 3px !important;
        transition: transform 0.3s ease !important;
        font-size: 12px !important;
        color: var(--primary) !important;
    }

    /* Rotate icon when menu is open */
    .header-nav .nav>li.open>a .fa-chevron-down {
        transform: rotate(180deg) !important;
    }

    /* Sub-menu mobile styling */
    .header-nav .nav>li .sub-menu {
        position: static !important;
        display: none;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        min-width: 100% !important;
        overflow: hidden !important;
        box-shadow: none !important;
        background: #f8f5f6 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
    }

    /* Show submenu when parent is active or has open class */
    .header-nav .nav>li.open>.sub-menu {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        opacity: 1 !important;
    }

    /* Remove hover effect on mobile - only use click */
    /* @media (hover: none) {
        .header-nav .nav>li:hover>.sub-menu {
            display: none !important;
        }
    } */

    /* Sub-menu items */
    .header-nav .nav>li .sub-menu li {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        padding: 0 !important;
    }

    .header-nav .nav>li .sub-menu li:last-child {
        border-bottom: none !important;
    }

    .header-nav .nav>li .sub-menu li a {
        display: block !important;
        padding: 14px 20px 14px 35px !important;
        color: #555 !important;
        font-size: 14px !important;
        background: transparent !important;
        position: relative !important;
        transition: all 0.3s ease !important;
    }

    /* Add bullet point indicator for submenu items */
    .header-nav .nav>li .sub-menu li a::before {
        content: "•" !important;
        position: absolute !important;
        left: 20px !important;
        color: var(--primary) !important;
        font-size: 16px !important;
    }

    .header-nav .nav>li .sub-menu li a:hover {
        background: rgba(127, 78, 89, 0.15) !important;
        color: var(--primary) !important;
        padding-left: 38px !important;
    }

    .header-nav .nav>li .sub-menu.left {
        left: auto !important;
        right: auto !important;
    }

    /* Book Now button in mobile menu */
    .header-nav .nav>li .booking-btn {
        display: inline-block !important;
        width: auto !important;
        margin: 15px 20px 10px !important;
        padding: 12px 30px !important;
        text-align: center !important;
        border-radius: 25px !important;
        box-shadow: 0 4px 15px rgba(127, 78, 89, 0.3) !important;
        font-weight: 600 !important;
        font-size: 14px !important;
    }

    .header-nav .nav>li .booking-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(127, 78, 89, 0.4) !important;
    }

    /* Visual separator between nav groups */
    .header-nav .nav.navbar-nav:first-child {
        border-bottom: 2px solid #f0f0f0 !important;
        padding-bottom: 8px !important;
        margin-bottom: 8px !important;
    }

    /* Fix for center header layout on mobile */
    .header.center .header-nav .nav.navbar-nav:first-child,
    .header.center .header-nav .nav.navbar-nav:last-child {
        padding: 0 !important;
        margin: 0 !important;
    }

    .header.center .header-nav .nav.navbar-nav:first-child {
        padding-bottom: 8px !important;
        margin-bottom: 8px !important;
    }

    /* Fix logo position for center layout on mobile */
    .header.center .logo-header.mostion {
        position: static !important;
        transform: none !important;
        margin: 0 !important;
    }

    /* Ensure proper spacing between logo and toggle */
    .header.center .main-bar .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        gap: 10px !important;
    }

    /* Logo wrapper positioning */
    .header.center .logo-header {
        order: 1 !important;
    }

    /* Toggle button positioning */
    .header.center .navbar-toggler {
        order: 2 !important;
    }

    /* Menu positioning */
    .header.center .header-nav {
        order: 3 !important;
        width: 100% !important;
    }
}

@media (max-width: 575px) {

    /* Extra small screens */
    .logo-header img {
        max-height: 60px !important;
    }

    .navbar-toggler {
        padding: 10px 12px !important;
    }

    .navbar-toggler span {
        width: 25px !important;
        height: 2.5px !important;
    }

    .main-bar {
        padding: 12px 0 !important;
    }
}

/* Medium mobile devices */
@media (min-width: 576px) and (max-width: 767px) {
    .logo-header img {
        max-height: 80px !important;
    }
}

/* Tablets and larger mobiles */
@media (min-width: 768px) and (max-width: 991px) {
    .logo-header img {
        max-height: 85px !important;
    }

    .main-bar {
        padding: 18px 0 !important;
    }
}

/* ============================================
   FLOATING ELEMENTS MOBILE OPTIMIZATION
============================================ */

@media (max-width: 991px) {

    /* Floating CTA buttons - smaller on mobile */
    .floating-cta a {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .floating-cta {
        bottom: 80px;
        right: 15px;
        gap: 8px;
    }
}

@media (max-width: 575px) {

    /* Extra small screens */
    .floating-cta a {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .floating-cta {
        bottom: 70px;
        right: 10px;
    }
}

/* Vertical booking button mobile positioning */
@media (max-width: 991px) {
    .booking-vertical-btn {
        left: 15px;
        font-size: 12px;
        padding: 12px 24px;
    }
}

@media (max-width: 575px) {
    .booking-vertical-btn {
        left: 10px;
        font-size: 11px;
        padding: 10px 20px;
        border-radius: 0 0 15px 15px;
    }

    .booking-vertical-btn::before {
        font-size: 12px;
        margin-right: 5px;
    }
}

/* ============================================
   CONTENT SECTIONS MOBILE OPTIMIZATION
============================================ */

@media (max-width: 767px) {

    /* Section headings */
    .section-head h2 {
        font-size: 26px !important;
        line-height: 1.3;
    }

    .section-head p {
        font-size: 14px;
        padding: 0 10px;
    }

    /* Content padding reduction */
    .content-inner,
    .content-inner-1,
    .content-inner-2,
    .content-inner-3 {
        padding: 30px 0 !important;
    }

    .section-full {
        padding: 30px 0 !important;
    }

    /* Service boxes */
    .icon-bx-wraper {
        padding: 25px 20px !important;
        margin-bottom: 20px;
    }

    .icon-lg {
        width: 60px !important;
        height: 60px !important;
    }

    .icon-lg i {
        font-size: 28px !important;
    }

    /* Text sizing */
    h5.dez-tilte {
        font-size: 18px !important;
    }

    .icon-content p {
        font-size: 13px !important;
        line-height: 1.6;
    }
}

@media (max-width: 575px) {

    /* Extra padding reduction for very small screens */
    .content-inner,
    .content-inner-1,
    .content-inner-2,
    .content-inner-3 {
        padding: 25px 0 !important;
    }

    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ============================================
   INSTAGRAM REELS MOBILE FIX
============================================ */

@media (max-width: 991px) {
    .instagram-reels-slider .item {
        padding: 8px;
    }

    .reel-embed-wrapper iframe {
        min-height: 400px !important;
    }
}

@media (max-width: 767px) {
    .reel-embed-wrapper iframe {
        min-height: 450px !important;
    }

    .reel-info {
        padding: 12px 15px;
        font-size: 12px;
    }

    .reel-info i {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    .reel-embed-wrapper iframe {
        min-height: 500px !important;
    }
}

/* ============================================
   BANNER / HERO SECTION MOBILE
============================================ */

@media (max-width: 767px) {
    .dlab-bnr-inr {
        min-height: 200px !important;
        padding: 30px 0;
    }

    .dlab-bnr-inr-entry h1 {
        font-size: 28px !important;
        margin-bottom: 10px;
    }

    .breadcrumb-row ul li {
        font-size: 12px;
    }
}

@media (max-width: 575px) {
    .dlab-bnr-inr {
        min-height: 180px !important;
    }

    .dlab-bnr-inr-entry h1 {
        font-size: 24px !important;
    }
}

/* ============================================
   FOOTER MOBILE OPTIMIZATION
============================================ */

@media (max-width: 991px) {
    .footer-top {
        padding: 40px 0 20px;
    }

    .footer-top .col-xl-2,
    .footer-top .col-xl-4,
    .footer-top .col-lg-2,
    .footer-top .col-lg-4 {
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .footer-top {
        padding: 30px 0 15px;
    }

    .footer-white .footer-top h6 {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .footer-white .widget_services ul li,
    .footer-white .widget_getintuch ul li {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .footer-white .widget_getintuch ul li {
        padding-left: 35px;
    }

    .footer-white .widget_getintuch ul li i {
        font-size: 16px;
    }

    .footer-bottom {
        padding: 15px 0;
        text-align: center !important;
    }

    .footer-bottom .col-lg-6 {
        text-align: center !important;
        margin-bottom: 10px;
    }
}

@media (max-width: 575px) {

    /* Footer columns full width on mobile */
    .footer-top [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
}

/* ============================================
   FORM ELEMENTS MOBILE
============================================ */

@media (max-width: 767px) {
    .form-control {
        padding: 12px 15px;
        font-size: 14px;
    }

    .site-button {
        padding: 12px 28px;
        font-size: 12px;
    white-space:break-spaces;

    }

    /* Contact form */
    .contact-area {
        padding: 25px !important;
    }

    .bg-gray {
        padding: 25px !important;
    }
}

/* ============================================
   TESTIMONIALS MOBILE
============================================ */

@media (max-width: 767px) {
    .testimonial-9 {
        padding: 25px 20px;
        margin: 5px;
    }

    .testimonial-9::before {
        font-size: 60px;
        top: 10px;
        left: 15px;
    }

    .testimonial-text p {
        font-size: 14px;
        line-height: 1.7;
    }

    .testimonial-name {
        font-size: 16px !important;
    }
}

/* ============================================
   ABOUT SECTION MOBILE
============================================ */

@media (max-width: 991px) {
    .spa-about-content {
        padding-left: 20px !important;
        margin-top: 30px;
    }

    .about-hair-content {
        margin-bottom: 30px;
    }

    .about-hair-bx {
        margin-top: 30px;
        padding: 35px 25px !important;
    }
}

@media (max-width: 767px) {

    .spa-about-content h2,
    .about-hair-content h2 {
        font-size: 26px !important;
    }

    .spa-about-content p,
    .about-hair-content p {
        font-size: 14px;
        text-align: left;
    }

    .about-hair-bx h2 {
        font-size: 24px !important;
    }

    .about-hair-bx h4 {
        font-size: 18px;
    }
}

/* ============================================
   GALLERY MOBILE
============================================ */

@media (max-width: 767px) {
    .dlab-gallery-box {
        margin-bottom: 20px;
    }
}

/* ============================================
   TRAINING PROGRAMS MOBILE
============================================ */

@media (max-width: 767px) {
    .icon-bx-wraper.p-lr15 {
        padding: 20px 15px 25px !important;
    }

    .icon-bx-wraper h6 {
        font-size: 16px !important;
    }
}

/* ============================================
   TABLE RESPONSIVENESS
============================================ */

@media (max-width: 767px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ============================================
   IMAGE RESPONSIVENESS
============================================ */

img {
    max-width: 100%;
    height: auto;
}

/* Video responsive */
@media (max-width: 767px) {
    .fullwidthbanner-container video {
        object-fit: cover;
        min-height: 300px;
    }
}

@media (max-width: 575px) {
    .fullwidthbanner-container video {
        min-height: 250px;
    }
}

/* ============================================
   OWL CAROUSEL MOBILE
============================================ */

@media (max-width: 767px) {
    .owl-carousel .owl-nav {
        display: none !important;
    }

    .owl-carousel .owl-dots {
        margin-top: 20px !important;
    }
}

/* ============================================
   SCROLL TO TOP BUTTON MOBILE
============================================ */

@media (max-width: 767px) {
    .scroltop {
        width: 45px !important;
        height: 45px !important;
        font-size: 16px !important;
        bottom: 20px !important;
        right: 15px !important;
    }
}

@media (max-width: 575px) {
    .scroltop {
        width: 40px !important;
        height: 40px !important;
        bottom: 15px !important;
        right: 10px !important;
    }
}

/* ============================================
   PREVENT HORIZONTAL SCROLL
============================================ */

body {
    overflow-x: hidden !important;
}

.container-fluid {
    overflow-x: hidden;
}

/* ============================================
   TOUCH OPTIMIZATION
============================================ */

/* Larger touch targets for mobile */
@media (max-width: 767px) {

    a,
    button {
        /* min-height: 44px; */
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Exceptions for text links */
    p a,
    li a {
        min-height: auto;
        min-width: auto;
        display: inline;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION FIXES
============================================ */

@media (max-width: 991px) and (orientation: landscape) {
    .dlab-bnr-inr {
        min-height: 250px !important;
    }

    .booking-vertical-btn {
        display: none !important;
    }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
============================================ */

/* Focus states for keyboard navigation */
@media (max-width: 767px) {

    a:focus,
    button:focus,
    input:focus,
    textarea:focus,
    select:focus {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }
}

/* ============================================
   PRINT STYLES (BONUS)
============================================ */

@media print {

    .floating-cta,
    .booking-vertical-btn,
    .scroltop,
    .top-bar,
    .header-nav,
    .navbar-toggler,
    footer {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
    }
}