/* Remaining Razor Pages (Identity account pages): Bootstrap 3/4 markup from the Identity scaffold
   styled on the Bootstrap 5 + TMM theme from MeterAdmin.Portal.UI. */

.form-group {
    margin-bottom: 1rem;
}

.form-group > label,
.control-label {
    display: inline-block;
    margin-bottom: .35rem;
    font-weight: 600;
}

.checkbox label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 400;
}

.validation-summary-errors ul {
    margin-bottom: .5rem;
    padding-left: 1.1rem;
}

.validation-summary-valid {
    display: none;
}

.input-validation-error {
    border-color: var(--bs-danger);
}

/* The account pages are short forms: keep them readable on wide screens. */
.tmm-main > .row > .col-md-4 {
    min-width: min(100%, 24rem);
}

.recovery-code {
    font-family: var(--bs-font-monospace);
}

/* Login landing page, after themeterman.co.za/client-login: green banner, then the intro over a pale background. */
.tmm-landing-inner {
    max-width: 1140px;
    margin: 0 auto;
}

.tmm-landing-banner {
    background: var(--tmm-green) url(/img/login/banner.jpg) center / cover no-repeat;
    padding: 3.5rem 1.5rem;
}

.tmm-landing-banner h1 {
    margin: 0;
    color: #fff;
    font-weight: 300;
    font-size: clamp(2rem, 5vw, 3rem);
    text-transform: uppercase;
}

.tmm-landing-body {
    position: relative;
    padding: 3.5rem 1.5rem;
    background: url(/img/login/background.webp) center / cover no-repeat fixed;
}

.tmm-landing-body::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .5);
}

.tmm-landing-body > .tmm-landing-inner {
    position: relative;
}

.tmm-landing-body h2 {
    color: var(--tmm-green);
    font-weight: 700;
    font-size: clamp(1.6rem, 3.5vw, 2.25rem);
    margin-bottom: 1.25rem;
}

.tmm-landing-badge {
    max-width: 100%;
    height: auto;
}

.tmm-landing-lead {
    max-width: 48rem;
    margin-bottom: 1.75rem;
}

.tmm-landing-card {
    max-width: 30rem;
    border: 0;
    box-shadow: 0 .25rem 1.25rem rgba(0, 0, 0, .08);
}

.tmm-landing-body .btn-secondary {
    white-space: normal;
}

@media (max-width: 767.98px) {
    .tmm-landing-banner { padding: 2rem 1rem; }
    .tmm-landing-body { padding: 2rem 1rem; background-attachment: scroll; }
}