main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* =============================================
   Login Section
   ============================================= */

.login-section {
    flex: 1;
    background: var(--color-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

/* =============================================
   Login Card
   ============================================= */

.login-card {
    background: var(--color-white);
    border: 1px solid var(--invoice-border);
    border-radius: 8px;
    padding: 24px;
    width: 100%;
    max-width: var(--login-card-max-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-login-card);
}

.login-card__logo {
    width: 300px;
    height: 37px;
    object-fit: contain;
}

.login-card__title {
    font-size: 20px;
    font-weight: 200;
    color: var(--color-black);
    text-align: center;
    line-height: 120%;
    margin: 16px 0;
    align-self: stretch;
}

/* =============================================
   Sign-in Form
   ============================================= */

.login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

    .login-form .form-group {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 100%;
    }

/* position: relative makes this the popup anchor on mobile */
.form-label-row {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.login-form .form-label {
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    color: var(--color-text-muted);
}

.login-form .required {
    font-size: 12px;
    line-height: 150%;
    color: var(--color-required);
}

.login-form .form-input {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    font-size: 1rem;
    background: var(--color-form-bg);
    border: 1px solid var(--color-form-border);
    border-radius: 4px;
    color: var(--color-black);
    box-sizing: border-box;
}

    .login-form .form-input:hover {
        border-color: var(--color-border-hover);
    }

    .login-form .form-input:focus {
        outline: 3px solid var(--color-focus-form);
        outline-offset: 2px;
        border-color: var(--color-focus-form);
    }

/* =============================================
   Info Tooltip — <details> / <summary>
   Popup floats above the icon. Anchor is
   .info-tooltip on desktop, .form-label-row
   on mobile (see media query below).
   ============================================= */

.info-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
}

    .info-tooltip > summary {
        list-style: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        padding: 0;
        border-radius: 50%;
        flex-shrink: 0;
        user-select: none;
    }

        .info-tooltip > summary::-webkit-details-marker {
            display: none;
        }

        .info-tooltip > summary img {
            width: 16px;
            height: 16px;
            display: block;
        }

        .info-tooltip > summary:focus-visible {
            outline: 2px solid var(--color-focus);
            outline-offset: 2px;
            border-radius: 50%;
        }

/* Popup panel */
.info-tooltip__popup {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    background: var(--color-tooltip-bg);
    border-radius: 8px;
    padding: 16px;
    z-index: 100;
    box-shadow: var(--shadow-tooltip);
}

    /* Arrow — points down toward the icon.
   Color must exactly match --color-tooltip-bg. */
    .info-tooltip__popup::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 8px solid transparent;
        border-top-color: var(--color-tooltip-bg);
    }

.info-tooltip__popup-text {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-white);
    line-height: 1.6;
    margin: 0;
}

    .info-tooltip__popup-text + .info-tooltip__popup-text {
        margin-top: 12px;
    }

/* =============================================
   Password field — eye toggle
   ============================================= */

.input-password-wrapper {
    position: relative;
    display: flex;
    width: 100%;
}

.input-password-wrapper .form-input {
        padding-right: 44px;
    }

.password-toggle {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    border-radius: 0 4px 4px 0;
}

    .password-toggle img {
        width: 20px;
        height: 20px;
        display: block;
        pointer-events: none;
    }

    .password-toggle:focus-visible {
        outline: 2px solid var(--color-focus);
        outline-offset: -2px;
    }

/* =============================================
   Below-field elements
   ============================================= */

.forgot-password-row {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.forgot-password {
    font-size: 14px;
    line-height: 24px;
    color: var(--color-primary-btn);
}

    .forgot-password:hover {
        text-decoration: underline;
    }

    .forgot-password:focus-visible {
        outline: 2px solid var(--color-focus);
        outline-offset: 2px;
        border-radius: 2px;
    }

.btn-login {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-login-btn-text);
    background: var(--color-primary-btn);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background var(--transition);
}

    .btn-login:hover {
        background: var(--color-primary);
    }

    .btn-login:focus-visible {
        outline: 3px solid var(--color-focus);
        outline-offset: 2px;
    }

.login-help {
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    color: var(--color-text-muted);
    text-align: center;
}

    .login-help a {
        color: var(--color-primary-btn);
        text-decoration: underline;
    }

        .login-help a:hover {
            text-decoration: none;
        }

        .login-help a:focus-visible {
            outline: 2px solid var(--color-focus);
            outline-offset: 2px;
            border-radius: 2px;
        }

.login-terms {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-black);
    text-align: left;
    width: 100%;
    letter-spacing: -0.5px;
}

    .login-terms a {
        color: var(--color-primary-btn);
    }

        .login-terms a:hover {
            text-decoration: none;
        }

        .login-terms a:focus-visible {
            outline: 2px solid var(--color-focus);
            outline-offset: 2px;
            border-radius: 2px;
        }

/* Pending-registration info banner */
.v2-signin-pending-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--color-pending-bg);
    border: 1px solid var(--color-pending-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 13px;
    color: var(--color-pending-text);
    line-height: 1.5;
}

    .v2-signin-pending-info svg {
        flex-shrink: 0;
        margin-top: 2px;
    }

/* TollFreeNumber yellow pill badge */
.v2-phone-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--color-phone-badge-bg);
    border: 1px solid var(--color-phone-badge-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: var(--weight-medium);
    color: var(--color-phone-badge-text);
    margin-top: 14px;
}

.v2-phone-badge__dismiss {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-alert-warning-text);
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
}

    .v2-phone-badge__dismiss:hover {
        color: var(--color-phone-badge-dismiss-hover);
    }

/* =============================================
   Tablet  768px – 1199px
   ============================================= */

@media (min-width: 768px) and (max-width: 1199px) {
    .login-section {
        padding: 48px 32px;
    }
}

/* =============================================
   Mobile  ≤ 767px
   ============================================= */

@media (max-width: 767px) {
    .login-section {
        padding: 32px 16px;
    }

    .login-card {
        padding: 24px 16px;
        max-width: 100%;
    }

    .login-card__logo {
        width: 220px;
        height: auto;
    }

    .login-card__title {
        font-size: 17px;
    }

    /* On mobile the popup anchors to .form-label-row (full card width).
     .info-tooltip becomes non-positioned so its child escapes to
     the nearest positioned ancestor = .form-label-row. */
    .info-tooltip {
        position: static;
    }

    .info-tooltip__popup {
        left: 0;
        right: 0;
        transform: none;
        width: 324px;
    }
}

@media (max-width: 365px) {
    .info-tooltip__popup {
        width: 300px;
    }

    .info-tooltip__popup::after {
        left: 54%;
        transform: translateX(-8px);
    }
}

    @media (prefers-reduced-motion: reduce) {
        .btn-login {
            transition: none;
        }
    }