/* 

    Saloon Home - Premium Barbershop Stylesheet

    Aesthetic: Modern, Dark, Luxury

*/



:root {

    --primary-color: #ffffff;

    --bg-color: #050505;

    --text-color: #ffffff;

    --accent-color: #888888;

    --font-main: 'Outfit', sans-serif;

    --transition: all 0.3s ease;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    background-color: var(--bg-color);

    color: var(--text-color);

    font-family: var(--font-main);

    line-height: 1.6;

    overflow-x: hidden;

}



.container {

    width: 100%;

    padding: 0 5%;

}



/* Header Styles */

.main-header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    padding: 30px 0;

    z-index: 1000;

    background: #ffffff !important;

    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;

}



.main-header .logo img {

    filter: invert(1);

}



.main-header .nav-menu ul li a {

    color: #000000 !important;

    font-weight: 600;

}



header.main-header .header-cta a.btn.btn-outline,

header.main-header .mobile-nav-footer a.btn.btn-outline,

body header.main-header .header-cta a.btn.btn-outline {

    background-color: transparent !important;

    color: #000000 !important;

    border: 1px solid #000000 !important;

    font-weight: 700 !important;

}



header.main-header .header-cta a.btn.btn-outline:hover,

header.main-header .mobile-nav-footer a.btn.btn-outline:hover,

body header.main-header .header-cta a.btn.btn-outline:hover {

    background-color: #000000 !important;

    color: #ffffff !important;

}



header.main-header .header-cta a.btn.btn-primary,

header.main-header .mobile-nav-footer a.btn.btn-primary,

body header.main-header .header-cta a.btn.btn-primary {

    background-color: #000000 !important;

    color: #ffffff !important;

    border: 1px solid #000000 !important;

    font-weight: 700 !important;

}



header.main-header .header-cta a.btn.btn-primary:hover,

header.main-header .mobile-nav-footer a.btn.btn-primary:hover,

body header.main-header .header-cta a.btn.btn-primary:hover {

    background-color: #c8a97e !important;

    color: #000000 !important;

    border-color: #c8a97e !important;

}



.main-header .mobile-toggle .bar {

    background-color: #000000 !important;

}



.header-cta {

    display: flex;

    align-items: center;

    gap: 15px;

}



.mobile-nav-footer {

    display: none;

    margin-top: 40px;

    width: 100%;

    padding: 0 20px;

}



.header-wrapper {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo img {

    height: 40px;

    width: auto;

}



.nav-menu ul {

    display: flex;

    list-style: none;

    gap: 40px;

}



.nav-menu ul li a {

    color: var(--text-color);

    text-decoration: none;

    font-size: 13px;

    letter-spacing: 2px;

    font-weight: 400;

    opacity: 0.7;

    transition: var(--transition);

}



.nav-menu ul li a:hover {

    opacity: 1;

}



/* Buttons */

.btn {

    display: inline-block;

    padding: 15px 30px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition: var(--transition);

}



.btn-primary {

    background-color: var(--primary-color);

    color: #000;

}



.btn-primary:hover {

    background-color: #ddd;

    transform: translateY(-2px);

}



.btn-outline,

.latepoint-book-button,

.latepoint-customer-login-button {

    background-color: transparent !important;

    color: var(--text-color) !important;

    border: 1px solid rgba(255, 255, 255, 0.3) !important;

    padding: 12px 25px !important;

    font-family: var(--font-main) !important;

    font-size: 14px !important;

    font-weight: 600 !important;

    letter-spacing: 1px !important;

    text-transform: uppercase !important;

    cursor: pointer !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    transition: all 0.3s ease !important;

}



.btn-outline:hover,

.latepoint-book-button:hover,

.latepoint-customer-login-button:hover {

    background-color: #fff !important;

    color: #000 !important;

    border-color: #fff !important;

}



/* Hero Section */

.hero-slider {

    height: calc(100vh - 100px);

    /* margin-top: 100px; */
    margin-top: 75px;

    display: flex;

    align-items: center;

    position: relative;

    background-image: url('../images/chair.png');

    background-repeat: no-repeat;

    background-position: right center;

    background-size: cover;

}



.hero-content {

    display: flex;

    align-items: center;

    width: 100%;

    z-index: 2;

}



.hero-text {

    flex: 1;

    max-width: 60%;

}



.top-tag {

    display: block;

    font-size: 12px;

    letter-spacing: 4px;

    /* color: var(--accent-color); */
    color: #000;

    margin-bottom: 20px;

    text-transform: uppercase;

}



.hero-title {

    font-size: clamp(40px, 11vw, 160px);

    line-height: 0.85;

    font-weight: 900;

    margin-bottom: 25px;

    letter-spacing: -4px;

    text-transform: uppercase;

    color: #ffffff;

}



.hero-subtitle {

    font-size: clamp(18px, 4vw, 36px);

    color: rgba(255, 255, 255, 0.7);

    margin-bottom: 45px;

    letter-spacing: 0.5px;

    font-weight: 300;

}



/* Removed hero-image classes as image is now background */



/* Ticker Section */

.ticker-section {

    background-color: #080808;

    border-top: 1px solid rgba(255, 255, 255, 0.05);

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    padding: 20px 0;

    overflow: hidden;

    width: 100%;

    position: relative;

    display: flex;

}



.ticker-wrapper {

    display: flex;

    width: 100%;

}



.ticker-track {

    display: flex;

    white-space: nowrap;

    animation: tickerScroll 20s linear infinite;

}



.ticker-track span {

    font-size: 12px;

    letter-spacing: 4px;

    color: #666;

    text-transform: uppercase;

    font-weight: 400;

}



@keyframes tickerScroll {

    0% { transform: translateX(0); }

    100% { transform: translateX(-50%); }

}



/* About Section */

.about-section {

    width: 100%;

    background-color: var(--bg-color);

}



.about-container {

    display: flex;

    width: 100%;

}



.about-images {

    flex: 1;

    display: flex;

}



.img-col {

    flex: 1;

    height: 100%;

    border-right: 1px solid rgba(255,255,255,0.05);

}



.img-col img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    min-height: 500px;

}



.about-content {

    flex: 1;

    padding: 80px 8%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.section-title {

    font-size: 5vw;

    line-height: 0.9;

    font-weight: 900;

    /* margin-bottom: 40px; */

    letter-spacing: -2px;

    text-transform: uppercase;

    /* color: #ffffff; */
    color: #000;

}



.divider {

    width: 40px;

    height: 1px;

    background-color: rgba(255, 255, 255, 0.2);

    margin-bottom: 40px;

}



.about-content p {

    color: rgba(255, 255, 255, 0.5);

    font-size: 15px;

    margin-bottom: 25px;

    line-height: 1.8;

}



.btn.full-width {

    width: 100%;

    text-align: center;

    margin-top: 20px;

    background-color: #ffffff;

    color: #000;

}



.btn.full-width:hover {

    background-color: #dddddd;

}



/* Services Section */

.services-section {

    background-color: #0c0c0c;

    padding-top: 100px;

    border-top: 1px solid rgba(255, 255, 255, 0.05);

}



.services-header {

    padding: 0 5%;

    margin-bottom: 80px;

}



.services-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid rgba(255, 255, 255, 0.05);

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



.service-card {

    padding: 80px 10%;

    border-right: 1px solid rgba(255, 255, 255, 0.05);

}



.service-card:last-child {

    border-right: none;

}



.service-num {

    color: #666;

    font-size: 14px;

    display: block;

    margin-bottom: 40px;

    font-weight: 700;

}



.service-name {

    font-size: 20px;

    font-weight: 700;

    letter-spacing: 1.5px;

    margin-bottom: 40px;

    text-transform: uppercase;

    color: #ffffff;

}



.service-price {

    font-size: 56px;

    color: #ffffff;

    line-height: 1;

    font-weight: 300;

}



/* Access Section */

.access-section {

    background-color: var(--bg-color);

    padding-top: 100px;

    padding-bottom: 100px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;

}



.access-header {

    padding: 0 5%;

    margin-bottom: 60px;

}



.access-image-wrapper {

    width: 100%;

    padding: 0 5%;

}



.access-img {

    width: 100%;

    height: auto;

    display: block;

    border-radius: 4px;

}



/* Testimonials Section */

.testimonials-section {

    background-color: #0c0c0c;

    padding-top: 100px;

}



.testimonials-header {

    padding: 0 5%;

    margin-bottom: 80px;

}



.testimonials-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid rgba(255, 255, 255, 0.05);

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



.testimonial-card {

    padding: 80px 10%;

    border-right: 1px solid rgba(255, 255, 255, 0.05);

    display: flex;

    flex-direction: column;

}



.testimonial-card:last-child {

    border-right: none;

}



.stars {

    color: #000;

    font-size: 14px;

    letter-spacing: 4px;

    margin-bottom: 40px;

}



.quote {

    font-size: 18px;

    color: #000 !important;

    line-height: 1.8;

    margin-bottom: 50px;

    flex-grow: 1;

    font-weight: 300;

}



.author {

    font-size: 12px;

    letter-spacing: 2px;

    color: #666;

    text-transform: uppercase;

}



/* Footer Section */

.main-footer {

    background-color: #080808;

    border-top: 1px solid rgba(255, 255, 255, 0.05);

}



.footer-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



.footer-col {

    padding: 80px 10%;

    border-right: 1px solid rgba(255, 255, 255, 0.05);

}



.footer-col:last-child {

    border-right: none;

}



.hours-list {

    margin-top: 50px;

}



.hour-row {

    display: flex;

    justify-content: space-between;

    padding: 20px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



.hour-row span.day {

    font-size: 11px;

    letter-spacing: 2px;

    color: #666;

    text-transform: uppercase;

}



.hour-row span.time {

    font-size: 14px;

    color: #999;

}



.contact-info {

    margin-top: 50px;

    margin-bottom: 50px;

}



.contact-info p {

    color: #999;

    font-size: 15px;

    margin-bottom: 20px;

}



.footer-bottom {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 40px 5%;

    position: relative;

}



.footer-bottom .logo {

    position: absolute;

    left: 5%;

}



.footer-nav ul {

    display: flex;

    list-style: none;

    gap: 40px;

}



.footer-nav ul li a {

    color: #666;

    text-decoration: none;

    font-size: 11px;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition: var(--transition);

}



.footer-nav ul li a:hover {

    color: #fff;

}



/* Mobile Menu Toggle */

.mobile-toggle {

    display: none;

    background: transparent;

    border: none;

    cursor: pointer;

    z-index: 1001;

    padding: 10px;

}



.mobile-toggle .bar {

    display: block;

    width: 25px;

    height: 2px;

    margin: 5px auto;

    background-color: var(--text-color);

    transition: var(--transition);

}



.mobile-toggle.active .bar:nth-child(1) {

    transform: translateY(7px) rotate(45deg);

}



.mobile-toggle.active .bar:nth-child(2) {

    opacity: 0;

}



.mobile-toggle.active .bar:nth-child(3) {

    transform: translateY(-7px) rotate(-45deg);

}



/* Responsive */

@media (max-width: 1200px) {

    .container { padding: 0 40px; }

    .hero-title { letter-spacing: -2px; }

}



@media (max-width: 1024px) {

    .nav-menu { display: none; }

    .hero-slider { background-position: center right; }

    

    .services-grid, 

    .testimonials-grid, 

    .footer-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .service-card, .testimonial-card, .footer-col {

        padding: 60px 8%;

    }

    

    .service-card:nth-child(2) { border-right: none; }

    .service-card:nth-child(3) { border-top: 1px solid rgba(255, 255, 255, 0.05); grid-column: span 2; }

}



@media (max-width: 768px) {

    .main-header { padding: 15px 0; }

    .logo img { height: 32px; }

    

    .hero-slider {

        /* margin-top: 60px; */
        margin-top: 30px;

        height: auto;

        min-height: 600px;

        padding: 100px 0;

        background-position: center right 25%;

    }

    

    .hero-content { flex-direction: column; text-align: center; }

    .hero-text { max-width: 100%; }

    

    .hero-title { 

        font-size: clamp(48px, 15vw, 80px); 

        letter-spacing: -1px;

    }

    

    .hero-btns {

        display: flex;

        flex-direction: column;

        gap: 15px;

        align-items: center;

        width: 100%;

    }

    

    .btn { width: 100%; text-align: center; margin: 0 !important; }



    .header-cta { display: none; }

    

    .mobile-toggle { display: block; }

    

    .nav-menu {

        position: fixed;

        top: 0;

        right: -100%;

        width: 100%;

        height: 100vh;

        background: #ffffff;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        transition: right 0.5s cubic-bezier(0.77,0,0.175,1);

        z-index: 999;

    }

    

    .nav-menu.active { right: 0; }

    .nav-menu ul { flex-direction: column; text-align: center; gap: 35px; }

    .nav-menu ul li a { font-size: 24px; letter-spacing: 3px; color: #000000 !important; font-weight: 600; }

    

    .mobile-nav-footer {

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        gap: 15px;

        width: 100%;
        margin-top: 0px;

    }

    

    .mobile-nav-footer .btn {

        width: 100%;

        max-width: 300px;

        padding: 15px 30px;

        border-radius: 8px;

        font-weight: 700;

        text-transform: uppercase;

        font-size: 14px;

        letter-spacing: 1px;

    }

    

    .mobile-nav-footer .header-btn-left {

        background: #ffffff !important;

        color: #000000 !important;

        border: 1px solid #000000 !important;

    }

    

    .mobile-nav-footer .header-btn-right {

        background: #000000 !important;

        color: #ffffff !important;

        border: 1px solid #000000 !important;

    }

    

    .about-container { flex-direction: column; }

    .about-images { flex-direction: column; height: auto; }

    .img-col img { min-height: 350px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); }

    

    .about-content { padding: 60px 20px; align-items: center; text-align: center; }

    .section-title { font-size: clamp(32px, 10vw, 50px); margin-bottom: 25px; }

    

    .services-header, .access-header, .testimonials-header {

        text-align: center;

        margin-bottom: 30px;

        padding: 0 20px;

    }

    

    .services-grid, 

    .testimonials-grid, 

    .footer-grid {

        grid-template-columns: 1fr;

    }

    

    .service-card, 

    .testimonial-card, 

    .footer-col {

        border-right: none;

        border-bottom: 1px solid rgba(255, 255, 255, 0.05);

        padding: 60px 20px;

        text-align: center;

    }

    

    .service-price { font-size: 48px; }

    .service-card:nth-child(3) { grid-column: 1; }

    

   

    

    .footer-bottom .logo {

        position: relative;

        left: 0;

    }

    

    .footer-nav ul {

        flex-direction: column;

        gap: 15px;

        text-align: center;

    }

}



@media (max-width: 480px) {

    .container { padding: 0 15px; }

    .hero-title { font-size: 50px; }

    .hero-subtitle { font-size: 18px; }

    .section-title { font-size: 32px; }

}

@media (max-width: 1024px) {

    /* Details Page Responsive */

    .details-split {

        grid-template-columns: 1fr !important;

    }

    .details-sidebar {

        position: static !important;

        margin-top: 30px;

    }

    .gallery-grid {

        grid-template-columns: 1fr 1fr !important;

        grid-template-rows: repeat(3, 180px) !important;

    }

    .gallery-item.main {

        grid-row: span 2 !important;

        grid-column: span 2 !important;

    }

}



@media (max-width: 768px) {

    /* Results Page Map Toggle */

    .results-main {

        flex-direction: column !important;

    }

    .results-list {

        width: 100% !important;

        height: auto !important;

        overflow: visible !important;

    }

    .map-container {

        width: 100% !important;

        height: 300px !important;

        position: static !important;

    }

    

    /* Booking & Checkout Responsive */

    .slots-grid {

        grid-template-columns: repeat(3, 1fr) !important;

    }

    .staff-selection {

        grid-template-columns: repeat(2, 1fr) !important;

    }

    .checkout-wrapper .container > div {

        grid-template-columns: 1fr !important;

    }

    #identification-form > div {

        grid-template-columns: 1fr !important;

    }

    

    /* Details Page Header */

    .salon-details-wrapper h1 {

        font-size: 24px !important;

    }

    .salon-details-wrapper .btn-primary {

        width: 100%;

        margin-top: 20px;

    }

    .salon-details-wrapper > .container > div:nth-child(2) {

        flex-direction: column;

        text-align: center;

    }

}



/* Premium Animations & Effects */

.service-item:hover, .salon-card:hover, .sidebar-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

}



.btn-primary {

    position: relative;

    overflow: hidden;

}



.btn-primary::after {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 300%;

    height: 300%;

    background: rgba(255,255,255,0.1);

    transform: translate(-50%, -50%) rotate(45deg);

    transition: 0.6s;

    opacity: 0;

}



.btn-primary:hover::after {

    opacity: 1;

    transform: translate(-50%, -50%) rotate(45deg) translateY(-100%);

}

/* =============================================

   LATEPOINT - LUXURY DARK THEME

   ============================================= */



/* 1. Container backgrounds → BLACK */

body .latepoint-w,

body .os-lightbox-content,

body .os-lightbox-content-i,

body .os-form-w,

body .os-customer-cabinet-login-w,

body .os-customer-login-w,

body .os-customer-wrapped-box {

    background-color: #0d0d0d !important;

    color: #ffffff !important;

}



/* 2. All text inside → WHITE */

body .latepoint-w p,

body .latepoint-w h1,

body .latepoint-w h2,

body .latepoint-w h3,

body .latepoint-w h4,

body .latepoint-w label,

body .latepoint-w span,

body .latepoint-w div,

body .latepoint-w .latepoint-customer-box-title,

body .latepoint-w .os-customer-login-w {

    color: #ffffff !important;

    background-color: transparent !important;

}



/* 3. Inputs → text BLACK (visible on white/light bg) */

body .latepoint-w input[type="text"],

body .latepoint-w input[type="email"],

body .latepoint-w input[type="password"],

body .latepoint-w input[type="tel"],

body .latepoint-w input[type="number"],

body .latepoint-w .os-form-control,

body .latepoint-w .os-field {

    color: #000000 !important;

    border: 1px solid #cccccc !important;

    padding: 14px 16px !important;

    border-radius: 8px !important;

    width: 100% !important;

    font-size: 14px !important;

    box-shadow: none !important;

}



body .latepoint-w input::placeholder {

    color: rgba(0, 0, 0, 0.45) !important;

}



body .latepoint-w input:-webkit-autofill,

body .latepoint-w input:-webkit-autofill:hover,

body .latepoint-w input:-webkit-autofill:focus {

    -webkit-text-fill-color: #000000 !important;

    border: 1px solid #cccccc !important;

}



body .latepoint-w input::placeholder {

    color: rgba(255, 255, 255, 0.35) !important;

}



/* 4. Continue / Primary Button → GOLD */

body .latepoint-w .latepoint-btn-primary:not(.latepoint-btn-link),

body .latepoint-w a.latepoint-btn-primary:not(.latepoint-btn-link),

body .latepoint-w .step-login-existing-customer-btn,

body .latepoint-w .latepoint-request-otp-button {

    background-color: #c8a97e !important;

    color: #000000 !important;

    border: none !important;

    font-weight: 700 !important;

    font-size: 13px !important;

    letter-spacing: 2px !important;

    text-transform: uppercase !important;

    height: 52px !important;

    border-radius: 8px !important;

    cursor: pointer !important;

    pointer-events: auto !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

}



body .latepoint-w .latepoint-btn-primary:not(.latepoint-btn-link) span,

body .latepoint-w a.latepoint-btn-primary:not(.latepoint-btn-link) span,

body .latepoint-w .step-login-existing-customer-btn span {

    color: #000000 !important;

    background: transparent !important;

}



body .latepoint-w .latepoint-btn-primary:not(.latepoint-btn-link):hover,

body .latepoint-w .step-login-existing-customer-btn:hover {

    /* background-color: #ffffff !important;

    color: #000000 !important; */

}



/* 5. Links → GOLD */

body .latepoint-w a {

    color: #c8a97e !important;

    background: transparent !important;

}



/* 6. Forgot password → small gold text link (NOT a button) */

body .latepoint-w .step-forgot-password-btn {

    display: inline !important;

    float: right !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    letter-spacing: 1px !important;

    text-transform: uppercase !important;

    color: #c8a97e !important;

    background: transparent !important;

    background-color: transparent !important;

    border: none !important;

    padding: 0 !important;

    height: auto !important;

    border-radius: 0 !important;

    margin-top: 8px !important;

    position: static !important;

    transform: none !important;

    text-decoration: none !important;

}



/* Password field wrapper */

body .latepoint-w .os-customer-login-password-fields-w {

    margin-bottom: 15px !important;

}



/* 7. Width */

body .os-lightbox-content {

    max-width: 520px !important;

    width: 95% !important;

}



/* 8. Close button */

body .os-lightbox-close {

    color: rgba(255,255,255,0.6) !important;

    background: transparent !important;

}



/* 9. Overlay */

body .os-lightbox-overlay {

    background: rgba(0, 0, 0, 0.85) !important;

    backdrop-filter: blur(6px) !important;

}



/* 10. Global Phone Code Dropdown Fix (ITI) */

.iti__country-list, 

.lp_iti__country-list {

    background-color: #111111 !important;

    background: #111111 !important;

    border: 1px solid rgba(255, 255, 255, 0.15) !important;

    border-radius: 8px !important;

    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;

    z-index: 9999999 !important;

    color: #ffffff !important;

}



.iti__country, 

.lp_iti__country {

    color: #ffffff !important;

    background: transparent !important;

    padding: 10px 15px !important;

}



.iti__country.iti__highlight, 

.lp_iti__country.lp_iti__highlight,

.iti__country:hover,

.lp_iti__country:hover {

    background-color: rgba(255, 255, 255, 0.1) !important;

    color: #ffffff !important;

}



.iti__country-name, 

.lp_iti__country-name,

.iti__dial-code, 

.lp_iti__dial-code {

    color: #ffffff !important;

}





/* =============================================

   ABSOLUTE OVERRIDE FOR HEADER BUTTONS (WHITE THEME)

   ============================================= */

body header.main-header a.btn.btn-outline,

body header.main-header .header-cta a.btn.btn-outline,

body header.main-header .mobile-nav-footer a.btn.btn-outline {

    background-color: transparent !important;

    color: #000000 !important;

    border: 2px solid #000000 !important;

    font-weight: 700 !important;

    border-radius: 8px !important;

    padding: 12px 28px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

}



body header.main-header a.btn.btn-outline:hover,

body header.main-header .header-cta a.btn.btn-outline:hover,

body header.main-header .mobile-nav-footer a.btn.btn-outline:hover {

    background-color: #000000 !important;

    color: #ffffff !important;

}



body header.main-header a.btn.btn-primary,

body header.main-header .header-cta a.btn.btn-primary,

body header.main-header .mobile-nav-footer a.btn.btn-primary {

    background-color: #000000 !important;

    color: #ffffff !important;

    border: 2px solid #000000 !important;

    font-weight: 700 !important;

    border-radius: 8px !important;

    padding: 12px 28px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

}



body header.main-header a.btn.btn-primary:hover,

body header.main-header .header-cta a.btn.btn-primary:hover,

body header.main-header .mobile-nav-footer a.btn.btn-primary:hover {

    background-color: #c8a97e !important;

    color: #000000 !important;

    border-color: #c8a97e !important;

}





/* =============================================

   ABSOLUTE OVERRIDE FOR EXACT HEADER BUTTONS

   ============================================= */

/* 1. Connexion / Mon Compte (White Background, Black Text) */

body a.header-btn-left,

body .main-header .header-cta a.header-btn-left,

body .main-header .mobile-nav-footer a.header-btn-left {

    background-color: #ffffff !important;

    color: #000000 !important;

    border: 1px solid #000000 !important;

    font-weight: 700 !important;

    border-radius: 8px !important;

    padding: 12px 25px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    text-transform: uppercase !important;

    font-size: 13px !important;

    letter-spacing: 1px !important;

    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;

}



body a.header-btn-left:hover,

body .main-header .header-cta a.header-btn-left:hover,

body .main-header .mobile-nav-footer a.header-btn-left:hover {

    background-color: #000000 !important;

    color: #ffffff !important;

}



/* 2. Prendre Rendez-vous (Black Background, White Text) */

body a.header-btn-right,

body .main-header .header-cta a.header-btn-right,

body .main-header .mobile-nav-footer a.header-btn-right {

    background-color: #000000 !important;

    color: #ffffff !important;

    border: 1px solid #000000 !important;

    font-weight: 700 !important;

    border-radius: 8px !important;

    padding: 12px 25px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    text-transform: uppercase !important;

    font-size: 13px !important;

    letter-spacing: 1px !important;

    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;

}



body a.header-btn-right:hover,

body .main-header .header-cta a.header-btn-right:hover,

body .main-header .mobile-nav-footer a.header-btn-right:hover {

    background-color: #c8a97e !important;

    color: #000000 !important;

    border-color: #c8a97e !important;

}





/* Hide top header CTA buttons on mobile/tablet (they appear in hamburger drawer instead) */

@media (max-width: 991px) {

    body .main-header .header-cta {

        display: none !important;

    }

}





/* =============================================

   ABSOLUTE OVERRIDE FOR FOOTER (WHITE THEME)

   ============================================= */

body .main-footer {

    background-color: #ffffff !important;

    /* border-top: 1px solid rgba(0, 0, 0, 0.1) !important; */

    color: #000000 !important;

}



body .main-footer .footer-grid {

    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;

}



body .main-footer .footer-col {

    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;

}



body .main-footer .footer-col:last-child {

    border-right: none !important;

}



body .main-footer .top-tag {

    color: #888888 !important;

}



body .main-footer h2.section-title,

body .main-footer .section-title {

    color: #000000 !important;

}



body .main-footer .hour-row {

    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;

}



body .main-footer .hour-row span.day {

    color: #555555 !important;

    font-weight: 600 !important;

}



body .main-footer .hour-row span.time {

    color: #000000 !important;

    font-weight: 500 !important;

}



body .main-footer .contact-info p {

    color: #222222 !important;

    font-weight: 500 !important;

}



body .main-footer .footer-bottom {

    background-color: #ffffff !important;

    /* border-top: 1px solid rgba(0, 0, 0, 0.08) !important; */

}



body .main-footer .footer-bottom .logo img {

    filter: invert(1) !important;

}



body .main-footer .footer-nav ul li a {

    color: #000000 !important;

    font-weight: 600 !important;

}



body .main-footer .footer-nav ul li a:hover {

    color: #c8a97e !important;

}



/* Footer Button (Prendre Rendez-vous) */

body .main-footer .footer-col a.btn.btn-primary {

    background-color: #000000 !important;

    color: #ffffff !important;

    border: 1px solid #000000 !important;

    font-weight: 700 !important;

    border-radius: 8px !important;

    padding: 14px 32px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    text-transform: uppercase !important;

    font-size: 14px !important;

    letter-spacing: 1px !important;

    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;

}



body .main-footer .footer-col a.btn.btn-primary:hover {

    background-color: #c8a97e !important;

    color: #000000 !important;

    border-color: #c8a97e !important;

}



.category-notif-mobile{
    display: none;
}



.os-form-group .latepoint-btn{
    background: linear-gradient(135deg, #c8a97e, #b8925f) !important;
    color: #000000 !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 100%;
    padding: 16px !important;
    transition: all 0.35s ease !important;
    box-shadow: 0 4px 15px rgba(200, 169, 126, 0.25) !important;
}

.os-form-group .latepoint-btn:hover{
    background: linear-gradient(135deg, #d8b98c, #a67c52) !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(200, 169, 126, 0.45) !important;
}

.os-form-group .latepoint-btn:active{
    transform: scale(0.98) !important;
}

.latepoint .customer-dashboard-tabs a{
    margin-right: 0px;
}

.latepoint .customer-dashboard-tabs a:after{
    content:  none;
}

.latepoint-dashboard-container .latepoint-w{
    padding: 20px;
    border-radius: 10px;
}

.customer-booking-bottom-actions .add-to-calendar-wrapper .latepoint-btn:hover{
background: linear-gradient(135deg, #d8b98c, #a67c52) !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(200, 169, 126, 0.45) !important;
}

.add-to-calendar-types {
    top: -140px;
    left: 70px;
}

.latepoint-lightbox-i  .latepoint-w .latepoint-booking-form-element .latepoint-form-w form{
background-color: #000;
}

.latepoint-lightbox-i .latepoint-w .latepoint-booking-form-element{
justify-content: center;
}

.customer-booking .latepoint-btn-danger:hover{
    color: #fff !important;
}
.latepoint-tab-triggers.customer-dashboard-tabs .latepoint-tab-trigger:hover{
    background: linear-gradient(135deg, #d8b98c, #a67c52) !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(200, 169, 126, 0.45) !important;
}

.latepoint-chat-box-w .os-booking-messages-input-w{
    /* bottom: -20px; */
    padding: 20px 115px 19px 25px;
}

.latepoint-chat-box-w .os-booking-messages-input-w .os-bm-send-btn{
    right: 10px;
}


/* .location-highlight-section{
    background-color: #fff;
} */

/* .services-list-wrapper{
    background-color: #fff !important;
} */


/* .services-list-section .category-name{
    color: #000;
}
.services-list-section .category-notif{
    color: #000;
} */




@media (max-width : 767px) {
  body .site-main.dashboard-wrapper .os-row .os-col-6{
        max-width: 100% !important;
        width: 100% !important;
    }

    body .latepoint-tab-content.tab-content-customer-info-form .os-row{
       flex-direction: column !important;
    align-items: start !important;
    }

    .os-form-group .latepoint-btn{
        width: 100%;
    }

    .latepoint-tab-content{
        padding: 0px;
    }

    .services-list-wrapper{
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    /* .location-modern-card{
        padding: 20px !important;
    } */

    .loc-header-w{
        margin-bottom: 15px !important;
    }

    .contact-info{
        margin: 15px 0;
    }

    .dashboard-wrapper{
        padding-top: 50px;
    }

    .selected-service-card{
        padding : 15px !important;
    }

    .about-section{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* .mobile-toggle .bar{
        background: #fff !important;
    } */

    .mobile-toggle{
        background-color: #fff;
    }

    .service-card, .testimonial-card, .footer-col{
        padding: 20px 20px;
    }

     .footer-bottom {

        flex-direction: column;

        gap: 0px;

        padding: 40px 20px;

    }

    .quote{
        margin-bottom: 20px;
        word-break: break-all;
    }
    .stars{
        margin-bottom: 20px;
    }

    .access-section{
        padding: 50px 0 !important;
    }

    .services-section{
        padding-top: 40px;
    }

    .about-section{
        padding: 50px 0 !important;
    }

    .service-name{
        margin-bottom: 20px;
    }

    .service-num{
       margin-bottom: 20px; 
    }

    .testimonials-section{
        padding-top: 20px;
    }

    body.home .service-card{
        border-right: 0px !important;
    }

    body .main-footer .footer-col{
        border-right: 0px !important; 
    }

    .staff-list-section{
        margin-bottom: 0px !important;
    }




}


.latepoint-w .os-form-buttons.os-flex{
    flex-wrap: wrap;
}

.latepoint-login-card-container .latepoint-w .latepoint-btn-primary:not(.latepoint-btn-link):hover, .latepoint-login-card-container .latepoint-w a.latepoint-btn-primary:not(.latepoint-btn-link):hover{
    background: linear-gradient(135deg, #d8b98c, #a67c52) !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(200, 169, 126, 0.45) !important;
}

body.home .main-header{
    background-color: #fff !important;
}

.nw-saloon-btn-outline{
    display: inline-block;
    padding: 15px 30px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: var(--transition);
    background-color: #fff;
    border: 1px solid #000;
    color: #000;
}

.nw-saloon-btn-outline:hover{
    background-color: #000;
    color: #fff;
    border-color: #000;
}



/* Custom Page Css */
.page-id-115 .page-hero{
    background-color: #fff !important;
}

.page-id-115 .top-tag{
    color: #000 !important;
}

.page-id-115 .entry-title{
    color: #000 !important;
}

.page-id-115 .divider-line{
    background-color: #000 !important;
}

.page-id-115 #primary{
    background-color: #fff !important;
}
.page-id-115 .latepoint-with-summary{
    background-color: #fff !important;
    max-width: 1010px !important;
    margin: 0 auto !important;
}

.page-id-115  .latepoint-desc-title{
   color: #000 !important; 
}

.page-id-115 .latepoint-desc-content{
   color: #000 !important;  
}

.page-id-115 .latepoint-questions{
color: #000 !important;  
}

.page-id-115  .latepoint-form-w{
    background-color: #fff !important;
}


.page-id-115  .latepoint-summary-w *{
    color: #000 !important;
    background-color: #fff !important;
}
.page-id-115  .current-step-customer *{
    color: #000 !important;
    background-color: #fff !important;
}

.page-id-115 .latepoint-side-panel *{
   color: #000 !important; 
}

#page-id-115 .latepoint-form-w div{
    background-color:#fff !important;
}
#page-id-115 .latepoint-form-w div *{
    background-color:#fff !important;
    color: #000 !important;
}

#page-id-115 .container {
    max-width: 100% !important;
}

/* Profile Page Start Css */

.page-id-70 .latepoint-w,
.page-id-70 .latepoint-w * ,
.page-id-70 .latepoint-w *::before,
.page-id-70 .latepoint-w *::after{
    background-color: transparent !important;
}


.page-id-70 .latepoint-w,
.page-id-70 .latepoint-w p,
.page-id-70 .latepoint-w span,
.page-id-70 .latepoint-w a,
.page-id-70 .latepoint-w h1,
.page-id-70 .latepoint-w h2,
.page-id-70 .latepoint-w h3,
.page-id-70 .latepoint-w h4,
.page-id-70 .latepoint-w h5,
.page-id-70 .latepoint-w h6,
.page-id-70 .latepoint-w label,
.page-id-70 .latepoint-w li,
.page-id-70 .latepoint-w input,
.page-id-70 .latepoint-w textarea,
.page-id-70 .latepoint-w select{
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}

.page-id-70 .latepoint-w .os-form-control,
.page-id-70 .latepoint-w input.os-form-control,
.page-id-70 .latepoint-w select.os-form-control,
.page-id-70 .latepoint-w textarea.os-form-control,
.page-id-70 .latepoint-w input[type="text"],
.page-id-70 .latepoint-w input[type="email"],
.page-id-70 .latepoint-w input[type="password"],
.page-id-70 .latepoint-w input[type="tel"],
.page-id-70 .os-form-item input,
.page-id-70 .os-form-item select,
.page-id-70 .os-form-item textarea,
.page-id-70 #customer_first_name,
.page-id-70 #customer_last_name,
.page-id-70 #customer_phone,
.page-id-70 #customer_email,
.page-id-70 #password,
.page-id-70 #password_confirmation {
    background: #fff !important;
    background-color: #fff !important;
    border: 1px solid #000 !important;
    border-radius: 10px !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    padding: 14px 18px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    width: 100% !important;
    height: auto !important;
    box-shadow: none !important;
    outline: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.page-id-70 .latepoint-tab-content{
    padding: 15px !important;
}

.page-id-70 .latepoint-lightbox-i {
    background-color: #fff !important;
    color: #000 !important;
}

.page-id-70  .latepoint-body{
    height: 500px !important;
    max-height: 600px !important;
    overflow-y: auto !important;
}

.page-id-70 .latepoint-footer .latepoint-btn{
    /* background-color: #000 !important; */
    color: #fff !important;
}


#page-id-115 .latepoint-body{
    height: 500px !important;
    overflow-y: auto !important;
    max-height: 600px !important; 
}

@media (max-width : 767px){
  .page-id-70 .latepoint-dashboard-container .latepoint-w{
    padding: 0px !important;
}

}

/* Profile Page End Css */