/**
 * SSS Academies — Enhanced Form Styling
 * ──────────────────────────────────────
 * Dark, premium theme for all inquiry/contact/enrollment forms.
 * Matches the Fire 'n' Ice Arena quality with SSS branding.
 */

/* ─── Form Section Background ─────────────────────────────────────────────── */
.inquiry-section,
.contact-section,
.enrollment-section,
.interest-section,
.tour-section {
    background: linear-gradient(180deg, #0a1628 0%, #0f2035 40%, #162d4a 100%) !important;
    padding: 80px 0 !important;
    position: relative;
}

.inquiry-section::before,
.contact-section::before,
.tour-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 20% 50%, rgba(247,148,29,0.05) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 50%, rgba(30,58,95,0.15) 0%, transparent 60%);
    pointer-events: none;
}

/* ─── Form Container ──────────────────────────────────────────────────────── */
.inquiry-form,
.feature-box,
.enrollment-form-container {
    background: linear-gradient(145deg, rgba(15,32,53,0.95) 0%, rgba(22,45,74,0.95) 100%) !important;
    border: 1px solid rgba(247,148,29,0.2) !important;
    border-radius: 16px !important;
    padding: 45px !important;
    box-shadow: 
        0 20px 60px rgba(0,0,0,0.4),
        0 0 40px rgba(247,148,29,0.05),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
    color: #f1f5f9 !important;
    position: relative;
    overflow: hidden;
}

.inquiry-form::before,
.feature-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f7941d, #ff6b35, #f7941d);
}

/* ─── Form Headers ────────────────────────────────────────────────────────── */
.form-header {
    border-bottom: 1px solid rgba(247,148,29,0.2) !important;
    padding-bottom: 25px !important;
    margin-bottom: 35px !important;
}

.form-header h2,
.inquiry-form h2,
.feature-box h2 {
    color: #f7941d !important;
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 1.8rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-header p,
.form-header .subtitle {
    color: rgba(255,255,255,0.7) !important;
}

/* ─── Section Headers ─────────────────────────────────────────────────────── */
.form-section h3,
.inquiry-form h3 {
    color: #93c5fd !important;
    font-size: 1.1rem !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 1px solid rgba(147,197,253,0.15) !important;
    padding-bottom: 12px !important;
    margin-bottom: 22px !important;
}

/* ─── Form Labels ─────────────────────────────────────────────────────────── */
.form-group label,
.inquiry-form label,
.feature-box label,
label {
    color: #f1f5f9 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: 0.3px;
}

.required {
    color: #f7941d !important;
}

/* ─── Form Inputs ─────────────────────────────────────────────────────────── */
.form-group input,
.form-group select,
.form-group textarea,
.inquiry-form input[type="text"],
.inquiry-form input[type="email"],
.inquiry-form input[type="tel"],
.inquiry-form input[type="date"],
.inquiry-form input[type="number"],
.inquiry-form select,
.inquiry-form textarea,
.feature-box input[type="text"],
.feature-box input[type="email"],
.feature-box input[type="tel"],
.feature-box input[type="date"],
.feature-box select,
.feature-box textarea {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    color: #ffffff !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    width: 100%;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus,
.feature-box input:focus,
.feature-box select:focus,
.feature-box textarea:focus {
    border-color: #f7941d !important;
    box-shadow: 0 0 0 3px rgba(247,148,29,0.15), 0 0 20px rgba(247,148,29,0.08) !important;
    background: rgba(255,255,255,0.08) !important;
    outline: none !important;
}

.form-group input::placeholder,
.form-group textarea::placeholder,
.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder,
.feature-box input::placeholder,
.feature-box textarea::placeholder {
    color: rgba(255,255,255,0.55) !important;
    font-size: 15px !important;
}

/* ─── Select Dropdowns ────────────────────────────────────────────────────── */
.form-group select,
.inquiry-form select,
.feature-box select {
    color: #ffffff !important;
    font-size: 16px !important;
}

.form-group select option,
.inquiry-form select option,
.feature-box select option {
    background: #1e3a5f;
    color: #f1f5f9;
    font-size: 15px;
}

/* ─── Checkboxes & Radio Buttons ────────────────────────────────────────── */
.checkbox-group label,
.radio-group label,
.checkbox-label,
input[type="checkbox"] + span,
input[type="checkbox"] + label,
input[type="radio"] + label {
    color: #e2e8f0 !important;
    font-size: 15px !important;
}

/* ─── Submit Button ───────────────────────────────────────────────────────── */
.submit-btn,
.btn-submit,
button[type="submit"],
.inquiry-form button[type="submit"],
.feature-box button[type="submit"] {
    background: linear-gradient(135deg, #f7941d 0%, #ff6b35 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 16px 40px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 25px rgba(247,148,29,0.3) !important;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.submit-btn:hover,
.btn-submit:hover,
button[type="submit"]:hover {
    background: linear-gradient(135deg, #ff6b35 0%, #f7941d 100%) !important;
    box-shadow: 0 12px 35px rgba(247,148,29,0.45) !important;
    transform: translateY(-2px) !important;
}

.submit-btn:active,
.btn-submit:active,
button[type="submit"]:active {
    transform: translateY(0) !important;
}

/* ─── Sidebar Cards ───────────────────────────────────────────────────────── */
.sidebar-card,
.inquiry-sidebar .sidebar-card {
    background: linear-gradient(145deg, rgba(15,32,53,0.95) 0%, rgba(22,45,74,0.95) 100%) !important;
    border: 1px solid rgba(247,148,29,0.15) !important;
    border-radius: 14px !important;
    padding: 28px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    color: #e2e8f0 !important;
}

.sidebar-card h4 {
    color: #f7941d !important;
    font-family: 'Oswald', 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sidebar-card li {
    color: #e2e8f0 !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
}

.sidebar-card li i,
.sidebar-card li .fa,
.sidebar-card li .fas {
    color: #f7941d !important;
}

.sidebar-card p,
.sidebar-card a {
    color: #93c5fd !important;
}

.sidebar-card a:hover {
    color: #f7941d !important;
}

/* ─── Quick Contact Card ──────────────────────────────────────────────────── */
.quick-contact,
.sidebar-card.quick-contact {
    background: linear-gradient(135deg, rgba(247,148,29,0.1) 0%, rgba(255,107,53,0.08) 100%) !important;
    border-color: rgba(247,148,29,0.3) !important;
}

/* ─── Success State ───────────────────────────────────────────────────────── */
.success-message,
.form-success {
    background: linear-gradient(135deg, rgba(15,32,53,0.95) 0%, rgba(22,45,74,0.95) 100%) !important;
    border: 2px solid rgba(247,148,29,0.4) !important;
    border-radius: 16px !important;
    color: #e2e8f0 !important;
    padding: 50px 40px !important;
    text-align: center;
}

.success-message h2 {
    color: #f7941d !important;
}

.success-message p {
    color: rgba(255,255,255,0.8) !important;
}

/* ─── Form Row Layout ─────────────────────────────────────────────────────── */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ─── Sport-Specific Accent Colors ────────────────────────────────────────── */
/* These add subtle sport-themed accents */
.hockey-accent .inquiry-form::before { background: linear-gradient(90deg, #1e88e5, #42a5f5, #1e88e5); }
.basketball-accent .inquiry-form::before { background: linear-gradient(90deg, #f7941d, #ff6b35, #f7941d); }
.volleyball-accent .inquiry-form::before { background: linear-gradient(90deg, #8cc63f, #66bb6a, #8cc63f); }
.pickleball-accent .inquiry-form::before { background: linear-gradient(90deg, #00a99d, #26c6da, #00a99d); }
.boxing-accent .inquiry-form::before { background: linear-gradient(90deg, #e53935, #ef5350, #e53935); }
.skating-accent .inquiry-form::before { background: linear-gradient(90deg, #ab47bc, #ce93d8, #ab47bc); }

/* ─── Responsive Adjustments ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .inquiry-form,
    .feature-box {
        padding: 30px 20px !important;
    }
    
    .form-header h2,
    .inquiry-form h2 {
        font-size: 1.4rem !important;
    }
}

/* ─── Animated Glow Effect on Form Focus ──────────────────────────────────── */
@keyframes formGlow {
    0%, 100% { box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 40px rgba(247,148,29,0.05); }
    50% { box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 60px rgba(247,148,29,0.1); }
}

.inquiry-form:focus-within,
.feature-box:focus-within {
    animation: formGlow 3s ease-in-out infinite;
    border-color: rgba(247,148,29,0.35) !important;
}

/* ─── Interest Form Dark Overrides ─────────────────────────────────────── */
.interest-content {
    background: linear-gradient(145deg, rgba(15,32,53,0.95) 0%, rgba(22,45,74,0.95) 100%) !important;
    color: #e2e8f0 !important;
}

.interest-content .form-header h2 {
    color: #f7941d !important;
}

.interest-content .form-header p,
.interest-content .form-intro {
    color: rgba(255,255,255,0.7) !important;
}

.interest-content .form-section h3 {
    color: #93c5fd !important;
    border-bottom-color: rgba(147,197,253,0.15) !important;
}

.interest-content .form-note {
    color: rgba(255,255,255,0.6) !important;
}

/* ─── Enrollment Form Dark Overrides ───────────────────────────────────── */
.form-step {
    background: linear-gradient(145deg, rgba(15,32,53,0.95) 0%, rgba(22,45,74,0.95) 100%) !important;
    color: #e2e8f0 !important;
}

.step-header h2 {
    color: #f7941d !important;
}

.step-header p {
    color: rgba(255,255,255,0.7) !important;
}

.form-section h3 {
    color: #93c5fd !important;
    border-bottom-color: rgba(147,197,253,0.15) !important;
}

.step-nav {
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
}

.step-nav .btn-prev,
.step-nav .btn-next {
    color: #fff !important;
}

.checkbox-label {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #e2e8f0 !important;
}

.checkbox-label:hover {
    background: rgba(247,148,29,0.08) !important;
    border-color: rgba(247,148,29,0.3) !important;
}

.checkbox-label.selected {
    background: rgba(247,148,29,0.12) !important;
    border-color: rgba(247,148,29,0.5) !important;
}

.checkbox-label span {
    color: #e2e8f0 !important;
}

/* Review Container - dark theme override */
.review-container {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 12px !important;
    padding: 30px !important;
}

.review-section {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.review-section h4 {
    color: #93c5fd !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    padding-bottom: 10px !important;
    margin-bottom: 15px !important;
}

.review-section h4 i {
    color: #f7941d !important;
}

.review-section h3 {
    color: #f7941d !important;
}

.review-grid {
    gap: 15px !important;
}

.review-item .label {
    font-size: 13px !important;
    color: rgba(255,255,255,0.55) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 3px !important;
}

.review-item .value {
    font-size: 16px !important;
    color: #f1f5f9 !important;
    font-weight: 500 !important;
}

.review-item label {
    color: rgba(255,255,255,0.55) !important;
    font-size: 13px !important;
}

.review-item span {
    color: #f1f5f9 !important;
    font-size: 16px !important;
}

/* ─── File Upload Styling (Enrollment) ─────────────────────────────────────── */
.upload-item {
    background: rgba(255,255,255,0.03) !important;
    border: 2px dashed rgba(255,255,255,0.15) !important;
    border-radius: 12px !important;
    padding: 25px !important;
    text-align: center;
    transition: all 0.3s ease;
    color: #e2e8f0 !important;
}

.upload-item:hover {
    border-color: rgba(247,148,29,0.4) !important;
    background: rgba(247,148,29,0.03) !important;
}

.upload-icon {
    color: #f7941d !important;
    font-size: 2rem;
    margin-bottom: 10px;
}

.upload-hint {
    color: rgba(255,255,255,0.6) !important;
    font-size: 0.9rem;
}

/* ─── Step Progress (Enrollment) ──────────────────────────────────────────── */
.progress-container {
    background: rgba(15,32,53,0.9) !important;
    border-bottom: 1px solid rgba(247,148,29,0.2) !important;
}

.step-indicator {
    color: rgba(255,255,255,0.4) !important;
}

.step-indicator.active {
    color: #f7941d !important;
}

.step-indicator.completed {
    color: #8cc63f !important;
}

/* ─── Terms Box (Enrollment) ──────────────────────────────────────────────── */
.terms-box {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 10px !important;
    padding: 20px !important;
    color: #e2e8f0 !important;
    font-size: 15px !important;
}

/* ─── Fee Summary (Enrollment) ────────────────────────────────────────────── */
.fee-summary {
    background: rgba(247,148,29,0.08) !important;
    border: 1px solid rgba(247,148,29,0.2) !important;
    border-radius: 12px !important;
    padding: 25px !important;
}

.fee-amount {
    color: #f7941d !important;
    font-weight: 800;
    font-size: 1.3rem;
}

.fee-note {
    color: rgba(255,255,255,0.6) !important;
}

/* ─── Contact Info Cards ──────────────────────────────────────────────────── */
.contact-info-card,
.info-card {
    background: linear-gradient(145deg, rgba(15,32,53,0.95) 0%, rgba(22,45,74,0.95) 100%) !important;
    border: 1px solid rgba(247,148,29,0.15) !important;
    border-radius: 14px !important;
    color: #e2e8f0 !important;
}

.contact-info-card h3,
.info-card h3 {
    color: #f7941d !important;
}

.contact-info-card p,
.info-card p {
    color: #e2e8f0 !important;
}

.contact-info-card i,
.info-card i {
    color: #f7941d !important;
}