/* Final visual and privacy polish. */
.invitation {
  background: transparent !important;
}

.invitation::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: url('royal-palace-wedding.png') center / cover no-repeat;
  filter: saturate(1.08) contrast(1.04) brightness(.72);
}

.invitation::before {
  z-index: -1 !important;
  background:
    radial-gradient(circle at 15% 10%, #f67f4a40, transparent 28%),
    radial-gradient(circle at 86% 38%, #c238c64a, transparent 32%),
    radial-gradient(circle at 44% 88%, #08b9b134, transparent 28%),
    linear-gradient(135deg, #080c2a92, #2903346b 47%, #031c3973) !important;
}

.invitation .hero::before {
  background: linear-gradient(180deg, #070a1e18, #080b2770 72%, #0c0822c2) !important;
}

.invitation .hero-content {
  background: linear-gradient(138deg, #061228c9, #231143ad 48%, #4d123db3) !important;
  border-color: #ffe18cba !important;
  box-shadow: 0 30px 85px #090016a8, inset 0 0 0 6px #ffeaa51c !important;
  backdrop-filter: blur(13px) saturate(1.25);
  animation: welcomePrism 8s ease-in-out infinite alternate;
}

.invitation.is-ready .hero-content {
  animation: guestHeroIn 1.05s cubic-bezier(.16, .85, .2, 1) both, welcomePrism 8s ease-in-out 1.1s infinite alternate;
}

.invitation .hero-content::before,
.invitation .hero-content::after {
  color: #ffe38a;
  text-shadow: 0 0 20px #ffae4b;
}

.invitation .hero .personal {
  margin-top: 3px;
  color: #ffe38b;
  text-shadow: 0 2px 16px #301139;
}

.invitation .hero .request { color: #fff6e4; }

.invitation .hero h1 {
  background: linear-gradient(135deg, #fff9e8, #ffdc7c 44%, #ffc4df 75%, #fff9e8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.invitation .hero h1 i { color: inherit; }

.welcome-seal {
  background: linear-gradient(145deg, #ffdd7e20, #fa61bf1e);
  animation: sealGlow 3.5s ease-in-out infinite;
}

.auth-screen {
  background: linear-gradient(130deg, #06182a79, #3f0d4f69 52%, #9d3a4580), url('royal-login-garden.png') center / cover no-repeat !important;
}

.auth-screen::before {
  background:
    radial-gradient(circle at 16% 28%, #ff9b4a47, transparent 23%),
    radial-gradient(circle at 82% 25%, #f35bba46, transparent 27%),
    radial-gradient(circle at 50% 95%, #2ccfc73d, transparent 30%),
    linear-gradient(#07142865, #071125a6) !important;
}

.auth-screen::after {
  border-color: #ffe18d9e !important;
  box-shadow: inset 0 0 0 5px #ffe9a11a, 0 0 70px #c74abb20 !important;
}

.auth-halo {
  border-color: #f9c476a3 !important;
  box-shadow: 0 0 0 19px #f86cb218, 0 0 0 42px #ffdc8a15, 0 0 94px #48d8ca22 !important;
  animation: haloBreathe 5s ease-in-out infinite;
}

.auth-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #071b35bc, #29114cb0 55%, #6b1b4a9f) !important;
  border-color: #ffe18dab !important;
  box-shadow: 0 30px 78px #060013b5, inset 0 0 0 6px #ffe8a51c !important;
  backdrop-filter: blur(15px) saturate(1.35) !important;
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 0;
  background: conic-gradient(from 30deg, transparent, #ffcf6a24, transparent, #eb5bcb25, transparent, #48d5c41e, transparent);
  animation: cardAurora 13s linear infinite;
}

.auth-card > * { position: relative; z-index: 1; }

.auth-crest {
  background: linear-gradient(135deg, #ffdd8229, #fc5cc323) !important;
  border-color: #fff0ab !important;
  box-shadow: 0 0 0 5px #ffdf8619, 0 0 26px #f869b845 !important;
}

.auth-card .eyebrow { color: #ffdf8b !important; }

.auth-card h1 {
  background: linear-gradient(110deg, #fff9e9, #ffd778 43%, #ffc9e5 70%, #fff9e9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
}

.auth-card h1 i { color: inherit !important; }
.wedding-date { color: #f9dfae !important; }

.auth-divider { background: linear-gradient(90deg, transparent, #f9d272, #fa78bd, #64d8d2, #f9d272, transparent) !important; }
.auth-divider span { background: #211340 !important; color: #ffde87 !important; }
.auth-card .auth-intro { color: #fff0df !important; }

.auth-card input {
  border-color: #ffd57da8 !important;
  background: #0713308f !important;
  backdrop-filter: blur(5px);
}

.auth-card input:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #ffcf7b36, 0 0 22px #f455b542 !important;
}

.auth-card .gold-button {
  background: linear-gradient(105deg, #ffdf83, #f6a742 48%, #f26ab5) !important;
  box-shadow: 0 5px 0 #9f4b54, 0 14px 34px #f55a8429 !important;
}

.landing-countdown { border-top-color: #ffdc906e !important; }
.landing-countdown b { color: #fff7e8 !important; }
.landing-countdown small { color: #ffe1a4 !important; }

.meal-choice {
  margin: 19px 0 15px;
  padding: 0;
  border: 0;
}

.meal-choice legend {
  margin-bottom: 10px;
  color: #ffe5a2;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.meal-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

.meal-options input {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  margin: -1px !important;
  opacity: 0;
  pointer-events: none;
}

.meal-options label {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 !important;
  padding: 13px !important;
  border: 1px solid #fff1c36e !important;
  border-radius: 10px !important;
  background: #0a143981 !important;
  color: #f9f1df !important;
  font: 700 .72rem 'DM Sans' !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.meal-options label span { font-size: 1.05rem; line-height: 0; }
.meal-options label[for="mealVeg"] span { color: #63dd87; }
.meal-options label[for="mealNonVeg"] span { color: #ff6068; }
.meal-options input:focus-visible + label { outline: 2px solid #fff0a3; outline-offset: 3px; }
.meal-options input:checked + label { transform: translateY(-2px); box-shadow: 0 10px 22px #02030e88; }

.meal-options #mealVeg:checked + label {
  border-color: #74f39e !important;
  background: linear-gradient(135deg, #14623b, #16894d) !important;
  color: #effff3 !important;
}

.meal-options #mealNonVeg:checked + label {
  border-color: #ff7d7e !important;
  background: linear-gradient(135deg, #872436, #c43140) !important;
  color: #fff3f1 !important;
}

.meal-options input:disabled + label {
  cursor: not-allowed;
  opacity: .46;
  transform: none !important;
  box-shadow: none !important;
}

@keyframes welcomePrism {
  0%, 100% { box-shadow: 0 30px 85px #090016a8, inset 0 0 0 6px #ffeaa51c; }
  50% { box-shadow: 0 35px 95px #4e17488a, 0 0 42px #1cded426, inset 0 0 0 6px #ffeaa532; }
}

@keyframes sealGlow {
  50% { transform: scale(1.06); box-shadow: 0 0 0 7px #edce7820, 0 0 31px #ff73bc72; }
}

@keyframes haloBreathe { 50% { transform: scale(1.06); opacity: .9; } }
@keyframes cardAurora { to { transform: rotate(1turn); } }

@media (max-width: 620px) {
  .invitation::after {
    background-position: 54% center;
    background-size: auto 100svh;
    filter: saturate(1.2) contrast(1.06) brightness(.84);
  }

  .invitation::before {
    background:
      radial-gradient(circle at 48% 9%, #ffac5142, transparent 28%),
      radial-gradient(circle at 83% 35%, #ed4fba3b, transparent 27%),
      linear-gradient(180deg, #070d2787, #29033054 52%, #08233b7b) !important;
  }

  .invitation .hero::before { background: linear-gradient(180deg, #07091f21, #0a0b2560 68%, #0b0a27b0) !important; }
  .auth-screen { background-position: 52% center !important; }
  .auth-screen::before { background: radial-gradient(circle at 50% 12%, #fd9d4d37, transparent 25%), radial-gradient(circle at 85% 54%, #ef58ba31, transparent 28%), linear-gradient(#0714285c, #0711259a) !important; }
  .auth-card { background: linear-gradient(145deg, #081a36ae, #2f1347a5 56%, #701c5596) !important; }
  .meal-options { gap: 8px; }
  .meal-options label { padding: 12px 7px !important; font-size: .66rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .invitation::before,
  .auth-halo,
  .auth-card::before,
  .welcome-seal,
  .invitation .hero-content { animation: none !important; }
}