/* ------------------------------------------------------------------
   TradeLogin.css
   Styles for general/Trade.aspx - the login page (log in, forgot
   password and request a login).

   The page renders under master/Site5PublicGeneral.master, so
   everything here is scoped to .tl-* classes and assumes only that
   Bootstrap 5 is present.

   Created : 18-Sep-2026
   ------------------------------------------------------------------ */

/* Centre the login card vertically between the header and the footer.
   The master's <main class="twpg-main"> already stretches to fill that space (flex: 1 0 auto
   in layout5PublicGeneral.css); this file is only loaded by Trade.aspx, so no other page is
   affected. Even top/bottom padding so "centre" really is the centre. */
.twpg-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* "If you don't have your login details, click here ..." callout above the card.
   As wide as its sentence (so it stays on one line) and centred; it only wraps on screens
   too narrow for it. TWPG green so it is noticed before the form. */
.tl-help {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 1rem;
    padding: .85rem 1.1rem;
    background-color: #f3f9f0;
    border: 1px solid #cfe6c4;
    border-left: 5px solid #65b741;
    border-radius: .375rem;
    color: #333333;
    font-size: 1.05rem;
}

.tl-help-icon {
    flex-shrink: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: #65b741;
}

    /* A button (it opens the reset form, it does not navigate) that reads like a text link.
       Two classes so it wins over .btn and .tl-link. */
    .tl-help .tl-help-link {
        padding: 0;
        border: 0;
        font-size: inherit;
        font-weight: 700;
        line-height: inherit;
        vertical-align: baseline;
        color: #2f5c20;
        text-decoration: underline;
    }

        .tl-help .tl-help-link:hover,
        .tl-help .tl-help-link:focus {
            color: #65b741;
        }

/* One login card, centred. The approval notice above it uses the same width.
   560px lets the longest line on the card ("Enter your email address and we will email you
   new login details.", ~460px at 16px) sit on one line, with room for font differences. */
.tl-wrap {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

.tl-notice {
    margin-bottom: 1.5rem;
}

/* Same green top rule as the cards on general/OnlinePayment.aspx */
.tl-card,
.tl-modal {
    border-top: 4px solid #65b741;
}

    .tl-modal .modal-header,
    .tl-modal .modal-body {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }

    .tl-modal .modal-body {
        padding-bottom: 1.75rem;
    }

    .tl-card .card-body {
        padding: 1.75rem;
    }

.tl-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2f5c20;
    margin-bottom: .5rem;
}

/* Inputs, button and links on the login / reset card. The card is wide enough for the
   reset-password sentence; an input only needs room for a User ID, a password or an
   email address. */
/* Only the inputs are kept short - buttons, links and messages use the full width of the block */
.tl-form .form-control {
    max-width: 320px;
}

/* Messages fill the block but never widen it: width 0 keeps a long message out of the
   fit-content sizing below, min-width 100% then stretches it to whatever the block is. */
.tl-form .alert {
    width: 0;
    min-width: 100%;
}

/* Title, intro and form share one left edge, and that block is centred in the card.
   The block is as wide as its widest line (fit-content), so the reset-password sentence
   still stays on one line. */
#tl-login-block,
#tl-lost-panel {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.tl-intro {
    color: #6e6e6e;
    margin-bottom: 1.25rem;
}

/* ---------- Buttons ---------- */

.tl-btn {
    background-color: #65b741;
    border-color: #65b741;
    color: #ffffff;
    font-weight: 600;
}

    .tl-btn:hover,
    .tl-btn:focus,
    .tl-btn:active,
    .tl-btn:disabled {
        background-color: #57a236;
        border-color: #57a236;
        color: #ffffff;
    }

.tl-link {
    color: #2f5c20;
    text-decoration: none;
}

    .tl-link:hover,
    .tl-link:focus {
        color: #2f5c20;
        text-decoration: underline;
    }

/* ---------- Request a login: business type choice ---------- */

/* Both steps sit in one narrow, centred column inside the wide modal, as they did in
   Retail.master's #registerModal. Keeps the options and inputs from running the full width. */
.tl-req-col {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Request a login, step 2: keep the stacked fields compact */
#tl-req-step2 .form-label {
    margin-bottom: .25rem;
}

#tl-req-step2 .invalid-feedback {
    margin-top: .125rem;
}

/* One option per row, stacked like Retail.master's #registerModal */
.tl-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}

.tl-option {
    text-align: left;
    border: 1px solid #cccccc;
    background-color: #ffffff;
    color: #555555;
    padding: .75rem 1rem;
}

    .tl-option:hover {
        border-color: #65b741;
        background-color: #f3f9f0;
        color: #555555;
    }

.btn-check:checked + .tl-option {
    border-color: #65b741;
    background-color: #65b741;
    color: #ffffff;
}

.btn-check:focus-visible + .tl-option {
    box-shadow: 0 0 0 .25rem rgba(101, 183, 65, .35);
}

/* ---------- Request a login: done ---------- */

.tl-done-icon {
    display: inline-block;
    font-size: 5rem;
    line-height: 1;
    color: #65b741;
    margin-top: 1rem;
}