/* JouwCarParts — light theme cheer + logo picker (dark stays original) */

/* Light mode only: keep the cheerful palette */
[data-theme="light"] {
  --asphalt: #eef7ff;
  --asphalt-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f9ff;
  --steel-dim: #c9d7e6;
  --chrome: #2f4a63;
  --brake: #ff5a3d;
  --signal: #ffb020;
  --muted: #5b738a;
  --text: #243447;
  --text-strong: #122033;
  --success: #2f9e6b;
  --header-bg: #fffffff2;
  --body-glow-1: #38bdf833;
  --body-glow-2: #ffb02033;
  --input-bg: #ffffff;
  --hero-scrim: linear-gradient(90deg, #eef7fff2 0%, #eef7ffa6 48%, #eef7ff33 100%),
    linear-gradient(0deg, #eef7fff5 0%, transparent 48%);
  --strip-bg: linear-gradient(135deg, #ffffff 0%, #e8f6ff 45%, #fff4e6 100%);
  --trust-bg: #ffffff;
  --footer-bg: #dcecf8;
  color-scheme: light;
}

[data-theme="light"] body {
  background-image:
    radial-gradient(900px 420px at 12% -10%, #7dd3fc55, transparent 60%),
    radial-gradient(700px 380px at 90% 0%, #fdba7455, transparent 55%),
    radial-gradient(600px 360px at 70% 100%, #86efac44, transparent 50%);
  background-attachment: fixed;
}

/* Dark mode: restore original asphalt look (do not override :root vars) */
[data-theme="dark"] body {
  background-image: none;
}

.vf-logo-wrap {
  grid-column: 1 / -1;
  margin: 0.35rem 0 0.15rem;
}

.vf-logo-hint {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
  color: var(--muted);
}

.vf-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 0.55rem;
  max-height: 280px;
  overflow: auto;
  padding: 0.35rem 0.15rem 0.5rem;
}

.vf-logo-btn {
  appearance: none;
  border: 1px solid var(--steel-dim);
  background: var(--surface);
  border-radius: 14px;
  padding: 0.55rem 0.35rem 0.45rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease,
    background 0.15s ease;
}

[data-theme="light"] .vf-logo-btn {
  border-color: color-mix(in srgb, var(--steel-dim) 80%, #7dd3fc);
  background: #fff;
  box-shadow: 0 4px 14px #0ea5e914;
}

[data-theme="dark"] .vf-logo-btn {
  background: #141414;
  border-color: #333;
  box-shadow: 0 4px 14px #00000066;
}

.vf-logo-btn:hover {
  transform: translateY(-2px);
}

[data-theme="light"] .vf-logo-btn:hover {
  border-color: #38bdf8;
  box-shadow: 0 8px 18px #0ea5e928;
}

[data-theme="dark"] .vf-logo-btn:hover {
  border-color: var(--signal);
  box-shadow: 0 8px 18px #00000099;
}

.vf-logo-btn.is-active {
  border-color: var(--brake);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brake) 35%, transparent);
}

[data-theme="light"] .vf-logo-btn.is-active {
  background: #fff7f4;
}

[data-theme="dark"] .vf-logo-btn.is-active {
  background: #1a1010;
}

.vf-logo-btn img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

[data-theme="dark"] .vf-logo-btn img {
  /* Keep colored logos readable on dark tiles */
  filter: drop-shadow(0 0 0.5px #fff8);
}

.vf-logo-fallback {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-strong);
  background: color-mix(in srgb, var(--signal) 35%, var(--surface-2));
}

.vf-logo-btn span {
  font-size: 0.72rem;
  line-height: 1.15;
  text-align: center;
  color: var(--text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vf-logo-empty {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0.5rem;
}

.car-preview.photo-mode .car-photo,
.vf-saved-photo,
img.vf-saved-photo {
  border-radius: 12px;
}

[data-theme="light"] .vf-saved-photo,
[data-theme="light"] img.vf-saved-photo {
  box-shadow: 0 10px 28px #0ea5e922;
}

@media (max-width: 640px) {
  .vf-logo-grid {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    max-height: 240px;
  }
}

/* NL kenteken plate — align with mijnautoonderdelen style */
.kenteken-eu {
  background: #006ee0 !important;
  width: 2.75rem !important;
  font-size: 0.95rem !important;
  font-weight: 700;
}
.kenteken-field {
  min-height: 3.6rem !important;
  border-radius: 4px;
}
.kenteken-field input {
  background: #ffc701 !important;
  font-weight: 700;
}