/*
 * Gupy redesign v2 — onboarding (/onboarding/, VRD_Onboarding + the engine
 * template includes/onboarding/template.php, behaviour in assets/js/onboarding.js).
 * Markup and script stay the v1 ones: welcome → movies → TV shows → services →
 * "You're all set" dialog. This sheet re-points the onboarding tokens (--ob-*)
 * at the v2 ones (so light / dark follow the v2 switch) and restyles each step.
 *
 * Scope: body.gupy-v2.vrd-onboarding-page — nothing here reaches v1 (?v2=0).
 * The v1 sheet (assets/css/onboarding.css) is printed inside <body>, after this
 * one: rules here are written more specific than its own.
 */

/* --------------------------------------------------------------------------
   Tokens — set on body AND #body-wrap: the v1 sheet declares its dark values
   on .dark-schema (#body-wrap), which would shadow values inherited from body.
   -------------------------------------------------------------------------- */

body.gupy-v2.vrd-onboarding-page,
body.gupy-v2.vrd-onboarding-page #body-wrap {
  --ob-bg: var(--gv2-bg);
  --ob-surface: var(--gv2-surface);
  --ob-surface-hover: var(--gv2-surface-alt);
  --ob-border: var(--gv2-border);
  --ob-text: var(--gv2-text);
  --ob-text-muted: var(--gv2-text-muted);
  --ob-nav-bg: rgba(var(--gv2-bg-rgb), 0.82);
  --ob-dialog-overlay: rgba(0, 0, 0, 0.7);
  --ob-progress-complete: var(--gv2-success);
  --ob-card-check-color: #fff;
  --ob-primary: var(--vrd-primary);
  --ob-primary-hover: var(--vrd-primary);
  --ob-radius: var(--gv2-radius-lg);
  --ob-radius-sm: var(--gv2-radius-md);
  font-family: var(--gv2-font-body);
}

/* A soft pink glow behind the top of the page. */
body.gupy-v2.vrd-onboarding-page #body-wrap {
  background:
    radial-gradient(1100px 520px at 50% -140px, rgba(219, 53, 117, 0.16), transparent 70%),
    var(--gv2-bg) !important;
}

/* --------------------------------------------------------------------------
   Containers: the v2 grid (same width and gutters as the home and the header)
   -------------------------------------------------------------------------- */

/* The legacy wrappers (.cactus-container: 1220px, 40px + 20px paddings) step
   aside: .vrd_ob_wrap is the container. */
body.gupy-v2.vrd-onboarding-page #cactus-body-container .cactus-container,
body.gupy-v2.vrd-onboarding-page #cactus-body-container :is(.cactus-row, .main-content-col, .main-content-col-body) {
  width: 100%;
  max-width: none;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_wrap,
body.gupy-v2.vrd-onboarding-page .vrd_ob_nav_inner {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--gv2-gutter, 80px);
  box-sizing: border-box;
}
@media (min-width: 1600px) {
  body.gupy-v2.vrd-onboarding-page .vrd_ob_wrap,
  body.gupy-v2.vrd-onboarding-page .vrd_ob_nav_inner {
    max-width: 1920px;
  }
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_wrap {
  padding-bottom: 130px;
}

/* --------------------------------------------------------------------------
   Welcome
   -------------------------------------------------------------------------- */

body.gupy-v2.vrd-onboarding-page .vrd_ob_welcome {
  min-height: calc(100vh - 220px);
  padding: 60px 0;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_welcome_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  margin-bottom: 28px;
  border: 1px solid var(--gv2-border);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(219, 53, 117, 0.28), var(--gv2-surface) 70%);
  box-shadow: 0 20px 60px rgba(219, 53, 117, 0.25);
  font-size: 56px;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_welcome h1 {
  max-width: 900px;
  margin: 0 0 18px;
  font-family: var(--gv2-font-heading);
  font-weight: 800;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--gv2-text);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_welcome p {
  max-width: 620px;
  margin: 0 0 36px;
  color: var(--gv2-text-muted);
  font-size: 18px;
  line-height: 1.6;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_btn.vrd_ob_btn_start {
  padding: 16px 40px;
  font-size: 16px;
  box-shadow: 0 12px 30px rgba(219, 53, 117, 0.35);
}

/* --------------------------------------------------------------------------
   Steps header
   -------------------------------------------------------------------------- */

body.gupy-v2.vrd-onboarding-page .vrd_ob_steps_header {
  padding: 28px 0 8px;
  background: transparent;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_steps {
  gap: 10px;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_step {
  gap: 12px;
  padding: 10px 18px 10px 10px;
  border: 1px solid var(--gv2-border);
  border-radius: 999px;
  background: var(--gv2-surface);
  opacity: 0.6;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_step.is_active {
  opacity: 1;
  border-color: var(--vrd-primary);
  background: rgba(219, 53, 117, 0.12);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_step.is_done {
  opacity: 1;
  border-color: var(--gv2-border);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_step_number {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gv2-surface-alt);
  color: var(--gv2-text-muted);
  font-family: var(--gv2-font-heading);
  font-size: 16px;
  font-weight: 800;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_step.is_active .vrd_ob_step_number {
  background: var(--vrd-primary);
  color: #fff;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_step.is_done .vrd_ob_step_number {
  background: var(--gv2-success);
  color: #fff;
  font-size: 0;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_step.is_done .vrd_ob_step_number::after {
  font-family: "Font Awesome 6 Free"; /* the v1 rule asks for Font Awesome 5 */
  font-size: 14px;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_step_title {
  font-family: var(--gv2-font-heading);
  font-weight: 700;
  font-size: 17px;
  color: var(--gv2-text);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_step_subtitle {
  font-size: 12px;
  color: var(--gv2-text-muted);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_step_divider {
  width: 28px;
  background: var(--gv2-border);
}

/* --------------------------------------------------------------------------
   Step panels: title + poster grid
   -------------------------------------------------------------------------- */

body.gupy-v2.vrd-onboarding-page .vrd_ob_panel_header {
  padding: 18px 0;
  margin-bottom: 16px;
  background: rgba(var(--gv2-bg-rgb), 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_panel_header h1 {
  font-family: var(--gv2-font-heading);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.1;
  color: var(--gv2-text);
}

body.gupy-v2.vrd-onboarding-page .vrd_ob_grid:not(.is_providers) {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 26px 20px;
}
@media (min-width: 1600px) {
  body.gupy-v2.vrd-onboarding-page .vrd_ob_grid:not(.is_providers) {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }
}

body.gupy-v2.vrd-onboarding-page .vrd_ob_card {
  overflow: visible;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_card_poster {
  border: 0;
  border-radius: var(--gv2-radius-md);
  background: var(--gv2-surface-alt);
  box-shadow: 0 0 0 1px var(--gv2-border);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_card:hover .vrd_ob_card_poster {
  box-shadow: 0 0 0 2px rgba(219, 53, 117, 0.6), var(--gv2-shadow);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_card.is_selected .vrd_ob_card_poster {
  box-shadow: 0 0 0 3px var(--vrd-primary), 0 12px 30px rgba(219, 53, 117, 0.3);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_card.is_selected .vrd_ob_card_poster img {
  filter: brightness(0.45) saturate(0.9);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_card_poster img {
  font-size: 0; /* a missing image shows no alt text */
}
/* Check: a pink badge instead of the big white outline icon. */
body.gupy-v2.vrd-onboarding-page .vrd_ob_card_check {
  font-size: 0;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_card_check i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--vrd-primary);
  color: #fff;
  font-size: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  transform: scale(0.6);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_card_check i::before {
  content: "\f00c";
  font-size: 20px;
}
body.gupy-v2.vrd-onboarding-page :is(.vrd_ob_card, .vrd_ob_provider_card).is_selected .vrd_ob_card_check i {
  transform: scale(1);
}
/* Title then year below, as on the v2 poster card (.gv2-poster-card__head):
   the year comes as its own span (vrd_onboarding_card_year_below). */
body.gupy-v2.vrd-onboarding-page .vrd_ob_card_title {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 10px;
  color: var(--gv2-text);
  line-height: 1.3;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_card_title strong {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_card_year {
  display: block;
  margin-top: 2px;
  color: var(--gv2-text-muted);
  font-size: 13px;
  font-weight: 700;
}

/* Services */
body.gupy-v2.vrd-onboarding-page .vrd_ob_grid.is_providers {
  max-width: none; /* v1: 800px, centred — 88 services in a narrow column */
  margin-inline: 0;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_provider_inner {
  border: 1px solid var(--gv2-border);
  border-radius: var(--gv2-radius-lg);
  background: var(--gv2-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_provider_card:hover .vrd_ob_provider_inner {
  border-color: rgba(219, 53, 117, 0.6);
  transform: translateY(-2px);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_provider_card.is_selected .vrd_ob_provider_inner {
  border-color: var(--vrd-primary);
  box-shadow: 0 0 0 2px var(--vrd-primary), 0 10px 26px rgba(219, 53, 117, 0.25);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_provider_inner img {
  border-radius: var(--gv2-radius-md);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_provider_card .vrd_ob_card_check i {
  width: 30px;
  height: 30px;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_provider_card .vrd_ob_card_check i::before {
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   Bottom bar
   -------------------------------------------------------------------------- */

body.gupy-v2.vrd-onboarding-page .vrd_ob_nav {
  border-top: 1px solid var(--gv2-border);
  background: rgba(var(--gv2-bg-rgb), 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_nav_inner {
  padding-block: 14px;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_progress_wrap {
  max-width: 340px;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_progress_bar {
  height: 8px;
  border-radius: 999px;
  background: var(--gv2-surface-alt);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_progress_fill {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vrd-primary), #ff7aa8);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_progress_fill.is_complete {
  background: var(--gv2-success);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_progress_label {
  color: var(--gv2-text-muted);
  font-weight: 700;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_count_current.is_complete {
  color: var(--gv2-success);
}

/* Buttons */
body.gupy-v2.vrd-onboarding-page .vrd_ob_btn {
  padding: 12px 24px;
  border: 1px solid var(--gv2-border);
  border-radius: 5px;
  background: var(--gv2-surface);
  color: var(--gv2-text);
  font-family: var(--gv2-font-body);
  font-weight: 900;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_btn:hover {
  background: var(--gv2-surface-alt);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_btn.is_primary {
  border-color: var(--vrd-primary);
  background: var(--vrd-primary);
  color: #fff;
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_btn.is_primary:hover {
  filter: brightness(1.1);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_btn.is_locked {
  filter: grayscale(0.4);
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Completion dialog
   -------------------------------------------------------------------------- */

body.gupy-v2.vrd-onboarding-page .vrd_ob_dialog_overlay {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_dialog {
  max-width: 460px;
  padding: 44px 40px 36px;
  border: 1px solid var(--gv2-border);
  border-radius: var(--gv2-radius-lg);
  background: var(--gv2-surface);
  box-shadow: var(--gv2-shadow);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_dialog h2 {
  font-family: var(--gv2-font-heading);
  font-weight: 800;
  font-size: 32px;
  color: var(--gv2-text);
}
body.gupy-v2.vrd-onboarding-page .vrd_ob_dialog p {
  color: var(--gv2-text-muted);
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  body.gupy-v2.vrd-onboarding-page .vrd_ob_welcome h1 {
    font-size: 36px;
  }
  body.gupy-v2.vrd-onboarding-page .vrd_ob_welcome p {
    font-size: 16px;
  }
  body.gupy-v2.vrd-onboarding-page .vrd_ob_welcome_icon {
    width: 88px;
    height: 88px;
    font-size: 44px;
  }
  body.gupy-v2.vrd-onboarding-page .vrd_ob_steps_header {
    padding-top: 16px;
  }
  body.gupy-v2.vrd-onboarding-page .vrd_ob_step {
    padding: 6px;
  }
  body.gupy-v2.vrd-onboarding-page .vrd_ob_step.is_active {
    padding-right: 14px;
  }
  body.gupy-v2.vrd-onboarding-page .vrd_ob_panel_header h1 {
    font-size: 24px;
  }
  body.gupy-v2.vrd-onboarding-page .vrd_ob_grid:not(.is_providers) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 12px;
  }
  body.gupy-v2.vrd-onboarding-page .vrd_ob_grid.is_providers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  body.gupy-v2.vrd-onboarding-page .vrd_ob_card_check i {
    width: 36px;
    height: 36px;
  }
  body.gupy-v2.vrd-onboarding-page .vrd_ob_card_check i::before {
    font-size: 16px;
  }
  body.gupy-v2.vrd-onboarding-page .vrd_ob_btn {
    padding: 10px 16px;
  }
}