/* Warm Christmas registration theme. Keep the narrow, familiar form layout. */
.registration-area {
  --form-forest: #123e31;
  --form-berry: #b5253e;
  --form-orange: #ce4310;
  --form-gold: #e7be72;
  --form-paper: #fff9f0;
  --form-muted: #586b5d;
  background:
    radial-gradient(ellipse 72% 34% at 0 0, #b5253e0b, transparent 75%),
    radial-gradient(ellipse 65% 42% at 100% 90%, #123e310b, transparent 76%),
    #fff9f0;
}
.registration-area::before {
  background:
    radial-gradient(ellipse 65% 40% at 4% 5%, #b5253e0a, transparent 76%),
    radial-gradient(ellipse 70% 40% at 96% 90%, #e7be721a, transparent 78%);
  opacity: .65;
}
.registration-area.mode-support,
.registration-area.mode-both { background-color: var(--form-paper); }
.form-shell { max-width: 510px; }
.form-heading .eyebrow { color: var(--form-berry); letter-spacing: .19em; }
.form-heading .eyebrow::before {
  width: 27px;
  background: linear-gradient(90deg, transparent, #b5253e);
}
.form-heading .eyebrow::after {
  content: "";
  height: 2px;
  width: 27px;
  background: linear-gradient(90deg, #b5253e, transparent);
}
.form-heading h2 { color: var(--form-forest); }
.form-heading p { color: var(--form-muted); }
.form-card {
  position: relative;
  overflow: hidden;
  padding-top: 42px;
  border: 1px solid #e9e0d1;
  border-radius: 28px;
  background: #fffefa;
  box-shadow: 0 22px 60px #1c3b2c10, 0 3px 10px #67493305;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.form-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  height: 9px;
  border-radius: 27px 27px 0 0;
  background: repeating-linear-gradient(135deg, #123e31 0 29px, #fffefa 29px 46px, #b5253e 46px 75px, #fffefa 75px 92px);
}
.field label,
.fieldset-legend,
.other-input label { color: var(--form-forest); }
.required { color: var(--form-berry); }
.field input,
.field select,
.other-input input {
  min-height: 52px;
  border: 1.5px solid #bdcdbf;
  border-radius: 14px;
  background-color: #fff;
  color: #253e34;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.field input::placeholder,
.other-input input::placeholder { color: #627568; opacity: 1; }
.field input:focus,
.field select:focus,
.other-input input:focus {
  outline: none;
  border-color: var(--form-forest);
  background-color: #fff;
  box-shadow: 0 0 0 4px #123e3114;
}
.field .helper,
.section-heading p,
.panel-hint { color: var(--form-muted); }
.field.error input,
.field.error select { border-color: var(--form-berry); }
.field-error { color: #a91e35; }
.form-divider { background: #e7e7db; }
.section-heading .num {
  border-radius: 10px;
  background: #f8e7e8;
  color: var(--form-berry);
}
.section-heading h3 { color: var(--form-forest); }
.welcome-singing {
  border-color: #cbdece;
  border-radius: 14px;
  background: #edf5ed;
  color: #24553c;
}
.role-card {
  min-height: 82px;
  gap: 12px;
  padding: 15px 13px;
  border: 1.5px solid #bdcdbf;
  border-radius: 20px;
  background: #fff;
  color: var(--form-forest);
  transition: transform .38s cubic-bezier(.2,.8,.3,1.3), background-color .23s ease, border-color .23s ease, box-shadow .23s ease;
}
.role-card .role-icon {
  border-radius: 12px;
  background: #fae9e9;
  color: var(--form-berry);
  transition: transform .4s cubic-bezier(.2,.8,.3,1.4), background-color .23s ease;
}
.role-card.support .role-icon { background: #eaf2e9; color: var(--form-forest); }
.role-text small { color: var(--form-muted); }
.checkmark {
  border: 1.5px solid #91a797;
  border-radius: 50%;
  transition: transform .35s cubic-bezier(.2,.8,.3,1.4), background-color .2s ease;
}
.role-card.selected {
  border-color: var(--form-berry);
  background: var(--form-berry);
  color: #fff;
  box-shadow: 0 8px 22px #b5253e22;
  animation: form-role-select .38s cubic-bezier(.2,.8,.3,1.3);
}
.role-card.selected.support {
  border-color: var(--form-forest);
  background: var(--form-forest);
  color: #fff;
  box-shadow: 0 8px 22px #123e3120;
}
.role-card.selected .role-text strong { color: #fff; }
.role-card.selected .role-text small { color: #ffe9ed; }
.role-card.selected.support .role-text small { color: #e1eee3; }
.role-card.selected .role-icon {
  background: #ffffff24;
  color: #fff;
  transform: rotate(-8deg) scale(1.06);
}
.role-card.selected.support .role-icon {
  background: #ffffff24;
  color: #fff;
  transform: rotate(8deg) scale(1.06);
}
.role-card.selected .checkmark,
.role-card.selected.support .checkmark {
  border-color: #fff;
  background: #fff;
  color: var(--form-berry);
  transform: scale(1.04);
}
.role-card.selected.support .checkmark { color: var(--form-forest); }
.role-card:active { transform: scale(.985); }
.detail-panel {
  padding: 17px 14px;
  border-color: #e7dfd1;
  border-radius: 17px;
  background: #fcf8ef;
}
.detail-panel h4 { color: var(--form-forest); }
.chip-set { gap: 8px; }
.chip {
  min-height: 44px;
  padding: 10px 13px;
  border: 1.5px solid #aabcaa;
  border-radius: 999px;
  background: #fffefa;
  color: #31543b;
  font-size: 11.5px;
  line-height: 1.45;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .28s cubic-bezier(.2,.8,.3,1.3);
}
.chip[aria-pressed="true"],
#supportChips .chip[aria-pressed="true"] {
  border-color: var(--form-orange);
  background: var(--form-orange);
  color: #fff;
  transform: none;
  box-shadow: 0 4px 12px #ce431020;
  animation: form-chip-pop .32s cubic-bezier(.2,.8,.3,1.3);
}
/* Selection never inserts text or changes a pill's width. */
.chip[aria-pressed="true"]::before { content: none; }
.chip:active { transform: scale(.96); }
.rehearsal-note {
  border: 1px solid #eadabb;
  border-left: 4px solid var(--form-gold);
  border-radius: 6px 15px 15px 6px;
  background: #fff7e8;
  color: #66563e;
}
.rehearsal-note b { color: #57452c; }
.calendar-ico { color: var(--form-berry); }
.yes-no { gap: 12px; }
.yes-no label {
  min-height: 56px;
  border: 1.5px solid #a3bea9;
  border-radius: 999px;
  background: #f0f6ee;
  color: var(--form-forest);
  transition: transform .3s cubic-bezier(.2,.8,.3,1.3), background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.yes-no label:has(input[value="No"]) { background: #fff1f2; border-color: #d9a4ae; color: #a41e36; }
.yes-no label:has(input[value="Yes"]:checked) {
  border-color: var(--form-forest);
  background: var(--form-forest);
  color: #fff;
  box-shadow: 0 5px 14px #123e311f;
}
.yes-no label:has(input[value="No"]:checked) {
  border-color: var(--form-berry);
  background: var(--form-berry);
  color: #fff;
  box-shadow: 0 5px 14px #b5253e1f;
}
.yes-no input {
  appearance: none;
  display: grid;
  place-items: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.yes-no input::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  transform: scale(0);
  transition: transform .2s ease;
}
.yes-no input:checked::before { transform: scale(1); }
.yes-no input:focus-visible { outline: none; }
.yes-no label:has(input:focus-visible),
.role-card:focus-visible,
.chip:focus-visible,
.submit-button:focus-visible {
  outline: 3px solid #a63347;
  outline-offset: 4px;
}
.privacy { color: var(--form-muted); }
.submit-button {
  isolation: isolate;
  min-height: 58px;
  border-radius: 999px;
  background: var(--form-orange);
  color: #fff;
  box-shadow: 0 8px 22px #ce431023;
  animation: none;
  transition: transform .25s ease, background-color .2s ease, box-shadow .2s ease;
}
.submit-button::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 48%;
  background: linear-gradient(100deg, transparent, #ffffff45, transparent);
  pointer-events: none;
  transform: translateX(-160%) skewX(-18deg);
  animation: none;
}
.submit-button:hover:not(:disabled),
.submit-button:focus-visible:not(:disabled) {
  background: #b9370c;
  transform: translateY(-2px);
  animation: form-button-ring 1.8s ease-out infinite;
}
.submit-button:hover:not(:disabled)::after,
.submit-button:focus-visible:not(:disabled)::after { animation: form-button-sweep .85s ease-out both; }
.submit-button:active:not(:disabled) { transform: scale(.985); }
.submit-button:disabled { animation: none; background: #8b6b5e; opacity: 1; box-shadow: none; transform: none; }
.submit-button:disabled::after { animation: none; }
.error-banner { border-color: #e4afb7; background: #fff1f2; color: #942039; }
.completed-banner { border-color: #b8d3bd; background: #edf6ed; color: #24553c; }
.site-footer { background: #fff5e8; color: #586b5d; }
.site-footer strong { color: #123e31; }
.site-footer::before {
  height: 6px;
  background: repeating-linear-gradient(135deg, #b5253e 0 15px, #fff9f0 15px 27px);
}
.confirmation-modal { background: #fffefa; border-color: #e7dfd1; border-radius: 25px; }
.confirmation-modal::before { content: ""; position: absolute; inset: 0 0 auto; height: 9px; background: repeating-linear-gradient(135deg, #123e31 0 29px, #fffefa 29px 46px, #b5253e 46px 75px, #fffefa 75px 92px); }
.confirmation-modal h2 { color: #123e31; }
.confirmation-modal p,
.confirmation-modal .modal-footer { color: #586b5d; }
.confirmation-modal .welcome-note { color: #a41e36; }
.close-modal { width: 44px; height: 44px; top: 11px; right: 11px; background: #edf2e9; color: #31543b; }
.modal-icon { background: #e8f3e7; color: #24553c; }
.whatsapp-link { border-radius: 999px; background: #176b40; }
.whatsapp-link:hover { background: #125332; }
.group-placeholder { color: #45654d; }
@media (hover: hover) {
  .role-card:hover { border-color: #70967a; background: #f5f8f1; transform: translateY(-2px); }
  .role-card.selected:hover { border-color: #a41e36; background: #a41e36; }
  .role-card.selected.support:hover { border-color: #0b3025; background: #0b3025; }
  .chip:hover { border-color: #53795d; background: #f0f5eb; }
  .chip[aria-pressed="true"]:hover,
  #supportChips .chip[aria-pressed="true"]:hover { border-color: #b9370c; background: #b9370c; }
}
@media (max-width: 375px) {
  .form-card { border-radius: 24px; }
  .role-card { gap: 10px; padding: 14px 10px; }
  .chip { padding: 10px 11px; }
  .detail-panel { padding: 16px 12px; }
}
@keyframes form-role-select {
  0% { transform: scale(.985); }
  65% { transform: scale(1.012); }
  100% { transform: scale(1); }
}
@keyframes form-chip-pop {
  0% { transform: scale(.94); }
  65% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes form-button-ring {
  0% { box-shadow: 0 8px 22px #ce431023, 0 0 0 0 #ce431033; }
  80%, 100% { box-shadow: 0 8px 22px #ce431023, 0 0 0 11px #ce431000; }
}
@keyframes form-button-sweep {
  to { transform: translateX(340%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .registration-area *,
  .registration-area *::before,
  .registration-area *::after { animation: none !important; transition: none !important; }
  .role-card.selected .role-icon,
  .role-card.selected.support .role-icon { transform: none; }
  .submit-button::after { display: none; }
}