/* ==========================================================================
   MISS J BIMBEL CENTER · Annual Student Information Update
   ---------------------------------------------------------------------------
   Sections 1-4 (tokens, base, buttons, nav) are copied verbatim from
   enrollment.css so this page shares the exact same brand — colors, fonts,
   radii, shadows, nav, footer — as the rest of the site. Everything from
   section 5 onward is new and specific to this page.

   This is explicitly NOT the enrollment wizard: it's a short, 3-step flow
   for submitting an existing student's annual information (parent info →
   student info → confirmation, with a backend-generated student code shown
   at the end), self-contained in its own file so nothing here can affect
   enrollment.css or enrollment.js.
   ========================================================================== */

/* ---------- 1 · Tokens (identical to enrollment.css) ---------- */
:root{
  --sky:#8ECDF3; --sky-soft:#EAF6FE;
  --sun:#FFC94D; --sun-soft:#FFF3D6;
  --coral:#FF8A5F; --coral-soft:#FFE4D8;
  --mint:#7FD8B4; --mint-soft:#E2F7EE;
  --cream:#FFF6E8; --white:#FFFDF9;
  --ink:#2B4066; --ink-soft:#5E7194;
  --dusk:#35548F; --night:#1E3061; --deep-night:#152347;

  --font-display:'Fredoka',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,sans-serif;
  --r-lg:34px; --r-md:22px; --r-sm:16px;
  --shadow:0 12px 30px rgba(43,64,102,.10);
  --shadow-big:0 22px 50px rgba(43,64,102,.16);
  --wrap:1120px;
  --form-wrap:760px;
}

/* ---------- 2 · Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);color:var(--ink);background:var(--cream);
  line-height:1.6;font-size:17px;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:8px}
::selection{background:var(--sun);color:var(--ink)}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.15}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,40px)}

/* ---------- 3 · Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;
  padding:15px 28px;min-height:52px;border-radius:999px;border:none;cursor:pointer;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;
}
.btn.big{padding:18px 36px;font-size:1.15rem;min-height:60px}
.btn-sun{background:var(--sun);color:var(--ink);box-shadow:0 10px 26px rgba(255,201,77,.5)}
.btn-sun:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 34px rgba(255,201,77,.55)}
.btn-sun:active{transform:translateY(-1px) scale(.99)}
.btn-sun:disabled{opacity:.65;cursor:not-allowed;transform:none;box-shadow:none}
.btn-cloud{background:#fff;color:var(--ink);box-shadow:var(--shadow);border:1px solid rgba(43,64,102,.08)}
.btn-cloud:hover{transform:translateY(-3px);box-shadow:var(--shadow-big)}

/* ---------- 4 · Nav (identical to enrollment.css) ---------- */
.nav{
  position:sticky;top:0;z-index:100;background:rgba(255,253,249,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(43,64,102,.08);
}
.nav-inner{
  max-width:var(--wrap);margin:0 auto;padding:14px clamp(20px,4vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:44px;width:auto;display:block;border-radius:12px;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.logo:hover img{transform:scale(1.06) rotate(-2deg)}
.logo span{font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--ink)}
.nav-help{font-size:.92rem;font-weight:700;color:var(--ink-soft)}
.nav-help a{color:var(--dusk);border-bottom:2px solid var(--sky-soft);transition:border-color .2s ease}
.nav-help a:hover{border-color:var(--sky)}

/* ---------- 5 · Shared scaffolding ---------- */
.kicker{
  display:inline-block;font-family:var(--font-display);font-weight:800;font-size:.76rem;
  letter-spacing:.16em;text-transform:uppercase;background:#fff;border-radius:999px;
  padding:8px 18px;margin-bottom:18px;color:var(--ink);box-shadow:var(--shadow);
}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

.art-twinkle{animation:artTwinkle 2.6s ease-in-out infinite,twinkleFloat 5s ease-in-out infinite}
.art-twinkle-slow{animation:artTwinkle 3.4s ease-in-out infinite .4s,twinkleFloat 6.2s ease-in-out infinite .5s}
@keyframes artTwinkle{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
@keyframes twinkleFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}

.dot{width:8px;height:8px;border-radius:50%;background:var(--mint);flex:none;display:inline-block}

/* ---------- 6 · Hero ---------- */
.su-hero{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(48px,9vw,88px) 0 clamp(40px,6vw,56px);
  background:linear-gradient(180deg,var(--sky-soft) 0%,var(--cream) 65%);
}
.su-hero-rainbow{
  position:absolute;bottom:-6%;left:50%;translate:-50% 0;
  width:min(760px,110vw);opacity:.8;pointer-events:none;
  filter:drop-shadow(0 0 22px rgba(255,196,0,.4)) drop-shadow(0 14px 32px rgba(255,149,0,.2));
}
.su-hero-star{position:absolute;width:clamp(18px,2.6vw,26px);height:auto;pointer-events:none}
.star-1{top:12%;left:10%}
.star-2{top:22%;right:12%}
.star-3{bottom:18%;right:6%}

.su-hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;max-width:var(--form-wrap);margin:0 auto}
.su-hero-icon{
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-big);
  padding:clamp(14px,2.6vw,20px);margin-bottom:clamp(18px,3vw,24px);
}
.su-hero-icon svg{width:clamp(56px,8vw,72px);height:auto}
.su-hero-inner h1{font-size:clamp(2rem,4.8vw,2.9rem);color:var(--ink)}
.su-hero-sub{font-size:1.08rem;color:var(--ink-soft);margin-top:16px;max-width:38rem}

.su-hero-why{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-top:clamp(28px,4vw,36px);width:100%;
}
.su-hero-why-item{
  background:#fff;border-radius:var(--r-md);padding:18px 16px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
}
.su-hero-why-icon{width:36px;height:36px;flex:none}
.su-hero-why-icon svg{width:100%;height:100%}
.su-hero-why-item p{font-size:.88rem;font-weight:700;color:var(--ink);line-height:1.4}

.su-hero-note{
  display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;
  font-size:.9rem;color:var(--ink-soft);margin-top:clamp(24px,4vw,32px);
}

@media (max-width:720px){
  .su-hero-why{grid-template-columns:1fr}
}

/* ---------- 7 · Progress indicator (same visual language as enrollment) ---------- */
.progress{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.progress-step{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;
  font-size:.86rem;color:var(--ink-soft);background:none;border:none;cursor:default;padding:6px 4px;
}
.progress-step .num{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:#fff;color:var(--ink-soft);font-size:.82rem;box-shadow:var(--shadow);flex:none;
}
.progress-step.is-active{color:var(--ink)}
.progress-step.is-active .num{background:var(--sun);color:var(--ink)}
.progress-step.is-done .num{background:var(--mint);color:#fff}
.progress-line{width:28px;height:2px;background:rgba(43,64,102,.15);border-radius:2px}

.su-flow-section{padding:clamp(40px,7vw,64px) 0 clamp(64px,9vw,100px)}
.su-flow-wrap{max-width:var(--form-wrap)}
.su-progress{margin-bottom:clamp(28px,4vw,40px)}

/* ---------- 8 · Card + step scaffolding ---------- */
.su-card{
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-big);
  padding:clamp(24px,5vw,48px);
}
.su-step{display:none}
.su-step.is-active{display:block;animation:suStepIn .4s ease}
@keyframes suStepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.su-step-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:clamp(20px,3.5vw,28px)}
.su-step-icon{
  flex:none;width:52px;height:52px;border-radius:16px;background:var(--sky-soft);
  display:flex;align-items:center;justify-content:center;
}
.su-step-icon svg{width:28px;height:28px}
.su-step-head h2{font-size:clamp(1.3rem,3vw,1.6rem);color:var(--ink);margin-bottom:6px}
.su-step-note{color:var(--ink-soft);font-size:.98rem;max-width:32rem}

/* ---------- 9 · Form fields (same visual language as enrollment) ---------- */
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-top:4px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1 / -1}
.field label{font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--ink)}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="date"],
.field input[type="number"],
.field select,
.field textarea{
  width:100%;padding:13px 16px;border-radius:var(--r-sm);border:1.5px solid rgba(43,64,102,.14);
  background:var(--cream);color:var(--ink);font-family:var(--font-body);font-size:1rem;
  transition:border-color .2s ease,background .2s ease;
}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--sky);background:#fff;
}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235E7194' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.field-error{font-size:.82rem;color:var(--coral);font-weight:700;min-height:1em;display:none}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--coral)}
.field.is-invalid .field-error{display:block}

.pill-group{display:flex;flex-wrap:wrap;gap:10px}
.pill-option{position:relative;cursor:pointer}
.pill-option input{position:absolute;opacity:0;width:1px;height:1px}
.pill-option span{
  display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;
  background:var(--cream);border:1.5px solid rgba(43,64,102,.14);font-weight:700;font-size:.92rem;
  color:var(--ink-soft);transition:all .2s ease;
}
.pill-option input:checked + span{background:var(--sky);border-color:var(--sky);color:var(--ink)}
.pill-option input:focus-visible + span{outline:3px solid var(--sun);outline-offset:2px}

@media (max-width:640px){
  .field-grid{grid-template-columns:1fr}
}

/* ---------- 11 · Step actions ---------- */
.su-step-actions{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:clamp(8px,2vw,16px);
}
.su-step-actions-end{justify-content:flex-end}

/* ---------- 12 · Confirmation ---------- */
.su-success{text-align:center;max-width:32rem;margin:0 auto}
.su-success-icon-wrap{width:96px;height:96px;margin:0 auto 20px}
.su-success h2{font-size:clamp(1.5rem,3.4vw,1.9rem);color:var(--ink);margin-bottom:10px}
.su-success-sub{color:var(--ink-soft);font-size:1.02rem}

/* The backend-issued NIS and Student Code are read-only identifiers a
   parent must be able to see and save, so they get the same visual
   prominence as the enrollment flow's own "Nomor Pendaftaran" moment —
   a dedicated accent card, reused both for the auto-identified NIS shown
   before the form and for both identifiers on the confirmation screen. */
.su-code-card{
  background:linear-gradient(180deg,var(--sun-soft) 0%,#fff 100%);
  border:1.5px solid rgba(255,201,77,.5);border-radius:var(--r-md);
  padding:22px 24px;margin:26px 0 18px;text-align:center;
}
.su-code-card + .su-code-card{margin-top:0}
.su-code-label{display:block;font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.su-code-value{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,4vw,2.1rem);color:var(--ink);margin:6px 0;letter-spacing:.02em}
.su-code-hint{display:block;font-size:.84rem;color:var(--ink-soft)}

.su-success-summary{
  background:var(--cream);border-radius:var(--r-md);padding:20px 22px;margin:26px 0;
  display:flex;flex-direction:column;gap:12px;text-align:left;
}
.su-success-summary-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.94rem}
.su-success-summary-row span{color:var(--ink-soft);font-weight:600}
.su-success-summary-row strong{color:var(--ink);font-family:var(--font-display);font-weight:700;text-align:right}

.su-success-note{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:.9rem;color:var(--ink-soft);margin-bottom:26px;
}
.su-success-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px}

/* ---------- 13 · Footer (identical to the rest of the site) ---------- */
.foot{background:var(--night);color:rgba(255,255,255,.75);padding:40px 0}
.foot-inner{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:.92rem}
.foot-inner a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35)}
.foot-inner a:hover{border-color:#fff}

/* ---------- 14 · Mobile ---------- */
@media (max-width:640px){
  .su-card{padding:22px}
  .su-step-actions{flex-direction:column-reverse;align-items:stretch}
  .su-step-actions .btn{width:100%}
  .su-success-actions{flex-direction:column;width:100%}
  .su-success-actions .btn{width:100%}
  .progress-step span:not(.num){display:none}
}