/* ====================
Style Copy to Clipboard 
==================== */
.spread-copy-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1.2;
  cursor: pointer;
}
.spread-copy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.spread-copy-icon .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.spread-copy-icon i,
.spread-copy-icon svg {
  font-size: 1em;
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.spread-copy-label {
  white-space: nowrap;
}

/* =================
Style RSVP Optimizer
================= */
.guest-input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.guest-input-wrapper input {
  text-align: center;
  padding: 0 40px; /* Jarak aman di dalam input */
  box-sizing: border-box;
}

.guest-input-wrapper .decrement-button,
.guest-input-wrapper .increment-button {
  position: absolute;
  top: 0; /* Ubah ke 0 agar flexbox mengisi tinggi penuh */
  height: 100%;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center; /* Centering Vertikal */
  justify-content: center; /* Centering Horizontal */
  width: 35px; /* Lebar area klik tombol */
  color: #535353; /* Warna segitiga (currentColor) */
  transition: color 0.2s;
}

.guest-input-wrapper .decrement-button {
  left: 0;
}

.guest-input-wrapper .increment-button {
  right: 0;
}

/* Hover Effect */
.guest-input-wrapper .decrement-button:hover,
.guest-input-wrapper .increment-button:hover {
  color: #000; /* Warna saat dihover */
}

/* Memastikan klik pada SVG dianggap klik pada tombol parent */
.guest-input-wrapper svg {
  pointer-events: none;
  display: block;
}

/* ==================
Style Countdown Timer 
================== */
.spread-countdown-container { display: grid; align-items: center; justify-content: center; }
.spread-countdown-item { display: flex; flex-direction: column; }
.spread-digit { line-height: 1; display: block; }
.spread-label { display: block; }
.spread-editor-notice { 
    position: absolute; top:0; left:0; width:100%; height:100%; 
    background: rgba(255,255,255,0.7); color: #785064; 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    font-weight: bold; text-align: center; z-index: 10;}
.spread-editor-notice small { font-size: 0.8em; font-weight: 500; margin-top: 5px; }
.spread-countdown-wrapper { position: relative; }

/* ==================
Style QR Code 
================== */
.spread-qrcode {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.spread-qrcode canvas,
.spread-qrcode img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  transition: opacity 0.2s ease; /* Memberikan efek fade tipis */
  animation: qrFadeIn 0.3s ease-out;
}

@keyframes qrFadeIn {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

/* ==================
   Image Slider
================== */
/* =========================
   Spread Image Slider
========================= */

/* widget boundary fix (Elementor flexbox safe) */
.elementor-widget-spread-image-slider,
.elementor-widget-spread-image-slider .elementor-widget-container{
    width:100%;
    min-width:0;
}

/* main wrapper */
.spread-slider-wrapper{
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* layout container (IMPORTANT) */
.spread-slider-container{
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
}

/* swiper root */
.spread-slider{
    position: relative; /*new*/
    width:100%;
    height:100%;
    overflow:hidden;
}

/* swiper structure */
.spread-slider .swiper-wrapper{
    display:flex;
    align-items:stretch;
}

.spread-slider .swiper-slide{
    flex-shrink:0;
    height:auto;
    position:relative;
}

/* image */
.spread-media img{
    width:100%;
    height:auto;
    display:block;
}

/* =========================
   Equal Height Mode
========================= */

.spread-equal-height,
.spread-equal-height .spread-slider,
.spread-equal-height .swiper-wrapper,
.spread-equal-height .spread-slide{
    height:100%;
}

.spread-equal-height .spread-media,
.spread-equal-height .spread-media img{
    height:100%;
}

.spread-equal-height .spread-media img{
    object-fit:cover;
}

.spread-slide-caption{
    position:absolute;
    bottom:20px;
    left:20px;
    background:rgba(0,0,0,.45);
    color:#fff;
    padding:6px 12px;
    border-radius:4px;
    font-size:14px;
    line-height:1.4;
    z-index:2;
}

.spread-slider .swiper-button-prev,
.spread-slider .swiper-button-next{
    color:#fff;
    width:44px;
    height:44px;
}

.spread-slider .swiper-button-prev:after,
.spread-slider .swiper-button-next:after{
    font-size:18px;
}

.spread-slider .swiper-pagination{
    bottom:12px !important;
}

.spread-slider .swiper-pagination-bullet{
    opacity:.5;
    background:#fff;
}

.spread-slider .swiper-pagination-bullet-active{
    opacity:1;
    background:#fff;
}

.spread-media img[loading="lazy"]{
    opacity:1;
}

.elementor-invisible .spread-slider,
.elementor-hidden .spread-slider{
    visibility:hidden;
}

.elementor-invisible.elementor-animated .spread-slider,
.elementor-hidden.elementor-animated .spread-slider{
    visibility:visible;
}

.spread-slider-wrapper:before{
    content:"";
    display:block;
}

/* media wrapper (overlay target) */
.spread-media{
    position:relative;
    overflow:hidden;
    border-radius: inherit;
    transition: transform .35s ease;
}

/* overlay hanya pada gambar */
.spread-media:before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    transition: all .3s ease;
}

/* smooth hover zoom */
.spread-media img{
    display:block;
    width:100%;
    height:auto;
    transition: transform .35s ease;
}

@media (max-width:767px){

    .spread-slide-caption{
        font-size:13px;
        bottom:12px;
        left:12px;
        padding:5px 10px;
    }

    .spread-slider .swiper-button-prev,
    .spread-slider .swiper-button-next{
        width:36px;
        height:36px;
    }
}

.swiper-pagination-bullet{
    transition: all .3s ease;
    border-radius: 50px;
}