/* =========================================================
   HOSTURSERVER — MARKETCONNECT STOREFRONT
   Safe standalone stylesheet.
   Dynamic WHMCS prices remain untouched.
   ========================================================= */

:root {
    --hus-store-bg: #070809;
    --hus-store-card: #111317;
    --hus-store-card-2: #181a1f;
    --hus-store-border: rgba(217,166,47,.32);

    --hus-store-gold: #d9a62f;
    --hus-store-gold-light: #f2d16f;
    --hus-store-gold-pale: #fff0a8;
    --hus-store-gold-deep: #8a590b;

    --hus-store-white: #fffdf8;
    --hus-store-muted: #aaa397;

    --hus-store-radius: 16px;
    --hus-store-shadow:
        0 18px 45px rgba(0,0,0,.30),
        0 0 0 1px rgba(217,166,47,.05);
}


/* =========================================================
   PRICING SECTIONS
   ========================================================= */

#pricing,
#choose-lvl {
    position: relative;
}

#pricing .row,
#choose-lvl .row {
    align-items: stretch;
}


/* =========================================================
   PRODUCT / PACKAGE CARDS
   ========================================================= */

#pricing .package,
#choose-lvl .package,
.site-section .package {
    position: relative;

    display: flex;
    flex-direction: column;

    height: 100%;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(30,32,36,.98),
            rgba(12,14,17,.99)
        ) !important;

    border: 1px solid var(--hus-store-border) !important;
    border-radius: var(--hus-store-radius) !important;

    box-shadow: var(--hus-store-shadow) !important;

    color: var(--hus-store-white) !important;

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}


#pricing .package:hover,
#choose-lvl .package:hover,
.site-section .package:hover {
    transform: translateY(-4px);

    border-color: rgba(242,209,111,.75) !important;

    box-shadow:
        0 24px 55px rgba(0,0,0,.38),
        0 0 28px rgba(217,166,47,.10) !important;
}


/* gold top accent */

#pricing .package::before,
#choose-lvl .package::before,
.site-section .package::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            #724204,
            #d9a62f,
            #fff0a8,
            #d9a62f,
            #724204
        );

    opacity: .95;
}


/* =========================================================
   PACKAGE HEADINGS
   ========================================================= */

#pricing .package h2,
#pricing .package h3,
#pricing .package h4,
#pricing .package-title,

#choose-lvl .package h2,
#choose-lvl .package h3,
#choose-lvl .package h4,
#choose-lvl .package-title,

.site-section .package h2,
.site-section .package h3,
.site-section .package h4,
.site-section .package-title {
    color: var(--hus-store-white) !important;
}


#pricing .package-title,
#choose-lvl .package-title,
.site-section .package-title {
    font-weight: 700 !important;
    letter-spacing: -.01em;
}


/* =========================================================
   LIVE WHMCS PRICE DISPLAY
   ========================================================= */

.package-price {
    position: relative;

    margin-top: 12px !important;
    margin-bottom: 18px !important;

    opacity: 1 !important;
    visibility: visible !important;
}


.package-price .price,
.package-price .price-amount,
.package-price > .price,
.package-price [class*="price-amount"] {
    color: var(--hus-store-gold-light) !important;

    opacity: 1 !important;
    visibility: visible !important;

    font-weight: 800 !important;

    text-shadow:
        0 0 20px rgba(217,166,47,.10);
}


.package-price .price-amount {
    font-size: clamp(2rem, 3vw, 2.8rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em;
}


.package-price .price-prefix {
    color: var(--hus-store-gold-pale) !important;
}


.package-price .price-cycle,
.package-price [class*="cycle"] {
    color: var(--hus-store-muted) !important;

    font-size: .88rem !important;
    font-weight: 500 !important;
}


/* Make sure price text can never disappear because of
   previous theme customisations */

.package-price *,
.package-slider-summary-value .price-amount {
    opacity: 1;
    visibility: visible;
}


.package-slider-summary-value .price-amount {
    color: var(--hus-store-gold-light) !important;
    font-weight: 800 !important;
}


/* =========================================================
   PACKAGE CONTENT
   ========================================================= */

#pricing .package-body,
#pricing .package-content,
#choose-lvl .package-body,
#choose-lvl .package-content,
.site-section .package-body,
.site-section .package-content {
    color: var(--hus-store-muted) !important;
}


#pricing .package ul,
#choose-lvl .package ul,
.site-section .package ul {
    color: var(--hus-store-muted);
}


#pricing .package li,
#choose-lvl .package li,
.site-section .package li {
    margin-bottom: 8px;
}


/* =========================================================
   PACKAGE FOOTERS / ACTION AREA
   ========================================================= */

#pricing .package-footer,
#pricing .package-actions,

#choose-lvl .package-footer,
#choose-lvl .package-actions,

.site-section .package-footer,
.site-section .package-actions {
    margin-top: auto;
}


/* =========================================================
   BUY / ORDER BUTTONS
   ========================================================= */

.package .btn-primary,
.package .btn-primary-faded,
.package .order-btn,
.package .btn-signup,

#pricing .btn-buy,
#pricing form .btn-primary,

#choose-lvl form .btn-primary {
    min-height: 48px;

    border: 1px solid #e2b84c !important;
    border-radius: 9px !important;

    background:
        linear-gradient(
            180deg,
            #f2d16f 0%,
            #d9a62f 47%,
            #bb7d18 100%
        ) !important;

    color: #111 !important;

    font-weight: 800 !important;

    box-shadow:
        0 8px 18px rgba(217,166,47,.16) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease !important;
}


.package .btn-primary:hover,
.package .btn-primary-faded:hover,
.package .order-btn:hover,
.package .btn-signup:hover,

#pricing .btn-buy:hover,
#pricing form .btn-primary:hover,

#choose-lvl form .btn-primary:hover {
    transform: translateY(-1px);

    filter: brightness(1.07);

    box-shadow:
        0 12px 24px rgba(217,166,47,.24) !important;

    color: #080808 !important;
}


/* Secondary package buttons */

.package .btn-default,
.package .btn-primary-outline {
    border-color: rgba(217,166,47,.48) !important;

    background: rgba(217,166,47,.04) !important;

    color: var(--hus-store-gold-light) !important;
}


.package .btn-default:hover,
.package .btn-primary-outline:hover {
    border-color: var(--hus-store-gold-light) !important;

    background: rgba(217,166,47,.10) !important;

    color: var(--hus-store-gold-pale) !important;
}


/* =========================================================
   BILLING-CYCLE / PRODUCT SELECTORS
   ========================================================= */

#pricing select,
#choose-lvl select,
.package select {
    min-height: 44px;

    border: 1px solid rgba(217,166,47,.30) !important;
    border-radius: 8px !important;

    background-color: #0d0f12 !important;

    color: var(--hus-store-white) !important;
}


#pricing select:focus,
#choose-lvl select:focus,
.package select:focus {
    border-color: var(--hus-store-gold) !important;

    box-shadow:
        0 0 0 3px rgba(217,166,47,.10) !important;
}


/* =========================================================
   CODEGUARD PRODUCT SLIDER
   ========================================================= */

.slider-actions-btn {
    border-color: rgba(217,166,47,.25) !important;
}


.slider-actions-btn:hover,
.slider-actions-btn.active {
    border-color: var(--hus-store-gold) !important;

    background: rgba(217,166,47,.10) !important;

    color: var(--hus-store-gold-light) !important;
}


/* =========================================================
   FEATURES WITHIN MARKETCONNECT PAGES
   ========================================================= */

#overview .feature-boxed,
#pricing .feature-boxed,
.site-section .feature-boxed {
    border-color: rgba(217,166,47,.18) !important;

    border-radius: 12px;

    background: rgba(18,20,24,.76);
}


/* =========================================================
   SPAMEXPERTS PRODUCT OPTIONS
   ========================================================= */

#pricing .choose-product .btn {
    border-color: rgba(217,166,47,.28);
}


#pricing .choose-product .btn.active,
#pricing .choose-product .btn:hover {
    border-color: var(--hus-store-gold) !important;

    color: var(--hus-store-gold-light) !important;
}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 991px) {

    #pricing .package,
    #choose-lvl .package,
    .site-section .package {
        margin-bottom: 22px;
    }

    .package-price .price-amount {
        font-size: 2.25rem !important;
    }
}


@media (max-width: 575px) {

    #pricing .package,
    #choose-lvl .package,
    .site-section .package {
        border-radius: 13px !important;
    }

    .package-price {
        margin-bottom: 14px !important;
    }

    .package-price .price-amount {
        font-size: 2rem !important;
    }

    .package .btn {
        width: 100%;
    }
}
/* HUS global navigation alignment - 2026-09-13 */
@media (min-width: 992px){
  body.lagom-layout-top .app-nav{position:relative!important;display:block!important;height:auto!important;min-height:0!important}
  body.lagom-layout-top .app-nav-header{position:relative!important;inset:auto!important;height:94px!important;min-height:94px!important;padding:0!important;border-bottom:1px solid rgba(216,170,54,.22)!important}
  body.lagom-layout-top .app-nav-header>.container{height:94px!important;min-height:94px!important;display:flex!important;align-items:center!important}
  body.lagom-layout-top .app-nav-header .logo{position:relative!important;top:auto!important;left:auto!important;transform:none!important;display:flex!important;align-items:center!important;height:94px!important;padding:12px 0!important}
  body.lagom-layout-top .app-nav-header .logo-img{display:block!important;width:auto!important;height:auto!important;max-height:60px!important;max-width:250px!important}
  body.lagom-layout-top .app-nav-header .top-nav{margin-left:auto!important;align-self:center!important}
  body.lagom-layout-top .app-nav-menu{position:relative!important;inset:auto!important;display:block!important;visibility:visible!important;opacity:1!important;width:100%!important;height:auto!important;min-height:78px!important;margin:0!important;padding:0!important;overflow:visible!important;border:0!important;border-bottom:1px solid rgba(216,170,54,.15)!important}
  body.lagom-layout-top .app-nav-menu>.container{min-height:78px!important;display:flex!important;align-items:center!important}
  body.lagom-layout-top .app-main{padding-top:0!important;margin-top:0!important}
  body.lagom-layout-top .main-body{padding-top:34px!important}
}
@media (max-width: 991px){
  .app-nav-header .logo-img{max-height:46px!important;width:auto!important}
}

/* HUS final launch polish: responsive logo visibility and consent-safe assistants */
@media (min-width: 992px) {
  .header .logo.visible-xs.visible-sm.visible-md { display: none !important; }
  .header .logo.hidden-xs.hidden-sm.hidden-md { display: flex !important; }
}
@media (max-width: 991px) {
  .header .logo.hidden-xs.hidden-sm.hidden-md { display: none !important; }
  .header .logo.visible-xs.visible-sm.visible-md { display: flex !important; }
}
body:has(#hus-consent.show) #hus-talk,
body:has(#hus-consent.show) #hc-btn,
body:has(#hus-consent.show) #hc-box { display: none !important; }
html, body { max-width: 100%; overflow-x: clip; }

/* Definitive Lagom logo breakpoint rules */
@media (min-width: 992px) {
  .logo.visible-xs.visible-sm.visible-md { display: none !important; }
  .logo.hidden-xs.hidden-sm.hidden-md { display: flex !important; }
}
@media (max-width: 991px) {
  .logo.hidden-xs.hidden-sm.hidden-md { display: none !important; }
  .logo.visible-xs.visible-sm.visible-md { display: flex !important; }
}