/* Source code is the property of GitBusiness.com
   As of Dec. 2nd, 2020  Stan Switaj - Owner/CEO of GitBusiness.com
   Copyright 2020, All Rights Reserved
   Programmers:
               Stan Switaj - CEO/Lead Programmer

   Shared styling for the signed-out pages (login, create account). Standalone:
   it does not depend on bootstrap or on the template stylesheets, so these
   pages load a fraction of what the front page does.
*/

:root {
    --gb-navy:        #0a1033;
    --gb-navy-deep:   #060a22;
    --gb-blue:        #2563eb;
    --gb-violet:      #7c3aed;
    --gb-cyan:        #22d3ee;
    --gb-ink:         #0f172a;
    --gb-body:        #475569;
    --gb-muted:       #64748b;
    --gb-line:        #e2e8f0;
    --gb-danger:      #dc2626;
    --gb-radius:      14px;
    --gb-radius-lg:   22px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--gb-navy-deep);
    color: var(--gb-body);
    font-family: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;   /* nothing may push the page sideways on a phone */
}

img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- shell */

/* The photograph sits under the whole page and the card is centred on it,
   the way this page was originally laid out. The overlay is what makes the
   card readable against a busy image without hiding it. */
.gb-auth {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* dvh accounts for the phone browser's collapsing address bar, which vh
       does not -- with vh alone the layout jumps as the bar hides. */
    min-height: 100dvh;
    background:
        linear-gradient(135deg, rgba(6,10,34,.82) 0%, rgba(10,16,51,.62) 45%, rgba(37,99,235,.5) 100%),
        url('../images/body-bg.jpg') center/cover no-repeat fixed;
}

/* ---------------------------------------------------------- centred card */

.gb-auth-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    padding: 36px 20px 44px;
}

.gb-auth-logo {
    display: inline-block;
    margin-bottom: 22px;
    line-height: 0;
}

.gb-auth-logo img { height: 38px; width: auto; }

.gb-auth-card {
    width: 100%;
    max-width: 430px;
    padding: 30px 24px 28px;
    background: #fff;
    border: 1px solid var(--gb-line);
    border-radius: var(--gb-radius-lg);
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 44px rgba(10,16,51,.12);
}

.gb-auth-card h2 {
    margin: 0 0 6px;
    color: var(--gb-ink);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.gb-auth-card .gb-auth-lede {
    margin: 0 0 24px;
    color: var(--gb-muted);
    font-size: 15px;
}

/* ---------------------------------------------------------------- form */

.gb-field { margin-bottom: 17px; }

.gb-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--gb-ink);
    font-size: 14px;
    font-weight: 700;
}

.gb-input-wrap { position: relative; display: block; }

.gb-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 15px;
    pointer-events: none;
    transition: color .16s ease;
}

/* The template shipped bare inputs with no width, so they rendered at the
   browser default of roughly 20 characters and did not line up with anything. */
.gb-auth-card input[type="text"],
.gb-auth-card input[type="password"],
.gb-auth-card input[type="email"],
.gb-auth-card input[type="tel"] {
    width: 100%;
    padding: 13px 15px 13px 42px;
    border: 1.5px solid var(--gb-line);
    border-radius: var(--gb-radius);
    background: #fff;
    color: var(--gb-ink);
    font-family: inherit;
    font-size: 16px;   /* 16px stops iOS zooming the page on focus */
    line-height: 1.4;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.gb-auth-card input::placeholder { color: #a3aec0; }

.gb-auth-card input:focus {
    outline: none;
    border-color: var(--gb-blue);
    box-shadow: 0 0 0 4px rgba(37,99,235,.14);
}

.gb-input-wrap:focus-within > i { color: var(--gb-blue); }

/* room for the reveal button */
.gb-field-password .gb-auth-card input,
.gb-auth-card .gb-has-toggle { padding-right: 46px; }

.gb-reveal {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease;
}

.gb-reveal:hover { color: var(--gb-blue); background: rgba(37,99,235,.08); }

/* --------------------------------------------------------------- button */

.gb-auth-submit {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 14px 20px;
    border: 0;
    border-radius: var(--gb-radius);
    background: linear-gradient(135deg, var(--gb-blue), var(--gb-violet));
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(37,99,235,.3);
    transition: filter .16s ease, transform .16s ease;
    -webkit-appearance: none;
    appearance: none;
}

.gb-auth-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.gb-auth-submit:active { transform: translateY(0); }

/* ----------------------------------------------------------- meta bits */

.gb-auth-terms {
    margin: 18px 0 0;
    color: var(--gb-muted);
    font-size: 12.75px;
    line-height: 1.6;
    text-align: center;
}

.gb-auth-terms a { color: var(--gb-blue); text-decoration: none; font-weight: 600; }
.gb-auth-terms a:hover { text-decoration: underline; }

.gb-auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0 18px;
    color: var(--gb-muted);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gb-auth-divider::before,
.gb-auth-divider::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--gb-line);
}

.gb-auth-alt {
    display: block;
    width: 100%;
    padding: 13px 20px;
    border: 1.5px solid var(--gb-line);
    border-radius: var(--gb-radius);
    background: #fff;
    color: var(--gb-ink);
    font-size: 15.5px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: border-color .16s ease, background-color .16s ease;
}

.gb-auth-alt:hover { border-color: var(--gb-blue); background: rgba(37,99,235,.05); }

.gb-auth-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 20px;
    color: var(--gb-muted);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.gb-auth-back:hover { color: var(--gb-blue); }

.gb-auth-foot { text-align: center; }

/* --------------------------------------------------------- result area */

#resultarea:not(:empty) {
    margin-top: 18px;
    padding: 13px 15px;
    border: 1px solid rgba(220,38,38,.32);
    border-radius: var(--gb-radius);
    background: rgba(220,38,38,.07);
    color: var(--gb-danger);
    font-size: 14.5px;
    font-weight: 600;
}

#resultarea.gb-ok {
    border-color: rgba(22,163,74,.32);
    background: rgba(22,163,74,.08);
    color: #15803d;
}

.gb-auth-submit:disabled {
    filter: grayscale(.35);
    opacity: .75;
    cursor: default;
    transform: none;
}

/* ------------------------------------------------- sign-up page extras */

.gb-auth-card-wide { max-width: 620px; }

/* Two fields side by side once there is room -- password/confirm and
   email/confirm are natural pairs. */
.gb-row { display: grid; grid-template-columns: 1fr; gap: 0; }

@media (min-width: 620px) {
    .gb-row { grid-template-columns: 1fr 1fr; gap: 0 16px; }
}

.gb-hint {
    display: block;
    margin-top: 6px;
    color: var(--gb-muted);
    font-size: 12.75px;
    line-height: 1.5;
}

.gb-optional {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--gb-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: 1px;
}

.gb-plan-badge {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 22px;
    padding: 11px 15px;
    border: 1px solid rgba(37,99,235,.28);
    border-radius: var(--gb-radius);
    background: rgba(37,99,235,.07);
    color: #1d4ed8;
    font-size: 14.5px;
    font-weight: 700;
}

/* ---- password checklist ---- */

.gb-rules {
    display: grid;
    gap: 7px;
    margin: 2px 0 20px;
    padding: 14px 16px;
    border: 1px solid var(--gb-line);
    border-radius: var(--gb-radius);
    background: #f8fafc;
    list-style: none;
}

@media (min-width: 620px) {
    .gb-rules { grid-template-columns: 1fr 1fr; gap: 7px 18px; }
}

.gb-rules li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--gb-muted);
    font-size: 13px;
    font-weight: 600;
    transition: color .16s ease;
}

.gb-rules li i { color: #cbd5e1; font-size: 13px; transition: color .16s ease; }

.gb-rules li.gb-met { color: #15803d; }
.gb-rules li.gb-met i { color: #16a34a; }

.gb-rules code {
    padding: 1px 5px;
    border-radius: 5px;
    background: #e8edf6;
    color: var(--gb-ink);
    font-size: 12px;
}

/* ---- international phone field ----
   intl-tel-input wraps the input in .iti and puts the country selector inside
   it, so this field takes no left icon of its own and the plugin's chrome is
   restyled to match the other inputs instead. */

.gb-field-phone .iti { display: block; width: 100%; }

.gb-field-phone .iti__flag-container { border-radius: var(--gb-radius) 0 0 var(--gb-radius); }

.gb-field-phone .iti--separate-dial-code .iti__selected-flag {
    border-radius: var(--gb-radius) 0 0 var(--gb-radius);
    background: #f1f5f9;
}

.gb-field-phone input[type="text"] { padding-left: 15px; }

.gb-field-phone .iti--separate-dial-code input[type="text"] { padding-left: 100px; }

.gb-field-phone .iti__country-list {
    border: 1px solid var(--gb-line);
    border-radius: var(--gb-radius);
    box-shadow: 0 18px 44px rgba(10,16,51,.16);
    font-size: 14.5px;
}

.gb-field-phone.gb-invalid input[type="text"] {
    border-color: rgba(220,38,38,.55);
    background: rgba(220,38,38,.04);
}

/* ---- success / continue ---- */

.gb-continue {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 13px 20px;
    border: 0;
    border-radius: var(--gb-radius);
    background: linear-gradient(135deg, var(--gb-blue), var(--gb-violet));
    color: #fff;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 700;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.gb-continue:hover { filter: brightness(1.08); }

/* The continue button is injected only once the account exists. It used to sit
   in the markup from page load with visibility:hidden. */
#resultarea strong { display: block; margin-bottom: 4px; font-size: 15.5px; }
#resultarea span { display: block; font-weight: 500; line-height: 1.6; }

/* --------------------------------------------------- redirect / signed out */

.gb-redirect-card { text-align: center; }

.gb-redirect-icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gb-blue), var(--gb-violet));
    color: #fff;
    font-size: 25px;
    box-shadow: 0 12px 28px rgba(37,99,235,.32);
}

.gb-redirect-card .gb-auth-lede { margin-bottom: 22px; }

.gb-redirect-card #gb-count {
    display: inline-block;
    min-width: 1.1em;
    color: var(--gb-ink);
    font-weight: 800;
    font-variant-numeric: tabular-nums;   /* stops the text jiggling as it counts */
}

.gb-redirect-bar {
    height: 6px;
    margin: 0 0 24px;
    border-radius: 999px;
    background: #e8edf6;
    overflow: hidden;
}

.gb-redirect-bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gb-blue), var(--gb-violet));
}

.gb-redirect-primary { text-decoration: none; line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
    .gb-redirect-bar span { transition: none !important; width: 100% !important; }
}

/* -------------------------------------------------------------- layout */

@media (min-width: 900px) {
    .gb-auth-main { padding: 56px 40px; }
    .gb-auth-card { padding: 38px 34px 34px; }
    .gb-auth-logo img { height: 42px; }
}

/* ---- phones and small tablets ---- */

@media (max-width: 899px) {
    .gb-auth-main {
        /* clears the notch / rounded corners on a phone in landscape */
        padding-left: max(18px, env(safe-area-inset-left));
        padding-right: max(18px, env(safe-area-inset-right));
    }

    /* The card is the page on a phone: let it use the full width it has. */
    .gb-auth-card { max-width: 100%; }

    /* A fixed attachment is expensive to repaint while scrolling on mobile and
       is ignored outright by several mobile browsers. */
    .gb-auth { background-attachment: scroll; }
}

@media (max-width: 599px) {
    .gb-auth-logo { margin-bottom: 18px; }
    .gb-auth-logo img { height: 30px; }

    .gb-auth-main { padding: 26px 18px 34px; }
    .gb-auth-card { padding: 26px 20px 24px; border-radius: 18px; }
    .gb-auth-card h2 { font-size: 22px; }
    .gb-auth-card .gb-auth-lede { margin-bottom: 20px; font-size: 14.5px; }

    /* Comfortable touch targets. */
    .gb-auth-card input[type="text"],
    .gb-auth-card input[type="password"],
    .gb-auth-card input[type="email"],
    .gb-auth-card input[type="tel"] { padding-top: 14px; padding-bottom: 14px; }

    .gb-auth-submit { padding: 15px 20px; }
    .gb-auth-alt { padding: 14px 20px; }
}

/* Short landscape phones: tighten the vertical rhythm so the card fits. */
@media (max-height: 560px) and (max-width: 899px) {
    .gb-auth-main { padding-top: 20px; padding-bottom: 24px; }
    .gb-auth-logo { margin-bottom: 14px; }
    .gb-auth-logo img { height: 26px; }
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid rgba(37,99,235,.5);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .001ms !important; }
}