@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:light;--bg:#f9f8fb;--ink:#241e36;--muted:#726c81;--purple:#6a42bc;--deep:#22123f;--border:#e9e6f0;--shadow:0 30px 75px rgba(32,20,71,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;font-family:'Cairo',Tahoma,Arial,sans-serif;line-height:1.7;color:var(--ink);background:var(--bg);position:relative;overflow-x:hidden}body:before{content:'';position:fixed;top:-160px;left:35%;width:650px;height:650px;background:radial-gradient(circle,#eee7ff 0,transparent 72%);z-index:-1;pointer-events:none}.page-glow{position:absolute;z-index:-1;pointer-events:none}.glow-1{right:-100px;top:130px;width:400px;height:400px;background:radial-gradient(circle,#f0eaff 0,transparent 70%)}.glow-2{left:-160px;bottom:40px;width:500px;height:500px;background:radial-gradient(circle,#f4edff 0,transparent 70%)}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;max-width:1300px;padding:0 28px;margin:auto}.brand{display:flex;align-items:center;gap:10px;color:#231344;text-decoration:none;font-size:23px;font-weight:900}.brand small{font-size:10px;letter-spacing:.34em;display:block;line-height:1;margin-top:-4px;font-weight:900}.brand-mark{display:flex;align-items:center;justify-content:center;width:43px;height:43px;background:#6742bb;color:white;border-radius:14px;transform:rotate(-8deg);box-shadow:0 8px 25px #6742bb44;font-size:30px}.topbar-right{font-size:12px;font-weight:700;color:#5f5573;display:flex;gap:12px;align-items:center}.live-dot{display:inline-block;width:9px;height:9px;background:#48b991;border-radius:50%;box-shadow:0 0 0 5px #48b99122}.divider-dot{color:#ad9dcc}.layout{max-width:1300px;margin:16px auto 48px;padding:0 28px;display:grid;grid-template-columns:minmax(330px,.98fr) minmax(440px,1.02fr);gap:24px;align-items:start}.hero{position:sticky;top:24px;min-height:780px;background:linear-gradient(139deg,#3c2779 0%,#26134b 43%,#180e35 100%);border-radius:26px;overflow:hidden;color:white;padding:64px 54px 30px;box-shadow:var(--shadow);isolation:isolate;display:flex;flex-direction:column;justify-content:space-between}.hero:before{content:'';position:absolute;width:430px;height:430px;border-radius:50%;top:-205px;left:-175px;border:100px solid #8562e224;z-index:-1}.hero:after{content:'✺';position:absolute;bottom:90px;left:18px;color:#d5a5ff19;font-size:270px;line-height:1;z-index:-1;transform:rotate(19deg)}.hero-orbit{position:absolute;border:1px solid #bd9df71f;border-radius:50%;pointer-events:none;z-index:-1}.orb1{width:500px;height:500px;right:-230px;bottom:-110px}.orb2{width:380px;height:380px;right:-168px;bottom:-55px}.kicker{display:inline-flex;align-items:center;gap:12px;background:#ffffff13;border:1px solid #ffffff25;border-radius:40px;padding:8px 15px;font-size:13px;font-weight:800;letter-spacing:.1px}.star{font-size:18px;color:#ffda8a}.hero h1{font-size:clamp(50px,5.5vw,79px);line-height:1.42;letter-spacing:-2px;margin:36px 0 20px;font-weight:900}.hero h1 em{font-style:normal;color:#e5ba72}.hero-lede{font-size:16px;line-height:2.05;max-width:405px;color:#e2d8ef;margin:0 0 45px}.dates{display:flex;align-items:center;gap:26px;background:#ffffff0c;border:1px solid #ffffff1e;border-radius:17px;padding:18px 22px;max-width:420px}.date-tile{display:flex;flex-direction:column;gap:2px;white-space:nowrap}.date-number{font-size:30px;font-weight:900;color:#fff;line-height:1.35;direction:ltr;text-align:right}.date-number span{color:#a997d5;margin:0 6px}.date-tile small{font-size:11px;color:#c1b1d4}.date-sep{width:1px;background:#ffffff33;height:45px}.hero-notes{display:flex;flex-wrap:wrap;gap:16px;margin:38px 0 20px;color:#e7e0f0;font-size:12px;font-weight:700}.hero-notes span{display:inline-flex;align-items:center;gap:5px}.hero-notes svg{width:17px;height:17px;fill:none;stroke:#ebce8f;stroke-width:1.7}.hero-footer{border-top:1px solid #ffffff28;padding-top:21px;display:flex;justify-content:space-between;align-items:center;color:#bfb0d4;font-size:12px;font-weight:700;letter-spacing:.18em;direction:ltr}.hero-footer strong{color:#eac189}.tiny-spark{font-size:20px;color:#bc9ceb}.registration-panel{background:white;border:1px solid #eeeaf5;border-radius:26px;padding:35px 40px 45px;box-shadow:0 13px 50px rgba(33,19,75,.045)}.step-id{text-transform:uppercase;letter-spacing:.05em;color:var(--purple);font-size:12px;font-weight:900}.panel-head h2{font-size:29px;line-height:1.6;margin:4px 0 4px;font-weight:900}.panel-head h2 span{color:var(--purple)}.panel-head p{font-size:13px;line-height:2;color:var(--muted);margin:0 0 20px}.status-banner{border-radius:12px;background:#fff8e8;border:1px solid #f3e7c8;color:#8b6527;padding:11px 13px;font-size:12px;font-weight:700;display:flex;gap:9px;margin:0 0 23px;align-items:center}.status-banner.ready{background:#eafaf4;border-color:#c8f2e2;color:#17644c}.status-icon{font-size:18px}.field{margin:0 0 18px}.field label,fieldset legend{display:block;color:#332b45;font-weight:800;font-size:13px;margin-bottom:8px}.field label strong,fieldset legend strong{color:#bf5b71}.field input:not([type=file]),.field select{height:48px;border:1px solid #e4e0ed;background:#fff;width:100%;border-radius:11px;padding:0 15px;font:600 13px 'Cairo',Tahoma,sans-serif;color:#221b32;outline:none;transition:.2s}.field input:focus{border-color:#9278d4;box-shadow:0 0 0 3px #7955d61e}.field input::placeholder{color:#a69dad;font-weight:500}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.photo-uploader{display:flex!important;align-items:center;gap:13px;border:1px dashed #bfb0dc;background:#faf8ff;border-radius:13px;padding:15px!important;cursor:pointer;margin:0!important}.photo-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex-shrink:0;background:#eee8fc;border-radius:11px;color:#7656b9}.photo-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.photo-uploader img{width:55px;height:55px;flex-shrink:0;object-fit:cover;border-radius:9px}.photo-copy{display:flex;flex:1;flex-direction:column;min-width:0}.photo-copy b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.photo-copy small{font-weight:500;color:#81768d;font-size:10px}.photo-select{font-size:10px;background:#fff;padding:6px 10px;border-radius:8px;color:var(--purple);font-weight:900;white-space:nowrap;box-shadow:0 2px 9px #00000008}.hint{color:#938b9e;font-size:10px;margin:6px 0 0}.packages{margin:25px 0 22px;border:0;padding:0;min-width:0}.packages legend{margin-bottom:12px}.package{display:flex;align-items:center;gap:14px;border:1px solid #e7e2ee;border-radius:13px;margin-bottom:10px;padding:13px 15px;cursor:pointer;transition:.2s}.package:hover{border-color:#a995d8}.package.selected{border-color:#7852c1;background:#f7f3ff;box-shadow:0 0 0 1px #7852c1}.package input{position:absolute;opacity:0;width:1px;height:1px}.package:focus-within{outline:3px solid #b5a3dc;outline-offset:2px}.package-emblem{display:flex;width:45px;height:45px;flex-shrink:0;justify-content:center;align-items:center;background:#eee8fa;color:#7b56bf;border-radius:12px;font-size:25px}.package-info{display:flex;flex:1;flex-direction:column;min-width:0}.package-info b{font-size:13px}.package-info small{font-size:10px;color:var(--muted);line-height:1.7}.choice-circle{width:18px;height:18px;border:2px solid #c8bed8;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.package.selected .choice-circle{border-color:#7852c1}.package.selected .choice-circle span{width:8px;height:8px;border-radius:50%;background:#7852c1}.privacy-field{padding:12px;border:1px solid #eeeaf2;border-radius:11px;background:#fdfcff;margin-bottom:14px}.privacy-field label{font-size:11px;font-weight:700;display:flex;align-items:flex-start;gap:9px;cursor:pointer}.privacy-field input{margin:6px 0 0;accent-color:#6a42bc;flex-shrink:0;width:15px;height:15px}.privacy-field p{color:#8e849b;font-size:10px;margin:7px 24px 0;line-height:1.7}.challenge-area{display:flex;align-items:center;justify-content:center;min-height:28px;margin:14px 0}.submit-button{width:100%;height:54px;border:none;border-radius:12px;background:linear-gradient(100deg,#7a51c5,#553198);color:#fff;display:flex;align-items:center;justify-content:center;gap:15px;font:900 14px 'Cairo',sans-serif;cursor:pointer;transition:.2s;box-shadow:0 10px 22px #7450bc38}.submit-button:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 14px 27px #7450bc48}.submit-button:disabled{background:#b4a8c6;box-shadow:none;cursor:not-allowed}.submit-button .arrow{font-family:Arial;font-size:20px}.below-submit{text-align:center;color:#92899c;font-size:10px;margin-top:12px}.form-message{padding:12px;border-radius:10px;font-size:12px;font-weight:700;margin:10px 0}.form-message.error{background:#fff0f0;border:1px solid #f9cfcf;color:#9e3b3b}.form-message.ok{background:#edfaf3;color:#2c7451}.success-panel{text-align:center;padding:25px 10px}.success-icon{margin:8px auto 14px;width:66px;height:66px;border-radius:50%;background:#dbf6e9;color:#157b4b;display:grid;place-items:center;font-size:34px;font-weight:900}.success-panel h2{font-size:26px;margin:12px 0}.success-panel p{font-size:13px;color:var(--muted)}.receipt{margin:22px auto;background:#f5f1fc;border-radius:12px;padding:16px;max-width:260px;display:flex;flex-direction:column}.receipt small{font-size:12px;color:#7c6e97}.receipt strong{font-size:28px;color:#563397}.success-tip{max-width:310px;margin:14px auto}.site-footer{max-width:1300px;padding:0 30px 28px;display:flex;justify-content:space-between;gap:20px;margin:auto;color:#8c829f;font-size:11px;font-weight:700}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
@media(max-width:1020px){.layout{grid-template-columns:1fr;max-width:690px}.hero{position:relative;top:auto;min-height:auto;padding:40px 38px 25px}.hero h1{font-size:49px;margin:22px 0 12px}.hero-lede{margin-bottom:20px}.hero-notes{margin:22px 0}.registration-panel{padding:32px}.topbar{max-width:690px}}
@media(max-width:580px){.topbar{height:70px;padding:0 16px}.brand{font-size:19px}.brand-mark{width:37px;height:37px}.topbar-right{font-size:10px}.topbar-right .divider-dot,.topbar-right>span:last-child{display:none}.layout{padding:0 11px;margin:8px auto 22px;gap:14px}.hero{border-radius:19px;padding:29px 24px 20px}.hero h1{font-size:43px}.hero-lede{font-size:13px}.kicker{font-size:11px}.dates{padding:13px 15px;gap:13px}.date-number{font-size:24px}.date-tile small{font-size:10px}.hero-notes{gap:10px;font-size:10px}.registration-panel{padding:24px 19px;border-radius:18px}.panel-head h2{font-size:24px}.photo-select{display:none}.field-row{gap:10px}.site-footer{padding:0 17px 25px;font-size:10px}.package{gap:9px;padding:11px}.package-emblem{width:39px;height:39px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Christmas carnival & ID photo capture (v0.2) */
.dates{max-width:420px;justify-content:center;text-align:center}
.date-number{text-align:center}
.hero:after{content:'✳';color:#f8d08d1e}
.kicker .star{color:#f7d58d}
.photo-intro{font-size:12px;color:var(--muted);margin:-3px 0 12px}
.photo-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.photo-camera-button,.photo-upload-button{min-height:94px;border:1px solid #ded5ee;background:#f9f6ff;border-radius:13px;padding:13px;display:flex;align-items:center;gap:10px;text-align:right;color:#30233f;cursor:pointer;transition:.2s;font-family:inherit}
.photo-camera-button:hover,.photo-upload-button:hover{border-color:#845cc8;background:#f1eafc}
.photo-camera-button:focus-visible,.photo-upload-button:focus-within{outline:3px solid #b7a6de;outline-offset:2px}
.photo-button-icon{display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;background:#e9dff8;color:#6540b1;border-radius:11px;font-size:21px}
.photo-action-grid b{display:block;font-size:12px;line-height:1.55}
.photo-action-grid small{display:block;font-size:10px;color:#7c718c;margin-top:3px}
.photo-selected{display:flex;gap:14px;align-items:center;padding:11px 13px;margin:11px 0 0;border:1px solid #c7b5e7;border-radius:12px;background:#f7f2ff}
.photo-selected img{width:69px;height:83px;object-fit:cover;border-radius:9px;border:1px solid #ded3ef}
.photo-selected>span{display:flex;flex:1;min-width:0;flex-direction:column}
.photo-selected b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.photo-selected small{font-size:10px;color:var(--muted)}
.photo-remove{border:0;background:#eee3fa;border-radius:8px;padding:8px 10px;color:#6341a1;cursor:pointer;font:800 11px 'Cairo',sans-serif}
.camera-dialog{border:0;border-radius:22px;padding:0;background:#fff;color:#2b2240;width:min(94vw,490px);max-height:95vh;overflow:auto;box-shadow:0 20px 90px #1f143d77}
.camera-dialog::backdrop{background:#0b0826cf;backdrop-filter:blur(5px)}
.camera-panel{padding:18px;display:flex;flex-direction:column;gap:12px}
.camera-head{display:flex;justify-content:space-between;align-items:start;gap:12px}
.camera-head h2{font-size:19px;margin:0;font-weight:900}
.camera-head p{font-size:12px;color:#776d8c;margin:4px 0 0}
.camera-close{border:0;background:#f3f0fa;color:#46335f;width:37px;height:37px;border-radius:10px;cursor:pointer;font-size:25px;line-height:1}
.camera-stage{position:relative;width:min(100%,340px);aspect-ratio:3 / 4;margin:0 auto;background:#211d2c;overflow:hidden;border-radius:14px;isolation:isolate}
.camera-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.face-guide-wrap{position:absolute;inset:0;pointer-events:none;border:2px solid #fff6;border-radius:14px;box-shadow:inset 0 0 0 120px #0002}
.face-guide{position:absolute;width:57%;height:59%;top:12%;left:21.5%;border:3px dashed #ffe3a1;border-radius:48% 48% 45% 45%;box-shadow:0 0 0 999px #0001}
.shoulder-guide{position:absolute;bottom:7%;width:82%;height:31%;left:9%;border:2px dashed #ffffffc2;border-bottom:0;border-radius:52% 52% 0 0;clip-path:inset(0 0 35% 0)}
.camera-caption{position:absolute;left:12px;right:12px;bottom:8px;text-align:center;color:#fff;background:#110d2db3;border-radius:20px;padding:5px;font-size:11px;font-weight:800}
.camera-status{min-height:23px;margin:0;text-align:center;color:#6b597a;font-size:12px}
.camera-actions{display:grid;grid-template-columns:1fr 95px;gap:10px}
.camera-shutter{border:0;background:#6a42bc;color:#fff;border-radius:11px;min-height:45px;cursor:pointer;font:900 13px 'Cairo',sans-serif}
.camera-shutter:disabled{opacity:.45;cursor:not-allowed}
.camera-cancel{border:1px solid #ddd5ea;background:#fff;border-radius:11px;color:#4e3b68;font:800 12px 'Cairo',sans-serif;cursor:pointer}
.camera-note{margin:0;color:#91869c;font-size:10px;text-align:center}
@media(max-width:580px){.photo-action-grid{grid-template-columns:1fr}.photo-camera-button,.photo-upload-button{min-height:72px}.camera-panel{padding:13px}.camera-stage{width:min(100%,300px)}}
@media(max-width:580px){.hero-orbit,.page-glow{display:none}}

/* =====================================================================
   SAVYO EVENTS — CHRISTMAS CARNIVAL 2026 | v0.3
   This is the FINAL Christmas theme layer.
   Keeps the existing form, Supabase connection, and camera behavior intact.
   ===================================================================== */
:root {
  --bg: #fbf8f1;
  --ink: #272b26;
  --muted: #667468;
  --purple: #af2638; /* Legacy variable used by original components */
  --deep: #104b3b;
  --border: #e8e4dc;
  --shadow: 0 22px 65px rgba(22, 57, 42, .12);
  --christmas-red: #a52033;
  --christmas-red-dark: #71182a;
  --christmas-green: #115540;
  --christmas-green-dark: #092f29;
  --christmas-gold: #ecc47c;
  --christmas-cream: #fff9ef;
}
html { width: 100%; overflow-x: clip; }
body {
  width: 100%;
  background:
    radial-gradient(ellipse 600px 450px at 8% 7%, rgba(250, 211, 168, .28), transparent 75%),
    radial-gradient(ellipse 650px 550px at 95% 35%, rgba(189, 224, 193, .24), transparent 75%),
    linear-gradient(145deg, #fffdf8 0%, #f9f8f2 52%, #f1f6ef 100%);
  color: var(--ink);
  overflow-x: clip;
}
body::before { background: radial-gradient(circle, #f9eddd 0, transparent 70%); }
.glow-1 { background: radial-gradient(circle, #e4efde 0, transparent 70%); }
.glow-2 { background: radial-gradient(circle, #f7e6d5 0, transparent 70%); }
.topbar { max-width: 1340px; }
.brand { color: #144a3c; }
.brand small { color: #8d3138; letter-spacing: .29em; }
.brand-mark {
  transform: rotate(-8deg);
  background: linear-gradient(145deg, #c12c41, #83162a);
  border: 2px solid #f2d092;
  box-shadow: 0 6px 18px #8b1e3232;
  color: #ffe6a3;
}
.topbar-right { color: #586b58; }
.live-dot { background: #1d9e71; box-shadow: 0 0 0 5px #cfe9d9; }
.divider-dot { color: #bc9b68; }
.layout { max-width: 1340px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 26px; }

/* Red + fir-green cinematic hero, with gold festive highlights */
.hero {
  position: sticky;
  top: 22px;
  min-height: 740px;
  padding: 52px 45px 26px;
  border-radius: 27px;
  background:
    radial-gradient(circle at 10% 8%, rgba(255,215,149,.26), transparent 19%),
    radial-gradient(circle at 88% 90%, rgba(229,182,95,.14), transparent 32%),
    radial-gradient(ellipse at 5% 52%, rgba(172,29,48,.78), transparent 57%),
    linear-gradient(140deg, #78182c 0%, #8f2334 27%, #194d3c 64%, #092e29 100%);
  color: #fffdf5;
  box-shadow: 0 25px 60px rgba(15, 61, 45, .24);
  isolation: isolate;
  overflow: hidden;
}
/* Festive glowing lights, gently behind the text */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  z-index: 0;
  opacity: .8;
  pointer-events: none;
  background:
    radial-gradient(circle 5px at 8% 7%, #fff5cb 0 95%, transparent 105%),
    radial-gradient(circle 5px at 22% 5%, #f8c873 0 95%, transparent 105%),
    radial-gradient(circle 5px at 35% 8%, #fcf2d4 0 95%, transparent 105%),
    radial-gradient(circle 5px at 50% 5%, #ecc47c 0 95%, transparent 105%),
    radial-gradient(circle 5px at 64% 8%, #fff5cb 0 95%, transparent 105%),
    radial-gradient(circle 5px at 78% 5%, #ecc47c 0 95%, transparent 105%),
    radial-gradient(circle 5px at 94% 8%, #fff5cb 0 95%, transparent 105%),
    radial-gradient(circle 2px at 16% 25%, #fffbe8 0 95%, transparent 105%),
    radial-gradient(circle 3px at 88% 42%, #fff4d6 0 95%, transparent 105%),
    radial-gradient(circle 2px at 61% 56%, #fff4d6 0 95%, transparent 105%),
    radial-gradient(circle 2px at 22% 70%, #fff4d6 0 95%, transparent 105%);
}
/* Christmas branches + bells + baubles: background decoration, not text */
.hero::after {
  content: '🎄  ✦  ❄';
  position: absolute;
  z-index: 0;
  left: 2%;
  bottom: 13%;
  width: auto;
  max-width: 38%;
  font-size: clamp(48px, 8vw, 94px);
  line-height: 1.6;
  letter-spacing: .06em;
  color: rgba(253, 229, 172, .20);
  opacity: .28;
  transform: rotate(-11deg);
  pointer-events: none;
}
.hero-content, .hero-footer { position: relative; z-index: 1; }
.hero-orbit { border-color: #f0d09020; z-index: 0; }
.orb1 { width: 430px; height: 430px; right: -230px; bottom: -150px; }
.orb2 { width: 330px; height: 330px; right: -170px; bottom: -90px; }
.kicker {
  border: 1px solid rgba(255, 227, 177, .38);
  background: rgba(255, 255, 255, .12);
  color: #fff9e9;
  font-size: 12px;
}
.kicker .star { color: #f9d08a; }
.hero h1 {
  margin: 24px 0 14px;
  font-size: clamp(44px, 5.3vw, 76px);
  line-height: 1.39;
  letter-spacing: -1.8px;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.hero h1 em { color: #f0c574; text-shadow: 0 3px 22px rgba(20, 27, 13, .14); }
.hero-lede {
  max-width: 480px;
  margin: 0 0 22px;
  font-size: 14px;
  color: #fff0e0;
  line-height: 1.98;
}
.dates {
  width: fit-content;
  min-width: 240px;
  max-width: 100%;
  margin: 0;
  gap: 0;
  padding: 11px 24px;
  border: 1px solid rgba(255, 231, 182, .4);
  border-radius: 15px;
  background: rgba(0, 30, 28, .25);
  text-align: center;
  backdrop-filter: blur(5px);
}
.date-tile { white-space: normal; min-width: 0; }
.date-number { font-size: 32px; text-align: center; color: #ffeec8; }
.date-number span { color: #ecc47c; }
.date-tile small { font-size: 12px; font-weight: 700; color: #fff5df; }
.hero-notes { margin: 22px 0 12px; gap: 14px; color: #f8e8d5; font-size: 11px; }
.hero-notes svg { stroke: #f4d08e; }
.hero-footer { margin-top: 20px; padding-top: 16px; color: #e4d8c7; }
.hero-footer strong { color: #f3c978; }
.tiny-spark { color: #edd3a1; }

/* Main form: clean paper-like card with red / green / gold accents */
.registration-panel {
  min-width: 0;
  border: 1px solid #e9e4d8;
  box-shadow: 0 12px 40px rgba(20, 58, 40, .065);
  background: #fffefb;
}
.step-id { color: #a52237; }
.panel-head h2 { color: #2e342e; }
.panel-head h2 span { color: #b3233b; }
.panel-head p { color: #6d796d; }
.status-banner { color: #926625; background: #fff7e5; border-color: #f3e3ba; }
.status-banner.ready { color: #13563f; background: #ecf8f1; border-color: #cfeddb; }
.field label, fieldset legend { color: #2d3c31; }
.field label strong, fieldset legend strong { color: #bf283f; }
.field input:not([type=file]), .field select {
  color: #243128;
  border-color: #e2e7df;
  background: #fff;
}
.field input:not([type=file]):focus, .field select:focus {
  border-color: #25805c;
  box-shadow: 0 0 0 3px rgba(35, 117, 80, .12);
}
.field input::placeholder { color: #9ba79f; }
.photo-intro { color: #637568; }
.photo-camera-button, .photo-upload-button { background: #f6faf5; border-color: #d5e3d8; color: #304338; }
.photo-camera-button:hover, .photo-upload-button:hover { background: #eef8ee; border-color: #267b57; }
.photo-button-icon { background: #e5f1e6; color: #146647; }
.photo-action-grid small, .photo-selected small, .hint { color: #697b71; }
.photo-selected { background: #f1f9f1; border-color: #d1e9d3; }
.photo-selected img { border-color: #c0dac4; }
.photo-remove { color: #8e2336; background: #f8e8ea; }
.packages legend { color: #28362b; }
.package { border-color: #dde5da; background: #fff; }
.package:hover { border-color: #c8aa6b; }
.package[data-package='event_only'] .package-emblem { background: #eaf4ec; color: #145b3f; }
.package[data-package='event_plus_new_year'] .package-emblem { background: #fff1d7; color: #9c2837; }
.package[data-package='event_only'].selected {
  border-color: #1d7a57; background: #f0f9f1; box-shadow: 0 0 0 1px #1d7a57;
}
.package[data-package='event_plus_new_year'].selected {
  border-color: #aa2639; background: #fff7ed; box-shadow: 0 0 0 1px #aa2639;
}
.package[data-package='event_only'].selected .choice-circle { border-color: #1b7954; }
.package[data-package='event_only'].selected .choice-circle span { background: #1b7954; }
.package[data-package='event_plus_new_year'].selected .choice-circle { border-color: #a62238; }
.package[data-package='event_plus_new_year'].selected .choice-circle span { background: #a62238; }
.package:focus-within, .photo-camera-button:focus-visible, .photo-upload-button:focus-within {
  outline: 3px solid #d8b675; outline-offset: 3px;
}
.privacy-field { background: #fffdf7; border-color: #ebe7df; }
.privacy-field input { accent-color: #197453; }
.privacy-field p { color: #7a887c; }
.submit-button {
  background: linear-gradient(120deg, #b92940, #8d1930);
  box-shadow: 0 10px 20px rgba(162, 31, 51, .22);
}
.submit-button:not(:disabled):hover { box-shadow: 0 15px 24px rgba(162, 31, 51, .32); }
.submit-button:disabled { background: #bdc6bc; box-shadow: none; }
.receipt { background: #f5f8ef; }
.receipt strong { color: #176848; }
.site-footer { color: #66786a; }
.camera-dialog { color: #28362b; }
.camera-close { background: #f7eae8; color: #9b2836; }
.face-guide { border-color: #ffe6a3; }
.camera-caption { background: #102d27bd; }
.camera-shutter { background: #a91f36; }
.camera-cancel { border-color: #e1d7c9; color: #355a49; }

/* Medium screens: section stacking and moderate holiday banner */
@media (max-width: 1020px) {
  .layout { grid-template-columns: minmax(0,1fr); max-width: 720px; }
  .hero {
    position: relative;
    top: auto;
    min-height: 0;
    padding: 33px 34px 24px;
    gap: 4px;
  }
  .hero h1 { font-size: clamp(38px, 6vw, 58px); margin: 16px 0 10px; }
  .hero-lede { margin-bottom: 17px; }
  .hero-notes { margin: 17px 0 10px; }
  .hero-footer { margin-top: 10px; }
  .hero::after { font-size: 55px; bottom: 25%; opacity: .16; }
}

/* Mobile: short hero and readable, full-width registration form */
@media (max-width: 580px) {
  html, body { width: 100%; max-width: 100%; }
  .topbar {
    width: 100%; height: auto; min-height: 69px;
    padding: 12px 16px; gap: 7px;
  }
  .brand { font-size: 19px; min-width: 0; }
  .brand-mark { width: 37px; height: 37px; font-size: 24px; border-radius: 12px; }
  .brand small { font-size: 8px; }
  .topbar-right { font-size: 9px; gap: 8px; }
  .layout {
    width: 100%; max-width: 100%; margin: 5px auto 20px;
    padding: 0 12px; gap: 14px;
    display: grid; grid-template-columns: minmax(0,1fr);
  }
  .hero {
    min-width: 0; width: 100%; min-height: 0;
    border-radius: 19px;
    padding: 24px 21px 16px;
  }
  .hero::before { opacity: .5; }
  .hero::after { font-size: 40px; opacity: .12; bottom: 21%; left: 0; }
  .hero-orbit, .page-glow { display: none; }
  .kicker { max-width: 100%; font-size: 10px; gap: 5px; padding: 5px 10px; }
  .kicker .star { font-size: 14px; }
  .hero h1 {
    font-size: clamp(31px, 9vw, 41px);
    line-height: 1.27;
    letter-spacing: -.9px;
    margin: 13px 0 9px;
    overflow-wrap: normal;
    text-wrap: balance;
  }
  .hero-lede { font-size: 11px; line-height: 1.85; margin-bottom: 14px; max-width: 100%; }
  .dates { width: fit-content; min-width: 180px; padding: 7px 18px; border-radius: 11px; }
  .date-number { font-size: 22px; }
  .date-tile small { font-size: 10px; }
  .hero-notes { margin: 14px 0 7px; gap: 7px 12px; font-size: 9px; }
  .hero-notes svg { width: 14px; height: 14px; }
  .hero-footer { margin-top: 7px; padding-top: 9px; font-size: 9px; gap: 5px; }
  .tiny-spark { font-size: 12px; }
  .registration-panel { min-width: 0; width: 100%; padding: 22px 17px 26px; border-radius: 18px; }
  .panel-head h2 { font-size: 23px; line-height: 1.6; }
  .panel-head p { font-size: 11px; }
  .field-row { grid-template-columns: 1fr 1fr; gap: 9px; }
  .field input:not([type=file]) { font-size: 13px; }
  .photo-action-grid { grid-template-columns: 1fr; }
  .photo-camera-button, .photo-upload-button { min-height: 69px; }
  .package { gap: 8px; padding: 10px; }
  .package-info small { font-size: 9px; }
  .package-emblem { width: 36px; height: 36px; }
  .site-footer { flex-direction: column; align-items: center; gap: 4px; padding: 0 14px 22px; }
  .camera-stage { width: min(100%, 300px); }
}
@media (max-width: 340px) {
  .hero { padding: 20px 15px 15px; }
  .hero h1 { font-size: 28px; }
  .layout { padding: 0 8px; }
  .registration-panel { padding: 18px 13px 20px; }
  .field-row { grid-template-columns: minmax(0,1fr); }
}