/* =============================================================================
   VM6 Networks - Cart & Storefront polish
   -----------------------------------------------------------------------------
   Targeted overrides for /cart.php, /store/* and configure-product pages.
   Loaded via header.tpl AFTER custom.css so these rules win specificity ties.
   Uses your existing CSS variables (--primary-accent, --card-bg, etc.) so
   nothing here hardcodes brand colours - if you change the palette in
   custom.css the cart pages follow.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1) Sticky panels clear the fixed top nav (top-header ~35px + navbar ~70px)
   ----------------------------------------------------------------------------- */
.scrolling-panel,
.scrolling-panel-container,
.order-summary,
#orderSummary,
#orderSummaryContainer,
.product-summary,
.product-sidebar,
#scrollingPanelContainer,
.cart .sidebar,
.cart-sidebar {
    position: sticky !important;
    top: 120px !important;          /* clears top-header + navbar with breathing room */
    z-index: 1 !important;          /* MUST stay below navbar (z-index 1030+) */
}

/* Smooth scroll-to-section accounts for the fixed nav */
html { scroll-padding-top: 130px; }


/* -----------------------------------------------------------------------------
   2) Storefront product cards - tighten the dark theme
   ----------------------------------------------------------------------------- */
.store-product-card,
.product-card,
.pricing-card,
.cart .product,
.order-product {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.4);
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.store-product-card:hover,
.product-card:hover,
.pricing-card:hover {
    border-color: var(--primary-accent) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -8px rgba(99, 102, 241, 0.25);
}

/* The "AMD EPYC 7313" panel header in your screenshot - NO gradient, flat surface to avoid banding */
.panel-heading,
.card-header,
.product-header,
.cart .product-header,
.pricing-header {
    background: var(--card-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-light) !important;
    font-weight: 600;
    border-radius: 12px 12px 0 0 !important;
}


/* -----------------------------------------------------------------------------
   3) Pricing display - make the "Starting from" price pop
   ----------------------------------------------------------------------------- */
.product-price,
.price-amount,
.plan-price,
.order-summary .total,
.cart .total {
    color: var(--primary-accent) !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Big totals get a slight glow on the dark background */
.price-amount,
.product-price-large,
.summary-totals .total {
    text-shadow: 0 0 24px rgba(99, 102, 241, 0.15);
}

/* Setup fee + cycle text should be visible but secondary */
.setup-fee,
.product-cycle,
.plan-description,
.pricing-cycle {
    color: var(--text-muted) !important;
    font-size: 0.875rem;
}


/* -----------------------------------------------------------------------------
   4) Buttons - match the accent, add hover lift
   ----------------------------------------------------------------------------- */
.btn-primary,
.btn-add-to-cart,
.btn-order,
.plan-button,
button[name="addtocart"],
#btnCompleteProductConfig,
.cart-add,
.checkout-btn {
    background: var(--primary-accent) !important;
    border-color: var(--primary-accent) !important;
    color: white !important;
    font-weight: 600;
    padding: 0.625rem 1.5rem !important;
    border-radius: 8px !important;
    transition: all 150ms ease;
    box-shadow: 0 4px 12px -4px rgba(99, 102, 241, 0.4);
}

.btn-primary:hover,
.btn-add-to-cart:hover,
.btn-order:hover,
.plan-button:hover,
button[name="addtocart"]:hover,
#btnCompleteProductConfig:hover,
.cart-add:hover,
.checkout-btn:hover {
    background: #7c83ff !important;     /* slightly lifted accent for hover */
    border-color: #7c83ff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -4px rgba(99, 102, 241, 0.5);
}

/* Order Now / Continue buttons should breathe on cart pages */
.btn-checkout,
#btnOrderSummaryCheckout {
    width: 100%;
    padding: 0.875rem 1.5rem !important;
    font-size: 1rem;
}


/* -----------------------------------------------------------------------------
   5) Form controls inside cart - dark theme inputs
   ----------------------------------------------------------------------------- */
.cart input[type="text"],
.cart input[type="email"],
.cart input[type="number"],
.cart select,
.cart textarea,
.store-order-container input[type="text"],
.store-order-container select,
.payment-term select,
.custom-select.form-control,
.form-control:not([type="hidden"]) {
    background: #0f172a !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-light) !important;
    border-radius: 8px;
}

.cart .form-control:focus,
.store-order-container .form-control:focus,
.form-control:focus {
    background: #0f172a !important;
    border-color: var(--primary-accent) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
    color: var(--text-light) !important;
}

/* Bootstrap's white tab-content background looks awful on dark theme */
.tab-content.bg-white,
.store-domain-tab-content {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    color: var(--text-light);
}

.nav-tabs .nav-link {
    color: var(--text-muted);
    border-color: transparent;
    background: transparent;
}
.nav-tabs .nav-link:hover {
    color: var(--text-light);
    border-color: transparent;
}
.nav-tabs .nav-link.active {
    color: var(--primary-accent);
    background: var(--card-bg);
    border-color: var(--border-color) var(--border-color) var(--card-bg);
}


/* -----------------------------------------------------------------------------
   6) Sidebar navigation on cart pages
   ----------------------------------------------------------------------------- */
.cart .sidebar .nav-link,
.cart .sidebar a,
.store-categories a {
    color: var(--text-light);
    padding: 0.625rem 1rem;
    border-radius: 6px;
    display: block;
    transition: all 150ms ease;
}

.cart .sidebar .nav-link:hover,
.cart .sidebar a:hover,
.store-categories a:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-accent);
}

.cart .sidebar .nav-link.active,
.cart .sidebar a.active {
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary-accent);
    font-weight: 600;
    border-left: 3px solid var(--primary-accent);
}


/* -----------------------------------------------------------------------------
   7) Product description (RAM, Storage, Bandwidth bullets in screenshot)
   ----------------------------------------------------------------------------- */
.product-description,
.cart .description,
.store-product-card .description {
    color: var(--text-muted);
    line-height: 1.7;
}

.product-description strong,
.product-description b,
.cart .description strong {
    color: var(--text-light);
    font-weight: 600;
}

/* The "(upgradeable below)" purple hint text */
.upgradeable-hint,
.product-description em,
.product-description i {
    color: var(--primary-accent);
    font-style: normal;
    font-weight: 500;
    font-size: 0.875em;
}


/* -----------------------------------------------------------------------------
   8) Alerts / errors stay visible on dark background
   ----------------------------------------------------------------------------- */
.alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}
.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}
.alert-info {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    color: #c7d2fe;
}


/* -----------------------------------------------------------------------------
   9) Configure-product page sections (your earlier order form template lives
       here too - the page after clicking Order Now)
   ----------------------------------------------------------------------------- */
.product-config,
.config-group,
.product-options,
.order-options {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Tables in cart (line items, totals) */
.cart .table,
.order-summary .table {
    color: var(--text-light);
    border-color: var(--border-color);
    background: transparent;
}
.cart .table th,
.cart .table td,
.order-summary .table th,
.order-summary .table td {
    border-color: var(--border-color);
    background: transparent;
}


/* -----------------------------------------------------------------------------
   10) Mobile - stop sticky behaviour where it'd just be awkward
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .scrolling-panel,
    .scrolling-panel-container,
    #orderSummary,
    .cart-sidebar {
        position: static !important;
        top: auto !important;
        max-height: none !important;
    }
}


/* =============================================================================
   11) Product browse page - confirmed structure
   #order-standard_cart > .row > .cart-body > .products > .row.row-eq-height
   Each product: <div class="product clearfix"> with <header>, .product-desc, <footer>
   ============================================================================= */

/* The wrapping container */
#order-standard_cart .cart-body { padding-left: 0; }

#order-standard_cart .header-lined h1 {
    color: var(--text-light);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 1.5rem;
    font-size: 1.875rem;
}

/* Switch from 2-up (col-md-6) to 3-up on large screens so more cards fit */
@media (min-width: 992px) {
    #order-standard_cart .products .row.row-eq-height > .col-md-6 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/* THE CARD ITSELF */
#order-standard_cart .product.clearfix {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 0;
    margin-bottom: 1.25rem;
    overflow: hidden;
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#order-standard_cart .product.clearfix:hover {
    border-color: var(--primary-accent);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -10px rgba(99, 102, 241, 0.35);
}

/* CARD HEADER (the "AMD EPYC 7313" banner) */
#order-standard_cart .product header {
    background: rgba(99, 102, 241, 0.08);
    border-bottom: 1px solid var(--border-color);
    padding: 14px 18px;
    color: var(--text-light);
}
#order-standard_cart .product header > span {
    color: var(--text-light) !important;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none !important;
    background: transparent !important;
    padding: 0 !important;
    display: inline !important;
}

/* CARD BODY (description / specs) */
#order-standard_cart .product .product-desc {
    padding: 16px 18px;
    flex: 1;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* WHMCS wraps the description inside <ul><li><span class="feature-value">... -
   strip the bullet styling */
#order-standard_cart .product .product-desc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#order-standard_cart .product .product-desc li {
    padding: 0;
    margin: 0;
}
#order-standard_cart .product .product-desc .feature-value {
    display: block;
}

/* The product description has <p><strong>RAM:</strong> 64GB...</p> structure */
#order-standard_cart .product .product-desc p {
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.55;
    margin: 0 0 0.5rem 0;
    padding-left: 0;
}
#order-standard_cart .product .product-desc p:last-child { margin-bottom: 0; }

#order-standard_cart .product .product-desc strong,
#order-standard_cart .product .product-desc b {
    color: var(--primary-accent);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-block;
    min-width: 80px;
}

#order-standard_cart .product .product-desc em,
#order-standard_cart .product .product-desc i {
    color: var(--text-light);
    font-style: normal;
    opacity: 0.6;
    font-size: 0.75rem;
}

/* Hide the leaked "<p><strong>CPU" snippet at the end of every description -
   it's broken HTML from WHMCS that shows literal text */
#order-standard_cart .product .product-desc .ovh-server-spec { display: none; }


/* CARD FOOTER (price + Order button) */
#order-standard_cart .product footer {
    background: var(--primary-dark);
    border-top: 1px solid var(--border-color);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

#order-standard_cart .product-pricing {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.3;
    margin: 0;
    text-align: left;
}

#order-standard_cart .product-pricing .price {
    color: var(--primary-accent) !important;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: block;
    line-height: 1.1;
    margin: 2px 0;
}

#order-standard_cart .product-pricing small {
    color: var(--text-muted);
    font-size: 0.7rem;
    display: block;
    margin-top: 2px;
}

/* ORDER NOW BUTTON - swap WHMCS green to brand indigo */
#order-standard_cart .btn-order-now,
#order-standard_cart .btn.btn-success {
    background: var(--primary-accent) !important;
    border-color: var(--primary-accent) !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    transition: all 150ms ease;
    white-space: nowrap;
    text-decoration: none !important;
}

#order-standard_cart .btn-order-now i,
#order-standard_cart .btn.btn-success i {
    color: white !important;
    margin-right: 4px;
}

#order-standard_cart .btn-order-now:hover,
#order-standard_cart .btn.btn-success:hover {
    background: #7c83ff !important;
    border-color: #7c83ff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px rgba(99, 102, 241, 0.5);
    color: white !important;
}


/* LEFT SIDEBAR ON BROWSE PAGES (the Categories / Actions cards already
   exist in the page - just need to ensure they match the brand) */
#order-standard_cart .cart-sidebar .card,
#order-standard_cart .cart-sidebar .panel {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    overflow: hidden;
}
#order-standard_cart .cart-sidebar .card-header,
#order-standard_cart .cart-sidebar .panel-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-light) !important;
    padding: 12px 16px !important;
}
#order-standard_cart .cart-sidebar .card-header h3,
#order-standard_cart .cart-sidebar .panel-title {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-light) !important;
    margin: 0;
}
#order-standard_cart .cart-sidebar .card-header h3 i,
#order-standard_cart .cart-sidebar .panel-title i {
    color: var(--primary-accent);
}

/* Sidebar nav links */
#order-standard_cart .cart-sidebar .list-group-item {
    background: transparent !important;
    border: 0 !important;
    color: var(--text-muted) !important;
    padding: 10px 16px !important;
    border-left: 3px solid transparent !important;
    transition: all 150ms ease;
    font-size: 0.875rem;
}
#order-standard_cart .cart-sidebar .list-group-item:hover {
    background: rgba(99, 102, 241, 0.08) !important;
    color: var(--text-light) !important;
}
#order-standard_cart .cart-sidebar .list-group-item.active {
    background: rgba(99, 102, 241, 0.12) !important;
    color: var(--primary-accent) !important;
    border-left-color: var(--primary-accent) !important;
    font-weight: 500;
}
#order-standard_cart .cart-sidebar .list-group-item i {
    color: var(--primary-accent);
    margin-right: 6px;
}

/* WHMCS "Powered by..." footer text - dim it down */
#order-standard_cart + p,
.primary-content > p[style*="text-align:center"] {
    color: var(--text-muted) !important;
    font-size: 0.75rem;
    margin-top: 2rem;
    opacity: 0.6;
}
.primary-content > p[style*="text-align:center"] a {
    color: var(--text-muted) !important;
}


/* MOBILE - 1 column */
@media (max-width: 768px) {
    #order-standard_cart .products .row.row-eq-height > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    #order-standard_cart .product footer {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    #order-standard_cart .product-pricing { text-align: center; }
    #order-standard_cart .btn-order-now,
    #order-standard_cart .btn.btn-success {
        width: 100%;
        justify-content: center;
    }
}