/* ==========================================
   CUSTOM COMPANION STYLES & ANIMATIONS
   ========================================== */

/* Custom scrollbar for sidebar panel */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Active Theme Button border glow */
.theme-btn.active {
    border-color: #c5a85c !important;
    background: rgba(197, 168, 92, 0.15) !important;
    box-shadow: 0 0 12px rgba(197, 168, 92, 0.3);
}

/* Active size-btn indicator styling */
.size-btn.active-size {
    background-color: rgba(197, 168, 92, 0.2) !important;
    color: #f3e5ab !important;
    border-color: rgba(197, 168, 92, 0.4) !important;
}

/* Floating Bottom Navigation Bar */
#floating-menu {
    border: 1px solid rgba(197, 168, 92, 0.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.phone-screen[data-theme="modern"] #floating-menu {
    background: rgba(18, 18, 20, 0.95);
    border-color: rgba(229, 193, 88, 0.2);
}

.phone-screen[data-theme="royal"] #floating-menu {
    background: rgba(78, 12, 21, 0.95);
    border-color: rgba(212, 175, 55, 0.3);
}

.phone-screen[data-theme="rustic"] #floating-menu {
    background: rgba(253, 253, 251, 0.95);
    border-color: rgba(108, 126, 102, 0.2);
}

.phone-screen[data-theme="blossom"] #floating-menu {
    background: rgba(255, 245, 246, 0.95);
    border-color: rgba(236, 72, 153, 0.2);
}

.phone-screen[data-theme="celestial"] #floating-menu {
    background: rgba(13, 17, 30, 0.95);
    border-color: rgba(56, 189, 248, 0.2);
}

/* Music player disc rotating animation */
.music-widget {
    background: rgba(255, 255, 255, 0.9);
    color: #1e293b;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.music-widget.playing i {
    animation: rotateDisc 3s linear infinite;
}

@keyframes rotateDisc {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.music-tooltip {
    position: absolute;
    right: 54px;
    background: rgba(15, 23, 42, 0.9);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.music-widget:hover .music-tooltip {
    opacity: 1;
}

/* Envelope transition */
.envelope-overlay.opened {
    transform: translateY(-100%);
}

/* Pulsing opening button */
.btn-open-invitation {
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.2);
        transform: scale(1.03);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        transform: scale(1);
    }
}


/* ==========================================
   TEMPLATE 1: SAGE BOTANICAL (RUSTIC)
   ==========================================/* 1. Rustic / Botanical Theme */
.phone-screen[data-theme="rustic"] {
    --invite-primary: #4f6140;
    --invite-secondary: #748e62;
    --invite-bg: #fdfdfb;
    --invite-text: #2f3e2b;
    --invite-card-bg: rgba(255, 255, 255, 0.9);
    --invite-font-title: 'Playfair Display', serif;
    --invite-font-accent: 'Sacramento', cursive;
    --invite-font-body: 'Montserrat', sans-serif;
}

.phone-screen[data-theme="rustic"] .envelope-bg {
    background-image: 
        linear-gradient(to bottom, rgba(125,143,119,0.7), rgba(108,126,102,0.85)),
        url('assets/rustic_bg.jpg');
    background-size: cover;
    background-position: center;
}

.phone-screen[data-theme="rustic"] .envelope-frame-decoration {
    position: absolute;
    inset: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    pointer-events: none;
}

.phone-screen[data-theme="rustic"] .hero-sec,
.phone-screen[data-theme="rustic"] .invitation-content-scroller {
    background-image: 
        linear-gradient(to bottom, rgba(253, 253, 251, 0.8), rgba(253, 253, 251, 0.95)),
        url('assets/rustic_bg.jpg') !important;
    background-size: cover !important;
    background-attachment: scroll;
}

.phone-screen[data-theme="rustic"] .decor-top {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path fill="%237d8f77" opacity="0.25" d="M60 15 C55 45 30 55 15 60 C30 65 55 75 60 105 C65 75 90 65 105 60 C90 55 65 45 60 15 Z"/><circle cx="60" cy="60" r="4" fill="%237d8f77" opacity="0.5"/></svg>') no-repeat center;
    background-size: contain;
}

.phone-screen[data-theme="rustic"] .decor-bottom {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path fill="%237d8f77" opacity="0.25" d="M60 15 C55 45 30 55 15 60 C30 65 55 75 60 105 C65 75 90 65 105 60 C90 55 65 45 60 15 Z"/><circle cx="60" cy="60" r="4" fill="%237d8f77" opacity="0.5"/></svg>') no-repeat center;
    background-size: contain;
}

.phone-screen[data-theme="rustic"] .btn-open-invitation {
    background: #5a6b53;
}

.phone-screen[data-theme="rustic"] .couple-names,
.phone-screen[data-theme="rustic"] .hero-names {
    font-family: var(--invite-font-title);
    color: #2e3b2b;
}

.phone-screen[data-theme="rustic"] .envelope-content .couple-names {
    color: #ffffff;
}

.phone-screen[data-theme="rustic"] .profile-card,
.phone-screen[data-theme="rustic"] .event-card,
.phone-screen[data-theme="rustic"] .gift-card,
.phone-screen[data-theme="rustic"] .rsvp-form,
.phone-screen[data-theme="rustic"] .wish-item {
    background: var(--invite-card-bg);
    color: var(--invite-text);
    border-radius: 20px;
    border: 1px solid rgba(108,126,102,0.1);
    box-shadow: 0 8px 20px -4px rgba(108,126,102,0.06);
}

.phone-screen[data-theme="rustic"] .avatar-frame {
    border-color: #6c7e66;
    color: #6c7e66;
    background: rgba(108,126,102,0.04);
}

.phone-screen[data-theme="rustic"] .ampersand-divider {
    font-family: var(--invite-font-accent);
    color: #7d8f77;
}

.phone-screen[data-theme="rustic"] .sec-title {
    font-family: var(--invite-font-title);
    color: #2e3b2b;
}
.phone-screen[data-theme="rustic"] .sec-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: #7d8f77;
}

.phone-screen[data-theme="rustic"] .btn-copy,
.phone-screen[data-theme="rustic"] .btn-submit {
    background: #5a6b53;
    color: white;
}


/* ==========================================
   TEMPLATE 2: NOIR GOLD (MODERN)
   ==========================================/* 2. Modern / Sleek Theme */
.phone-screen[data-theme="modern"] {
    --invite-primary: #e5c158;
    --invite-secondary: #cba239;
    --invite-bg: #09090b;
    --invite-text: #f1f5f9;
    --invite-card-bg: rgba(20, 20, 23, 0.65);
    --invite-font-title: 'Plus Jakarta Sans', sans-serif;
    --invite-font-accent: 'Alex Brush', cursive;
    --invite-font-body: 'Plus Jakarta Sans', sans-serif;
}

.phone-screen[data-theme="modern"] .music-widget {
    background: rgba(18, 18, 18, 0.85);
    color: #e5c158;
    box-shadow: 0 4px 12px rgba(229,193,88,0.25);
    border: 1px solid rgba(229,193,88,0.15);
}

.phone-screen[data-theme="modern"] .envelope-bg {
    background-image: 
        linear-gradient(to bottom, rgba(18, 18, 20, 0.65), rgba(9, 9, 11, 0.95)),
        url('assets/modern_bg.jpg');
    background-size: cover;
    background-position: center;
}

.phone-screen[data-theme="modern"] .envelope-frame-decoration {
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(229, 193, 88, 0.25);
    border-radius: 16px;
    pointer-events: none;
    box-shadow: inset 0 0 15px rgba(229, 193, 88, 0.05);
}

.phone-screen[data-theme="modern"] .envelope-frame-decoration::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
}

.phone-screen[data-theme="modern"] .hero-sec,
.phone-screen[data-theme="modern"] .invitation-content-scroller {
    background-image: 
        linear-gradient(to bottom, rgba(18, 18, 20, 0.7), rgba(9, 9, 11, 0.95)),
        url('assets/modern_bg.jpg') !important;
    background-size: cover !important;
    background-attachment: scroll;
}

.phone-screen[data-theme="modern"] .hero-names {
    font-weight: 800;
    letter-spacing: -1.5px;
    color: #ffffff;
}

.phone-screen[data-theme="modern"] .profile-card,
.phone-screen[data-theme="modern"] .event-card,
.phone-screen[data-theme="modern"] .gift-card,
.phone-screen[data-theme="modern"] .rsvp-form,
.phone-screen[data-theme="modern"] .wish-item {
    background: var(--invite-card-bg);
    color: var(--invite-text);
    border: 1px solid rgba(229, 193, 88, 0.15);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
}

.phone-screen[data-theme="modern"] .avatar-frame {
    border-color: var(--invite-primary);
    color: var(--invite-primary);
    background: rgba(229, 193, 88, 0.03);
}

.phone-screen[data-theme="modern"] .ampersand-divider {
    font-family: var(--invite-font-accent);
    color: var(--invite-primary);
}

.phone-screen[data-theme="modern"] .sec-title {
    font-family: var(--invite-font-title);
    color: #ffffff;
    font-weight: 800;
}
.phone-screen[data-theme="modern"] .sec-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: var(--invite-primary);
    border-radius: 2px;
}

.phone-screen[data-theme="modern"] .time-val,
.phone-screen[data-theme="modern"] .event-date,
.phone-screen[data-theme="modern"] .card-icon i,
.phone-screen[data-theme="modern"] .bank-logo-area {
    color: var(--invite-primary);
}

.phone-screen[data-theme="modern"] .btn-open-invitation,
.phone-screen[data-theme="modern"] .btn-copy,
.phone-screen[data-theme="modern"] .btn-submit {
    background: linear-gradient(135deg, #f5d06b, #c59f31);
    color: #09090b;
    font-weight: 700;
    border-radius: 8px;
}


/* ==========================================
   TEMPLATE 3: ROYAL VELVET (ROYAL)
   ========================================== */
.phone-screen[data-theme="royal"] {
    --invite-primary: #d4af37;
    --invite-secondary: #f3e5ab;
    --invite-bg: #3f0910;
    --invite-text: #ffeec8;
    --invite-card-bg: rgba(78, 12, 21, 0.95);
    --invite-font-title: 'Cinzel', serif;
    --invite-font-accent: 'Sacramento', cursive;
    --invite-font-body: 'Montserrat', sans-serif;
}

.phone-screen[data-theme="royal"] .envelope-bg {
    background-color: #4a0e17;
    background-image: 
        radial-gradient(circle at center, rgba(212,175,55,0.15) 0%, transparent 70%),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><rect x="0" y="0" width="40" height="40" fill="none" stroke="%23d4af37" stroke-width="0.3" stroke-opacity="0.08"/></svg>');
}

.phone-screen[data-theme="royal"] .envelope-frame-decoration {
    position: absolute;
    inset: 15px;
    border: 3px double #d4af37;
    border-radius: 4px;
    pointer-events: none;
}

.phone-screen[data-theme="royal"] .hero-sec {
    background: radial-gradient(circle at center, #5e121c, #2a0509);
    border: 4px double #d4af37;
    margin: 15px;
    height: calc(100% - 30px);
    border-radius: 4px;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
}

.phone-screen[data-theme="royal"] .couple-names,
.phone-screen[data-theme="royal"] .hero-names {
    font-family: var(--invite-font-title);
    color: var(--invite-primary);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
}

.phone-screen[data-theme="royal"] .profile-card,
.phone-screen[data-theme="royal"] .event-card,
.phone-screen[data-theme="royal"] .gift-card,
.phone-screen[data-theme="royal"] .rsvp-form,
.phone-screen[data-theme="royal"] .wish-item {
    background: var(--invite-card-bg);
    color: var(--invite-text);
    border: 2px solid #d4af37;
    border-radius: 4px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.phone-screen[data-theme="royal"] .avatar-frame {
    border-color: var(--invite-primary);
    color: var(--invite-primary);
    background: rgba(212,175,55,0.05);
}

.phone-screen[data-theme="royal"] .ampersand-divider {
    font-family: var(--invite-font-accent);
    color: var(--invite-primary);
}

.phone-screen[data-theme="royal"] .sec-title {
    font-family: var(--invite-font-title);
    color: var(--invite-primary);
}

.phone-screen[data-theme="royal"] .btn-open-invitation,
.phone-screen[data-theme="royal"] .btn-copy,
.phone-screen[data-theme="royal"] .btn-submit {
    background: linear-gradient(135deg, #f0d06b, #b59228);
    color: #4a0e17;
    border-radius: 4px;
    font-weight: 700;
}


/* ==========================================
   TEMPLATE 4: SWEET BLOSSOM (BLOSSOM)
   ========================================== */
.phone-screen[data-theme="blossom"] {
    --invite-primary: #ec4899;
    --invite-secondary: #db2777;
    --invite-bg: #fff5f6;
    --invite-text: #4c0519;
    --invite-card-bg: rgba(255, 255, 255, 0.94);
    --invite-font-title: 'Great Vibes', cursive;
    --invite-font-accent: 'Parisienne', cursive;
    --invite-font-body: 'Montserrat', sans-serif;
}

.phone-screen[data-theme="blossom"] .envelope-bg {
    background-image: 
        linear-gradient(to bottom, rgba(244, 114, 182, 0.7), rgba(219, 39, 119, 0.85)),
        url('assets/couple2.jpg');
    background-size: cover;
    background-position: center;
}

.phone-screen[data-theme="blossom"] .envelope-frame-decoration {
    position: absolute;
    inset: 15px;
    border: 1px dashed rgba(236, 72, 153, 0.4);
    border-radius: 20px;
}

.phone-screen[data-theme="blossom"] .hero-sec {
    background-color: #fff5f6;
}

.phone-screen[data-theme="blossom"] .couple-names,
.phone-screen[data-theme="blossom"] .hero-names {
    font-family: var(--invite-font-title);
    color: var(--invite-primary);
}

.phone-screen[data-theme="blossom"] .envelope-content .couple-names {
    color: #9d174d;
}

.phone-screen[data-theme="blossom"] .profile-card,
.phone-screen[data-theme="blossom"] .event-card,
.phone-screen[data-theme="blossom"] .gift-card,
.phone-screen[data-theme="blossom"] .rsvp-form,
.phone-screen[data-theme="blossom"] .wish-item {
    background: var(--invite-card-bg);
    color: var(--invite-text);
    border-radius: 30px 10px 30px 10px;
    border: 1px solid rgba(236, 72, 153, 0.12);
    box-shadow: 0 10px 25px rgba(236, 72, 153, 0.05);
}

.phone-screen[data-theme="blossom"] .avatar-frame {
    border-color: var(--invite-primary);
    color: var(--invite-primary);
}

.phone-screen[data-theme="blossom"] .ampersand-divider {
    font-family: var(--invite-font-accent);
    color: var(--invite-primary);
}

.phone-screen[data-theme="blossom"] .sec-title {
    font-family: var(--invite-font-title);
    color: var(--invite-secondary);
}
.phone-screen[data-theme="blossom"] .sec-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background: var(--invite-primary);
}

.phone-screen[data-theme="blossom"] .time-val,
.phone-screen[data-theme="blossom"] .card-icon i {
    color: var(--invite-primary);
}

.phone-screen[data-theme="blossom"] .event-date,
.phone-screen[data-theme="blossom"] .bank-logo-area {
    color: var(--invite-secondary);
}

.phone-screen[data-theme="blossom"] .btn-open-invitation,
.phone-screen[data-theme="blossom"] .btn-copy,
.phone-screen[data-theme="blossom"] .btn-submit {
    background: var(--invite-secondary);
    color: white;
}


/* ==========================================
   TEMPLATE 5: STARRY CELESTIAL (CELESTIAL)
   ========================================== */
.phone-screen[data-theme="celestial"] {
    --invite-primary: #38bdf8;
    --invite-secondary: #0284c7;
    --invite-bg: #030712;
    --invite-text: #e2e8f0;
    --invite-card-bg: rgba(15, 23, 42, 0.8);
    --invite-font-title: 'Cinzel', serif;
    --invite-font-accent: 'Sacramento', cursive;
    --invite-font-body: 'Inter', sans-serif;
}

.phone-screen[data-theme="celestial"] .music-widget {
    background: rgba(15, 23, 42, 0.85);
    color: #38bdf8;
    border: 1px solid rgba(56,189,248,0.2);
}

.phone-screen[data-theme="celestial"] .envelope-bg {
    background-color: #0b0f19;
    background-image: 
        radial-gradient(circle at center, rgba(56,189,248,0.12) 0%, transparent 75%),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="15" cy="15" r="0.8" fill="%2338bdf8" fill-opacity="0.2"/><circle cx="65" cy="30" r="0.6" fill="%2338bdf8" fill-opacity="0.2"/></svg>');
}

.phone-screen[data-theme="celestial"] .envelope-frame-decoration {
    position: absolute;
    inset: 15px;
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 12px;
}

.phone-screen[data-theme="celestial"] .hero-sec {
    background: radial-gradient(circle at center, #0f172a, #030712);
}

.phone-screen[data-theme="celestial"] .couple-names,
.phone-screen[data-theme="celestial"] .hero-names {
    font-family: var(--invite-font-title);
    color: #ffffff;
    text-shadow: 0 0 12px rgba(56,189,248,0.5);
}

.phone-screen[data-theme="celestial"] .profile-card,
.phone-screen[data-theme="celestial"] .event-card,
.phone-screen[data-theme="celestial"] .gift-card,
.phone-screen[data-theme="celestial"] .rsvp-form,
.phone-screen[data-theme="celestial"] .wish-item {
    background: var(--invite-card-bg);
    color: var(--invite-text);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 16px;
    backdrop-filter: blur(8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}

.phone-screen[data-theme="celestial"] .avatar-frame {
    border-color: var(--invite-primary);
    color: var(--invite-primary);
}

.phone-screen[data-theme="celestial"] .ampersand-divider {
    font-family: var(--invite-font-accent);
    color: var(--invite-primary);
}

.phone-screen[data-theme="celestial"] .sec-title {
    font-family: var(--invite-font-title);
    color: #ffffff;
}

.phone-screen[data-theme="celestial"] .time-val,
.phone-screen[data-theme="celestial"] .event-date,
.phone-screen[data-theme="celestial"] .card-icon i,
.phone-screen[data-theme="celestial"] .bank-logo-area {
    color: var(--invite-primary);
}

.phone-screen[data-theme="celestial"] .btn-open-invitation,
.phone-screen[data-theme="celestial"] .btn-copy,
.phone-screen[data-theme="celestial"] .btn-submit {
    background: var(--invite-primary);
    color: #020617;
    font-weight: 700;
}


/* ==========================================
   SCROLL REVEAL MOTION ANIMATIONS
   ========================================== */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================
   ACCESSIBILITY & POLISH FIXES
   ========================================== */

/* Visible focus ring for keyboard navigation */
:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Predictable tap behavior + press feedback without layout shift */
button,
a,
select {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

button:not(:disabled):active {
    transform: scale(0.97);
}

.btn-open-invitation:active {
    animation: none;
    transform: scale(0.97);
}

/* Keep scroller content clear of the fixed bottom nav + smooth scrolling */
.invitation-content-scroller {
    padding-bottom: 130px;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

/* Light-theme card text contrast (gray-400 fails 4.5:1 on white) */
.phone-screen[data-theme="rustic"] .profile-parents,
.phone-screen[data-theme="blossom"] .profile-parents,
.phone-screen[data-theme="rustic"] #timeline-sec p,
.phone-screen[data-theme="blossom"] #timeline-sec p {
    color: #4b5563;
}

/* Brand-gold text must darken on light themes (rustic/blossom) to pass WCAG */
.phone-screen[data-theme="rustic"] .profile-name,
.phone-screen[data-theme="rustic"] .arabic-verse,
.phone-screen[data-theme="rustic"] #timeline-sec .text-brand-accent,
.phone-screen[data-theme="blossom"] .profile-name,
.phone-screen[data-theme="blossom"] .arabic-verse,
.phone-screen[data-theme="blossom"] #timeline-sec .text-brand-accent {
    color: #8a6d1f;
}

.phone-screen[data-theme="rustic"] #timeline-sec .bg-brand-accent,
.phone-screen[data-theme="blossom"] #timeline-sec .bg-brand-accent {
    background-color: #8a6d1f;
}

/* Wish status chips: dark variants on light themes, light variants on dark themes */
.phone-screen[data-theme="rustic"] .wish-status.text-emerald-400,
.phone-screen[data-theme="blossom"] .wish-status.text-emerald-400 {
    color: #047857;
    background-color: rgba(5, 150, 105, 0.14);
}

.phone-screen[data-theme="rustic"] .wish-status.text-red-400,
.phone-screen[data-theme="blossom"] .wish-status.text-red-400 {
    color: #b91c1c;
    background-color: rgba(220, 38, 38, 0.12);
}

/* RSVP form: theme-aware label + input contrast on dark themes */
.phone-screen[data-theme="modern"] .rsvp-label,
.phone-screen[data-theme="royal"] .rsvp-label,
.phone-screen[data-theme="celestial"] .rsvp-label {
    color: #d1d5db;
}

.phone-screen[data-theme="modern"] .rsvp-input,
.phone-screen[data-theme="royal"] .rsvp-input,
.phone-screen[data-theme="celestial"] .rsvp-input {
    color: #f8fafc;
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.22);
}

/* Countdown tiles: visible surface per light/dark theme */
.countdown-item {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.phone-screen[data-theme="modern"] .countdown-item,
.phone-screen[data-theme="royal"] .countdown-item,
.phone-screen[data-theme="celestial"] .countdown-item {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    .invitation-content-scroller {
        scroll-behavior: auto;
    }

    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .btn-open-invitation {
        animation: none !important;
    }

    .music-widget.playing i {
        animation: none !important;
    }

    #envelope {
        transition-duration: 0.01ms !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}