/* ============================================================
   Contact Section — Split layout with floating-label form
   ============================================================ */

.contact-section {
    padding-block: var(--section-pad-y);
    background: var(--color-bg-white);
    overflow: hidden;
}

/* ── Grid ─────────────────────────────────────────────────── */
.contact-section__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-16);
    align-items: start;
}

/* ── Left: Info ───────────────────────────────────────────── */
.contact-section__heading {
    font-size: clamp(1.875rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: var(--color-dark);
    line-height: 1.2;
    margin-bottom: var(--space-4);
}

.contact-section__desc {
    font-size: 1.0625rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: var(--space-8);
}

/* Info cards */
.contact-info-cards { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-8); }

.contact-info-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-xl);
    border: 1.5px solid var(--color-border);
    background: var(--color-bg);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
a.contact-info-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}

.contact-info-card__icon {
    width: 48px; height: 48px; border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-info-card__icon--blue   { background: var(--color-primary-light);  color: var(--color-primary); }
.contact-info-card__icon--green  { background: var(--color-accent-light);   color: var(--color-accent); }
.contact-info-card__icon--purple { background: var(--color-accent-light); color: var(--color-accent-dark); }

.contact-info-card__text { display: flex; flex-direction: column; gap: 2px; }
.contact-info-card__label { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.contact-info-card__value { font-size: 0.9375rem; font-weight: 700; color: var(--color-dark); line-height: 1.4; }

/* Response badge */
.contact-section__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.contact-section__badge-dot {
    width: 8px; height: 8px; border-radius: var(--radius-full);
    background: var(--color-accent);
    flex-shrink: 0;
    position: relative;
}
.contact-section__badge-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    opacity: 0.3;
    animation: pulseRing 1.8s ease-out infinite;
}

/* ── Right: Form ──────────────────────────────────────────── */
.contact-section__form-wrap {
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    box-shadow: var(--shadow-lg);
}

.contact-form { display: flex; flex-direction: column; gap: var(--space-5); }

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

/* Floating label field */
.contact-form__field {
    position: relative;
}

.contact-form__field input,
.contact-form__field textarea,
.contact-form__field select {
    width: 100%;
    padding: var(--space-5) var(--space-4) var(--space-3);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-white);
    font-size: 0.9375rem;
    color: var(--color-text);
    font-family: var(--font-body);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus,
.contact-form__field select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(14,95,232,0.12);
}

.contact-form__field label {
    position: absolute;
    top: 50%;
    left: var(--space-4);
    translate: 0 -50%;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    pointer-events: none;
    transition: all 0.2s ease;
}

.contact-form__field textarea + label,
.contact-form__field--full textarea + label { top: var(--space-5); translate: 0 0; }

/* Float label on focus or when value entered.
   Selects can't use :placeholder-shown, so their label stays floated. */
.contact-form__field input:focus + label,
.contact-form__field input:not(:placeholder-shown) + label,
.contact-form__field textarea:focus + label,
.contact-form__field textarea:not(:placeholder-shown) + label,
.contact-form__field select + label {
    top: 10px;
    translate: 0 0;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: 0.04em;
}

.contact-form__field--full { grid-column: 1 / -1; }
.contact-form__field--full textarea { resize: vertical; min-height: 120px; padding-top: var(--space-6); }

/* Select keeps the base padding so its text clears the floated label */

/* Submit button */
.contact-form__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-full);
    border: none;
    background: linear-gradient(135deg, var(--color-primary), #4F6FD4);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}

.contact-form__submit:hover {
    box-shadow: var(--shadow-blue);
    transform: translateY(-2px);
}

.contact-form__submit-loading { display: none; align-items: center; gap: var(--space-2); }
.contact-form__submit-loading svg { animation: spinnerRotate 0.9s linear infinite; }

.contact-form__submit.is-loading .contact-form__submit-text { display: none; }
.contact-form__submit.is-loading .contact-form__submit-loading { display: flex; }
.contact-form__submit.is-loading .contact-form__submit-arrow { display: none; }
.contact-form__submit.is-loading { pointer-events: none; opacity: 0.8; }

.contact-form__submit-arrow { transition: transform var(--transition); }
.contact-form__submit:hover .contact-form__submit-arrow { transform: translateX(4px); }

/* Feedback */
.contact-form__feedback {
    font-size: 0.9rem;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    display: none;
    line-height: 1.5;
}
.contact-form__feedback.is-success {
    display: block;
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
    border: 1px solid rgba(25,167,255,0.3);
}
.contact-form__feedback.is-error {
    display: block;
    background: #FEF2F2;
    color: #B91C1C;
    border: 1px solid rgba(239,68,68,0.3);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .contact-section__grid { grid-template-columns: 1fr; gap: var(--space-10); }
}

@media (max-width: 640px) {
    .contact-section__form-wrap { padding: var(--space-6); }
    .contact-form__row { grid-template-columns: 1fr; }
}