/* ==========================================================================
   ElevenDown — Schedule Page Styles
   Theme: Modern Explorer / Technical Wilderness
   ========================================================================== */

/* ===== Section Spacing ===== */
section {
    padding-block: var(--section-pad, 100px);
}

/* ===== Time Slots — Monospace, Accent Palette ===== */
.time-slot {
    transition: all 0.3s ease;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    background: var(--bg-surface, #1e1e1e);
    border-radius: var(--radius-md, 12px);
}

.time-slot span,
.time-slot .text-xs {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    color: var(--accent, #D9A172);
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}

.time-slot:hover {
    transform: translateY(-2px);
    border-color: var(--border-hover, rgba(217, 161, 114, 0.35));
    box-shadow: 0 4px 16px rgba(217, 161, 114, 0.15);
}

.time-slot.selected {
    background: rgba(217, 161, 114, 0.12);
    border-color: var(--accent, #D9A172);
    box-shadow: 0 0 20px rgba(217, 161, 114, 0.1);
}

/* ===== Form Inputs ===== */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: var(--radius-md, 12px);
    color: var(--text-primary, #F5F5F5);
    font-family: var(--font-body, 'Inter', sans-serif);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent, #D9A172) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(217, 161, 114, 0.12);
}

/* ===== Checkbox Styling — Warm ===== */
input[type="checkbox"]:checked {
    background-color: var(--accent, #D9A172);
    border-color: var(--accent, #D9A172);
}

input[type="checkbox"]:checked + span {
    color: var(--accent, #D9A172);
}

label:has(input[type="checkbox"]:checked) {
    border-color: var(--accent, #D9A172) !important;
    background: rgba(217, 161, 114, 0.08);
}

/* ===== Select Dropdown ===== */
select option {
    background-color: var(--bg, #121212);
    color: var(--text-primary, #F5F5F5);
    padding: 10px;
}

select:focus option:checked {
    background: linear-gradient(0deg, var(--accent, #D9A172) 0%, var(--accent, #D9A172) 100%);
    color: #000;
}

/* ===== Labels ===== */
label {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ===== Schedule Form — Date/Time Elements ===== */
.time-slot br + span,
[class*="text-slate-400"] {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.75rem;
}

/* ===== Submit Button ===== */
button[type="submit"] {
    background: var(--accent, #D9A172) !important;
    color: #000 !important;
    font-family: var(--font-heading, 'Inter', sans-serif);
    font-weight: 800;
    letter-spacing: 0.08em;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(217, 161, 114, 0.25);
}

button[type="submit"]:hover {
    background: #e8b88a !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(217, 161, 114, 0.4);
}

/* ===== Success Message Glow — Warm ===== */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(217, 161, 114, 0.2);
    }
    50% {
        box-shadow: 0 0 30px rgba(217, 161, 114, 0.4);
    }
}

.success-message {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* ===== Benefits Sidebar ===== */
.float-animation {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* ===== Schedule Page — Mobile Responsive ===== */
@media (max-width: 768px) {
    /* Disable floating animation on mobile (reduces motion) */
    .float-animation {
        animation: none;
    }

    /* Form padding */
    .glass-card-enhanced.p-8.md\:p-12 {
        padding: 1.25rem !important;
    }

    /* Checkbox label grid: single column */
    .grid.md\:grid-cols-2 label {
        padding: 0.625rem 0.75rem !important;
    }

    /* Time slot buttons: reduce padding */
    .time-slot {
        padding: 0.5rem 0.5rem !important;
        font-size: 0.8rem;
    }

    /* Sidebar benefits + form: stack */
    .grid.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
}
