/*
 * Shine! Productions Academy — shared brand styles.
 * ───────────────────────────────────────────────────────────────────────────
 * Loaded by both the registration form (static) and the confirmation page
 * (server-rendered), so the two cannot drift apart.
 *
 * Direction: light and airy, with hints of nature, built around the existing
 * Shine! logo — cream-gold script "Shine!", heavy "PRODUCTIONS", violet script
 * "Academy". Violet leads because it is the brand colour; eucalyptus green is
 * the secondary that supplies the botanical feel; warm paper carries the rest.
 *
 * Contrast note: the logo's cream (#f5efc3) and bright violet (#a855f7) only
 * work against the dark photo they sit on. On paper they fail text contrast,
 * so each has a darkened text-safe counterpart (--gold, --violet) and the
 * bright originals survive only as large decorative shapes.
 */

@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Archivo:wght@600;700;800&family=Dancing+Script:wght@700&display=swap');

:root{
  /* surfaces */
  --paper:#fdfbf8;
  --surface:#ffffff;
  --surface-sunk:#faf8fc;

  /* ink */
  --ink:#2e2937;
  --muted:#6d6580;

  /* shine violet */
  --violet:#7b2fbe;
  --violet-deep:#61239a;
  --violet-bright:#a855f7;
  --violet-soft:#f5edfd;
  --violet-line:#e7daf8;

  /* nature */
  --sage:#6f9478;
  --sage-deep:#4f7359;
  --sage-soft:#eaf2e9;

  /* shine gold */
  --gold:#a9781f;
  --cream:#f7f0d4;

  --line:#ece7f2;
  --err:#a6412f;
  --err-soft:#fbeeeb;

  --radius:18px;
  --shadow-sm:0 1px 2px rgba(46,41,55,.05);
  --shadow:0 2px 4px rgba(46,41,55,.04), 0 12px 32px rgba(46,41,55,.08);
}

*{box-sizing:border-box}

body{
  margin:0;
  color:var(--ink);
  font:16px/1.65 "Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Three soft washes — lavender, leaf, and sun — suggest light through
     foliage without carrying any image weight. */
  background:
    radial-gradient(54rem 38rem at 8% -14%, #f3e9fd 0%, transparent 60%),
    radial-gradient(44rem 32rem at 100% 2%, #e8f2e6 0%, transparent 58%),
    radial-gradient(40rem 30rem at 50% 108%, #fdf5df 0%, transparent 62%),
    linear-gradient(180deg,#fdfbf8 0%,#faf8fc 100%);
  background-attachment:fixed;
  padding:36px 20px 72px;
}

.wrap{width:100%;max-width:46rem;margin:0 auto}

/* ── brand lockup ────────────────────────────────────────────────────────── */

.brandmark{display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:6px}

.brandmark__shine{
  font-family:"Kaushan Script",cursive;
  font-size:clamp(2.6rem,9vw,3.9rem);
  line-height:1;color:var(--gold);
  /* The logo's script sits on a hand-drawn swoosh; this is its echo. */
  position:relative;padding:0 .35em .06em;
}
.brandmark__shine::after{
  content:"";position:absolute;left:8%;right:0;bottom:.02em;height:.5em;
  border-bottom:3px solid var(--gold);border-radius:0 0 60% 0;
  transform:rotate(-2.5deg);opacity:.55;pointer-events:none;
}

.brandmark__row{display:flex;align-items:baseline;gap:.34em;margin-top:.1em}
.brandmark__prod{
  font-weight:800;font-size:clamp(1.05rem,3.4vw,1.5rem);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
}
.brandmark__academy{
  font-family:"Dancing Script",cursive;font-weight:700;
  font-size:clamp(1.5rem,4.6vw,2.1rem);color:var(--violet);
  line-height:1;transform:rotate(-3deg);
}

.tagline{
  margin:.5rem 0 0;text-align:center;color:var(--muted);
  font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
}
.tagline em{
  display:block;margin-top:.35rem;font-family:"Dancing Script",cursive;
  font-size:1.15rem;letter-spacing:0;text-transform:none;color:var(--gold);font-weight:700;
}

/* ── cards ───────────────────────────────────────────────────────────────── */

.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
}

fieldset{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;margin:0 0 20px;background:var(--surface);box-shadow:var(--shadow-sm);
}
legend{
  padding:0 12px;color:var(--violet-deep);font-weight:700;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
}

/* ── form controls ───────────────────────────────────────────────────────── */

label{display:block;margin:0 0 6px;font-size:.86rem;color:var(--muted);font-weight:500}
.req::after{content:" *";color:var(--violet)}

input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;padding:11px 13px;border-radius:11px;
  border:1px solid var(--violet-line);background:var(--surface-sunk);
  color:var(--ink);font:inherit;transition:border-color .15s,box-shadow .15s,background .15s;
}
input:hover,select:hover,textarea:hover{border-color:var(--violet-bright)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--violet);background:var(--surface);
  box-shadow:0 0 0 3px rgba(123,47,190,.16);
}
textarea{min-height:82px;resize:vertical}

.row{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin-bottom:14px}
.row-3{display:grid;gap:14px;grid-template-columns:2fr 1fr 1.4fr;margin-bottom:14px}
@media(max-width:640px){.row,.row-3{grid-template-columns:1fr}}

.check{display:flex;gap:11px;align-items:flex-start;margin:14px 0}
.check input{margin-top:4px;width:18px;height:18px;flex:none;accent-color:var(--violet)}
.check label{margin:0;color:var(--ink);font-size:.96rem;font-weight:500}
.hint{color:var(--muted);font-size:.85rem;margin:4px 0 0;font-weight:400}

.radios{display:flex;gap:22px;margin-top:8px}
.radios span{display:flex;gap:8px;align-items:center}
.radios input{width:18px;height:18px;accent-color:var(--violet)}
.radios label{margin:0;color:var(--ink)}

button,.btn{
  border:0;border-radius:12px;color:#fff;font:inherit;font-weight:700;
  letter-spacing:.02em;cursor:pointer;
  background:linear-gradient(135deg,var(--violet) 0%,var(--violet-bright) 100%);
  transition:filter .15s,transform .05s;
}
button:hover:not(:disabled),.btn:hover{filter:brightness(1.07)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.55;cursor:progress}

/* ── botanical divider ───────────────────────────────────────────────────── */

.sprig{display:flex;align-items:center;justify-content:center;gap:10px;margin:20px 0}
.sprig::before,.sprig::after{
  content:"";height:1px;flex:1;max-width:7rem;
  background:linear-gradient(90deg,transparent,var(--sage));opacity:.5;
}
.sprig::after{background:linear-gradient(270deg,transparent,var(--sage));opacity:.5}
.sprig svg{width:22px;height:22px;color:var(--sage);flex:none}

footer{text-align:center;color:var(--muted);font-size:.87rem;margin-top:28px}
footer a{color:var(--violet-deep);font-weight:600}
footer p{margin:.35rem 0}