/* ═══════════════════════════════════════════════════
   StreamPri.me — Custom Theme CSS
   Overrides Twenty-One base styles for dark theme.
   WHMCS loads this file automatically after theme.css
═══════════════════════════════════════════════════ */

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@700;800&family=Inter:wght@400;500;600&display=swap');

/* ── COLOUR VARIABLES ── */
:root {
  --sp-bg:     #080c18;
  --sp-bg2:    #0c1120;
  --sp-bg3:    #060910;
  --sp-card:   #0f1626;
  --sp-border: #1a2540;
  --sp-blue:   #3b82f6;
  --sp-red:    #e53e3e;
  --sp-cyan:   #22d3ee;
  --sp-text:   #e2e8f0;
  --sp-muted:  #64748b;
  --sp-green:  #10b981;
  --sp-gold:   #f59e0b;
}

/* ── BASE ── */
html, body {
  font-family: 'Inter', sans-serif !important;
  background-color: var(--sp-bg) !important;
  color: var(--sp-text) !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Sora', sans-serif !important;
  color: var(--sp-text) !important;
}
.primary-bg-color {
  background-color: var(--sp-bg) !important;
}
a { color: var(--sp-blue); }
a:hover { color: var(--sp-cyan); }

/* ── HEADER / NAVBAR ── */
header.header {
  background-color: var(--sp-bg) !important;
  border-bottom: none;
}

/* Topbar */
header.header .topbar {
  background-color: var(--sp-bg3) !important;
  border-bottom: 1px solid var(--sp-border);
  color: var(--sp-muted) !important;
}
header.header .topbar .btn { color: var(--sp-muted) !important; }
header.header .topbar .input-group-text { color: var(--sp-muted) !important; background: transparent !important; border-color: transparent !important; }
header.header .topbar .btn-active-client span { border-bottom-color: var(--sp-muted) !important; }
header.header .topbar .active-client .btn { color: var(--sp-muted) !important; }

/* ══════════════════════════════════════════════════
   NAVBAR — matches streampri.me website exactly
   Developed against real WHMCS rendered HTML output
   ══════════════════════════════════════════════════ */

/* 1. Navbar wrapper */
.sp-navbar {
  background: rgba(8,12,24,0.95) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--sp-border) !important;
  padding: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1050 !important;
}

/* 2. Container — fixed height matching website (79.78px) */
.sp-navbar .container {
  height: 79.78px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* 3. Brand wordmark */
.sp-brand {
  font-family: 'Sora', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.45rem !important;
  letter-spacing: -0.3px !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}
.sp-brand em { color: var(--sp-red) !important; font-style: normal !important; }
.sp-brand span { color: var(--sp-cyan) !important; }

/* 4. Mobile toggle */
.sp-toggler {
  border: 1px solid var(--sp-border) !important;
  color: var(--sp-text) !important;
  padding: 0.4rem 0.75rem !important;
  background: transparent !important;
}

/* 5. Collapse div — takes remaining width, flex row */
.sp-navbar .navbar-collapse {
  display: flex !important;
  flex: 1 !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* 6. Primary nav — centred, full width, no right-side element */
.sp-navbar ul#nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* 7. Fix d-block on <li> breaking horizontal layout */
.sp-navbar ul#nav > li,
.sp-navbar ul#nav > li.d-block {
  display: flex !important;
  align-items: center !important;
}

/* 8. Hide More dropdown */
.sp-navbar ul#nav li.collapsable-dropdown,
.sp-navbar ul#nav li.collapsable-dropdown.d-none,
.sp-navbar ul#nav li.collapsable-dropdown.dropdown {
  display: none !important;
}

/* 9. Nav links */
.sp-navbar ul#nav > li > a {
  color: var(--sp-muted) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  padding: 0.4rem 1.1rem !important;
  transition: color 0.2s !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.sp-navbar ul#nav > li > a:hover { color: var(--sp-text) !important; }

/* 10. My Account dropdown menu */
.sp-navbar .dropdown-menu {
  background: var(--sp-card) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: 8px !important;
  margin-top: 0.5rem !important;
}
.sp-navbar .dropdown-menu .dropdown-item {
  color: var(--sp-muted) !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 1rem !important;
}
.sp-navbar .dropdown-menu .dropdown-item:hover {
  background: rgba(255,255,255,0.05) !important;
  color: var(--sp-text) !important;
}
.sp-navbar .dropdown-menu .dropdown-divider { border-color: var(--sp-border) !important; }

/* 11. Hide breadcrumb */
.master-breadcrumb { display: none !important; }

/* ── CLIENT AREA HOME ── */

/* Tiles — dark background matching theme */
.tiles .tile {
  background: var(--sp-card) !important;
  border: 1px solid var(--sp-border) !important;
  color: var(--sp-text) !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
}
.tiles .tile:hover {
  background: #131c30 !important;
}
.tiles .tile .stat {
  color: var(--sp-text) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
}
.tiles .tile .title {
  color: var(--sp-muted) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.tiles .tile i {
  color: var(--sp-muted) !important;
  font-size: 2rem !important;
  opacity: 0.3 !important;
}
.tiles .row {
  background: transparent !important;
}

/* Recent News panel — hidden */
.card[menuitemname="Recent News"] { display: none !important; }



/* ── DROPDOWN MENUS ── */
.dropdown-menu {
  background-color: var(--sp-card) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7) !important;
}
.dropdown-item {
  color: var(--sp-muted) !important;
  font-size: 0.875rem !important;
  border-radius: 6px !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: rgba(59,130,246,0.08) !important;
  color: var(--sp-text) !important;
}
.dropdown-divider { border-color: var(--sp-border) !important; }

/* ── BREADCRUMB ── */
.master-breadcrumb {
  background-color: var(--sp-bg2) !important;
  border-bottom: 1px solid var(--sp-border) !important;
}
.breadcrumb { background: transparent !important; }
.breadcrumb-item a { color: var(--sp-muted) !important; font-size: 0.82rem; }
.breadcrumb-item a:hover { color: var(--sp-blue) !important; }
.breadcrumb-item.active { color: var(--sp-text) !important; font-size: 0.82rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--sp-muted) !important; }

/* ── MAIN CONTENT PANELS / CARDS ── */
.card {
  background-color: var(--sp-card) !important;
  border-color: var(--sp-border) !important;
  color: var(--sp-text) !important;
  border-radius: 12px !important;
}
.card-header {
  background-color: var(--sp-card) !important;
  border-color: var(--sp-border) !important;
  color: var(--sp-text) !important;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
}
.card-body { background-color: var(--sp-card) !important; color: var(--sp-text) !important; }
.card-footer { background-color: var(--sp-card) !important; border-color: var(--sp-border) !important; }

/* ── TABLES ── */
.table { color: var(--sp-text) !important; }
.table thead th {
  border-color: var(--sp-border) !important;
  color: var(--sp-muted) !important;
  background-color: var(--sp-bg2) !important;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.table td, .table th { border-color: var(--sp-border) !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,0.02) !important; }
.table-hover tbody tr:hover { background-color: rgba(59,130,246,0.04) !important; }

/* DataTables */
.dataTables_wrapper { color: var(--sp-text) !important; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info { color: var(--sp-muted) !important; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background-color: var(--sp-bg2) !important;
  border-color: var(--sp-border) !important;
  color: var(--sp-text) !important;
  border-radius: 6px !important;
}
table.dataTable tbody tr { background-color: var(--sp-card) !important; }
table.dataTable tbody tr.odd { background-color: var(--sp-bg2) !important; }
table.dataTable tbody tr.even { background-color: var(--sp-card) !important; }
table.dataTable tbody td { color: var(--sp-text) !important; border-color: var(--sp-border) !important; }
table.dataTable thead th { background-color: var(--sp-bg2) !important; color: var(--sp-muted) !important; border-color: var(--sp-border) !important; }
td.dataTables_empty { background-color: var(--sp-card) !important; color: var(--sp-muted) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background-color: var(--sp-card) !important;
  border-color: var(--sp-border) !important;
  color: var(--sp-muted) !important;
  border-radius: 6px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: rgba(59,130,246,0.1) !important;
  color: var(--sp-blue) !important;
  border-color: var(--sp-blue) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background-color: var(--sp-blue) !important;
  border-color: var(--sp-blue) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--sp-muted) !important;
}

/* ── FORMS ── */
.form-control, select, textarea {
  background-color: var(--sp-bg2) !important;
  border-color: var(--sp-border) !important;
  color: var(--sp-text) !important;
  border-radius: 8px !important;
}
.form-control:focus, select:focus, textarea:focus {
  border-color: var(--sp-blue) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important;
  background-color: var(--sp-bg2) !important;
  color: var(--sp-text) !important;
}
.form-control::placeholder { color: var(--sp-muted) !important; opacity: 1; }
label, .control-label { color: var(--sp-text) !important; font-size: 0.85rem; font-weight: 600; }

/* ── PREPEND-ICON FORM FIELDS (checkout page) ──
   Icon label must be absolutely positioned to the left of the input,
   NOT treated as a block label above it. */
.form-group.prepend-icon {
    position: relative !important;
}
.form-group.prepend-icon .field-icon {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--sp-muted) !important;
    font-size: 0.85rem !important;
    font-weight: normal !important;
    z-index: 4 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.form-group.prepend-icon .field.form-control,
.form-group.prepend-icon input.form-control,
.form-group.prepend-icon select.form-control,
.form-group.prepend-icon textarea.form-control {
    padding-left: 40px !important;
}
.input-group-text { background-color: var(--sp-bg3) !important; border-color: var(--sp-border) !important; color: var(--sp-muted) !important; }
.form-text, .help-block { color: var(--sp-muted) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--sp-blue); }

/* ── PHONE NUMBER FIELD (intl-tel-input library) ──
   intl-tel-input MUST stay display:inline-block (its default) so the
   flag container's position:absolute is relative to the input wrapper.
   We make the parent a block so it fills the column width. */
.intl-tel-input {
    width: 100% !important;
    display: inline-block !important;  /* NOT block — breaks flag positioning */
    vertical-align: top !important;
}
/* Make the wrapper block so intl-tel-input fills full width */
.form-group .intl-tel-input,
.field-wrapper .intl-tel-input {
    display: block !important;
}
/* But the inner wrapper stays inline-block */
.intl-tel-input.allow-dropdown {
    display: inline-block !important;
    width: 100% !important;
}
/* Flag container background - match our dark theme */
.intl-tel-input .selected-flag {
    background-color: var(--sp-bg2) !important;
    border-right: 1px solid var(--sp-border) !important;
}
.intl-tel-input .flag-container:hover .selected-flag {
    background-color: var(--sp-card) !important;
}
/* Country list dropdown */
.intl-tel-input .country-list {
    background-color: var(--sp-card) !important;
    border-color: var(--sp-border) !important;
    color: var(--sp-text) !important;
}
.intl-tel-input .country-list .country:hover,
.intl-tel-input .country-list .country.highlight {
    background-color: rgba(59,130,246,0.1) !important;
}
.intl-tel-input .country-list .country-name {
    color: var(--sp-text) !important;
}
.intl-tel-input .country-list .dial-code {
    color: var(--sp-muted) !important;
}
.intl-tel-input .country-list .divider {
    border-color: var(--sp-border) !important;
}
/* Arrow colour */
.intl-tel-input .selected-flag .iti-arrow {
    border-top-color: var(--sp-muted) !important;
}

/* ── MARKETING OPT-IN (single bootstrapSwitch toggle) ──
   This is ONE toggle widget — Yes is the left/on side, No is the right/off side.
   The .bootstrap-switch-container slides left/right inside overflow:hidden.
   Do NOT try to lay them side by side — just style the single toggle.
   The critical rule is overflow:hidden on .bootstrap-switch itself. */
.bootstrap-switch {
    display: inline-block !important;
    border-color: var(--sp-border) !important;
    border-radius: 0.25rem !important;
    overflow: hidden !important;        /* MUST be hidden — hides inactive side */
    position: relative !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    background: transparent !important;
}
.bootstrap-switch .bootstrap-switch-container {
    display: inline-block !important;
    top: 0 !important;
    white-space: nowrap !important;  /* prevents Yes/No wrapping to next line */
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label {
    box-sizing: border-box !important;
    cursor: pointer !important;
    display: inline-block !important;
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}
/* ON side (Yes) */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
    background-color: var(--sp-blue) !important;
    color: #fff !important;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
    background-color: var(--sp-green) !important;
    color: #fff !important;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
    background-color: var(--sp-card) !important;
    color: var(--sp-text) !important;
}
/* OFF side (No) */
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
    background-color: var(--sp-bg2) !important;
    color: var(--sp-muted) !important;
}
/* Middle label (the draggable part) */
.bootstrap-switch .bootstrap-switch-label {
    background-color: var(--sp-card) !important;
    color: var(--sp-text) !important;
    border-left: 1px solid var(--sp-border) !important;
    border-right: 1px solid var(--sp-border) !important;
}


/* ── BUTTONS ── */
.btn-primary { background-color: var(--sp-blue) !important; border-color: var(--sp-blue) !important; color: #fff !important; }
.btn-primary:hover { background-color: #2563eb !important; border-color: #2563eb !important; }
.btn-success { background-color: var(--sp-green) !important; border-color: var(--sp-green) !important; color: #fff !important; }
.btn-danger  { background-color: var(--sp-red) !important;   border-color: var(--sp-red) !important;   color: #fff !important; }
.btn-warning { background-color: var(--sp-gold) !important;  border-color: var(--sp-gold) !important;  color: #000 !important; }
.btn-default, .btn-secondary, .btn-light {
  background-color: var(--sp-card) !important;
  border-color: var(--sp-border) !important;
  color: var(--sp-text) !important;
}
.btn-default:hover, .btn-secondary:hover { border-color: var(--sp-blue) !important; }
.btn-link { color: var(--sp-blue) !important; }
.btn-link:hover { color: var(--sp-cyan) !important; }

/* ── ALERTS ── */
.alert { border-radius: 10px !important; }
.alert-success { background-color: rgba(16,185,129,0.1) !important; border-color: rgba(16,185,129,0.3) !important; color: #6ee7b7 !important; }
.alert-danger   { background-color: rgba(229,62,62,0.1) !important;  border-color: rgba(229,62,62,0.3) !important;  color: #fc8181 !important; }
.alert-warning  { background-color: rgba(245,158,11,0.1) !important; border-color: rgba(245,158,11,0.3) !important; color: #fcd34d !important; }
.alert-info     { background-color: rgba(59,130,246,0.1) !important; border-color: rgba(59,130,246,0.3) !important; color: #93c5fd !important; }

/* ── LIST GROUPS ── */
.list-group-item { background-color: var(--sp-card) !important; border-color: var(--sp-border) !important; color: var(--sp-text) !important; }
.list-group-item:hover { background-color: rgba(59,130,246,0.06) !important; }
.list-group-item.active { background-color: var(--sp-blue) !important; border-color: var(--sp-blue) !important; }

/* ── SIDEBAR ── */
.sidebar .card { background-color: var(--sp-card) !important; }
.sidebar .list-group-item { background-color: var(--sp-card) !important; border-color: var(--sp-border) !important; color: var(--sp-muted) !important; }
.sidebar .list-group-item:hover { color: var(--sp-text) !important; background-color: rgba(59,130,246,0.06) !important; }
.sidebar .list-group-item.active { background-color: var(--sp-blue) !important; border-color: var(--sp-blue) !important; color: #fff !important; }

/* ── TABS ── */
.nav-tabs { border-color: var(--sp-border) !important; }
.nav-tabs .nav-link { color: var(--sp-muted) !important; border-color: transparent !important; }
.nav-tabs .nav-link:hover { border-color: var(--sp-border) !important; color: var(--sp-text) !important; }
.nav-tabs .nav-link.active { background-color: var(--sp-card) !important; border-color: var(--sp-border) !important; border-bottom-color: var(--sp-card) !important; color: var(--sp-blue) !important; }
.tab-content { background-color: var(--sp-card); border: 1px solid var(--sp-border); border-top: none; padding: 1.5rem; border-radius: 0 0 10px 10px; }

/* ── MODALS ── */
.modal-content { background-color: var(--sp-card) !important; border-color: var(--sp-border) !important; border-radius: 14px !important; color: var(--sp-text) !important; }
.modal-header { border-color: var(--sp-border) !important; }
.modal-footer { border-color: var(--sp-border) !important; }
.modal-backdrop { background-color: rgba(0,0,0,0.75) !important; }

/* ── MISC ── */
hr { border-color: var(--sp-border) !important; }
.text-muted { color: var(--sp-muted) !important; }
code { background-color: var(--sp-bg2); color: var(--sp-cyan); padding: 2px 6px; border-radius: 4px; }
pre { background-color: var(--sp-bg2) !important; border-color: var(--sp-border) !important; color: var(--sp-text) !important; border-radius: 8px; }
.popover { background-color: var(--sp-card) !important; border-color: var(--sp-border) !important; }
.popover-header { background-color: var(--sp-bg2) !important; border-color: var(--sp-border) !important; color: var(--sp-text) !important; }
.popover-body { color: var(--sp-text) !important; }

/* Dashboard stat boxes */
.stat-num, .stats-num { color: var(--sp-text) !important; }

/* ── FOOTER ── */
.sp-footer {
  background-color: var(--sp-bg3) !important;
  border-top: 1px solid var(--sp-border);
  color: var(--sp-muted);
  margin-top: 3rem;
}
.sp-ft-brand { font-family: 'Sora', sans-serif; font-size: 1.3rem; font-weight: 800; text-decoration: none !important; display: inline-block; margin-bottom: 0.75rem; }
.sp-ft-brand em { color: var(--sp-red); font-style: normal; }
.sp-ft-brand span { color: var(--sp-cyan); }
.sp-ft-desc { font-size: 0.83rem; color: var(--sp-muted); line-height: 1.7; max-width: 280px; }
.sp-ft-head { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--sp-text); margin-bottom: 1rem; }
.sp-ft-link { display: block; font-size: 0.83rem; color: var(--sp-muted); margin-bottom: 0.5rem; text-decoration: none; transition: color 0.2s; }
.sp-ft-link:hover { color: var(--sp-blue); text-decoration: none; }
.sp-ft-bottom { border-top: 1px solid var(--sp-border); margin-top: 2rem; padding-top: 1.25rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8rem; }
.sp-ft-copy { font-size: 0.78rem; color: var(--sp-muted); }
.sp-ft-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.sp-ft-links a { font-size: 0.78rem; color: var(--sp-muted); text-decoration: none; transition: color 0.2s; }
.sp-ft-links a:hover { color: var(--sp-blue); }

/* ══════════════════════════════════════════════════
   STORE / CART PAGES
   ══════════════════════════════════════════════════ */

/* Hide sidebar on ALL pages (store, cart, clientarea) */
.sidebar,
.col-lg-4.col-xl-3 .sidebar,
.cart-sidebar,
[class*="col"] > .sidebar {
  display: none !important;
}

/* Make content full width when sidebar is hidden */
body .container > .row > [class*="col"]:not(.primary-content):has(.sidebar) {
  display: none !important;
}

/* Store product cards — dark background */

/* Dynamic store — override hardcoded white backgrounds and text */
.dynamic-landing-page {
  background: var(--sp-bg) !important;
  color: var(--sp-text) !important;
  /* Override all WHMCS branding CSS variables with our dark theme */
  --bg-color: #080c18 !important;
  --bg-light: #0c1120 !important;
  --bg-dark: #060910 !important;
  --text-color: #e2e8f0 !important;
  --text-secondary: #64748b !important;
}

.pricing-card {
  background: #0f1626 !important;
  border: 1px solid #1a2540 !important;
  color: #e2e8f0 !important;
  box-shadow: none !important;
}
.pricing-card:hover {
  background: #131c30 !important;
  border-color: #3b82f6 !important;
  transform: translateY(-4px) !important;
}
.pricing-card:has(.plan-button:hover) {
  border-color: #22d3ee !important;
}
.plan-name {
  color: #e2e8f0 !important;
}
.price-amount {
  color: #22d3ee !important;
}
.price-period,
.plan-description {
  color: #64748b !important;
}
.feature-item {
  color: #e2e8f0 !important;
}
.pricing-title,
.pricing-subtitle {
  color: #e2e8f0 !important;
}

.background-light {
  background: #0c1120 !important;
}
.background-main {
  background: #080c18 !important;
}
.background-gradient {
  background: linear-gradient(135deg, #0c1120 0%, #080c18 100%) !important;
}
.cta-section {
  background: #0c1120 !important;
}

/* Standard WHMCS product listing — panels and cards */
.panel,
.panel-default,
.panel-primary,
.panel-info {
  background-color: var(--sp-card) !important;
  border-color: var(--sp-border) !important;
  color: var(--sp-text) !important;
}
.panel-heading,
.panel-heading h1,
.panel-heading h2,
.panel-heading h3 {
  background-color: var(--sp-bg2) !important;
  border-color: var(--sp-border) !important;
  color: var(--sp-text) !important;
}
.panel-body {
  background-color: var(--sp-card) !important;
  color: var(--sp-text) !important;
}
.panel-footer {
  background-color: var(--sp-bg2) !important;
  border-color: var(--sp-border) !important;
  color: var(--sp-text) !important;
}
.panel small,
.panel p,
.panel span,
.panel .price,
.panel .pricetag,
.panel .pricerecurring {
  color: var(--sp-muted) !important;
}
.panel h1, .panel h2, .panel h3,
.panel .productname, .panel .packagename {
  color: var(--sp-text) !important;
}

/* Bootstrap card overrides — affects orderform product cards */
.card:not(.sp-exempt) {
  background-color: var(--sp-card) !important;
  border-color: var(--sp-border) !important;
  color: var(--sp-text) !important;
}
.card-header:not(.sp-exempt) {
  background-color: var(--sp-bg2) !important;
  border-color: var(--sp-border) !important;
  color: var(--sp-text) !important;
}
.card-body:not(.sp-exempt) {
  background-color: var(--sp-card) !important;
  color: var(--sp-text) !important;
}
.card-footer:not(.sp-exempt) {
  background-color: var(--sp-bg2) !important;
  border-color: var(--sp-border) !important;
}
.card small { color: var(--sp-muted) !important; }


/* List groups in cards */
.list-group-item {
  background-color: var(--sp-card) !important;
  border-color: var(--sp-border) !important;
  color: var(--sp-text) !important;
}
.list-group-item:hover {
  background-color: #131c30 !important;
}

/* Forms in store */
.form-control {
  background-color: var(--sp-bg2) !important;
  border-color: var(--sp-border) !important;
  color: var(--sp-text) !important;
}
.form-control:focus {
  background-color: var(--sp-card) !important;
  border-color: var(--sp-blue) !important;
  color: var(--sp-text) !important;
}

/* Bootstrap bg utility overrides */
.bg-white {
  background-color: var(--sp-card) !important;
}
.bg-light, .bg-default {
  background-color: var(--sp-bg2) !important;
}
.product-details-tab-container {
  background-color: var(--sp-card) !important;
}

/* ══════════════════════════════════════════════════
   CART / VIEW CART PAGE LAYOUT
   custom.css IS confirmed loading on cart.php
   ══════════════════════════════════════════════════ */

/* Hide BOTH sidebar versions (desktop panel + mobile collapsed dropdowns) */
.cart-sidebar,
.sidebar-collapsed {
    display: none !important;
}

/* Cart body takes full width since sidebar is gone */
#order-standard_cart > .row {
    display: block !important;
}
.cart-body {
    width: 100% !important;
    max-width: 100% !important;
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
}

/* Inner layout: cart items left (64%), order summary right (34%) */
.cart-body > .row {
    overflow: hidden !important;
}
.secondary-cart-body {
    float: left !important;
    width: 64% !important;
    padding-right: 20px !important;
    position: relative !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
}
.secondary-cart-sidebar {
    float: left !important;
    width: 34% !important;
    padding-left: 10px !important;
    position: relative !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
}

/* Cart item rows */
.view-cart-items-header {
    border-bottom: 1px solid var(--sp-border) !important;
    color: var(--sp-muted) !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px !important;
}
.view-cart-items .item {
    border-bottom: 1px solid var(--sp-border) !important;
    padding: 12px 0 !important;
}
.item-title { color: var(--sp-text) !important; }
.item-group { color: var(--sp-muted) !important; font-size: 0.85em !important; }
.item-price { color: var(--sp-cyan) !important; }
.item-price .cycle {
    color: var(--sp-muted) !important;
    display: block !important;
    font-size: 0.85em !important;
}

/* Order Summary */
.order-summary h2 { color: var(--sp-text) !important; }
.summary-container .subtotal,
.summary-container .recurring-totals {
    border-bottom: 1px solid var(--sp-border) !important;
    padding: 8px 0 !important;
    color: var(--sp-text) !important;
}
.total-due-today {
    padding: 16px 0 !important;
}
.total-due-today .amt {
    display: block !important;
    font-size: 2em !important;
    font-weight: 700 !important;
    color: var(--sp-cyan) !important;
}
.btn-checkout {
    width: 100% !important;
    margin-top: 12px !important;
}

/* ══════════════════════════════════════════════════
   CART / VIEW CART PAGE LAYOUT
   ══════════════════════════════════════════════════ */

/* Hide BOTH sidebar versions */
.cart-sidebar,
.sidebar-collapsed {
    display: none !important;
}

/* Cart body takes full width */
#order-standard_cart > .row {
    display: block !important;
}
.cart-body {
    width: 100% !important;
    max-width: 100% !important;
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* ── Two-column layout: cart items 62%, order summary 36% ── */
.cart-body > .row {
    display: block !important;
    overflow: hidden !important;
}
.secondary-cart-body {
    float: left !important;
    width: 62% !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 10 !important;
    overflow: visible !important;
}
.secondary-cart-sidebar {
    float: left !important;
    width: 36% !important;
    padding-left: 16px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 5 !important;
}

/* pointer-events fix for sticky sidebar overlay */
#scrollingPanelContainer {
    pointer-events: none !important;
}
#scrollingPanelContainer * {
    pointer-events: auto !important;
}

/* Fix Bootstrap inner row negative margins inside float container */
.view-cart-items-header .row {
    display: -ms-flexbox !important;
    display: flex !important;
}
.view-cart-items-header .col-7,
.view-cart-items-header [class*="col-xs-7"] {
    -ms-flex: 0 0 58.333333% !important;
    flex: 0 0 58.333333% !important;
    max-width: 58.333333% !important;
}
.view-cart-items-header .col-5,
.view-cart-items-header [class*="col-xs-5"] {
    -ms-flex: 0 0 33.333333% !important;
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    text-align: left !important;
}
.view-cart-items .item .row {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
}
.view-cart-items .item .col-sm-7 {
    -ms-flex: 0 0 58.333333% !important;
    flex: 0 0 58.333333% !important;
    max-width: 58.333333% !important;
}
.view-cart-items .item .col-sm-4 {
    -ms-flex: 0 0 33.333333% !important;
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
}
.view-cart-items .item .col-sm-1 {
    -ms-flex: 0 0 8.333333% !important;
    flex: 0 0 8.333333% !important;
    max-width: 8.333333% !important;
}

/* Remove (X) and Empty Cart */
.btn-remove-from-cart,
#btnEmptyCart {
    position: relative !important;
    z-index: 50 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Cart item styling */
.view-cart-items-header {
    border-bottom: 1px solid var(--sp-border) !important;
    color: var(--sp-muted) !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px !important;
}
.view-cart-items .item {
    border-bottom: 1px solid var(--sp-border) !important;
    padding: 12px 0 !important;
}
.item-title { color: var(--sp-text) !important; }
.item-group { color: var(--sp-muted) !important; font-size: 0.85em !important; }
.item-price { color: var(--sp-cyan) !important; }
.item-price .cycle {
    color: var(--sp-muted) !important;
    display: block !important;
    font-size: 0.85em !important;
}

/* Order Summary */
.order-summary h2 { color: var(--sp-text) !important; }
.summary-container .subtotal,
.summary-container .recurring-totals {
    border-bottom: 1px solid var(--sp-border) !important;
    padding: 8px 0 !important;
    color: var(--sp-text) !important;
}
.total-due-today { padding: 16px 0 !important; }
.total-due-today .amt {
    display: block !important;
    font-size: 2em !important;
    font-weight: 700 !important;
    color: var(--sp-cyan) !important;
}
.btn-checkout {
    width: 100% !important;
    margin-top: 12px !important;
}
/* intl-tel-input: prevent theme CSS overriding plugin's inline padding */
#inputPhone {
    padding-left: 100px !important;
}