/* ══════════════════════════════════════════
   SpillHosting Color System - Single Source of Truth
   ══════════════════════════════════════════
   --sh-bg-main : #21354a  (site background - DO NOT CHANGE)
   --sh-bg-deep : #1b3045  (deep panels, tables, code blocks, mobile nav)
   --sh-bg-nav  : #213950  (nav bar gradients)
   --sh-bg-mid  : #1d4a6e  (accent panels, mid-blue sections)
   --sh-primary : #009eff  (buttons, links - same as brand-primary)
   ══════════════════════════════════════════ */
:root {
    --sh-bg-main:   #21354a;
    --sh-bg-deep:   #1b3045;
    --sh-bg-nav:    #213950;
    --sh-bg-mid:    #1d4a6e;
    --sh-primary:   #009eff;
}

/* ==========================================================================
   SpillHosting.no - theme-custom.css
   
   Location: /templates/lagom2/core/styles/futuristic/assets/css/theme-custom.css
   
   This file is UPDATE-SAFE. Lagom will not overwrite it.
   ========================================================================== */


/* ==========================================================================
   1. COLOR VARIABLE OVERRIDES
   ========================================================================== */

:root {
    /* --- Gray --- */
    --gray-base:                        hsla(210, 50%, 90%, 92%);
    --gray-lighter:                     hsla(210, 50%, 88%, 80%);
    --gray-lighter-2:                   hsla(210, 50%, 88%, 56%);
    --gray-lighter-3:                   hsla(210, 50%, 88%, 24%);
    --gray-lighter-4:                   hsla(210, 50%, 88%, 16%);
    --gray-faded:                       hsla(210, 50%, 88%, 8%);
    --gray-darker:                      #fff;
    --gray-icons:                       hsla(210, 50%, 88%, 64%);
    --gray-icons-hover:                 hsla(210, 50%, 88%, 40%);
    --gray-gradient-start:              #3a6b9429;
    --gray-gradient-end:                #21455e29;
    --gray-gradient-h:                  linear-gradient(90deg, var(--gray-gradient-start) 0%, var(--gray-gradient-end) 100%);
    --gray-gradient-v:                  linear-gradient(0deg, var(--gray-gradient-end) 0%, var(--gray-gradient-start) 100%);

    /* --- Primary: #009eff --- */
    --brand-primary:                    #009eff;
    --brand-primary-lighter:            #4db8ff;
    --brand-primary-lighter-2:          #99d6ff;
    --brand-primary-lighter-3:          #b3e0ff;
    --brand-primary-lighter-4:          #d9f0ff;
    --brand-primary-darker:             #006bad;
    --brand-primary-gradient-start:     #006bad;
    --brand-primary-gradient-end:       #009eff;
    --brand-primary-gradient-h:         linear-gradient(90deg, var(--brand-primary-gradient-start) 0%, var(--brand-primary-gradient-end) 100%);
    --brand-primary-gradient-v:         linear-gradient(0deg, var(--brand-primary-gradient-end) 0%, var(--brand-primary-gradient-start) 100%);

    /* --- Secondary: #247cb3 --- */
    --brand-secondary:                  #247cb3;
    --brand-secondary-lighter:          #4a9fd4;
    --brand-secondary-darker:           #1a5a84;
    --brand-secondary-gradient-start:   #1a5a84;
    --brand-secondary-gradient-end:     #247cb3;
    --brand-secondary-gradient-h:       linear-gradient(90deg, var(--brand-secondary-gradient-start) 0%, var(--brand-secondary-gradient-end) 100%);
    --brand-secondary-gradient-v:       linear-gradient(0deg, var(--brand-secondary-gradient-end) 0%, var(--brand-secondary-gradient-start) 100%);

    /* --- Info --- */
    --brand-info:                       #2872fc;
    --brand-info-lighter:               #6298fe;
    --brand-info-lighter-2:             #B3CCFF;
    --brand-info-lighter-3:             #D6E4FF;
    --brand-info-darker:                #015abe;
    --brand-info-gradient-start:        #015abe;
    --brand-info-gradient-end:          #2872fc;
    --brand-info-gradient-h:            linear-gradient(90deg, var(--brand-info-gradient-start) 0%, var(--brand-info-gradient-end) 100%);
    --brand-info-gradient-v:            linear-gradient(0deg, var(--brand-info-gradient-end) 0%, var(--brand-info-gradient-start) 100%);

    /* --- Success --- */
    --brand-success:                    #36C055;
    --brand-success-lighter:            #70d786;
    --brand-success-lighter-2:          #cff2d7;
    --brand-success-lighter-3:          #dbf5e1;
    --brand-success-lighter-4:          #e7f8eb;
    --brand-success-darker:             #2d9f46;
    --brand-success-gradient-start:     #2d9f46;
    --brand-success-gradient-end:       #36C055;
    --brand-success-gradient-h:         linear-gradient(90deg, var(--brand-success-gradient-start) 0%, var(--brand-success-gradient-end) 100%);
    --brand-success-gradient-v:         linear-gradient(0deg, var(--brand-success-gradient-end) 0%, var(--brand-success-gradient-start) 100%);

    /* --- Warning --- */
    --brand-warning:                    #ffaa00;
    --brand-warning-lighter:            #ffc552;
    --brand-warning-lighter-2:          #ffeecc;
    --brand-warning-lighter-3:          #fff3db;
    --brand-warning-lighter-4:          #fff8eb;
    --brand-warning-darker:             #F08000;
    --brand-warning-gradient-start:     #d68f00;
    --brand-warning-gradient-end:       #ffaa00;
    --brand-warning-gradient-h:         linear-gradient(90deg, var(--brand-warning-gradient-start) 0%, var(--brand-warning-gradient-end) 100%);
    --brand-warning-gradient-v:         linear-gradient(0deg, var(--brand-warning-gradient-end) 0%, var(--brand-warning-gradient-start) 100%);

    /* --- Danger --- */
    --brand-danger:                     #d92632;
    --brand-danger-lighter:             #e56c74;
    --brand-danger-lighter-2:           #f7d4d6;
    --brand-danger-lighter-3:           #fae1e2;
    --brand-danger-lighter-4:           #fceeef;
    --brand-danger-darker:              #b6202a;
    --brand-danger-gradient-start:      #b6202a;
    --brand-danger-gradient-end:        #d92632;
    --brand-danger-gradient-h:          linear-gradient(90deg, var(--brand-danger-gradient-start) 0%, var(--brand-danger-gradient-end) 100%);
    --brand-danger-gradient-v:          linear-gradient(0deg, var(--brand-danger-gradient-end) 0%, var(--brand-danger-gradient-start) 100%);

    /* --- SVG Icons --- */
    --svg-illustration-color-0:         #0a3d66;
    --svg-illustration-color-1:         var(--sh-bg-mid);
    --svg-illustration-color-2:         #247cb3;
    --svg-illustration-color-3:         #4a9fd4;
    --svg-illustration-color-4:         #7fbde0;
    --svg-illustration-color-5:         #a8d4ed;
    --svg-illustration-color-6:         #d0e8f5;
    --svg-illustration-color-7:         #ffffff;
    --svg-illustration-shadow:          #000000;
    --svg-illustration-line-color:      rgba(74, 159, 212, 0.24);

    /* --- Background --- */
    --body-bg:                          #21354a;
    --sticky-menu-bg:                   hsl(210deg 30% 22% / 80%);

    /* --- UI Block Backgrounds --- */
    --ui-block-bg:                      linear-gradient(180deg, rgba(6, 15, 23, 0.39) 0%, rgba(6, 15, 23, 0.39) 100%);
    --ui-block-overlay-bg:              linear-gradient(180deg, rgba(18, 37, 53, 0.72) 0%, rgba(18, 37, 53, 0.72) 100%);
    --ui-block-overlay-bg-2:            linear-gradient(180deg, rgba(6, 15, 23, 0.65) 0%, rgba(6, 15, 23, 0.65) 100%);

    /* --- Button variables (override Futuristic defaults) --- */
    --btn-default-color:                #fff;
    --btn-default-bg:                   transparent;
    --btn-default-border:               rgba(255, 255, 255, 0.25);
    --btn-default-hover-color:          #fff;
    --btn-default-hover-bg:             rgba(255, 255, 255, 0.1);
    --btn-default-hover-border:         rgba(255, 255, 255, 0.4);
    --btn-primary-color:                #fff;
    --btn-primary-bg:                   #009eff;
    --btn-primary-border:               #009eff;
    --btn-primary-hover-color:          #fff;
    --btn-primary-hover-bg:             #006bad;
    --btn-primary-hover-border:         #006bad;
    --btn-info-color:                   #fff;
    --btn-info-bg:                      #2872fc;
    --btn-info-border:                  #2872fc;
    --btn-info-hover-color:             #fff;
    --btn-info-hover-bg:                #015abe;
    --btn-info-hover-border:            #015abe;
    --btn-secondary-color:              #fff;
    --btn-secondary-bg:                 rgba(255, 255, 255, 0.08);
    --btn-secondary-border:             rgba(255, 255, 255, 0.2);
    --btn-link-color:                   #009eff;
    --btn-link-hover-color:             #4db8ff;

    /* --- Faded variants (Lagom's -faded system for buttons, badges, labels) --- */
    --brand-primary-faded:              rgba(0, 158, 255, 0.2);
    --brand-primary-faded-color:        #4db8ff;
    --brand-info-faded:                 rgba(40, 114, 252, 0.2);
    --brand-info-faded-color:           #6298fe;
    --brand-success-faded:              rgba(54, 192, 85, 0.2);
    --brand-success-faded-color:        #70d786;
    --brand-warning-faded:              rgba(255, 170, 0, 0.2);
    --brand-warning-faded-color:        #ffc552;
    --brand-danger-faded:               rgba(217, 38, 50, 0.2);
    --brand-danger-faded-color:         #e56c74;
}

@-moz-document url-prefix() {
    :root {
        --ui-block-overlay-bg:          linear-gradient(180deg, rgba(18, 37, 53, 0.90) 0%, rgba(18, 37, 53, 0.90) 100%);
    }
}


/* ==========================================================================
   2. BODY BACKGROUND GRADIENT
   ========================================================================== */

body {
    background: linear-gradient(90deg, #21354a 0, #247cb3 25%, #247cb3 75%, #21354a 100%) !important;
}


/* ==========================================================================
   3. NAVIGATION
   ========================================================================== */

.app-nav,
.app-nav-condensed {
    background: linear-gradient(90deg, var(--sh-bg-nav) 0, var(--sh-bg-nav) 25%, var(--sh-bg-nav) 75%, var(--sh-bg-nav) 100%) !important;
    border-bottom: 1px solid var(--sh-bg-nav);
    padding: 4px;
    display: table;
    width: 100%;
    position: relative;
}

@media (max-width: 991.98px) {
    .app-nav,
    .app-nav-condensed {
        background: none !important;
        border-bottom: none !important;
        padding: 4px;
        display: table;
        width: 100%;
        position: relative;
    }
    .app-nav-header {
        background: linear-gradient(90deg, var(--sh-bg-nav) 0, var(--sh-bg-nav) 25%, var(--sh-bg-nav) 75%, var(--sh-bg-nav) 100%) !important;
    }
}

.dropdown-menu {
    background: var(--sh-bg-nav) !important;
}


/* ==========================================================================
   4. BUTTONS
   Fix Futuristic style's default teal/cyan outline buttons to match blue scheme
   ========================================================================== */

/* --- Default / outline buttons --- */
.btn-default {
    color: #fff !important;
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.btn-default:hover,
.btn-default:focus {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* --- Outline primary buttons (Oppdater, Ny Kontakt, etc.) --- */
.btn-outline-primary,
.btn-primary-outline {
    color: #009eff !important;
    background-color: transparent !important;
    border-color: #009eff !important;
}

.btn-outline-primary:hover,
.btn-primary-outline:hover,
.btn-outline-primary:focus,
.btn-primary-outline:focus {
    color: #fff !important;
    background-color: #009eff !important;
    border-color: #009eff !important;
}

/* --- Info buttons --- */
.btn-info {
    color: #fff !important;
    background-color: #2872fc !important;
    border-color: #2872fc !important;
}

.btn-info:hover,
.btn-info:focus {
    color: #fff !important;
    background-color: #015abe !important;
    border-color: #015abe !important;
}

.btn-outline-info,
.btn-info-outline {
    color: #2872fc !important;
    background-color: transparent !important;
    border-color: #2872fc !important;
}

.btn-outline-info:hover,
.btn-info-outline:hover {
    color: #fff !important;
    background-color: #2872fc !important;
    border-color: #2872fc !important;
}

/* --- Secondary buttons --- */
.btn-secondary {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

/* --- Success buttons --- */
.btn-success {
    color: #fff !important;
    background-color: #36C055 !important;
    border-color: #36C055 !important;
}

.btn-success:hover,
.btn-success:focus {
    color: #fff !important;
    background-color: #2d9f46 !important;
    border-color: #2d9f46 !important;
}

/* --- Danger buttons --- */
.btn-danger {
    color: #fff !important;
    background-color: #d92632 !important;
    border-color: #d92632 !important;
}

.btn-danger:hover,
.btn-danger:focus {
    color: #fff !important;
    background-color: #b6202a !important;
    border-color: #b6202a !important;
}

/* --- Warning buttons --- */
.btn-warning {
    color: #fff !important;
    background-color: #ffaa00 !important;
    border-color: #ffaa00 !important;
}

.btn-warning:hover,
.btn-warning:focus {
    color: #fff !important;
    background-color: #F08000 !important;
    border-color: #F08000 !important;
}

/* --- Coupon / promo area --- */
.btn-primary-faded {
    color: #fff !important;
    background-color: #009eff !important;
    border-color: #009eff !important;
}

.btn-primary-faded:hover,
.btn-primary-faded:focus {
    color: #fff !important;
    background-color: #006bad !important;
    border-color: #006bad !important;
}

/* --- All Lagom -faded variants (badges, labels, buttons) --- */
.badge-primary-faded,
.label-primary-faded {
    background-color: rgba(0, 158, 255, 0.2) !important;
    color: #4db8ff !important;
}

.badge-info-faded,
.label-info-faded {
    background-color: rgba(40, 114, 252, 0.2) !important;
    color: #6298fe !important;
}

.badge-success-faded,
.label-success-faded {
    background-color: rgba(54, 192, 85, 0.2) !important;
    color: #70d786 !important;
}

.badge-warning-faded,
.label-warning-faded {
    background-color: rgba(255, 170, 0, 0.2) !important;
    color: #ffc552 !important;
}

.badge-danger-faded,
.label-danger-faded {
    background-color: rgba(217, 38, 50, 0.2) !important;
    color: #e56c74 !important;
}

.btn-info-faded {
    color: #6298fe !important;
    background-color: rgba(40, 114, 252, 0.15) !important;
    border-color: rgba(40, 114, 252, 0.3) !important;
}

.btn-success-faded {
    color: #70d786 !important;
    background-color: rgba(54, 192, 85, 0.15) !important;
    border-color: rgba(54, 192, 85, 0.3) !important;
}

.btn-warning-faded {
    color: #ffc552 !important;
    background-color: rgba(255, 170, 0, 0.15) !important;
    border-color: rgba(255, 170, 0, 0.3) !important;
}

.btn-danger-faded {
    color: #e56c74 !important;
    background-color: rgba(217, 38, 50, 0.15) !important;
    border-color: rgba(217, 38, 50, 0.3) !important;
}

#inputPromotionCode {
    background-color: rgb(6 15 23 / 40%) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* --- Homepage content slider: no active highlight on cards --- */
.content-slider-item .package.is-boxed,
.content-slider-item .package,
.content-slider-item.swiper-slide-active .package.is-boxed,
.content-slider-item.swiper-slide-active .package,
.content-slider-item.swiper-slide-next .package.is-boxed,
.content-slider-item.swiper-slide-next .package,
.content-slider-item.swiper-slide-visible .package.is-boxed,
.content-slider-item.swiper-slide-visible .package {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* --- Content slider arrows (Lagom + Swiper) --- */
.content-slider-next,
.content-slider-prev,
.swiper-button-next,
.swiper-button-prev,
[data-content-slider-next],
[data-content-slider-prev] {
    background-color: #009eff !important;
    border-color: #009eff !important;
    color: #fff !important;
    box-shadow: none !important;
    border-radius: 50% !important;
}

.content-slider-next:hover,
.content-slider-prev:hover,
.swiper-button-next:hover,
.swiper-button-prev:hover,
[data-content-slider-next]:hover,
[data-content-slider-prev]:hover {
    background-color: #006bad !important;
    border-color: #006bad !important;
    box-shadow: none !important;
}

/* Kill any pseudo-element backgrounds on slider arrows */
.content-slider-next::before,
.content-slider-prev::before,
.content-slider-next::after,
.content-slider-prev::after,
.swiper-button-next::before,
.swiper-button-prev::before,
.swiper-button-next::after,
.swiper-button-prev::after {
    background: transparent !important;
    box-shadow: none !important;
}

/* Swiper arrow SVG icon color */
.swiper-button-next::after,
.swiper-button-prev::after {
    color: #fff !important;
}


/* ==========================================================================
   5. PANELS & CARDS
   ========================================================================== */

/* --- Default dark transparent: rgb(6 15 23 / 39%) --- */
.panel,
.panel-product-details {
    background-color: rgb(6 15 23 / 39%) !important;
}

.panel-sidebar {
    background-color: rgb(6 15 23 / 39%) !important;
}

.panel-check.checked {
    background-color: rgb(6 15 23 / 39%) !important;
}

.panel-form {
    background: rgb(6 15 23 / 39%) !important;
}

.panel.panel-cart {
    background: rgb(6 15 23 / 39%) !important;
}

.page-clientareahome .tile,
.panel-client-details {
    background: rgb(6 15 23 / 39%) !important;
}

.check.check-cycle,
.check {
    background: rgb(6 15 23 / 39%) !important;
}

.invoice {
    background: rgb(6 15 23 / 39%) !important;
}

.search-box,
.search-box-primary {
    background: rgb(6 15 23 / 39%) !important;
}

/* --- Deeper dark transparent: rgb(6 15 23 / 65%) --- */
.panel.panel-summary.panel-summary-primary {
    background: rgb(6 15 23 / 65%) !important;
}

.order-summary {
    background: rgb(6 15 23 / 55%) !important;
}

.product-details .product-icon,
.product-details .product-info {
    background: rgb(6 15 23 / 25%) !important;
}

/* --- Mid blue: rgb(24 82 119) / var(--sh-bg-mid) --- */
.panel-sidebar.panel-primary {
    background: rgb(24 82 119) !important;
}

.table-container {
    background: var(--sh-bg-mid) !important;
}

.ticket-reply {
    background: rgb(24 82 119) !important;
}

.message {
    background: rgb(24 82 119) !important;
}

.kb-category {
    background: rgb(24 82 119) !important;
}

.kbarticles {
    background: rgb(24 82 119) !important;
}

.article {
    background: rgb(24 82 119) !important;
}

.kb-rate-article {
    background: rgb(24 82 119) !important;
    color: #7fabff !important;
}

/* --- Solid dark blue: rgb(18 37 53) --- */
.testimonials-item.is-boxed,
.faq-item.faq-item-boxed,
.feature.feature-lg.is-boxed.feature-icon-top-center.feature-title-only,
.panel.panel-default.panel-product-details {
    background: rgb(6 15 23 / 55%) !important;
}

.package {
    background: rgb(18 37 53) !important;
}

.login-wrapper {
    background: rgb(6 15 23 / 55%) !important;
}

#affiliatesPanel .panel-heading,
#affiliatesPanel .panel-body {
    background: rgb(18 37 53);
    color: white;
}

#affiliatesPanel .panel-title {
    color: white;
}

#servicesPanel .panel-heading,
#servicesPanel .list-group,
#ticketsPanel,
#announcementsPanel,
.cookie-bar__content {
    background: rgb(18 37 53) !important;
}


/* ==========================================================================
   6. PANEL LAYOUT TWEAKS
   ========================================================================== */

.panel-sidebar .panel-heading {
    padding: 4px 0 0 !important;
}

.panel-title {
    padding: 20px;
}

.panel .list-group > .list-group-item {
    padding: 12px 16px !important;
}

.panel.panel-sidebar.panel-client-contacts .panel-footer {
    margin-left: 15px;
    padding-bottom: 15px;
}


/* ==========================================================================
   7. SECTIONS
   ========================================================================== */

.site-section.section-title-above.section-features.section-gray {
    background: none;
}

.site-section.section-title-above.section-features.section-default {
    margin-top: 20px;
    background: rgb(18 37 53 / 50%) !important;
}

.site-section.section-default.section-cta {
    background: rgb(18 37 53 / 50%) !important;
}

.section-secondary {
    background: rgb(18 37 53 / 50%) !important;
}

.site-section.text-center,
.section-secondary.text-center {
    background: none !important;
}

.site-banner.banner-gray {
    background: none !important;
}


/* ==========================================================================
   8. FORMS
   ========================================================================== */

.form-control,
.module-custom-output input[type=text] {
    background-color: rgb(6 15 23 / 20%);
}

select.form-control option {
    background-color: var(--sh-bg-mid) !important;
}

.kb-search .kb-search-wrapper {
    background: rgb(6 15 23 / 65%) !important;
}

.kb-search .kb-search-wrapper .btn-primary {
    background-color: #ecf4fc !important;
    border-color: transparent !important;
    color: #0c70de !important;
}

.kb-search .kb-search-wrapper .btn-primary:hover {
    background-color: #fff !important;
}


/* ==========================================================================
   9. ALERTS
   ========================================================================== */

.alert-info {
    background-color: rgb(6 15 23 / 65%) !important;
}

.alert-danger {
    background-color: rgb(6 15 23 / 65%) !important;
    border-color: transparent;
}

.alert.alert-danger {
    border-left: 4px solid #ff6868 !important;
}

.alert-warning.checkout-security-msg {
    display: none !important;
}


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.footer-top {
    background: rgb(18 37 53) !important;
}

.footer-bottom {
    background: rgb(18 37 53) !important;
}

.under-footer {
    background: rgb(18 37 53 / 90%);
    padding: 25px 0 20px;
}

.under-footer .row {
    margin-right: -15px;
    margin-left: -15px;
}

.under-footer a {
    display: inline-block;
    margin-right: 25px;
    padding-top: 5px;
    font-size: 13px;
}

.under-footer .un_img .payment-methods {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.under-footer .un_img .payment-methods a {
    margin-right: 0;
    padding: 0 10px;
}


/* ==========================================================================
   11. MISC
   ========================================================================== */

.label.label-info.label-save.label-xs.save {
    color: white;
}

.testimonials-avatar {
    display: none;
}

.reviews.package {
    margin-bottom: 10px;
}

.ticket-reply-message blockquote {
    color: lightgray !important;
}

@media (max-width: 750px) {
    .site-banner.banner .banner-actions .banner-actions-price.price {
        text-align: center !important;
    }
}


/* ==========================================================================
   12. SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar {
    width: 7.5px;
}

::-webkit-scrollbar-thumb {
    background: #767e88;
}

::-webkit-scrollbar-track {
    background: #495360;
}

/* ==========================================================================
   13. MISSING UI ELEMENTS — added by Vex for visual consistency
   Colors: dark panel rgb(18 37 53), mid rgb(24 82 119), primary #009eff
   ========================================================================== */

/* modals: intentionally unstyled */

/* --- Tooltips --- */
.tooltip-inner {
    background-color: rgb(18 37 53) !important;
    color: hsla(210, 50%, 90%, 92%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.tooltip.top .tooltip-arrow { border-top-color: rgb(18 37 53) !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: rgb(18 37 53) !important; }
.tooltip.left .tooltip-arrow { border-left-color: rgb(18 37 53) !important; }
.tooltip.right .tooltip-arrow { border-right-color: rgb(18 37 53) !important; }

/* --- Popovers --- */
.popover {
    background-color: var(--sh-bg-deep) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: hsla(210, 50%, 90%, 92%) !important;
}

.popover-title {
    background-color: rgb(18 37 53) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* pagination: intentionally unstyled */

/* breadcrumbs: intentionally unstyled */

/* --- Tabs --- */
.nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.nav-tabs > li > a {
    color: hsla(210, 50%, 90%, 80%) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}


.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: rgb(18 37 53) !important;
    border-color: rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.1) transparent !important;
    color: #fff !important;
}

/* tab-content: intentionally unstyled to avoid breaking sliders/homepage */

/* --- Autocomplete / Typeahead --- */
.ui-autocomplete,
.twitter-typeahead .tt-menu,
.tt-menu {
    background-color: var(--sh-bg-deep) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.ui-autocomplete .ui-menu-item,
.tt-suggestion {
    color: hsla(210, 50%, 90%, 92%) !important;
}

.ui-autocomplete .ui-menu-item:hover,
.ui-autocomplete .ui-menu-item.ui-state-focus,
.tt-suggestion:hover,
.tt-suggestion.tt-cursor {
    background-color: rgb(24 82 119) !important;
    color: #fff !important;
}

/* --- Tables --- */
.table {
    color: hsla(210, 50%, 90%, 92%) !important;
}

.table > thead > tr > th {
    background-color: rgb(18 37 53) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

.table > tbody > tr > td {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgb(6 15 23 / 25%) !important;
}

.table-hover > tbody > tr:hover {
    background-color: rgb(24 82 119 / 30%) !important;
}

/* --- Wells --- */
.well {
    background-color: rgb(6 15 23 / 39%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: hsla(210, 50%, 90%, 92%) !important;
}

/* --- Pre / Code blocks --- */
pre,
code {
    background-color: rgb(6 15 23 / 50%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #7fbde0 !important;
}

/* --- HR dividers --- */
hr {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* list-groups: intentionally unstyled */

/* --- Progress bars --- */
.progress {
    background-color: rgb(6 15 23 / 50%) !important;
}

/* --- Nav pills --- */
.nav-pills > li > a {
    color: hsla(210, 50%, 90%, 80%) !important;
}

.nav-pills > li > a:hover {
    background-color: rgb(18 37 53) !important;
    color: #fff !important;
}

.nav-pills > li.active > a {
    background-color: #009eff !important;
    color: #fff !important;
}



/* === Domain page — footer CTA match FAQ background === */
.site-cms-domain-names .site-section.section-gray.section-cta-horizontal {
    background: transparent !important;
    box-shadow: none !important;
}




/* Fix: remove hover background on content-slider nav tabs */
.content-slider-item .nav-lin
/* ── Banner graphic image: rounded + better sizing ── */
.banner-graphic img {
    border-radius: 16px;
    object-fit: contain;
    max-height: 300px;
    width: auto;
    max-width: 100%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    display: block;
    margin: 0 auto;
}

.banner-background.graphic-centered .banner-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 16px;
}

/* Mobile: hide banner image */
@media (max-width: 991px) {
    .banner-background.graphic-centered,
    .banner-background.graphic-centered .banner-graphic,
    .banner-graphic {
        display: none !important;
    }
}

/* ── Feature icon images: rounded corners ── */
.feature-icon img {
    border-radius: 12px;
}

/* ── Mobile nav menu: solid background so it's visible ── */
@media (max-width: 991px) {
    :root {
        --mob-app-nav-bg:               var(--sh-bg-deep);
        --mob-dropdown-nav-bg:          var(--sh-bg-deep);
        --mob-app-nav-header-bg:        var(--sh-bg-deep);
    }
    .app-nav-menu {
        background: var(--sh-bg-deep) !important;
    }
}

/* ── Mobile nav dropdowns: fix background ── */
@media (max-width: 991px) {
    .app-nav-menu .dropdown-menu,
    .app-nav-menu .dropdown-menu.show {
        background: var(--sh-bg-deep) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
    }
    .app-nav-menu .dropdown-menu li a {
        color: var(--text-heading-color) !important;
    }
    .app-nav-menu .dropdown-menu li a:hover {
        background: rgba(255,255,255,0.06) !important;
    }
}

/* ── Mobile header: hide secondary nav clutter, give logo space ── */
@media (max-width: 991px) {
    /* Hide secondary nav items (Discord, currency, etc.) from mobile header */
    .app-nav-top .secondary,
    .app-nav-top .nav-item-currency,
    .app-nav-top .nav-item-cart,
    .secondary.nav-item-currency,
    nav .secondary {
        display: none !important;
    }

    /* Give the logo more room */
    .app-nav-brand {
        flex: 1;
        max-width: 160px;
    }

    /* Make logo image not overflow */
    .app-nav-brand img {
        max-height: var(--mob-app-nav-logo-height, 40px);
        width: auto;
    }
}

/* ── Mobile dropdowns: never go off-screen right ── */
@media (max-width: 991px) {
    .dropdown-menu {
        right: 0 !important;
        left: auto !important;
        max-width: calc(100vw - 24px) !important;
    }
}