/*
 * Tfastunlocker sign-in, registration and password screens.
 *
 * The auth views are inherited from the base template, and their markup is
 * fine: semantic sections, labelled fields, an error summary that takes focus.
 * What they never had in this template was a stylesheet. The base template
 * carries these rules inside its own 4,500-line frontend sheet, which this
 * template does not load, so every auth page rendered as raw unstyled markup
 * with a full-width logo at the top.
 *
 * This is that missing layer, written against the design tokens so the auth
 * screens follow the admin base colour and the dark theme like everything else.
 *
 * Two things it also has to cover: the login and register pages use the
 * .auth-experience split layout, while the password-reset flow uses Bootstrap
 * cards and .btn--base from the base component library. Both are here, because
 * a customer who cannot read the reset form is just as stuck as one who cannot
 * read the login form.
 *
 * Everything is scoped under .tf-site, which wraps the public layout.
 */

/* -------------------------------------------------- split-panel layout -- */

.tf-site .auth-experience {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 8rem);
}

/* The story half. A brand image behind a dark scrim, so the copy stays
   readable whatever image the admin uploads. */
.tf-site .auth-experience__story {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--tf-7);
    padding: var(--tf-7) var(--tf-6);
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--tf-accent-deep) 92%, transparent),
            color-mix(in srgb, var(--tf-accent-bright) 78%, transparent)),
        var(--auth-image, none) center / cover no-repeat;
    background-blend-mode: multiply;
    color: #fff;
    overflow: hidden;
}

.tf-site .auth-experience__story::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(40rem 24rem at 20% 0%, #ffffff1f, transparent 70%);
    pointer-events: none;
}

.tf-site .auth-experience__brand {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    width: max-content;
}

/* Without an explicit height the site logo renders at its intrinsic size,
   which is what produced the enormous logo at the top of the page. */
.tf-site .auth-experience__brand img {
    width: auto;
    height: 2.25rem;
    max-height: 2.25rem;
    flex-shrink: 0;
}

.tf-site .auth-experience__story-copy { position: relative; z-index: 1; display: grid; gap: var(--tf-4); }

.tf-site .auth-experience__story-copy h2 {
    color: #fff;
    font-size: clamp(1.8rem, 2.6vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
    max-width: 18ch;
}

.tf-site .auth-experience__story-copy p { color: #ffffffcc; max-width: 42ch; }

.tf-site .auth-experience__story-copy ul {
    display: grid;
    gap: var(--tf-3);
    list-style: none;
    margin: var(--tf-2) 0 0;
    padding: 0;
}

.tf-site .auth-experience__story-copy li {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #ffffffdd;
    font-size: .95rem;
}

.tf-site .auth-experience__story-copy li i {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    background: #ffffff26;
    border-radius: var(--tf-radius-sm);
    font-size: 1.1rem;
}

/* The form half. */
.tf-site .auth-experience__panel {
    display: grid;
    place-items: center;
    padding: var(--tf-7) var(--tf-5);
    background: var(--tf-bg);
}

.tf-site .auth-experience__mobile-head { display: none; }
.tf-site .auth-experience__form-wrap { width: min(26rem, 100%); display: grid; gap: var(--tf-4); }

.tf-site .auth-experience__back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--tf-muted);
    width: max-content;
}

.tf-site .auth-experience__back:hover { color: var(--tf-accent); }
.tf-site .auth-experience__heading { display: grid; gap: .4rem; }

.tf-site .auth-experience__heading h1 {
    font-size: clamp(1.8rem, 3vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -.03em;
}

.tf-site .auth-experience__heading p { font-size: .95rem; }

/* ------------------------------------------------------------- fields -- */

.tf-site .auth-form { display: grid; gap: var(--tf-4); }
.tf-site .auth-form__two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tf-3); }
.tf-site .auth-field { display: grid; gap: .35rem; }

.tf-site .auth-field label,
.tf-site .auth-field__label-row label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--tf-strong);
}

.tf-site .auth-field__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--tf-3);
}

.tf-site .auth-field__label-row a { font-size: .8rem; font-weight: 600; color: var(--tf-accent); }
.tf-site .auth-field__label-row a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The icon and the reveal button sit inside the control, so the input itself
   is padded around them rather than overlapping. */
.tf-site .auth-field__control {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--tf-surface);
    border: 1px solid var(--tf-border-strong);
    border-radius: var(--tf-radius-sm);
    transition: border-color .15s var(--tf-ease), box-shadow .15s var(--tf-ease);
}

.tf-site .auth-field__control:focus-within {
    border-color: var(--tf-accent);
    box-shadow: 0 0 0 3px var(--tf-accent-soft);
}

.tf-site .auth-field__control > i {
    flex-shrink: 0;
    padding-inline: .75rem 0;
    font-size: 1.15rem;
    color: var(--tf-muted);
}

.tf-site .auth-field__control input,
.tf-site .auth-field__control select {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    color: var(--tf-text);
    font: inherit;
    padding: .75rem;
}

.tf-site .auth-field__control input:focus,
.tf-site .auth-field__control select:focus { outline: none; }

.tf-site .auth-field__toggle {
    flex-shrink: 0;
    background: none;
    border: 0;
    padding: .5rem .75rem;
    color: var(--tf-muted);
    cursor: pointer;
    font-size: 1.05rem;
}

.tf-site .auth-field__toggle:hover { color: var(--tf-accent); }
.tf-site .auth-field__hint { font-size: .78rem; color: var(--tf-muted); }
.tf-site .auth-field__error { font-size: .8rem; font-weight: 500; color: var(--tf-bad); }
.tf-site .auth-field__status { font-size: .78rem; color: var(--tf-muted); }

.tf-site .auth-session-note {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: var(--tf-surface-2);
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius-sm);
    padding: .6rem .75rem;
    font-size: .8rem;
    color: var(--tf-muted);
}

.tf-site .auth-session-note i { color: var(--tf-accent); font-size: 1rem; }

/* Checkbox beside its label, not stacked above it. */
.tf-site .auth-consent {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .85rem;
    color: var(--tf-prose);
}

.tf-site .auth-consent input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: .15rem;
    accent-color: var(--tf-accent);
}

.tf-site .auth-consent label { margin: 0; line-height: 1.5; }
.tf-site .auth-consent a { color: var(--tf-accent); font-weight: 600; }

/* -------------------------------------------------------- alert, submit -- */

.tf-site .auth-alert {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    background: var(--tf-bad-bg);
    border: 1px solid color-mix(in srgb, var(--tf-bad) 35%, transparent);
    border-radius: var(--tf-radius);
    padding: var(--tf-3) var(--tf-4);
}

.tf-site .auth-alert i { color: var(--tf-bad); font-size: 1.2rem; flex-shrink: 0; }
.tf-site .auth-alert strong { display: block; color: var(--tf-bad); font-size: .9rem; }
.tf-site .auth-alert p { font-size: .85rem; margin: .2rem 0 .3rem; }
.tf-site .auth-alert a { font-size: .85rem; font-weight: 600; color: var(--tf-bad); text-decoration: underline; }

.tf-site .auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    background: var(--tf-gradient);
    color: var(--tf-on-accent);
    border: 0;
    border-radius: var(--tf-radius-sm);
    padding: .85rem 1.4rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--tf-glow);
    transition: transform .15s var(--tf-ease), box-shadow .2s var(--tf-ease);
}

.tf-site .auth-submit:hover { transform: translateY(-2px); box-shadow: var(--tf-shadow-lg); }
.tf-site .auth-submit:disabled { background: var(--tf-surface-hover); color: var(--tf-muted); box-shadow: none; transform: none; }

.tf-site .auth-switch { text-align: center; font-size: .88rem; }
.tf-site .auth-switch a { color: var(--tf-accent); font-weight: 600; }
.tf-site .auth-switch a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------- social -- */

.tf-site .auth-social { display: grid; gap: var(--tf-3); }

.tf-site .auth-social__divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--tf-3);
    font-size: .78rem;
    color: var(--tf-muted);
}

.tf-site .auth-social__divider::before,
.tf-site .auth-social__divider::after { content: ""; height: 1px; background: var(--tf-border); }

.tf-site .auth-social__options { display: grid; grid-auto-flow: column; gap: var(--tf-2); }

.tf-site .auth-social__options a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    background: var(--tf-surface);
    border: 1px solid var(--tf-border-strong);
    border-radius: var(--tf-radius-sm);
    padding: .6rem .5rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--tf-text);
}

.tf-site .auth-social__options a:hover { background: var(--tf-surface-hover); border-color: var(--tf-accent); color: var(--tf-accent); }

/* ------------------------------------------- password and verify flows -- */

/* These views use the base component library rather than .auth-experience, so
   they need the Bootstrap-shaped classes styled too. */
.tf-site .section.container { padding-block: var(--tf-8); }

.tf-site .card.custom--card {
    background: var(--tf-surface);
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius-lg);
    box-shadow: var(--tf-shadow);
}

.tf-site .card.custom--card .card-body { padding: var(--tf-6); }
.tf-site .card.custom--card :is(h1, h2, h3, h4, h5, h6) { color: var(--tf-strong); }
.tf-site .form-group { display: grid; gap: .35rem; margin-bottom: var(--tf-4); }
.tf-site .form-group label { font-size: .85rem; font-weight: 600; color: var(--tf-strong); }

.tf-site .auth-form__input-group {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--tf-surface);
    border: 1px solid var(--tf-border-strong);
    border-radius: var(--tf-radius-sm);
}

.tf-site .auth-form__input-group:focus-within {
    border-color: var(--tf-accent);
    box-shadow: 0 0 0 3px var(--tf-accent-soft);
}

.tf-site .auth-form__input-icon { flex-shrink: 0; padding-inline: .75rem 0; color: var(--tf-muted); font-size: 1.1rem; }

.tf-site .auth-form__input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    color: var(--tf-text);
    font: inherit;
    padding: .75rem;
}

.tf-site .auth-form__input:focus { outline: none; }

.tf-site .auth-form__toggle-pass {
    flex-shrink: 0;
    background: none;
    border: 0;
    padding: .5rem .75rem;
    color: var(--tf-muted);
    cursor: pointer;
}

/* The base .btn--base is defined in a stylesheet this template does not load,
   so the reset and verify buttons would otherwise render as bare text. */
.tf-site .btn--base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--tf-gradient);
    color: var(--tf-on-accent);
    border: 0;
    border-radius: var(--tf-radius-sm);
    padding: .85rem 1.4rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--tf-glow);
}

.tf-site .btn--base:hover { transform: translateY(-2px); color: var(--tf-on-accent); }

/* One box per digit. */
.tf-site .verification-code-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tf-2); }

.tf-site .verification-code-wrapper input {
    width: 3rem;
    height: 3.4rem;
    background: var(--tf-surface);
    border: 1px solid var(--tf-border-strong);
    border-radius: var(--tf-radius-sm);
    color: var(--tf-strong);
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
}

.tf-site .verification-code-wrapper input:focus {
    outline: none;
    border-color: var(--tf-accent);
    box-shadow: 0 0 0 3px var(--tf-accent-soft);
}

.tf-site .verification-text { text-align: center; color: var(--tf-prose); margin-bottom: var(--tf-4); }

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 900px) {
    /* The story panel is decoration. On a phone the form is the whole point,
       so the panel is dropped and its brand mark reappears above the form. */
    .tf-site .auth-experience { grid-template-columns: 1fr; min-height: 0; }
    .tf-site .auth-experience__story { display: none; }
    .tf-site .auth-experience__mobile-head { display: block; margin-bottom: var(--tf-2); }

    .tf-site .auth-experience__mobile-head .auth-experience__brand { color: var(--tf-strong); }
    .tf-site .auth-experience__panel { padding: var(--tf-6) var(--tf-4); align-content: start; }
}

@media (max-width: 560px) {
    .tf-site .auth-form__two-col { grid-template-columns: 1fr; }
    .tf-site .auth-social__options { grid-auto-flow: row; }
    .tf-site .card.custom--card .card-body { padding: var(--tf-5) var(--tf-4); }
    .tf-site .verification-code-wrapper input { width: 2.6rem; height: 3rem; font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tf-site :is(.auth-submit, .btn--base):hover { transform: none; }
}