/* Google Font: Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

html, body, input, button, select, textarea {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Mobile 3:4 video ratio */
@media (max-width: 900px) {
  .hero { height: auto !important; }
  .hero video { width: 100% !important; height: auto !important; aspect-ratio: 3 / 4; object-fit: cover; }
}

/* Purple + white theme accents */
:root { --purple: #6d28d9; --purple-dark: #5b21b6; }
.section h2 { color: var(--purple-dark); }

/* RSVP makeover */
#rsvp.section { padding-top: 56px; padding-bottom: 56px; }
#rsvp { background: linear-gradient(135deg, #7b2ff7 0%, #a855f7 50%, #6d28d9 100%); color: #fff; }
#rsvp h2 { color: #fff; font-weight: 700; letter-spacing: .3px; margin-bottom: 16px; }
#rsvp .rsvp { background: rgba(255,255,255,0.12); backdrop-filter: blur(4px); border-radius: 20px; padding: 24px; }
#rsvp label { color: #f8f8ff; font-weight: 600; }
#rsvp input, #rsvp select, #rsvp textarea {
  background: #fff; color: #1f2937; border: none; border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
#rsvp button { background: #fff; color: var(--purple-dark); border: 0; border-radius: 9999px; padding: 12px 22px; font-weight: 700; }
#rsvp button:hover { background: #ede9fe; }

/* Address above map on mobile */
@media (max-width: 900px) {
  .address-map { display: flex !important; flex-direction: column !important; }
  .address-map .address { order: 1; }
  .address-map .map { order: 2; }
}

/* Thanks message: white text */
.thanks h2 { color: #fff !important; }

/* BGM play/pause floating button */
#bgm-toggle {
  position: fixed; top: 16px; right: 16px; z-index: 9999;
  width: 46px; height: 46px; border-radius: 9999px; border: 0;
  background: rgba(17,24,39,.78); color: #fff; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}


/* === v5 Theme Enhancements === */

/* Color palette variables */
:root {
  --col1: #8b82b9;
  --col2: #3b2b72;
  --col3: #e9eaef;
  --col4: #453879;
  --col5: #675996;
  --col6: #83627f;
  --col7: #564d8e;
  --col8: #c3c4d1;
  --col9: #4b4b50;
  --col10: #bab6dc;
}

/* Global styles */
body {
  background-color: var(--col3);
  color: var(--col9);
}
h1, h2, h3, h4, h5, h6 {
  color: var(--col2);
}

/* Buttons */
button, .btn, input[type=submit] {
  background-color: var(--col4);
  color: #fff;
  border: none;
}
button:hover, .btn:hover, input[type=submit]:hover {
  background-color: var(--col5);
}

/* RSVP Section */
#rsvp {
  background: linear-gradient(135deg, #3b2e71, #948ac3, #4b4b50);
  color: #fff;
}
#rsvp h2 {
  color: #fff;
  font-weight: 700;
}
#rsvp .rsvp {
  background: rgba(255,255,255,0.1);
  padding: 24px;
  border-radius: 20px;
}
#rsvp label {
  color: #fff;
  font-weight: 600;
}
#rsvp input, #rsvp select, #rsvp textarea {
  background: #fff;
  color: var(--col9);
  border-radius: 14px;
  border: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* BGM Button styling */
#bgm-toggle {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 9999;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--col4);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
@media (max-width: 900px) {
  #bgm-toggle {
    top: 70px;
    width: 60px;
    height: 60px;
    font-size: 26px;
  }
}



/* Thank You Section Styling */
#thanks {
  color: white;
}
#thanks h2 {
  color: white;
}