/*
  Prize form — claymorphism.

  Rules this file follows throughout:
    - No `border` and no `outline` anywhere. Depth comes from shadows only.
      Focus is still clearly visible: it becomes a coloured glow instead of an
      outline, so removing the outline does not cost keyboard users anything.
    - Two shadow recipes do all the work:
        raised   = dark shadow bottom-right + white shadow top-left  (puffy)
        pressed  = the same two, but inset                           (scooped)
      Anything you act ON is raised. Anything you type INTO is pressed.
    - Radii are large and consistent, which is what makes clay read as clay.

  Easings:
    --spring  overshoots and settles — for anything the user just acted on
    --glide   no overshoot — for anything moving on its own
*/
.prize{
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --glide:  cubic-bezier(.22, .61, .36, 1);

  --ink:     #454b57;
  --muted:   #858c9b;
  --red:     #eb2731;
  --red-dk:  #a90911;

  /* Clay palette. --lo is deliberately blue-grey, not black: neutral shadows
     read as dirt, cool ones read as depth. */
  --surface: #eef0f6;
  --sunk:    #e7e9f1;
  --hi:      #ffffff;
  --lo:      rgba(150, 164, 192, .55);
  --lo-soft: rgba(150, 164, 192, .30);

  /*
    An overlay on top of the wheel, not a page. It is invisible and inert until
    form.js adds .is-in a couple of seconds after load, and it leaves again for
    good once the phone is verified.
  */
  position:fixed;
  inset:0;
  z-index:30;
  display:grid;
  place-items:center;
  padding:16px;
  font-family:var(--brand-font, Tajawal, Inter, system-ui, sans-serif);
  color:var(--ink);

  opacity:0;
  pointer-events:none;
  transition:opacity .45s var(--glide);
}

/* A soft scrim so the wheel reads as "behind" rather than competing. */
.prize::before{
  content:"";
  position:absolute;
  inset:0;
  /* No backdrop-filter: blurring the whole viewport behind an overlay is the
     single most expensive thing on this page for a mid-range phone. */
  background:radial-gradient(circle at 50% 50%, rgba(240,242,247,.8) 0%, rgba(214,218,230,.9) 70%);
  opacity:0;
  transition:opacity .5s var(--glide);
}

.prize.is-in{ opacity:1; pointer-events:auto; }
.prize.is-in::before{ opacity:1; }

.prize > *{ position:relative; }

/*
  The overlay's own entrance and exit live on a WRAPPER inside .prize, not on
  .step. An earlier version animated .prize.is-in .step.is-active, which at
  specificity 0,3,0 beat .step.is-leaving (0,2,0) — so the outgoing step kept a
  finished formEnter instead of running stepOut, its animationend never fired,
  and goTo()'s completion callback never ran. The form froze on step one.

  Keeping the two concerns on different elements means they can never compete.
*/
@keyframes formEnter{
  0%  { opacity:0; transform:translateY(38px) scale(.9); }
  60% { opacity:1; transform:translateY(-6px) scale(1.02); }
  100%{ opacity:1; transform:none; }
}

.prize.is-in .prize__stage{
  animation:formEnter .8s cubic-bezier(.34,1.56,.64,1) both;
}

/* Leaving for good: the card drops away and the wheel is uncovered. */
@keyframes formLeave{
  0%  { opacity:1; transform:none; }
  100%{ opacity:0; transform:translateY(-34px) scale(.86); }
}

.prize.is-out{ pointer-events:none; }
.prize.is-out::before{ opacity:0; }
.prize.is-out .prize__stage{ animation:formLeave .6s cubic-bezier(.5,0,.75,0) both; }

.prize__stage{ width:100%; display:grid; place-items:center; }

.prize *{
  border:0;
  outline:0;
}

/* ------------------------------------------------------------------ card */

.card{
  position:relative;
  width:100%;
  max-width:376px;
  padding:22px 20px 20px;
  border-radius:34px;
  background:linear-gradient(145deg, #f7f8fc, #e8eaf2);
  /* No outer white glow — one soft dark shadow only. The inner highlights are
     what still give the panel its volume. */
  box-shadow:
    20px 22px 46px var(--lo),
    inset 0 10px 20px rgba(255,255,255,.85),
    inset 0 -10px 20px var(--lo-soft);
}

.card--wide{ max-width:400px; }

.card__head{ text-align:center; margin-bottom:16px; }

/* The red wordmark from media/. Its natural ratio is 1903x1043, so height is
   left to auto rather than guessed. */
.card__mark{
  display:block;
  width:min(62%, 190px);
  height:auto;
  margin:2px auto 18px;
}

.card__title{
  margin:0;
  font-size:26px;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.25;
}

.card__sub{ margin:5px 0 0; color:var(--muted); font-size:13.5px; }

/* -------------------------------------------------- entrance choreography */

@keyframes riseIn{
  from{ opacity:0; transform:translateY(16px) scale(.97); }
  to  { opacity:1; transform:none; }
}

.step.is-active [style*="--i"]{
  animation:riseIn .6s var(--spring) backwards;
  animation-delay:calc(var(--i, 0) * 60ms + 110ms);
}

@keyframes popIn{
  0%  { opacity:0; transform:scale(.6) rotate(-8deg); }
  60% { opacity:1; transform:scale(1.12) rotate(3deg); }
  100%{ opacity:1; transform:none; }
}

.step.is-active .pop{ animation:popIn .7s var(--spring) backwards; animation-delay:.1s; }

/* ------------------------------------------------------------ step slides */

.step{ display:none; width:100%; }
.step.is-active{ display:block; }

@keyframes stepIn{
  from{ opacity:0; transform:translateX(var(--from, 40px)) scale(.94); }
  to  { opacity:1; transform:none; }
}

@keyframes stepOut{
  from{ opacity:1; transform:none; }
  to  { opacity:0; transform:translateX(var(--to, -40px)) scale(.94); }
}

.step.is-entering{ animation:stepIn .55s var(--glide) both; }
.step.is-leaving { animation:stepOut .32s var(--glide) both; display:block; }

/* ----------------------------------------------------------------- fields */

.form{ display:flex; flex-direction:column; gap:13px; }

.field{ position:relative; display:block; padding:0; margin:0; min-width:0; }

.field__label{
  display:block;
  margin:0 4px 6px;
  font-size:12.5px;
  font-weight:700;
  color:#6d7484;
}

.field__hint{ font-style:normal; font-weight:500; color:var(--muted); font-size:11.5px; }

/* The pressed recipe, shared by every input surface. */
.field__input,
.phone,
.picker,
.gender,
.otp__box{
  background:var(--sunk);
  box-shadow:
    inset 6px 6px 12px var(--lo),
    inset -6px -6px 12px var(--hi);
}

.field__input{
  width:100%;
  padding:13px 17px;
  border-radius:17px;
  font:inherit;
  font-size:16px;               /* 16px stops iOS Safari zooming on focus */
  font-weight:600;
  color:var(--ink);
  transition:box-shadow .3s var(--glide), background .25s;
}

.field__input::placeholder{ color:#a7aebd; font-weight:500; }

.field__input:focus,
.phone:focus-within{
  background:#f0f2f8;
  box-shadow:
    inset 5px 5px 10px var(--lo-soft),
    inset -5px -5px 10px var(--hi),
    0 0 0 4px rgba(235,39,49,.18);
}

.field__err,
.form__fail{
  display:block;
  margin:5px 6px 0;
  color:var(--red-dk);
  font-size:12px;
  font-weight:600;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .2s, transform .2s;
}

.field__err.is-shown,
.form__fail.is-shown{ opacity:1; transform:none; }

.form__fail{ text-align:center; }

.is-invalid .field__input,
.is-invalid .phone,
.is-invalid .gender{
  background:#f7eaea;
  box-shadow:
    inset 6px 6px 12px rgba(169,9,17,.20),
    inset -6px -6px 12px var(--hi),
    0 0 0 3px rgba(169,9,17,.14);
}

@keyframes shake{
  0%,100%{ transform:translateX(0); }
  15%{ transform:translateX(-9px); }
  30%{ transform:translateX(8px); }
  45%{ transform:translateX(-6px); }
  60%{ transform:translateX(4px); }
  80%{ transform:translateX(-2px); }
}

.shake{ animation:shake .45s cubic-bezier(.36,.07,.19,.97); }

/* ----------------------------------------------------------------- gender */

.gender{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:5px;
  border-radius:19px;
  overflow:hidden;
  transition:box-shadow .3s var(--glide), background .25s;
}

/* Raised red clay thumb, sliding inside the scooped track. */
.gender__thumb{
  position:absolute;
  top:5px;
  bottom:5px;
  left:0;
  width:var(--w, 50%);
  border-radius:15px;
  background:linear-gradient(145deg, #ff5a64, #cf141e);
  box-shadow:
    6px 6px 14px rgba(169,9,17,.34),
    -4px -4px 10px rgba(255,255,255,.5),
    inset 0 4px 9px rgba(255,255,255,.30),
    inset 0 -4px 9px rgba(120,4,10,.32);
  transform:translateX(var(--x, 0px));
  opacity:0;
  transition:
    transform .48s var(--spring),
    width .48s var(--spring),
    opacity .2s ease;
  pointer-events:none;
}

.gender.is-set .gender__thumb{ opacity:1; }

.gender__opt{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:11px 8px;
  border-radius:15px;
  background:transparent;
  font:inherit;
  font-size:14.5px;
  font-weight:700;
  color:#7b8291;
  cursor:pointer;
  transition:color .3s var(--glide);
  -webkit-tap-highlight-color:transparent;
}

.gender__opt[aria-checked="true"]{ color:#fff; }

.gender__icon{
  width:18px;
  height:18px;
  transition:transform .5s var(--spring);
}

.gender__opt[aria-checked="true"] .gender__icon{ transform:scale(1.18) rotate(-8deg); }

@keyframes nudge{
  0%{ transform:none; }
  40%{ transform:translateY(-3px) scale(1.05); }
  100%{ transform:none; }
}

.gender__opt.is-just-picked{ animation:nudge .42s var(--spring); }

/* ------------------------------------------------------------------ phone */
/*
  Iraq only, so +964 is a static label rather than a control. The whole row is
  one scooped surface and the input inside it is transparent — otherwise the
  input would need its own clay treatment and read as a box within a box.
*/
.phone{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:8px;
  padding:0 17px;
  border-radius:17px;
  transition:box-shadow .3s var(--glide), background .25s;
}

.phone__cc{
  direction:ltr;
  font-size:14.5px;
  font-weight:800;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  padding-inline-end:9px;
  /* A hairline divider drawn with a shadow, since borders are off the table. */
  box-shadow:1px 0 0 rgba(150,164,192,.42);
}

.phone__num{
  width:100%;
  padding:13px 0;
  background:transparent;
  font:inherit;
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  direction:ltr;
  text-align:left;
  letter-spacing:.6px;
  font-variant-numeric:tabular-nums;
}

.phone__num::placeholder{ color:#a7aebd; font-weight:500; letter-spacing:.4px; }

/* -------------------------------------------------------------------- cta */

.cta{
  position:relative;
  overflow:hidden;
  margin-top:3px;
  padding:15px 20px;
  border-radius:19px;
  background:linear-gradient(145deg, #ff5a64, #cf141e);
  color:#fff;
  font:inherit;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  box-shadow:
    10px 10px 22px rgba(169,9,17,.32),
    -6px -6px 16px rgba(255,255,255,.55),
    inset 0 5px 12px rgba(255,255,255,.28),
    inset 0 -5px 12px rgba(120,4,10,.30);
  transition:transform .22s var(--spring), box-shadow .22s, filter .2s;
  -webkit-tap-highlight-color:transparent;
}

.cta:hover{
  transform:translateY(-2px);
  box-shadow:
    13px 13px 28px rgba(169,9,17,.36),
    -7px -7px 18px rgba(255,255,255,.6),
    inset 0 5px 12px rgba(255,255,255,.28),
    inset 0 -5px 12px rgba(120,4,10,.30);
}

/* Pressing squashes the clay: the outer shadow collapses inward. */
.cta:active{
  transform:translateY(1px) scale(.985);
  box-shadow:
    4px 4px 10px rgba(169,9,17,.28),
    inset 0 4px 12px rgba(120,4,10,.34),
    inset 0 -3px 8px rgba(255,255,255,.18);
}

.cta:disabled{ cursor:not-allowed; filter:saturate(.65) brightness(1.04); transform:none; }

@keyframes sweep{
  0%  { transform:translateX(-140%) skewX(-18deg); }
  55% { transform:translateX(140%) skewX(-18deg); }
  100%{ transform:translateX(140%) skewX(-18deg); }
}

.cta__shine{
  position:absolute;
  top:0;
  bottom:0;
  width:38%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  animation:sweep 3.4s ease-in-out infinite;
  pointer-events:none;
}

.cta__label{ position:relative; z-index:1; }

/* A conic gradient masked into a ring, not a border. With this gone, the only
   border/outline declarations left in this file are the reset at the top. */
.cta__spinner{
  position:absolute;
  inset:0;
  margin:auto;
  width:20px;
  height:20px;
  border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,255,255,0), rgba(255,255,255,.25) 55%, #fff);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  opacity:0;
  animation:spin .7s linear infinite;
}

@keyframes spin{ to{ transform:rotate(360deg); } }

.cta.is-busy .cta__label{ opacity:0; }
.cta.is-busy .cta__spinner{ opacity:1; }
.cta.is-busy .cta__shine{ animation-play-state:paused; opacity:0; }

.form__note{ margin:0 6px; text-align:center; font-size:11.5px; color:var(--muted); line-height:1.5; }

/* -------------------------------------------------------------------- otp */

.otp{ display:grid; gap:9px; }

.otp__box{
  width:100%;
  aspect-ratio:1 / 1.14;
  padding:0;
  border-radius:16px;
  font:inherit;
  font-size:23px;
  font-weight:800;
  text-align:center;
  color:var(--ink);
  transition:box-shadow .3s var(--glide), transform .3s var(--spring), background .25s;
}

.otp__box:focus{
  background:#f0f2f8;
  box-shadow:
    inset 5px 5px 10px var(--lo-soft),
    inset -5px -5px 10px var(--hi),
    0 0 0 4px rgba(235,39,49,.18);
  transform:translateY(-2px);
}

/* A filled box pops OUT of the surface — the one place the recipe inverts, so
   progress through the code is readable at a glance. */
@keyframes boxPop{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.2); }
  100%{ transform:scale(1); }
}

.otp__box.is-filled{
  background:linear-gradient(145deg, #fdfdff, #eceef6);
  color:var(--red-dk);
  box-shadow:
    6px 6px 13px var(--lo),
    -5px -5px 12px var(--hi);
  animation:boxPop .34s var(--spring);
}

.otp__to{ font-weight:800; color:var(--ink); direction:ltr; unicode-bidi:isolate; }

.otp__foot{ display:flex; justify-content:space-between; gap:12px; }

.linkbtn{
  background:none;
  padding:6px 2px;
  font:inherit;
  font-size:13px;
  font-weight:700;
  color:var(--red-dk);
  cursor:pointer;
  transition:opacity .2s, transform .2s;
}

.linkbtn:disabled{ color:var(--muted); cursor:default; }
.linkbtn:not(:disabled):hover{ transform:translateY(-1px); }

/* ------------------------------------------------------------ small phones */

@media (max-width:370px){
  .card{ padding:19px 16px 17px; border-radius:29px; }
  .card__title{ font-size:23px; }
  .picker{ --row:31px; }
  .otp{ gap:7px; }
  .otp__box{ font-size:20px; border-radius:14px; }
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion:reduce){
  .prize *,
  .prize *::before,
  .prize *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .cta__shine{ display:none; }
  .picker__col{ scroll-behavior:auto; }
}