/* ── Him & Her Videos — shared brand theme (Bulma 0.9.4 dark overrides) ── */
:root {
  --plum:    #d68fd6;
  --frozen:  #defff2;
  --iron:    #464f51;
  --black:   #000009;
  --mint:    #0ff4c6;
  --surface:   #1a2325;
  --surface-2: #111a1c;
  --muted:     rgba(222,255,242,0.45);
  --border:    rgba(70,79,81,0.65);
}

/* Base */
html, body        { background-color: var(--black); color: var(--frozen); }
a                 { color: var(--mint); }
a:hover           { color: var(--plum); }
[x-cloak]         { display: none !important; }
.subtitle         { margin-top: 0.5rem !important; }  /* fix Bulma negative margin overlap */

/* Titles */
.title   { color: var(--frozen) !important; }
.subtitle { color: var(--muted) !important; }
.label   { color: var(--frozen) !important; }
.heading { color: var(--muted) !important; letter-spacing: 0.08em; }

/* Eyebrow label (used in heroes) */
.eyebrow { color: var(--plum); font-size: 0.75rem; font-weight: 700;
           letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.5rem; }

/* Hero */
.hero.is-brand { background: linear-gradient(135deg, #0a0f10 0%, #1a2325 100%); }
.hero.is-brand .title    { color: var(--frozen) !important; }
.hero.is-brand .subtitle { color: var(--muted) !important; margin-top: 0.5rem !important; }

/* Buttons — primary (Tropical Mint) */
.button.is-primary { background-color: var(--mint); color: var(--black); border-color: transparent; font-weight: 600; }
.button.is-primary:hover, .button.is-primary:focus { background-color: #0de0b5; color: var(--black); border-color: transparent; }
.button.is-primary.is-outlined { background-color: transparent; border-color: var(--mint); color: var(--mint); }
.button.is-primary.is-outlined:hover { background-color: var(--mint); color: var(--black); }
.button.is-primary.is-light { background-color: rgba(15,244,198,0.12); color: var(--mint); border-color: transparent; }
.button.is-primary.is-light:hover { background-color: rgba(15,244,198,0.2); }

/* Buttons — secondary (Plum) */
.button.is-secondary { background-color: var(--plum); color: var(--black); border-color: transparent; font-weight: 600; }
.button.is-secondary:hover { background-color: #c87dc8; color: var(--black); }

/* Buttons — dark/ghost */
.button.is-dark  { background-color: var(--surface); color: var(--muted); border-color: var(--border); }
.button.is-ghost { color: var(--muted); }
.button.is-ghost:hover { color: var(--frozen); }
.button          { border-radius: 6px; }

/* Form inputs */
.input, .textarea, .select select {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--frozen);
  border-radius: 6px;
}
.input:focus, .textarea:focus, .select select:focus {
  border-color: var(--mint);
  box-shadow: 0 0 0 2px rgba(15,244,198,0.15);
}
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:disabled, .select select:disabled, .textarea:disabled {
  background-color: var(--surface-2); opacity: 0.5; cursor: not-allowed;
}
.select::after { border-color: var(--muted) !important; }

/* Radio buttons — accent colour on checked */
input[type="radio"] { accent-color: var(--mint); }

/* Panels / cards */
.box, .card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--frozen);
  box-shadow: none;
}
.card-content { color: var(--frozen); }

/* Notifications */
.notification { background-color: var(--surface); color: var(--frozen); border-radius: 8px; }
.notification.is-success-soft { background-color: #061a0f; border: 1px solid rgba(15,244,198,0.3); color: #a7f3d0; }
.notification.is-danger-soft  { background-color: #1c0a0a; border: 1px solid rgba(239,68,68,0.35); color: #fca5a5; }
.notification.is-info-soft    { background-color: #06101a; border: 1px solid rgba(15,244,198,0.2); color: var(--muted); }

/* Progress bars */
.progress { background-color: rgba(70,79,81,0.45); border-radius: 9999px; }
.progress.is-primary::-webkit-progress-value,
.progress.is-success::-webkit-progress-value { background-color: var(--mint); }
.progress.is-primary::-moz-progress-bar,
.progress.is-success::-moz-progress-bar     { background-color: var(--mint); }
.progress.is-link::-webkit-progress-value   { background-color: #3b82f6; }
.progress.is-link::-moz-progress-bar        { background-color: #3b82f6; }

/* Tags */
.tag { border-radius: 4px; font-weight: 600; font-size: 0.72rem; }
.tag.is-primary, .tag.is-success { background-color: rgba(15,244,198,0.12); color: var(--mint); }
.tag.is-warning { background-color: rgba(245,158,11,0.12); color: #fcd34d; }
.tag.is-danger  { background-color: rgba(239,68,68,0.12); color: #fca5a5; }
.tag.is-link    { background-color: rgba(59,130,246,0.12); color: #93c5fd; }

/* Message component */
.message { background-color: var(--surface); border-radius: 8px; }
.message .message-body   { border-color: var(--border); color: var(--muted); background-color: transparent; }
.message .message-header { background-color: var(--surface-2); color: var(--plum); border-radius: 8px 8px 0 0; }

/* Step nav divider line */
.step-line { flex-grow: 1; height: 1px; background-color: var(--border); margin: 0 1rem; max-width: 3rem; }

/* Utility overrides */
.has-text-primary   { color: var(--mint)   !important; }
.has-text-secondary { color: var(--plum)   !important; }
.has-text-frozen    { color: var(--frozen) !important; }
.has-text-muted     { color: var(--muted)  !important; }
.has-background-surface  { background-color: var(--surface)   !important; }
.has-background-surface2 { background-color: var(--surface-2) !important; }
.border-surface { border: 1px solid var(--border) !important; }

/* Divider */
hr { background-color: var(--border); height: 1px; }

/* Section padding tweak */
.section { padding: 2rem 1.5rem; }
