/* =============================================
   FanShotAI — Design System v3
   Responsive Web-App · Lexend · FA Kit
   ============================================= */

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

:root {
  --bg-deep:        #07081A;
  --bg-card:        #0D0F2A;
  --bg-surface:     #4367ff;   /* dark purple bg for item #131530 o #22247a */
  --bg-surface2:    #1A1D3E;
  --bg-purple-dark: #1C1650;   /* dark purple bg for links/buttons */
  --border:         rgba(255,255,255,0.07);
  --border-active:  rgba(109,91,255,0.7);

  --accent-purple:  #6D5BFF;
  --accent-purple-light: #B8AAFF;
  --accent-blue:    #3B82F6;
  --accent-cyan:    #22D3EE;
  --accent-green:   #4ADE80;   /* payment selection green */
  --accent-green-light: #86EFAC;
  --accent-orange:  #F97316;
  --accent-yellow:  #FBBF24;

  --gradient-main:  linear-gradient(135deg, #6D5BFF 0%, #3B82F6 100%);
  --gradient-green: linear-gradient(135deg, #4ADE80 0%, #22D3EE 100%); /* pay CTA */
  --gradient-glow:  linear-gradient(135deg, rgba(109,91,255,0.22), rgba(59,130,246,0.22));

  --text-primary:   #FFFFFF;
  --text-secondary: #A0A8C8;
  --text-muted:     #5A6080;
  --text-option:    #B8AAFF;

  --font-body: 'Lexend', sans-serif; /* [FIX#9] Lexend replaces Rajdhani+Nunito */

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* [FIX#1] Glow border 2px only */
  --glow-btn:      0 0 18px rgba(109,91,255,0.5), 0 0 36px rgba(59,130,246,0.25);
  --glow-selected: 0 0 0 1px var(--accent-purple), 0 0 12px rgba(109,91,255,0.35);
  --glow-green:    0 0 0 2px var(--accent-green),  0 0 12px rgba(74,222,128,0.4);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--text-primary);
  min-height: 100%;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; top: -30%; left: 50%; transform: translateX(-50%);
  width: 800px; height: 600px;
  background: radial-gradient(ellipse, rgba(109,91,255,0.1) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

/* ─────────────────────────────────────────────
   APP SHELL & LAYOUT
   Breakpoints:
   Mobile  < 640px   : single col, compact
   Tablet  640–1023  : wider cards, larger type
   Desktop ≥ 1024px  : centered max-w container
   ───────────────────────────────────────────── */
.app-shell { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; }

/* ── Top Bar ── */
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: rgba(13,15,42,0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 200;
}
.menu-icon {
  font-size: 18px; cursor: pointer;
  /* [FIX] Purple background with white icon */
  background: var(--accent-purple);
  color: #fff;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: none;
  transition: all 0.2s;
  box-shadow: 0 0 10px rgba(109,91,255,0.4);
  line-height: 1;
}
.menu-icon:hover {
  background: #7c6bff;
  box-shadow: 0 0 16px rgba(109,91,255,0.6);
}
.logo { font-family: var(--font-body); font-size: 22px; font-weight: 700; background: var(--gradient-main); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
@media (min-width: 640px) { .logo { font-size: 26px; } .top-bar { padding: 16px 32px; } }
@media (min-width: 1024px) { .top-bar { padding: 18px 48px; } }

/* [FIX#12] Lang switcher replaces bell */
.lang-btn {
  display: flex; align-items: center; gap: 5px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 12px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer; transition: all 0.2s;
}
.lang-btn:hover { border-color: var(--accent-purple); color: #fff; }

/* ── Progress Dots ── */
.progress-dots { display: flex; justify-content: center; gap: 5px; padding: 12px 0 4px; }
.progress-dots .dot { width: 6px; height: 6px; border-radius: 3px; background: var(--bg-surface2); transition: all 0.35s var(--ease); }
.progress-dots .dot.active { width: 22px; background: var(--gradient-main); box-shadow: 0 0 8px rgba(109,91,255,0.55); }
.progress-dots .dot.done { background: var(--accent-purple); opacity: 0.45; }

/* ── Screen Container ── */
.screen-container { flex: 1; display: flex; justify-content: center; padding: 15px 16px 100px; }
.screen { display: none; flex-direction: column; width: 100%; max-width: 480px; }
.screen.active { display: flex; animation: slideUp 0.32s var(--ease) both; }
@media (min-width: 640px) { .screen { max-width: 560px; } .screen-container { padding: 15px 24px 110px; } }
@media (min-width: 1024px) { .screen { max-width: 640px; } .screen-container { padding: 15px 40px 110px; } }
@keyframes slideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }

/* ── Headings ── */
.screen-title { font-family: var(--font-body); font-size: 24px; font-weight: 700; text-align: center; color: #fff !important; -webkit-text-fill-color: #fff; line-height: 1.2; margin-bottom: 6px; }
.screen-subtitle { font-size: 14px; color: var(--text-secondary); text-align: center; line-height: 1.55; margin-bottom: 20px; }
@media (min-width: 640px) { .screen-title { font-size: 30px; } }

/* ─────────────────────────────────────────────
   ACTION BAR (Fixed Footer)
   ───────────────────────────────────────────── */
.action-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
  background: linear-gradient(to top, var(--bg-deep) 70%, transparent);
  padding: 10px 16px 24px; display: none; flex-direction: column; align-items: center; gap: 8px;
}
.action-bar.visible { display: flex; }
.action-row { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 480px; }
@media (min-width: 640px) { .action-row { max-width: 560px; } }
@media (min-width: 1024px) { .action-row { max-width: 640px; } }

/* ── Buttons ── */
.btn-primary {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 24px; background: var(--gradient-main); color: #fff;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  border: none; border-radius: var(--radius-lg); cursor: pointer;
  transition: all 0.22s var(--ease); min-height: 52px;
  box-shadow: var(--glow-btn);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 24px rgba(109,91,255,0.7), 0 0 48px rgba(59,130,246,0.35); }
.btn-primary:active { transform: scale(0.97); }

/* [FIX#4] Green gradient for pay CTA */
.btn-pay-green {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 24px; background: var(--gradient-green); color: #07081A;
  font-family: var(--font-body); font-size: 15px; font-weight: 700;
  border: none; border-radius: var(--radius-lg); cursor: pointer;
  transition: all 0.22s var(--ease); min-height: 52px;
  box-shadow: 0 0 18px rgba(74,222,128,0.45), 0 0 36px rgba(34,211,238,0.2);
}
.btn-pay-green:hover { transform: translateY(-2px); box-shadow: 0 0 28px rgba(74,222,128,0.65), 0 0 56px rgba(34,211,238,0.3); }
.btn-pay-green:active { transform: scale(0.97); }

/* [FIX#5] Back button — cyan icon */
.btn-back {
  width: 52px; height: 52px; min-width: 52px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34,211,238,0.08); border: 1.5px solid rgba(34,211,238,0.35);
  border-radius: var(--radius-lg); color: var(--accent-cyan);
  font-size: 18px; cursor: pointer; transition: all 0.2s var(--ease); flex-shrink: 0;
}
.btn-back:hover { background: rgba(34,211,238,0.18); border-color: var(--accent-cyan); box-shadow: 0 0 14px rgba(34,211,238,0.4); }

/* [FIX#3] Underline links → dark purple button */
.btn-link {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-purple-dark); border: 1px solid rgba(109,91,255,0.3);
  border-radius: var(--radius-md); padding: 10px 18px;
  color: var(--accent-purple-light); font-family: var(--font-body);
  font-size: 13px; font-weight: 500; cursor: pointer;
  text-decoration: none; transition: all 0.2s;
}
.btn-link:hover { border-color: var(--accent-purple); color: #fff; background: rgba(109,91,255,0.15); }

.btn-secondary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px; background: transparent;
  color: var(--text-secondary); font-family: var(--font-body); font-size: 14px; font-weight: 600;
  border: 1.5px solid var(--border); border-radius: var(--radius-lg); cursor: pointer;
  transition: all 0.2s var(--ease); min-height: 50px;
}
.btn-secondary:hover { border-color: var(--accent-purple); color: #fff; }

/* ── Toast ── */
#toast {
  position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%);
  z-index: 9999; font-family: var(--font-body); font-size: 13px; font-weight: 600;
  white-space: nowrap; border-radius: 24px; padding: 11px 22px;
  pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: var(--accent-orange); color: #fff;
  box-shadow: 0 4px 20px rgba(249,115,22,0.5);
}
#toast.visible { opacity: 1; }

/* ── Bottom Nav ── */
.bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 149;
  padding: 10px 0 20px; border-top: 1px solid var(--border);
  background: rgba(13,15,42,0.96); backdrop-filter: blur(14px);
}
.bottom-nav.visible { display: flex; justify-content: center; }
.bottom-nav ul { list-style: none; display: flex; width: 100%; max-width: 480px; }
.bottom-nav ul li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 6px; transition: all 0.2s; }
.bottom-nav ul li .nav-icon { font-size: 20px; color: var(--text-muted); transition: color 0.2s; }
.bottom-nav ul li .nav-label { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.bottom-nav ul li.active .nav-label { color: var(--accent-purple); }
.bottom-nav ul li.active .nav-icon { color: var(--accent-purple); filter: drop-shadow(0 0 5px var(--accent-purple)); }

/* Utilities */
.spacer { flex: 1; min-height: 12px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; }
.text-center { text-align: center; } .text-muted { color: var(--text-muted); font-size: 12px; }

/* ─────────────────────────────────────────────
   SLIDE-IN MENU (Hamburger)  [FIX#7]
   ───────────────────────────────────────────── */
.menu-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.menu-overlay.open { opacity: 1; pointer-events: all; }

.slide-menu {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 301;
  width: min(300px, 85vw);
  background: var(--bg-card);
  border-right: 1px solid rgba(109,91,255,0.2);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform 0.32s var(--ease);
  overflow-y: auto;
}
.slide-menu.open { transform: translateX(0); }

.slide-menu-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
}
.slide-menu-header .logo { font-size: 20px; }
.btn-menu-close { background: none; border: none; color: var(--text-secondary); font-size: 20px; cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: all 0.2s; }
.btn-menu-close:hover { color: #fff; background: var(--bg-surface); }

.menu-user-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.menu-user-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gradient-main); display: flex; align-items: center; justify-content: center;
  font-size: 18px; box-shadow: 0 0 10px rgba(109,91,255,0.4);
}
.menu-user-info .mu-name { font-size: 14px; font-weight: 600; color: #fff; }
.menu-user-info .mu-plan { font-size: 11px; color: var(--text-option); }

.menu-nav { flex: 1; padding: 10px 0; }
.menu-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--text-secondary);
  transition: all 0.18s; border-left: 3px solid transparent;
}
.menu-nav-item:hover { color: #fff; background: var(--bg-surface); border-left-color: var(--accent-purple); }
.menu-nav-item i { width: 20px; text-align: center; font-size: 16px; color: var(--accent-purple-light); }
.menu-nav-item.danger { color: #f87171; }
.menu-nav-item.danger i { color: #f87171; }
.menu-nav-item.danger:hover { background: rgba(248,113,113,0.08); border-left-color: #f87171; }
.menu-nav-divider { height: 1px; background: var(--border); margin: 6px 20px; }

/* ─────────────────────────────────────────────
   INNER PAGES (from slide menu)  [FIX#7]
   ───────────────────────────────────────────── */
.inner-page {
  display: none; position: fixed; inset: 0; z-index: 250;
  background: var(--bg-deep); overflow-y: auto; flex-direction: column;
}
.inner-page.open { display: flex; animation: slideUp 0.3s var(--ease) both; }

.inner-page-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; background: rgba(13,15,42,0.9);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.inner-page-header h2 { font-size: 18px; font-weight: 700; color: #fff; }
.btn-page-back { background: none; border: none; color: var(--accent-cyan); font-size: 20px; cursor: pointer; padding: 4px 8px; }

.inner-page-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; max-width: 640px; margin: 0 auto; width: 100%; }

/* Creaciones Dashboard */
.creations-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 640px) { .creations-grid { grid-template-columns: repeat(3, 1fr); } }
.creation-thumb {
  background: linear-gradient(160deg, #1a1040, #0a1535);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; position: relative; aspect-ratio: 3/4;
  display: flex; flex-direction: column; justify-content: flex-end;
  cursor: pointer; transition: all 0.2s;
}
.creation-thumb:hover { border-color: var(--accent-purple); box-shadow: var(--glow-selected); }
.creation-thumb-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 48px; opacity: 0.4; }
.creation-thumb-info { position: relative; background: rgba(0,0,0,0.6); padding: 8px; }
.creation-thumb-info .ct-date { font-size: 10px; color: var(--text-muted); }
.creation-thumb-info .ct-pkg { font-size: 11px; font-weight: 600; color: var(--text-option); }
.creation-thumb-actions { display: flex; gap: 6px; margin-top: 4px; }
.ct-action { flex: 1; background: rgba(109,91,255,0.2); border: none; border-radius: 8px; padding: 5px; font-size: 11px; color: var(--accent-purple-light); cursor: pointer; font-family: var(--font-body); transition: all 0.2s; }
.ct-action:hover { background: rgba(109,91,255,0.4); color: #fff; }

.dashboard-section { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; }
.dashboard-section h3 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.payment-history-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.payment-history-row:last-child { border-bottom: none; }
.phr-left .phr-pkg { font-size: 13px; font-weight: 600; color: #fff; }
.phr-left .phr-date { font-size: 11px; color: var(--text-muted); }
.phr-price { font-size: 14px; font-weight: 700; color: var(--accent-green); }

/* Profile page */
.profile-section { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; }
.profile-section h3 { font-size: 13px; font-weight: 700; color: var(--text-option); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 14px; }
.profile-field { margin-bottom: 14px; }
.profile-field label { display: block; font-size: 11px; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.profile-field input {
  width: 100%; background: var(--bg-surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px; color: #fff;
  font-family: var(--font-body); font-size: 14px; outline: none; transition: border-color 0.2s;
}
.profile-field input:focus { border-color: var(--accent-purple); box-shadow: 0 0 0 3px rgba(109,91,255,0.15); }
.profile-avatar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--gradient-main); display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: var(--glow-btn); }
.btn-change-avatar { background: var(--bg-purple-dark); border: 1px solid rgba(109,91,255,0.3); border-radius: var(--radius-sm); padding: 8px 14px; color: var(--accent-purple-light); font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font-body); transition: all 0.2s; }
.btn-save { width: 100%; background: var(--gradient-main); border: none; border-radius: var(--radius-md); padding: 14px; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--font-body); box-shadow: var(--glow-btn); transition: all 0.2s; margin-top: 6px; }
.btn-save:hover { transform: translateY(-1px); }

/* Payment methods page */
.method-card { display: flex; align-items: center; gap: 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; }
.method-logo { background: #fff; border-radius: 6px; padding: 4px 8px; display: flex; align-items: center; }
.method-logo img { height: 20px; width: auto; }
.method-info { flex: 1; }
.method-info .mi-label { font-size: 13px; font-weight: 600; color: #fff; }
.method-info .mi-sub { font-size: 11px; color: var(--text-muted); }
.btn-method-del { background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); border-radius: var(--radius-sm); padding: 6px 12px; color: #f87171; font-size: 12px; cursor: pointer; font-family: var(--font-body); transition: all 0.2s; }
.btn-method-del:hover { background: rgba(248,113,113,0.2); }
.btn-add-method { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--bg-surface); border: 1.5px dashed rgba(109,91,255,0.4); border-radius: var(--radius-md); padding: 14px; color: var(--accent-purple-light); font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--font-body); transition: all 0.2s; }
.btn-add-method:hover { border-color: var(--accent-purple); color: #fff; background: rgba(109,91,255,0.08); }

/* History page */
.history-row { display: flex; align-items: center; justify-content: space-between; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; }
.hr-left .hr-pkg { font-size: 14px; font-weight: 700; color: #fff; }
.hr-left .hr-date { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.hr-left .hr-imgs { font-size: 11px; color: var(--text-option); margin-top: 2px; }
.hr-price { font-size: 16px; font-weight: 700; color: var(--accent-green); }
.hr-badge { font-size: 10px; background: rgba(74,222,128,0.15); color: var(--accent-green); border-radius: 20px; padding: 2px 8px; font-weight: 700; }

/* Terms / Privacy */
.legal-text { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
.legal-text h3 { font-size: 15px; font-weight: 700; color: #fff; margin: 16px 0 6px; }
.legal-text h3:first-child { margin-top: 0; }

/* ─────────────────────────────────────────────
   SCREEN 1 — Bienvenida
   ───────────────────────────────────────────── */
/* ══════════════════════════════════════════════════
   HERO PREVIEW — Card Swiper
   Responsive approach: sizes driven by --card-size
   custom property, set per breakpoint on the wrapper.
   All card dimensions derive from it → no overflow.
   ══════════════════════════════════════════════════ */

/* 1. The outer container
   Responsive height that fits the card fan on every screen */
.s1-hero-preview {
  width: 100%;
  /* Height scales with viewport: tall enough for the fan, not too tall on small screens */
  height: clamp(240px, 52vw, 400px);
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, #1a1040, #0a1535, #0d2050);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}

/* 2. The inner wrapper — needs relative so the absolute card-groups
   can be positioned relative to it, not the viewport */
.s1-hero-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* 3. card-swiper wrapper — holds the card-groups and centres them
   Using a CSS custom property --card-size to scale everything */
.card-swiper {
  --card-size: clamp(100px, 24vw, 160px); /* base big-card width; clamps for all screens */
  position: relative;
  width: 100%;
  /* Height = card aspect-ratio (3:4) + room for the fan spread */
  height: calc(var(--card-size) * 1.6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Mobile override — slightly larger relative to a narrow screen */
@media (max-width: 480px) {
  .card-swiper {
    --card-size: clamp(90px, 28vw, 130px);
  }
  .s1-hero-preview {
    height: clamp(220px, 75vw, 300px);
  }
  .s1-hero-badge { position: absolute; top: 10px; left: 25%; background: rgba(0,0,0,0.65); backdrop-filter: blur(8px); border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 600; color: #fff; border: 1px solid rgba(255,255,255,0.1); }
}

/* Tablet / desktop */
@media (min-width: 640px) {
  .card-swiper {
    --card-size: clamp(130px, 20vw, 180px);
  }
  .s1-hero-badge { position: absolute; top: 10px; left: 37%; background: rgba(0,0,0,0.65); backdrop-filter: blur(8px); border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 600; color: #fff; border: 1px solid rgba(255,255,255,0.1); }
}

/* 4. card-groups container — absolutely fills the swiper wrapper */
.card-groups {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

/* 5. card-group — centred in the wrapper via top/left + translate */
.card-group {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--card-size);
  height: calc(var(--card-size) * 4 / 3);  /* explicit height = width × 4/3 portrait ratio */
  transition: transform 400ms ease;
}

/* aspect-ratio removed — big-card uses explicit height via calc() */
/* .card base keeps no aspect-ratio; height is set per card type */

/* 6. Statuses — keep the translate(-50%,-50%) base in all states
   so the origin is always the swiper centre */
.card-group[data-status="unknown"] {
  transform: translate(-50%, -50%) scale(0);
  transition: none;
}

.card-group[data-status="active"] {
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 300ms;
}

.card-group[data-status="after"] {
  transform: translate(calc(-50% + 50%), -50%) scale(0);
}

.card-group[data-status="before"] {
  transform: translate(calc(-50% - 50%), -50%) scale(0);
}

.card-group[data-status="becoming-active-from-after"] {
  transform: translate(calc(-50% + 50%), -50%) scale(0);
  transition: none;
}

.card-group[data-status="becoming-active-from-before"] {
  transform: translate(calc(-50% - 50%), -50%) scale(0);
  transition: none;
}

/* 7. Individual cards — positioned relative to the card-group.
   KEY FIX: position:absolute ignores aspect-ratio unless BOTH axes are constrained.
   We set width + height explicitly so background-size:cover has a real area to fill. */
.card {
  background-color: rgba(255, 255, 255, 0.08);
  position: absolute;
  transition: transform 800ms cubic-bezier(.05,.43,.25,.95);
  background-position: center center;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* big-card: full width of card-group, height = width × (4/3) for portrait 3:4 ratio */
.big-card {
  width: 90%;
  height: calc(var(--card-size) * 4 / 3);
  /* clip-path inset round clips all 4 corners independently of the parent container,
     so even cards translated/rotated outside their parent still get rounded corners */
  border-radius: clamp(6px, 1.5vw, 12px);
  clip-path: inset(0 round clamp(6px, 1.5vw, 12px));
  z-index: 1;    /* above little-card z-index:-1, below little-card z-index:10 */
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

/* little-card: 60% wide, same 3:4 ratio → height = (0.6 × card-size) × 4/3 */
.little-card {
  width: 60%;
  height: calc(var(--card-size) * 0.6 * 4 / 3);
  border-radius: clamp(6px, 1.5vw, 12px);
  clip-path: inset(0 round clamp(6px, 1.5vw, 12px));
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

/* 8. Fan of big cards — only background-image here */
.big-card:nth-child(2) {
  background-image: url("../assets/promo-2.jpg");
  transform: translateX(-110%) translateY(10%) rotate(-20deg);
}

.big-card:nth-child(4) {
  background-image: url("../assets/promo-1.jpg");
  transform: translateX(-35%)  rotate(-10deg);
}

.big-card:nth-child(6) {
  background-image: url("../assets/promo-3.jpg");
  transform: translateX(40%)  rotate(5deg);
}

.big-card:nth-child(8) {
  background-image: url("../assets/promo-4.jpg");
  transform: translateX(110%) translateY(15%) rotate(20deg);
}

/* Group-specific overrides */
.card-group[data-index="1"] > .big-card:nth-child(6) {
  background-image: url("../assets/promo-4.jpg");
}

.card-group[data-index="1"] > .big-card:nth-child(8) {
  background-image: url("../assets/promo-3.jpg");
}

.card-group[data-index="2"] > .big-card:nth-child(4) {
  background-image: url("../assets/promo-1.jpg");
}

.card-group[data-index="2"] > .big-card:nth-child(8) {
  background-image: url("../assets/promo-2.jpg");
}

/* Little card images + z-index stacking
   nth-child(1) and (3) → in front of big-cards  → z-index: 10
   nth-child(5) and (7) → BEHIND big-cards        → z-index: -1  */
.little-card:nth-child(1) {
  background-image: url("../assets/promo-5.jpg");
  z-index: -1;   /* in front */
}
.little-card:nth-child(3) {
  background-image: url("../assets/promo-6.jpg");
  z-index: -1;   /* in front */
}
.little-card:nth-child(5) {
  background-image: url("../assets/promo-7.jpg");
  z-index: -1;   /* behind big-cards */
}
.little-card:nth-child(7) {
  background-image: url("../assets/promo-8.jpg");
  z-index: -1;   /* behind big-cards */
}

/* 9. Hover fan-out — touch-friendly, uses % so it scales with card size */
.card-group:hover > .card {
  box-shadow: -6px 8px 18px rgba(0, 0, 0, 0.45);
}

.card-group:hover > .big-card:nth-child(2) {
  transform: translate(-75%, 16%) rotate(-24deg);
}

.card-group:hover > .big-card:nth-child(4) {
  transform: translate(-25%, 8%) rotate(-8deg);
}

.card-group:hover > .big-card:nth-child(6) {
  transform: translate(25%, 8%) rotate(8deg);
}

.card-group:hover > .big-card:nth-child(8) {
  transform: translate(75%, 16%) rotate(24deg);
}

.card-group:hover > .little-card:nth-child(1) {
  transform: translate(180%, -120%) rotate(-15deg);
}

.card-group:hover > .little-card:nth-child(3) {
  transform: translate(160%, 80%) rotate(15deg);
}

.card-group:hover > .little-card:nth-child(5) {
  transform: translate(-270%, -120%) rotate(15deg);
}

.card-group:hover > .little-card:nth-child(7) {
  transform: translate(-260%, 70%) rotate(-15deg);
}

/* 10. Swiper nav buttons — scale with card size */
.card-swiper-buttons {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.card-swiper-buttons > button {
  font-size: 14px;
  border: 1.5px solid rgba(200, 200, 200, 0.6);
  border-radius: 50%;
  color: white;
  background-color: transparent;
  height: 36px;
  width: 36px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s;
}

.card-swiper-buttons > button:hover {
  background: rgba(109, 91, 255, 0.3);
  border-color: var(--accent-purple);
}

/* 11. Text below the swiper — always below, never overlapping */
.s1-hero-inner .hi-text {
  margin-top: 12px;
  font-size: clamp(18px, 5vw, 22px);
  font-weight: 700;
  color: #fff;
  text-align: center;
}

.s1-hero-inner .hi-sub {
  font-size: clamp(11px, 3vw, 13px);
  color: var(--text-secondary);
  margin-top: 15px;
  text-align: center;
}





.s1-hero-preview::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 80%, rgba(109,91,255,0.3), transparent 70%); pointer-events:none; }

.s1-steps { display: flex; background: var(--bg-surface); border-radius: var(--radius-md); padding: 14px 10px; border: 1px solid var(--border); margin-bottom: 16px; gap: 0; }
.step-pill { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; position: relative; }
.step-pill:not(:last-child)::after { content: ''; position: absolute; right: -4px; top: 8px; }
.step-pill .sp-num { width: 28px; height: 28px; border-radius: 50%; background: var(--gradient-main); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; box-shadow: 0 0 8px rgba(109,91,255,0.4); }
.step-pill .sp-caret { color: var(--text-muted); font-size: 13px; position: absolute; right: -8px; top: 7px; }
.step-pill .sp-text { font-size: 10px; color: var(--text-secondary); text-align: center; font-weight: 500; }

.s1-trust { display: flex; justify-content: center; gap: 18px; margin-bottom: 30px; flex-wrap: wrap; }
.trust-item { 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	padding:0px 20px;
	gap: 5px; 
}
.trust-item .ti-icon { font-size: 22px; color: var(--accent-yellow); }
.trust-item .ti-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-align: center; }

.s1-legal { font-size: 11px; color: var(--text-muted); text-align: center; margin-bottom: 16px; line-height: 1.5; }
.s1-legal a { color: var(--accent-purple); text-decoration: none; }

.responsive {
	width:100%;
	height:100%;
}

/* ─────────────────────────────────────────────
   SCREEN 2 — Tipo de Fan
   ───────────────────────────────────────────── */
.fan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
@media (min-width: 1024px) { .fan-grid { grid-template-columns: repeat(4, 1fr); } }
.fan-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 20px 12px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  cursor: pointer; transition: all 0.22s var(--ease); position: relative; overflow: hidden;
}
.fan-card::before { content:''; position:absolute; inset:0; background: var(--gradient-glow); opacity:0; transition:opacity 0.22s; }
.fan-card:hover { border-color: var(--accent-purple); transform: translateY(-2px); box-shadow: var(--glow-selected); }
.fan-card:hover::before { opacity: 1; }
.fan-card.selected { border-color: var(--accent-purple); background: rgba(69,56,171,0.4); box-shadow: var(--glow-selected); }
.fan-card.selected::before { opacity: 1; }
.fan-card .check { position:absolute; top:8px; right:8px; width:20px; height:20px; background:var(--accent-purple); border-radius:50%; display:none; align-items:center; justify-content:center; font-size:11px; box-shadow: 0 0 8px rgba(109,91,255,0.6); }
.fan-card.selected .check { display: flex; }
.fan-avatar { width: 70px; height: 70px; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; font-size: 48px; }
.fan-name { font-size: 15px; font-weight: 700; color: #fff; }
.fan-desc { font-size: 11px; color: var(--text-option); text-align: center; line-height: 1.4; }

/* ─────────────────────────────────────────────
   SCREEN 3 — Pasión / Equipo favorito
   ───────────────────────────────────────────── */

/* Pasión (deporte/actividad) — custom dropdown con icono */
.passion-select-wrap { position: relative; }
.passion-label { display:block; font-size:12px; font-weight:600; color: var(--text-secondary); margin-bottom:8px; text-transform: uppercase; letter-spacing: .03em; }
.custom-select { position: relative; }
.custom-select-trigger {
  width: 100%; display:flex; align-items:center; gap:10px;
  background: var(--bg-surface); border: 2px solid var(--border);
  border-radius: var(--radius-md); padding: 13px 16px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; color: #fff;
  cursor: pointer; transition: all 0.2s var(--ease);
}
.custom-select-trigger:hover { border-color: var(--accent-purple); box-shadow: var(--glow-selected); }
.custom-select.open .custom-select-trigger { border-color: var(--accent-purple); box-shadow: var(--glow-selected); }
.cst-icon { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background: var(--gradient-main); color:#fff; font-size:14px; flex-shrink:0; }
.cst-label { flex:1; text-align:left; }
.cst-chevron { font-size:12px; color: var(--text-muted); transition: transform 0.22s var(--ease); }
.custom-select.open .cst-chevron { transform: rotate(180deg); color: var(--accent-purple); }

.custom-select-options {
  list-style:none; position:absolute; left:0; right:0; top: calc(100% + 8px); z-index: 40;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4), var(--glow-selected);
  padding: 6px; max-height: 0; overflow: hidden; opacity: 0;
  transform: translateY(-6px); pointer-events: none;
  transition: all 0.22s var(--ease);
}
.custom-select.open .custom-select-options { max-height: 320px; opacity: 1; transform: translateY(0); pointer-events: auto; overflow-y: auto; }
.cso-option { display:flex; align-items:center; gap:10px; padding: 11px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all 0.15s; }
.cso-option i { width: 18px; text-align:center; color: var(--accent-purple-light); }
.cso-option:hover { background: rgba(109,91,255,0.12); color: #fff; }
.cso-option.selected { background: rgba(109,91,255,0.18); color: #fff; }
.cso-option.selected i { color: var(--accent-purple-light); }

/* Sección "Selecciona tu equipo favorito" */
.team-section-head { margin-bottom: 12px; }
.team-section-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.team-section-subtitle { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }

.search-box { display: flex; align-items: center; gap: 10px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 16px; margin-bottom: 14px; transition: all 0.2s; }
.search-box:focus-within { border-color: var(--accent-purple); box-shadow: 0 0 10px rgba(109,91,255,0.25); }
.search-box input { flex:1; background:none; border:none; outline:none; font-family:var(--font-body); font-size:14px; color:#fff; }
.search-box input::placeholder { color: var(--text-muted); }
.search-box input:disabled { opacity: 0.4; cursor: not-allowed; }

.country-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
@media (min-width: 640px) { .country-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .country-grid { grid-template-columns: repeat(6, 1fr); } }

/* Grid escroleable fijo a 3–4 filas visibles, resto con scroll */
.team-grid-scroll { max-height: 372px; overflow-y: auto; overflow-x: hidden; padding-right: 2px; scrollbar-width: thin; scrollbar-color: var(--accent-purple) transparent; }
.team-grid-scroll::-webkit-scrollbar { width: 6px; }
.team-grid-scroll::-webkit-scrollbar-thumb { background: var(--accent-purple); border-radius: 4px; }
.team-grid-scroll.team-grid-empty { max-height: none; overflow: visible; display: block; }

.country-card {
  background: var(--bg-surface); border: 2px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; transition: all 0.2s var(--ease);
}
.country-card:hover { border-color: var(--accent-purple); transform: translateY(-2px); box-shadow: var(--glow-selected); }
.country-card.selected { border-color: var(--accent-purple); background: rgba(109,91,255,0.1); box-shadow: var(--glow-selected); }

/* [FIX#10] Flag images: square, no wave */
.country-flag-img { width: 44px; height: 30px; object-fit: cover; border-radius: 4px; display: block; }
.country-name { font-size: 11px; font-weight: 600; text-align: center; color: var(--text-option); }

/* Estado "próximamente" para deportes sin catálogo aún */
.team-coming-soon { text-align:center; padding: 30px 16px; background: var(--bg-surface); border: 1px dashed var(--border); border-radius: var(--radius-md); }
.tcs-icon { width:56px; height:56px; border-radius:50%; background: var(--gradient-main); display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; margin: 0 auto 12px; box-shadow: var(--glow-btn); }
.tcs-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.tcs-text { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; max-width: 320px; margin: 0 auto 14px; }

.no-team-link { text-align: center; margin-bottom: 14px; }

/* ─────────────────────────────────────────────
   SCREEN 4 — Escenarios  [FIX#2] Tab slide anim
   ───────────────────────────────────────────── */
.tabs-row { display:flex; gap:4px; background:var(--bg-surface); border-radius:var(--radius-md); padding:4px; margin-bottom:14px; border:1px solid var(--border); }
.tab-btn { flex:1; padding:9px 6px; border:none; background:none; color:var(--text-secondary); font-family:var(--font-body); font-size:12px; font-weight:600; border-radius:10px; cursor:pointer; transition:all 0.2s; }
.tab-btn.active { background:var(--gradient-main); color:#fff; box-shadow:0 0 10px rgba(109,91,255,0.4); }

/* Tab panels with slide animation */
.tab-panels { position: relative; overflow: hidden; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: tabSlideIn 0.32s var(--ease) both; padding:10px; }
.tab-panel.exit-left { animation: tabSlideOutLeft 0.28s var(--ease) both; }
.tab-panel.enter-right { animation: tabSlideInRight 0.32s var(--ease) both; }
.tab-panel.exit-right { animation: tabSlideOutRight 0.28s var(--ease) both; }
.tab-panel.enter-left  { animation: tabSlideInLeft  0.32s var(--ease) both; }

@keyframes tabSlideOutLeft  { from{opacity:1;transform:translateX(0)}  to{opacity:0;transform:translateX(-60px)} }
@keyframes tabSlideInRight  { from{opacity:0;transform:translateX(60px)} to{opacity:1;transform:translateX(0)} }
@keyframes tabSlideOutRight { from{opacity:1;transform:translateX(0)}  to{opacity:0;transform:translateX(60px)} }
@keyframes tabSlideInLeft   { from{opacity:0;transform:translateX(-60px)} to{opacity:1;transform:translateX(0)} }
@keyframes tabSlideIn { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }

.scenario-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
@media (min-width: 1024px) { .scenario-grid { grid-template-columns: repeat(3, 1fr); } }

.scenario-card {
  border: 2px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
  cursor: pointer; transition: all 0.2s var(--ease); position: relative;
  background: var(--bg-surface2);
}
.scenario-card:hover { border-color: var(--accent-purple); transform: scale(1.02); box-shadow: var(--glow-selected); }
.scenario-card.selected { border-color: var(--accent-purple); box-shadow: var(--glow-selected); }
.sc-img-placeholder { width:100%; height:90px; display:flex; align-items:center; justify-content:center; font-size:30px; }
.sc-info { padding: 8px; }
.sc-name { font-size: 12px; font-weight: 700; color: #fff; line-height: 1.3; }
.sc-location { font-size: 10px; color: var(--text-option); }
.sc-check { position:absolute; top:6px; right:6px; width:22px; height:22px; background:var(--accent-purple); border-radius:50%; display:none; align-items:center; justify-content:center; font-size:11px; box-shadow:0 0 8px rgba(109,91,255,0.6); }
.scenario-card.selected .sc-check { display: flex; }

.accessory-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
@media (min-width:640px) { .accessory-grid { grid-template-columns:repeat(4,1fr); } }
.accessory-card { border:2px solid var(--border); border-radius:var(--radius-md); padding:14px 8px; text-align:center; cursor:pointer; transition:all 0.2s var(--ease); background:var(--bg-surface); }
.accessory-card:hover { border-color:var(--accent-purple); box-shadow:var(--glow-selected); }
.accessory-card.selected { border-color:var(--accent-purple); background:rgba(109,91,255,0.08); box-shadow:var(--glow-selected); }
.acc-icon { font-size:26px; margin-bottom:6px; }
.acc-name { font-size:11px; font-weight:600; color:var(--text-option); }

/* ─────────────────────────────────────────────
   SCREEN 5 — Activa Cámara
   ───────────────────────────────────────────── */
.camera-permission-box { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px 20px; text-align:center; margin-bottom:16px; }
.cam-icon-big { width:88px;height:88px;border-radius:50%;background:var(--gradient-main);display:flex;align-items:center;justify-content:center;font-size:36px;margin:0 auto 14px;box-shadow:var(--glow-btn);animation:pulseGlow 3s ease-in-out infinite; }
@keyframes pulseGlow { 0%,100%{box-shadow:var(--glow-btn)} 50%{box-shadow:0 0 36px rgba(109,91,255,0.7),0 0 72px rgba(59,130,246,0.35)} }
.cam-tips { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.tip-item { display:flex; align-items:center; gap:12px; background:var(--bg-surface); border-radius:var(--radius-md); padding:12px 14px; border:1px solid var(--border); }
.tip-icon { font-size:20px; color:var(--accent-yellow); flex-shrink:0; }
.tip-text { font-size:13px; color:var(--text-secondary); line-height:1.4; }
.tip-text strong { color:#fff; }

.permission-denied { display:none; background:rgba(249,115,22,0.1); border:1px solid rgba(249,115,22,0.4); border-radius:var(--radius-md); padding:16px; margin-bottom:14px; text-align:center; }
.permission-denied .pd-icon { font-size:28px; margin-bottom:6px; }
.permission-denied p { font-size:13px; color:#fed7aa; margin-bottom:10px; }
.permission-denied.visible { display:block; }
.btn-settings { display:inline-flex;align-items:center;gap:6px;padding:9px 18px;background:rgba(249,115,22,0.18);border:1px solid rgba(249,115,22,0.4);border-radius:var(--radius-md);color:#fb923c;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-body);transition:all 0.2s; }
.btn-settings:hover { background:rgba(249,115,22,0.3); }

/* ─────────────────────────────────────────────
   SCREEN 6 — Selfie
   ───────────────────────────────────────────── */
.selfie-viewfinder { position:relative;width:100%;aspect-ratio:1/1;margin-bottom:14px;border-radius:var(--radius-lg);overflow:hidden;background:#000;max-height:380px; }
@media(min-width:640px){.selfie-viewfinder{aspect-ratio:4/3;max-height:460px;}}
.vf-bg { position:absolute;inset:0;background:linear-gradient(160deg,#1a1a2e,#0d0d1a);display:flex;align-items:center;justify-content:center; }
.selfie-oval { width:190px;height:230px;border:3px solid var(--accent-purple);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 9999px rgba(0,0,0,0.42),0 0 24px rgba(109,91,255,0.5);animation:ovalPulse 2s ease-in-out infinite; }
@keyframes ovalPulse{0%,100%{border-color:var(--accent-purple);box-shadow:0 0 0 9999px rgba(0,0,0,0.42),0 0 20px rgba(109,91,255,0.4)}50%{border-color:var(--accent-cyan);box-shadow:0 0 0 9999px rgba(0,0,0,0.42),0 0 40px rgba(34,211,238,0.5)}}
.vf-corner{position:absolute;width:22px;height:22px;border-color:var(--accent-cyan);border-style:solid;}
.vf-corner.tl{top:10px;left:10px;border-width:3px 0 0 3px;border-radius:6px 0 0 0}
.vf-corner.tr{top:10px;right:10px;border-width:3px 3px 0 0;border-radius:0 6px 0 0}
.vf-corner.bl{bottom:10px;left:10px;border-width:0 0 3px 3px;border-radius:0 0 0 6px}
.vf-corner.br{bottom:10px;right:10px;border-width:0 3px 3px 0;border-radius:0 0 6px 0}
.selfie-controls{display:flex;justify-content:space-around;align-items:center;padding:6px 0 14px;}
.ctrl-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;cursor:pointer;color:var(--text-secondary);font-family:var(--font-body);font-size:11px;font-weight:500;padding:8px 16px;border-radius:var(--radius-md);transition:all 0.2s;}
.ctrl-btn:hover{color:#fff;background:var(--bg-surface);}
.ctrl-btn i{font-size:20px;color:#fff;}
.selfie-guide{text-align:center;font-size:12px;color:var(--text-secondary);margin-bottom:12px;padding:8px 12px;background:rgba(109,91,255,0.08);border-radius:var(--radius-md);border:1px solid rgba(109,91,255,0.15);}
.selfie-guide i{color:var(--accent-yellow);}

/* ─────────────────────────────────────────────
   SCREEN 7 — Generando
   ───────────────────────────────────────────── */
.generating-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;min-height:400px;}
.gen-spark{width:150px;height:150px;position:relative;margin-bottom:24px;}
.gen-ring{width:150px;height:150px;border-radius:50%;border:4px solid transparent;border-top-color:var(--accent-purple);border-right-color:var(--accent-blue);position:absolute;animation:spinRing 1.5s linear infinite;filter:drop-shadow(0 0 7px rgba(109,91,255,0.55));}
.gen-ring-2{width:118px;height:118px;top:16px;left:16px;border-top-color:var(--accent-cyan);border-right-color:transparent;animation:spinRing 2s linear infinite reverse;filter:drop-shadow(0 0 5px rgba(34,211,238,0.45));}
@keyframes spinRing{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.gen-star{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:46px;animation:starPulse 1s ease-in-out infinite alternate;}
@keyframes starPulse{from{transform:translate(-50%,-50%) scale(0.9);filter:brightness(1)}to{transform:translate(-50%,-50%) scale(1.12);filter:brightness(1.4) drop-shadow(0 0 10px gold)}}
.gen-percent{font-family:var(--font-body);font-size:60px;font-weight:700;background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;line-height:1;}
.gen-title{font-size:20px;font-weight:700;color:#fff;margin-bottom:8px;}
.gen-msg{font-size:13px;color:var(--text-secondary);margin-bottom:18px;min-height:20px;transition:opacity 0.4s;}
.gen-progress-bar{width:100%;height:5px;background:var(--bg-surface2);border-radius:3px;overflow:hidden;margin-bottom:10px;}
.gen-progress-fill{height:100%;background:var(--gradient-main);border-radius:3px;transition:width 0.3s var(--ease);box-shadow:0 0 8px rgba(109,91,255,0.5);}
.gen-hint{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:6px;}

/* ─────────────────────────────────────────────
   SCREEN 8 — Preview
   ───────────────────────────────────────────── */
.preview-img-wrap{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:14px;background:var(--bg-surface2);aspect-ratio:9/11;max-height:460px;}
.preview-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(160deg,#1a1040,#0a1535);min-height:280px;}
.pp-big{font-size:72px;}
.watermark{position:absolute;bottom:18px;left:50%;transform:translateX(-50%) rotate(-25deg);font-family:var(--font-body);font-size:32px;font-weight:700;color:rgba(255,255,255,0.16);letter-spacing:4px;pointer-events:none;white-space:nowrap;}
.preview-badge{position:absolute;bottom:12px;left:12px;display:flex;gap:6px;}
.pb-tag{background:rgba(0,0,0,0.65);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:4px 10px;font-size:11px;font-weight:600;}
.preview-retry{text-align:center;margin-bottom:8px;}

/* ─────────────────────────────────────────────
   SCREEN 9 — Pago  [FIX#4] green for pay card
   ───────────────────────────────────────────── */
.payment-preview{display:flex;align-items:center;gap:12px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;margin-bottom:14px;}
.pp-thumb{width:52px;height:52px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#1a1040,#0a1535);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;}
.pp-thumb i{color:var(--accent-yellow);}
.pp-info .pp-label{font-size:11px;color:var(--text-muted);font-weight:600;}
.pp-info .pp-name{font-size:14px;font-weight:700;color:#fff;}

.pricing-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px;}
.price-card{background:var(--bg-surface);border:2px solid var(--border);border-radius:var(--radius-md);padding:14px 10px;text-align:center;cursor:pointer;transition:all 0.2s var(--ease);position:relative;}
/* [FIX#4] green glow for payment selection */
.price-card:hover{border-color:var(--accent-green);box-shadow:var(--glow-green);}
.price-card.selected{border-color:var(--accent-green);background:rgba(74,222,128,0.06);box-shadow:var(--glow-green);}
.price-card.popular{border-color:var(--accent-purple);}
.price-card.popular.selected{border-color:var(--accent-green);}
.popular-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--gradient-main);border-radius:20px;padding:2px 10px;font-size:9px;font-weight:700;white-space:nowrap;box-shadow:0 0 8px rgba(109,91,255,0.4);}
.pc-name{font-size:10px;color:var(--text-option);font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px;}
.pc-qty{font-size:12px;color:var(--text-secondary);margin-bottom:8px;}
.pc-price{font-family:var(--font-body);font-size:22px;font-weight:700;background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;}
.pc-currency{font-size:10px;color:var(--text-muted);margin-top:2px;}
.pc-perimg{font-size:10px;color:var(--text-muted);}

.benefits-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;}
.benefit-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);}
.br-check{color:var(--accent-green);font-size:14px;}

.payment-methods{text-align:center;margin-bottom:14px;}
.pm-label{font-size:11px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:10px;}
.pm-logos{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.pm-logo{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 14px;display:flex;align-items:center;gap:6px;}
.pm-logo img{height:22px;width:auto;}
.pm-logo.paypal{background:var(--bg-surface);border-color:var(--border);}
.pm-logo.paypal span{font-size:13px;font-weight:800;}

.ssl-note{text-align:center;font-size:12px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:5px;}
.ssl-note i{color:var(--accent-purple-light);}

/* ─────────────────────────────────────────────
   SCREEN 9b — Formulario de Pago (Stripe-style)
   ───────────────────────────────────────────── */
.payment-form-wrap{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px;margin-bottom:14px;}
.payment-form-wrap h3{font-size:14px;font-weight:700;color:#fff;margin-bottom:14px;}
.form-row{display:flex;gap:10px;margin-bottom:10px;}
.form-group{flex:1;display:flex;flex-direction:column;gap:4px;}
.form-group label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;}
.form-input{background:var(--bg-surface2);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;color:#fff;font-family:var(--font-body);font-size:14px;outline:none;transition:all 0.2s;width:100%;}
.form-input:focus{border-color:var(--accent-purple);box-shadow:0 0 0 3px rgba(109,91,255,0.15);}
.form-input::placeholder{color:var(--text-muted);}
.card-icons-row{display:flex;gap:6px;margin-bottom:10px;}
.card-icon-sm{background:#fff;border-radius:4px;padding:3px 6px;display:flex;align-items:center;}
.card-icon-sm img{height:16px;width:auto;}

/* ─────────────────────────────────────────────
   SCREEN 10 — Creaciones / Descarga
   ───────────────────────────────────────────── */
.celebration-header{text-align:center;padding:8px 0 14px;}
.cel-emoji{font-size:48px;display:block;animation:trophyBounce 1.2s ease-in-out infinite alternate;color:var(--accent-yellow);}
@keyframes trophyBounce{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-8px) rotate(3deg);filter:drop-shadow(0 6px 14px rgba(251,191,36,0.5))}}
.creation-img-wrap{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:14px;aspect-ratio:9/11;background:linear-gradient(160deg,#1a1040,#0a1535);display:flex;align-items:center;justify-content:center;max-height:460px;}
.creation-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:260px;}
.cp-big{font-size:72px;}
.share-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;margin-bottom:14px;}
.share-btn{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 8px;cursor:pointer;transition:all 0.2s;font-family:var(--font-body);color:#fff;}
.share-btn:hover{border-color:var(--accent-purple);transform:translateY(-2px);box-shadow:var(--glow-selected);}
.share-btn i{font-size:22px;color:#fff;}
.share-btn .sb-label{font-size:10px;font-weight:600;color:var(--text-option);}
.share-btn.whatsapp:hover{border-color:#25d366;box-shadow:0 0 12px rgba(37,211,102,0.4);}
.share-btn.instagram:hover{border-color:#e1306c;box-shadow:0 0 12px rgba(225,48,108,0.4);}

#sparkle-canvas{position:absolute;inset:0;pointer-events:none;width:100%;height:100%;}

/* ─────────────────────────────────────────────
   DASHBOARD LAYOUT (Inner pages)
   Mirrors reference screenshots: sidebar + main
   ───────────────────────────────────────────── */

/* Full-screen overlay for inner pages */
.inner-page { display:none; position:fixed; inset:0; z-index:250; background:var(--bg-deep); overflow:hidden; flex-direction:column; }
.inner-page.open { display:flex; }

/* Simple pages (terms/privacy) keep original layout */
.inner-page-header { display:flex; align-items:center; gap:12px; padding:14px 20px; background:rgba(13,15,42,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.inner-page-header h2 { font-size:17px; font-weight:700; color:#fff; }
.inner-page-body { padding:20px; display:flex; flex-direction:column; gap:14px; max-width:720px; margin:0 auto; width:100%; overflow-y:auto; flex:1; }
.btn-page-back { background:none; border:none; color:var(--accent-cyan); font-size:18px; cursor:pointer; padding:4px 8px; border-radius:8px; transition:all 0.2s; }
.btn-page-back:hover { background:rgba(34,211,238,0.1); }

/* Dashboard two-panel layout */
.dash-layout { display:flex; width:100%; height:100%; overflow:hidden; }

/* Sidebar */
.dash-sidebar { width:220px; min-width:220px; background:#1a237e; display:flex; flex-direction:column; overflow-y:auto; }
@media(max-width:640px) { .dash-sidebar { display:none; } }

.dash-brand { display:flex; align-items:center; gap:10px; padding:18px 16px; border-bottom:1px solid rgba(255,255,255,0.1); }
.dash-brand-avatar { width:36px; height:36px; border-radius:8px; background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff; }
.dash-brand-name { font-size:14px; font-weight:700; color:#fff; }
.dash-brand-sub { font-size:10px; color:rgba(255,255,255,0.55); text-transform:uppercase; letter-spacing:0.6px; }

.dash-nav { flex:1; padding:10px 0; }
.dash-nav-item { display:flex; align-items:center; gap:10px; padding:12px 16px; font-size:13px; font-weight:500; color:rgba(255,255,255,0.65); cursor:pointer; transition:all 0.18s; border-left:3px solid transparent; }
.dash-nav-item:hover { background:rgba(255,255,255,0.08); color:#fff; }
.dash-nav-item.active { background:rgba(255,255,255,0.12); color:#fff; font-weight:700; border-left-color:rgba(255,255,255,0.8); }
.dash-nav-item i { width:18px; text-align:center; font-size:15px; }

.dash-user-footer { display:flex; align-items:center; gap:8px; padding:14px 16px; border-top:1px solid rgba(255,255,255,0.1); background:rgba(0,0,0,0.15); }
.dash-user-avatar { width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; flex-shrink:0; }
.dash-user-email { font-size:11px; color:rgba(255,255,255,0.5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Main content area */
.dash-main { flex:1; display:flex; flex-direction:column; background:#f0f2f8; overflow:hidden; }

.dash-topbar { display:flex; align-items:center; gap:12px; padding:12px 20px; background:#fff; border-bottom:1px solid #e2e8f0; flex-shrink:0; }
.dash-topbar-title { flex:1; font-size:13px; font-weight:700; color:#64748b; letter-spacing:0.5px; display:flex; align-items:center; gap:8px; }
.dash-topbar-title i { color:#94a3b8; }
.dash-topbar-status { display:flex; align-items:center; gap:8px; font-size:13px; color:#475569; font-weight:600; }
.dash-status-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,0.6); }
.dash-avatar-sm { width:32px; height:32px; border-radius:50%; background:#1a237e; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }

.dash-content { flex:1; overflow-y:auto; padding:20px 24px 40px; }
@media(max-width:640px) { .dash-content { padding:14px 14px 40px; } }

.dash-page-heading { margin-bottom:20px; }
.dph-title { font-size:15px; font-weight:700; color:#334155; letter-spacing:0.5px; margin-bottom:4px; }
.dph-sub { font-size:13px; color:#64748b; }

/* Stats cards */
.dash-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
@media(max-width:900px) { .dash-stats-row { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px) { .dash-stats-row { grid-template-columns:repeat(2,1fr); } }
.dash-stat-card { background:#fff; border-radius:10px; padding:14px 16px; box-shadow:0 1px 4px rgba(0,0,0,0.06); display:flex; flex-direction:column; gap:4px; border-left:3px solid #3B82F6; }
.ds-icon { font-size:18px; margin-bottom:2px; }
.ds-value { font-size:22px; font-weight:700; color:#1e293b; }
.ds-label { font-size:11px; color:#64748b; font-weight:500; }

/* Dash panels (white cards) */
.dash-panel { background:#fff; border-radius:12px; padding:20px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.dash-panel-title { font-size:12px; font-weight:700; color:#2563eb; letter-spacing:0.6px; text-transform:uppercase; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.dash-panel .form-group { margin-bottom:12px; }
.dash-panel .form-group label { font-size:12px; font-weight:600; color:#475569; text-transform:none; letter-spacing:0; }
.dash-panel .form-input { background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:10px 12px; color:#1e293b; font-family:var(--font-body); font-size:14px; outline:none; transition:all 0.2s; width:100%; }
.dash-panel .form-input:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,0.12); }
.dash-panel select.form-input { cursor:pointer; }

.dash-section-title { font-size:13px; font-weight:700; color:#334155; margin-bottom:12px; display:flex; align-items:center; gap:8px; }

/* Two column layout for profile */
.dash-two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:900px) { .dash-two-col { grid-template-columns:1fr; } }

/* Info rows */
.dash-info-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f1f5f9; font-size:13px; color:#475569; }
.dash-info-row:last-child { border-bottom:none; }

/* Dash buttons */
.btn-dash-primary { background:#1d4ed8; border:none; border-radius:8px; padding:10px 18px; color:#fff; font-size:13px; font-weight:700; cursor:pointer; font-family:var(--font-body); transition:all 0.2s; display:inline-flex; align-items:center; gap:6px; }
.btn-dash-primary:hover { background:#1e40af; }
.btn-dash-cancel { background:#fff; border:1.5px solid #e2e8f0; border-radius:8px; padding:10px 18px; color:#475569; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font-body); transition:all 0.2s; }
.btn-dash-cancel:hover { border-color:#94a3b8; }

/* Table */
.dash-table { background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,0.06); margin-bottom:8px; }
.dash-table-row { display:grid; grid-template-columns:2fr 1fr 2fr 1fr 1fr; gap:8px; padding:12px 16px; border-bottom:1px solid #f1f5f9; font-size:13px; color:#475569; align-items:center; }
.dash-table-row:last-child { border-bottom:none; }
.dash-table-head { background:#f8fafc; font-size:11px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:0.5px; }
@media(max-width:600px) { .dash-table-row { grid-template-columns:2fr 1fr 1.5fr; } .dash-table-row span:nth-child(2), .dash-table-row span:nth-child(3) { display:none; } }
.dt-bold { font-weight:700; color:#1e293b; }
.dt-price { font-weight:700; color:#16a34a; }
.dt-badge { display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:3px 8px; border-radius:20px; font-size:10px; font-weight:700; }
.dt-badge.green { background:#dcfce7; color:#15803d; }
.dt-badge.blue  { background:#dbeafe; color:#1d4ed8; }
.dt-badge.purple{ background:#ede9fe; color:#7c3aed; }

/* Creations grid (inside dashboard) */
.creations-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:8px; }
@media(max-width:600px) { .creations-grid { grid-template-columns:repeat(2,1fr); } }
.creation-thumb { background:linear-gradient(160deg,#1a1040,#0a1535); border:1px solid rgba(255,255,255,0.08); border-radius:10px; overflow:hidden; position:relative; aspect-ratio:3/4; display:flex; flex-direction:column; justify-content:flex-end; cursor:pointer; transition:all 0.2s; }
.creation-thumb:hover { border-color:var(--accent-purple); box-shadow:0 0 0 2px var(--accent-purple); }
.creation-thumb-bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:44px; opacity:0.35; }
.creation-thumb-info { position:relative; background:rgba(0,0,0,0.65); padding:8px; }
.ct-date { font-size:10px; color:rgba(255,255,255,0.45); }
.ct-pkg  { font-size:11px; font-weight:600; color:var(--accent-purple-light); margin-bottom:4px; }
.creation-thumb-actions { display:flex; gap:4px; }
.ct-action { flex:1; background:rgba(109,91,255,0.25); border:none; border-radius:6px; padding:5px; font-size:11px; color:#c4b5fd; cursor:pointer; font-family:var(--font-body); transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:3px; }
.ct-action:hover { background:rgba(109,91,255,0.45); color:#fff; }
.creation-thumb-add { background:none; border:2px dashed rgba(109,91,255,0.25); border-radius:10px; aspect-ratio:3/4; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; }
.creation-thumb-add:hover { border-color:var(--accent-purple); }

/* Payment method cards */
.pm-cards-grid { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.pm-card-wrap { background:#fff; border-radius:12px; padding:16px; box-shadow:0 1px 6px rgba(0,0,0,0.08); width:260px; }
.pm-card-primary { border:2px solid #3b82f6; }
.pm-card-actions { display:flex; gap:8px; margin:12px 0 8px; flex-wrap:wrap; }
.pm-card-note { font-size:11px; color:#64748b; display:flex; align-items:center; gap:5px; }
.btn-pm-star { background:#fef3c7; border:1px solid #f59e0b; border-radius:6px; padding:6px 10px; color:#92400e; font-size:12px; font-weight:600; cursor:pointer; font-family:var(--font-body); transition:all 0.2s; display:flex; align-items:center; gap:4px; }
.btn-pm-star:hover { background:#fde68a; }
.btn-pm-edit { background:#eff6ff; border:1px solid #bfdbfe; border-radius:6px; padding:6px 10px; color:#1d4ed8; font-size:12px; font-weight:600; cursor:pointer; font-family:var(--font-body); transition:all 0.2s; display:flex; align-items:center; gap:4px; }
.btn-pm-edit:hover { background:#dbeafe; }
.btn-pm-del  { background:#fef2f2; border:1px solid #fecaca; border-radius:6px; padding:6px 10px; color:#dc2626; font-size:12px; font-weight:600; cursor:pointer; font-family:var(--font-body); transition:all 0.2s; display:flex; align-items:center; gap:4px; }
.btn-pm-del:hover  { background:#fee2e2; }

.pm-card-add { width:120px; border:2px dashed #e2e8f0; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; transition:all 0.2s; background:#fafafa; padding:20px 10px; }
.pm-card-add:hover { border-color:#94a3b8; }
.pm-add-icon { width:40px; height:40px; border-radius:50%; background:#f1f5f9; display:flex; align-items:center; justify-content:center; color:#94a3b8; font-size:18px; }
.pm-security-note { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; padding:12px 16px; font-size:13px; color:#15803d; display:flex; align-items:center; gap:8px; margin-bottom:16px; }

/* Credit card visual */
.credit-card { border-radius:10px; padding:14px 16px 12px; margin-bottom:4px; position:relative; min-height:110px; display:flex; flex-direction:column; justify-content:space-between; }
.visa-card { background:linear-gradient(135deg,#1d4ed8,#3b82f6); }
.mc-card   { background:#1e293b; }
.cc-chip { width:28px; height:20px; background:linear-gradient(135deg,#fbbf24,#f59e0b); border-radius:4px; margin-bottom:12px; }
.cc-number { font-size:13px; font-weight:600; color:rgba(255,255,255,0.9); letter-spacing:2px; margin-bottom:10px; font-family:monospace; }
.cc-bottom { display:flex; align-items:flex-end; justify-content:space-between; }
.cc-label  { font-size:8px; color:rgba(255,255,255,0.5); letter-spacing:0.8px; }
.cc-value  { font-size:11px; font-weight:700; color:#fff; letter-spacing:1px; }
.cc-brand  { height:22px; width:auto; }

/* Dash footer */
.dash-footer { font-size:11px; color:#94a3b8; text-align:center; padding:20px 0 0; }
.dash-footer a { color:#64748b; text-decoration:none; }
.dash-footer a:hover { color:#1d4ed8; }

/* Legal pages */
.legal-text { font-size:13px; color:var(--text-secondary); line-height:1.7; }
.legal-text h3 { font-size:14px; font-weight:700; color:#fff; margin:16px 0 5px; }
.legal-text h3:first-child { margin-top:0; }

/* ═══════════════════════════════════════════════
   DUAL THEME SYSTEM — Dark (default) & Light
   All color variables re-declared under [data-theme]
   ═══════════════════════════════════════════════ */

/* ── Dark theme (default, already set in :root) ── */
[data-theme="dark"] {
  --bg-deep:        #07081A;
  --bg-card:        #0D0F2A;
  --bg-surface:     #22247a;
  --bg-surface2:    #1A1D3E;
  --bg-surface3:    #131530;
  --bg-purple-dark: #1C1650;
  --border:         rgba(255,255,255,0.07);
  --text-primary:   #FFFFFF;
  --text-secondary: #A0A8C8;
  --text-muted:     #5A6080;
  --text-option:    #B8AAFF;
  /* Top bar */
  --topbar-bg:      rgba(13,15,42,0.92);
  --topbar-border:  rgba(255,255,255,0.07);
  /* Slide menu */
  --menu-bg:        #0D0F2A;
  --menu-border:    rgba(109,91,255,0.2);
  --menu-item-color:rgba(255,255,255,0.65);
  --menu-item-hover:rgba(255,255,255,0.08);
  /* Bottom nav */
  --nav-bg:         rgba(13,15,42,0.96);
  /* Action bar */
  --action-bg:      var(--bg-deep);
  /* Inputs */
  --input-bg:       #1A1D3E;
  --input-border:   rgba(255,255,255,0.07);
  --input-color:    #fff;
  /* Dash (inner pages) */
  --dash-main-bg:   #0D0F2A;
  --dash-topbar-bg: #131530;
  --dash-topbar-border: rgba(255,255,255,0.07);
  --dash-topbar-title: #A0A8C8;
  --dash-topbar-status:#A0A8C8;
  --dash-content-bg: #07081A;
  --dash-panel-bg:  #131530;
  --dash-panel-border:rgba(255,255,255,0.07);
  --dash-panel-title:#7C9EFF;
  --dash-input-bg:  #1A1D3E;
  --dash-input-border:rgba(255,255,255,0.1);
  --dash-input-color:#fff;
  --dash-label-color:#A0A8C8;
  --dash-heading-color:#fff;
  --dash-sub-color: #A0A8C8;
  --dash-table-bg:  #131530;
  --dash-table-head:#1A1D3E;
  --dash-table-head-color:#5A6080;
  --dash-table-border:rgba(255,255,255,0.05);
  --dash-table-color:#A0A8C8;
  --dash-footer-color:#5A6080;
  --dash-info-border:rgba(255,255,255,0.05);
  --dash-info-color: #A0A8C8;
  --dash-sidebar-bg: #1a237e;
  --btn-primary-bg:  #1d4ed8;
  --btn-cancel-bg:   #1A1D3E;
  --btn-cancel-border:rgba(255,255,255,0.1);
  --btn-cancel-color: #A0A8C8;
  --pm-card-bg:      #131530;
  --pm-card-border:  rgba(255,255,255,0.07);
  --pm-security-bg:  rgba(74,222,128,0.08);
  --pm-security-border:rgba(74,222,128,0.2);
  --pm-security-color:#4ADE80;
  --pm-add-bg:       #131530;
  --pm-add-border:   rgba(109,91,255,0.25);
  --pm-add-icon-bg:  #1A1D3E;
  --pm-add-icon-color:#5A6080;
  --legal-color:     #A0A8C8;
}

/* ── Light theme ── */
[data-theme="light"] {
  --bg-deep:        #dde3f5;       /* page background: blue-gray base */
  --bg-card:        #e8edf8;       /* card background: slightly lighter blue-gray */
  --bg-surface:     #cdd5ee;       /* surface/boxes: medium blue-gray (matches screenshot) */
  --bg-surface2:    #bec8e8;       /* deeper surface: darker blue-gray */
  --bg-purple-dark: #c5ccec;       /* dark purple areas: muted blue-gray */
  --border:         rgba(100,116,180,0.2);
  --text-primary:   #0D0F2A;
  --text-secondary: #475569;
  --text-muted:     #7080a8;
  --text-option:    #5b48d1;
  /* Top bar */
  --topbar-bg:      rgba(255,255,255,0.95);
  --topbar-border:  rgba(0,0,0,0.08);
  /* Slide menu */
  --menu-bg:        #ffffff;
  --menu-border:    rgba(0,0,0,0.08);
  --menu-item-color:#334155;
  --menu-item-hover:rgba(109,91,255,0.06);
  /* Bottom nav */
  --nav-bg:         rgba(255,255,255,0.97);
  /* Action bar */
  --action-bg:      #f0f4ff;
  /* Inputs */
  --input-bg:       #f8faff;
  --input-border:   rgba(0,0,0,0.12);
  --input-color:    #0D0F2A;
  /* Dash (inner pages) */
  --dash-main-bg:   #f0f4ff;
  --dash-topbar-bg: #ffffff;
  --dash-topbar-border: rgba(0,0,0,0.08);
  --dash-topbar-title: #64748b;
  --dash-topbar-status:#475569;
  --dash-content-bg: #f0f4ff;
  --dash-panel-bg:  #ffffff;
  --dash-panel-border:rgba(0,0,0,0.06);
  --dash-panel-title:#2563eb;
  --dash-input-bg:  #f8fafc;
  --dash-input-border:rgba(0,0,0,0.1);
  --dash-input-color:#1e293b;
  --dash-label-color:#475569;
  --dash-heading-color:#1e293b;
  --dash-sub-color: #64748b;
  --dash-table-bg:  #ffffff;
  --dash-table-head:#f8fafc;
  --dash-table-head-color:#94a3b8;
  --dash-table-border:rgba(0,0,0,0.05);
  --dash-table-color:#475569;
  --dash-footer-color:#94a3b8;
  --dash-info-border:rgba(0,0,0,0.05);
  --dash-info-color: #64748b;
  --dash-sidebar-bg: #1a237e; /* sidebar stays dark for contrast */
  --btn-primary-bg:  #1d4ed8;
  --btn-cancel-bg:   #ffffff;
  --btn-cancel-border:rgba(0,0,0,0.12);
  --btn-cancel-color: #475569;
  --pm-card-bg:      #ffffff;
  --pm-card-border:  rgba(0,0,0,0.08);
  --pm-security-bg:  #f0fdf4;
  --pm-security-border:#bbf7d0;
  --pm-security-color:#15803d;
  --pm-add-bg:       #fafafa;
  --pm-add-border:   #e2e8f0;
  --pm-add-icon-bg:  #f1f5f9;
  --pm-add-icon-color:#94a3b8;
  --legal-color:     #475569;
}

/* ── Apply theme vars to elements ── */
body {
  background: var(--bg-deep);
  color: var(--text-primary);
}
body::before {
  background: radial-gradient(ellipse, rgba(109,91,255,0.08) 0%, transparent 70%);
}
.top-bar {
  background: var(--topbar-bg);
  border-bottom-color: var(--topbar-border);
}
.slide-menu {
  background: var(--menu-bg);
  border-right-color: var(--menu-border);
}
.slide-menu-header {
  border-bottom-color: var(--menu-border);
}
.menu-nav-item {
  color: var(--menu-item-color);
}
.menu-nav-item:hover {
  background: var(--menu-item-hover);
}
.menu-user-pill {
  border-bottom-color: var(--menu-border);
  background: var(--bg-surface);
}
.mu-name { color: var(--text-primary); }
.mu-plan { color: var(--text-option); }
.menu-nav-divider { background: var(--border); }

.bottom-nav {
  background: var(--nav-bg);
  border-top-color: var(--border);
}
.action-bar {
  background: linear-gradient(to top, var(--bg-deep) 70%, transparent);
}
.card { background: transparent; border-color: var(--border); }
.dashboard-section, .profile-section { background: var(--bg-surface); border-color: var(--border); }
.search-box { background: var(--bg-surface3); border-color: var(--border); }
.search-box input { color: var(--text-primary); }
.custom-select-trigger { background: var(--bg-surface3); border-color: var(--border); color: var(--text-primary); }
.team-section-title { color: var(--text-primary); }
.team-coming-soon { background: var(--bg-surface3); }
.tcs-title { color: var(--text-primary); }
.screen-title { color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary); }
.screen-subtitle { color: var(--text-secondary); }
.fan-card { background: var(--bg-surface); border-color: var(--border); }
.country-card, .scenario-card, .accessory-card, .price-card { background: var(--bg-surface); border-color: var(--border); }

/* In light mode the fan/pose cards use a richer blue-gray with a tinted border,
   matching the screenshot reference where cards appear as solid blue-gray tiles */
[data-theme="light"] .fan-card {
  background: #c2cce8;
  border: 1.5px solid rgba(91,72,209,0.18);
  box-shadow: 0 2px 8px rgba(80,100,180,0.12);
}
[data-theme="light"] .fan-card:hover {
  background: #b5c0e0;
  border-color: var(--accent-purple);
}
[data-theme="light"] .fan-card.selected {
  background: #a9b6d8;
  border-color: var(--accent-purple);
  box-shadow: var(--glow-selected);
}
[data-theme="light"] .fan-name { color: #1e2a5e; }
[data-theme="light"] .fan-desc { color: #4a5a9a; }

[data-theme="light"] .custom-select-options { background: #ffffff; border-color: var(--border); box-shadow: 0 12px 32px rgba(30,42,94,0.14), var(--glow-selected); }
[data-theme="light"] .cso-option { color: var(--text-secondary); }
[data-theme="light"] .cso-option:hover, [data-theme="light"] .cso-option.selected { background: rgba(109,91,255,0.1); color: var(--text-primary); }

.fan-name { color: var(--text-primary);position:absolute;top:10px;left:10px; }
.fan-desc {color: #809aff;}
.country-name, .sc-location, .acc-name { color: var(--text-option); }
.sc-name { color: var(--text-primary); }
.tabs-row { background: var(--bg-surface3); border-color: var(--border); }
.tab-btn { color: var(--text-secondary); }
.benefits-list, .payment-preview, .payment-methods { background: var(--bg-surface); border-color: var(--border); }
.pp-info .pp-name { color: var(--text-primary); }
.benefit-row { color: var(--text-secondary); }
.selfie-guide { background: rgba(109,91,255,0.06); border-color: rgba(109,91,255,0.12); color: var(--text-secondary); }
.tip-item { background: var(--bg-surface); border-color: var(--border); }
.tip-text { color: var(--text-secondary); }
.tip-text strong { color: var(--text-primary); }
.form-input { background: var(--input-bg); border-color: var(--input-border); color: var(--input-color); }
.gen-title { color: var(--text-primary); }
.gen-msg { color: var(--text-secondary); }
.gen-hint { color: var(--text-muted); }
.gen-progress-bar { background: var(--bg-surface2); }
.ssl-note span { color: var(--text-option); }
.btn-link { background: var(--bg-purple-dark); color: var(--text-option); }
.s1-legal { color: var(--text-muted); }
.step-pill .sp-text { color: var(--text-secondary); }
.s1-steps { background: var(--bg-surface); border-color: var(--border); }
.trust-item .ti-label { color: var(--text-secondary); }

/* ── Dashboard inner pages use theme vars ── */
.dash-main        { background: var(--dash-main-bg); }
.dash-topbar      { background: var(--dash-topbar-bg); border-bottom-color: var(--dash-topbar-border); }
.dash-topbar-title { color: var(--dash-topbar-title); }
.dash-topbar-status { color: var(--dash-topbar-status); }
.dash-content     { background: var(--dash-content-bg); }
.dash-panel       { background: var(--dash-panel-bg); border: 1px solid var(--dash-panel-border); box-shadow: none; }
.dash-panel-title { color: var(--dash-panel-title); }
.dash-panel .form-input  { background: var(--dash-input-bg); border-color: var(--dash-input-border); color: var(--dash-input-color); }
.dash-panel .form-group label { color: var(--dash-label-color); }
.dash-stat-card   { background: var(--dash-panel-bg); border-left-color: var(--dash-panel-border); box-shadow: none; }
.ds-value         { color: var(--dash-heading-color); }
.ds-label         { color: var(--dash-sub-color); }
.dash-section-title { color: var(--dash-heading-color); }
.dash-table       { background: var(--dash-table-bg); box-shadow: none; }
.dash-table-head  { background: var(--dash-table-head); }
.dash-table-head span { color: var(--dash-table-head-color); }
.dash-table-row   { border-bottom-color: var(--dash-table-border); color: var(--dash-table-color); }
.dt-bold          { color: var(--dash-heading-color); }
.dash-footer      { color: var(--dash-footer-color); }
.dash-info-row    { border-bottom-color: var(--dash-info-border); color: var(--dash-info-color); }
.dash-page-heading .dph-title { color: var(--dash-heading-color); }
.dash-page-heading .dph-sub   { color: var(--dash-sub-color); }
.dph-title        { color: var(--dash-heading-color); }
.dph-sub          { color: var(--dash-sub-color); }
.btn-dash-cancel  { background: var(--btn-cancel-bg); border-color: var(--btn-cancel-border); color: var(--btn-cancel-color); }
/* Payment methods cards */
.pm-card-wrap     { background: var(--pm-card-bg); border-color: var(--pm-card-border); }
.pm-security-note { background: var(--pm-security-bg); border-color: var(--pm-security-border); color: var(--pm-security-color); }
.pm-card-add      { background: var(--pm-add-bg); border-color: var(--pm-add-border); }
.pm-add-icon      { background: var(--pm-add-icon-bg); color: var(--pm-add-icon-color); }
/* Legal */
.legal-text       { color: var(--legal-color); }
.legal-text h3    { color: var(--dash-heading-color); }
/* Inner page header */
.inner-page-header { background: var(--topbar-bg); border-bottom-color: var(--topbar-border); }
.inner-page-header h2 { color: var(--text-primary); }
.inner-page-body { background: var(--dash-content-bg); }

/* ═══════════════════════════════════════════════
   LOGO — dual version (dark/light)
   ═══════════════════════════════════════════════ */
.logo-wrap {
  display: flex; align-items: center; text-decoration: none;
  flex: 1; justify-content: center;
}
.logo-img {
  height: 32px; width: auto; object-fit: contain;
  display: block;
}
@media(min-width:640px) { .logo-img { height: 36px; } }

/* Dark theme: show light logo (light-colored text on dark bg) */
[data-theme="dark"]  .logo-img--light { display: block; }
[data-theme="dark"]  .logo-img--dark  { display: none;  }
[data-theme="dark"]  .logo-fallback   { display: none;  }

/* Light theme: show dark logo (dark-colored text on light bg) */
[data-theme="light"] .logo-img--light { display: none;  }
[data-theme="light"] .logo-img--dark  { display: block; }
[data-theme="light"] .logo-fallback   { display: none;  }

/* Fallback if both images fail to load */
.logo-fallback {
  font-family: var(--font-body); font-size: 22px; font-weight: 700;
  background: var(--gradient-main);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Menu logo */
.menu-logo-img { height: 26px; width: auto; }
[data-theme="dark"]  .menu-logo--light { display: block; }
[data-theme="dark"]  .menu-logo--dark  { display: none;  }
[data-theme="dark"]  .menu-logo-fallback { display: none; }
[data-theme="light"] .menu-logo--light { display: none;  }
[data-theme="light"] .menu-logo--dark  { display: block; }
[data-theme="light"] .menu-logo-fallback { display: none; }

/* ═══════════════════════════════════════════════
   DARK/LIGHT TOGGLE in menu
   ═══════════════════════════════════════════════ */
.menu-darkmode-row {
  display: flex; align-items: center; gap: 10px;
  justify-content: space-between;
  cursor: pointer;
}
.menu-darkmode-row span { flex: 1; }

/* Toggle track */
.theme-toggle-track {
  width: 44px; height: 24px; border-radius: 12px;
  background: #374151; border: none;
  position: relative; flex-shrink: 0;
  transition: background 0.25s;
  cursor: pointer;
}
.theme-toggle-track.on { background: #4ADE80; }

/* Toggle thumb */
.theme-toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.theme-toggle-thumb.on { transform: translateX(20px); }

/* ── Powered by Ultraludic ── */
.menu-powered {
  padding: 14px 20px 20px;
  font-size: 11px; color: var(--text-muted);
  text-align: center; border-top: 1px solid var(--menu-border);
  margin-top: auto;
}
.menu-powered-link {
  color: var(--accent-purple-light); font-weight: 700;
  text-decoration: none; margin-left: 3px;
  transition: color 0.2s;
}
.menu-powered-link:hover { color: #fff; text-decoration: underline; }

/* ═══════════════════════════════════════════════
   FIX#1 — Celebration icon centering
   .cel-icon-wrap controls alignment independently
   ═══════════════════════════════════════════════ */
.cel-icon-wrap {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;        /* vertical center */
  width: 100%;
  margin-bottom: 6px;
}
/* To change alignment in the future just edit this class: */
/* justify-content: flex-start | center | flex-end         */

.cel-emoji {
  font-size: 52px;
  /* Removed display:block — now controlled by flex parent */
  animation: trophyBounce 1.2s ease-in-out infinite alternate;
}

/* Light mode menu adjustments */
[data-theme="light"] .slide-menu { box-shadow: 2px 0 20px rgba(0,0,0,0.12); }
[data-theme="light"] .menu-nav-item { color: #334155; }
[data-theme="light"] .menu-nav-item:hover { background: rgba(109,91,255,0.06); color: #0D0F2A; }
[data-theme="light"] .mu-name { color: #0D0F2A; }
[data-theme="light"] .menu-powered { color: #94a3b8; }

/* Light mode general surfaces */
[data-theme="light"] .s1-hero-preview { background: linear-gradient(160deg, #c7d2fe, #a5b4fc, #818cf8); }
[data-theme="light"] .preview-placeholder { background: linear-gradient(160deg, #c7d2fe, #a5b4fc); }
[data-theme="light"] .creation-img-wrap { background: linear-gradient(160deg, #c7d2fe, #a5b4fc); }
[data-theme="light"] .selfie-viewfinder .vf-bg { background: linear-gradient(160deg, #dde4ff, #c7d2fe); }
[data-theme="light"] .generating-wrap { color: var(--text-primary); }
[data-theme="light"] .payment-form-wrap { background: var(--bg-surface); border-color: var(--border); }
[data-theme="light"] .payment-form-wrap h3 { color: var(--text-primary); }
[data-theme="light"] .camera-permission-box { background: var(--bg-surface); border-color: var(--border); }
[data-theme="light"] .permission-denied { background: rgba(249,115,22,0.06); }

/* ═══════════════════════════════════════════════
   SCREEN 5 — Generic Preview (freemium reveal)
   ═══════════════════════════════════════════════ */

.generic-preview-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 9/12;
  max-height: 420px;
}

.generic-preview-bg {
  width: 100%; height: 100%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1a2050, #2a3070);
  transition: background 0.4s var(--ease);
}

.generic-preview-stadium-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(255,255,255,0.12) 0%, transparent 60%),
    linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
}

/* Animated fan avatar in centre */
.generic-preview-fan {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  animation: fanFloat 3s ease-in-out infinite alternate;
}
@keyframes fanFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

.gpf-avatar {
  font-size: 80px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
  line-height: 1;
}

.gpf-flag {
  font-size: 28px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.15);
}

/* Country colour stripe at bottom */
.generic-preview-stripe {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 6px;
  background: var(--gradient-main);
  opacity: 0.7;
}

/* Watermark */
.generic-preview-watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-family: var(--font-body);
  font-size: 42px; font-weight: 800;
  color: rgba(255,255,255,0.15);
  letter-spacing: 6px;
  pointer-events: none; white-space: nowrap;
  text-transform: uppercase;
}

/* Badges showing selections */
.generic-preview-badges {
  position: absolute; bottom: 14px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px;
  flex-wrap: wrap; padding: 0 12px;
  z-index: 3;
}
.gpb-tag {
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px; padding: 4px 10px;
  font-size: 11px; font-weight: 600; color: #fff;
  white-space: nowrap;
}

/* Conversion hook below preview */
.preview-hook {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}
.ph-title {
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.ph-list { display: flex; flex-direction: column; gap: 8px; }
.ph-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════
   SCREEN 7 — Post-pay commitment banner
   ═══════════════════════════════════════════════ */
.postpay-banner {
  display: flex; align-items: flex-start; gap: 14px;
  background: linear-gradient(135deg, rgba(74,222,128,0.12), rgba(34,211,238,0.08));
  border: 1px solid rgba(74,222,128,0.3);
  border-radius: var(--radius-md);
  padding: 16px;
  animation: bannerIn 0.5s var(--ease) both;
}
@keyframes bannerIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ppb-icon {
  font-size: 28px; color: var(--accent-green);
  flex-shrink: 0; margin-top: 2px;
  filter: drop-shadow(0 0 8px rgba(74,222,128,0.5));
}
.ppb-title {
  font-size: 15px; font-weight: 700; color: #fff;
  margin-bottom: 4px; line-height: 1.3;
}
.ppb-sub {
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
}

/* Light mode adjustments */
[data-theme="light"] .preview-hook { background: var(--bg-surface); }
[data-theme="light"] .postpay-banner { background: linear-gradient(135deg, rgba(74,222,128,0.08), rgba(34,211,238,0.05)); }
[data-theme="light"] .ppb-title { color: #1e293b; }