/* =====================================================================
   Host Our Sites - WHMCS client area (child of Twenty-One)
   Brand: https://hostoursites.com/brand/
   Colour, type and radius tokens live in :root so they can be matched
   1:1 with the Bricks global variables on hostoursites.com.
   ===================================================================== */

:root {
    /* Brand palette */
    --hos-midnight: #0B1A3B;        /* Midnight Rack: dark bg, body text on light */
    --hos-midnight-raised: #13285A; /* Midnight Raised: panels on dark */
    --hos-cyan: #2CB8EE;            /* Signal Cyan: primary buttons, highlights (never text on light) */
    --hos-fibre: #1E6FE0;           /* Fibre Blue: fills, gradient end */
    --hos-uplink: #7FD6F7;          /* Uplink: gradient start, soft tints */
    --hos-amber: #FFB547;           /* Status Amber: one accent per layout */
    --hos-link: #1A5FC4;            /* Link Blue: links + eyebrows on light */
    --hos-cloud: #F3F8FC;           /* Cloud White: main light bg */
    --hos-slate: #4A5878;           /* Slate: secondary text on light */
    --hos-mist: #A9BBD6;            /* Mist: secondary text on dark */
    --hos-hairline: #D5E1EE;        /* Hairline: dividers, card borders */
    --hos-white: #FFFFFF;
    --hos-gradient: linear-gradient(135deg, #7FD6F7 0%, #2CB8EE 50%, #1E6FE0 100%);

    /* Type */
    --hos-font-head: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
    --hos-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Shape (brand page doesn't define these - keep in sync with Bricks) */
    --hos-radius-sm: 6px;
    --hos-radius: 10px;
    --hos-radius-lg: 16px;
    --hos-shadow: 0 1px 2px rgba(11, 26, 59, .06), 0 4px 16px rgba(11, 26, 59, .06);

    /* Bootstrap variable bridge */
    --primary: var(--hos-cyan);
    --blue: var(--hos-fibre);
    --font-family-sans-serif: var(--hos-font-body);
}

/* ---------- Base ---------- */
html { font-size: 16px; }

body.hos,
body.hos.primary-bg-color {
    background-color: var(--hos-cloud);
    color: var(--hos-midnight);
    font-family: var(--hos-font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.hos h1, .hos h2, .hos h3, .hos h4, .hos h5, .hos h6,
.hos .h1, .hos .h2, .hos .h3, .hos .h4, .hos .h5, .hos .h6 {
    font-family: var(--hos-font-head);
    font-weight: 600;
    color: var(--hos-midnight);
    letter-spacing: -0.015em;
}
.hos h1, .hos .h1 { font-weight: 700; }

.hos a { color: var(--hos-link); }
.hos a:hover { color: var(--hos-midnight); }

.hos .text-muted { color: var(--hos-slate) !important; }
.hos .primary-bg-color { background-color: var(--hos-cloud); }

::selection { background: var(--hos-uplink); color: var(--hos-midnight); }

/* ---------- Buttons ---------- */
.hos .btn {
    font-family: var(--hos-font-body);
    font-weight: 600;
    border-radius: var(--hos-radius-sm);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.hos .btn-primary,
.hos .btn-success,
.hos .btn-info {
    background-color: var(--hos-cyan);
    border-color: var(--hos-cyan);
    color: var(--hos-midnight);
}
.hos .btn-primary:hover, .hos .btn-primary:focus,
.hos .btn-success:hover, .hos .btn-success:focus,
.hos .btn-info:hover, .hos .btn-info:focus,
.hos .btn-primary:not(:disabled):not(.disabled):active,
.hos .btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--hos-fibre);
    border-color: var(--hos-fibre);
    color: var(--hos-white);
}
.hos .btn-primary:focus, .hos .btn-success:focus, .hos .btn-default:focus {
    box-shadow: 0 0 0 3px rgba(44, 184, 238, .35);
}
.hos .btn-primary.disabled, .hos .btn-primary:disabled,
.hos .btn-success.disabled, .hos .btn-success:disabled {
    background-color: var(--hos-hairline);
    border-color: var(--hos-hairline);
    color: var(--hos-slate);
}

.hos .btn-default,
.hos .btn-outline-primary,
.hos .btn-secondary {
    background-color: var(--hos-white);
    border: 1px solid var(--hos-hairline);
    color: var(--hos-midnight);
}
.hos .btn-default:hover,
.hos .btn-outline-primary:hover,
.hos .btn-secondary:hover {
    background-color: var(--hos-cloud);
    border-color: var(--hos-mist);
    color: var(--hos-midnight);
}

.hos .btn-lg { padding: .75rem 1.5rem; font-size: 1rem; }

/* ---------- Forms ---------- */
.hos .form-control,
.hos .custom-select {
    border: 1px solid var(--hos-hairline);
    border-radius: var(--hos-radius-sm);
    color: var(--hos-midnight);
    font-family: var(--hos-font-body);
    min-height: 44px;
}
.hos .form-control:focus,
.hos .custom-select:focus {
    border-color: var(--hos-cyan);
    box-shadow: 0 0 0 3px rgba(44, 184, 238, .2);
}
.hos .form-control::placeholder { color: #8C9AB5; }
.hos label { color: var(--hos-midnight); font-weight: 600; }

/* ---------- Header ---------- */
header.header {
    background-color: var(--hos-white);
    border-bottom: 1px solid var(--hos-hairline);
}

header.header .topbar {
    background-color: var(--hos-midnight);
    color: var(--hos-mist);
    font-size: 13px;
}
header.header .topbar .btn,
header.header .topbar .active-client .btn,
header.header .topbar .active-client .input-group-text { color: var(--hos-mist); }
header.header .topbar .btn:hover { color: var(--hos-white); }
header.header .topbar .active-client .btn.btn-active-client span { border-bottom-color: var(--hos-mist); }

header.header > .navbar { padding-top: 14px; padding-bottom: 14px; }

header.header .logo-img {
    width: auto;
    height: 56px;      /* 1159x356 SVG -> ~182px wide (brand minimum is 140px) */
    max-height: 56px;
    max-width: none;
}

.hos-site-nav {
    align-items: center;
    gap: 4px;
}
.hos-site-nav a {
    padding: 8px 14px;
    border-radius: var(--hos-radius-sm);
    font-weight: 600;
    font-size: 15px;
    color: var(--hos-midnight) !important;
    text-decoration: none;
}
.hos-site-nav a:hover {
    background: var(--hos-cloud);
    text-decoration: none;
}
.hos-site-nav--mobile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hos-hairline);
}

header.header .toolbar .nav-link {
    border: 1px solid var(--hos-hairline);
    border-radius: var(--hos-radius-sm);
    color: var(--hos-midnight);
    padding: .55rem .9rem;
}
header.header .toolbar .nav-link:hover {
    color: var(--hos-midnight);
    background: var(--hos-cloud);
}
/* Cart count = the one amber accent on the page */
header.header .toolbar .nav-link .badge,
.hos .badge-info {
    background-color: var(--hos-amber);
    color: var(--hos-midnight);
    opacity: 1;
    font-weight: 700;
}

header.header .search { border-color: var(--hos-hairline); border-radius: var(--hos-radius-sm); }
header.header .search:focus-within { border-color: var(--hos-cyan); }

/* Client-area menu bar */
header.header .main-navbar-wrapper {
    background-color: var(--hos-cloud);
    border-top: 1px solid var(--hos-hairline);
}
header.header .navbar a { color: var(--hos-midnight); }
header.header .navbar-nav a {
    font-size: 14px;
    font-weight: 600;
}
header.header .main-navbar-wrapper .navbar-nav .nav-link { color: var(--hos-slate); }
header.header .main-navbar-wrapper .navbar-nav .nav-link:hover,
header.header .main-navbar-wrapper .navbar-nav .active > .nav-link { color: var(--hos-midnight); }

.hos .dropdown-menu {
    border: 1px solid var(--hos-hairline);
    border-radius: var(--hos-radius);
    box-shadow: var(--hos-shadow);
    padding: 6px;
}
.hos .dropdown-item {
    border-radius: var(--hos-radius-sm);
    color: var(--hos-midnight);
    font-size: 14px;
}
.hos .dropdown-item:hover,
header.header .dropdown-item.active,
header.header .dropdown-item:active {
    background-color: var(--hos-cloud);
    color: var(--hos-midnight);
}

/* Breadcrumb */
.master-breadcrumb { background-color: transparent; }
.master-breadcrumb .breadcrumb {
    padding: 14px 0 0;
    font-size: 13px;
    background: transparent;
}
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a { color: var(--hos-slate); }
.master-breadcrumb .breadcrumb-item.active { color: var(--hos-midnight); }

#main-body { padding-top: 24px; padding-bottom: 56px; }

/* ---------- Cards / panels ---------- */
.hos .card,
.hos .panel {
    border: 1px solid var(--hos-hairline);
    border-radius: var(--hos-radius);
    box-shadow: var(--hos-shadow);
    background: var(--hos-white);
}
.hos .card-header,
.hos .panel-heading {
    background: var(--hos-white);
    border-bottom: 1px solid var(--hos-hairline);
}
.hos .card-title,
.hos .card-header h3,
.hos .panel-title {
    font-family: var(--hos-font-head);
    font-weight: 600;
    color: var(--hos-midnight);
}

/* Sidebar */
.hos .sidebar .list-group-item {
    border-color: var(--hos-hairline);
    color: var(--hos-midnight);
}
.hos .sidebar .list-group-item.active,
.hos .sidebar .list-group-item.active:hover {
    background-color: var(--hos-midnight);
    border-color: var(--hos-midnight);
    color: var(--hos-white);
}
.hos .sidebar .list-group-item:hover { background-color: var(--hos-cloud); }

/* Tables */
.hos .table th { color: var(--hos-slate); font-weight: 600; }
.hos .table td, .hos .table th { border-color: var(--hos-hairline); }

/* Alerts */
.hos .alert { border-radius: var(--hos-radius); }
.hos .alert-info {
    background: #E6F6FD;
    border-color: #BFE7F9;
    color: var(--hos-midnight);
}

/* Pagination */
.hos .page-item.active .page-link {
    background-color: var(--hos-midnight);
    border-color: var(--hos-midnight);
}
.hos .page-link { color: var(--hos-link); }

/* Client area home tiles */
.hos .tiles .tile { border-radius: var(--hos-radius); }
.hos .tiles .tile .stat { color: var(--hos-midnight); font-family: var(--hos-font-head); }
.hos .tiles .tile .highlight { background-color: var(--hos-cyan) !important; }

/* Homepage domain search band */
.hos .home-domain-search {
    background-color: var(--hos-midnight) !important; /* beats Bootstrap .bg-white */
    background-image: radial-gradient(circle at 85% 0%, rgba(44,184,238,.35), transparent 55%);
    color: var(--hos-white);
}
.hos .home-domain-search h2 { color: var(--hos-white); }

/* ---------- Statement-name notice ---------- */
.hos-statement-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 20px;
    padding: 14px 16px;
    background: var(--hos-cloud);
    border: 1px solid var(--hos-hairline);
    border-left: 4px solid var(--hos-cyan);
    border-radius: var(--hos-radius-sm);
    font-size: 14px;
    line-height: 1.5;
    color: var(--hos-slate);
    text-align: left;
}
.hos-statement-note > i {
    color: var(--hos-link);
    font-size: 18px;
    margin-top: 2px;
}
.hos-statement-note strong { color: var(--hos-midnight); }
.hos-statement-note > div > strong {
    display: block;
    margin-bottom: 2px;
    font-family: var(--hos-font-head);
    font-weight: 600;
}
.hos-statement-note--compact {
    display: block;
    margin: 0 0 14px;
    padding: 0;
    background: none;
    border: 0;
    font-size: 13px;
    text-align: center;
}
.hos-statement-note--compact i { color: var(--hos-link); margin-right: 4px; }

/* ---------- Footer ---------- */
footer.footer.hos-footer {
    padding: 56px 0 32px;
    background-color: var(--hos-midnight);
    color: var(--hos-mist);
    font-size: 14px;
}
.hos-footer__top {
    display: grid;
    grid-template-columns: 1.3fr 2fr auto;
    gap: 32px;
    align-items: start;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(169, 187, 214, .2);
}
.hos-footer__brand img {
    height: 46px;
    width: auto;
}
.hos-footer__brand p {
    margin: 14px 0 0;
    max-width: 320px;
    color: var(--hos-mist);
}
.hos-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding-top: 10px;
}
.hos-footer__links a,
footer.footer .nav-link {
    color: var(--hos-white) !important;
    font-weight: 600;
    text-decoration: none;
}
.hos-footer__links a:hover { color: var(--hos-uplink) !important; }
.hos-footer__tools { margin: 0; padding-top: 4px; }
footer.footer .btn {
    background-color: var(--hos-midnight-raised);
    color: var(--hos-white);
    border-radius: var(--hos-radius-sm);
}
footer.footer .btn:hover { background-color: #1A3470; }
.hos-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    padding-top: 20px;
    font-size: 13px;
}
footer.footer .copyright { margin: 0; text-align: left; font-size: 13px; }
.hos-footer__statement { color: var(--hos-mist); }

@media (max-width: 991.98px) {
    .hos-footer__top { grid-template-columns: 1fr; gap: 24px; }
    .hos-footer__links { padding-top: 0; }
}

/* Localisation modal */
.modal-localisation .modal-content { background: var(--hos-midnight); border-radius: var(--hos-radius-lg); }
.modal-localisation .item-selector .item.active { background: var(--hos-cyan); color: var(--hos-midnight); }

/* Compact client-area menu bar */
header.header .main-navbar-wrapper .navbar-collapse { padding: 0 1rem; }
header.header .main-navbar-wrapper .navbar-nav .nav-link { padding: .65rem .75rem; }

/* Active list item everywhere (incl. cart sidebar, which isn't inside .sidebar) */
.hos .list-group-item.active,
.hos .list-group-item.active:hover,
.hos .list-group-item.active:focus {
    background-color: var(--hos-midnight);
    border-color: var(--hos-midnight);
    color: var(--hos-white);
}
.hos .list-group-item-action { color: var(--hos-midnight); }
.hos .list-group-item-action:hover { background-color: var(--hos-cloud); color: var(--hos-midnight); }

/* Warning / help alerts in the brand amber tint */
.hos .alert-warning {
    background: #FFF4E0;
    border-color: #FFD999;
    color: var(--hos-midnight);
}
.hos .alert-warning a { color: var(--hos-midnight); font-weight: 700; }

/* Homepage domain band: legibility on Midnight Rack */
/* Transfer sits inside the white search box: navy outline as the secondary action */
.hos .home-domain-search .btn-success,
.hos .home-domain-search .btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--hos-white) !important;
    border: 1px solid var(--hos-midnight) !important;
    color: var(--hos-midnight) !important;
}
.hos .home-domain-search .btn-success:hover,
.hos .home-domain-search .btn-success:focus {
    background-color: var(--hos-midnight) !important;
    color: var(--hos-white) !important;
}
.hos .home-domain-search .tld-logos li {
    color: var(--hos-white);
    font-weight: 600;
}
.hos .home-domain-search .tld-logos img {
    background: var(--hos-white);
    border-radius: var(--hos-radius-sm);
    padding: 4px 8px;
    margin-right: 6px;
}
.hos .home-domain-search .btn-link,
.hos .home-domain-search a.btn-link {
    color: var(--hos-uplink) !important;
    font-weight: 600;
}
.hos .home-domain-search .btn-link:hover { color: var(--hos-white) !important; }