/* ============================================================
   GSUK Trial / Auth flow — self-contained dark theme
   The trial pages were authored against the old dark style.css
   but base.html now serves the light redesign.css + legacy-shim.
   This sheet scopes a cohesive dark "premium auth" look under
   .trial-shell and re-defines the legacy vars those templates
   reference, so nothing falls back to invisible/contrasting
   values. Loaded only on the trial templates via {% block head %}.
   ============================================================ */

.trial-shell {
  /* Legacy vars the templates reference — resolved for a dark surface */
  --bg-card:         #111a2e;
  --purple:          #A78BFA;
  --border:          rgba(255, 255, 255, 0.10);
  --border-glass:    rgba(255, 255, 255, 0.10);
  --text-primary:    #f1f5f9;
  --text-secondary:  rgba(255, 255, 255, 0.55);
  --text-muted:      rgba(255, 255, 255, 0.60);
  --red:             #f87171;
  --radius-lg:       16px;

  /* Full-bleed dark backdrop so the card never floats on paper-white */
  min-height: 100vh;
  background:
    radial-gradient(900px 600px at 18% 12%, rgba(99, 102, 241, 0.18), transparent 60%),
    radial-gradient(800px 600px at 88% 90%, rgba(52, 211, 153, 0.10), transparent 55%),
    #0a1020;
  color: var(--text-primary);
}

/* The two-panel card */
.trial-shell .trial-card {
  position: relative;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
/* Brand accent strip across the top of the card */
.trial-shell .trial-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #FF6EC7, #A78BFA, #60A5FA, #34D399);
  z-index: 2;
}

/* Headings sit on the dark panel */
.trial-shell h2,
.trial-shell h3,
.trial-shell h4 { color: #fff; }

/* text-muted helper — light, not the shim's dark ink */
.trial-shell .text-muted { color: var(--text-secondary); }

/* ---- Form fields: dark inputs (override the light shim) ---- */
.trial-shell .form-label,
.trial-shell label.form-label,
.trial-shell label {
  color: rgba(255, 255, 255, 0.82) !important;
}

.trial-shell .form-control,
.trial-shell input:not(.btn),
.trial-shell select:not(.btn),
.trial-shell textarea:not(.btn) {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f1f5f9 !important;
  border-radius: 8px !important;
}
.trial-shell .form-control::placeholder { color: rgba(255, 255, 255, 0.34); }

.trial-shell .form-control:focus,
.trial-shell input:not(.btn):focus,
.trial-shell select:not(.btn):focus,
.trial-shell textarea:not(.btn):focus {
  border-color: var(--purple) !important;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.20) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
/* Native select dropdown options render on system bg — keep readable */
.trial-shell select option { color: #111; }

/* ---- Buttons ---- */
/* Restore the intended gradient CTA — the shim forces .btn-primary to a
   solid dark slab via !important, which kills the inline gradient. */
.trial-shell .btn-primary {
  background: linear-gradient(90deg, #FF6EC7, #A78BFA, #60A5FA, #34D399) !important;
  background-size: 160% 100% !important;
  color: #0a1020 !important;
  border: none !important;
  font-weight: 600 !important;
  transition: filter .18s ease, transform .18s ease, background-position .4s ease !important;
}
.trial-shell .btn-primary:hover {
  filter: brightness(1.06);
  background-position: 100% 0 !important;
  transform: translateY(-1px);
}
.trial-shell .btn-outline,
.trial-shell .btn-secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}
.trial-shell .btn-outline:hover,
.trial-shell .btn-secondary:hover { background: rgba(255, 255, 255, 0.12) !important; }

/* ---- trial_status card (glass-card → dark) ---- */
.trial-shell .glass-card {
  background: var(--bg-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary) !important;
}
.trial-shell code { color: #c7d2fe; }
.trial-shell a:not(.btn) { color: var(--purple); }
/* Progress track was rgba(255,255,255,0.06) — fine on dark now, but make it crisp */
.trial-shell .trial-progress { background: rgba(255, 255, 255, 0.10); }

/* ---- Mobile: single column, branded, comfortable ---- */
@media (max-width: 768px) {
  .trial-shell .trial-left-panel { display: none !important; }
  .trial-shell .trial-card {
    flex-direction: column;
    max-width: 460px;
  }
  /* Right-hand form panel fills the card on mobile */
  .trial-shell .trial-card > div { padding: 2.25rem 1.5rem !important; }
  /* iOS: 16px inputs prevent auto-zoom on focus */
  .trial-shell .form-control,
  .trial-shell input:not(.btn),
  .trial-shell select:not(.btn) { font-size: 16px !important; }
}

@media (max-width: 480px) {
  .trial-shell { padding: 0; }
  .trial-shell .phone-wrap { flex-direction: column; gap: 0.5rem; }
  .trial-shell .phone-wrap .phone-code { width: 100%; }
}

/* Mobile-only brand lockup shown above the form when the left panel hides */
.trial-shell .trial-mobile-brand { display: none; }
@media (max-width: 768px) {
  .trial-shell .trial-mobile-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
  }
  .trial-shell .trial-mobile-brand img { height: 26px; opacity: 0.95; }
}