/* ============================================
   ENHANCED SSA BOOKING STYLES - Reyvamp Theme
   ============================================ */

/* Booking Form Container with Background */
.bookly-booking-wrapper {
    margin-top: 20px;
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    animation: fadeInUp 0.6s ease-out;
}

/* SSA Form Full Width */
.ssa-booking-form,
.ssa-appointment-form {
    width: 100% !important;
}

/* Enhanced Calendar Styling */
.ssa-calendar,
div[class*="ssa-calendar"],
.ssa-datepicker {
    border-radius: 6px !important;
    background: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Calendar Header with Brand Color */
.ssa-calendar-header,
.ssa-datepicker-header {
    background-color: #0356A3 !important;
    color: white !important;
    padding: 15px !important;
    font-family: 'Palatino Linotype', serif !important;
}

/* Time Slots with Hover Animation */
.ssa-time-slot,
.ssa-timeslot,
.ssa-availability-slot,
.ssa-slot {
    background: white !important;
    text-align: center !important;
    font-family: 'Telegraf', sans-serif !important;
}

.ssa-time-slot:hover,
.ssa-timeslot:hover,
.ssa-availability-slot:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(3, 86, 163, 0.15) !important;
}

/* Selected Time Slot */
.ssa-time-slot.selected,
.ssa-timeslot.selected,
.ssa-availability-slot.selected {
    font-weight: 600 !important;
}

/* Appointment Type Cards with Animation */
.ssa-appointment-type,
.ssa-type-card {
    background: white !important;
    cursor: pointer !important;
    padding: 20px !important;
    margin-bottom: 15px !important;
}

.ssa-appointment-type:hover,
.ssa-type-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(3, 86, 163, 0.15) !important;
}

/* Headings in SSA */
.ssa-booking-form h2,
.ssa-booking-form h3,
.ssa-appointment-form h2,
.ssa-appointment-form h3 {
    font-family: 'Palatino Linotype', serif !important;
    color: #2c3e50 !important;
    margin-bottom: 15px !important;
}

/* Success Message */
.ssa-success,
.ssa-confirmation,
.ssa-booking-success {
    padding: 20px !important;
    font-family: 'Telegraf', sans-serif !important;
}

/* Error Message */
.ssa-error,
.ssa-booking-error {
    padding: 20px !important;
    font-family: 'Telegraf', sans-serif !important;
}

/* Loading Spinner Animation */
.ssa-loading,
.ssa-spinner {
    animation: ssa-spin 1s linear infinite !important;
}

@keyframes ssa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Fade In Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .bookly-booking-wrapper {
        padding: 15px;
    }
    
    .ssa-calendar {
        font-size: 14px !important;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .bookly-booking-wrapper {
        padding: 20px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .bookly-booking-wrapper {
        padding: 10px;
        border-radius: 4px;
    }
    
    .ssa-time-slot,
    .ssa-timeslot {
        padding: 10px !important;
        font-size: 14px !important;
    }
}