:root{--color-primary:#400b24;--color-primary-light:#6c123c;--color-gold:#cea35b;--color-dominant:#966f2d;--color-white:#ffffff;--color-neutral:#f2f2f2;--font-heading:'Playfair Display',serif;--font-script:'Great Vibes',cursive;--font-body:'Montserrat',sans-serif}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--color-neutral);color:#333;overflow-x:hidden;line-height:1.6}#loading-screen,#envelope-opener{position:fixed;top:0;left:0;width:100%;height:100vh;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%);display:flex;justify-content:center;align-items:center;z-index:9999;flex-direction:column;transition:opacity .5s}#loading-screen.fade-out,#envelope-opener.fade-out{opacity:0;pointer-events:none}.wax-seal,.seal{width:120px;height:120px;background:var(--color-gold);border-radius:50%;display:flex;justify-content:center;align-items:center;font-family:var(--font-script);font-size:3rem;color:var(--color-primary);box-shadow:0 10px 40px rgba(0,0,0,.3);cursor:pointer;transition:transform .3s}.seal:hover{transform:scale(1.1)}.loading-text,.click-text{margin-top:2rem;font-family:var(--font-heading);color:var(--color-white);letter-spacing:2px}.hidden{display:none!important}#hero{min-height:100vh;background:linear-gradient(rgba(64,11,36,.5),rgba(42,7,24,.7)),url(../img/hero-bg.jpg) center/cover;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--color-white);padding:2rem}.hero-title{font-family:var(--font-script);font-size:clamp(3rem,8vw,6rem);margin-bottom:1rem}.hero-names{font-family:var(--font-heading);font-size:clamp(2rem,5vw,3.5rem);font-weight:700;margin:2rem 0}.hero-date{display:flex;gap:2rem;align-items:center;margin:3rem 0;flex-wrap:wrap}.date-item{text-align:center}.date-day{font-size:.9rem;letter-spacing:3px;text-transform:uppercase}.date-number{font-size:4rem;font-weight:700;line-height:1}.date-divider{width:2px;height:80px;background:var(--color-gold)}section{padding:5rem 1rem}.container{max-width:1200px;margin:0 auto}.section-title{font-family:var(--font-script);font-size:clamp(2.5rem,5vw,4rem);text-align:center;color:var(--color-dominant);margin-bottom:2rem}.section-dark{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%);color:var(--color-white)}.section-dark .section-title{color:var(--color-gold)}.parents-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:3rem;align-items:center;margin:3rem 0}.parent-column{text-align:center}.parent-name{font-size:1.3rem;font-weight:600;margin:.5rem 0}.divider-vertical{width:2px;height:150px;background:var(--color-gold)}.bible-quote{text-align:center;font-style:italic;font-size:1.5rem;font-family:var(--font-heading);margin:3rem 0}#countdown{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;margin:3rem 0}.countdown-item{text-align:center;min-width:100px}.countdown-number{font-size:3rem;font-weight:700;color:var(--color-gold);display:block}.countdown-label{font-size:.9rem;text-transform:uppercase;letter-spacing:2px;margin-top:.5rem}.program-grid{display:grid;gap:2rem;max-width:800px;margin:0 auto}.program-item{display:grid;grid-template-columns:100px 2px 1fr;gap:2rem;align-items:center}.program-time{text-align:right;font-size:2rem;font-family:var(--font-heading);font-style:italic}.program-divider{width:2px;height:100%;background:var(--color-gold)}.program-details h3{font-size:1.5rem;margin-bottom:.5rem}.program-details p{opacity:.8}.rsvp-card{background:var(--color-white);padding:3rem;border-radius:10px;max-width:600px;margin:0 auto;box-shadow:0 10px 40px rgba(0,0,0,.1)}.guest-name{font-family:var(--font-heading);font-size:2rem;text-align:center;color:var(--color-primary);margin-bottom:2rem}.form-group{margin:2rem 0}label{display:block;font-weight:600;margin-bottom:1rem;color:var(--color-primary)}.button-group{display:flex;gap:1rem;flex-wrap:wrap}button,.btn{padding:1rem 2rem;border:2px solid var(--color-primary);background:var(--color-white);color:var(--color-primary);font-family:var(--font-body);font-size:1rem;font-weight:600;cursor:pointer;border-radius:5px;transition:all .3s;flex:1}button:hover,.btn:hover{background:var(--color-primary);color:var(--color-white)}button.active,.btn.active{background:var(--color-primary);color:var(--color-white)}.btn-primary{background:var(--color-primary);color:var(--color-white);width:100%}.btn-primary:hover{background:var(--color-primary-light)}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}.gallery-item{aspect-ratio:1;overflow:hidden;border-radius:10px;cursor:pointer;transition:transform .3s}.gallery-item:hover{transform:scale(1.05)}.gallery-item img{width:100%;height:100%;object-fit:cover}input[type=text],input[type=file],textarea{width:100%;padding:1rem;border:2px solid var(--color-neutral);border-radius:5px;font-family:var(--font-body);font-size:1rem;margin-top:.5rem}textarea{resize:vertical;min-height:150px}footer{background:var(--color-primary);color:var(--color-white);text-align:center;padding:3rem 1rem}.footer-names{font-family:var(--font-script);font-size:2rem;margin-bottom:1rem}.social-links{margin:2rem 0}.social-links a{color:var(--color-white);font-size:1.5rem;margin:0 1rem;transition:color .3s;text-decoration:none}.social-links a:hover{color:var(--color-gold)}@media (max-width:768px){.hero-date{flex-direction:column;gap:1rem;justify-content:center}.date-divider{width:80px;height:2px}.parents-grid{grid-template-columns:1fr;gap:2rem}.divider-vertical{width:80px;height:2px;margin:0 auto}.program-item{grid-template-columns:1fr;gap:1rem}.program-time{text-align:center}.program-divider{display:none}.button-group{flex-direction:column}.button-group button{width:100%}}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:fadeInUp .6s ease-out}

/* Hotel Cards */
.hotel-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.hotel-card {
    background: var(--color-white);
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.hotel-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.hotel-card h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-primary);
    margin: 1rem 0;
}

/* Gifts Section */
.gifts-content a {
    transition: color 0.3s;
}

.gifts-content a:hover {
    color: var(--color-primary);
}

/* Gallery Overlay */
.gallery-item {
    position: relative;
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: var(--color-white);
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.9rem;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
    color: var(--color-white);
    font-size: 2rem;
}

@keyframes bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

/* Reserved Colors Display */
.reserved-colors {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

/* Better Form Styling */
.form-group input[type="text"],
.form-group input[type="password"],
.form-group textarea {
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(206, 163, 91, 0.1);
}

/* Loading States */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Icon Spacing */
.btn i,
label i {
    margin-right: 0.5rem;
}

/* Alert Messages */
.alert-success {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 1rem;
    border-radius: 10px;
    margin: 1rem 0;
    border-left: 4px solid #4caf50;
}

.alert-error {
    background: #ffebee;
    color: #c62828;
    padding: 1rem;
    border-radius: 10px;
    margin: 1rem 0;
    border-left: 4px solid #f44336;
}

/* Additional Responsive Improvements */
@media (max-width: 480px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-names {
        font-size: 1.8rem;
    }
    
    .date-number {
        font-size: 3rem;
    }
    
    .countdown-number {
        font-size: 2rem;
    }
    
    .reserved-colors {
        gap: 1rem;
    }
    
    .color-chip {
        width: 50px;
        height: 50px;
    }
}

/* Print Styles */
@media print {
    #loading-screen,
    #envelope-opener,
    .scroll-indicator,
    footer {
        display: none !important;
    }
    
    section {
        page-break-inside: avoid;
    }
}