/* ============================================================================
   ديار كار · DIAR CAR — MAIN BRAND STYLESHEET  (single source of truth)
   ----------------------------------------------------------------------------
   EDIT THIS ONE FILE to restyle the ENTIRE website (every guest + dc page).
   It is a plain static file: changes go live on refresh, NO build/npm needed.

   How it works:
   • Colours are defined ONCE below as RGB channels (e.g. --dc-green-rgb).
   • Both Tailwind engines (the compiled app.css for dc pages, and the CDN
     runtime for the legacy guest pages) map their dc-* colours to these
     channels — so utility classes like  bg-dc-green / text-dc-navy /
     bg-dc-green/20  all read from here.
   • The component classes (.dc-btn, .dc-input, .dc-eyebrow…) and every bespoke
     rule use the var(--dc-*) tokens — so they read from here too.

   ➜ Want a different brand green?  Change --dc-green-rgb once. Done, sitewide.
   ============================================================================ */

:root {
  /* ---- COLOUR CHANNELS (space-separated R G B) — the master knobs --------- */
  /* "navy" (the old blue) is now a DEEP GREEN — used for dark surfaces + text.
     It is intentionally DARKER than the bright brand --dc-green so that green
     CTAs, links and accents POP against the dark green bands (instead of
     blending in). Whole site reads green; the identity green stays vivid. */
  --dc-navy-rgb:        16 52 31;     /* deep forest green — dark surfaces / primary text */
  --dc-navy-700-rgb:    24 74 45;     /* mid-deep green                         */
  --dc-navy-500-rgb:    90 128 106;   /* muted green — secondary text           */
  --dc-green-rgb:       31 107 58;    /* brand green — CTAs, identity          */
  --dc-green-hover-rgb: 26 92 50;
  --dc-forest-rgb:      22 72 42;
  --dc-white-rgb:       245 247 244;  /* soft white page surface               */
  --dc-mist-rgb:        212 220 214;  /* light mist border/fill                */
  --dc-mist-deep-rgb:   182 194 186;
  --dc-danger-rgb:      163 42 30;    /* errors / destructive                  */
  --dc-warning-rgb:     168 122 30;
  --dc-info-rgb:        81 101 91;    /* green-gray (was blue)                  */

  /* ---- COLOUR TOKENS (derived — use these in var() CSS) ------------------- */
  --dc-navy:        rgb(var(--dc-navy-rgb));
  --dc-navy-700:    rgb(var(--dc-navy-700-rgb));
  --dc-navy-500:    rgb(var(--dc-navy-500-rgb));
  --dc-green:       rgb(var(--dc-green-rgb));
  --dc-green-hover: rgb(var(--dc-green-hover-rgb));
  --dc-forest:      rgb(var(--dc-forest-rgb));
  --dc-white:       rgb(var(--dc-white-rgb));
  --dc-mist:        rgb(var(--dc-mist-rgb));
  --dc-mist-deep:   rgb(var(--dc-mist-deep-rgb));
  --dc-danger:      rgb(var(--dc-danger-rgb));
  --dc-warning:     rgb(var(--dc-warning-rgb));
  --dc-success:     var(--dc-green);
  --dc-info:        var(--dc-navy-500);

  /* ---- TYPE -------------------------------------------------------------- */
  --dc-font-brand: 'Readex Pro', 'Tajawal', 'Cairo', system-ui, -apple-system, sans-serif;

  /* ---- RADIUS / SHADOW --------------------------------------------------- */
  --dc-radius: 4px;                   /* the Diar Car house corner (not pillowy) */
  --dc-shadow-sm: 0 1px 2px 0 rgb(var(--dc-navy-rgb) / 0.08);
  --dc-shadow:    0 2px 6px -1px rgb(var(--dc-navy-rgb) / 0.10);
  --dc-shadow-md: 0 6px 16px -4px rgb(var(--dc-navy-rgb) / 0.12);
  --dc-shadow-lg: 0 16px 32px -8px rgb(var(--dc-navy-rgb) / 0.14);

  /* ---- MOTION ------------------------------------------------------------ */
  --dc-ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dc-ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --dc-ease-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo:  var(--dc-ease-expo);   /* legacy aliases kept working */
  --ease-out-quart: var(--dc-ease-quart);
  --dc-dur-micro: 150ms;
  --dc-dur-ui:    300ms;
  --dc-dur-page:  600ms;
}

/* ============================================================================
   BASE
   ============================================================================ */
::selection { background-color: var(--dc-green); color: var(--dc-white); }

/* Fixed brand watermark — a subtle, semi-transparent logo sitting in the
   background of every page (behind all content). Adjust --dc-wm-opacity /
   --dc-wm-size here to tune it. */
:root { --dc-wm-opacity: 0.07; --dc-wm-size: min(46vw, 460px); }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('/dc/logo.png');
  background-repeat: no-repeat;
  background-position: center 44%;
  background-size: var(--dc-wm-size);
  opacity: var(--dc-wm-opacity);
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 640px) { :root { --dc-wm-size: 64vw; } }

/* Visible green focus ring for keyboard users (survives layouts that reset
   the global outline). */
.dc-focus:focus-visible,
a.dc-focus:focus-visible,
button.dc-focus:focus-visible {
  outline: 2px solid var(--dc-green) !important;
  outline-offset: 3px !important;
  border-radius: var(--dc-radius);
}

/* ============================================================================
   COMPONENT CLASSES  (plain CSS — work on every page, no build)
   ============================================================================ */
.dc-eyebrow {
  font-family: var(--dc-font-brand);
  font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  color: var(--dc-green); text-transform: uppercase;
}
.dc-section-marker {
  font-family: var(--dc-font-brand);
  font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  color: var(--dc-navy-500); text-transform: uppercase;
}

.dc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: var(--dc-radius);
  font-family: var(--dc-font-brand); font-weight: 600;
  padding: 0 1.5rem; height: 3rem; min-height: 44px; font-size: 1rem;
  transition: background-color var(--dc-dur-micro) var(--dc-ease-expo),
              color var(--dc-dur-micro) var(--dc-ease-expo),
              box-shadow var(--dc-dur-micro) var(--dc-ease-expo);
}
.dc-btn--primary   { background-color: var(--dc-green); color: var(--dc-white); }
.dc-btn--primary:hover { background-color: var(--dc-green-hover); }
.dc-btn--secondary { background-color: transparent; color: var(--dc-navy); border: 1px solid var(--dc-navy); }
.dc-btn--secondary:hover { background-color: var(--dc-mist); }
.dc-btn--ghost     { background-color: transparent; color: var(--dc-navy-500); }
.dc-btn--ghost:hover { color: var(--dc-navy); }
.dc-btn--compact   { height: 2.5rem; padding: 0 1.25rem; font-size: .875rem; }
.dc-btn--hero      { height: 3.5rem; padding: 0 1.75rem; font-size: 1.1875rem; }

.dc-input {
  width: 100%; height: 3rem; padding: 0 1rem;
  border-radius: var(--dc-radius);
  font-family: var(--dc-font-brand); font-size: 1rem;
  background-color: var(--dc-white); color: var(--dc-navy);
  border: 1px solid var(--dc-mist-deep);
  transition: border-color var(--dc-dur-micro) var(--dc-ease-expo),
              box-shadow var(--dc-dur-micro) var(--dc-ease-expo);
}
.dc-input::placeholder { color: var(--dc-navy-500); opacity: .6; }
.dc-input:hover  { border-color: var(--dc-navy-500); }
.dc-input:focus  { border-color: var(--dc-navy); outline: none; }
.dc-input--error { border-color: var(--dc-danger); }

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .dc-btn, .dc-input { transition-duration: .01ms; }
}

/* ============================================================================
   SHARED CHROME · GLASS TOKENS · SCENE · HEADER · PROMO · FOOTER
   ----------------------------------------------------------------------------
   Ported here from layouts/dc.blade.php so BOTH the dc homepage layout AND the
   legacy guest layout render the SAME promo strip, sticky glass header and
   layered glass footer over an identical brand "scene" background.
   All colours use the dc-* rgb tokens (no hex / no blue). RTL logical props.
   These class names (.promo-strip / .page-header / .page-footer / .header-nav
   /.footer-col …) are bespoke and do not collide with Bootstrap.
   ============================================================================ */

/* ---- Glass + radius tokens (white liquid glassmorphism) ---- */
:root {
  --glass-bg-soft:      rgb(var(--dc-white-rgb) / 0.45);
  --glass-bg:           rgb(var(--dc-white-rgb) / 0.62);
  --glass-bg-deep:      rgb(var(--dc-white-rgb) / 0.80);
  --glass-bg-navy:      rgb(var(--dc-navy-rgb) / 0.86);
  --glass-bg-navy-soft: rgb(var(--dc-navy-rgb) / 0.62);
  --glass-border:       rgb(var(--dc-white-rgb) / 0.55);
  --glass-border-soft:  rgb(var(--dc-white-rgb) / 0.35);
  --glass-border-navy:  rgb(var(--dc-white-rgb) / 0.10);
  --glass-blur:         20px;
  --glass-blur-soft:    12px;
  --glass-blur-strong:  32px;
  --glass-sat:          saturate(180%);
  --glass-highlight:    linear-gradient(135deg,
                          rgb(var(--dc-white-rgb) / 0.5) 0%,
                          rgb(var(--dc-white-rgb) / 0) 55%);
  --glass-highlight-on-dark: linear-gradient(135deg,
                          rgb(var(--dc-white-rgb) / 0.12) 0%,
                          rgb(var(--dc-white-rgb) / 0) 60%);
  --glass-shadow-soft:  0 4px 20px rgb(var(--dc-navy-rgb) / 0.06);
  --glass-shadow:       0 12px 40px rgb(var(--dc-navy-rgb) / 0.08);
  --glass-shadow-lift:  0 24px 60px rgb(var(--dc-navy-rgb) / 0.14);

  --radius-pill:        999px;
  --radius-lg:          28px;
  --radius:             20px;
  --radius-sm:          16px;
  --radius-btn:         12px;
}

/* ---- The scene: brand color gradients fixed behind everything ---- */
.dc-scene {
  background:
    radial-gradient(ellipse 75% 55% at 92% -8%,
        rgb(var(--dc-green-rgb) / 0.22), transparent 65%),
    radial-gradient(ellipse 65% 45% at -5% 25%,
        rgb(var(--dc-navy-rgb) / 0.14), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 65%,
        rgb(var(--dc-green-rgb) / 0.10), transparent 70%),
    radial-gradient(ellipse 80% 60% at 88% 95%,
        rgb(var(--dc-navy-rgb) / 0.08), transparent 70%),
    rgb(var(--dc-white-rgb));
  background-attachment: fixed;
  min-height: 100vh;
}

/* ============================================================
   PROMO STRIP
   ============================================================ */
.promo-strip {
  background-color: var(--dc-navy);
  color: var(--dc-white);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 10px 24px;
  position: relative;
}
.promo-strip .promo-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.promo-strip .promo-pill {
  display: inline-block;
  background-color: var(--dc-green);
  color: var(--dc-white);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 2px;
  margin-inline-end: 6px;
}
.promo-strip .promo-close {
  position: absolute;
  top: 50%;
  inset-inline-start: 16px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgb(var(--dc-white-rgb) / 0.6);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px 8px;
  transition: color 150ms var(--ease-out-expo);
}
.promo-strip .promo-close:hover { color: var(--dc-white); }
@media (max-width: 640px) {
  .promo-strip { font-size: 12px; padding: 8px 36px; }
  .promo-strip .promo-pill { display: none; }
}

/* ============================================================
   STICKY HEADER + LOGO  (light glass that solidifies on scroll)
   ============================================================ */
.page-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease-out-quart) 200ms;
  background: rgb(var(--dc-white-rgb) / 0.55);
  backdrop-filter: blur(var(--glass-blur)) var(--glass-sat);
  -webkit-backdrop-filter: blur(var(--glass-blur)) var(--glass-sat);
}
.page-header.is-scrolled {
  background: rgb(var(--dc-white-rgb) / 0.82);
  border-bottom-color: rgb(var(--dc-navy-rgb) / 0.08);
}
.page-header .header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px clamp(24px, 6vw, 120px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.page-header .brand-logo {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: opacity 150ms var(--ease-out-expo);
}
.page-header .brand-logo:hover { opacity: 0.85; }
.brand-logo-img {
  display: block;
  width: auto;
  height: clamp(44px, 5vw, 60px);
  max-width: 100%;
}
.brand-logo--footer .brand-logo-img { height: clamp(72px, 8vw, 96px); }

.header-nav {
  display: flex;
  gap: clamp(16px, 2vw, 32px);
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--dc-navy-500);
}
.header-nav a {
  text-decoration: none;
  transition: color 150ms var(--ease-out-expo);
}
.header-nav a:hover, .header-nav a.is-active { color: var(--dc-navy); }
.header-nav .lang-toggle {
  font-weight: 600;
  font-size: 13px;
  color: var(--dc-navy);
  border: 1px solid var(--dc-mist-deep);
  padding: 6px 12px;
  border-radius: 4px;
}
.header-nav .header-cta {
  font-weight: 600;
  color: var(--dc-navy);
}
@media (max-width: 768px) {
  .header-nav a:not(.lang-toggle):not(.header-cta) { display: none; }
}

/* ============================================================
   FOOTER  (layered glass over the scene)
   ============================================================ */
.page-footer {
  border-top: 1px solid rgb(var(--dc-navy-rgb) / 0.06);
  padding: clamp(48px, 5vw, 80px) clamp(24px, 6vw, 120px) clamp(32px, 4vw, 56px);
  background: rgb(var(--dc-white-rgb) / 0.65);
  backdrop-filter: blur(var(--glass-blur)) var(--glass-sat);
  -webkit-backdrop-filter: blur(var(--glass-blur)) var(--glass-sat);
}
.page-footer .footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(48px, 5vw, 64px);
  border-bottom: 1px solid var(--dc-mist);
}
.page-footer .footer-brand p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--dc-navy-500);
  margin: 16px 0 24px;
  max-width: 38ch;
}
.page-footer .footer-brand .newsletter { display: flex; gap: 8px; max-width: 360px; }
.page-footer .footer-brand .newsletter input {
  flex: 1;
  height: 44px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--dc-navy);
  background: rgb(var(--dc-white-rgb) / 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgb(var(--dc-white-rgb) / 0.7);
  border-radius: var(--radius-btn);
}
.page-footer .footer-brand .newsletter input:focus { border-color: var(--dc-navy); outline: none; }
.page-footer .footer-brand .newsletter button {
  height: 44px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  background-color: var(--dc-navy);
  color: var(--dc-white);
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color 150ms var(--ease-out-expo);
}
.page-footer .footer-brand .newsletter button:hover { background-color: var(--dc-green); }
.page-footer .footer-col h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dc-navy-500);
  margin: 0 0 20px;
}
.page-footer .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.page-footer .footer-col a {
  font-size: 15px;
  color: var(--dc-navy);
  text-decoration: none;
  transition: color 150ms var(--ease-out-expo);
}
.page-footer .footer-col a:hover { color: var(--dc-green); }
.page-footer .footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: clamp(24px, 3vw, 32px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--dc-navy-500);
}
.page-footer .footer-bottom .meta { display: flex; gap: 24px; flex-wrap: wrap; }
.page-footer .footer-bottom a { color: inherit; text-decoration: none; }
.page-footer .footer-bottom a:hover { color: var(--dc-navy); }

/* ---- Footer responsive (mirrors dc layout breakpoints) ---- */
@media (max-width: 1023px) {
  .page-footer .footer-inner { grid-template-columns: 1fr 1fr; }
  .page-footer .footer-brand { grid-column: span 2; }
}
@media (max-width: 640px) {
  .page-footer .footer-inner { grid-template-columns: 1fr; }
  .page-footer .footer-brand { grid-column: 1; }
}

/* ---- Chrome a11y / perf fallbacks ---- */
@media (prefers-reduced-transparency: reduce) {
  .dc-scene { background: rgb(var(--dc-white-rgb)) !important; background-attachment: initial !important; }
  .page-header, .page-footer,
  .page-footer .footer-brand .newsletter input {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .page-header { background: rgb(var(--dc-white-rgb)) !important; }
  .page-footer { background: rgb(var(--dc-white-rgb)) !important; }
}
@media (max-width: 768px) {
  .page-header, .page-footer {
    backdrop-filter: blur(10px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .promo-strip .promo-close,
  .page-header, .page-header .brand-logo,
  .header-nav a,
  .page-footer .footer-brand .newsletter button,
  .page-footer .footer-col a, .page-footer .footer-bottom a {
    transition-duration: 0.01ms !important;
  }
}