/* ============================================================================
   ApplaFix v2 — split-panel, 100vh, no-scroll
   LEFT = activity/results  |  RIGHT = v1 input flow
   
   Uses applafix.css design system classes: .btn, .btn-primary, .btn-secondary,
   .btn-gradient, .btn-ghost, .btn-sm, .btn-lg, .btn-icon, .card, .card-pad,
   .input, .textarea, .label, .hint, .badge, .badge-success, .badge-dot
   ========================================================================== */

@import url('../../design-system/applafix.css');

/* ── Aurora boost for website ── */
.aurora-bg .blob { opacity: 0.85; filter: blur(80px); }
.aurora-bg .blob.b1 { width: 60vw; height: 60vw; top: -12vw; left: -5vw; }
.aurora-bg .blob.b2 { width: 55vw; height: 55vw; top: 5vw; right: -5vw; }
.aurora-bg .blob.b3 { width: 50vw; height: 50vw; bottom: -10vw; left: 25vw; }

/* ── SHELL — only layout overrides ── */
html, body { height: 100%; overflow: hidden; margin: 0; background: var(--bg); }
.app-shell { display: flex; flex-direction: column; height: 100vh; position: relative; z-index: 1; }

/* ── TOPBAR ── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding-inline: var(--space-5); flex-shrink: 0;
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  border-bottom: 1px solid var(--border);
  z-index: var(--z-sticky);
}
.topbar-brand {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-base); color: var(--text); text-decoration: none;
}
.topbar-logo-img { width: 28px; height: 28px; border-radius: var(--radius-xs); object-fit: cover; }
.topbar-actions { display: flex; align-items: center; gap: var(--space-3); }
.topbar-phone {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--text-muted); text-decoration: none;
}
.topbar-phone:hover { color: var(--primary); }
.topbar-phone svg { width: 14px; height: 14px; color: var(--success-500); }
.topbar-about { font-size: var(--text-xs); color: var(--text-muted); text-decoration: none; }
.topbar-about:hover { color: var(--text); }

/* ── SPLIT LAYOUT ── */
.panels {
  display: grid; grid-template-columns: 1fr 1fr;
  flex: 1; min-height: 0; overflow: hidden;
}

/* ==========================================================================
   RIGHT PANEL — input flow
   ========================================================================== */
.panel-right {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow-y: auto; overflow-x: hidden;
  padding: var(--space-6);
  background:
    radial-gradient(ellipse 100% 60% at 50% -10%, rgba(67, 56, 202, 0.45), transparent 65%),
    radial-gradient(ellipse 70% 50% at 85% 15%, rgba(14, 116, 144, 0.25), transparent 60%),
    radial-gradient(ellipse 50% 60% at 15% 80%, rgba(99, 102, 241, 0.15), transparent 60%);
}
.solver-wrap { width: 100%; max-width: 560px; text-align: center; }

.solver-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight); color: var(--text);
  margin-bottom: var(--space-1);
  text-align: left;
}
.solver-title .highlight {
  color: transparent; background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
}
.solver-subtitle {
  font-size: var(--text-sm); color: var(--text-muted);
  line-height: var(--leading-relaxed); margin-bottom: var(--space-5);
  text-align: left;
}

/* Appliance cards — use DS .card base, add layout */
.appliance-grid {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  justify-content: center; margin-bottom: var(--space-3);
}
.appliance-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-1);
  width: 80px; height: 72px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.appliance-card:hover { border-color: color-mix(in srgb, var(--primary) 50%, transparent); color: var(--text); }
.appliance-card.active {
  border-color: var(--primary); color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
}
.appliance-card .icon { font-size: var(--text-xl); line-height: 1; }

/* Brand pills — DS .badge as base, add interactivity */
.brand-select {
  display: none; flex-wrap: wrap; gap: var(--space-2);
  justify-content: center; margin-bottom: var(--space-4);
}
.brand-select.visible { display: flex; }
.brand-chip {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.brand-chip:hover { border-color: var(--border-strong); color: var(--text-muted); }
.brand-chip.active { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

/* Symptom box — DS .card with glassmorphism tweak */
.symptom-box {
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: var(--space-4);
  text-align: left;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.symptom-box:focus-within {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 12%, transparent);
}
.symptom-input {
  width: 100%; border: 0; background: transparent; color: var(--text);
  font-family: var(--font-sans); font-size: var(--text-sm);
  line-height: var(--leading-relaxed); resize: none;
  min-height: 72px; outline: none;
}
.symptom-input::placeholder { color: var(--text-subtle); }

.input-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--space-3);
}
.input-tools { display: flex; gap: var(--space-2); }

/* Photo preview */
.photo-preview { display: none; margin-top: var(--space-2); }
.photo-preview.visible { display: flex; align-items: center; gap: var(--space-2); }
.photo-thumb { width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--border); }
.photo-remove { width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--danger-500); color: #fff; font-size: 12px; cursor: pointer; display: grid; place-items: center; }

/* ==========================================================================
   LEFT PANEL — Activity / Results
   ========================================================================== */
.panel-left {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}

.activity-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-3);
  padding: var(--space-5); text-align: center;
}
.activity-empty .empty-icon { font-size: 48px; opacity: 0.3; }
.activity-empty p { font-size: var(--text-sm); color: var(--text-subtle); max-width: 280px; line-height: var(--leading-relaxed); }

.activity-feed {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.activity-feed.hidden { display: none; }

.activity-label {
  font-size: 10px; font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-subtle); margin-bottom: var(--space-2);
}

/* Cause bars — site-specific, DS has no progress bar */
.cause-item { display: flex; flex-direction: column; gap: 4px; }
.cause-item + .cause-item { margin-top: var(--space-3); }
.cause-head { display: flex; justify-content: space-between; align-items: center; }
.cause-name { font-size: var(--text-sm); color: var(--text); }
.cause-pct { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--primary); font-variant-numeric: tabular-nums; }
.cause-bar { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.cause-bar-fill { height: 100%; border-radius: 2px; background: var(--gradient-brand); transition: width 0.6s var(--ease-out); }

/* Time grid — site-specific */
.time-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--space-2); margin-bottom: var(--space-4);
}
.time-slot {
  padding: var(--space-2); text-align: center;
  border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
}
.time-slot:hover { border-color: var(--primary); }
.time-slot.active { border-color: var(--primary); background: var(--primary); color: var(--text-on-brand); }
.time-slot.unavailable { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }

/* Book form grid */
.book-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.book-form .field-full { grid-column: 1 / -1; }

/* Phone validation states */
.input.is-valid { border-color: var(--success-500); }
.input.is-valid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success-500) 15%, transparent); }
.phone-hint { min-height: 16px; margin-top: 2px; font-size: var(--text-xs); transition: color var(--duration-fast); }
.input.is-invalid + .phone-hint { color: var(--danger-500); }
.input.is-valid + .phone-hint { color: var(--success-500); }

/* Turnstile widget */
.cf-turnstile-wrap { margin-top: var(--space-3); min-height: 0; transition: min-height var(--duration-base); }
.cf-turnstile-wrap:not(:empty) { min-height: 65px; }

/* Confirmation rows */
.conf-rows { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); text-align: left; }
.conf-row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }

/* Card entrance animation */
@keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.activity-feed .card { animation: cardIn 0.35s var(--ease-out); }

/* Followup options layout */
.followup-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Hidden utility */
.hidden { display: none !important; }

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 768px) {
  .panels { grid-template-columns: 1fr; }
  .panel-left { display: none; border-right: 0; }
  .panel-left.mobile-visible { display: flex !important; position: fixed; inset: 52px 0 0 0; z-index: var(--z-overlay); background: var(--bg); }
  .panel-right { padding: var(--space-4); }
  .solver-title { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  .appliance-card { width: 68px; height: 62px; }
  .mobile-tab-bar { display: flex; border-top: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
  .mobile-tab { flex: 1; border: 0; background: transparent; color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-medium); padding: var(--space-2) 0; text-align: center; cursor: pointer; }
  .mobile-tab.active { color: var(--primary); }
}
@media (min-width: 769px) {
  .mobile-tab-bar { display: none; }
}