/* Part of the nepa_spin_and_win module. See LICENSE file for full copyright and licensing details. */
/*
  NEPA SPIN & WIN - landing page (reward-code prototype)
  Layout and look follow nepa-spin-reward-code-redeem.html. Differences, all of
  them because this page runs on a real site with a real wheel:

  * every rule is scoped to #nepaSpin, and class names Bootstrap also owns are
    prefixed nsw-, so the site's header, footer and builder blocks are untouched;
  * the wedge labels are placed with --a / --r instead of eight :nth-of-type
    rules, because the wheel is whatever is configured in Odoo;
  * the prototype's unused claim/auth gate styles are dropped - the reward card
    has its own account and sign-in blocks;
  * the module-only pieces (spin errors, reward conditions, wheel tools, ...)
    are kept at the end of the file.
*/
#nepaSpin{
    --navy:#121968;
    --navy-2:#202a83;
    --coral:#ef6c52;
    --cream:#fbfaf6;
    --ink:#171c45;
    --muted:#74788d;
    --line:#e7e7ef;
    --lav:#eeecfb;
    --peach:#f6b779;
    --white:#fff;
    --shadow:0 24px 70px rgba(18,25,104,.18);
  }
#nepaSpin *{box-sizing:border-box}
#nepaSpin{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--cream)}
#nepaSpin button,#nepaSpin input{font:inherit}
#nepaSpin button{cursor:pointer}
#nepaSpin button:focus-visible,#nepaSpin input:focus-visible{outline:3px solid rgba(18,25,104,.22);outline-offset:3px}
#nepaSpin [hidden]{display:none!important}
#nepaSpin .page{display:grid;place-items:center;padding:32px}
#nepaSpin .hero{
    width:min(1240px,100%);
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);
    align-items:center;
    gap:30px;
    padding:58px 0 62px;
  }
#nepaSpin .copy{padding-left:4px}
#nepaSpin .eyebrow{font-size:12px;font-weight:800;letter-spacing:2.25px;text-transform:uppercase;color:var(--navy)}
#nepaSpin h1{font-size:74px;line-height:1.01;letter-spacing:-4.8px;margin:23px 0 24px;color:var(--navy)}
#nepaSpin h1 span{color:var(--coral)}
#nepaSpin .nsw-lead{max-width:535px;font-size:17px;line-height:1.72;color:var(--muted);margin:0}
#nepaSpin .actions{display:flex;gap:22px;align-items:center;margin-top:31px}
#nepaSpin .nsw-btn{border:0;border-radius:12px;min-height:52px;padding:0 21px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:.2s ease;text-decoration:none}
#nepaSpin .nsw-btn:hover{transform:translateY(-1px)}
#nepaSpin .nsw-btn-primary{background:var(--navy);color:#fff;box-shadow:0 8px 18px rgba(18,25,104,.15)}
#nepaSpin .nsw-btn-primary:hover{background:var(--navy-2);box-shadow:0 10px 24px rgba(18,25,104,.22)}
#nepaSpin .nsw-btn-secondary{background:#fff;color:var(--navy);border:1px solid #dedfec}
#nepaSpin .text-link{border:0;background:transparent;padding:10px 0;color:var(--navy);font-weight:800;text-decoration:underline;text-underline-offset:4px}
#nepaSpin .arrow{font-size:21px;line-height:1}
#nepaSpin .trust{display:flex;gap:9px;align-items:center;margin-top:22px;font-size:11px;color:#7f8395}
#nepaSpin .check{width:15px;height:15px;border:1.5px solid #9195a7;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:800}
/* RIGHT SIDE / LOCKED WHEEL */
#nepaSpin .reward-zone{
    min-height:522px;
    min-width:0;
    width:100%;
    position:relative;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:30px;
    isolation:isolate;
    padding:20px;
    background:
      radial-gradient(circle at 50% 48%, rgba(234,231,249,.95) 0 30%, rgba(244,242,251,.72) 48%, rgba(251,250,246,0) 72%),
      linear-gradient(145deg, rgba(255,255,255,.76), rgba(249,247,242,.92));
    border:1px solid rgba(18,25,104,.05);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
  }
#nepaSpin .halo{
    position:absolute;
    width:448px;height:448px;border-radius:50%;
    background:rgba(229,226,247,.46);
    box-shadow:0 0 0 26px rgba(239,237,249,.34),0 0 0 54px rgba(246,244,251,.20);
    opacity:.9
  }
#nepaSpin .spark{position:absolute;color:#9d91e4;font-size:34px;z-index:1;opacity:.78}
#nepaSpin .spark.s1{left:13%;top:37%}
#nepaSpin .spark.s2{right:9%;bottom:23%;color:#ef8a72}
#nepaSpin .spark.s3{right:17%;top:16%;font-size:24px}
#nepaSpin .wheel-shell{
    width:min(100%,452px);aspect-ratio:1/1;position:relative;display:grid;place-items:center;z-index:2;
    transition:.5s ease
  }
#nepaSpin .wheel-visual{width:100%;height:100%;position:relative;display:grid;place-items:center;transition:filter .38s ease,opacity .38s ease,transform .38s ease}
#nepaSpin .locked .wheel-visual{
    filter:blur(2.6px) saturate(.93) contrast(.99);
    opacity:.9;
    transform:scale(.995);
    pointer-events:none;
    user-select:none;
  }
#nepaSpin .locked .halo{filter:blur(.5px);opacity:.64}
#nepaSpin .wheel-rim{
    width:414px;height:414px;border-radius:50%;
    position:relative;
    background:linear-gradient(145deg,#ffffff 0%,#f7f7fb 52%,#ffffff 100%);
    border:7px solid rgba(255,255,255,.98);
    box-shadow:0 18px 42px rgba(18,25,104,.15),inset 0 0 0 1px #dedfec;
    display:grid;place-items:center;
  }
#nepaSpin .wheel-rim::before{
    content:"";position:absolute;inset:8px;border-radius:50%;pointer-events:none;
    background:repeating-conic-gradient(from var(--seg-from,-22.5deg),
      rgba(18,25,104,.10) 0 1deg,
      transparent 1deg calc(var(--seg,45deg) - 1deg),
      rgba(18,25,104,.10) calc(var(--seg,45deg) - 1deg) var(--seg,45deg));
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 6px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 6px));
  }
#nepaSpin .wheel-rim::after{
    content:"";position:absolute;inset:-7px;border-radius:50%;pointer-events:none;
    border:1px solid rgba(18,25,104,.08);
    box-shadow:0 0 0 9px rgba(255,255,255,.36);
  }
#nepaSpin .wheel{
    width:378px;height:378px;border-radius:50%;position:relative;overflow:hidden;
    /* Placeholder only: nepa_spin.js repaints this from the configured wedges. */
    background:var(--navy);
    box-shadow:inset 0 0 0 4px rgba(255,255,255,.58),0 8px 18px rgba(18,25,104,.10);
    transition:transform 4.6s cubic-bezier(.12,.72,.07,1);
  }
@keyframes nswIdleSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
#nepaSpin .locked .wheel{animation:nswIdleSpin 10s linear infinite}
#nepaSpin .unlocked .wheel{animation:none}
#nepaSpin .wheel::before{
    content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:1;
    background:repeating-conic-gradient(from var(--seg-from,-22.5deg),
      transparent 0 calc(var(--seg,45deg) - .8deg),
      rgba(255,255,255,.92) calc(var(--seg,45deg) - .8deg) var(--seg,45deg));
  }
#nepaSpin .wheel::after{
    content:"";position:absolute;inset:11px;border-radius:50%;border:1px solid rgba(255,255,255,.34);pointer-events:none;z-index:1
  }
/* One wedge: no spokes, no notches - there is nothing to divide. */
#nepaSpin .wheel-visual.one-wedge .wheel-rim::before,
#nepaSpin .wheel-visual.one-wedge .wheel::before{display:none}

#nepaSpin .segment-label{
    position:absolute;left:50%;top:50%;width:94px;margin-left:-47px;margin-top:-22px;text-align:center;
    font-size:14px;line-height:1.06;font-weight:900;color:#172062;text-transform:uppercase;letter-spacing:-.2px;
    transform-origin:47px 22px;z-index:2;
    text-shadow:0 1px 0 rgba(255,255,255,.28);
    overflow-wrap:anywhere;
    transform:rotate(var(--a,0deg)) translateY(calc(var(--r,136px) * -1)) rotate(calc(var(--a,0deg) * -1));
  }
#nepaSpin .wheel{--r:136px}
#nepaSpin .wheel.crowded .segment-label{font-size:11px;width:78px;margin-left:-39px;transform-origin:39px 22px}
#nepaSpin .segment-label.light{color:#fff;text-shadow:0 1px 2px rgba(15,19,70,.25)}
#nepaSpin .wheel-center{
    position:absolute;width:94px;height:94px;border-radius:50%;
    background:linear-gradient(145deg,#1d2777,#11185a);
    border:7px solid #fff;
    box-shadow:0 9px 24px rgba(18,25,104,.25),inset 0 2px 0 rgba(255,255,255,.16);
    z-index:4;color:white;display:grid;place-items:center;text-align:center;
    font-size:10px;font-weight:900;letter-spacing:1.2px
  }
#nepaSpin .wheel-center::after{
    content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(255,255,255,.16)
  }
#nepaSpin .pointer{
    position:absolute;top:-5px;left:50%;transform:translateX(-50%);z-index:8;
    width:38px;height:48px;
    background:linear-gradient(180deg,#ff8f76 0%,#ef6c52 80%);
    clip-path:polygon(50% 100%,0 0,100% 0);
    filter:drop-shadow(0 6px 8px rgba(18,25,104,.18))
  }
#nepaSpin .pointer:before{
    content:"";position:absolute;width:17px;height:17px;background:#ef6c52;border:4px solid #fff;border-radius:50%;
    left:50%;top:-8px;transform:translateX(-50%);box-shadow:0 4px 10px rgba(18,25,104,.16)
  }
#nepaSpin .lock-card{
    position:absolute;z-index:12;left:50%;top:50%;transform:translate(-50%,-50%);
    width:285px;padding:26px 24px 23px;border:1px solid rgba(255,255,255,.92);border-radius:22px;
    background:rgba(255,255,255,.74);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    box-shadow:0 18px 60px rgba(18,25,104,.20);text-align:center;
  }
#nepaSpin .lock-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:#e5e2fb;color:var(--navy);font-size:25px}
#nepaSpin .lock-card h3{margin:0 0 7px;font-size:22px;line-height:1.15;color:var(--navy);letter-spacing:-.6px}
#nepaSpin .lock-card p{margin:0 auto 18px;max-width:215px;font-size:12px;line-height:1.55;color:#7d8092}
#nepaSpin .lock-card .nsw-btn{width:100%;min-height:48px}
#nepaSpin .mini-note{font-size:10px!important;color:#9a9cad!important;margin-top:10px!important;margin-bottom:0!important}
#nepaSpin .wheel-controls{position:absolute;z-index:10;left:50%;top:50%;transform:translate(-50%,-50%);width:min(458px,84%);display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.64);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.72);border-radius:20px;padding:12px 14px;box-shadow:0 18px 42px rgba(18,25,104,.14);opacity:0;pointer-events:none;transition:opacity .32s ease,transform .32s ease,box-shadow .25s ease}
#nepaSpin .unlocked .wheel-controls{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
#nepaSpin .email-chip{min-width:0;flex:1;padding:2px 6px 2px 9px}
#nepaSpin .email-chip small{display:block;font-size:9px;text-transform:uppercase;letter-spacing:1px;font-weight:800;color:#9a9bad}
#nepaSpin .email-chip b{display:block;color:var(--navy);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
#nepaSpin .spin-btn{min-width:170px}
#nepaSpin .spin-btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
#nepaSpin .wheel-controls::before{content:"";position:absolute;inset:0;border-radius:20px;background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.06));pointer-events:none}
#nepaSpin .wheel-controls > *{position:relative;z-index:1}
#nepaSpin .result-card{position:absolute;z-index:14;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);width:340px;padding:25px;background:#fff;border-radius:22px;border:1px solid #e7e7ef;box-shadow:var(--shadow);text-align:center;opacity:0;pointer-events:none;transition:.3s ease}
#nepaSpin .result-card.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
#nepaSpin .result-kicker{font-size:10px;text-transform:uppercase;letter-spacing:1.6px;font-weight:900;color:var(--coral)}
#nepaSpin .result-card h3{font-size:31px;letter-spacing:-1px;color:var(--navy);margin:8px 0 6px}
#nepaSpin .result-card p{font-size:12px;line-height:1.55;color:var(--muted);margin:0}
#nepaSpin .code{margin:17px 0 10px;padding:13px;border:1px dashed #aaaaca;border-radius:12px;background:#f8f7fd;font-size:16px;font-weight:900;letter-spacing:1.2px;color:var(--navy)}
#nepaSpin .result-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:15px}
#nepaSpin .result-actions .nsw-btn{min-height:44px;padding:0 12px;font-size:12px}
#nepaSpin .reward-code-wrap{margin:18px 0 4px;text-align:left}
#nepaSpin .reward-code-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;font-size:9px;letter-spacing:1.1px;text-transform:uppercase;font-weight:900;color:#8a8da1}
#nepaSpin .reward-code-label span:last-child{letter-spacing:0;text-transform:none;font-weight:700;color:#9a9cad}
#nepaSpin .reward-code{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px 12px 14px;border:1px dashed #aeb0ca;border-radius:13px;background:#f8f7fd}
#nepaSpin .reward-code code{min-width:0;overflow-wrap:anywhere;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:900;letter-spacing:1px;color:var(--navy)}
#nepaSpin .copy-reward{flex:0 0 auto;min-height:36px!important;padding:0 12px!important;border-radius:9px!important;font-size:10px!important}
#nepaSpin .redeem-note{margin-top:10px!important;font-size:10px!important;color:#8d90a2!important}
/* FORM MODAL */
#nepaSpin .backdrop{position:fixed;inset:0;background:rgba(17,20,51,.48);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px;z-index:50}
#nepaSpin .nsw-modal{width:min(520px,100%);background:#fff;border-radius:24px;box-shadow:0 30px 100px rgba(9,14,61,.30);overflow:hidden;animation:nswPop .22s ease-out}
@keyframes nswPop{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}}
#nepaSpin .nsw-modal-head{display:flex;justify-content:space-between;gap:20px;padding:26px 28px 18px;border-bottom:1px solid #eeeeF3}
#nepaSpin .nsw-modal-head .eyebrow{font-size:10px}
#nepaSpin .nsw-modal-head h2{font-size:28px;letter-spacing:-1px;margin:7px 0 0;color:var(--navy)}
#nepaSpin .nsw-close{border:0;background:#f4f4f8;color:#74778a;width:36px;height:36px;border-radius:50%;font-size:22px;line-height:1}
#nepaSpin .form-body{padding:23px 28px 27px}
#nepaSpin .form-intro{font-size:12px;line-height:1.6;color:var(--muted);margin:0 0 21px}
#nepaSpin .field{margin-bottom:15px}
#nepaSpin .field label{display:block;font-size:11px;font-weight:800;color:#3b3f5b;margin:0 0 7px}
#nepaSpin .field input{width:100%;height:50px;border:1px solid #dcdeea;border-radius:11px;padding:0 14px;color:var(--ink);background:#fff}
#nepaSpin .field input::placeholder{color:#aaaebe}
#nepaSpin .field input:focus{border-color:var(--navy);outline:0;box-shadow:0 0 0 3px rgba(18,25,104,.08)}
#nepaSpin .form-footer{display:flex;gap:10px;align-items:center;margin-top:20px}
#nepaSpin .form-footer .nsw-btn{flex:1}
#nepaSpin .privacy{font-size:10px;line-height:1.45;color:#9295a5;margin:14px 0 0}
#nepaSpin .error{font-size:10px;color:#b43e34;margin-top:5px;display:none}
#nepaSpin .field.invalid .error{display:block}
#nepaSpin .field.invalid input{border-color:#d96256}
#nepaSpin .prize-sheet{position:fixed;right:24px;bottom:24px;z-index:30;width:290px;background:#fff;border:1px solid #e4e5ee;border-radius:18px;box-shadow:0 18px 50px rgba(18,25,104,.18);padding:18px}
#nepaSpin .prize-sheet h3{margin:0 0 10px;color:var(--navy);font-size:16px}
#nepaSpin .prize-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
#nepaSpin .prize-grid span{background:#f7f6fb;border-radius:8px;padding:8px 9px;font-size:10px;font-weight:800;color:#50546c}
#nepaSpin .sheet-close{position:absolute;right:10px;top:8px;border:0;background:none;color:#8f92a4;font-size:18px}
#nepaSpin .demo-reset{position:fixed;left:14px;bottom:14px;border:1px solid #dedfea;background:#fff;border-radius:9px;padding:8px 10px;color:#74778a;font-size:10px;z-index:20}
@media(max-width:1100px){
  #nepaSpin .hero{grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr);gap:18px}
  #nepaSpin .hero h1{font-size:58px;letter-spacing:-3.5px}
  #nepaSpin .reward-zone{min-height:500px;padding:22px 20px 84px}
  #nepaSpin .wheel-shell{width:430px}
  #nepaSpin .wheel-rim{width:392px;height:392px}
  #nepaSpin .wheel{width:356px;height:356px;--r:120px}
  #nepaSpin .segment-label{font-size:12px}
}
@media(max-width:820px){
  #nepaSpin .page{padding:22px}
  #nepaSpin .hero{grid-template-columns:1fr;text-align:center;padding-top:34px;gap:22px}
  #nepaSpin .copy{padding:0}
  #nepaSpin .nsw-lead{margin:auto}
  #nepaSpin .actions{justify-content:center}
  #nepaSpin .trust{justify-content:center}
  #nepaSpin .reward-zone{min-height:540px;padding:24px 18px 88px}
  #nepaSpin .hero h1{font-size:55px}
  #nepaSpin .wheel-controls{top:50%}
  #nepaSpin .unlocked .wheel-controls{transform:translate(-50%,-50%)}
}
@media(max-width:500px){
  #nepaSpin .page{padding:18px 14px}
  #nepaSpin .hero h1{font-size:45px;letter-spacing:-2.5px}
  #nepaSpin .nsw-lead{font-size:14px}
  #nepaSpin .actions{flex-direction:column;gap:8px}
  #nepaSpin .actions .nsw-btn{width:100%}
  #nepaSpin .reward-zone{min-height:490px;padding:20px 14px 82px}
  #nepaSpin .wheel-shell{width:362px;height:362px}
  #nepaSpin .wheel-rim{width:334px;height:334px}
  #nepaSpin .wheel{width:302px;height:302px;--r:102px}
  #nepaSpin .wheel-center{width:76px;height:76px}
  #nepaSpin .pointer{width:32px;height:42px;top:-4px}
  #nepaSpin .pointer:before{width:15px;height:15px;border-width:3px;top:-7px}
  #nepaSpin .segment-label{font-size:10px;width:76px;margin-left:-38px}
  #nepaSpin .lock-card{width:250px;padding:21px}
  #nepaSpin .lock-card h3{font-size:20px}
  #nepaSpin .wheel-controls{flex-direction:column;width:90%;top:50%;padding:12px}
  #nepaSpin .unlocked .wheel-controls{transform:translate(-50%,-50%)}
  #nepaSpin .email-chip{text-align:center;width:100%}
  #nepaSpin .spin-btn{width:100%}
  #nepaSpin .result-card{width:292px}
  #nepaSpin .nsw-modal-head,#nepaSpin .form-body{padding-left:21px;padding-right:21px}
}
/* GAMIFICATION LAYER */
#nepaSpin .journey{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0}
#nepaSpin .journey-step{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#fff;border:1px solid #e6e6f1;color:#626783;font-size:11px;font-weight:800;letter-spacing:.2px;box-shadow:0 8px 20px rgba(18,25,104,.05)}
#nepaSpin .journey-step .journey-num{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#eef0fb;color:var(--navy);font-size:10px;font-weight:900}
#nepaSpin .journey-step.active{background:linear-gradient(135deg,#202a83,#121968);border-color:#202a83;color:#fff;box-shadow:0 14px 28px rgba(18,25,104,.16)}
#nepaSpin .journey-step.active .journey-num{background:rgba(255,255,255,.18);color:#fff}
#nepaSpin .journey-step.done{background:#f2fff8;border-color:#c9efd9;color:#15704d}
#nepaSpin .journey-step.done .journey-num{background:#1ea66f;color:#fff}
#nepaSpin .game-badge{position:absolute;z-index:3;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.96);border:1px solid rgba(18,25,104,.08);box-shadow:0 12px 24px rgba(18,25,104,.12);display:flex;flex-direction:column;gap:2px;pointer-events:none}
#nepaSpin .game-badge strong{font-size:10px;line-height:1;font-weight:900;letter-spacing:1.2px;color:var(--navy);text-transform:uppercase}
#nepaSpin .game-badge span{font-size:12px;line-height:1.15;font-weight:800;color:#66708d}
#nepaSpin .game-badge.badge-a{left:22px;top:26px;transform:rotate(-6deg)}
#nepaSpin .game-badge.badge-b{right:26px;top:34px;transform:rotate(6deg)}
#nepaSpin .game-badge.badge-c{left:28px;bottom:40px;transform:rotate(-5deg)}
#nepaSpin .game-badge.badge-b strong{color:var(--coral)}
#nepaSpin .game-badge.badge-c strong{color:#1b8f65}
#nepaSpin .orbit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px dashed rgba(18,25,104,.12);pointer-events:none;z-index:1}
#nepaSpin .orbit-a{width:476px;height:476px;opacity:.8}
#nepaSpin .orbit-b{width:520px;height:520px;opacity:.45}
#nepaSpin .orbit-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--coral),#ffad89);box-shadow:0 6px 10px rgba(239,108,82,.24)}
#nepaSpin .orbit-a .orbit-dot{top:64px;left:calc(50% - 5px)}
#nepaSpin .orbit-b .orbit-dot{bottom:78px;right:88px;background:linear-gradient(135deg,#5f6dd7,#9ba8ff);box-shadow:0 6px 10px rgba(95,109,215,.22)}
#nepaSpin .mini-steps{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px 0 16px}
#nepaSpin .mini-step{font-size:10px;font-weight:800;color:#6f748c;padding:6px 9px;border-radius:999px;background:rgba(18,25,104,.05)}
#nepaSpin .mini-step.active{background:rgba(239,108,82,.12);color:var(--coral)}
#nepaSpin .wheel-controls{background:rgba(255,255,255,.64);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.72)}
#nepaSpin .email-chip small{color:#8d91a7}
#nepaSpin .spin-btn{background:linear-gradient(135deg,#ef6c52,#f38a5f);box-shadow:0 12px 22px rgba(239,108,82,.24)}
#nepaSpin .spin-btn:hover{background:linear-gradient(135deg,#f2795f,#ff9468)}
#nepaSpin .spin-btn:disabled{background:linear-gradient(135deg,#ef6c52,#f38a5f)}
#nepaSpin .result-card{overflow:hidden}
#nepaSpin .result-card::before{content:"";position:absolute;left:-20%;right:-20%;top:-38px;height:88px;background:radial-gradient(circle at 50% 100%, rgba(255,223,161,.72), rgba(255,223,161,0) 62%);pointer-events:none}
#nepaSpin .result-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:#fff7ec;border:1px solid #ffe0b5;color:#b56b14;font-size:10px;font-weight:900;letter-spacing:.9px;text-transform:uppercase;margin-bottom:10px}
#nepaSpin .result-badge .star{font-size:12px;color:#ef8a1f}
@media(max-width:820px){
  #nepaSpin .journey{justify-content:center}
  #nepaSpin .game-badge{padding:8px 12px}
  #nepaSpin .game-badge.badge-a{left:14px;top:18px}
  #nepaSpin .game-badge.badge-b{right:16px;top:24px}
  #nepaSpin .game-badge.badge-c{left:18px;bottom:34px}
  #nepaSpin .orbit-a{width:430px;height:430px}
  #nepaSpin .orbit-b{width:470px;height:470px}
}
@media(max-width:500px){
  #nepaSpin .journey-step{font-size:10px;padding:8px 11px}
  #nepaSpin .journey-step .journey-num{width:18px;height:18px;font-size:9px}
  #nepaSpin .game-badge{display:none}
  #nepaSpin .orbit-a{width:360px;height:360px}
  #nepaSpin .orbit-b{width:392px;height:392px}
}
/* INTERACTION POLISH ONLY — layout/content intentionally unchanged */
@keyframes nswSoftPulse{0%,100%{box-shadow:0 8px 18px rgba(18,25,104,.15)}50%{box-shadow:0 10px 26px rgba(18,25,104,.27)}}
@keyframes nswButtonSheen{0%{transform:translateX(-160%) skewX(-18deg)}55%,100%{transform:translateX(260%) skewX(-18deg)}}
@keyframes nswLockFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes nswSparkleFloat{0%,100%{transform:translateY(0) scale(1);opacity:.72}50%{transform:translateY(-8px) scale(1.14);opacity:1}}
@keyframes nswUnlockPop{0%{transform:scale(.98);filter:saturate(.95)}55%{transform:scale(1.025);filter:saturate(1.08)}100%{transform:scale(1);filter:saturate(1)}}
@keyframes nswRingBurst{0%{opacity:.55;transform:translate(-50%,-50%) scale(.72)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}}
@keyframes nswPointerTick{0%{transform:translateX(-50%) rotate(-6deg)}100%{transform:translateX(-50%) rotate(6deg)}}
@keyframes nswResultPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.82)}65%{opacity:1;transform:translate(-50%,-50%) scale(1.035)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes nswCodeGlow{0%,100%{box-shadow:0 0 0 rgba(18,25,104,0)}50%{box-shadow:0 0 0 5px rgba(18,25,104,.055)}}
@keyframes nswSheetIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes nswConfettiDrop{0%{transform:translate3d(0,-12px,0) rotate(0);opacity:1}100%{transform:translate3d(var(--drift),520px,0) rotate(var(--twirl));opacity:0}}
#nepaSpin .nsw-btn-primary{position:relative;overflow:hidden;isolation:isolate}
#nepaSpin .nsw-btn-primary::after{content:"";position:absolute;inset:-25% auto -25% -35%;width:28%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);transform:translateX(-160%) skewX(-18deg);pointer-events:none}
#nepaSpin .lock-card .nsw-btn-primary{animation:nswSoftPulse 2.8s ease-in-out infinite}
#nepaSpin .lock-card .nsw-btn-primary::after{animation:nswButtonSheen 3.4s ease-in-out infinite}
#nepaSpin .lock-card .nsw-btn-primary:active,#nepaSpin .spin-btn:active{transform:translateY(1px) scale(.985)}
#nepaSpin .lock-icon{animation:nswLockFloat 2.6s ease-in-out infinite}
#nepaSpin .spark.s1{animation:nswSparkleFloat 3.2s ease-in-out infinite}
#nepaSpin .spark.s2{animation:nswSparkleFloat 3.8s ease-in-out .5s infinite}
#nepaSpin .spark.s3{animation:nswSparkleFloat 2.9s ease-in-out .9s infinite}
#nepaSpin .reward-zone{transition:box-shadow .28s ease,transform .28s ease}
@media (hover:hover) and (pointer:fine){
  #nepaSpin .reward-zone.locked:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 35px rgba(18,25,104,.07)}
  #nepaSpin .reward-zone.locked:hover .wheel-visual{filter:blur(2.4px) saturate(.97) contrast(1);transform:scale(1.012)}
  #nepaSpin .lock-card:hover{box-shadow:0 22px 68px rgba(18,25,104,.24)}
  #nepaSpin .text-link:hover{color:var(--navy-2)}
}
#nepaSpin .nsw-modal{transform-origin:center center}
#nepaSpin .field input{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,background .2s ease}
#nepaSpin .field input:focus{transform:translateY(-1px);background:#fff}
#nepaSpin .field.input-ready input{border-color:#aeb3db;background:#fcfcff;box-shadow:0 0 0 3px rgba(18,25,104,.045)}
#nepaSpin .nsw-close{transition:transform .18s ease,background .18s ease,color .18s ease}
#nepaSpin .nsw-close:hover{transform:rotate(7deg);background:#ececf5;color:var(--navy)}
#nepaSpin .reward-zone.just-unlocked .wheel-visual{animation:nswUnlockPop .62s cubic-bezier(.2,.8,.25,1)}
#nepaSpin .reward-zone.just-unlocked::after{content:"";position:absolute;left:50%;top:50%;width:370px;height:370px;border:2px solid rgba(18,25,104,.22);border-radius:50%;z-index:9;pointer-events:none;animation:nswRingBurst .8s ease-out forwards}
#nepaSpin .unlocked .wheel-controls{transition:opacity .35s ease,transform .35s ease,box-shadow .25s ease}
#nepaSpin .unlocked .wheel-controls:hover{box-shadow:0 16px 40px rgba(18,25,104,.17)}
/* Before spin: soften the wheel so the center CTA is the focus. */
#nepaSpin .reward-zone.unlocked:not(.is-spinning):not(.has-result) .wheel-visual{
    filter:blur(5px) saturate(.88) contrast(.96);
    opacity:.82;
    transform:scale(.995);
  }
/* During spin: remove the blur and slide/fade the CTA away so the wheel is fully visible. */
#nepaSpin .reward-zone.is-spinning .wheel-visual{
    filter:none!important;
    opacity:1!important;
    transform:scale(1.015)!important;
  }
#nepaSpin .reward-zone.is-spinning .wheel-controls{
    opacity:0!important;
    pointer-events:none;
    transform:translate(-50%,calc(-50% + 72px)) scale(.94);
  }
/* After the prize appears, keep the wheel slightly soft behind the result. */
#nepaSpin .reward-zone.has-result .wheel-visual{
    filter:blur(3px) saturate(.94);
    opacity:.88;
    transform:scale(1);
  }
#nepaSpin .reward-zone.has-result .wheel-controls{
    opacity:0!important;
    pointer-events:none;
    transform:translate(-50%,calc(-50% + 44px)) scale(.96);
  }
/* After closing the winner popup, keep a persistent View my reward state. */
#nepaSpin .reward-zone.reward-saved .wheel-visual{
    filter:blur(5px) saturate(.9) contrast(.97);
    opacity:.84;
    transform:scale(.995);
  }
#nepaSpin .reward-zone.reward-saved .wheel-controls{
    opacity:1!important;
    pointer-events:auto!important;
    transform:translate(-50%,-50%)!important;
  }
#nepaSpin .reward-zone.reward-saved .spin-btn{
    background:linear-gradient(135deg,#121968,#28328d);
    box-shadow:0 12px 22px rgba(18,25,104,.20);
  }
#nepaSpin .reward-zone.is-spinning .pointer{animation:nswPointerTick .105s ease-in-out infinite alternate}
#nepaSpin .reward-zone.is-spinning .wheel-center{box-shadow:0 0 0 9px rgba(255,255,255,.38),0 8px 22px rgba(18,25,104,.28)}
#nepaSpin .reward-zone.is-spinning .spin-btn{animation:nswSoftPulse 1s ease-in-out infinite}
#nepaSpin .reward-zone.is-spinning .spark{animation-duration:.65s}
#nepaSpin .result-card.show{animation:nswResultPop .46s cubic-bezier(.2,.8,.25,1) both}
#nepaSpin .result-card.show .code{animation:nswCodeGlow 1.25s ease-in-out .35s 2}
#nepaSpin .prize-sheet:not([hidden]){animation:nswSheetIn .24s ease-out}
.nsw-micro-confetti{position:fixed;z-index:2100;width:8px;height:12px;border-radius:2px;pointer-events:none;top:0;animation:nswConfettiDrop var(--dur) cubic-bezier(.2,.65,.35,1) var(--delay) forwards}
@media (prefers-reduced-motion:reduce){
  #nepaSpin .lock-card .nsw-btn-primary,#nepaSpin .lock-card .nsw-btn-primary::after,#nepaSpin .lock-icon,#nepaSpin .spark,#nepaSpin .locked .wheel,#nepaSpin .reward-zone.just-unlocked .wheel-visual,#nepaSpin .reward-zone.just-unlocked::after,#nepaSpin .reward-zone.is-spinning .pointer,#nepaSpin .reward-zone.is-spinning .spin-btn,#nepaSpin .result-card.show,#nepaSpin .result-card.show .code,#nepaSpin .prize-sheet:not([hidden]),.nsw-micro-confetti{animation:none!important}
  #nepaSpin .reward-zone,#nepaSpin .wheel-visual,#nepaSpin .field input,#nepaSpin .nsw-close{transition:none!important}
}
/* ---------------------------------------------------------------- page shell */
/* Bootstrap's reboot puts margins on headings, paragraphs and lists; the design
   sets its own where it wants them. */
#nepaSpin h1,#nepaSpin h2,#nepaSpin h3,#nepaSpin h4,#nepaSpin p,#nepaSpin ul,#nepaSpin ol{margin:0;padding:0}
#nepaSpin a{text-decoration:none}
#nepaSpin{font-size:16px;font-weight:400}
/* website.layout stretches <main> to push the footer down, so the campaign has
   to fill it. The cream stays on #nepaSpin rather than on <main> so that blocks
   dropped in the builder zone below keep the site's own background. */
main:has(> #nepaSpin){display:flex;flex-direction:column}
#nepaSpin{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center}

/* ------------------------------------------------------- module-only pieces */
/* Programmatic focus lands on the prize heading when the card opens; it should
   not draw the browser's focus ring. */
#nepaSpin [tabindex="-1"]:focus{outline:none}

/* The reward card carries more than the prototype's - conditions, the account
   state, sign-in and the shop link - so the zone makes room for it instead of
   clipping the claim buttons. The locked and unlocked states keep the
   prototype's height exactly. */
#nepaSpin .reward-zone{transition:box-shadow .28s ease,transform .28s ease,min-height .3s ease}
#nepaSpin .reward-zone.has-result{min-height:600px}

#nepaSpin .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* the "not running" / "all claimed" page has no wheel beside the copy */
#nepaSpin .hero.single{grid-template-columns:1fr}

/* the wheel is server-drawn, so a wedge can be any colour and any text colour */
#nepaSpin .segment-label{color:inherit}

/* "Not you? Change details" under the unlocked email */
#nepaSpin .email-chip button{border:0;background:none;padding:0;margin-top:3px;font-size:10px;color:#8a8da1;text-decoration:underline;text-underline-offset:2px}

/* the server can refuse a spin: say so without leaving the zone */
#nepaSpin .spin-error{position:absolute;z-index:13;left:50%;bottom:20px;transform:translateX(-50%);width:min(430px,92%);margin:0;padding:10px 13px;border-radius:12px;background:#fff4f1;border:1px solid #f3c5bb;color:#9e3a2c;font-size:12px;line-height:1.45;text-align:center}

/* the reward card carries more than the prototype's: conditions, the account
   state and the shop link, so it has to be able to scroll.
   Vertically only: the warm glow above the card (.result-card::before) is drawn
   deliberately wider than it (left/right -20%) and used to be clipped by the
   overflow:hidden above. Plain overflow:auto turned that bleed into a
   horizontal scrollbar on every card. */
#nepaSpin .result-card{max-height:calc(100% - 24px);overflow-x:hidden;overflow-y:auto}
#nepaSpin .result-card h3.long{font-size:23px;letter-spacing:-.5px}
#nepaSpin .result-meta{margin-top:8px!important}
#nepaSpin .result-meta b{color:var(--ink)}
#nepaSpin .result-meta.expired b{color:#b43e34}
#nepaSpin .result-terms{margin-top:11px;text-align:left;font-size:11px;color:var(--muted)}
#nepaSpin .result-terms summary{cursor:pointer;font-weight:800;color:var(--navy);text-align:center;list-style-position:inside}
#nepaSpin .result-terms ul{margin:9px 0 0;padding-left:17px;line-height:1.5}
#nepaSpin .result-terms li+li{margin-top:4px}
#nepaSpin .result-account{margin-top:12px;padding:11px;border-radius:12px;background:#f7f6fb;text-align:left}
#nepaSpin .result-account p{font-size:11px}
#nepaSpin .result-auth{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
#nepaSpin .result-auth.single{grid-template-columns:1fr}
#nepaSpin .result-auth .nsw-btn{min-height:44px;padding:0 10px;font-size:12px;line-height:1.2;text-align:center}
#nepaSpin .result-shop{width:100%;min-height:44px;margin-top:8px;font-size:12px}

/* the form has a phone field and can report a server-side problem */
#nepaSpin .form-alert{margin:0 0 16px;padding:10px 13px;border-radius:11px;background:#fff4f1;border:1px solid #f3c5bb;color:#9e3a2c;font-size:12px;line-height:1.45}
#nepaSpin .field select{width:100%;height:50px;border:1px solid #dcdeea;border-radius:11px;padding:0 14px;color:var(--ink);background:#fff}
#nepaSpin .field input[readonly]{background:#f7f6fb;color:#50546c}

/* the prize sheet is filled from Odoo: each wedge with its colour and terms */
#nepaSpin .prize-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
#nepaSpin .prize-list li{background:#f7f6fb;border-radius:8px;padding:8px 9px;font-size:10px;line-height:1.45;color:#7d8092}
#nepaSpin .prize-list b{display:block;font-size:11px;font-weight:800;color:#50546c}
#nepaSpin .prize-list i{display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:50%;vertical-align:-1px;box-shadow:inset 0 0 0 1px rgba(18,25,104,.15)}

/* sales managers get a second sheet on the other side */
#nepaSpin .tools-sheet{left:24px;right:auto}
#nepaSpin .tools-sheet .nsw-btn{width:100%;min-height:42px;font-size:12px;margin-top:8px}
#nepaSpin .tools-sheet .field{margin-bottom:10px}
#nepaSpin .tools-sheet .field select{height:42px}
#nepaSpin .tools-sheet label.inline{display:flex;gap:8px;align-items:center;font-size:11px;color:#50546c}
#nepaSpin .tools-note{font-size:10px;line-height:1.45;color:#9a9cad;margin:10px 0 0}

/* overlays have to clear the site header, sticky at Bootstrap's $zindex-fixed */
#nepaSpin .backdrop{z-index:2000}
#nepaSpin .prize-sheet{z-index:1990;max-height:calc(100vh - 48px);overflow:auto}
#nepaSpin .demo-reset{z-index:1980}

@media(max-width:500px){
  #nepaSpin .prize-sheet{left:14px;right:14px;bottom:14px;width:auto}
  #nepaSpin .result-auth{grid-template-columns:1fr}
}

/* A wedge that hands out no reward: the same card, with the celebration taken
   out of it. The badge loses its gold, the prize name its coral kicker, and the
   note carries the date the email may play again. */
#nepaSpin .result-card.no-reward .result-badge{background:#f4f5f8;border-color:#e2e4ec;color:#5b6070}
#nepaSpin .result-card.no-reward .result-badge .star{color:#9aa0b4}
#nepaSpin .result-card.no-reward .result-kicker{color:var(--muted)}
#nepaSpin .result-note{margin-top:10px!important;padding:11px;border-radius:12px;background:#f7f6fb;font-size:12px;color:var(--muted);text-align:left}
#nepaSpin .result-note b{color:var(--navy)}