/*
 * Authentication responsive contract
 * Base: mobile (0-767px)
 * Tablet: 768-1023px
 * Desktop: 1024px+
 */

.articopay-auth-main {
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    height: auto;
    padding: clamp(.5rem, 3vw, .875rem);
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.articopay-auth-shell,
.articopay-auth-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: calc(100dvh - clamp(1rem, 6vw, 1.75rem));
    height: auto;
    max-height: none;
}

.articopay-auth-card {
    align-items: center;
    overflow: visible;
}

.articopay-register-wizard,
.articopay-login-wizard {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    height: auto;
    max-height: none;
    padding: clamp(.875rem, 4vw, 1.25rem);
    border-radius: clamp(1rem, 5vw, 1.5rem);
}

.articopay-register-header,
.articopay-login-content,
.articopay-login-content > .row,
.articopay-step,
.articopay-fields-grid,
.articopay-field,
.articopay-field .form-control,
.articopay-register-actions,
.articopay-login-wizard form {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.articopay-login-content {
    padding: clamp(1rem, 6vw, 1.75rem) 0 .5rem;
}

.articopay-step-heading h1,
.articopay-login-wizard .articopay-step-heading h1 {
    font-size: clamp(1.4rem, 7vw, 1.9rem) !important;
    line-height: 1.12;
}

.articopay-step-heading p,
.articopay-login-wizard .articopay-step-heading p {
    font-size: clamp(.85rem, 3.8vw, 1rem) !important;
    line-height: 1.45;
}

.articopay-fields-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
}

.articopay-register-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
}

.articopay-register-actions .btn {
    min-width: 0;
    flex: 1 1 10rem;
}

.articopay-login-security,
.articopay-step-note {
    position: static;
    width: 100%;
    max-width: 100%;
    margin-top: .875rem;
    transform: none;
    text-align: center;
}

.articopay-auth-preview {
    display: none;
}

:root[data-artico-layout="mobile"] {
    font-size: var(--artico-mobile-root-size, 16px);
}

:root[data-artico-layout="mobile"] .articopay-fields-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

@media (min-width: 768px) {
    :root:not([data-artico-layout="mobile"]) .articopay-auth-main {
        padding: clamp(1rem, 3vw, 1.75rem);
    }

    :root:not([data-artico-layout="mobile"]) .articopay-auth-shell {
        max-width: 46rem;
    }

    :root:not([data-artico-layout="mobile"]) .articopay-auth-card {
        max-width: 42rem;
    }

    :root:not([data-artico-layout="mobile"]) .articopay-fields-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    :root[data-artico-layout="desktop"] .articopay-auth-shell {
        max-width: 48rem;
    }

    :root[data-artico-layout="desktop"] .articopay-auth-card {
        max-width: 42rem;
    }

    :root[data-artico-layout="desktop"] .articopay-register-wizard {
        padding: clamp(1.25rem, 2vw, 1.875rem);
    }
}