/*
 * Cyprus Water Systems — Theme tokens (Low-key Navy + Yellow + White)
 *
 * Restrained Nordic palette: deep navy as brand voice, warm yellow as
 * a small accent (badges / eyebrows / "Featured"), and an off-white
 * canvas. CTAs use deep navy with white text — yellow is reserved for
 * highlights so the page doesn't read as a discount banner.
 *
 * See design-system/cyprus-water-systems/MASTER.md for usage.
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Brand */
  --navy: #1E3A5F;
  --navy-deep: #142844;
  --navy-tint: #DCE3EC;
  --yellow: #EAB308;
  --yellow-soft: #FEF3C7;
  --yellow-deep: #B45309;
  --sky: #38BDF8;          /* tiny water accent for indicators only */

  /* Surfaces */
  --cream: #FAFAF9;
  --cream-2: #F1F5F9;
  --cream-3: #E2E8F0;

  /* Text */
  --text-primary: #0F172A;
  --text-muted: #475569;
  --text-on-dark: #F8FAFC;
  --text-on-dark-muted: #94A3B8;

  /* Borders */
  --border-on-light: #E2E8F0;
  --border-on-light-strong: #CBD5E1;
  --border-on-dark: rgba(255, 255, 255, 0.10);
  --border-on-dark-strong: rgba(255, 255, 255, 0.20);

  /* State */
  --state-in: #15803D;
  --state-in-bg: #DCFCE7;
  --state-low: #B45309;
  --state-low-bg: #FEF3C7;
  --state-out: #B91C1C;
  --state-out-bg: #FEE2E2;

  /* Type */
  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-32: 128px;

  /* Radius */
  --radius-sm: 6px; --radius-md: 10px;
  --radius-lg: 16px; --radius-xl: 24px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.06);
  --shadow-product: 0 20px 48px rgba(15, 23, 42, 0.10);
  --shadow-cta: 0 6px 20px rgba(30, 58, 95, 0.18);

  /* NovaDark token overrides so existing Tailwind utility classes
     like bg-bg-1 / text-text-primary fall on the new palette. */
  --bg-0: var(--cream-2);
  --bg-1: var(--cream);
  --bg-2: var(--cream-2);
  --bg-3: var(--cream-3);
  --bg-4: var(--border-on-light);
  --text-secondary: var(--text-muted);
  --text-accent: var(--navy);
  --border-subtle: var(--border-on-light);
  --border-default: var(--border-on-light);
  --border-strong: var(--border-on-light-strong);
  --accent-primary: var(--navy);
  --accent-primary-rgb: 30, 58, 95;
  --accent-primary-glow: rgba(30, 58, 95, 0.15);
  --accent-secondary: var(--yellow);
}

/* Base */
html { font-family: var(--font-sans); color: var(--text-primary); background: var(--cream); }
body { font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* ── Editorial typography helpers ──────────────────────────── */
.font-display { font-family: var(--font-display); }
.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--yellow-deep);
}
.eyebrow-on-dark { color: var(--yellow); }
.display-hero {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.display-section {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* ── Surfaces ──────────────────────────────────────────────── */
.surface-dark { background: var(--navy); color: var(--text-on-dark); }
.surface-light { background: var(--cream); color: var(--text-primary); }
.surface-light-2 { background: var(--cream-2); color: var(--text-primary); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--navy);
  color: var(--text-on-dark);
  padding: 12px 22px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.btn-cta:hover { background: var(--navy-deep); box-shadow: var(--shadow-cta); }
.btn-cta:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

.btn-secondary-on-light {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
  padding: 11px 21px;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.btn-secondary-on-light:hover { background: var(--navy); color: var(--text-on-dark); }

.btn-ghost-on-dark {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent;
  color: var(--text-on-dark);
  border: 1px solid var(--border-on-dark-strong);
  padding: 11px 21px;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.btn-ghost-on-dark:hover { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.04); }
.btn-ghost-on-dark:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* ── Filter chips + inputs ───────────────────────────────── */
.chip {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-on-light);
  border-radius: 999px;
  cursor: pointer; user-select: none;
  white-space: nowrap;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
.chip:hover { border-color: var(--navy); color: var(--text-primary); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip--active, .chip:has(input:checked) {
  background: var(--navy); color: var(--text-on-dark); border-color: var(--navy);
}
.chip:has(input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 2px; }
.chip-input {
  padding: 6px 12px;
  font-size: 13px;
  border: 1px solid var(--border-on-light);
  border-radius: 999px;
  background: var(--cream);
  color: var(--text-primary);
  font-family: var(--font-sans);
  width: 100%;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.chip-input:focus { border-color: var(--navy); outline: none; box-shadow: 0 0 0 3px rgba(30,58,95,0.10); }
.chip-input--price { width: 88px; text-align: center; font-family: var(--font-mono); }
.chip-submit { padding: 7px 16px; font-size: 13px; border-radius: 999px; }

/* ── Auth forms (allauth login/signup/reset) ──────────────────
   allauth renders `{{ field }}` as a bare `<input>` with no
   class attribute, so any scoped page needs to style them by
   element rather than by class. */
.form-auth input[type="text"],
.form-auth input[type="email"],
.form-auth input[type="password"],
.form-auth input[type="tel"],
.form-auth input[type="url"],
.form-auth select,
.form-auth textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--cream);
  border: 1px solid var(--border-on-light);
  border-radius: 10px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form-auth input[type="text"]:focus,
.form-auth input[type="email"]:focus,
.form-auth input[type="password"]:focus,
.form-auth input[type="tel"]:focus,
.form-auth input[type="url"]:focus,
.form-auth select:focus,
.form-auth textarea:focus {
  border-color: var(--navy);
  outline: none;
  box-shadow: 0 0 0 3px rgba(30,58,95,0.10);
}
.form-auth input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  accent-color: var(--navy);
  vertical-align: middle;
}

/* ── Category top tile ────────────────────────────────────── */
.cat-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .cat-tile-grid {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-4);
  }
  .cat-tile-grid .cat-tile--featured {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }
}
.cat-tile {
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--cream);
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
  min-height: 160px;
  cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.cat-tile:hover { border-color: var(--navy); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cat-tile:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.cat-tile__eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--yellow-deep);
}
.cat-tile__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
  color: var(--text-primary);
  margin-top: var(--space-2);
}
.cat-tile--featured .cat-tile__title { font-size: clamp(28px, 3.5vw, 42px); }
.cat-tile__desc { color: var(--text-muted); font-size: 14px; margin-top: var(--space-2); }
.cat-tile__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600;
  color: var(--navy);
  margin-top: var(--space-4);
}
.cat-tile__icon {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 32px; height: 32px;
  color: var(--navy);
  opacity: 0.18;
}
.cat-tile--featured .cat-tile__icon { width: 64px; height: 64px; top: var(--space-6); right: var(--space-6); }
.cat-tile__image {
  position: absolute; right: -10%; bottom: -10%;
  width: 60%; height: 60%; opacity: 0.92;
  pointer-events: none;
}
.cat-tile--featured .cat-tile__image { width: 55%; height: 70%; right: 5%; bottom: -5%; }

/* ── Product card ────────────────────────────────────────── */
.product-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 250ms ease, transform 250ms ease;
}
.product-card:hover { box-shadow: var(--shadow-product); transform: translateY(-2px); }
.product-card__image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--cream-2);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--border-on-light);
  overflow: hidden;
}
.product-card__image img, .product-card__image svg { width: 80%; height: 80%; object-fit: contain; }
/* Hover-revealed short description over the image */
.product-card__desc {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.92);
  color: var(--text-on-dark);
  padding: 20px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 14px; line-height: 1.5;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.product-card:hover .product-card__desc,
.product-card:focus-within .product-card__desc { opacity: 1; }
.product-card__body { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-card__brand {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
}
.product-card__title { font-size: 17px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.product-card__spec { font-size: 13px; color: var(--text-muted); }
.product-card__row {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px;
  gap: 12px;
}
.product-card__price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px; font-weight: 600;
  color: var(--text-primary);
}
.product-card .badge { font-size: 11px; }
.product-card .btn-cta { padding: 9px 16px; font-size: 13px; }

/* ── Badges ──────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-weight: 500; font-size: 12px; }
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 999px; background: currentColor; }
.badge-in   { background: var(--state-in-bg);   color: var(--state-in); }
.badge-low  { background: var(--state-low-bg);  color: var(--state-low); }
.badge-out  { background: var(--state-out-bg);  color: var(--state-out); }

/* ── Form inputs ─────────────────────────────────────────── */
.input, .textarea, .select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-family: var(--font-sans);
  background: #fff;
  color: var(--text-primary);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--navy);
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}

/* ── Cart badge ──────────────────────────────────────────── */
.cart-badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 18px; height: 18px;
  background: var(--navy);
  color: var(--text-on-dark);
  font-size: 11px; font-weight: 600;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--cream);
}

/* ── Language switcher (custom dropdown) ─────────────────── */
.lang-dropdown { position: relative; }
.lang-dropdown__trigger {
  list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--cream);
  border: 1px solid var(--border-on-light);
  border-radius: 999px;
  color: var(--text-primary);
  font-size: 13px; font-weight: 600;
  font-family: var(--font-sans);
  padding: 6px 12px;
  cursor: pointer; user-select: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.lang-dropdown__trigger::-webkit-details-marker { display: none; }
.lang-dropdown__trigger:hover { border-color: var(--navy); }
.lang-dropdown__trigger:focus-visible {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30,58,95,0.10);
}
.lang-dropdown__trigger > svg { transition: transform 200ms ease; opacity: 0.6; }
.lang-dropdown[open] .lang-dropdown__trigger { background: var(--cream-2); }
.lang-dropdown[open] .lang-dropdown__trigger > svg { transform: rotate(180deg); }

.lang-dropdown__menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 200px;
  background: var(--cream);
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 60;
  display: flex; flex-direction: column;
  margin: 0;
}
.lang-dropdown__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.lang-dropdown__item:hover { background: var(--cream-2); color: var(--navy); }
.lang-dropdown__item:focus-visible {
  outline: none;
  background: var(--cream-2);
  box-shadow: 0 0 0 2px var(--navy) inset;
}
.lang-dropdown__item--active { background: var(--navy-tint); color: var(--navy); font-weight: 600; }
.lang-dropdown__item .lang-code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 2px 6px;
  background: var(--cream-2);
  border-radius: 4px;
}
.lang-dropdown__item--active .lang-code { color: var(--navy); background: #fff; }
.lang-dropdown__item .lang-name { flex: 1; }

/* ── Mobile nav panel ────────────────────────────────────── */
.nav-mobile-panel { display: none; }
.nav-mobile-open .nav-mobile-panel { display: block; }

/* ── Navbar dropdown menu ────────────────────────────────── */
.nav-dropdown { position: relative; }
/* Invisible bridge between trigger and panel so cursor can travel
   diagonally without closing the dropdown. */
.nav-dropdown::after {
  content: '';
  position: absolute; left: 0; right: 0;
  top: 100%; height: 16px;
  display: none;
}
.nav-dropdown:hover::after, .nav-dropdown:focus-within::after { display: block; }
.nav-dropdown__panel {
  position: absolute; left: 0; top: calc(100% + 12px);
  min-width: 280px;
  background: var(--cream);
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 12px;
  display: none;
  z-index: 60;
}
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel { display: block; }
.nav-dropdown__panel:hover { display: block; }
.nav-dropdown__item {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 500; font-size: 14px;
  transition: background-color 150ms ease;
}
.nav-dropdown__item:hover { background: var(--cream-2); color: var(--navy); }
.nav-dropdown__sub {
  display: block;
  padding: 5px 10px 5px 20px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 13px;
  transition: color 150ms ease;
}
.nav-dropdown__sub:hover { color: var(--navy); }

/* ── SKU / price helpers ─────────────────────────────────── */
.sku, .price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Details / FAQ accordion ─────────────────────────────── */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary > svg { transition: transform 200ms ease; }
details[open] > summary > svg { transform: rotate(180deg); }