/* GLOBAL STYLES */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #FFFFFF;
    color: #020202;
    margin: 0;
}

.serif {
    font-family: 'Playfair Display', serif;
}

.gold-text {
    color: #DBBE00;
}

.gold-bg {
    background-color: #DBBE00;
}

/* BUTTONS */
.btn-primary {
    background-color: #020202;
    color: #FFFFFF;
    border: 1px solid #020202;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #DBBE00;
    color: #020202;
    border-color: #DBBE00;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(219, 190, 0, 0.2);
}

/* NAVIGATION & HERO */
.nav-item {
    border-radius: 2px;
}

.hero-bg {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url('https://images.unsplash.com/photo-1555939594-58d7cb561ad1?q=80&w=2000');
    background-size: cover;
    background-position: center;
}

/* FOOTER */
footer {
    background-color: #020202;
    color: #FFFFFF;
}

.footer-link {
    color: #9ca3af;
    transition: color 0.3s;
}

.footer-link:hover {
    color: #DBBE00;
}

/* ANIMATIONS */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Add to public/style.css */
table th {
    letter-spacing: 0.1em;
    color: #6B7280;
}

#bookings-list tr:last-child,
#orders-list tr:last-child {
    border-bottom: none;
}

/* Quantity control buttons */
#cart-items button {
    transition: color 0.2s;
    min-width: 20px;
}

#cart-items .bg-gray-100 {
    border-radius: 4px;
}


@media (max-width: 640px) {
    header.hero-bg {
        min-height: 85vh;
    }
}


@media (max-width: 768px) {
    section {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    .p-10 {
        padding: 1.5rem !important;
    }
}

@media (max-width: 1024px) {
    html {
        scroll-padding-top: 140px;
    }
}


.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.card-hover {
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {

    .card-hover,
    .reveal-on-scroll {
        transition: none !important;
    }
}


.card-hover:hover.border-pink-500 {
    box-shadow: 0 20px 45px rgba(236, 72, 153, 0.25);
}

#valentine-countdown {
    font-weight: bold;
    color: #ec4899;
    /* Tailwind pink-500 */
    text-align: center;
}