/* Account pages (Login, Register, EmailCode): one glass card centred over the shelf image.
   Steps are plain sections; auth.js shows one at a time. Without JS every step shows. */

.bt-auth {
    --bt-ink: #12324f;
    --bt-muted: #5b7189;
    --bt-cobalt: #0b4db0;
    --bt-cobalt-deep: #083c8c;
    --bt-shelf: 220, 235, 247;
    --bt-glass: rgba(255, 255, 255, .74);
    --bt-field: rgba(255, 255, 255, .34);
    --bt-field-focus: rgba(255, 255, 255, .62);
    --bt-line: rgba(18, 50, 79, .16);
    --bt-danger: #c0362c;
    --bt-radius: 28px;
    --bt-radius-sm: 14px;
    --bt-ease: cubic-bezier(.2, .8, .2, 1);
    min-height: 100vh;
    margin: 0;
    color: var(--bt-ink);
    background: rgb(var(--bt-shelf));
    font-family: "Lato", sans-serif;
}

.bt-auth.lpx-theme-dark, .bt-auth.lpx-theme-dim {
    --bt-ink: #e7eef6;
    --bt-muted: #a7b6c6;
    --bt-cobalt: #5b8cff;
    --bt-cobalt-deep: #3f74f0;
    --bt-shelf: 22, 34, 52;
    --bt-glass: rgba(18, 28, 44, .74);
    --bt-field: rgba(255, 255, 255, .05);
    --bt-field-focus: rgba(255, 255, 255, .1);
    --bt-line: rgba(231, 238, 246, .18);
    --bt-danger: #ff8a80;
}

/* ---------- stage ---------- */

/* 16:9 shelf (auth-bg.jpg): bottles on both sides, middle left clear for the card, no text baked in. */
.bt-auth-bg.lpx-login-image-area {
    position: fixed;
    inset: 0;
    min-height: 0;
    max-height: none;
    background-image: url(auth-bg.jpg?v=2); /* bump v when the image changes, so browsers drop the cached one */
    /* Whole image always visible (no bottle cut off); any spare edge is the image's own blue. */
    background-color: #D9EEF7;
    background-size: contain;
    background-position: center;
    animation: bt-settle 1.4s var(--bt-ease) both;
}

.bt-tagline {
    margin: 8px 0 0;
    max-width: 16ch;
    text-align: center;
    font-size: clamp(30px, 4.2vw, 48px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -.02em;
    color: var(--bt-cobalt);
    text-wrap: balance;
    animation: bt-rise .7s var(--bt-ease) .35s both;
}

.bt-auth-stage {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px 16px;
    gap: 16px;
}

.bt-card {
    width: 100%;
    max-width: 452px;
    padding: 28px 32px 30px;
    border-radius: var(--bt-radius);
    background: var(--bt-glass);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 30px 80px -24px rgba(8, 40, 90, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    backdrop-filter: blur(22px) saturate(1.4);
    animation: bt-rise .7s var(--bt-ease) .1s both;
}

.lpx-theme-dark .bt-card, .lpx-theme-dim .bt-card { border-color: rgba(255, 255, 255, .12); }

.bt-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.bt-card-head .bt-logo {
    flex: 1;
    height: 34px;
    background-size: auto 34px;
    background-position: left center;
}

.bt-lang .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--bt-line);
    font-size: 13px;
    color: var(--bt-muted);
    cursor: pointer;
}

.bt-lang .dropdown-toggle:hover { color: var(--bt-ink); }
.bt-lang .dropdown-menu { max-height: 60vh; overflow: auto; }

.bt-auth-foot { font-size: 13px; color: var(--bt-ink); opacity: .75; }
.bt-auth-foot .copyright-text a { color: inherit !important; }

/* ---------- progress ---------- */

.bt-progress {
    display: flex;
    gap: 6px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.bt-progress li {
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: var(--bt-line);
    overflow: hidden;
}

.bt-progress li::after {
    content: "";
    display: block;
    height: 100%;
    width: 0;
    background: var(--bt-cobalt);
    transition: width .45s var(--bt-ease);
}

.bt-progress li.is-done::after { width: 100%; }

/* ---------- steps ---------- */

.bt-steps { position: relative; }
.bt-steps.is-sizing { overflow: hidden; transition: height .35s var(--bt-ease); }

.bt-js .bt-step { display: none; }
.bt-js .bt-step.is-active { display: block; animation: bt-in .42s var(--bt-ease) both; }
.bt-js [data-dir="back"] .bt-step.is-active { animation-name: bt-in-back; }
.bt-step + .bt-step { margin-top: 28px; }
.bt-js .bt-step + .bt-step { margin-top: 0; }

.bt-title {
    margin: 0 0 6px;
    font-size: 27px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -.01em;
    color: var(--bt-cobalt);
}

.bt-sub {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--bt-muted);
}

.bt-chosen {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -10px 0 22px;
    font-size: 14px;
    color: var(--bt-muted);
}

.bt-chosen strong { color: var(--bt-ink); }

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

.bt-card .form-floating { margin-bottom: 14px; }
.bt-card .form-floating > label { color: var(--bt-muted); }

.bt-auth .bt-card .form-control {
    background: var(--bt-field);
    border: 1.5px solid var(--bt-line);
    border-radius: var(--bt-radius-sm);
    color: var(--bt-ink);
    box-shadow: none;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.bt-auth .bt-card .form-control:focus {
    background: var(--bt-field-focus);
    border-color: var(--bt-cobalt);
    box-shadow: 0 0 0 4px rgba(11, 77, 176, .14);
}

.bt-auth .bt-card .form-control[readonly] { opacity: .75; }

/* Keep browser autofill from painting a solid box over the glass. */
.bt-auth .bt-card .form-control:-webkit-autofill,
.bt-auth .bt-card .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--bt-ink);
    transition: background-color 99999s 0s;
}

.bt-card .form-floating > .form-control:focus ~ label,
.bt-card .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--bt-muted); }
.bt-card .form-floating > label::after { background: transparent !important; }

.bt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.bt-card .text-danger, .bt-card .field-validation-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--bt-danger) !important;
}

.bt-reveal-wrap { position: relative; }
.bt-reveal-wrap .form-control { padding-right: 52px; }

.bt-reveal {
    position: absolute;
    top: 10px;
    right: 8px;
    width: 40px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--bt-muted);
    cursor: pointer;
}

.bt-reveal:hover { color: var(--bt-cobalt); }

.bt-code {
    text-align: center;
    font-size: 30px !important;
    font-weight: 700;
    letter-spacing: .5em;
    padding-left: .5em !important;
    font-variant-numeric: tabular-nums;
}

.bt-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: 14px; }
.bt-check .form-check-input { margin-top: 2px; flex-shrink: 0; }
.bt-check a { color: var(--bt-cobalt); font-weight: 700; }

.bt-more { margin-bottom: 16px; font-size: 14px; }
.bt-more > summary { cursor: pointer; color: var(--bt-cobalt); font-weight: 700; width: max-content; }
.bt-more[open] > summary { margin-bottom: 12px; }

.bt-line-between {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    font-size: 13px;
    color: var(--bt-muted);
}

.bt-line-between::before, .bt-line-between::after { content: ""; flex: 1; height: 1px; background: var(--bt-line); }

.bt-split { display: flex; justify-content: space-between; align-items: center; margin: 2px 0 18px; font-size: 14px; }
.bt-split a { color: var(--bt-cobalt); font-weight: 700; }

/* ---------- model tiles (echo the shelf tiles behind) ---------- */

.bt-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }

.bt-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .6);
    border: 2px solid transparent;
    box-shadow: 0 1px 0 var(--bt-line);
    cursor: pointer;
    transition: border-color .2s, transform .2s var(--bt-ease), background-color .2s;
}

.lpx-theme-dark .bt-tile, .lpx-theme-dim .bt-tile { background: rgba(255, 255, 255, .06); }
.bt-tile:hover { transform: translateY(-2px); }
.bt-tile input { position: absolute; opacity: 0; pointer-events: none; }
.bt-tile svg { width: 26px; height: 26px; color: var(--bt-cobalt); }
.bt-tile strong { font-size: 16px; font-weight: 900; }
.bt-tile span { font-size: 13px; line-height: 1.35; color: var(--bt-muted); }
.bt-tile:has(input:checked) { border-color: var(--bt-cobalt); background: rgba(255, 255, 255, .9); animation: bt-pop .35s var(--bt-ease); }
.lpx-theme-dark .bt-tile:has(input:checked), .lpx-theme-dim .bt-tile:has(input:checked) { background: rgba(91, 140, 255, .14); }
.bt-tile:focus-within { outline: 3px solid rgba(11, 77, 176, .35); outline-offset: 2px; }

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

.bt-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    border-radius: var(--bt-radius-sm);
    border: 1.5px solid transparent;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, transform .12s, box-shadow .2s;
}

.bt-btn:active { transform: scale(.98); }
.bt-btn:focus-visible { outline: 3px solid rgba(11, 77, 176, .4); outline-offset: 2px; }
.bt-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.bt-btn-primary { background: var(--bt-cobalt); color: #fff; box-shadow: 0 10px 24px -12px rgba(11, 77, 176, .8); }
.bt-btn-primary:hover { background: var(--bt-cobalt-deep); color: #fff; }

.bt-btn-glass { background: rgba(255, 255, 255, .6); border-color: var(--bt-line); color: var(--bt-ink); }
.bt-btn-glass:hover { background: rgba(255, 255, 255, .9); border-color: var(--bt-cobalt); color: var(--bt-ink); }
.lpx-theme-dark .bt-btn-glass, .lpx-theme-dim .bt-btn-glass { background: rgba(255, 255, 255, .06); }

.bt-btn-text {
    width: auto;
    min-height: 0;
    padding: 4px 2px;
    background: none;
    color: var(--bt-cobalt);
    font-size: 14px;
}

.bt-btn-text:hover { text-decoration: underline; color: var(--bt-cobalt-deep); }

.bt-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.bt-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.bt-social .bt-btn { font-size: 15px; }
.bt-social .bt-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bt-stack > * + * { margin-top: 10px; }
.bt-nav { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.bt-nav .bt-btn-primary { flex: 1; }

.bt-btn.is-busy { color: transparent !important; pointer-events: none; }
.bt-btn.is-busy::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    animation: bt-spin .7s linear infinite;
}

.bt-btn-glass.is-busy::after { border-color: var(--bt-line); border-top-color: var(--bt-cobalt); }

.bt-foot-note { margin: 22px 0 0; text-align: center; font-size: 14px; color: var(--bt-muted); }
.bt-foot-note a { color: var(--bt-cobalt); font-weight: 700; }
.bt-fine { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--bt-muted); text-align: center; }
.bt-fine a { color: inherit; text-decoration: underline; }

/* alerts from ABP inside the card */
.bt-card .alert { border-radius: var(--bt-radius-sm); font-size: 14px; }

/* ---------- motion ---------- */

@keyframes bt-rise { from { opacity: 0; transform: translateY(28px) scale(.97); } }
@keyframes bt-settle { from { transform: scale(1.06); } }
@keyframes bt-in { from { opacity: 0; transform: translateX(32px); } }
@keyframes bt-in-back { from { opacity: 0; transform: translateX(-32px); } }
@keyframes bt-pop { 50% { transform: scale(1.045); } }
@keyframes bt-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .bt-auth *, .bt-auth *::before, .bt-auth *::after { animation: none !important; transition: none !important; }
}

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

@media (max-width: 520px) {
    .bt-auth-stage { justify-content: flex-start; padding-top: 16px; }
    .bt-card { padding: 22px 18px 24px; border-radius: 22px; }
    .bt-title { font-size: 24px; }
    .bt-tiles { grid-template-columns: 1fr; }
    .bt-tile { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
    .bt-tile span { flex-basis: 100%; padding-left: 38px; }
    .bt-row { grid-template-columns: 1fr; gap: 0; }
}