@tailwind base;
@tailwind components;
@tailwind utilities;

/* r365go custom styles — Rehvid365 / Renkaat365 */

/* ══════════════════════════════════════════════════
   TEEMA — r365 (hele)
   DaisyUI 4: HSL väärtused ilma hsl() wrapperita.
   ══════════════════════════════════════════════════ */

[data-theme="r365"] {
  color-scheme: light;

  /* Primary: brändi kriimsunpunane */
  --p:  349 73% 44%;
  --pf: 349 73% 37%;
  --pc: 0 0% 100%;

  /* Secondary: teras-navy — premium auto feel */
  --s:  214 40% 20%;
  --sf: 214 40% 14%;
  --sc: 0 0% 98%;

  /* Accent: merevaik — soodushindade ja CTA tähelepanu */
  --a:  36 95% 52%;
  --af: 36 95% 44%;
  --ac: 222 47% 10%;

  /* Neutral: tume söevärv — topbar + footer */
  --n:  222 25% 15%;
  --nf: 222 25% 9%;
  --nc: 213 18% 82%;

  /* Base: valge kaardid, jaheda tooniga hall lehe taust */
  --b1: 0 0% 100%;        /* valge — kaardid, tootepildid, modaalid  */
  --b2: 214 25% 92%;      /* #e3e9f3 — lehe taust, image placeholder  */
  --b3: 214 22% 85%;      /* #cdd6e6 — bordid, dividerid              */
  --bc: 222 40% 10%;      /* sügav navy tekst                          */

  /* Semantilised */
  --in:  210 100% 54%;  --inc: 0 0% 100%;
  --su:  142 65% 42%;   --suc: 0 0% 100%;
  --wa:  36  92% 50%;   --wac: 222 40% 10%;
  --er:  0   80% 54%;   --erc: 0 0% 100%;

  /* Kuju */
  --rounded-box:   0.5rem;
  --rounded-btn:   0.375rem;
  --rounded-badge: 1rem;
  --animation-btn: 0.2s;
  --animation-input: 0.15s;
  --btn-text-case: none;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.375rem;
}

/* ── Fondid ── */
*, *::before, *::after {
  font-family: 'Barlow', ui-sans-serif, system-ui, sans-serif !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Barlow Semi Condensed', 'Barlow', ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: 0.01em;
}
/* DaisyUI btn kirjutab font-family üle — force Barlow, aga ÄRGE muuda font-size (btn-xs jms) */
.btn, .badge, .menu a, .menu li, nav a {
  font-family: 'Barlow', ui-sans-serif, system-ui, sans-serif !important;
}

/* ── Hero background pattern ── */
.hero-pattern {
  background-image:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 50%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255,255,255,0.02) 10px,
      rgba(255,255,255,0.02) 11px
    );
}

/* ── Estonian license plate input styling ── */
input[name="reg"] {
  font-family: "FE-SCHRIFT", "Courier New", monospace;
  letter-spacing: 0.15em;
}

/* ── Product card: consistent image area ── */
.card figure.aspect-square {
  position: relative;
}

/* ── Smooth scroll ── */
html {
  scroll-behavior: smooth;
}

/* ── Keela scroll anchoring HTMX swap konteineritel ── */
#tire-products,
#tire-filter-body,
#tire-filter-body-mobile,
#wheel-products,
#wheel-filter-body,
#acc-products,
#acc-filter-body {
  overflow-anchor: none;
}

/* ── DaisyUI select fix: full width ── */
.form-control select.select {
  width: 100%;
}

/* ── Sticky header: GPU-accelerated ── */
header {
  will-change: transform;
}

/* ── <details> summary: hide browser triangle marker ── */
details summary::-webkit-details-marker,
details summary::marker { display: none; content: ''; }

/* ── Mobile nav panel: slide-in animation on open ── */
details[data-menu][open] .mobile-nav-panel {
  animation: slideDown 0.18s ease-out;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── HTMX: hide spinner by default, show during request ── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: flex; }
.htmx-request.htmx-indicator  { display: flex; }

/* ── HTMX: fade-in on swap settle ── */
.htmx-settling .search-form {
  opacity: 0;
  transform: translateY(4px);
}
.search-form {
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* ── Brand color utilities ── */
.text-brand { color: #c41e3a; }
.bg-brand   { background-color: #c41e3a; }

/* ── Logo filter: tumedal taustal (footer, topbar, dark header) → invert valgeks ── */
footer img,
.bg-neutral img:not(.flag) {
  filter: brightness(0) invert(1);
}

/* ── Header: frosted glass effect ── */
header {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 2px solid hsl(349 73% 44% / 0.12) !important;
  box-shadow: 0 2px 20px rgba(30, 50, 100, 0.08) !important;
}

/* ── Globaalsed sujuvad üleminekud ── */
*, *::before, *::after {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity, filter;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Väldi üleminekuid element mis ei tohiks animeeruda */
img, svg, video, input[type="checkbox"], input[type="radio"] {
  transition: none;
}

/* ── Kaardid: valge, sügavus varjuga, hover lift ── */
.card {
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(30,50,100,0.07), 0 2px 8px rgba(30,50,100,0.04);
  border: 1px solid hsl(214 22% 88%);
  overflow: hidden;
}
.card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(30,50,100,0.13), 0 2px 8px rgba(30,50,100,0.07);
  border-color: hsl(349 73% 44% / 0.25);
}

/* ── Tootekaardi pildiruum: valge (tootepildid on valge taustaga) ── */
.card figure {
  background: #ffffff !important;
  border-bottom: 1px solid hsl(214 22% 88%);
}

/* ── Tootekaardi info lahter: jaheda tooniga sinine-hall ── */
.card .card-body {
  background: linear-gradient(160deg, #f7f9fe 0%, #f0f4fb 100%) !important;
}

/* ── Korvi nupp: suurem, eredam ── */
.btn-primary {
  background: linear-gradient(135deg, #c41e3a 0%, #a01830 100%) !important;
  border-color: #a01830 !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #d4233f 0%, #b01e36 100%) !important;
  box-shadow: 0 4px 14px rgba(196,30,58,0.35);
  transform: translateY(-1px);
}


/* ── Tarne ikoonid: selgelt värvitud ── */
.text-success { color: #16a34a !important; }
.text-error   { color: #dc2626 !important; }
.bg-success   { background-color: #16a34a !important; }
.bg-error     { background-color: #dc2626 !important; }
.bg-warning   { background-color: #d97706 !important; }
.text-warning { color: #f59e0b !important; }

/* ── Stock badge värvid — selgelt nähtavad ── */
.text-success.font-medium { color: #15803d !important; }
.text-error.font-medium   { color: #b91c1c !important; }

/* ── Hind — rohkem kaalu ── */
.text-2xl.font-bold.text-primary {
  color: #c41e3a !important;
  font-size: 1.35rem !important;
}

/* ── Filter sidebar: modern kaardina ── */
aside .card,
#tire-filter,
#wheel-filter,
#acc-filter {
  background: linear-gradient(160deg, #ffffff 0%, #f7f9fe 100%) !important;
  box-shadow: 0 2px 12px rgba(30,50,100,0.07), 0 1px 3px rgba(30,50,100,0.04) !important;
  border: 1px solid hsl(214 22% 90%) !important;
  border-radius: 0.75rem !important;
  outline: none !important;
  overflow: visible !important;
}

/* ── DaisyUI tooltip CSS keelatud — kasutatakse JS globaaltooltipi ── */
.tooltip:before,
.tooltip:after { display: none !important; }

/* ── Global JS tooltip ── */
#g-tip {
  position: fixed;
  z-index: 99999;
  background: #1e2d4a;
  color: #f0f4fb;
  font-size: 0.75rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.375rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  pointer-events: none;
  display: none;
  max-width: 240px;
  line-height: 1.4;
  white-space: normal;
  text-align: center;
}

/* ── Checkbox: märgitud olek selgelt nähtav ── */
input[type="checkbox"].checkbox:checked,
input[type="checkbox"].checkbox-primary:checked,
input[type="checkbox"].checkbox-xs:checked,
input[type="checkbox"].checkbox-sm:checked {
  background-color: hsl(349 73% 44%) !important;
  border-color: hsl(349 73% 44%) !important;
  --chkbg: hsl(349 73% 44%);
  --chkfg: #fff;
}

/* ── Filtri märgitud checkbox: tekst tumedamaks ── */
#tire-filter-form label:has(input[type="checkbox"]:checked) span,
#wheel-filter-form label:has(input[type="checkbox"]:checked) span,
#acc-filter-form label:has(input[type="checkbox"]:checked) span {
  color: hsl(349 73% 38%) !important;
  font-weight: 600 !important;
}

/* ── Aktiivsed filtri SELECT-id: punane border kui väärtus valitud ── */
#tire-filter-form select:has(option[value=""]:not(:checked)),
#wheel-filter-form select:has(option[value=""]:not(:checked)),
#acc-filter-form select:has(option[value=""]:not(:checked)) {
  border-color: hsl(349 73% 44%) !important;
  background-color: hsl(349 73% 44% / 0.06) !important;
  color: hsl(349 73% 35%) !important;
  font-weight: 600;
}

/* ── Nav aktiivne link ── */
header nav a.btn-active {
  background-color: hsl(349 73% 44% / 0.1) !important;
  color: hsl(349 73% 44%) !important;
  font-weight: 700 !important;
  border-bottom: 2px solid hsl(349 73% 44%);
}

/* ── Scrollbar styling (Chrome/Safari) ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #c41e3a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9b172e; }
::-webkit-scrollbar-track { background: #edf0f5; }

/* ── Mobile search bar: peidetakse scroll'il alla ── */
#mobile-search-bar {
  overflow: visible;
  max-height: 64px;
  transition: max-height 0.25s ease, padding-top 0.25s ease, padding-bottom 0.25s ease, opacity 0.2s ease, border-color 0.25s ease !important;
}
#mobile-search-bar.mobile-search-hidden {
  overflow: hidden;
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0;
  border-color: transparent !important;
}

/* ── Print: hide non-essential elements ── */
@media print {
  header, footer, .btn, .badge { display: none !important; }
}

/* ── Sisuehe (.page-content) tüpograafia ──
   Kasutab CSS custom properties → töötab mõlemas teemas.
   !important: vajalik Tailwind CDN preflight reset vastu ── */
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 {
  font-weight: 700 !important;
  color: hsl(var(--bc));
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}
.page-content h1 { font-size: 1.75rem !important; }
.page-content h2 { font-size: 1.25rem !important; border-bottom: 1px solid hsl(var(--b3)); padding-bottom: 0.4rem; }
.page-content h3 { font-size: 1.05rem !important; }
.page-content h4 { font-size: 0.95rem !important; }

.page-content p  { margin-bottom: 1rem; line-height: 1.75; color: hsl(var(--bc) / 0.8); }
.page-content ul,
.page-content ol { margin-bottom: 1rem; padding-left: 1.5rem; color: hsl(var(--bc) / 0.8); }
.page-content li { margin-bottom: 0.35rem; line-height: 1.65; }
.page-content ul > li { list-style-type: disc; }
.page-content ol > li { list-style-type: decimal; }

.page-content a       { color: hsl(var(--p)); text-decoration: none; }
.page-content a:hover { text-decoration: underline; color: hsl(var(--pf)); }

.page-content strong { font-weight: 600 !important; color: hsl(var(--bc)); }

.page-content table {
  display: block;
  overflow-x: auto;
  max-width: 100% !important;
  width: 100% !important;
  border-collapse: collapse;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}
.page-content img {
  max-width: 100% !important;
  height: auto !important;
}
.page-content th {
  text-align: left;
  padding: 0.5rem 1rem 0.5rem 0;
  border-bottom: 2px solid hsl(var(--b3));
  font-weight: 600 !important;
  color: hsl(var(--bc));
}
.page-content td {
  padding: 0.5rem 1rem 0.5rem 0;
  border-bottom: 1px solid hsl(var(--b3));
  color: hsl(var(--bc) / 0.75);
}
.page-content tr:last-child td { border-bottom: none; }

/* ── Stepper — 3-sammune protsessiriba ── */
.stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  position: relative;
}
/* Ühendav joon sammude vahel */
.stepper::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 2px;
  background: hsl(var(--bc) / 0.15);
  z-index: 0;
}

.stepper .step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: hsl(var(--bc) / 0.45);
  position: relative;
  z-index: 1;
  text-align: center;
}

.stepper .step-number {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 2px solid hsl(var(--bc) / 0.2);
  background: hsl(var(--b1));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: hsl(var(--bc) / 0.35);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

/* Aktiivne samm — täidetud ring */
.stepper .step.active {
  color: hsl(var(--p));
  font-weight: 600;
}
.stepper .step.active .step-number {
  background: hsl(var(--p));
  border-color: hsl(var(--p));
  color: hsl(var(--pc));
  box-shadow: 0 0 0 3px hsl(var(--p) / 0.25);
}

/* Läbitud samm */
.stepper .step.done .step-number {
  background: hsl(var(--p) / 0.15);
  border-color: hsl(var(--p) / 0.4);
  color: hsl(var(--p));
}
.stepper .step.done {
  color: hsl(var(--p) / 0.7);
}