:root {
    --vsb-page: #ffffff;
    --vsb-surface: #ffffff;
    --vsb-surface-soft: #f7f5f2;
    --vsb-surface-strong: #efece6;
    --vsb-ink: #171412;
    --vsb-muted: #6b655e;
    --vsb-line: rgba(23, 20, 18, 0.14);
    --vsb-accent: #e4002b;
    --vsb-accent-dark: #a30020;
    --vsb-accent-soft: #fcebeb;
    --vsb-gold: #e4002b;
    --vsb-charcoal: #171412;
    --vsb-success: #1f7a4d;
    --vsb-success-soft: #ebf8ef;
    --vsb-shadow: 0 12px 32px rgba(23, 20, 18, 0.10);
    --vsb-soft-shadow: 0 8px 20px rgba(23, 20, 18, 0.08);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--vsb-page);
    color: var(--vsb-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: inherit;
}

.vsb-luxury-page {
    width: min(1360px, 100%);
    margin: 0 auto;
    background: var(--vsb-page);
}

.vsb-luxury-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    align-items: center;
    gap: 24px;
    padding: 16px clamp(18px, 4vw, 54px);
    background: rgba(247, 243, 238, 0.92);
    border-bottom: 1px solid var(--vsb-line);
    backdrop-filter: blur(14px);
}

.vsb-luxury-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.vsb-luxury-brand img {
    max-width: 132px;
    max-height: 42px;
    object-fit: contain;
}

.vsb-hero-brand-badge {
    position: absolute;
    top: clamp(16px, 3vw, 28px);
    right: clamp(16px, 4vw, 40px);
    left: auto;
    z-index: 3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    max-width: 260px;
    padding: 6px;
    background: transparent;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
}

[dir="rtl"] .vsb-hero-brand-badge {
    right: auto;
    left: clamp(16px, 4vw, 40px);
}

.vsb-hero-brand-badge img {
    height: 40px;
    width: auto;
    max-width: 90px;
    object-fit: contain;
    display: block;
}

.vsb-brand-symbol {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--vsb-line);
    border-radius: 50%;
    background: #fff;
    color: var(--vsb-accent);
    font-weight: 900;
    letter-spacing: 0.08em;
}

.vsb-luxury-nav {
    display: flex;
    align-items: center;
    gap: 22px;
}

.vsb-luxury-nav a {
    color: var(--vsb-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
}

.vsb-luxury-nav a:hover {
    color: var(--vsb-accent);
}

.vsb-language-switch {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--vsb-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
}

.vsb-language-switch a {
    min-width: 36px;
    padding: 7px 10px;
    border-radius: 999px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    color: var(--vsb-muted);
}

.vsb-language-switch .is-active {
    background: var(--vsb-accent);
    color: #ffffff;
}

.vsb-luxury-hero {
    position: relative;
    min-height: 660px;
    display: grid;
    align-items: stretch;
    isolation: isolate;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.94), rgba(255,255,255,0.74), rgba(255,255,255,0.18)),
        radial-gradient(circle at 75% 30%, rgba(198,169,106,0.28), transparent 34%),
        linear-gradient(135deg, #f7f3ee 0%, #e9ded1 54%, #c8c0b6 100%);
    background-size: cover;
    background-position: center;
}

.vsb-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(247,243,238,0.05), rgba(247,243,238,0.72)),
        linear-gradient(90deg, rgba(247,243,238,0.82), rgba(247,243,238,0.22));
}

.vsb-hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) 430px;
    gap: 28px;
    align-items: center;
    padding: clamp(34px, 6vw, 76px) clamp(18px, 4vw, 54px);
}

.vsb-hero-copy {
    max-width: 720px;
}

.vsb-kicker {
    display: block;
    margin-bottom: 12px;
    color: var(--vsb-accent);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.vsb-hero-copy h1 {
    margin: 0;
    max-width: 720px;
    color: var(--vsb-ink);
    font-size: clamp(30px, 4.1vw, 54px);
    line-height: 0.96;
    letter-spacing: -0.055em;
}

.vsb-hero-copy p {
    max-width: 590px;
    margin: 20px 0 0;
    color: var(--vsb-muted);
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.7;
}

.vsb-hero-actions,
.vsb-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.vsb-primary-action,
.vsb-secondary-action,
.vsb-cookie-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    border-radius: 0;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: 0.01em;
}

.vsb-primary-action {
    background: var(--vsb-accent);
    color: #fff;
    border-color: var(--vsb-accent);
}

.vsb-primary-action:hover {
    background: var(--vsb-accent-dark);
    border-color: var(--vsb-accent-dark);
}

.vsb-primary-action:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.vsb-primary-action.is-disabled {
    opacity: 0.48;
    cursor: not-allowed;
    pointer-events: none;
}

.vsb-secondary-action {
    background: rgba(255,255,255,0.82);
    color: var(--vsb-ink);
    border-color: var(--vsb-line);
}

.vsb-appointment-glass {
    padding: 28px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255,255,255,0.82);
    box-shadow: var(--vsb-shadow);
    backdrop-filter: blur(18px);
}

.vsb-appointment-glass h2 {
    margin: 0;
    font-size: 28px;
    letter-spacing: -0.035em;
}

.vsb-appointment-glass p {
    margin: 12px 0 20px;
    color: var(--vsb-muted);
    line-height: 1.65;
}

.vsb-glass-steps {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

.vsb-glass-steps div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(255,255,255,0.72);
    border: 1px solid var(--vsb-line);
    color: var(--vsb-ink);
    font-weight: 800;
}

.vsb-glass-steps span {
    color: var(--vsb-accent);
    font-weight: 950;
}

.vsb-promo-strip {
    margin: -38px clamp(18px, 4vw, 54px) 0;
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 18px;
    align-items: center;
    padding: 20px 24px;
    background: #fff;
    border-left: 4px solid var(--vsb-gold);
    box-shadow: var(--vsb-soft-shadow);
}

.vsb-promo-strip span {
    color: var(--vsb-accent);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vsb-promo-strip strong {
    color: var(--vsb-ink);
    font-size: 18px;
    line-height: 1.45;
}

.vsb-care-section,
.vsb-services-section,
.vsb-booking-section,
.vsb-contact-section {
    margin: 44px clamp(18px, 4vw, 54px) 0;
}

.vsb-section-heading {
    max-width: 780px;
    margin-bottom: 22px;
}

.vsb-section-heading h2,
.vsb-booking-title h2,
.vsb-contact-section h2 {
    margin: 0;
    color: var(--vsb-ink);
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1.06;
    letter-spacing: -0.04em;
}

.vsb-care-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.vsb-care-grid article,
.vsb-service-row article,
.vsb-auth-card,
.vsb-booking-card,
.vsb-contact-section {
    background: var(--vsb-surface);
    border: 1px solid var(--vsb-line);
    box-shadow: var(--vsb-soft-shadow);
}

.vsb-care-grid article,
.vsb-service-row article {
    min-height: 190px;
    padding: 24px;
}

.vsb-care-grid article span {
    display: inline-block;
    margin-bottom: 24px;
    color: var(--vsb-gold);
    font-weight: 950;
}

.vsb-care-grid h3,
.vsb-service-row h3,
.vsb-auth-card h3,
.vsb-booking-card h3 {
    margin: 0;
    color: var(--vsb-ink);
    font-size: 22px;
    letter-spacing: -0.03em;
}

.vsb-care-grid p,
.vsb-service-row p,
.vsb-booking-title p,
.vsb-card-row p,
.vsb-contact-section p {
    margin: 10px 0 0;
    color: var(--vsb-muted);
    line-height: 1.65;
}

.vsb-service-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.vsb-service-row article {
    background: var(--vsb-surface-soft);
}

.vsb-booking-section {
    padding: 32px;
    background: #fff;
    border: 1px solid var(--vsb-line);
    box-shadow: var(--vsb-shadow);
}

.vsb-booking-title {
    position: relative;
    padding-inline-end: 160px;
}

.vsb-status-pill {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    min-width: 128px;
    padding: 10px 12px;
    border: 1px solid var(--vsb-line);
    background: var(--vsb-surface-soft);
}

.vsb-status-pill span {
    display: block;
    color: var(--vsb-muted);
    font-size: 12px;
    font-weight: 800;
}

.vsb-status-pill strong {
    display: block;
    margin-top: 3px;
}

.vsb-alert {
    margin: 18px 0;
    padding: 13px 15px;
    border: 1px solid #ead19a;
    background: #fff8e9;
    color: #70520e;
    font-weight: 800;
}

.vsb-alert-ok {
    border-color: #bbdfc7;
    background: #ebf8ef;
    color: #14633f;
}

.vsb-alert-error {
    border-color: #efb4b8;
    background: #fff0f1;
    color: #8f1f2f;
}

.vsb-hidden {
    display: none !important;
}

.vsb-auth-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 16px;
    margin-top: 24px;
}

.vsb-auth-card,
.vsb-booking-card {
    padding: 24px;
}

.vsb-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.vsb-auth-card label,
.vsb-form-grid label {
    display: grid;
    gap: 7px;
    margin-top: 14px;
    color: var(--vsb-ink);
    font-size: 13px;
    font-weight: 900;
}

.vsb-auth-card label span,
.vsb-form-grid label span {
    color: var(--vsb-muted);
    font-size: 12px;
}

.vsb-field-full {
    grid-column: 1 / -1;
}

input,
select,
textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid var(--vsb-line);
    background: #fff;
    color: var(--vsb-ink);
    outline: none;
}

textarea {
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--vsb-accent);
    box-shadow: 0 0 0 3px rgba(166, 25, 46, 0.10);
}

.vsb-booking-app {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.vsb-card-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.vsb-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.vsb-slot {
    padding: 13px;
    border: 1px solid var(--vsb-line);
    background: var(--vsb-surface-soft);
    cursor: pointer;
    text-align: start;
}

.vsb-slot strong {
    display: block;
    margin-bottom: 4px;
}

.vsb-slot span {
    color: var(--vsb-muted);
    font-size: 13px;
}

.vsb-slot-selected {
    border-color: var(--vsb-accent);
    background: #fff5f6;
    box-shadow: inset 0 0 0 2px rgba(166, 25, 46, 0.10);
}

.vsb-vehicle-thumb {
    display: block;
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 10px;
}

.vsb-empty {
    padding: 14px;
    border: 1px dashed var(--vsb-line);
    background: var(--vsb-surface-soft);
    color: var(--vsb-muted);
}

.vsb-bookings {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.vsb-contact-section {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
}

.vsb-contact-links {
    display: grid;
    gap: 8px;
    align-content: center;
}

.vsb-contact-links a {
    color: var(--vsb-accent);
    font-weight: 900;
    text-decoration: none;
}

.vsb-luxury-footer {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 28px clamp(18px, 4vw, 54px);
    color: var(--vsb-muted);
    font-size: 12px;
}

.vsb-cookie-bar {
    position: fixed;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    max-width: 880px;
    margin: 0 auto;
    padding: 16px 18px;
    background: var(--vsb-charcoal);
    border: 1px solid var(--vsb-accent);
    box-shadow: var(--vsb-shadow);
    color: #ffffff;
    backdrop-filter: blur(14px);
}

.vsb-cookie-btn {
    min-width: 96px;
    background: var(--vsb-accent);
    color: #fff;
    border-color: var(--vsb-accent);
}

/* RTL */
[dir="rtl"] body {
    font-family: Tahoma, Arial, "Segoe UI", sans-serif;
}

[dir="rtl"] .vsb-luxury-nav,
[dir="rtl"] .vsb-hero-actions,
[dir="rtl"] .vsb-glass-steps div,
[dir="rtl"] .vsb-card-row,
[dir="rtl"] .vsb-action-row,
[dir="rtl"] .vsb-contact-section,
[dir="rtl"] .vsb-luxury-footer {
    direction: rtl;
}

[dir="rtl"] .vsb-hero-copy h1,
[dir="rtl"] .vsb-hero-copy p,
[dir="rtl"] .vsb-section-heading,
[dir="rtl"] .vsb-booking-title,
[dir="rtl"] .vsb-auth-card,
[dir="rtl"] .vsb-booking-card {
    text-align: right;
}

[dir="rtl"] .vsb-promo-strip {
    border-left: 0;
    border-right: 4px solid var(--vsb-gold);
}

@media (max-width: 980px) {
    .vsb-luxury-header {
        grid-template-columns: 1fr auto;
    }

    .vsb-luxury-nav {
        grid-column: 1 / -1;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .vsb-hero-content,
    .vsb-auth-layout,
    .vsb-care-grid,
    .vsb-service-row {
        grid-template-columns: 1fr;
    }

    .vsb-luxury-hero {
        min-height: auto;
    }

    .vsb-promo-strip {
        margin-top: 0;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .vsb-luxury-header {
        position: relative;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .vsb-language-switch {
        justify-self: start;
    }

    .vsb-hero-content {
        padding: 96px 18px 34px;
    }

    .vsb-hero-copy h1 {
        font-size: 30px;
    }

    .vsb-appointment-glass,
    .vsb-booking-section,
    .vsb-auth-card,
    .vsb-booking-card,
    .vsb-contact-section {
        padding: 20px;
    }

    .vsb-booking-title {
        padding-inline-end: 0;
    }

    .vsb-status-pill {
        position: static;
        margin-top: 16px;
    }

    .vsb-form-grid {
        grid-template-columns: 1fr;
    }

    .vsb-cookie-bar {
        left: 10px;
        right: 10px;
        bottom: 10px;
        flex-direction: column;
        align-items: stretch;
    }
}

/* REDUCE_M4_ARABIC_FONT_SIZE_V1 */
[dir="rtl"] .vsb-hero-copy h1 {
    font-size: clamp(30px, 3.9vw, 50px);
    line-height: 1.08;
}

[dir="rtl"] .vsb-section-heading h2,
[dir="rtl"] .vsb-booking-title h2,
[dir="rtl"] .vsb-contact-section h2 {
    font-size: clamp(24px, 2.5vw, 34px);
    line-height: 1.15;
}


/* IMPROVE_M4_ARABIC_FONT_V2 */
[dir="rtl"] body,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
    font-family: "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Arial, sans-serif;
    font-weight: 400;
}

[dir="rtl"] .vsb-hero-copy h1 {
    font-family: "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Arial, sans-serif;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.14;
}

[dir="rtl"] .vsb-section-heading h2,
[dir="rtl"] .vsb-booking-title h2,
[dir="rtl"] .vsb-contact-section h2,
[dir="rtl"] .vsb-appointment-glass h2,
[dir="rtl"] .vsb-care-grid h3,
[dir="rtl"] .vsb-service-row h3,
[dir="rtl"] .vsb-auth-card h3,
[dir="rtl"] .vsb-booking-card h3 {
    font-family: "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.25;
}

[dir="rtl"] .vsb-primary-action,
[dir="rtl"] .vsb-secondary-action,
[dir="rtl"] .vsb-cookie-btn,
[dir="rtl"] .vsb-luxury-nav a,
[dir="rtl"] .vsb-glass-steps div,
[dir="rtl"] label {
    font-family: "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Arial, sans-serif;
    font-weight: 600;
}

[dir="rtl"] .vsb-kicker {
    font-weight: 650;
    letter-spacing: 0;
}

/* MOBILE_POLISH_EN_AR_BOOKING_V2 */
@media (max-width: 680px) {
    .vsb-luxury-header {
        padding: 10px 14px;
        gap: 8px;
    }

    .vsb-luxury-brand {
        justify-content: center;
        gap: 8px;
        font-size: 13px;
    }

    .vsb-luxury-brand img {
        max-width: 76px;
        max-height: 32px;
    }

    .vsb-hero-brand-badge {
        position: absolute;
        top: 14px;
        right: 14px;
        left: auto;
        gap: 8px;
        max-width: 150px;
    }

    [dir="rtl"] .vsb-hero-brand-badge {
        right: auto;
        left: 14px;
    }

    .vsb-hero-brand-badge img {
        height: 30px;
        max-width: 70px;
    }

    .vsb-luxury-nav {
        width: 100%;
        justify-content: center;
        gap: 12px;
        row-gap: 7px;
    }

    .vsb-luxury-nav a {
        font-size: 12px;
        font-weight: 600;
    }

    .vsb-language-switch {
        justify-self: center;
    }

    .vsb-hero-content {
        padding: 96px 14px 24px;
        gap: 16px;
    }

    .vsb-hero-copy h1 {
        font-size: clamp(27px, 8vw, 36px);
        line-height: 1.14;
        letter-spacing: -0.02em;
    }

    [dir="rtl"] .vsb-hero-copy h1 {
        font-size: clamp(26px, 7.4vw, 34px);
        line-height: 1.2;
        font-weight: 600;
    }

    .vsb-hero-copy p {
        font-size: 15px;
        line-height: 1.6;
    }

    .vsb-appointment-glass {
        padding: 17px;
    }

    .vsb-appointment-glass h2 {
        font-size: 23px;
        line-height: 1.22;
    }

    [dir="rtl"] .vsb-appointment-glass h2 {
        font-size: 23px;
        line-height: 1.28;
        font-weight: 600;
    }

    .vsb-section-heading h2,
    .vsb-booking-title h2,
    .vsb-contact-section h2 {
        font-size: clamp(23px, 6.7vw, 29px);
        line-height: 1.18;
    }

    [dir="rtl"] .vsb-section-heading h2,
    [dir="rtl"] .vsb-booking-title h2,
    [dir="rtl"] .vsb-contact-section h2 {
        font-size: clamp(22px, 6.2vw, 27px);
        line-height: 1.26;
        font-weight: 600;
    }

    .vsb-primary-action,
    .vsb-secondary-action {
        min-height: 42px;
        padding: 10px 14px;
        font-size: 14px;
    }

    .vsb-care-grid article,
    .vsb-service-row article,
    .vsb-auth-card,
    .vsb-booking-card,
    .vsb-contact-section {
        padding: 17px;
    }

    .vsb-cookie-bar {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 13px;
        font-size: 13px;
    }
}

/* HIDE_PUBLIC_STATUS_AND_ARABIC_LABEL_V1 */
.vsb-status-pill {
    display: none !important;
}

.vsb-language-switch a {
    min-width: 44px;
    padding-inline: 12px;
}

[dir="rtl"] .vsb-language-switch a[href="/vehicle-service-booking-ar"],
.vsb-language-switch a[href="/vehicle-service-booking-ar"] {
    min-width: 74px;
}

/* POWERED_BY_FOOTER_V1 */
.vsb-powered-footer {
    border-top: 1px solid rgba(35, 31, 28, 0.12);
    background: rgba(255, 255, 255, 0.82);
}

.vsb-powered-brand,
.vsb-powered-email {
    color: #2f2a26;
    text-decoration: none;
}

.vsb-powered-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.vsb-powered-brand img {
    width: 64px;
    height: auto;
    display: block;
}

.vsb-powered-brand strong {
    color: #e4002b;
}

.vsb-powered-email {
    font-weight: 700;
}

.vsb-powered-brand:hover,
.vsb-powered-email:hover {
    color: #e4002b;
}

@media (max-width: 680px) {
    .vsb-powered-footer {
        gap: 10px;
    }

    .vsb-powered-brand {
        justify-content: center;
        flex-wrap: wrap;
    }

    .vsb-powered-brand img {
        width: 58px;
    }
}

/* BOOKING_UX_HEADER_AUTH_V1 */
.vsb-account-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vsb-top-login,
.vsb-account-button {
    min-height: 40px;
    border: 1px solid rgba(35, 31, 28, 0.12);
    background: #ffffff;
    color: #2f2a26;
    text-decoration: none;
    font-weight: 800;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.vsb-top-login:hover,
.vsb-account-button:hover {
    color: #e4002b;
}

.vsb-account-menu {
    position: relative;
}

.vsb-account-button {
    cursor: pointer;
}

.vsb-account-caret {
    font-size: 12px;
    opacity: 0.7;
}

.vsb-account-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 230px;
    background: #ffffff;
    border: 1px solid rgba(35, 31, 28, 0.14);
    box-shadow: 0 18px 44px rgba(35, 31, 28, 0.14);
    padding: 8px;
    z-index: 20;
    display: none;
}

.vsb-account-menu.is-open .vsb-account-dropdown,
.vsb-account-menu:focus-within .vsb-account-dropdown {
    display: grid;
    gap: 4px;
}

.vsb-account-dropdown a,
.vsb-account-dropdown button,
.vsb-link-action {
    width: 100%;
    border: 0;
    background: transparent;
    color: #2f2a26;
    text-align: start;
    text-decoration: none;
    font-weight: 800;
    padding: 11px 12px;
    cursor: pointer;
}

.vsb-account-dropdown a:hover,
.vsb-account-dropdown button:hover,
.vsb-link-action:hover {
    background: rgba(228, 0, 43, 0.08);
    color: #e4002b;
}

.vsb-link-action {
    margin-top: 8px;
    border: 1px solid rgba(35, 31, 28, 0.14);
    display: inline-flex;
    justify-content: center;
    text-align: center;
}

.vsb-register-card.vsb-hidden {
    display: none !important;
}

@media (max-width: 680px) {
    .vsb-account-actions {
        width: 100%;
        justify-content: center;
        order: 4;
    }

    .vsb-top-login,
    .vsb-account-button {
        min-height: 36px;
        padding: 8px 12px;
        font-size: 12px;
    }

    .vsb-account-dropdown {
        inset-inline-end: auto;
        left: 50%;
        transform: translateX(-50%);
        min-width: 240px;
    }
}

/* BOOKING_LOGIN_POPUP_HTML_CSS_V1 */
.vsb-luxury-header .vsb-language-switch {
    width: auto !important;
    max-width: max-content;
    flex: 0 0 auto;
    justify-self: auto;
}

.vsb-luxury-header .vsb-language-switch a {
    min-width: 44px;
    padding-inline: 12px;
}

.vsb-luxury-header .vsb-language-switch a[href="/vehicle-service-booking-ar"] {
    min-width: 78px;
}

.vsb-booking-guest-cta {
    max-width: 520px;
    border: 1px solid rgba(35, 31, 28, 0.12);
    background: #fff;
    padding: 26px;
    margin-top: 22px;
    box-shadow: 0 18px 44px rgba(35, 31, 28, 0.06);
}

.vsb-booking-guest-cta h3 {
    margin: 0 0  auto !important;
    max-width: max-content;
    flex: 0 0 auto;
    justify-self: auto;
}

.vsb-luxury-header .vsb-language-switch a {
    min-width: 44px;
    padding-inline: 12px;
}

.vsb-luxury-header .vsb-language-switch a[href="/vehicle-service-booking-ar"] {
    min-width: 78px;
}

.vsb-booking-guest-cta {
    max-width: 520px;
    border: 1px solid rgba(35, 31, 28, 0.12);
    background: #fff;
    padding: 26px;
    margin-top: 22px;
    box-shadow: 0 18px 44px rgba(35, 31, 28, 0.06);
}

.vsb-booking-guest-cta h3 {
    margin: 0 0 8px;
    font-size: 26px;
}

.vsb-booking-guest-cta p {
    margin: 0 0 18px;
    color: #746d66;
}

.vsb-auth-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(28, 24, 21, 0.58);
    padding: 70px 18px 28px;
    overflow: auto;
    align-content: start;
    justify-content: center;
    grid-template-columns: minmax(280px, 560px);
}

.vsb-auth-modal.vsb-hidden {
    display: none !important;
}

.vsb-auth-modal.is-open {
    display: grid !important;
}

.vsb-auth-modal .vsb-auth-card,
.vsb-auth-modal .vsb-auth-modal-head {
    background: #fff;
}

.vsb-auth-modal-head {
    border: 1px solid rgba(35, 31, 28, 0.12);
    border-bottom: 0;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.vsb-auth-modal-head h3 {
    margin: 4px 0 0;
    font-size: 24px;
}

.vsb-modal-close {
    border: 1px solid rgba(35, 31, 28, 0.14);
    background: #fff;
    width: 42px;
    height: 42px;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    color: #2f2a26;
}

.vsb-modal-close:hover {
    color: #e4002b;
}

/* ERROR_MESSAGE_POPUP_V1 */
.vsb-error-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10050 !important;
    padding: 16px;
}

.vsb-error-popup-box {
    position: relative;
    background: #fff;
    border-radius: 10px;
    max-width: 420px;
    width: 100%;
    padding: 28px 22px 22px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
    text-align: start;
}

.vsb-error-popup-box p {
    margin: 0;
    line-height: 1.6;
    color: #2f2a26;
}

.vsb-error-popup-close {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    border: 1px solid rgba(35, 31, 28, 0.14);
    background: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: #2f2a26;
}

.vsb-error-popup-close:hover {
    color: #e4002b;
}

.vsb-confirm-popup-box p {
    margin-inline-end: 26px;
}

.vsb-confirm-popup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

/* CONFIRM_POPUP_CONTRAST_FIX_V1: the base button classes are tuned for the dark
   theme and become low-contrast when reused inside this white popup box */
.vsb-confirm-popup-actions .vsb-secondary-action {
    background: #f2f2f2 !important;
    color: #2f2a26 !important;
    border: 1px solid rgba(35, 31, 28, 0.18) !important;
}

.vsb-confirm-popup-actions .vsb-secondary-action:hover {
    background: #e6e6e6 !important;
}

.vsb-confirm-popup-actions .vsb-danger-action {
    background: #e4002b !important;
    border: 1px solid #e4002b !important;
    color: #ffffff !important;
}

.vsb-confirm-popup-actions .vsb-danger-action:hover {
    background: #a30020 !important;
}

.vsb-history-popup-box {
    max-width: 640px;
}

.vsb-history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
}

.vsb-history-table th,
.vsb-history-table td {
    border: 1px solid rgba(35, 31, 28, 0.14);
    padding: 8px 10px;
    text-align: start;
    font-size: 14px;
    color: #2f2a26;
}

.vsb-history-table thead th {
    background: #f5f2ec;
    font-weight: 700;
}

/* HISTORY_POPUP_CONTRAST_AND_BADGES_V1 */
.vsb-history-popup-box h3 {
    color: #2f2a26 !important;
    margin: 0;
}

.vsb-history-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-inline-end: 26px;
}

.vsb-history-popup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.vsb-history-popup-box {
    max-width: 820px;
    max-height: 80vh;
    overflow-y: auto;
}

.vsb-history-export-btn {
    background: #f2f2f2 !important;
    color: #2f2a26 !important;
    border: 1px solid rgba(35, 31, 28, 0.18) !important;
    padding: 8px 14px !important;
    min-height: 36px !important;
    font-size: 13px !important;
}

.vsb-history-export-btn:hover {
    background: #e6e6e6 !important;
}

.vsb-history-status {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid transparent;
}

.vsb-history-status.is-upcoming {
    background: rgba(212, 175, 55, 0.14);
    border-color: rgba(212, 175, 55, 0.5);
    color: #8a6d1a;
}

.vsb-history-status.is-completed {
    background: rgba(58, 158, 108, 0.12);
    border-color: rgba(58, 158, 108, 0.5);
    color: #1f7a4d;
}

.vsb-history-status.is-cancelled {
    background: rgba(228, 0, 43, 0.1);
    border-color: rgba(228, 0, 43, 0.4);
    color: #e4002b;
}

.vsb-history-status.is-neutral {
    background: rgba(35, 31, 28, 0.06);
    border-color: rgba(35, 31, 28, 0.2);
    color: #2f2a26;
}

/* MY_REQUESTS_PAGE_V1 */
.vsb-requests-filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.vsb-requests-tab {
    background: #f2f2f2;
    border: 1px solid rgba(35, 31, 28, 0.15);
    color: #2f2a26;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.vsb-requests-tab.is-active {
    background: #e4002b;
    border-color: #e4002b;
    color: #ffffff;
}

.vsb-request-card {
    background: #fff;
    border: 1px solid rgba(35, 31, 28, 0.12);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.vsb-request-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.vsb-request-card-head strong {
    color: #2f2a26;
    font-size: 15px;
}

.vsb-request-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #55504a;
    font-size: 13px;
}

.vsb-auth-modal .vsb-auth-card {
    box-shadow: none;
}

.vsb-auth-modal .vsb-register-card {
    margin-top: 12px;
}

@media (max-width: 680px) {
    .vsb-luxury-header .vsb-language-switch {
        width: auto !important;
        max-width: 180px;
        order: initial;
    }

    .vsb-luxury-header .vsb-language-switch a {
        font-size: 12px;
        min-width: 42px;
    }

    .vsb-auth-modal {
        padding: 54px 12px 22px;
        grid-template-columns: minmax(0, 1fr);
    }

    .vsb-auth-modal-head {
        padding: 15px;
    }

    .vsb-auth-modal-head h3 {
        font-size: 21px;
    }

    .vsb-booking-guest-cta {
        padding: 18px;
    }

    .vsb-booking-guest-cta h3 {
        font-size: 22px;
    }
}

/* PREVENT_AUTH_POPUP_AUTO_OPEN_V1 */
/* Old guest-load JS may remove vsb-hidden; modal must still stay closed unless explicitly opened. */
.vsb-auth-modal:not(.is-open) {
    display: none !important;
}

.vsb-auth-modal.is-open {
    display: grid !important;
}

/* CLEAN_FINAL_DARK_GREY_BOOKING_THEME_V6 */
/* One clean system: dark grey page, readable text, blended hero image, no separate photo panel. */

html,
body,
.vsb-page,
.vsb-main {
    background: #ffffff !important;
    color: #171412 !important;
}

/* Header */
.vsb-luxury-header {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(228, 0, 43, 0.16) !important;
    box-shadow: 0 8px 20px rgba(23, 20, 18, 0.08) !important;
}

.vsb-luxury-brand,
.vsb-luxury-brand strong {
    color: #171412 !important;
}

.vsb-luxury-nav a {
    color: rgba(23, 20, 18, 0.72) !important;
}

.vsb-luxury-nav a:hover {
    color: #e4002b !important;
}

.vsb-top-login,
.vsb-account-button {
    background: #ffffff !important;
    border: 1px solid rgba(228, 0, 43, 0.30) !important;
    color: #171412 !important;
}

.vsb-luxury-header .vsb-language-switch {
    background: #ffffff !important;
    border: 1px solid rgba(228, 0, 43, 0.24) !important;
}

.vsb-luxury-header .vsb-language-switch a {
    color: rgba(23, 20, 18, 0.70) !important;
}

.vsb-luxury-header .vsb-language-switch .is-active {
    background: #e4002b !important;
    color: #ffffff !important;
}

/* Hero: one blended background, no pseudo photo panels */
.vsb-luxury-hero {
    position: relative !important;
    min-height: clamp(560px, 70vh, 720px) !important;
    overflow: hidden !important;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.92) 34%, rgba(255,255,255,0.72) 58%, rgba(255,255,255,0.52) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.86) 100%),
        var(--vsb-hero-bg) !important;
    background-size: cover, cover, cover !important;
    background-position: center center, center center, center center !important;
    background-repeat: no-repeat !important;
    color: #171412 !important;
}

.vsb-luxury-hero::before,
.vsb-luxury-hero::after,
.vsb-hero-overlay {
    display: none !important;
    content: none !important;
}

.vsb-hero-inner {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 0.95fr) minmax(340px, 0.75fr) !important;
    gap: clamp(30px, 5vw, 76px) !important;
    align-items: center !important;
    min-height: inherit !important;
}

.vsb-hero-copy {
    grid-column: 1 !important;
    max-width: 760px !important;
    color: #171412 !important;
    opacity: 1 !important;
    text-shadow: 0 16px 42px rgba(23, 20, 18, 0.15) !important;
}

.vsb-hero-copy *,
.vsb-hero-copy h1,
.vsb-hero-copy p {
    opacity: 1 !important;
}

.vsb-hero-copy h1 {
    color: #171412 !important;
    font-size: clamp(44px, 5.2vw, 78px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.052em !important;
}

.vsb-hero-copy p {
    color: rgba(23, 20, 18, 0.76) !important;
    max-width: 620px !important;
}

.vsb-kicker,
.vsb-hero-copy .vsb-kicker,
.vsb-appointment-glass .vsb-kicker {
    color: #e4002b !important;
}

/* Hero service request card */
.vsb-appointment-glass {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    max-width: 460px !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.90) !important;
    border: 1px solid rgba(228, 0, 43, 0.24) !important;
    box-shadow: 0 26px 70px rgba(23, 20, 18, 0.16) !important;
    color: #171412 !important;
    backdrop-filter: blur(12px) saturate(115%) !important;
}

.vsb-appointment-glass h2 {
    color: #171412 !important;
}

.vsb-appointment-glass p {
    color: rgba(23, 20, 18, 0.70) !important;
}

.vsb-appointment-glass .vsb-steps div {
    background: rgba(23, 20, 18, 0.05) !important;
    border: 1px solid rgba(228, 0, 43, 0.16) !important;
    color: rgba(23, 20, 18, 0.86) !important;
}

.vsb-appointment-glass .vsb-steps span {
    color: #e4002b !important;
}

/* Buttons */
.vsb-primary-action {
    background: #e4002b !important;
    border-color: #e4002b !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(228, 0, 43, 0.18) !important;
}

.vsb-primary-action:hover {
    background: #a30020 !important;
    border-color: #a30020 !important;
}

.vsb-secondary-action,
.vsb-link-action {
    background: #f7f5f2 !important;
    border: 1px solid rgba(228, 0, 43, 0.22) !important;
    color: #171412 !important;
}

/* Main dark-grey page */
.vsb-main,
.vsb-care-section,
.vsb-service-section,
.vsb-booking-section {
    background: #ffffff !important;
    color: #171412 !important;
}

.vsb-section-heading h2,
.vsb-booking-title h2 {
    color: #171412 !important;
    opacity: 1 !important;
}

.vsb-care-grid h3,
.vsb-service-row h3,
.vsb-booking-card h3,
.vsb-booking-guest-cta h3 {
    color: #ffffff !important;
    opacity: 1 !important;
}

.vsb-section-heading p,
.vsb-booking-title p {
    color: rgba(23, 20, 18, 0.66) !important;
    opacity: 1 !important;
}

.vsb-care-grid p,
.vsb-service-row p,
.vsb-booking-card p,
.vsb-booking-guest-cta p {
    color: rgba(23, 20, 18, 0.66) !important;
    opacity: 1 !important;
}

/* Cards */
.vsb-care-card,
.vsb-care-grid > *,
.vsb-service-row,
.vsb-service-row article,
.vsb-booking-card,
.vsb-booking-guest-cta {
    background: #ffffff !important;
    border: 1px solid rgba(228, 0, 43, 0.15) !important;
    box-shadow: 0 22px 54px rgba(23, 20, 18, 0.10) !important;
    color: #171412 !important;
}

.vsb-care-card *,
.vsb-care-grid > * *,
.vsb-service-row *,
.vsb-service-row article *,
.vsb-booking-card *,
.vsb-booking-guest-cta * {
    opacity: 1 !important;
}

.vsb-care-card span,
.vsb-care-grid span,
.vsb-service-row span {
    color: #e4002b !important;
}

/* Promo strip */
.vsb-promo-strip {
    transform: none !important;
    background: #fcebeb !important;
    border: 1px solid rgba(228, 0, 43, 0.18) !important;
    color: #171412 !important;
    box-shadow: 0 18px 48px rgba(23, 20, 18, 0.10) !important;
}

.vsb-promo-strip strong,
.vsb-promo-strip p {
    color: #171412 !important;
}

/* Booking section */
.vsb-booking-section {
    border-top: 1px solid rgba(212, 177, 95, 0.08) !important;
}

.vsb-booking-guest-cta {
    max-width: 560px !important;
}

/* Contact */
.vsb-contact-section {
    background: #ffffff !important;
    border: 1px solid rgba(228, 0, 43, 0.15) !important;
    box-shadow: 0 22px 54px rgba(23, 20, 18, 0.10) !important;
    color: #171412 !important;
}

.vsb-contact-section h2 {
    color: #171412 !important;
}

.vsb-contact-section p {
    color: rgba(23, 20, 18, 0.66) !important;
}

.vsb-contact-section strong,
.vsb-contact-section a {
    color: #e4002b !important;
}

/* Forms and modal */
.vsb-auth-modal {
    background: rgba(0, 0, 0, 0.72) !important;
}

.vsb-auth-modal-head,
.vsb-auth-modal .vsb-auth-card {
    background: #ffffff !important;
    border-color: rgba(228, 0, 43, 0.20) !important;
    color: #171412 !important;
}

.vsb-auth-modal h3,
.vsb-auth-card h3 {
    color: #171412 !important;
}

.vsb-auth-card label span,
.vsb-booking-card label span {
    color: rgba(23, 20, 18, 0.74) !important;
}

.vsb-auth-card input,
.vsb-booking-card input,
.vsb-booking-card select,
.vsb-booking-card textarea {
    background: #ffffff !important;
    border-color: rgba(228, 0, 43, 0.20) !important;
    color: #171412 !important;
}

.vsb-auth-card input::placeholder,
.vsb-booking-card input::placeholder,
.vsb-booking-card textarea::placeholder {
    color: rgba(23, 20, 18, 0.40) !important;
}

.vsb-modal-close {
    background: #ffffff !important;
    border-color: rgba(228, 0, 43, 0.20) !important;
    color: #171412 !important;
}

/* Footer */
.vsb-footer,
.vsb-site-footer {
    background: #f7f5f2 !important;
    border-top: 1px solid rgba(228, 0, 43, 0.16) !important;
    color: rgba(23, 20, 18, 0.72) !important;
}

.vsb-footer a,
.vsb-site-footer a {
    color: #e4002b !important;
}

/* Responsive */
@media (max-width: 980px) {
    .vsb-luxury-hero {
        background-image:
            linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.90)),
            var(--vsb-hero-bg) !important;
        background-size: cover, cover !important;
        background-position: center center, center center !important;
    }

    .vsb-hero-inner {
        grid-template-columns: 1fr !important;
    }

    .vsb-appointment-glass {
        grid-column: 1 !important;
        grid-row: auto !important;
        justify-self: stretch !important;
        max-width: 100% !important;
        margin-top: 24px !important;
    }
}

@media (max-width: 680px) {
    .vsb-luxury-hero {
        min-height: auto !important;
    }

    .vsb-hero-inner {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    .vsb-hero-copy h1 {
        font-size: clamp(36px, 11vw, 54px) !important;
    }
}

/* FIX_DARK_GREY_GROUND_AND_CLEAR_HERO_IMAGE_V7 */

/* Force the whole website canvas dark, including Frappe/website wrappers */
html,
body,
main,
.web-page,
.page-content-wrapper,
.page_content,
.web-page-content,
.container,
.vsb-page,
.vsb-main,
.vsb-care-section,
.vsb-service-section,
.vsb-booking-section {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #171412 !important;
}

/* Remove the cream/light side gutters */
.vsb-page,
.vsb-main {
    box-shadow: none !important;
}

/* Hero: clear image, only soft left readability fade */
.vsb-luxury-hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.96) 0%,
            rgba(255,255,255,0.86) 34%,
            rgba(255,255,255,0.42) 56%,
            rgba(255,255,255,0.12) 78%,
            rgba(255,255,255,0.04) 100%
        ),
        var(--vsb-hero-bg) !important;
    background-size: cover, cover !important;
    background-position: center center, center center !important;
    background-repeat: no-repeat, no-repeat !important;
    background-color: #ffffff !important;
}

/* Keep old pseudo-image/overlay experiments disabled */
.vsb-luxury-hero::before,
.vsb-luxury-hero::after,
.vsb-hero-overlay {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    background: none !important;
}

/* Keep text readable without darkening the full photo */
.vsb-hero-copy {
    background: linear-gradient(90deg, rgba(255,255,255,0.42), rgba(255,255,255,0.00)) !important;
    padding: 8px 0 !important;
}

.vsb-hero-copy h1,
.vsb-hero-copy p {
    color: #171412 !important;
    opacity: 1 !important;
}

/* Hero card: still dark, but cleaner */
.vsb-appointment-glass {
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(228, 0, 43, 0.22) !important;
    color: #171412 !important;
}

/* Cards: light, matches rest of site */
.vsb-care-card,
.vsb-care-grid > *,
.vsb-service-row,
.vsb-service-row article,
.vsb-booking-card,
.vsb-booking-guest-cta,
.vsb-contact-section,
.vsb-promo-strip {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(228, 0, 43, 0.15) !important;
    color: #171412 !important;
}

/* Fix text contrast everywhere inside cards */
.vsb-care-card *,
.vsb-care-grid > * *,
.vsb-service-row *,
.vsb-service-row article *,
.vsb-booking-card *,
.vsb-booking-guest-cta *,
.vsb-contact-section *,
.vsb-promo-strip * {
    opacity: 1 !important;
}

.vsb-section-heading h2,
.vsb-booking-title h2 {
    color: #171412 !important;
}

.vsb-contact-section h2,
.vsb-care-card h3,
.vsb-service-row h3,
.vsb-booking-card h3,
.vsb-booking-guest-cta h3 {
    color: #171412 !important;
}

.vsb-section-heading p,
.vsb-booking-title p {
    color: rgba(23,20,18,0.68) !important;
}

.vsb-contact-section p,
.vsb-care-card p,
.vsb-service-row p,
.vsb-booking-card p,
.vsb-booking-guest-cta p {
    color: rgba(23,20,18,0.68) !important;
}

/* Gold accent */
.vsb-kicker,
.vsb-care-card span,
.vsb-service-row span {
    color: #e4002b !important;
}

/* Contact info should not be red-heavy */
.vsb-contact-section strong,
.vsb-contact-section a {
    color: #e4002b !important;
}

/* Footer dark */
.vsb-footer,
.vsb-site-footer {
    background: #f7f5f2 !important;
    background-color: #f7f5f2 !important;
    border-top: 1px solid rgba(228,0,43,0.16) !important;
    color: rgba(23,20,18,0.72) !important;
}

/* Mobile: image can be darker for readability, but not blacked out */
@media (max-width: 980px) {
    .vsb-luxury-hero {
        background-image:
            linear-gradient(180deg, rgba(18,18,18,0.58), rgba(18,18,18,0.80)),
            var(--vsb-hero-bg) !important;
    }
}


/* LUXURY_BOOKING_VISUAL_BALANCE_V8 */
/* Polish after V7: clearer hero image, no card covering image, brighter accents, dark footer, lighter typography. */

/* Stronger unified graphite canvas */
html,
body,
main,
.web-page,
.page-content-wrapper,
.page_content,
.web-page-content,
.container,
.vsb-page,
.vsb-main {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #171412 !important;
}

/* Header: force one clean row on desktop */
.vsb-luxury-header {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 18px !important;
    padding: 14px clamp(28px, 6vw, 78px) !important;
    min-height: 78px !important;
    background: #ffffff !important;
}

.vsb-luxury-brand {
    order: 1 !important;
    flex: 0 0 auto !important;
}

.vsb-luxury-nav {
    order: 2 !important;
    margin-inline-start: auto !important;
    width: auto !important;
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 26px !important;
}

.vsb-luxury-header .vsb-language-switch {
    order: 3 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 128px !important;
    margin: 0 !important;
    padding: 3px !important;
    display: inline-flex !important;
}

.vsb-account-actions {
    order: 4 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    justify-content: flex-end !important;
}

/* Brighter premium gold */
.vsb-kicker,
.vsb-hero-copy .vsb-kicker,
.vsb-appointment-glass .vsb-kicker,
.vsb-care-card span,
.vsb-care-grid span,
.vsb-service-row span,
.vsb-contact-section strong,
.vsb-contact-section a {
    color: #e4002b !important;
}

/* Hero: image covers the hero cleanly; only a left readability fade */
.vsb-luxury-hero {
    min-height: clamp(600px, 74vh, 760px) !important;
    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.96) 0%,
            rgba(255,255,255,0.88) 31%,
            rgba(255,255,255,0.50) 52%,
            rgba(255,255,255,0.16) 73%,
            rgba(255,255,255,0.06) 100%
        ),
        var(--vsb-hero-bg) !important;
    background-size: cover, cover !important;
    background-position: center center, center center !important;
    background-repeat: no-repeat, no-repeat !important;
    background-color: #ffffff !important;
}

/* Arabic pages: mirror the gradient so the light wash sits behind the text column, not the empty side */
[dir="rtl"] .vsb-luxury-hero {
    background-image:
        linear-gradient(
            270deg,
            rgba(255,255,255,0.96) 0%,
            rgba(255,255,255,0.88) 31%,
            rgba(255,255,255,0.50) 52%,
            rgba(255,255,255,0.16) 73%,
            rgba(255,255,255,0.06) 100%
        ),
        var(--vsb-hero-bg) !important;
    background-size: cover, cover !important;
    background-position: center center, center center !important;
    background-repeat: no-repeat, no-repeat !important;
}

/* Keep failed pseudo-photo panels disabled */
.vsb-luxury-hero::before,
.vsb-luxury-hero::after,
.vsb-hero-overlay {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    background: none !important;
}

/* Hero layout: leave the image area open */
.vsb-hero-inner {
    grid-template-columns: minmax(420px, 0.78fr) minmax(420px, 1.22fr) !important;
    gap: clamp(36px, 6vw, 92px) !important;
    align-items: center !important;
}

/* Lighter, more luxury typography */
.vsb-hero-copy {
    max-width: 680px !important;
    padding: 24px 28px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 48px rgba(23, 20, 18, 0.12) !important;
}

.vsb-hero-copy h1 {
    font-size: clamp(40px, 4.8vw, 68px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
    font-weight: 650 !important;
    color: #171412 !important;
}

.vsb-hero-copy p {
    font-size: clamp(16px, 1.25vw, 20px) !important;
    line-height: 1.65 !important;
    color: rgba(23,20,18,0.76) !important;
    max-width: 560px !important;
}

/* Move service request card to text side; do not cover the photo */
.vsb-appointment-glass {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: start !important;
    align-self: start !important;
    max-width: 520px !important;
    margin-top: 28px !important;
    padding: 26px !important;
    background: rgba(255,255,255,0.90) !important;
    border: 1px solid rgba(228,0,43,0.24) !important;
    box-shadow: 0 22px 60px rgba(23,20,18,0.16) !important;
    backdrop-filter: blur(10px) saturate(112%) !important;
}

.vsb-appointment-glass h2 {
    font-size: clamp(25px, 2.2vw, 34px) !important;
    font-weight: 620 !important;
}

.vsb-appointment-glass .vsb-steps div {
    background: rgba(23,20,18,0.05) !important;
    border-color: rgba(228,0,43,0.18) !important;
    color: rgba(23,20,18,0.88) !important;
}

/* Main section spacing and dark cards */
.vsb-main,
.vsb-care-section,
.vsb-service-section,
.vsb-booking-section {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.vsb-section-heading h2,
.vsb-booking-title h2 {
    font-size: clamp(30px, 3.1vw, 44px) !important;
    font-weight: 620 !important;
    letter-spacing: -0.035em !important;
    color: #171412 !important;
}

.vsb-contact-section h2 {
    font-size: clamp(30px, 3.1vw, 44px) !important;
    font-weight: 620 !important;
    letter-spacing: -0.035em !important;
    color: #ffffff !important;
}

.vsb-care-grid h3,
.vsb-service-row h3,
.vsb-booking-card h3,
.vsb-booking-guest-cta h3 {
    font-weight: 600 !important;
    color: #171412 !important;
}

.vsb-care-card,
.vsb-care-grid > *,
.vsb-service-row,
.vsb-service-row article,
.vsb-booking-card,
.vsb-booking-guest-cta,
.vsb-contact-section {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(228,0,43,0.15) !important;
    box-shadow: 0 20px 54px rgba(23,20,18,0.10) !important;
    color: #171412 !important;
}

/* Service cards should not have black vertical bars */
.vsb-service-row,
.vsb-service-row article {
    border-inline-color: rgba(228,0,43,0.14) !important;
}

/* Promo strip aligned with theme */
.vsb-promo-strip {
    background: #fcebeb !important;
    background-color: #fcebeb !important;
    border: 1px solid rgba(228,0,43,0.18) !important;
    box-shadow: 0 18px 48px rgba(23,20,18,0.10) !important;
}

/* Footer: light, matches rest of site */
footer,
.web-footer,
.footer,
.vsb-footer,
.vsb-site-footer {
    background: #f7f5f2 !important;
    background-color: #f7f5f2 !important;
    border-top: 1px solid rgba(228,0,43,0.16) !important;
    color: rgba(23,20,18,0.72) !important;
}

footer *,
.web-footer *,
.footer *,
.vsb-footer *,
.vsb-site-footer * {
    color: rgba(23,20,18,0.72) !important;
}

footer a,
.web-footer a,
.footer a,
.vsb-footer a,
.vsb-site-footer a {
    color: #e4002b !important;
}

/* Responsive */
@media (max-width: 1100px) {
    .vsb-luxury-header {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .vsb-luxury-nav {
        order: 3 !important;
        width: 100% !important;
        justify-content: center !important;
        margin-inline-start: 0 !important;
    }

    .vsb-luxury-header .vsb-language-switch {
        order: 2 !important;
    }

    .vsb-account-actions {
        order: 4 !important;
    }

    .vsb-hero-inner {
        grid-template-columns: 1fr !important;
    }

    .vsb-appointment-glass {
        max-width: 100% !important;
    }
}

@media (max-width: 680px) {
    .vsb-luxury-header {
        min-height: auto !important;
        padding: 12px 16px !important;
    }

    .vsb-luxury-nav {
        gap: 14px !important;
    }

    .vsb-luxury-hero {
        background-image:
            linear-gradient(180deg, rgba(18,18,18,0.68), rgba(18,18,18,0.86)),
            var(--vsb-hero-bg) !important;
    }

    .vsb-hero-copy h1 {
        font-size: clamp(34px, 10vw, 50px) !important;
    }
}

/* LUXURY_TYPOGRAPHY_ACCENT_POLISH_V9 */
/* Keep V8 layout. Only reduce oversized typography and improve accent visibility. */

/* Hero title: less heavy, more premium */
.vsb-hero-copy h1 {
    font-size: clamp(36px, 4.15vw, 58px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.038em !important;
    font-weight: 600 !important;
    max-width: 660px !important;
}

/* Hero paragraph */
.vsb-hero-copy p {
    font-size: clamp(15px, 1.05vw, 18px) !important;
    line-height: 1.6 !important;
    max-width: 560px !important;
}

/* Booking guide card title */
.vsb-appointment-glass h2 {
    font-size: clamp(22px, 1.9vw, 30px) !important;
    line-height: 1.16 !important;
    font-weight: 600 !important;
}

/* Main section titles: Designed around your vehicle / Select the right service path / Book a service appointment */
.vsb-section-heading h2,
.vsb-booking-title h2,
.vsb-contact-section h2 {
    font-size: clamp(24px, 2.35vw, 34px) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.028em !important;
    font-weight: 600 !important;
}

/* Card titles */
.vsb-care-grid h3,
.vsb-care-card h3,
.vsb-service-row h3,
.vsb-service-row article h3,
.vsb-booking-card h3,
.vsb-booking-guest-cta h3 {
    font-size: clamp(18px, 1.45vw, 24px) !important;
    line-height: 1.25 !important;
    font-weight: 580 !important;
    letter-spacing: -0.018em !important;
}

/* Body text slightly calmer */
.vsb-care-grid p,
.vsb-care-card p,
.vsb-service-row p,
.vsb-service-row article p,
.vsb-booking-title p,
.vsb-booking-card p,
.vsb-booking-guest-cta p,
.vsb-contact-section p {
    font-size: clamp(14px, 1.02vw, 17px) !important;
    line-height: 1.6 !important;
}

/* Kicker labels: smaller, sharper, more luxury */
.vsb-kicker,
.vsb-hero-copy .vsb-kicker,
.vsb-appointment-glass .vsb-kicker,
.vsb-section-heading .vsb-kicker,
.vsb-booking-title .vsb-kicker,
.vsb-contact-section .vsb-kicker {
    font-size: 11px !important;
    letter-spacing: 0.26em !important;
    font-weight: 760 !important;
    color: #e4002b !important;
}

/* Online benefit red label: make it visible and intentional */
.vsb-promo-strip .vsb-kicker,
.vsb-promo-strip [class*="kicker"] {
    color: #ff3f5f !important;
    text-shadow: 0 0 18px rgba(255, 63, 95, 0.28) !important;
    font-weight: 820 !important;
}

/* Promo text size */
.vsb-promo-strip strong,
.vsb-promo-strip p {
    font-size: clamp(15px, 1.15vw, 18px) !important;
    line-height: 1.45 !important;
}

/* Buttons: slightly less bulky */
.vsb-primary-action,
.vsb-secondary-action,
.vsb-link-action,
.vsb-top-login,
.vsb-account-button {
    font-size: 15px !important;
    font-weight: 650 !important;
}

/* Booking CTA card spacing */
.vsb-booking-guest-cta {
    padding: clamp(24px, 3vw, 36px) !important;
}

/* Header nav a little calmer */
.vsb-luxury-nav a {
    font-size: 14px !important;
    font-weight: 620 !important;
}

/* Arabic heading reduction too */
[dir="rtl"] .vsb-hero-copy h1 {
    font-size: clamp(34px, 4vw, 54px) !important;
    line-height: 1.14 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

[dir="rtl"] .vsb-section-heading h2,
[dir="rtl"] .vsb-booking-title h2,
[dir="rtl"] .vsb-contact-section h2 {
    font-size: clamp(24px, 2.25vw, 32px) !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

/* Mobile */
@media (max-width: 680px) {
    .vsb-hero-copy h1 {
        font-size: clamp(31px, 9vw, 44px) !important;
    }

    .vsb-section-heading h2,
    .vsb-booking-title h2,
    .vsb-contact-section h2 {
        font-size: clamp(24px, 7vw, 32px) !important;
    }

    .vsb-care-grid h3,
    .vsb-care-card h3,
    .vsb-service-row h3,
    .vsb-service-row article h3,
    .vsb-booking-card h3,
    .vsb-booking-guest-cta h3 {
        font-size: 20px !important;
    }
}

/* ONLINE_BENEFIT_BADGE_VISIBILITY_V10 */
/* Make ONLINE BENEFIT visible as a premium badge instead of weak red text. */

.vsb-promo-strip {
    gap: clamp(18px, 3vw, 34px) !important;
    align-items: center !important;
}

.vsb-promo-strip .vsb-kicker,
.vsb-promo-strip [class*="kicker"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    min-width: 128px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: rgba(196, 18, 48, 0.22) !important;
    border: 1px solid rgba(255, 63, 95, 0.62) !important;
    color: #ff4d6a !important;
    text-shadow: none !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 12px 28px rgba(196, 18, 48, 0.16) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0.22em !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

.vsb-promo-strip strong,
.vsb-promo-strip p {
    color: #ffffff !important;
    font-weight: 650 !important;
}

/* Arabic: keep badge readable */
[dir="rtl"] .vsb-promo-strip .vsb-kicker,
[dir="rtl"] .vsb-promo-strip [class*="kicker"] {
    letter-spacing: 0.08em !important;
    min-width: 118px !important;
}

@media (max-width: 680px) {
    .vsb-promo-strip {
        align-items: flex-start !important;
    }

    .vsb-promo-strip .vsb-kicker,
    .vsb-promo-strip [class*="kicker"] {
        min-width: 0 !important;
    }
}

/* ONLINE_BENEFIT_GOLD_BADGE_V11 */
/* Replace red Online Benefit label with visible premium gold badge. */

.vsb-promo-strip .vsb-kicker,
.vsb-promo-strip [class*="kicker"] {
    background: rgba(240, 201, 106, 0.16) !important;
    border: 1px solid rgba(240, 201, 106, 0.72) !important;
    color: #e4002b !important;
    text-shadow: 0 0 18px rgba(240, 201, 106, 0.22) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.035) inset,
        0 12px 28px rgba(240, 201, 106, 0.10) !important;
}

.vsb-promo-strip strong,
.vsb-promo-strip p {
    color: #ffffff !important;
}

/* Remove any previous red glow from the promo label */
.vsb-promo-strip .vsb-kicker::before,
.vsb-promo-strip [class*="kicker"]::before {
    background: transparent !important;
}

/* ONLINE_BENEFIT_SPAN_GOLD_BADGE_V12 */
/* The ONLINE BENEFIT label is a direct span, not .vsb-kicker. */

.vsb-promo-strip > span:first-child,
.vsb-promo-strip > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    min-width: 132px !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    background: #f0c96a !important;
    border: 1px solid #f0c96a !important;
    color: #111111 !important;
    text-shadow: none !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08) inset,
        0 14px 28px rgba(240,201,106,0.16) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0.22em !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

.vsb-promo-strip > strong,
.vsb-promo-strip > p {
    color: #ffffff !important;
}

[dir="rtl"] .vsb-promo-strip > span:first-child,
[dir="rtl"] .vsb-promo-strip > span {
    letter-spacing: 0.08em !important;
    min-width: 118px !important;
}

@media (max-width: 680px) {
    .vsb-promo-strip > span:first-child,
    .vsb-promo-strip > span {
        min-width: 0 !important;
    }
}

/* MULTI_PAGE_BOOKING_WEBSITE_ROUTES_V2 */
.vsb-page-home .vsb-care-section,
.vsb-page-home .vsb-service-section,
.vsb-page-home .vsb-booking-section,
.vsb-page-home .vsb-contact-section {
    display: none !important;
}

.vsb-page-care .vsb-service-section,
.vsb-page-care .vsb-booking-section,
.vsb-page-care .vsb-contact-section {
    display: none !important;
}

.vsb-page-services .vsb-care-section,
.vsb-page-services .vsb-booking-section,
.vsb-page-services .vsb-contact-section {
    display: none !important;
}

.vsb-page-book .vsb-care-section,
.vsb-page-book .vsb-service-section,
.vsb-page-book .vsb-contact-section {
    display: none !important;
}

.vsb-page-contact .vsb-care-section,
.vsb-page-contact .vsb-service-section,
.vsb-page-contact .vsb-booking-section {
    display: none !important;
}

.vsb-page-care .vsb-care-section,
.vsb-page-services .vsb-service-section,
.vsb-page-book .vsb-booking-section,
.vsb-page-contact .vsb-contact-section {
    padding-top: clamp(52px, 7vw, 96px) !important;
    padding-bottom: clamp(70px, 8vw, 110px) !important;
}

.vsb-page-home .vsb-promo-strip {
    margin-bottom: 0 !important;
}

/* MULTI_PAGE_MOBILE_RESPONSIVE_POLISH_V3 */
/* Mobile support for real multi-page service website. */

@media (max-width: 980px) {
    .vsb-luxury-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 50 !important;
        backdrop-filter: blur(18px) !important;
    }

    .vsb-luxury-nav {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        white-space: nowrap !important;
        padding-bottom: 4px !important;
    }

    .vsb-luxury-nav::-webkit-scrollbar {
        display: none !important;
    }

    .vsb-luxury-nav a {
        flex: 0 0 auto !important;
        font-size: 12px !important;
        padding: 9px 11px !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,0.035) !important;
        border: 1px solid rgba(255,255,255,0.07) !important;
    }

    .vsb-top-actions,
    .vsb-account-actions {
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .vsb-language-switch {
        flex: 0 0 auto !important;
    }

    .vsb-hero {
        min-height: auto !important;
    }

    .vsb-language-switch {
        flex: 0 0 auto !important;
        padding-top: clamp(84px, 18vw, 120px) !important;
        padding-bottom: clamp(36px, 12vw, 70px) !important;
    }

    .vsb-hero-grid,
    .vsb-hero-content,
    .vsb-hero-card {
        width: 100% !important;
    }

    .vsb-hero-title,
    .vsb-hero h1 {
        font-size: clamp(34px, 9vw, 58px) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.04em !important;
    }

    .vsb-hero-subtitle,
    .vsb-hero p {
        font-size: 15px !important;
        line-height: 1.75 !important;
        max-width: 100% !important;
    }

    .vsb-hero-actions {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .vsb-primary-action,
    .vsb-secondary-action {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .vsb-promo-strip {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 18px !important;
        margin-inline: 0 !important;
    }

    .vsb-promo-strip > span,
    .vsb-promo-strip .vsb-kicker,
    .vsb-promo-strip [class*="kicker"] {
        max-width: 100% !important;
        white-space: normal !important;
        text-align: start !important;
    }

    .vsb-care-section,
    .vsb-service-section,
    .vsb-booking-section,
    .vsb-contact-section {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .vsb-service-grid,
    .vsb-care-grid,
    .vsb-contact-grid,
    .vsb-booking-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .vsb-auth-card,
    .vsb-booking-card,
    .vsb-profile-card,
    .vsb-contact-card,
    .vsb-service-card,
    .vsb-care-card {
        border-radius: 22px !important;
        padding: 18px !important;
    }

    .vsb-form-grid,
    .vsb-auth-grid {
        grid-template-columns: 1fr !important;
    }

    .vsb-footer,
    .vsb-powered-footer {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

@media (max-width: 640px) {
    .vsb-luxury-header-inner {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .vsb-luxury-brand {
        min-width: 0 !important;
    }

    .vsb-luxury-brand span,
    .vsb-brand-text,
    .vsb-brand-name {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 52vw !important;
    }

    .vsb-luxury-nav {
        grid-column: 1 / -1 !important;
        order: 3 !important;
        width: 100% !important;
    }

    .vsb-top-actions {
        justify-self: end !important;
    }

    .vsb-top-login,
    .vsb-account-button {
        min-height: 38px !important;
        padding: 8px 11px !important;
        font-size: 12px !important;
    }

    .vsb-language-switch a {
        min-width: 34px !important;
        min-height: 34px !important;
        padding: 7px 9px !important;
        font-size: 12px !important;
    }

    .vsb-hero {
        background-position: center center !important;
    }

    .vsb-hero::before {
        background:
            linear-gradient(180deg, rgba(8,9,11,0.72), rgba(8,9,11,0.82)),
            linear-gradient(90deg, rgba(8,9,11,0.88), rgba(8,9,11,0.36)) !important;
    }

    .vsb-hero-card {
        margin-top: 14px !important;
        border-radius: 24px !important;
        padding: 18px !important;
    }

    .vsb-kicker,
    .vsb-hero-kicker {
        font-size: 10px !important;
        letter-spacing: 0.16em !important;
    }

    .vsb-page-home .vsb-promo-strip {
        margin-bottom: 34px !important;
    }
}

/* ACTIVE_MENU_SERVICES_POLISH_V5 */
/* Active top navigation and compatibility for the real separated Services page. */

.vsb-luxury-nav a.is-active {
    color: #e4002b !important;
    background: rgba(240, 201, 106, 0.13) !important;
    border-color: rgba(240, 201, 106, 0.46) !important;
    box-shadow:
        0 0 0 1px rgba(240, 201, 106, 0.08) inset,
        0 14px 28px rgba(240, 201, 106, 0.08) !important;
}

.vsb-page-services .vsb-services-section {
    display: block !important;
    padding-top: clamp(52px, 7vw, 96px) !important;
    padding-bottom: clamp(70px, 8vw, 110px) !important;
}

.vsb-page-home .vsb-services-section,
.vsb-page-care .vsb-services-section,
.vsb-page-book .vsb-services-section,
.vsb-page-contact .vsb-services-section {
    display: none !important;
}

@media (max-width: 980px) {
    .vsb-luxury-nav a.is-active {
        background: rgba(240, 201, 106, 0.18) !important;
    }
}

/* REAL_PAGE_CONTENT_REWRITE_V6 */
/* Non-book pages are informational pages. Only Book Service keeps the service request hero card. */

.vsb-page-home .vsb-hero-card,
.vsb-page-care .vsb-hero-card,
.vsb-page-services .vsb-hero-card,
.vsb-page-contact .vsb-hero-card {
    display: none !important;
}

.vsb-page-care .vsb-hero,
.vsb-page-services .vsb-hero,
.vsb-page-contact .vsb-hero {
    min-height: clamp(420px, 54vh, 620px) !important;
    padding-bottom: clamp(52px, 7vw, 92px) !important;
}

.vsb-page-care .vsb-hero-grid,
.vsb-page-services .vsb-hero-grid,
.vsb-page-contact .vsb-hero-grid,
.vsb-page-home .vsb-hero-grid {
    grid-template-columns: minmax(0, 920px) !important;
}

.vsb-section-shell {
    width: min(1180px, calc(100% - 48px)) !important;
    margin: 0 auto !important;
}

.vsb-section-heading {
    max-width: 760px !important;
    margin-bottom: 30px !important;
}

.vsb-section-heading h2 {
    color: #171412 !important;
    font-size: clamp(32px, 4.2vw, 58px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
    margin: 10px 0 12px !important;
}

.vsb-section-heading p {
    color: rgba(23,20,18,0.72) !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
}

.vsb-center-section,
.vsb-services-section,
.vsb-contact-section {
    padding: clamp(58px, 8vw, 105px) 0 !important;
    background:
        radial-gradient(circle at 20% 0%, rgba(228,0,43,0.05), transparent 34%),
        linear-gradient(180deg, #ffffff, #f7f5f2) !important;
}

.vsb-center-grid,
.vsb-contact-panels {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 18px !important;
}

.vsb-service-catalog {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.vsb-info-panel,
.vsb-service-catalog-card {
    background: #ffffff !important;
    border: 1px solid rgba(228,0,43,0.18) !important;
    box-shadow: 0 24px 58px rgba(23,20,18,0.10) !important;
    padding: 24px !important;
    min-height: 190px !important;
}

.vsb-info-panel-large {
    grid-row: span 2 !important;
}

.vsb-info-panel h3,
.vsb-service-catalog-card h3 {
    color: #171412 !important;
    font-size: 22px !important;
    line-height: 1.18 !important;
    letter-spacing: -0.025em !important;
    margin: 10px 0 10px !important;
}

.vsb-info-panel p,
.vsb-service-catalog-card p {
    color: rgba(23,20,18,0.68) !important;
    line-height: 1.7 !important;
}

.vsb-info-panel a,
.vsb-service-catalog-card a {
    color: #e4002b !important;
    text-decoration: none !important;
    font-weight: 750 !important;
}

.vsb-info-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 18px !important;
}

.vsb-info-list span {
    color: rgba(23,20,18,0.78) !important;
}

.vsb-service-catalog-card > span {
    color: #e4002b !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
}

.vsb-service-catalog-card a {
    display: inline-flex !important;
    margin-top: 14px !important;
    padding: 10px 13px !important;
    border: 1px solid rgba(240,201,106,0.34) !important;
    background: rgba(240,201,106,0.08) !important;
}

@media (max-width: 1100px) {
    .vsb-service-catalog {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .vsb-center-grid,
    .vsb-contact-panels {
        grid-template-columns: 1fr !important;
    }

    .vsb-info-panel-large {
        grid-row: auto !important;
    }
}

@media (max-width: 680px) {
    .vsb-section-shell {
        width: min(100% - 32px, 1180px) !important;
    }

    .vsb-service-catalog {
        grid-template-columns: 1fr !important;
    }

    .vsb-info-panel,
    .vsb-service-catalog-card {
        padding: 19px !important;
        min-height: auto !important;
    }

    .vsb-page-care .vsb-hero,
    .vsb-page-services .vsb-hero,
    .vsb-page-contact .vsb-hero {
        min-height: auto !important;
    }
}

/* FOUR_SERVICES_HERO_OVERLAY_V1 */
/* Four approved customer services displayed over the existing hero image. */

.vsb-page-services .vsb-services-overlay-hero {
    min-height: calc(100vh - 82px) !important;
    display: flex !important;
    align-items: center !important;
    padding: clamp(38px, 5vw, 72px) 0 !important;
}

.vsb-page-services .vsb-services-overlay-shell {
    position: relative !important;
    z-index: 2 !important;
    width: min(1380px, calc(100% - 48px)) !important;
    margin: 0 auto !important;
}

.vsb-page-services .vsb-services-overlay-heading {
    max-width: 820px !important;
    margin-bottom: clamp(22px, 3vw, 38px) !important;
}

.vsb-page-services .vsb-services-overlay-heading h1 {
    margin: 10px 0 12px !important;
    color: #171412 !important;
    font-size: clamp(34px, 4.2vw, 58px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.04em !important;
    font-weight: 650 !important;
}

.vsb-page-services .vsb-services-overlay-heading p {
    max-width: 680px !important;
    margin: 0 !important;
    color: rgba(23, 20, 18, 0.82) !important;
    font-size: clamp(15px, 1.1vw, 18px) !important;
    line-height: 1.65 !important;
}

.vsb-page-services .vsb-services-overlay-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(12px, 1.5vw, 20px) !important;
}

.vsb-page-services .vsb-services-overlay-grid .vsb-service-catalog-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 250px !important;
    padding: clamp(18px, 2vw, 26px) !important;
    background: #ffffff !important;
    border: 1px solid rgba(228, 0, 43, 0.25) !important;
    box-shadow: 0 22px 50px rgba(23, 20, 18, 0.12) !important;
    backdrop-filter: blur(8px) !important;
}

.vsb-page-services .vsb-services-overlay-grid .vsb-service-catalog-card p {
    flex: 1 1 auto !important;
}

.vsb-page-services .vsb-services-overlay-grid .vsb-service-catalog-card a {
    align-self: flex-start !important;
}

@media (max-width: 1100px) {
    .vsb-page-services .vsb-services-overlay-hero {
        min-height: auto !important;
    }

    .vsb-page-services .vsb-services-overlay-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    .vsb-page-services .vsb-services-overlay-hero {
        padding: 38px 0 48px !important;
    }

    .vsb-page-services .vsb-services-overlay-shell {
        width: min(100% - 28px, 1380px) !important;
    }

    .vsb-page-services .vsb-services-overlay-grid {
        grid-template-columns: 1fr !important;
    }

    .vsb-page-services .vsb-services-overlay-grid .vsb-service-catalog-card {
        min-height: auto !important;
    }
}


/* REGISTRATION_MODAL_UI_CSS_V1 */
.vsb-auth-alert {
    margin: 0 0 16px;
}

.vsb-register-submit {
    width: 100%;
    margin-top: 18px;
}

.vsb-register-submit:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}



/* GUIDED_VEHICLE_BOOKING_UI_V1 */
.vsb-booking-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 22px;
}

.vsb-booking-step {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 12px 14px;
    border: 1px solid rgba(199, 160, 66, 0.28);
    background: rgba(255, 255, 255, 0.025);
    color: #918b84;
}

.vsb-booking-step span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.vsb-booking-step strong {
    font-size: 14px;
}

.vsb-booking-step.is-current {
    border-color: #e4002b;
    background: rgba(228, 0, 43, 0.08);
    color: #a30020;
}

.vsb-booking-step.is-complete {
    border-color: rgba(31, 122, 77, 0.55);
    color: #1f7a4d;
}

.vsb-step-clickable {
    cursor: pointer;
}

.vsb-step-clickable:hover {
    border-color: #e4002b;
    background: rgba(228, 0, 43, 0.06);
}

.vsb-step-caption {
    display: block;
    margin-bottom: 5px;
    color: #e4002b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.vsb-no-vehicle-panel {
    margin: 18px 0;
    padding: 18px;
    border-inline-start: 4px solid #e4002b;
    background: rgba(228, 0, 43, 0.08);
}

.vsb-no-vehicle-panel strong {
    display: block;
    margin-bottom: 6px;
    color: #171412;
}

.vsb-no-vehicle-panel p,
#vsbVehicleGuide {
    margin: 0;
    color: #bcb6af;
}

.vsb-vehicle-registration {
    margin: 20px 0 26px;
    padding: 22px;
    border: 1px solid rgba(199, 160, 66, 0.38);
    background: rgba(0, 0, 0, 0.18);
}

.vsb-vehicle-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.vsb-vehicle-form-head h4 {
    margin: 0;
    color: #171412;
    font-size: 22px;
}

#vsbBookingFields.is-disabled {
    opacity: 0.48;
}

#vsbBookingFields.is-disabled::after {
    content: "";
}

#vsbVehicleRegistrationAlert {
    margin-bottom: 18px;
}

html[dir="rtl"] .vsb-booking-step,
html[dir="rtl"] .vsb-vehicle-form-head {
    direction: rtl;
}

@media (max-width: 760px) {
    .vsb-booking-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vsb-booking-step {
        min-height: 56px;
    }

    .vsb-card-row,
    .vsb-vehicle-form-head {
        align-items: stretch;
        flex-direction: column;
    }

    .vsb-card-row > button,
    .vsb-vehicle-form-head > button {
        width: 100%;
    }

    .vsb-vehicle-registration {
        padding: 16px;
    }
}


/* GUIDED_BOOKING_VISUAL_STATE_FIX_V1 */

/* Secondary actions inside the guided booking flow */
.vsb-booking-app .vsb-secondary-action,
.vsb-booking-app .vsb-link-action {
    width: auto !important;
    min-width: 132px;
    min-height: 44px;
    margin-top: 0 !important;
    padding: 10px 18px !important;
    border: 1px solid #e4002b !important;
    background: transparent !important;
    color: #a30020 !important;
    box-shadow: none !important;
}

.vsb-booking-app .vsb-secondary-action:hover,
.vsb-booking-app .vsb-link-action:hover {
    border-color: #e4002b !important;
    background: #e4002b !important;
    color: #ffffff !important;
}

/* Keep Cancel compact in the registration heading */
#vsbHideVehicleFormButton {
    flex: 0 0 auto;
    align-self: flex-start;
}

/* Make disabled controls clearly inactive */
.vsb-booking-app .vsb-primary-action:disabled,
#vsbCreateButton:disabled {
    background: #e5e2de !important;
    border-color: #d8d3cc !important;
    color: #9c968f !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

/* Empty and guidance states: light theme */
.vsb-booking-app .vsb-empty {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid rgba(228, 0, 43, 0.20);
    background: rgba(23, 20, 18, 0.03) !important;
    color: rgba(23, 20, 18, 0.60) !important;
    line-height: 1.65;
}

.vsb-booking-app .vsb-guidance-empty {
    border-inline-start: 4px solid #e4002b;
}

.vsb-booking-app .vsb-no-slots-empty {
    border-inline-start: 4px solid #e4002b;
    color: rgba(23, 20, 18, 0.65) !important;
}

#vsbSlots {
    align-items: stretch;
}

/* Prevent the RTL registration heading from becoming too narrow */
.vsb-vehicle-form-head > div {
    flex: 1 1 auto;
    min-width: 0;
}

.vsb-vehicle-form-head h4 {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

html[dir="rtl"] .vsb-vehicle-form-head h4 {
    text-align: right;
}

@media (max-width: 760px) {
    .vsb-booking-app .vsb-secondary-action,
    .vsb-booking-app .vsb-link-action {
        width: 100% !important;
    }

    #vsbHideVehicleFormButton {
        align-self: stretch;
    }
}


/* VERIFIED_EMAIL_CHANGE_UI_V1 */
.vsb-account-security-shell {
    padding-top: 48px;
    padding-bottom: 70px;
}

.vsb-account-security-shell .vsb-booking-app {
    max-width: 920px;
    margin: 28px auto 0;
}

.vsb-account-security-shell .vsb-booking-card {
    border: 1px solid rgba(228, 0, 43, 0.20);
    background: #ffffff;
}

.vsb-account-security-shell h2 {
    margin: 8px 0 12px;
}

.vsb-account-security-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 16px;
    padding: 11px 18px;
    border: 1px solid #e4002b;
    background: transparent;
    color: #a30020;
    font-weight: 800;
    text-decoration: none;
}

.vsb-account-security-link:hover,
.vsb-account-security-link:focus {
    background: #e4002b;
    color: #ffffff;
}

.vsb-email-security-guidance {
    margin: 20px 0;
    padding: 18px;
    border-inline-start: 4px solid #e4002b;
    background: rgba(228, 0, 43, 0.08);
}

.vsb-email-security-guidance strong {
    display: block;
    margin-bottom: 8px;
}

.vsb-email-security-guidance ul {
    margin: 0;
    padding-inline-start: 22px;
}

.vsb-email-security-guidance li + li {
    margin-top: 7px;
}

#vsbCurrentVerifiedEmail[readonly] {
    cursor: default;
    opacity: 0.82;
}

.vsb-account-security-shell .vsb-secondary-action {
    background: transparent !important;
    color: #a30020 !important;
    border: 1px solid #e4002b !important;
}

.vsb-account-security-shell .vsb-secondary-action:hover,
.vsb-account-security-shell .vsb-secondary-action:focus {
    background: #e4002b !important;
    color: #ffffff !important;
}

@media (max-width: 720px) {
    .vsb-account-security-shell {
        padding-top: 28px;
    }

    .vsb-account-security-shell .vsb-action-row {
        align-items: stretch;
        flex-direction: column;
    }

    .vsb-account-security-shell .vsb-action-row > * {
        width: 100%;
    }
}


/* BOOKING_HERO_FOCUS_STATE_V1 */
.vsb-page-book.vsb-booking-started #vsbBookingHero {
    display: none !important;
}

.vsb-page-book.vsb-booking-started #booking {
    padding-top: 34px;
    scroll-margin-top: 82px;
}

@media (max-width: 720px) {
    .vsb-page-book.vsb-booking-started #booking {
        padding-top: 22px;
        scroll-margin-top: 72px;
    }
}

/* BOOKING_BACKGROUND_CONTINUITY_V1 */
/*
 * The dynamic image variable is declared once on the existing
 * booking main element. The hero inherits it, and direct-booking
 * mode reuses it after the hero is hidden.
 */
.vsb-page-book .vsb-booking-main {
    display: flow-root;
    min-height: 100%;
    background-color: #ffffff;
}

.vsb-page-book.vsb-booking-started .vsb-booking-main {
    min-height: calc(100vh - 92px);
    background-image:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.86) 42%,
            rgba(255, 255, 255, 0.68) 100%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(255, 255, 255, 0.88) 100%
        ),
        var(--vsb-hero-bg);
    background-size: cover, cover, cover;
    background-position:
        center center,
        center center,
        center center;
    background-repeat: no-repeat;
}

.vsb-page-book.vsb-booking-started #booking {
    margin-top: 0 !important;
    background:
        #ffffff !important;
    background-color:
        #ffffff !important;
}

@media (max-width: 720px) {
    .vsb-page-book.vsb-booking-started .vsb-booking-main {
        background-image:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.70) 0%,
                rgba(255, 255, 255, 0.92) 100%
            ),
            var(--vsb-hero-bg);
        background-size: cover, cover;
        background-position:
            center center,
            center center;
    }

    .vsb-page-book.vsb-booking-started #booking {
        background:
            #ffffff !important;
        background-color:
            #ffffff !important;
    }
}

/* BOOKING_BACKGROUND_PRIORITY_FIX_V2 */
/*
 * The image URL remains declared once on the existing main.
 * These rules consume the same inherited variable.
 */

/* Normal booking introduction. */
.vsb-page-book:not(.vsb-booking-started)
.vsb-booking-main
#vsbBookingHero.vsb-luxury-hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.86) 34%,
            rgba(255, 255, 255, 0.42) 58%,
            rgba(255, 255, 255, 0.08) 100%
        ),
        var(--vsb-hero-bg) !important;
    background-size:
        cover,
        cover !important;
    background-position:
        center center,
        center center !important;
    background-repeat:
        no-repeat,
        no-repeat !important;
}

/* Direct booking after the existing hero is hidden. */
.vsb-page-book.vsb-booking-started
.vsb-booking-main {
    min-height: calc(100vh - 92px);
    background-image:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(255, 255, 255, 0.78) 45%,
            rgba(255, 255, 255, 0.48) 100%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.80) 100%
        ),
        var(--vsb-hero-bg) !important;
    background-size:
        cover,
        cover,
        cover !important;
    background-position:
        center center,
        center center,
        center center !important;
    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat !important;
}

.vsb-page-book.vsb-booking-started
#booking.vsb-booking-section {
    margin-top: 0 !important;
    background:
        #ffffff !important;
    background-color:
        #ffffff !important;
}

@media (max-width: 720px) {
    .vsb-page-book.vsb-booking-started
    .vsb-booking-main {
        background-image:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.62) 0%,
                rgba(255, 255, 255, 0.88) 100%
            ),
            var(--vsb-hero-bg) !important;
        background-size:
            cover,
            cover !important;
        background-position:
            center center,
            center center !important;
        background-repeat:
            no-repeat,
            no-repeat !important;
    }

    .vsb-page-book.vsb-booking-started
    #booking.vsb-booking-section {
        background:
            #ffffff !important;
        background-color:
            #ffffff !important;
    }
}

/* SHARED_CONFIGURABLE_BACKGROUND_VISUAL_V3 */
/*
 * Final visual authority for all public service pages.
 * The image remains supplied by the existing Vehicle Service Branch
 * Attach Image fields through --vsb-hero-bg. No filename is stored here.
 */
:root {
    --vsb-shared-hero-min-height: clamp(600px, 74vh, 760px);
    --vsb-shared-hero-position: center center;
}

.vsb-page-care .vsb-luxury-hero,
.vsb-page-services .vsb-luxury-hero,
.vsb-page-contact .vsb-luxury-hero,
.vsb-page-book:not(.vsb-booking-started)
#vsbBookingHero.vsb-luxury-hero {
    min-height: var(--vsb-shared-hero-min-height) !important;
    background-image:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.88) 31%,
            rgba(255, 255, 255, 0.50) 52%,
            rgba(255, 255, 255, 0.16) 73%,
            rgba(255, 255, 255, 0.06) 100%
        ),
        var(--vsb-hero-bg) !important;
    background-size:
        cover,
        cover !important;
    background-position:
        center center,
        var(--vsb-shared-hero-position) !important;
    background-repeat:
        no-repeat,
        no-repeat !important;
    background-attachment:
        scroll,
        scroll !important;
}

/* Cancel the different full-screen service-page geometry. */
.vsb-page-services .vsb-services-overlay-hero {
    min-height: var(--vsb-shared-hero-min-height) !important;
}

/*
 * Direct booking consumes the same configured variable and the same
 * crop/position after the introduction hero is hidden.
 */
.vsb-page-book.vsb-booking-started .vsb-booking-main {
    min-height: calc(100vh - 92px) !important;
    background-image:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.88) 31%,
            rgba(255, 255, 255, 0.50) 52%,
            rgba(255, 255, 255, 0.16) 73%,
            rgba(255, 255, 255, 0.06) 100%
        ),
        var(--vsb-hero-bg) !important;
    background-size:
        cover,
        cover !important;
    background-position:
        center center,
        var(--vsb-shared-hero-position) !important;
    background-repeat:
        no-repeat,
        no-repeat !important;
    background-attachment:
        fixed,
        fixed !important;
}

.vsb-page-book.vsb-booking-started
#booking.vsb-booking-section {
    background:
        #ffffff !important;
    background-color:
        #ffffff !important;
}

/* Explicit modal-open state controlled by JavaScript. */
body.vsb-auth-open {
    overflow: hidden;
}

body.vsb-auth-open
#vsbAuthPanel.vsb-auth-modal {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 10000 !important;
}

@media (max-width: 980px) {
    .vsb-page-care .vsb-luxury-hero,
    .vsb-page-services .vsb-luxury-hero,
    .vsb-page-contact .vsb-luxury-hero,
    .vsb-page-book:not(.vsb-booking-started)
    #vsbBookingHero.vsb-luxury-hero {
        background-image:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.62) 0%,
                rgba(255, 255, 255, 0.86) 100%
            ),
            var(--vsb-hero-bg) !important;
        background-size:
            cover,
            cover !important;
        background-position:
            center center,
            var(--vsb-shared-hero-position) !important;
    }

    .vsb-page-book.vsb-booking-started .vsb-booking-main {
        background-image:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.62) 0%,
                rgba(255, 255, 255, 0.86) 100%
            ),
            var(--vsb-hero-bg) !important;
        background-size:
            cover,
            cover !important;
        background-position:
            center center,
            var(--vsb-shared-hero-position) !important;
    }
}

@media (max-width: 680px) {
    .vsb-page-care .vsb-luxury-hero,
    .vsb-page-services .vsb-luxury-hero,
    .vsb-page-contact .vsb-luxury-hero,
    .vsb-page-book:not(.vsb-booking-started)
    #vsbBookingHero.vsb-luxury-hero {
        min-height: auto !important;
    }

    .vsb-page-book.vsb-booking-started .vsb-booking-main {
        background-attachment:
            scroll,
            scroll !important;
    }
}



/* VEHICLE_REQUIRED_GOLD_HIGHLIGHT_V1 */
.vsb-booking-card input.vsb-required-missing,
.vsb-booking-card select.vsb-required-missing {
    border-color: #d6aa4f !important;
    box-shadow: 0 0 0 1px rgba(214, 170, 79, 0.25) !important;
}


/* CUSTOM_BOOKING_CALENDAR_V1 */
.vsb-calendar-field {
    grid-column: 1 / -1;
    display: grid;
    gap: 9px;
}

.vsb-calendar-field-label {
    font-weight: 700;
}

.vsb-availability-calendar {
    padding: 16px;
    border: 1px solid var(--vsb-line);
    background: #ffffff;
}

.vsb-calendar-guidance {
    min-height: 70px;
    display: grid;
    place-items: center;
    padding: 14px;
    color: var(--vsb-muted);
    text-align: center;
}

.vsb-calendar-guidance.is-loading {
    color: #a30020;
}

.vsb-calendar-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.vsb-calendar-heading span {
    color: var(--vsb-muted);
    font-size: 12px;
}

.vsb-calendar-week,
.vsb-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
}

.vsb-calendar-week {
    margin-bottom: 7px;
}

.vsb-calendar-week span {
    color: var(--vsb-muted);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.vsb-calendar-day {
    min-height: 72px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    padding: 6px 2px;
    border: 1px solid var(--vsb-line);
    border-radius: 0;
    background: #f7f5f2;
    color: var(--vsb-muted);
    font: inherit;
}

.vsb-calendar-day strong {
    font-size: 20px;
}

.vsb-calendar-day span,
.vsb-calendar-day small {
    font-size: 10px;
}

.vsb-calendar-day.is-available {
    border-color: rgba(228, 0, 43, 0.5);
    background: #fcebeb;
    color: #a30020;
    cursor: pointer;
}

.vsb-calendar-day.is-available:hover,
.vsb-calendar-day.is-available:focus-visible {
    border-color: #e4002b;
    background: #f7d9de;
    outline: none;
}

.vsb-calendar-day.is-selected {
    border-color: #e4002b;
    background: #e4002b;
    color: #ffffff;
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 4px rgba(228, 0, 43, 0.30);
}

.vsb-calendar-day.is-unavailable {
    opacity: 0.34;
}

.vsb-calendar-day:disabled {
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .vsb-calendar-heading {
        display: grid;
    }

    .vsb-calendar-week,
    .vsb-calendar-days {
        gap: 4px;
    }

    .vsb-calendar-day {
        min-height: 60px;
    }

    .vsb-calendar-day span {
        display: none;
    }
}


/* COMBINED_BOOKING_DATETIME_V1 */
.vsb-appointment-layout {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(250px, 0.8fr);
    gap: 16px;
    align-items: stretch;
}

.vsb-appointment-layout .vsb-calendar-field {
    grid-column: auto;
    min-width: 0;
}

.vsb-time-panel {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(228, 0, 43, 0.20);
    background: #ffffff;
}

.vsb-time-panel-heading {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.vsb-time-panel-heading h3 {
    margin: 0;
    color: #171412;
    font-size: 18px;
}

.vsb-time-panel-heading p {
    margin: 5px 0 0;
    color: rgba(23, 20, 18, 0.62);
    font-size: 12px;
}

.vsb-time-refresh {
    min-width: auto;
    padding: 8px 11px;
    font-size: 12px;
}

.vsb-time-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0;
}

.vsb-time-slots .vsb-empty {
    grid-column: 1 / -1;
}

.vsb-time-slots .vsb-slot {
    min-height: 66px;
    padding: 10px 8px;
    border: 1px solid rgba(228, 0, 43, 0.35);
    background: #fcebeb;
    color: #a30020;
    text-align: center;
}

.vsb-time-slots .vsb-slot strong {
    margin: 0 0 3px;
    color: inherit;
    font-size: 18px;
}

.vsb-time-slots .vsb-slot span {
    color: rgba(23, 20, 18, 0.60);
    font-size: 11px;
}

.vsb-time-slots .vsb-slot:hover,
.vsb-time-slots .vsb-slot:focus-visible {
    border-color: #e4002b;
    background: #f7d9de;
    outline: none;
}

.vsb-time-slots .vsb-slot-selected {
    border-color: #e4002b;
    background: #e4002b;
    color: #ffffff;
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 4px rgba(228, 0, 43, 0.30);
}

.vsb-time-slots .vsb-slot-selected span {
    color: rgba(255, 255, 255, 0.85);
}

/* Weekday already appears in the calendar header. */
.vsb-calendar-day > span {
    display: none;
}

.vsb-calendar-day {
    min-height: 58px;
}

.vsb-calendar-day strong {
    font-size: 18px;
}

@media (max-width: 980px) {
    .vsb-appointment-layout {
        grid-template-columns: 1fr;
    }

    .vsb-time-slots {
        grid-template-columns: repeat(
            auto-fit,
            minmax(110px, 1fr)
        );
    }
}

@media (max-width: 560px) {
    .vsb-time-panel-heading {
        display: grid;
    }

    .vsb-time-refresh {
        justify-self: start;
    }

    .vsb-time-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* DISTINCT_BOOKING_TIME_COLOR_V1 */
.vsb-appointment-layout {
    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(290px, 1fr);
}

.vsb-time-panel {
    border-color: rgba(228, 0, 43, 0.30);
}

.vsb-time-slots .vsb-slot {
    border-color: rgba(228, 0, 43, 0.35);
    background: #fcebeb;
    color: #a30020;
}

.vsb-time-slots .vsb-slot span {
    color: rgba(23, 20, 18, 0.60);
}

.vsb-time-slots .vsb-slot:hover,
.vsb-time-slots .vsb-slot:focus-visible {
    border-color: #e4002b;
    background: #f7d9de;
    box-shadow:
        0 0 0 2px rgba(228, 0, 43, 0.18);
}

.vsb-time-slots .vsb-slot-selected {
    border-color: #e4002b;
    background: #e4002b;
    color: #ffffff;
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 4px rgba(228, 0, 43, 0.30);
}

.vsb-time-slots .vsb-slot-selected span {
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 980px) {
    .vsb-appointment-layout {
        grid-template-columns: 1fr;
    }
}


/* BILINGUAL_VEHICLE_SEARCH_V1 */
.vsb-canonical-vehicle-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#vsbVehicleMakeSearch,
#vsbVehicleModelSearch {
    direction: auto;
}

#vsbVehicleMakeSearch:disabled,
#vsbVehicleModelSearch:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}


/* BOOKING_CONFIRMATION_RESULT_V1 */
.vsb-booking-result {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: flex-start;
    margin-top: 18px;
    padding: 20px;
    border: 1px solid rgba(31, 122, 77, 0.28);
    background: #ebf8ef;
    color: #171412;
    outline: none;
    box-shadow: 0 8px 24px rgba(23, 20, 18, 0.08);
}

.vsb-booking-result-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(31, 122, 77, 0.4);
    border-radius: 50%;
    background: #1f7a4d;
    color: #ffffff;
    font-size: 25px;
    font-weight: 900;
}

.vsb-booking-result-content {
    min-width: 0;
}

.vsb-booking-result h3 {
    margin: 0 0 8px;
    color: #171412;
    font-size: 20px;
}

.vsb-booking-result p {
    margin: 0;
    color: rgba(23, 20, 18, 0.72);
}

.vsb-booking-result-reference {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 15px 0 10px;
    padding: 12px 14px;
    border-inline-start: 3px solid #e4002b;
    background: #f7f5f2;
}

.vsb-booking-result-reference span {
    color: rgba(23, 20, 18, 0.66);
    font-size: 12px;
}

.vsb-booking-result-reference strong {
    color: #171412;
    font-size: 20px;
    overflow-wrap: anywhere;
}

.vsb-booking-result-email {
    color: #1f7a4d !important;
    font-size: 13px;
}

html[dir="rtl"] .vsb-booking-result {
    direction: rtl;
}

@media (max-width: 680px) {
    .vsb-booking-result {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .vsb-booking-result-icon {
        width: 40px;
        height: 40px;
        font-size: 21px;
    }

    .vsb-booking-result-reference {
        display: grid;
    }

    .vsb-booking-result-reference strong {
        font-size: 17px;
    }
}


/* MULTI_BRANCH_BOOKING_UI_V1 */
.vsb-branch-selection {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
    gap: 14px;
    align-items: stretch;
    margin-bottom: 4px;
}

.vsb-branch-selection label {
    margin-top: 0;
}

.vsb-branch-details {
    display: grid;
    align-content: center;
    gap: 6px;
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid rgba(228, 0, 43, 0.24);
    background: #f7f5f2;
}

.vsb-branch-details strong {
    color: #171412;
    font-size: 16px;
    overflow-wrap: anywhere;
}

.vsb-branch-details span {
    color: rgba(23, 20, 18, 0.66);
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

#vsbServiceBranch:disabled {
    cursor: default;
    opacity: 1;
}

html[dir="rtl"] .vsb-branch-selection,
html[dir="rtl"] .vsb-branch-details {
    direction: rtl;
}

@media (max-width: 760px) {
    .vsb-branch-selection {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .vsb-branch-details {
        padding: 12px;
    }

    .vsb-branch-details strong {
        font-size: 15px;
    }
}


/* MOBILE_SELECTION_CLARITY_V1 */

/*
 * Strong selection states.
 * Other available choices remain clickable but visually recede.
 */
.vsb-availability-calendar:has(
    .vsb-calendar-day.is-selected
)
.vsb-calendar-day.is-available:not(.is-selected) {
    opacity: 0.54;
    filter: saturate(0.72);
}

.vsb-calendar-day.is-selected {
    position: relative;
    z-index: 2;
    border: 2px solid #e4002b !important;
    background: #e4002b !important;
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 5px rgba(228, 0, 43, 0.35),
        0 9px 22px rgba(23, 20, 18, 0.20) !important;
}

.vsb-calendar-day.is-selected strong,
.vsb-calendar-day.is-selected span,
.vsb-calendar-day.is-selected small {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 900 !important;
}

.vsb-calendar-day.is-selected::after {
    content: "✓";
    position: absolute;
    top: 3px;
    inset-inline-end: 5px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 1000;
    line-height: 1;
}

.vsb-time-slots:has(
    .vsb-slot-selected
)
.vsb-slot:not(.vsb-slot-selected) {
    opacity: 0.52;
    filter: saturate(0.70);
}

.vsb-time-slots .vsb-slot-selected {
    position: relative;
    z-index: 2;
    border: 2px solid #e4002b !important;
    background: #e4002b !important;
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 5px rgba(228, 0, 43, 0.35),
        0 9px 22px rgba(23, 20, 18, 0.20) !important;
}

.vsb-time-slots .vsb-slot-selected strong,
.vsb-time-slots .vsb-slot-selected span {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 900 !important;
}

.vsb-time-slots .vsb-slot-selected::after {
    content: "✓";
    position: absolute;
    top: 7px;
    inset-inline-end: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 1000;
    line-height: 1;
}

/*
 * Hover/focus restores clarity so dimmed alternatives still
 * feel interactive and easy to change.
 */
.vsb-calendar-day.is-available:not(.is-selected):hover,
.vsb-calendar-day.is-available:not(.is-selected):focus-visible,
.vsb-time-slots .vsb-slot:not(.vsb-slot-selected):hover,
.vsb-time-slots .vsb-slot:not(.vsb-slot-selected):focus-visible {
    opacity: 0.90;
    filter: none;
}

/*
 * Phone presentation:
 * - hide unavailable dates
 * - remove compressed seven-day headings
 * - show available dates in a readable three-column grid
 * - keep times in a compact two-column grid
 */
@media (max-width: 600px) {
    .vsb-availability-calendar {
        padding: 13px !important;
    }

    .vsb-calendar-heading {
        margin-bottom: 11px !important;
    }

    .vsb-calendar-week {
        display: none !important;
    }

    .vsb-calendar-days {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .vsb-calendar-day {
        grid-column: auto !important;
        min-height: 74px !important;
        padding: 8px 4px !important;
    }

    .vsb-calendar-day.is-unavailable {
        display: none !important;
    }

    .vsb-calendar-day > span {
        display: block !important;
        color: inherit !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
    }

    .vsb-calendar-day strong {
        font-size: 22px !important;
        line-height: 1 !important;
    }

    .vsb-calendar-day small {
        font-size: 10px !important;
        line-height: 1.15 !important;
    }

    .vsb-time-panel {
        padding: 13px !important;
    }

    .vsb-time-slots {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .vsb-time-slots .vsb-slot {
        min-height: 58px !important;
        padding: 8px 6px !important;
    }

    .vsb-time-slots .vsb-slot strong {
        font-size: 18px !important;
        line-height: 1.1 !important;
    }

    .vsb-time-slots .vsb-slot span {
        font-size: 10px !important;
    }
}


/* MY_VEHICLES_PORTAL_V1 */
.vsb-my-vehicles-shell { max-width: 1280px; }
.vsb-my-vehicles-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:18px; }
.vsb-my-vehicles-heading h2 { margin:5px 0 7px; }
.vsb-my-vehicles-heading p { margin:0; }
.vsb-my-vehicles-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.vsb-vehicle-card { display:grid; gap:12px; padding:18px; border:1px solid var(--vsb-line); background:var(--vsb-surface-soft); }
.vsb-vehicle-card.is-inactive { opacity:.68; border-color:var(--vsb-line); }
.vsb-vehicle-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.vsb-vehicle-card h3 { margin:0; color:var(--vsb-ink); font-size:20px; overflow-wrap:anywhere; }
.vsb-vehicle-status { display:inline-flex; padding:5px 9px; border:1px solid #bbdfc7; background:#ebf8ef; color:#14633f; font-size:12px; font-weight:800; }
.vsb-vehicle-status.is-pending { border-color:#ead19a; background:#fff8e9; color:#70520e; }
.vsb-vehicle-status.is-inactive,.vsb-vehicle-status.is-blocked { border-color:var(--vsb-line); background:var(--vsb-surface-strong); color:var(--vsb-muted); }
.vsb-vehicle-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 14px; }
.vsb-vehicle-fact { display:grid; gap:2px; min-width:0; }
.vsb-vehicle-fact small { color:var(--vsb-muted); }
.vsb-vehicle-fact strong { color:var(--vsb-ink); overflow-wrap:anywhere; }
.vsb-vehicle-actions { display:flex; flex-wrap:wrap; gap:9px; }
.vsb-danger-action { border:1px solid #efb4b8; background:#fff0f1; color:#8f1f2f; padding:10px 14px; cursor:pointer; font:inherit; font-weight:800; }
.vsb-search-field { position:relative; }
.vsb-search-results { position:absolute; z-index:30; top:100%; inset-inline:0; max-height:260px; overflow:auto; border:1px solid var(--vsb-line); background:var(--vsb-surface); box-shadow:var(--vsb-shadow); }
.vsb-search-result { display:block; width:100%; padding:11px 13px; border:0; border-bottom:1px solid var(--vsb-line); background:transparent; color:var(--vsb-ink); text-align:start; cursor:pointer; font:inherit; }
.vsb-search-result:hover,.vsb-search-result:focus { background:var(--vsb-accent-soft); color:var(--vsb-accent); }
.vsb-search-result small { display:block; margin-top:3px; color:var(--vsb-muted); }
html[dir="rtl"] .vsb-my-vehicles-shell,html[dir="rtl"] .vsb-vehicle-card { direction:rtl; }
@media (max-width:800px) { .vsb-my-vehicles-list { grid-template-columns:1fr; } }
@media (max-width:600px) {
    .vsb-my-vehicles-heading { display:grid; }
    .vsb-my-vehicles-heading .vsb-primary-action,.vsb-my-vehicles-heading .vsb-secondary-action { width:100%; }
    .vsb-vehicle-card { padding:14px; }
    .vsb-vehicle-card-head { display:grid; }
    .vsb-vehicle-facts { grid-template-columns:1fr; }
    .vsb-vehicle-actions { display:grid; grid-template-columns:1fr; }
    .vsb-vehicle-actions button { width:100%; }
}

/* PORTAL_CONTENT_SPACING_V1 */
.vsb-account-security-shell,
.vsb-my-vehicles-shell {
    width: 100%;
    max-width: 1280px;
    min-width: 0;
    margin-inline: auto;
    padding-inline: clamp(28px, 4vw, 58px);
    box-sizing: border-box;
}

.vsb-account-security-shell .vsb-booking-intro,
.vsb-account-security-shell .vsb-booking-app,
.vsb-account-security-shell .vsb-booking-card,
.vsb-my-vehicles-shell .vsb-booking-intro,
.vsb-my-vehicles-shell .vsb-booking-app,
.vsb-my-vehicles-shell .vsb-booking-card,
.vsb-my-vehicles-shell .vsb-my-vehicles-heading,
.vsb-my-vehicles-shell .vsb-my-vehicles-list,
.vsb-my-vehicles-shell .vsb-vehicle-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 720px) {
    .vsb-account-security-shell,
    .vsb-my-vehicles-shell {
        padding-inline:
            max(18px, env(safe-area-inset-left));
    }
}

/* ARABIC_CONNECTED_TEXT_V1 */
/*
 * Arabic is a joining script. Positive or negative character
 * spacing separates its letters in iPhone Safari.
 */
html[dir="rtl"] .vsb-kicker,
html[dir="rtl"] .vsb-hero-kicker,
html[dir="rtl"] .vsb-step-caption,
html[dir="rtl"] .vsb-promo-strip .vsb-kicker,
html[dir="rtl"] .vsb-promo-strip [class*="kicker"],
html[dir="rtl"] .vsb-promo-strip > span:first-child {
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* MOBILE_LANGUAGE_SWITCH_POSITION_V1 */
@media (max-width: 600px) {
    .vsb-luxury-header .vsb-language-switch,
    .vsb-language-switch {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        justify-self: center !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 210px !important;
        height: auto !important;

        margin: 0 auto !important;
        padding: 3px !important;
        gap: 3px !important;

        flex: 0 0 auto !important;
        box-sizing: border-box !important;
    }

    .vsb-luxury-header .vsb-language-switch a,
    .vsb-language-switch a,
    [dir="rtl"] .vsb-language-switch a,
    [dir="ltr"] .vsb-language-switch a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 58px !important;
        max-width: none !important;
        min-height: 44px !important;

        margin: 0 !important;
        padding: 8px 13px !important;

        font-size: 14px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    .vsb-language-switch
        a[href="/vehicle-service-booking-ar"],
    .vsb-language-switch
        a[href="/vehicle-book-service-ar"],
    .vsb-language-switch
        a[href="/vehicle-service-care-ar"],
    .vsb-language-switch
        a[href="/vehicle-service-contact-ar"],
    .vsb-language-switch
        a[href="/vehicle-services-ar"],
    .vsb-language-switch
        a[href="/vehicle-account-security-ar"],
    .vsb-language-switch
        a[href="/vehicle-my-vehicles-ar"] {
        width: auto !important;
        min-width: 78px !important;
        max-width: none !important;
    }
}

/* MOBILE_HEADER_COMPACT_V2 */
@media (max-width: 600px) {
    /*
     * Four equal navigation columns keep both the English
     * and Arabic menus on one row.
     */
    .vsb-luxury-header .vsb-luxury-nav,
    .vsb-luxury-nav {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        justify-content: stretch !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
        gap: 6px !important;

        overflow: visible !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    .vsb-luxury-header .vsb-luxury-nav a,
    .vsb-luxury-nav a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 44px !important;

        margin: 0 !important;
        padding: 7px 3px !important;

        font-size: clamp(10px, 2.8vw, 12px) !important;
        line-height: 1.1 !important;
        text-align: center !important;
        white-space: nowrap !important;

        border-radius: 999px !important;
        box-sizing: border-box !important;
    }

    /*
     * Compact two-choice language control.
     * Both options retain a minimum 44px touch height.
     */
    .vsb-luxury-header .vsb-language-switch,
    .vsb-language-switch {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 126px !important;
        height: auto !important;

        margin: 0 auto !important;
        padding: 2px !important;
        gap: 2px !important;

        flex: 0 0 auto !important;
        box-sizing: border-box !important;
    }

    .vsb-luxury-header .vsb-language-switch a,
    .vsb-language-switch a,
    [dir="rtl"] .vsb-language-switch a,
    [dir="ltr"] .vsb-language-switch a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 44px !important;
        max-width: none !important;
        min-height: 44px !important;

        margin: 0 !important;
        padding: 6px 7px !important;

        font-size: 12px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    .vsb-language-switch
        a[href$="-ar"],
    .vsb-language-switch
        a[href*="-ar?"] {
        width: auto !important;
        min-width: 68px !important;
        max-width: 76px !important;
        padding-inline: 8px !important;
    }
}

/* IPHONE_FORM_FOCUS_ZOOM_FIX_V1 */
@media (max-width: 600px) {
    /*
     * iPhone Safari automatically enlarges the viewport when a
     * focused editable control has a computed font size below
     * 16px. Keep every customer-facing editable control at the
     * Safari-safe threshold while preserving normal pinch zoom.
     */
    body input:not([type="hidden"])
        :not([type="checkbox"])
        :not([type="radio"]),
    body select,
    body textarea {
        font-size: 16px !important;
        line-height: 1.35 !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

    /*
     * The selector above is repeated without line-separated
     * pseudo chaining for older WebKit selector parsing.
     */
    body input[type="text"],
    body input[type="email"],
    body input[type="tel"],
    body input[type="number"],
    body input[type="password"],
    body input[type="search"],
    body input[type="url"],
    body input[type="date"],
    body input[type="time"],
    body input[type="file"],
    body input:not([type]),
    body select,
    body textarea {
        font-size: 16px !important;
        line-height: 1.35 !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
}



/* OPTIONAL_IMAGE_CONTROLS_V7 */
.vsb-file-field {
    min-width: 0;
}

.vsb-file-field label {
    display: grid;
    gap: 8px;
}

.vsb-file-selection-name {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.vsb-file-clear {
    width: auto !important;
    min-width: 0 !important;
    margin-top: 10px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
}

.vsb-alert.is-warning {
    border-color: rgba(240, 201, 106, 0.62);
    background: rgba(102, 77, 24, 0.34);
    color: #f4d983;
    white-space: pre-line;
}

/* TOUCH_SCROLLABLE_SEARCH_RESULTS_V8 */
.vsb-search-results {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.vsb-search-result {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

.vsb-file-requirements {
    display: block;
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 13px;
    line-height: 1.55;
}

/* VEHICLE_SAVE_BUTTON_SPINNER_V1 */
@keyframes vsb-spin {
    to { transform: rotate(360deg); }
}
.vsb-btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.vsb-btn-loading::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    top: 50%;
    left: 50%;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: vsb-spin 0.7s linear infinite;
}

/* VEHICLE_IMAGE_PREVIEW_V1 */
.vsb-image-preview-wrap {
    margin-top: 10px;
    display: grid;
    gap: 6px;
}
.vsb-image-preview-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}
.vsb-image-preview {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: block;
}

/* BOOKING_DETAIL_POPUP_V1 */
.vsb-booking-detail-popup-box {
    max-width: 720px;
    max-height: 84vh;
    overflow-y: auto;
}

.vsb-detail-section {
    margin-top: 18px;
}

.vsb-detail-section:first-of-type {
    margin-top: 8px;
}

.vsb-detail-section h4 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: #171412;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.vsb-detail-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid rgba(23, 20, 18, 0.12);
    border-radius: 8px;
    padding: 10px 14px;
    background: #f7f5f2;
}

.vsb-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(23, 20, 18, 0.08);
}

.vsb-detail-row:last-child {
    border-bottom: none;
}

.vsb-detail-label {
    color: #6b655e;
    flex-shrink: 0;
}

.vsb-detail-value {
    color: #171412;
    font-weight: 600;
    text-align: end;
}

.vsb-detail-comment {
    margin: 0;
    padding: 10px 14px;
    border: 1px solid rgba(228, 0, 43, 0.18);
    border-radius: 8px;
    background: #fcebeb;
    color: #171412;
    font-size: 13px;
}

.vsb-clickable-ref {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

.vsb-clickable-ref:hover,
.vsb-clickable-ref:focus-visible {
    color: #e4002b;
}

.vsb-branch-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #eee;
    flex-shrink: 0;
}

.vsb-branch-logo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #171412;
    font-size: 13px;
    font-weight: 600;
}