/**
 * Consultation & Contact Form Styles
 * 
 * Consolidated form component styles for:
 * - Consultation form (booking/appointment)
 * - Contact form sections across pages
 * - Form page section wrappers
 * 
 * Form modes:
 * - .form-full: All fields visible on load
 * - .form-progressive: Initial fields (name/phone) visible, expand on interaction
 * 
 * STANDARD CLASS: .axis-consultation-form-wrapper (use this in components)
 * 
 * Used on: Contact, How It Works, What I Treat, FAQ pages
 * 
 * @package Axis Mental Health
 * @since 1.0.0
 */

/* ==========================================================================
   FORM PAGE SECTION WRAPPERS
   ========================================================================== */

/* Form section wrapper - when used on pages */
.works-form-section,
.treat-form-section,
.faq-form-section {
    background: var(--axis-white);
    padding: clamp(64px, 10vw, 96px) 0;
}

/* Form container */
.works-form-content,
.treat-form-content,
.faq-form-content {
    max-width: 720px;
    margin: 0 auto;
}

/* Component wrapper - inherits from contact-page.css */
.contact-form-section {
    display: grid;
    gap: var(--axis-space-6);
}

/* Form section heading */
.form-section-heading {
    margin: 0;
    font-size: var(--axis-text-2xl);
    font-weight: var(--axis-font-extrabold);
    color: var(--axis-primary);
    letter-spacing: -0.02em;
    text-align: center;
}

/* Form section subheading */
.form-section-subheading {
    margin: 0;
    font-size: var(--axis-text-base);
    line-height: var(--axis-line-height-relaxed);
    color: var(--axis-text-muted);
    text-align: center;
}

.form-section-subheading p {
    margin: 0;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

/* Privacy note */
.form-privacy-note {
    margin-top: var(--axis-space-4);
}

.form-privacy-note p {
    margin: 0;
}

/* ==========================================================================
   CONSULTATION FORM COMPONENT
   ========================================================================== */

/* Form Wrapper - applies spacing whether using card styling or not */
.axis-consultation-form-wrapper,
.axis-card:has(.appointment-form),
.axis-card:has(.progressive-form) {
    padding: var(--axis-space-10);
    display: block;
    text-align: left;
}

@media (max-width: 768px) {

    .axis-consultation-form-wrapper,
    .axis-card:has(.appointment-form),
    .axis-card:has(.progressive-form) {
        padding: var(--axis-space-8);
    }
}

/* Form heading styling */
.axis-card__heading,
.appointment-form-box h2,
.form-title {
    /* font-size: var(--axis-text-2xl); */
    color: var(--axis-primary);
    margin-bottom: var(--axis-space-4);
    /* letter-spacing: -0.02em; */
}

/* Heading and intro spacing - works with or without card styling */
.axis-consultation-form-wrapper .axis-card__heading,
.axis-card .axis-card__heading,
.appointment-form-box .axis-card__heading,
.appointment-form-box h2 {
    margin-bottom: var(--axis-space-5);
}

.axis-consultation-form-wrapper .axis-card__heading+p,
.axis-consultation-form-wrapper .axis-card__heading+.brxe-text-basic,
.axis-card .axis-card__heading+p,
.axis-card .axis-card__heading+.brxe-text-basic,
.appointment-form-box .axis-card__heading+p,
.appointment-form-box .axis-card__heading+.brxe-text-basic,
.appointment-form-box h2+p {
    margin-bottom: var(--axis-space-8);
}

/* Intro text in popup forms */
.brx-popup .brxe-intro,
.brx-popup .axis-card__heading+.brxe-text-basic {
    margin-bottom: var(--axis-space-6);
}

.axis-consultation-form-wrapper .form-title {
    font-size: var(--axis-text-2xl);
    font-weight: 700;
    color: var(--axis-dark);
    margin-bottom: var(--axis-space-6);
    text-align: center;
}

.axis-consultation-form-wrapper .form-description {
    font-size: var(--axis-text-base);
    color: var(--axis-text);
    line-height: 1.6;
    margin-bottom: var(--axis-space-12);
    text-align: center;
}

/* Form Base Styles */
.consultation-form,
.appointment-form,
.appointment-form-box .brxe-form,
.axis-appointment-form {
    display: flex;
    flex-direction: column;
    gap: var(--axis-space-2);
}

/* Progressive form expanded state */
@media (min-width: 768px) {
    .progressive-form.form-expanded {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--axis-space-5);
    }
}

.consultation-form .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--axis-space-2);
}

.consultation-form label {
    font-size: var(--axis-text-sm);
    font-weight: 600;
    color: var(--axis-dark);
}

/* Submit Button */
.consultation-form button[type="submit"] {
    background: var(--axis-primary);
    color: var(--axis-white);
    font-size: var(--axis-text-base);
    font-weight: 600;
    padding: var(--axis-space-4) var(--axis-space-8);
    border: none;
    border-radius: var(--axis-radius-md);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    margin-top: var(--axis-space-4);
}

.consultation-form button[type="submit"]:hover {
    background: var(--axis-primary-dark);
    transform: translateY(-2px);
}

.consultation-form button[type="submit"]:active {
    transform: translateY(0);
}

/* Progressive Form - Hidden Fields Initially */
.consultation-form.form-progressive .form-group:nth-child(3),
.consultation-form.form-progressive .form-group:nth-child(4) {
    display: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

/* Progressive Form - Expanded State */
.consultation-form.form-progressive.expanded .form-group:nth-child(3),
.consultation-form.form-progressive.expanded .form-group:nth-child(4) {
    display: flex;
    opacity: 1;
    max-height: 200px;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Success/Error Messages */
.consultation-form .message {
    padding: var(--axis-space-4);
    border-radius: var(--axis-radius-md);
    margin-top: var(--axis-space-4);
    animation: fadeIn 0.3s ease;
}

.consultation-form .message.success {
    background: #d4edda;
    border: 2px solid #28a745;
    color: #155724;
}

.consultation-form .message.error {
    background: #f8d7da;
    border: 2px solid #dc3545;
    color: #721c24;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .axis-consultation-form-wrapper {
        padding: var(--axis-space-6) var(--axis-space-4);
    }

    .axis-consultation-form-wrapper .form-title {
        font-size: var(--axis-text-xl);
    }

    .axis-consultation-form-wrapper .form-description {
        font-size: var(--axis-text-sm);
    }

    .consultation-form input,
    .consultation-form textarea,
    .consultation-form select {
        font-size: var(--axis-text-base);
        /* Prevent iOS zoom */
    }

    .consultation-form button[type="submit"] {
        width: 100%;
        padding: var(--axis-space-5) var(--axis-space-6);
    }
}

/* Contact Info Block Styles */
.contact-info-block {
    display: flex;
    flex-direction: column;
    gap: var(--axis-space-6);
}

.contact-info-block .contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--axis-space-4);
}

.contact-info-block .contact-icon {
    font-size: var(--axis-text-xl);
    color: var(--axis-primary);
    flex-shrink: 0;
}

.contact-info-block .contact-text {
    font-size: var(--axis-text-base);
    color: var(--axis-text);
    line-height: 1.6;
}

.contact-info-block .contact-text strong {
    color: var(--axis-dark);
    font-weight: 600;
    display: block;
    margin-bottom: var(--axis-space-1);
}

.contact-info-block .contact-text a {
    color: var(--axis-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info-block .contact-text a:hover {
    color: var(--axis-primary-dark);
    text-decoration: underline;
}

/* ==========================================================================
   MOBILE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .contact-info-block .contact-item {
        gap: var(--axis-space-3);
    }

    .contact-info-block .contact-icon {
        font-size: var(--axis-text-lg);
    }

    .contact-info-block .contact-text {
        font-size: var(--axis-text-sm);
    }
}

/* Form page section mobile adjustments */
@media (max-width: 767px) {

    .works-form-section,
    .treat-form-section,
    .faq-form-section {
        padding: clamp(48px, 8vw, 64px) 0;
    }

    .form-section-heading {
        font-size: var(--axis-text-xl);
    }

    .form-section-subheading {
        font-size: var(--axis-text-sm);
    }
}