/**
 * B2B Registration — premium corporate onboarding
 */

/* Every colour in this file already funnels through these six locals, so pointing them at the
   global theme tokens themes the whole page in one edit. The previous literal is kept as each
   var() fallback: if partials/theme_tokens is ever not rendered, this file paints exactly what
   it painted before. See resources/views/partials/theme_tokens.blade.php. */
:root {
    --reg-bg: var(--hs-page, #eef1f6);
    --reg-surface: var(--hs-surface-raised, #ffffff);
    --reg-text: var(--hs-text, #0f172a);
    --reg-muted: var(--hs-text-muted, #64748b);
    --reg-border: var(--hs-border, #e2e8f0);
    --reg-border-focus: var(--hs-brand, var(--primary-color, #313f51));
    --reg-radius: 12px;
    --reg-radius-lg: 16px;
    --reg-shadow: 0 1px 2px rgba(var(--hs-shadow-rgb, 15, 23, 42), 0.04), 0 16px 48px rgba(var(--hs-shadow-rgb, 15, 23, 42), 0.08);
    --reg-font: "Inter", "Segoe UI", system-ui, sans-serif;
}

html body.bg-full-screen-image.b2b-reg-page {
    background: var(--reg-bg) !important;
    background-image: none !important;
}

.b2b-reg {
    min-height: 100vh;
    display: flex;
    font-family: var(--reg-font);
    -webkit-font-smoothing: antialiased;
}

.b2b-reg__brand {
    display: none;
    flex: 0 0 44%;
    max-width: 44%;
    position: relative;
    overflow: hidden;
    background: var(--hs-text, #111827);
}

@media (min-width: 992px) {
    .b2b-reg__brand {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 40px 48px 48px;
    }
}

.b2b-reg__brand-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(160deg, rgba(var(--hs-text-rgb, 15, 23, 42), 0.92) 0%, rgba(var(--hs-text-rgb, 15, 23, 42), 0.75) 40%, rgba(var(--hs-brand-rgb, 49, 63, 81), 0.85) 100%),
        linear-gradient(to top, rgba(var(--hs-text-rgb, 15, 23, 42), 0.95) 0%, transparent 50%);
    z-index: 1;
}

.b2b-reg__brand-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.45;
}

.b2b-reg__brand-top,
.b2b-reg__brand-content {
    position: relative;
    z-index: 2;
}

.b2b-reg__brand-logo {
    height: 40px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.b2b-reg__brand-badge {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hs-text-inverse, #fff);
    background: rgba(var(--hs-surface-raised-rgb, 255, 255, 255), 0.12);
    border: 1px solid rgba(var(--hs-surface-raised-rgb, 255, 255, 255), 0.2);
    border-radius: 999px;
    backdrop-filter: blur(8px);
}

.b2b-reg__brand-content h2 {
    font-size: clamp(1.75rem, 2.5vw, 2.125rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 14px;
    letter-spacing: -0.025em;
    color: var(--hs-text-inverse, #fff);
}

.b2b-reg__brand-content > p {
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 32px;
    color: rgba(var(--hs-text-inverse-rgb, 255, 255, 255), 0.82);
    max-width: 380px;
}

.b2b-reg__brand-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.b2b-reg__brand-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(var(--hs-text-inverse-rgb, 255, 255, 255), 0.9);
}

.b2b-reg__brand-features li i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 16px;
    color: var(--hs-accent-ink, #6ee7b7);
}

.b2b-reg__main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px 32px;
    overflow-y: auto;
}

@media (min-width: 992px) {
    .b2b-reg__main {
        padding: 32px 40px;
    }
}

.b2b-reg__panel {
    width: 100%;
    max-width: 640px;
    background: var(--reg-surface);
    border-radius: var(--reg-radius-lg);
    box-shadow: var(--reg-shadow);
    border: 1px solid var(--reg-border);
    overflow: hidden;
}

.b2b-reg__panel-top {
    padding: 24px 28px 0;
}

@media (min-width: 768px) {
    .b2b-reg__panel-top {
        padding: 32px 36px 0;
    }
}

.b2b-reg__panel-top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.b2b-reg__logo img {
    height: 38px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

.b2b-reg__step-badge {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--reg-muted);
    padding: 6px 12px;
    background: var(--hs-surface, #f8fafc);
    border: 1px solid var(--reg-border);
    border-radius: 999px;
}

.b2b-reg__step-badge span {
    color: var(--reg-text);
}

.b2b-reg__progress {
    height: 3px;
    background: var(--hs-surface-alt, #f1f5f9);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 24px;
}

.b2b-reg__progress-fill {
    height: 100%;
    width: 33.33%;
    background: linear-gradient(90deg, var(--primary-color, #313f51), var(--hs-text, #1a2332));
    border-radius: 999px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-reg__alert {
    margin: 0 28px 16px;
    padding: 12px 16px;
    background: var(--hs-danger-softer, #fef2f2);
    border-left: 3px solid var(--hs-danger, #ef4444);
    border-radius: 0 var(--reg-radius) var(--reg-radius) 0;
    color: var(--hs-danger-ink, #b91c1c);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .b2b-reg__alert {
        margin: 0 36px 16px;
    }
}

.b2b-reg__title-block {
    padding: 0 28px 4px;
}

@media (min-width: 992px) {
    .b2b-reg__title-block--mobile-only {
        display: none;
    }
}

@media (min-width: 768px) {
    .b2b-reg__title-block {
        padding: 0 36px 4px;
    }
}

.b2b-reg__title-block h1 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--reg-text);
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}

.b2b-reg__title-block p {
    font-size: 13px;
    color: var(--reg-muted);
    margin: 0;
    line-height: 1.5;
}

.b2b-reg__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0 28px 20px;
    border-bottom: 1px solid var(--reg-border);
}

@media (min-width: 768px) {
    .b2b-reg__steps {
        padding: 0 36px 24px;
        gap: 12px;
    }
}

.b2b-reg__step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--reg-radius);
    background: var(--hs-surface, #f8fafc);
    border: 1px solid transparent;
    opacity: 0.55;
    transition: opacity 0.2s, background 0.2s, border-color 0.2s;
}

.b2b-reg__step.is-active {
    opacity: 1;
    background: var(--hs-surface-raised, #fff);
    border-color: var(--reg-border);
    box-shadow: 0 1px 3px rgba(var(--hs-shadow-rgb, 15, 23, 42), calc(0.06 * var(--hs-shadow-boost, 1)));
}

.b2b-reg__step.is-done {
    opacity: 1;
    background: rgba(var(--hs-brand-rgb, 49, 63, 81), 0.04);
}

.b2b-reg__step-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--hs-surface-inset, #e2e8f0);
    color: var(--reg-muted);
    font-size: 14px;
    transition: background 0.2s, color 0.2s;
}

.b2b-reg__step.is-active .b2b-reg__step-icon,
.b2b-reg__step.is-done .b2b-reg__step-icon {
    background: var(--primary-color, #313f51);
    color: var(--hs-text-inverse, #fff);
}

.b2b-reg__step-text {
    min-width: 0;
}

.b2b-reg__step-num {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--reg-muted);
    line-height: 1;
    margin-bottom: 2px;
}

.b2b-reg__step.is-active .b2b-reg__step-num {
    color: var(--primary-color, #313f51);
}

.b2b-reg__step-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--reg-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575px) {
    .b2b-reg__step-text {
        display: none;
    }

    .b2b-reg__step {
        justify-content: center;
        padding: 8px;
    }
}

.b2b-reg__body {
    padding: 24px 28px 28px;
}

@media (min-width: 768px) {
    .b2b-reg__body {
        padding: 28px 36px 32px;
    }
}

.b2b-reg__page-intro {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--reg-border);
}

.b2b-reg__page-intro h2 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--reg-text);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.b2b-reg__page-intro p {
    font-size: 13px;
    color: var(--reg-muted);
    margin: 0;
    line-height: 1.5;
}

.b2b-reg__grid.row {
    margin-left: -8px;
    margin-right: -8px;
}

.b2b-reg__grid > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

.b2b-reg__section {
    width: 100%;
    margin: 4px 0 12px;
    padding-top: 4px;
}

.b2b-reg__section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--reg-muted);
    margin: 0 0 8px;
}

.b2b-reg__section-line {
    display: none;
}

.b2b-reg__panel .form-group,
.b2b-reg__panel .form-label-group {
    margin-bottom: 14px;
}

.b2b-reg__panel .form-label-group label {
    display: none;
}

.b2b-reg__panel .form-control,
.b2b-reg__panel select.form-control {
    height: 46px;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid var(--reg-border);
    border-radius: var(--reg-radius);
    padding: 10px 14px;
    color: var(--reg-text);
    background: var(--hs-surface-raised, #fff);
    box-shadow: 0 1px 2px rgba(var(--hs-shadow-rgb, 15, 23, 42), calc(0.02 * var(--hs-shadow-boost, 1)));
    transition: border-color 0.15s, box-shadow 0.15s;
}

.b2b-reg__panel .form-control:hover:not(:focus),
.b2b-reg__panel select.form-control:hover:not(:focus) {
    border-color: var(--hs-border, #cbd5e1);
}

.b2b-reg__panel .form-control::placeholder {
    color: var(--hs-text-subtle, #94a3b8);
}

.b2b-reg__panel .form-control:focus,
.b2b-reg__panel select.form-control:focus {
    border-color: var(--reg-border-focus);
    box-shadow: 0 0 0 3px rgba(var(--hs-shadow-rgb, 49, 63, 81), calc(0.14 * var(--hs-shadow-boost, 1)));
    outline: none;
}

.b2b-reg__panel textarea.form-control {
    height: auto;
    min-height: 96px;
    resize: vertical;
    line-height: 1.5;
}

.b2b-reg__panel .invalid-feedback {
    font-size: 12px;
    margin-top: 4px;
}

.b2b-reg__panel .invalid-feedback strong {
    font-weight: 500;
    color: var(--hs-danger-ink, #dc2626);
}

.b2b-reg__panel .custom-file {
    height: auto;
}

.b2b-reg__panel .custom-file-input {
    height: 100%;
    cursor: pointer;
}

.b2b-reg__panel .custom-file-label {
    display: flex;
    align-items: center;
    min-height: 72px;
    line-height: 1.4;
    border: 1.5px dashed var(--hs-border, #cbd5e1);
    border-radius: var(--reg-radius);
    background: var(--hs-surface, #f8fafc);
    font-size: 13px;
    font-weight: 500;
    color: var(--reg-muted);
    padding: 16px 110px 16px 16px;
    transition: border-color 0.15s, background 0.15s;
}

.b2b-reg__panel .custom-file-input:focus ~ .custom-file-label,
.b2b-reg__panel .custom-file-label:hover {
    border-color: var(--reg-border-focus);
    background: var(--hs-surface-alt, #f1f5f9);
}

.b2b-reg__panel .custom-file-label::after {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    height: 36px;
    line-height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    background: var(--primary-color, #313f51);
    color: var(--hs-text-inverse, #fff);
    font-weight: 600;
    font-size: 12px;
    border: none;
    content: "Browse";
}

.b2b-reg__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--reg-border);
}

.b2b-reg__actions > .col-md-6 {
    flex: 1 1 calc(50% - 5px);
    max-width: calc(50% - 5px);
    padding: 0;
}

@media (max-width: 575px) {
    .b2b-reg__actions > .col-md-6 {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.b2b-reg__panel .btn_next,
.b2b-reg__panel .btn_login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--reg-radius);
    border: none;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    text-decoration: none;
}

.b2b-reg__actions .col-md-6:first-child:not(:empty) .btn_next {
    background: var(--hs-surface-raised, #fff);
    color: var(--hs-text-muted, #475569);
    border: 1px solid var(--reg-border);
    box-shadow: 0 1px 2px rgba(var(--hs-shadow-rgb, 15, 23, 42), calc(0.04 * var(--hs-shadow-boost, 1)));
}

.b2b-reg__actions .col-md-6:first-child:not(:empty) .btn_next:hover {
    background: var(--hs-surface, #f8fafc);
    border-color: var(--hs-border-strong, #94a3b8);
    color: var(--reg-text);
    text-decoration: none;
}

.b2b-reg__actions .col-md-6:last-child .btn_next,
.b2b-reg__actions .btn_login {
    background: var(--primary-color, #313f51);
    color: var(--hs-text-inverse, #fff) !important;
    box-shadow: 0 2px 8px rgba(var(--hs-shadow-rgb, 49, 63, 81), calc(0.25 * var(--hs-shadow-boost, 1)));
}

.b2b-reg__actions .col-md-6:last-child .btn_next:hover,
.b2b-reg__actions .btn_login:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 14px rgba(var(--hs-shadow-rgb, 49, 63, 81), calc(0.3 * var(--hs-shadow-boost, 1)));
    color: var(--hs-text-inverse, #fff) !important;
    text-decoration: none;
}

.b2b-reg__footer {
    padding: 16px 28px 24px;
    text-align: center;
    font-size: 13px;
    color: var(--reg-muted);
    background: var(--hs-surface, #f8fafc);
    border-top: 1px solid var(--reg-border);
}

@media (min-width: 768px) {
    .b2b-reg__footer {
        padding: 18px 36px 28px;
    }
}

.b2b-reg__footer .link_login {
    color: var(--primary-color, #313f51);
    font-weight: 600;
    margin-left: 4px;
    text-decoration: none;
}

.b2b-reg__footer .link_login:hover {
    text-decoration: underline;
}

.b2b-reg-page .app-content .content-overlay,
.b2b-reg-page .app-content .header-navbar-shadow {
    display: none;
}

.b2b-reg-page .content-wrapper,
.b2b-reg-page .content-body {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.b2b-reg-page .card.my-5,
.b2b-reg-page .card.rounded-0 {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

html[data-textdirection="rtl"] .b2b-reg__alert {
    border-left: none;
    border-right: 3px solid var(--hs-danger, #ef4444);
    border-radius: var(--reg-radius) 0 0 var(--reg-radius);
}

html[data-textdirection="rtl"] .b2b-reg__footer .link_login {
    margin-left: 0;
    margin-right: 4px;
}

html[data-textdirection="rtl"] .b2b-reg__panel .custom-file-label {
    padding: 16px 16px 16px 110px;
}

html[data-textdirection="rtl"] .b2b-reg__panel .custom-file-label::after {
    right: auto;
    left: 12px;
}

/* ==========================================================================
   Dual-product strip on the auth brand panel — flights and hotels, equal weight.
   Visual language matches the public landing page (public/b2b/intro/css/landing.css).
   ========================================================================== */

.b2b-auth-products {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 22px;
}

.b2b-auth-product {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--hs-text-inverse, #fff);
    background: rgba(var(--hs-surface-raised-rgb, 255, 255, 255), 0.13);
    border: 1px solid rgba(var(--hs-surface-raised-rgb, 255, 255, 255), 0.24);
    backdrop-filter: blur(8px);
    transition: background .18s ease, transform .18s ease;
}

.b2b-auth-product:hover {
    background: rgba(var(--hs-surface-raised-rgb, 255, 255, 255), 0.2);
    transform: translateY(-1px);
}

.b2b-auth-product i {
    font-size: 13px;
    opacity: 0.95;
}

/* A soft accent per product so the pair reads as two things, not one repeated chip. */
.b2b-auth-product--hotels {
    box-shadow: inset 3px 0 0 0 var(--hs-accent, #14b8a6);
}

.b2b-auth-product--flights {
    box-shadow: inset 3px 0 0 0 var(--hs-accent, #38bdf8);
}

[dir="rtl"] .b2b-auth-product--hotels,
[dir="rtl"] .b2b-auth-product--flights {
    box-shadow: inset -3px 0 0 0 currentColor;
}

@media (prefers-reduced-motion: reduce) {
    .b2b-auth-product { transition: none; }
    .b2b-auth-product:hover { transform: none; }
}

/* ==========================================================================
   Brand panel artwork — product-neutral.

   The project ships aviation photography only (every image under public/ is an
   aircraft, terminal or runway), so leaning on a photo made the sign-in journey
   read as flights-only. The panel is composed here instead: a deep brand ground
   with one warm glow per product — teal for hotels, sky for flights — plus a fine
   dot grid for texture. No stock photography required, and nothing to 404.
   ========================================================================== */

.b2b-reg__brand {
    background:
        radial-gradient(560px 340px at 84% 16%, rgba(var(--hs-accent-rgb, 20, 184, 166), 0.30), transparent 62%),
        radial-gradient(600px 360px at 10% 86%, rgba(var(--hs-accent-rgb, 56, 189, 248), 0.26), transparent 62%),
        linear-gradient(155deg, var(--hs-brand, #0b1220) 0%, var(--hs-brand, #12233c) 54%, var(--hs-text, #0e2b36) 100%);
}

/* Fine dot grid + a soft diagonal sheen, layered under the content. */
.b2b-reg__brand::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        radial-gradient(rgba(var(--hs-surface-raised-rgb, 255, 255, 255), 0.16) 1px, transparent 1px),
        linear-gradient(115deg, rgba(var(--hs-surface-raised-rgb, 255, 255, 255), 0.05) 0%, transparent 42%);
    background-size: 22px 22px, 100% 100%;
    opacity: 0.55;
    pointer-events: none;
}

/* The overlay was there to darken a photograph; with no photo it would only mute
   the artwork, so soften it to a bottom vignette that keeps the copy readable. */
.b2b-reg__brand-overlay {
    background: linear-gradient(to top, rgba(var(--hs-text-rgb, 8, 14, 26), 0.72) 0%, transparent 55%) !important;
}

.b2b-reg__brand-img { display: none !important; }

.b2b-reg__brand-top,
.b2b-reg__brand-content {
    position: relative;
    z-index: 2;
}

/* ── select2 pickers (phone code, country, agency city) ──────────────────────
   select2 hides the <select> and renders its own container next to it, so the
   panel's .form-control rules never reach it. Match them here instead. */
.b2b-reg__panel .select2-container {
    width: 100% !important;
}

.b2b-reg__panel .select2-container .select2-selection--single {
    height: 46px;
    border: 1px solid var(--reg-border);
    border-radius: var(--reg-radius);
    background: var(--hs-surface-raised, #fff);
    box-shadow: 0 1px 2px rgba(var(--hs-shadow-rgb, 15, 23, 42), calc(0.02 * var(--hs-shadow-boost, 1)));
    transition: border-color 0.15s, box-shadow 0.15s;
}

.b2b-reg__panel .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 44px;
    padding-left: 14px;
    font-size: 14px;
    color: var(--reg-text);
}

.b2b-reg__panel .select2-container .select2-selection--single .select2-selection__placeholder {
    color: var(--hs-text-subtle, #94a3b8);
}

.b2b-reg__panel .select2-container .select2-selection--single .select2-selection__arrow {
    height: 44px;
}

.b2b-reg__panel .select2-container--default:hover .select2-selection--single {
    border-color: var(--hs-border, #cbd5e1);
}

.b2b-reg__panel .select2-container--open .select2-selection--single,
.b2b-reg__panel .select2-container--focus .select2-selection--single {
    border-color: var(--reg-border-focus);
    box-shadow: 0 0 0 3px rgba(var(--hs-shadow-rgb, 49, 63, 81), calc(0.14 * var(--hs-shadow-boost, 1)));
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--reg-border-focus, #313f51);
}

/* ==========================================================================
   THEMED BRAND PANEL
   Tokens come from resources/views/partials/theme_tokens.blade.php, derived from the
   three colours on `tenants` (Admin > Tenants). See app/Helpers/ThemeHelper.php.

   Appended as one override block, matching the pattern the composed-panel block above
   already established: it is additive, it wins on source order rather than specificity,
   and deleting it restores the previous panel exactly. Nothing here changes layout --
   only colour, and the background-image the panel never had.

   WHY THE COPY FLIPS TO DARK. The panel used to be a dark navy composition because the
   project shipped aviation photography only and there was no brand artwork to show. There
   is now: --hs-img-login-bg defaults to the brand's own login backdrop, which is a light
   beige field. White copy on that is unreadable, so every colour here resolves against
   --hs-on-page, which is the ink themePalette() picked for the wash. Set a DARK page
   colour in the admin and the same rules flip back to light copy on their own -- that is
   why they are written against the token and not against a hardcoded var(--hs-brand, #0b1220).

   Every declaration keeps its previous value as the var() fallback, so an unstyled or
   token-less render is the old panel, not a broken one.
   ========================================================================== */

.b2b-reg__brand {
    background-color: var(--hs-page, #0b1220);
    background-image: var(--hs-img-login-bg, none);
    background-size: cover;
    /* From the slot's configured anchor, not a hardcoded centre: this artwork keeps its logo in the
       top-left corner, and a centred crop cut it off on shorter or narrower panels. */
    background-position: var(--hs-img-login-bg-position, left top);
    background-repeat: no-repeat;
}

/* Dot grid: ink-coloured now, and lighter, because it sits on a light field. */
.b2b-reg__brand::before {
    background-image:
        radial-gradient(rgba(var(--hs-on-page-rgb, 255, 255, 255), 0.10) 1px, transparent 1px),
        linear-gradient(115deg, rgba(var(--hs-on-page-rgb, 255, 255, 255), 0.04) 0%, transparent 42%);
    /* Through a token so it reverts on its own when the theme is switched off, and so a
       dark page colour brings the grid back to full strength. */
    opacity: var(--hs-panel-grid-opacity, 0.55);
}

/* Bottom vignette in the WASH colour rather than near-black: it now exists to lift the
   artwork's darker lower curve away from the copy, not to darken a photograph. */
.b2b-reg__brand-overlay {
    background: linear-gradient(to top, rgba(var(--hs-page-rgb, 8, 14, 26), 0.62) 0%, transparent 55%) !important;
}

/* The knock-to-white filter existed to make a coloured logo legible on the dark panel.
   On the brand's own light backdrop it erases the logo entirely. */
.b2b-reg__brand-logo {
    /* The knock-to-white filter is wrong on a light backdrop and right on a dark one, so it
       follows the page colour. Written as a token so switching the theme off restores the
       original `brightness(0) invert(1)` rather than leaving a colour logo on a dark panel. */
    filter: var(--hs-logo-filter, brightness(0) invert(1));
}

.b2b-reg__brand-badge {
    color: var(--hs-on-page, #ffffff);
    background: rgba(var(--hs-on-page-rgb, 255, 255, 255), 0.08);
    border-color: rgba(var(--hs-on-page-rgb, 255, 255, 255), 0.20);
}

.b2b-reg__brand-content h2 {
    color: var(--hs-on-page, #ffffff);
}

.b2b-reg__brand-content > p {
    color: rgba(var(--hs-on-page-rgb, 255, 255, 255), 0.78);
}

.b2b-reg__brand-features li {
    color: rgba(var(--hs-on-page-rgb, 255, 255, 255), 0.88);
}

/* --ink rather than --accent: this is a small glyph on a light field, where the raw
   accent is a mid-tone that fails contrast at 13-16px. */
.b2b-reg__brand-features li i {
    color: var(--hs-accent-ink, #6ee7b7);
}

/* Product chips live inside the brand panel, so they follow the same ink. */
.b2b-reg__brand .b2b-auth-product {
    color: var(--hs-on-page, #ffffff);
    background: rgba(var(--hs-on-page-rgb, 255, 255, 255), 0.10);
    border-color: rgba(var(--hs-on-page-rgb, 255, 255, 255), 0.22);
}

.b2b-reg__brand .b2b-auth-product:hover {
    background: rgba(var(--hs-on-page-rgb, 255, 255, 255), 0.17);
}

/* The two product accents stay distinguishable but are drawn from the theme: hotels take
   the brand, flights the accent, so the pair still reads as two things. */
.b2b-reg__brand .b2b-auth-product--hotels {
    box-shadow: inset 3px 0 0 0 var(--hs-brand, #14b8a6);
}

.b2b-reg__brand .b2b-auth-product--flights {
    box-shadow: inset 3px 0 0 0 var(--hs-accent, #38bdf8);
}