/* ==========================================================================
   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:         #185277;
    --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, #222427 0, #213950 25%, #213950 75%, #222427 100%) !important;
    border-bottom: 1px solid #222427;
    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, #222427 0, #213950 25%, #213950 75%, #222427 100%) !important;
    }
}

.dropdown-menu {
    background: #213950 !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 / 65%) !important;
}

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

/* --- Mid blue: rgb(24 82 119) / #185277 --- */
.panel-sidebar.panel-primary {
    background: rgb(24 82 119) !important;
}

.table-container {
    background: #185277 !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(18 37 53) !important;
}

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

.login-wrapper {
    background: rgb(18 37 53) !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: #275576 !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;
}