/* Font families */
.font-vidaloka { font-family: "Vidaloka", sans-serif; }
.font-poppins { font-family: "Poppins", sans-serif; }

/* Background images */
.bg-quotes-section {
  background-image: radial-gradient(at center right, #4B5573 0%, #39415A 100%);
}

/* Vertical wash — left pane / countdown fallback */
.midnight-wash-bg {
  background-image: linear-gradient(180deg, #4A536E 0%, #3A425B 45%, #2E3548 100%);
  background-color: #3A425B;
}

/* Soft vignette over wash (countdown) */
.midnight-vignette {
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.45) 100%);
}

.bg-btn-mempelai {
  background-color: #3A425B;
}

.bg-overlay-mempelai {
  background-color: rgb(255, 249, 240, 0.88);
}

/* Max widths */
.max-w-1\/2 { max-width: 50%; }

/* Colors */
.text-red-cover { color: #3A425B; }
.text-grey-comment { color: #625B4F; }
.text-event { color: #3A425B; }

/* Background Colors */
.bg-red-cover { background-color: #3A425B; }
.bg-green-guest { background-color: #F1EDE4; }

/* Border Color */
.border-red-cover { border-color: #3A425B; }
.border-mempelai { border-color: #FFFFFF; }
.border-wish { border-color: BBBBBB; }
.border-schedule { border-color: #3A425B;}
.border-gold {border-color: #5A627B;}

/* Shadow */
.shadoww {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}


/* position */
.-scale-x-100 { 
    transform: scaleX(-1); 
}

/* Border radius */
.rounded-4xl {
  border-radius: 3.125rem;
}

/* Animation */
.animate-zoom-in {
  animation-name: zoomIn;
  animation-duration: 9s;
  animation-fill-mode: forwards;
}

/* Keyframes */
@keyframes zoomIn {
  0%, 87.5% {
    opacity: 0;
    transform: scale3d(0, 0, 0);
  }
  93.75% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}


/* Section */


/* Responsive background for mempelai sections */
.mempelai-bg-section {
  background-size: cover !important;
}

/* Desktop fix - compensate fixed attachment with adjusted size */
@media screen and (min-width: 768px) {
  .mempelai-bg-section {
    background-attachment: fixed !important;
    background-size: 36vw auto !important;
    background-position: center right !important;
  }
}

/* Alternative approach for very wide screens */
@media screen and (min-width: 1400px) {
  .mempelai-bg-section {
    background-attachment: fixed !important;
    background-size: 34vw auto !important;
    background-position: center right !important;
  }
}

/* Schedule background section - same fix as mempelai */
.schedule-bg-section {
  background-size: cover !important;
}

/* Desktop fix for schedule background */
@media screen and (min-width: 768px) {
  .schedule-bg-section {
    background-attachment: fixed !important;
    background-size: 36vw auto !important;
    background-position: center right !important;
  }
}

/* Alternative approach for very wide screens - schedule */
@media screen and (min-width: 1400px) {
  .schedule-bg-section {
    background-attachment: fixed !important;
    background-size: 34vw auto !important;
    background-position: center right !important;
  }
}

#section-guest {
  
  background-attachment: fixed;
  background-size: 450px auto;
  background-position: center center;
  opacity: 1;
}

.section-penutup {
  
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 100vh;
}

.map-embed {
  border-radius: 1rem;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.map-embed > iframe {
  width: 100% !important;
  height: 180px !important;
  border: 0;
  display: block;
}

.video-embed {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  margin-bottom: 20px; 
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* Fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/* Swiper */
#section-schedule .swiper {
  width: 100%;
  max-width: 300px;
  height: 475px;
  border-radius: 115px 115px 0 0;
  border: 4px solid #868A78;
  overflow: hidden;
}

#section-countdown .swiper {
  width: 100%;
  height: 520px;
  overflow: hidden;
}

#section-quotes .swiper {
  width: 100%;
  max-width: 300px;
  height: 450px;
  border-radius: 32px 32px 0px 0px;
  overflow: hidden;
}

#section-guest .swiper {
  width: 100%;
  max-width: 300px;
  height: 225px;
  border-radius: 1rem;
  border: 4px solid #DFB584;
  overflow: hidden;
  margin: 0 auto;
  margin-bottom: 1rem;
}

#section-penutup .swiper {
  width: 260px;
  height: 275px;
  border-radius: 115px 115px 0 0;
  border: 4px solid #5A627B;
  overflow: hidden;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  #section-schedule .swiper,
  #section-countdown .swiper,
  #section-story .swiper {
    height: 600px;
  }

  #section-guest .swiper {
    max-width: 400px;
    height: 300px;
  }

  #section-penutup .swiper {
    width: 260px;
    height: 350px;
  }
}

@media screen and (min-width: 1024px) {
  #section-schedule .swiper,
  #section-story .swiper {
    max-width: 500px;
    height: 800px;
  }

  #section-guest .swiper {
    max-width: 500px;
    height: 425px;
  }

  #section-penutup .swiper {
    width: 260px;
    height: 475px;
  }
}

@media screen and (min-height: 700px) {
  #section-penutup .swiper {
    height: 400px;
    width: 250px;
  }
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiperGallery {
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
}


.swiperThumb {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.swiper-slide .swiper-slide-thumb {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide .swiper-slide-thumb img {
  display: block;
  width: 90px;
  height: 60px;
  object-fit: cover;
}

.gallery-container {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

.gallery-item {
  flex: 1 1 calc(50% - 10px); 
  box-sizing: border-box;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
  
}


.cover-panel,
.cover-panel-overlay {
  width: 100% !important;
  left: 0 !important;
  right: auto !important;
}

.cover-panel-left {
  display: none;
}

@media screen and (min-width: 768px) {
  .cover-panel,
  .cover-panel-overlay {
    width: 33.3333% !important;
    left: auto !important;
    right: 0 !important;
  }

  .cover-panel-left {
    display: flex !important;
    align-items: flex-end;
    position: fixed;
    top: 0;
    left: 0;
    width: 66.6667%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }
}

/* Custom Elegant Button */

.btn-open-invitation {
  background-color: #3A425B !important;
  color: #ffffff !important;
  font-family: "Vidaloka", sans-serif;
  font-size: 13px !important;
  letter-spacing: 0.15em !important;
  padding: 12px 32px !important;
  border-radius: 9999px !important;
  text-transform: uppercase;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-open-invitation:hover {
  background-color: #4d5670 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}