/* ═══════════════════════════════════════════════════════════════════════════
   Him & Her Videos — Design System v2
   Palette: Deep Purple #2d043b · Bright Pink #F27EFF · Amber Gold #FFBF62
   Bulma 0.9.4 overrides + brand theme
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=optional');
@import url('https://fonts.googleapis.com/css2?family=Codystar:wght@300;400&display=swap');

/* ── Tokens ───────────────────────────────────────────────────────────────── */

:root {
  /* Core palette */
  --purple:        #2d043b;
  --purple-dark:   #190121;
  --purple-mid:    #7b1a96;
  --purple-light:  #f2dcff;
  --purple-faint:  #faf2ff;

  --pink:          #F27EFF;
  --pink-dark:     #c850eb;
  --pink-light:    #fce8ff;

  --amber:         #FFBF62;
  --amber-dark:    #e5a030;
  --amber-light:   #fff5de;

  /* Surfaces — white with a whisper of purple */
  --surface-container-lowest: #ffffff;
  --surface-container-low:    #fdf7ff;
  --surface:                  #faf3ff;
  --surface-container:        #f2e0ff;
  --surface-container-high:   #e8d0ff;
  --surface-container-highest:#ddbfff;

  /* Brand aliases — consumed by Bulma overrides below */
  --primary:           var(--purple);
  --primary-dim:       var(--purple-dark);
  --primary-container: var(--purple-light);
  --on-primary:        #ffffff;

  --secondary:           var(--pink);
  --secondary-dim:       var(--pink-dark);
  --secondary-container: var(--pink-light);
  --on-secondary:        var(--purple);

  /* Content */
  --on-surface:         #190028;
  --on-surface-variant: rgba(25,0,40,0.54);
  --outline-variant:    rgba(25,0,40,0.14);

  /* Backward-compat aliases (inline styles across PHP pages use these) */
  --mint:       var(--pink);
  --plum:       var(--purple);
  --frozen:     #190028;
  --muted:      rgba(25,0,40,0.54);
  --border:     rgba(25,0,40,0.14);
  --btn-primary:var(--purple);
  --surface-2:  var(--surface-container);
  --iron:       var(--surface-container-highest);
  --black:      var(--surface);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

html, body {
  background-color: var(--surface);
  color: var(--on-surface);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[x-cloak] { display: none !important; }

/* ── Typography ───────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.title,
.subtitle {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
}

.title    { color: var(--on-surface)         !important; }
.subtitle { color: var(--on-surface-variant) !important; margin-top: 0.5rem !important; }

.label {
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--on-surface) !important;
}

.heading {
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--on-surface-variant) !important;
}

/* Brand / logo — Codystar display face */
.eyebrow {
  font-family: 'Codystar', sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--purple);
  margin-bottom: 0.5rem;
}

/* ── Links ────────────────────────────────────────────────────────────────── */

a       { color: var(--purple); }
a:hover { color: var(--purple-dark); }

.has-text-primary   { color: var(--purple)             !important; }
.has-text-secondary { color: var(--pink)               !important; }
.has-text-frozen    { color: var(--on-surface)         !important; }
.has-text-muted     { color: var(--on-surface-variant) !important; }

/* ── Layout ───────────────────────────────────────────────────────────────── */

.section { padding: 3rem 1.5rem; }

.page-container { max-width: 720px; }

@media (max-width: 768px) {
  .is-fullwidth-mobile { width: 100%; }
}

.section.is-alt    { background-color: var(--surface-container-low); }
.section.is-deeper { background-color: var(--surface-container); }

hr {
  background-color: var(--outline-variant);
  height: 1px;
  border: none;
  margin: 2rem 0;
}

/* ── Boxes & cards ────────────────────────────────────────────────────────── */

.box, .card {
  background-color: var(--surface-container-lowest);
  border: none;
  border-radius: 2rem;
  color: var(--on-surface);
  box-shadow: 0 4px 32px rgba(45,0,126,0.10);
}
.card-content { color: var(--on-surface); }

.box .box {
  background-color: var(--surface-container-low);
  box-shadow: none;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.button {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  border-radius: 9999px;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  letter-spacing: 0.01em;
}

.button:active:not([disabled]) { transform: scale(0.97); }
.button[disabled], .button.is-loading { opacity: 0.50; }

/* Primary — Deep Purple */
.button.is-primary {
  background-color: var(--purple);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 16px rgba(45,0,126,0.30);
}
.button.is-primary:hover,
.button.is-primary:focus {
  background-color: var(--purple-dark);
  color: #ffffff;
  border: none;
  box-shadow: 0 6px 20px rgba(45,0,126,0.40);
}
.button.is-primary.is-loading::after {
  border-color: transparent transparent #ffffff #ffffff !important;
}
.button.is-primary.is-outlined {
  background-color: transparent;
  border: 2px solid var(--purple);
  color: var(--purple);
}
.button.is-primary.is-outlined:hover {
  background-color: var(--purple-light);
  color: var(--purple-dark);
}

/* Amber — warm CTA accent (pay / confirm actions) */
.button.is-amber {
  background-color: var(--amber);
  color: var(--purple);
  font-weight: 800;
  border: none;
  box-shadow: 0 4px 16px rgba(255,191,98,0.40);
}
.button.is-amber:hover,
.button.is-amber:focus {
  background-color: var(--amber-dark);
  color: var(--purple-dark);
  box-shadow: 0 6px 20px rgba(255,191,98,0.50);
}

/* Ghost */
.button.is-ghost {
  background: transparent;
  color: var(--on-surface-variant);
  box-shadow: none;
  border: none;
}
.button.is-ghost:hover {
  background: var(--surface-container);
  color: var(--on-surface);
}

/* Dark — admin / utility */
.button.is-dark {
  background-color: var(--purple);
  color: #ffffff;
  border: none;
}
.button.is-dark:hover { background-color: var(--purple-dark); color: #ffffff; }

/* Size scale */
.button              { height: 2.875rem; font-size: 0.9375rem; padding: 0 1.5rem;   }
.button.is-small     { height: 2.25rem;  font-size: 0.8125rem; padding: 0 1.1rem;   }
.button.is-medium    { height: 3.375rem; font-size: 1.0625rem; padding: 0 1.875rem; }
.button.is-fullwidth { width: 100%; }

/* has-addons alignment + pill-shape split */
.control .input, .control .button { vertical-align: top; }
.field.has-addons .control .select,
.field.has-addons .control .select select,
.field.has-addons .control .input,
.field.has-addons .control .button { height: 3rem; }

.field.has-addons .control:not(:last-child) .input,
.field.has-addons .control:not(:last-child) .select select,
.field.has-addons .control:not(:last-child) .button {
  border-radius: 1.5rem 0 0 1.5rem !important;
  border-right-color: transparent;
}
.field.has-addons .control:not(:first-child) .input,
.field.has-addons .control:not(:first-child) .select select,
.field.has-addons .control:not(:first-child) .button {
  border-radius: 0 1.5rem 1.5rem 0 !important;
  border-left-color: transparent;
}

/* ── Form inputs ──────────────────────────────────────────────────────────── */

.input, .textarea, .select select {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  background-color: var(--surface-container-lowest);
  border: 1.5px solid var(--outline-variant);
  border-radius: 1.5rem;
  color: var(--on-surface);
  box-shadow: none;
  height: 3rem;
  font-size: 1rem;
  padding: 0 1.25rem;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.textarea {
  height: auto;
  padding: 0.875rem 1.25rem;
}
.input.is-small, .select.is-small select {
  height: 2.375rem;
  font-size: 0.875rem;
  padding: 0 1rem;
}
.input:focus, .textarea:focus, .select select:focus {
  border-color: var(--pink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(242,126,255,0.18);
}
.input::placeholder, .textarea::placeholder {
  color: var(--on-surface-variant);
  font-weight: 400;
}
.input[readonly] {
  background-color: var(--surface-container-low);
  cursor: text;
}
.input:disabled, .select select:disabled, .textarea:disabled {
  background-color: var(--surface-container-high);
  opacity: 0.60;
  cursor: not-allowed;
}
.select::after { border-color: var(--purple) !important; }
.select select { padding-right: 2.5em; }

input[type="radio"],
input[type="checkbox"] { accent-color: var(--purple); }

/* ── Notifications ────────────────────────────────────────────────────────── */

.notification {
  background-color: var(--surface-container-low);
  border: none;
  border-radius: 1.5rem;
  color: var(--on-surface);
  font-family: 'Manrope', sans-serif;
}
.notification.is-success-soft {
  background-color: #e6f4ec;
  color: #155c2e;
}
.notification.is-danger-soft {
  background-color: #fde8e8;
  color: #7f1d1d;
}
.notification.is-info-soft {
  background-color: var(--purple-light);
  color: var(--purple);
}
.notification.is-warning-soft {
  background-color: var(--amber-light);
  color: #7a4800;
}

/* ── Tags ─────────────────────────────────────────────────────────────────── */

.tag {
  font-family: 'Manrope', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 9999px;
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
  border: none;
  padding: 0.2rem 0.75rem;
}
.tag.is-primary { background: var(--purple-light); color: var(--purple);    }
.tag.is-success { background: #d1fae5;             color: #065f46;          }
.tag.is-warning { background: var(--amber-light);  color: #7a4800;          }
.tag.is-danger  { background: #fde8e8;             color: #7f1d1d;          }
.tag.is-link    { background: var(--pink-light);   color: var(--pink-dark); }

/* ── Tables ───────────────────────────────────────────────────────────────── */

.table {
  font-family: 'Manrope', sans-serif;
  background-color: transparent !important;
  color: var(--on-surface);
  border-collapse: collapse;
}
.table th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  border-bottom: 1px solid var(--outline-variant) !important;
  border-top: none !important;
  background: transparent;
}
.table td {
  border-bottom: 1px solid var(--outline-variant);
  border-top: none !important;
  color: var(--on-surface);
  background: transparent;
  vertical-align: middle;
}
.table.is-narrow td,
.table.is-narrow th { padding: 0.4em 0.5em; }
.table.is-hoverable tbody tr:hover td {
  background-color: var(--surface-container-low);
}
.table-container {
  border-radius: 1.5rem;
  overflow: hidden;
  background: var(--surface-container-lowest);
  box-shadow: 0 4px 32px rgba(45,0,126,0.07);
}

/* ── Progress ─────────────────────────────────────────────────────────────── */

.progress { background-color: var(--surface-container-high); border-radius: 9999px; }
.progress.is-primary::-webkit-progress-value { background-color: var(--pink); }
.progress.is-primary::-moz-progress-bar      { background-color: var(--pink); }

/* ── Message ──────────────────────────────────────────────────────────────── */

.message {
  background-color: var(--surface-container-lowest);
  border-radius: 1.5rem;
  border: none;
  box-shadow: 0 4px 32px rgba(45,0,126,0.07);
}
.message .message-body {
  border: none;
  color: var(--on-surface-variant);
  background: transparent;
}
.message .message-header {
  background-color: var(--purple);
  color: #ffffff;
  border-radius: 1.5rem 1.5rem 0 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero.is-brand {
  background: linear-gradient(135deg, var(--purple) 0%, #7b1a96 55%, var(--pink) 100%);
}
.hero.is-brand .title    { color: #ffffff                   !important; }
.hero.is-brand .subtitle { color: rgba(255,255,255,0.82)    !important; margin-top: 0.5rem !important; }

/* ── Radio pills ──────────────────────────────────────────────────────────── */

.radio-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  border: 1.5px solid var(--outline-variant);
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  background: var(--surface-container-lowest);
  color: var(--on-surface-variant);
  user-select: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
/* Hide the native radio — it's still in the DOM for form submission */
.radio-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.radio-pill:hover {
  border-color: var(--purple);
  color: var(--purple);
}
.radio-pill.is-active {
  background-color: var(--purple);
  border-color: var(--purple);
  color: #ffffff;
}

/* ── Misc utilities ───────────────────────────────────────────────────────── */

.is-family-monospace     { font-family: ui-monospace, 'Cascadia Code', monospace !important; }
.columns                 { margin-top: 0; }
.has-background-surface  { background-color: var(--surface)           !important; }
.has-background-surface2 { background-color: var(--surface-container) !important; }