/* ============================================================
   iDEALCAR — BASE STYLES
   Design tokens, reset, typography, and shared UI components
   used across every page of the site.
   ============================================================ */

:root {
  /* Brand colors */
  --color-black: #0a0a0a;
  --color-red: #c00;
  --color-red-dark: #a00000;
  --color-gradient: linear-gradient(135deg, #000000 0%, #ff3b30 100%);
  --color-text: #222222;
  --color-text-muted: #5c5c5c;
  --color-border: #e6e6e6;
  --color-bg: #ffffff;
  --color-bg-soft: #f7f7f8;
  --color-success: #2a7f2a;
  --color-warning: #b07d00;

  /* Layout */
  --header-height: 100px;
  --banner-height: 38px;
  --max-width: 1320px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 26px;

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 14px 34px -10px rgba(0, 0, 0, 0.16);
  --shadow-lg: 0 24px 60px -14px rgba(0, 0, 0, 0.22);

  /* Type */
  --font-body: 'Archivo', 'DM Sans', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-display: 'Archivo Black', 'Archivo', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.9, 0.32, 1);
  --transition: 0.25s cubic-bezier(0.22, 0.9, 0.32, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  padding-top: calc(var(--header-height) + var(--banner-height));
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: 0.01em; line-height: 1.08; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Typography helpers ── */
.section-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: 10px;
}

.section-title {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 14px;
}

.section-title span,
h1 span, h2 span {
  color: var(--color-red);
}

.section-sub {
  color: var(--color-text-muted);
  font-size: 16px;
  max-width: 640px;
}

/* ── Buttons ── */
.red-btn,
.ghost-btn,
.cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: none;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
}

.red-btn {
  background: var(--color-gradient);
  color: #fff;
  box-shadow: 0 8px 20px rgba(192, 0, 0, 0.25);
}
.red-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(192, 0, 0, 0.35); }

.ghost-btn {
  background: transparent;
  color: var(--color-black);
  border: 2px solid var(--color-border);
}
.ghost-btn:hover { border-color: var(--color-red); color: var(--color-red); transform: translateY(-2px); }

.cta-ghost {
  background: #fff;
  color: var(--color-black);
}
.cta-ghost:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.2); }

/* ── "Get Quote" button — THE ONE, shared design used identically on the
   Home, Products, and Services pages. Don't redefine this per-page; if it
   needs to change, change it here so every page stays in sync. ── */
.quote-btn {
  padding: 10px 20px; border: none; border-radius: 30px; font-size: 12.5px; font-weight: 700;
  background: var(--color-gradient); color: #fff; transition: transform var(--transition), box-shadow var(--transition);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  min-width: 150px; white-space: nowrap;
}
.quote-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(192,0,0,0.3); }
.quote-btn.added { background: var(--color-success); }

/* ── "Learn More" button — pairs with .quote-btn wherever a product
   card appears (Home, Products). Opens the shared product detail
   modal below via data-modal-* attributes; see layout.js. ── */
.learn-more-btn {
  padding: 10px 20px; border-radius: 30px; font-size: 12.5px; font-weight: 700;
  background: transparent; color: var(--color-black); border: 1.5px solid var(--color-border);
  transition: border-color var(--transition), color var(--transition), transform var(--transition);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  min-width: 150px; white-space: nowrap;
}
.learn-more-btn:hover { border-color: var(--color-red); color: var(--color-red); transform: translateY(-2px); }

/* ── Product detail modal ("Learn More"), shared by Home + Products.
   Reuses .modal-overlay above for the dark backdrop; .product-modal-box
   is a light card of its own, 50/50 photo-left / info-right on desktop,
   stacked on mobile. Populated + opened by layout.js via event
   delegation, so it works for statically and dynamically rendered cards
   alike. ── */
.product-modal-box {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  width: min(920px, 94vw);
  max-height: 85vh;
  box-shadow: var(--shadow-lg);
}
.product-modal-img {
  flex: 0 0 50%;
  background: var(--color-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* "free from any size" — no cropping, no forced aspect ratio; the
   image keeps its own proportions and simply fits the column. */
.product-modal-img img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.product-modal-info {
  flex: 0 0 50%;
  padding: 44px 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.product-modal-tag {
  align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 4px 12px; border-radius: 20px; background: var(--color-bg-soft); color: var(--color-red);
  margin-bottom: 14px;
}
.product-modal-brand { font-size: 13px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.product-modal-title { font-family: var(--font-display); font-size: 2rem; letter-spacing: 0.5px; line-height: 1.15; margin-bottom: 16px; }
.product-modal-desc { font-size: 14.5px; color: var(--color-text-muted); line-height: 1.75; margin-bottom: 26px; }
.product-modal-info .quote-btn { align-self: flex-start; min-width: 180px; }
.product-modal-close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.85); color: var(--color-black); font-size: 16px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--transition);
}
.product-modal-close:hover { background: #fff; color: var(--color-red); }

@media (max-width: 760px) {
  .product-modal-box { flex-direction: column; width: 92vw; max-height: 90vh; overflow-y: auto; }
  .product-modal-img { flex-basis: auto; padding: 20px; }
  .product-modal-img img { max-height: 34vh; }
  .product-modal-info { flex-basis: auto; padding: 28px 24px 32px; }
  .product-modal-title { font-size: 1.6rem; }
}

/* ── Generic page hero (about/contact/warranty) ── */
.page-hero {
  background: var(--color-gradient);
  color: #fff;
  padding: 90px 24px 70px;
  text-align: center;
}
.page-hero-inner { max-width: 760px; margin: 0 auto; }
.page-hero .section-label { color: #ffb3ac; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 16px; }
.page-hero h1 span { color: #fff; opacity: 0.85; }
.page-hero p { font-size: 17px; opacity: 0.9; }

/* ── CTA banner (shared) ── */
.cta-banner {
  max-width: var(--max-width);
  margin: 70px auto;
  background: var(--color-gradient);
  border-radius: var(--radius-lg);
  padding: 50px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #fff;
  flex-wrap: wrap;
}
.cta-banner h2 { font-size: 1.9rem; margin-bottom: 8px; }
.cta-banner p { opacity: 0.85; font-size: 15px; }

/* ── Fade-up animation ── */
.fade-up { opacity: 0; transform: translateY(24px); animation: fadeUp 0.7s var(--ease) forwards; }
.fade-up.d1, .fade-up-1 { animation-delay: 0.05s; }
.fade-up.d2, .fade-up-2 { animation-delay: 0.15s; }
.fade-up-3 { animation-delay: 0.25s; }
.fade-up-4 { animation-delay: 0.35s; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* ── Scroll reveal (IntersectionObserver-driven, see layout.js) ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.02s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.26s; }
.reveal-stagger.is-visible > *:nth-child(n+6) { transition-delay: 0.3s; }

/* ── Modal (image lightbox), shared by index/aboutUs ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.9);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity var(--transition);
  z-index: 3000; padding: 20px;
}
.modal-overlay.open, .modal-overlay.active { opacity: 1; visibility: visible; }
.modal-box { position: relative; max-width: 90vw; max-height: 85vh; }
.modal-box img { max-width: 90vw; max-height: 85vh; border-radius: var(--radius-sm); object-fit: contain; }
.modal-close, .modal-nav-btn {
  position: absolute; background: rgba(255,255,255,0.15); color: #fff; border: none;
  border-radius: 50%; width: 44px; height: 44px; font-size: 18px;
  display: flex; align-items: center; justify-content: center; transition: background var(--transition);
}
.modal-close { top: -55px; right: 0; }
.modal-close:hover, .modal-nav-btn:hover { background: rgba(255,255,255,0.3); }
.modal-nav-btn.prev { left: -60px; top: 50%; transform: translateY(-50%); }
.modal-nav-btn.next { right: -60px; top: 50%; transform: translateY(-50%); }
@media (max-width: 768px) {
  .modal-nav-btn.prev { left: 6px; }
  .modal-nav-btn.next { right: 6px; }
  .modal-close { top: -46px; right: 0; }
}

/* ── Toast notification (used by cart.js) ── */
.idc-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--color-black); color: #fff; padding: 14px 22px; border-radius: 50px;
  font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: all 0.35s ease; z-index: 5000;
  display: flex; align-items: center; gap: 10px;
}
.idc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.idc-toast .dot { width: 8px; height: 8px; border-radius: 50%; background: #34d058; flex-shrink: 0; }