/* Loungr CSS — base.
   Split from the former monolithic style.css; this file is canonical
   now — edit it directly. Pages load base.css first, then their
   concern files (marketing / auth / dashboard / channel-groups). */

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

/* Scrollbars — thin, dark, on-brand everywhere (the default chunky OS
   scrollbar looked out of place against the dark UI, especially on the
   channel-groups scroll panes). Firefox via scrollbar-*, the rest via
   ::-webkit-scrollbar. */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.30); }
::-webkit-scrollbar-corner { background: transparent; }

/* Checkboxes — brand-styled everywhere (the native control clashed with the
   dark UI). A rounded box that fills with the accent + a white check when on. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--bg-base);
  cursor: pointer;
  position: relative;
  transition: background 120ms, border-color 120ms;
}
input[type="checkbox"]:hover { border-color: var(--text-muted); }
input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 47%;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* The `hidden` attribute must always win, even on elements that set their
   own display (flex/grid/inline-block). Without this, toggling el.hidden in
   JS silently does nothing on such elements — the bug behind the stuck
   "Setting up Loungr…" banner and a recurring footgun across the dashboard.
   This one rule retires the whole class; per-element [hidden] guards are no
   longer needed. (The only element that must render while hidden, the mobile
   nav backdrop, no longer uses the attribute — it fades via opacity.) */
[hidden] { display: none !important; }
html { font-size: 16px; }
body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; font-size: inherit; }
ul { list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* Custom properties */
:root {
  --bg-base:        #0B0C10;
  --bg-raised:      #15161A;
  --bg-stripe:      #1A1B20;
  --bg-focused:     #2E1A26;
  --bg-hover:       #1E1F24;
  --border:         #2A2D34;
  --accent:         #DB2777;
  /* RGB triplet of --accent, so glows/tints/gradients can be written
     rgba(var(--accent-rgb), α) and stay in sync with one source of
     truth — no more hardcoded brand literals scattered through the file. */
  --accent-rgb:     219, 39, 119;
  /* Lighter accent reserved for brand TEXT on dark surfaces — the
     brand magenta (#DB2777) only hits ~3:1 on bg-base, below WCAG AA.
     #F472B6 clears ~7:1 while staying recognizably magenta.
     Use --accent for fills/borders/icons-on-tint, --accent-text for
     plain text/links. */
  --accent-text:    #F472B6;
  /* Brighter magenta for hover/active link states. */
  --accent-hover:   #F0539C;
  /* Light magenta for text sitting on a magenta-tinted surface (AA). */
  --accent-on-tint: #F4B6D2;
  --accent-glow:    rgba(var(--accent-rgb), 0.35);
  --gold:           #FFC857;
  --live:           #FF5470;
  --green:          #4ade80;
  --blue:           #60a5fa;
  --text-primary:   #FFFFFF;
  --text-secondary: #D7DBE2;
  /* Bumped from #9098A4 (L≈0.26 → ~5.7:1 on bg-base) to #ACB3BF
     (L≈0.41 → ~8.4:1) so small labels (count badges, eyebrows,
     captions) clear WCAG AAA on dark surfaces. Hierarchy is
     preserved relative to text-secondary. */
  --text-muted:     #ACB3BF;

  --radius-sm:   6px;
  --radius:      8px;
  --radius-card: 12px;
  --transition:  150ms ease;
}

::selection {
  background: rgba(var(--accent-rgb), 0.38);
  color: var(--text-primary);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Focusing the skip-link target shouldn't draw a ring — it's a scroll
   anchor, not an interactive control. */
[id="main"]:focus { outline: none; }

/* Skip-to-content: off-screen until focused, then drops into view as the
   first Tab stop on every page. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -56px;
  z-index: 1000;
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 8px;
  font-size: 14px;
  font-weight: 600;
  transition: top var(--transition);
}
.skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: -2px; }

/* Keyframes */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.6;  }
}

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

@keyframes toast-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes toast-out {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

/* Typography utilities */
.mono { font-family: 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono', monospace; }
.label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.text-muted    { color: var(--text-muted); }
.text-secondary{ color: var(--text-secondary); }
.text-accent   { color: var(--accent-text); }
.text-gold     { color: var(--gold); }
.text-live     { color: var(--live); }

/* Container */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  border: none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  white-space: nowrap;
}
.btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 16px var(--accent-glow);
}
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-ghost:hover:not(:disabled) {
  border-color: var(--accent-text);
  color: var(--text-primary);
}
.btn-danger {
  background: rgba(255,84,112,0.12);
  color: var(--live);
  border: 1px solid rgba(255,84,112,0.25);
}
.btn-danger:hover:not(:disabled) {
  background: rgba(255,84,112,0.2);
}
.btn-full { width: 100%; justify-content: center; }
.btn-sm { padding: 8px 18px; font-size: 15px; }
.btn-xs { padding: 5px 12px; font-size: 13px; }

/* Inputs */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Two fields side by side (e.g. City / State), stacking on narrow screens. */
.field-row {
  display: flex;
  gap: 16px;
}
.field-row .field {
  flex: 1;
  min-width: 0;
}
@media (max-width: 560px) {
  .field-row { flex-direction: column; gap: 0; }
  /* Short paired fields (card expiry + CVC) stay side-by-side even on mobile. */
  .field-row.field-row--inline { flex-direction: row; gap: 12px; }
}
.field label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}
.field input {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 15px;
  color: var(--text-primary);
  font-family: inherit;
  transition: border-color var(--transition);
  outline: none;
}
.field input:focus { border-color: var(--accent-text); }
.field input::placeholder { color: var(--text-muted); }
/* Keep Chrome/Safari autofill on the dark theme instead of its light-blue
   highlight: the inset box-shadow paints over the UA background and the
   long transition defeats the autofill flash. This also removes the illusion
   that autofilled fields are "bigger" than empty ones — they just looked
   heavier from the light fill. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-raised) inset;
  caret-color: var(--text-primary);
  transition: background-color 9999s ease-in-out 0s;
}
/* Stripe split Card Elements (number/expiry/CVC) mount into these. Matched to
   `.field input` so the Stripe-rendered glyphs sit in a native-looking Loungr
   box; Stripe toggles the StripeElement--focus/--invalid classes on the host. */
.field .stripe-field {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  /* The Stripe card iframe's intrinsic height varies by browser, so matching
     padding alone leaves the box shorter than `.field input` in some browsers.
     Pin a minimum box height (border-box) so the card fields never render
     shorter than the inputs. NOTE: do NOT use flexbox here — Stripe mounts an
     iframe in this host and `display:flex` breaks its click/typing layout. */
  padding: 10px 14px;
  min-height: 41px;
}
.field .stripe-field.StripeElement--focus { border-color: var(--accent-text); }
.field .stripe-field.StripeElement--invalid { border-color: var(--live); }
.field .field-error {
  font-size: 14px;
  color: var(--live);
  display: none;
}
.field.has-error input { border-color: var(--live); }
.field.has-error .field-error { display: block; }

/* Cards */
.card {
  background: linear-gradient(180deg, rgba(26, 27, 32, 0.96), rgba(21, 22, 26, 0.96));
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge-active   { background: rgba(var(--accent-rgb), 0.2); color: var(--accent-text); }
.badge-inactive { background: rgba(144,152,164,0.15); color: var(--text-muted); }
.badge-gold     { background: rgba(255,200,87,0.15); color: var(--gold); }
.badge-green    { background: rgba(74,222,128,0.15); color: var(--green); }
.badge-blue     { background: rgba(96,165,250,0.15); color: var(--blue); }
.badge-live     { background: rgba(255,84,112,0.15); color: var(--live); }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--bg-stripe) 25%, var(--bg-focused) 50%, var(--bg-stripe) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius);
}

/* Divider */
.divider {
  border: none;
  border-top: 1px solid var(--border);
}

/* Form error banner */
.form-error {
  font-size: 14px;
  color: var(--live);
  background: rgba(255,84,112,0.1);
  border: 1px solid rgba(255,84,112,0.25);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: 12px;
}

/* Global error banner */
.error-banner {
  background: rgba(255,84,112,0.1);
  border: 1px solid rgba(255,84,112,0.25);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--live);
  font-size: 15px;
  margin-bottom: 24px;
}

/* Success message */
.success-msg {
  font-size: 14px;
  color: #4ade80;
  background: rgba(74,222,128,0.08);
  border: 1px solid rgba(74,222,128,0.2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: 12px;
}

/* Animation on load */
.fade-in { animation: fade-in 200ms ease-out both; }
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  text-decoration: none;
  transition: opacity var(--transition);
}
.brand:hover { opacity: 0.8; }
.brand-mark {
  font-family: 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono', monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.brand-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  position: relative;
  top: -1px;
  box-shadow: 0 0 8px var(--accent-glow);
}
.brand-inline {
  font-family: 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono', monospace;
  font-weight: 600;
  color: var(--text-primary);
}
.field small.text-muted { display: block; margin-top: 4px; font-size: 14px; }

@media (max-width: 768px) {

  .container { padding: 0 20px; }
}

.btn-secondary {
  background: var(--bg-raised);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-secondary:hover:not(:disabled) { border-color: var(--accent-text); }
.btn-danger-ghost { color: var(--live); }
.btn-danger-ghost:hover:not(:disabled) {
  border-color: var(--live);
  background: rgba(255, 84, 112, 0.08);
}