/* --- VARIABLE DEFAULTS (Dippin' Dots Blue/Pink) --- */
:root {
    /* Hard-coded fallbacks if JS fails */
    --theme-primary: #00A3E0; 
    --theme-accent: #E4007B;
    --theme-bg: #f8f9fa;
    --dark: #2d3436;
}

/* Force the date-box to use the primary color */
.date-box { 
    background-color: var(--theme-primary) !important; 
    color: white !important;
    padding: 15px;
    border-radius: 12px;
    display: inline-block;
    min-width: 80px;
}

/* --- RESET & GLOBAL --- */
* { box-sizing: border-box; }
body { 
    margin: 0; 
    font-family: 'Quicksand', sans-serif; 
    background-color: var(--theme-bg); 
    color: var(--dark);
    line-height: 1.6;
    transition: background-color 0.5s ease; /* Smooth holiday transitions */
}

/* --- NAVIGATION --- */
nav { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 8%; 
    background: var(--white); 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
}
.logo { font-weight: 700; font-size: 1.6rem; color: var(--theme-primary); text-decoration: none; }
.nav-links a { text-decoration: none; color: var(--dark); margin-left: 20px; font-weight: 600; transition: 0.3s; }
.nav-links a:hover { color: var(--theme-accent); }

/* --- HERO & SECTIONS --- */
.hero { 
    height: 70vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    color: var(--white); 
}

.content-wrapper { padding: 80px 10%; max-width: 1200px; margin: 0 auto; }

/* --- CARDS --- */
.card { 
    background: var(--white); 
    padding: 35px; 
    border-radius: 25px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); 
    transition: 0.3s transform; 
}
.card:hover { transform: translateY(-5px); }

/* --- BUTTONS --- */
.btn { 
    padding: 14px 35px; 
    border-radius: 50px; 
    text-decoration: none; 
    font-weight: 700; 
    display: inline-block; 
    border: none;
    cursor: pointer;
    transition: 0.3s;
}
.btn-blue { background: var(--theme-primary); color: var(--white); }
.btn-blue:hover { opacity: 0.9; transform: scale(1.05); }

/* --- PROMO & COUNTDOWN --- */
.promo-bar { 
    background: var(--theme-accent); 
    color: var(--white); 
    text-align: center; 
    padding: 10px; 
    font-weight: 700; 
    font-size: 0.9rem; 
}

.countdown-container {
    background: var(--theme-primary);
    color: var(--white);
    padding: 40px 10%;
    text-align: center;
}

#timer {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    font-weight: 700;
}

.time-box {
    background: rgba(255, 255, 255, 0.2);
    padding: 15px;
    border-radius: 15px;
    min-width: 90px;
    font-size: 2rem;
}
.time-label { display: block; font-size: 0.8rem; text-transform: uppercase; margin-top: 5px; }

/* --- HOLIDAY SECTION --- */
#holiday-feature {
    background: var(--white);
}
.holiday-flex img {
    border: 5px solid var(--theme-accent);
}

/* --- FOOTER --- */
footer { 
    background: #1a1a1a; 
    color: #888; 
    padding: 60px 10%; 
    text-align: center; 
}

/* --- EVENT SECTION STYLES --- */
.event-item { 
    display: flex; 
    align-items: center; 
    border-bottom: 1px solid #ddd; 
    padding: 25px 0; 
}

.date-box { 
    background: var(--theme-primary); 
    color: white; 
    padding: 15px; 
    border-radius: 15px; 
    text-align: center; 
    min-width: 85px; 
    margin-right: 25px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.date-box span { 
    display: block; 
    font-size: 1.8rem; 
    font-weight: 700; 
    line-height: 1;
}

.event-info h3 { 
    margin: 0 0 5px 0; 
    color: var(--dark); 
}

.event-info p { 
    margin: 0; 
    color: #666; 
    font-size: 0.95rem; 
}

.form-wrapper {
    display: flex;          /* Enables Flexbox */
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    padding: 60px 20px;      /* Adds space so it doesn't touch screen edges */
    min-height: 80vh;        /* Takes up most of the vertical screen */
    background-color: var(--theme-bg); /* Uses your soft gray background */
}

/* Ensure the container doesn't get too wide on giant monitors */
.form-container {
    width: 100%;
    max-width: 700px;        /* Limits width for readability */
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    border-top: 8px solid var(--theme-primary);
    transition: transform 0.3s ease;
}

/* Hover effect to make the centered card feel interactive */
.form-container:hover {
    transform: translateY(-5px);
}