/* ============================================================
   Vizzit — Main CSS
   ============================================================ */

:root {
  --primary: #2563EB;
  --primary-dark: #1d4ed8;
  --primary-light: #eff6ff;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #0891b2;
  --dark: #0f172a;
  --body-bg: #f8fafc;
  --card-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--body-bg);
  color: #1e293b;
  font-size: 15px;
  line-height: 1.6;
}

/* ── Typography ─────────────────────────────────────────── */
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fw-900 { font-weight: 900 !important; }
.py-6   { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.min-vh-75 { min-height: 75vh; }

/* ── Cards ──────────────────────────────────────────────── */
.card { box-shadow: var(--card-shadow); }
.shadow-xl { box-shadow: 0 20px 60px rgba(0,0,0,.15) !important; }
.hover-lift { transition: transform .2s, box-shadow .2s; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.12) !important; }
.hover-bg { transition: background .15s; cursor: default; }
.hover-bg:hover { background: #f8fafc; }

/* ── Navbar ─────────────────────────────────────────────── */
.navbar { padding: .75rem 0; }
.navbar-brand { font-size: 1.25rem; font-weight: 800; }

/* ── Buttons ────────────────────────────────────────────── */
.btn { font-weight: 600; border-radius: 8px; }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-xs { padding: 2px 8px; font-size: 12px; border-radius: 5px; }
.cursor-pointer { cursor: pointer; }

/* ── Alert ──────────────────────────────────────────────── */
.alert { border-radius: 10px; border: none; }
.alert-success-subtle { background: #f0fdf4; border-left: 3px solid #16a34a; }

/* ── Stat icons ─────────────────────────────────────────── */
.stat-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; flex-shrink: 0;
}
.bg-primary-light  { background: #eff6ff; }
.bg-success-light  { background: #f0fdf4; }
.bg-warning-light  { background: #fffbeb; }
.bg-info-light     { background: #f0f9ff; }
.bg-danger-light   { background: #fef2f2; }

/* ── Feature icons ──────────────────────────────────────── */
.feature-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}

/* ── Step icons ─────────────────────────────────────────── */
.step-icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin: 0 auto;
}

/* ── Avatars ────────────────────────────────────────────── */
.avatar-circle {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.avatar-circle-sm {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}

/* ── Hero ───────────────────────────────────────────────── */
.bg-gradient-primary { background: linear-gradient(135deg, #2563EB, #7c3aed); }
.hero-section { background: linear-gradient(135deg, #1e3a8a 0%, #2563EB 50%, #7c3aed 100%); }
.hero-mockup { box-shadow: 0 20px 80px rgba(0,0,0,.25); max-width: 420px; }

/* Design previews on landing */
.design-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.design-preview {
  height: 80px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.9);
}
.d1 { background: linear-gradient(135deg, #2563EB, #1d4ed8); }
.d2 { background: linear-gradient(135deg, #1a1a2e, #16213e); }
.d3 { background: linear-gradient(135deg, #c4956a, #a07850); }
.d4 { background: linear-gradient(135deg, #f093fb, #f5576c); }

/* ── Dashboard layout ───────────────────────────────────── */
.dashboard-layout { min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar-header { padding: 16px; }
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; color: #94a3b8; text-decoration: none;
  font-size: 14px; font-weight: 500; border-radius: 8px; margin: 1px 6px;
  transition: background .15s, color .15s;
}
.sidebar-link:hover, .sidebar-link.active {
  background: #1e293b; color: #f1f5f9;
}
.sidebar-link i { width: 18px; text-align: center; font-size: 15px; }

/* ── Photo upload drop zone ─────────────────────────────── */
.upload-drop-zone {
  border: 2px dashed #cbd5e1; border-radius: 12px;
  padding: 32px; text-align: center; cursor: pointer;
  background: #f8fafc; transition: border-color .2s, background .2s;
}
.upload-drop-zone:hover, .upload-drop-zone.drag-over {
  border-color: var(--primary); background: #eff6ff;
}

/* ── Photo cards ────────────────────────────────────────── */
.photo-card { transition: transform .2s, box-shadow .2s; }
.photo-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.1) !important; }
.photo-thumb-wrapper { overflow: hidden; background: #f1f5f9; }
.photo-thumb-wrapper.landscape { height: 160px; }
.photo-thumb-wrapper.portrait  { height: 200px; }
.photo-thumb-wrapper.square    { height: 160px; }
.photo-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.photo-card:hover .photo-thumb { transform: scale(1.04); }

/* ── Design choice cards (profile page) ─────────────────── */
.design-choice-card { cursor: pointer; display: block; border: 2px solid transparent; border-radius: 10px; padding: 4px; transition: border-color .15s; }
.design-choice-card.selected, .design-choice-card:hover { border-color: var(--primary); }
.design-preview-card { height: 56px; }

/* ── Text truncate helpers ──────────────────────────────── */
.text-truncate-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Footer ─────────────────────────────────────────────── */
footer.footer { background: #1e293b !important; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-section { text-align: center; }
  .hero-mockup { margin: 0 auto; }
}