@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Great+Vibes&family=Josefin+Sans:wght@300;400;600&display=swap");

/* Mária Cecília 15 Anos — RSVP kit. Everything reads from tokens.css. */
.sa-root, .sa-root * { box-sizing: border-box; }
.sa-root { background: var(--black); color: var(--gold-200); font-family: var(--font-serif); font-size: 19px; line-height: 1.55; font-weight: 500; }

/* Foil text: the invitation's gold-leaf look, built only from the gold ramp */
.sa-foil { background: linear-gradient(100deg, var(--gold-500) 0%, var(--gold-100) 28%, var(--gold-300) 52%, var(--gold-100) 74%, var(--gold-400) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.sa-focus:focus-visible, .sa-btn:focus-visible, .sa-input:focus-visible, .sa-choice input:focus-visible + .sa-choice-box, .sa-counter-btn:focus-visible {
  outline: var(--border-strong) solid var(--gold-100); outline-offset: 3px;
}

/* Button */
.sa-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; padding: 0 var(--space-8);
  font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600;
  border-radius: var(--radius-none); border: var(--border-hairline) solid var(--gold-200); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.sa-btn-primary { background: var(--gold-200); color: var(--on-gold); }
.sa-btn-primary:hover { background: var(--gold-300); border-color: var(--gold-300); box-shadow: var(--glow-gold); }
.sa-btn-outline { background: transparent; color: var(--gold-200); }
.sa-btn-outline:hover { background: var(--surface-hover); }
.sa-btn-ghost { background: transparent; color: var(--gold-300); border-color: transparent; padding: 0 var(--space-4); }
.sa-btn-ghost:hover { color: var(--gold-100); }
.sa-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.sa-btn-block { width: 100%; }

/* Text field */
.sa-field { display: flex; flex-direction: column; gap: var(--space-2); }
.sa-label { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-300); }
.sa-input { width: 100%; min-height: 52px; padding: var(--space-3) var(--space-4); background: var(--surface-raised); color: var(--gold-100);
  font-family: var(--font-serif); font-size: 19px; font-weight: 500; border: var(--border-hairline) solid var(--gold-600); border-radius: var(--radius-none); }
.sa-input::placeholder { color: var(--gold-500); opacity: 1; }
.sa-input:hover { border-color: var(--gold-400); }
textarea.sa-input { min-height: 120px; resize: vertical; line-height: 1.5; }
.sa-hint { font-size: 17px; color: var(--gold-500); }
.sa-field-error .sa-input { border-color: var(--danger); }
.sa-error { font-size: 17px; color: var(--danger); }

/* Attendance choice */
.sa-choices { display: grid; gap: var(--space-3); border: 0; margin: 0; padding: 0; }
.sa-choices legend { padding: 0; margin-bottom: var(--space-2); }
.sa-choice { position: relative; display: block; cursor: pointer; }
.sa-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sa-choice-box { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); background: var(--surface-raised);
  border: var(--border-hairline) solid var(--gold-600); color: var(--gold-200); font-size: 20px; }
.sa-choice:hover .sa-choice-box { background: var(--surface-hover); }
.sa-choice-mark { flex: none; width: 20px; height: 20px; border: var(--border-hairline) solid var(--gold-400); transform: rotate(45deg); display: grid; place-items: center; }
.sa-choice input:checked + .sa-choice-box { border: var(--border-strong) solid var(--gold-200); padding: calc(var(--space-4) - 1px) calc(var(--space-6) - 1px); }
.sa-choice input:checked + .sa-choice-box .sa-choice-mark::after { content: ""; width: 10px; height: 10px; background: var(--gold-100); }

/* Guest counter */
.sa-counter { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6);
  background: var(--surface-raised); border: var(--border-hairline) solid var(--gold-600); }
.sa-counter-ctrl { display: flex; align-items: center; gap: var(--space-4); }
.sa-counter-btn { width: 44px; height: 44px; border-radius: var(--radius-full); background: transparent; color: var(--gold-200);
  border: var(--border-hairline) solid var(--gold-400); font-family: var(--font-serif); font-size: 26px; line-height: 1; cursor: pointer; }
.sa-counter-btn:hover:not([disabled]) { background: var(--surface-hover); }
.sa-counter-btn[disabled] { opacity: .4; cursor: not-allowed; }
.sa-counter-value { min-width: 2ch; text-align: center; font-size: 32px; color: var(--gold-100); font-variant-numeric: lining-nums tabular-nums; }

/* Event card */
.sa-event { text-align: center; padding: var(--space-8) var(--space-6); background: var(--surface-raised); border: var(--border-hairline) solid var(--gold-600); position: relative; }
.sa-event::before { content: ""; position: absolute; inset: 6px; border: var(--border-hairline) solid var(--hairline); pointer-events: none; }
.sa-eyebrow { font-family: var(--font-sans); font-weight: 300; font-size: 14px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold-300); }
.sa-event-date { font-size: 48px; line-height: 1.1; letter-spacing: .02em; margin: var(--space-2) 0; font-variant-numeric: lining-nums; }
.sa-rule { display: flex; align-items: center; gap: var(--space-3); color: var(--gold-400); margin: var(--space-4) auto; max-width: 220px; }
.sa-rule::before, .sa-rule::after { content: ""; flex: 1; height: 1px; background: var(--gold-600); }
.sa-rule-gem { width: 7px; height: 7px; background: var(--gold-400); transform: rotate(45deg); }
.sa-event-line { margin: 0; color: var(--gold-200); }
.sa-event-sub { margin: 0; color: var(--gold-500); font-size: 17px; }
.sa-event a { color: var(--gold-100); }

/* Countdown */
.sa-countdown { display: flex; justify-content: center; gap: var(--space-6); flex-wrap: wrap; }
.sa-count-unit { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.sa-count-num { font-size: 48px; line-height: 1; color: var(--gold-100); font-variant-numeric: lining-nums tabular-nums; }
.sa-count-lbl { margin-top: var(--space-2); font-family: var(--font-sans); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-400); }
.sa-count-sep { align-self: flex-start; font-size: 40px; line-height: 1; color: var(--gold-600); }

/* Confirmation */
.sa-confirm { text-align: center; padding: var(--space-12) var(--space-6); border: var(--border-hairline) solid var(--gold-600); background: var(--surface-raised); }
.sa-confirm-title { font-family: var(--font-script); font-size: 48px; line-height: 1.15; margin: 0 0 var(--space-4); font-weight: 400; }
.sa-confirm-text { margin: 0 auto; max-width: 36ch; color: var(--gold-200); }
.sa-confirm-status { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }