/* =========================================
   Theme 1: Trust & Diagnostics (Default)
   ========================================= */
:root, [data-theme="trust"] {
    --bs-primary: #1A365D;
    --bs-primary-rgb: 26, 54, 93;
    --bs-secondary: #718096;
    --bs-body-bg: #F7FAFC;
    --bs-dark: #0f2038; 
    --bs-dark-rgb: 15, 32, 56;
    --custom-light-gray: #EDF2F7;
}

/* =========================================
   Theme 2: Performance & Speed
   ========================================= */
[data-theme="performance"] {
    --bs-primary: #E53E3E; 
    --bs-primary-rgb: 229, 62, 62;
    --bs-secondary: #A0AEC0;
    --bs-body-bg: #FFFFFF;
    --bs-dark: #1A202C;
    --bs-dark-rgb: 26, 32, 44;
    --custom-light-gray: #dbdbdb;
}

/* =========================================
   Theme 3: Industrial & Heavy Duty
   ========================================= */
[data-theme="industrial"] {
    --bs-primary: #D69E2E; 
    --bs-primary-rgb: 214, 158, 46;
    --bs-secondary: #A0AEC0;
    --bs-body-bg: #EDF2F7;
    --bs-dark: #2D3748;
    --bs-dark-rgb: 45, 55, 72;
    --custom-light-gray: #E2E8F0;
}
.bg-light-gray {
    background-color: var(--custom-light-gray) !important;
}
.bg-white {
    background-color: #fff !important;
}
body {
    background-color: var(--bs-body-bg);
    color: var(--bs-dark);
    font-family: 'Inter', sans-serif;
}
h1, h2, h3, h4, h5, h6, .modal-title, .btn-primary {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}
h1 {
   font-size: 52px !important;
}
h3 {
        margin-bottom: 40px !important;
}
.bg-dark {
    background-color: rgb(17 24 32) !important;
}
.section-padding { padding: 140px 0; }
.bg-light-gray { background-color: #f8f9fa; }

/* Desktop Center Logo Nav */
.navbar-brand-center { font-size: 1.5rem; font-weight: bold; letter-spacing: 1px; }
.nav-link { font-weight: 500; text-transform: uppercase; font-size: 13px; color: #fff; }

/* Calendar */
#calendar { max-width: 900px; margin: 0 auto; background: rgba(255, 255, 255, 0.7); padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.fc-event { cursor: pointer; }

/* Masonry Grid CSS */
.masonry-grid { column-count: 3; column-gap: 1.5rem; }
.masonry-item { break-inside: avoid; margin-bottom: 1.5rem; display: inline-block; width: 100%; }
@media (max-width: 992px) { .masonry-grid { column-count: 2; } }
@media (max-width: 576px) { .masonry-grid { column-count: 1; } }

/* General Utilities */
.hero-section {
        background: url('https://100r.bg/images/homepage/heroVolvosFrontPointing.webp') center/cover;
        color: #fff; 
        padding: 180px 0; 
}
.service-card { transition: transform 0.3s ease; border-radius: 10px; overflow: hidden; }
.service-card:hover { transform: translateY(-5px); }
.gallery-img { width: 100%; border-radius: 8px; cursor: pointer; transition: opacity 0.3s; 
height: 316px; 
    object-fit: cover;
}
.gallery-img:hover { opacity: 0.8; }
.navbar-brand-center img { max-width: 100%; }

/* Reviews Horizontal Scroller */
.reviews-scroller {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    /* Smooth scrolling behavior */
    scroll-behavior: smooth;
    /* Custom scrollbar */
    scrollbar-width: thin; 
    scrollbar-color: var(--bs-secondary) var(--bs-light);
}

.reviews-scroller::-webkit-scrollbar {
    height: 8px;
}
.reviews-scroller::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 4px;
}
.reviews-scroller::-webkit-scrollbar-thumb {
    background: #adb5bd;
    border-radius: 4px;
}

.review-card-wrapper {
    flex: 0 0 auto;
    scroll-snap-align: start;
    /* Mobile: 1 item visible */
    width: 85%; 
}

.reviews-scroller {
    /* Keep your existing styles */
    cursor: grab;
}

.reviews-scroller:active {
    cursor: grabbing;
}

/* Add this to prevent text highlighting while dragging */
.reviews-scroller.is-dragging {
    user-select: none;
}

.hp-wrapper {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* Import the fonts at the top of your CSS if you haven't put them in the HTML <head> */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Montserrat:wght@500;600;700&display=swap');

/* Main Form Typography */
#bookingForm {
    font-family: 'Inter', sans-serif;
}

/* Make the title punchy and premium */
.modal-title, .booking-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #111;
}

/* Crisp, all-caps labels */
#bookingForm .form-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
    margin-bottom: 0.4rem;
}

/* Clean inputs with sharp focus states */
#bookingForm .form-control {
    font-family: 'Inter', sans-serif;
    border: 1px solid #dcdcdc;
    border-radius: 2px; /* Very subtle rounding */
    padding: 0.75rem 1rem;
    background-color: #fcfcfc;
    box-shadow: none;
    transition: all 0.2s ease-in-out;
}

#bookingForm .form-control:focus {
    border-color: #111;
    background-color: #fff;
    outline: none;
    box-shadow: none; /* Kills the default blue Bootstrap glow */
}

/* Strong, authoritative submit button */
#bookingForm .btn-primary {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1rem;
    border-radius: 2px;
    background-color: #1852a3; /* Deep Volvo-ish blue */
    border: none;
    transition: background-color 0.2s ease;
}

#bookingForm .btn-primary:hover {
    background-color: #123d7a;
}
.volvoHeroImage {
       margin-bottom: 42px;       
}
#mainNavbar {
    background-color: transparent;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
#services img {
        max-height: 138px;
        margin-bottom: 25px;
}
.inner-shadow {
       box-shadow: inset 0 0px 25px rgb(42 56 67); 
    border-radius: 8px;
}
.white {
        color: #fff;
}
.light-btn {
        background: #fff;
}
.hide-scrollbar {
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar { 
    display: none;
}
.cta {
    color: #fff;
    background: #1852a3;
    border-color: #1852a3;
}

.footerReviewButton {
        display: block;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    background: #1852a3;
    padding: 12px;
    border-radius: 8px;
    margin-top: 20px;
    max-width: 293px;
}
.footerContainer {
        padding: 100px 0 50px 0;
}
.text-grey {
       color: #cacaca; 
}

.text-red {
       color: #dc3545;     
}
footer li {
        margin-bottom: 10px;
}
.bg-imageNewsletterStrip {
       background: url(https://100r.bg/images/homepage/heroVolvos.png) center / cover;
           padding-top: 9rem !important;
    padding-bottom: 9rem !important;
}
.darkVolvoBack {
    background: url(https://100r.bg/images/homepage/volvoDark.webp) center / cover;
}
 .card {
    background: rgba(255, 255, 255, 0.7);
 }
 .fc-toolbar-title {
    text-transform: capitalize;
}
.fc .fc-daygrid-day.fc-day-today {
    background-color: rgb(0 0 0);
    border: 1px solid #000;
}
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
        font-weight: bold;
    font-size: 16px;
    color: #fff;
}
.fc-daygrid-day-number {
    color: #000;
    text-decoration: none;
}
.fc .fc-col-header-cell-cushion {
    text-transform: capitalize;
    color: #000;
    text-decoration: none;
}
#bookingForm .form-label {
    color: #000 !important;
}
#bookingFormCard .p-4 {
    padding: 1.2rem !important;
}
#reviews {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9)), url(https://100r.bg/images/homepage/road.webp) center / cover;
}
.review-card-wrapper .card {
    background: rgba(255, 255, 255, 0.8) !important;
}
.review-card-wrapper .text-secondary {
        color: #424242 !important;
}
[data-bs-theme=dark] .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.aboutHeroSection {
    padding: 100px 0;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://100r.bg/images/about/aboutHero.webp) left / cover;
    padding-top: 200px;
    margin-top: 80px;
}
.service-card .card-body {
        background: #fff;
}
.comingSoon {
    position: relative;
    pointer-events: none;
    color: #a7a7a7;
}
.comingSoon:after {
    content: "Очаквайте скоро";
    position: absolute;
    font-size: 8px;
    top: -7px;
    right: 7px;
    background: #fff;
    color: #000;
    padding: 0px 3px;
    border-radius: 10px;
}

/* MOBILE STARTS */


@media (min-width: 992px) {
    .mobileViber {
        display: none;
    }
    .review-card-wrapper { width: 30%; }
}
@media (min-width: 768px) {
    .review-card-wrapper { width: 45%; }
}

@media (max-width: 768px) {
    .offcanvas-body .navbar-nav {
        gap: 10px;
    }
    .comingSoon:after {
        right: auto;
        left: 0;
    }
}

@media (max-width: 820px) {
    .navbar-brand img {
        max-width: 130px;
    }
}
@media (max-width: 768px) {
    /* Hides Sunday and Saturday columns */
    .fc-day-sun, 
    .fc-day-sat {
        display: none !important;
    }
    .footerReviewButton {
            margin: 0 auto;
    }
    .aboutHeroSection {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://100r.bg/images/about/aboutHero.jpg) left center / cover no-repeat;
        background-position-x: 12%;
        padding-top: 320px;
        padding-bottom: 38px
    }
}
@media (max-width: 650px) {
    .aboutHeroSection {
        background-position-x: 14%;
        margin-top: 75px;
    }
}
@media (max-width: 600px) {
    .fc .fc-toolbar.fc-header-toolbar {
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 20px;
    }
    .aboutHeroSection {
        background-position-x: 14%;
        padding-top: 169px;
        margin-top: 85px;
        padding-bottom: 21px;
    }
}
@media (max-width: 540px) {
    .navbar-brand img {
        max-width: 130px;
    }
    h1 {
        font-size: 40px !important;
    }
}