/* WHMCS Custom Glassmorphic Redesign Stylesheet - Unified Header & Lagom Overhaul */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --c-bg: #060913;
  --c-glass: rgba(255, 255, 255, 0.025);
  --c-glass-heavy: rgba(8, 11, 20, 0.94);
  --c-border: rgba(255, 255, 255, 0.06);
  --c-border-h: rgba(255, 255, 255, 0.12);
  --c-orange: #f97316;
  --c-orange-d: #ea6008;
  --c-blue: #3b82f6;
  --c-blue-d: #2563eb;
  --c-text: #f0f2f8;
  --c-muted: rgba(180, 190, 220, 0.65);
}

/* 100% Global Font Overrides to Be Vietnam Pro */
body, p, span, div, label, li, td, th, h1, h2, h3, h4, h5, h6, input, button, select, textarea, a, strong, b, small {
  font-family: 'Be Vietnam Pro', sans-serif !important;
}

/* Global resets and body styling */
body {
  background-color: var(--c-bg) !important;
  color: var(--c-text) !important;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px) !important;
  background-size: 58px 58px !important;
  position: relative;
}

/* Background glowing orbs - Orange top-left & Blue bottom-right */
body::before {
  content: "" !important;
  position: fixed !important;
  width: 750px !important;
  height: 750px !important;
  background: #f97316 !important;
  border-radius: 50% !important;
  filter: blur(140px) !important;
  opacity: 0.12 !important;
  top: -280px !important;
  left: -220px !important;
  z-index: -2 !important;
  pointer-events: none;
  display: block !important;
}

body::after {
  content: "" !important;
  position: fixed !important;
  width: 650px !important;
  height: 650px !important;
  background: #1d4ed8 !important;
  border-radius: 50% !important;
  filter: blur(140px) !important;
  opacity: 0.12 !important;
  bottom: -200px !important;
  right: -200px !important;
  z-index: -2 !important;
  pointer-events: none;
  display: block !important;
}

/* Force dark/transparent backgrounds on layout wrappers and containers */
#main-body, .main-content, #content, .content-column,
.body-container, .app-main, .wrapper, #wrap, .main-wrapper,
.header-lined, .page-header, .login-container-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

/* Force remove light/white backgrounds from all blocks */
.bg-light, .bg-white, .bg-secondary-theme,
[class*="bg-white"], [class*="bg-light"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* Global text color overrides for extreme readability on dark background */
body, p, span, div, label, li, td, th, h1, h2, h3, h4, h5, h6,
.card-title, .title, .header-lined h1, .text-dark, .text-muted,
.list-group-item, .dropdown-item, .modal-title, .popover-header,
.alert, .form-group label, .help-block, .field-help-text,
.breadcrumb-item, .nav-link, .nav-item, .col-form-label,
.form-check-label, .small, small, .dropdown-menu *, .dropdown-item * {
  color: var(--c-text) !important;
}

/* Active headers and bold highlights */
h1, h2, h3, h4, h5, h6, strong, b, .card-title, .title {
  color: #ffffff !important;
}

/* Dynamic gradient titles for page headers - Erasing default WHMCS feel */
.header-lined h1, h1.primary-content-title, .page-header h1 {
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  background: linear-gradient(135deg, #ffffff 0%, var(--c-muted) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-transform: none !important;
}

/* General Links color */
a, .btn-link {
  color: var(--c-blue) !important;
  text-decoration: none !important;
  transition: color 0.22s ease !important;
}
a:hover, .btn-link:hover {
  color: var(--c-orange) !important;
  text-decoration: none !important;
}

/* Breadcrumbs */
.breadcrumb {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 10px !important;
}
.breadcrumb-item.active {
  color: #fff !important;
}

/* NAVBAR REDESIGN - SINGLE PRESTIGE GLASS BAR */
header, .header, .topbar, .navbar, .main-navbar-wrapper, .master-breadcrumb, 
.navbar-light, .navbar-nav, #mainNavbar, #nav {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  border-bottom: none !important;
}

/* Style the top header bar as a single, unified, full-width glassmorphic header block */
header.header {
  background-color: rgba(8, 11, 20, 0.85) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border-bottom: 1px solid var(--c-border) !important;
  padding: 0 !important;
  min-height: auto !important;
  display: block !important;
  position: relative !important;
  z-index: 1030 !important;
}

/* Reset the containers inside the header to be transparent and touch each other */
.navbar-light .container, .main-navbar-wrapper .container {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Keep slight spacing inside header sections */
.navbar-light {
  padding-top: 15px !important;
  padding-bottom: 10px !important;
}
.main-navbar-wrapper {
  padding-top: 5px !important;
  padding-bottom: 15px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important; /* Subtle dividing line between topbar and menu inside the unified block */
}

/* Navbar text/link color - Force pure white instead of blue */
.navbar-nav .nav-link, .navbar-brand, .navbar-nav a, .navbar-nav .nav-link *,
header.header a, header.header span, header.header button, header.header i,
.topbar *, .btn-active-client *, .btn-active-client span {
  color: #ffffff !important;
}

.navbar-nav .nav-link {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  transition: all 0.25s ease !important;
}

.navbar-nav .nav-link:hover, .navbar-nav a:hover, header.header a:hover, header.header button:hover {
  color: var(--c-orange) !important;
  background: rgba(249, 115, 22, 0.08) !important;
}

/* Glassmorphic Dropdown Menus */
.navbar-nav .dropdown-menu, .main-navbar-wrapper .dropdown-menu {
  background: rgba(10, 14, 26, 0.96) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.1) !important;
  padding: 8px !important;
  margin-top: 8px !important;
}

.navbar-nav .dropdown-item, .main-navbar-wrapper .dropdown-item {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  padding: 10px 16px !important;
}

.navbar-nav .dropdown-item:hover, .main-navbar-wrapper .dropdown-item:hover {
  background: rgba(249, 115, 22, 0.12) !important;
  color: var(--c-orange) !important;
  transform: translateX(4px) !important;
}

/* Modern Header Login & Register Buttons */
.nav-btn-login {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 7px 18px !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
}
.nav-btn-login:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.nav-btn-register {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 7px 20px !important;
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.35) !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
}
.nav-btn-register:hover {
  background: linear-gradient(135deg, #fb923c 0%, #f97316 100%) !important;
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* Prevent content below from overlapping with the header navbar */
.master-breadcrumb, .breadcrumb {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
#main-body {
  padding-top: 30px !important;
}

/* Cards, Panels, Wells & Container blocks - Redesigned to Glassmorphism */
.card, .panel, .well, .thumbnail, .login-container, .popover, .dropdown-menu,
.list-group-item, .modal-content, .order-summary, .product-info, 
.promo-header, .cart-item, .product-status, .table-responsive, .table,
.client-home-panels, .panel-body, .card-body, .list-group,
.tile, .widget, .dashboard-panel {
  background-color: var(--c-glass) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
}

/* Prevent inner bodies from having double backgrounds or white boxes */
.panel-body, .card-body, .list-group {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

/* Sleek Lagom-style card border */
.card, .panel {
  border-top: none !important;
  border: 1px solid var(--c-border) !important;
}

/* LAGOM STYLE SIDEBAR NAVIGATION OVERHAUL */
.sidebar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.sidebar .list-group {
  background: rgba(255, 255, 255, 0.015) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  padding: 8px !important;
}

/* Sidebar header tag (Lagom dashboard labels) */
.sidebar .card-header, .sidebar .panel-heading {
  background: transparent !important;
  border: none !important;
  padding: 12px 16px 6px 16px !important;
}
.sidebar .card-header .card-title, .sidebar .panel-heading .panel-title {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: var(--c-muted) !important;
}

/* Sidebar navigation links */
.sidebar .list-group-item, .list-group-item-action {
  background-color: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--c-muted) !important;
  padding: 12px 16px !important;
  margin-bottom: 4px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.22s ease !important;
}

.sidebar .list-group-item:hover, .list-group-item-action:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
  padding-left: 20px !important;
}

/* Active navigation link in Sidebar */
.sidebar .list-group-item.active, .list-group-item-action.active {
  background-color: rgba(249, 115, 22, 0.1) !important;
  color: var(--c-orange) !important;
  font-weight: 600 !important;
  padding-left: 20px !important;
  border-left: none !important;
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.2) inset !important;
}

/* Dashboard home panels (Services, Invoices, Tickets icons) */
.client-home-panels .card, .client-home-panels .panel {
  border-radius: 16px !important;
  transition: transform 0.25s ease !important;
}
.client-home-panels .card:hover, .client-home-panels .panel:hover {
  transform: translateY(-4px) !important;
}

/* Style home page action icon cards (How can we help / Your account) */
[class*="card-accent-"], .action-icon-btns a {
  background-color: var(--c-glass) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
  color: var(--c-text) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 15px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  height: auto !important;
  min-height: 150px !important;
  text-align: center !important;
  border-top: none !important;
  border: 1px solid var(--c-border) !important;
}

[class*="card-accent-"]:hover, .action-icon-btns a:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--c-orange) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Fix text overlapping inside home action buttons */
.ico-container, .action-icon-btns a figure {
  background-color: transparent !important;
  border: none !important;
  margin: 0 0 15px 0 !important;
  padding: 0 !important;
  height: auto !important;
  width: auto !important;
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ico-container i, .action-icon-btns a figure i {
  font-size: 2.2rem !important;
  color: var(--c-orange) !important;
  position: static !important;
}

/* Card headers and sub-elements */
.card-header, .panel-heading, .popover-header, .modal-header {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid var(--c-border) !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
}
.card-footer, .panel-footer, .modal-footer {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-top: 1px solid var(--c-border) !important;
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}

/* Dropdown Menu overrides */
.dropdown-menu {
  background-color: var(--c-glass-heavy) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

/* Input Fields - Dark theme inputs */
.form-control, select, textarea, .input-group-text, .custom-select, .form-control:disabled, .form-control[readonly] {
  background-color: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--c-border) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
}
.form-control:focus, select:focus, textarea:focus, .custom-select:focus {
  border-color: var(--c-orange) !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2) !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}
.input-group-text {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* All buttons styling override - Eliminate white buttons */
.btn, button, .btn-default, .btn-secondary, .btn-light, .btn-active-client,
.btn-sm, .btn-xs, .btn-group .btn, .btn-group-sm > .btn {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text) !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Primary/accent buttons should be orange gradients with glossy glare effect */
.btn-primary, .btn-info, .btn-success, .btn-signup, .btn-checkout {
  background: linear-gradient(135deg, var(--c-orange) 0%, var(--c-orange-d) 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.25) !important;
}

/* Hover glow & lift effect */
.btn-primary:hover, .btn-info:hover, .btn-success:hover, .btn-signup:hover, .btn-checkout:hover {
  background: linear-gradient(135deg, var(--c-orange-d) 0%, var(--c-orange) 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px rgba(249, 115, 22, 0.45) !important;
  color: #ffffff !important;
}

.btn:hover, button:hover, .btn-default:hover, .btn-secondary:hover, .btn-light:hover, .btn-active-client:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: var(--c-border-h) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Tables styling */
.table {
  border-collapse: separate !important;
  overflow: hidden !important;
}
.table th {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
.table td {
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  color: var(--c-text) !important;
  background-color: transparent !important;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.01) !important;
}

/* LAGOM STYLE PILL STATUS BADGES REDESIGN */
.badge, .label {
  border-radius: 99px !important;
  padding: 6px 14px !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.3px !important;
  text-transform: capitalize !important;
}

/* Status colors */
.badge-success, .label-success, .status-active, .status-paid {
  background-color: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}
.badge-danger, .label-danger, .status-terminated, .status-unpaid {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}
.badge-warning, .label-warning, .status-pending {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}
.badge-info, .label-info, .status-suspended {
  background-color: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* Alerts */
.alert-info, .alert-warning, .alert-danger, .alert-success {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(10px) !important;
  color: #ffffff !important;
  border: 1px solid var(--c-border) !important;
}
.alert-info { border-left: 4px solid var(--c-blue) !important; }
.alert-warning { border-left: 4px solid #f59e0b !important; }
.alert-danger { border-left: 4px solid #ef4444 !important; }
.alert-success { border-left: 4px solid #22c55e !important; }

/* Footer redesign */
.footerbar {
  background-color: rgba(8, 11, 20, 0.95) !important;
  border-top: 1px solid var(--c-border) !important;
  padding: 24px 0 !important;
  color: var(--c-muted) !important;
}
.footerbar a {
  color: var(--c-muted) !important;
}
.footerbar a:hover {
  color: #ffffff !important;
}

/* Shopping Cart / Store pages overrides */
.cart-body, .store-layout {
  background-color: transparent !important;
}
.sub-heading {
  background-color: transparent !important;
  border: none !important;
}
.sub-heading span {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Modal dialogs */
.modal-content {
  background-color: rgba(8, 11, 20, 0.98) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(30px) !important;
  color: #ffffff !important;
}
.modal-header {
  border-bottom: 1px solid var(--c-border) !important;
}
.modal-footer {
  border-top: 1px solid var(--c-border) !important;
}

/* Ultimate sweep of inline white elements in WHMCS / Modules / Gateways */
*[style*="background: #fff"], *[style*="background-color: #fff"],
*[style*="background: rgb(255, 255, 255)"], *[style*="background-color: rgb(255, 255, 255)"],
*[style*="background:#fff"], *[style*="background-color:#fff"],
*[style*="background: white"], *[style*="background-color: white"] {
  background: var(--c-glass) !important;
  background-color: var(--c-glass) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--c-border) !important;
}

/* Force light text on any inline dark text overrides */
*[style*="color: #000"], *[style*="color: #333"], *[style*="color: #666"],
*[style*="color: black"], *[style*="color:#000"], *[style*="color:#333"] {
  color: var(--c-text) !important;
}

/* Cart badge redesign - Glowing dot style (Lagom) instead of number */
#cartItemCount.has-items {
  font-size: 0 !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background-color: var(--c-orange) !important;
  border: none !important;
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  box-shadow: 0 0 8px var(--c-orange) !important;
  display: inline-block !important;
}
#cartItemCount:not(.has-items) {
  display: none !important;
}

/* Collapsible home menu toggle chevron rotation (Lagom Style) */
.card-header[aria-expanded="true"] .menu-toggle-arrow {
  transform: rotate(180deg);
}
.menu-toggle-arrow {
  transition: transform 0.3s ease;
  color: var(--c-muted) !important;
  font-size: 0.95rem !important;
}
.home-unified-menu .card-header {
  transition: background-color 0.25s ease;
}
.home-unified-menu .card-header:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Custom Hosting Plans & FAQ style for homepage */
.plan-card-nested {
  background: rgba(255, 255, 255, 0.015) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 16px !important;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: visible;
}
.plan-card-nested:hover {
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-5px) !important;
}
.plan-popular-nested {
  border: 1px solid rgba(249, 115, 22, 0.3) !important;
  box-shadow: 0 8px 30px rgba(249, 115, 22, 0.1) !important;
}
.popular-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--c-orange) 0%, var(--c-orange-d) 100%);
  color: #fff !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 4px 14px !important;
  border-radius: 99px !important;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.4) !important;
  letter-spacing: 0.5px;
}
.plan-icon-wrap {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.bg-black-20 {
  background: rgba(0, 0, 0, 0.2) !important;
}
.plan-features-list li {
  font-size: 0.9rem;
}

/* FAQ Style */
.faq-item-wrapper {
  background: rgba(255, 255, 255, 0.015) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.faq-q-btn {
  padding: 18px 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: #ffffff !important;
  transition: background-color 0.25s ease !important;
}
.faq-q-btn:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}
.faq-icon-plus {
  transition: transform 0.3s ease !important;
  color: var(--c-muted) !important;
}
.faq-q-btn:not(.collapsed) {
  background: rgba(255, 255, 255, 0.02) !important;
}
.faq-q-btn:not(.collapsed) .faq-icon-plus {
  transform: rotate(45deg);
  color: var(--c-orange) !important;
}
.faq-a-body {
  border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   CUSTOM FOOTER — Dark Glassmorphism (Lagom Style)
   ═══════════════════════════════════════════════════════════ */
.custom-footer {
  background: linear-gradient(180deg, rgba(6, 9, 19, 0) 0%, rgba(6, 9, 19, 0.95) 15%, #060913 100%) !important;
  border-top: 1px solid var(--c-border) !important;
  padding: 60px 0 0 !important;
  margin-top: 40px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.9rem !important;
}

/* Footer Top Grid */
.custom-footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--c-border);
}
@media (max-width: 991px) {
  .custom-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}
@media (max-width: 575px) {
  .custom-footer-top {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Brand */
.custom-footer-brand p {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 0.88rem !important;
  line-height: 1.65;
  margin-top: 12px;
}
.custom-footer-logo {
  max-height: 40px;
  margin-bottom: 8px;
  filter: brightness(1.1);
}
.custom-footer-socials {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.custom-footer-socials a,
.custom-footer-socials .list-inline-item a {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--c-border) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 1rem !important;
  transition: all 0.25s ease !important;
  padding: 0 !important;
  text-decoration: none !important;
}
.custom-footer-socials a:hover,
.custom-footer-socials .list-inline-item a:hover {
  background: rgba(249, 115, 22, 0.12) !important;
  border-color: rgba(249, 115, 22, 0.3) !important;
  color: var(--c-orange) !important;
  transform: translateY(-2px);
}
.custom-footer-socials .list-inline-item {
  margin: 0 !important;
  padding: 0 !important;
}

/* Footer Columns */
.custom-footer-col h4 {
  color: #ffffff !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  margin-bottom: 18px;
  letter-spacing: 0.3px;
}
.custom-footer-col h4 i {
  color: var(--c-orange) !important;
  margin-right: 8px;
  font-size: 0.9rem;
}
.custom-footer-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.custom-footer-col ul li {
  margin-bottom: 10px;
}
.custom-footer-col ul li a {
  color: rgba(255, 255, 255, 0.45) !important;
  text-decoration: none !important;
  font-size: 0.88rem !important;
  transition: all 0.2s ease !important;
  display: inline-block;
}
.custom-footer-col ul li a i {
  font-size: 0.6rem;
  margin-right: 8px;
  opacity: 0.4;
  transition: all 0.2s ease;
}
.custom-footer-col ul li a:hover {
  color: var(--c-orange) !important;
  transform: translateX(4px);
}
.custom-footer-col ul li a:hover i {
  opacity: 1;
  color: var(--c-orange) !important;
}

/* Contact Items */
.custom-footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.custom-footer-contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--c-border) !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}
.custom-footer-contact-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(249, 115, 22, 0.2) !important;
  transform: translateX(4px);
  text-decoration: none !important;
}
.custom-footer-contact-item > i {
  font-size: 1.15rem !important;
  color: var(--c-orange) !important;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.custom-footer-contact-item .contact-label {
  display: block;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.82rem !important;
  font-weight: 600;
}
.custom-footer-contact-item .contact-value {
  display: block;
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 0.78rem !important;
}

/* Footer Mid */
.custom-footer-mid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--c-border);
}
.custom-footer-payment {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.custom-footer-payment > span {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 0.85rem;
}
.custom-footer-payment > span i {
  margin-right: 6px;
  color: var(--c-orange) !important;
}
.payment-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pay-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--c-border);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.78rem;
  font-weight: 500;
}
.pay-badge i {
  color: var(--c-orange);
  font-size: 0.75rem;
}

/* Status dot */
.custom-footer-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.82rem;
}
.status-dot-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
  animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 12px rgba(34, 197, 94, 0.8); }
}

/* Footer Bottom */
.custom-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 24px 0 30px;
}
.custom-footer-bottom p {
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 0.82rem !important;
  margin: 0 !important;
}
.custom-footer-bottom p strong {
  color: rgba(255, 255, 255, 0.55) !important;
}
.custom-footer-legal {
  display: flex;
  gap: 16px;
  align-items: center;
}
.custom-footer-lang-btn {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--c-border) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 0.8rem !important;
  border-radius: 8px !important;
  padding: 4px 12px !important;
  transition: all 0.2s ease !important;
}
.custom-footer-lang-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(249, 115, 22, 0.3) !important;
  color: var(--c-orange) !important;
}

/* ═══════════════════════════════════════════════════════════
   CHECKOUT & REVIEW ORDERFORM OVERHAUL (XÓA NỀN TRẮNG DỄ ĐỌC)
   ═══════════════════════════════════════════════════════════ */

/* Remove white background from all cart & checkout containers */
#order-standard_cart, 
#order-nexus_cart,
.checkout-container, 
.order-summary, 
.view-cart-items, 
.cart-sidebar, 
.cart-body, 
.summary-container,
.field-container,
.payment-gateway-group,
.pay-option,
.payment-gateway,
#paymentGateways,
.express-checkout-buttons,
.promo-code-container,
.checkout-security-msg,
.checkout-terms,
.sub-heading,
.view-cart-items-header,
.checkout-group,
.cc-input-container,
.product-info,
.panel-checkout,
.bg-white,
.bg-light {
  background-color: rgba(12, 16, 28, 0.92) !important;
  background: rgba(12, 16, 28, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Fix inner boxes, cards, wells and containers inside cart/checkout */
#order-standard_cart .card,
#order-standard_cart .panel,
#order-standard_cart .well,
#order-standard_cart .order-summary,
#order-standard_cart .view-cart-items,
#order-standard_cart .cart-sidebar,
#order-standard_cart .summary-container,
#order-standard_cart .field-container,
#order-standard_cart .checkout-container,
#order-standard_cart .cart-body,
#order-nexus_cart .card,
#order-nexus_cart .panel,
#order-nexus_cart .well,
#order-nexus_cart .order-summary,
#order-nexus_cart .view-cart-items,
#order-nexus_cart .cart-sidebar,
.cart-item,
.cart-item td,
.cart-item th {
  background-color: rgba(255, 255, 255, 0.02) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Dark Redesign Override for View Cart Items Table */
#order-standard_cart .view-cart-items-header,
#order-nexus_cart .view-cart-items-header,
.view-cart-items-header {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.22) 0%, rgba(234, 88, 12, 0.12) 100%) !important;
  background-color: rgba(249, 115, 22, 0.18) !important;
  border: 1px solid rgba(249, 115, 22, 0.3) !important;
  border-radius: 12px 12px 0 0 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 12px 20px !important;
}

#order-standard_cart .view-cart-items,
#order-nexus_cart .view-cart-items,
.view-cart-items {
  background: transparent !important;
  border: none !important;
  margin-bottom: 25px !important;
}

#order-standard_cart .view-cart-items .item,
#order-nexus_cart .view-cart-items .item,
.view-cart-items .item,
.view-cart-items .item:nth-child(even),
#order-standard_cart .view-cart-items .item:nth-child(even),
#order-nexus_cart .view-cart-items .item:nth-child(even) {
  background-color: rgba(12, 16, 28, 0.85) !important;
  background: rgba(12, 16, 28, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top: none !important;
  color: #ffffff !important;
  padding: 18px 20px !important;
  transition: all 0.2s ease !important;
}

#order-standard_cart .view-cart-items .item:hover,
#order-nexus_cart .view-cart-items .item:hover,
.view-cart-items .item:hover {
  background-color: rgba(26, 32, 53, 0.95) !important;
  background: rgba(26, 32, 53, 0.95) !important;
}

#order-standard_cart .view-cart-items .item:last-child,
#order-nexus_cart .view-cart-items .item:last-child,
.view-cart-items .item:last-child {
  border-radius: 0 0 12px 12px !important;
}

#order-standard_cart .view-cart-items .item-title,
#order-nexus_cart .view-cart-items .item-title,
.view-cart-items .item-title,
#order-standard_cart .view-cart-items .item-title *,
#order-nexus_cart .view-cart-items .item-title * {
  color: #ffffff !important;
  font-weight: 700 !important;
}

#order-standard_cart .view-cart-items .item-group,
#order-nexus_cart .view-cart-items .item-group,
.view-cart-items .item-group {
  color: var(--c-orange) !important;
  font-weight: 600 !important;
}

#order-standard_cart .view-cart-items .item-domain,
#order-nexus_cart .view-cart-items .item-domain,
.view-cart-items .item-domain {
  color: #38bdf8 !important;
}

#order-standard_cart .view-cart-items .item-price,
#order-nexus_cart .view-cart-items .item-price,
.view-cart-items .item-price,
#order-standard_cart .view-cart-items .item-price span,
#order-nexus_cart .view-cart-items .item-price span,
.view-cart-items .item-price span {
  color: #f97316 !important;
  font-weight: 800 !important;
}

#order-standard_cart .view-cart-items .item-price .cycle,
#order-nexus_cart .view-cart-items .item-price .cycle,
.view-cart-items .item-price .cycle {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

#order-standard_cart .view-cart-tabs .view-cart-gateway-checkout,
#order-standard_cart .view-cart-tabs .tab-content,
#order-standard_cart .view-cart-promotion-code,
.view-cart-tabs .view-cart-gateway-checkout,
.view-cart-tabs .tab-content,
.view-cart-promotion-code {
  background: rgba(12, 16, 28, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
}

/* Complete Override for Order Form Products, Cards, Panels & Domains */
#order-standard_cart .products .product,
#order-nexus_cart .products .product,
.products .product,
#order-standard_cart .product-info,
#order-nexus_cart .product-info,
.product-info,
#order-standard_cart .summary-container,
#order-nexus_cart .summary-container,
.summary-container,
#order-standard_cart .order-summary,
#order-nexus_cart .order-summary,
.order-summary,
#order-standard_cart .field-container,
#order-nexus_cart .field-container,
.field-container,
#order-standard_cart .cc-input-container,
#order-nexus_cart .cc-input-container,
.cc-input-container,
#order-standard_cart .apply-credit-container,
#order-nexus_cart .apply-credit-container,
.apply-credit-container,
#order-standard_cart .domain-promo-box,
#order-nexus_cart .domain-promo-box,
.domain-promo-box,
#order-standard_cart .spotlight-tld,
#order-nexus_cart .spotlight-tld,
.spotlight-tld,
#order-standard_cart .cart-sidebar .list-group-item,
#order-nexus_cart .cart-sidebar .list-group-item,
.cart-sidebar .list-group-item {
  background-color: rgba(12, 16, 28, 0.85) !important;
  background: rgba(12, 16, 28, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

#order-standard_cart .products .product header,
#order-nexus_cart .products .product header,
.products .product header,
#order-standard_cart .products .product div.product-desc,
#order-nexus_cart .products .product div.product-desc,
.products .product div.product-desc,
#order-standard_cart .domain-selection-options .option,
#order-nexus_cart .domain-selection-options .option,
.domain-selection-options .option {
  background-color: rgba(255, 255, 255, 0.03) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

#order-standard_cart .products .product header span,
#order-nexus_cart .products .product header span,
.products .product header span,
#order-standard_cart .products .product header .qty,
#order-nexus_cart .products .product header .qty,
.products .product header .qty {
  color: #ffffff !important;
}

#order-standard_cart .domain-selection-options .option-selected,
#order-nexus_cart .domain-selection-options .option-selected,
.domain-selection-options .option-selected {
  background-color: rgba(249, 115, 22, 0.12) !important;
  background: rgba(249, 115, 22, 0.12) !important;
  border: 1px solid rgba(249, 115, 22, 0.4) !important;
  color: #ffffff !important;
}

#order-standard_cart .field,
#order-standard_cart .form-control,
#order-nexus_cart .field,
#order-nexus_cart .form-control,
.order-form .form-control,
#order-standard_cart select,
#order-nexus_cart select {
  background-color: rgba(6, 9, 19, 0.8) !important;
  background: rgba(6, 9, 19, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}

/* Sub-headings divider lines and title text badges in checkout */
#order-standard_cart .sub-heading,
#order-nexus_cart .sub-heading,
.sub-heading {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}

#order-standard_cart .sub-heading span,
#order-nexus_cart .sub-heading span,
.sub-heading span,
#order-standard_cart .sub-heading-borderless span,
#order-nexus_cart .sub-heading-borderless span,
.sub-heading-borderless span,
.sub-heading .primary-bg-color {
  background-color: #060913 !important;
  background: #060913 !important;
  color: var(--c-orange) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  padding: 4px 18px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(249, 115, 22, 0.35) !important;
}

/* Existing Account Select Boxes & Cards in Checkout */
#order-standard_cart .account-select-container div.account,
#order-nexus_cart .account-select-container div.account,
.account-select-container div.account {
  background: rgba(255, 255, 255, 0.03) !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

#order-standard_cart .account-select-container div.account.active,
#order-nexus_cart .account-select-container div.account.active,
.account-select-container div.account.active {
  background: rgba(249, 115, 22, 0.12) !important;
  background-color: rgba(249, 115, 22, 0.12) !important;
  border-color: var(--c-orange) !important;
  color: #ffffff !important;
}

/* Already Registered & New User Toggle Buttons Box */
.already-registered,
#order-standard_cart .already-registered,
#order-nexus_cart .already-registered {
  background: rgba(12, 16, 28, 0.85) !important;
  background-color: rgba(12, 16, 28, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  color: #ffffff !important;
  margin-bottom: 20px !important;
}

/* All headings, labels, and text inside checkout */
#order-standard_cart label,
#order-standard_cart h1, #order-standard_cart h2, #order-standard_cart h3, 
#order-standard_cart h4, #order-standard_cart h5, #order-standard_cart h6,
#order-standard_cart .sub-heading,
#order-standard_cart .title,
#order-standard_cart p,
#order-standard_cart span,
#order-nexus_cart label,
#order-nexus_cart h1, #order-nexus_cart h2, #order-nexus_cart h3,
#order-nexus_cart h4, #order-nexus_cart h5, #order-nexus_cart h6,
#order-nexus_cart p, #order-nexus_cart span,
.checkout-container label,
.checkout-container p,
.checkout-container span,
.order-summary label,
.order-summary p,
.order-summary span,
.summary-container label,
.summary-container p,
.summary-container span {
  color: #ffffff !important;
}

/* Sub-text and muted labels */
#order-standard_cart .text-muted,
#order-nexus_cart .text-muted,
.checkout-container .text-muted,
.order-summary .text-muted {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Prices, Totals and Due amounts */
.total-due-today, 
.total-due-today *, 
.total-due-recurring,
.total-due-recurring *,
.price, 
.amount, 
.amt,
#order-standard_cart .total-due-today-price,
#order-nexus_cart .total-due-today-price {
  color: var(--c-orange) !important;
  font-weight: 700 !important;
}

/* Checkout Input Fields & Select Boxes */
#order-standard_cart .form-control,
#order-standard_cart select,
#order-standard_cart textarea,
#order-standard_cart .custom-select,
#order-nexus_cart .form-control,
#order-nexus_cart select,
#order-nexus_cart textarea,
#order-nexus_cart .custom-select,
.field-container input,
.field-container select,
.field-container textarea,
.field-container .form-control {
  background-color: rgba(6, 9, 19, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
}

#order-standard_cart .form-control:focus,
#order-standard_cart select:focus,
#order-nexus_cart .form-control:focus,
#order-nexus_cart select:focus {
  border-color: var(--c-orange) !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2) !important;
  background-color: rgba(6, 9, 19, 0.95) !important;
}

/* Payment Gateway radio buttons & selection cards */
.payment-gateway-group .pay-option,
.payment-gateway,
.pay-option,
#order-standard_cart .payment-gateway,
#order-nexus_cart .payment-gateway {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  transition: all 0.25s ease !important;
}

.payment-gateway-group .pay-option:hover,
.payment-gateway:hover,
.pay-option:hover {
  border-color: rgba(249, 115, 22, 0.4) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
}

.payment-gateway-group .pay-option.selected,
.payment-gateway.selected,
.pay-option.selected,
#order-standard_cart .payment-gateway.active,
#order-nexus_cart .payment-gateway.active {
  background-color: rgba(249, 115, 22, 0.12) !important;
  border-color: var(--c-orange) !important;
  box-shadow: 0 0 15px rgba(249, 115, 22, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT CONFIGURATION & CATALOG OVERHAUL (SỬA LỖI NỀN TRẮNG GÓI DỊCH VỤ)
   ═══════════════════════════════════════════════════════════ */

/* Product items, catalog cards, header, and product info */
#order-standard_cart .products .product,
#order-standard_cart .products .product header,
#order-standard_cart .product-info,
#order-standard_cart .domain-selection-options .option,
#order-standard_cart .domain-selection-options .option-selected,
#order-standard_cart .mc-promo,
#order-standard_cart .mc-promo .body,
#order-standard_cart .view-cart-promotion-code,
#order-standard_cart .view-cart-gateway-checkout,
#order-standard_cart .apply-credit-container,
#order-standard_cart .cc-input-container,
#order-standard_cart .spotlight-tld,
#order-standard_cart .domain-promo-box,
#order-standard_cart .account-select-container div.account,
#order-standard_cart .account-select-container div.account.active,
#order-standard_cart .addon-promo-container,
#order-standard_cart .panel-addon .panel-body,
#order-nexus_cart .products .product,
#order-nexus_cart .products .product header,
#order-nexus_cart .product-info,
.product-configurable-options,
.configurable-options,
.custom-fields,
.panel-product,
.panel-addon,
.addon-container,
.addon-item {
  background-color: rgba(12, 16, 28, 0.92) !important;
  background: rgba(12, 16, 28, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
}

/* Fix product title, header text, feature values, prices */
#order-standard_cart .products .product header span,
#order-standard_cart .products .product span.feature-value,
#order-standard_cart .products .product div.product-desc,
#order-standard_cart .product-info .product-title,
#order-standard_cart .domain-selection-options .option label,
#order-standard_cart .panel-addon .panel-body label,
#order-standard_cart .mc-promo .headline,
#order-standard_cart .mc-promo .tagline,
#order-standard_cart .spotlight-tld,
#order-standard_cart .spotlight-tld span,
.product-title,
.product-description,
.configurable-option-title,
.field-container label {
  color: #ffffff !important;
}

/* Product header backgrounds */
#order-standard_cart .products .product header,
#order-nexus_cart .products .product header {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Ensure all text inside product boxes is white and readable */
#order-standard_cart .products .product *,
#order-standard_cart .product-info *,
#order-standard_cart .field-container *,
#order-nexus_cart .products .product *,
#order-nexus_cart .product-info * {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Override prices to orange */
#order-standard_cart .products .product div.product-pricing span.price,
#order-standard_cart .price,
#order-nexus_cart .price {
  color: var(--c-orange) !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════
   VERTICAL PRODUCT CARDS & OPTIONS LAYOUT (DẠNG DỌC)
   ═══════════════════════════════════════════════════════════ */

/* Products list container vertical stack */
#order-standard_cart .products,
#order-nexus_cart .products,
.products-list,
.product-grid,
.store-products {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
}

/* Each Product item box full width vertically */
#order-standard_cart .products .product,
#order-nexus_cart .products .product,
.store-product-item {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  margin-bottom: 22px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  padding: 24px !important;
  background: rgba(12, 16, 28, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
}

/* 1. Product header (Top) */
#order-standard_cart .products .product header,
#order-nexus_cart .products .product header {
  order: 1 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 !important;
  margin-bottom: 8px !important;
  background: transparent !important;
  border: none !important;
}

#order-standard_cart .products .product header span,
#order-nexus_cart .products .product header span {
  text-align: center !important;
  width: 100% !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

/* Make footer display: contents so its children (pricing & order button) participate directly in flexbox ordering */
#order-standard_cart .products .product footer,
#order-nexus_cart .products .product footer {
  display: contents !important;
}

/* 2. Product Price (Big Price DIRECTLY BELOW Product Name) */
#order-standard_cart .products .product div.product-pricing,
#order-nexus_cart .products .product div.product-pricing,
#order-standard_cart .products .product footer div.product-pricing,
#order-nexus_cart .products .product footer div.product-pricing {
  order: 2 !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 4px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

#order-standard_cart .products .product span.price,
#order-nexus_cart .products .product span.price,
#order-standard_cart .products .product div.product-pricing span.price,
#order-nexus_cart .products .product div.product-pricing span.price {
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  color: var(--c-orange) !important;
  display: block !important;
  line-height: 1.2 !important;
  text-shadow: 0 0 20px rgba(249, 115, 22, 0.3) !important;
}

#order-standard_cart .products .product span.cycle,
#order-nexus_cart .products .product span.cycle,
#order-standard_cart .products .product div.product-pricing span.cycle,
#order-nexus_cart .products .product div.product-pricing span.cycle {
  font-size: 0.85rem !important;
  color: rgba(255, 255, 255, 0.55) !important;
  display: block !important;
  margin-top: 4px !important;
}

/* 3. Product description & features block (Centered BELOW price) */
#order-standard_cart .products .product div.product-desc,
#order-nexus_cart .products .product div.product-desc {
  order: 3 !important;
  width: 100% !important;
  float: none !important;
  padding: 18px 0 !important;
  margin-bottom: 22px !important;
  text-align: center !important;
  box-sizing: border-box !important;
  border-top: 1px dashed rgba(255, 255, 255, 0.1) !important;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1) !important;
  font-size: 1.08rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.7 !important;
}

#order-standard_cart .products .product div.product-desc *,
#order-nexus_cart .products .product div.product-desc * {
  text-align: center !important;
  font-size: 1.08rem !important;
}

/* 4. Product Order Button (AT THE VERY BOTTOM) */
#order-standard_cart .products .product footer a,
#order-standard_cart .products .product footer button,
#order-nexus_cart .products .product footer a,
#order-nexus_cart .products .product footer button,
#order-standard_cart .products .product .btn,
#order-nexus_cart .products .product .btn {
  order: 4 !important;
  margin-top: 8px !important;
}

/* Domain and billing options stacked vertically */
#order-standard_cart .domain-selection-options,
#order-nexus_cart .domain-selection-options,
.billing-cycle-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}

#order-standard_cart .domain-selection-options .option,
#order-nexus_cart .domain-selection-options .option {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════════
   PROMO CODE & CART TABS DARK GLASSMORPHISM OVERHAUL
   ═══════════════════════════════════════════════════════════ */

/* Tab navigation (Mã giảm giá / Ước tính phí) */
.view-cart-tabs,
#order-standard_cart .view-cart-tabs,
#order-nexus_cart .view-cart-tabs {
  background: transparent !important;
  border: none !important;
  margin-top: 15px !important;
}

.view-cart-tabs .nav-tabs,
#order-standard_cart .view-cart-tabs .nav-tabs,
#order-nexus_cart .view-cart-tabs .nav-tabs {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: transparent !important;
}

.view-cart-tabs .nav-tabs .nav-link,
.view-cart-tabs .nav-tabs a,
#order-standard_cart .view-cart-tabs .nav-tabs a,
#order-nexus_cart .view-cart-tabs .nav-tabs a {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 600 !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  margin-right: 6px !important;
  padding: 10px 18px !important;
  transition: all 0.2s ease !important;
}

.view-cart-tabs .nav-tabs .nav-link.active,
.view-cart-tabs .nav-tabs a[aria-expanded=true],
.view-cart-tabs .nav-tabs a[aria-selected=true],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded=true],
#order-nexus_cart .view-cart-tabs .nav-tabs a[aria-expanded=true],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected=true],
#order-nexus_cart .view-cart-tabs .nav-tabs a[aria-selected=true] {
  background: rgba(12, 16, 28, 0.95) !important;
  border-color: rgba(249, 115, 22, 0.4) rgba(255, 255, 255, 0.1) transparent rgba(255, 255, 255, 0.1) !important;
  color: var(--c-orange) !important;
  border-top: 2px solid var(--c-orange) !important;
}

/* Tab Content Box & Promo Code Container */
.view-cart-tabs .tab-content,
.view-cart-promotion-code,
.promo-code-container,
#order-standard_cart .view-cart-tabs .tab-content,
#order-standard_cart .view-cart-promotion-code,
#order-nexus_cart .view-cart-promotion-code,
#inputPromoCode,
.promo,
.view-cart-tabs .promo {
  background: rgba(12, 16, 28, 0.95) !important;
  background-color: rgba(12, 16, 28, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  padding: 18px !important;
}

/* Promo Code text, labels, inputs */
.view-cart-promotion-code *,
.promo-code-container *,
#order-standard_cart .view-cart-promotion-code *,
#order-standard_cart .view-cart-tabs .tab-content *,
#order-nexus_cart .view-cart-promotion-code * {
  color: #ffffff !important;
}

/* Promo input field */
#inputPromoCode,
input[name="promocode"],
.promo-input input,
.view-cart-promotion-code input {
  background-color: rgba(6, 9, 19, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
}

#inputPromoCode:focus,
input[name="promocode"]:focus {
  border-color: var(--c-orange) !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2) !important;
  background-color: rgba(6, 9, 19, 0.95) !important;
}

/* Applied promo code success / alert boxes */
.view-cart-promotion-code .alert,
.promo-code-container .alert,
#order-standard_cart .view-cart-promotion-code .alert {
  background-color: rgba(34, 197, 94, 0.12) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  color: #4ade80 !important;
  border-radius: 10px !important;
}

.view-cart-promotion-code .alert-danger {
  background-color: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}

/* ═══════════════════════════════════════════════════════════
   NAVBAR WALLET BALANCE BADGE
   ═══════════════════════════════════════════════════════════ */
.user-navbar-wallet-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(249, 115, 22, 0.12) !important;
  border: 1px solid rgba(249, 115, 22, 0.35) !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}
.user-navbar-wallet-btn:hover {
  background: rgba(249, 115, 22, 0.25) !important;
  border-color: var(--c-orange) !important;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.4) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}
.user-navbar-wallet-btn i {
  color: var(--c-orange) !important;
  font-size: 1rem !important;
}
.user-navbar-wallet-btn .wallet-amount {
  color: #ffffff !important;
  letter-spacing: 0.2px;
}