/* src/css/eventDetails.css (FINAL FIXED VERSION: NUDE THEME) */

/* --- 1. CONTAINER UTAMA (KARTU) --- */
.event-details {
    position: relative;
    z-index: 2;
    
    /* --- THEME CHANGE --- */
    /* Warna Dasar: Putih Gading */
    background-color: var(--card-bg-color) !important; 
    border: 1px solid var(--border-color) !important;
    background-image: url('../assets/images/bg-galeri.webp');

    /* Agar gambar memenuhi seluruh area panel kanan dari atas ke bawah */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Padding Besar untuk memberi ruang ornamen */
    padding: 4rem 1.5rem 4rem 1.5rem; 
    
    margin: 4rem 0; 
    border-radius: 20px;
    
    /* Shadow Coklat Lembut */
    box-shadow: 0 15px 40px var(--shadow-color) !important;
    
    text-align: center;
    color: var(--main-text-color);
    opacity: 1;
    pointer-events: auto;
    overflow: hidden;
}

/* --- 2. ORNAMEN DEKORATIF --- */
/* Ornamen Atas */
.event-details::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 250px;
    background-image: url('../assets/images/ornamen-event-top2.webp'); 
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    z-index: 0; 
    pointer-events: none;
    opacity: 0.2; /* Disesuaikan untuk background terang */
}

/* Ornamen Bawah */
.event-details::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 250px;
    background-image: url('../assets/images/ornamen-event-bottom2.webp'); 
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom center;
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
}

/* Pastikan semua konten teks berada di atas ornamen */
.headline-container,
.event-details h3,
.flip-clock-container,
.live-calendar-wrapper,
.calendar-button {
    position: relative;
    z-index: 1;
}

/* --- 3. HEADLINE ANIMATION --- */
.headline-container {
    perspective: 400px;
    height: 3rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-details h2.animated-headline {
    font-size: 2rem;
    font-family: var(--sacramento);
    font-weight: 600;
    transform-origin: center 70%;
    transform: rotateX(0deg);
    opacity: 1;
    transition: transform 0.5s ease, opacity 0.5s ease;
    
    /* --- THEME CHANGE --- */
    color: var(--heading-text-color) !important; /* Coklat Bata Pudar */
}

.event-details h2.animated-headline.flipping-out {
    transform: rotateX(-90deg);
    opacity: 0;
}

.event-details h3 {
    font-weight: 500;
    margin-bottom: 2rem;
    font-size: 1.2rem;
    color: var(--main-text-color);
}

/* --- 4. COUNTDOWN (FLIP CLOCK FIXED) --- */
.flip-clock-container {
    display: flex;
    gap: 0.8rem; 
    justify-content: center;
    margin: 2rem 0;
}

.flip-clock {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flip-clock-label {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--accent-color); /* Warna label Mocca */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 1. CONTAINER KARTU */
.flip-card {
    position: relative;
    display: block; 
    font-size: 2.5rem;
    font-weight: 700;
    width: 3.6rem; 
    height: 4rem; 
    line-height: 4rem !important; 
    
    /* --- THEME CHANGE --- */
    /* Warna Angka: Coklat Heading */
    color: var(--heading-text-color); 
    
    text-align: center;
    padding: 0 !important; 
    background: transparent;
    border-radius: 0.4rem;
    
    /* Shadow yang lebih lembut */
    box-shadow: 0 4px 10px var(--shadow-color); 
}

/* 2. POTONGAN ATAS & BAWAH */
.top, .bottom, .top-flip, .bottom-flip {
    width: 100%;
    height: 50% !important; 
    overflow: hidden;       
    display: block !important;
    padding: 0 !important;  
    margin: 0 !important;
    box-sizing: border-box;
    
    /* --- THEME CHANGE --- */
    /* Background Kartu Flip: Krem Sedikit Lebih Gelap dari Card Background */
    /* Agar terlihat di atas background putih gading */
    background-color: var(--main-bg-color); 
    /* Atau bisa pakai warna solid: #EFEBE9 */
    
    backdrop-filter: blur(0px); /* Blur tidak diperlukan di solid color */
}

/* --- BAGIAN ATAS --- */
.top, .top-flip {
    border-radius: 0.4rem 0.4rem 0 0; 
    
    /* Garis tengah pemisah yang halus */
    border-bottom: 1px solid rgba(141, 110, 99, 0.2); 
    
    line-height: 4rem !important; 
}

/* --- BAGIAN BAWAH --- */
.bottom, .bottom-flip {
    border-radius: 0 0 0.4rem 0.4rem; 
    line-height: 0 !important; 
    background-color: var(--main-bg-color); 
}

/* --- ANIMASI FLIP (TIDAK BERUBAH) --- */
.top-flip {
    position: absolute; top: 0; left: 0;
    transform-origin: bottom;
    animation: flip-top 0.3s ease-in;
}

.bottom-flip {
    position: absolute; bottom: 0; left: 0;
    transform-origin: top;
    animation: flip-bottom 0.3s ease-out 0.3s; 
    transform: rotateX(90deg);
}

@keyframes flip-top { 100% { transform: rotateX(90deg); } }
@keyframes flip-bottom { 100% { transform: rotateX(0deg); } }


/* --- 5. LIVE CALENDAR (NUDE STYLE) --- */
.live-calendar-wrapper {
    margin-top: 2.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    border-radius: 15px;
    
    /* --- THEME CHANGE --- */
    /* Background Kalender: Putih/Krem Transparan */
    background: #ffcfd5a1; /* Menggunakan basis var(--main-bg-color) */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    
    box-shadow: 0 5px 20px var(--shadow-color);
}

.cal-header-month {
    font-family: var(--sacramento);
    font-size: 1.8rem;
    color: var(--heading-text-color);
    margin-bottom: 1rem;
    font-weight: 500;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
    justify-items: center;
}

.cal-day-name {
    font-size: 0.8rem;
    
    /* Nama Hari (Sen, Sel, Rab) warna Aksen */
    color: var(--accent-color);
    
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cal-date {
    font-size: 0.9rem;
    
    /* Tanggal Biasa warna Coklat Tua */
    color: var(--main-text-color);
    
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.cal-date.active-date {
    /* Tanggal Aktif: Background Coklat Elegan, Teks Putih */
    color: var(--button-primary-text);
    font-weight: bold;
    background-color: var(--button-primary-bg);
    
    box-shadow: 0 0 10px rgba(109, 76, 65, 0.4);
    animation: pulse-date 2s infinite;
}

@keyframes pulse-date {
    0% { box-shadow: 0 0 0 0 rgba(109, 76, 65, 0.5); }
    70% { box-shadow: 0 0 0 6px rgba(109, 76, 65, 0); }
    100% { box-shadow: 0 0 0 0 rgba(109, 76, 65, 0); }
}


/* --- 6. TOMBOL PINTAR (SAVE DATE) --- */
.calendar-button {
    margin-top: 1rem;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
    
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    
    /* --- THEME CHANGE --- */
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    border: 1px solid var(--button-primary-bg);
    
    box-shadow: 0 4px 10px var(--shadow-color);
    transition: all 0.3s ease;
}

.calendar-button i {
    font-size: 1.3rem;
    color: var(--button-primary-text); /* Icon putih */
}

.calendar-button:hover {
    transform: translateY(-3px);
    
    /* Hover jadi warna Heading (Lebih terang/pudar) */
    background: var(--heading-text-color);
    border-color: var(--heading-text-color);
    color: #fff;
    box-shadow: 0 8px 20px var(--shadow-color);
}