/* ------------------------------------------------------------------
   ThatBar - shared styling for the standalone public pages.

   Used by Default.aspx and login.aspx, and intended for signup and
   contact as they are brought across too. Nothing in here depends on a
   master page, Bootstrap or site.css, so a page only needs this file.
   ------------------------------------------------------------------ */

@font-face {
    font-family: Metropolis;
    src: url(/scripts/fonts/Metropolis-Regular.otf);
}

@font-face {
    font-family: MetropolisMedium;
    src: url(/scripts/fonts/Metropolis-Medium.otf);
}

:root {
    --tb-bg-top: #0d1428;
    --tb-bg-mid: #0e1423;
    --tb-bg-bottom: #0a0f1a;
    --tb-border: #2d5f7d;
    --tb-border-strong: #5f9cbd;
    --tb-panel: rgba(255, 255, 255, 0.02);
    --tb-field: #0c1424;
    --tb-field-border: #23394f;
    --tb-text: #e9edf2;
    --tb-text-muted: #93a4b8;
    --tb-accent: #06edff;
    --tb-danger: #ff8080;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--tb-bg-bottom);
    color: var(--tb-text);
    font-family: Metropolis, 'Segoe UI', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---------- page shells ---------------------------------------- */

/* The background lifts slightly towards the top and the outer edges,
   which is a vertical wash plus a soft shadow through the middle. */
.tb-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: radial-gradient(110% 85% at 50% 50%, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0) 72%), linear-gradient(180deg, var(--tb-bg-top) 0%, var(--tb-bg-mid) 50%, var(--tb-bg-bottom) 100%);
}

/* Home page: logo, actions and store badges pinned to the mock-up's
   thirds. The actions sit slightly below the midpoint, and a top margin
   moves them by half its value once space-between has redistributed.
   The thirds are spread inside tb-hero-main so the footer underneath
   does not take a share of them. */
.tb-page--hero {
    justify-content: flex-start;
    padding: 9.9vh 24px 5vh;
}

.tb-hero-main {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

    .tb-page--hero .tb-actions {
        margin-top: 6vh;
    }

/* Store redirect page: the logo, the prompt and the badges are one
   centred group with room between them, rather than bunched at the top
   of a tall phone screen with the rest of it empty. */
.tb-page--landing {
    justify-content: center;
    gap: 48px;
    padding: 8vh 24px;
}

    .tb-page--landing .tb-card-title {
        margin: 0;
        text-align: center;
    }

    .tb-page--landing .tb-stores {
        gap: 44px;
    }

/* Form pages: a single centred column. */
.tb-page--form {
    justify-content: flex-start;
    padding: 7vh 24px 6vh;
    gap: 40px;
}

/* ---------- logo ------------------------------------------------ */

.tb-logo {
    flex: 0 0 auto;
}

    .tb-logo img {
        display: block;
        width: 172px;
        max-width: 55vw;
        height: auto;
    }

/* ---------- buttons --------------------------------------------- */

.tb-actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 210px;
    height: 60px;
    padding: 0 22px;
    border: 1px solid var(--tb-border);
    border-radius: 6px;
    color: var(--tb-text);
    font-family: MetropolisMedium, Metropolis, 'Segoe UI', Arial, sans-serif;
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

    .tb-btn:hover, .tb-btn:focus-visible {
        border-color: var(--tb-border-strong);
        background-color: rgba(45, 95, 125, 0.16);
        color: #ffffff;
    }

    .tb-btn:focus-visible {
        outline: 2px solid var(--tb-border-strong);
        outline-offset: 3px;
    }

    .tb-btn svg {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
    }

/* Filled accent button for the one primary action on a form. */
.tb-btn--primary {
    border-color: var(--tb-accent);
    background-color: var(--tb-accent);
    color: #06121c;
}

    .tb-btn--primary:hover, .tb-btn--primary:focus-visible {
        border-color: #5df5ff;
        background-color: #5df5ff;
        color: #06121c;
    }

.tb-btn--block {
    width: 100%;
    min-width: 0;
}

/* ---------- store badges ---------------------------------------- */

/* The artwork is white on transparent, so the badges sit straight on the
   page background with no box of their own. Apple and Google both require
   the two to be matched on height, and the trimmed artwork shares an
   aspect ratio, so one height matches their widths as well. The padding
   keeps each link a comfortable size to tap. */
.tb-stores {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 38px;
}

.tb-store {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 7px;
    background-color: transparent;
}

    .tb-store:focus-visible {
        outline: 2px solid var(--tb-border-strong);
        outline-offset: 2px;
    }

    .tb-store img {
        display: block;
        width: auto;
        height: 40px;
    }

/* ---------- card and form --------------------------------------- */

.tb-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 440px;
    padding: 36px 34px 30px;
    border: 1px solid rgba(45, 95, 125, 0.55);
    border-radius: 10px;
    background-color: var(--tb-panel);
}

.tb-card-title {
    margin: 0 0 6px;
    font-family: MetropolisMedium, Metropolis, 'Segoe UI', Arial, sans-serif;
    font-size: 24px;
    font-weight: normal;
    line-height: 1.2;
}

.tb-card-intro {
    margin: 0 0 26px;
    color: var(--tb-text-muted);
    font-size: 15px;
    line-height: 1.5;
}

.tb-field {
    margin-bottom: 18px;
}

.tb-label {
    display: block;
    margin-bottom: 8px;
    color: var(--tb-text-muted);
    font-size: 14px;
}

.tb-input {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--tb-field-border);
    border-radius: 6px;
    background-color: var(--tb-field);
    color: var(--tb-text);
    font-family: Metropolis, 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .tb-input::placeholder {
        color: #61748a;
    }

    .tb-input:focus {
        border-color: var(--tb-accent);
        box-shadow: 0 0 0 3px rgba(6, 237, 255, 0.14);
        outline: none;
    }

.tb-actions-stacked {
    margin-top: 26px;
}

.tb-links {
    margin: 20px 0 0;
    text-align: center;
    font-size: 15px;
}

.tb-link {
    color: var(--tb-accent);
    text-decoration: none;
}

    .tb-link:hover, .tb-link:focus-visible {
        text-decoration: underline;
    }

/* Messages. ler88 is the class the login code-behind wraps its error
   text in, so it is styled here rather than at the call site. */
.tb-note {
    /* asp:Label renders a span, so this has to be blocked out explicitly */
    display: block;
    margin: 0 0 20px;
    padding: 12px 14px;
    border: 1px solid rgba(45, 95, 125, 0.55);
    border-radius: 6px;
    color: var(--tb-text-muted);
    font-size: 15px;
    line-height: 1.4;
}

    .tb-note:empty {
        display: none;
    }

.tb-error {
    margin: 16px 0 0;
    text-align: center;
    font-size: 15px;
}

.ler88 {
    color: var(--tb-danger);
}

.tb-footnote {
    margin: 4px 0 0;
    color: var(--tb-text-muted);
    font-size: 14px;
    text-align: center;
}

/* ---------- longer forms (sign up) ------------------------------ */

.tb-card--wide {
    max-width: 720px;
}

.tb-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.tb-section {
    margin: 30px 0 18px;
    padding-top: 22px;
    border-top: 1px solid rgba(45, 95, 125, 0.35);
    color: var(--tb-text);
    font-family: MetropolisMedium, Metropolis, 'Segoe UI', Arial, sans-serif;
    font-size: 18px;
}

    .tb-section:first-of-type {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

.tb-hint {
    margin: -2px 0 8px;
    color: var(--tb-text-muted);
    font-size: 13px;
    line-height: 1.45;
}

/* asp:DropDownList renders a select, so it is styled off the input rules */
.tb-select {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 12px;
    border: 1px solid var(--tb-field-border);
    border-radius: 6px;
    background-color: var(--tb-field);
    color: var(--tb-text);
    font-family: Metropolis, 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
}

    .tb-select:focus {
        border-color: var(--tb-accent);
        box-shadow: 0 0 0 3px rgba(6, 237, 255, 0.14);
        outline: none;
    }

/* asp:CheckBox renders <span><input><label></label></span>, so the row is
   laid out on the wrapper and the generated label is pulled inline. */
.tb-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--tb-text);
    font-size: 15px;
    line-height: 1.5;
}

    /* the generated input and label are wrapped in the span the validation
       scripts hook on to, so the row is laid out on that span as well */
    .tb-check > span {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .tb-check input[type="checkbox"] {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin: 2px 0 0;
        accent-color: var(--tb-accent);
    }

    .tb-check label {
        margin: 0;
    }

.tb-prose {
    margin: 0 0 16px;
    color: var(--tb-text-muted);
    font-size: 14px;
    line-height: 1.6;
}

    .tb-prose a {
        color: var(--tb-accent);
        text-decoration: none;
    }

        .tb-prose a:hover {
            text-decoration: underline;
        }

/* Field highlight applied by the sign up page's validateform() */
.formfielderror1 {
    border-color: var(--tb-danger) !important;
}

span.formfielderror1 {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid var(--tb-danger);
    border-radius: 4px;
}

.errpanel {
    margin-top: 20px;
    color: var(--tb-danger);
    font-size: 15px;
    line-height: 1.5;
}

    .errpanel:empty {
        display: none;
    }

    .errpanel ol {
        margin: 8px 0 0;
        padding-left: 20px;
    }

/* Full screen overlay shown while the account is created */
.tb-please-wait {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 24px;
    background-color: rgba(6, 12, 22, 0.92);
    color: var(--tb-text);
    font-size: 18px;
    text-align: center;
}

.tb-spinner {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(6, 237, 255, 0.25);
    border-top-color: var(--tb-accent);
    border-radius: 50%;
    animation: tb-spin 0.9s linear infinite;
}

@keyframes tb-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Bootstrap is not loaded on the standalone pages, but the sign up
   scripts toggle this class to reveal the manual address fields. */
.d-none {
    display: none !important;
}

/* ---------- public page footer ---------------------------------- */

.tb-footer {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 30px;
    color: var(--tb-text-muted);
    font-size: 13px;
    text-align: center;
}

    .tb-footer a {
        color: var(--tb-text-muted);
        text-decoration: none;
    }

        .tb-footer a:hover {
            color: var(--tb-text);
        }

.tb-footer-sep {
    padding: 0 8px;
}

/* ---------- long form content ----------------------------------- */

/* Legal documents are stored as HTML and rendered straight out of the
   database, so the elements they contain are styled by tag. */
.tb-doc {
    width: 100%;
    max-width: 780px;
    color: var(--tb-text);
    font-size: 15px;
    line-height: 1.65;
}

    .tb-doc h1, .tb-doc h2, .tb-doc h3, .tb-doc h4 {
        margin: 26px 0 10px;
        font-family: MetropolisMedium, Metropolis, 'Segoe UI', Arial, sans-serif;
        font-weight: normal;
        line-height: 1.3;
    }

    .tb-doc h1 { font-size: 24px; }
    .tb-doc h2 { font-size: 20px; }
    .tb-doc h3, .tb-doc h4 { font-size: 17px; }

    .tb-doc p, .tb-doc li {
        color: var(--tb-text-muted);
    }

    .tb-doc ul, .tb-doc ol {
        padding-left: 22px;
    }

    .tb-doc li {
        margin-bottom: 6px;
    }

    .tb-doc a {
        color: var(--tb-accent);
        text-decoration: none;
    }

        .tb-doc a:hover {
            text-decoration: underline;
        }

    .tb-doc table {
        width: 100%;
        border-collapse: collapse;
        margin: 14px 0;
    }

    .tb-doc th, .tb-doc td {
        padding: 8px 10px;
        border: 1px solid rgba(45, 95, 125, 0.4);
        text-align: left;
    }

/* ---------- small screens --------------------------------------- */

@media only screen and (max-width: 640px) {
    .tb-hero-main {
        justify-content: center;
        gap: 12vh;
    }

        .tb-page--hero .tb-actions {
            width: 100%;
            flex-direction: column;
            align-items: center;
            margin-top: 0;
            gap: 16px;
        }

            .tb-page--hero .tb-actions .tb-btn {
                width: 100%;
                max-width: 320px;
            }

    .tb-page--form {
        padding: 5vh 18px 5vh;
        gap: 30px;
    }

    .tb-card {
        padding: 28px 22px 24px;
    }
}