/* ============================================================
   Glass Design System — Blue Butterfly (custom local layer)
   ============================================================ */
:root {
    --glass-hi: rgba(255, 255, 255, 0.72);
    --glass-md: rgba(255, 255, 255, 0.38);
    --glass-lo: rgba(255, 255, 255, 0.16);
    --glass-line: rgba(255, 255, 255, 0.55);
    --glass-line-soft: rgba(255, 255, 255, 0.32);
    --glass-blur: 18px;
    --glass-radius: 1.15rem;
    --glass-shadow: 0 8px 32px rgba(64, 110, 137, 0.16);
}

.glass {
    background: var(--glass-md);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-line);
    box-shadow: var(--glass-shadow);
}

/* ---------- Frame card ---------- */
.invitnesia_slide .frame::before,
.theme .frame::before {
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.78),
        rgba(255, 255, 255, 0.42) 50%,
        rgba(255, 255, 255, 0.68)
    ) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* ---------- Bottom menu ---------- */
.invitnesia_menu {
    background: rgba(255, 255, 255, 0.3) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border-top: 1px solid var(--glass-line);
    box-shadow: 0 -10px 32px rgba(64, 110, 137, 0.18) !important;
}

.invitnesia_menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.95),
        transparent
    );
    z-index: 1;
}

.invitnesia_menu .invitnesia_menu_item i,
.invitnesia_menu .invitnesia_menu_item .bi {
    font-size: 1.35rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.6));
}

.invitnesia_menu .invitnesia_menu_item:hover {
    color: var(--inv-accent);
}

.invitnesia_menu .invitnesia_menu_item.active:after {
    background: linear-gradient(135deg, #76a8c4, #406e89) !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 4px 18px rgba(64, 110, 137, 0.45);
}

/* ---------- Buttons ---------- */
.btn-primary,
.btn-accent,
.btn-gift,
.link.btn-primary {
    background: linear-gradient(
        135deg,
        rgba(118, 168, 196, 0.92),
        rgba(64, 110, 137, 0.86)
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow:
        0 6px 20px rgba(64, 110, 137, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    text-shadow: 0 1px 2px rgba(64, 110, 137, 0.3);
}

.btn-primary:hover,
.btn-accent:hover,
.btn-gift:hover {
    background: linear-gradient(
        135deg,
        rgba(140, 190, 215, 0.95),
        rgba(84, 134, 163, 0.9)
    ) !important;
    transform: translateY(-1px);
    box-shadow:
        0 8px 24px rgba(64, 110, 137, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.btn-gift i,
.btn-primary i {
    margin-right: 0.35rem;
}

/* ---------- Floating action ---------- */
.btn-float {
    background: rgba(255, 255, 255, 0.32) !important;
    border: 1px solid var(--glass-line) !important;
    color: var(--inv-accent) !important;
    font-size: 1.4rem !important;
    line-height: 1;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow:
        0 6px 18px rgba(64, 110, 137, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.btn-float.bg-success {
    background: linear-gradient(
        135deg,
        rgba(71, 190, 135, 0.92),
        rgba(40, 145, 96, 0.88)
    ) !important;
    color: #fff !important;
}

.btn-float i {
    line-height: 1;
}

/* ---------- Gift cards ---------- */
.gift-container {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-radius: var(--glass-radius) !important;
    box-shadow:
        0 8px 28px rgba(64, 110, 137, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* ---------- Countdown ---------- */
.countdown-item {
    background: rgba(255, 255, 255, 0.62) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow:
        0 4px 16px rgba(64, 110, 137, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ---------- Modals & lightbox ---------- */
.modal-content {
    background: rgba(255, 255, 255, 0.72) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid var(--glass-line);
    box-shadow: 0 24px 60px rgba(64, 110, 137, 0.32);
}

.modal-backdrop.show {
    background: rgba(46, 60, 80, 0.42);
}

.btn-lightbox,
.lightbox-arrow {
    background: rgba(255, 255, 255, 0.34) !important;
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(64, 110, 137, 0.25);
}

/* ---------- Accent glow on headings ---------- */
.editable.color-accent,
.font-accent {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}