/* ==========================================================
   Gaya dasar komponen undangan (dipakai semua template).
   Template cukup mengatur variabel di :root untuk menyesuaikan warna.
   ========================================================== */
:root{
  --inv-accent:#c9a96e;
  --inv-accent-text:#14161b;
  --inv-text:#2b2b2b;
  --inv-muted:#6b6b6b;
  --inv-card:#ffffff;
  --inv-line:rgba(0,0,0,.12);
  --inv-radius:14px;
  --inv-input:#ffffff;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.inv-body{margin:0}
body.inv-locked{overflow:hidden;height:100vh;height:100dvh}
img{max-width:100%;height:auto}

/* Cover pembuka: template membungkus cover dengan .inv-cover */
.inv-cover{position:fixed;inset:0;z-index:50;transition:transform .9s cubic-bezier(.7,0,.2,1),opacity .9s;overflow:auto}
body.inv-opened .inv-cover{transform:translateY(-100%);opacity:0;pointer-events:none}

/* Animasi muncul saat discroll: tambahkan data-anim pada elemen */
[data-anim]{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
[data-anim="zoom"]{transform:scale(.92)}
[data-anim="left"]{transform:translateX(-28px)}
[data-anim="right"]{transform:translateX(28px)}
[data-anim].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-anim]{opacity:1;transform:none;transition:none}.inv-cover{transition:none}}

/* Tombol */
.inv-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--inv-accent);background:var(--inv-accent);color:var(--inv-accent-text);
  padding:10px 22px;border-radius:999px;font:inherit;font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;transition:filter .2s,transform .2s}
.inv-btn:hover{filter:brightness(1.08)}
.inv-btn:active{transform:scale(.97)}
.inv-btn-ghost{background:transparent;color:var(--inv-accent)}
.inv-btn-sm{padding:6px 14px;font-size:13px}

/* Countdown */
.inv-countdown{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.inv-countdown>div{min-width:64px;padding:10px 6px;border-radius:var(--inv-radius);background:var(--inv-card);border:1px solid var(--inv-line);text-align:center}
.inv-countdown b{display:block;font-size:24px;line-height:1.1;color:var(--inv-accent)}
.inv-countdown span{font-size:12px;color:var(--inv-muted)}

/* Peta & video */
.inv-map{border-radius:var(--inv-radius);overflow:hidden;border:1px solid var(--inv-line);margin:12px 0}
.inv-map iframe,.inv-video iframe{display:block;width:100%;border:0}
.inv-map iframe{height:220px}
.inv-video{position:relative;border-radius:var(--inv-radius);overflow:hidden;aspect-ratio:16/9}
.inv-video iframe{position:absolute;inset:0;height:100%}

/* Galeri */
.inv-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.inv-gallery a{display:block;aspect-ratio:1;overflow:hidden;border-radius:8px}
.inv-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.inv-gallery a:hover img{transform:scale(1.06)}
.inv-gallery a:first-child{grid-column:span 2;grid-row:span 2}
.inv-lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:16px}
.inv-lightbox img{max-height:90vh;max-width:100%;border-radius:6px}
.inv-lightbox button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;width:44px;height:44px;border-radius:50%;font-size:22px;cursor:pointer}
.inv-lightbox .lb-close{top:14px;right:14px}.inv-lightbox .lb-prev{left:10px}.inv-lightbox .lb-next{right:10px}

/* Amplop digital */
.inv-gift{display:grid;gap:12px}
.inv-gift-card{background:var(--inv-card);border:1px solid var(--inv-line);border-radius:var(--inv-radius);padding:18px;text-align:center}
.inv-gift-bank{font-weight:700;letter-spacing:.5px;color:var(--inv-accent)}
.inv-gift-number{font-size:20px;font-weight:600;letter-spacing:1px;margin:6px 0 2px}
.inv-gift-holder,.inv-gift-address{color:var(--inv-muted);margin-bottom:10px}

/* RSVP & ucapan */
.inv-rsvp{display:grid;gap:12px;text-align:left}
.inv-field label{display:block;font-size:13px;margin-bottom:4px;color:var(--inv-muted)}
.inv-field input,.inv-field select,.inv-field textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--inv-line);background:var(--inv-input);color:var(--inv-text);font:inherit}
.inv-field input:focus,.inv-field select:focus,.inv-field textarea:focus{outline:2px solid var(--inv-accent);outline-offset:0}
.inv-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.inv-rsvp-msg{font-size:14px;min-height:1em}
.inv-wishes-summary{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:14px 0}
.inv-wishes-summary span{font-size:13px;padding:4px 12px;border-radius:999px;border:1px solid var(--inv-line);background:var(--inv-card)}
.inv-wishes{display:grid;gap:10px;max-height:420px;overflow:auto;text-align:left;padding-right:4px}
.inv-wish{background:var(--inv-card);border:1px solid var(--inv-line);border-radius:12px;padding:12px 14px}
.inv-wish b{display:block}
.inv-wish small{color:var(--inv-muted);font-size:12px}
.inv-wish p{margin:6px 0 0;white-space:pre-line}
.inv-wish .att{font-size:11px;padding:1px 8px;border-radius:999px;background:var(--inv-accent);color:var(--inv-accent-text);margin-left:6px;vertical-align:middle}
[data-wishes-more]{margin-top:10px}

/* QR buku tamu */
.inv-qr-wrap{text-align:center}
.inv-qr{display:inline-block;padding:12px;background:#fff;border-radius:12px}
.inv-qr img,.inv-qr canvas{display:block}
.inv-qr-note{font-size:13px;color:var(--inv-muted)}

/* Tombol musik */
.inv-music{position:fixed;right:16px;bottom:16px;z-index:40;width:46px;height:46px;border-radius:50%;border:1px solid var(--inv-accent);
  background:var(--inv-card);cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.25)}
body.inv-opened .inv-music{display:flex}
.inv-music{color:var(--inv-accent);position:fixed}
.inv-music svg{width:20px;height:20px}
.inv-music .i-note{position:absolute;right:-3px;top:-3px;width:18px;height:18px;padding:3px;border-radius:50%;background:var(--inv-accent);color:var(--inv-accent-text,#fff)}
.inv-music .i-pause{display:none}
.inv-music.is-playing .i-pause{display:block}
.inv-music.is-playing .i-play{display:none}
.inv-music .i-play{margin-left:2px}

/* Lain-lain */
.inv-credit{text-align:center;font-size:12px;padding:18px 12px 70px;opacity:.75}
.inv-credit a{color:inherit;font-weight:600}
.inv-toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(20px);background:rgba(20,22,27,.92);color:#fff;padding:8px 16px;border-radius:999px;
  font-size:14px;opacity:0;pointer-events:none;transition:all .3s;z-index:120}
.inv-toast.show{opacity:1;transform:translateX(-50%)}
.inv-preview-bar{position:fixed;top:0;left:0;right:0;z-index:200;background:#c0392b;color:#fff;text-align:center;font:600 12px/1.8 system-ui,sans-serif;letter-spacing:1px}

/* Logo bank di amplop digital */
.inv-gift-logo{display:block;height:34px;width:auto;max-width:140px;object-fit:contain;margin:0 auto 10px;background:#fff;padding:4px 10px;border-radius:8px}
.inv-gift-badge{display:inline-block;color:#fff;font-weight:700;font-size:14px;letter-spacing:.3px;padding:5px 14px;border-radius:8px;margin-bottom:10px}

/* Tombol auto scroll */
.inv-autoscroll{position:fixed;right:16px;bottom:72px;z-index:40;height:46px;min-width:46px;padding:0 14px 0 12px;border-radius:999px;border:1px solid var(--inv-accent);
  background:var(--inv-card);color:var(--inv-accent);cursor:pointer;display:none;align-items:center;gap:8px;box-shadow:0 6px 20px rgba(0,0,0,.25);font:600 13px/1 system-ui,sans-serif}
body.inv-opened .inv-autoscroll{display:flex}
.inv-autoscroll svg{width:20px;height:20px;flex:none}
.inv-autoscroll .i-pause{display:none}
.inv-autoscroll.is-on .i-play{display:none}
.inv-autoscroll.is-on .i-pause{display:block}
.inv-autoscroll.is-on{background:var(--inv-accent);color:var(--inv-accent-text)}
.inv-autoscroll-label{white-space:nowrap}
.inv-autoscroll.is-compact .inv-autoscroll-label{display:none}
.inv-autoscroll.is-compact{padding:0;width:46px;justify-content:center}
.inv-qr-auto{text-align:center;padding:40px 20px}
.inv-qr-auto h2{margin:0 0 16px;font-size:1.6em}


/* ===== Menu navigasi bawah (gaya bawaan — template bisa mendesain ulang sepenuhnya) ===== */
.inv-nav{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;background:var(--inv-card);border-top:1px solid var(--inv-line);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(0,0,0,.12)}
body.inv-opened .inv-nav{display:block;animation:inv-nav-in .5s ease both}
@keyframes inv-nav-in{from{transform:translateY(110%)}to{transform:none}}
.inv-nav-track{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;justify-content:safe center;max-width:640px;margin:0 auto}
.inv-nav-track::-webkit-scrollbar{display:none}
.inv-nav-track.is-scroll{-webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
.inv-nav-item{flex:0 0 auto;min-width:64px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 8px;border-radius:12px;
  color:var(--inv-muted);text-decoration:none;font:500 11px/1.1 system-ui,sans-serif;transition:background .25s,color .25s}
.inv-nav-ico svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.inv-nav-item.is-active{background:var(--inv-accent);color:var(--inv-accent-text)}
body.has-inv-nav .inv-music{bottom:calc(var(--inv-nav-h,64px) + 14px)}
body.has-inv-nav .inv-autoscroll{bottom:calc(var(--inv-nav-h,64px) + 70px)}
body.has-inv-nav .inv-toast{bottom:calc(var(--inv-nav-h,64px) + 20px)}
body.has-inv-nav .inv-credit{padding-bottom:calc(var(--inv-nav-h,64px) + 40px)}