/* Main colour (owner, 6 Oct 2026): deep green kept, mint replaced by road-line yellow to stand apart from competitors that use green/teal. Old file: skin-rf.mint-backup.css */
/* RestarFleet identity skin (preview: add ?skin=rf to any page).
   Built from the RestarFleet brand kit so the site no longer echoes the Restart car-rental brand:
   deep teal-black instead of charcoal, mint for actions, the real RF mark, Readex Pro (Latin + Arabic
   drawn as one family), square-cut buttons, code-style labels. Orange survives only as the logo's
   node, used as a signature: the end of the hero underline, the dot that carries a return through the
   system, and a scroll marker in the margin. */
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&display=swap');

.skin-rf {
  --brand: #F5C518; --brand-ink: #10181E; --brand-deep: #8A6A00;
  --brand-tint: rgba(245, 197, 24, .12); --brand-edge: rgba(245, 197, 24, .45); --brand-halo: rgba(245, 197, 24, .2);
  --node: #FF7A00; --node-ring: #F8FAFC;
  --bg: #06120F; --bg-2: #0B211B; --bg-3: #0E2922; --paper: #0B211B;
  --line: rgba(174, 238, 214, .12); --line-2: rgba(174, 238, 214, .26);
  --head: #F3FAF7; --text: #DCEBE5; --text-2: #C3D8CF; --lead: #B4CCC3; --soft: #A8C3B9; --muted: #86A89B;
  --accent: #F5C518; --nav-bg: rgba(6, 18, 15, .97);
  --glow: rgba(11, 107, 88, .55); --glow-2: rgba(245, 197, 24, .18); --grid: rgba(182, 245, 218, .055);
  --radius: 12px;
  --rf-font: 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, sans-serif;
}
.skin-rf[data-theme="light"] {
  --bg: #F3FAF7; --bg-2: #E6F1EC; --bg-3: #FFFFFF; --paper: #E6F1EC;
  --line: rgba(9, 43, 64, .12); --line-2: rgba(9, 43, 64, .22);
  --head: #092B40; --text: #24423A; --text-2: #2F4D45; --lead: #3E5F57; --soft: #4E6B62; --muted: #4E6B62;
  --accent: #0B6B58; --nav-bg: rgba(243, 250, 247, .97); --node-ring: #FFFFFF;
  --glow: rgba(245, 197, 24, .28); --glow-2: rgba(245, 197, 24, .12); --grid: rgba(9, 43, 64, .06);
}
@media (prefers-color-scheme: light) {
  .skin-rf:not([data-theme="dark"]) {
    --bg: #F3FAF7; --bg-2: #E6F1EC; --bg-3: #FFFFFF; --paper: #E6F1EC;
    --line: rgba(9, 43, 64, .12); --line-2: rgba(9, 43, 64, .22);
    --head: #092B40; --text: #24423A; --text-2: #2F4D45; --lead: #3E5F57; --soft: #4E6B62; --muted: #4E6B62;
    --accent: #0B6B58; --nav-bg: rgba(243, 250, 247, .97); --node-ring: #FFFFFF;
    --glow: rgba(245, 197, 24, .28); --glow-2: rgba(245, 197, 24, .12); --grid: rgba(9, 43, 64, .06);
  }
}

/* Type: one family for English, BM and Arabic */
.skin-rf body, .skin-rf :lang(ar) body, .skin-rf :is(h1, h2, h3, .btn, .lang, .sol .tag, .node .k, .pkg-tab, .mnav h4, .stamp, .brand, .dd-btn) { font-family: var(--rf-font); }
.skin-rf body { font-weight: 300; }
.skin-rf h1, .skin-rf h2 { font-weight: 600; letter-spacing: -.03em; }
.skin-rf h3 { font-weight: 600; }
/* Labels: short code-style tags instead of wide capitals */
.skin-rf .eyebrow { font: 500 13px/1.3 var(--mono); letter-spacing: .01em; text-transform: none; color: var(--accent); }
.skin-rf .eyebrow .num { color: var(--muted); }
.skin-rf .eyebrow .num::after { content: ' /'; }
.skin-rf:lang(ar) .eyebrow { font-family: var(--rf-font); }
/* Square-cut controls instead of pills */
.skin-rf .btn { border-radius: 10px; font-weight: 500; }
.skin-rf .btn-primary { background: var(--brand); color: var(--brand-ink); }
.skin-rf .btn-primary:hover { background: #FFD84A; }
.skin-rf .lang, .skin-rf .lang a { border-radius: 9px; }
.skin-rf .theme-btn { border-radius: 10px; }
.skin-rf .chip, .skin-rf .pkg-tabs, .skin-rf .pkg-tab { border-radius: 10px; }

/* The real RF mark in the header and footer */
.skin-rf .brand-mark { background: none; width: 36px; height: 36px; border-radius: 0; }
.skin-rf .brand-mark img { width: 100%; height: 100%; display: block; }
.skin-rf .brand { gap: 11px; }
.skin-rf .bwm { display: flex; flex-direction: column; line-height: 1; }
.skin-rf .bwm b { font-weight: 600; font-size: 18px; color: var(--head); letter-spacing: -.01em; }
.skin-rf .bwm small { margin-top: 4px; font: 500 9.5px/1 var(--rf-font); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.skin-rf:lang(ar) .bwm small { letter-spacing: 0; }

/* Atmosphere: emerald light and a fine grid behind the openings and the call to action */
.skin-rf .hero, .skin-rf .phero, .skin-rf .cta { isolation: isolate; }
.skin-rf .hero::before, .skin-rf .phero::before, .skin-rf .cta::before { content: ''; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(55% 70% at 78% 45%, var(--glow), transparent 70%), radial-gradient(35% 45% at 92% 8%, var(--glow-2), transparent 70%); }
.skin-rf .hero::after, .skin-rf .phero::after, .skin-rf .cta::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 68px 68px; mask-image: radial-gradient(85% 90% at 65% 40%, #000 35%, transparent 85%); }

/* Former light sections become part of the night; tokens keep them right by day too */
.skin-rf .light { background: var(--bg-2); color: var(--text); }
.skin-rf .light h2, .skin-rf .light h3 { color: var(--head); }
.skin-rf .light .lead { color: var(--lead); }
.skin-rf .sol { background: var(--bg-3); border-color: var(--line); }
.skin-rf .sol .shot { background: color-mix(in srgb, var(--bg-2) 55%, var(--bg)); }
.skin-rf .sol .tag { color: var(--accent); }
.skin-rf .sol p, .skin-rf .sol li { color: var(--soft); }
.skin-rf .sol-link, .skin-rf .text-link { color: var(--accent); }
.skin-rf .steps::before { background: linear-gradient(to right, var(--brand) 0 62%, var(--line-2) 62%); }
.skin-rf[dir="rtl"] .steps::before { background: linear-gradient(to left, var(--brand) 0 62%, var(--line-2) 62%); }
.skin-rf .step .n { background: var(--bg-2); color: var(--accent); border-color: var(--brand); }
.skin-rf .step:last-child .n { border-color: var(--line-2); color: var(--muted); }
.skin-rf .step p { color: var(--soft); }
.skin-rf .pkg { background: var(--bg-3); }

/* Call to action: the dark emerald light instead of an orange slab */
.skin-rf .cta { background-color: var(--bg-2); color: var(--text); border: 1px solid var(--line-2); }
.skin-rf .cta h2 { color: var(--head); }
.skin-rf .cta .btn-primary { background: var(--brand); color: var(--brand-ink); }
.skin-rf .cta .contact { color: var(--accent); }

/* Key tags in the brand colours */
.skin-rf .t1 { background: #F3FAF7; color: #092B40; }
.skin-rf .t2 { background: #F5C518; color: #10181E; }
.skin-rf .t3 { background: #092B40; color: #F3FAF7; }
.skin-rf .t4 { background: #0B211B; color: #F3FAF7; box-shadow: 0 28px 40px -26px rgba(0,0,0,.7), inset 0 0 0 1.5px rgba(245, 197, 24,.3); }
.skin-rf .stamp { border-color: #F5C518; color: #F5C518; }
.skin-rf .pk { --peg: rgba(182, 245, 218, .06); }
.skin-rf .ktag .tag-cta { border-top-color: currentColor; border-top-style: solid; }

/* ---------- The node: the only orange on the site ---------- */
.skin-rf .node-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--node); box-shadow: 0 0 0 3px var(--node-ring); }
/* 1. It ends the hand-drawn underline in the hero */
.skin-rf .mark::after { content: ''; position: absolute; inset-inline-end: -4%; bottom: -.1em; width: .15em; height: .15em; border-radius: 50%; background: var(--node); box-shadow: 0 0 0 .035em var(--node-ring); }
/* 2. It carries the return through the system */
.skin-rf .flow-line b { background: var(--node); box-shadow: 0 0 0 3px var(--node-ring); }
.skin-rf .flow-line i { background: var(--brand); }
/* 3. It marks your place as you scroll (wide screens only) */
.rf-lane { display: none; }
@media (min-width: 1320px) {
  .skin-rf .rf-lane { display: block; position: fixed; top: 120px; bottom: 60px; inset-inline-start: 26px; width: 12px; z-index: 5; pointer-events: none; }
  .skin-rf .rf-lane::before { content: ''; position: absolute; top: 34px; bottom: 0; left: 5px; width: 2px; background: var(--line-2); border-radius: 1px; }
  .skin-rf .rf-lane i { position: absolute; left: 0; width: 12px; height: 4px; background: var(--brand); transform: skewX(-32deg); border-radius: 1px; }
  .skin-rf .rf-lane i:nth-child(1) { top: 0; } .skin-rf .rf-lane i:nth-child(2) { top: 10px; left: 1px; } .skin-rf .rf-lane i:nth-child(3) { top: 20px; left: 2px; }
  .skin-rf .rf-lane b { position: absolute; left: 0; top: calc(34px + (100% - 46px) * var(--p, 0)); width: 12px; height: 12px; border-radius: 50%; background: var(--node); box-shadow: 0 0 0 3px var(--node-ring); transition: top .12s linear; }
}
@media (prefers-reduced-motion: no-preference) {
  .skin-rf.js .mark::after { animation: node-in .4s cubic-bezier(.3, 1.6, .5, 1) 1.8s both; }
}
@keyframes node-in { from { transform: scale(0); } }

/* Readex runs a little wider than Outfit: keep the hero facts on single lines */
.skin-rf .hero-meta { flex-wrap: wrap; gap: 16px 24px; }
.skin-rf .hero-meta b { white-space: nowrap; }

/* Day mode: yellow text is too pale on light backgrounds, so handwriting and small labels use a darker yellow */
.skin-rf[data-theme="light"] :is(.rf-hand, .pk-hand, .fq-hand, .rd-title, .y-say, .hm-notes path, .eyebrow, .w-from, .text-link, .go, .sol-link) { color: #7A5C00; }
.skin-rf[data-theme="light"] .y-hint .y-road { stroke: #C99A00; }
@media (prefers-color-scheme: light) {
  .skin-rf:not([data-theme="dark"]) :is(.rf-hand, .pk-hand, .fq-hand, .rd-title, .y-say, .eyebrow, .w-from, .text-link, .go, .sol-link) { color: #7A5C00; }
  .skin-rf:not([data-theme="dark"]) .y-hint .y-road { stroke: #C99A00; }
}

/* Logo (Mix A): the name sits on a yellow dashed road line that ends in the orange node */
.skin-rf .brand-mark svg { width: 100%; height: 100%; display: block; }
.skin-rf .bwm b { position: relative; padding-bottom: 7px; }
.skin-rf .bwm b::after { content: ''; position: absolute; left: 0; right: 12px; bottom: 0; height: 2.5px; background: repeating-linear-gradient(90deg, var(--brand) 0 8px, transparent 8px 13px); }
.skin-rf .bwm b::before { content: ''; position: absolute; right: 1px; bottom: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--node); box-shadow: 0 0 0 2px var(--node-ring); }
.skin-rf .bwm small { margin-top: 7px; }
.skin-rf[data-theme="light"] .bwm b::after { background: repeating-linear-gradient(90deg, #C99A00 0 8px, transparent 8px 13px); }

/* Arabic (right to left): the drawn scenes are pictures, so they keep their left-to-right layout; text inside them still reads right to left */
[dir="rtl"] :is(.street, .road, .x-old, .x-new, .x-kb, .i-rack, .rs-stack, .stage, .board .tags, .dm-road, .apt, .exitbox .exarrow, .hm-tags) { direction: ltr; }
[dir="rtl"] :is(.street, .road, .x-old, .x-new, .apt, .rs-stack) :is(p, span, b, small, label, h3, strong, input, em) { direction: rtl; unicode-bidi: plaintext; }
[dir="rtl"] .bwm b::after { left: 12px; right: 0; } [dir="rtl"] .bwm b::before { right: auto; left: 1px; }

/* Buyer Portal "Coming soon" (owner decision 11 Oct 2026, BP-0): label, greyed phones with a road-work tape */
.bp-soon { display: inline-block; font: 700 10.5px/1 var(--mono); letter-spacing: .08em; color: #fff; background: var(--node); padding: 4px 7px; border-radius: 4px; transform: rotate(-3deg); margin-inline-start: 8px; vertical-align: 2px; }
.bp-dim { position: relative; }
.bp-dim .phone img { filter: grayscale(.6) brightness(.75); }
.bp-tape { position: absolute; left: -14px; right: -14px; top: 44%; z-index: 9; transform: rotate(-6deg); background: #F2C94C; color: #10181E; text-align: center; font: 700 15px/1 var(--rf-font); letter-spacing: .14em; padding: 11px 0; box-shadow: 0 8px 14px -8px rgba(0,0,0,.7); background-image: repeating-linear-gradient(-45deg, rgba(16,24,30,.12) 0 10px, transparent 10px 20px); pointer-events: none; }
.bp-tape small { display: block; font: 500 11px/1.2 var(--rf-font); letter-spacing: 0; margin-top: 4px; }
.rs:not([data-front="app"]) .bp-tape { display: none; }

/* Logo 06 Signpost (21 Oct 2026): the square sign is as tall as the name block; the dashed road line has no end dot now (the sign carries the brand) */
.skin-rf .brand-mark { width: 44px; height: 44px; }
.skin-rf .bwm b::before { display: none; }
.skin-rf .bwm b::after { right: 0; }

/* UI review fix 1 + 2 (owner "A", 2 Nov 2026): solid header so page text no longer shows through; day --muted darkened above for AA contrast */
.skin-rf .nav { -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }