:root {
  --phantix-bg: #0d0d14;
  --phantix-surface: #13131f;
  --phantix-border: #1e1e2e;
  --phantix-teal: #1d9e75;
  --phantix-teal-light: #5dcaa5;
  --phantix-text: #ffffff;
  --phantix-muted: #a0a0b0;
  --phantix-dim: #606070;
}

body {
  background: var(--phantix-bg) !important;
  color: var(--phantix-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.container { max-width: 1100px; }

/* Navbar */
.navbar {
  background: var(--phantix-surface) !important;
  border-bottom: 1px solid var(--phantix-border) !important;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}
.navbar-brand { color: var(--phantix-text) !important; font-weight: 700 !important; }
.nav-link { color: var(--phantix-muted) !important; }
.nav-link:hover, .nav-link.active { color: var(--phantix-teal-light) !important; }
.navbar-toggler { border-color: var(--phantix-border) !important; }

/* Buttons */
.btn-primary, .btn-outline-primary {
  background: var(--phantix-teal) !important;
  border-color: var(--phantix-teal) !important;
  color: #fff !important;
  border-radius: 8px !important;
}
.btn-primary:hover, .btn-outline-primary:hover {
  background: var(--phantix-teal-light) !important;
  border-color: var(--phantix-teal-light) !important;
}
.btn-outline-primary {
  background: transparent !important;
  color: var(--phantix-teal-light) !important;
}
.btn-outline-primary:hover { color: #fff !important; }

/* Cards */
.card {
  background: var(--phantix-surface) !important;
  border: 1px solid var(--phantix-border) !important;
  border-radius: 12px !important;
  color: var(--phantix-text) !important;
}
.card-header {
  background: rgba(29,158,117,0.1) !important;
  border-bottom: 1px solid var(--phantix-border) !important;
  color: var(--phantix-teal-light) !important;
  font-weight: 600 !important;
}

/* Forms */
.form-control, .form-select {
  background: var(--phantix-bg) !important;
  border: 1px solid var(--phantix-border) !important;
  color: var(--phantix-text) !important;
  border-radius: 8px !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--phantix-teal) !important;
  box-shadow: 0 0 0 3px rgba(29,158,117,0.2) !important;
}
.form-label { color: var(--phantix-muted) !important; }

/* Tables */
.table {
  color: var(--phantix-text) !important;
}
.table thead th {
  background: var(--phantix-surface) !important;
  border-bottom: 1px solid var(--phantix-border) !important;
  color: var(--phantix-teal-light) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.table td { border-color: var(--phantix-border) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: rgba(255,255,255,0.02) !important;
}
.table-hover > tbody > tr:hover > * {
  background: rgba(29,158,117,0.05) !important;
}

/* Sidebar */
.list-group-item {
  background: var(--phantix-surface) !important;
  border: 1px solid var(--phantix-border) !important;
  color: var(--phantix-muted) !important;
  border-radius: 8px !important;
  margin-bottom: 4px !important;
}
.list-group-item:hover, .list-group-item.active {
  background: rgba(29,158,117,0.12) !important;
  color: var(--phantix-teal-light) !important;
  border-color: rgba(29,158,117,0.3) !important;
}
.list-group-item.active { font-weight: 600 !important; }

/* Badges */
.badge.bg-success { background: var(--phantix-teal) !important; }
.badge.bg-primary { background: var(--phantix-teal) !important; }

/* Alerts */
.alert-success {
  background: rgba(29,158,117,0.12) !important;
  border-color: rgba(29,158,117,0.3) !important;
  color: var(--phantix-teal-light) !important;
}
.alert-info {
  background: rgba(29,158,117,0.08) !important;
  border-color: rgba(29,158,117,0.2) !important;
  color: var(--phantix-muted) !important;
}
.alert-danger {
  background: rgba(220,50,50,0.12) !important;
  border-color: rgba(220,50,50,0.3) !important;
  color: #f87171 !important;
}

/* Footer */
footer { color: var(--phantix-dim) !important; border-top: 1px solid var(--phantix-border) !important; margin-top: 2rem !important; padding-top: 1.5rem !important; }
footer a { color: var(--phantix-teal-light) !important; }

/* Breadcrumb */
.breadcrumb-item a { color: var(--phantix-teal-light) !important; }
.breadcrumb-item.active { color: var(--phantix-muted) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--phantix-dim) !important; }

/* Dropdowns */
.dropdown-menu {
  background: var(--phantix-surface) !important;
  border: 1px solid var(--phantix-border) !important;
  border-radius: 8px !important;
}
.dropdown-item { color: var(--phantix-muted) !important; }
.dropdown-item:hover {
  background: rgba(29,158,117,0.1) !important;
  color: var(--phantix-teal-light) !important;
}

/* Pagination */
.page-link {
  background: var(--phantix-surface) !important;
  border-color: var(--phantix-border) !important;
  color: var(--phantix-muted) !important;
}
.page-link:hover { color: var(--phantix-teal-light) !important; }
.page-item.active .page-link {
  background: var(--phantix-teal) !important;
  border-color: var(--phantix-teal) !important;
  color: #fff !important;
}

/* Text helpers */
.text-muted { color: var(--phantix-muted) !important; }
.text-primary { color: var(--phantix-teal-light) !important; }
a { color: var(--phantix-teal-light) !important; }
a:hover { color: var(--phantix-teal) !important; }

/* Showcase/hero section */
.showcase {
  background: var(--phantix-surface) !important;
  border: 1px solid var(--phantix-border) !important;
  border-radius: 12px !important;
  padding: 2rem !important;
  margin-bottom: 1.5rem !important;
}

/* Pricing cards */
.pricing-card {
  background: var(--phantix-surface) !important;
  border: 1px solid var(--phantix-border) !important;
  border-radius: 12px !important;
  transition: border-color 0.2s !important;
}
.pricing-card:hover { border-color: var(--phantix-teal) !important; }

/* Input groups */
.input-group-text {
  background: var(--phantix-surface) !important;
  border-color: var(--phantix-border) !important;
  color: var(--phantix-muted) !important;
}

/* ─── CUSTOM NAV OVERRIDE ─────────────────────────────────────── */
.navbar {
  background: rgba(13,13,20,0.92) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--phantix-border) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 1rem !important;
  height: 64px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
}
.navbar-brand { color: #fff !important; font-weight: 700 !important; font-size: 1.1rem !important; }
.nav-link { color: var(--phantix-muted) !important; font-size: 0.9rem !important; }
.nav-link:hover, .nav-link.active { color: var(--phantix-teal-light) !important; }
.navbar-nav { gap: 0.5rem !important; }
.btn-outline-primary {
  background: var(--phantix-teal) !important;
  border-color: var(--phantix-teal) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  padding: 6px 16px !important;
}
.btn-outline-primary:hover { background: var(--phantix-teal-light) !important; }

/* Push content below fixed nav */
.container > header + .container { margin-top: 64px !important; }
body { padding-top: 64px !important; }

/* Hide Bootstrap's hamburger toggler — use clean style */
.navbar-toggler { border: 1px solid var(--phantix-border) !important; }
.navbar-toggler-icon { filter: invert(1) !important; }

/* ─── NAV FIX ─── */
nav.navbar.navbar-expand-md {
  background: rgba(13,13,20,0.97) !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #1e1e2e !important;
  margin-bottom: 0 !important;
}
.navbar .container-fluid { padding: 0 1rem !important; }
.navbar-brand img { height: 36px !important; }
.nav-link, .navbar-nav .nav-link { color: #a0a0b0 !important; }
.nav-link:hover, .nav-link.active { color: #5dcaa5 !important; }
.btn-outline-primary, .ms-2.btn.btn-outline-primary {
  background: #1d9e75 !important;
  border-color: #1d9e75 !important;
  color: #fff !important;
  border-radius: 8px !important;
}
.btn-outline-primary:hover { background: #5dcaa5 !important; border-color: #5dcaa5 !important; }

/* Hide language selector */
.js-locale-selector, .ts-wrapper.form-select { display: none !important; }

/* Match nav link colors to main site */
.navbar .nav-link { color: #a0a0b0 !important; font-size: 0.9rem !important; }
.navbar .nav-link:hover { color: #5dcaa5 !important; }
.navbar .nav-link.active { color: #5dcaa5 !important; }
.navbar-brand span { color: #ffffff !important; }

.navbar-brand { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 1.1rem !important; font-weight: 700 !important; color: #fff !important; }
.navbar-brand img { width: 36px !important; height: 36px !important; margin: 0 !important; }

.navbar-brand { gap: 10px !important; }


.navbar .btn, .navbar .btn-outline-primary, .navbar .ms-2.btn { padding: 8px 18px !important; font-size: 0.9rem !important; line-height: 1.5 !important; }



.navbar-brand { display: flex !important; align-items: center !important; padding: 0 !important; gap: 10px !important; height: 64px !important; }

.navbar-brand { min-height: 64px !important; gap: 10px !important; }
.navbar-brand img { height: 36px !important; width: 36px !important; }

/* Hide FOSSBilling Top button */
a[href="#top"] { display: none !important; }

/* ─── ORDER PAGE ─── */
/* Hide breadcrumb */
.breadcrumb { display: none !important; }

/* Full width content, no sidebar */
.col-3.d-none.d-md-block { display: none !important; }
.col-12.col-md-9 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }

/* Style order steps */
#orderManager .accordion-item { background: var(--phantix-surface) !important; border: 1px solid var(--phantix-border) !important; border-radius: 10px !important; margin-bottom: 0.5rem !important; }
#orderManager .accordion-button { background: var(--phantix-surface) !important; color: var(--phantix-text) !important; border-radius: 10px !important; }
#orderManager .accordion-button:not(.collapsed) { color: var(--phantix-teal-light) !important; box-shadow: none !important; }
#orderManager .accordion-button::after { filter: invert(1) !important; }

/* Max width for order content */
.content-block { max-width: 800px !important; margin: 0 auto !important; }

/* ═══════════════════════════════════════════════════════════
   PHANTIX ORDER FLOW — Dark Teal Theme
   ═══════════════════════════════════════════════════════════ */

:root {
  --phtx-bg:        #0d0d14;
  --phtx-surface:   #13131f;
  --phtx-surface2:  #1a1a2e;
  --phtx-border:    rgba(29, 158, 117, 0.18);
  --phtx-border-hover: rgba(29, 158, 117, 0.45);
  --phtx-teal:      #1d9e75;
  --phtx-teal-light:#5dcaa5;
  --phtx-teal-glow: rgba(29, 158, 117, 0.12);
  --phtx-text:      #e2e8f0;
  --phtx-muted:     #8892a4;
  --phtx-danger:    #e05c5c;
  --phtx-radius:    10px;
  --phtx-radius-sm: 6px;
}

#orderManager { display: flex; flex-direction: column; gap: 10px; }

.phtx-step { background: var(--phtx-surface) !important; border: 1px solid var(--phtx-border) !important; border-radius: var(--phtx-radius) !important; overflow: hidden; transition: border-color 0.2s; }
.phtx-step:hover { border-color: var(--phtx-border-hover) !important; }

.phtx-step-btn { background: var(--phtx-surface) !important; color: var(--phtx-text) !important; border: none !important; box-shadow: none !important; padding: 14px 18px !important; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.95rem; }
.phtx-step-btn:not(.collapsed) { background: var(--phtx-surface2) !important; color: var(--phtx-teal-light) !important; border-bottom: 1px solid var(--phtx-border) !important; }
.phtx-step-btn::after { filter: invert(1) sepia(1) saturate(3) hue-rotate(120deg); margin-left: auto; }

.phtx-step-icon { color: var(--phtx-teal); display: flex; align-items: center; flex-shrink: 0; }
.phtx-step-label { flex: 1; }
.phtx-badge { background: var(--phtx-teal-glow); color: var(--phtx-teal-light); border: 1px solid var(--phtx-border); border-radius: 20px; padding: 2px 10px; font-size: 0.75rem; font-weight: 600; margin-left: 4px; }

.phtx-step-body { background: var(--phtx-surface) !important; padding: 20px !important; }

.phtx-category-title { color: var(--phtx-teal-light); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.phtx-category-desc { color: var(--phtx-muted); font-size: 0.88rem; margin-bottom: 12px; }

.phtx-product-grid { display: flex; flex-direction: column; gap: 6px; }
.phtx-product-card { display: flex; align-items: center; justify-content: space-between; background: var(--phtx-surface2); border: 1px solid var(--phtx-border); border-radius: var(--phtx-radius-sm); padding: 12px 16px; color: var(--phtx-text) !important; text-decoration: none !important; font-weight: 500; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.phtx-product-card:hover { border-color: var(--phtx-teal); background: var(--phtx-teal-glow); color: var(--phtx-teal-light) !important; }
.phtx-product-arrow { color: var(--phtx-teal); transition: transform 0.2s; }
.phtx-product-card:hover .phtx-product-arrow { transform: translateX(4px); }

.phtx-btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 20px; border-radius: var(--phtx-radius-sm); font-weight: 600; font-size: 0.9rem; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s; }
.phtx-btn-primary { background: var(--phtx-teal); color: #fff !important; border-color: var(--phtx-teal); }
.phtx-btn-primary:hover { background: var(--phtx-teal-light); border-color: var(--phtx-teal-light); box-shadow: 0 0 18px rgba(29,158,117,0.35); }
.phtx-btn-secondary { background: transparent; color: var(--phtx-teal-light) !important; border-color: var(--phtx-border-hover); }
.phtx-btn-secondary:hover { background: var(--phtx-teal-glow); border-color: var(--phtx-teal); }
.phtx-btn-danger { background: transparent; color: var(--phtx-danger) !important; border-color: rgba(224,92,92,0.35); }
.phtx-btn-danger:hover { background: rgba(224,92,92,0.1); }
.phtx-checkout-btn { width: 100%; padding: 12px 20px; font-size: 1rem; margin-top: 4px; }

.phtx-remove-btn { background: transparent; border: 1px solid rgba(224,92,92,0.25); color: var(--phtx-danger); border-radius: 4px; padding: 4px 6px; cursor: pointer; display: inline-flex; align-items: center; transition: background 0.2s, border-color 0.2s; }
.phtx-remove-btn:hover { background: rgba(224,92,92,0.12); border-color: var(--phtx-danger); }

.phtx-cart-table-wrap { border: 1px solid var(--phtx-border); border-radius: var(--phtx-radius-sm); overflow: hidden; margin-bottom: 24px; }
.phtx-cart-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.phtx-cart-table thead tr { background: var(--phtx-surface2); border-bottom: 1px solid var(--phtx-border); }
.phtx-cart-table th { color: var(--phtx-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 14px; }
.phtx-cart-table td { padding: 12px 14px; color: var(--phtx-text); border-bottom: 1px solid var(--phtx-border); vertical-align: middle; }
.phtx-cart-table tbody tr:last-child td { border-bottom: none; }
.phtx-cart-table tbody tr:hover { background: var(--phtx-teal-glow); }
.phtx-item-title { font-weight: 500; }
.phtx-item-meta { display: inline-block; margin-left: 6px; color: var(--phtx-muted); font-size: 0.82rem; }
.phtx-price { color: var(--phtx-teal-light); font-weight: 600; }
.phtx-price-old { color: var(--phtx-muted); margin-right: 6px; }
.phtx-price-sale { color: var(--phtx-teal-light); font-weight: 700; }

.phtx-checkout-bottom { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
@media (max-width: 768px) { .phtx-checkout-bottom { grid-template-columns: 1fr; } }

.phtx-link { color: var(--phtx-teal-light); font-size: 0.88rem; text-decoration: none; }
.phtx-link:hover { text-decoration: underline; }
.phtx-promo-form { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; }

.phtx-totals-block { background: var(--phtx-surface2); border: 1px solid var(--phtx-border); border-radius: var(--phtx-radius); padding: 16px; }
.phtx-total-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 0.9rem; color: var(--phtx-muted); border-bottom: 1px solid var(--phtx-border); }
.phtx-total-row:last-of-type { border-bottom: none; }
.phtx-discount { color: var(--phtx-teal-light); }
.phtx-grand-total { color: var(--phtx-text) !important; font-weight: 700; font-size: 1rem; padding-top: 10px; margin-bottom: 14px; border-top: 1px solid var(--phtx-border); border-bottom: none !important; }

.phtx-payment-label { color: var(--phtx-muted); font-size: 0.82rem; margin-bottom: 10px; }
.phtx-gateway-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.phtx-gateway-option { position: relative; }
.phtx-gateway-radio { position: absolute; opacity: 0; }
.phtx-gateway-label { display: flex; align-items: center; justify-content: center; background: var(--phtx-surface); border: 1px solid var(--phtx-border); border-radius: var(--phtx-radius-sm); padding: 8px 14px; cursor: pointer; transition: border-color 0.2s, background 0.2s; min-width: 80px; min-height: 40px; }
.phtx-gateway-text { color: var(--phtx-text); font-weight: 500; font-size: 0.88rem; }
.phtx-gateway-radio:checked + .phtx-gateway-label { border-color: var(--phtx-teal); background: var(--phtx-teal-glow); box-shadow: 0 0 0 1px var(--phtx-teal); }
.phtx-payment-form fieldset { border: none; padding: 0; margin: 0; }

.phtx-tos-check { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; font-size: 0.82rem; color: var(--phtx-muted); }
.phtx-tos-check input[type="checkbox"] { accent-color: var(--phtx-teal); margin-top: 2px; flex-shrink: 0; }
.phtx-tos-check a, .phtx-tos-implicit a { color: var(--phtx-teal-light); }
.phtx-tos-implicit { margin-top: 10px; font-size: 0.78rem; color: var(--phtx-muted); text-align: center; }
.phtx-balance-note { font-size: 0.85rem; color: var(--phtx-teal-light); margin-bottom: 12px; }
.phtx-login-msg { color: var(--phtx-muted); font-size: 0.85rem; margin-top: 10px; text-align: center; }

.phtx-auth-tabs { display: flex; border-bottom: 1px solid var(--phtx-border); margin-bottom: 20px; }
.phtx-auth-tab { background: none; border: none; padding: 10px 18px; color: var(--phtx-muted); font-size: 0.9rem; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.2s, border-color 0.2s; }
.phtx-auth-tab.active { color: var(--phtx-teal-light); border-bottom-color: var(--phtx-teal); }
.phtx-auth-content { max-width: 480px; }

.phtx-field-group { margin-bottom: 14px; }
.phtx-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .phtx-field-row { grid-template-columns: 1fr; } }
.phtx-label { display: block; color: var(--phtx-muted); font-size: 0.82rem; font-weight: 600; margin-bottom: 5px; letter-spacing: 0.02em; }
.phtx-input { width: 100%; background: var(--phtx-surface2); border: 1px solid var(--phtx-border); border-radius: var(--phtx-radius-sm); color: var(--phtx-text); padding: 9px 12px; font-size: 0.9rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }
.phtx-input:focus { border-color: var(--phtx-teal); box-shadow: 0 0 0 3px rgba(29,158,117,0.15); }
.phtx-input::placeholder { color: #4a5568; }
.phtx-select { width: 100%; background: var(--phtx-surface2); border: 1px solid var(--phtx-border); border-radius: var(--phtx-radius-sm); color: var(--phtx-text); padding: 9px 12px; font-size: 0.9rem; outline: none; transition: border-color 0.2s; appearance: none; cursor: pointer; }
.phtx-select:focus { border-color: var(--phtx-teal); box-shadow: 0 0 0 3px rgba(29,158,117,0.15); }
.phtx-qty-input { max-width: 100px; text-align: center; }
.phtx-phone-row { display: flex; align-items: center; gap: 6px; }
.phtx-phone-prefix { color: var(--phtx-muted); font-weight: 700; padding: 0 4px; }
.phtx-phone-cc { max-width: 70px; }
.phtx-form-actions { margin-top: 18px; }

.phtx-product-detail-block { background: var(--phtx-surface2); border: 1px solid var(--phtx-border); border-radius: var(--phtx-radius); padding: 20px; margin-bottom: 16px; }
.phtx-product-detail-title { color: var(--phtx-teal-light); font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.phtx-product-detail-desc { color: var(--phtx-muted); font-size: 0.9rem; margin-bottom: 0; }
.phtx-divider { border: none; border-top: 1px solid var(--phtx-border); margin: 16px 0; }
.phtx-section-label { color: var(--phtx-muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.phtx-billing-row { display: flex; align-items: center; gap: 16px; }
.phtx-billing-key { color: var(--phtx-muted); font-size: 0.88rem; min-width: 120px; }
.phtx-price-badge { display: inline-block; background: var(--phtx-teal-glow); color: var(--phtx-teal-light); border: 1px solid var(--phtx-border); border-radius: 20px; padding: 3px 12px; font-weight: 700; font-size: 0.9rem; }
.phtx-price-free { background: rgba(93,202,165,0.1); color: var(--phtx-teal-light); }

.phtx-form-values-row td { background: var(--phtx-surface2); }
.phtx-form-values { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 0.82rem; }
.phtx-form-values dt { color: var(--phtx-muted); font-weight: 600; }
.phtx-form-values dd { color: var(--phtx-text); margin: 0; }

.loading { background: rgba(13,13,20,0.85) !important; backdrop-filter: blur(4px); }