/* =====================================================================
   CarDealerPro – Frontend Styles
   ===================================================================== */

/* ---- Tokens ---- */
:root {
  --cdp-bg:          #f8fafc;
  --cdp-surface:     #ffffff;
  --cdp-border:      #e2e8f0;
  --cdp-primary:     #0d6efd;
  --cdp-primary-h:   #0b5ed7;
  --cdp-accent:      #f59e0b;
  --cdp-success:     #10b981;
  --cdp-danger:      #ef4444;
  --cdp-text:        #0f172a;
  --cdp-muted:       #64748b;
  --cdp-radius:      12px;
  --cdp-radius-sm:   8px;
  --cdp-shadow:      0 4px 24px rgba(0,0,0,.08);
  --cdp-shadow-lg:   0 8px 40px rgba(0,0,0,.14);
  --cdp-transition:  200ms ease;
  --cdp-font:        'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---- Base ---- */
.cdp-app *,
.cdp-app *::before,
.cdp-app *::after { box-sizing: border-box; margin: 0; padding: 0; }

.cdp-app {
  font-family: var(--cdp-font);
  color: var(--cdp-text);
  background: var(--cdp-bg);
  padding: 20px 16px 40px;
  max-width: 960px;
  margin: 0 auto;
}

/* ---- Steps ---- */
.cdp-step { animation: cdpFadeIn .35s ease; }
.cdp-step--hidden { display: none !important; }

@keyframes cdpFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cdp-step__header { margin-bottom: 28px; text-align: center; }
.cdp-step__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cdp-primary); color: #fff;
  font-size: 14px; font-weight: 700; margin-bottom: 10px;
}
.cdp-step__title  { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; margin-bottom: 6px; }
.cdp-step__subtitle { color: var(--cdp-muted); font-size: .95rem; }

/* ---- Upload Zone ---- */
.cdp-upload-zone {
  border: 2px dashed var(--cdp-border);
  border-radius: var(--cdp-radius);
  background: var(--cdp-surface);
  transition: border-color var(--cdp-transition), background var(--cdp-transition);
  cursor: pointer;
  margin-bottom: 20px;
}
.cdp-upload-zone.cdp-dragover {
  border-color: var(--cdp-primary);
  background: #eff6ff;
}
.cdp-upload-zone__inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 36px 20px;
}
.cdp-upload-zone__icon {
  width: 52px; height: 52px;
  color: var(--cdp-muted);
}
.cdp-upload-zone__text { font-size: 1.05rem; font-weight: 600; }
.cdp-upload-zone__sub  { color: var(--cdp-muted); font-size: .88rem; }

.cdp-upload-btns {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: 4px;
}

/* ---- Buttons ---- */
.cdp-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: 8px;
  font-size: .95rem; font-weight: 600; cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--cdp-transition);
  white-space: nowrap;
}
.cdp-btn--primary   { background: var(--cdp-primary); color: #fff; }
.cdp-btn--primary:hover   { background: var(--cdp-primary-h); }
.cdp-btn--secondary { background: transparent; border-color: var(--cdp-primary); color: var(--cdp-primary); }
.cdp-btn--secondary:hover { background: #eff6ff; }
.cdp-btn--outline   { background: transparent; border-color: var(--cdp-border); color: var(--cdp-text); }
.cdp-btn--outline:hover   { background: var(--cdp-bg); }
.cdp-btn--cta {
  background: linear-gradient(135deg, #0d6efd, #6366f1);
  color: #fff; font-size: 1rem; padding: 13px 28px; border-radius: 10px;
  box-shadow: 0 4px 16px rgba(99,102,241,.35);
}
.cdp-btn--cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cdp-btn--cta:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.cdp-btn--copy {
  background: transparent; border-color: var(--cdp-border); color: var(--cdp-muted);
  padding: 5px 12px; font-size: .82rem;
}
.cdp-btn--copy:hover { border-color: var(--cdp-primary); color: var(--cdp-primary); }
.cdp-btn--copy.copied { border-color: var(--cdp-success); color: var(--cdp-success); }

/* ---- Previews ---- */
.cdp-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.cdp-preview-item {
  position: relative; border-radius: 8px; overflow: hidden;
  aspect-ratio: 4/3; background: #f1f5f9;
  box-shadow: var(--cdp-shadow);
}
.cdp-preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cdp-preview-remove {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,.6); color: #fff;
  border: none; border-radius: 50%; width: 22px; height: 22px;
  font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background var(--cdp-transition);
}
.cdp-preview-remove:hover { background: var(--cdp-danger); }

/* ---- Section ---- */
.cdp-section { margin-bottom: 28px; }
.cdp-section__title {
  font-size: 1.05rem; font-weight: 700; margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}

/* ---- Toggle ---- */
.cdp-toggle-label {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
}
.cdp-toggle-input { display: none; }
.cdp-toggle-track {
  position: relative; width: 44px; height: 24px; border-radius: 12px;
  background: #cbd5e1; transition: background var(--cdp-transition); flex-shrink: 0;
}
.cdp-toggle-track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transition: transform var(--cdp-transition);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.cdp-toggle-input:checked + .cdp-toggle-track { background: var(--cdp-primary); }
.cdp-toggle-input:checked + .cdp-toggle-track::after { transform: translateX(20px); }
.cdp-toggle-text { font-size: .95rem; font-weight: 600; }
.cdp-toggle-text small { display: block; color: var(--cdp-muted); font-weight: 400; font-size: .82rem; }

/* ---- Background options ---- */
.cdp-bg-options {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 16px;
  background: var(--cdp-surface); border-radius: var(--cdp-radius-sm);
  border: 1px solid var(--cdp-border);
}
.cdp-bg-option {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  cursor: pointer;
}
.cdp-bg-option input[type="radio"] { display: none; }
.cdp-bg-swatch {
  width: 64px; height: 44px; border-radius: 8px; border: 2px solid transparent;
  transition: border-color var(--cdp-transition), transform var(--cdp-transition);
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.cdp-bg-option input:checked + .cdp-bg-swatch {
  border-color: var(--cdp-primary); transform: scale(1.08);
}
.cdp-bg-swatch--studio_white    { background: #f5f5f5; }
.cdp-bg-swatch--showroom_grey   { background: linear-gradient(180deg,#dce1e6,#a0a5aa); }
.cdp-bg-swatch--outdoor_sky     { background: linear-gradient(180deg,#87b9eb,#dceefa); }
.cdp-bg-swatch--dealership_dark { background: linear-gradient(180deg,#141923,#2d3746); }
.cdp-bg-swatch--race_track      { background: linear-gradient(180deg,#3c3c3c,#646464); }
.cdp-bg-label { font-size: .78rem; color: var(--cdp-muted); text-align: center; }

/* ---- Tone options ---- */
.cdp-tone-options {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.cdp-tone-option { cursor: pointer; }
.cdp-tone-option input[type="radio"] { display: none; }
.cdp-tone-pill {
  display: inline-block; padding: 7px 15px; border-radius: 999px; font-size: .88rem;
  border: 2px solid var(--cdp-border); background: var(--cdp-surface);
  transition: all var(--cdp-transition); font-weight: 500;
}
.cdp-tone-option input:checked + .cdp-tone-pill {
  background: var(--cdp-primary); border-color: var(--cdp-primary); color: #fff;
}

/* ---- Submit row ---- */
.cdp-submit-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px;
}
.cdp-remaining { font-size: .85rem; color: var(--cdp-muted); }

/* ---- Notice ---- */
.cdp-notice {
  padding: 14px 18px; border-radius: var(--cdp-radius-sm); font-size: .92rem;
  margin-bottom: 18px;
}
.cdp-notice--warn { background: #fff7ed; border-left: 4px solid var(--cdp-accent); color: #92400e; }
.cdp-notice--error { background: #fef2f2; border-left: 4px solid var(--cdp-danger); color: #991b1b; }
.cdp-notice--success { background: #f0fdf4; border-left: 4px solid var(--cdp-success); color: #166534; }

/* ============================================================
   Loading / Step 2
   ============================================================ */
.cdp-loading {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  padding: 48px 20px;
}

/* Car animation */
.cdp-car-anim { width: min(280px, 90vw); }
.cdp-car-svg { width: 100%; height: auto; overflow: visible; }
.cdp-car-body { animation: cdpCarBounce 1.4s ease-in-out infinite; }
@keyframes cdpCarBounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.cdp-road-dash { animation: cdpRoad 1.2s linear infinite; }
@keyframes cdpRoad {
  from { transform: translateX(0); }
  to   { transform: translateX(-35px); }
}

/* Progress bar */
.cdp-progress-wrap { width: min(400px, 90vw); text-align: center; }
.cdp-progress-bar {
  height: 10px; border-radius: 999px; background: #e2e8f0;
  overflow: hidden; margin-bottom: 8px;
}
.cdp-progress-fill {
  height: 100%; border-radius: 999px; width: 0%;
  background: linear-gradient(90deg, #0d6efd, #6366f1, #f59e0b);
  background-size: 200% 100%;
  transition: width .6s cubic-bezier(.4,0,.2,1);
  animation: cdpShimmer 2s linear infinite;
}
@keyframes cdpShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.cdp-progress-pct { font-size: 1.4rem; font-weight: 700; color: var(--cdp-primary); }
.cdp-loading__msg  { font-size: 1.05rem; color: var(--cdp-muted); }

/* Loading step list */
.cdp-loading__steps {
  display: flex; flex-direction: column; gap: 10px;
  width: min(360px, 90vw);
}
.cdp-lstep {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: var(--cdp-radius-sm);
  background: var(--cdp-surface); border: 1px solid var(--cdp-border);
  font-size: .9rem; color: var(--cdp-muted);
  transition: all var(--cdp-transition);
}
.cdp-lstep.active  { border-color: var(--cdp-primary); color: var(--cdp-text); font-weight: 600; }
.cdp-lstep.done    { border-color: var(--cdp-success); color: var(--cdp-success); }
.cdp-lstep__icon   { font-size: 1.1rem; }
.cdp-lstep__status { margin-left: auto; font-size: .85rem; }

/* ============================================================
   Results / Step 3
   ============================================================ */
.cdp-results-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}

/* Car summary */
.cdp-car-summary {
  background: var(--cdp-surface); border: 1px solid var(--cdp-border);
  border-radius: var(--cdp-radius); padding: 18px 20px;
  margin-bottom: 28px;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
}
.cdp-car-summary__plate {
  background: #fbbf24; color: #000; font-weight: 900;
  padding: 5px 12px; border-radius: 6px; font-size: 1.1rem;
  letter-spacing: 2px; border: 2px solid #000; font-family: monospace;
}
.cdp-car-summary__detail {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cdp-car-summary__badge {
  background: #f1f5f9; border-radius: 6px; padding: 4px 10px;
  font-size: .83rem; font-weight: 600; color: var(--cdp-muted);
}
.cdp-car-summary__badge span { color: var(--cdp-text); }

/* Photos grid */
.cdp-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.cdp-photo-card {
  border-radius: var(--cdp-radius-sm); overflow: hidden;
  background: var(--cdp-surface); box-shadow: var(--cdp-shadow);
}
.cdp-photo-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.cdp-photo-card__actions {
  padding: 8px; display: flex; justify-content: center;
}
.cdp-btn--download {
  background: transparent; border: 1px solid var(--cdp-border); color: var(--cdp-muted);
  border-radius: 6px; padding: 5px 12px; font-size: .82rem; cursor: pointer;
  transition: all var(--cdp-transition);
}
.cdp-btn--download:hover { border-color: var(--cdp-primary); color: var(--cdp-primary); }

/* Platform cards */
.cdp-platforms { display: flex; flex-direction: column; gap: 14px; }
.cdp-platform-card {
  background: var(--cdp-surface); border: 1px solid var(--cdp-border);
  border-radius: var(--cdp-radius); overflow: hidden;
  box-shadow: var(--cdp-shadow);
}
.cdp-platform-card__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; background: #f8fafc; border-bottom: 1px solid var(--cdp-border);
}
.cdp-platform-card__name {
  font-weight: 700; font-size: .95rem;
  display: flex; align-items: center; gap: 8px;
}
.cdp-platform-card__body { padding: 14px 16px; }
.cdp-platform-card__text {
  font-size: .9rem; line-height: 1.65; color: var(--cdp-text);
  white-space: pre-wrap; word-break: break-word;
}

/* ---- Accordion ---- */
.cdp-accordion {
  border: 1px solid var(--cdp-border); border-radius: var(--cdp-radius);
  overflow: hidden; box-shadow: var(--cdp-shadow);
}
.cdp-accordion__trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; background: var(--cdp-surface);
  border: none; cursor: pointer; font-size: .98rem; font-weight: 700;
  color: var(--cdp-text); transition: background var(--cdp-transition);
}
.cdp-accordion__trigger:hover { background: #f8fafc; }
.cdp-accordion__arrow {
  width: 20px; height: 20px; flex-shrink: 0; color: var(--cdp-muted);
  transition: transform .3s ease;
}
.cdp-accordion__trigger[aria-expanded="true"] .cdp-accordion__arrow {
  transform: rotate(180deg);
}
.cdp-accordion__body {
  max-height: 0; overflow: hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1);
  background: var(--cdp-bg);
  border-top: 1px solid var(--cdp-border);
}
.cdp-accordion__body[aria-hidden="false"] { max-height: 2000px; }

/* ---- Amend form ---- */
.cdp-amend-form { padding: 24px 20px; }
.cdp-amend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px; margin-bottom: 20px;
}
.cdp-amend-field { display: flex; flex-direction: column; gap: 6px; }
.cdp-label { font-size: .85rem; font-weight: 600; color: var(--cdp-muted); }
.cdp-input, .cdp-select {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--cdp-border); background: var(--cdp-surface);
  font-size: .9rem; color: var(--cdp-text);
  transition: border-color var(--cdp-transition);
}
.cdp-input:focus, .cdp-select:focus {
  outline: none; border-color: var(--cdp-primary);
  box-shadow: 0 0 0 3px rgba(13,110,253,.12);
}
.cdp-input--textarea { resize: vertical; min-height: 70px; }
.cdp-amend-tone { margin-bottom: 20px; display: flex; flex-direction: column; gap: 6px; max-width: 280px; }
.cdp-amend-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---- Spinner for regen ---- */
.cdp-spinner {
  width: 18px; height: 18px; border: 3px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%;
  animation: cdpSpin .7s linear infinite; display: inline-block;
}
@keyframes cdpSpin { to { transform: rotate(360deg); } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 600px) {
  .cdp-upload-btns { flex-direction: column; width: 100%; }
  .cdp-btn--primary, .cdp-btn--secondary { width: 100%; justify-content: center; }
  .cdp-bg-options { gap: 8px; }
  .cdp-bg-swatch  { width: 52px; height: 36px; }
  .cdp-photos-grid { grid-template-columns: repeat(2, 1fr); }
  .cdp-car-summary { flex-direction: column; align-items: flex-start; }
  .cdp-amend-grid { grid-template-columns: 1fr; }
  .cdp-results-header { flex-direction: column; align-items: flex-start; }
  .cdp-submit-row { flex-direction: column; align-items: flex-start; }
}