/* ==========================================================================
   OUR LDR STORY - ROYAL VELVET & CHAMPAGNE ROSE GOLD DESIGN SYSTEM
   Ultra-High-End Luxury Romantic Web Experience for ourldrstory.com
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Caveat:wght@600;700&family=Great+Vibes&family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,600&display=swap');

:root {
    --bg-cream-50: #FFFDFE;
    --bg-cream-100: #FBF0F3;
    --bg-cream-200: #F5E1E7;
    
    --color-rosegold-50: #FDF5F6;
    --color-rosegold-100: #F9E2E6;
    --color-rosegold-200: #F2BDC6;
    --color-rosegold-300: #E68B9C;
    --color-rosegold-400: #D85C73;
    --color-rosegold-500: #B84557;
    --color-rosegold-600: #9C2E41;
    --color-rosegold-700: #6B1A2B;
    --color-rosegold-800: #4A0E17;

    --color-champagne-gold: #C59B6C;
    --color-velvet-wine: #3E0A12;

    --color-lavender-100: #F4EFFF;
    --color-lavender-200: #E4D5FE;
    --color-lavender-300: #C9B2FA;
    --color-lavender-500: #8B64D6;
    --color-lavender-600: #6F41C7;
    --color-lavender-700: #4A2296;
}

html {
    scroll-behavior: smooth;
    background-color: #07020B !important;
    background: radial-gradient(circle at 50% 0%, #170A24 0%, #0F0518 45%, #07020B 100%) !important;
}

body {
    background: radial-gradient(circle at 50% 0%, #170A24 0%, #0F0518 45%, #07020B 100%) !important;
    background-color: #07020B !important;
    background-attachment: fixed !important;
    color: #F4EFFF !important;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* Base Top Navigation Header (Immediate Night Glassmorphism, Zero Flash) */
header {
    background: rgba(15, 7, 24, 0.88) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
}

header span.font-playfair {
    color: #FFFFFF !important;
}

/* Light Solid Buttons (Fixes White-on-White Text Contrast) */
#tzGoogleSharingBtn,
.btn-solid-light,
.btn-white-solid {
    background-color: #FFFFFF !important;
    color: #111827 !important;
    border: 2px solid #E68B9C !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

#tzGoogleSharingBtn span,
#tzGoogleSharingBtn i,
.btn-solid-light span,
.btn-solid-light i,
.btn-white-solid span,
.btn-white-solid i {
    color: #111827 !important;
    font-weight: 800 !important;
}

#tzGoogleSharingBtn:hover,
.btn-solid-light:hover,
.btn-white-solid:hover {
    background-color: #FDF5F6 !important;
    border-color: #D85C73 !important;
    transform: scale(1.05);
}

/* Typography Utility Classes */
.font-playfair { font-family: 'Playfair Display', serif !important; }
.font-cursive { font-family: 'Great Vibes', cursive !important; }
.font-handwriting { font-family: 'Caveat', cursive !important; }
.font-brush { font-family: 'Alex Brush', cursive !important; }
.font-sans { font-family: 'Inter', sans-serif !important; }

/* Headings Solid Romantic Color System (High Contrast & Regal Velvet Tone) */
h1, h2, h3, h4 {
    color: #FFFFFF !important;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* Custom Color Utilities */
.bg-cream-50 { background-color: var(--bg-cream-50) !important; }
.bg-cream-100 { background-color: var(--bg-cream-100) !important; }
.bg-cream-200 { background-color: var(--bg-cream-200) !important; }

.bg-rosegold-50 { background-color: var(--color-rosegold-50) !important; }
.bg-rosegold-100 { background-color: var(--color-rosegold-100) !important; }
.bg-rosegold-200 { background-color: var(--color-rosegold-200) !important; }
.bg-rosegold-300 { background-color: var(--color-rosegold-300) !important; }
.bg-rosegold-400 { background-color: var(--color-rosegold-400) !important; }
.bg-rosegold-500 { background-color: var(--color-rosegold-500) !important; }
.bg-rosegold-600 { background-color: var(--color-rosegold-600) !important; }
.bg-rosegold-700 { background-color: var(--color-rosegold-700) !important; }
.bg-rosegold-800 { background-color: var(--color-rosegold-800) !important; }

.text-rosegold-400 { color: var(--color-rosegold-400) !important; }
.text-rosegold-500 { color: var(--color-rosegold-500) !important; }
.text-rosegold-600 { color: var(--color-rosegold-600) !important; }
.text-rosegold-700 { color: var(--color-rosegold-700) !important; }
.text-rosegold-800 { color: var(--color-rosegold-800) !important; }
.text-wine-900 { color: #3E0A12 !important; }

.border-rosegold-200 { border-color: var(--color-rosegold-200) !important; }
.border-rosegold-300 { border-color: var(--color-rosegold-300) !important; }
.border-rosegold-400 { border-color: var(--color-rosegold-400) !important; }

/* Rich Metallic Opaque Gradients */
.gradient-text-rosegold {
    color: #4A0E17 !important;
    background: linear-gradient(135deg, #6B1A2B 0%, #9C2E41 50%, #4A0E17 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #4A0E17;
}

.gradient-text-lavender {
    color: #4A2296 !important;
    background: linear-gradient(135deg, #4A2296 0%, #8B1E3F 50%, #6B1A2B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #4A2296;
}

/* Glassmorphism Cards with Ultra-High-End Metallic Velvet Borders */
.glass-card {
    background: rgba(255, 253, 254, 0.96) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid #F0C4CE !important;
    box-shadow: 0 16px 40px -10px rgba(107, 26, 43, 0.12) !important;
}

.glass-card-hover {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.glass-card-hover:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 28px 55px -12px rgba(107, 26, 43, 0.24) !important;
    border-color: #D85C73 !important;
}

/* ==========================================================================
   SOLID HIGH-CONTRAST BUTTON SYSTEM (NO WHITE-ON-WHITE FAILS)
   ========================================================================== */
.btn-romantic-primary {
    background-color: #6B1A2B !important;
    background-image: linear-gradient(135deg, #6B1A2B 0%, #8B1E3F 100%) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    border: 1.5px solid #4A0E17 !important;
    box-shadow: 0 10px 25px rgba(107, 26, 43, 0.35) !important;
}

.btn-romantic-primary span,
.btn-romantic-primary i {
    color: #FFFFFF !important;
}

.btn-romantic-primary:hover {
    background-color: #4A0E17 !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(107, 26, 43, 0.45) !important;
}

.btn-romantic-secondary {
    background-color: #FFFFFF !important;
    border: 2px solid #6B1A2B !important;
    color: #6B1A2B !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 20px rgba(107, 26, 43, 0.12) !important;
}

.btn-romantic-secondary span,
.btn-romantic-secondary i {
    color: #6B1A2B !important;
}

.btn-romantic-secondary:hover {
    background-color: #FFF0F3 !important;
    border-color: #9C2E41 !important;
    transform: translateY(-2px);
}

/* Fail-safe Gift Cover Card Overrides */
#giftCover .w-24 {
    background-color: #6B1A2B !important;
    color: #FFFFFF !important;
}

#giftCover .w-24 i {
    color: #FFFFFF !important;
}

#giftCover button {
    background-color: #6B1A2B !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    box-shadow: 0 12px 30px rgba(107, 26, 43, 0.4) !important;
}

#giftCover button span,
#giftCover button i {
    color: #FFFFFF !important;
}

/* ==========================================================================
   LOCK SCREEN MODAL OVERLAY (HIGH CONTRAST & READABLE STYLING)
   ========================================================================== */
#coupleLockOverlay .glass-card {
    background: #FFFFFF !important;
    border: 2.5px solid #6B1A2B !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5) !important;
}

#coupleLockOverlay .lock-icon-badge {
    background-color: #6B1A2B !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 25px rgba(107, 26, 43, 0.45) !important;
}

#coupleLockOverlay .lock-icon-badge i {
    color: #FFFFFF !important;
}

#coupleLockOverlay input#couplePasscodeInput {
    background-color: #FFF0F3 !important;
    border: 2px solid #D85C73 !important;
    color: #382329 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}

#coupleLockOverlay input#couplePasscodeInput::placeholder {
    color: #8A4856 !important;
    opacity: 1 !important;
}

#coupleLockOverlay button[type="submit"] {
    background: #6B1A2B !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    border: 1px solid #4A0E17 !important;
    box-shadow: 0 10px 25px rgba(107, 26, 43, 0.4) !important;
}

#coupleLockOverlay button[type="submit"] span,
#coupleLockOverlay button[type="submit"] i {
    color: #FFFFFF !important;
}

/* Global Body Atmosphere Vibe Transitions */
body {
    transition: background 1.2s ease-in-out, color 1.2s ease-in-out;
}

body.theme-day {
    background: radial-gradient(circle at 50% 0%, #FFFDFE 0%, #FDF5F6 45%, #F7E4E9 100%) !important;
    background-attachment: fixed !important;
}

body.theme-sunset {
    background: radial-gradient(circle at 50% 0%, #3E0A12 0%, #29060C 45%, #180307 100%) !important;
    background-attachment: fixed !important;
    color: #FFF0F3 !important;
}

body.theme-sunset h1, body.theme-sunset h2, body.theme-sunset h3, body.theme-sunset h4 {
    color: #FFFFFF !important;
}

body.theme-night {
    background: radial-gradient(circle at 50% 0%, #170A24 0%, #0F0518 45%, #07020B 100%) !important;
    background-attachment: fixed !important;
    color: #F4EFFF !important;
}

body.theme-night h1, body.theme-night h2, body.theme-night h3, body.theme-night h4 {
    color: #FFFFFF !important;
}

body.theme-rain {
    background: radial-gradient(circle at 50% 0%, #131F2D 0%, #0D1622 45%, #070B12 100%) !important;
    background-attachment: fixed !important;
    color: #F0F6FF !important;
}

body.theme-rain h1, body.theme-rain h2, body.theme-rain h3, body.theme-rain h4 {
    color: #FFFFFF !important;
}

body.theme-thunder {
    background: radial-gradient(circle at 50% 0%, #0D111A 0%, #090C12 45%, #040508 100%) !important;
    background-attachment: fixed !important;
    color: #ECFDF5 !important;
}

body.theme-thunder h1, body.theme-thunder h2, body.theme-thunder h3, body.theme-thunder h4 {
    color: #FFFFFF !important;
}

body.theme-snow {
    background: radial-gradient(circle at 50% 0%, #1E293B 0%, #0F172A 45%, #090D16 100%) !important;
    background-attachment: fixed !important;
    color: #F8FAFC !important;
}

body.theme-snow h1, body.theme-snow h2, body.theme-snow h3, body.theme-snow h4 {
    color: #FFFFFF !important;
}

body.theme-night #heroSubtitleText,
body.theme-rain #heroSubtitleText,
body.theme-thunder #heroSubtitleText,
body.theme-snow #heroSubtitleText,
body.theme-sunset #heroSubtitleText {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

body.theme-night #heroSubtitleText span,
body.theme-rain #heroSubtitleText span,
body.theme-thunder #heroSubtitleText span,
body.theme-snow #heroSubtitleText span,
body.theme-sunset #heroSubtitleText span {
    color: #F2BDC6 !important;
}

body.theme-night #heroTitleText,
body.theme-rain #heroTitleText,
body.theme-thunder #heroTitleText,
body.theme-snow #heroTitleText,
body.theme-sunset #heroTitleText {
    color: #FFFFFF !important;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
}

body.theme-night #heroPillText,
body.theme-rain #heroPillText,
body.theme-thunder #heroPillText,
body.theme-snow #heroPillText,
body.theme-sunset #heroPillText {
    color: #FFFFFF !important;
}

/* High-Contrast Global Readability Overrides for Dark Atmospheric Themes */
body.theme-night p,
body.theme-rain p,
body.theme-thunder p,
body.theme-snow p,
body.theme-sunset p,
body.theme-night .text-gray-600,
body.theme-night .text-gray-500,
body.theme-night .text-gray-700,
body.theme-night .text-gray-800,
body.theme-rain .text-gray-600,
body.theme-rain .text-gray-500,
body.theme-rain .text-gray-700,
body.theme-rain .text-gray-800,
body.theme-thunder .text-gray-600,
body.theme-thunder .text-gray-500,
body.theme-thunder .text-gray-700,
body.theme-thunder .text-gray-800,
body.theme-snow .text-gray-600,
body.theme-snow .text-gray-500,
body.theme-snow .text-gray-700,
body.theme-snow .text-gray-800,
body.theme-sunset .text-gray-600,
body.theme-sunset .text-gray-500,
body.theme-sunset .text-gray-700,
body.theme-sunset .text-gray-800 {
    color: rgba(255, 255, 255, 0.94) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Dynamic Top Navigation Header Adaptation */
body.theme-night header,
body.theme-rain header,
body.theme-thunder header,
body.theme-snow header,
body.theme-sunset header {
    background: rgba(15, 7, 24, 0.88) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
}

body.theme-night header span.font-playfair,
body.theme-rain header span.font-playfair,
body.theme-thunder header span.font-playfair,
body.theme-snow header span.font-playfair,
body.theme-sunset header span.font-playfair {
    color: #FFFFFF !important;
}

/* Dynamic Footer Adaptation for Dark Themes */
body.theme-night footer,
body.theme-rain footer,
body.theme-thunder footer,
body.theme-snow footer,
body.theme-sunset footer {
    background: rgba(12, 5, 20, 0.95) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
}

body.theme-night footer a,
body.theme-rain footer a,
body.theme-thunder footer a,
body.theme-snow footer a,
body.theme-sunset footer a {
    color: #FFFFFF !important;
}

body.theme-night footer p,
body.theme-rain footer p,
body.theme-thunder footer p,
body.theme-snow footer p,
body.theme-sunset footer p {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Dynamic Bottom Dock Container Adaptation for Dark Themes */
body.theme-night .bottom-dock-container,
body.theme-rain .bottom-dock-container,
body.theme-thunder .bottom-dock-container,
body.theme-snow .bottom-dock-container,
body.theme-sunset .bottom-dock-container {
    background: rgba(18, 9, 30, 0.92) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

body.theme-night .bottom-nav-item,
body.theme-rain .bottom-nav-item,
body.theme-thunder .bottom-nav-item,
body.theme-snow .bottom-nav-item,
body.theme-sunset .bottom-nav-item {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.theme-night .bottom-nav-item:hover,
body.theme-rain .bottom-nav-item:hover,
body.theme-thunder .bottom-nav-item:hover,
body.theme-snow .bottom-nav-item:hover,
body.theme-sunset .bottom-nav-item:hover {
    color: #FFFFFF !important;
}

body.theme-night .bottom-nav-item.active-bottom-nav,
body.theme-rain .bottom-nav-item.active-bottom-nav,
body.theme-thunder .bottom-nav-item.active-bottom-nav,
body.theme-snow .bottom-nav-item.active-bottom-nav,
body.theme-sunset .bottom-nav-item.active-bottom-nav {
    background: linear-gradient(135deg, #B84557 0%, #6B1A2B 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 20px rgba(184, 69, 87, 0.45) !important;
}

/* Glassmorphism Cards Overrides for Dark Themes */
body.theme-night .glass-card,
body.theme-rain .glass-card,
body.theme-thunder .glass-card,
body.theme-snow .glass-card,
body.theme-sunset .glass-card {
    background: rgba(22, 10, 32, 0.92) !important;
    border: 1.5px solid rgba(230, 139, 156, 0.4) !important;
    color: #FFFFFF !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(184, 69, 87, 0.2) !important;
}

body.theme-night .glass-card h1,
body.theme-night .glass-card h2,
body.theme-night .glass-card h3,
body.theme-night .glass-card h4,
body.theme-rain .glass-card h1,
body.theme-rain .glass-card h2,
body.theme-rain .glass-card h3,
body.theme-rain .glass-card h4,
body.theme-thunder .glass-card h1,
body.theme-thunder .glass-card h2,
body.theme-thunder .glass-card h3,
body.theme-thunder .glass-card h4,
body.theme-snow .glass-card h1,
body.theme-snow .glass-card h2,
body.theme-snow .glass-card h3,
body.theme-snow .glass-card h4,
body.theme-sunset .glass-card h1,
body.theme-sunset .glass-card h2,
body.theme-sunset .glass-card h3,
body.theme-sunset .glass-card h4 {
    color: #FFFFFF !important;
}

/* Scoped Weather Cards Atmosphere Vibe */
#timezone-card {
    transition: all 1.2s ease-in-out;
    position: relative;
    overflow: hidden;
}

#timezone-card.theme-day {
    background: linear-gradient(135deg, #FFFDFE 0%, #FFF3F5 50%, #FBE5EB 100%) !important;
    border-color: #F0C4CE !important;
    color: #382329 !important;
}

#timezone-card.theme-day h3 {
    color: #4A0E17 !important;
}

#timezone-card.theme-sunset {
    background: linear-gradient(135deg, #3E0A12 0%, #6B1A2B 50%, #B84557 100%) !important;
    border-color: #E68B9C !important;
    color: #FFF0F3 !important;
}

#timezone-card.theme-sunset h3,
#timezone-card.theme-sunset #tzDistanceMiles,
#timezone-card.theme-sunset #tzShoibClock,
#timezone-card.theme-sunset #tzHerClock {
    color: #FFFFFF !important;
}

#timezone-card.theme-night {
    background: linear-gradient(135deg, #0D0714 0%, #1D0C27 50%, #351342 100%) !important;
    border-color: #C9B2FA !important;
    color: #F6EFFF !important;
}

#timezone-card.theme-night h3,
#timezone-card.theme-night #tzDistanceMiles,
#timezone-card.theme-night #tzShoibClock,
#timezone-card.theme-night #tzHerClock {
    color: #FFFFFF !important;
}

#timezone-card.theme-rain {
    background: linear-gradient(135deg, #111A24 0%, #1D2B3D 50%, #2A3B52 100%) !important;
    border-color: #93C5FD !important;
    color: #F0F6FF !important;
}

#timezone-card.theme-rain h3,
#timezone-card.theme-rain #tzDistanceMiles,
#timezone-card.theme-rain #tzShoibClock,
#timezone-card.theme-rain #tzHerClock {
    color: #FFFFFF !important;
}

#timezone-card.theme-thunder {
    background: linear-gradient(135deg, #0B0E14 0%, #151B26 50%, #222938 100%) !important;
    border-color: #A7F3D0 !important;
    color: #ECFDF5 !important;
    animation: lightning-flash 5s infinite ease-in-out;
}

#timezone-card.theme-thunder h3,
#timezone-card.theme-thunder #tzDistanceMiles,
#timezone-card.theme-thunder #tzShoibClock,
#timezone-card.theme-thunder #tzHerClock {
    color: #FFFFFF !important;
}

#timezone-card.theme-snow {
    background: linear-gradient(135deg, #1E293B 0%, #334155 50%, #475569 100%) !important;
    border-color: #E2E8F0 !important;
    color: #F8FAFC !important;
}

#timezone-card.theme-snow h3,
#timezone-card.theme-snow #tzDistanceMiles,
#timezone-card.theme-snow #tzShoibClock,
#timezone-card.theme-snow #tzHerClock {
    color: #FFFFFF !important;
}

/* Dynamic Inner Card Styling for Scoped Weather Themes */
.tz-inner-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1.5px solid rgba(240, 196, 206, 0.8);
    color: #382329;
    transition: all 0.5s ease-in-out;
}

.tz-inner-card h3 {
    color: #4A0E17 !important;
}

#timezone-card.theme-night .tz-inner-card,
#timezone-card.theme-rain .tz-inner-card,
#timezone-card.theme-thunder .tz-inner-card,
#timezone-card.theme-snow .tz-inner-card,
#timezone-card.theme-sunset .tz-inner-card {
    background: rgba(18, 10, 28, 0.78) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

#timezone-card.theme-night .tz-inner-card h3,
#timezone-card.theme-rain .tz-inner-card h3,
#timezone-card.theme-thunder .tz-inner-card h3,
#timezone-card.theme-snow .tz-inner-card h3,
#timezone-card.theme-sunset .tz-inner-card h3 {
    color: #FFFFFF !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

#timezone-card.theme-night .tz-inner-card p,
#timezone-card.theme-rain .tz-inner-card p,
#timezone-card.theme-thunder .tz-inner-card p,
#timezone-card.theme-snow .tz-inner-card p,
#timezone-card.theme-sunset .tz-inner-card p {
    color: rgba(255, 255, 255, 0.92) !important;
}

#timezone-card.theme-sunset p,
#timezone-card.theme-night p,
#timezone-card.theme-rain p,
#timezone-card.theme-thunder p,
#timezone-card.theme-snow p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Card Atmosphere Layers & Animations */
.card-atmosphere-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 1.5rem;
    z-index: 0;
}

.card-raindrop {
    position: absolute;
    top: -20px;
    width: 1.5px;
    height: 18px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.85));
    border-radius: 9999px;
    animation: card-rain-fall linear infinite;
}

@keyframes card-rain-fall {
    0% { transform: translateY(0); opacity: 0.8; }
    100% { transform: translateY(420px); opacity: 0; }
}

.card-star {
    position: absolute;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 6px #FFFFFF;
    animation: star-twinkle ease-in-out infinite alternate;
}

@keyframes star-twinkle {
    0% { opacity: 0.2; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.3); }
}

.card-snowflake {
    position: absolute;
    top: -15px;
    color: rgba(255, 255, 255, 0.9);
    animation: snowflake-drift linear infinite;
}

@keyframes snowflake-drift {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.9; }
    100% { transform: translateY(400px) rotate(360deg); opacity: 0.1; }
}

.card-lightning-flash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 1.5rem;
    background: rgba(225, 240, 255, 0.05);
    animation: lightning-flash 3.5s ease-in-out infinite;
}

@keyframes lightning-flash {
    0%, 88%, 92%, 100% {
        box-shadow: 0 16px 40px -10px rgba(107, 26, 43, 0.12);
        opacity: 0.2;
    }
    89% {
        box-shadow: 0 0 80px rgba(192, 232, 255, 0.95), inset 0 0 45px rgba(255, 255, 255, 0.7);
        background: rgba(255, 255, 255, 0.25);
        opacity: 1;
        filter: brightness(1.5);
    }
    91% {
        box-shadow: 0 0 100px rgba(255, 255, 255, 1), inset 0 0 60px rgba(255, 255, 255, 0.8);
        background: rgba(255, 255, 255, 0.35);
        opacity: 1;
        filter: brightness(1.7);
    }
}

/* Romantic Section Divider */
.romantic-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin: 3.5rem 0;
    opacity: 0.85;
}

.romantic-divider::before,
.romantic-divider::after {
    content: '';
    height: 1px;
    width: 100px;
    background: linear-gradient(90deg, transparent, #D85C73 50%, transparent);
}

/* Chat Date Divider Line */
.chat-date-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.2rem 0;
    color: #9C2E41;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.chat-date-divider::before,
.chat-date-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(216, 92, 115, 0.4);
}

.chat-date-divider:not(:empty)::before { margin-right: .75em; }
.chat-date-divider:not(:empty)::after { margin-left: .75em; }

/* Parchment Paper Texture */
.parchment-paper {
    background: radial-gradient(circle, #FFFDF9 0%, #FDF6E9 70%, #F5E8D0 100%) !important;
    border: 2.5px solid #C59B6C !important;
    box-shadow: inset 0 0 50px rgba(107, 26, 43, 0.08), 0 24px 60px rgba(0, 0, 0, 0.7) !important;
    position: relative;
}

.parchment-paper::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1.5px dashed rgba(184, 69, 87, 0.45);
    pointer-events: none;
    border-radius: inherit;
}

/* High Contrast Ink Typography for Parchment Paper Letter Reader */
.parchment-paper,
.parchment-paper * {
    text-shadow: none !important;
}

.parchment-paper h1,
.parchment-paper h2,
.parchment-paper h3,
.parchment-paper h4,
.parchment-paper span#activeLetterTitleHeader {
    color: #4A0E17 !important;
    font-weight: 800 !important;
}

.parchment-paper p#longLetterGreeting {
    color: #6B1A2B !important;
    font-weight: 700 !important;
}

.parchment-paper #longLetterBody,
.parchment-paper #longLetterBody p {
    color: #2D080D !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    line-height: 1.85 !important;
}

.parchment-paper .font-cursive,
.parchment-paper p#longLetterSignoff {
    color: #6B1A2B !important;
    font-weight: 800 !important;
}

.mood-pill-btn {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.mood-pill-btn:hover {
    background-color: #6B1A2B !important;
    color: #FFFFFF !important;
    border-color: #E68B9C !important;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 20px rgba(184, 69, 87, 0.4);
}

/* Floating background hearts dynamic canvas layer */
#hearts-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.floating-heart {
    position: absolute;
    bottom: -60px;
    color: rgba(216, 92, 115, 0.65);
    animation: floatUp 14s ease-in-out infinite;
    user-select: none;
    filter: drop-shadow(0 0 10px rgba(216, 92, 115, 0.6));
}

@keyframes floatUp {
    0% {
        transform: translateY(0) rotate(0deg) scale(0.7);
        opacity: 0;
    }
    15% { opacity: 0.85; }
    85% { opacity: 0.85; }
    100% {
        transform: translateY(-110vh) rotate(360deg) scale(1.2);
        opacity: 0;
    }
}

/* Scroll Reveal Animations */
.reveal-element {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.reveal-element.active {
    opacity: 1;
    transform: translateY(0);
}

/* 18 Reasons 3D Flip Card Effect */
.perspective-1000 { perspective: 1000px; }
.flip-card-inner {
    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner,
.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.flip-card-back { transform: rotateY(180deg); }

/* Custom Rose Gold Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #FBF0F3; }
::-webkit-scrollbar-thumb {
    background: #E68B9C;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: #B84557; }

/* Sticky Mini Audio Player Bar */
#stickyAudioBar {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease;
}
#stickyAudioBar.hidden-bar {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
}

/* Animated Flight Arc Line */
.flight-arc-path {
    stroke-dasharray: 8 6;
    animation: flightDashMove 30s linear infinite;
}
@keyframes flightDashMove {
    0% { stroke-dashoffset: 200; }
    100% { stroke-dashoffset: 0; }
}

/* Reunion Boarding Pass Ticket */
.boarding-pass-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF8FA 100%);
    border: 2px dashed #E68B9C;
    position: relative;
    box-shadow: 0 22px 45px -15px rgba(107, 26, 43, 0.18);
}
.ticket-notch-left, .ticket-notch-right {
    width: 24px;
    height: 24px;
    background: #FDF5F6;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}
.ticket-notch-left { left: -13px; border-right: 2px dashed #E68B9C; }
.ticket-notch-right { right: -13px; border-left: 2px dashed #E68B9C; }

.barcode-strip {
    background-image: repeating-linear-gradient(90deg, #382329 0, #382329 2px, transparent 2px, transparent 4px, #382329 4px, #382329 7px);
    height: 42px;
}

/* Mood Selector Buttons */
.mood-pill-btn {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.mood-pill-btn:hover {
    transform: translateY(-2px) scale(1.04);
}
.mood-pill-btn.active {
    background: linear-gradient(135deg, #B84557 0%, #6F41C7 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 22px rgba(184, 69, 87, 0.4) !important;
}

/* Scratch Card Canvas */
.scratch-card-wrapper {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Birthday Gift Interactive Tabs & Modern Souvenir Styles */
.gift-tab-btn {
    transition: all 0.3s ease;
    border: 1px solid rgba(230, 139, 156, 0.3);
}
.gift-tab-btn.active {
    background: linear-gradient(135deg, var(--color-rosegold-600) 0%, var(--color-rosegold-800) 100%);
    color: #FFFFFF !important;
    box-shadow: 0 10px 20px -5px rgba(107, 26, 43, 0.3);
    border-color: transparent;
}

.ticket-3d-wrapper {
    perspective: 1000px;
}
.ticket-3d-card {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    transform-style: preserve-3d;
}
.ticket-3d-card:hover {
    box-shadow: 0 30px 60px -12px rgba(107, 26, 43, 0.25);
}

.gold-certificate-border {
    background: linear-gradient(135deg, #FFF9EA 0%, #FFFFFF 50%, #FFF4E6 100%);
    border: 4px double #C59B6C;
    box-shadow: 0 15px 35px rgba(197, 155, 108, 0.2);
}

.ribbon-badge {
    background: linear-gradient(135deg, #D4AF37 0%, #AA771C 100%);
    color: #FFF;
    box-shadow: 0 4px 12px rgba(170, 119, 28, 0.4);
}

/* Ticket Souvenir Print Optimization */
@media print {
    body * {
        visibility: hidden;
    }
    #printSouvenirArea, #printSouvenirArea * {
        visibility: visible;
    }
    #printSouvenirArea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 20px;
        box-shadow: none !important;
    }
    .no-print {
        display: none !important;
    }
}

/* Floating Bottom Dock Navigation Engine */
.bottom-dock-container {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(230, 139, 156, 0.45);
    box-shadow: 0 20px 40px -10px rgba(107, 26, 43, 0.25);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bottom-nav-item {
    transition: all 0.25s ease;
    position: relative;
    color: #4A0E17;
}

.bottom-nav-item:hover {
    transform: translateY(-2px);
    color: #9C2E41;
}

.bottom-nav-item.active-bottom-nav {
    background: linear-gradient(135deg, var(--color-rosegold-600) 0%, var(--color-rosegold-800) 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 18px rgba(156, 46, 65, 0.35) !important;
}

.bottom-nav-item.active-bottom-nav i {
    color: #FFFFFF !important;
}

.bottom-nav-dot {
    width: 4px;
    height: 4px;
    background-color: #E68B9C;
    border-radius: 50%;
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.bottom-nav-item.active-bottom-nav .bottom-nav-dot {
    opacity: 1;
    background-color: #FFFFFF;
}

.more-nav-drawer {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Page Content Bottom Clearance for Bottom Dock */
body {
    padding-bottom: 5rem !important;
}

/* ==========================================================================
   UNIFIED LOVE ACTION HUB: REACTION CARDS, CHIPS, & FLOATING ALERTS
   ========================================================================== */
.love-reaction-card {
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease, background-color 0.2s ease;
}

.love-reaction-card:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 12px 25px -5px rgba(225, 29, 72, 0.25);
}

.love-reaction-card:active {
    transform: scale(0.96);
}

.love-preset-chip {
    transition: all 0.2s ease;
}

.love-preset-chip:hover {
    transform: scale(1.05);
    background-color: rgba(244, 63, 94, 0.15);
    border-color: rgba(244, 63, 94, 0.4);
}

@keyframes loveNoteSlideIn {
    0% { transform: translate(-50%, -20px) scale(0.9); opacity: 0; }
    100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}

.animate-love-note-in {
    animation: loveNoteSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Sticky Mini Audio Player Bar Visibility & Animations */
#stickyAudioBar {
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hidden-bar {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, 25px) scale(0.92) !important;
}

/* Chat Date Divider Styling */
.chat-date-divider {
    text-align: center;
    margin: 1.25rem 0;
    position: relative;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9C2E41;
}

.chat-date-divider::before {
    content: '';
    display: inline-block;
    padding: 0.25rem 0.85rem;
    background: rgba(249, 226, 230, 0.9);
    border: 1px solid rgba(230, 139, 156, 0.6);
    border-radius: 9999px;
    box-shadow: 0 2px 6px rgba(107, 26, 43, 0.08);
}

/* Custom Smooth Scrollbar for Chat & Modals */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(248, 236, 239, 0.5);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #E68B9C;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9C2E41;
}

/* Floating Emoji Particle Animation for Live Reactions */
@keyframes floatUpAndFade {
    0% {
        transform: translateY(0) scale(0.6) rotate(0deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
        transform: translateY(-40px) scale(1.3) rotate(-12deg);
    }
    100% {
        transform: translateY(-280px) scale(1.5) rotate(18deg);
        opacity: 0;
    }
}

.animate-float-emoji {
    animation: floatUpAndFade 2.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Vinyl Player Slow Spin Animation */
@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin-slow {
    animation: spinSlow 12s linear infinite !important;
}
.animate-spin-paused {
    animation-play-state: paused !important;
}

/* Ambient Glow Orbs */
@keyframes floatGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.45; }
    50% { transform: translate(-50%, -45%) scale(1.15); opacity: 0.75; }
}
.animate-pulse-glow {
    animation: floatGlow 6s ease-in-out infinite !important;
}

/* Subtle Hover Lift for Cards */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(107, 26, 43, 0.3) !important;
}

/* Envelope Flip Animation for Letters */
.envelope-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}
.envelope-card:hover {
    transform: translateY(-6px) rotate(-1deg);
    box-shadow: 0 25px 50px rgba(107, 26, 43, 0.35) !important;
}