/**
 * Scheduler Module - Custom Styles
 *
 * Additional styles for the meeting booking interface.
 * Most styling uses Tailwind CSS classes in the HTML template.
 */

/* Date selector grid */
.scheduler-date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.scheduler-date-item {
    transition: all 0.2s ease;
}

.scheduler-date-item:not([data-disabled="true"]):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Time slots grid */
.scheduler-slots-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .scheduler-slots-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.scheduler-slot-item {
    transition: all 0.15s ease;
}

.scheduler-slot-item:not([data-available="false"]):hover {
    transform: scale(1.05);
}

/* Smooth scroll to booking form */
#booking-form-section {
    scroll-margin-top: 2rem;
}

/* Loading spinner animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Success section animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#success-section {
    animation: fadeIn 0.3s ease-out;
}

/* Form focus states enhancement */
input:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(64, 64, 64, 0.2);
}

/* Checkbox custom styling */
input[type="checkbox"] {
    cursor: pointer;
}

input[type="checkbox"]:checked {
    background-color: #0a0a0a;
    border-color: #0a0a0a;
}

/* Error message shake animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.scheduler-error-shake {
    animation: shake 0.3s ease-in-out;
}

/* Disabled state for date/slot items */
.scheduler-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Selected state indicator */
.scheduler-selected-ring {
    box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 4px rgba(64, 64, 64, 0.2);
}

/* Telemost link styling */
.scheduler-telemost-link {
    word-break: break-all;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.scheduler-telemost-link:hover {
    color: #404040;
}

/* Print styles */
@media print {
    .scheduler-no-print {
        display: none;
    }

    #success-section {
        page-break-inside: avoid;
    }
}