/* ============================================================================
   RideFlex Design System
   Drop-in modern styling layer that augments Metronic / Bootstrap without
   replacing them. All selectors are namespaced with -rf- prefixes (or scoped
   to .rideflex-* containers) to avoid clashing with Metronic/Bootstrap.

   Includes:
   - Design tokens (CSS custom properties for color, spacing, radius, shadow)
   - Premium Arabic + Latin typography stack with font-display: swap
   - Modern button system (.btn-rf, .btn-rf-primary, .btn-rf-ghost, ...)
   - Modern card system (.card-rf, .card-rf-elevated, ...)
   - Section / container helpers
   - Form input polish (.form-rf-control, .form-rf-floating)
   - Accessible focus ring (no outline outline-offset hack)
   - Hero / CTA composition primitives
   - Logical-property-based spacing so RTL flips work for free
   - prefers-reduced-motion respected
   ============================================================================ */

/* --------------------------------------------------------------------------
   Premium fonts. Inter for Latin (already loaded), Cairo + Tajawal for Arabic.
   We import Cairo lazily; the Latin Inter is preloaded by the layout.
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand palette — premium gold accent on near-black, Petra-stone neutrals */
    --rf-brand-primary:        #c8a165;
    --rf-brand-primary-hover:  #b08c4f;
    --rf-brand-primary-soft:   #f5ecdb;
    --rf-brand-ink:            #0f1115;
    --rf-brand-ink-soft:       #2a2d34;
    --rf-brand-paper:          #ffffff;
    --rf-brand-sand:           #faf6ef;
    --rf-brand-stone-50:       #f7f7f8;
    --rf-brand-stone-100:      #eceef1;
    --rf-brand-stone-200:      #d8dce2;
    --rf-brand-stone-300:      #b8bfc9;
    --rf-brand-stone-500:      #6c7682;
    --rf-brand-stone-700:      #3a4150;
    --rf-brand-success:        #16a34a;
    --rf-brand-danger:         #dc2626;
    --rf-brand-warning:        #d97706;
    --rf-brand-info:           #0284c7;

    /* Typography */
    --rf-font-sans-en: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --rf-font-sans-ar: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
    --rf-font-sans:    var(--rf-font-sans-en);

    /* Type scale (fluid) */
    --rf-fs-xs:   .75rem;
    --rf-fs-sm:   .875rem;
    --rf-fs-base: 1rem;
    --rf-fs-lg:   1.125rem;
    --rf-fs-xl:   1.25rem;
    --rf-fs-2xl:  1.5rem;
    --rf-fs-3xl:  clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
    --rf-fs-4xl:  clamp(2rem,    1.6rem + 2vw,   3rem);
    --rf-fs-5xl:  clamp(2.5rem,  2rem   + 2.5vw, 3.75rem);

    --rf-fw-regular:  400;
    --rf-fw-medium:   500;
    --rf-fw-semibold: 600;
    --rf-fw-bold:     700;

    --rf-lh-tight:  1.2;
    --rf-lh-snug:   1.35;
    --rf-lh-normal: 1.55;
    --rf-lh-loose:  1.75;

    /* Spacing scale (4px-base) */
    --rf-space-0: 0;
    --rf-space-1: .25rem;
    --rf-space-2: .5rem;
    --rf-space-3: .75rem;
    --rf-space-4: 1rem;
    --rf-space-5: 1.25rem;
    --rf-space-6: 1.5rem;
    --rf-space-8: 2rem;
    --rf-space-10: 2.5rem;
    --rf-space-12: 3rem;
    --rf-space-16: 4rem;
    --rf-space-20: 5rem;
    --rf-space-24: 6rem;

    /* Radius scale */
    --rf-radius-sm:   .375rem;
    --rf-radius-md:   .625rem;
    --rf-radius-lg:   .875rem;
    --rf-radius-xl:   1.25rem;
    --rf-radius-2xl:  1.5rem;
    --rf-radius-pill: 999px;

    /* Shadows (premium, layered) */
    --rf-shadow-xs: 0 1px 2px rgba(15, 17, 21, 0.04);
    --rf-shadow-sm: 0 1px 3px rgba(15, 17, 21, 0.07), 0 1px 2px rgba(15, 17, 21, 0.04);
    --rf-shadow-md: 0 4px 12px rgba(15, 17, 21, 0.08), 0 2px 4px rgba(15, 17, 21, 0.04);
    --rf-shadow-lg: 0 12px 28px rgba(15, 17, 21, 0.10), 0 4px 8px rgba(15, 17, 21, 0.05);
    --rf-shadow-xl: 0 24px 56px rgba(15, 17, 21, 0.14), 0 8px 16px rgba(15, 17, 21, 0.06);
    --rf-shadow-gold: 0 14px 32px rgba(200, 161, 101, 0.28);

    /* Motion */
    --rf-ease-out: cubic-bezier(.16, 1, .3, 1);
    --rf-ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --rf-dur-fast: 140ms;
    --rf-dur-base: 220ms;
    --rf-dur-slow: 360ms;

    /* Focus ring */
    --rf-focus-ring: 0 0 0 3px rgba(200, 161, 101, 0.45);

    /* Container widths */
    --rf-container-narrow: 720px;
    --rf-container-base:   1140px;
    --rf-container-wide:   1320px;
}

/* Kill the unintended horizontal scroll triggered by Metronic + our hero background
   on narrow viewports / RTL. .rideflex-prose is the wrapper every redesigned page uses. */
html, body { max-width: 100%; overflow-x: hidden; }
.rideflex-prose { max-width: 100%; overflow-x: clip; }
.rideflex-prose img,
.rideflex-prose video { max-width: 100%; height: auto; display: block; }

/* Arabic switches to Cairo automatically when <html dir="rtl"> is set. */
#kt_app_root[dir="rtl"] {
    --rf-font-sans: var(--rf-font-sans-ar);
}

/* --------------------------------------------------------------------------
   Base typography polish — applies whenever the root rideflex-page wrapper
   is present, OR scoped via .rideflex-prose blocks. We don't force the
   Metronic body font globally because Metronic uses Inter system fonts too.
   -------------------------------------------------------------------------- */
body {
    font-family: var(--rf-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Slightly larger line-height for Arabic for readability. */
#kt_app_root[dir="rtl"] body { line-height: var(--rf-lh-loose); }

.rideflex-prose h1,
.rideflex-prose h2,
.rideflex-prose h3 {
    font-weight: var(--rf-fw-bold);
    letter-spacing: -0.02em;
    color: var(--rf-brand-ink);
}

.rideflex-prose h1 { font-size: var(--rf-fs-4xl); line-height: var(--rf-lh-tight); }
.rideflex-prose h2 { font-size: var(--rf-fs-3xl); line-height: var(--rf-lh-snug);  }
.rideflex-prose h3 { font-size: var(--rf-fs-2xl); line-height: var(--rf-lh-snug);  }

.rideflex-prose p,
.rideflex-prose li { font-size: var(--rf-fs-base); line-height: var(--rf-lh-normal); color: var(--rf-brand-stone-700); }

/* --------------------------------------------------------------------------
   Section / container primitives
   -------------------------------------------------------------------------- */
.rf-section {
    padding-block: var(--rf-space-16);
}

@media (max-width: 768px) {
    .rf-section { padding-block: var(--rf-space-12); }
}

.rf-section--tight   { padding-block: var(--rf-space-10); }
.rf-section--spacious { padding-block: var(--rf-space-24); }

.rf-section--sand    { background: var(--rf-brand-sand); }
.rf-section--stone   { background: var(--rf-brand-stone-50); }
.rf-section--ink     { background: var(--rf-brand-ink); color: var(--rf-brand-paper); }
.rf-section--ink p,
.rf-section--ink li  { color: var(--rf-brand-stone-200); }

.rf-container {
    max-width: var(--rf-container-base);
    margin-inline: auto;
    padding-inline: var(--rf-space-6);
}

.rf-container--narrow { max-width: var(--rf-container-narrow); }
.rf-container--wide   { max-width: var(--rf-container-wide);   }

.rf-section-head {
    text-align: center;
    margin-block-end: var(--rf-space-10);
}

.rf-section-eyebrow {
    display: inline-block;
    padding: var(--rf-space-1) var(--rf-space-3);
    border-radius: var(--rf-radius-pill);
    background: var(--rf-brand-primary-soft);
    color: var(--rf-brand-primary-hover);
    font-size: var(--rf-fs-xs);
    font-weight: var(--rf-fw-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-block-end: var(--rf-space-3);
}

.rf-section-title {
    font-size: var(--rf-fs-4xl);
    font-weight: var(--rf-fw-bold);
    letter-spacing: -0.02em;
    line-height: var(--rf-lh-tight);
    color: var(--rf-brand-ink);
    margin: 0 0 var(--rf-space-3);
}

.rf-section-subtitle {
    font-size: var(--rf-fs-lg);
    line-height: var(--rf-lh-normal);
    color: var(--rf-brand-stone-500);
    max-width: 56ch;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn-rf {
    --btn-bg: var(--rf-brand-stone-100);
    --btn-fg: var(--rf-brand-ink);
    --btn-border: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rf-space-2);
    padding: var(--rf-space-3) var(--rf-space-6);
    border-radius: var(--rf-radius-md);
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: inherit;
    font-size: var(--rf-fs-base);
    font-weight: var(--rf-fw-semibold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--rf-dur-fast) var(--rf-ease-out),
                background var(--rf-dur-fast) var(--rf-ease-out),
                box-shadow var(--rf-dur-fast) var(--rf-ease-out);
    user-select: none;
}

.btn-rf:hover  { transform: translateY(-1px); }
.btn-rf:active { transform: translateY(0); }
.btn-rf:focus-visible {
    outline: none;
    box-shadow: var(--rf-focus-ring);
}

.btn-rf-primary {
    --btn-bg: var(--rf-brand-primary);
    --btn-fg: var(--rf-brand-ink);
    --btn-border: var(--rf-brand-primary);
    box-shadow: var(--rf-shadow-md);
}
.btn-rf-primary:hover  { --btn-bg: var(--rf-brand-primary-hover); --btn-border: var(--rf-brand-primary-hover); box-shadow: var(--rf-shadow-gold); }

.btn-rf-ink {
    --btn-bg: var(--rf-brand-ink);
    --btn-fg: var(--rf-brand-paper);
    --btn-border: var(--rf-brand-ink);
}
.btn-rf-ink:hover { --btn-bg: var(--rf-brand-ink-soft); --btn-border: var(--rf-brand-ink-soft); }

.btn-rf-ghost {
    --btn-bg: transparent;
    --btn-fg: var(--rf-brand-ink);
    --btn-border: var(--rf-brand-stone-200);
}
.btn-rf-ghost:hover { --btn-bg: var(--rf-brand-stone-50); --btn-border: var(--rf-brand-stone-300); }

.btn-rf-ghost-on-dark {
    --btn-bg: transparent;
    --btn-fg: var(--rf-brand-paper);
    --btn-border: rgba(255,255,255,.25);
}
.btn-rf-ghost-on-dark:hover { --btn-bg: rgba(255,255,255,.08); --btn-border: rgba(255,255,255,.4); }

.btn-rf-sm  { padding: var(--rf-space-2) var(--rf-space-4); font-size: var(--rf-fs-sm); }
.btn-rf-lg  { padding: var(--rf-space-4) var(--rf-space-8); font-size: var(--rf-fs-lg); }
.btn-rf-pill { border-radius: var(--rf-radius-pill); }
.btn-rf-block { width: 100%; }

/* Disabled / loading state */
.btn-rf[disabled],
.btn-rf[aria-busy="true"] {
    cursor: not-allowed;
    opacity: 0.78;
    transform: none !important;
}
.rf-btn-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-inline-end: .55em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: rf-spin 0.8s linear infinite;
}
@keyframes rf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .rf-btn-spinner { animation-duration: 2s; }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card-rf {
    background: var(--rf-brand-paper);
    border: 1px solid var(--rf-brand-stone-100);
    border-radius: var(--rf-radius-xl);
    padding: var(--rf-space-6);
    box-shadow: var(--rf-shadow-sm);
    transition: transform var(--rf-dur-base) var(--rf-ease-out),
                box-shadow var(--rf-dur-base) var(--rf-ease-out),
                border-color var(--rf-dur-base) var(--rf-ease-out);
}

.card-rf:hover {
    transform: translateY(-3px);
    border-color: var(--rf-brand-stone-200);
    box-shadow: var(--rf-shadow-lg);
}

.card-rf-elevated { box-shadow: var(--rf-shadow-md); }

/* The card is a two-zone composition: image fills the top, content lives in a
   solid dark strip at the bottom. No text-over-image collision. */
.card-rf-media {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    border-radius: var(--rf-radius-xl);
    background: var(--rf-brand-paper);
    isolation: isolate;
    color: var(--rf-brand-paper);
    text-decoration: none;
    transition: transform var(--rf-dur-base) var(--rf-ease-out),
                box-shadow var(--rf-dur-base) var(--rf-ease-out);
    box-shadow: var(--rf-shadow-md);
    border: 1px solid var(--rf-brand-stone-100);
    min-height: 380px;
}
.card-rf-media:hover,
.card-rf-media:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--rf-shadow-xl);
    color: var(--rf-brand-paper);
    border-color: var(--rf-brand-stone-200);
}
.card-rf-media:focus-visible { outline: none; box-shadow: var(--rf-focus-ring), var(--rf-shadow-xl); }

/* Image zone (top ~60%) */
.card-rf-media__bg {
    position: relative;
    flex: 1 1 220px;
    min-height: 220px;
    background-size: cover;
    background-position: center;
    background-color: var(--rf-brand-stone-100);
    overflow: hidden;
    transition: filter var(--rf-dur-base) var(--rf-ease-out);
}
.card-rf-media__bg::after {
    /* Subtle bottom fade where the image meets the body strip, for a soft seam. */
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: 60px;
    background: linear-gradient(180deg, rgba(15,17,21,0) 0%, rgba(15,17,21,0.35) 100%);
    pointer-events: none;
}
.card-rf-media:hover .card-rf-media__bg { filter: brightness(1.05) saturate(1.05); }

/* The .card-rf-media__overlay class is no longer needed (kept as a no-op so
   existing service-page markup doesn't break). */
.card-rf-media__overlay { display: none; }

/* Body strip (bottom) — solid dark background, always readable */
.card-rf-media__body {
    position: relative;
    background: var(--rf-brand-ink);
    color: var(--rf-brand-paper);
    padding: var(--rf-space-5) var(--rf-space-6) var(--rf-space-6);
    z-index: 1;
}

.card-rf-media__title {
    font-size: var(--rf-fs-xl);
    font-weight: var(--rf-fw-bold);
    margin: 0 0 var(--rf-space-2);
    color: var(--rf-brand-paper);
    line-height: var(--rf-lh-snug);
    /* Clamp to 2 lines to keep cards balanced */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-rf-media__text {
    font-size: var(--rf-fs-sm);
    line-height: var(--rf-lh-normal);
    color: rgba(255,255,255,.78);
    margin: 0 0 var(--rf-space-4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Feature card with icon (about / mission / why-us)
   -------------------------------------------------------------------------- */
.card-rf-feature {
    background: var(--rf-brand-paper);
    border-radius: var(--rf-radius-xl);
    padding: var(--rf-space-8);
    border: 1px solid var(--rf-brand-stone-100);
    transition: transform var(--rf-dur-base) var(--rf-ease-out),
                box-shadow var(--rf-dur-base) var(--rf-ease-out);
    box-shadow: var(--rf-shadow-sm);
}
.card-rf-feature:hover { transform: translateY(-2px); box-shadow: var(--rf-shadow-md); }

.card-rf-feature__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--rf-radius-lg);
    background: var(--rf-brand-primary-soft);
    color: var(--rf-brand-primary-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-block-end: var(--rf-space-5);
}

.card-rf-feature__title {
    font-size: var(--rf-fs-xl);
    font-weight: var(--rf-fw-bold);
    color: var(--rf-brand-ink);
    margin: 0 0 var(--rf-space-3);
}

.card-rf-feature__body {
    color: var(--rf-brand-stone-500);
    line-height: var(--rf-lh-normal);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Stat tile
   -------------------------------------------------------------------------- */
.stat-rf {
    text-align: center;
    padding: var(--rf-space-6);
    background: var(--rf-brand-paper);
    border-radius: var(--rf-radius-xl);
    border: 1px solid var(--rf-brand-stone-100);
}

.stat-rf__number {
    font-size: var(--rf-fs-5xl);
    font-weight: var(--rf-fw-bold);
    color: var(--rf-brand-primary-hover);
    line-height: 1;
    margin-block-end: var(--rf-space-2);
}

.stat-rf__label {
    color: var(--rf-brand-stone-500);
    font-weight: var(--rf-fw-medium);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-rf-control {
    display: block;
    width: 100%;
    padding: var(--rf-space-3) var(--rf-space-4);
    font-family: inherit;
    font-size: var(--rf-fs-base);
    line-height: var(--rf-lh-snug);
    color: var(--rf-brand-ink);
    background: var(--rf-brand-paper);
    border: 1px solid var(--rf-brand-stone-200);
    border-radius: var(--rf-radius-md);
    transition: border-color var(--rf-dur-fast) var(--rf-ease-out),
                box-shadow   var(--rf-dur-fast) var(--rf-ease-out);
}

.form-rf-control:hover  { border-color: var(--rf-brand-stone-300); }
.form-rf-control:focus  { outline: none; border-color: var(--rf-brand-primary); box-shadow: var(--rf-focus-ring); }
.form-rf-control::placeholder { color: var(--rf-brand-stone-300); }

textarea.form-rf-control { min-height: 8rem; resize: vertical; }

.form-rf-label {
    display: inline-block;
    margin-block-end: var(--rf-space-2);
    font-weight: var(--rf-fw-semibold);
    color: var(--rf-brand-ink);
    font-size: var(--rf-fs-sm);
}

.form-rf-help { display: block; margin-block-start: var(--rf-space-1); color: var(--rf-brand-stone-500); font-size: var(--rf-fs-sm); }
.form-rf-error { display: block; margin-block-start: var(--rf-space-1); color: var(--rf-brand-danger); font-size: var(--rf-fs-sm); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero-rf {
    position: relative;
    padding-block: var(--rf-space-20) var(--rf-space-16);
    background:
        radial-gradient(1200px 600px at 100% -10%, rgba(200, 161, 101, .18), transparent 60%),
        radial-gradient(900px 600px at 0% 110%, rgba(15, 17, 21, .05), transparent 60%),
        var(--rf-brand-sand);
    overflow: hidden;
}

.hero-rf__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rf-space-10);
    align-items: center;
}

@media (min-width: 992px) {
    .hero-rf__inner { grid-template-columns: 1.1fr .9fr; }
}

.hero-rf__title {
    font-size: var(--rf-fs-5xl);
    line-height: var(--rf-lh-tight);
    font-weight: var(--rf-fw-bold);
    letter-spacing: -0.025em;
    color: var(--rf-brand-ink);
    margin: 0 0 var(--rf-space-4);
}

.hero-rf__subtitle {
    font-size: var(--rf-fs-lg);
    line-height: var(--rf-lh-normal);
    color: var(--rf-brand-stone-700);
    max-width: 56ch;
    margin: 0 0 var(--rf-space-8);
}

.hero-rf__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rf-space-3);
}

.hero-rf__media {
    position: relative;
    border-radius: var(--rf-radius-2xl);
    overflow: hidden;
    background: var(--rf-brand-stone-100);
    box-shadow: var(--rf-shadow-xl);
    aspect-ratio: 4/3;
}
.hero-rf__media img,
.hero-rf__media video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* --------------------------------------------------------------------------
   Service grid (responsive auto-fit)
   -------------------------------------------------------------------------- */
.service-grid-rf {
    display: grid;
    gap: var(--rf-space-6);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* --------------------------------------------------------------------------
   Video grid
   -------------------------------------------------------------------------- */
.video-grid-rf {
    display: grid;
    gap: var(--rf-space-6);
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.video-rf {
    border-radius: var(--rf-radius-xl);
    overflow: hidden;
    background: var(--rf-brand-ink);
    aspect-ratio: 16/9;
    box-shadow: var(--rf-shadow-md);
}
.video-rf video,
.video-rf iframe { width: 100%; height: 100%; display: block; border: 0; }

/* --------------------------------------------------------------------------
   Brand bar (logo + name) used in header & footer
   -------------------------------------------------------------------------- */
.brandbar-rf {
    display: inline-flex;
    align-items: center;
    gap: var(--rf-space-3);
    text-decoration: none;
    color: inherit;
}

.brandbar-rf__logo {
    width: 44px;
    height: 44px;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    background: var(--rf-brand-paper);
    box-shadow: 0 0 0 1px var(--rf-brand-stone-200), 0 2px 6px rgba(15, 17, 21, .08);
}

.brandbar-rf__name {
    font-weight: var(--rf-fw-bold);
    font-size: var(--rf-fs-lg);
    letter-spacing: -0.01em;
    color: var(--rf-brand-ink);
}

.brandbar-rf__tag {
    display: block;
    font-size: var(--rf-fs-xs);
    color: var(--rf-brand-stone-500);
    font-weight: var(--rf-fw-medium);
}

/* --------------------------------------------------------------------------
   Language switcher
   -------------------------------------------------------------------------- */
.lang-rf {
    display: inline-flex;
    align-items: center;
    gap: var(--rf-space-2);
    padding: var(--rf-space-2) var(--rf-space-3);
    border-radius: var(--rf-radius-pill);
    border: 1px solid var(--rf-brand-stone-200);
    background: var(--rf-brand-paper);
    color: var(--rf-brand-ink);
    font-weight: var(--rf-fw-semibold);
    font-size: var(--rf-fs-sm);
    text-decoration: none;
    transition: background var(--rf-dur-fast) var(--rf-ease-out),
                border-color var(--rf-dur-fast) var(--rf-ease-out);
}
.lang-rf:hover { background: var(--rf-brand-stone-50); border-color: var(--rf-brand-stone-300); color: var(--rf-brand-ink); }
.lang-rf:focus-visible { outline: none; box-shadow: var(--rf-focus-ring); }

/* --------------------------------------------------------------------------
   Reveal-on-scroll animation. The hide-then-fade-in only kicks in once the
   inline boot script in _Layout has tagged <html> with .has-js, so a page
   with broken / cached / blocked JS still renders all content (no more
   "everything is invisible because the observer never fired" trap).
   -------------------------------------------------------------------------- */
html.has-js .reveal-rf {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--rf-dur-slow) var(--rf-ease-out),
                transform var(--rf-dur-slow) var(--rf-ease-out);
}
html.has-js .reveal-rf.is-visible { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------------------
   Reduced-motion: kill non-essential animation
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .card-rf,
    .card-rf-media,
    .card-rf-feature,
    .btn-rf,
    .form-rf-control,
    .lang-rf,
    .reveal-rf,
    .card-rf-media__bg { transition: none !important; transform: none !important; }
    .reveal-rf { opacity: 1; }
}

/* ==========================================================================
   Mobile polish — explicit rules for narrow viewports across all components.
   Bootstrap 5 breakpoints: sm 576, md 768, lg 992, xl 1200, xxl 1400.
   ========================================================================== */
@media (max-width: 991.98px) {
    /* Hero stacks fully and trims its top/bottom padding */
    .hero-rf { padding-block: var(--rf-space-12) var(--rf-space-10); }
    .hero-rf__title { font-size: var(--rf-fs-4xl); }
    .hero-rf__subtitle { font-size: var(--rf-fs-base); }
    .hero-rf__cta { flex-direction: column; align-items: stretch; }
    .hero-rf__cta .btn-rf { width: 100%; justify-content: center; }
    .hero-rf__media { aspect-ratio: 16/10; }

    /* Section breathing room scales down */
    .rf-section { padding-block: var(--rf-space-10); }
    .rf-section--spacious { padding-block: var(--rf-space-12); }
    .rf-section-title { font-size: var(--rf-fs-3xl); }
    .rf-section-subtitle { font-size: var(--rf-fs-base); }
    .rf-container { padding-inline: var(--rf-space-4); }

    /* Service grid prefers 2-up on tablets */
    .service-grid-rf,
    .video-grid-rf,
    .gallery-rf {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

@media (max-width: 575.98px) {
    :root { --rf-space-16: 2.5rem; --rf-space-20: 3rem; --rf-space-24: 3.5rem; }

    .hero-rf { padding-block: var(--rf-space-10) var(--rf-space-8); }
    .hero-rf__title { font-size: var(--rf-fs-3xl); letter-spacing: -.02em; }
    .hero-rf__inner { gap: var(--rf-space-6); }

    .rf-section { padding-block: var(--rf-space-8); }
    .rf-section-head { margin-block-end: var(--rf-space-6); }

    .rf-container, .rf-container--narrow, .rf-container--wide { padding-inline: var(--rf-space-4); }

    /* Single-column galleries on phones so each photo gets full width */
    .service-grid-rf,
    .video-grid-rf,
    .gallery-rf {
        grid-template-columns: 1fr;
        gap: var(--rf-space-4);
    }

    /* Service cards: stack fully, give the image room */
    .svc-card-rf { margin-block-end: var(--rf-space-5); }
    .svc-card-rf__media { padding: var(--rf-space-2); min-height: auto; }
    .svc-card-rf__hero { aspect-ratio: 16/10; }
    .svc-card-rf__body { padding: var(--rf-space-5); gap: var(--rf-space-3); }
    .svc-card-rf__title { font-size: var(--rf-fs-xl); }
    .svc-card-rf__prices { flex-direction: column; }
    .svc-card-rf__prices .price-pill-rf { width: 100%; }
    .svc-card-rf__actions { flex-direction: column; align-items: stretch; }
    .svc-card-rf__actions .btn-rf { width: 100%; justify-content: center; }

    /* Booking modal: edge-to-edge on phones, no scroll trap */
    .rf-booking-modal .modal-dialog { margin: var(--rf-space-2); }
    .rf-booking-modal .modal-header,
    .rf-booking-modal .modal-body,
    .rf-booking-modal .modal-footer { padding: var(--rf-space-4); }
    .rf-booking-modal .modal-title { font-size: var(--rf-fs-xl); }
    .rf-booking-modal .form-grid { grid-template-columns: 1fr; }
    .rf-vehicle-pill { min-width: 0; flex: 1 1 calc(50% - var(--rf-space-3)); }

    /* WhatsApp floating button shifts up so it doesn't overlap the bottom CTAs */
    .whatsapp-circle { bottom: 16px; right: 16px; width: 52px; height: 52px; }
    .whatsapp-circle img { width: 28px; height: 28px; }

    /* About / Contact / footer text stays inside the viewport */
    .rideflex-prose { font-size: var(--rf-fs-base); }

    /* Footer copyright wraps and centers */
    .app-footer .app-container { flex-direction: column; gap: var(--rf-space-2); text-align: center; }

    /* Brand bar in mobile header: don't push everything else */
    .brandbar-rf__logo { width: 36px; height: 36px; }
    .brandbar-rf__name { font-size: var(--rf-fs-base); }
}

/* The Metronic mobile drawer for the sidebar should overlay (Bootstrap handles
   the toggle), but make sure no extra margin remains on the wrapper when the
   drawer is closed. Already handled by .app-sidebar-fixed rules. */
@media (max-width: 991.98px) {
    body[data-kt-app-sidebar-fixed="true"] .app-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    body[data-kt-app-sidebar-fixed="true"] .app-header,
    body[data-kt-app-sidebar-fixed="true"] .app-footer {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ==========================================================================
   Kill leftover Metronic toolbar gap. Our redesigned views render their own
   hero immediately under the header, so the empty toolbar slot Metronic
   reserves below the fixed header just leaves a white band.
   ========================================================================== */
.app-toolbar:empty,
#kt_app_toolbar:empty { display: none !important; }

body .app-main,
body .app-content,
body #kt_app_content { padding-top: 0 !important; }

/* The page wrapper itself only needs to clear the fixed header height —
   Metronic does this via --kt-app-header-height. Don't add extra spacing
   on top of it. */
body[data-kt-app-toolbar-enabled="false"] .app-wrapper {
    --kt-app-toolbar-height: 0px;
    --kt-app-toolbar-minimize-height: 0px;
}

/* Force the header to flow with the document (not be position:fixed at
   viewport top). Metronic's @media (min-width:992px) rule for
   [data-kt-app-header-fixed=true] .app-header sets position:fixed which
   then forces .app-wrapper padding-top: var(--kt-app-header-height), and
   that padding is what shows as a blank band above the hero. Switching
   to flow positioning eliminates both the fixed pin and the reserved
   gap, so the hero butts up directly against the header. */
.app-header {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
}
body .app-wrapper {
    padding-top: 0 !important;
}

/* ==========================================================================
   Sidebar — restyled to match the gold/ink design system.
   Targets Metronic's .app-sidebar classes directly. !important is required
   because Metronic ships its own scoped styles with high specificity.
   ========================================================================== */
.app-sidebar {
    background: var(--rf-brand-ink) !important;
    border-color: rgba(255,255,255,.06) !important;
    box-shadow: var(--rf-shadow-lg);
}

/* Logo header — fixed height, centered, with a hairline divider */
.app-sidebar .app-sidebar-logo {
    height: 110px !important;
    padding: var(--rf-space-4) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--rf-brand-ink) !important;
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: relative;
}
.app-sidebar .app-sidebar-logo > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.app-sidebar .app-sidebar-logo-default,
.app-sidebar .app-sidebar-logo-minimize {
    /* Render the logo as a clean circle to match the brand bar */
    width:  78px !important;
    height: 78px !important;
    max-width:  78px !important;
    max-height: 78px !important;
    margin: 0 !important;
    object-fit: cover;
    border-radius: 50%;
    background: var(--rf-brand-paper);
    box-shadow: 0 0 0 2px rgba(200, 161, 101, .35), 0 6px 14px rgba(0, 0, 0, .35);
    filter: none;
}
/* When the sidebar is minimised, the smaller logo image still circle-fits */
.app-sidebar .app-sidebar-logo-minimize {
    width:  36px !important;
    height: 36px !important;
    max-width:  36px !important;
    max-height: 36px !important;
    box-shadow: 0 0 0 1px rgba(200, 161, 101, .5);
}

/* Menu items — light text on ink, gold hover/active */
.app-sidebar .menu-title,
.app-sidebar .menu-link,
.app-sidebar .menu-icon i { color: var(--rf-brand-stone-200) !important; }
.app-sidebar .menu-bullet .bullet,
.app-sidebar .menu-bullet .bullet-dot { background-color: rgba(255,255,255,.35) !important; }

.app-sidebar .menu-item .menu-link {
    border-radius: var(--rf-radius-md) !important;
    margin-block: 2px;
    transition: background var(--rf-dur-fast) var(--rf-ease-out),
                color var(--rf-dur-fast) var(--rf-ease-out);
}
.app-sidebar .menu-item .menu-link:hover,
.app-sidebar .menu-item.hover > .menu-link,
.app-sidebar .menu-item.here > .menu-link,
.app-sidebar .menu-item.show > .menu-link {
    background: rgba(200, 161, 101, .15) !important;
    color: var(--rf-brand-primary) !important;
}
.app-sidebar .menu-item .menu-link:hover .menu-title,
.app-sidebar .menu-item .menu-link:hover .menu-icon i,
.app-sidebar .menu-item.here > .menu-link .menu-title,
.app-sidebar .menu-item.here > .menu-link .menu-icon i,
.app-sidebar .menu-item.show > .menu-link .menu-title,
.app-sidebar .menu-item.show > .menu-link .menu-icon i {
    color: var(--rf-brand-primary) !important;
}
.app-sidebar .menu-arrow:after {
    border-color: rgba(255,255,255,.4) !important;
}

/* The little hamburger toggle inside the sidebar */
.app-sidebar .app-sidebar-toggle {
    /* The toggle button is removed from the markup, but in case any stray
       instance shows up we still style it to match the design. */
    background: var(--rf-brand-primary) !important;
    color: var(--rf-brand-ink) !important;
    border-color: var(--rf-brand-primary) !important;
    display: none !important;
}

/* Force the sidebar to its full expanded width on desktop, even if any
   leftover Metronic localStorage state tries to flip to minimised mode.
   Metronic uses margin-left (LTR) / margin-right (RTL — handled later) on
   .app-wrapper for the offset, so override that to the FULL sidebar width
   regardless of the minimize attribute. */
@media (min-width: 992px) {
    body[data-kt-app-sidebar-minimize="on"] .app-sidebar,
    body .app-sidebar {
        width: var(--bs-app-sidebar-width, 225px) !important;
        min-width: var(--bs-app-sidebar-width, 225px) !important;
    }
    body[data-kt-app-sidebar-minimize="on"] .app-wrapper,
    body[data-kt-app-sidebar-fixed="true"] .app-wrapper {
        margin-left: var(--bs-app-sidebar-width, 225px) !important;
    }
    /* Menu titles must always show on desktop — no icon-only collapse */
    .app-sidebar .menu-title { display: inline-block !important; }
}

/* --------------------------------------------------------------------------
   Sidebar in RTL: Metronic uses physical left/right positioning, so when the
   document switches to dir="rtl" the sidebar stays on the left and the
   content gets indented from the left instead of the right. Force-flip
   every offset Metronic applies.
   -------------------------------------------------------------------------- */
#kt_app_root[dir="rtl"] .app-sidebar,
#kt_app_root[dir="rtl"] [data-kt-app-sidebar-fixed="true"] .app-sidebar {
    left: auto !important;
    right: 0 !important;
}
/* Wipe Metronic's LEFT offsets on every layout level and re-apply on the RIGHT */
#kt_app_root[dir="rtl"] body[data-kt-app-sidebar-fixed="true"] .app-wrapper,
#kt_app_root[dir="rtl"] body[data-kt-app-sidebar-enabled="true"] .app-wrapper,
#kt_app_root[dir="rtl"] body[data-kt-app-sidebar-fixed="true"] .app-default,
#kt_app_root[dir="rtl"] body[data-kt-app-sidebar-enabled="true"] .app-default,
#kt_app_root[dir="rtl"] body[data-kt-app-sidebar-fixed="true"] .app-page,
#kt_app_root[dir="rtl"] body[data-kt-app-sidebar-enabled="true"] .app-page,
#kt_app_root[dir="rtl"] body[data-kt-app-sidebar-fixed="true"] .app-main,
#kt_app_root[dir="rtl"] body[data-kt-app-sidebar-enabled="true"] .app-main,
#kt_app_root[dir="rtl"] .app-header,
#kt_app_root[dir="rtl"] .app-footer,
#kt_app_root[dir="rtl"] .app-toolbar {
    padding-left: 0 !important;
    margin-left: 0 !important;
}
#kt_app_root[dir="rtl"] body[data-kt-app-sidebar-fixed="true"] .app-wrapper,
#kt_app_root[dir="rtl"] body[data-kt-app-sidebar-enabled="true"] .app-wrapper {
    margin-right: var(--bs-app-sidebar-width, 225px) !important;
}
#kt_app_root[dir="rtl"] body[data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-minimize="on"] .app-wrapper {
    margin-right: var(--bs-app-sidebar-minimize-width, 75px) !important;
}
/* The fixed header/footer span the full width and need their padding flipped too. */
#kt_app_root[dir="rtl"] body[data-kt-app-sidebar-fixed="true"] .app-header,
#kt_app_root[dir="rtl"] body[data-kt-app-sidebar-enabled="true"] .app-header,
#kt_app_root[dir="rtl"] body[data-kt-app-sidebar-fixed="true"] .app-footer,
#kt_app_root[dir="rtl"] body[data-kt-app-sidebar-enabled="true"] .app-footer {
    padding-right: var(--bs-app-sidebar-width, 225px) !important;
    padding-left: 0 !important;
}
#kt_app_root[dir="rtl"] body[data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-minimize="on"] .app-header,
#kt_app_root[dir="rtl"] body[data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-minimize="on"] .app-footer {
    padding-right: var(--bs-app-sidebar-minimize-width, 75px) !important;
}

/* Move the inset toggle button to the inner (document-facing) edge */
#kt_app_root[dir="rtl"] .app-sidebar .app-sidebar-toggle {
    right: auto !important;
    left: 0 !important;
    transform: translate(-50%, -50%) !important;
}
#kt_app_root[dir="rtl"] .app-sidebar .app-sidebar-toggle .ki-duotone { transform: scaleX(-1); }

/* On mobile (lg-down) the sidebar collapses into a drawer; no margin offsets */
@media (max-width: 991.98px) {
    #kt_app_root[dir="rtl"] body[data-kt-app-sidebar-fixed="true"] .app-wrapper,
    #kt_app_root[dir="rtl"] body[data-kt-app-sidebar-enabled="true"] .app-wrapper,
    #kt_app_root[dir="rtl"] body[data-kt-app-sidebar-fixed="true"] .app-header,
    #kt_app_root[dir="rtl"] body[data-kt-app-sidebar-enabled="true"] .app-header,
    #kt_app_root[dir="rtl"] body[data-kt-app-sidebar-fixed="true"] .app-footer,
    #kt_app_root[dir="rtl"] body[data-kt-app-sidebar-enabled="true"] .app-footer {
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
}

/* ==========================================================================
   Home service card — used on the Home page Services grid.
   Real <img> on top (4:3, lazy, hover zoom) + solid dark body strip with
   title, body, and CTA. No background-image hacks, no empty white gaps.
   ========================================================================== */
.home-card-rf {
    display: flex;
    flex-direction: column;
    background: var(--rf-brand-paper);
    border: 1px solid var(--rf-brand-stone-100);
    border-radius: var(--rf-radius-xl);
    overflow: hidden;
    box-shadow: var(--rf-shadow-md);
    text-decoration: none;
    color: var(--rf-brand-ink);
    transition: transform var(--rf-dur-base) var(--rf-ease-out),
                box-shadow var(--rf-dur-base) var(--rf-ease-out),
                border-color var(--rf-dur-base) var(--rf-ease-out);
}
.home-card-rf:hover,
.home-card-rf:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--rf-shadow-xl);
    border-color: var(--rf-brand-stone-200);
    color: var(--rf-brand-ink);
}
.home-card-rf:focus-visible { outline: none; box-shadow: var(--rf-focus-ring), var(--rf-shadow-xl); }

.home-card-rf__media {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--rf-brand-stone-100);
}
.home-card-rf__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--rf-dur-slow) var(--rf-ease-out);
}
.home-card-rf:hover .home-card-rf__media img {
    transform: scale(1.06);
}

.home-card-rf__body {
    /*background: var(--rf-brand-ink);*/
    color: var(--rf-brand-paper);
    padding: var(--rf-space-5) var(--rf-space-6) var(--rf-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--rf-space-3);
    flex: 1 1 auto;
}
.home-card-rf__title {
    font-size: var(--rf-fs-xl);
    font-weight: var(--rf-fw-bold);
    color: var(--rf-brand-paper);
    margin: 0;
    line-height: var(--rf-lh-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-card-rf__text {
    font-size: var(--rf-fs-sm);
    color: rgba(255, 255, 255, 0.78);
    line-height: var(--rf-lh-normal);
    margin: 0;
    flex: 1 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-card-rf__action {
    align-self: flex-start;
    margin-block-start: var(--rf-space-1);
}

/* ==========================================================================
   Data-driven service card — renders one row of DB data per card:
   image gallery on the left, title + description + price pills + Book-this
   on the right. Stacks on small screens.
   ========================================================================== */
.svc-card-rf {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--rf-brand-paper);
    border: 1px solid var(--rf-brand-stone-100);
    border-radius: var(--rf-radius-xl);
    overflow: hidden;
    box-shadow: var(--rf-shadow-sm);
    transition: transform var(--rf-dur-base) var(--rf-ease-out),
                box-shadow var(--rf-dur-base) var(--rf-ease-out),
                border-color var(--rf-dur-base) var(--rf-ease-out);
    margin-block-end: var(--rf-space-8);
}
.svc-card-rf:hover {
    transform: translateY(-2px);
    box-shadow: var(--rf-shadow-md);
    border-color: var(--rf-brand-stone-200);
}
@media (min-width: 768px) {
    .svc-card-rf { grid-template-columns: 0.95fr 1.05fr; }
}

.svc-card-rf__media {
    position: relative;
    background: var(--rf-brand-stone-100);
    min-height: 280px;
    display: flex;
    flex-direction: column;
    gap: var(--rf-space-2);
    padding: var(--rf-space-2);
}
.svc-card-rf__hero {
    flex: 1 1 auto;
    border-radius: var(--rf-radius-lg);
    overflow: hidden;
    background: var(--rf-brand-stone-200);
    aspect-ratio: 4/3;
}
.svc-card-rf__hero img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--rf-dur-slow) var(--rf-ease-out);
}
.svc-card-rf:hover .svc-card-rf__hero img { transform: scale(1.04); }
.svc-card-rf__thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--rf-space-2);
}
.svc-card-rf__thumb {
    aspect-ratio: 1/1;
    border-radius: var(--rf-radius-sm);
    overflow: hidden;
    background: var(--rf-brand-stone-200);
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color var(--rf-dur-fast) var(--rf-ease-out);
    padding: 0;
}
.svc-card-rf__thumb.is-active {
    border-color: var(--rf-brand-primary);
}
.svc-card-rf__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.svc-card-rf__body {
    padding: var(--rf-space-6) var(--rf-space-6) var(--rf-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--rf-space-4);
}
.svc-card-rf__title {
    font-size: var(--rf-fs-2xl);
    font-weight: var(--rf-fw-bold);
    color: var(--rf-brand-ink);
    margin: 0;
    letter-spacing: -0.01em;
}
.svc-card-rf__minititle {
    color: var(--rf-brand-primary-hover);
    font-weight: var(--rf-fw-semibold);
    font-size: var(--rf-fs-sm);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.svc-card-rf__desc {
    color: var(--rf-brand-stone-700);
    line-height: var(--rf-lh-normal);
    margin: 0;
}

.svc-card-rf__prices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rf-space-3);
    align-items: stretch;
}
.price-pill-rf {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--rf-space-3) var(--rf-space-4);
    border-radius: var(--rf-radius-md);
    background: var(--rf-brand-sand);
    border: 1px solid var(--rf-brand-primary-soft);
    min-width: 120px;
}
.price-pill-rf__label {
    font-size: var(--rf-fs-xs);
    font-weight: var(--rf-fw-semibold);
    color: var(--rf-brand-stone-500);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.price-pill-rf__value {
    font-size: var(--rf-fs-xl);
    font-weight: var(--rf-fw-bold);
    color: var(--rf-brand-ink);
}
.price-pill-rf__value small {
    font-size: var(--rf-fs-xs);
    font-weight: var(--rf-fw-medium);
    color: var(--rf-brand-stone-500);
    margin-inline-start: 2px;
}

.svc-card-rf__details {
    border-top: 1px solid var(--rf-brand-stone-100);
    padding-block-start: var(--rf-space-3);
}
.svc-card-rf__details summary {
    cursor: pointer;
    font-weight: var(--rf-fw-semibold);
    color: var(--rf-brand-primary-hover);
    list-style: none;
}
.svc-card-rf__details summary::-webkit-details-marker { display: none; }
.svc-card-rf__details summary::after {
    content: " ▾";
    color: var(--rf-brand-stone-500);
    transition: transform var(--rf-dur-fast) var(--rf-ease-out);
    display: inline-block;
}
.svc-card-rf__details[open] summary::after { transform: rotate(180deg); }
.svc-card-rf__details > p {
    margin: var(--rf-space-3) 0 0;
    color: var(--rf-brand-stone-700);
    line-height: var(--rf-lh-normal);
    white-space: pre-wrap;
}

.svc-card-rf__actions {
    display: flex;
    gap: var(--rf-space-3);
    margin-block-start: auto;
}

/* Empty-state when DB returns 0 rows */
.svc-empty-rf {
    text-align: center;
    padding: var(--rf-space-12) var(--rf-space-6);
    background: var(--rf-brand-paper);
    border: 1px dashed var(--rf-brand-stone-200);
    border-radius: var(--rf-radius-xl);
    color: var(--rf-brand-stone-500);
}

/* ==========================================================================
   Improved gallery — real <img> tags, 4:3 aspect ratio, hover zoom, lazy.
   Used by service pages instead of .card-rf-media for the photo galleries.
   ========================================================================== */
.gallery-rf {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--rf-space-4);
}
.gallery-rf__item {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    border-radius: var(--rf-radius-lg);
    overflow: hidden;
    background: var(--rf-brand-stone-100);
    box-shadow: var(--rf-shadow-sm);
    transition: transform var(--rf-dur-base) var(--rf-ease-out),
                box-shadow var(--rf-dur-base) var(--rf-ease-out);
    text-decoration: none;
    color: inherit;
    border: 0;
    padding: 0;
}
.gallery-rf__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--rf-dur-slow) var(--rf-ease-out);
}
.gallery-rf__item:hover,
.gallery-rf__item:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--rf-shadow-lg);
    outline: none;
}
.gallery-rf__item:focus-visible { box-shadow: var(--rf-focus-ring), var(--rf-shadow-lg); }
.gallery-rf__item:hover img,
.gallery-rf__item:focus-visible img { transform: scale(1.06); }
.gallery-rf__item__caption {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: var(--rf-space-3) var(--rf-space-4);
    background: linear-gradient(180deg, rgba(15,17,21,0) 0%, rgba(15,17,21,0.7) 100%);
    color: var(--rf-brand-paper);
    font-size: var(--rf-fs-sm);
    font-weight: var(--rf-fw-semibold);
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ==========================================================================
   Booking modal — Bootstrap 5 dialog restyled with the design system.
   Triggered by any [data-bs-toggle=modal][data-bs-target="#rf-booking-modal"].
   ========================================================================== */
.rf-booking-modal .modal-content {
    border: 0;
    border-radius: var(--rf-radius-2xl);
    overflow: hidden;
    box-shadow: var(--rf-shadow-xl);
}
.rf-booking-modal .modal-header {
    background: var(--rf-brand-ink);
    color: var(--rf-brand-paper);
    padding: var(--rf-space-6);
    border: 0;
}
.rf-booking-modal .modal-header .modal-title {
    font-size: var(--rf-fs-2xl);
    font-weight: var(--rf-fw-bold);
    color: var(--rf-brand-paper);
}
.rf-booking-modal .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .8;
}
.rf-booking-modal .modal-body {
    padding: var(--rf-space-6);
    background: var(--rf-brand-paper);
}
.rf-booking-modal .modal-footer {
    border: 0;
    padding: var(--rf-space-4) var(--rf-space-6) var(--rf-space-6);
}
.rf-booking-modal .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rf-space-4);
}
@media (max-width: 640px) {
    .rf-booking-modal .form-grid { grid-template-columns: 1fr; }
}

/* Vehicle pills (Car X / Van Y) inside the booking modal */
.rf-vehicle-picker__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rf-space-3);
    margin-block-start: var(--rf-space-2);
}
.rf-vehicle-pill {
    --pill-bg: var(--rf-brand-paper);
    --pill-border: var(--rf-brand-stone-200);
    --pill-fg: var(--rf-brand-ink);
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--rf-space-3) var(--rf-space-4);
    background: var(--pill-bg);
    border: 2px solid var(--pill-border);
    border-radius: var(--rf-radius-md);
    color: var(--pill-fg);
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--rf-dur-fast) var(--rf-ease-out),
                background var(--rf-dur-fast) var(--rf-ease-out),
                transform var(--rf-dur-fast) var(--rf-ease-out);
    min-width: 130px;
}
.rf-vehicle-pill:hover {
    border-color: var(--rf-brand-stone-300);
    transform: translateY(-1px);
}
.rf-vehicle-pill.is-active {
    --pill-border: var(--rf-brand-primary);
    --pill-bg: var(--rf-brand-primary-soft);
}
.rf-vehicle-pill__label {
    font-weight: var(--rf-fw-semibold);
    font-size: var(--rf-fs-sm);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rf-brand-stone-500);
}
.rf-vehicle-pill.is-active .rf-vehicle-pill__label {
    color: var(--rf-brand-primary-hover);
}
.rf-vehicle-pill__price {
    font-weight: var(--rf-fw-bold);
    font-size: var(--rf-fs-lg);
    color: var(--rf-brand-ink);
}
.rf-vehicle-pill__price small {
    font-size: var(--rf-fs-xs);
    font-weight: var(--rf-fw-medium);
    color: var(--rf-brand-stone-500);
    margin-inline-start: 2px;
}


/* Mobile: sidebar is a drawer — zero margins, hidden off-screen */
@media (max-width: 991.98px) {
    .app-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* LTR drawer: hidden off left edge */
    #kt_app_sidebar {
        transform: translateX(-100%) !important;
        left: 0 !important;
        right: auto !important;
    }

    /* RTL drawer: hidden off right edge */
    #kt_app_root[dir="rtl"] #kt_app_sidebar {
        transform: translateX(100%) !important;
        left: auto !important;
        right: 0 !important;
    }

    /* Both: show when drawer is open */
    #kt_app_sidebar.drawer-on {
        transform: translateX(0) !important;
    }

    #kt_app_root[dir="rtl"] #kt_app_sidebar.drawer-on {
        transform: translateX(0) !important;
    }
}

/* ── RTL Desktop: push header content away from the right-side sidebar ── */
@media (min-width: 992px) {
    #kt_app_root[dir="rtl"] #kt_app_header {
        padding-right: var(--bs-app-sidebar-width, 225px) !important;
        padding-left: 0 !important;
    }

    /* Fix white gap above header in RTL — Metronic adds margin-top to app-page */
    #kt_app_root[dir="rtl"] #kt_app_page {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Fix content area not filling the left side properly */
    #kt_app_root[dir="rtl"] #kt_app_wrapper {
        margin-right: var(--bs-app-sidebar-width, 225px) !important;
        margin-left: 0 !important;
    }

    #kt_app_root[dir="rtl"] #kt_app_main {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* ── RTL Mobile: header takes full width, no sidebar offset ── */
@media (max-width: 991.98px) {
    #kt_app_root[dir="rtl"] #kt_app_header {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    #kt_app_root[dir="rtl"] #kt_app_wrapper {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}