/* --- UNIVERSAL RESET (WAJIB ADA SUPAYA TAK TERKELUAR SKRIN) --- */
* {
    box-sizing: border-box; /* Kunci saiz supaya padding tak buat kotak jadi lebar */
}

:root {
    --primary-white: #FFFFFF;
    --sky-blue: #A2D9FF;
    --deep-blue: #5B9BD5;
    --soft-blue-bg: #F0F8FF;
    --text-dark: #33475b;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--soft-blue-bg); 
    color: var(--text-dark);
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Halang skrin goyang ke kiri/kanan */
}

/* --- 1. LOCK SCREEN --- */
#lock-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg, #ffffff 0%, #a2d9ff 100%); 
    display: flex; flex-direction: column;
    justify-content: center; align-items: center; z-index: 9999;
    transition: transform 1.2s cubic-bezier(0.85, 0, 0.15, 1);
}

#lock-screen.buka { transform: translateY(-110%); }

.passport-container { text-align: center; width: 90%; max-width: 300px; position: relative; }

.passport-cover { width: 100%; height: auto; filter: drop-shadow(0 10px 15px rgba(162, 217, 255, 0.4)); }

.btn-open {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--deep-blue);
    border: 1px solid var(--sky-blue);
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    position: absolute; bottom: 10px; left: 50%;
    transform: translateX(-50%);
}

/* --- 2. MAIN CONTENT --- */
#main-content { display: none; width: 100%; }
#main-content.buka { display: block; }

.main-wrapper {
    width: 90%;
    max-width: 480px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-bottom: 50px;
}

/* GAYA KAD */
.card {
    background: white;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(162, 217, 255, 0.15); 
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 120px;
}

h1, h2, h3 { color: var(--deep-blue); margin-top: 0; }

/* FIX GRID/ROW */
.row, .top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%;
}

/* GALERI */
.swiper { width: 100%; height: 350px; border-radius: 10px; background: #ffffff; }
.swiper-slide img { width: 100%; height: 100%; object-fit: contain; background-color: #ffffff; }

/* --- 3. COUNTING DAYS (SEBARIS & KEMAS) --- */
.countdown-timer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    margin-top: 10px;
}

.countdown-timer div {
    display: flex; 
    flex-direction: row;
    align-items: baseline;
    font-size: 0.65rem;
    color: var(--text-dark);
    gap: 2px;
}

.countdown-timer span {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--deep-blue);
}

/* --- 4. FIX POP-UP MODALS (PENYELAMAT) --- */
/* --- FIX POP-UP TEGAR (FORCED CENTER) --- */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Guna viewport width */
    height: 100vh; /* Guna viewport height */
    background-color: rgba(51, 71, 91, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: none; /* Kita guna display flex masa 'tunjuk' */
    justify-content: center;
    align-items: center;
    padding: 15px; /* Benteng tepi skrin */
    box-sizing: border-box;
}

/* Guna class ni bila modal dibuka */
.modal-overlay.tunjuk {
    display: flex !important; 
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: #FFFFFF;
    padding: 25px;
    border-radius: 20px;
    width: 100% !important; /* Paksa ikut lebar skrin */
    max-width: 380px;      /* Jangan lebih lebar dari kotak main-wrapper */
    position: relative;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    border: 1.5px solid var(--sky-blue);
    
    /* PENTING: Halang terkeluar skrin */
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    
    max-height: 85vh; /* Elak terkeluar bawah skrin phone */
    overflow-y: auto; /* Boleh scroll dalam pop-up */
}
/* --- TAMBAHAN BARU: RSVP & CONTACT --- */
textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid var(--sky-blue); 
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    resize: none;
    background-color: #fcfdfe;
}

.contact-entry {
    padding: 10px;
    background: #f9fcff;
    border-radius: 15px;
}

.btn-icon {
    font-size: 2rem;
    text-decoration: none;
    transition: transform 0.2s;
}

/* Untuk skrin phone yang sangat kecil */
@media screen and (max-width: 360px) {
    .modal-content {
        padding: 20px 15px;
    }
}

.close-btn {
    position: absolute;
    top: 10px; right: 15px;
    font-size: 1.8rem;
    color: var(--sky-blue);
    cursor: pointer;
    z-index: 10;
}

/* --- 5. FORM & BUTTONS --- */
input, textarea, select {
    width: 100%; padding: 12px; margin-bottom: 12px;
    border: 1px solid var(--sky-blue); 
    border-radius: 12px;
    font-size: 1rem;
}

.btn {
    background: var(--sky-blue);
    color: white; border: none; padding: 14px; width: 100%;
    border-radius: 25px; font-weight: bold; cursor: pointer;
    text-decoration: none; display: block; text-align: center;
}

.ucapan-card {
    background-color: white !important;
    border: none !important;
    padding: 30px 20px !important;
    box-shadow: 0 5px 15px rgba(162, 217, 255, 0.15);
}

/* --- 6. KHAS UNTUK TELEFON (FINAL TOUCH) --- */
@media (max-width: 480px) {
    .main-wrapper { gap: 10px; margin: 15px auto; }
    
    .card { padding: 15px 5px !important; min-height: 110px; }
    
    .card h2, .card h3 { font-size: 0.85rem !important; }
    
    .countdown-timer { gap: 4px !important; }
    
    .countdown-timer span { font-size: 1.1rem !important; }
    
    .countdown-timer div { font-size: 0.55rem !important; }

    .modal-content {
        padding: 20px 15px; /* Kecilkan sikit padding dalam modal */
    }
}