/**
 * Big Dream Invitation - Universal Responsive Frame System
 * Centered 480px Smartphone Shell Architecture
 */

:root {
  --theme-ambient-bg: #0d1117;
  --theme-ambient-grad: radial-gradient(circle at 50% 20%, rgba(30, 45, 65, 0.45) 0%, rgba(10, 14, 20, 0.98) 100%);
}

/* Category Ambient Palettes */
body.theme-adat, html.theme-adat {
  --theme-ambient-bg: #140f0b;
  --theme-ambient-grad: radial-gradient(circle at 50% 20%, rgba(55, 35, 20, 0.45) 0%, rgba(18, 12, 8, 0.98) 100%);
}

body.theme-oriental, html.theme-oriental {
  --theme-ambient-bg: #180808;
  --theme-ambient-grad: radial-gradient(circle at 50% 20%, rgba(65, 15, 15, 0.45) 0%, rgba(20, 6, 6, 0.98) 100%);
}

body.theme-nature, html.theme-nature {
  --theme-ambient-bg: #0b1610;
  --theme-ambient-grad: radial-gradient(circle at 50% 20%, rgba(20, 50, 35, 0.45) 0%, rgba(9, 18, 13, 0.98) 100%);
}

body.theme-luxury, html.theme-luxury {
  --theme-ambient-bg: #0d1117;
  --theme-ambient-grad: radial-gradient(circle at 50% 20%, rgba(30, 45, 65, 0.45) 0%, rgba(10, 14, 20, 0.98) 100%);
}

/* Global Reset & Base Rules */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Screen reader text off-screen fix */
.skip-link, .screen-reader-text {
  display: none !important;
}

/* Preloader Hidden States */
#bigdream-preloader.bd-hidden,
.loader.bd-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* Floating Back to Catalog Button */
.bd-catalog-back-btn,
a[href="index.html"],
a[href="index.html?#katalog"],
.bd-back-catalog-link {
  position: fixed !important;
  top: 16px !important;
  left: max(16px, calc(50% - 240px + 14px)) !important;
  z-index: 9999999 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  background: rgba(18, 18, 18, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bd-catalog-back-btn:hover,
a[href="index.html"]:hover,
a[href="index.html?#katalog"]:hover,
.bd-back-catalog-link:hover {
  background: rgba(0, 0, 0, 0.95) !important;
  color: #dfb23e !important;
  border-color: rgba(223, 178, 62, 0.5) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================================================
   COVER ACTIVE STATE: Hide Navbars and Floating Controls Before Unlocking
   ========================================================================== */
html.cover-locked nav.nav,
body.cover-locked nav.nav,
html.cover-locked .nav,
body.cover-locked .nav,
html.cover-locked nav[class*="nav"],
body.cover-locked nav[class*="nav"],
html.cover-locked .elementor-widget-scroll-menu,
body.cover-locked .elementor-widget-scroll-menu,
html.cover-locked .elementor-widget-weddingpress-audio,
body.cover-locked .elementor-widget-weddingpress-audio,
html.cover-locked .nav-bottom,
body.cover-locked .nav-bottom,
html.cover-locked .bottom-nav,
body.cover-locked .bottom-nav,
html.cover-locked #navbar-menu,
body.cover-locked #navbar-menu,
html.cover-locked .navigation-bar,
body.cover-locked .navigation-bar,
html.cover-locked [class*="nav-bottom"],
body.cover-locked [class*="nav-bottom"],
html.cover-locked [class*="bottom-bar"],
body.cover-locked [class*="bottom-bar"],
html.cover-locked [class*="wdp-sticky-section"],
body.cover-locked [class*="wdp-sticky-section"],
html.cover-locked .r-navs,
body.cover-locked .r-navs,
html.cover-locked #mute-sound,
body.cover-locked #mute-sound,
html.cover-locked #unmute-sound,
body.cover-locked #unmute-sound,
html.cover-locked #music-control,
body.cover-locked #music-control,
html.cover-locked .audio-box,
body.cover-locked .audio-box,
html.cover-locked #audio-container,
body.cover-locked #audio-container,
html.cover-locked .wds-audio-box,
body.cover-locked .wds-audio-box,
html.cover-locked #wds-audio-container,
body.cover-locked #wds-audio-container,
body:has(#coverx:not(.coverc)) nav.nav,
body:has(#coverx:not(.coverc)) .nav,
body:has(#coverx:not(.coverc)) .elementor-widget-scroll-menu,
body:has(#coverx:not(.coverc)) .elementor-widget-weddingpress-audio,
body:has(#coverx:not(.coverc)) .r-navs,
body:has(#coverx:not(.coverc)) #mute-sound,
body:has(#coverx:not(.coverc)) #unmute-sound,
body:has(#coverx:not(.coverc)) #music-control,
body:has(#coverx:not(.coverc)) .audio-box,
body:has(#cover:not(.coverc):not(.hide-cover)) nav.nav,
body:has(#cover:not(.coverc):not(.hide-cover)) .nav,
body:has(#cover:not(.coverc):not(.hide-cover)) .elementor-widget-scroll-menu,
body:has(#cover:not(.coverc):not(.hide-cover)) .r-navs,
body:has(#cover:not(.coverc):not(.hide-cover)) #mute-sound,
body:has(#cover:not(.coverc):not(.hide-cover)) #unmute-sound,
body:has(#cover:not(.coverc):not(.hide-cover)) #music-control {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Cover Typography Centering */
#coverx .elementor-heading-title,
.coverx .elementor-heading-title,
#coverx h1, #coverx h2, #coverx h3, #coverx p,
.coverx h1, .coverx h2, .coverx h3, .coverx p,
#coverx .dear, .coverx .dear,
#coverx .nmt, .coverx .nmt {
  text-align: center !important;
  width: 100% !important;
}

/* White Cover Canvas for Luxury 2, 3, 4 */
.postid-151976 #coverx, .postid-151976 .coverx,
.postid-150928 #coverx, .postid-150928 .coverx,
.postid-150010 #coverx, .postid-150010 .coverx,
.postid-151408 #coverx, .postid-151408 .coverx {
  background-color: #ffffff !important;
}

/* ==========================================================================
   DESKTOP VIEWPORT (min-width: 601px): 480px Framed Smartphone Presentation
   ========================================================================== */
@media (min-width: 601px) {
  html {
    background-color: var(--theme-ambient-bg) !important;
    background-image: var(--theme-ambient-grad) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Body acts as the smartphone hardware frame */
  body {
    max-width: 480px !important;
    width: 480px !important;
    margin: 0 auto !important;
    position: relative !important;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.7) !important;
    background-color: #ffffff;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    min-height: 100vh !important;
  }

  /* All main structural wrappers strictly contained and clipped */
  .elementor,
  .elementor-inner,
  .elementor-section-wrap,
  main,
  #page,
  .e-con.e-parent,
  .elementor-top-section {
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }

  /* Ensure containers do not force parent body wider */
  .e-con,
  .elementor-section,
  .elementor-container,
  .elementor-widget-wrap,
  .e-con-inner {
    max-width: 480px !important;
    box-sizing: border-box !important;
  }

  /* Hide Desktop Split-Screen Columns & Off-Canvas Panels */
  .elementor-hidden-mobile,
  .elementor-hidden-tablet,
  #desk_cov,
  .elementor-element-96447ca,
  .elementor-element-1c3f,
  .elementor-element-328d,
  [class*="elementor-element-328d"],
  [class*="elementor-element-1c3f"],
  .ajaibfixed {
    display: none !important;
  }

  /* Force single-column flex flow */
  .e-con-full.e-parent,
  .e-con-boxed.e-parent {
    flex-direction: column !important;
  }

  /* In 480px smartphone presentation, columns must be stacked full width (except bottom nav) */
  body > .elementor-column,
  .elementor-column.elementor-top-column,
  .elementor-section:not([class*="bottom"]):not([class*="nav"]):not(.elementor-element-c07d) > .elementor-container > .elementor-column,
  .elementor-section:not([class*="bottom"]):not([class*="nav"]):not(.elementor-element-c07d) > .elementor-container > .elementor-row > .elementor-column,
  .elementor-inner-section:not([class*="bottom"]):not([class*="nav"]):not(.elementor-element-c07d) > .elementor-container > .elementor-column,
  .elementor-inner-section:not([class*="bottom"]):not([class*="nav"]):not(.elementor-element-c07d) > .elementor-container > .elementor-row > .elementor-column {
    width: 100% !important;
    max-width: 480px !important;
  }

  /* PowerPack Timeline & Cards inside 480px frame */
  .pp-timeline,
  .pp-timeline-wrapper,
  .pp-timeline-item {
    max-width: 480px !important;
    box-sizing: border-box !important;
  }
  .pp-timeline-card-wrapper {
    max-width: 360px !important;
    box-sizing: border-box !important;
  }

  /* Fixed modal / splash / envelope covers */
  #coverx,
  #eltemplate-cover,
  #cvr,
  .coverx,
  .modalx,
  .cover.is-fixed,
  #cover.is-fixed {
    position: fixed !important;
    max-width: 480px !important;
    width: 480px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    box-shadow: 0 0 50px rgba(0,0,0,0.5) !important;
    overflow: hidden !important;
    margin: 0 !important;
    z-index: 999999 !important;
  }

  /* In-flow cover sections (dayak-1, nature-1..10) */
  #cover,
  .cover {
    max-width: 480px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Inner sections with id cover stay centered inside parent without viewport translation */
  section#cover.elementor-inner-section {
    position: relative !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 auto !important;
  }

  /* Top-level fixed covers */
  section#cover.elementor-top-section[style*="fixed"] {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Cover dismissal transitions */
  #cover.coverc,
  #coverx.coverc,
  #eltemplate-cover.coverc,
  #cvr.coverc,
  #cvr.cover-opened,
  .coverx.coverc,
  .modalx.removeModals,
  #cover.hide-cover {
    transform: translate(-50%, -120%) !important;
    pointer-events: none !important;
  }

  /* Bottom Navigation Bar & Sticky Sections */
  .nav-bottom,
  .fixed-bottom,
  .bottom-nav,
  #navbar-menu,
  .navigation-bar,
  .elementor-element-c07d,
  [class*="nav-bottom"],
  [class*="bottom-bar"],
  [class*="wdp-sticky-section"] {
    max-width: 480px !important;
    width: 480px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    border-radius: 16px 16px 0 0 !important;
  }

  /* Floating Pill Scroll-Menu & Navbars (luxury-2, 3, 4, oriental-2, 3) */
  nav.nav,
  .nav,
  nav[class*="nav"],
  .elementor-widget-scroll-menu nav,
  [class*="scroll-menu"] nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: 460px !important;
    width: auto !important;
    bottom: 16px !important;
    margin: 0 auto !important;
    z-index: 99999 !important;
  }

  /* Bottom Navigation 5-column layout inside 480px frame */
  [class*="wdp-sticky-section"] .elementor-container,
  [class*="wdp-sticky-section"] .elementor-row {
    max-width: 480px !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
  }
  [class*="wdp-sticky-section"] .elementor-column.elementor-col-20,
  [class*="wdp-sticky-section"] .elementor-column {
    width: 20% !important;
    max-width: 20% !important;
    min-width: 0 !important;
    flex: 1 1 20% !important;
  }

  /* Floating Music Controls & Action Stack */
  #mute-sound,
  #unmute-sound,
  #music-control,
  .wds-audio-box,
  #wds-audio-container,
  .audio-box,
  #audio-container,
  #tombol-musik,
  .r-navs {
    position: fixed !important;
    width: auto !important;
    max-width: 60px !important;
    right: calc(50% - 240px + 16px) !important;
    left: auto !important;
    bottom: 80px !important;
    z-index: 99998 !important;
  }

  .r-navs .elementor-icon,
  .r-navs .elementor-icon-wrapper,
  .elementor-widget-weddingpress-audio .elementor-icon {
    max-width: 60px !important;
    max-height: 60px !important;
    width: auto !important;
  }

  .elementor-widget-weddingpress-audio {
    width: auto !important;
    background: transparent !important;
  }

  .elementor-widget-weddingpress-audio:not(:has(.elementor-widget-scroll-menu)) {
    max-width: 60px !important;
    right: calc(50% - 240px + 16px) !important;
    left: auto !important;
  }

  .elementor-widget-weddingpress-audio .elementor-widget-container,
  .audio-box .elementor-widget-container,
  #audio-container .elementor-widget-container {
    width: auto !important;
  }

  /* Full-width images clamped to 480px */
  img {
    max-width: 100% !important;
    height: auto;
  }

  /* Image fold optimization: keep buttons inside first viewport fold */
  #cover img,
  .cover img,
  .motionSection img,
  [data-id="b472b3b"] img,
  [data-id="728298de"] img,
  [data-id="44269fce"] img {
    max-height: 28vh !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* Swiper containers strictly bounded */
  .swiper,
  .swiper-container {
    max-width: 480px !important;
    overflow: hidden !important;
  }

  /* Footers bounded to centered frame */
  footer,
  section:last-of-type,
  .bd-branding-footer {
    max-width: 480px !important;
    margin: 0 auto !important;
  }
}

/* ==========================================================================
   MOBILE VIEWPORT (max-width: 600px): Full Screen Smartphone Width
   ========================================================================== */
@media (max-width: 600px) {
  html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .elementor,
  .elementor-inner,
  .elementor-section-wrap,
  main,
  #page,
  .e-con,
  .e-con-inner,
  .elementor-section,
  .elementor-container,
  #cover,
  #coverx,
  #eltemplate-cover,
  #cvr,
  .coverx,
  .cover,
  .modalx {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  #cover.coverc,
  #coverx.coverc,
  #eltemplate-cover.coverc,
  #cvr.coverc,
  #cvr.cover-opened,
  .coverx.coverc,
  .modalx.removeModals,
  #cover.hide-cover {
    transform: translateY(-120%) !important;
    pointer-events: none !important;
  }

  .nav-bottom,
  .fixed-bottom,
  .bottom-nav,
  #navbar-menu,
  .navigation-bar,
  .elementor-element-c07d,
  [class*="nav-bottom"],
  [class*="bottom-bar"],
  [class*="wdp-sticky-section"] {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    transform: none !important;
  }

  nav.nav,
  .nav,
  nav[class*="nav"],
  .elementor-widget-scroll-menu nav,
  [class*="scroll-menu"] nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: 95% !important;
    bottom: 12px !important;
    margin: 0 auto !important;
    z-index: 99999 !important;
  }

  #mute-sound,
  #unmute-sound,
  #music-control,
  .wds-audio-box,
  #wds-audio-container,
  .audio-box,
  #audio-container,
  #tombol-musik,
  .r-navs {
    width: auto !important;
    max-width: 60px !important;
    right: 16px !important;
    left: auto !important;
    bottom: 76px !important;
    z-index: 99998 !important;
  }

  .elementor-widget-weddingpress-audio {
    width: auto !important;
    background: transparent !important;
  }

  #cover img,
  .cover img,
  .motionSection img,
  [data-id="b472b3b"] img,
  [data-id="728298de"] img,
  [data-id="44269fce"] img {
    max-height: 25vh !important;
    width: auto !important;
    object-fit: contain !important;
  }
}