/* ============================================================
   Liquid Glass — lapisan publik (invitnesia preview/undangan)
   SELURUH warna diturunkan dari token tema (lihat preview.blade:
   algoritma luminance → --lg-*). File ini hanya resep bentuknya.
   ============================================================ */

/* ---------- Blur dasar semua permukaan kaca ---------- */
.inv .inv-gift-btn,
.btn-open-invitation,
.btn-primary,
.btn-accent,
.btn-gift,
.btn-float,
.invitnesia_menu,
.modal-content,
.lightbox-wrapper .btn-lightbox,
.lightbox-wrapper .lightbox-arrow,
.frame,
.gift-container,
.countdown-item,
.inv-countdown-cell,
.inv-gift-container,
.inv-pesan-item {
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    backdrop-filter: blur(14px) saturate(170%);
}

/* ---------- Menu bawah ---------- */
.invitnesia_menu {
    background: var(--lg-panel, rgba(255, 255, 255, 0.66)) !important;
    border-top: 1px solid var(--lg-line) !important;
    box-shadow:
        var(--lg-shadow, 0 12px 34px rgba(20, 30, 40, 0.18)),
        var(--lg-inset, inset 0 1px 0 rgba(255, 255, 255, 0.8)) !important;
}

.invitnesia_menu .invitnesia_menu_item.active:after {
    background: linear-gradient(
        160deg,
        var(--lg-cta-top),
        var(--lg-cta-bottom)
    ) !important;
    border: 1px solid var(--lg-line) !important;
    box-shadow:
        var(--lg-inset),
        0 4px 16px color-mix(in srgb, var(--inv-accent) 45%, transparent) !important;
}

/* ---------- Tombol mengambang (musik, QR) ---------- */
.btn-float {
    background: var(--lg-panel, rgba(255, 255, 255, 0.66)) !important;
    border: 1px solid var(--lg-line) !important;
    color: var(--lg-icon, #111214) !important;
    box-shadow:
        var(--lg-shadow, 0 8px 22px rgba(20, 30, 40, 0.22)),
        var(--lg-inset, inset 0 1px 0 rgba(255, 255, 255, 0.8)) !important;
}

/* State aktif (mis. sedang memutar) selalu ikut warna tema. */
.btn-float.bg-success {
    background: linear-gradient(
        160deg,
        var(--lg-cta-top),
        var(--lg-cta-bottom)
    ) !important;
    color: var(--lg-cta-text, #fff) !important;
}

/* ---------- CTA accent ---------- */
.btn-open-invitation,
.btn-primary,
.btn-accent,
.btn-gift {
    background: linear-gradient(
        160deg,
        var(--lg-cta-top),
        var(--lg-cta-bottom)
    ) !important;
    border: 1px solid
        color-mix(in srgb, var(--lg-cta-text, #fff) 32%, transparent) !important;
    color: var(--lg-cta-text, #fff) !important;
    box-shadow:
        var(--lg-shadow, 0 8px 22px rgba(20, 30, 40, 0.22)),
        var(--lg-inset, inset 0 1px 0 rgba(255, 255, 255, 0.8));
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}

.btn-open-invitation:hover,
.btn-primary:hover,
.btn-accent:hover,
.btn-gift:hover {
    filter: brightness(1.07);
}

/* ---------- Modal & backdrop ---------- */
.modal-content {
    background: var(--lg-panel, rgba(255, 255, 255, 0.74)) !important;
    border: 1px solid var(--lg-line) !important;
    border-radius: 1.25rem !important;
    box-shadow:
        0 24px 70px rgba(15, 25, 35, 0.32),
        var(--lg-inset, inset 0 1px 0 rgba(255, 255, 255, 0.8)) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
}

.modal-backdrop.show {
    background: rgba(20, 30, 45, 0.34) !important;
}

/* ---------- Kontrol lightbox (overlay gelap → tetap terang) ---------- */
.lightbox-wrapper .btn-lightbox,
.lightbox-wrapper .lightbox-arrow {
    background: rgba(255, 255, 255, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
    box-shadow:
        0 6px 18px rgba(10, 15, 25, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* ---------- Panel "frame" (selubung konten lawas) ---------- */
.frame {
    background: var(--lg-chip-weak, rgba(255, 255, 255, 0.36)) !important;
    border: 1px solid var(--lg-line-soft) !important;
    border-radius: 1.25rem;
    box-shadow:
        var(--lg-shadow, 0 12px 34px rgba(20, 30, 40, 0.18)), var(--lg-inset);
}

/* ---------- Kartu amplop & countdown lawas ---------- */
.gift-container,
.countdown-item {
    background: var(--lg-chip, rgba(255, 255, 255, 0.6)) !important;
    border: 1px solid var(--lg-line-soft) !important;
    border-radius: 1rem !important;
    box-shadow: var(--lg-shadow), var(--lg-inset) !important;
}

/* ============================================================
   Permukaan komponen inv:* (editor runtime / preview)
   ============================================================ */
/* Countdown sel */
.inv-countdown-cell {
    background: var(--lg-chip, rgba(255, 255, 255, 0.6));
    border: 1px solid var(--lg-line-soft);
    box-shadow:
        var(--lg-shadow, 0 12px 34px rgba(20, 30, 40, 0.18)), var(--lg-inset);
}

/* Amplop: tombol CTA + daftar rekening */
.inv .inv-gift-btn {
    background: linear-gradient(
        160deg,
        var(--lg-cta-top),
        var(--lg-cta-bottom)
    ) !important;
    border: 1px solid
        color-mix(in srgb, var(--lg-cta-text, #fff) 32%, transparent);
    color: var(--lg-cta-text, #fff) !important;
    box-shadow: var(--lg-shadow), var(--lg-inset);
}

.inv-gift-container {
    background: var(--lg-chip, rgba(255, 255, 255, 0.6));
    border: 1px solid var(--lg-line-soft);
    box-shadow: var(--lg-shadow), var(--lg-inset);
}

.inv-gift-item {
    border-bottom-color: var(--lg-line-soft);
}

/* Daftar pesan tamu */
.inv-pesan-item {
    background: var(--lg-chip, rgba(255, 255, 255, 0.6));
    border: 1px solid var(--lg-line-soft);
    box-shadow:
        0 6px 18px rgba(20, 30, 40, 0.08),
        var(--lg-inset);
}

/* Galeri: halo halus di belakang tiap figur (gambar tetap tajam) */
.inv-gallery-item {
    border: 1px solid var(--lg-line-soft);
    box-shadow: var(--lg-shadow, 0 6px 18px rgba(20, 30, 40, 0.16));
}

/* Bungkus video/iframe: bingkai kaca */
.inv-iframe-box {
    border-radius: 1rem;
    border: 1px solid var(--lg-line-soft);
    box-shadow: var(--lg-shadow), var(--lg-inset);
    overflow: hidden;
}