/* ===== CLEAN LIGHT + BRIGHT THEME ===== */
:root{
  --bg: #faf7f0;                 /* bright cream */
  --ink: #2f3a2f;                /* lighter text */
  --green: #2e7b4f;              /* fresh green */
  --red: #c43d3d;                /* bright red */
  --muted: #e6ddd0;              /* pale divider */
  --radius: 16px;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  background: radial-gradient(1200px 700px at 50% -10%, #fff 0%, #faf7f0 60%, #f4efe6 100%);
  color: var(--ink);
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  line-height: 1.55;
}

img{ max-width: 100%; display: block; height: auto; }

/* ===== LAYOUT ===== */
.container{ 
  max-width: 820px; 
  margin: 0 auto; 
  padding: 16px 18px 60px; 
}

/* ===== INVITE CARD ===== */
.invite{
  position: relative;
  margin-top: 20px;
  background: #fffffff5;
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  padding: 20px 20px 12px;
}

.invite h1{
  color: var(--green);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  margin: 4px 0 8px;
}

.datetime{ 
  text-align: center; 
  font-weight: 600; 
  margin: 0 0 6px; 
}

.location{ 
  text-align: center; 
  font-style: normal; 
  margin: 0 0 14px; 
}

.rule{
  border: 0; 
  height: 1px; 
  max-width: 520px; 
  margin: 14px auto 16px;
  background: linear-gradient(90deg, transparent, var(--muted), transparent);
}

.invite p{ 
  margin: 10px 0; 
  font-size: 1.04rem; 
}

/* ===== ORNAMENT BADGE ===== */
.ornament-badge{
  display: block;
  margin: 10px auto 6px;
  width: 126px;
  height: auto;
  opacity: .85;
  border: 6px solid rgba(255,255,255,.6);
  border-radius: 14px;
  filter: none;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
  object-fit: contain;
  transition: all 0.3s ease;
}

.ornament-badge:hover{
  opacity: .95;
  transform: scale(1.02);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

@media (min-width: 720px){
  .ornament-badge{ width: 140px; }
}

/* ===== FORM CARD ===== */
.rsvp-form{ 
  margin-top: 24px; 
  display: flex;
  justify-content: center;
}

.form-card{
  background: #fffffff5;
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  padding: 24px 24px 26px;
  width: 100%;
  max-width: 600px;
}

.form-card h2{
  margin: 0 0 10px; 
  color: var(--green);
  font-size: clamp(20px, 2.6vw, 26px);
}

.form-intro{ 
  margin: 0 0 14px; 
  color: #2a3a2a; 
}

/* ===== FORM GRID ===== */
.form-grid{
  display: grid; 
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px){
  .form-grid{ grid-template-columns: 1fr 1fr; }
}

.form-grid .full{ grid-column: 1 / -1; }

/* ===== FORM FIELDS ===== */
label{ 
  display: block; 
  font-weight: 600; 
  margin: 4px 0 6px; 
  color: var(--ink); 
}

input[type="text"], 
input[type="email"], 
input[type="number"], 
textarea, 
select{
  width: 100%; 
  padding: 14px 16px;
  border: 1px solid #dcd5c7;
  border-radius: 12px;
  background: #fff; 
  color: var(--ink);
  font: 500 16px/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  transition: all 0.2s ease;
}

input:focus, 
textarea:focus, 
select:focus{
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
  outline: none;
}

/* ===== BUTTON ===== */
button, 
.btn{
  display: inline-block; 
  border: 0; 
  border-radius: 14px;
  padding: 14px 22px; 
  font-weight: 700; 
  cursor: pointer;
  background: linear-gradient(180deg, #e04a4a, #c43d3d);
  color: #fff; 
  box-shadow: 0 6px 14px rgba(196,61,61,.18);
  transition: all 0.2s ease;
}

button:hover, 
.btn:hover{ 
  transform: translateY(-2px); 
  box-shadow: 0 8px 18px rgba(196,61,61,.25);
}

button:active, 
.btn:active{ 
  transform: translateY(0); 
  box-shadow: 0 4px 10px rgba(196,61,61,.18);
}

button:focus-visible{ 
  outline: 3px solid color-mix(in srgb, var(--red) 30%, transparent); 
}

/* ===== HELPERS ===== */
.help{ font-size: .92rem; color: #4a5a4a; }
.small-muted{ font-size: .9rem; color: #5a6a5a; }

/* ===== FOOTER ===== */
.site-footer{ 
  margin-top: 32px; 
  text-align: center; 
  font-size: .9rem; 
  color: #6b756b; 
}

/* ===== PRINT ===== */
@page{ size: 8.5in 11in; margin: .5in; }

@media print{
  body{ background: #fff; }
  .container{ padding: 0; }
  a{ color: black; text-decoration: none; }
  .invite p:first-of-type{ orphans: 3; widows: 3; }
  nav, footer, .site-footer{ display: none !important; }
}

/* ===== LINKS ===== */
a{ color: color-mix(in srgb, var(--green) 85%, #1b1b1b 15%); }
a:hover{ text-decoration: underline; }

/* ==== Cheerful Light Enhancements (non-breaking) ==== */
:root{
  --gold: #d6a64b;
  --snow: rgba(255,255,255,0.75);
}

/* Soft snow-dot page background */
html, body{
  background:
    radial-gradient(2px 2px at 20% 15%, rgba(255,255,255,.65) 30%, transparent 32%) repeat,
    radial-gradient(2px 2px at 60% 35%, rgba(255,255,255,.5) 30%, transparent 32%) repeat,
    radial-gradient(2px 2px at 80% 10%, rgba(255,255,255,.45) 30%, transparent 32%) repeat,
    radial-gradient(1200px 700px at 50% -10%, #fff 0%, var(--bg, #faf7f0) 60%, #f4efe6 100%);
  background-size: 180px 160px, 220px 200px, 260px 220px, auto;
}

/* Invite card stays airy */
.invite{
  position: relative;
  background: #fffffff7;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.05);
  padding: 22px 22px 14px;
}

/* Small header area to "pin" the badge */
.invite-header{
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: -10px;
  margin-bottom: 6px;
  padding-top: 6px;
}

/* Little ribbon tab behind the badge (subtle, not heavy) */
.invite-header::before{
  content:"";
  position:absolute;
  top: 8px;
  width: 160px; height: 14px;
  background: linear-gradient(180deg, rgba(214,166,75,.28), rgba(214,166,75,.12));
  border-radius: 8px;
  filter: saturate(105%);
}

/* Ornament badge – lighter, with soft ring */
.ornament-badge{
  display:block;
  width: 132px;
  height: auto;
  opacity: .9;
  border-radius: 14px;
  border: 6px solid rgba(255,255,255,.75);
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
  object-fit: contain;
  transform: translateY(0);
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (min-width: 720px){
  .ornament-badge{ width: 146px; }
}
.invite-header:hover .ornament-badge{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
@media (prefers-reduced-motion: reduce){
  .ornament-badge{ transition: none; }
  .invite-header:hover .ornament-badge{ transform:none; }
}

/* Classy gold sparkle divider */
.sparkle-divider{
  --g: var(--gold);
  height: 10px;
  margin: 10px auto 12px;
  max-width: 560px;
  background:
    radial-gradient(circle at 10% 50%, color-mix(in srgb, var(--g) 75%, #fff 25%) 0 2px, transparent 3px) repeat-x,
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--g) 35%, #fff 65%), transparent);
  background-size: 14px 10px, 100% 2px;
  background-position: 0 4px, center;
  opacity: .9;
}

/* Heading & meta – brighter */
.invite h1{
  color: var(--green, #2e7b4f);
  font-weight: 800;
  letter-spacing: .2px;
  margin: 6px 0 8px;
}
.datetime{ color: color-mix(in srgb, var(--green) 75%, #2f3a2f 25%); }

/* Button with gentle sheen */
button, .btn{
  position: relative;
  background: linear-gradient(180deg, #ed5656, #c93f3f);
  box-shadow: 0 6px 14px rgba(201,63,63,.16);
  border-radius: 12px;
  overflow: hidden;
}
button::after, .btn::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient( to right, rgba(255,255,255,.0) 0%, rgba(255,255,255,.4) 35%, rgba(255,255,255,.0) 70% );
  transform: translateX(-120%);
  transition: transform .7s ease;
}
button:hover::after, .btn:hover::after{
  transform: translateX(120%);
}
@media (prefers-reduced-motion: reduce){
  button::after, .btn::after{ display:none; }
}

/* Inputs a touch crisper */
input[type="text"], input[type="email"], input[type="number"], textarea, select{
  border: 1px solid #e6ddd0;
  background: #fff;
}

/* RSVP Form Centering */
.rsvp-form{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 28px;
}
.rsvp-form h2,
.rsvp-form .form-intro{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.rsvp-form form{
  max-width: 500px;
  width: 100%;
}
.rsvp-form button,
.rsvp-form .btn{
  display: block;
  margin: 16px auto 0;
}

/* ===== ADMIN & THANKS PAGE STYLES ===== */
.card{
  background: #fffffff5;
  border-radius: var(--radius);
  box-shadow: 0 8px 22px rgba(0,0,0,.05);
  padding: 24px;
  margin-bottom: 20px;
}

.container.wide{ max-width: 1200px; }

.text-center{ text-align: center; }

.hidden{ display: none !important; }

.success-icon{
  font-size: 48px;
  color: var(--green);
  margin-bottom: 16px;
}

.form-group{
  margin-bottom: 16px;
}

.form-group label{
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--ink);
}

.admin-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.admin-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-secondary{
  background: #6c757d;
  color: white;
}

.btn-success{
  background: #28a745;
  color: white;
}

.btn-danger{
  background: #dc3545;
  color: white;
}

.stats-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card{
  background: rgba(255,255,255,0.8);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.05);
}

.stat-value{
  font-size: 24px;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 4px;
}

.stat-label{
  font-size: 14px;
  color: var(--ink);
  opacity: 0.8;
}

.table-container{
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.1);
}

table{
  width: 100%;
  border-collapse: collapse;
  background: white;
}

th, td{
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

th{
  background: rgba(0,0,0,0.02);
  font-weight: 600;
  color: var(--ink);
}

.spinner{
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  border-top-color: var(--green);
  animation: spin 1s ease-in-out infinite;
}

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

@media (max-width: 768px){
  .admin-header{
    flex-direction: column;
    align-items: stretch;
  }
  
  .admin-actions{
    justify-content: center;
  }
  
  .stats-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  
  table{
    font-size: 14px;
  }
  
  th, td{
    padding: 8px 12px;
  }
}

/* Print: keep it bright and subtle */
@media print{
  .invite-header::before{ opacity: .18; }
  .sparkle-divider{ opacity:.4; }
}