/* Custom DaisyUI bumblebee theme — generator URL recorded in feature doc.
   Yellow primary + dark accent; tight field radius, generous box radius. */
[data-theme="bumblebee"] {
  color-scheme: light;
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(97% 0 0);
  --color-base-300: oklch(92% 0 0);
  --color-base-content: oklch(20% 0 0);
  --color-primary: oklch(85% 0.199 91.936);
  --color-primary-content: oklch(42% 0.095 57.708);
  --color-secondary: oklch(75% 0.183 55.934);
  --color-secondary-content: oklch(40% 0.123 38.172);
  --color-accent: oklch(0% 0 0);
  --color-accent-content: oklch(100% 0 0);
  --color-neutral: oklch(37% 0.01 67.558);
  --color-neutral-content: oklch(92% 0.003 48.717);
  --color-info: oklch(74% 0.16 232.661);
  --color-info-content: oklch(39% 0.09 240.876);
  --color-success: oklch(76% 0.177 163.223);
  --color-success-content: oklch(37% 0.077 168.94);
  --color-warning: oklch(82% 0.189 84.429);
  --color-warning-content: oklch(41% 0.112 45.904);
  --color-error: oklch(70% 0.191 22.216);
  --color-error-content: oklch(39% 0.141 25.723);
  --radius-selector: 1rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

/* ─── Home-page 3D card flip (normal form ⇄ kenteken form) ────────── */
.flip-stack {
  perspective: 1800px;
  position: relative;
}

/* ─── Trustpilot badge ─────────────────────────────────────────────
   Star + hover-morph label. Two variants:
   - `.trustpilot-badge--corner` is absolute-positioned and anchored
     to the visible curve of a rounded card (home search form). The
     star's center lands on the 45° point of the corner.
   - `.trustpilot-badge--inline` flows in normal text — sits next to
     a heading inside a flex container.
   GSAP wiring in `initTrustpilotBadge` (keuro.js) rotates the star
   and morphs the label between the score and the CTA on hover. */
.trustpilot-badge {
  --trustpilot-star-size: 1.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: oklch(20% 0 0);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
.trustpilot-badge--corner {
  /* Card uses --radius-box (1rem). The 45° point on a rounded corner
     sits at `radius * (1 - cos45°)` ≈ 0.293 × radius inside the bbox —
     that's where the curve is furthest from the bbox corner and where
     "the corner" visually is. Offset the star so its center lands on
     that point, then nudge it up + right by `--trustpilot-nudge` so
     the star reads as sitting *on top of* the corner rather than
     swallowed by it. */
  --trustpilot-corner-inset: calc(1rem * 0.293);
  --trustpilot-nudge: 0.125rem;
  position: absolute;
  top: calc(var(--trustpilot-corner-inset) - var(--trustpilot-star-size) / 2 - var(--trustpilot-nudge));
  left: calc(var(--trustpilot-corner-inset) - var(--trustpilot-star-size) / 2 + var(--trustpilot-nudge));
  z-index: 5;
}
.trustpilot-star {
  width: var(--trustpilot-star-size);
  height: var(--trustpilot-star-size);
  flex-shrink: 0;
  transform-origin: 50% 50%;
}
.trustpilot-label {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}
.trustpilot-rest,
.trustpilot-hover {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}
/* Hover label is collapsed by default; JS expands its width + opacity
   on hover via GSAP. Width: 0 on first paint avoids a flash before JS
   attaches. */
.trustpilot-hover {
  width: 0;
  opacity: 0;
}
.flip-inner {
  position: relative;
  transform-style: preserve-3d;
  /* Initial rotation handled by GSAP; no CSS transition so the JS
     timeline is the single source of motion. */
}
.flip-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Front face (normal form) stays in document flow → dictates the
   container's height. Back face (kenteken) is overlaid in the same slot
   but pre-rotated 180° on X so it reads right-side-up when the inner
   container has rotated to show it. */
.flip-face--back {
  position: absolute;
  inset: 0;
  transform: rotateX(180deg);
}
/* Initial-state CSS (works without GSAP). When `data-flip-state` is
   `kenteken`, pre-rotate the inner so the back face is forward. GSAP
   overrides this with inline transforms once it attaches; the CSS
   merely guarantees the correct first-paint state.

   The faces themselves don't need opacity rules — `backface-visibility:
   hidden` on each face means whichever one is rotated away from the
   viewer is invisible automatically. That's the whole point of the
   3D flip: both faces rotate together, and the backface property
   reveals the right one based on the current angle. */
.flip-stack[data-flip-state="kenteken"] .flip-inner {
  transform: rotateX(180deg);
}


/* ─── Dutch number-plate styling for the kenteken input ─────────────── */
.kenteken-plate {
  background: #f4c12c;            /* Dutch plate yellow */
  border: 2px solid #2c2c2c;
}
.kenteken-nl-badge {
  background: #2563eb;            /* EU-flag blue */
  color: #ffffff;
  min-width: 3rem;
  padding: 0 0.75rem;
  font-size: 1.125rem;
  letter-spacing: 0.05em;
}
.kenteken-input {
  color: #1a1a1a;
}
.kenteken-input::placeholder {
  color: rgba(26, 26, 26, 0.5);
}
.kenteken-submit {
  background: #2563eb;
  color: #ffffff;
}
.kenteken-submit:hover {
  background: #1d4ed8;
}

/* ─── Topdeals loading state ───────────────────────────────────────
   `#recent-deals` gets `.is-loading` from keuro.js while htmx is
   morph-swapping the section (filter change / pagination). Real
   content hides, skeleton sibling shows. Default state hides the
   skeleton so it never appears in the rendered partial. */
#recent-deals [data-deals-skeleton] { display: none; }
#recent-deals.is-loading [data-deals-content] { display: none; }
#recent-deals.is-loading [data-deals-skeleton] { display: grid; }