/* ============== Pastel UI Theme (Light) ============== */
/* Color system */
:root{
  --bg:#0b1220;           /* deep navy */
  --surface:#0f1629;      /* card bg */
  --surface-2:#0c1a2e;    /* soft card bg */
  --text:#e8eefc;         /* light text */
  --muted:#9fb3d1;        /* muted */
  --line:#1d2b46;         /* borders */

  /* Gateway accents */
  --primary:#4f9cf9;      /* primary blue */
  --primary-700:#2e73e6;
  --accent:#9ee7d7;       /* mint */
  --accent-700:#56d6be;
  --amber:#ffd28a;        /* coins */
  --danger:#ff7070;
  --success:#34d399;

  /* Radii / spacing / shadow */
  --br:18px;
  --gap:14px;
  --pad:18px;
  --shadow:0 10px 30px rgba(20,20,40,.06);

  /* Typography */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

/* Basic reset */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.6 var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, #16233d 0%, #0b1220 60%) no-repeat,
    var(--bg);
  background-attachment: fixed;
  animation: bgShift 18s ease-in-out infinite alternate;
}
@keyframes bgShift{
  0%{ filter:hue-rotate(0deg) brightness(1); }
  100%{ filter:hue-rotate(12deg) brightness(1.05); }
}

/* Background coin animation field */
.coin-field{
  position:fixed; inset:0; pointer-events:none; overflow:hidden;
}
.coin{
  position:absolute; width:18px; height:18px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff6, transparent),
              linear-gradient(145deg, #ffd28a, #ffb84d);
  border:1px solid #f1b45a; box-shadow:0 2px 8px rgba(0,0,0,.08);
  animation: floatCoin 8s linear infinite;
}
@keyframes floatCoin{
  from{ transform: translateY(100vh) rotate(0deg); opacity:.0 }
  10%{ opacity:.9 }
  to{ transform: translateY(-20vh) rotate(360deg); opacity:0 }
}
.contract-line{
  position:absolute; width:120px; height:1px; background:linear-gradient(90deg, #9ee7d7, transparent);
  filter:drop-shadow(0 0 4px #9ee7d7aa);
  animation: flicker 2.4s ease-in-out infinite;
}
@keyframes flicker{ 0%,100%{opacity:.2} 50%{opacity:.8} }

/* App container */
.app{max-width:960px; margin:0 auto; padding:22px}

/* Header */
.header{
  display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:48px; height:48px; border-radius:12px; background:#fff; box-shadow:var(--shadow)}
.brand-text h1{margin:0; font-size:22px}
.tagline{margin:2px 0 0; color:var(--muted); font-size:14px}
.lang label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px}
.lang select{
  padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--text);
  outline:none;
}

/* Progress bar */
.progress-wrap{
  height:10px; background:var(--surface-2); border-radius:999px; overflow:hidden;
  border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.progress-bar{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--primary), var(--accent), var(--success));
  background-size:200% 100%;
  animation:barMove 6s linear infinite;
}
@keyframes barMove { 0%{background-position:0 0} 100%{background-position:200% 0} }

/* Non-conflicting progress for new markup */
.x-progress{ height:10px; background:var(--surface-2); border-radius:999px; overflow:hidden; border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.06) }
.x-progress-bar{ height:100%; width:0; background:linear-gradient(90deg, var(--primary), var(--accent), var(--success)); background-size:200% 100%; animation:barMove 6s linear infinite }

/* Steps */
.steps{margin-top:16px}
.step{
  display:none;
  background:var(--surface);
  border-radius:var(--br);
  padding:calc(var(--pad) + 6px);
  box-shadow:var(--shadow);
  border: 1px solid var(--line);
}
.step.active{display:block}
.lead{color:#364157}

/* Card blocks */
.card{
  background:var(--surface-2);
  border:1px dashed var(--line);
  border-radius:16px;
  padding:var(--pad);
  margin:16px 0;
}
/* Non-conflicting card */
.xcard{ background:var(--surface-2); border:1px dashed var(--line); border-radius:16px; padding:var(--pad); margin:16px 0 }
.xcard{ position:relative; overflow:hidden }
.xcard::after{ content:""; position:absolute; inset:auto -30%  -50% -30%; height:60px; background:linear-gradient(90deg, transparent, #ffffff22, transparent); transform:translateY(-120%) rotate(8deg); animation: shine 6s ease-in-out infinite }
@keyframes shine{ 0%{ transform:translateY(120%) rotate(8deg) } 100%{ transform:translateY(-120%) rotate(8deg) } }
.xcard{ animation: floatCard 6s ease-in-out infinite alternate }
@keyframes floatCard{ from{ transform: translateY(0) } to{ transform: translateY(-6px) } }
.lbl{display:block; margin-bottom:8px; color:#48536a; font-size:14px}
.muted{color:var(--muted); font-size:13px}
textarea, input[type="email"]{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:#fff; color:var(--text);
  outline:none; transition:border-color .2s, box-shadow .2s;
}
textarea:focus, input[type="email"]:focus{
  border-color:#c9d7ff;
  box-shadow:0 0 0 4px rgba(156, 163, 255, .18);
}

/* Layout helpers */
.row{display:flex; align-items:center}
.row.gap{gap:10px; flex-wrap:wrap}
.xrow{display:flex; align-items:center}
.xrow.gap{gap:10px; flex-wrap:wrap}
.hide{display:none}

/* Buttons */
.btn{
  appearance:none; border:0; border-radius:12px; padding:10px 16px; cursor:pointer;
  background:var(--surface); color:var(--text); box-shadow:var(--shadow);
  border:1px solid var(--line); transition:transform .06s ease, filter .15s ease, box-shadow .2s ease;
}
.btn:hover{filter:brightness(1.03)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background: linear-gradient(180deg, var(--primary), var(--primary-700));
  color:white; border:0;
}
.btn.secondary{
  background: linear-gradient(180deg, #667eea, #6b8cff);
  color:white; border:0;
}
.btn.next{
  background: linear-gradient(180deg, var(--success), #109d7a);
  color:#062a24; border:0;
}
.btn.back{
  background: linear-gradient(180deg, #1a2a4a, #172744);
  color:#c6d5f5; border:0;
}
.btn.ghost{
  background:transparent; color:#9fb3d1; border:1px dashed var(--line);
}
.btn[disabled]{opacity:.6; cursor:not-allowed}

/* Non-conflicting button alias */
.xbtn{ appearance:none; border-radius:12px; cursor:pointer; transition:transform .06s ease, filter .15s ease, box-shadow .2s ease }
.xbtn:hover{ filter:brightness(1.03) }
.xbtn:active{ transform:translateY(1px) }
.xbtn.primary{ background: linear-gradient(180deg, var(--primary), var(--primary-700)); color:white; border:0 }
.xbtn.secondary{ background: linear-gradient(180deg, #667eea, #6b8cff); color:white; border:0 }
.xbtn.next{ background: linear-gradient(180deg, var(--success), #109d7a); color:#062a24; border:0 }
.xbtn.back{ background: linear-gradient(180deg, #1a2a4a, #172744); color:#c6d5f5; border:0 }
.xbtn.ghost{ background:transparent; color:#9fb3d1; border:1px dashed var(--line) }
.xbtn{ position:relative; overflow:hidden }
.xbtn::before{ content:""; position:absolute; top:-150%; left:-50%; width:40%; height:400%; transform:rotate(25deg); background:linear-gradient(90deg, transparent, #ffffff44, transparent); transition: .3s opacity; opacity:0 }
.xbtn:hover::before{ opacity:1 }
.xbtn[disabled]{ opacity:.6; cursor:not-allowed }

/* Nav areas */
.nav{display:flex; justify-content:flex-end; gap:10px; margin-top:14px}
.nav.two{justify-content:space-between}

/* Messages */
.msg{min-height:1.4em; margin-top:10px; font-weight:500}
.msg.ok{color:#0f9d6e}
.msg.err{color:#d64545}

/* Footer */
.footer{margin:18px auto 10px; text-align:center; color:var(--muted)}

/* Toast (JS injects inline styles; here just enhance) */
.toast{backdrop-filter: blur(6px)}

/* ============== Motion & Effects ============== */
/* Subtle glow on focusable blocks */
.fx-glow{transition:box-shadow .25s ease, transform .25s ease}
.fx-glow:focus-within{box-shadow:0 8px 30px rgba(156,163,255,.25); transform:translateY(-1px)}

/* Press effect for buttons */
.fx-press{transform:translateY(0); transition:transform .06s ease}
.fx-press:active{transform:translateY(1px)}

/* Pop-in for logos/smaller elements */
.fx-pop{animation:fx-pop .4s ease-out both}
@keyframes fx-pop{
  from{transform:scale(.94); opacity:0}
  to{transform:scale(1); opacity:1}
}

/* Drop-in for header */
.fx-drop{animation:fx-drop .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes fx-drop{
  from{transform:translateY(-12px); opacity:0}
  to{transform:translateY(0); opacity:1}
}

/* Fade for containers/footer */
.fx-fade{animation:fx-fade .5s ease-out both}
@keyframes fx-fade{
  from{opacity:0} to{opacity:1}
}

/* Slide for step sections */
.fx-slide{animation:fx-slide .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes fx-slide{
  from{transform:translateY(10px); opacity:0}
  to{transform:translateY(0); opacity:1}
}

/* ============== Icon Animations ============== */
.fa-star, .fa-cake-candles, .fa-gift {
  animation: sparkle 2s infinite alternate cubic-bezier(0.8,0,0.2,1);
}
@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(-8deg); color: var(--amber);}
  50% { transform: scale(1.1) rotate(8deg); color: var(--primary);}
}

/* Animate buttons on hover */
.btn.fx-press:hover, .btn.fx-press:focus, .xbtn.fx-press:hover, .xbtn.fx-press:focus {
  animation: fx-wiggle .18s linear 1;
}
@keyframes fx-wiggle {
  0% { transform: scale(1);}
  40% { transform: scale(1.07);}
  100% { transform: scale(1);}
}

/* ============== RTL tweaks ============== */
html[dir="rtl"] .brand-text h1, 
html[dir="rtl"] .tagline,
html[dir="rtl"] .lbl,
html[dir="rtl"] .lead,
html[dir="rtl"] .muted { text-align:right }
html[dir="rtl"] .row{flex-direction:row-reverse}
html[dir="rtl"] .nav{flex-direction:row-reverse}
html[dir="rtl"] .nav.two{flex-direction:row-reverse; justify-content:space-between}

/* ============== Responsiveness ============== */
@media (max-width: 720px){
  .header{flex-direction:column; align-items:flex-start}
  .brand{width:100%}
  .tagline{font-size:13px}
  .app{padding:16px}
  .step{padding:18px}
  textarea{min-height:120px}
  .nav.two{flex-direction:column; gap:8px}
}
@media (max-width: 420px){
  .logo{width:44px; height:44px}
  .brand-text h1{font-size:20px}
  .btn{width:100%}
  .row.gap{gap:8px}
}

/* ============== Accessibility ============== */
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}

/* High-contrast tweak (opt-in with class on body if needed) */
.hc .muted{color:#cfd7ea}
.hc .progress-wrap{border-color:#cbd5e1}
.hc .x-progress{border-color:#cbd5e1}