/* First2Host shared page banner -------------------------------------------
   The shell is a viewport-height flex column. Page banners must never be
   selected as the flex item to shrink when the page content is taller than
   the viewport. These rules also keep public and authenticated headers on
   the same layout system. */

body.f2h-shell > .f2h-page-banner {
    flex: 0 0 auto;
    width: 100%;
}

/* Keep short utility/account pages attached to the footer instead of ending
   halfway down a tall viewport. */
body.f2h-shell > .f2h-main {
    width: 100%;
    flex: 1 0 auto;
}

/* These purpose-built catalogue/configurator routes carry their own premium
   mast. Suppress the generic WHMCS banner so users do not see two headings. */
body:is(.f2h-template-order-hub, .f2h-template-order-catalog, .f2h-template-vps-builder, .f2h-template-cloud-vps-builder, .f2h-template-dedicated-builder) > .f2h-page-banner {
    display: none;
}

body.f2h-shell .f2h-page-banner-inner {
    min-height: 136px;
    align-items: center;
    padding-block: 24px;
}

body.f2h-shell .f2h-page-banner-copy {
    min-width: 0;
    max-width: 760px;
    flex: 1 1 0;
    overflow-wrap: anywhere;
}

body.f2h-shell .f2h-page-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.05;
}

body.f2h-shell .f2h-page-context {
    max-width: 720px;
    margin: 9px 0 0;
    color: #b7c8e3;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
}

body.f2h-shell .f2h-page-banner-side {
    min-width: 0;
    max-width: 440px;
    flex: 0 1 auto;
    display: grid;
    justify-items: end;
    align-content: center;
    gap: 16px;
}

body.f2h-shell .f2h-page-banner-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

body.f2h-shell .f2h-page-banner-actions:empty {
    display: none;
}

body.f2h-shell .f2h-page-banner-actions > a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid rgba(120, 183, 238, .28);
    border-radius: 10px;
    color: #deebfa;
    background: rgba(7, 25, 61, .58);
    box-shadow: inset 0 1px rgba(255, 255, 255, .06);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-decoration: none;
}

body.f2h-shell .f2h-page-banner-actions > a:hover,
body.f2h-shell .f2h-page-banner-actions > a:focus-visible {
    border-color: rgba(82, 164, 255, .58);
    color: #fff;
    background: rgba(28, 57, 126, .78);
}

@media (max-width: 991.98px) {
    body.f2h-shell .f2h-page-banner-inner {
        align-items: flex-start;
    }

    body.f2h-shell .f2h-page-banner-side {
        min-width: 0;
    }
}

@media (max-width: 767.98px) {
    body.f2h-shell .f2h-page-banner-inner {
        min-height: 0;
        display: grid;
        gap: 16px;
        padding-block: 22px;
    }

    body.f2h-shell .f2h-page-banner-side {
        width: 100%;
        justify-items: start;
        gap: 12px;
    }

    body.f2h-shell .f2h-page-banner .breadcrumb,
    body.f2h-shell .f2h-page-banner-actions {
        justify-content: flex-start;
    }
}