@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #ddd1c1;
    display: flex;
    justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    color: #4a3b32;
    min-height: 100vh;
}

#mobile-wrapper {
    width: 100%;
    max-width: 440px;
    position: relative;
    overflow-x: hidden;
    box-shadow: 0 0 40px rgba(0,0,0,0.4);
}

.section-title {
    font-family: 'Great Vibes', cursive;
    font-size: 3.5rem; 
    color: #627c67; 
    text-align: center;
    font-weight: normal;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05); 
    margin-top: 10px;
}

/* ==================================
   1. LOADING OVERLAY
   ================================== */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ddd1c1;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; 
    animation: fadeOutLoader 2s ease-in-out forwards;
    animation-delay: 0.5s; 
}

.loader-content {
    text-align: center;
}

.loader-heart {
    width: 60px;
    height: auto;
    margin-bottom: 15px;
    animation: heartbeat 1.2s infinite;
}

#page-loader p {
    font-family: 'Great Vibes', cursive;
    font-size: 2.5rem;
    color: #9B7300; 
}

@keyframes fadeOutLoader {
    0% { opacity: 1; pointer-events: all; }
    80% { opacity: 1; pointer-events: all; }
    100% { opacity: 0; display: none; }
}

@keyframes heartbeat {
    0% { transform: scale(1); }
    15% { transform: scale(1.15); }
    30% { transform: scale(1); }
    45% { transform: scale(1.15); }
    60% { transform: scale(1); }
    100% { transform: scale(1); }
}

/* ==================================
   SCATTERED EDGE FLOWERS
   ================================== */
.edge-flower {
    position: absolute;
    z-index: 0; 
    pointer-events: none; 
    max-width: 90px; 
    height: auto;
    opacity: 0.85; 
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.05));
}

.flower-left-1 { top: 25%; left: -30px; transform: rotate(25deg); }
.flower-left-2 { top: 45%; left: -20px; transform: rotate(65deg); }
.flower-left-3 { top: 78%; left: -35px; transform: rotate(-15deg); }
.flower-right-1 { top: 32%; right: -25px; transform: rotate(-40deg); }
.flower-right-2 { top: 60%; right: -30px; transform: rotate(15deg); }
.flower-right-3 { top: 88%; right: -20px; transform: rotate(-60deg); }
.flower-left-4 { top: 55%; left: -25px; transform: rotate(-20deg); }
.flower-left-5 { top: 80%; right: -20px; transform: rotate(40deg); }
.flower-right-4 { top: 70%; right: -25px; transform: rotate(-180deg); }

/* ==================================
   HEAVY ANIMATIONS
   ================================== */
.anim-slide-up { opacity: 0; transform: translateY(50px); transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.anim-slide-left { opacity: 0; transform: translateX(50px); transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.anim-slide-right { opacity: 0; transform: translateX(-50px); transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.anim-scale-up { opacity: 0; transform: scale(0.8); transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.anim-zoom-in { opacity: 0; transform: scale(0.5) rotate(-5deg); transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1); }

.is-visible { opacity: 1 !important; transform: translate(0) scale(1) rotate(0) !important; }

[style*="--delay"] { transition-delay: var(--delay); }

@keyframes popIn {
    0% { opacity: 0; transform: translate(-50%, -40%) scale(0.8); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes fadeBounce {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(15px); opacity: 1; }
}

.fade-bounce { animation: fadeBounce 2s infinite; }

/* ==================================
   HERO SECTION (FIXED ZOOM)
   ================================== */
.hero-section {
      position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('../img/1773043537107.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* HERO FALLING PETALS (FIXED) */
#falling-petals {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    z-index: 5; 
    overflow: hidden;
}

.petal {
    position: absolute;
    background: #fff;
    border-radius: 15px 0 15px 0;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    animation: fall linear infinite;
}

@keyframes fall {
    0% { top: -10%; transform: translateX(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { top: 110%; transform: translateX(50px) rotate(360deg); opacity: 0; }
}

.hero-text-container {
     position: absolute;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;
    animation: popIn 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    padding-top: 20px; 
}

.hero-text-container .intro {
    font-size: 1.2rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #627c67;
    margin-bottom: 10px;
}

.names-img {
    width: 90%;
    max-width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 15px auto;
    filter: drop-shadow(1px 1px 3px rgba(255,255,255,0.8));
}

.hero-text-container .date {
    font-size: 1.3rem;
    letter-spacing: 3px;
    font-weight: 600;
    color: #4a3b32;
    border-top: 1px solid rgba(141, 164, 148, 0.5);
    border-bottom: 1px solid rgba(141, 164, 148, 0.5);
    display: inline-block;
    padding: 5px 15px;
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 2rem;
    color: #9B7300; 
}

/* ==================================
   COUNTDOWN SECTION
   ================================== */
.countdown-section {
    background: #ddd1c1;
}

.countdown-container {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.time-box {
   flex: 1;
    padding: 20px 10px;
    text-align: center;
    background-image: url(../img/cdbg.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.time-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 600;
    color: #9B7300; 
    line-height: 1;
    margin-bottom: 5px;
}

.time-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #627c67;
    font-weight: 600;
}

/* ==================================
   PICTURES SECTION & SEPARATORS
   ================================== */
.pictures-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}

.sep, .sep2 {
    width: 80%;
    height: 40px;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    margin: auto;
}
.sep { background-image: url(../img/sep.png); }
.sep2 { background-image: url(../img/sep2.png); }

.photos-wrapper {
    display: flex;
    justify-content: center;
    align-items: center; 
    gap: 15px;
    width: 100%;
    padding: 10px 20px;
}

.photo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bride-groom-photo {
    width: 170px; 
    height: 170px; 
    object-fit: cover;
    border-radius: 4px;
}

.photo-name {
    font-family: 'Great Vibes', cursive;
    font-size: 2.2rem;
    color: #627c67;
    margin-top: 10px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}

.ampersand {
    font-family: 'Great Vibes', cursive;
    font-size: 3.5rem;
    color: #9B7300; 
    margin-top: -30px; 
}

/* ==================================
   ROMANTIC SECTION
   ================================== */
.romantic-section {
    padding: 10px 20px 60px;
    text-align: center;
    background-image: url(../img/romantic-bg.png);
    background-size: 100%;
    height: 350px;
    background-position: center;
}

.romantic-content {
    position: relative;
    padding: 60px 50px 30px;
    margin-top: 0;
}

.romantic-content p {
    font-size: 1.3rem;
    line-height: 1.5;
    color: #4a3b32;
    font-style: italic;
    position: relative;
    z-index: 5;
}

/* ==================================
   LOCATION SECTION
   ================================== */
.location-section {
    padding: 20px 20px 20px;
}

.location-card {
    text-align: center;
}

.location-card h3 {
    font-size: 1.8rem;
    color: #4a3b32;
    margin-bottom: 5px;
}

.address {
    font-size: 1.2rem;
    color: #7a6a5f;
    margin-bottom: 20px;
    line-height: 1.5;
}

.details {
    margin-bottom: 30px; 
}

/* ==================================
   TIMELINE SECTION
   ================================== */
.plan-section {
    padding: 20px;
    background: transparent; 
}

.timeline {
    position: relative;
    padding-left: 40px;
    margin-top: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #9B7300; 
}

/* 5. TIMELINE CAPS (PNGS) */
.timeline-cap {
   position: absolute;
    left: -30px;
    width: 70px;
    height: auto;
    z-index: 3;
    top: 430px;
}
.cap-top { top: -30px; }
.cap-bottom { bottom: -50px; }

.timeline-item {
    position: relative;
    margin-bottom: 40px;
}

/* 5. RESTORED ICON SIZE TO 50PX */
.timeline-icon-wrapper {
    position: absolute;
    left: -45px; 
    top: 0;
    width: 50px;
    height: 50px;
    background: transparent; 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.timeline-icon-img {
    width: 100%;
    height: auto;
    display: block;
}

.timeline-content {
    background: transparent;
    padding: 0 0 0 10px;
    border: none;
    box-shadow: none;
}

.event-time {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: #9B7300; 
    margin-bottom: 2px;
    line-height: 1;
}

.timeline-content h4 {
    color: #627c67; 
    font-size: 1.8rem;
    margin-bottom: 5px;
    line-height: 1.1;
}

.timeline-content p {
    font-size: 1.2rem;
    color: #4a3b32;
    font-style: italic;
    margin: 0;
}

/* ==================================
   RSVP SECTION
   ================================== */
.rsvp-section {
    padding: 0; 
    background-color: transparent;
}

.rsvp-card {
    position: relative;
    background-image: url(../img/rsvp.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 130%;
    min-height: 650px;
    margin: 0 -60px 0;
    padding: 100px 110px 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 750px;
}

.rsvp-subtitle {
    text-align: center;
    color: #7a6a5f;
    font-style: italic;
    width: 100%;
    margin-bottom: 10px;
}

#rsvp-form { width: 100%; }

.form-group { margin-bottom: 20px; }

input[type="text"], input[type="number"] {
    width: 100%;
    padding: 15px;
    border: 1px solid #d4c2a4;
    border-radius: 10px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    background: #fbf9f6;
    outline: none;
}

input:focus {
    border-color: #9B7300; 
    box-shadow: 0 0 0 3px rgba(155, 115, 0, 0.2); 
}

.radio-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 1.2rem;
    user-select: none;
}
.radio-container input { position: absolute; opacity: 0; cursor: pointer; }
.checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: #fbf9f6;
    border: 1px solid #d4c2a4;
    border-radius: 50%;
}
.radio-container:hover input ~ .checkmark { background-color: #eee; }
.radio-container input:checked ~ .checkmark { background-color: #9B7300; border-color: #9B7300; }
.checkmark:after { content: ""; position: absolute; display: none; }
.radio-container input:checked ~ .checkmark:after { display: block; }
.radio-container .checkmark:after {
    top: 6px; left: 6px; width: 8px; height: 8px;
    border-radius: 50%; background: white;
}

/* ==================================
   ELEGANT BUTTONS
   ================================== */
.btn-primary, .btn-whatsapp {
    position: relative;
    display: block;
    width: 85%;
    margin: 10px auto; 
    padding: 16px 20px;
    background: linear-gradient(45deg, #C7B494, #A89676); 
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 1.2rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(199, 180, 148, 0.4); 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:active, .btn-whatsapp:active {
    transform: translateY(2px);
    box-shadow: 0 2px 8px rgba(199, 180, 148, 0.3);
}

.shine {
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    animation: sweep 3s infinite;
}
@keyframes sweep { 0% { left: -100%; } 20%, 100% { left: 200%; } }

/* ==================================
   TRANSPARENT DELAY MESSAGE
   ================================== */
.status-message {
    display: none;
    position: absolute; 
    top: 50%;
    left: 50%;
    background: transparent; 
    text-align: center;
    font-size: 1.5rem;
    font-family: 'Cormorant Garamond', serif;
    color: #627c67; 
    margin: 0;
    animation: popIn 0.5s forwards; 
    width: 80%;
    font-style: italic;
    z-index: 10;
}

.status-heart {
    width: 40px;
    height: auto;
    margin: 0 auto 10px auto; 
    display: block;
    animation: heartbeat 1.2s infinite;
}

.loading-spinner {
    display: block;
    margin: 15px auto 0 auto; 
    width: 30px; height: 30px;
    border: 3px solid rgba(199, 180, 148, 0.3); 
    border-radius: 50%;
    border-top-color: #9B7300; 
    animation: spin 1s ease-in-out infinite;
}

/* ==================================
   MUSIC PLAYER BUTTON
   ================================== */
.music-toggle-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgb(227 219 208);
    background-image: url(../img/music.png);
    background-size: 60px auto;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #d4c2a4;
    z-index: 1000;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

/* Adds a soft press effect when tapped */
.music-toggle-btn:active {
    transform: scale(0.92);
}

/* Hides the old HTML SVGs completely so they don't overlap the PNG */
.music-toggle-btn svg { 
    display: none !important; 
}

/* The Pulse Animation */
@keyframes musicPulse {
    0% { transform: scale(1); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
    50% { transform: scale(1.10); box-shadow: 0 8px 25px rgba(155, 115, 0, 0.5); }
    100% { transform: scale(1); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
}

/* Applied dynamically by JS when audio is playing */
.music-toggle-btn.playing {
    animation: musicPulse 1.5s infinite ease-in-out !important;
    border-color: #9B7300; 
}