/* =============================================================================
   integration/responsive.css
   Mobile overrides for all integration form components (≤ 640px).
   Import LAST so these rules win.
   ============================================================================= */

@media (max-width: 640px) {

    /* form wrapper */
    #createConnectionForm {
        padding: var(--space-4) var(--space-3);
    }

    /* progress bar — hide labels, compact dots */
    .progress-steps {
        padding: var(--space-3) var(--space-2);
    }

    .ps-label {
        display: none;
    }

    /* section card headers */
    .if-card-header,
    .sync-section-header {
        flex-wrap: wrap;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
    }

    .if-card-right,
    .header-right {
        flex-wrap: wrap;
    }

    /* date input full width */
    .if-input[type="date"],
    .form-input[type="date"] {
        max-width: 100%;
    }

    /* date band stacks */
    .date-band,
    .universal-date-section {
        flex-direction: column;
    }

    /* submit button full width */
    .if-submit-btn {
        width: 100%;
        min-width: unset;
    }

    /* step nav stacks on small screens */
    .if-step-nav {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .if-btn-next,
    .if-btn-back {
        width: 100%;
        justify-content: center;
    }

    /* success view */
    .success-wrapper {
        padding: var(--space-4) var(--space-3);
    }

    .success-content {
        padding: var(--space-6) var(--space-4);
    }

    /* plan-limit popup */
    .plan-limit-popup {
        width: 95%;
        padding: var(--space-5) var(--space-4);
    }
}