/* ═══════════════════════════════════════════════════════
   3D Beauty Salon — Mobile Optimisation
   Edit at Admin → Appearance → Custom CSS
   ═══════════════════════════════════════════════════════ */

/* ── Header top bar ── */
@media (max-width: 991px) {
    .header-top { display: none !important; }
}

@media (max-width: 991px) {

    /* Hide desktop nav, links-box (cart, book btn, info toggler, language switcher) */
    .main-header .header-upper .nav-outer { display: none !important; }
    .main-header .header-upper .links-box { display: none !important; }

    /* Compact the header height — logo and toggler stay on same float row */
    .main-header .main-box .logo-box {
        padding: 12px 0 !important;
    }
    .main-header .main-box .logo-box .logo img {
        height: 38px !important;
        width: auto !important;
    }

    /* Align hamburger to match the new compact logo height */
    .main-header .nav-toggler {
        margin-top: 12px !important;
        margin-bottom: 12px !important;
        margin-left: 12px !important;
    }
    .main-header .nav-toggler .hidden-bar-opener {
        width: 40px !important;
        height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }
}

/* ── Body content mobile ── */
@media (max-width: 767px) {
    h2 { font-size: 28px !important; }
    h3 { font-size: 24px !important; }
    .section-kt { padding: 50px 0 !important; }
    .auto-container { padding: 0 15px !important; }
    .banner-section .slide-item h1 { font-size: 32px !important; }
    .banner-section .slide-item .text { padding: 0 20px !important; }
    .inner-banner h1 { font-size: 30px !important; }
    .shop-card__img { height: 200px !important; }
    .shop-hp-card__image { height: 180px !important; }
    .shop-form .form-control { padding: 10px 12px !important; }
}

@media (max-width: 479px) {
    h2 { font-size: 24px !important; }
    .banner-section .slide-item h1 { font-size: 26px !important; }
    .banner-section .slide-item .content-box { height: 560px !important; }
    .shop-summary { padding: 16px !important; }
    .theme-btn { min-height: 44px; }
}
/* Account-area buttons — pink/white hover with proper contrast */
.vendor-panel .btn-style-one::before,
.vendor-panel .btn-style-two::before,
.shop-complaint-toggle::before { display: none !important; }

.vendor-panel .btn-style-one,
.vendor-panel .btn-style-two,
.shop-complaint-toggle {
    background: #fff !important;
    color: #e82276 !important;
    border: 2px solid #e82276 !important;
    border-radius: 30px !important;
    overflow: visible !important;
    padding: 10px 26px !important;
    transition: background .25s, color .25s, border-color .25s !important;
}

.vendor-panel .btn-style-one *,
.vendor-panel .btn-style-two *,
.shop-complaint-toggle * { color: inherit !important; }

.vendor-panel .btn-style-one:hover, .vendor-panel .btn-style-one:focus,
.vendor-panel .btn-style-two:hover, .vendor-panel .btn-style-two:focus,
.shop-complaint-toggle:hover, .shop-complaint-toggle:focus {
    background: #e82276 !important;
    color: #fff !important;
    border-color: #e82276 !important;
}

.vendor-panel .btn-style-one:hover *, .vendor-panel .btn-style-one:focus *,
.vendor-panel .btn-style-two:hover *, .vendor-panel .btn-style-two:focus *,
.shop-complaint-toggle:hover *, .shop-complaint-toggle:focus * { color: #fff !important; }

/* Fix hover "shaking" on the homepage services (menu-cat) rows */
.menu-cat .menucat-list:hover .image-box img {
    display: inline-block !important;
    visibility: hidden !important;
}

/* Primary pink buttons -> secondary (white bg, pink outline, pink text) on hover */
.btn-style-one::before { display: none !important; }
.btn-style-one .btn-wrap .text-two { display: none !important; }
.btn-style-one {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
}
.btn-style-one:hover .btn-wrap .text-one:first-child,
.btn-style-one:focus .btn-wrap .text-one:first-child { transform: none !important; }
.btn-style-one:hover,
.btn-style-one:focus {
    background-color: #fff !important;
    border-color: #e82276 !important;
    color: #e82276 !important;
}
.btn-style-one:hover *,
.btn-style-one:focus * { color: #e82276 !important; }

/* White buttons -> pink fill + white content on hover */
.btn-style-two::before { display: none !important; }
.btn-style-two .btn-wrap .text-two { display: none !important; }
.btn-style-two {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
}
.btn-style-two:hover .btn-wrap .text-one:first-child,
.btn-style-two:focus .btn-wrap .text-one:first-child { transform: none !important; }
.btn-style-two:hover,
.btn-style-two:focus {
    background-color: #e82276 !important;
    border-color: #e82276 !important;
    color: #fff !important;
}
.btn-style-two:hover *,
.btn-style-two:focus * { color: #fff !important; }

/* Booking form: the deposit box adds height — give the section bottom room so
   the submit button doesn't sit against/over the footer. */
.reserve-section.reserve-page { padding-bottom: 90px !important; }
.reserve-section.reserve-page .reserv-col .inner { min-height: 0 !important; }

/* Booking form: the theme locks this section to a fixed `height: 100vh` with
   display:flex (intended for the unused left/right split layout). Our page is a
   single centred column, so once the deposit box makes the form taller than the
   viewport the content overflows BELOW the fixed box and lands over the footer.
   Let the section grow with its content instead. */
.reserve-section.style-two.reserve-page {
    display: block !important;
    height: auto !important;
    min-height: 100vh !important;
    padding-bottom: 90px !important;
}
.reserve-section.style-two.reserve-page .reserv-col .inner { min-height: 0 !important; }

/* Homepage special-offer badge ("Mon-Sat"): smaller text as requested. Scoped to
   the offer banner only, so no other section is affected. */
.offer-banner .offer-number { font-size: 24px !important; }