/*! public/css/home/booking.css */

/* ---------------------------------------------------------
   📅 Booking CTA
--------------------------------------------------------- */

.booking-cta {
    margin: 3rem auto;
    max-width: 500px;
    background-color: var(--color-background-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
}

.booking-cta h2 {
    color: var(--color-primary);
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------
   🟦 Booking Button (Premium)
--------------------------------------------------------- */
.booking-btn {
    font-weight: 600;
    color: white !important;
    background-color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.booking-btn-cta {
    padding: 0.85rem 2rem;
    font-size: 1.2rem;
    animation: ctaPulse 1.8s ease-in-out infinite;
}

/* Pulse animation (subtle & professional) */
@keyframes ctaPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* Hover → Stop pulse */
.booking-btn:hover,
.booking-btn:focus {
    animation: none !important;
    color: var(--color-primary) !important;
    background-color: white;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* Button focus outline */
.booking-btn:focus {
    outline: 2px solid var(--color-primary);
}

/* ---------------------------------------------------------
   📱 Mobile Responsiveness
--------------------------------------------------------- */
@media (max-width: 576px) {
    .booking-cta {
        margin: 2.5rem 2rem;
        padding: 2rem 1rem;
    }

    .booking-btn {
        width: 100%;
    }
}