/* BFO branding. Client account and billing component styles remain inherited. */
.header .navbar-light,
.header .main-navbar-wrapper {
    background: #0b1722;
}
.header .main-navbar-wrapper {
    border-top: 1px solid #21323f;
    border-bottom: 1px solid #21323f;
}
.header .navbar-brand,
.header .navbar-light .navbar-brand,
.header .navbar-light .toolbar .nav-link,
.header .main-navbar-wrapper .navbar-nav > li > a {
    color: #e7f1f6;
}
.header .navbar-brand .logo-img {
    max-width: 220px;
    max-height: 56px;
    object-fit: contain;
}
.header .main-navbar-wrapper .navbar-nav > li > a:hover,
.header .main-navbar-wrapper .navbar-nav > li > a:focus {
    color: #83e7f0;
}
header.header .search {
    border: 1px solid #3b5365;
    border-radius: 7px;
    overflow: hidden;
    background: #142535;
}
header.header .search .btn,
header.header .search .form-control {
    background: #142535;
    color: #edf5f9;
}
header.header .search .form-control::placeholder {
    color: #b8cbd7;
    opacity: 1;
}
header.header .search:focus-within {
    outline: 2px solid #8be9f1;
    outline-offset: 2px;
}
header.header .toolbar .cart-btn {
    border-color: #385365;
    background: #101f2c;
    color: #edf5f9;
}
header.header .toolbar .badge-info {
    background: #6ceaf2;
    color: #05151c;
}
header.header .main-navbar-wrapper .dropdown-menu {
    background: #ffffff;
    color: #212529;
}
header.header .main-navbar-wrapper .dropdown-menu a.dropdown-item {
    color: #212529;
}
header.header .main-navbar-wrapper .dropdown-menu a.dropdown-item:hover,
header.header .main-navbar-wrapper .dropdown-menu a.dropdown-item:focus {
    background: #eaf2f5;
    color: #07111b;
}

/* The landing page always works without :has(); it enhances the surrounding
   vendor shell in browsers that support it. No account-page styles depend on it. */
body.primary-bg-color:has(.bfo-hosting-home) {
    background: #07111b;
    color: #d5e2ea;
}
body:has(.bfo-hosting-home) .modal-content,
body:has(.bfo-hosting-home) .popover,
body:has(.bfo-hosting-home) .sidebar .card {
    color: #212529;
}
body:has(.bfo-hosting-home) .master-breadcrumb,
body:has(.bfo-hosting-home) #main-body,
body:has(.bfo-hosting-home) .footer {
    background: #07111b;
}
body:has(.bfo-hosting-home) .master-breadcrumb {
    border-color: #21323f;
}
body:has(.bfo-hosting-home) .master-breadcrumb .breadcrumb {
    background: transparent;
}
body:has(.bfo-hosting-home) .master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #8ea9bc;
}
body:has(.bfo-hosting-home) .master-breadcrumb .breadcrumb,
body:has(.bfo-hosting-home) .master-breadcrumb .breadcrumb .active,
body:has(.bfo-hosting-home) .footer {
    color: #a8bdcb;
}
body:has(.bfo-hosting-home) .footer .btn {
    color: #d5e2ea;
}
body:has(.bfo-hosting-home) .master-breadcrumb a,
body:has(.bfo-hosting-home) .footer a {
    color: #8ed8e5;
}

.bfo-hosting-home {
    --bfo-text: #edf5f9;
    --bfo-muted: #b3c6d3;
    --bfo-accent: #5de5ee;
    --bfo-line: #263c4b;
    color: var(--bfo-text);
    background: #07111b;
    padding: 12px 0 28px;
    font-family: inherit;
}
.bfo-hosting-home a {
    text-decoration: none;
}
.bfo-hosting-home a:focus-visible {
    outline: 3px solid #b8f4ff;
    outline-offset: 5px;
}
.bfo-hosting-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--bfo-line);
    border-radius: 18px;
    background-color: #0c1926;
    background-image: linear-gradient(90deg, #0c1926 0%, rgba(12, 25, 38, .98) 31%, rgba(12, 25, 38, .72) 60%, rgba(12, 25, 38, .15) 100%), url('../img/games-worlds.png');
    background-size: cover;
    background-position: center, 100% 50%;
}
.bfo-hosting-hero-content {
    max-width: 660px;
    padding: 54px 48px 42px;
}
.bfo-hosting-status {
    display: inline-block;
    margin: 0 0 27px;
    padding: 6px 12px;
    border: 1px solid #395769;
    border-radius: 99px;
    background: #142b3b;
    color: #d2e7f2;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}
.bfo-hosting-eyebrow {
    color: #a6d5df;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .14em;
    margin: 0 0 12px;
}
.bfo-hosting-home h1 {
    margin: 0 0 22px;
    color: var(--bfo-text);
    font-size: clamp(34px, 4.4vw, 54px);
    font-weight: 700;
    line-height: 1.13;
    letter-spacing: -.045em;
}
.bfo-hosting-intro {
    max-width: 470px;
    margin: 0;
    color: #c5d8e3;
    font-size: 16px;
    line-height: 1.75;
}
.bfo-hosting-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 27px 0 19px;
}
.bfo-hosting-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 46px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}
.bfo-hosting-button-primary {
    background: var(--bfo-accent);
    color: #06141b;
}
.bfo-hosting-button-primary:hover,
.bfo-hosting-button-primary:focus {
    background: #90f0f6;
    color: #06141b;
}
.bfo-hosting-button-secondary {
    border-color: #456074;
    background: rgba(12, 25, 38, .7);
    color: var(--bfo-text);
}
.bfo-hosting-button-secondary:hover,
.bfo-hosting-button-secondary:focus {
    background: #20364a;
    color: #ffffff;
}
.bfo-hosting-launch-note {
    max-width: 450px;
    margin: 0;
    color: #b7cad8;
    font-size: 12px;
    line-height: 1.7;
}
.bfo-hosting-workspace {
    margin: 44px 0 30px;
}
.bfo-hosting-section-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 24px;
}
.bfo-hosting-section-heading .bfo-hosting-eyebrow {
    margin-bottom: 7px;
}
.bfo-hosting-home h2 {
    margin: 0;
    color: var(--bfo-text);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.03em;
}
.bfo-hosting-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.bfo-hosting-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px;
    border: 1px solid var(--bfo-line);
    border-radius: 12px;
    background: #0d1b28;
}
.bfo-hosting-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 22px;
    border: 1px solid #29495c;
    border-radius: 10px;
    background: #132e3e;
    color: #79e6ef;
    font-size: 19px;
}
.bfo-hosting-home h3 {
    margin: 0 0 12px;
    color: var(--bfo-text);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}
.bfo-hosting-card p {
    margin-bottom: 24px;
    color: var(--bfo-muted);
    font-size: 14px;
    line-height: 1.8;
}
.bfo-hosting-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #89e8f0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
}
.bfo-hosting-card .bfo-hosting-text-link {
    margin-top: auto;
}
.bfo-hosting-text-link:hover,
.bfo-hosting-text-link:focus {
    color: #d2fbff;
    text-decoration: underline;
}
.bfo-hosting-account-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 26px;
    padding: 24px 0 0;
    border-top: 1px solid var(--bfo-line);
    font-size: 13px;
    line-height: 1.8;
}
.bfo-hosting-account-links span {
    color: var(--bfo-muted);
}
.bfo-hosting-account-links a {
    color: #d7e8f1;
}
.bfo-hosting-account-links a:hover,
.bfo-hosting-account-links a:focus {
    color: var(--bfo-accent);
    text-decoration: underline;
}
@media (max-width: 991px) {
    .bfo-hosting-hero-content { padding: 40px 32px; }
    .bfo-hosting-grid { grid-template-columns: 1fr; }
    .bfo-hosting-card { padding: 25px; }
    .bfo-hosting-card-icon { margin-bottom: 16px; }
    .bfo-hosting-card p { max-width: 600px; margin-bottom: 18px; }
}
@media (max-width: 575px) {
    .bfo-hosting-home { padding-top: 0; }
    .bfo-hosting-hero { border-radius: 12px; background-image: linear-gradient(90deg, rgba(12, 25, 38, .98), rgba(12, 25, 38, .82)), url('../img/games-worlds.png'); }
    .bfo-hosting-hero-content { padding: 30px 22px; }
    .bfo-hosting-status { margin-bottom: 22px; }
    .bfo-hosting-intro { font-size: 15px; }
    .bfo-hosting-actions { flex-direction: column; }
    .bfo-hosting-workspace { margin-top: 32px; }
    .bfo-hosting-home h2 { font-size: 23px; }
    .bfo-hosting-account-links { gap: 12px 20px; }
    .bfo-hosting-account-links span { flex-basis: 100%; }
}