/* ========================================================================
   Aniversário da Olívia — "Snow globe" theme
   Icy palette · Fraunces display · Manrope body · CSS-only snowfall
   ======================================================================== */

:root {
  --ice-01: #f7fbfe;
  --ice-02: #e8f2fa;
  --ice-03: #d3e5f2;
  --frost:  #a6c8dd;
  --sky:    #5faed4;
  --deep:   #2c6b93;
  --ink:    #123957;
  --lilac:  #bfc4ea;
  --gilt:   #d9c076;         /* warm accent used very sparingly */
  --card:   rgba(255, 255, 255, 0.62);
  --card-line: rgba(255, 255, 255, 0.9);
  --shadow-lg: 0 22px 55px -18px rgba(18, 57, 87, 0.35),
               0 4px 14px -6px rgba(18, 57, 87, 0.18),
               inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-sm: 0 4px 14px -6px rgba(18, 57, 87, 0.18);
  --danger: #a94a5c;
  --success: #3f8f6a;
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, #eaf4fb 0%, #d4e6f2 55%, #c8dced 100%);
  min-height: 100vh;
}

/* ------------------------------------------------------------------------
   Aurora background — soft radial glows layered under everything.
   ------------------------------------------------------------------------ */

.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 20% 15%, rgba(191, 196, 234, 0.55) 0%, transparent 65%),
    radial-gradient(45% 40% at 85% 25%, rgba(95, 174, 212, 0.35) 0%, transparent 70%),
    radial-gradient(55% 55% at 50% 100%, rgba(255, 255, 255, 0.75) 0%, transparent 60%),
    radial-gradient(40% 30% at 10% 90%, rgba(166, 200, 221, 0.45) 0%, transparent 65%);
}

/* ------------------------------------------------------------------------
   Snowfall — falling flakes behind content. Purely decorative.
   Each flake sets --drift, animation-delay, animation-duration, font-size,
   opacity via inline style. Drifts sideways as it falls.
   ------------------------------------------------------------------------ */

.snow {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.flake {
  --drift: 0vw;
  position: absolute;
  top: -8%;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  animation-name: snowfall;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  will-change: transform;
  user-select: none;
}

@keyframes snowfall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); }
  100% { transform: translate3d(var(--drift), 115vh, 0) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .flake { animation: none; opacity: 0.15 !important; }
}

/* ------------------------------------------------------------------------
   Layout + card
   ------------------------------------------------------------------------ */

.page {
  position: relative;
  max-width: 580px;
  margin: 0 auto;
  padding: 2rem 1.1rem 3.5rem;
}

/* Wider layout for the admin dashboard's 6-column table. */
.page.page-wide { max-width: 1040px; }

.card {
  position: relative;
  background: var(--card);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--card-line);
  border-radius: 22px;
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-lg);
  margin-bottom: 1.25rem;
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.card + .card { animation-delay: 0.12s; }
.card + .card + .card { animation-delay: 0.24s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Frost-crystal glow along the top edge of each card */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, transparent 40%);
  mix-blend-mode: soft-light;
}

/* ------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------ */

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--deep);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

h1 {
  font-size: clamp(1.85rem, 2.4vw + 1.2rem, 2.4rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
}

h2 {
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0.25rem 0 1rem;
}

a {
  color: var(--deep);
  text-decoration-color: var(--frost);
  text-underline-offset: 3px;
}
a:hover { color: var(--sky); }

/* ------------------------------------------------------------------------
   Invitation
   ------------------------------------------------------------------------ */

.invitation-wrap {
  text-align: center;
  margin: 0 auto 1.5rem;
  position: relative;
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.invitation-wrap img {
  width: 100%;
  max-width: 460px;
  height: auto;
  border-radius: 18px;
  box-shadow:
    0 30px 60px -22px rgba(18, 57, 87, 0.45),
    0 8px 20px -10px rgba(18, 57, 87, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.7);
}

/* ------------------------------------------------------------------------
   Party details list
   ------------------------------------------------------------------------ */

.details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 1rem;
  margin: 0.5rem 0 0.25rem;
  align-items: baseline;
}
.details dt {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sky);
}
.details dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink);
}

.parents-note {
  font-size: 0.9rem;
  color: var(--deep);
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(95, 174, 212, 0.35);
}
.parents-note strong { color: var(--ink); font-weight: 600; }

/* Google Maps link on the location line */
.map-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(95, 174, 212, 0.55);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.map-link:hover { color: var(--sky); border-bottom-color: var(--sky); }
.map-link__arrow {
  font-family: var(--font-body);
  font-size: 0.75em;
  color: var(--sky);
  transform: translateY(-0.05em);
  transition: transform 0.2s;
}
.map-link:hover .map-link__arrow { transform: translate(1px, -0.15em); }

/* ------------------------------------------------------------------------
   Form
   ------------------------------------------------------------------------ */

form { margin: 0; }
.field { margin-bottom: 1rem; }

label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sky);
  margin-bottom: 0.4rem;
}

.optional {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.1em 0.5em;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  color: rgba(18, 57, 87, 0.55);
  background: rgba(166, 200, 221, 0.25);
  border-radius: 999px;
  vertical-align: 1px;
}

input[type="text"],
input[type="tel"],
input[type="password"],
textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(166, 200, 221, 0.65);
  border-radius: 12px;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.75);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--sky);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(95, 174, 212, 0.22);
}

textarea {
  min-height: 78px;
  resize: vertical;
  font-family: var(--font-body);
}

.hint {
  font-size: 0.8rem;
  color: rgba(18, 57, 87, 0.55);
  margin-top: 0.35rem;
  letter-spacing: 0;
}

/* ------------------------------------------------------------------------
   Segmented control — modern iOS-style pill selector for Vou / Não vou.
   Radios are visually hidden (screen-reader friendly) and live as siblings
   of .segmented so the :checked ~ selectors can restyle the labels and
   toggle the .form-section / .apology-section blocks below.
   ------------------------------------------------------------------------ */

input[name="attend-choice"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(166, 200, 221, 0.55);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 2px rgba(18, 57, 87, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.7);
  margin-bottom: 1.25rem;
}

.segmented label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.85rem 0.5rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  color: rgba(18, 57, 87, 0.65);
  transition: color 0.25s ease, background 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow 0.25s ease, transform 0.15s ease;
  margin-bottom: 0;
  user-select: none;
  text-transform: none;
  letter-spacing: 0;
}

.segmented label:hover { color: var(--ink); }
.segmented label:active { transform: scale(0.97); }

.seg-icon {
  font-size: 0.9em;
  opacity: 0.85;
  transition: opacity 0.25s, transform 0.35s cubic-bezier(0.34, 1.6, 0.64, 1);
}

/* Checked "Vou" — solid deep navy pill with a soft blue halo */
#attend-yes:checked ~ .segmented label[for="attend-yes"] {
  background: var(--ink);
  color: #ffffff;
  box-shadow:
    0 6px 18px -8px rgba(18, 57, 87, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
#attend-yes:checked ~ .segmented label[for="attend-yes"] .seg-icon {
  opacity: 1;
  color: #cfe7f6;
  transform: rotate(360deg);
}

/* Checked "Não vou" — muted slate, friendly not alarming */
#attend-no:checked ~ .segmented label[for="attend-no"] {
  background: #7f95a4;
  color: #ffffff;
  box-shadow:
    0 6px 18px -8px rgba(127, 149, 164, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* ------------------------------------------------------------------------
   Conditional sections: form on Vou, apology on Não vou.
   Hidden by default, revealed with a soft slide-in.
   ------------------------------------------------------------------------ */

.form-section,
.apology-section {
  display: none;
  animation: slide-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

#attend-yes:checked ~ .form-section { display: block; }
#attend-no:checked ~ .apology-section { display: block; }

.apology-section {
  text-align: center;
  padding: 1.25rem 0.5rem 0.25rem;
}
.apology-section p { margin: 0.4rem 0; color: var(--deep); }
.apology-section p:last-of-type { font-family: var(--font-display); font-size: 1.1rem; font-style: italic; color: var(--ink); }
.apology-section .snowflake {
  font-size: 2.6rem;
  color: var(--sky);
  display: inline-block;
  animation: spin 12s linear infinite;
  text-shadow: 0 0 12px rgba(95, 174, 212, 0.5);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------------
   Primary button — modern pill, solid ink navy, soft blue halo on hover.
   Arrow nudges right on hover. Spring press.
   ------------------------------------------------------------------------ */

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.6rem;
  background: var(--ink);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.25s ease,
    box-shadow 0.3s ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 8px 20px -10px rgba(18, 57, 87, 0.45);
  position: relative;
}

button:hover, .btn:hover {
  transform: translateY(-1px);
  background: #0d2f4a;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 14px 30px -10px rgba(18, 57, 87, 0.55),
    0 0 0 6px rgba(95, 174, 212, 0.16);
}

button:active, .btn:active {
  transform: scale(0.98);
  transition-duration: 0.1s;
}

button:focus-visible, .btn:focus-visible {
  outline: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 14px 30px -10px rgba(18, 57, 87, 0.55),
    0 0 0 4px rgba(95, 174, 212, 0.45);
}

button:disabled {
  background: #7f95a4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-arrow {
  font-family: var(--font-body);
  font-size: 1.15em;
  line-height: 1;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-primary:hover .btn-arrow { transform: translateX(3px); }

.btn-full { display: flex; width: 100%; text-align: center; }

/* ------------------------------------------------------------------------
   Error box
   ------------------------------------------------------------------------ */

.error {
  background: linear-gradient(135deg, rgba(253, 236, 238, 0.85), rgba(253, 236, 238, 0.65));
  border: 1px solid rgba(169, 74, 92, 0.35);
  color: var(--danger);
  padding: 0.75rem 0.95rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  backdrop-filter: blur(6px);
}

/* ------------------------------------------------------------------------
   Success hero (obrigado page)
   ------------------------------------------------------------------------ */

.success-hero {
  text-align: center;
  padding: 3rem 1rem 2rem;
}
.success-hero .snowflake {
  font-size: 4rem;
  display: inline-block;
  color: var(--sky);
  margin-bottom: 0.75rem;
  animation: spin 14s linear infinite;
  text-shadow: 0 0 20px rgba(95, 174, 212, 0.55);
}
.success-hero h1 { margin-bottom: 0.85rem; }
.success-hero p  { font-size: 1.05rem; color: var(--deep); }

/* ------------------------------------------------------------------------
   Admin
   ------------------------------------------------------------------------ */

.admin-card { max-width: 380px; margin-left: auto; margin-right: auto; }

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.admin-header h1 { margin: 0; font-size: 1.85rem; }

.logout-form { margin: 0; }
.logout-form button {
  background: rgba(255, 255, 255, 0.55);
  color: var(--deep);
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid rgba(166, 200, 221, 0.6);
  box-shadow: none;
  border-radius: 10px;
}
.logout-form button:hover {
  background: #ffffff;
  color: var(--ink);
  transform: none;
  filter: none;
  box-shadow: var(--shadow-sm);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}

.stats.stats-single { grid-template-columns: 1fr; }
.stats.stats-single .stat { padding: 1.75rem 1rem; }
.stats.stats-single .stat .num { font-size: 3.4rem; }

.stat {
  background: var(--card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--card-line);
  border-radius: 16px;
  padding: 1.25rem 0.75rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.stat .num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat .label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sky);
  font-weight: 700;
  margin-top: 0.6rem;
}
.stat.yes .num { color: var(--success); }

.responses {
  background: var(--card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--card-line);
  border-radius: 16px;
  /* Rounded card with horizontal scroll safety-net so no cell ever escapes
     the container on narrow viewports. Vertical growth stays natural. */
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: var(--shadow-lg);
}

.responses table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.92rem; }
.responses th, .responses td {
  padding: 0.75rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid rgba(166, 200, 221, 0.35);
  vertical-align: top;
}
.responses th {
  background: rgba(233, 244, 251, 0.7);
  color: var(--deep);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.responses tr:last-child td { border-bottom: none; }

.empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--sky);
  font-style: italic;
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.muted { color: rgba(18, 57, 87, 0.35); user-select: none; }

/* Row-level action buttons on the admin dashboard.
   Small, restrained — should not steal focus from the data. */

.col-actions { width: 1%; white-space: nowrap; }

.row-actions {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}
.row-actions form { margin: 0; display: inline-flex; }

.btn-mini,
button.btn-mini,
a.btn-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--deep);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(166, 200, 221, 0.65);
  border-radius: 999px;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.btn-mini:hover,
button.btn-mini:hover,
a.btn-mini:hover {
  background: #ffffff;
  color: var(--ink);
  border-color: var(--sky);
  transform: none;
  box-shadow: var(--shadow-sm);
}
.btn-mini:active { transform: scale(0.97); }

.btn-danger,
button.btn-danger {
  color: var(--danger);
  border-color: rgba(169, 74, 92, 0.35);
  background: rgba(255, 255, 255, 0.6);
}
.btn-danger:hover,
button.btn-danger:hover {
  background: #fdecee;
  color: var(--danger);
  border-color: rgba(169, 74, 92, 0.55);
}

/* Edit page footer buttons */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1rem;
}

.privacy-note {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(18, 57, 87, 0.6);
  text-align: center;
  background: rgba(255, 255, 255, 0.45);
  border: 1px dashed rgba(166, 200, 221, 0.55);
  border-radius: 12px;
}

/* ------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------ */

@media (max-width: 480px) {
  .page { padding: 1.25rem 0.85rem 2.5rem; }
  .card { padding: 1.35rem 1.15rem; border-radius: 18px; }
  h1 { font-size: 1.7rem; }
  .stats { grid-template-columns: 1fr; }
  .responses { font-size: 0.86rem; }
  .responses th, .responses td { padding: 0.55rem 0.6rem; }
  /* Stack row action pills vertically on tight cells for better tap targets. */
  .row-actions { flex-direction: column; align-items: stretch; gap: 0.3rem; }
  .row-actions form { display: flex; }
  .row-actions .btn-mini { justify-content: center; }
}

/* ------------------------------------------------------------------------
   Reduced motion — respect the user
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}