:root{
  --night: #190f2e;
  --card: #2a1b4d;
  --card-2: #35245e;
  --pumpkin: #ff7a29;
  --pumpkin-dim: #c95f1e;
  --bone: #f3ead8;
  --bone-dim: #cabfae;
  --sage: #7fae82;
  --sage-dim: #445a46;
  --line: rgba(243,234,216,0.14);
  --radius: 18px;
}
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: radial-gradient(ellipse at 20% -10%, #3a2465 0%, var(--night) 55%);
  color: var(--bone);
  font-family: 'Nunito', sans-serif;
  min-height: 100vh;
  display:flex;
  justify-content:center;
  padding: 0 0 60px;
}
.device{
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  background: var(--night);
  position: relative;
  overflow: hidden;
}
/* subtle ambient bats, css only, low motion */
.bat{
  position:absolute; font-size:14px; opacity:0.25; color: var(--bone-dim);
  animation: drift 18s linear infinite;
}
.bat.b1{ top:6%; left:8%; animation-duration:22s; }
.bat.b2{ top:14%; right:12%; animation-duration:26s; animation-delay:-6s; }
.bat.b3{ top:2%; left:55%; animation-duration:20s; animation-delay:-3s; }
@keyframes drift{
  0%{ transform: translateY(0) translateX(0); }
  50%{ transform: translateY(6px) translateX(-4px); }
  100%{ transform: translateY(0) translateX(0); }
}
@media (prefers-reduced-motion: reduce){ .bat{ animation: none; } }

header{
  padding: 22px 20px 0;
  position: relative;
  z-index: 2;
}
.lang-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-bottom: 10px;
}
.lang-dropdown{
  position: relative;
}
.lang-dropdown-toggle{
  font-family:'Nunito', sans-serif;
  font-weight:700;
  font-size: 12px;
  letter-spacing: 0.03em;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--bone-dim);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:4px;
}
.lang-dropdown-toggle.active{
  border-color: var(--pumpkin);
  color: var(--bone);
}
.lang-dropdown-toggle.loading{
  cursor: wait;
  opacity: 0.7;
  animation: lang-loading-pulse 1s ease-in-out infinite;
}
@keyframes lang-loading-pulse{
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .lang-dropdown-toggle.loading{ animation: none; }
}
.lang-dropdown-menu{
  position:absolute;
  top: calc(100% + 4px);
  left:0;
  min-width: 200px;
  max-width: calc(100vw - 60px);
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  max-height: 240px;
  overflow-y:auto;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.lang-dropdown-item{
  display:flex; align-items:center; gap:8px;
  padding: 10px 14px;
  font-family:'Nunito'; font-weight:600; font-size:13.5px;
  color: var(--bone);
  cursor:pointer;
}
.lang-dropdown-item:hover, .lang-dropdown-item.active{
  background: rgba(255,122,41,0.15);
}
.lang-pill img.emoji, .lang-dropdown-item img.emoji, .lang-dropdown-toggle img.emoji{
  width: 1em; height: 1em;
  vertical-align: -0.1em;
}
[dir="rtl"]{
  text-align: right;
}
[dir="rtl"] .step-hint,
[dir="rtl"] .same-as{
  padding-left: 0;
  padding-right: 32px;
}
[dir="rtl"] .lang-row{
  justify-content:flex-start;
}
[dir="rtl"] .lang-dropdown-menu{
  /* In RTL, flexbox's row direction flows right-to-left, so the dropdown
     toggle (first in DOM) ends up on the right side of the row -- anchor
     the menu to expand leftward from there instead, or it overflows off
     the right edge the same way the LTR version overflowed left. */
  left:auto;
  right:0;
}
.lang-pill{
  font-family:'Nunito', sans-serif;
  font-weight:700;
  font-size: 12px;
  letter-spacing: 0.03em;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--bone-dim);
  cursor:pointer;
}
.lang-pill.active{
  background: var(--pumpkin);
  color: var(--night);
  border-color: var(--pumpkin);
}

.ticket{
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px 20px 20px;
  position: relative;
  border: 1px solid var(--line);
}
.ticket::before, .ticket::after{
  content:"";
  position:absolute;
  width:22px; height:22px;
  background: var(--night);
  border-radius:50%;
  top: 50%;
  transform: translateY(-50%);
}
.ticket::before{ left: -11px; }
.ticket::after{ right: -11px; }
.eyebrow{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pumpkin);
  font-weight: 800;
  margin: 0 0 6px;
}
h1{
  font-family:'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.05;
  margin: 0 0 8px;
}
.sub{
  color: var(--bone-dim);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.map-link{
  display:inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pumpkin);
  text-decoration: none;
  border-bottom: 1px dotted var(--pumpkin);
}
.meta{
  display:flex;
  gap: 14px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--bone-dim);
}
.meta b{ color: var(--bone); }

/* The RSVP deadline sits on the ticket itself so it is seen before the form. */
.rsvp-by{
  display: inline-block;
  margin: 12px 0 0;
  padding: 5px 12px;
  border: 1px solid var(--pumpkin);
  border-radius: 999px;
  color: var(--pumpkin);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Steps 3-6 only apply to a "yes"; same 16px rhythm as <main>'s own gap. */
.details-stack{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Submitting without answering "can you come?" pulls the guest back here,
   using the same yellow as the other validation highlights. */
.step.section-error{
  border-color: #ffd23f;
  box-shadow: 0 0 0 3px rgba(255,210,63,0.35);
  animation: input-error-shake 0.4s ease;
}
@media (prefers-reduced-motion: reduce){
  .step.section-error{ animation: none; }
}

main{
  position: relative; z-index:2;
  padding: 18px 20px 40px;
  display:flex;
  flex-direction: column;
  gap: 16px;
}
.step{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 20px;
}
.step-label{
  font-family:'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 4px;
  display:flex;
  align-items:center;
  gap:8px;
}
.step1-name{ color: var(--pumpkin); }
.step-num{
  width:24px; height:24px;
  border-radius:50%;
  background: var(--pumpkin);
  color: var(--night);
  font-family:'Nunito';
  font-weight:800;
  font-size:13px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.step-hint{
  font-size: 13px;
  color: var(--bone-dim);
  margin: 0 0 14px;
  padding-left: 32px;
}

input[type=text]{
  width:100%;
  background: var(--night);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  color: var(--bone);
  font-family:'Nunito';
  font-size: 15px;
  font-weight:600;
}
input[type=text]::placeholder{ color: var(--bone-dim); }
input[type=text]:focus{
  outline: 2px solid var(--pumpkin);
  outline-offset: 1px;
}

/* Pulled into view + focused on a failed validation (e.g. submitting with
   no name) -- matches the yellow-bubble error color used elsewhere so a
   guest connects the two, and clears itself on the next keystroke. */
input[type=text].input-error{
  border-color: #ffd23f;
  box-shadow: 0 0 0 3px rgba(255,210,63,0.35);
  animation: input-error-shake 0.4s ease;
}
@keyframes input-error-shake{
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce){
  input[type=text].input-error{ animation: none; }
}

.chip-grid{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.chip{
  border: 1px solid var(--line);
  background: var(--night);
  color: var(--bone);
  font-family:'Nunito'; font-weight:700; font-size:13.5px;
  padding: 10px 14px;
  border-radius: 999px;
  cursor:pointer;
}
.chip.selected{
  background: var(--pumpkin);
  border-color: var(--pumpkin);
  color: var(--night);
}
.chip:focus-visible{ outline: 2px solid var(--bone); outline-offset:2px; }

.menu-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.menu-card{
  display:flex;
  align-items:center;
  gap: 12px;
  border: 2px solid var(--line);
  background: var(--night);
  border-radius: 14px;
  padding: 12px;
  cursor:pointer;
  text-align:left;
  width:100%;
  color: var(--bone);
  font-family:'Nunito';
}
.menu-card.chosen{
  border-color: var(--pumpkin);
  background: rgba(255,122,41,0.08);
}
.menu-card.unsafe{
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.menu-emoji{
  font-size: 30px;
  width: 46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  background: var(--card-2);
  border-radius: 12px;
  flex-shrink:0;
}
.menu-name{ font-weight: 800; font-size: 15px; margin:0 0 2px; }
.menu-votes{ font-size: 12px; color: var(--bone-dim); margin:0; }
.menu-radio{
  margin-left:auto;
  width:22px; height:22px;
  border-radius:50%;
  border: 2px solid var(--bone-dim);
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.menu-card.chosen .menu-radio{ border-color: var(--pumpkin); }
.menu-card.chosen .menu-radio::after{
  content:"";
  width:11px; height:11px;
  border-radius:50%;
  background: var(--pumpkin);
}
.safe-tag{
  display:inline-flex; align-items:center; gap:4px;
  font-size: 11px; font-weight:800;
  color: var(--sage);
  margin-top:2px;
}

.else-box{
  margin-top: 12px;
}
textarea{
  width:100%;
  background: var(--night);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--bone);
  font-family:'Nunito';
  font-size: 14px;
  resize: vertical;
  min-height: 46px;
}
.else-toggle{
  font-size: 13px;
  font-weight: 700;
  color: var(--bone-dim);
  background:none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  text-decoration: underline dotted;
}

.confirm-row{
  display:flex;
  align-items:center;
  gap: 10px;
  background: var(--night);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}
.confirm-row input[type=checkbox]{
  width: 20px; height:20px;
  accent-color: var(--pumpkin);
  flex-shrink:0;
}

.plusone-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 4px 0;
}
.toggle-switch{
  width: 46px; height: 26px;
  background: var(--night);
  border: 1px solid var(--line);
  border-radius: 999px;
  position: relative;
  cursor:pointer;
  flex-shrink:0;
}
.toggle-switch::after{
  content:"";
  position:absolute;
  top:2px; left:2px;
  width:20px; height:20px;
  border-radius:50%;
  background: var(--bone-dim);
  transition: transform .15s ease, background .15s ease;
}
.toggle-switch.on{ background: rgba(255,122,41,0.25); border-color: var(--pumpkin); }
.toggle-switch.on::after{ transform: translateX(20px); background: var(--pumpkin); }

.plusone-detail{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  display:none;
  flex-direction:column;
  gap: 10px;
}
.plusone-detail.show{ display:flex; }
.same-as{
  font-size: 13px;
  color: var(--bone-dim);
  display:flex;
  align-items:center;
}
.same-as b{ color: var(--bone); }
.plusone-entry{
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  position: relative;
}
.plusone-entry + .plusone-entry{ margin-top: 10px; }
.plusone-remove{
  position:absolute; top:8px; right:10px;
  background:none; border:none;
  color: var(--bone-dim);
  font-size: 18px;
  cursor:pointer;
  line-height:1;
}

.section-divider{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 10px 4px 4px;
  padding: 10px 14px;
  background: rgba(255,122,41,0.12);
  border: 1px solid rgba(255,122,41,0.35);
  border-radius: 12px;
  color: var(--pumpkin);
  font-family:'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.section-divider .icon{ font-size: 18px; }

.submit-btn{
  width:100%;
  background: var(--pumpkin);
  color: var(--night);
  border:none;
  font-family:'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 17px;
  padding: 16px;
  border-radius: 14px;
  cursor:pointer;
}
.submit-btn:focus-visible{ outline: 2px solid var(--bone); outline-offset:3px; }
.fine-print{
  font-size: 11.5px;
  color: var(--bone-dim);
  text-align:center;
  margin-top:10px;
  line-height:1.5;
}

.confirm{
  display:none;
  text-align:center;
  padding: 30px 10px 10px;
}
.confirm.show{ display:block; }
.confirm .big{ font-size: 46px; }
.confirm h2{ font-family:'Baloo 2'; margin: 10px 0 6px; }
.confirm p{ color: var(--bone-dim); font-size: 14px; margin:0; }

.personal-invite{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 20px;
  text-align: left;
}
.personal-invite-label{
  color: var(--bone);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  margin: 0;
}
.personal-invite .qr-frame{
  background: #fff;
  padding: 12px;
  border-radius: 12px;
  line-height: 0;
}
.personal-invite .qr-frame svg{ display:block; width: 160px; height: 160px; }
.personal-invite .link-row{
  width: 100%;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.personal-invite .link-box{
  flex: 1 1 160px;
  min-width: 0;
  background: var(--night);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: monospace;
  font-size: 12px;
  color: var(--bone);
  overflow-wrap: break-word;
  display: flex;
  align-items: center;
}
.personal-invite .copy-btn{
  flex: 0 0 auto;
  background: var(--pumpkin);
  color: var(--night);
  border: none;
  border-radius: 12px;
  padding: 0 16px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 13.5px;
  cursor: pointer;
}
.personal-invite .copy-btn:hover{ background: var(--pumpkin-dim); }
.personal-invite .copy-btn:focus-visible{ outline: 2px solid var(--bone); outline-offset: 2px; }

.status-note{
  position: fixed;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  background: rgba(0,0,0,0.7);
  color: #aaa;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: 'Nunito';
  z-index: 10;
  text-align: center;
}

.status-note.error{
  background: #ffd23f;
  color: var(--night);
  font-size: 13px;
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

/* A solid, high-contrast bubble -- not just recolored text -- so a
   broken/missing invite link reads unmistakably as an error, not as
   part of the ticket's normal loading/status copy. Bright yellow +
   near-black text deliberately breaks from the pumpkin/purple palette
   used everywhere else on this page, so the eye can't mistake it for
   themed decoration. Shown right where the guest is already looking
   (the ticket card's own status line), not just a footer toast. */
.meta-error{
  display: inline-block;
  background: #ffd23f;
  color: var(--night) !important;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.4;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}