/* ========================================================================
   NABTECH COMPLETE HOSTING CSS | NATIVE CROSTER RECOVERY | v4.2.0
   ========================================================================
   Restored from the owner's original working file (16 October 2026).
   SECTION 1: original #dualForm_0 domain search (EXACT source)
   SECTION 2: original Croster pricing wrapper/billing/dropdown controls
   SECTION 3: PRISM 4.2 native-card styling, works without JavaScript
   SECTION 4: original global .btn.btn-block.btn-primary code (EXACT source)
   This is a COMPLETE .css file with NO <style> tags.
   The new card styles never add backgrounds outside native Croster cards.
   Existing WHMCS prices, cycle buttons and order URLs are left intact.
   Regional site support: /, /home, /index.php and five hosting paths.
   Do NOT load v4.0/v4.1 or the old global-list-scanner concurrently.
   ======================================================================== */

/* ============================================================
   NABTECH PREMIUM DOMAIN SEARCH BAR
   COMPLETE UPDATED VERSION
   ------------------------------------------------------------
   ONLY TARGETS:
   #dualForm_0

   CHANGES:
   - Search icon no longer has a padded/background box
   - Search icon is now clean and standalone
   - Input spacing adjusted for smaller icon footprint
   - Button background colours removed
   - Button text colours removed
   - Button hover colour/background overrides removed
   - Button focus colour/background overrides removed
   - Original theme now controls button colours and states
   - Premium sizing/layout retained
   - Nothing outside the search form is touched
   ============================================================ */


/* ============================================================
   SEARCH FORM
   ============================================================ */

#dualForm_0 {
    position: relative !important;
}


/* ============================================================
   MAIN SEARCH BAR SHELL
   ============================================================ */

#dualForm_0 .search-form {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;

    min-height: 72px !important;

    padding: 7px !important;

    border:
        1px solid rgba(30, 41, 59, 0.10) !important;

    border-radius:
        22px !important;

    background:
        rgba(255, 255, 255, 0.98) !important;

    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.065),
        0 2px 6px rgba(15, 23, 42, 0.025),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;

    overflow: hidden !important;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease !important;
}


/* ============================================================
   PREMIUM FOCUS STATE
   ============================================================ */

#dualForm_0 .search-form:focus-within {
    border-color:
        rgba(79, 70, 229, 0.28) !important;

    background:
        #ffffff !important;

    box-shadow:
        0 10px 26px rgba(15, 23, 42, 0.075),
        0 0 0 3px rgba(79, 70, 229, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}


/* ============================================================
   SEARCH ICON
   CLEAN ICON ONLY
   NO PADDED TILE / NO BACKGROUND
   ============================================================ */

#dualForm_0 .search-form .input-group-icon {
    position: absolute !important;

    left: 26px !important;
    top: 50% !important;

    transform:
        translateY(-50%) !important;

    z-index: 5 !important;

    width: 20px !important;
    height: 20px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    color:
        #596579 !important;

    font-size:
        17px !important;

    line-height:
        1 !important;

    pointer-events:
        none !important;

    transition:
        color 0.25s ease !important;
}


/* ============================================================
   SEARCH ICON FOCUS
   ONLY CHANGE ICON COLOUR
   NO BACKGROUND / BOX / PADDING
   ============================================================ */

#dualForm_0
.search-form:focus-within
.input-group-icon {
    color:
        #514bd8 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


/* ============================================================
   DOMAIN INPUT
   ============================================================ */

#dualForm_0
.search-form
.form-control.search-query {
    flex:
        1 1 auto !important;

    width:
        1% !important;

    min-width:
        0 !important;

    height:
        56px !important;

    padding:
        0 24px 0 55px !important;

    margin:
        0 !important;

    border:
        0 !important;

    border-radius:
        16px !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    outline:
        none !important;

    color:
        #172033 !important;

    font-size:
        17px !important;

    font-weight:
        600 !important;

    line-height:
        56px !important;

    letter-spacing:
        -0.015em !important;

    caret-color:
        #514bd8 !important;

    transition:
        background 0.25s ease !important;
}


/* ============================================================
   PLACEHOLDER
   ============================================================ */

#dualForm_0
.search-form
.form-control.search-query::placeholder {
    color:
        #8b95a7 !important;

    opacity:
        1 !important;

    font-weight:
        500 !important;
}


/* ============================================================
   INPUT FOCUS
   ============================================================ */

#dualForm_0
.search-form
.form-control.search-query:focus {
    border:
        0 !important;

    outline:
        none !important;

    box-shadow:
        none !important;

    background:
        rgba(248, 250, 255, 0.52) !important;
}


/* ============================================================
   AUTOFILL
   ============================================================ */

#dualForm_0
.search-form
.form-control.search-query:-webkit-autofill,

#dualForm_0
.search-form
.form-control.search-query:-webkit-autofill:hover,

#dualForm_0
.search-form
.form-control.search-query:-webkit-autofill:focus {
    -webkit-text-fill-color:
        #172033 !important;

    transition:
        background-color 9999s ease-out 0s !important;

    box-shadow:
        0 0 0 1000px #ffffff inset !important;
}


/* ============================================================
   BUTTON GROUP
   ============================================================ */

#dualForm_0
.search-form
.input-group-btn.btn-group {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;

    flex:
        0 0 auto !important;

    gap:
        6px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


/* ============================================================
   SHARED BUTTON LAYOUT

   IMPORTANT:
   NO BACKGROUND
   NO TEXT COLOUR
   NO BORDER COLOUR
   NO BOX SHADOW

   Those are intentionally left to the original theme.
   ============================================================ */

#dualForm_0
.search-form
.input-group-btn
.btn {
    position:
        relative !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-width:
        112px !important;

    height:
        56px !important;

    padding:
        0 22px !important;

    margin:
        0 !important;

    border-radius:
        15px !important;

    font-size:
        15px !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    letter-spacing:
        -0.01em !important;

    white-space:
        nowrap !important;

    transform:
        none !important;
}


/* ============================================================
   BUTTON TEXT
   NO COLOUR OVERRIDE
   ============================================================ */

#dualForm_0
.search-form
.input-group-btn
.btn
.btn_text {
    position:
        relative !important;

    z-index:
        1 !important;

    display:
        inline-block !important;

    pointer-events:
        none !important;
}


/* ============================================================
   SEARCH BUTTON

   INTENTIONALLY NO CUSTOM:
   - background
   - color
   - border-color
   - box-shadow

   .btn-primary from the theme now controls appearance.
   ============================================================ */

#dualForm_0
.search-form
.input-group-btn
.btn-primary {
    transform:
        none !important;
}


/* ============================================================
   REMOVE OLD CUSTOM SEARCH BUTTON SHINE
   ============================================================ */

#dualForm_0
.search-form
.input-group-btn
.btn-primary::before {
    content:
        none !important;
}


/* ============================================================
   TRANSFER BUTTON

   INTENTIONALLY NO CUSTOM:
   - background
   - color
   - border-color
   - box-shadow

   .btn-default from the theme controls appearance.
   ============================================================ */

#dualForm_0
.search-form
.input-group-btn
.btn-default {
    transform:
        none !important;
}


/* ============================================================
   BUTTON HOVER
   THEME CONTROLS COLOURS / BACKGROUNDS
   ============================================================ */

@media (hover: hover) {

    #dualForm_0
    .search-form
    .input-group-btn
    .btn-primary:hover,

    #dualForm_0
    .search-form
    .input-group-btn
    .btn-default:hover {
        transform:
            none !important;
    }
}


/* ============================================================
   BUTTON FOCUS / ACTIVE
   THEME CONTROLS COLOURS / BACKGROUNDS / SHADOWS
   ============================================================ */

#dualForm_0
.search-form
.input-group-btn
.btn:focus,

#dualForm_0
.search-form
.input-group-btn
.btn:focus-visible,

#dualForm_0
.search-form
.input-group-btn
.btn:active {
    transform:
        none !important;
}


/* ============================================================
   LOADER / DISABLED STATE
   ============================================================ */

#dualForm_0
.search-form
.input-group-btn
.btn:disabled,

#dualForm_0
.search-form
.input-group-btn
.btn.disabled {
    cursor:
        not-allowed !important;

    opacity:
        0.68 !important;

    transform:
        none !important;
}


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

@media (max-width: 767.98px) {

    #dualForm_0 .search-form {
        min-height:
            66px !important;

        padding:
            6px !important;

        border-radius:
            19px !important;
    }


    #dualForm_0
    .search-form
    .input-group-icon {
        left:
            21px !important;

        width:
            19px !important;

        height:
            19px !important;

        padding:
            0 !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;

        font-size:
            16px !important;
    }


    #dualForm_0
    .search-form
    .form-control.search-query {
        height:
            52px !important;

        padding-left:
            50px !important;

        padding-right:
            16px !important;

        font-size:
            16px !important;

        line-height:
            52px !important;
    }


    #dualForm_0
    .search-form
    .input-group-btn
    .btn {
        height:
            52px !important;

        min-width:
            96px !important;

        padding:
            0 17px !important;

        border-radius:
            13px !important;

        font-size:
            14px !important;
    }
}


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

@media (max-width: 575.98px) {

    #dualForm_0 .search-form {
        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:
            7px !important;

        padding:
            7px !important;

        border-radius:
            19px !important;
    }


    #dualForm_0
    .search-form
    .input-group-icon {
        top:
            33px !important;

        left:
            21px !important;

        width:
            19px !important;

        height:
            19px !important;

        padding:
            0 !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;
    }


    #dualForm_0
    .search-form
    .form-control.search-query {
        width:
            100% !important;

        min-width:
            100% !important;

        height:
            52px !important;

        padding-left:
            50px !important;

        padding-right:
            16px !important;

        border-radius:
            13px !important;
    }


    #dualForm_0
    .search-form
    .input-group-btn.btn-group {
        display:
            grid !important;

        grid-template-columns:
            1fr 1fr !important;

        width:
            100% !important;

        gap:
            7px !important;
    }


    #dualForm_0
    .search-form
    .input-group-btn
    .btn {
        width:
            100% !important;

        min-width:
            0 !important;

        height:
            50px !important;

        border-radius:
            13px !important;
    }
}


/* ============================================================
   VERY SMALL SCREENS
   ============================================================ */

@media (max-width: 380px) {

    #dualForm_0
    .search-form
    .input-group-btn.btn-group {
        grid-template-columns:
            1fr !important;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    #dualForm_0 *,
    #dualForm_0 *::before,
    #dualForm_0 *::after {
        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;
    }
}

/* RESTORED WORKING CROSTER WRAPPER AND BILLING STYLES */
/* ============================================================
   CROS PRICING CONTAINER
   ============================================================ */

.cros-pricing-container {

    position: relative !important;
    z-index: 20 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;
}


.cros-pricing-container::before,
.cros-pricing-container::after {
    content: none !important;
    display: none !important;

    background: none !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* ============================================================
   REMOVE BACKGROUND FROM CROS SLIDER WRAPPERS
   ============================================================ */

.cros-pricing-container .pricing_style_2,
.cros-pricing-container #pricing-tables-1,
.cros-pricing-container .pricing-slider,
.cros-pricing-container .pricing-1,
.cros-pricing-container .products-slide {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
}


.cros-pricing-container .pricing_style_2::before,
.cros-pricing-container .pricing_style_2::after,
.cros-pricing-container #pricing-tables-1::before,
.cros-pricing-container #pricing-tables-1::after,
.cros-pricing-container .pricing-slider::before,
.cros-pricing-container .pricing-slider::after,
.cros-pricing-container .products-slide::before,
.cros-pricing-container .products-slide::after {
    content: none !important;
    display: none !important;

    background: none !important;
    box-shadow: none !important;
}


/* ============================================================
   BILLING SWITCH
   ============================================================ */

.cros-pricing-container .product-billing-switcher-1 {
    position: relative !important;
    z-index: 50 !important;

    margin-bottom: 28px !important;

    text-align: center !important;

    background: transparent !important;
    background-image: none !important;

    box-shadow: none !important;

    overflow: visible !important;
}


/* ============================================================
   CORRECT DESKTOP / MOBILE SWITCH VISIBILITY
   ============================================================ */

@media (max-width: 575.98px) {

    .cros-pricing-container
    .product-billing-switcher-1
    .btn-group.d-none.d-sm-inline-block {
        display: none !important;
    }

    .cros-pricing-container
    .product-billing-switcher-1
    .btn-group.d-inline-block.d-sm-none {
        display: inline-block !important;
    }
}


@media (min-width: 576px) {

    .cros-pricing-container
    .product-billing-switcher-1
    .btn-group.d-none.d-sm-inline-block {
        display: inline-flex !important;
    }

    .cros-pricing-container
    .product-billing-switcher-1
    .btn-group.d-inline-block.d-sm-none {
        display: none !important;
    }
}


/* ============================================================
   PREMIUM DESKTOP BILLING SWITCH
   ============================================================ */

.cros-pricing-container
.product-billing-switcher-1
.btn-group.d-none.d-sm-inline-block {
    align-items: center !important;

    gap: 5px !important;

    padding: 6px !important;

    border:
        1px solid rgba(30, 41, 59, 0.10) !important;

    border-radius: 18px !important;

    background:
        rgba(255, 255, 255, 0.97) !important;

    box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.07),
        0 2px 5px rgba(15, 23, 42, 0.03) !important;

    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    overflow: visible !important;
}


/* ============================================================
   BILLING OPTIONS
   DO NOT RECOLOUR THEM
   ============================================================ */

.cros-pricing-container
.product-billing-switcher-1
.btn-group.d-none.d-sm-inline-block
.btn.cycle-change {
    position: relative !important;

    min-width: 102px !important;
    min-height: 43px !important;

    padding: 11px 21px !important;

    border: 0 !important;
    border-radius: 12px !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    letter-spacing: -0.01em !important;

    transform: none !important;

    transition:
        filter 0.22s ease,
        box-shadow 0.22s ease !important;
}


.cros-pricing-container
.product-billing-switcher-1
.btn-group.d-none.d-sm-inline-block
.btn.cycle-change:hover {
    transform: none !important;

    filter: brightness(1.035) !important;
}


.cros-pricing-container
.product-billing-switcher-1
.btn-group.d-none.d-sm-inline-block
.btn.cycle-change.active,

.cros-pricing-container
.product-billing-switcher-1
.btn-group.d-none.d-sm-inline-block
.btn.cycle-change.current,

.cros-pricing-container
.product-billing-switcher-1
.btn-group.d-none.d-sm-inline-block
.btn.cycle-change.selected,

.cros-pricing-container
.product-billing-switcher-1
.btn-group.d-none.d-sm-inline-block
.btn.cycle-change[aria-pressed="true"] {
    transform: none !important;

    box-shadow:
        0 5px 12px rgba(15, 23, 42, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}


/* ============================================================
   MOBILE BILLING CONTROL
   ============================================================ */

.cros-pricing-container
.product-billing-switcher-1
.btn-group.d-inline-block.d-sm-none {
    position: relative !important;
    z-index: 100 !important;

    padding: 5px !important;

    border:
        1px solid rgba(30, 41, 59, 0.10) !important;

    border-radius: 16px !important;

    background:
        rgba(255, 255, 255, 0.97) !important;

    box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.07) !important;

    overflow: visible !important;
}


.cros-pricing-container
.product-billing-switcher-1
.dropdown-toggle {
    border-radius: 11px !important;

    font-weight: 700 !important;

    box-shadow: none !important;

    transform: none !important;
}


/* ============================================================
   DROPDOWN
   ============================================================ */

.cros-pricing-container .dropdown,
.cros-pricing-container .btn-group {
    position: relative !important;
}


.cros-pricing-container .dropdown-menu {
    z-index: 99999 !important;

    margin-top: 8px !important;

    padding: 7px !important;

    border:
        1px solid rgba(30, 41, 59, 0.10) !important;

    border-radius: 15px !important;

    background: #ffffff !important;

    box-shadow:
        0 18px 42px rgba(15, 23, 42, 0.16),
        0 4px 12px rgba(15, 23, 42, 0.06) !important;

    overflow: visible !important;
}


.cros-pricing-container .dropdown-menu.show {
    display: block !important;

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

    z-index: 99999 !important;
}


.cros-pricing-container .dropdown-item {
    padding: 10px 14px !important;

    border-radius: 10px !important;

    font-weight: 650 !important;
}


/* ============================================================
   DROPDOWN OPEN STATE
   ============================================================ */

.cros-pricing-container.nabtech-dropdown-open {
    z-index: 500 !important;
}


.cros-pricing-container.nabtech-dropdown-open
.pricing_style_2,

.cros-pricing-container.nabtech-dropdown-open
#pricing-tables-1,

.cros-pricing-container.nabtech-dropdown-open
.pricing-slider {
    overflow: visible !important;
}


.cros-pricing-container
.products-slide.nabtech-dropdown-open {
    position: relative !important;

    z-index: 1000 !important;

    overflow: visible !important;
}


.cros-pricing-container
.cros-pricing-table.nabtech-dropdown-open {
    position: relative !important;

    z-index: 1001 !important;

    overflow: visible !important;
}


.cros-pricing-container
.nabtech-dropdown-open
.dropdown,

.cros-pricing-container
.nabtech-dropdown-open
.btn-group {
    z-index: 1002 !important;

    overflow: visible !important;
}

/* PRISM 4.2: NATIVE PRICE CARDS, NO JS CLASS DEPENDENCY */
/*
 NABTECH PRISM RECOVERY 4.2.2 | NO OUTER CARD SHADOWS
 Based on the owner's working premium-pricing override, revised to stay
 INSIDE each existing .cros-pricing-table. No BODY, HTML, #sec-1, .sec,
 .cros-pricing-container, slider, product row, sidebar or homepage background.
 Separate complete CSS file. No <style> wrapper and no fixed currency values.
 Native Croster card selectors work BEFORE and WITHOUT JavaScript.
 VPS, dedicated and native comparison matrices are not processed.
 Your complete original #dualForm_0 search and global button styling are included.
*/
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) {
  --nbp4-line:#d7e6f0; --nbp4-ink:#173d58; --nbp4-muted:#53758e;
  --nbp4-accent:#5cbcd6; --nbp4-aqua:#a5ecdf;
  isolation:isolate!important; position:relative!important; box-sizing:border-box!important;
  display:flex!important; flex-direction:column!important;
  width:100%!important;max-width:100%!important;min-width:0!important;
  height:auto!important;min-height:var(--nbp4-equal-height,0px)!important;
  margin:0 0 18px!important; padding:26px 23px 24px!important;
  border:1px solid var(--nbp4-line)!important;border-radius:25px!important;
  background:#ffffff!important;
  color:var(--nbp4-ink)!important;
  box-shadow:none!important;
  text-align:left!important;overflow:visible!important;transform:none!important;
  transition:border-color .26s ease,background .3s ease!important;
}
/* The slim top accent is INSIDE the border. No external glow. */
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"]))::before {
  content:""!important;position:absolute!important;top:0!important;left:24px!important;right:24px!important;
  height:3px!important;border-radius:0 0 6px 6px!important;
  background:linear-gradient(90deg,transparent,var(--nbp4-accent) 27%,#a0d5ee 70%,transparent)!important;
  opacity:.85!important;pointer-events:none!important;z-index:1!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"]))::after {
  content:none!important;display:none!important;background:none!important;
  box-shadow:none!important;
}
@media(hover:hover) and (pointer:fine){
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])):hover{border-color:#90cbdc!important;box-shadow:none!important;transform:none!important}
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) > :not(.nbp4-card-art){position:relative;z-index:2;min-width:0}
/* Dimensional SVG remains inside each card but produces no exterior drop shadow. */
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) > .nbp4-card-art{
  position:absolute!important;z-index:0!important;top:9px!important;right:9px!important;
  width:154px!important;height:103px!important;max-width:42%!important;
  opacity:.19!important;display:block!important;overflow:visible!important;
  pointer-events:none!important;filter:none!important;
  transform:translateZ(0)!important;animation:nbp4-art-float 13s ease-in-out infinite!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"]))[data-nbp4-featured="true"]{
  --nbp4-accent:#35b9c5;--nbp4-line:#83ced9;
  border:2px solid #76cbd8!important;
  background:#ffffff!important;
  box-shadow:none!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])):is(.dark,.bg-primary){
  background:#ffffff!important;
  color:#173d58!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"]))[data-nbp4-featured="true"]:is(.dark,.bg-primary){
  background:#ffffff!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-card-art + *{position:relative;z-index:2}
/* Heading remains near its original location, no large fixed empty spacer. */
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) :is(.h4,.plan-name){
  margin:3px 0 12px!important;padding:0!important;
  min-width:0!important;min-height:var(--nbp4-title-height,0px)!important;
  width:auto!important;max-width:100%!important;
  font-family:inherit!important;font-weight:750!important;font-size:clamp(20px,1.87vw,27px)!important;
  line-height:1.27!important;letter-spacing:-.04em!important;
  color:#173d59!important;-webkit-text-fill-color:#173d59!important;
  text-shadow:none!important;overflow-wrap:anywhere!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .graphics{max-width:100%!important;margin:0 0 12px!important;min-height:0!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .graphics .icon{
  display:grid!important;place-items:center!important;width:52px!important;height:52px!important;
  border-radius:16px!important;border:1px solid #b6d7e5!important;
  color:#287b9c!important;-webkit-text-fill-color:#287b9c!important;
  background:linear-gradient(137deg,#fff,#def2fa 60%,#a9c9dc)!important;
  box-shadow:inset 2px 3px 5px #fff,0 9px 17px rgba(13,79,128,.1)!important;
  transform:perspective(290px) rotateY(-8deg) rotateX(4deg)!important;
  transition:transform .3s ease,box-shadow .3s ease!important;
}
@media(hover:hover) and (pointer:fine){:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])):hover .graphics .icon{transform:perspective(290px) rotateY(-2deg) rotateX(2deg)!important;box-shadow:inset 2px 3px 5px #fff,0 12px 24px rgba(13,79,128,.16)!important}}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .graphics .icon i{font-size:23px!important;line-height:1!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .graphics img{max-width:min(100%,150px)!important;height:auto!important;object-fit:contain!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) :is(.desc,.desc_small){
  color:#57748a!important;-webkit-text-fill-color:#57748a!important;
  font-size:12.5px!important;line-height:1.75!important;margin:0 0 13px!important;
  overflow-wrap:anywhere!important;
}
/* Price: typography and wrapping only. No replacement of colour or numeric text. */
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) :is(.billing-cycle-pricing,.product_pricing_single){
  margin:7px 0 13px!important;padding:0!important;width:100%!important;max-width:100%!important;min-width:0!important;
  min-height:var(--nbp4-pricing-height,0px)!important;position:relative!important;z-index:6!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) :is(.product_pricing,.pricing_main,.pricing_main_default){min-width:0!important;max-width:100%!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .billing-cycle-pricing .btn-group{width:100%!important;max-width:100%!important;min-width:0!important;position:relative!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .billing-cycle-pricing .dropdown-toggle{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;
  max-width:100%!important;min-height:44px!important;padding:9px 12px!important;
  border:1px solid #c4deed!important;border-radius:11px!important;
  background:linear-gradient(130deg,#fff,#eaf6fc)!important;
  color:#285a76!important;-webkit-text-fill-color:#285a76!important;
  font-family:inherit!important;font-size:12px!important;font-weight:700!important;line-height:1.5!important;
  text-align:left!important;text-decoration:none!important;box-shadow:inset 0 1px 0 #fff!important;
  white-space:normal!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .billing-cycle-pricing .dropdown-toggle:hover{border-color:#85bed7!important;background:#f0faff!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .billing-cycle-pricing .pricing_wrapr{display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important;max-width:100%!important;white-space:normal!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .billing-cycle-pricing .save_text{position:static!important;float:none!important;margin:0 0 0 auto!important;flex:0 0 auto!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) :is(.save_text .badge,.regular_pricing .badge-primary){
  border-radius:6px!important;border:1px solid #deb92c!important;
  background:linear-gradient(131deg,#fff3ad,#fadc45)!important;
  color:#4e3b12!important;-webkit-text-fill-color:#4e3b12!important;
  font-family:inherit!important;font-size:10px!important;font-weight:800!important;line-height:1.5!important;padding:4px 7px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;white-space:normal!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .billing-cycle-pricing .dropdown-menu{
  max-height:235px!important;overflow-y:auto!important;overflow-x:hidden!important;
  scrollbar-width:thin!important;min-width:100%!important;
  padding:6px!important;border:1px solid #c0dcea!important;border-radius:12px!important;
  background:#fff!important;box-shadow:0 16px 36px rgba(12,68,112,.15)!important;z-index:1500!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .billing-cycle-pricing .billinging_wrapr{
  padding:9px 11px!important;margin:0!important;border-radius:8px!important;
  color:#345e77!important;-webkit-text-fill-color:#345e77!important;font-family:inherit!important;font-size:12px!important;font-weight:600!important;line-height:1.5!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .billing-cycle-pricing .billinging_wrapr:hover{background:#ecf8fc!important;color:#165674!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .price{
  display:flex!important;flex-wrap:wrap!important;align-items:baseline!important;gap:3px 5px!important;
  max-width:100%!important;min-width:0!important;line-height:1.2!important;
  margin:8px 0 4px!important;padding:0!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .price .cost{
  display:inline-block!important;min-width:0!important;max-width:100%!important;
  font-family:inherit!important;font-weight:790!important;
  font-size:clamp(30px,2.65vw,40px)!important;line-height:1.18!important;letter-spacing:-.045em!important;
  font-variant-numeric:tabular-nums!important;white-space:normal!important;overflow-wrap:anywhere!important;
  text-shadow:none!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .price .cost.nbp4-long-price{font-size:clamp(23px,2vw,30px)!important;letter-spacing:-.032em!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) :is(.cycle,.suffix,.regular_pricing,.setup-fee){font-family:inherit!important;font-size:12px!important;line-height:1.65!important;overflow-wrap:anywhere!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .regular_pricing .savecut{font-size:11px!important;text-decoration:line-through!important}
/* Preserve the original theme button colours. Only shape, depth and hover. */
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .product-actions{
  position:relative!important;width:100%!important;max-width:100%!important;
  min-height:var(--nbp4-action-height,0px)!important;
  margin:15px 0 13px!important;padding:0!important;z-index:3!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .product-actions :is(a.btn,button.btn){
  position:relative!important;display:inline-flex!important;justify-content:center!important;align-items:center!important;
  gap:10px!important;width:100%!important;max-width:100%!important;min-height:51px!important;
  padding:12px 16px!important;margin:0!important;border-radius:13px!important;
  font-family:inherit!important;font-size:14px!important;font-weight:740!important;line-height:1.45!important;
  white-space:normal!important;text-decoration:none!important;
  box-shadow:0 8px 20px rgba(15,64,101,.16),inset 0 1px 0 rgba(255,255,255,.16)!important;
  transform:none!important;transition:box-shadow .25s ease,filter .25s ease!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .product-actions :is(a.btn,button.btn) .nbp4-order-arrow{display:inline-grid!important;place-items:center!important;width:19px!important;height:19px!important;opacity:.85!important;flex:0 0 19px!important;transform:translateX(0)!important;transition:transform .22s ease,opacity .22s ease!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .product-actions .nbp4-order-arrow svg{width:17px!important;height:17px!important;stroke:currentColor!important}
@media(hover:hover) and (pointer:fine){
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .product-actions :is(a.btn,button.btn):hover{filter:brightness(1.055)!important;box-shadow:0 12px 26px rgba(15,64,101,.23),inset 0 1px 0 rgba(255,255,255,.18)!important;transform:none!important}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .product-actions :is(a.btn,button.btn):hover .nbp4-order-arrow{transform:translateX(3px)!important;opacity:1!important}
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .product-actions .btn:focus-visible{outline:3px solid #77d4e9!important;outline-offset:4px!important}
/* Pricing features: no wrapper paint, no padded stripe connecting cards. */
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) :is(.plan-features,.nbp4-feature-list,.nbp4-feature-generated){
  display:block!important;list-style:none!important;box-sizing:border-box!important;
  width:100%!important;max-width:100%!important;min-width:0!important;
  margin:12px 0 0!important;padding:0!important;
  border:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;
  color:#234b66!important;-webkit-text-fill-color:#234b66!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature{
  position:relative!important;box-sizing:border-box!important;
  display:flex!important;align-items:center!important;gap:11px!important;
  list-style:none!important;min-width:0!important;max-width:100%!important;width:100%!important;
  min-height:49px!important;margin:0 0 8px!important;padding:9px 12px!important;
  border:1px solid #d8e7ee!important;border-radius:12px!important;
  background:linear-gradient(117deg,#fff 0%,#f9fdff 64%,#f0f8fc 100%)!important;
  color:#25516b!important;-webkit-text-fill-color:#25516b!important;
  font-family:inherit!important;font-size:12.5px!important;font-weight:490!important;line-height:1.65!important;
  text-align:left!important;text-indent:0!important;overflow:visible!important;
  box-shadow:inset 0 1px 0 #fff,0 2px 5px rgba(23,85,117,.035)!important;
  transform:none!important;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature:last-child{margin-bottom:0!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature::before,:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature::after{content:none!important;display:none!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature > :is(.fa,.fas,.far,.fa-check,.fa-check-circle){display:none!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature .nbp4-check{
  display:grid!important;place-items:center!important;flex:0 0 29px!important;
  width:29px!important;height:29px!important;padding:0!important;margin:0!important;
  border:1px solid #96d9c8!important;border-radius:10px!important;
  background:linear-gradient(133deg,#fcfffe 0%,#d8f8ed 54%,#b9eadd 100%)!important;
  box-shadow:inset 2px 2px 3px #fff,0 4px 7px rgba(9,115,91,.10)!important;
  color:#07866f!important;-webkit-text-fill-color:#07866f!important;
  transform:perspective(250px) rotateY(-7deg)!important;
  transition:box-shadow .25s ease,transform .25s ease!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature .nbp4-check svg{width:17px!important;height:17px!important;stroke:currentColor!important;fill:none!important;stroke-width:2.6!important;stroke-linecap:round!important;stroke-linejoin:round!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature[data-nbp4-negative] .nbp4-check{color:#5d7488!important;-webkit-text-fill-color:#5d7488!important;border-color:#cfdee8!important;background:linear-gradient(#fff,#e7f0f5)!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature[data-nbp4-negative]{color:#7b91a2!important;-webkit-text-fill-color:#7b91a2!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature .nbp4-feature-copy{
  display:inline!important;min-width:0!important;flex:1 1 auto!important;
  padding:0!important;margin:0!important;font:inherit!important;line-height:1.68!important;
  color:inherit!important;-webkit-text-fill-color:currentColor!important;
  white-space:normal!important;overflow-wrap:anywhere!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature .nbp4-feature-copy :is(b,strong).nbp4-value{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  padding:2px 8px!important;margin-right:7px!important;margin-bottom:2px!important;
  min-height:24px!important;max-width:100%!important;
  border-radius:7px!important;border:1px solid #b4dceb!important;
  background:linear-gradient(135deg,#eefaff,#d5effb)!important;
  color:#175c7a!important;-webkit-text-fill-color:#175c7a!important;
  font-family:inherit!important;font-size:11px!important;line-height:1.4!important;font-weight:790!important;
  box-shadow:inset 0 1px 0 #fff,0 3px 7px rgba(35,109,153,.07)!important;
  white-space:normal!important;overflow-wrap:anywhere!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature a{text-decoration:underline!important;text-underline-offset:2px!important;color:#096c9b!important;-webkit-text-fill-color:#096c9b!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature[data-nbp4-ai]{border-color:#c4dcf7!important;background:linear-gradient(125deg,#fafcff,#edf5ff)!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature[data-nbp4-ai] .nbp4-check{color:#6857bd!important;-webkit-text-fill-color:#6857bd!important;border-color:#c7bbed!important;background:linear-gradient(130deg,#fff,#ece5ff)!important}
@media(hover:hover) and (pointer:fine){
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature:hover{background:linear-gradient(115deg,#ffffff,#edf8ff)!important;border-color:#9bcfe2!important;box-shadow:inset 0 1px 0 #fff,0 5px 12px rgba(23,85,117,.10)!important}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature:hover .nbp4-check{transform:perspective(250px) rotateY(0deg)!important;box-shadow:inset 2px 2px 3px #fff,0 5px 11px rgba(9,115,91,.15)!important}
}
/* Original Croster desktop features are always visible. Native mobile toggles
   retain their own Bootstrap behaviour, enhanced with + / - icons in JS. */
@media(min-width:768px){
 :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .plan-features.collapse:not(.show){display:block!important;height:auto!important;visibility:visible!important;overflow:visible!important}
 :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .PriceList-toggle{display:none!important}
 :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-mobile-toggle{display:none!important}
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .PriceList-toggle,:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-mobile-toggle{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
  width:100%!important;margin:12px 0 0!important;padding:11px 13px!important;
  border-radius:11px!important;border:1px solid #c9dfeb!important;
  background:linear-gradient(135deg,#fff,#f0f9ff)!important;
  color:#245a78!important;-webkit-text-fill-color:#245a78!important;
  text-align:left!important;text-indent:0!important;cursor:pointer!important;
  font-family:inherit!important;font-size:12px!important;font-weight:720!important;line-height:1.5!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-toggle-icon{display:inline-grid!important;place-items:center!important;flex:0 0 29px!important;width:29px!important;height:29px!important;border-radius:8px!important;border:1px solid #c2dfec!important;background:#e6f5fc!important;color:#1d759b!important;-webkit-text-fill-color:#1d759b!important;font-size:15px!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-toggle-icon svg{width:14px!important;height:14px!important;stroke:currentColor!important;fill:none!important;stroke-width:2.2!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-toggle-icon .nbp4-fa{display:none!important;font-size:14px!important;line-height:1!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-toggle-icon.nbp4-fa-ready .nbp4-fa{display:inline-block!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-toggle-icon.nbp4-fa-ready svg{display:none!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) [aria-expanded="true"] .nbp4-toggle-icon{color:#fff!important;-webkit-text-fill-color:#fff!important;background:#276f98!important;border-color:#276f98!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-mobile-toggle{appearance:none!important}
/* Homepage group product cards: no forced height, footer padding, or artificial
   spacer between the order action and rounded card bottom. */
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"]))[data-nbp4-layout="group"]{height:auto!important;min-height:0!important;padding-bottom:20px!important;margin-bottom:12px!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"]))[data-nbp4-layout="group"] .product-actions{min-height:0!important;margin:12px 0 0!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"]))[data-nbp4-layout="group"] :is(.desc,.starting-from,.price,.cycle){min-height:0!important}
/* Source: Croster pt_st_5 is a horizontal price-card layout. Preserve its grid. */
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"]))[data-nbp4-layout="horizontal"]{display:block!important;min-height:0!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"]))[data-nbp4-layout="horizontal"] .plan-details .h4{min-height:0!important}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"]))[data-nbp4-layout="horizontal"] .product-actions{margin-bottom:0!important}
@media(max-width:767.98px){
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])){padding:21px 16px 19px!important;border-radius:21px!important;min-height:0!important;height:auto!important}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) :is(.h4,.plan-name){min-height:0!important;font-size:23px!important;padding-right:0!important}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .price .cost{font-size:clamp(26px,7.8vw,36px)!important}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .price .cost.nbp4-long-price{font-size:clamp(22px,6.2vw,30px)!important}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature{min-height:45px!important;padding:9px 10px!important;font-size:12px!important;gap:9px!important}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature .nbp4-check{flex-basis:27px!important;width:27px!important;height:27px!important}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature .nbp4-feature-copy :is(b,strong).nbp4-value{font-size:10.5px!important;padding:2px 6px!important;margin-right:5px!important}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) > .nbp4-card-art{width:115px!important;height:80px!important;right:8px!important;opacity:.12!important}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .plan-features.collapse:not(.show){display:none!important}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"]))[data-nbp4-mobile-compact]:not([data-nbp4-expanded="true"]) .plan-features:not(.collapse) > .nbp4-feature:nth-child(n+5){display:none!important}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"]))[data-nbp4-mobile-compact]:not([data-nbp4-expanded="true"]) .nbp4-feature-generated > .nbp4-feature:nth-child(n+5){display:none!important}
}
@media(min-width:768px){:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .PriceList-toggle,:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-mobile-toggle{display:none!important}}
@media(max-width:375px){:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])){padding-inline:13px!important}:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature{padding-inline:9px!important;gap:8px!important}}
@media(prefers-reduced-motion:reduce){:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])),:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) *, :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"]))::before,:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"]))::after{animation:none!important;transition:none!important}}
@keyframes nbp4-art-float{0%,100%{transform:translateY(0);opacity:.16}50%{transform:translateY(-5px);opacity:.25}}

/* =========================================================
   RECOVERY 4.2: CSS WORKS EVEN IF JAVASCRIPT NEVER LOADS.
   Every declaration below is a NATIVE Croster selector.
   These fallback styles make original HTML lists useful without JS.
   PRISM's JS adds more intricate value chips and SVG graphics later.
   ========================================================= */

:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])){--nbp42-loaded:1!important;}

:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .plan-features > li:not(.nbp4-feature),
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) :is(.product-features,.pricing-features,.package-features,.features-list,.feature-list,.hosting-features) > li:not(.nbp4-feature){
  position:relative!important;display:block!important;width:100%!important;
  min-width:0!important;min-height:46px!important;margin:0 0 9px!important;
  padding:11px 13px 11px 50px!important;
  list-style:none!important;line-height:1.65!important;
  border:1px solid #d6e8f1!important;border-radius:13px!important;
  color:#234c65!important;background:linear-gradient(135deg,#fff,#f3faff)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95)!important;
  overflow-wrap:anywhere!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .plan-features > li:not(.nbp4-feature)::before,
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) :is(.product-features,.pricing-features,.package-features,.features-list,.feature-list,.hosting-features) > li:not(.nbp4-feature)::before{
  content:'✓'!important;position:absolute!important;left:12px!important;top:50%!important;
  width:27px!important;height:27px!important;display:grid!important;place-items:center!important;
  transform:translateY(-50%)!important;border:1px solid #9bdcca!important;border-radius:8px!important;
  background:linear-gradient(145deg,#fff,#dcf9ed)!important;color:#087e68!important;
  font:800 18px/1.4 Arial,sans-serif!important;box-shadow:0 2px 8px rgba(21,120,105,.085)!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .plan-features > li:not(.nbp4-feature) :is(b,strong),
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) :is(.product-features,.pricing-features,.package-features,.features-list,.feature-list,.hosting-features) > li:not(.nbp4-feature) :is(b,strong){
  display:inline-block!important;vertical-align:baseline!important;
  padding:2px 7px!important;margin:0 5px 0 0!important;border:1px solid #b9dfea!important;
  border-radius:7px!important;background:linear-gradient(145deg,#fbfeff,#dcf3fb)!important;
  color:#115775!important;letter-spacing:-.015em!important;font-weight:750!important;
  box-shadow:inset 1px 1px 0 #fff!important;
}
@media(hover:hover) and (pointer:fine){
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .plan-features > li:not(.nbp4-feature):hover{
     border-color:#9bcbdc!important;background:#f0faff!important;
     box-shadow:0 8px 18px rgba(26,93,130,.075)!important;
  }
}

/* Recovery: Croster overflow-hidden was higher-specificity than old PRISM.
   Keep each CARD overflow visible so its own menu and focus rings work. */
.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]):not(.nabtech-dropdown-open),
.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"]):not(.nabtech-dropdown-open){overflow:visible!important;}
/* While a native billing menu is open only, allow its placement through the
   slider structure. Outside of an open menu all native swiper clipping stays. */
.cros-pricing-container:has(.cros-pricing-table .billing-cycle-pricing .dropdown-menu.show)
  :is(.pricing_style_2,.pricing-slider,.products-slide,.swiper),
.cros-pricing-container:has(.cros-pricing-table .billing-cycle-pricing .btn-group.show)
  :is(.pricing_style_2,.pricing-slider,.products-slide,.swiper){overflow:visible!important;}

/* RESTORED ORIGINAL GLOBAL PRIMARY BUTTONS */
/* ============================================================
   NABTECH GLOBAL PREMIUM BLOCK PRIMARY BUTTONS
   ============================================================

   TARGETS:
   .btn.btn-block.btn-primary

   SAME FEEL AS PRICING TABLE BUTTONS

   - Premium rounded shape
   - Better typography
   - Controlled shadow
   - Animated light sweep
   - No zoom
   - No lift
   - No movement
   - No forced background colour
   - No forced text colour
   - Keeps theme's btn-primary colours
   ============================================================ */


/* ============================================================
   MAIN BUTTON
   ============================================================ */

.btn.btn-block.btn-primary {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    min-height: 57px !important;

    padding: 14px 22px !important;

    border-radius: 17px !important;

    font-size: 17px !important;

    font-weight: 780 !important;

    line-height: 1.2 !important;

    letter-spacing: -0.015em !important;

    text-align: center !important;

    text-decoration: none !important;

    white-space: normal !important;

    position: relative !important;

    overflow: hidden !important;

    /*
       IMPORTANT:
       Keep button completely stationary.
    */
    transform: none !important;

    /*
       Premium but restrained depth.
    */
    box-shadow:
        0 7px 16px rgba(15, 23, 42, 0.11) !important;

    transition:
        box-shadow 0.25s ease,
        filter 0.25s ease,
        border-color 0.25s ease !important;
}


/* ============================================================
   IMPORTANT:
   DO NOT OVERRIDE THE THEME BUTTON COLOUR

   There is intentionally NO:
   background
   background-color
   color

   Your existing .btn-primary style remains in control.
   ============================================================ */


/* ============================================================
   PREMIUM LIGHT SWEEP
   ============================================================ */

.btn.btn-block.btn-primary::before {
    content: "";

    position: absolute !important;

    top: -55% !important;
    left: -45% !important;

    width: 34% !important;
    height: 210% !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.28),
            transparent
        ) !important;

    transform:
        rotate(20deg)
        translateX(-280%) !important;

    transition:
        transform 0.72s
        cubic-bezier(.2, .75, .25, 1) !important;

    pointer-events: none !important;

    z-index: 1 !important;
}


/* ============================================================
   KEEP BUTTON CONTENT ABOVE LIGHT EFFECT
   ============================================================ */

.btn.btn-block.btn-primary > * {
    position: relative !important;

    z-index: 2 !important;
}


/*
   Also handles buttons whose text is not wrapped
   in a child span.
*/
a.btn.btn-block.btn-primary,
button.btn.btn-block.btn-primary {
    isolation: isolate !important;
}


/* ============================================================
   HOVER
   NO MOVEMENT
   ============================================================ */

@media (hover: hover) {

    .btn.btn-block.btn-primary:hover {
        transform: none !important;

        filter:
            brightness(1.045) !important;

        box-shadow:
            0 10px 22px rgba(15, 23, 42, 0.15) !important;

        text-decoration: none !important;
    }


    /* Run light through button */
    .btn.btn-block.btn-primary:hover::before {
        transform:
            rotate(20deg)
            translateX(550%) !important;
    }
}


/* ============================================================
   ACTIVE / CLICKED
   ============================================================ */

.btn.btn-block.btn-primary:active,
.btn.btn-block.btn-primary.active {
    transform: none !important;

    filter:
        brightness(0.97) !important;

    box-shadow:
        0 4px 11px rgba(15, 23, 42, 0.12) !important;
}


/* ============================================================
   FOCUS
   REMOVE UGLY BLACK BROWSER OUTLINE
   ============================================================ */

.btn.btn-block.btn-primary:focus,
.btn.btn-block.btn-primary:focus-visible {
    outline: none !important;

    transform: none !important;

    box-shadow:
        0 0 0 3px rgba(59, 91, 219, 0.11),
        0 7px 16px rgba(15, 23, 42, 0.11) !important;
}


/* ============================================================
   DISABLED
   ============================================================ */

.btn.btn-block.btn-primary:disabled,
.btn.btn-block.btn-primary.disabled,
.btn.btn-block.btn-primary[disabled],
.btn.btn-block.btn-primary[aria-disabled="true"] {
    cursor: not-allowed !important;

    opacity: 0.62 !important;

    transform: none !important;

    filter: none !important;

    box-shadow:
        0 3px 8px rgba(15, 23, 42, 0.07) !important;
}


/* Disable animated light while disabled */
.btn.btn-block.btn-primary:disabled::before,
.btn.btn-block.btn-primary.disabled::before,
.btn.btn-block.btn-primary[disabled]::before,
.btn.btn-block.btn-primary[aria-disabled="true"]::before {
    display: none !important;
}


/* ============================================================
   BUTTON ICONS
   ============================================================ */

.btn.btn-block.btn-primary i,
.btn.btn-block.btn-primary svg {
    position: relative !important;

    z-index: 2 !important;

    flex-shrink: 0 !important;
}


/* Icon before text */
.btn.btn-block.btn-primary i:first-child,
.btn.btn-block.btn-primary svg:first-child {
    margin-right: 8px !important;
}


/* Icon after text */
.btn.btn-block.btn-primary i:last-child:not(:first-child),
.btn.btn-block.btn-primary svg:last-child:not(:first-child) {
    margin-left: 8px !important;
}


/* ============================================================
   LOADER / SPINNER SUPPORT
   ============================================================ */

.btn.btn-block.btn-primary .spinner-border,
.btn.btn-block.btn-primary .spinner-grow,
.btn.btn-block.btn-primary .fa-spinner,
.btn.btn-block.btn-primary .fa-circle-notch {
    position: relative !important;

    z-index: 3 !important;
}


/* ============================================================
   INPUT BUTTON SUPPORT

   input elements cannot render ::before,
   but get the same dimensions/shadow/shape.
   ============================================================ */

input.btn.btn-block.btn-primary {
    min-height: 57px !important;

    padding: 14px 22px !important;

    border-radius: 17px !important;

    font-size: 17px !important;

    font-weight: 780 !important;

    line-height: 1.2 !important;

    letter-spacing: -0.015em !important;

    text-align: center !important;

    transform: none !important;

    box-shadow:
        0 7px 16px rgba(15, 23, 42, 0.11) !important;

    transition:
        box-shadow 0.25s ease,
        filter 0.25s ease !important;
}


@media (hover: hover) {

    input.btn.btn-block.btn-primary:hover {
        transform: none !important;

        filter:
            brightness(1.045) !important;

        box-shadow:
            0 10px 22px rgba(15, 23, 42, 0.15) !important;
    }
}


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

@media (max-width: 575.98px) {

    .btn.btn-block.btn-primary {
        min-height: 53px !important;

        padding:
            13px 18px !important;

        border-radius:
            15px !important;

        font-size:
            16px !important;
    }


    input.btn.btn-block.btn-primary {
        min-height:
            53px !important;

        padding:
            13px 18px !important;

        border-radius:
            15px !important;

        font-size:
            16px !important;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .btn.btn-block.btn-primary,
    .btn.btn-block.btn-primary::before {
        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;
    }
}


/* ========================================================================
   NABTECH PRISM DEPTH 4.3.1
   Card-only refinement. Written against ProductPriceListOne + Nabtech Croster.
   Target: pricing cards and their descendants ONLY.
   No external overlay, background, shadow, wrapper or slider modification.
   Complete v4.2.2 owner CSS remains above, including #dualForm_0 and buttons.
   ======================================================================== */

/* No artificial distribution of empty height into feature-list rows. */
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])){
  justify-content:flex-start!important;
  align-content:flex-start!important;
  gap:0!important;
  transform:none!important;
  transform-origin:center center!important;
  transform-style:preserve-3d!important;
  backface-visibility:visible!important;
  perspective-origin:center center!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;
  transition:border-color .3s ease,box-shadow .35s ease,filter .28s ease!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"]))[data-nbp4-featured="true"],
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])).active{
  box-shadow:inset 0 1px 0 white,inset 0 0 0 1px rgba(80,190,208,.14)!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"]))::after{content:none!important;display:none!important;}
/* The original slim line stays INSIDE the card. It elongates on hover. */
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"]))::before{
  left:23%!important;right:23%!important;height:3px!important;
  transition:left .35s ease,right .35s ease,background .35s ease!important;
}
@media(hover:hover) and (pointer:fine) and (min-width:1025px){
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])):hover:not(:has(.dropdown-menu.show)):not(:has(.btn-group.show)){
    position:relative!important;z-index:5!important;
    transform:none!important;
    filter:saturate(1.02)!important;
    border-color:#6fbfd3!important;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.95),inset -3px -3px 0 rgba(68,174,206,.1),inset 3px 1px 0 rgba(237,252,255,.8)!important;
  }
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])):hover::before{left:10%!important;right:10%!important;}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])):hover > .nbp4-card-art{opacity:.34!important;}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])):focus-within:not(:has(.dropdown-menu.show)){border-color:#7cbfda!important;}
}
/* Layered server drawing, not another image or overlay beyond the card. */
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) > .nbp4-card-art{
  position:absolute!important;top:9px!important;right:10px!important;
  display:block!important;width:154px!important;height:108px!important;
  max-width:39%!important;pointer-events:none!important;
  z-index:0!important;overflow:visible!important;opacity:.22!important;
  filter:none!important;box-shadow:none!important;
  transform:translateZ(0)!important;
  animation:nbp43-bob 10s ease-in-out infinite!important;
  transition:opacity .3s ease!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) > .nbp4-card-art .nbp43-signal{
  stroke-dasharray:6 12;animation:nbp43-flow 15s linear infinite;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) > .nbp4-card-art .nbp43-beacon{
  animation:nbp43-beacon 3.3s ease-in-out infinite;
}
@keyframes nbp43-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes nbp43-flow{to{stroke-dashoffset:-144}}
@keyframes nbp43-beacon{0%,100%{opacity:.32}50%{opacity:.96}}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])):is(.active,[data-nbp4-featured="true"]) > .nbp4-card-art{top:14px!important;max-width:31%!important;opacity:.17!important;}
/* Feature list content stays at the top, never spaced across an equal-height card. */
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) :is(.plan-features,.nbp4-feature-list,.nbp4-feature-generated){
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  justify-content:flex-start!important;align-content:flex-start!important;
  gap:6px!important;row-gap:6px!important;column-gap:0!important;
  flex:0 0 auto!important;align-self:stretch!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  grid-auto-rows:auto!important;
  margin:13px 0 0!important;padding:0!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
}
/* The feature itself is a lean, luminous line rather than a bulky inset card. */
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature{
  display:flex!important;flex:0 0 auto!important;align-items:center!important;
  align-self:stretch!important;justify-content:flex-start!important;align-content:center!important;
  gap:10px!important;row-gap:0!important;
  width:100%!important;max-width:100%!important;
  height:auto!important;min-height:40px!important;max-height:none!important;
  margin:0!important;padding:7px 9px!important;
  border:1px solid transparent!important;
  border-bottom:1px solid #e1edf3!important;
  border-radius:9px!important;
  background:transparent!important;background-image:none!important;
  box-shadow:none!important;
  color:#254b65!important;-webkit-text-fill-color:#254b65!important;
  font-size:12.5px!important;font-weight:500!important;line-height:1.55!important;
  transform:none!important;
  transition:background .22s ease,border-color .22s ease,transform .22s ease!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature .nbp4-check{
  flex:0 0 25px!important;width:25px!important;height:25px!important;
  min-width:25px!important;min-height:25px!important;
  border-radius:9px!important;border:1px solid #a7dccc!important;
  background:linear-gradient(135deg,#fff,#dcf8ef)!important;
  color:#08846c!important;-webkit-text-fill-color:#08846c!important;
  box-shadow:inset 1px 1px 0 #fff!important;
  transform:none!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature .nbp4-check svg{width:15px!important;height:15px!important;}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature .nbp4-feature-copy{
  display:block!important;flex:1 1 auto!important;min-width:0!important;
  padding:0!important;margin:0!important;
  line-height:1.65!important;white-space:normal!important;overflow-wrap:anywhere!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature .nbp4-feature-copy :is(b,strong).nbp4-value{
  padding:1px 6px!important;margin:0 5px 0 0!important;
  min-height:0!important;border-radius:6px!important;
  border:1px solid #d2e8f1!important;
  background:linear-gradient(135deg,#fbfeff,#eef8fd)!important;
  color:#1b6485!important;-webkit-text-fill-color:#1b6485!important;
  font-family:inherit!important;font-size:11px!important;font-weight:750!important;line-height:1.5!important;
  box-shadow:none!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature[data-nbp4-ai]{
  border-color:#d6e3f9!important;border-bottom-color:#c9daef!important;
  background:#f7faff!important;
}
@media(hover:hover) and (pointer:fine){
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature:hover{
    transform:translateX(2px)!important;
    background:#f0faff!important;border-color:#c8e4ef!important;
    box-shadow:inset 0 1px 0 #fff!important;
  }
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature:hover .nbp4-check{
    transform:translateY(-1px)!important;
    box-shadow:inset 1px 1px 0 #fff!important;
  }
}
/* Same spacing if the enhancement script is absent. */
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .plan-features > li:not(.nbp4-feature),
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) :is(.product-features,.pricing-features,.package-features,.features-list,.feature-list,.hosting-features) > li:not(.nbp4-feature){
  flex:0 0 auto!important;min-height:39px!important;height:auto!important;
  margin:0!important;padding:8px 10px 8px 43px!important;
  background:transparent!important;box-shadow:none!important;
  border:1px solid transparent!important;border-bottom:1px solid #e1edf3!important;
  border-radius:9px!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .plan-features > li:not(.nbp4-feature)::before,
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) :is(.product-features,.pricing-features,.package-features,.features-list,.feature-list,.hosting-features) > li:not(.nbp4-feature)::before{
  left:9px!important;width:24px!important;height:24px!important;
  border-radius:8px!important;background:#e1f8ef!important;box-shadow:none!important;
}
/* Explicitly outrank Croster's higher-specificity COLLAPSE display:block rule.
   Without this, modern desktop still renders a block and theme spacing wins. */
@media(min-width:768px){
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .plan-features.collapse:not(.show),
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .plan-features.collapse.show{display:flex!important;height:auto!important;overflow:visible!important;}
}
/* NabWP's original <div class=nabwp-feature> works even if JS is delayed. */
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .plan-features > .nabwp-feature:not(.nbp4-feature){
  display:flex!important;align-items:center!important;gap:10px!important;
  min-height:40px!important;margin:0!important;padding:7px 9px!important;
  border:1px solid transparent!important;border-bottom:1px solid #e1edf3!important;
  border-radius:9px!important;background:transparent!important;box-shadow:none!important;
  font-size:12.5px!important;line-height:1.6!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .plan-features > .nabwp-feature:not(.nbp4-feature)::before{
  content:'✓'!important;display:grid!important;place-items:center!important;
  position:static!important;transform:none!important;
  flex:0 0 25px!important;width:25px!important;height:25px!important;
  border:1px solid #a7dccc!important;border-radius:9px!important;
  background:#e1f8ef!important;box-shadow:none!important;
  color:#08846c!important;font:800 17px/1 Arial,sans-serif!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .plan-features > .nabwp-feature:not(.nbp4-feature) :is(b,strong){
  display:inline!important;padding:1px 6px!important;margin-right:5px!important;
  background:#f0f9fd!important;color:#1b6485!important;border:1px solid #d2e8f1!important;
  border-radius:6px!important;box-shadow:none!important;
}
/* Respect Croster's native mobile collapse without affecting desktop visibility. */
@media(max-width:767px){
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .plan-features.collapse:not(.show){display:none!important;}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .plan-features.collapse.show{display:flex!important;}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .plan-features.collapsing{display:block!important;overflow:hidden!important;}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature{min-height:39px!important;padding:7px 8px!important;gap:9px!important;}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .nbp4-feature .nbp4-check{width:24px!important;height:24px!important;flex-basis:24px!important;}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) :is(.plan-features,.nbp4-feature-list,.nbp4-feature-generated){row-gap:5px!important;gap:5px!important;}
}
@media(prefers-reduced-motion:reduce){
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])), :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) > .nbp4-card-art,
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) > .nbp4-card-art *{animation:none!important;transition:none!important;}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])):hover{transform:none!important;}
}

/* v4.3.2: original top-tab design restored; the decorative art is a single server chassis, not stacked objects. */


/* ===============================================================
   NABTECH PRISM DEPTH 4.3.2 | ORIGINAL TOP FEATURED TAB
   Native Croster badge nodes are NOT moved or duplicated in JS.
   Supports BOTH Croster .sticker-wrapper and .feature-sticker.
   Inset to the top border, not NEGATIVE top and not a corner ribbon.
   Card padding and title positions remain the SAME for every plan.
   =============================================================== */
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) :is(.sticker-wrapper,.feature-sticker){
  position:absolute!important;top:0!important;right:16px!important;
  left:auto!important;bottom:auto!important;z-index:9!important;
  width:max-content!important;max-width:min(65%,180px)!important;
  height:auto!important;margin:0!important;padding:0!important;
  transform:none!important;rotate:none!important;float:none!important;
  overflow:visible!important;background:transparent!important;
  box-shadow:none!important;border:0!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) :is(.sticker-wrapper .sticker,.feature-sticker .st-sm){
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:28px!important;padding:5px 13px!important;margin:0!important;
  border:1px solid #67bfcf!important;border-top:0!important;
  border-radius:0 0 10px 10px!important;
  background:linear-gradient(120deg,#168c9f,#229cb0)!important;
  box-shadow:none!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  font-family:inherit!important;font-size:10px!important;font-weight:800!important;
  line-height:1.4!important;letter-spacing:.045em!important;
  text-transform:uppercase!important;text-align:center!important;
  white-space:nowrap!important;clip-path:none!important;
  transform:none!important;rotate:none!important;
}
/* Croster can place the badge inside .graphics. Anchor it to that
   graphic instead of adding padding to the entire pricing card. */
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) .graphics :is(.sticker-wrapper,.feature-sticker){
  top:0!important;right:8px!important;left:auto!important;
  margin:0!important;position:absolute!important;
}
/* Decorative rack chassis stays BELOW the top tab on featured cards. */
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])):is(.active,[data-nbp4-featured="true"]) > .nbp4-card-art{
  top:43px!important;right:10px!important;max-width:29%!important;opacity:.21!important;
}
:is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) > .nbp4-card-art{overflow:hidden!important;opacity:.27!important;}
@media(max-width:767px){
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) :is(.sticker-wrapper,.feature-sticker){right:12px!important;max-width:min(65%,155px)!important;}
  :is(.cros-pricing-container .pricing_style_2 .cros-pricing-table:not([class*="tables_"]),.cros-pricing-container .group-slide > .cros-pricing-table:not([class*="tables_"])) :is(.sticker-wrapper .sticker,.feature-sticker .st-sm){font-size:9px!important;min-height:26px!important;padding:5px 10px!important;}
}








/* ======================================================================
   NABTECH / CLIENT BANNER STUDIO 1.0.1
   An exact Croster native banner skin, not a marketing hero or global reset.

   Croster source:
   core/layouts/default/header.tpl
   core/layouts/left/header.tpl
   includes/pageheader.tpl

   Supported native banner variants:
   .small-header.header-banner-styled.bg-primary
   .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity

   Content is generated by Croster/WHMCS: h1, .breadcrumb, #table-search.
   No change to header navigation, forms, breadcrumbs or page copy.
   No additional images, image URLs, third-party CSS or JS dependencies.
   ====================================================================== */

/* The banner itself. A CSS-only version appears even without JavaScript. */
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined) {
    --nbh-ink:#f1f9ff;
    --nbh-sub:#b9d5e9;
    --nbh-cyan:#89e3ed;
    --nbh-line:rgba(148,211,239,.19);
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    min-height:0!important;
    border:0!important;
    border-bottom:1px solid rgba(129,211,236,.17)!important;
    border-radius:0 0 30px 30px!important;
    background-color:#071827!important;
    background-image:
      radial-gradient(ellipse at 88% 18%,rgba(40,128,177,.39) 0%,transparent 47%),
      radial-gradient(ellipse at 70% 95%,rgba(22,79,119,.28) 0%,transparent 53%),
      linear-gradient(111deg,#071524 0%,#0a1f35 52%,#113753 100%)!important;
    background-position:center!important;
    background-size:cover!important;
    box-shadow:inset 0 -1px 0 rgba(159,218,241,.08)!important;
    color:var(--nbh-ink)!important;
    text-shadow:none!important;
}
/* Croster's bright diagonal blocks and the old image-opacity veil. */
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
   > :is(.cros-bg-shapes-right,.cros-bg-shapes-left) {
    display:none!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)::before {
    content:""!important;
    position:absolute!important;
    display:block!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    opacity:.7!important;
    border:0!important;
    background-image:
      repeating-linear-gradient(90deg,transparent 0 135px,rgba(148,211,243,.057) 136px,transparent 137px),
      linear-gradient(155deg,transparent 0%,rgba(96,203,246,.07) 58%,transparent 83%)!important;
    background-color:transparent!important;
    background-position:center!important;
    background-size:cover!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 38%,#000 100%)!important;
    mask-image:linear-gradient(90deg,transparent 2%,#000 38%,#000 100%)!important;
    pointer-events:none!important;
    z-index:0!important;
    transform:none!important;
    box-shadow:none!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)::after {
    content:""!important;
    position:absolute!important;
    display:block!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    border:0!important;
    opacity:.85!important;
    background:
      radial-gradient(ellipse at 83% 47%,rgba(62,186,227,.15),transparent 28%),
      linear-gradient(180deg,rgba(117,208,244,.14) 0px,transparent 2px,transparent 100%)!important;
    pointer-events:none!important;
    z-index:0!important;
    transform:none!important;
    box-shadow:none!important;
}

/* Preserve Croster's actual container and page-header content. */
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined) > .container {
    position:relative!important;
    z-index:3!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .page-title {
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    text-align:left!important;
    padding:clamp(37px,4vw,59px) 0 clamp(36px,3.5vw,53px)!important;
    margin:0!important;
    z-index:3!important;
    background:transparent!important;
    box-shadow:none!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .page-title > .header-lined {
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:14px!important;
    min-width:0!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    text-align:left!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .header-lined > div:first-child {
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:17px 24px!important;
    min-width:0!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .header-lined > div:last-child {
    display:flex!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:8px 16px!important;
    min-width:0!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .header-lined h1 {
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    flex:0 1 auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    font-family:inherit!important;
    font-size:clamp(30px,3.3vw,49px)!important;
    font-weight:730!important;
    line-height:1.15!important;
    letter-spacing:-.048em!important;
    text-align:left!important;
    text-transform:none!important;
    color:#f1f9ff!important;
    -webkit-text-fill-color:#f1f9ff!important;
    text-shadow:none!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
    text-wrap:balance!important;
}
/* The breadcrumb is the EXISTING WHMCS navigation, never a replacement. */
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .header-lined .breadcrumb {
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    column-gap:1px!important;
    row-gap:6px!important;
    min-width:0!important;
    width:auto!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    font-family:inherit!important;
    font-size:12px!important;
    line-height:1.7!important;
    text-align:left!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .header-lined .breadcrumb-item {
    min-width:0!important;
    display:inline-flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    margin:0!important;
    padding-block:0!important;
    background:transparent!important;
    color:#b5d1e6!important;
    -webkit-text-fill-color:#b5d1e6!important;
    font-size:inherit!important;
    line-height:inherit!important;
    letter-spacing:0!important;
    text-shadow:none!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .header-lined .breadcrumb-item + .breadcrumb-item {
    padding-left:9px!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .header-lined .breadcrumb-item + .breadcrumb-item::before {
    content:"/"!important;
    display:inline-block!important;
    float:none!important;
    padding:0 10px 0 0!important;
    color:#70b6cf!important;
    -webkit-text-fill-color:#70b6cf!important;
    font-size:12px!important;
    opacity:1!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .header-lined .breadcrumb a {
    display:inline!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    color:#d3eafa!important;
    -webkit-text-fill-color:#d3eafa!important;
    font-weight:570!important;
    font-size:inherit!important;
    line-height:inherit!important;
    text-decoration:none!important;
    text-underline-offset:3px!important;
    transition:color .2s ease,opacity .2s ease!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .header-lined .breadcrumb a:hover,
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .header-lined .breadcrumb a:focus-visible {
    color:#9eeaf1!important;
    -webkit-text-fill-color:#9eeaf1!important;
    text-decoration:underline!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .header-lined .breadcrumb a:focus-visible {
    outline:2px solid #9fe9f3!important;
    outline-offset:4px!important;
    border-radius:2px!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .header-lined .breadcrumb-item.active {
    color:#9fbdd1!important;
    -webkit-text-fill-color:#9fbdd1!important;
    opacity:1!important;
    overflow-wrap:anywhere!important;
}
/* Croster's optional descriptive tagline. */
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .header-lined > div:last-child > span {
    display:inline-block!important;
    color:#b5d4e6!important;
    -webkit-text-fill-color:#b5d4e6!important;
    font-size:13px!important;
    line-height:1.65!important;
}
/* Search appears within .header-lined on products, invoices and tickets pages. */
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .header-lined .search-group {
    width:min(100%,290px)!important;
    flex:0 1 290px!important;
    margin:0!important;
    padding:0!important;
    position:relative!important;
    background:transparent!important;
    box-shadow:none!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .header-lined .search-group #table-search {
    display:block!important;
    width:100%!important;
    min-width:0!important;
    min-height:41px!important;
    margin:0!important;
    padding:9px 16px 9px 64px!important;
    border:1px solid rgba(150,215,239,.33)!important;
    border-radius:11px!important;
    outline:none!important;
    background:rgba(21,65,97,.56)!important;
    box-shadow:inset 0 1px 0 rgba(205,242,255,.04)!important;
    color:#f0fbff!important;
    -webkit-text-fill-color:#f0fbff!important;
    caret-color:#9fe5f6!important;
    font-family:inherit!important;
    font-size:12px!important;
    font-weight:500!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .header-lined .search-group #table-search::placeholder {
    color:#a9c9da!important;
    -webkit-text-fill-color:#a9c9da!important;
    opacity:1!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .header-lined .search-group #table-search:focus-visible {
    border-color:#92dfed!important;
    box-shadow:0 0 0 3px rgba(87,202,228,.14)!important;
}

/* ======================================================================
   SEARCH FIELD SPACING REPAIR / 1.0.1
   Croster draws its existing search icon at the left of its native field.
   Reserve a clear icon gutter. No replacement icon or form is created.
   Constrained to the existing native client banner's .search-group.
   ====================================================================== */
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .header-lined .search-group
    :is(input#table-search,
        input[id^="table-search"],
        input.form-control[type="search"],
        input.form-control[name="search"],
        input[placeholder*="search" i]) {
    box-sizing:border-box!important;
    padding-left:64px!important;
    padding-right:16px!important;
    text-indent:0!important;
    background-position:20px center!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
/* Place only dedicated icon elements directly inside the search wrapper.
   Do not touch submit buttons or nested icon components. Native ::before/::after
   icon placements are preserved; the new input gutter clears them already. */
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    .header-lined .search-group
    > :is(.search-icon,.input-group-icon,.icon-search,
           .fa-search,.fa-magnifying-glass,
           .fas.fa-search,.far.fa-search) {
    position:absolute!important;
    top:50%!important;
    left:21px!important;
    right:auto!important;
    margin:0!important;
    transform:translateY(-50%)!important;
    z-index:2!important;
    pointer-events:none!important;
}
@media (max-width:575.98px) {
    :is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
        .header-lined .search-group
        :is(input#table-search,
            input[id^="table-search"],
            input.form-control[type="search"],
            input.form-control[name="search"],
            input[placeholder*="search" i]) {
        padding-left:58px!important;
        padding-right:13px!important;
        background-position:18px center!important;
    }
    :is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
        .header-lined .search-group
        > :is(.search-icon,.input-group-icon,.icon-search,
               .fa-search,.fa-magnifying-glass,
               .fas.fa-search,.far.fa-search) {
        left:19px!important;
    }
}

/* Optional JS rendering: atmospheric network sphere, no changes to text. */
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    > .nbh-scene {
    position:absolute!important;
    display:block!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    z-index:1!important;
    overflow:hidden!important;
    pointer-events:none!important;
    opacity:.9!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 14%,rgba(0,0,0,.3) 49%,#000 71%)!important;
    mask-image:linear-gradient(90deg,transparent 14%,rgba(0,0,0,.3) 49%,#000 71%)!important;
    contain:layout style paint!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    > .nbh-scene svg {
    display:block!important;
    width:100%!important;
    height:100%!important;
    overflow:visible!important;
    pointer-events:none!important;
    position:static!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    > .nbh-scene .nbh-trace {
    stroke-dasharray:5 12!important;
    animation:nbh-flow 23s linear infinite!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    > .nbh-scene .nbh-orbit {
    transform-origin:80% 46%;
    animation:nbh-orbit 18s ease-in-out infinite!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    > .nbh-scene .nbh-beacon {
    animation:nbh-beacon 5s ease-in-out infinite!important;
}
:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
    > .nbh-scene .nbh-beacon:nth-child(odd) {animation-delay:-2s!important;}

@keyframes nbh-flow {to {stroke-dashoffset:-340;}}
@keyframes nbh-orbit {0%,100% {transform:translate(0,0);} 50% {transform:translate(-10px,4px);}}
@keyframes nbh-beacon {0%,100% {opacity:.26;} 50% {opacity:1;}}

:is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)[data-nbh-paused="true"]
    > .nbh-scene :is(.nbh-trace,.nbh-orbit,.nbh-beacon) {
    animation-play-state:paused!important;
}

@media (max-width:991.98px) {
    :is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined) .page-title {
        padding:38px 0 39px!important;
    }
    :is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined) .header-lined h1 {
        font-size:clamp(30px,4.6vw,42px)!important;
    }
    :is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined) > .nbh-scene {
        opacity:.72!important;
    }
}
@media (max-width:575.98px) {
    :is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined) {
        border-radius:0 0 22px 22px!important;
    }
    :is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined) .page-title {
        padding:31px 0 33px!important;
    }
    :is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined) .page-title > .header-lined {
        gap:14px!important;
    }
    :is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined) .header-lined h1 {
        font-size:clamp(27px,6.3vw,35px)!important;
        line-height:1.2!important;
        letter-spacing:-.042em!important;
        overflow-wrap:anywhere!important;
    }
    :is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined) .header-lined .breadcrumb {
        font-size:10.5px!important;
        row-gap:5px!important;
    }
    :is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined) .header-lined .breadcrumb-item + .breadcrumb-item {
        padding-left:5px!important;
    }
    /* On small screens the h1 already states the current page. Hide only a
       duplicate final crumb when there are at least three breadcrumb items;
       keep all preceding navigation links fully usable. */
    :is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
        .header-lined .breadcrumb:has(> .breadcrumb-item:nth-child(3)) > .breadcrumb-item.active {
        display:none!important;
    }
    :is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined) .header-lined .breadcrumb-item + .breadcrumb-item::before {
        padding-right:7px!important;
    }
    :is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined) .header-lined .search-group {
        width:100%!important;
        max-width:100%!important;
        flex:1 1 100%!important;
    }
    :is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined) > .nbh-scene {
        opacity:.38!important;
        -webkit-mask-image:linear-gradient(90deg,transparent 6%,#000 90%)!important;
        mask-image:linear-gradient(90deg,transparent 6%,#000 90%)!important;
    }
}
@media (prefers-reduced-motion:reduce) {
    :is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined)
        > .nbh-scene :is(.nbh-trace,.nbh-orbit,.nbh-beacon) {
        animation:none!important;
        transform:none!important;
    }
    :is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined) .header-lined .breadcrumb a {
        transition:none!important;
    }
}
@media print {
    :is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined) > .nbh-scene {display:none!important;}
    :is(.small-header.header-banner-styled.bg-primary,
    .hero-bg-wrap.small-header.header-banner-styled.inverse.bg-opacity):has(> .container .page-title > .header-lined) {
        border-radius:0!important;
        box-shadow:none!important;
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }
}




/* ======================================================================
   NABTECH / NATIVE NOTIFICATIONS
   CSS only. Uses Croster's existing .dropdown-tasks and #taskScroll markup.
   Bootstrap keeps control of opening/closing. Mobile positioning uses CSS.
   All notification content, counts, links and button actions remain native.
   ====================================================================== */

#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu {
    --nbh-notify-ink:#263c55!important;
    --nbh-notify-muted:#647b92!important;
    --nbh-notify-line:#e7edf4!important;
    --nbh-notify-scroll-max:min(382px,calc(100vh - 174px))!important;
    box-sizing:border-box!important;
    width:420px!important;
    min-width:0!important;
    max-width:calc(100vw - 112px)!important;
    max-height:calc(100vh - 94px)!important;
    margin-top:10px!important;
    padding:0!important;
    border:1px solid rgba(194,209,224,.76)!important;
    border-radius:22px!important;
    background:#fff!important;
    color:var(--nbh-notify-ink)!important;
    -webkit-text-fill-color:var(--nbh-notify-ink)!important;
    color-scheme:light!important;
    box-shadow:0 24px 64px -16px rgba(15,34,62,.24),0 9px 24px -12px rgba(15,34,62,.18),0 1px 3px rgba(15,34,62,.045),inset 0 1px 0 #fff!important;
    overflow:hidden!important;
    font-family:inherit!important;
    text-align:left!important;
    text-shadow:none!important;
    z-index:1080!important;
}

/* The real notification count and label form the header. */
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu > .dropdown-header {
    display:flex!important;
    align-items:center!important;
    gap:11px!important;
    box-sizing:border-box!important;
    min-width:0!important;
    min-height:68px!important;
    margin:0!important;
    padding:16px 18px!important;
    border:0!important;
    border-bottom:1px solid var(--nbh-notify-line)!important;
    border-radius:21px 21px 0 0!important;
    background:linear-gradient(115deg,#fff 12%,#f8fbff 100%)!important;
    color:#18344f!important;
    -webkit-text-fill-color:#18344f!important;
    font-family:inherit!important;
    font-size:14px!important;
    font-weight:700!important;
    line-height:1.4!important;
    letter-spacing:-.02em!important;
    text-align:left!important;
    text-transform:none!important;
    text-shadow:none!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
}
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu > .dropdown-header > i {
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 34px!important;
    box-sizing:border-box!important;
    width:34px!important;
    height:34px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid #e2edf8!important;
    border-radius:11px!important;
    background:linear-gradient(145deg,#f2f8ff,#edf5fc)!important;
    color:#3b6e9e!important;
    -webkit-text-fill-color:#3b6e9e!important;
    font-size:16px!important;
    line-height:1!important;
    text-shadow:none!important;
    box-shadow:inset 0 1px 0 #fff!important;
}

/* Native vertical scrolling keeps every notification and action reachable. */
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll {
    box-sizing:border-box!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:var(--nbh-notify-scroll-max)!important;
    margin:0!important;
    padding:8px!important;
    border:0!important;
    border-radius:0 0 21px 21px!important;
    background:#fff!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
    scroll-padding-block:9px!important;
    scrollbar-gutter:stable!important;
    scrollbar-width:auto!important;
    scrollbar-color:auto!important;
    -webkit-overflow-scrolling:touch!important;
}
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll > ul.list-unstyled {
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    list-style:none!important;
}
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll > ul.list-unstyled > li {
    box-sizing:border-box!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    list-style:none!important;
    color:var(--nbh-notify-ink)!important;
    -webkit-text-fill-color:var(--nbh-notify-ink)!important;
    font-size:13px!important;
    line-height:1.65!important;
    white-space:normal!important;
}
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll > ul.list-unstyled > li + li {
    margin-top:7px!important;
}

/* Croster puts bare text inside each link. An icon gutter avoids DOM changes. */
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll > ul.list-unstyled > li > a:where(:not([hidden]):not(.d-none):not(.hidden)) {
    display:block!important;
    position:relative!important;
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    min-height:68px!important;
    margin:0!important;
    padding:13px 13px 13px 62px!important;
    border:1px solid #edf1f6!important;
    border-radius:15px!important;
    background:linear-gradient(125deg,#fff,#fcfdff)!important;
    color:var(--nbh-notify-ink)!important;
    -webkit-text-fill-color:var(--nbh-notify-ink)!important;
    font-family:inherit!important;
    font-size:13px!important;
    font-weight:450!important;
    line-height:1.65!important;
    letter-spacing:0!important;
    text-align:left!important;
    text-transform:none!important;
    text-decoration:none!important;
    text-shadow:none!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    box-shadow:0 1px 2px rgba(28,52,79,.02)!important;
    transition:background .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll > ul.list-unstyled > li > a:hover {
    border-color:#d7e5f3!important;
    background:linear-gradient(125deg,#f8fbff,#f4f8fd)!important;
    color:#173d62!important;
    -webkit-text-fill-color:#173d62!important;
    box-shadow:0 3px 10px rgba(35,66,98,.045)!important;
    text-decoration:none!important;
}
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll > ul.list-unstyled > li > a > i {
    position:absolute!important;
    top:14px!important;
    left:13px!important;
    right:auto!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    width:35px!important;
    height:35px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid #dfeaf5!important;
    border-radius:11px!important;
    background:#eef5fc!important;
    color:#3c729f!important;
    -webkit-text-fill-color:#3c729f!important;
    font-size:15px!important;
    line-height:1!important;
    text-align:center!important;
    text-shadow:none!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;
}
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll > ul.list-unstyled > li > a > i.text-info {
    border-color:#dceafa!important;
    background:#eef6ff!important;
    color:#3774ad!important;
    -webkit-text-fill-color:#3774ad!important;
}
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll > ul.list-unstyled > li > a > i.text-warning {
    border-color:#f1e4c8!important;
    background:#fff7e7!important;
    color:#9a6815!important;
    -webkit-text-fill-color:#9a6815!important;
}
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll > ul.list-unstyled > li > a > i.text-success {
    border-color:#d7ece3!important;
    background:#edf8f3!important;
    color:#258566!important;
    -webkit-text-fill-color:#258566!important;
}

/* Existing action buttons occupy a clean new line beneath their message. */
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll > ul.list-unstyled > li > a > .btn:where(:not([hidden]):not(.d-none):not(.hidden)) {
    display:table!important;
    box-sizing:border-box!important;
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:32px!important;
    float:none!important;
    margin:10px 0 0!important;
    padding:6px 12px!important;
    border:1px solid #d8e6f4!important;
    border-radius:9px!important;
    background:linear-gradient(180deg,#f8fbff,#edf5fd)!important;
    color:#2e6598!important;
    -webkit-text-fill-color:#2e6598!important;
    font-family:inherit!important;
    font-size:11.5px!important;
    font-weight:650!important;
    line-height:1.45!important;
    letter-spacing:0!important;
    text-align:center!important;
    text-transform:none!important;
    text-decoration:none!important;
    text-shadow:none!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(21,56,87,.035)!important;
    transition:background .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll > ul.list-unstyled > li > a > .btn:hover {
    border-color:#bcd4ec!important;
    background:#e9f3ff!important;
    color:#204f7b!important;
    -webkit-text-fill-color:#204f7b!important;
    box-shadow:inset 0 1px 0 #fff,0 2px 5px rgba(21,56,87,.055)!important;
}
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll > ul.list-unstyled > li > a > .btn-warning {
    border-color:#ebdec4!important;
    background:linear-gradient(180deg,#fffaf1,#fff4df)!important;
    color:#875b14!important;
    -webkit-text-fill-color:#875b14!important;
}
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll > ul.list-unstyled > li > a > .btn-warning:hover {
    border-color:#dec894!important;
    background:#fff0cf!important;
    color:#744910!important;
    -webkit-text-fill-color:#744910!important;
}
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll > ul.list-unstyled > li > a:focus-visible,
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll > ul.list-unstyled > li > a > .btn:focus-visible {
    outline:2px solid #3979bc!important;
    outline-offset:-2px!important;
}

/* If Croster adds SlimScroll at runtime, use one native scrollbar in its area. */
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu .slimScrollDiv:has(> #taskScroll) {
    box-sizing:border-box!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:var(--nbh-notify-scroll-max)!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
}
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu .slimScrollDiv:has(> #taskScroll) > :is(.slimScrollBar,.slimScrollRail) {
    display:none!important;
}

/* Chromium/WebKit: exactly 2px. Firefox's native thin option is isolated below. */
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll::-webkit-scrollbar {
    width:2px!important;
    height:2px!important;
}
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll::-webkit-scrollbar-track {
    margin-block:9px!important;
    border:0!important;
    background:transparent!important;
}
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll::-webkit-scrollbar-thumb {
    min-height:30px!important;
    border:0!important;
    border-radius:999px!important;
    background:#aabdd0!important;
}
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll::-webkit-scrollbar-thumb:hover {
    background:#7393b3!important;
}
#nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll::-webkit-scrollbar-button {
    display:none!important;
    width:0!important;
    height:0!important;
}
@supports (-moz-appearance:none) {
    #nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll {
        scrollbar-width:thin!important;
        scrollbar-color:#aabdd0 transparent!important;
    }
}
@supports (height:100dvh) {
    #nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu {
        --nbh-notify-scroll-max:min(382px,calc(100dvh - 174px))!important;
        max-height:calc(100dvh - 94px)!important;
    }
}

/* This badge is the native value next to this menu's bell. */
#nav.cros-navbar .pre-header .dropdown:has(> .dropdown-tasks.dropdown-menu) > .dropdown-toggle > .badge {
    min-width:18px!important;
    padding:2px 5px!important;
    border:1px solid rgba(255,255,255,.4)!important;
    border-radius:999px!important;
    background:#eaf5ff!important;
    color:#1e507e!important;
    -webkit-text-fill-color:#1e507e!important;
    font-size:10px!important;
    font-weight:700!important;
    line-height:1.2!important;
    box-shadow:0 2px 6px rgba(2,16,37,.14)!important;
    text-shadow:none!important;
}

@media (max-width:575.98px) {
    /* Tighter card spacing on phones. The mobile anchor follows below. */
    #nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu {
        border-radius:19px!important;
    }
    #nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu > .dropdown-header {
        min-height:60px!important;
        gap:9px!important;
        padding:13px 12px!important;
        border-radius:18px 18px 0 0!important;
        font-size:13px!important;
    }
    #nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll {
        padding:6px!important;
        border-radius:0 0 18px 18px!important;
    }
    #nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll > ul.list-unstyled > li > a:where(:not([hidden]):not(.d-none):not(.hidden)) {
        padding:11px 11px 12px 49px!important;
        border-radius:13px!important;
        font-size:12px!important;
    }
    #nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll > ul.list-unstyled > li > a > i {
        top:12px!important;
        left:10px!important;
        width:29px!important;
        height:29px!important;
        border-radius:9px!important;
        font-size:13px!important;
    }
    #nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll > ul.list-unstyled > li > a > .btn:where(:not([hidden]):not(.d-none):not(.hidden)) {
        padding:6px 10px!important;
        font-size:11px!important;
    }
}
@media (prefers-reduced-motion:reduce) {
    #nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll > ul.list-unstyled > li > a,
    #nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu #taskScroll > ul.list-unstyled > li > a > .btn {
        transition:none!important;
    }
}

/* Full-width mobile card, anchored to the actual pre-header from the supplied
   Croster source. Native .show/open visibility and click handling are retained. */
@media (max-width:575.98px) {
    #nav.cros-navbar .pre-header:has(.dropdown-tasks.dropdown-menu) {
        position:relative!important;
        overflow:visible!important;
    }
    #nav.cros-navbar .pre-header > .container:has(.dropdown-tasks.dropdown-menu),
    #nav.cros-navbar .pre-header > .container > .d-flex:has(.dropdown-tasks.dropdown-menu),
    #nav.cros-navbar .pre-header .list-inline:has(> .dropdown > .dropdown-tasks.dropdown-menu),
    #nav.cros-navbar .pre-header .dropdown:has(> .dropdown-tasks.dropdown-menu) {
        position:static!important;
    }
    #nav.cros-navbar .pre-header .dropdown-tasks.dropdown-menu {
        position:absolute!important;
        inset:auto!important;
        top:calc(100% + 6px)!important;
        right:12px!important;
        bottom:auto!important;
        left:auto!important;
        transform:none!important;
        width:min(420px,calc(100% - 24px))!important;
        max-width:calc(100% - 24px)!important;
        margin:0!important;
    }
}

/* Keep the native bell badge anchored to its own trigger on every layout. */
#nav.cros-navbar .pre-header .dropdown:has(> .dropdown-tasks.dropdown-menu) > .dropdown-toggle {
    position:relative!important;
}