#s2-inviter-msg-index p,
  #s2-inviter-msg-index div,
  #s2-venue-index p,
  #s2-venue-index div,
  #sec3-it p,
  #sec3-it div,
  #section-3-additional p,
  #section-3-additional div {
    margin: 0 !important;           /* remove browser’s default paragraph margin */
    line-height: 1.2 !important;    /* keep consistent with wrapping lines */
  }

  #s2-inviter-msg-index p + p,
  #s2-venue-index p + p,
  #sec3-it p + p,
  #section-3-additional p + p {
    margin-top: 0 !important;  /* no extra gap between consecutive paragraphs */
  }

  /* FOR NAV BAR */




#gifModal {

  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-height: 500px;
  bottom: -545px;
  max-width: 430px;
  position: fixed;
  opacity: 0;
  z-index: 21;
  border-radius: 1rem;
  font-size: 0.7rem;
  margin-inline: auto;
  text-align: center;
  overflow-y: auto;       /* scroll if too tall */
  display: flex;          /* enable flex for vertical alignment */
  flex-direction: column; /* stack content top → bottom */
  align-items: center;    /* center horizontally only */
  justify-content: flex-start; /* ⬅️ stick content to the top */
}

#gifModal {
  overflow-y: auto;           /* only scroll when needed */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge legacy */
}

#gifModal::-webkit-scrollbar {
  display: none;              /* Chrome/Safari/Edge */
}

.gif-content { 

  background-color: white;
	box-shadow: 0 2px 16px hsla(228, 95%, 4%, 0.1);
	padding-bottom: 10px;
	text-decoration: none;
	display: grid;
	margin-inline: auto;
	align-content: center;
	border-radius: 1rem;
	font-size: 0.7rem;
	opacity: 0.9;
	z-index: 50;
	margin-left: 10px;
	margin-right: 10px;
}

#msc-content { 

  background-color: rgba(255, 255, 255, 0.9);
  background-color: rgb(var(--surface-rgb) / var(--surface-alpha));
	box-shadow: 0 2px 16px hsla(228, 95%, 4%, 0.1);
	padding-bottom: 10px;
	text-decoration: none;
	display: grid;
	margin-inline: auto;
	align-content: center;
	border-radius: 1rem;
	font-size: 0.7rem;
	opacity: 0.9;
	z-index: 50;
	margin-left: 10px;
	margin-right: 10px;
}
    
/* Limit the modal’s inner width so content doesn’t stretch */
#gifModal .gif-content {
  width: 95%;         /* matches your modal cap */
  margin: 0 auto;

}

.gift-actions {
  margin-top: 6px;
}

.gift-download {
  display: inline-block;
  font-size: 0.85rem;
  text-decoration: none;
  background: #f3f4f6;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #ddd;
  transition: background 0.2s;
}

.gift-download:hover {
  background: #e5e7eb;
}
/* Constrain the QR image size, keep it sharp, and center it */
#gifModal .gif-qr {
  display: block;
  width: 70%;                /* responsive shrink */
  max-width: 220px;          /* <-- change this number to taste (e.g., 200–280) */
  height: auto;
  margin: 8px auto 10px;
  image-rendering: -webkit-optimize-contrast; /* crisper on WebKit */
  image-rendering: crisp-edges;               /* fallback */
  border: 1px solid #e5e7eb;
  border-radius: 8px;

}

/* Optional: pad the QR area so it doesn’t feel cramped */
#gifModal .gif-qr-wrap {
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

/* If your .gif-content uses grid, ensure it doesn’t auto-stretch columns */
#gifModal .gif-content {
  grid-template-columns: 1fr; /* single column layout */
}

/* Small screens: keep things tidy */
@media (max-width: 420px) {
  #gifModal .gif-qr {
    width: 72%;
    max-width: 200px;

  }
}

.gift-list {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.gift-item {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.gift-provider {
  display: inline-flex;          /* keep icon + text inline */
  align-items: center;           /* vertical centering */
  justify-content: center;       /* center them as a group */
  gap: 6px;                      /* space between icon and text */
  margin-bottom: 6px;
  font-weight: 600;
}

.gift-provider img {
  display: block;
  width: 22px;                   /* keep your original size */
  height: 22px;
}


.gift-details p {
  margin: 2px 0;
  font-size: 0.85rem;
}


/* QR wrapper */
.gift-qr {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}

/* Actual QR image */
.gift-qr-img {
  max-width: 220px;   /* cap size; adjust to taste */
  width: 80%;         /* scale responsively */
  height: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Smaller screens: shrink further */
@media (max-width: 420px) {
  .gift-qr-img {
    max-width: 180px;
    width: 70%;
  }
}


#rsvpModal,
#ctcModal,
#mscModal,
#lctModal,
#cldModal,
#gifModal {
  opacity: 0;
  visibility: hidden ;         /* completely hide it */
  pointer-events: none ;       /* block clicks when hidden */
  transition: opacity 0.3s ease, bottom 0.3s ease;
}

/* When active/open */
#rsvpModal.active,
#ctcModal.active,
#mscModal.active,
#lctModal.active,
#cldModal.active,
#gifModal.active {
  opacity: 1;
  visibility: visible !important;        /* make it visible */
  pointer-events: auto !important;  
 

}

/* Quill-rendered content images scale to container */
.quill-output img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* (optional) embeds */
.quill-output iframe,
.quill-output video { max-width: 100%; }


.btn-save-date, .btn-rsvp {
  display: inline-block;
  padding: 10px 16px;
  background-color: transparent;   /* no background */
  color: #000000;                  /* theme color text */
  font-weight: 600;
  border: 2px solid #000000;       /* border only */
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  text-align: center;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.2s ease, color 0.2s ease;
  box-shadow: none;
}
.btn-rsvp {
  display: inline-block;
  padding: 10px 16px;
  background-color: transparent;   /* no background */
  color: #000000;                  /* theme color text */
  font-weight: 600;
  border: 2px solid #000000;       /* border only */
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  text-align: center;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.2s ease, color 0.2s ease;
  box-shadow: none;
}

.btn-save-date:hover {
  background-color: #909090;   /* fill on hover */
  color: #fff;                 /* white text when hovered */
}

.btn-rsvp:hover {
  background-color: #909090;   /* fill on hover */
  color: #fff;                 /* white text when hovered */
}

.btn-save-date:active {
  transform: scale(0.96);      /* pressed down effect */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.btn-rsvp:active {
  transform: scale(0.96);      /* pressed down effect */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}


/* Flex wrapper */
.action-buttons {
  display: flex;
  gap: 12px; /* spacing between buttons */
  justify-content: center; /* center horizontally */
  margin-top: 15px;
}

/* Shared button style */
.action-buttons div {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  min-width: 120px;
}

/* Responsive buttons for smaller screens */
@media (max-width: 390px) {
  .action-buttons {
    gap: 8px; /* Reduce gap between buttons */
  }

  .action-buttons div {
    min-width: 100px; /* Reduce minimum width */
    padding: 10px 14px; /* Reduce horizontal padding */
    font-size: 13px; /* Slightly smaller font */
  }
}




/* Prevent page scrolling when we add .scroll-locked */
html.scroll-locked,
body.scroll-locked {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* iOS-safe lock so content doesn't jump */
body.scroll-locked {
  
  width: 100%;
  top: var(--lock-top, 0);
}











/* Doors need perspective and proper anchoring */
.start-overlay[data-opening="tingkap_b"]{ perspective: 1200px;  max-width: 420px !important; margin: 0 auto;         /* centers horizontally */
  display: block;}
.start-overlay[data-opening="tingkap_a"]{ perspective: 1200px;  max-width: 420px !important; margin: 0 auto;         /* centers horizontally */
  display: block;}
.start-overlay[data-opening="tingkap_d"]{ perspective: 1200px;  max-width: 420px !important; margin: 0 auto;         /* centers horizontally */
  display: block;}
.start-overlay[data-opening="tingkap_c"]{
  perspective: 1200px;
  max-width: 420px !important;
  margin: 0 auto;         /* centers horizontally */
  display: block;

}

.start-overlay .door{
  position:absolute; top:0; height:100%; width:50%;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(8px) saturate(160%) brightness(110%);
  -webkit-backdrop-filter: blur(8px) saturate(160%) brightness(110%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 0 .5px rgba(255,255,255,.4), 0 8px 32px rgba(0,0,0,.2);
  transform-style: preserve-3d; backface-visibility: hidden; z-index: 3;
}
.start-overlay .door-left  { left: 0;  transform-origin: left center; }
.start-overlay .door-right { right: 0; transform-origin: right center; }

.start-content {
  position:relative;
  border-radius: 1em;
  z-index: 100;
  top: 45vh;
  text-align: center;
  width: 100%;
  max-width: 420px !important;
}




#start-btn {
  
  display: inline-block;
  font-size: 1.3rem;
  padding: 1rem 2rem;
   background: rgba(103, 102, 102, 0.5); /* darker glass background */
  color: white;

  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px; /* ⬅️ Makes it fully round */
  cursor: pointer;
  margin: 0 auto;
  z-index: 1000;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    inset 0 0 0.5px rgba(255, 255, 255, 0.6),
    0 6px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;

  /* 🌟 Add this for text depth */
  text-shadow:
    1px 1px 2px rgba(0, 0, 0, 0.45),
    0 0 3px rgba(255, 255, 255, 0.8);
aspect-ratio: 1 / 1;  
    width: auto;
height: auto;
 text-align: center;
  white-space: nowrap;
}


#capacity-hint {
  margin-left: 10px;
}

/* Prevent browser from auto-inverting or adjusting for dark mode */
:root {
  color-scheme: light;
  /* Optional safeguard for Safari/iOS */
  --webkit-color-scheme: light;
}

/* Also explicitly disable dark-mode handling in some browsers */
@media (prefers-color-scheme: dark) {
  html, body {
    color-scheme: light;
    background-color: white;
    color: black;
  }
}
/* ========================================
   Envelope Animation Styles (tingkap_c)
   ======================================== */

.envelope-container {
  display: none; /* Hidden by default, shown only for tingkap_c */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  perspective: 1000px;
  z-index: 1001 !important; /* Above main-div (1000) */
  pointer-events: auto; /* Enable touch/mouse events */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-x; /* Allow horizontal panning for flip */
}

.envelope-container:active {
  cursor: grabbing;
}

/* Show envelope only when tingkap_c is active */
.start-overlay[data-opening="tingkap_c"] .envelope-container {
  display: block;
}

/* White background for tingkap_c */
.start-overlay[data-opening="tingkap_c"] {
  background-color: white;
}

/* Flip button for envelope */
.envelope-flip-btn {
  position: fixed;
  bottom: 80px;
  right: 30px;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #d4a574 0%, #c49563 100%);
  border: 2px solid #b8894e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1010;
  pointer-events: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  color: #ffffff;
  padding: 0;
}

.envelope-flip-btn:hover {
  background: linear-gradient(135deg, #c49563 0%, #b8894e 100%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
}

.envelope-flip-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.envelope-flip-btn svg {
  width: 24px;
  height: 24px;
  pointer-events: none;
  transition: transform 0.6s ease-in-out;
}

/* Rotate animation when flipping */
.envelope-flip-btn.flipping svg {
  animation: spin-flip 0.6s ease-in-out;
}

@keyframes spin-flip {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Hide flip button when not tingkap_c */
.start-overlay:not([data-opening="tingkap_c"]) .envelope-flip-btn {
  display: none;
}

/* Adjust flip button position for shorter screens */
@media (max-height: 700px) {
  .envelope-flip-btn {
    bottom: 60px;
    right: 15px;
    width: 48px;
    height: 48px;
  }

  .envelope-flip-btn svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-height: 600px) {
  .envelope-flip-btn {
    bottom: 50px;
    right: 10px;
    width: 44px;
    height: 44px;
  }

  .envelope-flip-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* Ensure button stays visible above other elements */
.envelope-flip-btn {
  z-index: 9999 !important;
}



.envelope {
  position: relative;
  width: 320px;
  height: 220px;
  transform-style: preserve-3d;
   z-index: 1001 !important;
}

/* Envelope back (visible base) */
.envelope-back {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f5e6d3 0%, #e8d5c4 100%);
  border: 2px solid #d4a574;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* Allow clicks to pass through to container */
}

/* Text on envelope back */
.envelope-back-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateY(180deg);
  font-family: 'Alta', cursive;
  font-size: 24px;
  color: #d4a574;
  text-align: center;
  opacity: 0;
  display: none;
  transition: opacity 0.3s ease, display 0s 0.3s;
  pointer-events: none;
  width: 80%;
}

/* Subtitle text on envelope back - top right */
.envelope-back-subtitle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: 'Georgia', serif;
  font-size: 14px;
  color: #d4a574;
  text-align: right;
  opacity: 0;
  display: none;
  transform: rotateY(180deg);
  transition: opacity 0.3s ease, display 0s 0.3s;
  pointer-events: none;
  font-style: italic;
}

/* Envelope front panel with triangular pocket cutout at top */
.envelope-front {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #faf5ed 0%, #f0e8d8 100%);
  border: 2px solid #d4a574;
  border-radius: 8px;
  z-index: 3; /* Above card but below flap */
  pointer-events: none;
  /* Inverted triangle cutout: creates inward pocket opening at top */
  clip-path: polygon(
    0 0,           /* Top-left corner */
    0 100%,        /* Bottom-left corner */
    100% 100%,     /* Bottom-right corner */
    100% 0,        /* Top-right corner */
    50% 50%,       /* Peak of triangle pointing DOWN/INWARD (center, halfway down) */
    0 0            /* Back to top-left, completing the shape */
  );
  will-change: opacity;
  transition: opacity 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Envelope flap (triangle top) */
.envelope-flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110px;
  background: linear-gradient(135deg, #f0d9c0 0%, #e8c9b0 100%);
  border: 2px solid #d4a574;
  border-bottom: none;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  transform-origin: top center;
  transform-style: preserve-3d;
  z-index: 1005; /* On top of everything */
  transition: opacity 0.3s ease;
  pointer-events: none; /* Allow clicks to pass through */
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.25),
    0 3px 10px rgba(0, 0, 0, 0.15),
    inset 0 -3px 8px rgba(0, 0, 0, 0.08);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* Envelope pocket - REMOVED: envelope-front cutout replaces this */
.envelope-pocket {
  display: none; /* Hidden - the cutout in envelope-front acts as pocket */
}

/* Envelope stamp - top-right corner (only visible on back when flipped) */
.envelope-stamp {
  position: absolute;
  top: 15px;
  left: 15px;  /* Left position because it flips with the back */
  width: 55px;
  height: 65px;
  background: #ffffff;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transform: rotateY(180deg); /* Flip with envelope back */
  /* Perforated stamp edge using CSS clip-path - scaled for 55x65px */
  clip-path: polygon(
    /* Top edge with scallops */
    0% 3px,
    3px 0%, 6px 3px,
    9px 0%, 12px 3px,
    15px 0%, 18px 3px,
    21px 0%, 24px 3px,
    27px 0%, 30px 3px,
    33px 0%, 36px 3px,
    39px 0%, 42px 3px,
    45px 0%, 48px 3px,
    51px 0%, 54px 3px,
    55px 0%,
    /* Right edge with scallops */
    calc(100% - 3px) 6px,
    100% 9px, calc(100% - 3px) 12px,
    100% 15px, calc(100% - 3px) 18px,
    100% 21px, calc(100% - 3px) 24px,
    100% 27px, calc(100% - 3px) 30px,
    100% 33px, calc(100% - 3px) 36px,
    100% 39px, calc(100% - 3px) 42px,
    100% 45px, calc(100% - 3px) 48px,
    100% 51px, calc(100% - 3px) 54px,
    100% 57px, calc(100% - 3px) 60px,
    100% 63px, calc(100% - 3px) 65px,
    100% 65px,
    /* Bottom edge with scallops */
    51px calc(100% - 3px),
    48px 100%, 45px calc(100% - 3px),
    42px 100%, 39px calc(100% - 3px),
    36px 100%, 33px calc(100% - 3px),
    30px 100%, 27px calc(100% - 3px),
    24px 100%, 21px calc(100% - 3px),
    18px 100%, 15px calc(100% - 3px),
    12px 100%, 9px calc(100% - 3px),
    6px 100%, 3px calc(100% - 3px),
    0% calc(100% - 3px),
    /* Left edge with scallops */
    3px 60px,
    0% 57px, 3px 54px,
    0% 51px, 3px 48px,
    0% 45px, 3px 42px,
    0% 39px, 3px 36px,
    0% 33px, 3px 30px,
    0% 27px, 3px 24px,
    0% 21px, 3px 18px,
    0% 15px, 3px 12px,
    0% 9px, 3px 6px,
    0% 3px
  );
}

.stamp-image-container {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-radius: 2px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(212, 165, 116, 0.3);
}

.stamp-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder when no image */
.stamp-image-container:empty::before {
  content: '💌';
  font-size: 28px;
  opacity: 0.4;
}


/* Add shadow to pocket opening for depth */
.envelope-front::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent);
  z-index: 1;
}

/* Card inside envelope */
.envelope-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 180px;
  background: white;
  border: 2px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-content {
  font-family: 'Allura', cursive;
  font-size: 2rem;
  color: #d4a574;
  text-align: center;
  padding: 20px;
}

.card-content::after {
  content: '💌';
  display: block;
  font-size: 3rem;
  margin-top: 10px;
}

/* Hide the blank envelope-card for tingkap_c since we use real section-1 */
.start-overlay[data-opening="tingkap_c"] .envelope-card {
  display: none;
}

/* Ensure section-1 is visible during tingkap_c animation */
.start-overlay[data-opening="tingkap_c"] ~ .main-div #section-1 {
  visibility: visible;
}

/* Add slight shadow to envelope for depth */
.envelope-back,
.envelope-front {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Make the envelope flap more realistic with gradient */
.envelope-flap {
  background: linear-gradient(180deg, #f0d9c0 0%, #e8c9b0 50%, #d4a574 100%);
  box-shadow: inset 0 -2px 8px rgba(0, 0, 0, 0.1);
}

/* Add texture to envelope */
.envelope-back::before,
.envelope-front::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.03) 10px,
    rgba(255, 255, 255, 0.03) 20px
  );
  pointer-events: none;
}

/* Ensure main-div is visible during tingkap_c animation */
.start-overlay[data-opening="tingkap_c"] ~ .main-div {
  visibility: visible !important;
  display: block !important;
}

/* Override any hide-others class during tingkap_c animation */
body .main-div.hide-others {
  visibility: visible !important;
}

/* Ensure start button appears above envelope */
.start-overlay[data-opening="tingkap_c"] .start-content {
  z-index: 1005;
}

.start-overlay[data-opening="tingkap_c"] #start-btn {
  z-index: 1005;
}

/* Hide background elements when envelope is active */
.start-overlay[data-opening="tingkap_c"] .start-bg-elements {
  display: none;
}