/* ============================================================
   CoreCloud Order Form — corecloud.css
   Loaded after all.min.css (WHMCS order form base)
   ============================================================ */

/* Inter is already loaded by the main theme via Google Fonts — no double import */

:root {
  /* Design tokens — kept in sync with theme.css :root.
     Only the subset used by order-form pages is listed here.
     If you add a new token to theme.css, mirror it here too. */
  --cc-bg:           #0f172a;
  --cc-bg-card:      #1e293b;
  --cc-text:         #f8fafc;
  --cc-text-body:    #cbd5e1;
  --cc-text-muted:   #94a3b8;
  --cc-border:       #334155;
  --cc-blue-400:     #60a5fa;
  --cc-blue-600:     #2563eb;
  --cc-blue-700:     #1d4ed8;
  --cc-blue-800:     #1e40af;
  --cc-green-500:    #22c55e;
  --cc-slate-500:    #64748b;
  --cc-slate-600:    #475569;
  --cc-font:         'Inter', system-ui, sans-serif;
  /* Radius names match theme.css exactly */
  --cc-radius-card:  12px;
  --cc-radius-btn:   8px;
  --cc-radius-full:  9999px;
  /* Shadows */
  --cc-shadow-card:  0 2px 8px rgba(0,0,0,.35);
  --cc-transition:   0.15s ease;
}

/* ── Base ──────────────────────────────────────────────────── */
html, body {
  font-family: var(--cc-font) !important;
  background-color: var(--cc-bg) !important;
  color: var(--cc-text) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--cc-text) !important;
  font-family: var(--cc-font) !important;
}

.header-lined p, p.tagline, .description {
  color: var(--cc-text-muted) !important;
}

a { color: var(--cc-blue-400) !important; }
a:hover { color: #93c5fd !important; text-decoration: none !important; }

hr { border-color: var(--cc-border) !important; opacity: .6; }

/* ── Cards / Panels (sidebar widgets) ──────────────────────── */
.card, .panel {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-card) !important;
  color: var(--cc-text) !important;
  overflow: hidden !important;
}

.card-header, .panel-heading {
  background-color: rgba(37,99,235,.08) !important;
  border-bottom: 1px solid var(--cc-border) !important;
  padding: .875rem 1.25rem !important;
}

.panel-title, .card-title {
  color: var(--cc-text) !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  font-family: var(--cc-font) !important;
  margin: 0 !important;
}

.panel-title .fas, .panel-title .far, .panel-title .fad { color: var(--cc-blue-400) !important; }
.panel-minimise, .card-minimise { color: var(--cc-text-muted) !important; opacity: .7 !important; }

.panel-body, .card-body {
  background-color: var(--cc-bg-card) !important;
  color: var(--cc-text-muted) !important;
  font-size: .8125rem !important;
  padding: 1rem 1.25rem !important;
}

/* ── List group (sidebar category/action items) ─────────────── */
.list-group { border-radius: 0 !important; }

.list-group-item {
  background-color: var(--cc-bg-card) !important;
  border-color: rgba(51,65,85,.5) !important;
  color: var(--cc-text-muted) !important;
  font-size: .875rem !important;
  font-family: var(--cc-font) !important;
  padding: .625rem 1.25rem !important;
  transition: background-color .1s, color .1s !important;
}

.list-group-item-action:hover {
  background-color: rgba(37,99,235,.08) !important;
  color: var(--cc-text) !important;
}

.list-group-item.active, .list-group-item.active:focus {
  background-color: rgba(37,99,235,.14) !important;
  border-color: rgba(37,99,235,.3) !important;
  color: var(--cc-blue-400) !important;
  font-weight: 500 !important;
}

.list-group-item .fas, .list-group-item .far {
  color: var(--cc-blue-400) !important;
  width: 16px !important;
  text-align: center !important;
  margin-right: .25rem !important;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  font-family: var(--cc-font) !important;
  font-weight: 600 !important;
  border-radius: var(--cc-radius-btn) !important;
}

.btn-primary, .btn-success {
  background-color: var(--cc-blue-600) !important;
  border-color: var(--cc-blue-600) !important;
  color: #fff !important;
}

.btn-primary:hover, .btn-success:hover {
  background-color: var(--cc-blue-700) !important;
  border-color: var(--cc-blue-700) !important;
  color: #fff !important;
}

.btn-default {
  background-color: rgba(51,65,85,.3) !important;
  border-color: var(--cc-border) !important;
  color: var(--cc-text-muted) !important;
}

.btn-default:hover {
  background-color: rgba(51,65,85,.5) !important;
  color: var(--cc-text) !important;
}

.btn-link { color: var(--cc-blue-400) !important; }
.btn-link:hover { color: #93c5fd !important; text-decoration: none !important; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-control, .field {
  background-color: rgba(15,23,42,.8) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-btn) !important;
  color: var(--cc-text) !important;
  font-family: var(--cc-font) !important;
}

.form-control:focus, .field:focus {
  border-color: var(--cc-blue-600) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.2) !important;
  background-color: rgba(15,23,42,.95) !important;
}

.form-control::placeholder, .field::placeholder { color: var(--cc-slate-500) !important; }

label, .form-label, .control-label, .field-label {
  color: var(--cc-text-muted) !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  font-family: var(--cc-font) !important;
}

select, .custom-select {
  background-color: rgba(15,23,42,.8) !important;
  border: 1px solid var(--cc-border) !important;
  color: var(--cc-text) !important;
}

select option { background-color: var(--cc-bg-card); color: var(--cc-text); }

.input-group-text {
  background-color: rgba(51,65,85,.4) !important;
  border-color: var(--cc-border) !important;
  color: var(--cc-text-muted) !important;
}

/* Prepend-icon promo input wrapper */
.prepend-icon { position: relative !important; }
.prepend-icon .field-icon {
  position: absolute !important;
  left: .875rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--cc-blue-400) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
/* Base WHMCS CSS sets .field-icon i { color: #bbb } explicitly — override it */
.prepend-icon .field-icon i { color: var(--cc-blue-400) !important; font-size: 15px !important; }
.prepend-icon .field { padding-left: 2.5rem !important; }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert-info    { background: rgba(37,99,235,.12)  !important; border: 0 !important; border-left: 3px solid var(--cc-blue-600) !important; color: var(--cc-blue-400) !important; border-radius: 8px !important; }
.alert-success { background: rgba(34,197,94,.12)  !important; border: 0 !important; border-left: 3px solid var(--cc-green-500) !important; color: #86efac !important; border-radius: 8px !important; }
.alert-danger  { background: rgba(239,68,68,.12)  !important; border: 0 !important; border-left: 3px solid #ef4444 !important; color: #fca5a5 !important; border-radius: 8px !important; }
.alert-warning { background: rgba(245,158,11,.12) !important; border: 0 !important; border-left: 3px solid #f59e0b !important; color: #fcd34d !important; border-radius: 8px !important; }

/* ── Tables ─────────────────────────────────────────────────── */
.table { color: var(--cc-text-body) !important; }
.table th { color: var(--cc-text-muted) !important; border-color: var(--cc-border) !important; background-color: rgba(30,41,59,.5) !important; font-size: .75rem !important; text-transform: uppercase !important; letter-spacing: .04em !important; font-weight: 600 !important; }
.table td { border-color: var(--cc-border) !important; }

/* ── Nav tabs (promo / estimate tax) ────────────────────────── */
/* Style nav-tabs header to match .view-cart-items-header visually —
   both use the same card-header pattern so they look consistent. */
.nav-tabs {
  background-color: rgba(30,41,59,.6) !important;
  border: 1px solid var(--cc-border) !important;
  border-bottom: none !important;
  border-radius: var(--cc-radius-card) var(--cc-radius-card) 0 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

.nav-tabs .nav-item .nav-link {
  color: var(--cc-text-muted) !important;
  border-color: transparent !important;
  font-size: .875rem !important;
  font-family: var(--cc-font) !important;
  padding: .5rem 1rem !important;
  transition: all .15s !important;
}

.nav-tabs .nav-item .nav-link.active {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--cc-text) !important;
  font-weight: 600 !important;
}

.nav-tabs .nav-item .nav-link:hover:not(.active) {
  background-color: rgba(255,255,255,.04) !important;
  color: var(--cc-text) !important;
  border-color: transparent !important;
}

.tab-content {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--cc-radius-btn) var(--cc-radius-btn) !important;
  padding: 1.25rem !important;
}

/* ── Cart item list header ──────────────────────────────────── */
.view-cart-items-header {
  background-color: rgba(30,41,59,.6) !important;
  color: var(--cc-text-muted) !important;
  border: 1px solid var(--cc-border) !important;
  border-bottom: none !important;
  padding: .625rem .875rem !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  border-radius: var(--cc-radius-card) var(--cc-radius-card) 0 0 !important;
}

.view-cart-items {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--cc-radius-card) var(--cc-radius-card) !important;
  margin-bottom: 1rem !important;
  overflow: hidden !important;
}

.view-cart-items .item {
  padding: .875rem 1rem !important;
  border-bottom: 1px solid rgba(51,65,85,.35) !important;
}

.view-cart-items .item:last-child { border-bottom: none !important; }

.item-title {
  font-weight: 500 !important;
  color: var(--cc-text) !important;
  display: block !important;
  margin-bottom: .125rem !important;
}

.item-group {
  font-size: .8125rem !important;
  color: var(--cc-text-muted) !important;
  display: block !important;
}

.item-domain {
  font-size: .8125rem !important;
  color: var(--cc-blue-400) !important;
  display: block !important;
}

.item-price {
  font-weight: 600 !important;
  color: var(--cc-text) !important;
  text-align: right !important;
  line-height: 1.3 !important;
}

.item-price .cycle {
  display: block !important;
  font-size: .75rem !important;
  font-weight: 400 !important;
  color: var(--cc-text-muted) !important;
}

.view-cart-empty {
  padding: 2.5rem 1rem !important;
  text-align: center !important;
  color: var(--cc-text-muted) !important;
  font-size: .9375rem !important;
}

.empty-cart { margin-bottom: .75rem !important; text-align: right !important; }
.empty-cart .btn-link { color: var(--cc-text-muted) !important; font-size: .8125rem !important; }
.empty-cart .btn-link:hover { color: #f87171 !important; }

/* ── Order summary sidebar ──────────────────────────────────── */
.order-summary {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-card) !important;
  padding: 1.5rem !important;
  color: var(--cc-text) !important;
}

.order-summary h2 {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--cc-text) !important;
  margin-bottom: 1rem !important;
  padding-bottom: .75rem !important;
  border-bottom: 1px solid var(--cc-border) !important;
}

.summary-container > .subtotal {
  display: flex !important;
  justify-content: space-between !important;
  padding: .375rem 0 !important;
  font-size: .875rem !important;
  color: var(--cc-text-muted) !important;
}

.bordered-totals {
  border-top: 1px solid var(--cc-border) !important;
  border-bottom: 1px solid var(--cc-border) !important;
  padding: .375rem 0 !important;
  margin: .375rem 0 !important;
}

.bordered-totals > .clearfix {
  display: flex !important;
  justify-content: space-between !important;
  padding: .2rem 0 !important;
  font-size: .875rem !important;
  color: var(--cc-text-muted) !important;
}

.recurring-totals {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  padding: .375rem 0 !important;
  font-size: .875rem !important;
  color: var(--cc-text-muted) !important;
}

.recurring-charges .cost { color: var(--cc-text) !important; font-weight: 600 !important; }

.total-due-today.total-due-today-padded {
  margin-top: .875rem !important;
  padding-top: .875rem !important;
  border-top: 1px solid var(--cc-border) !important;
  text-align: center !important;
}

.total-due-today .amt {
  display: block !important;
  font-size: 1.875rem !important;
  font-weight: 700 !important;
  color: var(--cc-blue-400) !important;
  line-height: 1 !important;
  margin-bottom: .25rem !important;
}

.total-due-today span:not(.amt) {
  font-size: .8125rem !important;
  color: var(--cc-text-muted) !important;
}

/* Checkout button */
.btn-checkout {
  background: linear-gradient(135deg, var(--cc-blue-600), var(--cc-blue-700)) !important;
  border-color: var(--cc-blue-600) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: .75rem 1.5rem !important;
  border-radius: var(--cc-radius-btn) !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  font-size: 1rem !important;
  margin-top: 1.25rem !important;
  text-decoration: none !important;
  text-align: center !important;
}

.btn-checkout:hover {
  background: linear-gradient(135deg, var(--cc-blue-700), var(--cc-blue-800)) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.btn-checkout.disabled { opacity: .5 !important; pointer-events: none !important; }

.btn-continue-shopping {
  color: var(--cc-text-muted) !important;
  font-size: .8125rem !important;
  display: block !important;
  text-align: center !important;
  margin-top: .625rem !important;
  text-decoration: none !important;
}

.btn-continue-shopping:hover { color: var(--cc-text) !important; }

.separator {
  color: var(--cc-text-muted) !important;
  text-align: center !important;
  font-size: .75rem !important;
  margin: .625rem 0 !important;
  letter-spacing: .08em !important;
}

/* ── Modals ─────────────────────────────────────────────────── */
.modal-content {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-card) !important;
  color: var(--cc-text) !important;
}

.modal-header { border-bottom-color: var(--cc-border) !important; padding: 1.25rem 1.5rem !important; }
.modal-body   { padding: 1.5rem !important; color: var(--cc-text-muted) !important; }
.modal-footer {
  border-top-color: var(--cc-border) !important;
  padding: 1rem 1.5rem !important;
  background-color: rgba(15,23,42,.3) !important;
  border-radius: 0 0 var(--cc-radius-card) var(--cc-radius-card) !important;
}

.modal-title { color: var(--cc-text) !important; font-size: 1.125rem !important; }
.close { color: var(--cc-text-muted) !important; opacity: 1 !important; text-shadow: none !important; }
.close:hover { color: var(--cc-text) !important; }

/* ── Misc utility overrides ─────────────────────────────────── */
.bg-white, .bg-light, .well { background-color: var(--cc-bg-card) !important; }
.text-muted  { color: var(--cc-text-muted) !important; }
.text-primary { color: var(--cc-blue-400) !important; }
.badge-primary { background-color: var(--cc-blue-600) !important; }
.loader { color: var(--cc-text-muted) !important; }

/* Dropdown menu dark */
.dropdown-menu {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-btn) !important;
}

.dropdown-item {
  color: var(--cc-text-muted) !important;
  font-family: var(--cc-font) !important;
  font-size: .875rem !important;
  padding: .5rem 1rem !important;
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: rgba(37,99,235,.1) !important;
  color: var(--cc-text) !important;
}

/* ── CoreCloud Product Card Grid ────────────────────────────── */
.cc-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem;
  padding: .25rem 0 1.5rem;
}

.cc-product-card {
  background-color: var(--cc-bg-card);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.cc-product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(59,130,246,.4);
  box-shadow: 0 16px 32px -8px rgba(0,0,0,.5), 0 0 0 1px rgba(59,130,246,.12);
}

/* Product card header (name) */
.cc-product-header {
  padding: 1.125rem 1.375rem .75rem;
  border-bottom: 1px solid var(--cc-border);
  background-color: rgba(37,99,235,.06);
}

.cc-product-name {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--cc-text);
  display: block;
  letter-spacing: -.01em;
}

.cc-product-stock {
  font-size: .75rem;
  color: var(--cc-green-500);
  display: block;
  margin-top: .2rem;
}

/* Product card pricing */
.cc-product-pricing {
  padding: 1rem 1.375rem;
  border-bottom: 1px solid var(--cc-border);
  background-color: rgba(15,23,42,.25);
}

.cc-price-from {
  font-size: .6875rem;
  color: var(--cc-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .25rem;
}

.cc-price-row {
  display: flex;
  align-items: baseline;
  gap: .25rem;
}

.cc-price-amount {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--cc-text);
  line-height: 1;
  font-family: var(--cc-font);
  letter-spacing: -.02em;
}

.cc-price-per {
  font-size: .8125rem;
  color: var(--cc-text-muted);
  font-weight: 400;
}

.cc-price-setup { margin-top: .25rem; color: var(--cc-text-muted); font-size: .75rem; }
.cc-price-label { font-size: .875rem; color: var(--cc-blue-400); font-weight: 500; }

/* Product features */
.cc-product-features {
  padding: 1rem 1.375rem;
  flex: 1;
}

.cc-product-desc {
  color: var(--cc-text-muted);
  font-size: .8125rem;
  margin-bottom: .75rem;
  line-height: 1.5;
}

.cc-product-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .4375rem;
}

.cc-product-features li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--cc-text-muted);
  line-height: 1.3;
}

.cc-product-features li::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: .625rem;
  color: var(--cc-green-500);
  flex-shrink: 0;
  width: 12px;
  text-align: center;
}

.cc-feat-value {
  color: var(--cc-text);
  font-weight: 600;
  white-space: nowrap;
}

.cc-feat-name { color: var(--cc-text-muted); }

/* Product CTA */
.cc-product-cta {
  padding: .875rem 1.375rem 1.125rem;
  border-top: 1px solid var(--cc-border);
  background-color: rgba(15,23,42,.2);
}

.cc-btn-order {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: .625rem 1rem !important;
  font-weight: 600 !important;
  font-size: .9375rem !important;
  border-radius: var(--cc-radius-btn) !important;
  background-color: var(--cc-blue-600) !important;
  border-color: var(--cc-blue-600) !important;
  color: #fff !important;
  text-decoration: none !important;
  width: 100% !important;
  transition: background-color .15s ease, border-color .15s ease !important;
  gap: .375rem !important;
}

.cc-btn-order:hover {
  background-color: var(--cc-blue-700) !important;
  border-color: var(--cc-blue-700) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ── WHMCS product listing — override defaults to match corecld.com pricing ── */
/*
  WHMCS renders product cards with its own HTML:
    .product > header > span[id*="-name"]
    .product > .product-desc > p[id*="-description"] (lines separated by <br>)
    .product > footer > .product-pricing > .price + text
    .product > footer > .btn-order-now

  We override the layout here so it matches the card style on corecld.com/pricing.
  The JS snippet injected by the hook (corecloud_orderform_css.php) converts
  <br>-separated description lines to <li> items so ::before checkmarks apply.
*/

/* Replace Bootstrap float/flex row with CSS grid */
#order-standard_cart .row-eq-height {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  gap: 1.25rem !important;
  align-items: stretch !important;
}
#order-standard_cart .row-eq-height > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  float: none !important;
  padding: 0 !important;
}

/* Card shell */
#order-standard_cart .product {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-slate-600) !important;
  border-radius: var(--cc-radius-card) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
#order-standard_cart .product:hover {
  transform: translateY(-4px) !important;
  border-color: var(--cc-blue-600) !important;
  box-shadow: 0 16px 32px -8px rgba(0,0,0,.5), 0 0 0 1px rgba(37,99,235,.2) !important;
}

/* Header — plan name */
#order-standard_cart .product header {
  padding: 1.125rem 1.375rem .875rem !important;
  border-bottom: 1px solid var(--cc-border) !important;
  background-color: rgba(37,99,235,.06) !important;
  display: flex !important;
  align-items: center !important;
}
#order-standard_cart .product header span {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--cc-text) !important;
  letter-spacing: -.015em !important;
  font-family: var(--cc-font) !important;
  line-height: 1.2 !important;
}

/* Description — specs list.
   If description is plain text with <br>, lines are styled as compact rows.
   If description uses <ul><li>, each item gets a checkmark via ::before.
   Recommended: enter specs as <ul><li> in WHMCS product short description. */
#order-standard_cart .product .product-desc {
  padding: 1rem 1.375rem !important;
  flex: 1 !important;
  border-bottom: 1px solid var(--cc-border) !important;
}
#order-standard_cart .product .product-desc p {
  color: var(--cc-text-muted) !important;
  font-size: .8125rem !important;
  line-height: 2.1 !important;
  margin: 0 !important;
  font-family: var(--cc-font) !important;
}
/* <li> items (if description uses HTML list format) */
#order-standard_cart .product .product-desc ul,
#order-standard_cart .product .product-desc ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .4rem !important;
}
#order-standard_cart .product .product-desc li {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  font-size: .8125rem !important;
  color: var(--cc-text-muted) !important;
  line-height: 1.4 !important;
}
#order-standard_cart .product .product-desc li::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: .625rem;
  color: var(--cc-green-500);
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

/* Footer — price + CTA */
#order-standard_cart .product footer {
  padding: 1rem 1.375rem 1.125rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .75rem !important;
  background-color: rgba(15,23,42,.2) !important;
  border-top: none !important;
}
#order-standard_cart .product .product-pricing {
  font-family: var(--cc-font) !important;
}
#order-standard_cart .product .product-pricing .price {
  font-size: 1.875rem !important;
  font-weight: 800 !important;
  color: var(--cc-text) !important;
  letter-spacing: -.03em !important;
  display: block !important;
  line-height: 1.1 !important;
}
/* Hide the <br> inside pricing div */
#order-standard_cart .product .product-pricing br { display: none !important; }
/* "Monthly" billing period label */
#order-standard_cart .product .product-pricing {
  font-size: .8125rem !important;
  color: var(--cc-text-muted) !important;
  line-height: 1.4 !important;
}

/* Order Now button — override Bootstrap .btn-success */
#order-standard_cart .product .btn-order-now {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .4rem !important;
  width: 100% !important;
  padding: .625rem 1.25rem !important;
  background-color: var(--cc-blue-600) !important;
  border-color: var(--cc-blue-600) !important;
  color: #fff !important;
  border-radius: var(--cc-radius-btn) !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  font-family: var(--cc-font) !important;
  text-decoration: none !important;
  transition: background-color .15s ease !important;
}
#order-standard_cart .product .btn-order-now:hover {
  background-color: var(--cc-blue-700) !important;
  border-color: var(--cc-blue-700) !important;
  color: #fff !important;
  transform: none !important;
}

/* Mobile: single column on phones */
@media (max-width: 575px) {
  #order-standard_cart .row-eq-height {
    grid-template-columns: 1fr !important;
  }
}

/* ── Configure product page overrides ───────────────────────── */

/* Product info box (product image/description area) */
#order-standard_cart .product-info {
  background-color: rgba(30,41,59,.5) !important;
  border-top: 1px solid var(--cc-border) !important;
  border-bottom: 1px solid var(--cc-border) !important;
  color: var(--cc-text-muted) !important;
  border-radius: 8px !important;
}

#order-standard_cart .product-info .product-title {
  color: var(--cc-text) !important;
  font-weight: 600 !important;
}

#order-standard_cart .product-info p { color: var(--cc-text-muted) !important; }

/* Sub-heading section dividers */
#order-standard_cart .sub-heading {
  border-top-color: var(--cc-border) !important;
}

#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
  background-color: var(--cc-bg) !important;
  color: var(--cc-blue-400) !important;
  font-size: .8125rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

/* Order summary box (configure product sidebar) */
#order-standard_cart .order-summary {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  border-bottom-color: var(--cc-border) !important;
  border-radius: var(--cc-radius-card) !important;
}

#order-standard_cart .order-summary h2 {
  background-color: rgba(37,99,235,.08) !important;
  color: var(--cc-text) !important;
  border-bottom: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-card) var(--cc-radius-card) 0 0 !important;
  padding: 1rem 1.25rem !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  text-align: left !important;
}

/* AJAX-loaded ordersummary.tpl content */
#order-standard_cart .summary-container {
  background-color: var(--cc-bg-card) !important;
  border-radius: 0 0 var(--cc-radius-card) var(--cc-radius-card) !important;
  color: var(--cc-text) !important;
  padding: 1rem 1.25rem !important;
  min-height: 0 !important;
}

#order-standard_cart .order-summary .product-name {
  color: var(--cc-text) !important;
  font-size: 1rem !important;
  margin-bottom: .25rem !important;
}

#order-standard_cart .order-summary .product-group {
  color: var(--cc-text-muted) !important;
  font-style: normal !important;
  font-size: .8125rem !important;
}

#order-standard_cart .order-summary .summary-totals {
  border-top-color: var(--cc-border) !important;
  border-bottom-color: var(--cc-border) !important;
  color: var(--cc-text-muted) !important;
}

#order-standard_cart .order-summary .subtotal {
  color: var(--cc-text-muted) !important;
  border-bottom-color: var(--cc-border) !important;
  display: flex !important;
  justify-content: space-between !important;
}

#order-standard_cart .order-summary .bordered-totals {
  border-bottom-color: var(--cc-border) !important;
  color: var(--cc-text-muted) !important;
}

#order-standard_cart .order-summary .recurring-totals,
#order-standard_cart .order-summary .recurring-charges {
  color: var(--cc-text-muted) !important;
  font-style: normal !important;
  text-align: left !important;
}

#order-standard_cart .order-summary .total-due-today {
  margin-top: 1rem !important;
  padding-top: .75rem !important;
  border-top: 1px solid var(--cc-border) !important;
}

#order-standard_cart .order-summary .total-due-today .amt {
  color: var(--cc-blue-400) !important;
  font-size: 1.875rem !important;
  font-weight: 700 !important;
  text-align: center !important;
}

#order-standard_cart .order-summary .total-due-today span:not(.amt) {
  color: var(--cc-text-muted) !important;
  text-align: center !important;
  display: block !important;
  font-size: .8125rem !important;
}

#order-standard_cart .order-summary .loader { color: var(--cc-text-muted) !important; }

/* Addon panels */
.panel-addon {
  background-color: var(--cc-bg-card) !important;
  border-color: var(--cc-border) !important;
}

.panel-addon-selected {
  border-color: var(--cc-blue-600) !important;
  background-color: rgba(37,99,235,.08) !important;
}

.panel-addon .panel-price { color: var(--cc-blue-400) !important; font-weight: 600 !important; }

/* ── Mobile overflow fixes ──────────────────────────────────── */
@media (max-width: 767px) {
  /* Prevent any Bootstrap row negative margin from escaping the page */
  #main-body {
    overflow-x: hidden;
  }

  /* Rows inside the order form: neutralize negative margins so they don't
     overflow the viewport when the parent lacks Bootstrap container padding */
  #order-standard_cart .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Compensate: columns lose their offset from row negative margin,
     so we keep their internal padding for proper spacing */
  #order-standard_cart [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Select dropdowns must not exceed viewport */
  #order-standard_cart select,
  #order-standard_cart .form-control,
  .sidebar-collapsed select,
  .sidebar-collapsed .form-control {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Sidebar collapsed panels: full width, no overflow */
  .sidebar-collapsed .card,
  .sidebar-collapsed .panel {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Nav tabs: allow wrapping on very small screens */
  #order-standard_cart .nav-tabs {
    flex-wrap: wrap !important;
  }

  #order-standard_cart .nav-tabs .nav-item {
    flex: 1 1 auto !important;
  }

  /* View cart items header: don't let inner columns overflow */
  #order-standard_cart .view-cart-items-header {
    overflow-x: hidden !important;
  }

  /* Secondary cart sidebar: constrain on mobile */
  #order-standard_cart .secondary-cart-sidebar {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}
.panel-addon .panel-add { color: var(--cc-text-muted) !important; }