/* Appointment Popup Styles */
.popup {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Checkbox animation */
.fa-check-circle {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 0.6;
        transform: scale(1);
    }
}

/* Wave animation for emoji */
@keyframes wave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(20deg); }
    75% { transform: rotate(-15deg); }
}

#appointment-popup .text-4xl {
    display: inline-block;
    animation: wave 2.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}

/* Form field focus effects */
#appointment-popup input:focus,
#appointment-popup textarea:focus {
    border-color: #0077cc;
    box-shadow: 0 0 0 3px rgba(0, 119, 204, 0.2);
}

/* Vertical text for call back button */
.vertical-text {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}