/* ## Created: 2026-04-17 | Last Modified: 2026-04-17 */
/* ## Purpose: Appraisal Wizard global design system — CSS custom properties + all component styles */
/* ## Source: design-system.json v1.0.0 — xchannel.com */
/* ## NOTE: All sizing uses clamp(min, preferred, max) — zero fixed pixels */

/* ============================================================
   DESIGN TOKENS — CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* --- Colors --- */
  --color-bg-base:           #0a0a0a;
  --color-bg-surface:        #111111;
  --color-bg-card:           #151520;
  --color-bg-slot:           #1a1a2a;
  --color-bg-header-from:    #1a1a2e;
  --color-bg-header-to:      #16213e;
  --color-bg-overlay:        #111111;
  --color-bg-muted:          #2a2a3a;

  --color-border-default:    #333333;
  --color-border-card:       #2a2a3a;
  --color-border-subtle:     #1a1a2a;
  --color-border-menu:       #222222;

  --color-accent-cyan:       #00d4ff;
  --color-accent-cyan-hover: #00e8ff;
  --color-accent-green:      #00ff88;
  --color-accent-red:        rgba(255, 0, 0, 0.8);
  --color-accent-gold:       #FFD700;

  --color-text-primary:      #ffffff;
  --color-text-muted:        #888888;
  --color-text-faint:        #555555;
  --color-text-light:        #cccccc;
  --color-text-on-accent:    #000000;

  /* --- Typography --- */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-size-xs:   clamp(0.625rem, 1.8vw, 0.75rem);
  --font-size-sm:   clamp(0.75rem, 2vw, 0.875rem);
  --font-size-base: clamp(0.875rem, 2.5vw, 1rem);
  --font-size-md:   clamp(1rem, 2.8vw, 1.125rem);
  --font-size-lg:   clamp(1.125rem, 3vw, 1.375rem);
  --font-size-xl:   clamp(1.25rem, 4vw, 1.5rem);
  --font-size-2xl:  clamp(1.5rem, 5vw, 2rem);
  --font-size-3xl:  clamp(2rem, 7vw, 3rem);
  --font-size-hero: clamp(2.5rem, 9vw, 4rem);
  --font-size-icon: clamp(2rem, 8vw, 3rem);

  --font-weight-normal: 400;
  --font-weight-semi:   600;
  --font-weight-bold:   700;
  --font-weight-black:  800;

  /* --- Spacing — gaps --- */
  --gap-xs:  clamp(0.25rem, 1vw, 0.375rem);
  --gap-sm:  clamp(0.375rem, 1.5vw, 0.5rem);
  --gap-md:  clamp(0.5rem, 2vw, 0.75rem);
  --gap-lg:  clamp(0.75rem, 2.5vw, 1rem);
  --gap-xl:  clamp(1rem, 3vw, 1.25rem);
  --gap-2xl: clamp(1.25rem, 4vw, 1.75rem);

  /* --- Spacing — padding --- */
  --pad-xs:   clamp(0.25rem, 1vw, 0.375rem);
  --pad-sm:   clamp(0.375rem, 1.5vw, 0.5rem);
  --pad-md:   clamp(0.75rem, 2.5vw, 1rem);
  --pad-lg:   clamp(1rem, 3vw, 1.25rem);
  --pad-xl:   clamp(1.5rem, 4vw, 2.5rem);
  --pad-2xl:  clamp(2rem, 6vw, 3.5rem);
  --pad-page: clamp(1rem, 4vw, 1.5rem);

  /* --- Border radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-pill: 50px;
  --radius-full: 50%;

  /* --- Shadows --- */
  --shadow-menu: -4px 0 20px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-btn:  0 2px 8px rgba(0, 212, 255, 0.2);

  /* --- Transitions --- */
  --transition-fast:   0.2s ease;
  --transition-normal: 0.3s ease;

  /* --- Z-index layers --- */
  --z-hamburger: 200;
  --z-menu:      300;
  --z-overlay:   9998;
  --z-lightbox:  9999;
}

/* ============================================================
   RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   BASE / BODY
   ============================================================ */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-black); }
h2 { font-size: var(--font-size-lg);  font-weight: var(--font-weight-bold);  }
h3 { font-size: var(--font-size-md);  font-weight: var(--font-weight-bold);  }

/* ============================================================
   LAYOUT
   ============================================================ */
.header {
  text-align: center;
  padding: var(--pad-lg);
  background: linear-gradient(135deg, var(--color-bg-header-from), var(--color-bg-header-to));
  border-bottom: 2px solid var(--color-accent-cyan);
  position: relative;
}

.main {
  max-width: 500px;
  margin: 0 auto;
  padding: var(--pad-page);
  text-align: center;
}

/* ============================================================
   HAMBURGER MENU
   ============================================================ */
.hamburger-menu {
  position: absolute;
  top: 4px;
  right: clamp(12px, 3vw, 16px);
  cursor: pointer;
  z-index: var(--z-hamburger);
}

.hamburger-menu .bars {
  width: clamp(22px, 5.5vw, 28px);
  height: 3px;
  background: var(--color-text-primary);
  margin: clamp(4px, 1.2vw, 5px) 0;
  border-radius: var(--radius-sm);
  transition: var(--transition-normal);
}

/* ============================================================
   MENU OVERLAY (SLIDE-IN NAV)
   ============================================================ */
.menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: clamp(220px, 55vw, 260px);
  height: 100vh;
  background: var(--color-bg-overlay);
  border-left: 2px solid var(--color-accent-cyan);
  z-index: var(--z-menu);
  padding: clamp(48px, 12vw, 60px) var(--pad-page) var(--pad-page);
  box-shadow: var(--shadow-menu);
}

.menu-overlay.open {
  display: block !important;
}

.menu-overlay a {
  display: block;
  color: var(--color-text-primary);
  text-decoration: none;
  padding: clamp(10px, 3vw, 14px) 0;
  border-bottom: 1px solid var(--color-border-menu);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semi);
  transition: color var(--transition-fast);
}

.menu-overlay a:hover {
  color: var(--color-accent-cyan);
}

.menu-close {
  position: absolute;
  top: 4px;
  right: clamp(12px, 3vw, 16px);
  color: var(--color-text-muted);
  font-size: clamp(22px, 5.5vw, 28px);
  cursor: pointer;
  line-height: 1;
}

/* ============================================================
   CAMERA ZONE
   ============================================================ */
.camera-zone {
  border: 3px dashed var(--color-border-default);
  border-radius: var(--radius-2xl);
  padding: var(--pad-2xl) var(--pad-page);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-normal);
  background: var(--color-bg-surface);
  min-height: clamp(100px, 25vw, 140px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.camera-zone:hover {
  border-color: var(--color-accent-cyan);
  background: var(--color-bg-header-from);
}

.camera-zone .icon {
  font-size: var(--font-size-icon);
  margin-bottom: var(--gap-md);
}

.camera-zone p {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

.camera-zone .small {
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  margin-top: var(--gap-sm);
}

/* Hidden file inputs */
#photo-input,
#camera-input {
  display: none;
}

/* Preview image (legacy single-photo, still present in DOM) */
#preview-img {
  max-width: 100%;
  max-height: 300px;
  border-radius: var(--radius-xl);
  display: none;
  margin: var(--gap-md) auto;
}

/* ============================================================
   PHOTO GRID
   ============================================================ */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md);
  margin-top: var(--gap-md);
}

.photo-slot {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background: var(--color-bg-slot);
  border: 2px dashed var(--color-border-default);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-slot .remove-btn {
  position: absolute;
  top: clamp(3px, 1vw, 4px);
  right: clamp(3px, 1vw, 4px);
  width: clamp(20px, 5vw, 24px);
  height: clamp(20px, 5vw, 24px);
  background: var(--color-accent-red);
  color: var(--color-text-primary);
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.photo-slot .add-btn {
  font-size: clamp(24px, 7vw, 32px);
  color: var(--color-accent-green);
  font-weight: var(--font-weight-bold);
}

.photo-slot.has-photo {
  border: 2px solid var(--color-border-card);
}

.photo-slot.primary {
  border-color: var(--color-accent-cyan);
}

.photo-slot .primary-badge {
  position: absolute;
  bottom: clamp(3px, 1vw, 4px);
  left: clamp(3px, 1vw, 4px);
  background: var(--color-accent-cyan);
  color: var(--color-text-on-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: clamp(1px, 0.5vw, 2px) clamp(4px, 1.5vw, 6px);
  border-radius: var(--radius-sm);
}

/* ============================================================
   INFO CARDS
   ============================================================ */
.info-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-xl);
  padding: var(--pad-md);
  margin: var(--gap-md) 0;
  text-align: left;
}

.info-card h3 {
  color: var(--color-accent-cyan);
  font-size: var(--font-size-base);
  margin-bottom: var(--gap-sm);
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: clamp(4px, 1.5vw, 6px) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.info-row:last-child {
  border: none;
}

.info-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

.info-value {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semi);
  font-size: var(--font-size-base);
}

/* ============================================================
   PRICE DISPLAY
   ============================================================ */
.price-big {
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-black);
  color: var(--color-accent-green);
  text-align: center;
  margin: clamp(12px, 4vw, 20px) 0;
}

.price-range {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: block;
  width: 100%;
  max-width: 400px;
  padding: clamp(12px, 3.5vw, 16px);
  border: none;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  margin: var(--gap-lg) auto 0;
  transition: all var(--transition-fast);
  font-family: var(--font-family-base);
}

.btn-primary {
  background: var(--color-accent-cyan);
  color: var(--color-text-on-accent);
}

.btn-primary:hover {
  background: var(--color-accent-cyan-hover);
  transform: scale(1.02);
}

.btn-success {
  background: var(--color-accent-green);
  color: var(--color-text-on-accent);
}

.btn-secondary {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   LOADING / SPINNER
   ============================================================ */
.loading {
  text-align: center;
  padding: var(--pad-2xl);
}

.spinner {
  width: clamp(32px, 8vw, 40px);
  height: clamp(32px, 8vw, 40px);
  border: 4px solid var(--color-border-default);
  border-top-color: var(--color-accent-cyan);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
  margin: 0 auto var(--gap-lg);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading p {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

/* ============================================================
   WIZARD SECTIONS
   ============================================================ */
.section {
  display: none;
  animation: fadeIn 0.3s ease;
}

.section.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(clamp(6px, 2vw, 10px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   WIZARD LINK (GHOST PILL)
   ============================================================ */
.wizard-link {
  display: inline-block;
  margin-top: clamp(14px, 4vw, 20px);
  padding: clamp(8px, 2.5vw, 10px) clamp(14px, 4vw, 20px);
  color: var(--color-accent-cyan);
  font-size: var(--font-size-xs);
  text-decoration: none;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  transition: all var(--transition-fast);
}

.wizard-link:hover {
  background: var(--color-bg-header-from);
  border-color: var(--color-accent-cyan);
}

/* ============================================================
   FORMS / INPUTS
   ============================================================ */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: clamp(8px, 2.5vw, 10px);
  background: var(--color-bg-slot);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  transition: border-color var(--transition-fast);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-accent-cyan);
}

textarea {
  resize: vertical;
  min-height: clamp(50px, 12vw, 60px);
}

/* ============================================================
   UTILITIES
   ============================================================ */
.text-muted    { color: var(--color-text-muted);   font-size: var(--font-size-base); }
.text-faint    { color: var(--color-text-faint);   font-size: var(--font-size-sm);   }
.text-accent   { color: var(--color-accent-cyan);  }
.text-green    { color: var(--color-accent-green); }
.text-center   { text-align: center; }
.text-left     { text-align: left;   }

.small { font-size: var(--font-size-sm); }
.xs    { font-size: var(--font-size-xs); }