/**
 * Adaptive Web Hosting - Custom WHMCS Theme
 * Brand Colors: Bright Blue #0079F2
 * Font: Roboto Mono
 * Last Updated: January 3, 2026
 *
 * Color Palette:
 * - Primary Blue: #0079F2
 * - Accent Cyan: #00D4FF
 * - Accent Purple: #8B5CF6
 * - Accent Green: #10B981
 * - Accent Orange: #F59E0B
 */

/* ========================================
   TYPOGRAPHY - Roboto Mono
   ======================================== */

/* Import Roboto Mono + Inter from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600;700;800;900&family=Roboto+Mono:wght@300;400;500;600;700&display=swap');

/* ========================================
   ANIMATED AWH LOGO — Icon + Wordmark
   ======================================== */
@keyframes awh-border-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes awh-status-glow {
  0%, 100% { box-shadow: 0 0 4px 1px rgba(16,185,129,0.4); }
  50% { box-shadow: 0 0 8px 3px rgba(16,185,129,0.6); }
}

.awh-logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
}
.awh-logo-wrap:hover { text-decoration: none !important; }

/* Icon container */
.awh-icon {
  position: relative;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.awh-logo-wrap:hover .awh-icon {
  transform: scale(1.06);
}

/* Rotating gradient border */
.awh-icon-border {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
}
.awh-icon-spin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  background: conic-gradient(from 0deg, #1d4ed8, #3b82f6, #059669, #10b981, #60a5fa, #1d4ed8);
  animation: awh-border-spin 6s linear infinite;
}

/* Inner dark panel */
.awh-icon-inner {
  position: absolute;
  inset: 2px;
  border-radius: 10px;
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.awh-icon-inner svg {
  width: 26px;
  height: 26px;
}

/* Wordmark */
.awh-wordmark { display: flex; flex-direction: column; line-height: 1; }
.awh-wordmark-title-row { display: flex; align-items: center; gap: 8px; }
.awh-wordmark-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.06em;
  color: #fff;
  line-height: 1;
}
.awh-wordmark-subtitle {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 5px;
  line-height: 1;
}
.awh-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981 !important;
  flex-shrink: 0;
  animation: awh-status-glow 3s ease-in-out infinite !important;
  box-shadow: 0 0 6px 2px rgba(16,185,129,0.5) !important;
  opacity: 1 !important;
}

/* Light mode overrides */
body.light-mode .awh-wordmark-title { color: #111827; }
body.light-mode .awh-wordmark-subtitle { color: #6b7280; }

/* Mobile */
@media (max-width: 576px) {
  .awh-icon { width: 36px; height: 36px; }
  .awh-icon-inner svg { width: 22px; height: 22px; }
  .awh-wordmark-title { font-size: 15px; }
  .awh-wordmark-subtitle { font-size: 8px; }
  .awh-logo-wrap { gap: 8px; }
}

body,
html {
    margin: 0 !important;
    font-family: 'Roboto Mono', monospace !important;
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1.6;
    color: var(--adaptive-text) !important;
    text-align: left;
    background-color: var(--adaptive-background) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}

/* Dark theme base styles - AGGRESSIVE OVERRIDES */
body *:not(.btn):not(.badge):not(.label):not(.alert):not(.sv-app):not(.server-visual):not(.pillar) {
    background-color: inherit;
}

.content-wrapper,
.main-content,
#main-body,
.container-fluid,
.container,
.row,
.col,
[class*="col-"],
.page-content,
.content,
.client-area,
.primary-content,
section,
article,
.wrapper,
#page,
#content,
.site-content {
    background-color: var(--adaptive-background) !important;
    color: var(--adaptive-text) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Roboto Mono', monospace !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--adaptive-text) !important;
}

/* Explicit heading sizes for readability */
h1, .h1 {
    font-size: 2.25rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
}

h2, .h2 {
    font-size: 1.875rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.875rem !important;
}

h3, .h3 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
}

h4, .h4 {
    font-size: 1.25rem !important;
    line-height: 1.35 !important;
    margin-bottom: 0.625rem !important;
}

h5, .h5 {
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.5rem !important;
}

h6, .h6 {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.5rem !important;
}

/* Ensure all text is readable */
p, span, div, label, small, strong, b, em, i, code, pre,
li, dt, dd, td, th, legend, caption, figcaption {
    color: var(--adaptive-text) !important;
}

/* Specific text elements */
.text-muted,
.text-secondary,
.help-block,
.form-text,
small.text-muted {
    color: var(--adaptive-text-light) !important;
}

label,
.form-label,
.control-label {
    color: var(--adaptive-text) !important;
    font-weight: 500 !important;
}

/* ========================================
   BRAND COLORS
   ======================================== */

:root {
    /* Dark UI: tell the browser so native controls, scrollbars, date/select
       pickers AND form autofill render with dark-appropriate colors.
       Without this, autofilled fields paint near-black text on the dark field
       background (black-on-black) — see the :-webkit-autofill block below. */
    color-scheme: dark;

    /* Primary Brand Colors */
    --adaptive-primary: #0079F2;
    --adaptive-primary-dark: #005bb5;
    --adaptive-primary-light: #3b9eff;
    --adaptive-primary-glow: rgba(0, 121, 242, 0.4);

    /* LOGO GREEN - Brand Secondary Color */
    --adaptive-logo-green: #059669;
    --adaptive-logo-green-light: #10B981;
    --adaptive-logo-green-dark: #047857;
    --adaptive-logo-green-glow: rgba(5, 150, 105, 0.4);

    /* Accent Colors for Variety */
    --adaptive-cyan: #00D4FF;
    --adaptive-cyan-glow: rgba(0, 212, 255, 0.3);
    --adaptive-purple: #8B5CF6;
    --adaptive-purple-glow: rgba(139, 92, 246, 0.3);
    --adaptive-green: #059669;
    --adaptive-green-glow: rgba(5, 150, 105, 0.35);
    --adaptive-orange: #F59E0B;
    --adaptive-orange-glow: rgba(245, 158, 11, 0.3);
    --adaptive-pink: #EC4899;
    --adaptive-pink-glow: rgba(236, 72, 153, 0.3);

    /* Gradient Accents */
    --adaptive-gradient-primary: linear-gradient(135deg, #0079F2 0%, #00D4FF 100%);
    --adaptive-gradient-purple: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
    --adaptive-gradient-green: linear-gradient(135deg, #059669 0%, #10B981 100%);
    --adaptive-gradient-blue-green: linear-gradient(135deg, #0079F2 0%, #059669 100%);
    --adaptive-gradient-sunset: linear-gradient(135deg, #F59E0B 0%, #EC4899 100%);

    /* Base Theme Colors - Slightly Lighter for Better Contrast */
    --adaptive-secondary: #1e2738;
    --adaptive-accent: #0079F2;
    --adaptive-background: #0d1117;
    --adaptive-background-light: #161b22;
    --adaptive-card-bg: #1c2432;

    /* Text Colors - Brighter for Readability */
    --adaptive-text: #f0f6fc;
    --adaptive-text-light: #b1bac4;
    --adaptive-text-muted: #8b949e;

    /* Borders */
    --adaptive-border: #30363d;
    --adaptive-border-light: #484f58;
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

/* ========================================
   HEADER - COMPLETE REDESIGN FOR FLOW
   ======================================== */

header,
header.header,
.header,
.top-nav,
.primary-bg-color {
    background: linear-gradient(135deg, var(--adaptive-background) 0%, var(--adaptive-card-bg) 50%, var(--adaptive-background) 100%) !important;
    border-bottom: 2px solid transparent !important;
    border-image: linear-gradient(90deg, var(--adaptive-primary), var(--adaptive-logo-green), var(--adaptive-cyan)) 1 !important;
    box-shadow: 0 4px 20px rgba(5, 150, 105, 0.1), 0 2px 4px var(--adaptive-shadow-50) !important;
    padding: 0 !important;
}

/* Remove all white backgrounds in header BUT keep dropdown menus solid */
header *:not(.dropdown-menu):not(.dropdown-menu *),
header.header *:not(.dropdown-menu):not(.dropdown-menu *),
.header *:not(.dropdown-menu):not(.dropdown-menu *) {
    background-color: transparent !important;
}

/* Header container */
header .container,
header.header .container,
header .container-fluid,
header.header .container-fluid {
    background-color: transparent !important;
}

/* Top bar with login info */
.top-bar,
.login-info,
.user-info {
    background-color: var(--adaptive-background-light) !important;
    color: var(--adaptive-text) !important;
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
}

/* Search bar */
.search-bar,
.header-search,
header .search,
header input[type="search"],
header input.form-control {
    background-color: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
    border-radius: 0.375rem !important;
}

.search-bar:focus,
header input[type="search"]:focus,
header input.form-control:focus {
    background-color: var(--adaptive-card-bg) !important;
    border-color: var(--adaptive-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 121, 242, 0.25) !important;
}

/* ========================================
   MAIN NAVIGATION - INNOVATIVE DESIGN
   ======================================== */

/* Main navigation */
.navbar,
.main-nav,
header nav,
header.header nav {
    background-color: transparent !important;
    padding: 0.75rem 0 !important;
}

/* Navigation links - modern, innovative design */
.navbar-nav,
header nav ul,
header .nav {
    background-color: transparent !important;
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
}

header .nav-item,
header .navbar-nav .nav-item {
    background-color: transparent !important;
    position: relative !important;
}

header .nav-link,
header .navbar-nav .nav-link,
header.header .toolbar .nav-link {
    background-color: transparent !important;
    color: var(--adaptive-text) !important;
    padding: 0.625rem 1.25rem !important;
    border: none !important;
    border-radius: 0.5rem !important;
    font-size: 0.95em !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 500 !important;
    position: relative !important;
    letter-spacing: 0.01em !important;
}

/* Innovative hover effect with underline animation */
header .nav-link::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0.25rem !important;
    left: 1.25rem !important;
    right: 1.25rem !important;
    height: 2px !important;
    background: var(--adaptive-primary) !important;
    transform: scaleX(0) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

header .nav-link:hover {
    background-color: rgba(0, 212, 255, 0.15) !important;
    color: var(--adaptive-cyan) !important;
    transform: translateY(-2px) !important;
    text-shadow: 0 0 10px var(--adaptive-cyan-glow) !important;
}

header .nav-link:hover::before {
    transform: scaleX(1) !important;
    background: linear-gradient(90deg, var(--adaptive-cyan), var(--adaptive-purple)) !important;
}

header .nav-link.active {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, var(--adaptive-cyan) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px var(--adaptive-primary-glow), 0 0 20px var(--adaptive-cyan-glow) !important;
}

header .nav-link.active::before {
    display: none !important;
}

/* User greeting and dropdown */
.user-greeting,
.logged-in-as,
header .dropdown,
header .dropdown-toggle {
    background-color: transparent !important;
    color: var(--adaptive-text) !important;
    border: none !important;
}

header .dropdown-toggle::after {
    border-top-color: var(--adaptive-text) !important;
}

/* Client area link */
.client-area-link,
.portal-link {
    background-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.375rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.client-area-link:hover,
.portal-link:hover {
    background-color: var(--adaptive-primary-light) !important;
    color: #ffffff !important;
}

/* Toolbar */
.toolbar,
header .toolbar {
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

/* Remove any remaining white blocks */
.bg-white {
    background-color: var(--adaptive-card-bg) !important;
}

header .bg-white,
header.header .bg-white {
    background-color: transparent !important;
}

/* Legacy img logo rules (replaced by AWH animated logo) */
.navbar-brand img {
    max-height: 50px;
    width: auto;
}

/* ========================================
   BREADCRUMBS - GRADIENT ACCENT
   ======================================== */

.master-breadcrumb {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, var(--adaptive-logo-green) 50%, var(--adaptive-cyan) 100%) !important;
    border-bottom: none !important;
    box-shadow: 0 4px 15px rgba(5, 150, 105, 0.25), 0 2px 4px var(--adaptive-shadow-30) !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Make all child elements transparent to show blue through */
.master-breadcrumb *,
.master-breadcrumb .container,
.master-breadcrumb .container-fluid {
    background-color: transparent !important;
}

.breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 0 !important;
    list-style: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: #ffffff !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.breadcrumb-item a:hover {
    color: #e0e0e0 !important;
    text-decoration: underline !important;
}

.breadcrumb-item.active {
    color: #ffffff !important;
    opacity: 0.9;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ========================================
   BUTTONS
   ======================================== */

.btn,
button {
    font-weight: 500 !important;
}

.btn-primary {
    color: #ffffff !important;
    background: var(--adaptive-gradient-primary) !important;
    border: none !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 14px var(--adaptive-primary-glow) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--adaptive-primary-light) 0%, var(--adaptive-cyan) 100%) !important;
    box-shadow: 0 6px 20px var(--adaptive-primary-glow) !important;
    transform: translateY(-2px) !important;
}

.btn-success {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px var(--adaptive-logo-green-glow) !important;
    transition: all 0.3s ease !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--adaptive-logo-green-light) 0%, #34d399 100%) !important;
    box-shadow: 0 6px 20px var(--adaptive-logo-green-glow) !important;
    transform: translateY(-2px) !important;
}

.btn-secondary,
.btn-default {
    color: var(--adaptive-text) !important;
    background-color: var(--adaptive-background-light) !important;
    border-color: var(--adaptive-border) !important;
}

.btn-secondary:hover,
.btn-default:hover {
    color: var(--adaptive-text) !important;
    background-color: var(--adaptive-border) !important;
    border-color: var(--adaptive-border-light) !important;
}

.btn-outline-primary {
    color: var(--adaptive-primary) !important;
    border-color: var(--adaptive-primary) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover {
    color: #ffffff !important;
    background-color: var(--adaptive-primary) !important;
    border-color: var(--adaptive-primary) !important;
}

.btn-link {
    color: var(--adaptive-primary) !important;
}

.btn-link:hover {
    color: var(--adaptive-primary-light) !important;
}

/* ========================================
   CARDS & PANELS
   ======================================== */

.card,
.mc-promo-manage,
.mc-promo-login,
.panel,
.panel-default {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    word-wrap: break-word !important;
    background: linear-gradient(145deg, var(--adaptive-card-bg) 0%, var(--adaptive-card-bg-2) 100%) !important;
    background-clip: border-box !important;
    border: 1px solid var(--adaptive-border) !important;
    border-top: 3px solid !important;
    border-image: linear-gradient(90deg, var(--adaptive-primary), var(--adaptive-logo-green), var(--adaptive-cyan)) 1 !important;
    border-radius: 0.5rem !important;
    font-size: 1rem !important;
    box-shadow: 0 4px 6px 0 var(--adaptive-shadow-30), inset 0 1px 0 rgba(5, 150, 105, 0.05) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    color: var(--adaptive-text) !important;
}

.card:hover,
.panel:hover,
.panel-default:hover {
    box-shadow: 0 12px 24px -4px var(--adaptive-shadow-50),
                0 0 30px -5px var(--adaptive-primary-glow),
                0 0 20px -5px var(--adaptive-cyan-glow) !important;
    border-color: var(--adaptive-cyan) !important;
    transform: translateY(-4px) !important;
}

/* Pricing cards */
.pricing-table .panel,
.product-card,
.pricing-card {
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.pricing-table .panel:hover,
.product-card:hover,
.pricing-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.primary-content .card-body,
.primary-content .mc-promo-manage .content,
.mc-promo-manage .primary-content .content,
.primary-content .mc-promo-login .content,
.mc-promo-login .primary-content .content {
    padding: 10px;
    overflow: auto;
}

.card-header,
.panel-heading {
    background-color: var(--adaptive-background-light) !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    font-weight: 600 !important;
    padding: 1rem 1.25rem !important;
    color: var(--adaptive-text) !important;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.panel-heading h1,
.panel-heading h2,
.panel-heading h3,
.panel-heading h4 {
    margin: 0 !important;
    color: var(--adaptive-text) !important;
}

.card-body,
.panel-body {
    background-color: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
}

/* Featured/Highlighted Cards - Logo Green */
.card.featured,
.panel.featured,
.pricing-table .panel.recommended {
    border: 2px solid var(--adaptive-logo-green);
    box-shadow: 0 4px 20px var(--adaptive-logo-green-glow), 0 2px 4px -2px rgba(5, 150, 105, 0.15);
}

.card.featured .card-header,
.panel.featured .panel-heading,
.pricing-table .panel.recommended .panel-heading {
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-dark) 100%);
    color: #ffffff;
    border-bottom: none;
}

.card.featured .card-header h1,
.card.featured .card-header h2,
.card.featured .card-header h3,
.card.featured .card-header h4,
.panel.featured .panel-heading h1,
.panel.featured .panel-heading h2,
.panel.featured .panel-heading h3,
.panel.featured .panel-heading h4 {
    color: #ffffff;
}

/* ========================================
   LIST GROUPS
   ======================================== */

.list-group-item {
    position: relative !important;
    display: block !important;
    padding: 0.75rem 1.25rem !important;
    background-color: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    transition: all 0.3s ease !important;
    color: var(--adaptive-text) !important;
}

.list-group-item:hover {
    background-color: var(--adaptive-background-light) !important;
}

.list-group-item.active {
    background-color: var(--adaptive-primary) !important;
    border-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
}

/* ========================================
   LINKS - VIBRANT CYAN ACCENTS
   ======================================== */

a {
    color: var(--adaptive-primary) !important;
    transition: all 0.3s ease !important;
}

a:hover,
a:focus {
    color: var(--adaptive-cyan) !important;
    text-decoration: none !important;
    text-shadow: 0 0 8px var(--adaptive-cyan-glow) !important;
}

/* Card links with purple hover */
.card a:hover,
.panel a:hover {
    color: var(--adaptive-purple) !important;
    text-shadow: 0 0 8px var(--adaptive-purple-glow) !important;
}

/* Sidebar links with green accent */
.sidebar a:hover,
.client-area-sidebar a:hover {
    color: var(--adaptive-green) !important;
}

/* ========================================
   FORMS
   ======================================== */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
    background-color: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--adaptive-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 121, 242, 0.25) !important;
    background-color: var(--adaptive-card-bg) !important;
}

/* Global autofill fix — keeps autofilled fields legible site-wide (login,
   client area, and the "Manage Payment Methods" card form which lives
   OUTSIDE #order-standard_cart). See order-form autofill block for rationale. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--adaptive-text) !important;
    caret-color: var(--adaptive-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--adaptive-background-light) inset !important;
            box-shadow: 0 0 0 1000px var(--adaptive-background-light) inset !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

.home-domain-search .input-group-wrapper {
    margin: 15px 0 !important;
    padding: 6px !important;
    background-color: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.25rem !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--adaptive-primary) !important;
    border-color: var(--adaptive-primary) !important;
}

/* ========================================
   TABLES - ENHANCED DARK THEME
   ======================================== */

.table,
table {
    color: var(--adaptive-text) !important;
    background-color: var(--adaptive-card-bg) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.table thead th {
    border-bottom: 2px solid var(--adaptive-border) !important;
    font-weight: 600 !important;
    color: var(--adaptive-text) !important;
    background-color: var(--adaptive-background-light) !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
    padding: 1rem !important;
}

.table tbody tr {
    border-bottom: 1px solid var(--adaptive-border) !important;
    transition: all 0.2s ease !important;
}

.table tbody tr:hover {
    background-color: rgba(0, 121, 242, 0.08) !important;
}

.table tbody tr[onclick] {
    cursor: pointer !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--adaptive-background-light) !important;
}

.table-striped tbody tr:nth-of-type(odd):hover {
    background-color: rgba(0, 121, 242, 0.12) !important;
}

.table td,
.table th {
    border-color: var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
    padding: 1rem !important;
    vertical-align: middle !important;
}

/* Table Container */
.table-container {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
}

.table-container .table {
    margin-bottom: 0 !important;
}

/* ========================================
   DATATABLES - ENHANCED STYLING
   ======================================== */

/* DataTables wrapper */
.dataTables_wrapper {
    padding: 1rem !important;
    background: var(--adaptive-card-bg) !important;
    border-radius: 0.75rem !important;
}

/* DataTables header controls */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 1rem !important;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--adaptive-text) !important;
    font-size: 0.875rem !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0 0.5rem !important;
}

.dataTables_wrapper .dataTables_filter input {
    min-width: 200px !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--adaptive-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 121, 242, 0.15) !important;
    outline: none !important;
}

/* DataTables info and pagination */
.dataTables_wrapper .dataTables_info {
    color: var(--adaptive-text-light) !important;
    font-size: 0.875rem !important;
    padding-top: 1rem !important;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 1rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.875rem !important;
    margin: 0 0.25rem !important;
    transition: all 0.2s ease !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--adaptive-primary) !important;
    border-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, var(--adaptive-primary-dark) 100%) !important;
    border-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    background: var(--adaptive-background) !important;
    border-color: var(--adaptive-border) !important;
    color: var(--adaptive-text-light) !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* DataTables sorting icons */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-image: none !important;
    position: relative !important;
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 0.3 !important;
    font-size: 0.75rem !important;
}

table.dataTable thead .sorting::after {
    content: '\f0dc' !important;
}

table.dataTable thead .sorting_asc::after {
    content: '\f0de' !important;
    opacity: 1 !important;
    color: var(--adaptive-primary) !important;
}

table.dataTable thead .sorting_desc::after {
    content: '\f0dd' !important;
    opacity: 1 !important;
    color: var(--adaptive-primary) !important;
}

/* Table empty state */
.dataTables_empty {
    color: var(--adaptive-text-light) !important;
    text-align: center !important;
    padding: 3rem !important;
    font-style: italic !important;
}

/* Status labels in tables */
.table .label,
.table .status {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.35rem 0.75rem !important;
    border-radius: 2rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

.status-active,
.label-active,
.badge-active {
    background: var(--adaptive-gradient-green) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px var(--adaptive-green-glow) !important;
}

.status-pending,
.label-pending,
.badge-pending {
    background: var(--adaptive-gradient-sunset) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px var(--adaptive-orange-glow) !important;
}

.status-suspended,
.status-terminated,
.status-cancelled,
.label-danger,
.badge-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}

.status-fraud,
.label-fraud,
.badge-fraud {
    background: var(--adaptive-gradient-purple) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px var(--adaptive-purple-glow) !important;
}

/* Info status with cyan accent */
.status-info,
.label-info,
.badge-info {
    background: linear-gradient(135deg, var(--adaptive-cyan) 0%, var(--adaptive-primary) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px var(--adaptive-cyan-glow) !important;
}

/* Table list specific styles */
.table-list {
    border-radius: 0 !important;
}

.table-list td {
    background: transparent !important;
}

/* ========================================
   BADGES & LABELS
   ======================================== */

.badge-success,
.label-success {
    background-color: var(--adaptive-primary) !important;
}

.badge-primary,
.label-primary {
    background-color: var(--adaptive-primary) !important;
}

/* ========================================
   ALERTS
   ======================================== */

.alert-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(0, 212, 255, 0.1) 100%) !important;
    border: 1px solid var(--adaptive-green) !important;
    border-left: 4px solid var(--adaptive-green) !important;
    color: #6ee7b7 !important;
}

.alert-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(236, 72, 153, 0.1) 100%) !important;
    border: 1px solid #ef4444 !important;
    border-left: 4px solid #ef4444 !important;
    color: #fca5a5 !important;
}

.alert-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(236, 72, 153, 0.1) 100%) !important;
    border: 1px solid var(--adaptive-orange) !important;
    border-left: 4px solid var(--adaptive-orange) !important;
    color: #fcd34d !important;
}

.alert-info {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 121, 242, 0.1) 100%) !important;
    border: 1px solid var(--adaptive-cyan) !important;
    border-left: 4px solid var(--adaptive-cyan) !important;
    color: #7dd3fc !important;
}

.alert-primary {
    background: linear-gradient(135deg, rgba(0, 121, 242, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%) !important;
    border: 1px solid var(--adaptive-primary) !important;
    border-left: 4px solid var(--adaptive-primary) !important;
    color: var(--adaptive-primary-light) !important;
}

/* ========================================
   PAGINATION
   ======================================== */

.pagination .page-item.active .page-link {
    background-color: var(--adaptive-primary);
    border-color: var(--adaptive-primary);
}

.pagination .page-link {
    color: var(--adaptive-primary);
}

.pagination .page-link:hover {
    color: var(--adaptive-primary-dark);
    background-color: #f9fafb;
}

/* ========================================
   PROGRESS BARS
   ======================================== */

.progress-bar {
    background-color: var(--adaptive-primary);
}

/* ========================================
   TABS
   ======================================== */

.nav-tabs .nav-link.active {
    color: var(--adaptive-primary);
    border-bottom: 2px solid var(--adaptive-primary);
}

.nav-tabs .nav-link:hover {
    color: var(--adaptive-primary);
}

/* ========================================
   FOOTER - SEAMLESS DESIGN
   ======================================== */

.footer {
    background-color: var(--adaptive-secondary) !important;
    color: var(--adaptive-text-light) !important;
    padding: 40px 0 20px !important;
    border-top: 1px solid var(--adaptive-border) !important;
    margin: 0 !important;
}

/* Make all child elements transparent to show footer background through */
.footer *,
.footer .container,
.footer .container-fluid,
.footer ul,
.footer li,
.footer .nav,
.footer .list-inline,
.footer .btn {
    background-color: transparent !important;
    border: none !important;
}

.footer a,
.footer .nav-link {
    color: var(--adaptive-text-light) !important;
    text-decoration: none !important;
}

.footer a:hover,
.footer .nav-link:hover {
    color: var(--adaptive-primary) !important;
}

.footer p,
.footer .copyright {
    color: var(--adaptive-text-light) !important;
    margin-bottom: 0 !important;
}

/* Remove any button styling in footer */
.footer .btn {
    color: var(--adaptive-text-light) !important;
    padding: 0.5rem 1rem !important;
}

.footer .btn:hover {
    color: var(--adaptive-primary) !important;
}

/* Additional Dark Mode Styles */
.modal-content {
    background-color: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
    border: 1px solid var(--adaptive-border) !important;
}

.modal-header {
    background-color: var(--adaptive-background-light) !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
}

.modal-body {
    background-color: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
}

.modal-footer {
    background-color: var(--adaptive-background-light) !important;
    border-top: 1px solid var(--adaptive-border) !important;
}

.alert {
    background-color: var(--adaptive-background-light) !important;
    border-color: var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
}

/* ========================================
   DROPDOWN MENUS - INNOVATIVE DESIGN
   ======================================== */

.dropdown-menu {
    background-color: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border-light) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem !important;
    margin-top: 0.5rem !important;
    box-shadow: 0 10px 25px -5px var(--adaptive-shadow-60),
                0 8px 10px -6px var(--adaptive-shadow-50),
                0 0 0 1px rgba(0, 121, 242, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    animation: dropdownFadeIn 0.2s ease-out !important;
    min-width: 200px !important;
    z-index: 9999 !important;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    color: var(--adaptive-text) !important;
    padding: 0.625rem 1rem !important;
    border-radius: 0.375rem !important;
    margin-bottom: 0.25rem !important;
    transition: all 0.15s ease !important;
    font-size: 0.95em !important;
    display: flex !important;
    align-items: center !important;
}

.dropdown-item:last-child {
    margin-bottom: 0 !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
    transform: translateX(4px) !important;
}

.dropdown-item:active {
    background-color: var(--adaptive-primary-dark) !important;
    color: #ffffff !important;
}

/* Dropdown divider */
.dropdown-divider {
    border-top: 1px solid var(--adaptive-border) !important;
    margin: 0.5rem 0 !important;
}

/* Dropdown header */
.dropdown-header {
    color: var(--adaptive-text-light) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    padding: 0.5rem 1rem 0.25rem !important;
}

/* ========================================
   SUBMENU ITEMS - ROBOTO MONO FONT
   ======================================== */

/* Ensure all dropdown/submenu items use Roboto Mono */
.dropdown-menu,
.dropdown-menu *,
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item a,
.dropdown-menu li,
.dropdown-menu li a,
ul.dropdown-menu li.dropdown-item,
ul.dropdown-menu li.dropdown-item a {
    font-family: 'Roboto Mono', monospace !important;
}

/* Submenu items in navigation */
#nav .dropdown-menu .dropdown-item,
#nav .dropdown-menu .dropdown-item a,
.navbar-nav .dropdown-menu .dropdown-item,
.navbar-nav .dropdown-menu .dropdown-item a,
header .dropdown-menu .dropdown-item,
header .dropdown-menu .dropdown-item a,
.main-navbar-wrapper .dropdown-menu .dropdown-item,
.main-navbar-wrapper .dropdown-menu .dropdown-item a {
    font-family: 'Roboto Mono', monospace !important;
    font-size: 0.9em !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
}

/* Collapsable dropdown menu (More menu) */
.collapsable-dropdown-menu,
.collapsable-dropdown-menu *,
.collapsable-dropdown-menu .dropdown-item,
.collapsable-dropdown-menu .dropdown-item a {
    font-family: 'Roboto Mono', monospace !important;
}

/* ========================================
   DOMAIN SEARCH & PRICING
   ======================================== */

.domain-status.Active,
.status.Active {
    color: var(--adaptive-logo-green);
    font-weight: 600;
}

.pricing-box.featured,
.package.recommended {
    border: 2px solid var(--adaptive-logo-green);
    box-shadow: 0 10px 25px -3px var(--adaptive-logo-green-glow), 0 4px 6px -4px rgba(5, 150, 105, 0.2);
    transform: scale(1.05);
    z-index: 10;
    position: relative;
}

.pricing-box.featured .pricing-header,
.package.recommended .package-header {
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-dark) 100%);
    color: #ffffff;
    padding: 1.5rem;
}

.pricing-box,
.package {
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.pricing-box:hover,
.package:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* Recommended badge - Logo Green */
.pricing-box.featured::before,
.package.recommended::before {
    content: "Recommended";
    position: absolute;
    top: -12px;
    right: 20px;
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 100%);
    color: #ffffff;
    padding: 4px 16px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px var(--adaptive-logo-green-glow);
    animation: pulseGlow 3s ease-in-out infinite;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.text-primary {
    color: var(--adaptive-primary) !important;
}

.bg-primary {
    background-color: var(--adaptive-primary) !important;
}

.border-primary {
    border-color: var(--adaptive-primary) !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .navbar-brand img {
        max-height: 40px;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

*:focus-visible {
    outline: 2px solid var(--adaptive-primary);
    outline-offset: 2px;
}

/* ========================================
   SELECTION
   ======================================== */

::selection {
    background-color: var(--adaptive-primary);
    color: #ffffff;
}

::-moz-selection {
    background-color: var(--adaptive-primary);
    color: #ffffff;
}

/* ========================================
   PRODUCT GRIDS & LISTINGS
   ======================================== */

.products,
.product-grid,
.domain-checker-result-headline {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.product-item,
.domain-result-item {
    background: #ffffff;
    border: 1px solid var(--adaptive-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.product-item:hover,
.domain-result-item:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 121, 242, 0.3);
    transform: translateY(-2px);
}

/* Domain search results */
.domain-checker-result {
    border-radius: 0.5rem;
    overflow: hidden;
}

.domain-checker-result .domain-checker-item {
    border-bottom: 1px solid var(--adaptive-border);
    padding: 1rem;
    transition: background-color 0.2s ease;
}

.domain-checker-result .domain-checker-item:hover {
    background-color: #f9fafb;
}

.domain-checker-result .domain-checker-item:last-child {
    border-bottom: none;
}

/* Product features list */
.product-features,
.package-features {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.product-features li,
.package-features li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.product-features li:before,
.package-features li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--adaptive-primary);
    font-weight: 700;
    font-size: 1.1em;
}

/* ========================================
   ENHANCED SHADOWS (Tailwind-inspired)
   ======================================== */

.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* ========================================
   NAVIGATION & SIDEBAR
   ======================================== */

.navbar,
.navbar-nav,
.nav {
    background-color: var(--adaptive-secondary) !important;
}

.nav-link,
.navbar-nav .nav-link {
    color: var(--adaptive-text) !important;
}

.nav-link:hover,
.navbar-nav .nav-link:hover {
    color: var(--adaptive-primary) !important;
}

.sidebar,
.client-area-sidebar {
    background-color: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
}

.sidebar .list-group-item,
.client-area-sidebar .list-group-item {
    background-color: transparent !important;
    color: var(--adaptive-text) !important;
    border-color: var(--adaptive-border) !important;
}

.sidebar .list-group-item:hover,
.client-area-sidebar .list-group-item:hover {
    background-color: var(--adaptive-background-light) !important;
    color: var(--adaptive-primary) !important;
}

/* ========================================
   CODE & PRE BLOCKS
   ======================================== */

code {
    background-color: var(--adaptive-background-light) !important;
    color: var(--adaptive-primary-light) !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
}

pre {
    background-color: var(--adaptive-background-light) !important;
    color: var(--adaptive-text) !important;
    border: 1px solid var(--adaptive-border) !important;
    padding: 1rem !important;
    border-radius: 0.375rem !important;
}

pre code {
    background-color: transparent !important;
    padding: 0 !important;
}

/* ========================================
   ADDITIONAL TEXT OVERRIDES
   ======================================== */

/* Ensure placeholder text is visible */
::placeholder {
    color: var(--adaptive-text-light) !important;
    opacity: 0.6 !important;
}

:-ms-input-placeholder {
    color: var(--adaptive-text-light) !important;
}

::-ms-input-placeholder {
    color: var(--adaptive-text-light) !important;
}

/* Text utilities */
.text-dark {
    color: var(--adaptive-text) !important;
}

.text-light {
    color: var(--adaptive-text-light) !important;
}

.text-white {
    color: #ffffff !important;
}

/* Well and jumbotron */
.well,
.jumbotron {
    background-color: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
    border: 1px solid var(--adaptive-border) !important;
}

/* Badge text */
.badge,
.label {
    color: #ffffff !important;
}

/* Price and important numbers */
.price,
.amount,
.total {
    color: var(--adaptive-text) !important;
    font-weight: 600 !important;
}

/* ========================================
   CLIENT AREA SPECIFIC FIXES
   ======================================== */

/* Catch all white backgrounds */
.bg-light,
.bg-white,
.bg-transparent,
.panel-white,
.white-bg {
    background-color: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
}

/* Domain and service panels */
.domain-status,
.service-status,
.product-details,
.service-details,
.domain-details {
    background-color: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
    border-color: var(--adaptive-border) !important;
}

/* Invoice and billing */
.invoice,
.invoice-items,
.billing-info,
.payment-methods,
.invoice-table {
    background-color: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
}

/* Tickets and support */
.ticket-container,
.ticket-reply,
.support-ticket,
.ticket-details,
.ticket-thread {
    background-color: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
    border-color: var(--adaptive-border) !important;
}

/* Product/Service boxes */
.product-box,
.service-box,
.package-box,
.plan-box {
    background-color: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
    border: 1px solid var(--adaptive-border) !important;
}

/* Info boxes and panels */
.info-box,
.alert-box,
.notification-box,
.message-box {
    background-color: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
    border-color: var(--adaptive-border) !important;
}

/* Account sections */
.account-section,
.profile-section,
.security-section,
.settings-section {
    background-color: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
}

/* Tab content */
.tab-content,
.tab-pane {
    background-color: var(--adaptive-background) !important;
    color: var(--adaptive-text) !important;
}

/* Nav tabs */
.nav-tabs {
    border-bottom: 1px solid var(--adaptive-border) !important;
}

.nav-tabs .nav-link {
    color: var(--adaptive-text) !important;
    background-color: transparent !important;
    border-color: var(--adaptive-border) !important;
}

.nav-tabs .nav-link:hover {
    border-color: var(--adaptive-border) !important;
    background-color: var(--adaptive-background-light) !important;
}

.nav-tabs .nav-link.active {
    color: var(--adaptive-primary) !important;
    background-color: var(--adaptive-card-bg) !important;
    border-color: var(--adaptive-border) var(--adaptive-border) var(--adaptive-card-bg) !important;
}

/* Progress bars */
.progress {
    background-color: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
}

.progress-bar {
    background-color: var(--adaptive-primary) !important;
}

/* Pagination */
.pagination .page-link {
    background-color: var(--adaptive-card-bg) !important;
    color: var(--adaptive-primary) !important;
    border-color: var(--adaptive-border) !important;
}

.pagination .page-link:hover {
    background-color: var(--adaptive-background-light) !important;
    color: var(--adaptive-primary-light) !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--adaptive-primary) !important;
    border-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
}

.pagination .page-item.disabled .page-link {
    background-color: var(--adaptive-background-light) !important;
    color: var(--adaptive-text-light) !important;
    border-color: var(--adaptive-border) !important;
}

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

/* Popover and tooltips */
.popover {
    background-color: var(--adaptive-card-bg) !important;
    border-color: var(--adaptive-border) !important;
}

.popover-header {
    background-color: var(--adaptive-background-light) !important;
    color: var(--adaptive-text) !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
}

.popover-body {
    color: var(--adaptive-text) !important;
}

.tooltip-inner {
    background-color: var(--adaptive-secondary) !important;
    color: var(--adaptive-text) !important;
}

/* Override any remaining white backgrounds */
div[style*="background: white"],
div[style*="background: #fff"],
div[style*="background-color: white"],
div[style*="background-color: #fff"],
div[style*="background-color: #ffffff"] {
    background-color: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
}

/* Override any remaining black text */
div[style*="color: black"],
div[style*="color: #000"],
div[style*="color: #000000"],
span[style*="color: black"],
span[style*="color: #000"],
p[style*="color: black"] {
    color: var(--adaptive-text) !important;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* ========================================
   DASHBOARD TILES - ENHANCED
   ======================================== */

.tiles .tile {
    background: linear-gradient(135deg, var(--adaptive-card-bg) 0%, var(--adaptive-background-light) 100%) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.tiles .tile:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px -8px rgba(0, 121, 242, 0.3) !important;
    border-color: var(--adaptive-primary) !important;
}

.tiles .tile i {
    font-size: 2.5rem !important;
    margin-bottom: 0.75rem !important;
    transition: all 0.3s ease !important;
}

/* Colorful tile icons - each tile gets a different color */
.tiles .tile:nth-child(1) i {
    color: var(--adaptive-cyan) !important;
    text-shadow: 0 0 20px var(--adaptive-cyan-glow) !important;
}

.tiles .tile:nth-child(2) i {
    color: var(--adaptive-purple) !important;
    text-shadow: 0 0 20px var(--adaptive-purple-glow) !important;
}

.tiles .tile:nth-child(3) i {
    color: var(--adaptive-green) !important;
    text-shadow: 0 0 20px var(--adaptive-green-glow) !important;
}

.tiles .tile:nth-child(4) i {
    color: var(--adaptive-orange) !important;
    text-shadow: 0 0 20px var(--adaptive-orange-glow) !important;
}

.tiles .tile:nth-child(5) i {
    color: var(--adaptive-pink) !important;
    text-shadow: 0 0 20px var(--adaptive-pink-glow) !important;
}

.tiles .tile:nth-child(6) i {
    color: var(--adaptive-primary) !important;
    text-shadow: 0 0 20px var(--adaptive-primary-glow) !important;
}

.tiles .tile:hover i {
    transform: scale(1.2) !important;
}

.tiles .tile .stat {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-text) !important;
    line-height: 1 !important;
}

.tiles .tile .title {
    color: var(--adaptive-text-light) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-top: 0.5rem !important;
}

.tiles .tile .highlight {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    transition: height 0.3s ease !important;
}

.tiles .tile:hover .highlight {
    height: 5px !important;
}

/* ========================================
   ACTION ICON BUTTONS - HOMEPAGE
   ======================================== */

.action-icon-btns a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 1.5rem 1rem !important;
    background-color: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    text-decoration: none !important;
    color: var(--adaptive-text) !important;
    transition: all 0.3s ease !important;
    margin-bottom: 1rem !important;
}

.action-icon-btns a:hover {
    transform: translateY(-4px) !important;
    border-color: var(--adaptive-primary) !important;
    box-shadow: 0 8px 16px -4px rgba(0, 121, 242, 0.25) !important;
}

.action-icon-btns .ico-container {
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, var(--adaptive-cyan) 100%) !important;
    border-radius: 50% !important;
    margin-bottom: 1rem !important;
    margin: 0 auto 1rem auto !important;
    box-shadow: 0 4px 15px var(--adaptive-primary-glow) !important;
    transition: all 0.3s ease !important;
}

.action-icon-btns a:nth-child(2) .ico-container {
    background: linear-gradient(135deg, var(--adaptive-purple) 0%, var(--adaptive-pink) 100%) !important;
    box-shadow: 0 4px 15px var(--adaptive-purple-glow) !important;
}

.action-icon-btns a:nth-child(3) .ico-container {
    background: linear-gradient(135deg, var(--adaptive-green) 0%, var(--adaptive-cyan) 100%) !important;
    box-shadow: 0 4px 15px var(--adaptive-green-glow) !important;
}

.action-icon-btns a:nth-child(4) .ico-container {
    background: linear-gradient(135deg, var(--adaptive-orange) 0%, var(--adaptive-pink) 100%) !important;
    box-shadow: 0 4px 15px var(--adaptive-orange-glow) !important;
}

.action-icon-btns a:hover .ico-container {
    transform: scale(1.1) rotate(5deg) !important;
    box-shadow: 0 8px 25px var(--adaptive-cyan-glow) !important;
}

.action-icon-btns .ico-container i {
    font-size: 1.5rem !important;
    color: #ffffff !important;
}

/* ========================================
   CARD FOOTER CLEANUP
   ======================================== */

/* Hide empty card footers */
.card-footer:empty {
    display: none !important;
    padding: 0 !important;
}

.card-footer {
    background-color: var(--adaptive-background-light) !important;
    border-top: 1px solid var(--adaptive-border) !important;
    padding: 0.75rem 1.25rem !important;
}

/* ========================================
   IMPROVED FOCUS STATES (ACCESSIBILITY)
   ======================================== */

.btn:focus,
.form-control:focus,
a:focus,
.nav-link:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 121, 242, 0.4) !important;
}

/* Skip focus ring for mouse users */
.btn:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    box-shadow: none !important;
}

/* ========================================
   LOADING SKELETON ANIMATION
   ======================================== */

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.loading-skeleton {
    background: linear-gradient(90deg,
        var(--adaptive-background-light) 25%,
        var(--adaptive-card-bg) 50%,
        var(--adaptive-background-light) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.25rem;
}

/* ========================================
   STATUS BADGES - ENHANCED
   ======================================== */

.badge-active, .label-active,
.badge-success, .label-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
}

.badge-pending, .label-pending,
.badge-warning, .label-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
}

.badge-suspended, .label-suspended,
.badge-danger, .label-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
}

.badge, .label {
    font-family: 'Roboto Mono', monospace !important;
    font-size: 0.75rem !important;
    padding: 0.35em 0.65em !important;
    border-radius: 0.375rem !important;
    font-weight: 500 !important;
}

/* ========================================
   MOBILE MENU IMPROVEMENTS
   ======================================== */

@media (max-width: 1199px) {
    #mainNavbar {
        background-color: var(--adaptive-card-bg) !important;
        border: 1px solid var(--adaptive-border) !important;
        border-radius: 0.5rem !important;
        padding: 1rem !important;
        margin-top: 0.5rem !important;
    }

    #mainNavbar .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        border-radius: 0.375rem !important;
    }

    #mainNavbar .navbar-nav .nav-link:hover {
        background-color: var(--adaptive-background-light) !important;
    }

    /* Mobile dropdown menus */
    #mainNavbar .dropdown-menu {
        background-color: var(--adaptive-background-light) !important;
        border: none !important;
        box-shadow: none !important;
        padding-left: 1rem !important;
    }
}

/* ========================================
   SCROLLBAR STYLING (DARK THEME)
   ======================================== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--adaptive-background);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: var(--adaptive-border-light);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--adaptive-primary);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--adaptive-border-light) var(--adaptive-background);
}

/* ========================================
   INVOICE & BILLING ENHANCEMENTS
   ======================================== */

.invoice-container,
#invoiceContainer {
    background-color: var(--adaptive-card-bg) !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
}

.invoice-header {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, var(--adaptive-primary-dark) 100%) !important;
    color: #ffffff !important;
    padding: 1.5rem !important;
}

/* ========================================
   DOMAIN SEARCH HERO - INNOVATIVE DESIGN
   ======================================== */

.domain-search-hero {
    position: relative !important;
    background: linear-gradient(135deg, var(--adaptive-background) 0%, rgba(5, 150, 105, 0.03) 30%, var(--adaptive-card-bg) 50%, rgba(0, 121, 242, 0.03) 70%, var(--adaptive-background-light) 100%) !important;
    border-top: 2px solid transparent !important;
    border-bottom: 2px solid transparent !important;
    border-image: linear-gradient(90deg, var(--adaptive-primary), var(--adaptive-logo-green), var(--adaptive-cyan)) 1 !important;
    padding: 3rem 0 !important;
    overflow: hidden !important;
}

.domain-hero-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.grid-lines {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image:
        linear-gradient(rgba(0, 121, 242, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 121, 242, 0.03) 1px, transparent 1px) !important;
    background-size: 50px 50px !important;
}

.floating-dot {
    position: absolute !important;
    border-radius: 50% !important;
    opacity: 0.12 !important;
    animation: floatDot 8s ease-in-out infinite !important;
}

.floating-dot.dot-1 {
    width: 300px !important;
    height: 300px !important;
    top: -100px !important;
    right: -50px !important;
    background: var(--adaptive-logo-green) !important;
    animation-delay: 0s !important;
}

.floating-dot.dot-2 {
    width: 200px !important;
    height: 200px !important;
    bottom: -50px !important;
    left: 10% !important;
    background: var(--adaptive-primary) !important;
    animation-delay: 2s !important;
}

.floating-dot.dot-3 {
    width: 150px !important;
    height: 150px !important;
    top: 20% !important;
    left: -50px !important;
    background: var(--adaptive-cyan) !important;
    animation-delay: 4s !important;
}

@keyframes floatDot {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -20px) scale(1.1); }
}

.domain-search-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

.domain-search-header {
    text-align: center !important;
    margin-bottom: 2rem !important;
}

.domain-icon-badge {
    width: 70px !important;
    height: 70px !important;
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 100%) !important;
    border-radius: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 1.25rem !important;
    box-shadow: 0 8px 32px var(--adaptive-logo-green-glow), 0 0 60px rgba(5, 150, 105, 0.2) !important;
    animation: iconFloat 4s ease-in-out infinite !important;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.domain-icon-badge i {
    font-size: 1.75rem !important;
    color: #ffffff !important;
}

/* Floating icon badge above "Why Serious .NET Apps Choose Us" — same idea as the
   domain-search badge (reuses @keyframes iconFloat), different icon (fa-server). */
.story-icon-badge {
    width: 70px !important;
    height: 70px !important;
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, var(--adaptive-cyan) 100%) !important;
    border-radius: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 10px auto 1.25rem !important;
    box-shadow: 0 8px 32px rgba(0, 121, 242, 0.4), 0 0 60px rgba(0, 121, 242, 0.2) !important;
    animation: iconFloat 4s ease-in-out infinite !important;
}
.story-icon-badge i {
    font-size: 1.75rem !important;
    color: #ffffff !important;
}

.domain-search-header h2 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-text) !important;
    margin: 0 0 0.5rem 0 !important;
}

.domain-subtitle {
    color: var(--adaptive-text-light) !important;
    font-size: 1rem !important;
    margin: 0 !important;
}

/* Domain Input Container */
.domain-input-wrapper {
    margin-bottom: 1.5rem !important;
}

.domain-input-container {
    display: flex !important;
    align-items: center !important;
    background: var(--adaptive-card-bg) !important;
    border: 2px solid var(--adaptive-border) !important;
    border-radius: 1rem !important;
    padding: 0.5rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

.domain-input-container:focus-within {
    border-color: var(--adaptive-primary) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(0, 121, 242, 0.15) !important;
}

.domain-input-container .input-icon {
    padding: 0 1rem !important;
    color: var(--adaptive-text-light) !important;
}

.domain-input-container .input-icon i {
    font-size: 1.1rem !important;
}

.domain-input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    color: var(--adaptive-text) !important;
    font-size: 1.1rem !important;
    padding: 0.75rem 0.5rem !important;
    outline: none !important;
}

.domain-input::placeholder {
    color: var(--adaptive-text-light) !important;
    opacity: 0.6 !important;
}

.domain-buttons {
    display: flex !important;
    gap: 0.5rem !important;
}

.btn-domain-search {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.875rem 1.5rem !important;
    border-radius: 0.625rem !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 15px var(--adaptive-logo-green-glow) !important;
}

.btn-domain-search:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, var(--adaptive-logo-green-light) 0%, #34d399 100%) !important;
    box-shadow: 0 6px 25px var(--adaptive-logo-green-glow), 0 0 40px rgba(5, 150, 105, 0.3) !important;
}

.btn-domain-search i {
    transition: transform 0.3s ease !important;
}

.btn-domain-search:hover i {
    transform: translateX(3px) !important;
}

/* Transfer Link */
.transfer-link {
    text-align: center !important;
    margin-top: 1rem !important;
}

.btn-transfer {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: transparent !important;
    color: var(--adaptive-text-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    padding: 0.625rem 1.25rem !important;
    border-radius: 2rem !important;
    font-size: 0.875rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.btn-transfer:hover {
    color: var(--adaptive-primary) !important;
    border-color: var(--adaptive-primary) !important;
    background: rgba(0, 121, 242, 0.1) !important;
}

/* Mobile Buttons */
.domain-buttons-mobile {
    display: none !important;
    gap: 0.75rem !important;
    margin-top: 1rem !important;
}

@media (max-width: 575px) {
    .domain-buttons {
        display: none !important;
    }

    .domain-buttons-mobile {
        display: flex !important;
    }

    .domain-buttons-mobile .btn-domain-search,
    .domain-buttons-mobile .btn-transfer {
        flex: 1 !important;
        justify-content: center !important;
    }
}

/* Featured TLDs */
.featured-tlds {
    margin-top: 2rem !important;
}

.tlds-header {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-bottom: 1.25rem !important;
}

.tlds-label {
    color: var(--adaptive-text-light) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    white-space: nowrap !important;
}

.tlds-divider {
    flex: 1 !important;
    height: 1px !important;
    background: linear-gradient(90deg, var(--adaptive-border), transparent) !important;
}

.tlds-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
}

@media (max-width: 767px) {
    .tlds-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 400px) {
    .tlds-grid {
        grid-template-columns: 1fr !important;
    }
}

.tld-card {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    padding: 1.25rem 1rem !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.tld-card:hover {
    border-color: var(--adaptive-logo-green) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px var(--adaptive-logo-green-glow) !important;
}

.tld-card.featured {
    background: linear-gradient(135deg, var(--adaptive-card-bg) 0%, rgba(5, 150, 105, 0.1) 100%) !important;
    border: 2px solid var(--adaptive-logo-green) !important;
    box-shadow: 0 0 20px var(--adaptive-logo-green-glow) !important;
}

.tld-popular {
    position: absolute !important;
    top: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 100%) !important;
    color: #ffffff !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 1rem !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 10px var(--adaptive-logo-green-glow) !important;
}

.tld-extension {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-text) !important;
    margin-bottom: 0.5rem !important;
}

.tld-card.featured .tld-extension {
    color: var(--adaptive-logo-green) !important;
}

.tld-price {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 0.25rem !important;
}

.price-amount {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--adaptive-text) !important;
}

.price-period {
    font-size: 0.75rem !important;
    color: var(--adaptive-text-light) !important;
}

.price-unavailable {
    font-size: 0.8rem !important;
    color: var(--adaptive-text-light) !important;
}

/* View All Link */
.view-all-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: var(--adaptive-primary) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.view-all-link:hover {
    color: var(--adaptive-primary-light) !important;
    gap: 0.75rem !important;
}

.view-all-link i {
    font-size: 0.75rem !important;
    transition: transform 0.3s ease !important;
}

.view-all-link:hover i {
    transform: translateX(3px) !important;
}

/* Hide old domain search styles */
.home-domain-search {
    display: none !important;
}

.tld-logos {
    display: none !important;
}

/* ========================================
   TOOLTIP ARROW FIX
   ======================================== */

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: var(--adaptive-secondary) !important;
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: var(--adaptive-secondary) !important;
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: var(--adaptive-secondary) !important;
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: var(--adaptive-secondary) !important;
}

/* ========================================
   POPOVER ARROW FIX
   ======================================== */

.popover .arrow::before,
.popover .arrow::after {
    border-color: transparent !important;
}

.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after {
    border-top-color: var(--adaptive-card-bg) !important;
}

.bs-popover-bottom .arrow::after,
.bs-popover-auto[x-placement^="bottom"] .arrow::after {
    border-bottom-color: var(--adaptive-card-bg) !important;
}

/* ========================================
   CLIENT ALERTS NOTIFICATION STYLING
   ======================================== */

.client-alerts {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 300px !important;
}

.client-alerts li {
    padding: 0 !important;
    margin: 0 !important;
}

.client-alerts li a {
    display: flex !important;
    align-items: flex-start !important;
    padding: 0.75rem !important;
    color: var(--adaptive-text) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    transition: background-color 0.2s ease !important;
}

.client-alerts li a:hover {
    background-color: var(--adaptive-background-light) !important;
}

.client-alerts li:last-child a {
    border-bottom: none !important;
}

.client-alerts li a i {
    margin-right: 0.75rem !important;
    margin-top: 0.2rem !important;
}

.client-alerts li a .message {
    flex: 1 !important;
    font-size: 0.9rem !important;
}

.client-alerts li.none {
    padding: 1rem !important;
    text-align: center !important;
    color: var(--adaptive-text-light) !important;
}

/* ========================================
   SERVICES SHOWCASE - INNOVATIVE DESIGN
   ======================================== */

.services-showcase {
    padding: 0 !important;
}

/* ========================================
   FEATURED PRODUCT HERO
   ======================================== */

.featured-product-hero {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
    background: linear-gradient(135deg, var(--adaptive-card-bg) 0%, var(--adaptive-background-light) 50%, var(--adaptive-card-bg) 100%) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 1rem !important;
    padding: 2.5rem !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    overflow: hidden !important;
    min-height: auto !important;
}

.featured-product-hero::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--adaptive-primary), var(--adaptive-logo-green), var(--adaptive-cyan)) !important;
}

.hero-glow {
    position: absolute !important;
    top: -50% !important;
    right: -20% !important;
    width: 500px !important;
    height: 500px !important;
    background: radial-gradient(circle, rgba(5, 150, 105, 0.12) 0%, rgba(0, 121, 242, 0.08) 40%, transparent 70%) !important;
    pointer-events: none !important;
    animation: pulseGlow 4s ease-in-out infinite !important;
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

.hero-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    z-index: 2 !important;
}

.hero-icon {
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, var(--adaptive-primary-dark) 100%) !important;
    border-radius: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 8px 24px rgba(0, 121, 242, 0.3) !important;
}

.hero-icon i {
    font-size: 1.5rem !important;
    color: #ffffff !important;
}

.hero-badge {
    display: inline-block !important;
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 100%) !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 0.35rem 0.75rem !important;
    border-radius: 2rem !important;
    box-shadow: 0 2px 10px var(--adaptive-logo-green-glow) !important;
    margin-bottom: 1rem !important;
    width: fit-content !important;
}

.hero-title {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-text) !important;
    margin: 0 0 0.75rem 0 !important;
    line-height: 1.2 !important;
}

.hero-description {
    color: var(--adaptive-text-light) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin: 0 0 1.25rem 0 !important;
}

.hero-features {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
}

.hero-features span {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: var(--adaptive-text) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
}

.hero-features span i {
    color: var(--adaptive-logo-green) !important;
    font-size: 0.9rem !important;
}

.btn-hero {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 100%) !important;
    color: #ffffff !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: 0.75rem !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 16px var(--adaptive-logo-green-glow) !important;
    width: fit-content !important;
}

.btn-hero:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, var(--adaptive-logo-green-light) 0%, #34d399 100%) !important;
    box-shadow: 0 8px 24px var(--adaptive-logo-green-glow), 0 0 40px rgba(5, 150, 105, 0.3) !important;
    color: #ffffff !important;
}

.btn-hero i {
    transition: transform 0.3s ease !important;
}

.btn-hero:hover i {
    transform: translateX(4px) !important;
}

/* Hero Visual Section */
.hero-visual {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1 !important;
}

.floating-element {
    position: absolute !important;
    width: 50px !important;
    height: 50px !important;
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 24px var(--adaptive-shadow-30) !important;
    animation: float 6s ease-in-out infinite !important;
}

.floating-element i {
    font-size: 1.25rem !important;
    color: var(--adaptive-primary) !important;
}

.floating-element.elem-1 {
    top: 10% !important;
    left: 10% !important;
    animation-delay: 0s !important;
}

.floating-element.elem-2 {
    top: 20% !important;
    right: 15% !important;
    animation-delay: 1s !important;
}

.floating-element.elem-3 {
    bottom: 20% !important;
    left: 20% !important;
    animation-delay: 2s !important;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.server-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding: 1.5rem !important;
    background: var(--adaptive-background) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 1rem !important;
}

.server-unit {
    width: 120px !important;
    height: 24px !important;
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.25rem !important;
    position: relative !important;
}

.server-unit::before {
    content: '' !important;
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 6px !important;
    height: 6px !important;
    background: var(--adaptive-border-light) !important;
    border-radius: 50% !important;
}

.server-unit.active::before {
    background: #10b981 !important;
    box-shadow: 0 0 8px #10b981 !important;
    animation: blink 2s ease-in-out infinite !important;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ========================================
   ADDITIONAL PRODUCTS MINI CARDS
   ======================================== */

.additional-products {
    margin-bottom: 1rem !important;
}

.product-card-mini {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    padding: 1rem 1.25rem !important;
    transition: all 0.3s ease !important;
}

.product-card-mini:hover {
    border-color: var(--adaptive-primary) !important;
    box-shadow: 0 4px 16px rgba(0, 121, 242, 0.15) !important;
    transform: translateX(4px) !important;
}

.mini-icon {
    width: 45px !important;
    height: 45px !important;
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, var(--adaptive-primary-dark) 100%) !important;
    border-radius: 0.625rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.mini-icon i {
    font-size: 1.1rem !important;
    color: #ffffff !important;
}

.mini-content {
    flex: 1 !important;
}

.mini-content h4 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--adaptive-text) !important;
    margin: 0 0 0.25rem 0 !important;
}

.mini-content p {
    font-size: 0.85rem !important;
    color: var(--adaptive-text-light) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.mini-cta {
    width: 36px !important;
    height: 36px !important;
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
}

.mini-cta i {
    color: var(--adaptive-text-light) !important;
    font-size: 0.8rem !important;
    transition: all 0.3s ease !important;
}

.product-card-mini:hover .mini-cta {
    background: var(--adaptive-primary) !important;
    border-color: var(--adaptive-primary) !important;
}

.product-card-mini:hover .mini-cta i {
    color: #ffffff !important;
    transform: translateX(2px) !important;
}

/* ========================================
   DOMAIN ACTIONS BAR
   ======================================== */

.domain-actions-bar {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    margin-top: 0.5rem !important;
}

.domain-bar-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 1rem 1.5rem !important;
    background: var(--adaptive-background-light) !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
}

.domain-bar-header i {
    font-size: 1.25rem !important;
    color: var(--adaptive-primary) !important;
}

.domain-bar-header h3 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--adaptive-text) !important;
    margin: 0 !important;
}

.domain-bar-actions {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: stretch !important;
}

.domain-action {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1.25rem 1.5rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.domain-action:hover {
    background: var(--adaptive-background-light) !important;
}

.domain-action .action-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 0.625rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
}

.domain-action.register .action-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.domain-action.transfer .action-icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
}

.domain-action .action-icon i {
    font-size: 1.1rem !important;
    color: #ffffff !important;
}

.domain-action .action-content {
    flex: 1 !important;
}

.domain-action .action-content strong {
    display: block !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--adaptive-text) !important;
    margin-bottom: 0.2rem !important;
}

.domain-action .action-content span {
    font-size: 0.8rem !important;
    color: var(--adaptive-text-light) !important;
}

.domain-action .action-arrow {
    color: var(--adaptive-text-light) !important;
    font-size: 0.9rem !important;
    transition: all 0.3s ease !important;
    opacity: 0 !important;
    transform: translateX(-10px) !important;
}

.domain-action:hover .action-arrow {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.domain-divider {
    width: 1px !important;
    background: var(--adaptive-border) !important;
    margin: 0.75rem 0 !important;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .featured-product-hero {
        grid-template-columns: 1fr !important;
        padding: 2rem !important;
        min-height: auto !important;
    }

    .hero-visual {
        display: none !important;
    }

    .domain-bar-actions {
        grid-template-columns: 1fr !important;
    }

    .domain-divider {
        width: 100% !important;
        height: 1px !important;
        margin: 0 !important;
    }
}

@media (max-width: 575px) {
    .featured-product-hero {
        padding: 1.5rem !important;
        border-radius: 1rem !important;
    }

    .hero-title {
        font-size: 1.35rem !important;
    }

    .hero-features {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .btn-hero {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ========================================
   MAIN BODY LAYOUT ALIGNMENT
   ======================================== */

#main-body {
    padding-top: 2rem !important;
}

#main-body > .container > .row {
    align-items: flex-start !important;
}

/* Remove extra top margin from primary content */
.primary-content {
    padding-top: 0 !important;
}

.primary-content > *:first-child {
    margin-top: 0 !important;
}

/* ========================================
   HIDE DUPLICATE SECONDARY SIDEBAR
   ======================================== */

/* Secondary sidebar should only show on mobile - AGGRESSIVE HIDE */
.sidebar-secondary,
.sidebar.sidebar-secondary,
.d-lg-none.sidebar,
.d-lg-none.sidebar-secondary,
.primary-content + .sidebar,
.primary-content ~ .sidebar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Only show on small screens if needed */
@media (max-width: 991px) {
    .sidebar-secondary,
    .d-lg-none.sidebar {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
        opacity: 1 !important;
        position: relative !important;
        left: auto !important;
        margin-top: 2rem !important;
    }
}

/* ========================================
   SIDEBAR CARDS - INNOVATIVE REDESIGN
   ======================================== */

.sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.sidebar > *:first-child {
    margin-top: 0 !important;
}

.card-sidebar {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
    margin-top: 0 !important;
}

.card-sidebar:first-child {
    margin-top: 0 !important;
}

/* Ensure mb-3 class doesn't add unwanted spacing */
.sidebar .card-sidebar.mb-3 {
    margin-bottom: 1rem !important;
}

.sidebar .card-sidebar.mb-3:first-child {
    margin-top: 0 !important;
}

.card-sidebar:hover {
    box-shadow: 0 8px 24px var(--adaptive-shadow-30) !important;
    border-color: var(--adaptive-primary) !important;
}

/* Sidebar Card Header */
.card-sidebar .card-header {
    background: linear-gradient(135deg, var(--adaptive-background-light) 0%, var(--adaptive-card-bg) 100%) !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    padding: 1rem 1.25rem !important;
    position: relative !important;
}

.card-sidebar .card-header::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--adaptive-primary), var(--adaptive-primary-light)) !important;
}

.card-sidebar .card-header .card-title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--adaptive-text) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.card-sidebar .card-header .card-title i:first-child {
    color: var(--adaptive-primary) !important;
}

.card-sidebar .card-minimise {
    opacity: 0.5 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.card-sidebar:hover .card-minimise {
    opacity: 1 !important;
    color: var(--adaptive-primary) !important;
}

   COLLAPSIBLE SIDEBAR ANIMATION
   ======================================== */

.collapsable-card-body {
    transition: all 0.3s ease !important;
}

.card-sidebar.collapsed .collapsable-card-body {
    display: none !important;
}

.card-sidebar.collapsed .card-minimise {
    transform: rotate(180deg) !important;
}

/* ========================================
   LOGIN PAGE - SPLIT SCREEN DESIGN
   ======================================== */

.login-page-wrapper {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.login-split-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    background: var(--adaptive-card-bg) !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px var(--adaptive-shadow-30) !important;
    border: 1px solid var(--adaptive-border) !important;
    margin: 0 !important;
}

/* Left Side - Branding */
.login-brand-side {
    position: relative !important;
    background: linear-gradient(135deg, var(--adaptive-primary-dark) 0%, var(--adaptive-primary) 50%, var(--adaptive-primary-light) 100%) !important;
    padding: 3rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.brand-bg-elements {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    pointer-events: none !important;
}

.brand-circle {
    position: absolute !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.brand-circle.circle-1 {
    width: 300px !important;
    height: 300px !important;
    top: -100px !important;
    right: -100px !important;
    animation: float 8s ease-in-out infinite !important;
}

.brand-circle.circle-2 {
    width: 200px !important;
    height: 200px !important;
    bottom: -50px !important;
    left: -50px !important;
    animation: float 6s ease-in-out infinite reverse !important;
}

.brand-circle.circle-3 {
    width: 100px !important;
    height: 100px !important;
    top: 50% !important;
    right: 20% !important;
    animation: float 10s ease-in-out infinite !important;
}

.brand-grid {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
}

.brand-content {
    position: relative !important;
    z-index: 2 !important;
    color: #ffffff !important;
}

.brand-logo {
    width: 80px !important;
    height: 80px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1.5rem !important;
    backdrop-filter: blur(10px) !important;
}

.brand-logo i {
    font-size: 2rem !important;
    color: #ffffff !important;
}

.brand-content h1 {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    margin: 0 0 0.5rem 0 !important;
}

.brand-tagline {
    font-size: 1.1rem !important;
    opacity: 0.9 !important;
    margin: 0 0 2.5rem 0 !important;
}

.brand-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
}

.feature-item {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.feature-icon {
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 0.625rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.feature-icon i {
    font-size: 1rem !important;
    color: #ffffff !important;
}

.feature-text {
    display: flex !important;
    flex-direction: column !important;
}

.feature-text strong {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

.feature-text span {
    font-size: 0.85rem !important;
    opacity: 0.8 !important;
}

/* Right Side - Login Form */
.login-form-side {
    padding: 3rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.login-form-modern {
    max-width: 380px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

.login-form-header {
    margin-bottom: 2rem !important;
}

.login-form-header h2 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-text) !important;
    margin: 0 0 0.5rem 0 !important;
}

.login-form-header p {
    color: var(--adaptive-text-light) !important;
    margin: 0 !important;
}

.form-group-modern {
    margin-bottom: 1.25rem !important;
}

.form-group-modern label {
    display: block !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--adaptive-text) !important;
    margin-bottom: 0.5rem !important;
}

.label-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0.5rem !important;
}

.forgot-link {
    font-size: 0.8rem !important;
    color: var(--adaptive-primary) !important;
    text-decoration: none !important;
}

.forgot-link:hover {
    text-decoration: underline !important;
}

.input-modern {
    display: flex !important;
    align-items: center !important;
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.625rem !important;
    padding: 0 1rem !important;
    transition: all 0.3s ease !important;
}

.input-modern:focus-within {
    border-color: var(--adaptive-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 121, 242, 0.15) !important;
}

.input-modern i {
    color: var(--adaptive-text-light) !important;
    font-size: 0.9rem !important;
    margin-right: 0.75rem !important;
}

.input-modern input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    color: var(--adaptive-text) !important;
    padding: 0.875rem 0 !important;
    font-size: 0.95rem !important;
    outline: none !important;
}

.input-modern input::placeholder {
    color: var(--adaptive-text-light) !important;
    opacity: 0.6 !important;
}

.input-modern.has-toggle {
    padding-right: 0 !important;
}

.input-modern .btn-reveal-pw {
    background: transparent !important;
    border: none !important;
    color: var(--adaptive-text-light) !important;
    padding: 0.875rem 1rem !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

.input-modern .btn-reveal-pw:hover {
    color: var(--adaptive-primary) !important;
}

/* Checkbox */
.remember-row {
    margin-top: 1.5rem !important;
}

.checkbox-modern {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    color: var(--adaptive-text) !important;
}

.checkbox-modern input {
    display: none !important;
}

.checkbox-modern .checkmark {
    width: 20px !important;
    height: 20px !important;
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.375rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.checkbox-modern input:checked + .checkmark {
    background: var(--adaptive-primary) !important;
    border-color: var(--adaptive-primary) !important;
}

.checkbox-modern input:checked + .checkmark::after {
    content: '\f00c' !important;
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    font-size: 0.7rem !important;
    color: #ffffff !important;
}

/* Submit Button */
.btn-login-submit {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, var(--adaptive-primary-dark) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 1rem !important;
    border-radius: 0.625rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 1.5rem !important;
}

.btn-login-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 121, 242, 0.4) !important;
}

.btn-login-submit i {
    transition: transform 0.3s ease !important;
}

.btn-login-submit:hover i {
    transform: translateX(4px) !important;
}

/* Footer */
.login-footer {
    text-align: center !important;
    margin-top: 2rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid var(--adaptive-border) !important;
}

.login-footer span {
    color: var(--adaptive-text-light) !important;
    font-size: 0.875rem !important;
}

.login-footer a {
    color: var(--adaptive-primary) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin-left: 0.25rem !important;
}

.login-footer a:hover {
    text-decoration: underline !important;
}

/* Captcha wrapper */
.captcha-wrapper {
    margin: 1rem 0 !important;
}

/* Responsive */
@media (max-width: 991px) {
    .login-split-container {
        grid-template-columns: 1fr !important;
    }

    .login-brand-side {
        display: none !important;
    }

    .login-form-side {
        padding: 2rem !important;
    }
}

@media (max-width: 575px) {
    .login-form-side {
        padding: 1.5rem !important;
    }

    .login-form-header h2 {
        font-size: 1.5rem !important;
    }
}

/* Hide old login card */
.login-form > .card.mw-540 {
    display: none !important;
}

/* ========================================
   SUPPORT TICKETS - ENHANCED STYLING
   ======================================== */

/* View Ticket Container */
.view-ticket {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
}

.view-ticket .card-body:first-child {
    background: linear-gradient(135deg, var(--adaptive-background-light) 0%, var(--adaptive-card-bg) 100%) !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
}

.view-ticket .card-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: var(--adaptive-text) !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

.ticket-actions .btn {
    border-radius: 0.5rem !important;
}

/* Ticket Reply Thread */
.ticket-reply {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    margin-bottom: 1rem !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.ticket-reply:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Client (Customer) Messages */
.ticket-reply:not(.staff) {
    border-left: 4px solid var(--adaptive-primary) !important;
    background: linear-gradient(135deg, rgba(0, 121, 242, 0.05) 0%, var(--adaptive-card-bg) 100%) !important;
}

.ticket-reply:not(.staff) .posted-by {
    background: linear-gradient(135deg, rgba(0, 121, 242, 0.1) 0%, transparent 100%) !important;
    border-bottom: 1px solid rgba(0, 121, 242, 0.15) !important;
    padding: 0.875rem 1rem !important;
}

.ticket-reply:not(.staff) .posted-by-name {
    color: var(--adaptive-primary) !important;
    font-weight: 600 !important;
}

/* Staff Messages */
.ticket-reply.staff {
    border-left: 4px solid #10b981 !important;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, var(--adaptive-card-bg) 100%) !important;
}

.ticket-reply.staff .posted-by {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, transparent 100%) !important;
    border-bottom: 1px solid rgba(16, 185, 129, 0.15) !important;
    padding: 0.875rem 1rem !important;
}

.ticket-reply.staff .posted-by-name {
    color: #10b981 !important;
    font-weight: 600 !important;
}

/* Posted By Section */
.ticket-reply .posted-by {
    font-size: 0.875rem !important;
    color: var(--adaptive-text-light) !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

.ticket-reply .posted-on {
    color: var(--adaptive-text-light) !important;
    font-size: 0.8rem !important;
}

/* Requestor Badge */
.requestor-badge {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.625rem !important;
    border-radius: 2rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

.requestor-type-client {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, var(--adaptive-primary-dark) 100%) !important;
    color: #ffffff !important;
}

.requestor-type-owner {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, var(--adaptive-primary-dark) 100%) !important;
    color: #ffffff !important;
}

.requestor-type-operator,
.requestor-type-admin {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
}

/* Message Content */
.ticket-reply .message {
    color: var(--adaptive-text) !important;
    line-height: 1.7 !important;
    font-size: 0.95rem !important;
}

.ticket-reply .message p {
    margin-bottom: 1rem !important;
}

.ticket-reply .message p:last-child {
    margin-bottom: 0 !important;
}

.ticket-reply .message hr {
    border-color: var(--adaptive-border) !important;
    margin: 1rem 0 !important;
}

/* Attachments */
.ticket-reply .attachments {
    background: var(--adaptive-background-light) !important;
    border-top: 1px solid var(--adaptive-border) !important;
}

.ticket-reply .attachments strong {
    color: var(--adaptive-text) !important;
    font-size: 0.875rem !important;
}

.ticket-reply .attachments .attachment {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0.5rem 0.25rem 0 0 !important;
    font-size: 0.85rem !important;
    color: var(--adaptive-text) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.ticket-reply .attachments .attachment:hover {
    border-color: var(--adaptive-primary) !important;
    color: var(--adaptive-primary) !important;
}

.ticket-reply .attachments .attachment i {
    color: var(--adaptive-primary) !important;
}

/* Star Rating */
.ticket-reply .rating,
.ticket-reply .rating-done {
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid var(--adaptive-border) !important;
}

.ticket-reply .rating .star,
.ticket-reply .rating-done .star {
    width: 24px !important;
    height: 24px !important;
    cursor: pointer !important;
    background: var(--adaptive-background-light) !important;
    border-radius: 0.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.ticket-reply .rating .star::before,
.ticket-reply .rating-done .star::before {
    content: '\f005' !important;
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free' !important;
    font-weight: 400 !important;
    color: var(--adaptive-text-light) !important;
    font-size: 0.875rem !important;
}

.ticket-reply .rating .star:hover,
.ticket-reply .rating .star:hover ~ .star,
.ticket-reply .rating-done .star.active {
    background: #f59e0b !important;
}

.ticket-reply .rating .star:hover::before,
.ticket-reply .rating .star:hover ~ .star::before,
.ticket-reply .rating-done .star.active::before {
    font-weight: 900 !important;
    color: #ffffff !important;
}

.ticket-reply .rated {
    margin-left: 0.75rem !important;
    font-size: 0.8rem !important;
    color: var(--adaptive-text-light) !important;
    font-style: italic !important;
}

/* Ticket Reply Form */
#ticketReplyContainer {
    margin-top: 2rem !important;
}

#ticketReplyContainer .card {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
}

#ticketReplyContainer .card-header {
    background: var(--adaptive-background-light) !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    padding: 1rem 1.25rem !important;
}

#ticketReplyContainer textarea {
    min-height: 150px !important;
}

/* Ticket Status Badge */
.ticket-status {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.35rem 0.75rem !important;
    border-radius: 2rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

.ticket-status-open {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
}

.ticket-status-answered {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, var(--adaptive-primary-dark) 100%) !important;
    color: #ffffff !important;
}

.ticket-status-customer-reply {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
}

.ticket-status-closed {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
    color: #ffffff !important;
}

.ticket-status-on-hold {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
}

.ticket-status-in-progress {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    color: #ffffff !important;
}

/* ========================================
   INVOICE PAGE - DARK THEME
   ======================================== */

/* Invoice Container */
.invoice-container {
    background: var(--adaptive-background) !important;
    color: var(--adaptive-text) !important;
    min-height: 100vh !important;
    padding: 2rem !important;
}

/* Invoice Header */
.invoice-header {
    background: linear-gradient(135deg, var(--adaptive-card-bg) 0%, var(--adaptive-background-light) 100%) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 1rem !important;
    padding: 2rem !important;
    margin-bottom: 1.5rem !important;
}

.invoice-header h2,
.invoice-header h3 {
    color: var(--adaptive-text) !important;
}

.invoice-col {
    color: var(--adaptive-text) !important;
}

/* Invoice Status Badges */
.invoice-status span {
    display: inline-block !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 2rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.invoice-status .paid {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
}

.invoice-status .unpaid {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
}

.invoice-status .cancelled {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
    color: #ffffff !important;
}

.invoice-status .refunded {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
}

.invoice-status .collections {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
}

.invoice-status .draft {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    color: #ffffff !important;
}

/* Invoice Info Sections */
.invoice-container .small-text {
    color: var(--adaptive-text-light) !important;
    font-size: 0.875rem !important;
    margin-top: 0.5rem !important;
}

/* Invoice Details Card */
.invoice-container .card,
.invoice-container .panel {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    color: var(--adaptive-text) !important;
}

.invoice-container .card-header,
.invoice-container .panel-heading {
    background: var(--adaptive-background-light) !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
}

/* Invoice Table */
.invoice-container table {
    background: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
}

.invoice-container table thead th {
    background: var(--adaptive-background-light) !important;
    color: var(--adaptive-text) !important;
    border-bottom: 2px solid var(--adaptive-border) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
    padding: 1rem !important;
}

.invoice-container table tbody td {
    border-bottom: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
    padding: 1rem !important;
}

.invoice-container table tbody tr:hover {
    background: rgba(0, 121, 242, 0.05) !important;
}

.invoice-container table tfoot td {
    background: var(--adaptive-background-light) !important;
    border-top: 2px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
    font-weight: 600 !important;
    padding: 1rem !important;
}

/* Invoice Totals */
.invoice-container .total-row td {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-primary) !important;
}

/* Invoice Billing/Payment Info */
.invoice-container .billing-info,
.invoice-container .payment-info {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.invoice-container .billing-info h4,
.invoice-container .payment-info h4 {
    color: var(--adaptive-text) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
}

.invoice-container address {
    color: var(--adaptive-text-light) !important;
    font-style: normal !important;
    line-height: 1.8 !important;
}

/* Payment Button */
.payment-btn-container {
    margin-top: 1.5rem !important;
}

.payment-btn-container .btn {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, var(--adaptive-primary-dark) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.875rem 2rem !important;
    border-radius: 0.625rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.payment-btn-container .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 121, 242, 0.4) !important;
}

/* Invoice HR */
.invoice-container hr {
    border-color: var(--adaptive-border) !important;
    margin: 1.5rem 0 !important;
}

/* Invoice Notes */
.invoice-container .notes {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
    color: var(--adaptive-text-light) !important;
    font-size: 0.875rem !important;
}

/* Print Styles */
@media print {
    .invoice-container {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .invoice-container table,
    .invoice-container .card,
    .invoice-container .billing-info,
    .invoice-container .payment-info {
        background: #ffffff !important;
        color: #000000 !important;
        border-color: #dee2e6 !important;
    }

    .invoice-container table thead th {
        background: #f8f9fa !important;
        color: #000000 !important;
    }

    .invoice-container table tbody td,
    .invoice-container table tfoot td {
        color: #000000 !important;
    }

    .invoice-header {
        background: #f8f9fa !important;
    }

    .d-print-none {
        display: none !important;
    }
}

/* Invoice Transactions */
.invoice-container .transactions {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    margin-top: 1.5rem !important;
}

.invoice-container .transactions h4 {
    background: var(--adaptive-background-light) !important;
    color: var(--adaptive-text) !important;
    padding: 1rem 1.25rem !important;
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
}

/* Related Invoices */
.invoice-container .related-invoices a {
    color: var(--adaptive-primary) !important;
    text-decoration: none !important;
}

.invoice-container .related-invoices a:hover {
    text-decoration: underline !important;
}

/* ========================================
   REGISTRATION PAGE - SPLIT-SCREEN DESIGN
   ======================================== */

.register-page-wrapper {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.register-split-container {
    display: flex !important;
    min-height: auto !important;
    background: transparent !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    box-shadow: 0 25px 80px var(--adaptive-shadow-40) !important;
}

/* Left Brand Side - Similar to Login */
.register-brand-side {
    flex: 0 0 380px !important;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
    padding: 3rem 2.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.register-brand-side .brand-bg-elements {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
}

.register-brand-side .brand-circle {
    position: absolute !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(0, 121, 242, 0.15) 0%, rgba(0, 121, 242, 0.05) 100%) !important;
}

.register-brand-side .circle-1 {
    width: 300px !important;
    height: 300px !important;
    top: -100px !important;
    right: -100px !important;
    animation: float 8s ease-in-out infinite !important;
}

.register-brand-side .circle-2 {
    width: 200px !important;
    height: 200px !important;
    bottom: -50px !important;
    left: -50px !important;
    animation: float 6s ease-in-out infinite reverse !important;
}

.register-brand-side .circle-3 {
    width: 100px !important;
    height: 100px !important;
    top: 50% !important;
    left: 20% !important;
    animation: float 10s ease-in-out infinite !important;
}

.register-brand-side .brand-grid {
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(rgba(0, 121, 242, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 121, 242, 0.03) 1px, transparent 1px) !important;
    background-size: 30px 30px !important;
}

.register-brand-side .brand-content {
    position: relative !important;
    z-index: 2 !important;
}

.register-brand-side .brand-logo {
    width: 80px !important;
    height: 80px !important;
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, #0056b3 100%) !important;
    border-radius: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 2rem !important;
    box-shadow: 0 15px 40px rgba(0, 121, 242, 0.4) !important;
}

.register-brand-side .brand-logo i {
    font-size: 2.5rem !important;
    color: #ffffff !important;
}

.register-brand-side h1 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 0.5rem !important;
}

.register-brand-side .brand-tagline {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 1rem !important;
    margin-bottom: 2.5rem !important;
}

.register-brand-side .brand-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    margin-bottom: 2.5rem !important;
}

.register-brand-side .feature-item {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.register-brand-side .feature-icon {
    width: 40px !important;
    height: 40px !important;
    background: rgba(0, 121, 242, 0.2) !important;
    border-radius: 0.625rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.register-brand-side .feature-icon i {
    font-size: 1rem !important;
    color: var(--adaptive-primary) !important;
}

.register-brand-side .feature-text {
    display: flex !important;
    flex-direction: column !important;
}

.register-brand-side .feature-text strong {
    color: #ffffff !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}

.register-brand-side .feature-text span {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.8rem !important;
}

/* Brand Stats */
.brand-stats {
    display: flex !important;
    gap: 1.5rem !important;
    padding-top: 2rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.stat-number {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-primary) !important;
}

.stat-label {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Right Form Side */
.register-form-side {
    flex: 1 !important;
    background: var(--adaptive-card-bg) !important;
    padding: 2.5rem 3rem !important;
    overflow-y: auto !important;
    max-height: 85vh !important;
}

.register-form-modern {
    max-width: 100% !important;
}

.register-form-header {
    margin-bottom: 2rem !important;
}

.register-form-header h2 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-text) !important;
    margin-bottom: 0.5rem !important;
}

.register-form-header p {
    color: var(--adaptive-text-light) !important;
    font-size: 0.95rem !important;
}

/* Registration Sections */
.register-section {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.section-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-bottom: 1.25rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
}

.section-header i {
    width: 36px !important;
    height: 36px !important;
    background: rgba(0, 121, 242, 0.15) !important;
    border-radius: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--adaptive-primary) !important;
    font-size: 1rem !important;
}

.section-header h3 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--adaptive-text) !important;
    margin: 0 !important;
}

.section-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

/* Form Rows */
.register-form-modern .form-row {
    display: flex !important;
    gap: 1rem !important;
}

.register-form-modern .form-group-modern {
    flex: 1 !important;
    margin-bottom: 0 !important;
}

.register-form-modern .form-group-modern.half {
    flex: 0 0 calc(50% - 0.5rem) !important;
}

.register-form-modern .form-group-modern.third {
    flex: 0 0 calc(33.333% - 0.667rem) !important;
}

.register-form-modern .form-group-modern label {
    display: block !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--adaptive-text) !important;
    margin-bottom: 0.5rem !important;
}

.register-form-modern .form-group-modern label .optional {
    color: var(--adaptive-text-light) !important;
    font-weight: 400 !important;
    font-size: 0.8rem !important;
}

.register-form-modern .input-modern {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.register-form-modern .input-modern i:first-child {
    position: absolute !important;
    left: 1rem !important;
    color: var(--adaptive-text-light) !important;
    font-size: 0.9rem !important;
    z-index: 2 !important;
}

.register-form-modern .input-modern input,
.register-form-modern .input-modern select {
    width: 100% !important;
    padding: 0.75rem 1rem 0.75rem 2.75rem !important;
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.5rem !important;
    color: var(--adaptive-text) !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
}

.register-form-modern .input-modern input:focus,
.register-form-modern .input-modern select:focus {
    border-color: var(--adaptive-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 121, 242, 0.1) !important;
}

.register-form-modern .input-modern input::placeholder {
    color: var(--adaptive-text-light) !important;
    opacity: 0.6 !important;
}

/* Select Wrapper */
.register-form-modern .select-wrapper select {
    appearance: none !important;
    cursor: pointer !important;
    padding-right: 2.5rem !important;
}

.register-form-modern .select-wrapper::after {
    content: '\f078' !important;
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    position: absolute !important;
    right: 1rem !important;
    color: var(--adaptive-text-light) !important;
    font-size: 0.75rem !important;
    pointer-events: none !important;
}

/* Password Toggle */
.register-form-modern .input-modern.has-toggle input {
    padding-right: 3rem !important;
}

.register-form-modern .btn-reveal-pw {
    position: absolute !important;
    right: 0.75rem !important;
    background: transparent !important;
    border: none !important;
    color: var(--adaptive-text-light) !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
    transition: color 0.2s ease !important;
}

.register-form-modern .btn-reveal-pw:hover {
    color: var(--adaptive-primary) !important;
}

/* Password Tools */
.password-tools {
    margin-top: 1rem !important;
    align-items: center !important;
}

.btn-generate-password {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
    padding: 0.625rem 1rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.2s ease !important;
}

.btn-generate-password:hover {
    border-color: var(--adaptive-primary) !important;
    color: var(--adaptive-primary) !important;
}

.btn-generate-password i {
    font-size: 0.9rem !important;
}

/* Password Strength Meter */
.password-strength-meter {
    width: 100% !important;
}

.password-strength-meter .progress {
    height: 6px !important;
    background: var(--adaptive-border) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    margin-bottom: 0.5rem !important;
}

.password-strength-meter .progress-bar {
    height: 100% !important;
    transition: width 0.3s ease, background-color 0.3s ease !important;
}

.password-strength-meter .strength-text {
    font-size: 0.75rem !important;
    color: var(--adaptive-text-light) !important;
    margin: 0 !important;
    text-align: center !important;
}

/* Custom Field Input */
.custom-field-input {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem !important;
}

.custom-field-input input,
.custom-field-input select,
.custom-field-input textarea {
    background: transparent !important;
    border: none !important;
    color: var(--adaptive-text) !important;
    width: 100% !important;
    padding: 0.5rem !important;
}

.field-help-text {
    display: block !important;
    font-size: 0.75rem !important;
    color: var(--adaptive-text-light) !important;
    margin-top: 0.25rem !important;
    padding-left: 0.5rem !important;
}

/* Marketing Section */
.marketing-section {
    padding: 1.25rem !important;
}

.marketing-content {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.marketing-icon {
    width: 48px !important;
    height: 48px !important;
    background: linear-gradient(135deg, rgba(0, 121, 242, 0.2) 0%, rgba(0, 121, 242, 0.1) 100%) !important;
    border-radius: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.marketing-icon i {
    font-size: 1.25rem !important;
    color: var(--adaptive-primary) !important;
}

.marketing-text {
    flex: 1 !important;
}

.marketing-text h4 {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--adaptive-text) !important;
    margin: 0 0 0.25rem 0 !important;
}

.marketing-text p {
    font-size: 0.8rem !important;
    color: var(--adaptive-text-light) !important;
    margin: 0 !important;
}

/* Toggle Switch */
.toggle-switch {
    position: relative !important;
    display: inline-block !important;
    width: 50px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
}

.toggle-switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.toggle-slider {
    position: absolute !important;
    cursor: pointer !important;
    inset: 0 !important;
    background: var(--adaptive-border) !important;
    border-radius: 26px !important;
    transition: all 0.3s ease !important;
}

.toggle-slider::before {
    content: '' !important;
    position: absolute !important;
    height: 20px !important;
    width: 20px !important;
    left: 3px !important;
    bottom: 3px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--adaptive-primary) !important;
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(24px) !important;
}

/* TOS Agreement */
.tos-agreement {
    padding: 1rem 0 !important;
}

.tos-agreement .checkbox-modern {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    color: var(--adaptive-text-light) !important;
}

.tos-agreement .checkbox-modern input {
    display: none !important;
}

.tos-agreement .checkmark {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--adaptive-border) !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.tos-agreement .checkbox-modern input:checked + .checkmark {
    background: var(--adaptive-primary) !important;
    border-color: var(--adaptive-primary) !important;
}

.tos-agreement .checkbox-modern input:checked + .checkmark::after {
    content: '\f00c' !important;
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    font-size: 0.65rem !important;
    color: #ffffff !important;
}

.tos-agreement a {
    color: var(--adaptive-primary) !important;
    text-decoration: none !important;
}

.tos-agreement a:hover {
    text-decoration: underline !important;
}

/* Submit Button */
.btn-register-submit {
    width: 100% !important;
    padding: 1rem 2rem !important;
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, #0056b3 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0.625rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    transition: all 0.3s ease !important;
    margin-top: 1rem !important;
}

.btn-register-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(0, 121, 242, 0.4) !important;
}

.btn-register-submit i {
    transition: transform 0.3s ease !important;
}

.btn-register-submit:hover i {
    transform: translateX(4px) !important;
}

/* Register Footer */
.register-footer {
    text-align: center !important;
    padding-top: 1.5rem !important;
    margin-top: 1.5rem !important;
    border-top: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text-light) !important;
    font-size: 0.9rem !important;
}

.register-footer a {
    color: var(--adaptive-primary) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    margin-left: 0.5rem !important;
}

.register-footer a:hover {
    text-decoration: underline !important;
}

/* Responsive Design */
@media (max-width: 992px) {
    .register-split-container {
        flex-direction: column !important;
    }

    .register-brand-side {
        flex: none !important;
        padding: 2rem !important;
    }

    .brand-stats {
        justify-content: center !important;
    }

    .register-form-side {
        padding: 2rem !important;
        max-height: none !important;
    }

    .register-form-modern .form-row {
        flex-direction: column !important;
    }

    .register-form-modern .form-group-modern.half,
    .register-form-modern .form-group-modern.third {
        flex: 1 !important;
    }
}

/* ========================================
   PASSWORD RESET PAGES - MODERN STYLING
   ======================================== */

.password-reset-wrapper {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

.password-reset-container {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

.password-reset-card {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    box-shadow: 0 25px 80px var(--adaptive-shadow-40) !important;
    max-width: 480px !important;
    width: 100% !important;
}

.reset-card-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    padding: 2.5rem 2rem !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.reset-card-header::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(rgba(0, 121, 242, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 121, 242, 0.03) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
}

.reset-icon {
    width: 70px !important;
    height: 70px !important;
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, #0056b3 100%) !important;
    border-radius: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 1.5rem !important;
    position: relative !important;
    box-shadow: 0 15px 40px rgba(0, 121, 242, 0.4) !important;
}

.reset-icon i {
    font-size: 2rem !important;
    color: #ffffff !important;
}

.reset-card-header h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 0.5rem 0 !important;
    position: relative !important;
}

.reset-card-header p {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
    position: relative !important;
}

.reset-card-body {
    padding: 2rem !important;
}

.reset-instructions {
    color: var(--adaptive-text-light) !important;
    font-size: 0.9rem !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.6 !important;
}

/* Reset Alerts */
.reset-alert {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
    border-radius: 0.5rem !important;
    margin-bottom: 1.5rem !important;
}

.reset-alert.error {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}

.reset-alert.success {
    background: rgba(34, 197, 94, 0.1) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    color: #22c55e !important;
}

.reset-alert i {
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
}

.success-message {
    color: var(--adaptive-text-light) !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
}

/* Reset Form */
.reset-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
}

.reset-form .form-group-modern {
    margin-bottom: 0 !important;
}

.reset-form .form-group-modern label {
    display: block !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--adaptive-text) !important;
    margin-bottom: 0.5rem !important;
}

.reset-form .input-modern {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.reset-form .input-modern i:first-child {
    position: absolute !important;
    left: 1rem !important;
    color: var(--adaptive-text-light) !important;
    font-size: 0.9rem !important;
    z-index: 2 !important;
}

.reset-form .input-modern input {
    width: 100% !important;
    padding: 0.875rem 1rem 0.875rem 2.75rem !important;
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.5rem !important;
    color: var(--adaptive-text) !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
}

.reset-form .input-modern input:focus {
    border-color: var(--adaptive-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 121, 242, 0.1) !important;
}

.reset-form .input-modern input::placeholder {
    color: var(--adaptive-text-light) !important;
    opacity: 0.6 !important;
}

/* Password Toggle in Reset Form */
.reset-form .input-modern.has-toggle input {
    padding-right: 3rem !important;
}

.reset-form .btn-reveal-pw {
    position: absolute !important;
    right: 0.75rem !important;
    background: transparent !important;
    border: none !important;
    color: var(--adaptive-text-light) !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
    transition: color 0.2s ease !important;
}

.reset-form .btn-reveal-pw:hover {
    color: var(--adaptive-primary) !important;
}

/* Password Strength Section */
.password-strength-section {
    margin-top: 0.5rem !important;
}

.password-strength-section label {
    display: block !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--adaptive-text) !important;
    margin-bottom: 0.5rem !important;
}

/* Reset Submit Button */
.btn-reset-submit {
    width: 100% !important;
    padding: 0.875rem 1.5rem !important;
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, #0056b3 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0.5rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    transition: all 0.3s ease !important;
    margin-top: 0.5rem !important;
}

.btn-reset-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 121, 242, 0.4) !important;
}

.btn-reset-submit i {
    transition: transform 0.3s ease !important;
}

.btn-reset-submit:hover i {
    transform: translateX(3px) !important;
}

/* Cancel Button */
.btn-reset-cancel {
    padding: 0.875rem 1.5rem !important;
    background: var(--adaptive-background-light) !important;
    color: var(--adaptive-text-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.5rem !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-reset-cancel:hover {
    background: var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
}

/* Button Row */
.btn-row {
    display: flex !important;
    gap: 1rem !important;
    margin-top: 0.5rem !important;
}

.btn-row .btn-reset-submit {
    flex: 1 !important;
    margin-top: 0 !important;
}

.btn-row .btn-reset-cancel {
    flex-shrink: 0 !important;
}

/* Captcha Wrapper */
.reset-form .captcha-wrapper {
    margin: 0.5rem 0 !important;
}

/* Reset Card Footer */
.reset-card-footer {
    padding: 1.25rem 2rem !important;
    background: var(--adaptive-background-light) !important;
    border-top: 1px solid var(--adaptive-border) !important;
    text-align: center !important;
}

.back-to-login {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: var(--adaptive-text-light) !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    transition: color 0.2s ease !important;
}

.back-to-login:hover {
    color: var(--adaptive-primary) !important;
}

.back-to-login i {
    font-size: 0.8rem !important;
    transition: transform 0.2s ease !important;
}

.back-to-login:hover i {
    transform: translateX(-3px) !important;
}

/* Responsive */
@media (max-width: 576px) {
    .password-reset-card {
        margin: 1rem !important;
        max-width: none !important;
    }

    .reset-card-header,
    .reset-card-body {
        padding: 1.5rem !important;
    }

    .btn-row {
        flex-direction: column !important;
    }
}

/* ========================================
   KNOWLEDGEBASE - CARD-BASED DESIGN
   ======================================== */

/* Search Hero */
.kb-search {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    border-radius: 1rem !important;
    padding: 2rem !important;
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
}

.kb-search::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(rgba(0, 121, 242, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 121, 242, 0.05) 1px, transparent 1px) !important;
    background-size: 30px 30px !important;
    pointer-events: none !important;
}

.kb-search .form-control {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.5rem 0 0 0.5rem !important;
    color: var(--adaptive-text) !important;
    padding: 1rem 1.25rem !important;
    font-size: 1rem !important;
    position: relative !important;
    z-index: 1 !important;
}

.kb-search .form-control:focus {
    border-color: var(--adaptive-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 121, 242, 0.1) !important;
    outline: none !important;
}

.kb-search .form-control::placeholder {
    color: var(--adaptive-text-light) !important;
}

.kb-search .input-group-append {
    position: relative !important;
    z-index: 1 !important;
}

.kb-search .btn-primary {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, #0056b3 100%) !important;
    border: none !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
    padding: 1rem 2rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.kb-search .btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(0, 121, 242, 0.4) !important;
}

/* Category Cards */
.kb-category {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

.kb-category:hover {
    border-color: var(--adaptive-primary) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 40px var(--adaptive-shadow-30) !important;
}

.kb-category .card-body {
    padding: 1.5rem !important;
    display: block !important;
    text-decoration: none !important;
}

.kb-category .h5 {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    color: var(--adaptive-text) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

.kb-category .h5 i {
    width: 36px !important;
    height: 36px !important;
    background: rgba(0, 121, 242, 0.15) !important;
    border-radius: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--adaptive-primary) !important;
    font-size: 1rem !important;
}

.kb-category .badge-info {
    background: var(--adaptive-primary) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    padding: 0.35rem 0.75rem !important;
    border-radius: 1rem !important;
}

.kb-category .text-muted {
    color: var(--adaptive-text-light) !important;
}

.kb-category p {
    margin-left: calc(36px + 0.75rem) !important;
}

/* Article List */
.kb-article-item {
    background: var(--adaptive-card-bg) !important;
    border: none !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    padding: 1.25rem 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    color: var(--adaptive-text) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.kb-article-item:hover {
    background: var(--adaptive-background-light) !important;
    color: var(--adaptive-primary) !important;
}

.kb-article-item:last-child {
    border-bottom: none !important;
}

.kb-article-item i {
    color: var(--adaptive-primary) !important;
    margin-right: 0.5rem !important;
}

.kb-article-item small {
    color: var(--adaptive-text-light) !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    margin-left: 1.5rem !important;
}

/* Popular/Related Articles Section */
.list-group-flush .list-group-item {
    background: var(--adaptive-card-bg) !important;
    border-color: var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
}

/* Article View Page */
.card h1 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-text) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    margin-bottom: 1rem !important;
}

.card h1 .btn {
    flex-shrink: 0 !important;
}

.list-inline-item .badge-pill {
    background: rgba(0, 121, 242, 0.15) !important;
    color: var(--adaptive-primary) !important;
    font-weight: 500 !important;
    padding: 0.5rem 1rem !important;
}

.list-inline-item.text-muted {
    color: var(--adaptive-text-light) !important;
}

/* Article Content */
article {
    color: var(--adaptive-text) !important;
    line-height: 1.8 !important;
    font-size: 1rem !important;
}

article h2,
article h3,
article h4 {
    color: var(--adaptive-text) !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
}

article p {
    margin-bottom: 1rem !important;
}

article code {
    background: var(--adaptive-background-light) !important;
    color: var(--adaptive-primary) !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 0.25rem !important;
    font-family: 'Roboto Mono', monospace !important;
    font-size: 0.9em !important;
}

article pre {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.5rem !important;
    padding: 1rem 1.25rem !important;
    overflow-x: auto !important;
}

article pre code {
    background: transparent !important;
    padding: 0 !important;
}

article a {
    color: var(--adaptive-primary) !important;
}

article ul,
article ol {
    margin-bottom: 1rem !important;
    padding-left: 1.5rem !important;
}

article li {
    margin-bottom: 0.5rem !important;
}

/* Helpful Section */
.card h4 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--adaptive-text) !important;
    margin-bottom: 1rem !important;
}

.card form .btn-secondary {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
    padding: 0.5rem 1.5rem !important;
    transition: all 0.2s ease !important;
}

.card form .btn-secondary:hover {
    background: var(--adaptive-primary) !important;
    border-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
}

.card form .btn-secondary i {
    margin-right: 0.35rem !important;
}

/* Back Link */
a.btn-default[href*="javascript:history"] {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease !important;
    margin-top: 1.5rem !important;
}

a.btn-default[href*="javascript:history"]:hover {
    border-color: var(--adaptive-primary) !important;
    color: var(--adaptive-primary) !important;
}

/* Edit Buttons */
.show-on-card-hover {
    background: var(--adaptive-primary) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 0.25rem !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

.card:hover .show-on-card-hover,
.kb-article-item:hover .show-on-card-hover {
    opacity: 1 !important;
}

/* ========================================
   ANNOUNCEMENTS - NEWS-STYLE CARDS
   ======================================== */

/* Announcements Container */
.announcements {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
}

/* Individual Announcement Card */
.announcement {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.announcement:hover {
    border-color: var(--adaptive-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

/* Announcement Title */
.announcement h1 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.75rem !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 1rem !important;
}

.announcement h1 a {
    color: var(--adaptive-text) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    flex: 1 !important;
}

.announcement h1 a:hover {
    color: var(--adaptive-primary) !important;
}

/* Date Badge */
.announcement .list-inline {
    margin-bottom: 1rem !important;
}

.announcement .list-inline-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: rgba(0, 121, 242, 0.1) !important;
    color: var(--adaptive-primary) !important;
    padding: 0.35rem 0.75rem !important;
    border-radius: 1rem !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

.announcement .list-inline-item i {
    font-size: 0.75rem !important;
}

/* Announcement Content */
.announcement article {
    color: var(--adaptive-text-light) !important;
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
    margin-bottom: 1rem !important;
}

/* Read More Button */
.announcement .btn-default {
    background: transparent !important;
    border: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.announcement .btn-default:hover {
    background: var(--adaptive-primary) !important;
    border-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
}

.announcement .btn-default i {
    transition: transform 0.2s ease !important;
}

.announcement .btn-default:hover i {
    transform: translateX(3px) !important;
}

/* Edit Button */
.announcement .show-on-hover {
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.75rem !important;
}

.announcement:hover .show-on-hover {
    opacity: 1 !important;
}

/* View Announcement Page */
.card-body.extra-padding {
    padding: 2rem !important;
}

.card-body.extra-padding h1 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-text) !important;
    margin-bottom: 1rem !important;
    line-height: 1.3 !important;
}

.card-body.extra-padding .list-inline {
    margin-bottom: 0 !important;
    padding-bottom: 1.5rem !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
}

.card-body.extra-padding .list-inline-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: var(--adaptive-text-light) !important;
    font-size: 0.9rem !important;
}

.card-body.extra-padding .list-inline-item i {
    color: var(--adaptive-primary) !important;
}

.card-body.extra-padding .py-5 {
    padding: 2rem 0 !important;
}

.card-body.extra-padding .py-5,
.card-body.extra-padding .py-5 p {
    color: var(--adaptive-text) !important;
    font-size: 1rem !important;
    line-height: 1.8 !important;
}

/* Pagination */
.pagination {
    display: flex !important;
    gap: 0.5rem !important;
    justify-content: center !important;
    margin-top: 2rem !important;
}

.page-item .page-link {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease !important;
}

.page-item .page-link:hover {
    border-color: var(--adaptive-primary) !important;
    color: var(--adaptive-primary) !important;
}

.page-item.active .page-link {
    background: var(--adaptive-primary) !important;
    border-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
}

.page-item.disabled .page-link {
    background: var(--adaptive-background-light) !important;
    color: var(--adaptive-text-light) !important;
    cursor: not-allowed !important;
}

/* ========================================
   CONTACT FORM - MODERN STYLED FORM
   ======================================== */

/* Contact Form Header */
.card-body.extra-padding .h3 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-text) !important;
    margin-bottom: 0.5rem !important;
}

.card-body.extra-padding .mb-4 .text-muted {
    color: var(--adaptive-text-light) !important;
    font-size: 0.95rem !important;
}

/* Contact Form Container */
.card-body.extra-padding form[action*="contact.php"] {
    max-width: 700px !important;
    margin: 0 auto !important;
    padding-top: 1.5rem !important;
}

/* Form Group Styling */
.card-body.extra-padding .form-group.row {
    margin-bottom: 1.5rem !important;
}

.card-body.extra-padding .form-group.row label {
    color: var(--adaptive-text) !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    padding-top: 0.75rem !important;
}

/* Enhanced Form Controls */
.card-body.extra-padding .form-group.row .form-control {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.5rem !important;
    color: var(--adaptive-text) !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
}

.card-body.extra-padding .form-group.row .form-control:focus {
    border-color: var(--adaptive-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 121, 242, 0.1) !important;
    outline: none !important;
}

.card-body.extra-padding .form-group.row .form-control::placeholder {
    color: var(--adaptive-text-light) !important;
    opacity: 0.6 !important;
}

/* Textarea Styling */
.card-body.extra-padding .form-group.row textarea.form-control {
    min-height: 150px !important;
    resize: vertical !important;
}

/* Submit Button */
.card-body.extra-padding .text-center .btn-primary {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, #0056b3 100%) !important;
    border: none !important;
    padding: 0.875rem 2.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 0.5rem !important;
    transition: all 0.3s ease !important;
}

.card-body.extra-padding .text-center .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 121, 242, 0.4) !important;
}

/* Success Message */
.card-body.extra-padding .alert-success {
    background: rgba(34, 197, 94, 0.1) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    color: #22c55e !important;
    border-radius: 0.75rem !important;
    padding: 1.25rem !important;
}

/* Error Message */
.card-body.extra-padding .alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
    border-radius: 0.75rem !important;
    padding: 1.25rem !important;
}

/* Captcha Wrapper */
.card-body.extra-padding .margin-bottom {
    margin-bottom: 1.5rem !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .card-body.extra-padding .form-group.row label {
        text-align: left !important;
        margin-bottom: 0.5rem !important;
    }

    .card-body.extra-padding form[action*="contact.php"] {
        max-width: 100% !important;
    }
}

/* ========================================
   CLIENT AREA HOME - ENHANCED DASHBOARD
   ======================================== */

/* Dashboard Tiles */
.tiles {
    background: transparent !important;
    border-radius: 0 !important;
}

.tiles .tile {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0.5rem !important;
}

.tiles .tile:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px var(--adaptive-shadow-30) !important;
}

.tiles .tile i {
    font-size: 2rem !important;
    margin-bottom: 0.75rem !important;
    color: var(--adaptive-primary) !important;
}

.tiles .tile .stat {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-text) !important;
    line-height: 1 !important;
    margin-bottom: 0.5rem !important;
}

.tiles .tile .title {
    font-size: 0.85rem !important;
    color: var(--adaptive-text-light) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.tiles .tile .highlight {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    transition: height 0.3s ease !important;
}

.tiles .tile:hover .highlight {
    height: 6px !important;
}

/* Highlight Colors */
.highlight.bg-color-blue {
    background: linear-gradient(90deg, var(--adaptive-primary) 0%, #0056b3 100%) !important;
}

.highlight.bg-color-green {
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%) !important;
}

.highlight.bg-color-red {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%) !important;
}

.highlight.bg-color-gold {
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%) !important;
}

/* Client Home Cards */
.client-home-cards .card {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    margin-bottom: 1.5rem !important;
    overflow: hidden !important;
}

.client-home-cards .card-header {
    background: var(--adaptive-background-light) !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    padding: 1rem 1.25rem !important;
}

.client-home-cards .card-title {
    color: var(--adaptive-text) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}

.client-home-cards .card-title i {
    color: var(--adaptive-primary) !important;
    margin-right: 0.5rem !important;
}

.client-home-cards .card-body {
    padding: 1.25rem !important;
    color: var(--adaptive-text) !important;
}

.client-home-cards .card-footer {
    background: transparent !important;
    border-top: 1px solid var(--adaptive-border) !important;
    padding: 0.75rem 1.25rem !important;
}

/* List Group in Cards */
.client-home-cards .list-group-item {
    background: var(--adaptive-card-bg) !important;
    border: none !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
    padding: 0.875rem 1.25rem !important;
    transition: all 0.2s ease !important;
}

.client-home-cards .list-group-item:last-child {
    border-bottom: none !important;
}

.client-home-cards .list-group-item:hover {
    background: var(--adaptive-background-light) !important;
    color: var(--adaptive-primary) !important;
}

.client-home-cards .list-group-item i {
    color: var(--adaptive-primary) !important;
    margin-right: 0.5rem !important;
}

.client-home-cards .list-group-item .badge {
    background: var(--adaptive-primary) !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.75rem !important;
}

/* Card Accent Colors */
.card-accent-blue {
    border-left: 4px solid var(--adaptive-primary) !important;
}

.card-accent-green {
    border-left: 4px solid #22c55e !important;
}

.card-accent-red {
    border-left: 4px solid #ef4444 !important;
}

.card-accent-gold {
    border-left: 4px solid #f59e0b !important;
}

.card-accent-teal {
    border-left: 4px solid #14b8a6 !important;
}

/* Button Colors */
.btn.bg-color-blue {
    background: var(--adaptive-primary) !important;
    color: #ffffff !important;
    border: none !important;
}

.btn.bg-color-green {
    background: #22c55e !important;
    color: #ffffff !important;
    border: none !important;
}

.btn.bg-color-red {
    background: #ef4444 !important;
    color: #ffffff !important;
    border: none !important;
}

.btn.bg-color-gold {
    background: #f59e0b !important;
    color: #ffffff !important;
    border: none !important;
}

/* ========================================
   PRODUCT PAGES & SHOPPING CART DARK MODE
   ======================================== */

/* Product Group Header */
.product-group-header {
    background: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
}

/* Product Cards */
.product,
.products .product {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    transition: all 0.3s ease !important;
}

.product:hover,
.products .product:hover {
    border-color: var(--adaptive-primary) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px var(--adaptive-shadow-30) !important;
}

.product .product-title,
.products .product-title {
    color: var(--adaptive-text) !important;
    font-weight: 700 !important;
}

.product .product-desc,
.products .product-desc {
    color: var(--adaptive-text-light) !important;
}

.product .product-price,
.products .product-price {
    color: var(--adaptive-primary) !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
}

.product .product-price small,
.products .product-price small {
    color: var(--adaptive-text-light) !important;
    font-size: 0.9rem !important;
}

/* Product Features List */
.product ul,
.products .product ul {
    list-style: none !important;
    padding: 0 !important;
}

.product ul li,
.products .product ul li {
    color: var(--adaptive-text-light) !important;
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
}

.product ul li:last-child,
.products .product ul li:last-child {
    border-bottom: none !important;
}

/* Order Button */
.product .btn-order-now,
.products .product .btn-order-now,
.product .btn-order,
.products .product .btn-order,
.product a.btn,
.products .product a.btn {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, #0056b3 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.product .btn-order-now:hover,
.products .product .btn-order-now:hover,
.product .btn-order:hover,
.products .product .btn-order:hover,
.product a.btn:hover,
.products .product a.btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 121, 242, 0.4) !important;
}

/* Product Group Page */
.product-group .card {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
}

.product-group .card-header {
    background: var(--adaptive-background-light) !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
}

.product-group .card-body {
    color: var(--adaptive-text) !important;
}

/* Shopping Cart */
.main-content .card,
.order-summary .card,
.cart .card {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
}

.main-content .card-header,
.order-summary .card-header,
.cart .card-header {
    background: var(--adaptive-background-light) !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
}

.main-content .card-body,
.order-summary .card-body,
.cart .card-body {
    color: var(--adaptive-text) !important;
}

/* Cart Tables */
.cart-body table,
.cart table,
.order-summary table {
    background: transparent !important;
}

.cart-body table th,
.cart table th,
.order-summary table th {
    background: var(--adaptive-background-light) !important;
    color: var(--adaptive-text) !important;
    border-color: var(--adaptive-border) !important;
}

.cart-body table td,
.cart table td,
.order-summary table td {
    background: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
    border-color: var(--adaptive-border) !important;
}

/* Order Form */
.order-form,
#order-standard_cart {
    background: transparent !important;
}

.order-form .form-control,
#order-standard_cart .form-control {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
}

.order-form .form-control:focus,
#order-standard_cart .form-control:focus {
    border-color: var(--adaptive-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 121, 242, 0.1) !important;
}

.order-form label,
#order-standard_cart label {
    color: var(--adaptive-text) !important;
}

/* Checkout Summary */
.order-summary,
.checkout-summary {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
}

.order-summary .total,
.checkout-summary .total {
    color: var(--adaptive-primary) !important;
    font-weight: 700 !important;
}

/* Product Config Options */
.panel-configopts,
.product-config,
.configurable-options {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
}

.panel-configopts .panel-heading,
.product-config .panel-heading {
    background: var(--adaptive-background-light) !important;
    color: var(--adaptive-text) !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
}

.panel-configopts .panel-body,
.product-config .panel-body {
    color: var(--adaptive-text) !important;
}

/* Billing Cycle Selection */
.billing-cycle,
.pricing-cycle {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
    color: var(--adaptive-text) !important;
}

.billing-cycle.active,
.pricing-cycle.active,
.billing-cycle:hover,
.pricing-cycle:hover {
    border-color: var(--adaptive-primary) !important;
    background: rgba(0, 121, 242, 0.1) !important;
}

/* Quick Summary Box */
.quick-summary,
.product-summary {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
    color: var(--adaptive-text-light) !important;
}

.quick-summary strong,
.product-summary strong {
    color: var(--adaptive-text) !important;
}

/* Promo Code */
.promo-code input,
.coupon-input input {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
}

/* Steps/Progress */
.order-steps,
.checkout-steps {
    background: var(--adaptive-card-bg) !important;
}

.order-steps li,
.checkout-steps li {
    color: var(--adaptive-text-light) !important;
}

.order-steps li.active,
.checkout-steps li.active {
    color: var(--adaptive-primary) !important;
}

/* View Cart */
#btnViewCart,
.view-cart-btn {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, #0056b3 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

/* ========================================
   DOMAIN CONFIGURATION CARD - DARK MODE
   ======================================== */

/* Domain Selection Container */
.domain-selection,
.domain-checker,
#domainChecker,
.domain-options {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    color: var(--adaptive-text) !important;
}

/* Domain Selection Header */
.domain-selection h3,
.domain-selection h4,
.domain-checker h3,
.domain-checker h4,
#domainChecker h3,
#domainChecker h4 {
    color: var(--adaptive-text) !important;
}

/* Domain Options Radio/Checkbox */
.domain-selection .sub-heading,
.domain-option-heading,
.domain-selection label,
#domainChecker label {
    color: var(--adaptive-text) !important;
}

/* Domain Input Fields */
.domain-selection input[type="text"],
.domain-selection input[type="search"],
.domain-checker input[type="text"],
#domainChecker input[type="text"],
#inputDomain,
input[name="sld"],
input[name="domain"] {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
    border-radius: 0.5rem 0 0 0.5rem !important;
    padding: 0.75rem 1rem !important;
}

.domain-selection input[type="text"]:focus,
.domain-selection input[type="search"]:focus,
.domain-checker input[type="text"]:focus,
#domainChecker input[type="text"]:focus,
#inputDomain:focus,
input[name="sld"]:focus,
input[name="domain"]:focus {
    border-color: var(--adaptive-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 121, 242, 0.1) !important;
    outline: none !important;
}

/* TLD Select Dropdown */
.domain-selection select,
.domain-checker select,
#domainChecker select,
select[name="tld"] {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
}

/* Domain Option Cards */
.domain-option,
.transfer-option,
.existing-domain-option,
.domain-selection .option {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.domain-option:hover,
.transfer-option:hover,
.existing-domain-option:hover,
.domain-selection .option:hover {
    border-color: var(--adaptive-primary) !important;
    background: rgba(0, 121, 242, 0.05) !important;
}

.domain-option.active,
.transfer-option.active,
.existing-domain-option.active,
.domain-selection .option.active,
.domain-option.selected,
.transfer-option.selected {
    border-color: var(--adaptive-primary) !important;
    background: rgba(0, 121, 242, 0.1) !important;
}

/* Radio Button Labels */
.domain-selection .radio label,
.domain-selection .checkbox label,
.domain-option label,
.transfer-option label {
    color: var(--adaptive-text) !important;
    font-weight: 500 !important;
}

/* Domain Description Text */
.domain-selection p,
.domain-selection .text-muted,
.domain-option p,
.domain-option .text-muted,
.domain-selection small {
    color: var(--adaptive-text-light) !important;
}

/* Input Group */
.domain-selection .input-group,
.domain-checker .input-group,
#domainChecker .input-group {
    display: flex !important;
}

.domain-selection .input-group .form-control,
.domain-checker .input-group .form-control,
#domainChecker .input-group .form-control {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
}

.domain-selection .input-group-append .btn,
.domain-checker .input-group-append .btn,
#domainChecker .input-group-append .btn,
.domain-selection .input-group .btn {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, #0056b3 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

/* Input Group Prepend (www.) */
.domain-selection .input-group-prepend .input-group-text,
.domain-checker .input-group-prepend .input-group-text,
#domainChecker .input-group-prepend .input-group-text,
.input-group-text {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-right: none !important;
    color: var(--adaptive-text-light) !important;
}

/* Domain Search Results */
.domain-lookup-result,
.domain-search-result,
.lookup-result {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
    color: var(--adaptive-text) !important;
}

.domain-available {
    border-color: #22c55e !important;
    background: rgba(34, 197, 94, 0.1) !important;
}

.domain-unavailable {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

/* Spotlight TLDs */
.spotlight-tlds,
.tld-pricing {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.5rem !important;
}

.spotlight-tlds .tld-row,
.tld-pricing .tld-row {
    border-bottom: 1px solid var(--adaptive-border) !important;
    padding: 0.75rem !important;
    color: var(--adaptive-text) !important;
}

.spotlight-tlds .tld-row:last-child,
.tld-pricing .tld-row:last-child {
    border-bottom: none !important;
}

.spotlight-tlds .tld-price,
.tld-pricing .tld-price {
    color: var(--adaptive-primary) !important;
    font-weight: 600 !important;
}

/* Panel for Domain Config */
.panel-domain,
.panel-domainchecker {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
}

.panel-domain .panel-heading,
.panel-domainchecker .panel-heading {
    background: var(--adaptive-background-light) !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
    border-radius: 0.75rem 0.75rem 0 0 !important;
    padding: 1rem 1.25rem !important;
}

.panel-domain .panel-body,
.panel-domainchecker .panel-body {
    padding: 1.25rem !important;
    color: var(--adaptive-text) !important;
}

/* Order Box Container */
#order-boxes,
.order-boxes {
    background: transparent !important;
}

#order-boxes .order-box,
.order-boxes .order-box {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
}

/* Sub Heading Style */
.sub-heading {
    color: var(--adaptive-text) !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    margin-bottom: 1rem !important;
}

/* Field Description */
.field-help,
.help-block {
    color: var(--adaptive-text-light) !important;
    font-size: 0.85rem !important;
}

/* ========================================
   ORDER CONFIGURE STEP - DARK MODE
   ======================================== */

/* Main Order Container */
#order-standard_cart,
.order-form,
#frmConfigureProduct {
    background: transparent !important;
    color: var(--adaptive-text) !important;
}

/* Product Header/Title */
.product-header,
.configure-header,
#order-standard_cart h2,
#order-standard_cart h3,
.order-form h2,
.order-form h3 {
    color: var(--adaptive-text) !important;
}

/* Product Description Text */
#order-standard_cart p,
.order-form p,
.configure-description {
    color: var(--adaptive-text-light) !important;
}

/* Quick Summary Box */
.product-info-box,
.product-details-box,
.quick-summary,
.summary-box {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    padding: 1.25rem !important;
    color: var(--adaptive-text-light) !important;
}

.product-info-box h4,
.product-details-box h4,
.quick-summary h4,
.summary-box h4 {
    color: var(--adaptive-text) !important;
    font-weight: 600 !important;
}

/* Billing Cycle Selection */
.pricing-table,
.billing-cycles,
.cycle-options,
#inputBillingcycle,
select[name="billingcycle"] {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
}

#inputBillingcycle option,
select[name="billingcycle"] option {
    background: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
}

/* Billing Cycle Radio Buttons */
.billing-cycle-options,
.pricing-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

.billing-cycle-option,
.pricing-option,
.cycle-option {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.5rem !important;
    padding: 1rem 1.25rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.billing-cycle-option:hover,
.pricing-option:hover,
.cycle-option:hover {
    border-color: var(--adaptive-primary) !important;
    background: rgba(0, 121, 242, 0.05) !important;
}

.billing-cycle-option.selected,
.billing-cycle-option.active,
.pricing-option.selected,
.pricing-option.active,
.cycle-option.selected,
.cycle-option.active {
    border-color: var(--adaptive-primary) !important;
    background: rgba(0, 121, 242, 0.1) !important;
}

.billing-cycle-option label,
.pricing-option label,
.cycle-option label {
    color: var(--adaptive-text) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

.billing-cycle-option .price,
.pricing-option .price,
.cycle-option .price {
    color: var(--adaptive-primary) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

/* Available Addons Section */
.available-addons,
.addon-products,
.configurable-options,
.product-addons {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    margin-top: 1.5rem !important;
}

.available-addons h4,
.addon-products h4,
.configurable-options h4,
.product-addons h4 {
    color: var(--adaptive-text) !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
}

/* Individual Addon Item */
.addon,
.addon-item,
.addon-product,
.product-addon {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.5rem !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 0.75rem !important;
    transition: all 0.2s ease !important;
}

.addon:hover,
.addon-item:hover,
.addon-product:hover,
.product-addon:hover {
    border-color: var(--adaptive-primary) !important;
}

.addon:last-child,
.addon-item:last-child,
.addon-product:last-child,
.product-addon:last-child {
    margin-bottom: 0 !important;
}

/* Addon Checkbox */
.addon input[type="checkbox"],
.addon-item input[type="checkbox"],
.addon-product input[type="checkbox"] {
    accent-color: var(--adaptive-primary) !important;
    width: 18px !important;
    height: 18px !important;
}

/* Addon Title */
.addon-name,
.addon-title,
.addon label,
.addon-item label,
.addon-product label {
    color: var(--adaptive-text) !important;
    font-weight: 500 !important;
}

/* Addon Description */
.addon-description,
.addon p,
.addon-item p,
.addon-product p,
.addon .text-muted,
.addon-item .text-muted {
    color: var(--adaptive-text-light) !important;
    font-size: 0.875rem !important;
    margin-top: 0.5rem !important;
    line-height: 1.5 !important;
}

/* Addon Price */
.addon-price,
.addon .price,
.addon-item .price,
.addon-product .price {
    color: var(--adaptive-primary) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
}

/* Add to Cart Button */
.addon .btn-add-to-cart,
.addon-item .btn-add-to-cart,
.addon-product .btn,
.btn-add-addon {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, #0056b3 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.addon .btn-add-to-cart:hover,
.addon-item .btn-add-to-cart:hover,
.addon-product .btn:hover,
.btn-add-addon:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 121, 242, 0.3) !important;
}

/* Order Summary Sidebar */
.order-summary,
.cart-summary,
.sidebar-summary,
#orderSummary {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
}

.order-summary .card-header,
.cart-summary .card-header,
#orderSummary .card-header,
.order-summary h4,
.cart-summary h4 {
    background: var(--adaptive-background-light) !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
    padding: 1rem 1.25rem !important;
    font-weight: 600 !important;
}

.order-summary .card-body,
.cart-summary .card-body,
#orderSummary .card-body {
    padding: 1.25rem !important;
}

/* Summary Line Items */
.order-summary .line-item,
.cart-summary .line-item,
.summary-item,
.order-summary tr,
.cart-summary tr {
    display: flex !important;
    justify-content: space-between !important;
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
}

.order-summary .line-item:last-child,
.cart-summary .line-item:last-child,
.summary-item:last-child {
    border-bottom: none !important;
}

.order-summary .item-name,
.cart-summary .item-name,
.summary-item .name {
    color: var(--adaptive-text) !important;
}

.order-summary .item-price,
.cart-summary .item-price,
.summary-item .price {
    color: var(--adaptive-text-light) !important;
    font-weight: 500 !important;
}

/* Summary Section Headers */
.order-summary .summary-section,
.cart-summary .summary-section {
    margin-bottom: 1rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
}

.order-summary .summary-section:last-child,
.cart-summary .summary-section:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* Summary Total */
.order-summary .total,
.cart-summary .total,
.summary-total,
.order-summary .grand-total,
#orderSummary .total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 1rem !important;
    margin-top: 1rem !important;
    border-top: 2px solid var(--adaptive-border) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

.order-summary .total .label,
.cart-summary .total .label,
.summary-total .label {
    color: var(--adaptive-text) !important;
}

.order-summary .total .amount,
.cart-summary .total .amount,
.summary-total .amount,
.order-summary .total-due,
#orderSummary .total-amount {
    color: var(--adaptive-primary) !important;
    font-size: 1.25rem !important;
}

/* Setup Fees, Monthly Labels */
.order-summary .fee-label,
.cart-summary .fee-label,
.summary-fees {
    color: var(--adaptive-text-light) !important;
    font-size: 0.85rem !important;
}

/* Product Name in Summary */
.order-summary .product-name,
.cart-summary .product-name,
#orderSummary .product-name {
    color: var(--adaptive-text) !important;
    font-weight: 600 !important;
}

/* Product Group Name */
.order-summary .product-group,
.cart-summary .product-group,
#orderSummary .product-group {
    color: var(--adaptive-text-light) !important;
    font-size: 0.85rem !important;
}

/* Contact Sales Link */
.contact-sales,
a[href*="contact"],
.help-link {
    color: var(--adaptive-primary) !important;
}

.contact-sales:hover,
a[href*="contact"]:hover,
.help-link:hover {
    color: var(--adaptive-primary) !important;
    text-decoration: underline !important;
}

/* Continue/Checkout Button */
.btn-checkout,
.btn-continue,
#btnCompleteOrder,
button[type="submit"].btn-primary,
input[type="submit"].btn-primary {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, #0056b3 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0.875rem 2rem !important;
    border-radius: 0.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
}

.btn-checkout:hover,
.btn-continue:hover,
#btnCompleteOrder:hover,
button[type="submit"].btn-primary:hover,
input[type="submit"].btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 121, 242, 0.4) !important;
}

/* Panel Default Override */
.panel-default {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
}

.panel-default > .panel-heading {
    background: var(--adaptive-background-light) !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
    border-radius: 0.75rem 0.75rem 0 0 !important;
}

.panel-default > .panel-body {
    background: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
}

/* Well Override */
.well {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.5rem !important;
    color: var(--adaptive-text) !important;
}

/* List Styling in Order */
#order-standard_cart ul,
.order-form ul {
    list-style: none !important;
    padding-left: 0 !important;
}

#order-standard_cart ul li,
.order-form ul li {
    color: var(--adaptive-text-light) !important;
    padding: 0.35rem 0 !important;
    position: relative !important;
    padding-left: 1.25rem !important;
}

#order-standard_cart ul li::before,
.order-form ul li::before {
    content: '-' !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--adaptive-primary) !important;
}

/* ========================================
   STANDARD CART SPECIFIC DARK MODE
   ======================================== */

/* Cart Body */
#order-standard_cart .cart-body {
    background: transparent !important;
    color: var(--adaptive-text) !important;
}

/* Header */
#order-standard_cart .header-lined {
    border-color: var(--adaptive-border) !important;
}

#order-standard_cart .header-lined h1 {
    color: var(--adaptive-text) !important;
}

/* Secondary Cart Body - Main Content Area */
#order-standard_cart .secondary-cart-body {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    color: var(--adaptive-text) !important;
}

#order-standard_cart .secondary-cart-body p {
    color: var(--adaptive-text-light) !important;
}

/* Product Info Box */
#order-standard_cart .product-info {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.5rem !important;
    padding: 1.25rem !important;
    margin-bottom: 1.5rem !important;
}

#order-standard_cart .product-info .product-title {
    color: var(--adaptive-text) !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    margin-bottom: 0.75rem !important;
}

#order-standard_cart .product-info p {
    color: var(--adaptive-text-light) !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Field Container */
#order-standard_cart .field-container {
    margin-bottom: 1.5rem !important;
}

/* Sub Heading */
#order-standard_cart .sub-heading {
    margin: 1.5rem 0 1rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
}

#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading .primary-bg-color {
    background: transparent !important;
    color: var(--adaptive-text) !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
}

/* Form Labels */
#order-standard_cart label {
    color: var(--adaptive-text) !important;
    font-weight: 500 !important;
}

/* Form Controls */
#order-standard_cart .form-control,
#order-standard_cart select,
#order-standard_cart input[type="text"],
#order-standard_cart input[type="password"],
#order-standard_cart input[type="email"],
#order-standard_cart input[type="number"],
#order-standard_cart textarea {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
    border-radius: 0.5rem !important;
}

#order-standard_cart .form-control:focus,
#order-standard_cart select:focus,
#order-standard_cart input:focus {
    border-color: var(--adaptive-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 121, 242, 0.1) !important;
    outline: none !important;
}

#order-standard_cart select option {
    background: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
}

/* Custom Select */
#order-standard_cart .custom-select {
    background: var(--adaptive-background-light) var(--adaptive-select-arrow) no-repeat right 0.75rem center/8px 10px !important;
    border: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
}

/* Addon Products Container */
#order-standard_cart .addon-products {
    background: transparent !important;
}

/* Panel Addon Cards */
#order-standard_cart .panel-addon,
#order-standard_cart .panel.panel-addon {
    background: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
    margin-bottom: 1rem !important;
}

#order-standard_cart .panel-addon:hover {
    border-color: var(--adaptive-primary) !important;
}

#order-standard_cart .panel-addon.panel-addon-selected {
    border-color: var(--adaptive-primary) !important;
    background: rgba(0, 121, 242, 0.1) !important;
}

#order-standard_cart .panel-addon .panel-body,
#order-standard_cart .panel-addon .card-body {
    background: transparent !important;
    padding: 1rem !important;
    color: var(--adaptive-text-light) !important;
}

#order-standard_cart .panel-addon .panel-body label,
#order-standard_cart .panel-addon .card-body label {
    color: var(--adaptive-text) !important;
    font-weight: 600 !important;
}

/* Addon Price */
#order-standard_cart .panel-addon .panel-price {
    background: var(--adaptive-card-bg) !important;
    border-top: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-primary) !important;
    font-weight: 700 !important;
    padding: 0.75rem 1rem !important;
    text-align: center !important;
}

/* Addon Add Button */
#order-standard_cart .panel-addon .panel-add {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, #0056b3 100%) !important;
    color: #ffffff !important;
    padding: 0.75rem 1rem !important;
    text-align: center !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#order-standard_cart .panel-addon .panel-add:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004494 100%) !important;
}

/* Alert Warning */
#order-standard_cart .alert-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #f59e0b !important;
    border-radius: 0.5rem !important;
}

#order-standard_cart .alert-warning .alert-link {
    color: #f59e0b !important;
    text-decoration: underline !important;
}

/* Alert Danger */
#order-standard_cart .alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
    border-radius: 0.5rem !important;
}

/* Secondary Cart Sidebar - Order Summary */
#order-standard_cart .secondary-cart-sidebar {
    background: transparent !important;
}

#order-standard_cart #orderSummary {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
}

#order-standard_cart #orderSummary .order-summary {
    background: transparent !important;
    padding: 1.5rem !important;
    position: relative !important;
}

#order-standard_cart #orderSummary .order-summary h2 {
    color: var(--adaptive-text) !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
}

#order-standard_cart #orderSummary .summary-container {
    color: var(--adaptive-text) !important;
}

#order-standard_cart #orderSummary .summary-container .clearfix,
#order-standard_cart #orderSummary .summary-container > div {
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
}

#order-standard_cart #orderSummary .summary-container .item-title,
#order-standard_cart #orderSummary .summary-container strong {
    color: var(--adaptive-text) !important;
}

#order-standard_cart #orderSummary .summary-container .item-value,
#order-standard_cart #orderSummary .summary-container .text-right {
    color: var(--adaptive-text-light) !important;
}

#order-standard_cart #orderSummary .summary-container .total-due-today {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-primary) !important;
    padding-top: 1rem !important;
    margin-top: 0.5rem !important;
    border-top: 2px solid var(--adaptive-border) !important;
}

/* Continue Button */
#order-standard_cart #btnCompleteProductConfig {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, #0056b3 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0.875rem 2rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    width: 100% !important;
    margin-top: 1rem !important;
    transition: all 0.3s ease !important;
}

#order-standard_cart #btnCompleteProductConfig:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 121, 242, 0.4) !important;
}

/* Loader */
#order-standard_cart .loader {
    color: var(--adaptive-primary) !important;
}

/* Cart Sidebar */
#order-standard_cart .cart-sidebar {
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
}

#order-standard_cart .cart-sidebar .list-group-item {
    background: transparent !important;
    border-color: var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
}

#order-standard_cart .cart-sidebar .list-group-item:hover,
#order-standard_cart .cart-sidebar .list-group-item.active {
    background: var(--adaptive-background-light) !important;
    color: var(--adaptive-primary) !important;
}

/* Configurable Options */
#order-standard_cart .product-configurable-options {
    background: transparent !important;
}

#order-standard_cart .product-configurable-options label {
    color: var(--adaptive-text) !important;
}

/* Checkbox and Radio styling */
#order-standard_cart input[type="checkbox"],
#order-standard_cart input[type="radio"] {
    accent-color: var(--adaptive-primary) !important;
}

/* ========================================
   ADDITIONAL CART PAGE OVERRIDES
   ======================================== */

/* Ensure body background for pages containing cart */
body:has(#order-standard_cart) {
    background-color: var(--adaptive-input-bg) !important;
}

/* Fallback for browsers without :has() */
#order-standard_cart {
    background-color: var(--adaptive-input-bg) !important;
    min-height: 100vh;
    padding-bottom: 2rem;
}

/* Page title styling */
#order-standard_cart .font-size-36 {
    color: var(--adaptive-text-strong) !important;
    font-family: 'Roboto Mono', monospace !important;
}

#order-standard_cart .font-size-30 {
    color: var(--adaptive-text-strong) !important;
    font-family: 'Roboto Mono', monospace !important;
}

/* View Cart Items Header */
#order-standard_cart .view-cart-items-header {
    background: var(--adaptive-surface-3) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    padding: 1rem !important;
    color: var(--adaptive-text-strong) !important;
    font-weight: 600 !important;
}

/* View Cart Items */
#order-standard_cart .view-cart-items {
    background: var(--adaptive-surface-2) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    border-top: none !important;
    border-radius: 0 0 0.5rem 0.5rem !important;
}

#order-standard_cart .view-cart-items .item {
    background: transparent !important;
    border-bottom: 1px solid var(--adaptive-input-border) !important;
    padding: 1rem !important;
    color: var(--adaptive-text-strong) !important;
}

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

#order-standard_cart .view-cart-items .item-title {
    color: var(--adaptive-text-strong) !important;
    font-weight: 600 !important;
}

#order-standard_cart .view-cart-items .item-group,
#order-standard_cart .view-cart-items .item-domain {
    color: var(--adaptive-text-muted-2) !important;
}

#order-standard_cart .view-cart-items .item-price {
    color: #0079F2 !important;
    font-weight: 600 !important;
}

#order-standard_cart .view-cart-items .item-price .cycle {
    color: var(--adaptive-text-muted-2) !important;
    font-weight: 400 !important;
}

/* Empty Cart */
#order-standard_cart .view-cart-empty {
    background: var(--adaptive-surface-2) !important;
    color: var(--adaptive-text-muted-2) !important;
    padding: 3rem !important;
    text-align: center !important;
}

/* Empty Cart Button */
#order-standard_cart .empty-cart {
    margin-top: 1rem !important;
}

#order-standard_cart .empty-cart .btn-link {
    color: #ef4444 !important;
}

/* View Cart Tabs - Promo Code */
#order-standard_cart .view-cart-tabs {
    background: var(--adaptive-surface-2) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    border-radius: 0.5rem !important;
    margin-top: 1.5rem !important;
    overflow: hidden !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs {
    background: var(--adaptive-surface-3) !important;
    border-bottom: 1px solid var(--adaptive-input-border) !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs .nav-item .nav-link {
    background: transparent !important;
    color: var(--adaptive-text-muted-2) !important;
    border: none !important;
    padding: 0.75rem 1.25rem !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs .nav-item .nav-link.active {
    background: var(--adaptive-surface-2) !important;
    color: #0079F2 !important;
    border-bottom: 2px solid #0079F2 !important;
}

#order-standard_cart .view-cart-tabs .tab-content {
    padding: 1.25rem !important;
}

#order-standard_cart .view-cart-tabs .tab-pane .form-control {
    background: var(--adaptive-surface-3) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    color: var(--adaptive-text-strong) !important;
    border-radius: 0.5rem !important;
}

#order-standard_cart .view-cart-tabs .btn-default {
    background: var(--adaptive-input-border) !important;
    border: 1px solid var(--adaptive-border-2) !important;
    color: var(--adaptive-text-strong) !important;
}

#order-standard_cart .view-cart-tabs .btn-default:hover {
    background: var(--adaptive-border-2) !important;
}

/* Promotion Code Display */
#order-standard_cart .view-cart-promotion-code {
    background: rgba(0, 121, 242, 0.1) !important;
    border: 1px solid rgba(0, 121, 242, 0.3) !important;
    color: #0079F2 !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.5rem !important;
    margin-bottom: 1rem !important;
}

/* Order Summary Sidebar - Additional */
#order-standard_cart .order-summary {
    background: var(--adaptive-surface-2) !important;
    padding: 1.5rem !important;
    border-radius: 0.75rem !important;
    border: 1px solid var(--adaptive-input-border) !important;
}

#order-standard_cart .order-summary h2 {
    color: var(--adaptive-text-strong) !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid var(--adaptive-input-border) !important;
}

#order-standard_cart .summary-container {
    color: var(--adaptive-text-strong) !important;
}

#order-standard_cart .summary-container .subtotal,
#order-standard_cart .summary-container .clearfix {
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid var(--adaptive-input-border) !important;
}

#order-standard_cart .summary-container .bordered-totals {
    border: 1px solid var(--adaptive-input-border) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem !important;
    margin: 0.75rem 0 !important;
    background: var(--adaptive-surface-3) !important;
}

#order-standard_cart .summary-container .bordered-totals .clearfix {
    border-bottom: 1px dashed var(--adaptive-input-border) !important;
}

#order-standard_cart .summary-container .bordered-totals .clearfix:last-child {
    border-bottom: none !important;
}

#order-standard_cart .summary-container .recurring-totals {
    padding: 0.75rem 0 !important;
}

#order-standard_cart .summary-container .recurring-charges .cost {
    color: #0079F2 !important;
    font-weight: 600 !important;
}

#order-standard_cart .summary-container .total-due-today {
    background: linear-gradient(135deg, #0079F2 0%, #0056b3 100%) !important;
    color: #ffffff !important;
    padding: 1.25rem !important;
    border-radius: 0.5rem !important;
    margin-top: 1rem !important;
    text-align: center !important;
}

#order-standard_cart .summary-container .total-due-today .amt {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    display: block !important;
}

/* Checkout Button */
#order-standard_cart .btn-checkout {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 1rem 2rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    margin-top: 1rem !important;
    display: inline-block !important;
}

#order-standard_cart .btn-checkout:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4) !important;
}

#order-standard_cart .btn-checkout.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Continue Shopping Link */
#order-standard_cart .btn-continue-shopping {
    color: var(--adaptive-text-muted-2) !important;
    margin-top: 0.5rem !important;
    display: inline-block !important;
}

#order-standard_cart .btn-continue-shopping:hover {
    color: #0079F2 !important;
}

/* Modals */
#order-standard_cart .modal-content {
    background: var(--adaptive-surface-2) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    border-radius: 0.75rem !important;
    color: var(--adaptive-text-strong) !important;
}

#order-standard_cart .modal-header {
    border-bottom: 1px solid var(--adaptive-input-border) !important;
}

#order-standard_cart .modal-footer {
    border-top: 1px solid var(--adaptive-input-border) !important;
}

#order-standard_cart .modal-title {
    color: var(--adaptive-text-strong) !important;
}

/* Remove Item Modal */
#order-standard_cart .modal-remove-item .modal-body {
    text-align: center !important;
    padding: 2rem !important;
}

#order-standard_cart .modal-remove-item .modal-title i {
    color: #ef4444 !important;
    margin-bottom: 1rem !important;
}

/* All link buttons in cart */
#order-standard_cart .btn-link {
    color: #0079F2 !important;
}

#order-standard_cart .btn-link:hover {
    color: #3b9eff !important;
}

/* Remove button */
#order-standard_cart .btn-remove-from-cart {
    color: #ef4444 !important;
}

#order-standard_cart .btn-remove-from-cart:hover {
    color: #dc2626 !important;
}

/* Row styling */
#order-standard_cart .row {
    margin: 0 -15px !important;
}

/* Quantity input */
#order-standard_cart .item-qty .form-control {
    background: var(--adaptive-surface-3) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    color: var(--adaptive-text-strong) !important;
    width: 60px !important;
    text-align: center !important;
}

#order-standard_cart .item-qty .btn {
    background: var(--adaptive-input-border) !important;
    border: 1px solid var(--adaptive-border-2) !important;
    color: var(--adaptive-text-strong) !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
    margin-top: 0.25rem !important;
}

/* Period dropdown */
#order-standard_cart .dropdown-menu {
    background: var(--adaptive-surface-2) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem !important;
}

#order-standard_cart .dropdown-menu .dropdown-item {
    color: var(--adaptive-text-strong) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.25rem !important;
}

#order-standard_cart .dropdown-menu .dropdown-item a {
    color: var(--adaptive-text-strong) !important;
    text-decoration: none !important;
}

#order-standard_cart .dropdown-menu .dropdown-item:hover,
#order-standard_cart .dropdown-menu .dropdown-item a:hover {
    background: var(--adaptive-input-border) !important;
    color: #0079F2 !important;
}

/* Express checkout buttons */
#order-standard_cart .express-checkout-buttons {
    margin: 1rem 0 !important;
}

#order-standard_cart .express-checkout-buttons .separator {
    color: var(--adaptive-text-faint) !important;
    text-align: center !important;
    padding: 0.5rem 0 !important;
}

/* Alert Success */
#order-standard_cart .alert-success {
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
    border-radius: 0.5rem !important;
}

/* Alert Info */
#order-standard_cart .alert-info {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: #3b82f6 !important;
    border-radius: 0.5rem !important;
}

/* Small text helper */
#order-standard_cart small {
    color: var(--adaptive-text-muted-2) !important;
}

/* Metrics pricing */
#order-standard_cart ul {
    color: var(--adaptive-text-muted-2) !important;
}

#order-standard_cart ul li {
    color: var(--adaptive-text-muted-2) !important;
    margin-bottom: 0.5rem !important;
}

/* Field help text */
#order-standard_cart .field-help-text {
    color: var(--adaptive-text-muted-2) !important;
    font-size: 0.85rem !important;
    margin-top: 0.25rem !important;
}

/* Cards within cart */
#order-standard_cart .card {
    background: var(--adaptive-surface-2) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    border-radius: 0.5rem !important;
}

#order-standard_cart .card-body {
    background: transparent !important;
    color: var(--adaptive-text-strong) !important;
}

#order-standard_cart .card-header {
    background: var(--adaptive-surface-3) !important;
    border-bottom: 1px solid var(--adaptive-input-border) !important;
    color: var(--adaptive-text-strong) !important;
}

/* Panels */
#order-standard_cart .panel {
    background: var(--adaptive-surface-2) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    border-radius: 0.5rem !important;
}

#order-standard_cart .panel-body {
    background: transparent !important;
    color: var(--adaptive-text-strong) !important;
}

#order-standard_cart .panel-default {
    border-color: var(--adaptive-input-border) !important;
}

/* ========================================
   ORDER SUMMARY CARD - AGGRESSIVE OVERRIDES
   ======================================== */

/* Main Order Summary Container */
#orderSummary {
    background: var(--adaptive-surface-2) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
}

#orderSummary * {
    color: var(--adaptive-text-strong) !important;
}

#orderSummary .order-summary {
    background: var(--adaptive-surface-2) !important;
    padding: 1.5rem !important;
}

#orderSummary h2,
#orderSummary .font-size-30 {
    color: var(--adaptive-text-strong) !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid var(--adaptive-input-border) !important;
    font-family: 'Roboto Mono', monospace !important;
}

/* Product Total Container - Dynamic Content */
#producttotal {
    background: transparent !important;
    color: var(--adaptive-text-strong) !important;
}

#producttotal * {
    color: var(--adaptive-text-strong) !important;
    background: transparent !important;
}

#producttotal .item,
#producttotal .clearfix,
#producttotal > div {
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid var(--adaptive-input-border) !important;
}

#producttotal .item:last-child,
#producttotal .clearfix:last-child,
#producttotal > div:last-child {
    border-bottom: none !important;
}

#producttotal .item-title,
#producttotal strong,
#producttotal b {
    color: var(--adaptive-text-strong) !important;
    font-weight: 600 !important;
}

#producttotal .item-group,
#producttotal .small,
#producttotal small {
    color: var(--adaptive-text-muted-2) !important;
}

#producttotal .item-price,
#producttotal .price,
#producttotal .amt {
    color: #0079F2 !important;
    font-weight: 600 !important;
}

/* Summary rows */
#producttotal .summary-row,
#producttotal .total-row,
#producttotal tr {
    background: transparent !important;
}

#producttotal td,
#producttotal th {
    background: transparent !important;
    color: var(--adaptive-text-strong) !important;
    padding: 0.5rem !important;
    border-color: var(--adaptive-input-border) !important;
}

/* Total Due Today in Summary */
#producttotal .total-due-today,
#producttotal .grand-total {
    background: linear-gradient(135deg, #0079F2 0%, #0056b3 100%) !important;
    color: #ffffff !important;
    padding: 1rem !important;
    border-radius: 0.5rem !important;
    margin-top: 1rem !important;
    text-align: center !important;
}

#producttotal .total-due-today *,
#producttotal .grand-total * {
    color: #ffffff !important;
}

#producttotal .total-due-today .amt,
#producttotal .grand-total .amt {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    display: block !important;
    color: #ffffff !important;
}

/* Continue Button Below Summary */
#orderSummary .text-center {
    background: var(--adaptive-surface-2) !important;
    padding: 0 1.5rem 1.5rem !important;
}

#orderSummary .btn-primary,
#orderSummary #btnCompleteProductConfig {
    background: linear-gradient(135deg, #0079F2 0%, #0056b3 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0.875rem 2rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
}

#orderSummary .btn-primary:hover,
#orderSummary #btnCompleteProductConfig:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 121, 242, 0.4) !important;
}

/* Scrolling Panel Container */
#scrollingPanelContainer {
    background: transparent !important;
}

/* Summary Container inside order-summary */
.order-summary .summary-container {
    background: transparent !important;
    color: var(--adaptive-text-strong) !important;
}

.order-summary .summary-container * {
    color: var(--adaptive-text-strong) !important;
}

/* Additional table styling if summary uses tables */
#orderSummary table {
    background: transparent !important;
    color: var(--adaptive-text-strong) !important;
}

#orderSummary table td,
#orderSummary table th {
    background: transparent !important;
    color: var(--adaptive-text-strong) !important;
    border-color: var(--adaptive-input-border) !important;
}

#orderSummary table tr {
    background: transparent !important;
}

/* Horizontal rules in summary */
#orderSummary hr {
    border-color: var(--adaptive-input-border) !important;
}

/* Loader styling */
#orderSummaryLoader {
    color: #0079F2 !important;
}

#orderSummaryLoader i {
    color: #0079F2 !important;
}

/* ========================================
   ORDER SUMMARY CONTENT - SPECIFIC CLASSES
   ======================================== */

/* Product name and group in summary */
#orderSummary .product-name,
#producttotal .product-name {
    color: var(--adaptive-text-strong) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    display: block !important;
    margin-bottom: 0.25rem !important;
}

#orderSummary .product-group,
#producttotal .product-group {
    color: var(--adaptive-text-muted-2) !important;
    font-size: 0.85rem !important;
    display: block !important;
    margin-bottom: 1rem !important;
}

/* Clearfix rows - line items */
#orderSummary .clearfix,
#producttotal .clearfix {
    background: transparent !important;
    color: var(--adaptive-text-strong) !important;
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid var(--adaptive-input-border) !important;
}

#orderSummary .clearfix:last-child,
#producttotal .clearfix:last-child {
    border-bottom: none !important;
}

/* Float classes for text alignment */
#orderSummary .pull-left,
#orderSummary .float-left,
#producttotal .pull-left,
#producttotal .float-left {
    color: var(--adaptive-text-strong) !important;
}

#orderSummary .pull-right,
#orderSummary .float-right,
#producttotal .pull-right,
#producttotal .float-right {
    color: #0079F2 !important;
    font-weight: 600 !important;
}

/* Summary totals section */
#orderSummary .summary-totals,
#producttotal .summary-totals {
    background: var(--adaptive-surface-3) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem !important;
    margin: 1rem 0 !important;
}

#orderSummary .summary-totals .clearfix,
#producttotal .summary-totals .clearfix {
    border-bottom: 1px dashed var(--adaptive-input-border) !important;
    padding: 0.375rem 0 !important;
}

#orderSummary .summary-totals .clearfix:last-child,
#producttotal .summary-totals .clearfix:last-child {
    border-bottom: none !important;
}

/* Total Due Today Box */
#orderSummary .total-due-today,
#producttotal .total-due-today {
    background: linear-gradient(135deg, #0079F2 0%, #0056b3 100%) !important;
    color: #ffffff !important;
    padding: 1.25rem !important;
    border-radius: 0.5rem !important;
    margin-top: 1rem !important;
    text-align: center !important;
}

#orderSummary .total-due-today span,
#producttotal .total-due-today span {
    color: #ffffff !important;
}

#orderSummary .total-due-today .amt,
#producttotal .total-due-today .amt {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    display: block !important;
    color: #ffffff !important;
    margin-bottom: 0.25rem !important;
}

/* All spans within order summary */
#orderSummary span,
#producttotal span {
    color: inherit !important;
}

/* Links within summary */
#orderSummary a,
#producttotal a {
    color: #0079F2 !important;
}

#orderSummary a:hover,
#producttotal a:hover {
    color: #3b9eff !important;
}

/* Remove icons */
#orderSummary .fa-trash-alt,
#producttotal .fa-trash-alt {
    color: #ef4444 !important;
}

/* Ensure nested divs are transparent */
#orderSummary div,
#producttotal div {
    background: transparent !important;
}

/* Override any white backgrounds */
#orderSummary > *,
#producttotal > * {
    background: transparent !important;
}

/* ========================================
   INNOVATIVE HOSTING PLAN CARDS
   Modern pricing card design for store pages
   ======================================== */

/* Container - 3 column grid layout */
#order-standard_cart .products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
    margin: 2rem 0 !important;
    padding: 0 !important;
}

/* Responsive: 2 columns on medium screens */
@media (max-width: 1200px) {
    #order-standard_cart .products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Responsive: 1 column on small screens */
@media (max-width: 768px) {
    #order-standard_cart .products {
        grid-template-columns: 1fr !important;
    }
}

/* Remove the default row containers */
#order-standard_cart .products .row,
#order-standard_cart .products .row-eq-height {
    display: contents !important;
}

#order-standard_cart .products .col-md-6 {
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Individual Product Card */
#order-standard_cart .products .product {
    display: flex !important;
    flex-direction: column !important;
    background: linear-gradient(145deg, var(--adaptive-surface-3) 0%, var(--adaptive-input-bg) 100%) !important;
    border: 1px solid var(--adaptive-divider) !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    position: relative !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
}

#order-standard_cart .products .product::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #0079F2 0%, #00d4ff 50%, #0079F2 100%) !important;
    background-size: 200% 100% !important;
    animation: shimmer 3s ease-in-out infinite !important;
}

@keyframes shimmer {
    0%, 100% { background-position: 200% 0; }
    50% { background-position: -200% 0; }
}

#order-standard_cart .products .product:hover {
    transform: translateY(-8px) scale(1.02) !important;
    border-color: #0079F2 !important;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(0, 121, 242, 0.15),
        inset 0 1px 0 var(--adaptive-overlay-light) !important;
}

/* Card Header */
#order-standard_cart .products .product header {
    background: linear-gradient(135deg, rgba(0, 121, 242, 0.15) 0%, rgba(0, 121, 242, 0.05) 100%) !important;
    padding: 1.5rem 1.5rem 1.25rem !important;
    border-bottom: 1px solid rgba(0, 121, 242, 0.2) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    text-align: center !important;
}

#order-standard_cart .products .product header span {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-text-on-surface) !important;
    display: block !important;
    letter-spacing: -0.025em !important;
}

#order-standard_cart .products .product header .qty {
    float: none !important;
    display: block !important;
    margin-top: 0.5rem !important;
    font-size: 0.8rem !important;
    color: var(--adaptive-text-muted-2) !important;
    font-style: normal !important;
}

/* Product Description / Features */
#order-standard_cart .products .product .product-desc {
    float: none !important;
    width: 100% !important;
    padding: 1.5rem !important;
    flex: 1 !important;
    font-size: 0.9rem !important;
}

#order-standard_cart .products .product .product-desc p {
    color: #0079F2 !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    margin-bottom: 1rem !important;
    padding: 0.5rem 0.75rem !important;
    background: rgba(0, 121, 242, 0.1) !important;
    border-radius: 0.5rem !important;
    text-align: center !important;
    border: 1px solid rgba(0, 121, 242, 0.2) !important;
}

#order-standard_cart .products .product .product-desc ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#order-standard_cart .products .product .product-desc ul li {
    display: flex !important;
    align-items: flex-start !important;
    padding: 0.65rem 0 !important;
    border-bottom: 1px solid var(--adaptive-overlay-light) !important;
    color: var(--adaptive-text-soft) !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
}

#order-standard_cart .products .product .product-desc ul li:last-child {
    border-bottom: none !important;
}

#order-standard_cart .products .product .product-desc ul li::before {
    content: '✓' !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 20px !important;
    margin-right: 0.75rem !important;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%) !important;
    color: #10b981 !important;
    font-size: 0.7rem !important;
    font-weight: bold !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

#order-standard_cart .products .product .product-desc ul li .feature-value {
    color: var(--adaptive-text-on-surface) !important;
    font-weight: 600 !important;
    margin-right: 0.25rem !important;
}

/* Product Footer / Pricing */
#order-standard_cart .products .product footer {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1.5rem !important;
    background: linear-gradient(180deg, var(--adaptive-overlay) 0%, var(--adaptive-overlay-strong) 100%) !important;
    border-top: 1px solid var(--adaptive-overlay-light) !important;
    text-align: center !important;
    font-size: 1rem !important;
}

#order-standard_cart .products .product .product-pricing {
    margin-bottom: 1.25rem !important;
}

#order-standard_cart .products .product .product-pricing .price {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    color: var(--adaptive-text-on-surface) !important;
    display: block !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    text-shadow: 0 2px 10px rgba(0, 121, 242, 0.3) !important;
}

#order-standard_cart .products .product footer br {
    display: none !important;
}

#order-standard_cart .products .product footer br + br {
    display: none !important;
}

/* Billing cycle text */
#order-standard_cart .products .product footer {
    font-size: 0.9rem !important;
    color: var(--adaptive-text-muted-2) !important;
}

/* Setup fee */
#order-standard_cart .products .product footer small {
    display: block !important;
    margin-top: 0.5rem !important;
    font-size: 0.8rem !important;
    color: var(--adaptive-text-faint) !important;
}

/* Order Button */
#order-standard_cart .products .product .btn-order-now {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    background: linear-gradient(135deg, #0079F2 0%, #0056b3 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    border: none !important;
    border-radius: 0.75rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: 0 4px 15px rgba(0, 121, 242, 0.3) !important;
}

#order-standard_cart .products .product .btn-order-now:hover {
    background: linear-gradient(135deg, #0066cc 0%, #004494 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 121, 242, 0.4) !important;
}

#order-standard_cart .products .product .btn-order-now i {
    font-size: 0.9rem !important;
}

/* Popular/Featured Plan Highlight (middle card) */
#order-standard_cart .products .col-md-6:nth-child(2) .product {
    border-color: #0079F2 !important;
    transform: scale(1.02) !important;
    box-shadow: 0 10px 40px rgba(0, 121, 242, 0.2) !important;
}

#order-standard_cart .products .col-md-6:nth-child(2) .product::after {
    content: 'POPULAR' !important;
    position: absolute !important;
    top: 1rem !important;
    right: -2rem !important;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 0.35rem 2.5rem !important;
    transform: rotate(45deg) !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3) !important;
    z-index: 10 !important;
}

#order-standard_cart .products .col-md-6:nth-child(2) .product:hover {
    transform: translateY(-8px) scale(1.04) !important;
}

/* Starting from text */
#order-standard_cart .products .product footer:has(.price)::before {
    content: '' !important;
    display: none !important;
}

/* Make sure clearfix doesn't break layout */
#order-standard_cart .products .product.clearfix::after {
    display: none !important;
}

/* Page Header Styling */
#order-standard_cart .header-lined h1 {
    color: var(--adaptive-text-on-surface) !important;
    font-weight: 700 !important;
    font-size: 2.25rem !important;
    margin-bottom: 0.75rem !important;
}

#order-standard_cart .header-lined p {
    color: var(--adaptive-text-muted-2) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    max-width: 800px !important;
}

/* Cart body background */
#order-standard_cart .cart-body {
    background: transparent !important;
}

/* Responsive adjustments for popular badge */
@media (max-width: 1200px) {
    #order-standard_cart .products .col-md-6:nth-child(2) .product {
        transform: scale(1) !important;
    }
    #order-standard_cart .products .col-md-6:nth-child(2) .product:hover {
        transform: translateY(-8px) scale(1.02) !important;
    }
}

/* ========================================
   ORDER PROCESS - DOMAIN SELECTION DARK MODE
   "Choose a Domain" step after clicking Order Now
   ======================================== */

/* Domain Selection Options Container */
#order-standard_cart .domain-selection-options {
    background: transparent !important;
    margin: 1.5rem 0 !important;
}

/* Individual Option Cards (Register/Transfer/Existing) */
#order-standard_cart .domain-selection-options .option {
    background: linear-gradient(145deg, var(--adaptive-surface-3) 0%, var(--adaptive-surface-4) 100%) !important;
    border: 1px solid var(--adaptive-divider) !important;
    border-radius: 0.75rem !important;
    padding: 1rem 1.5rem !important;
    margin-bottom: 0.75rem !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

#order-standard_cart .domain-selection-options .option:hover {
    border-color: #0079F2 !important;
    background: linear-gradient(145deg, var(--adaptive-surface-5) 0%, var(--adaptive-surface-3) 100%) !important;
    box-shadow: 0 4px 15px rgba(0, 121, 242, 0.15) !important;
}

#order-standard_cart .domain-selection-options .option-selected,
#order-standard_cart .domain-selection-options .option.active {
    border-color: #0079F2 !important;
    background: linear-gradient(145deg, rgba(0, 121, 242, 0.15) 0%, rgba(0, 121, 242, 0.05) 100%) !important;
    box-shadow: 0 0 20px rgba(0, 121, 242, 0.2) !important;
}

/* Labels inside options */
#order-standard_cart .domain-selection-options .option label {
    color: var(--adaptive-text-strong) !important;
    font-weight: 500 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

#order-standard_cart .domain-selection-options .option-selected label {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Domain Input Group */
#order-standard_cart .domain-input-group {
    background: linear-gradient(145deg, var(--adaptive-surface-3) 0%, var(--adaptive-surface-4) 100%) !important;
    border: 1px solid var(--adaptive-divider) !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    margin: 1rem 0 !important;
}

/* Input fields in domain selection */
#order-standard_cart .domain-input-group input[type="text"],
#order-standard_cart .domain-input-group .form-control,
#order-standard_cart .domain-selection-options input[type="text"],
#order-standard_cart .domain-selection-options .form-control {
    background: var(--adaptive-input-bg) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    color: var(--adaptive-text-strong) !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
}

#order-standard_cart .domain-input-group input[type="text"]:focus,
#order-standard_cart .domain-input-group .form-control:focus,
#order-standard_cart .domain-selection-options input[type="text"]:focus,
#order-standard_cart .domain-selection-options .form-control:focus {
    border-color: #0079F2 !important;
    box-shadow: 0 0 0 3px rgba(0, 121, 242, 0.15) !important;
    outline: none !important;
}

/* TLD Select dropdown */
#order-standard_cart .domain-input-group select,
#order-standard_cart .domain-selection-options select,
#order-standard_cart select[name="tld"],
#order-standard_cart .input-group select {
    background: var(--adaptive-input-bg) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    color: var(--adaptive-text-strong) !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
}

/* Input group styling (www. prefix) */
#order-standard_cart .input-group-prepend .input-group-text,
#order-standard_cart .input-group-text {
    background: var(--adaptive-surface-3) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    color: var(--adaptive-text-muted-2) !important;
    border-radius: 0.5rem 0 0 0.5rem !important;
}

#order-standard_cart .input-group .form-control {
    background: var(--adaptive-input-bg) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    color: var(--adaptive-text-strong) !important;
}

#order-standard_cart .input-group .form-control:focus {
    border-color: #0079F2 !important;
    box-shadow: 0 0 0 3px rgba(0, 121, 242, 0.15) !important;
}

/* Input group append (TLD dropdown container) */
#order-standard_cart .input-group-append select,
#order-standard_cart .input-group select.form-control {
    background: var(--adaptive-input-bg) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    border-left: none !important;
    color: var(--adaptive-text-strong) !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
}

/* TLD Dropdown - Make wider to show full extension names */

/* Fix the column widths for domain input rows */
#order-standard_cart .domains-row .col-xs-3,
#order-standard_cart .domains-row .col-3 {
    flex: 0 0 140px !important;
    max-width: 140px !important;
    min-width: 140px !important;
    width: 140px !important;
}

#order-standard_cart .domains-row .col-xs-9,
#order-standard_cart .domains-row .col-9 {
    flex: 1 1 auto !important;
    max-width: calc(100% - 150px) !important;
}

/* Target the specific TLD select dropdowns by ID */
#order-standard_cart #registertld,
#order-standard_cart #transfertld,
#order-standard_cart #subdomaintld,
#order-standard_cart #incartsld {
    min-width: 130px !important;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0.625rem 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    background: var(--adaptive-input-bg) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    color: var(--adaptive-text-strong) !important;
    border-radius: 0.5rem !important;
    appearance: menulist !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
}

/* Match the domain input field height */
#order-standard_cart #registersld,
#order-standard_cart #transfersld,
#order-standard_cart #owndomainsld,
#order-standard_cart #subdomainsld,
#order-standard_cart .domain-input-group .input-group .form-control {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0.625rem 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

/* Match the www. prefix height */
#order-standard_cart .domain-input-group .input-group-text,
#order-standard_cart .domain-input-group .input-group-addon .input-group-text {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0.625rem 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
}

/* Own domain TLD text input */
#order-standard_cart #owndomaintld {
    min-width: 100px !important;
    width: 100% !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.95rem !important;
    background: var(--adaptive-input-bg) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    color: var(--adaptive-text-strong) !important;
    border-radius: 0.5rem !important;
}

#order-standard_cart #owndomaintld::placeholder {
    color: var(--adaptive-text-faint) !important;
}

/* Ensure the input group flex properly */
#order-standard_cart .input-group {
    flex-wrap: nowrap !important;
}

#order-standard_cart .domain-input-group .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

#order-standard_cart .domains-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
}

/* Sub-heading / Section title */
#order-standard_cart .sub-heading {
    border-top-color: var(--adaptive-input-border) !important;
}

#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading .primary-bg-color {
    background: var(--adaptive-input-bg) !important;
    color: #0079F2 !important;
}

/* Field labels */
#order-standard_cart .field-container label,
#order-standard_cart label {
    color: var(--adaptive-text-soft) !important;
}

/* Domain suggestions/results */
#order-standard_cart .domain-lookup-primary-results,
#order-standard_cart .domain-checker-result-headline {
    color: var(--adaptive-text-strong) !important;
}

#order-standard_cart .domain-checker-available {
    color: #10b981 !important;
}

#order-standard_cart .domain-checker-unavailable,
#order-standard_cart .domain-checker-invalid {
    color: #ef4444 !important;
}

/* Transfer eligible/not eligible boxes */
#order-standard_cart .transfer-eligible {
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
    border-radius: 0.75rem !important;
}

#order-standard_cart .transfer-not-eligible {
    background: rgba(107, 114, 128, 0.1) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    color: var(--adaptive-text-muted-2) !important;
    border-radius: 0.75rem !important;
}

/* Domain suggestions panel */
#order-standard_cart .domain-suggestions {
    background: transparent !important;
}

#order-standard_cart .domain-suggestions .list-group-item {
    background: linear-gradient(145deg, var(--adaptive-surface-3) 0%, var(--adaptive-surface-4) 100%) !important;
    border: 1px solid var(--adaptive-divider) !important;
    color: var(--adaptive-text-strong) !important;
    margin-bottom: 0.5rem !important;
    border-radius: 0.5rem !important;
}

#order-standard_cart .domain-suggestions .list-group-item:hover {
    border-color: #0079F2 !important;
    background: linear-gradient(145deg, var(--adaptive-surface-5) 0%, var(--adaptive-surface-3) 100%) !important;
}

#order-standard_cart .domain-suggestions .extension {
    color: #0079F2 !important;
}

#order-standard_cart .domain-suggestions .price {
    color: #10b981 !important;
    font-weight: 600 !important;
}

/* Spotlight TLDs */
#order-standard_cart .spotlight-tlds {
    background: linear-gradient(145deg, var(--adaptive-surface-3) 0%, var(--adaptive-surface-4) 100%) !important;
    border: 1px solid var(--adaptive-divider) !important;
    border-radius: 0.75rem !important;
}

#order-standard_cart .spotlight-tld {
    background: var(--adaptive-input-bg) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    color: var(--adaptive-text-strong) !important;
}

#order-standard_cart .spotlight-tld:hover {
    border-color: #0079F2 !important;
}

#order-standard_cart .spotlight-tld span {
    color: var(--adaptive-text-muted-2) !important;
}

/* Buttons in domain section */
#order-standard_cart .domain-selection-options .btn,
#order-standard_cart .domain-input-group .btn,
#order-standard_cart .btn-check-availability {
    background: linear-gradient(135deg, #0079F2 0%, #0056b3 100%) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

#order-standard_cart .domain-selection-options .btn:hover,
#order-standard_cart .domain-input-group .btn:hover,
#order-standard_cart .btn-check-availability:hover {
    background: linear-gradient(135deg, #0066cc 0%, #004494 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0, 121, 242, 0.3) !important;
}

/* Secondary/outline buttons */
#order-standard_cart .btn-default,
#order-standard_cart .btn-secondary {
    background: transparent !important;
    border: 1px solid var(--adaptive-input-border) !important;
    color: var(--adaptive-text-strong) !important;
}

#order-standard_cart .btn-default:hover,
#order-standard_cart .btn-secondary:hover {
    background: var(--adaptive-surface-3) !important;
    border-color: #0079F2 !important;
    color: #ffffff !important;
}

/* Radio/checkbox styling */
#order-standard_cart .domain-selection-options .iradio_square-blue,
#order-standard_cart .domain-selection-options .icheckbox_square-blue {
    margin-right: 0.75rem !important;
}

/* Help text */
#order-standard_cart .field-help-text,
#order-standard_cart .help-block,
#order-standard_cart small.text-muted {
    color: var(--adaptive-text-faint) !important;
}

/* Alert boxes */
#order-standard_cart .alert-info {
    background: rgba(0, 121, 242, 0.1) !important;
    border: 1px solid rgba(0, 121, 242, 0.3) !important;
    color: #60a5fa !important;
    border-radius: 0.5rem !important;
}

#order-standard_cart .alert-success {
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
    border-radius: 0.5rem !important;
}

#order-standard_cart .alert-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #fbbf24 !important;
    border-radius: 0.5rem !important;
}

#order-standard_cart .alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
    border-radius: 0.5rem !important;
}

/* ========================================
   ORDER PROCESS - GLOBAL FORM FIELD STYLING
   Consistent height and styling for ALL form fields
   ======================================== */

/* All text inputs throughout order process */
#order-standard_cart input[type="text"],
#order-standard_cart input[type="email"],
#order-standard_cart input[type="password"],
#order-standard_cart input[type="tel"],
#order-standard_cart input[type="number"],
#order-standard_cart input[type="search"],
#order-standard_cart input[type="url"],
#order-standard_cart .form-control,
#order-standard_cart textarea.form-control {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0.625rem 1rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    background: var(--adaptive-input-bg) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    color: var(--adaptive-text-strong) !important;
    border-radius: 0.5rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* ----------------------------------------------------------------------
   AUTOFILL FIX  (root cause of "black on black" card / email fields)
   When the browser autofills a field it overrides text color with its own
   -webkit-text-fill-color (near-black) and the dark field background shows
   through -> ~1.1:1 contrast, effectively invisible. The `color` property
   does NOT win against autofill; we must set -webkit-text-fill-color and
   repaint the background with an inset box-shadow (the only way to override
   the UA autofill background). Applies to ALL autofill states incl. hover/
   focus/active. Affects email, card number, expiry and CVC (all carry
   autocomplete attributes), plus every other order-form field.
   ---------------------------------------------------------------------- */
#order-standard_cart input:-webkit-autofill,
#order-standard_cart input:-webkit-autofill:hover,
#order-standard_cart input:-webkit-autofill:focus,
#order-standard_cart input:-webkit-autofill:active,
#order-standard_cart select:-webkit-autofill,
#order-standard_cart textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--adaptive-text-strong) !important;
    caret-color: var(--adaptive-text-strong) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--adaptive-input-bg) inset !important;
            box-shadow: 0 0 0 1000px var(--adaptive-input-bg) inset !important;
    border: 1px solid var(--adaptive-input-border) !important;
    transition: background-color 9999s ease-in-out 0s !important; /* defeat the pale autofill flash */
}

/* Textarea should be taller */
#order-standard_cart textarea.form-control {
    height: auto !important;
    min-height: 100px !important;
}

/* All select dropdowns throughout order process */
#order-standard_cart select,
#order-standard_cart select.form-control,
#order-standard_cart .custom-select {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0.625rem 2.5rem 0.625rem 1rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    background: var(--adaptive-input-bg) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    color: var(--adaptive-text-strong) !important;
    border-radius: 0.5rem !important;
    appearance: menulist !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    cursor: pointer !important;
}

/* Focus states for all form fields */
#order-standard_cart input[type="text"]:focus,
#order-standard_cart input[type="email"]:focus,
#order-standard_cart input[type="password"]:focus,
#order-standard_cart input[type="tel"]:focus,
#order-standard_cart input[type="number"]:focus,
#order-standard_cart input[type="search"]:focus,
#order-standard_cart input[type="url"]:focus,
#order-standard_cart .form-control:focus,
#order-standard_cart select:focus,
#order-standard_cart select.form-control:focus,
#order-standard_cart .custom-select:focus {
    border-color: #0079F2 !important;
    box-shadow: 0 0 0 3px rgba(0, 121, 242, 0.15) !important;
    outline: none !important;
}

/* Placeholder text */
#order-standard_cart input::placeholder,
#order-standard_cart textarea::placeholder,
#order-standard_cart .form-control::placeholder {
    color: var(--adaptive-text-faint) !important;
    opacity: 1 !important;
}

/* Input group addons (www., etc.) */
#order-standard_cart .input-group-text,
#order-standard_cart .input-group-addon,
#order-standard_cart .input-group-prepend .input-group-text,
#order-standard_cart .input-group-append .input-group-text {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0.625rem 1rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    background: var(--adaptive-surface-3) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    color: var(--adaptive-text-muted-2) !important;
    display: flex !important;
    align-items: center !important;
}

/* Input group buttons */
#order-standard_cart .input-group-btn .btn,
#order-standard_cart .input-group-append .btn,
#order-standard_cart .input-group .btn {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0.625rem 1.25rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Form control large variant */
#order-standard_cart .form-control-lg,
#order-standard_cart .input-group-lg .form-control,
#order-standard_cart .input-group-lg .input-group-text {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 1.125rem !important;
}

/* Billing cycle dropdown specific */
#order-standard_cart select[name="billingcycle"],
#order-standard_cart #inputBillingCycle,
#order-standard_cart .billing-cycle select {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0.625rem 2.5rem 0.625rem 1rem !important;
    font-size: 1rem !important;
    background: var(--adaptive-input-bg) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    color: var(--adaptive-text-strong) !important;
    border-radius: 0.5rem !important;
}

/* Quantity inputs */
#order-standard_cart input[type="number"],
#order-standard_cart .form-control-qty {
    width: 80px !important;
    text-align: center !important;
}

/* Disabled/readonly fields */
#order-standard_cart input:disabled,
#order-standard_cart input[readonly],
#order-standard_cart select:disabled,
#order-standard_cart select[readonly],
#order-standard_cart .form-control:disabled,
#order-standard_cart .form-control[readonly] {
    background: var(--adaptive-surface-3) !important;
    color: var(--adaptive-text-faint) !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* Form labels */
#order-standard_cart label,
#order-standard_cart .control-label,
#order-standard_cart .form-label {
    color: var(--adaptive-text-soft) !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.95rem !important;
}

/* Required field indicator */
#order-standard_cart label .required,
#order-standard_cart .required-indicator {
    color: #ef4444 !important;
}

/* Form groups spacing */
#order-standard_cart .form-group {
    margin-bottom: 1.25rem !important;
}

/* Checkbox and radio styling */
#order-standard_cart input[type="checkbox"],
#order-standard_cart input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #0079F2 !important;
    cursor: pointer !important;
}

#order-standard_cart .checkbox label,
#order-standard_cart .radio label {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
}

/* Validation states */
#order-standard_cart .has-error .form-control,
#order-standard_cart .is-invalid,
#order-standard_cart input.error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

#order-standard_cart .has-success .form-control,
#order-standard_cart .is-valid {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

#order-standard_cart .help-block.text-danger,
#order-standard_cart .invalid-feedback,
#order-standard_cart .error-message {
    color: #ef4444 !important;
    font-size: 0.85rem !important;
    margin-top: 0.375rem !important;
}

/* Panels and cards in order process */
#order-standard_cart .panel,
#order-standard_cart .card {
    background: linear-gradient(145deg, var(--adaptive-surface-3) 0%, var(--adaptive-surface-4) 100%) !important;
    border: 1px solid var(--adaptive-divider) !important;
    border-radius: 0.75rem !important;
}

#order-standard_cart .panel-heading,
#order-standard_cart .card-header {
    background: rgba(0, 121, 242, 0.1) !important;
    border-bottom: 1px solid var(--adaptive-divider) !important;
    color: var(--adaptive-text-on-surface) !important;
    padding: 1rem 1.25rem !important;
}

#order-standard_cart .panel-body,
#order-standard_cart .card-body {
    padding: 1.25rem !important;
    color: var(--adaptive-text-strong) !important;
}

#order-standard_cart .panel-footer,
#order-standard_cart .card-footer {
    background: var(--adaptive-overlay) !important;
    border-top: 1px solid var(--adaptive-divider) !important;
    padding: 1rem 1.25rem !important;
}

/* ========================================
   CHECKOUT FORM - FIX PLACEHOLDER CUTOFF
   Proper padding so placeholder text shows fully
   ======================================== */

/* Reset prepend icon padding that cuts off text */
#order-standard_cart .prepend-icon .field,
#order-standard_cart .prepend-icon input,
#order-standard_cart .prepend-icon .form-control {
    padding-left: 0.875rem !important;
    text-indent: 0 !important;
}

/* Remove icon positioning that causes cutoff */
#order-standard_cart .prepend-icon .field-icon {
    display: none !important;
}

/* Checkout form specific inputs */
#order-standard_cart input#inputFirstName,
#order-standard_cart input#inputLastName,
#order-standard_cart input#inputEmail,
#order-standard_cart input#inputPhone,
#order-standard_cart input#inputCompanyName,
#order-standard_cart input#inputAddress1,
#order-standard_cart input#inputAddress2,
#order-standard_cart input#inputCity,
#order-standard_cart input#inputPostcode,
#order-standard_cart input[name="firstname"],
#order-standard_cart input[name="lastname"],
#order-standard_cart input[name="email"],
#order-standard_cart input[name="phonenumber"],
#order-standard_cart input[name="companyname"],
#order-standard_cart input[name="address1"],
#order-standard_cart input[name="address2"],
#order-standard_cart input[name="city"],
#order-standard_cart input[name="postcode"],
#order-standard_cart input[name="tax_id"],
#order-standard_cart input[name="customfield[]"],
#order-standard_cart .checkout input.form-control,
#order-standard_cart .field {
    padding: 0.625rem 0.875rem !important;
    padding-left: 0.875rem !important;
    text-indent: 0 !important;
    background-position: left 0.875rem center !important;
}

/* Phone number input with country code */
#order-standard_cart .iti input,
#order-standard_cart .iti__tel-input,
#order-standard_cart input[type="tel"] {
    padding-left: 52px !important;
}

/* Country/State select dropdowns */
#order-standard_cart select#inputCountry,
#order-standard_cart select#stateselect,
#order-standard_cart select[name="country"],
#order-standard_cart select[name="state"] {
    padding: 0.625rem 2.5rem 0.625rem 0.875rem !important;
}

/* Fix any field with prepended icon */
#order-standard_cart .form-group .prepend-icon input {
    padding-left: 0.875rem !important;
}

/* Ensure placeholder is visible */
#order-standard_cart input::placeholder {
    opacity: 1 !important;
    color: var(--adaptive-text-faint) !important;
    text-overflow: ellipsis !important;
}

/* International telephone input flag dropdown */
#order-standard_cart .iti {
    width: 100% !important;
}

#order-standard_cart .iti__flag-container {
    padding: 0 !important;
}

#order-standard_cart .iti__selected-flag {
    background: var(--adaptive-surface-3) !important;
    border-right: 1px solid var(--adaptive-input-border) !important;
    padding: 0 8px !important;
    height: 44px !important;
}

#order-standard_cart .iti__country-list {
    background: var(--adaptive-surface-3) !important;
    border: 1px solid var(--adaptive-input-border) !important;
    color: var(--adaptive-text-strong) !important;
}

#order-standard_cart .iti__country:hover,
#order-standard_cart .iti__country.iti__highlight {
    background: var(--adaptive-divider) !important;
}

#order-standard_cart .iti__dial-code {
    color: var(--adaptive-text-muted-2) !important;
}

/* Checkout section headers */
#order-standard_cart .sub-heading span {
    background: var(--adaptive-input-bg) !important;
    padding: 0 1rem !important;
}

/* ========================================
   CHECKOUT - RECOMMENDED/UPSELL CARDS DARK MODE
   ======================================== */

/* Main promo container */
#order-standard_cart .mc-promo,
#order-standard_cart .addon-promo-container,
#order-standard_cart .panel-addon,
#order-standard_cart .product-recommendations,
#order-standard_cart .addon-products .panel,
#order-standard_cart .addon-products .card,
#order-standard_cart .marketconnect-addon-promo,
#order-standard_cart .marketconnect-promo,
#order-standard_cart [class*="promo-box"],
#order-standard_cart [class*="addon-promo"] {
    background: linear-gradient(145deg, var(--adaptive-surface-3) 0%, var(--adaptive-surface-4) 100%) !important;
    border: 1px solid var(--adaptive-divider) !important;
    border-radius: 0.75rem !important;
    color: var(--adaptive-text-strong) !important;
}

/* Promo card headers and titles */
#order-standard_cart .mc-promo .headline,
#order-standard_cart .mc-promo h3,
#order-standard_cart .mc-promo h4,
#order-standard_cart .addon-promo-container h3,
#order-standard_cart .addon-promo-container h4,
#order-standard_cart .panel-addon .panel-heading,
#order-standard_cart .panel-addon .panel-title,
#order-standard_cart .marketconnect-promo h3,
#order-standard_cart .marketconnect-promo h4,
#order-standard_cart .addon-products .panel-heading,
#order-standard_cart .addon-products .card-header,
#order-standard_cart [class*="promo"] .headline,
#order-standard_cart [class*="addon"] .panel-heading {
    color: var(--adaptive-text-on-surface) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--adaptive-divider) !important;
}

/* "Recommended for you" label */
#order-standard_cart .recommended-label,
#order-standard_cart .promo-label,
#order-standard_cart .mc-promo .label,
#order-standard_cart [class*="recommended"] {
    color: #10b981 !important;
    font-weight: 600 !important;
}

/* Promo pricing - make it stand out */
#order-standard_cart .mc-promo .price,
#order-standard_cart .mc-promo .pricing,
#order-standard_cart .addon-promo-container .price,
#order-standard_cart .panel-addon .price,
#order-standard_cart .marketconnect-promo .price,
#order-standard_cart [class*="promo"] .price {
    color: #10b981 !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

/* Promo description text */
#order-standard_cart .mc-promo p,
#order-standard_cart .mc-promo .description,
#order-standard_cart .addon-promo-container p,
#order-standard_cart .panel-addon .panel-body,
#order-standard_cart .marketconnect-promo p,
#order-standard_cart .addon-products .panel-body {
    color: var(--adaptive-text-muted-2) !important;
    background: transparent !important;
}

/* Feature lists in promo cards */
#order-standard_cart .mc-promo ul,
#order-standard_cart .mc-promo li,
#order-standard_cart .addon-promo-container ul,
#order-standard_cart .addon-promo-container li,
#order-standard_cart .panel-addon ul,
#order-standard_cart .panel-addon li,
#order-standard_cart .marketconnect-promo ul li,
#order-standard_cart [class*="promo"] .features li {
    color: var(--adaptive-text-soft) !important;
}

/* Feature list checkmarks/icons */
#order-standard_cart .mc-promo li::before,
#order-standard_cart .mc-promo li i,
#order-standard_cart .addon-promo-container li i,
#order-standard_cart [class*="promo"] li i,
#order-standard_cart [class*="promo"] .fa-check,
#order-standard_cart [class*="promo"] .fa-check-circle {
    color: #10b981 !important;
}

/* Promo card buttons */
#order-standard_cart .mc-promo .btn,
#order-standard_cart .mc-promo button,
#order-standard_cart .addon-promo-container .btn,
#order-standard_cart .panel-addon .btn,
#order-standard_cart .marketconnect-promo .btn,
#order-standard_cart [class*="promo"] .btn-add,
#order-standard_cart [class*="promo"] .btn-order {
    background: linear-gradient(135deg, #0079F2 0%, #005bb5 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

#order-standard_cart .mc-promo .btn:hover,
#order-standard_cart .addon-promo-container .btn:hover,
#order-standard_cart .panel-addon .btn:hover,
#order-standard_cart .marketconnect-promo .btn:hover,
#order-standard_cart [class*="promo"] .btn:hover {
    background: linear-gradient(135deg, #0066cc 0%, #004a99 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 121, 242, 0.3) !important;
}

/* Product name in promo */
#order-standard_cart .mc-promo .product-name,
#order-standard_cart .mc-promo .addon-name,
#order-standard_cart .addon-promo-container .product-name,
#order-standard_cart .marketconnect-promo .product-name {
    color: var(--adaptive-text-strong) !important;
    font-weight: 600 !important;
}

/* Promo card images/logos */
#order-standard_cart .mc-promo img,
#order-standard_cart .addon-promo-container img,
#order-standard_cart .marketconnect-promo img {
    filter: brightness(1.1) !important;
}

/* Card hover effect */
#order-standard_cart .mc-promo:hover,
#order-standard_cart .addon-promo-container:hover,
#order-standard_cart .panel-addon:hover,
#order-standard_cart .marketconnect-promo:hover {
    border-color: #0079F2 !important;
    box-shadow: 0 4px 20px rgba(0, 121, 242, 0.15) !important;
    transform: translateY(-2px) !important;
    transition: all 0.3s ease !important;
}

/* MarketConnect specific styling */
#order-standard_cart .marketconnect-addon-promo,
#order-standard_cart .mc-addon,
#order-standard_cart [class*="marketconnect"] {
    background: linear-gradient(145deg, var(--adaptive-surface-3) 0%, var(--adaptive-surface-4) 100%) !important;
    border: 1px solid var(--adaptive-divider) !important;
    color: var(--adaptive-text-strong) !important;
}

/* Any white backgrounds in promo sections */
#order-standard_cart .mc-promo *,
#order-standard_cart .addon-promo-container *,
#order-standard_cart .marketconnect-promo *,
#order-standard_cart [class*="promo-box"] * {
    background-color: transparent !important;
}

/* Reset backgrounds on specific elements that need them */
#order-standard_cart .mc-promo .btn,
#order-standard_cart .addon-promo-container .btn,
#order-standard_cart .marketconnect-promo .btn {
    background: linear-gradient(135deg, #0079F2 0%, #005bb5 100%) !important;
}

/* ========================================
   MC-PROMO SPECIFIC STRUCTURE FIX
   ======================================== */

/* Main mc-promo container */
#order-standard_cart .mc-promo {
    background: linear-gradient(145deg, var(--adaptive-surface-3) 0%, var(--adaptive-surface-4) 100%) !important;
    border: 1px solid var(--adaptive-divider) !important;
    border-radius: 0.75rem !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 120px !important;
    margin-bottom: 1.5rem !important;
}

/* Header section - override base height: 70px and overflow: hidden */
#order-standard_cart .mc-promo .header {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--adaptive-divider) !important;
    height: auto !important;
    min-height: 70px !important;
    overflow: visible !important;
    padding: 10px !important;
}

/* CTA section with price and button - keep float right from base CSS */
#order-standard_cart .mc-promo .cta {
    background: transparent !important;
    border: none !important;
    float: right !important;
    padding: 8px 10px !important;
    text-align: center !important;
}

/* Expander icon */
#order-standard_cart .mc-promo .expander {
    background: transparent !important;
    border: none !important;
    color: var(--adaptive-text-muted-2) !important;
}

#order-standard_cart .mc-promo .expander i {
    color: var(--adaptive-text-muted-2) !important;
}

/* Icon container */
#order-standard_cart .mc-promo .icon {
    background: transparent !important;
    border: none !important;
}

/* Content section with headline and tagline */
#order-standard_cart .mc-promo .content {
    background: transparent !important;
    border: none !important;
}

#order-standard_cart .mc-promo .headline {
    color: var(--adaptive-text-on-surface) !important;
    background: transparent !important;
}

#order-standard_cart .mc-promo .tagline {
    color: var(--adaptive-text-muted-2) !important;
    background: transparent !important;
}

/* Body section with features */
#order-standard_cart .mc-promo .body {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid var(--adaptive-divider) !important;
}

#order-standard_cart .mc-promo .body ul {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 1rem !important;
}

#order-standard_cart .mc-promo .body li {
    background: transparent !important;
    border: none !important;
    color: var(--adaptive-text-soft) !important;
}

#order-standard_cart .mc-promo .body li.left,
#order-standard_cart .mc-promo .body li.right {
    background: transparent !important;
    border: none !important;
}

/* Price styling */
#order-standard_cart .mc-promo .price {
    color: #10b981 !important;
    background: transparent !important;
    font-weight: 700 !important;
}

/* Add to cart button */
#order-standard_cart .mc-promo .btn-add {
    background: linear-gradient(135deg, #0079F2 0%, #005bb5 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

#order-standard_cart .mc-promo .btn-add .text {
    background: transparent !important;
    color: #ffffff !important;
    display: inline-block !important;
    padding: 6px 10px !important;
}

#order-standard_cart .mc-promo .btn-add .arrow {
    background: var(--adaptive-overlay) !important;
    color: #ffffff !important;
    display: inline-block !important;
    padding: 6px 10px !important;
}

#order-standard_cart .mc-promo .btn-add i {
    color: #ffffff !important;
}

/* Remove any box shadows that might appear white */
#order-standard_cart .mc-promo,
#order-standard_cart .mc-promo * {
    box-shadow: none !important;
}

/* Force all children to have transparent background */
#order-standard_cart .mc-promo > *,
#order-standard_cart .mc-promo .header > *,
#order-standard_cart .mc-promo .body > * {
    background-color: transparent !important;
}

/* ========================================
   EASYMDE MARKDOWN EDITOR - DARK MODE
   Complete dark theme for ticket message editor
   ======================================== */

/* Main EasyMDE Container */
.EasyMDEContainer {
    background-color: var(--adaptive-background-light) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* Editor Toolbar */
.EasyMDEContainer .editor-toolbar,
.editor-toolbar {
    background-color: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 8px !important;
}

.editor-toolbar a,
.EasyMDEContainer .editor-toolbar a {
    color: var(--adaptive-text) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
}

.editor-toolbar a:hover,
.EasyMDEContainer .editor-toolbar a:hover,
.editor-toolbar a.active,
.EasyMDEContainer .editor-toolbar a.active {
    background-color: var(--adaptive-background-light) !important;
    color: var(--adaptive-primary) !important;
}

.editor-toolbar a::before,
.EasyMDEContainer .editor-toolbar a::before {
    color: var(--adaptive-text) !important;
}

.editor-toolbar a:hover::before,
.EasyMDEContainer .editor-toolbar a:hover::before {
    color: var(--adaptive-primary) !important;
}

/* Toolbar Separator */
.editor-toolbar i.separator,
.EasyMDEContainer .editor-toolbar i.separator {
    border-left-color: var(--adaptive-border) !important;
    border-right-color: var(--adaptive-border) !important;
}

/* Toolbar Disabled State */
.editor-toolbar.disabled-for-preview a:not(.no-disable),
.EasyMDEContainer .editor-toolbar.disabled-for-preview a:not(.no-disable) {
    opacity: 0.4 !important;
}

/* CodeMirror Editor Area */
.EasyMDEContainer .CodeMirror,
.CodeMirror {
    background-color: var(--adaptive-background-light) !important;
    color: var(--adaptive-text) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    font-family: 'Roboto Mono', monospace !important;
}

.CodeMirror-scroll {
    background-color: var(--adaptive-background-light) !important;
}

.CodeMirror-gutters {
    background-color: var(--adaptive-card-bg) !important;
    border-right: 1px solid var(--adaptive-border) !important;
}

.CodeMirror-linenumber {
    color: var(--adaptive-text-light) !important;
}

/* CodeMirror Cursor */
.CodeMirror-cursor {
    border-left: 2px solid var(--adaptive-primary) !important;
}

/* CodeMirror Selection */
.CodeMirror-selected,
.CodeMirror-focused .CodeMirror-selected {
    background-color: rgba(0, 121, 242, 0.3) !important;
}

.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
    background-color: rgba(0, 121, 242, 0.3) !important;
}

/* CodeMirror Placeholder */
.CodeMirror-placeholder {
    color: var(--adaptive-text-light) !important;
    opacity: 0.7 !important;
}

/* Markdown Syntax Highlighting */
.cm-header,
.CodeMirror .cm-header {
    color: #60a5fa !important;
    font-weight: bold !important;
}

.cm-strong,
.CodeMirror .cm-strong {
    color: #f9fafb !important;
    font-weight: bold !important;
}

.cm-em,
.CodeMirror .cm-em {
    color: #fbbf24 !important;
    font-style: italic !important;
}

.cm-link,
.CodeMirror .cm-link {
    color: var(--adaptive-primary) !important;
    text-decoration: underline !important;
}

.cm-url,
.CodeMirror .cm-url {
    color: #10b981 !important;
}

.cm-string,
.CodeMirror .cm-string {
    color: #34d399 !important;
}

.cm-comment,
.CodeMirror .cm-comment {
    color: var(--adaptive-text-light) !important;
}

.cm-quote,
.CodeMirror .cm-quote {
    color: #a78bfa !important;
    font-style: italic !important;
}

.cm-tag,
.CodeMirror .cm-tag {
    color: #f472b6 !important;
}

.cm-attribute,
.CodeMirror .cm-attribute {
    color: #fbbf24 !important;
}

.cm-keyword,
.CodeMirror .cm-keyword {
    color: #f472b6 !important;
}

.cm-variable,
.cm-variable-2,
.cm-variable-3,
.CodeMirror .cm-variable,
.CodeMirror .cm-variable-2,
.CodeMirror .cm-variable-3 {
    color: var(--adaptive-text) !important;
}

.cm-s-easymde .cm-header-1 {
    font-size: 1.5em !important;
}

.cm-s-easymde .cm-header-2 {
    font-size: 1.3em !important;
}

.cm-s-easymde .cm-header-3 {
    font-size: 1.1em !important;
}

/* Preview Mode */
.editor-preview,
.EasyMDEContainer .editor-preview,
.editor-preview-side,
.EasyMDEContainer .editor-preview-side {
    background-color: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
    border: 1px solid var(--adaptive-border) !important;
    padding: 20px !important;
}

.editor-preview pre,
.EasyMDEContainer .editor-preview pre,
.editor-preview-side pre,
.EasyMDEContainer .editor-preview-side pre {
    background-color: var(--adaptive-background) !important;
    color: var(--adaptive-text) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 4px !important;
    padding: 12px !important;
}

.editor-preview code,
.EasyMDEContainer .editor-preview code,
.editor-preview-side code,
.EasyMDEContainer .editor-preview-side code {
    background-color: var(--adaptive-background) !important;
    color: #34d399 !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
}

.editor-preview blockquote,
.EasyMDEContainer .editor-preview blockquote,
.editor-preview-side blockquote,
.EasyMDEContainer .editor-preview-side blockquote {
    border-left: 4px solid var(--adaptive-primary) !important;
    background-color: var(--adaptive-background-light) !important;
    padding: 10px 15px !important;
    margin: 10px 0 !important;
    color: var(--adaptive-text-light) !important;
}

.editor-preview a,
.EasyMDEContainer .editor-preview a,
.editor-preview-side a,
.EasyMDEContainer .editor-preview-side a {
    color: var(--adaptive-primary) !important;
}

.editor-preview h1,
.editor-preview h2,
.editor-preview h3,
.editor-preview h4,
.editor-preview h5,
.editor-preview h6,
.EasyMDEContainer .editor-preview h1,
.EasyMDEContainer .editor-preview h2,
.EasyMDEContainer .editor-preview h3,
.EasyMDEContainer .editor-preview h4,
.EasyMDEContainer .editor-preview h5,
.EasyMDEContainer .editor-preview h6 {
    color: var(--adaptive-text) !important;
    border-bottom-color: var(--adaptive-border) !important;
}

/* Status Bar */
.editor-statusbar,
.EasyMDEContainer .editor-statusbar {
    background-color: var(--adaptive-card-bg) !important;
    border-top: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text-light) !important;
    padding: 8px 15px !important;
}

.editor-statusbar span,
.EasyMDEContainer .editor-statusbar span {
    color: var(--adaptive-text-light) !important;
}

/* Fullscreen Mode */
.EasyMDEContainer.fullscreen,
.editor-toolbar.fullscreen,
.CodeMirror-fullscreen {
    background-color: var(--adaptive-background) !important;
}

/* Side by Side Mode */
.EasyMDEContainer .CodeMirror-sided {
    border-right: 1px solid var(--adaptive-border) !important;
}

/* Tooltip */
.editor-toolbar [data-tooltip]::after {
    background-color: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
    border: 1px solid var(--adaptive-border) !important;
}

/* Focus State */
.EasyMDEContainer .CodeMirror-focused {
    border-color: var(--adaptive-primary) !important;
    box-shadow: 0 0 0 2px rgba(0, 121, 242, 0.2) !important;
}

/* Scrollbars for CodeMirror */
.CodeMirror-vscrollbar,
.CodeMirror-hscrollbar {
    background-color: var(--adaptive-background-light) !important;
}

.CodeMirror-vscrollbar::-webkit-scrollbar,
.CodeMirror-hscrollbar::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

.CodeMirror-vscrollbar::-webkit-scrollbar-track,
.CodeMirror-hscrollbar::-webkit-scrollbar-track {
    background: var(--adaptive-background-light) !important;
}

.CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
    background-color: var(--adaptive-border) !important;
    border-radius: 4px !important;
}

.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--adaptive-text-light) !important;
}

/* Active Line Highlighting */
.CodeMirror-activeline-background {
    background-color: rgba(0, 121, 242, 0.1) !important;
}

/* Matching Brackets */
.CodeMirror-matchingbracket {
    color: var(--adaptive-primary) !important;
    background-color: rgba(0, 121, 242, 0.2) !important;
    font-weight: bold !important;
}

/* ========================================
   BOOTSTRAP MARKDOWN EDITOR - DARK MODE
   Complete dark theme for ticket message editor
   ======================================== */

/* Main Bootstrap Markdown Container */
.md-editor,
[data-provide="markdown"] {
    background-color: var(--adaptive-background-light) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* Markdown Header/Toolbar */
.md-header,
.md-editor .md-header {
    background-color: var(--adaptive-card-bg) !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    padding: 8px !important;
}

/* Toolbar Buttons */
.md-header .btn,
.md-header .btn-default,
.md-header .btn-sm,
.md-editor .md-header .btn,
.md-editor .md-header .btn-default {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    color: var(--adaptive-text) !important;
    border-radius: 4px !important;
}

.md-header .btn:hover,
.md-header .btn-default:hover,
.md-editor .md-header .btn:hover {
    background-color: var(--adaptive-background-light) !important;
    border-color: var(--adaptive-border) !important;
    color: var(--adaptive-primary) !important;
}

.md-header .btn:focus,
.md-header .btn-default:focus,
.md-editor .md-header .btn:focus {
    background-color: var(--adaptive-background-light) !important;
    border-color: var(--adaptive-primary) !important;
    box-shadow: none !important;
    outline: none !important;
}

.md-header .btn.active,
.md-header .btn-default.active,
.md-editor .md-header .btn.active {
    background-color: var(--adaptive-primary) !important;
    border-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
}

/* Toolbar Button Icons */
.md-header .btn span,
.md-header .btn i,
.md-header .btn .fas,
.md-header .btn .far,
.md-editor .md-header .btn span {
    color: inherit !important;
}

/* Button Groups */
.md-header .btn-group,
.md-editor .md-header .btn-group {
    margin-right: 8px !important;
}

/* Preview Button - Primary Style */
.md-header .btn-primary,
.md-editor .md-header .btn-primary {
    background-color: var(--adaptive-primary) !important;
    border-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
}

.md-header .btn-primary:hover,
.md-editor .md-header .btn-primary:hover {
    background-color: var(--adaptive-primary-dark) !important;
    border-color: var(--adaptive-primary-dark) !important;
}

/* Fullscreen Control */
.md-controls,
.md-editor .md-controls {
    background-color: transparent !important;
}

.md-control,
.md-control-fullscreen,
.md-editor .md-control {
    color: var(--adaptive-text) !important;
}

.md-control:hover,
.md-control-fullscreen:hover,
.md-editor .md-control:hover {
    color: var(--adaptive-primary) !important;
}

/* Textarea / Input Area */
.md-editor textarea,
.md-editor .md-input,
.md-input,
textarea.md-input {
    background-color: var(--adaptive-background-light) !important;
    color: var(--adaptive-text) !important;
    border: none !important;
    border-top: 1px solid var(--adaptive-border) !important;
    padding: 15px !important;
    font-family: 'Roboto Mono', monospace !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.md-editor textarea:focus,
.md-editor .md-input:focus,
.md-input:focus,
textarea.md-input:focus {
    background-color: var(--adaptive-background-light) !important;
    color: var(--adaptive-text) !important;
    outline: none !important;
    box-shadow: none !important;
}

.md-editor textarea::placeholder,
.md-input::placeholder {
    color: var(--adaptive-text-light) !important;
    opacity: 0.7 !important;
}

/* Preview Area */
.md-preview,
.md-editor .md-preview {
    background-color: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
    border-top: 1px solid var(--adaptive-border) !important;
    padding: 15px !important;
}

.md-preview pre,
.md-editor .md-preview pre {
    background-color: var(--adaptive-background) !important;
    color: var(--adaptive-text) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 4px !important;
    padding: 12px !important;
}

.md-preview code,
.md-editor .md-preview code {
    background-color: var(--adaptive-background) !important;
    color: #34d399 !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
}

.md-preview blockquote,
.md-editor .md-preview blockquote {
    border-left: 4px solid var(--adaptive-primary) !important;
    background-color: var(--adaptive-background-light) !important;
    padding: 10px 15px !important;
    margin: 10px 0 !important;
    color: var(--adaptive-text-light) !important;
}

.md-preview a,
.md-editor .md-preview a {
    color: var(--adaptive-primary) !important;
}

.md-preview h1,
.md-preview h2,
.md-preview h3,
.md-preview h4,
.md-preview h5,
.md-preview h6,
.md-editor .md-preview h1,
.md-editor .md-preview h2,
.md-editor .md-preview h3,
.md-editor .md-preview h4,
.md-editor .md-preview h5,
.md-editor .md-preview h6 {
    color: var(--adaptive-text) !important;
}

/* Footer / Status */
.md-footer,
.md-editor .md-footer {
    background-color: var(--adaptive-card-bg) !important;
    border-top: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text-light) !important;
    padding: 8px 15px !important;
}

/* Fullscreen Mode */
.md-fullscreen-mode,
.md-editor.md-fullscreen-mode {
    background-color: var(--adaptive-background) !important;
}

.md-fullscreen-mode .md-header,
.md-editor.md-fullscreen-mode .md-header {
    background-color: var(--adaptive-card-bg) !important;
}

.md-fullscreen-mode textarea,
.md-fullscreen-mode .md-input,
.md-editor.md-fullscreen-mode textarea {
    background-color: var(--adaptive-background-light) !important;
}

/* Dropdown Menus (if any) */
.md-editor .dropdown-menu,
.md-header .dropdown-menu {
    background-color: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
}

.md-editor .dropdown-menu > li > a,
.md-header .dropdown-menu > li > a {
    color: var(--adaptive-text) !important;
}

.md-editor .dropdown-menu > li > a:hover,
.md-header .dropdown-menu > li > a:hover {
    background-color: var(--adaptive-background-light) !important;
    color: var(--adaptive-primary) !important;
}

/* Markdown Editor specific textarea styling */
textarea[data-provide="markdown"],
textarea.markdown-editor {
    background-color: var(--adaptive-background-light) !important;
    color: var(--adaptive-text) !important;
    border: 1px solid var(--adaptive-border) !important;
}

/* Force dark background on the wrapper div that bootstrap-markdown creates */
.md-editor > .md-header + textarea,
.md-editor > .md-header ~ textarea,
.md-editor > textarea {
    background-color: var(--adaptive-background-light) !important;
    color: var(--adaptive-text) !important;
}

/* Ensure btn-toolbar in markdown header is dark */
.md-header.btn-toolbar,
.md-editor .md-header.btn-toolbar {
    background-color: var(--adaptive-card-bg) !important;
}

/* ========================================
   BOOTSTRAP MARKDOWN - CRITICAL OVERRIDES
   These override the hardcoded styles in bootstrap-markdown.min.css
   ======================================== */

/* Override: .md-editor{border:1px solid #ddd} */
.md-editor {
    border: 1px solid var(--adaptive-border) !important;
    background-color: var(--adaptive-background-light) !important;
}

/* Override: .md-editor .md-footer,.md-editor>.md-header{background:#f5f5f5} */
.md-editor .md-footer,
.md-editor > .md-header {
    background: var(--adaptive-card-bg) !important;
    background-color: var(--adaptive-card-bg) !important;
}

/* Override: .md-editor>.md-preview{background:#fff} */
.md-editor > .md-preview {
    background: var(--adaptive-card-bg) !important;
    background-color: var(--adaptive-card-bg) !important;
    border-top: 1px dashed var(--adaptive-border) !important;
    border-bottom: 1px dashed var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
}

/* Override: .md-editor>textarea{background:#eee} */
.md-editor > textarea {
    background: var(--adaptive-background-light) !important;
    background-color: var(--adaptive-background-light) !important;
    border-top: 1px dashed var(--adaptive-border) !important;
    border-bottom: 1px dashed var(--adaptive-border) !important;
    color: var(--adaptive-text) !important;
}

/* Override: .md-editor>textarea:focus{background:#fff} */
.md-editor > textarea:focus {
    background: var(--adaptive-background-light) !important;
    background-color: var(--adaptive-background-light) !important;
    color: var(--adaptive-text) !important;
}

/* Override: .md-editor.active{border-color:#66afe9} */
.md-editor.active {
    border-color: var(--adaptive-primary) !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 121, 242, 0.4) !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 121, 242, 0.4) !important;
}

/* Override: .md-editor .md-controls .md-control{color:#bebebe} */
.md-editor .md-controls .md-control {
    color: var(--adaptive-text-light) !important;
}

/* Override: .md-editor .md-controls .md-control:hover{color:#333} */
.md-editor .md-controls .md-control:hover {
    color: var(--adaptive-primary) !important;
}

/* Override fullscreen mode styles */
.md-editor.md-fullscreen-mode {
    background: var(--adaptive-background) !important;
    background-color: var(--adaptive-background) !important;
}

.md-editor.md-fullscreen-mode .md-input,
.md-editor.md-fullscreen-mode .md-preview {
    background: var(--adaptive-background-light) !important;
    background-color: var(--adaptive-background-light) !important;
    color: var(--adaptive-text) !important;
}

.md-editor.md-fullscreen-mode .md-preview {
    color: var(--adaptive-text) !important;
}

.md-editor.md-fullscreen-mode .md-input:focus,
.md-editor.md-fullscreen-mode .md-input:hover {
    color: var(--adaptive-text) !important;
    background: var(--adaptive-background-light) !important;
    background-color: var(--adaptive-background-light) !important;
}

.md-editor.md-fullscreen-mode .btn {
    color: var(--adaptive-text-light) !important;
}

.md-editor.md-fullscreen-mode .btn.active,
.md-editor.md-fullscreen-mode .btn:active,
.md-editor.md-fullscreen-mode .btn:focus,
.md-editor.md-fullscreen-mode .btn:hover {
    color: var(--adaptive-primary) !important;
}

.md-editor.md-fullscreen-mode .md-fullscreen-controls a {
    color: var(--adaptive-text-light) !important;
}

.md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover {
    color: var(--adaptive-primary) !important;
}

/* Additional specificity for stubborn elements */
body .md-editor,
html .md-editor {
    background-color: var(--adaptive-background-light) !important;
}

body .md-editor > .md-header,
html .md-editor > .md-header {
    background-color: var(--adaptive-card-bg) !important;
}

body .md-editor > textarea,
html .md-editor > textarea {
    background-color: var(--adaptive-background-light) !important;
    color: var(--adaptive-text) !important;
}

body .md-editor > .md-preview,
html .md-editor > .md-preview {
    background-color: var(--adaptive-card-bg) !important;
    color: var(--adaptive-text) !important;
}

/* ========================================
   ENHANCED COLOR VARIETY - January 2026
   ======================================== */

/* Colorful icon containers for dashboard tiles */
.tiles .tile:nth-child(1) .ico-container,
.tiles .tile:nth-child(1) i.fa-3x {
    color: var(--adaptive-cyan) !important;
}

.tiles .tile:nth-child(2) .ico-container,
.tiles .tile:nth-child(2) i.fa-3x {
    color: var(--adaptive-purple) !important;
}

.tiles .tile:nth-child(3) .ico-container,
.tiles .tile:nth-child(3) i.fa-3x {
    color: var(--adaptive-green) !important;
}

.tiles .tile:nth-child(4) .ico-container,
.tiles .tile:nth-child(4) i.fa-3x {
    color: var(--adaptive-orange) !important;
}

.tiles .tile:nth-child(5) .ico-container,
.tiles .tile:nth-child(5) i.fa-3x {
    color: var(--adaptive-pink) !important;
}

.tiles .tile:nth-child(6) .ico-container,
.tiles .tile:nth-child(6) i.fa-3x {
    color: var(--adaptive-primary) !important;
}

/* Colorful card headers with gradient borders */
.card:nth-child(odd) {
    border-top: 3px solid transparent !important;
    border-image: var(--adaptive-gradient-primary) 1 !important;
}

.card:nth-child(even) {
    border-top: 3px solid transparent !important;
    border-image: var(--adaptive-gradient-purple) 1 !important;
}

/* Section dividers with gradient */
.section-divider,
hr {
    border: none !important;
    height: 2px !important;
    background: linear-gradient(90deg,
        transparent,
        var(--adaptive-primary) 20%,
        var(--adaptive-cyan) 50%,
        var(--adaptive-purple) 80%,
        transparent) !important;
    margin: 2rem 0 !important;
}

/* Gradient text for headings (optional accent) */
.gradient-text,
.page-title,
.hero-title {
    background: var(--adaptive-gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Sidebar navigation with colorful indicators */
.sidebar .list-group-item.active,
.client-area-sidebar .list-group-item.active {
    background: var(--adaptive-gradient-primary) !important;
    color: #ffffff !important;
    border-left: 4px solid var(--adaptive-cyan) !important;
}

/* Colorful progress bars */
.progress-bar.progress-bar-success {
    background: var(--adaptive-gradient-green) !important;
}

.progress-bar.progress-bar-warning {
    background: var(--adaptive-gradient-sunset) !important;
}

.progress-bar.progress-bar-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

.progress-bar.progress-bar-info {
    background: linear-gradient(135deg, var(--adaptive-cyan) 0%, var(--adaptive-primary) 100%) !important;
}

/* Colorful nav tabs underline */
.nav-tabs .nav-link.active {
    border-bottom: 3px solid transparent !important;
    border-image: var(--adaptive-gradient-primary) 1 !important;
    color: var(--adaptive-cyan) !important;
}

/* Feature cards with colorful icons */
.feature-card:nth-child(1) i,
.service-card:nth-child(1) i {
    color: var(--adaptive-cyan) !important;
}

.feature-card:nth-child(2) i,
.service-card:nth-child(2) i {
    color: var(--adaptive-purple) !important;
}

.feature-card:nth-child(3) i,
.service-card:nth-child(3) i {
    color: var(--adaptive-green) !important;
}

.feature-card:nth-child(4) i,
.service-card:nth-child(4) i {
    color: var(--adaptive-orange) !important;
}

/* Colorful icon badges */
.icon-badge.primary {
    background: var(--adaptive-gradient-primary) !important;
    box-shadow: 0 4px 15px var(--adaptive-primary-glow) !important;
}

.icon-badge.cyan {
    background: linear-gradient(135deg, var(--adaptive-cyan) 0%, var(--adaptive-primary) 100%) !important;
    box-shadow: 0 4px 15px var(--adaptive-cyan-glow) !important;
}

.icon-badge.purple {
    background: var(--adaptive-gradient-purple) !important;
    box-shadow: 0 4px 15px var(--adaptive-purple-glow) !important;
}

.icon-badge.green {
    background: var(--adaptive-gradient-green) !important;
    box-shadow: 0 4px 15px var(--adaptive-green-glow) !important;
}

.icon-badge.orange {
    background: var(--adaptive-gradient-sunset) !important;
    box-shadow: 0 4px 15px var(--adaptive-orange-glow) !important;
}

/* Vibrant link hover states */
a:hover {
    color: var(--adaptive-cyan) !important;
}

/* Table row hover with subtle color */
.table tbody tr:hover {
    background: linear-gradient(90deg,
        rgba(0, 212, 255, 0.05) 0%,
        rgba(0, 121, 242, 0.08) 50%,
        rgba(139, 92, 246, 0.05) 100%) !important;
}

/* Floating action buttons with gradients */
/* Phase 3c: '.fab' removed from this selector, it is Font Awesome's brand-icon class and painted every brand glyph. */
.floating-btn {
    background: var(--adaptive-gradient-primary) !important;
    box-shadow: 0 6px 20px var(--adaptive-primary-glow) !important;
}

.floating-btn:hover {
    background: linear-gradient(135deg, var(--adaptive-cyan) 0%, var(--adaptive-purple) 100%) !important;
    box-shadow: 0 8px 25px var(--adaptive-cyan-glow) !important;
    transform: translateY(-3px) scale(1.05) !important;
}

/* Pricing table accent colors */
.pricing-box:nth-child(1) .pricing-header,
.package:nth-child(1) .package-header {
    border-bottom: 3px solid var(--adaptive-cyan) !important;
}

.pricing-box:nth-child(2) .pricing-header,
.package:nth-child(2) .package-header {
    border-bottom: 3px solid var(--adaptive-purple) !important;
}

.pricing-box:nth-child(3) .pricing-header,
.package:nth-child(3) .package-header {
    border-bottom: 3px solid var(--adaptive-green) !important;
}

/* Notification badges with variety */
.notification-badge,
.badge-notification {
    background: var(--adaptive-gradient-sunset) !important;
    color: #ffffff !important;
    animation: pulse-badge 2s ease-in-out infinite !important;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Interactive button variants */
.btn-cyan {
    background: linear-gradient(135deg, var(--adaptive-cyan) 0%, var(--adaptive-primary) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px var(--adaptive-cyan-glow) !important;
}

.btn-cyan:hover {
    background: linear-gradient(135deg, #5eead4 0%, var(--adaptive-cyan) 100%) !important;
    transform: translateY(-2px) !important;
}

.btn-purple {
    background: var(--adaptive-gradient-purple) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px var(--adaptive-purple-glow) !important;
}

.btn-purple:hover {
    background: linear-gradient(135deg, #a78bfa 0%, var(--adaptive-purple) 100%) !important;
    transform: translateY(-2px) !important;
}

.btn-orange {
    background: var(--adaptive-gradient-sunset) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px var(--adaptive-orange-glow) !important;
}

.btn-orange:hover {
    background: linear-gradient(135deg, #fbbf24 0%, var(--adaptive-orange) 100%) !important;
    transform: translateY(-2px) !important;
}

/* Footer with gradient accent line - includes logo green */
.footer {
    border-top: 3px solid transparent !important;
    border-image: linear-gradient(90deg,
        var(--adaptive-primary),
        var(--adaptive-logo-green),
        var(--adaptive-cyan),
        var(--adaptive-purple)) 1 !important;
}

/* Logo green highlight for important elements */
.footer .btn-primary,
.footer a.btn {
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 100%) !important;
    border: none !important;
}

/* Panel accent colors by type */
.panel-services {
    border-left: 4px solid var(--adaptive-cyan) !important;
}

.panel-domains {
    border-left: 4px solid var(--adaptive-purple) !important;
}

.panel-billing {
    border-left: 4px solid var(--adaptive-green) !important;
}

.panel-support {
    border-left: 4px solid var(--adaptive-orange) !important;
}

/* Homepage welcome section accent */
.welcome-section,
.hero-section {
    background: linear-gradient(135deg,
        var(--adaptive-background) 0%,
        rgba(0, 121, 242, 0.05) 50%,
        rgba(139, 92, 246, 0.03) 100%) !important;
}

/* Service icons with color variety */
.service-icon.hosting {
    background: var(--adaptive-gradient-primary) !important;
}

.service-icon.domains {
    background: var(--adaptive-gradient-purple) !important;
}

.service-icon.ssl {
    background: var(--adaptive-gradient-green) !important;
}

.service-icon.email {
    background: var(--adaptive-gradient-sunset) !important;
}

/* Card glow effects on hover */
.card:hover,
.panel:hover {
    box-shadow:
        0 8px 25px -5px var(--adaptive-shadow-40),
        0 0 20px -5px var(--adaptive-primary-glow) !important;
}

/* Make text more readable - increased contrast */
.text-muted,
.text-secondary,
small,
.small {
    color: var(--adaptive-text-light) !important;
    font-size: 0.9em !important;
}

/* Larger form labels */
label,
.form-label,
.control-label {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
}

/* Improved input field sizes */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    font-size: 1rem !important;
    padding: 0.75rem 1rem !important;
    min-height: 44px !important;
}

/* Larger table text */
.table td,
.table th {
    font-size: 0.95rem !important;
    padding: 1rem 1.25rem !important;
}

/* Improved dropdown readability */
.dropdown-item {
    font-size: 0.95rem !important;
    padding: 0.75rem 1.25rem !important;
}

/* Breadcrumb larger text */
.breadcrumb-item,
.breadcrumb-item a {
    font-size: 0.95rem !important;
}

/* Panel/Card body larger text */
.card-body,
.panel-body {
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

/* ========================================
   FONT AWESOME ICON COLORS - VARIETY
   ======================================== */

/* Service-related icons - Cyan */
.fa-server, .fa-cloud, .fa-database, .fa-hdd,
.fa-network-wired, .fa-ethernet, .fa-wifi {
    color: var(--adaptive-cyan) !important;
}

/* Domain-related icons - Purple */
.fa-globe, .fa-globe-americas, .fa-globe-europe,
.fa-link, .fa-external-link-alt, .fa-sitemap {
    color: var(--adaptive-purple) !important;
}

/* Security icons - Green */
.fa-lock, .fa-shield-alt, .fa-key, .fa-fingerprint,
.fa-user-shield, .fa-check-circle {
    color: var(--adaptive-green) !important;
}

/* Billing/money icons - Orange */
.fa-credit-card, .fa-money-bill, .fa-dollar-sign,
.fa-file-invoice-dollar, .fa-wallet, .fa-coins {
    color: var(--adaptive-orange) !important;
}

/* Support icons - Pink */
.fa-life-ring, .fa-headset, .fa-comments, .fa-question-circle,
.fa-ticket-alt, .fa-envelope {
    color: var(--adaptive-pink) !important;
}

/* User icons - Primary blue */
.fa-user, .fa-users, .fa-user-circle, .fa-id-card {
    color: var(--adaptive-primary) !important;
}

/* Warning/alert icons */
.fa-exclamation-triangle, .fa-exclamation-circle {
    color: var(--adaptive-orange) !important;
}

/* Success icons */
.fa-check, .fa-thumbs-up {
    color: var(--adaptive-green) !important;
}

/* Error icons */
.fa-times, .fa-times-circle, .fa-ban {
    color: #ef4444 !important;
}

/* ========================================
   FORM INPUT FOCUS GLOW
   ======================================== */

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--adaptive-cyan) !important;
    box-shadow: 0 0 0 3px var(--adaptive-cyan-glow),
                0 0 15px var(--adaptive-cyan-glow) !important;
}

/* ========================================
   BUTTON HOVER ENHANCEMENTS
   ======================================== */

.btn:hover {
    transform: translateY(-2px) !important;
    transition: all 0.3s ease !important;
}

.btn-info {
    background: linear-gradient(135deg, var(--adaptive-cyan) 0%, var(--adaptive-primary) 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

.btn-warning {
    background: linear-gradient(135deg, var(--adaptive-orange) 0%, #e68a00 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

/* ========================================
   TABLE HEADER ACCENT
   ======================================== */

.table thead th {
    background: linear-gradient(180deg, var(--adaptive-background-light) 0%, var(--adaptive-surface-3) 100%) !important;
    border-bottom: 2px solid var(--adaptive-cyan) !important;
}

/* ========================================
   SIDEBAR ACCENT COLORS
   ======================================== */

.sidebar .list-group-item:hover,
.client-area-sidebar .list-group-item:hover {
    border-left: 3px solid var(--adaptive-cyan) !important;
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.1) 0%, transparent 100%) !important;
}

/* ========================================
   MODAL ENHANCEMENTS
   ======================================== */

.modal-header {
    background: linear-gradient(135deg, var(--adaptive-card-bg) 0%, var(--adaptive-background-light) 100%) !important;
    border-bottom: 2px solid var(--adaptive-primary) !important;
}

.modal-content {
    border: 1px solid var(--adaptive-border) !important;
    border-top: 3px solid !important;
    border-image: linear-gradient(90deg, var(--adaptive-primary), var(--adaptive-cyan), var(--adaptive-purple)) 1 !important;
}

/* ========================================
   DROPDOWN ACCENT
   ======================================== */

.dropdown-menu {
    border-top: 2px solid var(--adaptive-cyan) !important;
}

.dropdown-item:hover {
    background: linear-gradient(90deg, var(--adaptive-primary) 0%, var(--adaptive-logo-green) 100%) !important;
    color: #ffffff !important;
}

/* ========================================
   LOGO GREEN ACCENT ELEMENTS
   ======================================== */

/* Green accent for active/success states */
.list-group-item.active,
.nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 100%) !important;
    border-color: var(--adaptive-logo-green) !important;
    color: #ffffff !important;
}

/* Green checkmarks and success indicators */
.text-success,
.text-green {
    color: var(--adaptive-logo-green) !important;
}

/* Green border accent for featured items */
.featured,
.recommended,
.popular {
    border: 2px solid var(--adaptive-logo-green) !important;
    box-shadow: 0 0 20px var(--adaptive-logo-green-glow) !important;
}

/* Green glow on hover for interactive elements */
.btn-outline-success {
    color: var(--adaptive-logo-green) !important;
    border-color: var(--adaptive-logo-green) !important;
}

.btn-outline-success:hover {
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px var(--adaptive-logo-green-glow) !important;
}

/* Service status "Active" uses logo green */
.status-active,
.label-active,
.badge-active,
.label-success,
.badge-success {
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px var(--adaptive-logo-green-glow) !important;
}

/* Domain available indicator */
.domain-available,
.available {
    color: var(--adaptive-logo-green) !important;
    text-shadow: 0 0 10px var(--adaptive-logo-green-glow) !important;
}

/* Progress bar success */
.progress-bar-success,
.progress-bar.bg-success {
    background: linear-gradient(90deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 100%) !important;
}

/* Pricing "Get Started" buttons */
.pricing-table .btn-primary,
.package .btn-primary,
.pricing-box .btn-primary {
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px var(--adaptive-logo-green-glow) !important;
}

.pricing-table .btn-primary:hover,
.package .btn-primary:hover,
.pricing-box .btn-primary:hover {
    background: linear-gradient(135deg, var(--adaptive-logo-green-light) 0%, #34d399 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px var(--adaptive-logo-green-glow) !important;
}

/* Homepage action buttons with green */
.home-shortcuts .btn,
.action-buttons .btn-success,
.cta-button {
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 100%) !important;
    box-shadow: 0 4px 15px var(--adaptive-logo-green-glow) !important;
}

/* Table Active row highlight */
.table tbody tr.active td,
.table tbody tr.selected td {
    background: rgba(5, 150, 105, 0.15) !important;
    border-left: 3px solid var(--adaptive-logo-green) !important;
}

/* Sidebar active state with green */
.sidebar .active,
.client-area-sidebar .active {
    background: linear-gradient(90deg, rgba(5, 150, 105, 0.2) 0%, transparent 100%) !important;
    border-left: 4px solid var(--adaptive-logo-green) !important;
    color: var(--adaptive-logo-green) !important;
}

/* ========================================
   LIGHT MODE THEME
   ========================================
   Toggle between dark/light with body.light-mode class
   All dark mode styles remain default, light mode overrides below
   ======================================== */

/* Light Mode CSS Variables */
body.light-mode {
    /* Override base theme colors for light mode */
    --adaptive-background: #f8fafc;
    --adaptive-background-light: #ffffff;
    --adaptive-card-bg: #ffffff;
    --adaptive-secondary: #f1f5f9;

    /* Light mode text colors */
    --adaptive-text: #1e293b;
    --adaptive-text-light: #64748b;
    --adaptive-text-muted: #94a3b8;

    /* Light mode borders - softer */
    --adaptive-border: #e2e8f0;
    --adaptive-border-light: #cbd5e1;

    /* Accent colors remain vibrant */
    --adaptive-primary-glow: rgba(0, 121, 242, 0.15);
    --adaptive-cyan-glow: rgba(0, 212, 255, 0.15);
    --adaptive-purple-glow: rgba(139, 92, 246, 0.15);
    --adaptive-green-glow: rgba(5, 150, 105, 0.15);
    --adaptive-logo-green-glow: rgba(5, 150, 105, 0.15);
    --adaptive-orange-glow: rgba(245, 158, 11, 0.15);
    --adaptive-pink-glow: rgba(236, 72, 153, 0.15);
}

/* Light mode body styles */
body.light-mode,
body.light-mode html {
    background-color: #f8fafc !important;
    color: #1e293b !important;
}

/* Light mode main containers */
body.light-mode .content-wrapper,
body.light-mode .main-content,
body.light-mode #main-body,
body.light-mode .container-fluid,
body.light-mode .container,
body.light-mode .row,
body.light-mode .col,
body.light-mode [class*="col-"],
body.light-mode .page-content,
body.light-mode .content,
body.light-mode .client-area,
body.light-mode .primary-content,
body.light-mode section,
body.light-mode article,
body.light-mode .wrapper,
body.light-mode #page,
body.light-mode #content,
body.light-mode .site-content {
    background-color: #f8fafc !important;
    color: #1e293b !important;
}

/* Light mode header */
body.light-mode header,
body.light-mode header.header,
body.light-mode .header,
body.light-mode .top-nav,
body.light-mode .primary-bg-color {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 50%, #ffffff 100%) !important;
    box-shadow: 0 4px 20px rgba(0, 121, 242, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* Light mode header elements inherit properly */
body.light-mode header *:not(.dropdown-menu):not(.dropdown-menu *):not(.btn-primary):not(.btn-success):not(.badge):not(.badge *),
body.light-mode header.header *:not(.dropdown-menu):not(.dropdown-menu *):not(.btn-primary):not(.btn-success):not(.badge):not(.badge *) {
    background-color: transparent !important;
}

/* Light mode navigation */
body.light-mode .navbar,
body.light-mode .main-nav,
body.light-mode header nav,
body.light-mode header.header nav {
    background-color: transparent !important;
}

body.light-mode header .nav-link,
body.light-mode header .navbar-nav .nav-link,
body.light-mode header.header .toolbar .nav-link {
    color: #334155 !important;
}

body.light-mode header .nav-link:hover {
    background-color: rgba(0, 121, 242, 0.1) !important;
    color: var(--adaptive-primary) !important;
}

body.light-mode header .nav-link.active {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, var(--adaptive-cyan) 100%) !important;
    color: #ffffff !important;
}

/* Light mode topbar */
body.light-mode .topbar {
    background-color: #f1f5f9 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-mode .topbar .btn,
body.light-mode .topbar .input-group-text {
    color: #475569 !important;
}

/* Light mode cards */
body.light-mode .card,
body.light-mode .mc-promo-manage,
body.light-mode .mc-promo-login,
body.light-mode .panel,
body.light-mode .panel-default {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

body.light-mode .card:hover,
body.light-mode .panel:hover,
body.light-mode .panel-default:hover {
    box-shadow: 0 12px 24px -4px rgba(0, 121, 242, 0.12),
                0 0 30px -5px rgba(0, 121, 242, 0.08) !important;
    border-color: var(--adaptive-primary) !important;
}

body.light-mode .card-header,
body.light-mode .panel-heading {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

body.light-mode .card-body,
body.light-mode .panel-body {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

/* Light mode forms */
body.light-mode .form-control,
body.light-mode input[type="text"],
body.light-mode input[type="email"],
body.light-mode input[type="password"],
body.light-mode input[type="number"],
body.light-mode select,
body.light-mode textarea {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

body.light-mode .form-control:focus,
body.light-mode input:focus,
body.light-mode select:focus,
body.light-mode textarea:focus {
    border-color: var(--adaptive-primary) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(0, 121, 242, 0.1) !important;
}

body.light-mode .form-control::placeholder {
    color: #94a3b8 !important;
}

/* Light mode tables */
body.light-mode .table,
body.light-mode table {
    color: #1e293b !important;
    background-color: #ffffff !important;
}

body.light-mode .table thead th {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

body.light-mode .table tbody tr {
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-mode .table tbody tr:hover {
    background-color: rgba(0, 121, 242, 0.04) !important;
}

body.light-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8fafc !important;
}

body.light-mode .table td,
body.light-mode .table th {
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

/* Light mode DataTables */
body.light-mode .dataTables_wrapper {
    background: #ffffff !important;
}

body.light-mode .dataTables_wrapper .dataTables_length select,
body.light-mode .dataTables_wrapper .dataTables_filter input {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

body.light-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}

body.light-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--adaptive-primary) !important;
    border-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
}

/* Light mode list groups */
body.light-mode .list-group-item {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

body.light-mode .list-group-item:hover {
    background-color: #f8fafc !important;
}

/* Light mode dropdowns */
body.light-mode .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
                0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .dropdown-item {
    color: #334155 !important;
}

body.light-mode .dropdown-item:hover,
body.light-mode .dropdown-item:focus {
    background: linear-gradient(90deg, var(--adaptive-primary) 0%, var(--adaptive-logo-green) 100%) !important;
    color: #ffffff !important;
}

body.light-mode .dropdown-divider {
    border-top: 1px solid #e2e8f0 !important;
}

body.light-mode .dropdown-header {
    color: #64748b !important;
}

/* Light mode buttons - secondary/default */
body.light-mode .btn-secondary,
body.light-mode .btn-default {
    color: #334155 !important;
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

body.light-mode .btn-secondary:hover,
body.light-mode .btn-default:hover {
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

/* Light mode alerts */
body.light-mode .alert-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-left: 4px solid var(--adaptive-green) !important;
    color: #047857 !important;
}

body.light-mode .alert-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-left: 4px solid #ef4444 !important;
    color: #b91c1c !important;
}

body.light-mode .alert-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.05) 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    border-left: 4px solid var(--adaptive-orange) !important;
    color: #b45309 !important;
}

body.light-mode .alert-info {
    background: linear-gradient(135deg, rgba(0, 121, 242, 0.1) 0%, rgba(0, 212, 255, 0.05) 100%) !important;
    border: 1px solid rgba(0, 121, 242, 0.3) !important;
    border-left: 4px solid var(--adaptive-primary) !important;
    color: #0369a1 !important;
}

/* Light mode modals */
body.light-mode .modal-content {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-mode .modal-header {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

body.light-mode .modal-body {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

body.light-mode .modal-footer {
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* Light mode sidebar */
body.light-mode .sidebar,
body.light-mode .client-area-sidebar {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
}

body.light-mode .sidebar .list-group-item,
body.light-mode .client-area-sidebar .list-group-item {
    color: #334155 !important;
    border-color: #e2e8f0 !important;
}

body.light-mode .sidebar .list-group-item:hover,
body.light-mode .client-area-sidebar .list-group-item:hover {
    background-color: #f8fafc !important;
}

/* Light mode footer - clean light design */
body.light-mode .footer {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    color: #475569 !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.03) !important;
}

body.light-mode .footer * {
    color: #475569 !important;
}

body.light-mode .footer a,
body.light-mode .footer .nav-link {
    color: #334155 !important;
}

body.light-mode .footer a:hover,
body.light-mode .footer .nav-link:hover {
    color: var(--adaptive-primary) !important;
}

body.light-mode .footer p,
body.light-mode .footer .copyright,
body.light-mode .footer small {
    color: #64748b !important;
}

body.light-mode .footer h1,
body.light-mode .footer h2,
body.light-mode .footer h3,
body.light-mode .footer h4,
body.light-mode .footer h5,
body.light-mode .footer h6 {
    color: #1e293b !important;
}

body.light-mode .footer .btn {
    color: #334155 !important;
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
}

body.light-mode .footer .btn:hover {
    background-color: #cbd5e1 !important;
    color: #1e293b !important;
}

body.light-mode .footer .btn-primary {
    background: var(--adaptive-gradient-primary) !important;
    color: #ffffff !important;
    border: none !important;
}

body.light-mode .footer .social-icons a,
body.light-mode .footer .social-link {
    color: #64748b !important;
}

body.light-mode .footer .social-icons a:hover,
body.light-mode .footer .social-link:hover {
    color: var(--adaptive-primary) !important;
}

/* Phase 4 (2026-11-01): a generic light-mode element rule was removed here (headings, text, links or anchors);
   the tokens carry those colours now and the rule outranked panel and button styling. */

body.light-mode code, body.light-mode pre {
    color: #1e293b !important;
    background-color: #f1f5f9 !important;
}

body.light-mode .text-muted,
body.light-mode .text-secondary,
body.light-mode .help-block,
body.light-mode .form-text {
    color: #64748b !important;
}

/* Phase 4 (2026-11-01): a generic light-mode element rule was removed here (headings, text, links or anchors);
   the tokens carry those colours now and the rule outranked panel and button styling. */

/* Light mode breadcrumbs - keep the gradient but adjust text */
body.light-mode .master-breadcrumb {
    box-shadow: 0 4px 15px rgba(0, 121, 242, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Light mode pagination */
body.light-mode .pagination .page-link {
    color: var(--adaptive-primary) !important;
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

body.light-mode .pagination .page-link:hover {
    background-color: #f1f5f9 !important;
    color: var(--adaptive-primary-dark) !important;
}

body.light-mode .pagination .page-item.active .page-link {
    background-color: var(--adaptive-primary) !important;
    border-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
}

/* Light mode tabs */
body.light-mode .nav-tabs {
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-mode .nav-tabs .nav-link {
    color: #475569 !important;
}

body.light-mode .nav-tabs .nav-link:hover {
    border-color: #e2e8f0 !important;
    color: var(--adaptive-primary) !important;
}

body.light-mode .nav-tabs .nav-link.active {
    color: var(--adaptive-primary) !important;
    background-color: #ffffff !important;
    border-color: #e2e8f0 #e2e8f0 #ffffff !important;
}

/* Light mode domain search */
body.light-mode .home-domain-search .input-group-wrapper {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

/* Light mode search box in header */
body.light-mode .search-bar,
body.light-mode .header-search,
body.light-mode header .search,
body.light-mode header input[type="search"],
body.light-mode header input.form-control {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

body.light-mode header input.form-control:focus {
    background-color: #ffffff !important;
    border-color: var(--adaptive-primary) !important;
}

/* Light mode bg-white stays white */
body.light-mode .bg-white {
    background-color: #ffffff !important;
}

/* Light mode selection */
body.light-mode ::selection {
    background-color: var(--adaptive-primary);
    color: #ffffff;
}

body.light-mode ::-moz-selection {
    background-color: var(--adaptive-primary);
    color: #ffffff;
}

/* Light mode progress bars */
body.light-mode .progress {
    background-color: #e2e8f0 !important;
}

/* Light mode client alerts popover */
body.light-mode .client-alerts {
    background-color: #ffffff !important;
}

body.light-mode .client-alerts li a {
    color: #334155 !important;
}

body.light-mode .client-alerts li a:hover {
    background-color: #f8fafc !important;
}

/* ========================================
   THEME TOGGLE BUTTON - SIMPLE & RELIABLE
   ======================================== */

/* Main toggle button */
.theme-toggle-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    background: linear-gradient(135deg, var(--adaptive-card-bg) 0%, var(--adaptive-background-light) 100%) !important;
    border: 2px solid var(--adaptive-border) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.theme-toggle-btn:hover {
    transform: scale(1.1) !important;
    border-color: var(--adaptive-primary) !important;
    box-shadow: 0 0 15px var(--adaptive-primary-glow) !important;
}

.theme-toggle-btn:active {
    transform: scale(0.95) !important;
}

.theme-toggle-btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--adaptive-primary-glow) !important;
}

/* Icons inside button */
.theme-toggle-btn .theme-icon-dark,
.theme-toggle-btn .theme-icon-light {
    position: absolute !important;
    font-size: 18px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Moon icon - visible in dark mode */
.theme-toggle-btn .theme-icon-dark {
    color: #fcd34d !important;
    opacity: 1 !important;
    transform: rotate(0deg) scale(1) !important;
}

/* Sun icon - hidden in dark mode */
.theme-toggle-btn .theme-icon-light {
    color: #f59e0b !important;
    opacity: 0 !important;
    transform: rotate(-90deg) scale(0.5) !important;
}

/* Light mode - swap icons */
body.light-mode .theme-toggle-btn {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
    border-color: #7dd3fc !important;
}

body.light-mode .theme-toggle-btn:hover {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.4) !important;
}

/* Light mode - hide moon, show sun */
body.light-mode .theme-toggle-btn .theme-icon-dark {
    opacity: 0 !important;
    transform: rotate(90deg) scale(0.5) !important;
}

body.light-mode .theme-toggle-btn .theme-icon-light {
    opacity: 1 !important;
    transform: rotate(0deg) scale(1) !important;
    color: #f59e0b !important;
}

/* Pulse animation for sun in light mode */
body.light-mode .theme-toggle-btn .theme-icon-light {
    animation: sunRotate 10s linear infinite !important;
}

@keyframes sunRotate {
    from { transform: rotate(0deg) scale(1); }
    to { transform: rotate(360deg) scale(1); }
}

/* Theme transition animation class */
body.theme-transitioning,
body.theme-transitioning * {
    transition: background-color 0.4s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}

/* Prevent transition on page load */
body:not(.theme-transitioning) .theme-toggle::before {
    transition-duration: 0s;
}

/* Toggle button feedback animation */
.theme-toggle.toggled {
    animation: togglePop 0.3s ease;
}

@keyframes togglePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Early light mode support (applied to html before body loads) */
html.light-mode {
    background-color: #f8fafc;
}

/* Ensure smooth page transitions */
html {
    scroll-behavior: smooth;
}

/* ========================================
   ADDITIONAL LIGHT MODE REFINEMENTS
   ======================================== */

/* Light mode popover content */
body.light-mode .popover {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-mode .popover-header {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

body.light-mode .popover-body {
    color: #334155 !important;
}

body.light-mode .bs-popover-bottom .arrow::after,
body.light-mode .bs-popover-auto[x-placement^="bottom"] .arrow::after {
    border-bottom-color: #ffffff !important;
}

/* Light mode tooltip */
body.light-mode .tooltip-inner {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

/* Light mode close button */
body.light-mode .close {
    color: #475569 !important;
}

body.light-mode .close:hover {
    color: #1e293b !important;
}

/* Light mode custom scrollbar */
body.light-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.light-mode ::-webkit-scrollbar-track {
    background: #f1f5f9;
}

body.light-mode ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
}

body.light-mode ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Light mode active client badge in topbar */
body.light-mode .active-client .btn,
body.light-mode .btn-active-client {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-mode .active-client .btn:hover,
body.light-mode .btn-active-client:hover {
    background-color: #e2e8f0 !important;
}

/* Light mode account notifications */
body.light-mode #accountNotifications {
    color: #475569 !important;
}

body.light-mode #accountNotificationsContent {
    background-color: #ffffff !important;
}

/* Light mode input group */
body.light-mode .input-group-text {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}

/* Light mode custom checkbox/radio */
body.light-mode .custom-control-label::before {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

/* Light mode select2 (if used) */
body.light-mode .select2-container--default .select2-selection--single {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

body.light-mode .select2-dropdown {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

body.light-mode .select2-results__option {
    color: #334155 !important;
}

body.light-mode .select2-results__option--highlighted {
    background-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
}

/* Light mode invoice view */
body.light-mode .invoice-container,
body.light-mode .quote-container {
    background-color: #ffffff !important;
}

/* Light mode jumbotron/hero sections */
body.light-mode .jumbotron,
body.light-mode .hero {
    background-color: #f1f5f9 !important;
}

/* Light mode well/highlight boxes */
body.light-mode .well,
body.light-mode .highlight-box {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* Light mode loading spinner */
body.light-mode .spinner-border {
    color: var(--adaptive-primary) !important;
}

/* Light mode empty state */
body.light-mode .empty-state,
body.light-mode .no-results {
    color: #64748b !important;
}

/* Light mode accordions */
body.light-mode .accordion .card-header {
    background-color: #f8fafc !important;
}

body.light-mode .accordion .card-header:hover {
    background-color: #f1f5f9 !important;
}

/* Light mode KB articles */
body.light-mode .kb-article,
body.light-mode .article-content {
    background-color: #ffffff !important;
    color: #334155 !important;
}

/* Light mode ticket view */
body.light-mode .ticket-reply,
body.light-mode .client-reply {
    background-color: #f8fafc !important;
    border-left: 4px solid var(--adaptive-primary) !important;
}

body.light-mode .staff-reply {
    background-color: #ffffff !important;
    border-left: 4px solid var(--adaptive-logo-green) !important;
}

/* Light mode pricing tables */
body.light-mode .pricing-table .panel,
body.light-mode .pricing-box {
    background-color: #ffffff !important;
}

body.light-mode .pricing-table .panel-heading,
body.light-mode .pricing-box .pricing-header {
    background-color: #f8fafc !important;
}

/* Light mode login page */
body.light-mode .login-split-container {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

body.light-mode .login-form-side {
    background-color: #ffffff !important;
}

body.light-mode .login-form-header h2 {
    color: #1e293b !important;
}

body.light-mode .login-form-header p {
    color: #64748b !important;
}

body.light-mode .form-group-modern label {
    color: #334155 !important;
}

body.light-mode .form-group-modern input {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

body.light-mode .form-group-modern input:focus {
    background-color: #ffffff !important;
    border-color: var(--adaptive-primary) !important;
}

body.light-mode .login-links a {
    color: var(--adaptive-primary) !important;
}

body.light-mode .login-divider span {
    background-color: #ffffff !important;
    color: #94a3b8 !important;
}

body.light-mode .social-login-btn {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

body.light-mode .social-login-btn:hover {
    background-color: #f1f5f9 !important;
}

/* Light mode register page */
body.light-mode .register-wrapper,
body.light-mode .registration-form {
    background-color: #ffffff !important;
}

/* Light mode password reset */
body.light-mode .password-reset-container {
    background-color: #ffffff !important;
}

/* Light mode order forms */
body.light-mode .order-form,
body.light-mode .checkout-form {
    background-color: #ffffff !important;
}

/* Light mode store pages */
body.light-mode .store-wrapper,
body.light-mode .product-group {
    background-color: #f8fafc !important;
}

body.light-mode .store-product-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-mode .store-product-card:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 121, 242, 0.1) !important;
}

/* ========================================
   LIGHT MODE - STORE & PRODUCT PAGES
   Complete overrides for shopping cart,
   product listings, pricing tables, sidebars
   ======================================== */

/* Main content area */
body.light-mode .main-content,
body.light-mode #main-body,
body.light-mode .primary-content {
    background-color: #f8fafc !important;
}

/* Sidebar in light mode */
body.light-mode .sidebar {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
}

body.light-mode .sidebar .panel,
body.light-mode .sidebar .card {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

body.light-mode .sidebar .panel-heading,
body.light-mode .sidebar .card-header,
body.light-mode .sidebar .panel-title,
body.light-mode .sidebar h3,
body.light-mode .sidebar h4 {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-mode .sidebar .panel-body,
body.light-mode .sidebar .card-body {
    background-color: #ffffff !important;
}

body.light-mode .sidebar .list-group-item {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

body.light-mode .sidebar .list-group-item:hover {
    background-color: #f1f5f9 !important;
    color: var(--adaptive-primary) !important;
}

body.light-mode .sidebar .list-group-item.active {
    background-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
    border-color: var(--adaptive-primary) !important;
}

body.light-mode .sidebar a {
    color: #334155 !important;
}

body.light-mode .sidebar a:hover {
    color: var(--adaptive-primary) !important;
}

/* Product/Pricing Cards */
body.light-mode .product,
body.light-mode .product-card,
body.light-mode .pricing-card,
body.light-mode .product-item,
body.light-mode .product-box,
body.light-mode .package,
body.light-mode .pricing-box,
body.light-mode .pricing-table .panel {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .product:hover,
body.light-mode .product-card:hover,
body.light-mode .pricing-card:hover,
body.light-mode .product-item:hover,
body.light-mode .product-box:hover,
body.light-mode .package:hover,
body.light-mode .pricing-box:hover,
body.light-mode .pricing-table .panel:hover {
    border-color: var(--adaptive-primary) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 121, 242, 0.15) !important;
}

/* Product headers */
body.light-mode .product-header,
body.light-mode .product-card .card-header,
body.light-mode .pricing-header,
body.light-mode .package-header,
body.light-mode .pricing-table .panel-heading,
body.light-mode .product .panel-heading {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* Product body/content */
body.light-mode .product-body,
body.light-mode .product-card .card-body,
body.light-mode .pricing-body,
body.light-mode .package-body,
body.light-mode .pricing-table .panel-body,
body.light-mode .product .panel-body {
    background-color: #ffffff !important;
    color: #334155 !important;
}

/* Product titles */
body.light-mode .product-title,
body.light-mode .product-name,
body.light-mode .package-name,
body.light-mode .pricing-title,
body.light-mode .product h3,
body.light-mode .product h4,
body.light-mode .product-card h3,
body.light-mode .product-card h4 {
    color: #1e293b !important;
}

/* Product descriptions and features */
body.light-mode .product-description,
body.light-mode .product-features,
body.light-mode .package-features,
body.light-mode .pricing-features,
body.light-mode .product p,
body.light-mode .product li,
body.light-mode .product-card p,
body.light-mode .product-card li {
    color: #475569 !important;
}

body.light-mode .product-features li::before,
body.light-mode .package-features li::before {
    color: var(--adaptive-primary) !important;
}

/* Pricing amounts */
body.light-mode .product-price,
body.light-mode .price,
body.light-mode .pricing-amount,
body.light-mode .package-price,
body.light-mode .amount {
    color: #1e293b !important;
}

body.light-mode .price .currency,
body.light-mode .price .period,
body.light-mode .pricing-period {
    color: #64748b !important;
}

/* Quick Summary boxes */
body.light-mode .quick-summary,
body.light-mode .product-summary,
body.light-mode .feature-list {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

/* Featured/Recommended products */
body.light-mode .featured,
body.light-mode .recommended,
body.light-mode .popular,
body.light-mode .product.featured,
body.light-mode .pricing-box.featured,
body.light-mode .pricing-table .panel.recommended {
    border: 2px solid var(--adaptive-logo-green) !important;
    box-shadow: 0 4px 20px rgba(5, 150, 105, 0.15) !important;
}

/* Shopping Cart */
body.light-mode .cart,
body.light-mode .shopping-cart,
body.light-mode .cart-body,
body.light-mode .order-summary {
    background-color: #ffffff !important;
    color: #334155 !important;
}

body.light-mode .cart-item,
body.light-mode .cart-row {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

body.light-mode .cart-total,
body.light-mode .order-total {
    background-color: #f8fafc !important;
    border-top: 2px solid #e2e8f0 !important;
    color: #1e293b !important;
}

/* Category panels */
body.light-mode .category,
body.light-mode .category-list,
body.light-mode .product-group {
    background-color: #ffffff !important;
}

body.light-mode .category-item,
body.light-mode .category-link {
    color: #334155 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-mode .category-item:hover,
body.light-mode .category-link:hover {
    background-color: #f1f5f9 !important;
    color: var(--adaptive-primary) !important;
}

body.light-mode .category-item.active,
body.light-mode .category-link.active {
    background-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
}

/* Configurable options */
body.light-mode .configurable-options,
body.light-mode .addon-products,
body.light-mode .product-addons {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-mode .configurable-option,
body.light-mode .addon-item {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

body.light-mode .configurable-option:hover,
body.light-mode .addon-item:hover {
    border-color: var(--adaptive-primary) !important;
}

/* Domain search in store */
body.light-mode .domain-checker,
body.light-mode .domain-search-result {
    background-color: #ffffff !important;
    color: #334155 !important;
}

body.light-mode .domain-available {
    color: var(--adaptive-logo-green) !important;
}

body.light-mode .domain-unavailable {
    color: #ef4444 !important;
}

/* Store page headings */
body.light-mode .store-heading,
body.light-mode .product-group-heading,
body.light-mode .category-heading {
    color: #1e293b !important;
}

body.light-mode .store-subheading,
body.light-mode .product-group-description {
    color: #64748b !important;
}

/* Panel footers in products */
body.light-mode .panel-footer,
body.light-mode .product-footer,
body.light-mode .card-footer {
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* Highlight text in products */
body.light-mode .highlight,
body.light-mode .text-highlight,
body.light-mode .feature-highlight {
    color: var(--adaptive-primary) !important;
}

/* Control Panel Links section */
body.light-mode .control-panel-links,
body.light-mode .quick-links {
    background-color: #ffffff !important;
}

body.light-mode .control-panel-links a,
body.light-mode .quick-links a {
    color: #334155 !important;
}

body.light-mode .control-panel-links a:hover,
body.light-mode .quick-links a:hover {
    color: var(--adaptive-primary) !important;
    background-color: #f1f5f9 !important;
}

/* Action buttons section */
body.light-mode .actions,
body.light-mode .sidebar-actions {
    background-color: #ffffff !important;
}

/* Well and info boxes */
body.light-mode .well,
body.light-mode .info-box,
body.light-mode .notice-box {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

/* Any remaining dark backgrounds */
body.light-mode [style*="background-color: rgb(28"],
body.light-mode [style*="background-color: rgb(13"],
body.light-mode [style*="background-color: #0d"],
body.light-mode [style*="background-color: #1c"],
body.light-mode [style*="background: rgb(28"],
body.light-mode [style*="background: rgb(13"] {
    background-color: #ffffff !important;
}

/* Generic overrides for any missed dark elements */
body.light-mode .bg-dark,
body.light-mode .dark-bg {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
}

body.light-mode .text-light {
    color: #334155 !important;
}

body.light-mode .text-white {
    color: #1e293b !important;
}

/* ========================================
   LIGHT MODE - ORDER FORMS & CART
   Specific styles for WHMCS standard cart
   ======================================== */

/* Order form container */
body.light-mode #order-standard_cart,
body.light-mode .order-standard_cart {
    background-color: #f8fafc !important;
}

/* Cart sidebar */
body.light-mode .cart-sidebar,
body.light-mode .cart-sidebar.sidebar {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
}

body.light-mode .cart-sidebar .panel,
body.light-mode .cart-sidebar .card {
    background-color: #ffffff !important;
    border: none !important;
    margin-bottom: 0 !important;
}

body.light-mode .cart-sidebar .panel-heading,
body.light-mode .cart-sidebar .card-header {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-weight: 600 !important;
}

body.light-mode .cart-sidebar .panel-body,
body.light-mode .cart-sidebar .card-body {
    background-color: #ffffff !important;
}

body.light-mode .cart-sidebar .list-group-item,
body.light-mode .cart-sidebar li {
    background-color: #ffffff !important;
    color: #334155 !important;
    border-color: #e2e8f0 !important;
}

body.light-mode .cart-sidebar .list-group-item:hover,
body.light-mode .cart-sidebar li:hover {
    background-color: #f1f5f9 !important;
}

body.light-mode .cart-sidebar a {
    color: #334155 !important;
}

body.light-mode .cart-sidebar a:hover {
    color: var(--adaptive-primary) !important;
}

/* Cart body / main content */
body.light-mode .cart-body {
    background-color: #f8fafc !important;
    color: #334155 !important;
}

/* Header lined */
body.light-mode .header-lined,
body.light-mode .header-lined h1,
body.light-mode .header-lined h2,
body.light-mode .header-lined h3 {
    color: #1e293b !important;
}

body.light-mode .header-lined p {
    color: #64748b !important;
}

/* Products container */
body.light-mode .products,
body.light-mode #products {
    background-color: transparent !important;
}

/* Individual product cards */
body.light-mode .product,
body.light-mode .products .product {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    color: #334155 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .product:hover {
    border-color: var(--adaptive-primary) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 121, 242, 0.12) !important;
}

/* Product header */
body.light-mode .product header,
body.light-mode .product .product-header {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-mode .product header span,
body.light-mode .product header a {
    color: #1e293b !important;
}

/* Product description */
body.light-mode .product-desc,
body.light-mode .product .product-desc {
    background-color: #ffffff !important;
    color: #475569 !important;
}

body.light-mode .product-desc p {
    color: #475569 !important;
}

body.light-mode .product-desc ul,
body.light-mode .product-desc li {
    color: #475569 !important;
}

body.light-mode .product-desc .feature-value,
body.light-mode .feature-value {
    color: var(--adaptive-primary) !important;
    font-weight: 600 !important;
}

/* Product footer/pricing */
body.light-mode .product footer,
body.light-mode .product .product-footer {
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

body.light-mode .product-pricing,
body.light-mode .product .product-pricing {
    color: #334155 !important;
}

body.light-mode .product-pricing .price,
body.light-mode .product .price {
    color: #1e293b !important;
    font-weight: 700 !important;
}

/* Store order container */
body.light-mode .store-order-container {
    background-color: #f8fafc !important;
}

/* Store tabs */
body.light-mode .store-domain-tabs,
body.light-mode .nav-tabs {
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-mode .store-domain-tabs .nav-link,
body.light-mode .store-domain-tabs .nav-item a {
    color: #475569 !important;
    background-color: transparent !important;
}

body.light-mode .store-domain-tabs .nav-link:hover {
    color: var(--adaptive-primary) !important;
    border-color: #e2e8f0 !important;
}

body.light-mode .store-domain-tabs .nav-link.active {
    color: var(--adaptive-primary) !important;
    background-color: #ffffff !important;
    border-color: #e2e8f0 #e2e8f0 #ffffff !important;
}

/* Store tab content */
body.light-mode .store-domain-tab-content,
body.light-mode .tab-content.bg-white,
body.light-mode .tab-content {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: none !important;
    color: #334155 !important;
}

body.light-mode .tab-pane {
    background-color: #ffffff !important;
    color: #334155 !important;
}

/* Responsive tabs connector */
body.light-mode .responsive-tabs-sm-connector {
    background-color: #ffffff !important;
}

body.light-mode .responsive-tabs-sm-connector .channel {
    background-color: #ffffff !important;
}

body.light-mode .responsive-tabs-sm-connector .bottom-border {
    border-color: #e2e8f0 !important;
}

/* Payment term section */
body.light-mode .payment-term {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
}

body.light-mode .payment-term h4 {
    color: #1e293b !important;
}

/* Domain validation */
body.light-mode .domain-validation {
    color: #334155 !important;
}

body.light-mode .domain-validation.ok {
    color: var(--adaptive-logo-green) !important;
}

body.light-mode .domain-validation.error {
    color: #ef4444 !important;
}

/* Order form rows */
body.light-mode .row-eq-height {
    background-color: transparent !important;
}

/* Qty badge */
body.light-mode .product .qty {
    background-color: #e2e8f0 !important;
    color: #475569 !important;
}

/* Configure product options */
body.light-mode .product-options,
body.light-mode .configurable-options {
    background-color: #ffffff !important;
}

body.light-mode .option-group,
body.light-mode .config-option {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

/* Order summary */
body.light-mode .order-summary-container,
body.light-mode .ordersummary {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-mode .order-summary-container th,
body.light-mode .ordersummary th {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
}

body.light-mode .order-summary-container td,
body.light-mode .ordersummary td {
    color: #334155 !important;
    border-color: #e2e8f0 !important;
}

/* Checkout page */
body.light-mode .checkout,
body.light-mode #checkout {
    background-color: #f8fafc !important;
}

body.light-mode .checkout-content {
    background-color: #ffffff !important;
}

/* Complete page */
body.light-mode .order-complete,
body.light-mode .complete-page {
    background-color: #ffffff !important;
    color: #334155 !important;
}

/* ========================================
   LIGHT MODE - NUCLEAR OVERRIDES
   Force ALL text to be dark in light mode
   ======================================== */

/* Phase 3 (2026-11-01): the catch-all that forced #334155 on every element in light mode is gone. The tokens carry
   the light text colours now, and it was recolouring white text on gradients (login and register brand panels,
   badges, breadcrumbs). Text inherits var(--adaptive-text) from body instead. */

/* Except buttons and badges that should stay white text */
body.light-mode .btn-primary,
body.light-mode .btn-primary *,
body.light-mode .btn-success,
body.light-mode .btn-success *,
body.light-mode .btn-danger,
body.light-mode .btn-danger *,
body.light-mode .btn-info,
body.light-mode .btn-info *,
body.light-mode .badge-primary,
body.light-mode .badge-success,
body.light-mode .badge-danger,
body.light-mode .badge-info,
body.light-mode .label-primary,
body.light-mode .label-success,
body.light-mode .label-danger,
body.light-mode .label-info,
body.light-mode .list-group-item.active,
body.light-mode .list-group-item.active * {
    color: #ffffff !important;
}

/* Force backgrounds to be light */
body.light-mode,
body.light-mode body {
    background-color: #f8fafc !important;
}

body.light-mode .card,
body.light-mode .panel,
body.light-mode .panel-default,
body.light-mode .panel-body,
body.light-mode .card-body,
body.light-mode .product,
body.light-mode .product-desc,
body.light-mode .sidebar,
body.light-mode .cart-sidebar,
body.light-mode .cart-body,
body.light-mode #main-body,
body.light-mode .primary-content,
body.light-mode .container,
body.light-mode section,
body.light-mode .well,
body.light-mode .mc-promo-manage,
body.light-mode .mc-promo-login {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Headers slightly grey */
body.light-mode .card-header,
body.light-mode .panel-heading,
body.light-mode .product header,
body.light-mode .product footer {
    background-color: #f1f5f9 !important;
    background: #f1f5f9 !important;
}

/* Phase 4 (2026-11-01): a generic light-mode element rule was removed here (headings, text, links or anchors);
   the tokens carry those colours now and the rule outranked panel and button styling. */

/* Muted text */
body.light-mode .text-muted,
body.light-mode small,
body.light-mode .help-block {
    color: #64748b !important;
}

/* Prices */
body.light-mode .price,
body.light-mode .product-pricing,
body.light-mode .amount {
    color: #1e293b !important;
}

/* Phase 4 (2026-11-01): a generic light-mode element rule was removed here (headings, text, links or anchors);
   the tokens carry those colours now and the rule outranked panel and button styling. */

/* Breadcrumb stays white on gradient */
body.light-mode .master-breadcrumb,
body.light-mode .master-breadcrumb *,
body.light-mode .breadcrumb-item,
body.light-mode .breadcrumb-item a {
    color: #ffffff !important;
}

/* Footer */
body.light-mode .footer {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
}

body.light-mode .footer,
body.light-mode .footer *,
body.light-mode .footer p,
body.light-mode .footer a,
body.light-mode .footer span {
    color: #475569 !important;
}

body.light-mode .footer a:hover {
    color: var(--adaptive-primary) !important;
}

/* Make sure borders are visible */
body.light-mode .card,
body.light-mode .panel,
body.light-mode .product,
body.light-mode .sidebar,
body.light-mode .list-group-item,
body.light-mode .form-control,
body.light-mode input,
body.light-mode select,
body.light-mode textarea {
    border-color: #e2e8f0 !important;
}

/* Form inputs */
body.light-mode .form-control,
body.light-mode input[type="text"],
body.light-mode input[type="email"],
body.light-mode input[type="password"],
body.light-mode select,
body.light-mode textarea {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

/* Icons */
body.light-mode i.fas,
body.light-mode i.far,
body.light-mode i.fal,
body.light-mode i.fad,
body.light-mode i.fa {
    color: #475569 !important;
}

body.light-mode .btn i.fas,
body.light-mode .btn i.far,
body.light-mode .btn-primary i,
body.light-mode .btn-success i {
    color: inherit !important;
}

/* Theme toggle icons stay colored */
body.light-mode .theme-icon-dark {
    color: #fcd34d !important;
}

body.light-mode .theme-icon-light {
    color: #f59e0b !important;
}

/* ========================================
   PREMIUM DIFFERENCE SECTION
   Innovative ASP.NET Marketing Section
   ======================================== */

.premium-difference-section {
    background: linear-gradient(180deg, var(--adaptive-background) 0%, var(--adaptive-background-light) 50%, var(--adaptive-background) 100%);
    padding: 4rem 1rem;
    margin: 3rem 0;
    position: relative;
    overflow: hidden;
}

/* Subtle background pattern */
.premium-difference-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, var(--adaptive-primary-glow) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, var(--adaptive-logo-green-glow) 0%, transparent 40%);
    opacity: 0.3;
    pointer-events: none;
}

.premium-container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Section Header */
.premium-header {
    text-align: center;
    margin-bottom: 3rem;
}

.premium-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--adaptive-logo-green-light);
    background: rgba(5, 150, 105, 0.15);
    padding: 0.375rem 1rem;
    border-radius: 2rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(5, 150, 105, 0.3);
}

.premium-title {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-text) !important;
    margin-bottom: 0.5rem !important;
    background: linear-gradient(135deg, var(--adaptive-text) 0%, var(--adaptive-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.premium-subtitle {
    font-size: 1rem;
    color: var(--adaptive-text-light) !important;
    max-width: 500px;
    margin: 0 auto;
}

/* Comparison Layout */
.premium-comparison {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

@media (max-width: 768px) {
    .premium-comparison {
        flex-direction: column;
    }
}

.comparison-side {
    flex: 1;
    background: var(--adaptive-card-bg);
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--adaptive-border);
    transition: all 0.3s ease;
}

.typical-side {
    opacity: 0.85;
}

.typical-side:hover {
    opacity: 1;
}

.adaptive-side {
    border-color: var(--adaptive-logo-green);
    box-shadow: 0 0 30px rgba(5, 150, 105, 0.15);
    position: relative;
}

.adaptive-side::before {
    content: 'RECOMMENDED';
    position: absolute;
    top: -0.5rem;
    right: 1rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #ffffff;
    background: var(--adaptive-gradient-green);
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
}

/* Side Header */
.side-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.side-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.typical-icon {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.adaptive-icon {
    background: var(--adaptive-gradient-green);
    color: #ffffff;
}

.side-header h3 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: var(--adaptive-text) !important;
}

/* Resource Visualization - The Innovative Part */
.resource-visualization {
    margin-bottom: 1.25rem;
}

.server-bar {
    height: 2rem;
    background: var(--adaptive-background);
    border-radius: 0.5rem;
    display: flex;
    overflow: hidden;
    border: 1px solid var(--adaptive-border);
    margin-bottom: 0.5rem;
}

.app-slice {
    height: 100%;
    transition: all 0.4s ease;
    position: relative;
}

/* Typical side - fragmented */
.typical-viz .app-slice:first-child {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, var(--adaptive-cyan) 100%);
    animation: pulse-weak 2s ease-in-out infinite;
}

.typical-viz .app-slice.other {
    background: rgba(239, 68, 68, 0.4);
    border-left: 1px solid rgba(0, 0, 0, 0.2);
}

.typical-viz .app-slice.other:nth-child(2) { background: rgba(239, 68, 68, 0.5); }
.typical-viz .app-slice.other:nth-child(3) { background: rgba(239, 68, 68, 0.35); }
.typical-viz .app-slice.other:nth-child(4) { background: rgba(239, 68, 68, 0.55); }
.typical-viz .app-slice.other:nth-child(5) { background: rgba(239, 68, 68, 0.4); }
.typical-viz .app-slice.other:nth-child(6) { background: rgba(239, 68, 68, 0.45); }

/* Adaptive side - dedicated */
.server-bar.dedicated {
    border-color: var(--adaptive-logo-green);
}

.adaptive-viz .app-slice.yours {
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 50%, var(--adaptive-cyan) 100%);
    animation: pulse-strong 3s ease-in-out infinite;
}

@keyframes pulse-weak {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes pulse-strong {
    0%, 100% { opacity: 0.9; box-shadow: inset 0 0 10px rgba(255,255,255,0.1); }
    50% { opacity: 1; box-shadow: inset 0 0 20px rgba(255,255,255,0.2); }
}

.viz-label {
    display: block;
    font-size: 0.75rem;
    color: var(--adaptive-text-muted) !important;
    text-align: center;
}

.adaptive-viz .viz-label {
    color: var(--adaptive-logo-green-light) !important;
    font-weight: 500;
}

/* Feature Lists */
.side-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.side-features li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--adaptive-text-light) !important;
    border-top: 1px solid var(--adaptive-border);
}

.side-features li:first-child {
    border-top: none;
}

.typical-side .side-features i {
    color: #ef4444 !important;
    font-size: 0.875rem;
}

.adaptive-side .side-features i {
    color: var(--adaptive-logo-green-light) !important;
    font-size: 0.875rem;
}

/* Comparison Divider */
.comparison-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
}

@media (max-width: 768px) {
    .comparison-divider {
        flex-direction: row;
        padding: 0.5rem 0;
    }
}

.divider-line {
    width: 2px;
    flex: 1;
    background: linear-gradient(180deg, transparent, var(--adaptive-border), transparent);
}

@media (max-width: 768px) {
    .divider-line {
        height: 2px;
        width: auto;
        background: linear-gradient(90deg, transparent, var(--adaptive-border), transparent);
    }
}

.divider-text {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--adaptive-text-muted);
    padding: 0.5rem;
    background: var(--adaptive-background);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--adaptive-border);
}

/* Stats Row */
.premium-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 2rem;
    background: var(--adaptive-card-bg);
    border-radius: 1rem;
    border: 1px solid var(--adaptive-border);
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .premium-stats {
        gap: 1rem;
        padding: 1rem;
    }
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--adaptive-cyan) !important;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--adaptive-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-divider {
    width: 1px;
    height: 2.5rem;
    background: var(--adaptive-border);
}

@media (max-width: 600px) {
    .stat-divider {
        display: none;
    }
    .stat-item {
        flex: 0 0 45%;
    }
}

/* CTA Buttons */
.premium-cta {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-premium-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: var(--adaptive-gradient-green) !important;
    color: #ffffff !important;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 0.5rem;
    text-decoration: none !important;
    border: none;
    box-shadow: 0 4px 15px var(--adaptive-logo-green-glow);
    transition: all 0.3s ease;
}

.btn-premium-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px var(--adaptive-logo-green-glow);
    color: #ffffff !important;
    text-decoration: none !important;
}

.btn-premium-primary i {
    transition: transform 0.3s ease;
}

.btn-premium-primary:hover i {
    transform: translateX(4px);
}

.btn-premium-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: transparent !important;
    color: var(--adaptive-text-light) !important;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 0.5rem;
    text-decoration: none !important;
    border: 1px solid var(--adaptive-border);
    transition: all 0.3s ease;
}

.btn-premium-secondary:hover {
    border-color: var(--adaptive-primary);
    color: var(--adaptive-primary) !important;
    text-decoration: none !important;
}

/* Light mode adjustments */
body.light-mode .premium-difference-section {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #f8fafc 100%);
}

body.light-mode .premium-difference-section::before {
    opacity: 0.2;
}

body.light-mode .premium-title {
    background: linear-gradient(135deg, #1e293b 0%, var(--adaptive-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

body.light-mode .comparison-side,
body.light-mode .premium-stats {
    background: #ffffff;
    border-color: #e2e8f0;
}

body.light-mode .adaptive-side {
    border-color: var(--adaptive-logo-green);
}

body.light-mode .server-bar {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

body.light-mode .side-features li {
    border-color: #e2e8f0;
}

body.light-mode .divider-text {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.light-mode .stat-divider {
    background: #e2e8f0;
}

body.light-mode .btn-premium-secondary {
    border-color: #e2e8f0;
    color: #475569 !important;
}

body.light-mode .btn-premium-secondary:hover {
    border-color: var(--adaptive-primary);
}


/* ========================================
   HERO CARD - INTEGRATED PREMIUM SECTION
   ======================================== */

/* Restructure hero for stacked layout */
.featured-product-hero.has-premium-section {
    display: flex;
    flex-direction: column;
}

.hero-top-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .hero-top-section {
        flex-direction: column;
        text-align: center;
    }
}

/* Premium Section Inside Card */
.hero-premium-section {
    border-top: 1px solid var(--adaptive-border);
    padding-top: 1.5rem;
    margin-top: 0.5rem;
}

.premium-section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .premium-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

.premium-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--adaptive-logo-green-light) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.premium-tagline {
    font-size: 0.8125rem;
    color: var(--adaptive-text-muted) !important;
}

/* Inline Comparison */
.premium-inline-comparison {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    background: var(--adaptive-background);
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--adaptive-border);
}

@media (max-width: 700px) {
    .premium-inline-comparison {
        flex-direction: column;
        gap: 0.75rem;
    }
}

.inline-compare {
    flex: 1;
    min-width: 0;
}

.compare-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.inline-compare.typical .compare-header {
    color: #ef4444 !important;
}

.inline-compare.typical .compare-header i {
    color: #ef4444 !important;
}

.inline-compare.adaptive .compare-header {
    color: var(--adaptive-logo-green-light) !important;
}

.inline-compare.adaptive .compare-header i {
    color: var(--adaptive-logo-green-light) !important;
}

/* Resource Bars */
.resource-bar {
    height: 1.5rem;
    background: var(--adaptive-background-light);
    border-radius: 0.375rem;
    display: flex;
    overflow: hidden;
    border: 1px solid var(--adaptive-border);
    margin-bottom: 0.375rem;
}

.resource-bar.dedicated {
    border-color: var(--adaptive-logo-green);
}

.bar-segment {
    height: 100%;
    transition: all 0.3s ease;
}

.bar-segment.yours {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, var(--adaptive-cyan) 100%);
    animation: bar-pulse-weak 2s ease-in-out infinite;
}

.bar-segment.other {
    border-left: 1px solid rgba(0, 0, 0, 0.2);
}

.bar-segment.other:nth-child(2) { background: rgba(239, 68, 68, 0.5); }
.bar-segment.other:nth-child(3) { background: rgba(239, 68, 68, 0.35); }
.bar-segment.other:nth-child(4) { background: rgba(239, 68, 68, 0.55); }
.bar-segment.other:nth-child(5) { background: rgba(239, 68, 68, 0.4); }
.bar-segment.other:nth-child(6) { background: rgba(239, 68, 68, 0.45); }

.bar-segment.yours-full {
    width: 100%;
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 50%, var(--adaptive-cyan) 100%);
    animation: bar-pulse-strong 3s ease-in-out infinite;
}

@keyframes bar-pulse-weak {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes bar-pulse-strong {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

.bar-label {
    font-size: 0.6875rem;
    color: var(--adaptive-text-muted) !important;
}

.inline-compare.adaptive .bar-label {
    color: var(--adaptive-logo-green-light) !important;
    font-weight: 500;
}

.compare-vs {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--adaptive-text-muted) !important;
    background: var(--adaptive-background-light);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .compare-vs {
        align-self: center;
    }
}

/* Premium Features Grid */
.premium-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (max-width: 800px) {
    .premium-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .premium-features-grid {
        grid-template-columns: 1fr;
    }
}

.pf-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--adaptive-text-light) !important;
    background: var(--adaptive-background);
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--adaptive-border);
    transition: all 0.2s ease;
}

.pf-item:hover {
    border-color: var(--adaptive-primary);
    background: rgba(0, 121, 242, 0.05);
}

.pf-item i {
    color: var(--adaptive-primary) !important;
    font-size: 0.875rem;
    width: 1.25rem;
    text-align: center;
}

/* Stats Inline */
.premium-stats-inline {
    display: flex;
    justify-content: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat-inline {
    font-size: 0.8125rem;
    color: var(--adaptive-text-muted) !important;
}

.stat-inline strong {
    color: var(--adaptive-cyan) !important;
    font-weight: 700;
}

/* Light Mode Adjustments */
body.light-mode .hero-premium-section {
    border-top-color: #e2e8f0;
}

body.light-mode .premium-inline-comparison {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.light-mode .resource-bar {
    background: #e2e8f0;
    border-color: #d1d5db;
}

body.light-mode .resource-bar.dedicated {
    border-color: var(--adaptive-logo-green);
}

body.light-mode .pf-item {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.light-mode .pf-item:hover {
    background: rgba(0, 121, 242, 0.05);
    border-color: var(--adaptive-primary);
}

body.light-mode .compare-vs {
    background: #e2e8f0;
}


/* ========================================
   PREMIUM STORY CARD - VISUAL APPROACH
   Clean, intuitive server comparison
   ======================================== */

.premium-story-card {
    background: var(--adaptive-card-bg);
    border: 1px solid var(--adaptive-border);
    border-radius: 1rem;
    padding: 2rem;
    margin-top: 1.5rem;
    text-align: center;
}

.story-header h3 {
    font-size: 1.85rem !important;
    font-weight: 600 !important;
    color: var(--adaptive-text) !important;
    margin: 0 0 2rem 0 !important;
}

/* Visual Comparison */
.story-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (max-width: 600px) {
    .story-visual {
        flex-direction: column;
        gap: 1.5rem;
    }
}

.story-side {
    flex: 1;
    max-width: 200px;
}

.side-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

.story-side.theirs .side-label {
    color: var(--adaptive-text-muted) !important;
}

.story-side.ours .side-label {
    color: var(--adaptive-logo-green-light) !important;
}

/* Server Visual - The Innovation */
.server-visual {
    width: 160px !important;
    height: 160px !important;
    margin: 0 auto 0.75rem !important;
    border-radius: 0.75rem !important;
    display: grid !important;
    gap: 6px !important;
    padding: 10px !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.server-visual.crowded {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    background: var(--adaptive-background) !important;
    border: 2px solid var(--adaptive-border) !important;
}

.server-visual.dedicated {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%) !important;
    border: 2px solid var(--adaptive-logo-green) !important;
    box-shadow: 0 0 20px var(--adaptive-logo-green-glow) !important;
}

/* App blocks inside server */
.sv-app {
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    display: block !important;
}

.sv-app.you {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, var(--adaptive-cyan) 100%) !important;
    animation: app-pulse 2s ease-in-out infinite !important;
    box-shadow: 0 0 8px var(--adaptive-primary-glow) !important;
}

.sv-app.other {
    background: rgba(239, 68, 68, 0.4) !important;
}

.sv-app.other:nth-child(2) { background: rgba(239, 68, 68, 0.5) !important; animation: crowd-jostle 1.5s ease-in-out infinite 0.1s !important; }
.sv-app.other:nth-child(3) { background: rgba(239, 68, 68, 0.35) !important; animation: crowd-jostle 1.5s ease-in-out infinite 0.2s !important; }
.sv-app.other:nth-child(4) { background: rgba(239, 68, 68, 0.55) !important; animation: crowd-jostle 1.5s ease-in-out infinite 0.3s !important; }
.sv-app.other:nth-child(5) { background: rgba(239, 68, 68, 0.3) !important; animation: crowd-jostle 1.5s ease-in-out infinite 0.4s !important; }
.sv-app.other:nth-child(6) { background: rgba(239, 68, 68, 0.45) !important; animation: crowd-jostle 1.5s ease-in-out infinite 0.5s !important; }
.sv-app.other:nth-child(7) { background: rgba(239, 68, 68, 0.5) !important; animation: crowd-jostle 1.5s ease-in-out infinite 0.6s !important; }
.sv-app.other:nth-child(8) { background: rgba(239, 68, 68, 0.4) !important; animation: crowd-jostle 1.5s ease-in-out infinite 0.7s !important; }
.sv-app.other:nth-child(9) { background: rgba(239, 68, 68, 0.35) !important; animation: crowd-jostle 1.5s ease-in-out infinite 0.8s !important; }

.sv-app.you-dedicated {
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 50%, var(--adaptive-cyan) 100%) !important;
    border-radius: 6px !important;
    animation: dedicated-glow 3s ease-in-out infinite !important;
    box-shadow: 0 0 15px var(--adaptive-logo-green-glow) !important;
}

@keyframes app-pulse {
    0%, 100% { opacity: 0.7; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes crowd-jostle {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.5; }
}

@keyframes dedicated-glow {
    0%, 100% { box-shadow: 0 0 15px var(--adaptive-logo-green-glow); }
    50% { box-shadow: 0 0 25px var(--adaptive-logo-green-glow), inset 0 0 10px rgba(255,255,255,0.1); }
}

.side-caption {
    font-size: 0.8125rem;
    font-weight: 500;
}

.story-side.theirs .side-caption {
    color: var(--adaptive-text-muted) !important;
}

.story-side.ours .side-caption {
    color: var(--adaptive-logo-green-light) !important;
}

/* Arrow */
.story-arrow {
    font-size: 1.5rem;
    color: var(--adaptive-text-muted) !important;
}

@media (max-width: 600px) {
    .story-arrow {
        transform: rotate(90deg);
    }
}

/* Pillars */
.story-pillars {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pillar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--adaptive-background);
    border: 1px solid var(--adaptive-border);
    border-radius: 2rem;
    font-size: 0.8125rem;
    color: var(--adaptive-text-light) !important;
    transition: all 0.2s ease;
}

.pillar:hover {
    border-color: var(--adaptive-primary);
    transform: translateY(-2px);
}

.pillar i {
    color: var(--adaptive-primary) !important;
    font-size: 0.875rem;
}

/* CTA Link */
.story-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--adaptive-logo-green-light) !important;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.story-cta:hover {
    color: var(--adaptive-cyan) !important;
    text-decoration: none !important;
}

.story-cta i {
    transition: transform 0.2s ease;
}

.story-cta:hover i {
    transform: translateX(4px);
}

/* Light Mode */
body.light-mode .premium-story-card {
    background: #ffffff;
    border-color: #e2e8f0;
}

body.light-mode .server-visual.crowded {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.light-mode .server-visual.dedicated {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.08) 0%, rgba(16, 185, 129, 0.08) 100%);
}

body.light-mode .pillar {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.light-mode .pillar:hover {
    border-color: var(--adaptive-primary);
}


/* Story Card CTA Button */
.btn-story-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.875rem 2rem !important;
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 100%) !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 0.5rem !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 4px 15px var(--adaptive-logo-green-glow) !important;
    transition: all 0.3s ease !important;
    margin-top: 0.5rem !important;
}

.btn-story-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 25px var(--adaptive-logo-green-glow) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    background: linear-gradient(135deg, var(--adaptive-logo-green-light) 0%, var(--adaptive-cyan) 100%) !important;
}

.btn-story-cta i {
    transition: transform 0.3s ease !important;
    color: #ffffff !important;
}

.btn-story-cta:hover i {
    transform: translateX(4px) !important;
}


/* ========================================
   HOSTING PLANS PAGE - CONVERSION FOCUSED
   ======================================== */

/* Plans Hero Section */
.plans-hero {
    background: linear-gradient(135deg, var(--adaptive-background-light) 0%, var(--adaptive-card-bg) 100%) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 1rem !important;
    padding: 2rem !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
}

.plans-hero-title {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-text) !important;
    margin: 0 0 0.5rem 0 !important;
}

.plans-hero-tagline {
    font-size: 1rem !important;
    color: var(--adaptive-text-light) !important;
    margin: 0 0 1.5rem 0 !important;
}

/* Value Props Row */
.plans-value-props {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

.value-prop {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    background: var(--adaptive-background) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 2rem !important;
    font-size: 0.8125rem !important;
    color: var(--adaptive-text-light) !important;
}

.value-prop i {
    color: var(--adaptive-logo-green-light) !important;
    font-size: 0.875rem !important;
}

/* Plans Grid */
.plans-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
    justify-content: center !important;
    margin-bottom: 2rem !important;
}

.plan-card-wrapper {
    flex: 1 1 300px !important;
    max-width: 360px !important;
}

/* Plan Card */
.plan-card {
    background: var(--adaptive-card-bg) !important;
    border: 2px solid var(--adaptive-border) !important;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

.plan-card:hover {
    border-color: var(--adaptive-primary) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 40px rgba(0, 121, 242, 0.15) !important;
}

.plan-card.popular {
    border-color: var(--adaptive-logo-green) !important;
    box-shadow: 0 0 30px var(--adaptive-logo-green-glow) !important;
}

.plan-card.popular:hover {
    border-color: var(--adaptive-logo-green-light) !important;
    box-shadow: 0 10px 40px var(--adaptive-logo-green-glow) !important;
}

/* Popular Badge */
.popular-badge {
    position: absolute !important;
    top: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 100%) !important;
    color: #ffffff !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 0.375rem 1rem !important;
    border-radius: 2rem !important;
    white-space: nowrap !important;
}

/* Plan Header */
.plan-header {
    text-align: center !important;
    margin-bottom: 1rem !important;
    padding-top: 0.5rem !important;
}

.plan-name {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-text) !important;
    margin: 0 !important;
}

/* Plan Pricing */
.plan-pricing {
    text-align: center !important;
    margin-bottom: 1.25rem !important;
    padding-bottom: 1.25rem !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
}

.starting-from {
    font-size: 0.75rem !important;
    color: var(--adaptive-text-muted) !important;
    display: block !important;
    margin-bottom: 0.25rem !important;
}

.price-amount {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 0.25rem !important;
}

.plan-pricing .price {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-text) !important;
    line-height: 1 !important;
}

.price-cycle {
    font-size: 1rem !important;
    color: var(--adaptive-text-muted) !important;
    font-weight: 500 !important;
}

.setup-fee {
    font-size: 0.75rem !important;
    color: var(--adaptive-text-muted) !important;
    display: block !important;
    margin-top: 0.5rem !important;
}

/* Select Plan Button */
.btn-plan-select {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    padding: 0.875rem 1.5rem !important;
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, var(--adaptive-cyan) 100%) !important;
    color: #ffffff !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 0.5rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    margin-bottom: 1.25rem !important;
    box-shadow: 0 4px 15px var(--adaptive-primary-glow) !important;
}

.btn-plan-select:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 25px var(--adaptive-primary-glow) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.btn-plan-select.popular {
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 100%) !important;
    box-shadow: 0 4px 15px var(--adaptive-logo-green-glow) !important;
}

.btn-plan-select.popular:hover {
    box-shadow: 0 6px 25px var(--adaptive-logo-green-glow) !important;
}

.btn-plan-select i {
    color: #ffffff !important;
    transition: transform 0.3s ease !important;
}

.btn-plan-select:hover i {
    transform: translateX(4px) !important;
}

/* Plan Features */
.plan-features {
    flex: 1 !important;
}

.plan-desc {
    font-size: 0.8125rem !important;
    color: var(--adaptive-text-muted) !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
}

.plan-features ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.plan-features li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.625rem !important;
    padding: 0.5rem 0 !important;
    font-size: 0.8125rem !important;
    color: var(--adaptive-text-light) !important;
    border-top: 1px solid var(--adaptive-border) !important;
}

.plan-features li:first-child {
    border-top: none !important;
}

.plan-features li i {
    color: var(--adaptive-logo-green-light) !important;
    font-size: 0.75rem !important;
    margin-top: 0.2rem !important;
    flex-shrink: 0 !important;
}

.plan-features li strong {
    color: var(--adaptive-text) !important;
}

/* Trust Section */
.plans-trust-section {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 2rem !important;
    padding: 2rem !important;
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 1rem !important;
    margin-top: 1rem !important;
}

.trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.trust-icon {
    width: 3rem !important;
    height: 3rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, var(--adaptive-cyan) 100%) !important;
    border-radius: 0.5rem !important;
    flex-shrink: 0 !important;
}

.trust-icon i {
    color: #ffffff !important;
    font-size: 1.25rem !important;
}

.trust-content {
    display: flex !important;
    flex-direction: column !important;
}

.trust-content strong {
    color: var(--adaptive-text) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
}

.trust-content span {
    color: var(--adaptive-text-muted) !important;
    font-size: 0.75rem !important;
}

/* The order steps' page <h1> lives in .header-lined. The redesign uses the
   stepper/hero as the visible title, but `display:none` removed the H1 from the
   accessibility tree + SEO entirely (every step started its heading outline at
   the stepper). Make it SCREEN-READER-ONLY instead — present + announced + a
   real top-level heading, just not painted. (2026-05-29 audit P1.) */
#order-standard_cart .header-lined {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important; border: 0 !important;
}

/* Light Mode */
body.light-mode .plans-hero {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%) !important;
    border-color: #e2e8f0 !important;
}

body.light-mode .value-prop {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

body.light-mode .plan-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

body.light-mode .plan-card:hover {
    border-color: var(--adaptive-primary) !important;
}

body.light-mode .plan-card.popular {
    border-color: var(--adaptive-logo-green) !important;
}

body.light-mode .plan-features li {
    border-top-color: #e2e8f0 !important;
}

body.light-mode .plan-pricing {
    border-bottom-color: #e2e8f0 !important;
}

body.light-mode .plans-trust-section {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .plans-hero {
        padding: 1.5rem !important;
    }

    .plans-hero-title {
        font-size: 1.5rem !important;
    }

    .plans-value-props {
        gap: 0.5rem !important;
    }

    .value-prop {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.75rem !important;
    }

    .plan-card-wrapper {
        max-width: 100% !important;
    }

    .plans-trust-section {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 1.5rem !important;
    }

    .trust-item {
        flex-direction: column !important;
    }
}


/* Social Proof */
.plans-social-proof {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin-bottom: 1.25rem !important;
    padding: 0.75rem 1.5rem !important;
    background: rgba(5, 150, 105, 0.1) !important;
    border: 1px solid rgba(5, 150, 105, 0.3) !important;
    border-radius: 2rem !important;
    display: inline-flex !important;
}

.plans-hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.plans-social-proof i {
    color: var(--adaptive-logo-green-light) !important;
    font-size: 1rem !important;
}

.plans-social-proof span {
    color: var(--adaptive-logo-green-light) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

/* Plan Tagline */
.plan-tagline {
    display: block !important;
    font-size: 0.8125rem !important;
    color: var(--adaptive-text-muted) !important;
    font-weight: 400 !important;
    margin-top: 0.25rem !important;
}

/* Plan Guarantee under button */
.plan-guarantee {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.375rem !important;
    font-size: 0.75rem !important;
    color: var(--adaptive-text-muted) !important;
    margin-bottom: 1rem !important;
}

.plan-guarantee i {
    color: var(--adaptive-logo-green-light) !important;
    font-size: 0.6875rem !important;
}

/* Update popular badge text */
.popular-badge {
    background: linear-gradient(135deg, var(--adaptive-logo-green) 0%, var(--adaptive-logo-green-light) 100%) !important;
}


/* ========================================
   INNOVATIVE FEATURE SPECS DISPLAY
   ======================================== */

.plan-specs {
    flex: 1 !important;
}

/* Spec Grid - Visual Resource Blocks */
.spec-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
}

.spec-block {
    background: var(--adaptive-background) !important;
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 0.75rem !important;
    padding: 0.875rem 0.625rem !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.spec-block::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: var(--adaptive-primary) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.spec-block:hover {
    border-color: var(--adaptive-primary) !important;
    transform: translateY(-2px) !important;
}

.spec-block:hover::before {
    opacity: 1 !important;
}

/* Color accents for different spec types */
.spec-block.sites::before { background: var(--adaptive-primary) !important; }
.spec-block.storage::before { background: var(--adaptive-cyan) !important; }
.spec-block.ram::before { background: var(--adaptive-purple) !important; }
.spec-block.sql::before { background: var(--adaptive-logo-green) !important; }

.spec-block.sites:hover { border-color: var(--adaptive-primary) !important; }
.spec-block.storage:hover { border-color: var(--adaptive-cyan) !important; }
.spec-block.ram:hover { border-color: var(--adaptive-purple) !important; }
.spec-block.sql:hover { border-color: var(--adaptive-logo-green) !important; }

.spec-icon {
    font-size: 1.25rem !important;
    margin-bottom: 0.375rem !important;
    opacity: 0.9 !important;
}

.spec-block.sites .spec-icon { color: var(--adaptive-primary) !important; }
.spec-block.storage .spec-icon { color: var(--adaptive-cyan) !important; }
.spec-block.ram .spec-icon { color: var(--adaptive-purple) !important; }
.spec-block.sql .spec-icon { color: var(--adaptive-logo-green) !important; }

.spec-value {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-text) !important;
    line-height: 1.2 !important;
}

.spec-label {
    font-size: 0.6875rem !important;
    color: var(--adaptive-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-top: 0.125rem !important;
}

/* Included Features Section */
.included-features {
    background: rgba(5, 150, 105, 0.08) !important;
    border: 1px solid rgba(5, 150, 105, 0.2) !important;
    border-radius: 0.75rem !important;
    padding: 0.875rem !important;
}

.included-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--adaptive-logo-green-light) !important;
    margin-bottom: 0.625rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.included-header i {
    font-size: 0.875rem !important;
}

.included-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
}

.included-grid span {
    display: flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    font-size: 0.6875rem !important;
    color: var(--adaptive-text-light) !important;
}

.included-grid span i {
    color: var(--adaptive-logo-green-light) !important;
    font-size: 0.625rem !important;
    width: 0.875rem !important;
    text-align: center !important;
}

/* Hide old plan-features styles if any remain */
.plan-features ul {
    display: none !important;
}

/* Light Mode Adjustments */
body.light-mode .spec-block {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

body.light-mode .spec-block:hover {
    background: #ffffff !important;
}

body.light-mode .included-features {
    background: rgba(5, 150, 105, 0.05) !important;
    border-color: rgba(5, 150, 105, 0.15) !important;
}

/* Responsive - Stack on very small */
@media (max-width: 400px) {
    .spec-grid {
        grid-template-columns: 1fr !important;
    }
    
    .included-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ========================================
   MODERN FEATURE LIST - CLEAN & SCANNABLE
   ======================================== */

.feature-list-modern {
    margin-bottom: 1rem !important;
}

.feature-row {
    display: flex !important;
    align-items: center !important;
    padding: 0.625rem 0 !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    gap: 0.75rem !important;
}

.feature-row:last-child {
    border-bottom: none !important;
}

.feature-value {
    flex-shrink: 0 !important;
    min-width: 70px !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-cyan) !important;
    text-align: right !important;
}

.feature-name {
    flex: 1 !important;
    font-size: 0.8125rem !important;
    color: var(--adaptive-text-light) !important;
    line-height: 1.3 !important;
}

/* Included Tags */
.included-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

.inc-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    padding: 0.25rem 0.5rem !important;
    background: rgba(5, 150, 105, 0.15) !important;
    border-radius: 0.25rem !important;
    font-size: 0.6875rem !important;
    color: var(--adaptive-logo-green-light) !important;
    font-weight: 500 !important;
}

.inc-tag i {
    font-size: 0.625rem !important;
    opacity: 0.8 !important;
}

/* Light mode */
body.light-mode .feature-row {
    border-bottom-color: #e2e8f0 !important;
}

body.light-mode .inc-tag {
    background: rgba(5, 150, 105, 0.1) !important;
}


/* ========================================
   CLEAN FEATURE LIST - UL BASED
   ======================================== */

.feature-list-clean {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1rem 0 !important;
}

.feature-list-clean li {
    display: flex !important;
    align-items: baseline !important;
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    gap: 0.5rem !important;
}

.feature-list-clean li:last-child {
    border-bottom: none !important;
}

.feat-val {
    flex-shrink: 0 !important;
    min-width: 65px !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--adaptive-cyan) !important;
    text-align: right !important;
}

.feat-name {
    flex: 1 !important;
    font-size: 0.8125rem !important;
    color: var(--adaptive-text-light) !important;
    line-height: 1.3 !important;
}

/* Light mode */
body.light-mode .feature-list-clean li {
    border-bottom-color: #e2e8f0 !important;
}


/* Plan Description fallback styling */
.plan-description {
    display: block !important;
    font-size: 0.8125rem !important;
    color: var(--adaptive-text-light) !important;
    line-height: 1.5 !important;
}

.plan-description ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0.5rem 0 !important;
}

.plan-description li,
.plan-description ul li {
    display: flex !important;
    align-items: baseline !important;
    padding: 0.375rem 0 !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    font-size: 0.8125rem !important;
    color: var(--adaptive-text-light) !important;
}

.plan-description li::before {
    content: '✓' !important;
    color: var(--adaptive-logo-green-light) !important;
    margin-right: 0.5rem !important;
    font-weight: bold !important;
}

.plan-description li:last-child {
    border-bottom: none !important;
}

/* Hide the Quick Summary text if present */
.plan-description strong,
.plan-description b {
    display: none !important;
}


/* Features Description (from WHMCS featuresdesc field) */
.plan-features-desc {
    font-size: 0.8125rem !important;
    color: var(--adaptive-text-light) !important;
    line-height: 1.6 !important;
    margin-bottom: 1rem !important;
}

.plan-features-desc p {
    margin: 0 0 0.5rem 0 !important;
    color: var(--adaptive-text-light) !important;
}

.plan-features-desc strong,
.plan-features-desc b {
    color: var(--adaptive-logo-green-light) !important;
    font-weight: 600 !important;
    display: block !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.plan-features-desc ul,
.plan-features-desc ol {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.plan-features-desc li {
    display: flex !important;
    align-items: flex-start !important;
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    font-size: 0.8125rem !important;
    color: var(--adaptive-text-light) !important;
    gap: 0.5rem !important;
}

.plan-features-desc li:last-child {
    border-bottom: none !important;
}

.plan-features-desc li::before {
    content: '✓' !important;
    color: var(--adaptive-logo-green-light) !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
}

/* Light mode */
body.light-mode .plan-features-desc li {
    border-bottom-color: #e2e8f0 !important;
}


/* ========================================
   PLANS PAGE - COMPLETE OVERHAUL v2
   Wider cards, innovative features
   ======================================== */

/* Override previous plans-grid */
.plans-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
    justify-content: center !important;
    margin-bottom: 2rem !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 1200px) {
    .plans-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 900px !important;
    }
}

@media (max-width: 768px) {
    .plans-grid {
        grid-template-columns: 1fr !important;
        max-width: 500px !important;
    }
}

.plan-card-wrapper {
    flex: none !important;
    max-width: none !important;
    width: 100% !important;
}

/* Wider, more spacious cards */
.plan-card {
    padding: 2rem !important;
    border-radius: 1.25rem !important;
}

.plan-card.popular {
    transform: scale(1.02) !important;
}

.plan-header {
    margin-bottom: 1.5rem !important;
    padding-top: 0.75rem !important;
}

.plan-name {
    font-size: 1.375rem !important;
}

.plan-tagline {
    font-size: 0.875rem !important;
    margin-top: 0.375rem !important;
}

/* Pricing */
.plan-pricing {
    margin-bottom: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.plan-pricing .price {
    font-size: 3rem !important;
}

.price-cycle {
    font-size: 1.125rem !important;
}

/* CTA Button */
.btn-plan-select {
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
}

.plan-guarantee {
    margin-bottom: 1.5rem !important;
    font-size: 0.8125rem !important;
}

/* ========================================
   INNOVATIVE FEATURE DISPLAY v2
   ======================================== */

.plan-features-desc {
    margin-bottom: 1.25rem !important;
}

/* Hide the "Quick Summary" text */
.plan-features-desc p:first-child,
.plan-features-desc > strong:first-child,
.plan-features-desc > b:first-child {
    display: none !important;
}

/* Style the feature list innovatively */
.plan-features-desc ul,
.plan-features-desc ol {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--adaptive-background) !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    border: 1px solid var(--adaptive-border) !important;
}

.plan-features-desc li {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid var(--adaptive-border) !important;
    font-size: 0.875rem !important;
    color: var(--adaptive-text) !important;
    background: transparent !important;
    transition: background 0.2s ease !important;
}

.plan-features-desc li:last-child {
    border-bottom: none !important;
}

.plan-features-desc li:hover {
    background: rgba(0, 121, 242, 0.05) !important;
}

.plan-features-desc li::before {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    background: var(--adaptive-logo-green-light) !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

/* Highlight key specs with different colors */
.plan-features-desc li:nth-child(1)::before { background: var(--adaptive-primary) !important; }
.plan-features-desc li:nth-child(2)::before { background: var(--adaptive-cyan) !important; }
.plan-features-desc li:nth-child(3)::before { background: var(--adaptive-purple) !important; }
.plan-features-desc li:nth-child(4)::before { background: var(--adaptive-orange) !important; }
.plan-features-desc li:nth-child(5)::before { background: var(--adaptive-logo-green-light) !important; }
.plan-features-desc li:nth-child(6)::before { background: var(--adaptive-pink) !important; }
.plan-features-desc li:nth-child(7)::before { background: var(--adaptive-cyan) !important; }
.plan-features-desc li:nth-child(8)::before { background: var(--adaptive-primary) !important; }
.plan-features-desc li:nth-child(9)::before { background: var(--adaptive-logo-green-light) !important; }
.plan-features-desc li:nth-child(10)::before { background: var(--adaptive-purple) !important; }

/* Included Features - More Prominent */
.included-features {
    margin-top: 1.25rem !important;
    padding: 1rem !important;
    border-radius: 0.75rem !important;
}

.included-header {
    font-size: 0.8125rem !important;
    margin-bottom: 0.75rem !important;
}

.included-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

.inc-tag {
    padding: 0.375rem 0.625rem !important;
    font-size: 0.75rem !important;
    border-radius: 0.375rem !important;
}

/* Light Mode */
body.light-mode .plan-features-desc ul,
body.light-mode .plan-features-desc ol {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

body.light-mode .plan-features-desc li {
    border-bottom-color: #e2e8f0 !important;
}

body.light-mode .plan-features-desc li:hover {
    background: rgba(0, 121, 242, 0.03) !important;
}

/* Trust Section - More Space */
.plans-trust-section {
    margin-top: 2rem !important;
    padding: 2.5rem !important;
    gap: 3rem !important;
}

.trust-icon {
    width: 3.5rem !important;
    height: 3.5rem !important;
}

.trust-icon i {
    font-size: 1.5rem !important;
}

.trust-content strong {
    font-size: 1rem !important;
}

.trust-content span {
    font-size: 0.8125rem !important;
}

/* Hero Section - Tighter */
.plans-hero {
    padding: 2.5rem 2rem !important;
    margin-bottom: 2.5rem !important;
}

/* ============================================================
   SIDE-NAV v3.2 — DARK-MODE NATIVE (2026-05-22)
   ============================================================
   Uses theme CSS variables (--adaptive-*) so the sidebar
   matches the rest of the dark theme. No hard-coded light
   colors. Icon chips + chevron hover + LEGACY pill preserved.
   ============================================================ */

/* Card container — uses --adaptive-card-bg from theme */
.panel-sidebar,
.card-sidebar {
    border-radius: 14px !important;
    border: 1px solid var(--adaptive-border, var(--adaptive-border)) !important;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.25), 0 2px 4px -2px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, var(--adaptive-card-bg, var(--adaptive-card-bg)) 0%, var(--adaptive-secondary, var(--adaptive-secondary)) 100%) !important;
    margin-bottom: 1rem !important;
}

/* Panel header — refined microheading */
.panel-sidebar .panel-heading,
.panel-sidebar .card-header,
.card-sidebar .panel-heading,
.card-sidebar .card-header {
    background: linear-gradient(180deg, var(--adaptive-background-light, var(--adaptive-background-light)) 0%, var(--adaptive-card-bg, var(--adaptive-card-bg)) 100%) !important;
    border-bottom: 1px solid var(--adaptive-border, var(--adaptive-border)) !important;
    padding: 0.75rem 1.125rem !important;
}
.panel-sidebar .panel-title,
.card-sidebar .panel-title {
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 800 !important;
    color: var(--adaptive-text-muted, var(--adaptive-text-muted)) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem;
}
.panel-sidebar .panel-title > i,
.card-sidebar .panel-title > i {
    font-size: 0.85rem !important;
    color: var(--adaptive-primary, #0079F2) !important;
    width: 14px !important;
    text-align: center !important;
}

/* List items — icon chip on left, label, chevron on right */
.panel-sidebar .list-group-item,
.card-sidebar .list-group-item {
    position: relative !important;
    padding: 0.6875rem 1rem 0.6875rem 2.625rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--adaptive-border, var(--adaptive-border)) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--adaptive-text, var(--adaptive-text)) !important;
    background: transparent !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.panel-sidebar .list-group-item:last-child,
.card-sidebar .list-group-item:last-child {
    border-bottom: 0 !important;
}

/* Hide WHMCS inline <i> (we draw chips via ::before) */
.panel-sidebar .list-group-item > i,
.card-sidebar .list-group-item > i {
    display: none !important;
}

/* ICON CHIP — left edge */
.panel-sidebar .list-group-item::before,
.card-sidebar .list-group-item::before {
    content: "";
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04) center / 58% no-repeat;
    border: 1px solid var(--adaptive-border, var(--adaptive-border));
    transition: box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

/* CHEVRON — right edge */
.panel-sidebar .list-group-item::after,
.card-sidebar .list-group-item::after {
    content: "";
    position: absolute;
    right: 0.625rem;
    top: 50%;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid var(--adaptive-text-muted, #8b949e);
    border-right: 1.5px solid var(--adaptive-text-muted, #8b949e);
    transform: translateY(-50%) translateX(0) rotate(45deg);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

/* HOVER — background tint + icon glow + chevron fade-in */
.panel-sidebar .list-group-item:hover,
.card-sidebar .list-group-item:hover {
    background-color: rgba(0, 121, 242, 0.08) !important;
    color: var(--adaptive-primary, #0079F2) !important;
    text-decoration: none !important;
}
.panel-sidebar .list-group-item:hover::before,
.card-sidebar .list-group-item:hover::before {
    box-shadow: 0 0 0 3px rgba(0, 121, 242, 0.18);
    border-color: rgba(0, 121, 242, 0.40);
}
.panel-sidebar .list-group-item:hover::after,
.card-sidebar .list-group-item:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(3px) rotate(45deg);
    border-color: var(--adaptive-primary, #0079F2);
}

/* ACTIVE — current page */
.panel-sidebar .list-group-item.active,
.card-sidebar .list-group-item.active {
    background-color: rgba(0, 121, 242, 0.15) !important;
    color: var(--adaptive-primary, #0079F2) !important;
    font-weight: 700 !important;
}
.panel-sidebar .list-group-item.active::before,
.card-sidebar .list-group-item.active::before {
    box-shadow: 0 0 0 3px rgba(0, 121, 242, 0.25);
    border-color: rgba(0, 121, 242, 0.50);
}
.panel-sidebar .list-group-item.active::after,
.card-sidebar .list-group-item.active::after {
    opacity: 1;
    transform: translateY(-50%) rotate(45deg);
    border-color: var(--adaptive-primary, #0079F2);
}

/* ============================================================
   ICON CHIPS — per-category SVG glyphs
   Tinted backgrounds work on dark theme too (low opacity)
   ============================================================ */

.list-group-item[menuItemName="Hosting Plans"]::before,
.list-group-item[menuItemName="ASP.NET / .NET Hosting Plans"]::before {
    background-color: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.35);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='3' width='20' height='5' rx='1'/><rect x='2' y='10' width='20' height='5' rx='1'/><rect x='2' y='17' width='20' height='5' rx='1'/><line x1='6' y1='5.5' x2='6.01' y2='5.5'/><line x1='6' y1='12.5' x2='6.01' y2='12.5'/><line x1='6' y1='19.5' x2='6.01' y2='19.5'/></svg>");
}
.list-group-item[menuItemName="ox"]::before {
    background-color: rgba(6, 182, 212, 0.18);
    border-color: rgba(6, 182, 212, 0.35);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>");
}
.list-group-item[menuItemName="marketgoo"]::before {
    background-color: rgba(139, 92, 246, 0.18);
    border-color: rgba(139, 92, 246, 0.35);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 6 13.5 15.5 8.5 10.5 1 18'/><polyline points='17 6 23 6 23 12'/></svg>");
}
.list-group-item[menuItemName="codeguard"]::before {
    background-color: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.35);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
}
.list-group-item[menuItemName="sitelock"]::before {
    background-color: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.35);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/></svg>");
}
.list-group-item[menuItemName="Domain Registration"]::before {
    background-color: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.35);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>");
}
.list-group-item[menuItemName="Domain Transfer"]::before {
    background-color: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.35);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23818cf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='17 1 21 5 17 9'/><path d='M3 11V9a4 4 0 0 1 4-4h14'/><polyline points='7 23 3 19 7 15'/><path d='M21 13v2a4 4 0 0 1-4 4H3'/></svg>");
}
.list-group-item[menuItemName="View Cart"]::before {
    background-color: rgba(20, 184, 166, 0.18);
    border-color: rgba(20, 184, 166, 0.35);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>");
}
.list-group-item[menuItemName="PleskWin2022"]::before {
    background-color: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.35);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2360a5fa'><path d='M0 3.45L9.81 2.1v9.51H0V3.45zm10.71-1.49L23.54.1v11.4H10.71V1.96zM0 12.3h9.81v9.5L0 20.5V12.3zm10.71 0H23.54V23.9l-12.83-1.86v-9.74z'/></svg>");
}
.list-group-item[menuItemName="PleskWin2019"]::before {
    background-color: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.35);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2360a5fa'><path d='M0 3.45L9.81 2.1v9.51H0V3.45zm10.71-1.49L23.54.1v11.4H10.71V1.96zM0 12.3h9.81v9.5L0 20.5V12.3zm10.71 0H23.54V23.9l-12.83-1.86v-9.74z'/></svg>");
}
.list-group-item[menuItemName="PleskLinux"]::before {
    background-color: rgba(148, 163, 184, 0.18);
    border-color: rgba(148, 163, 184, 0.35);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><circle cx='12' cy='12' r='9'/></svg>");
}

/* ============================================================
   LEGACY BADGE — Linux Ubuntu only (replaces chevron)
   ============================================================ */
.list-group-item[menuItemName="PleskLinux"] {
    padding-right: 4rem !important;
    color: var(--adaptive-text-light, var(--adaptive-text-light)) !important;
}
.list-group-item[menuItemName="PleskLinux"]:hover {
    color: var(--adaptive-primary, #0079F2) !important;
}
.list-group-item[menuItemName="PleskLinux"]::after {
    content: "LEGACY" !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    transform: translateY(-50%) !important;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #78350f;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 1px 5px;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(245, 158, 11, 0.4);
    opacity: 1 !important;
    right: 0.625rem !important;
    line-height: 1.4;
}
.list-group-item[menuItemName="PleskLinux"]:hover::after,
.list-group-item[menuItemName="PleskLinux"].active::after {
    transform: translateY(-50%) !important;
}

/* Currency selector — match dark card */
.sidebar-collapsed .form-control,
.sidebar-collapsed .custom-select {
    border-radius: 8px !important;
    border: 1px solid var(--adaptive-border, var(--adaptive-border)) !important;
    padding: 0.5rem 0.875rem !important;
    font-size: 0.875rem !important;
    background: var(--adaptive-background-light, var(--adaptive-background-light)) !important;
    color: var(--adaptive-text, var(--adaptive-text)) !important;
}

/* ======================================================================
   AWH ORDER-FLOW UX QUICK WINS  (2026-05-29)
   Progress stepper, trust strip, risk-reversal, calm security note,
   persistent float-labels, 48px CTAs, and a mobile layer. All scoped to
   #order-standard_cart so nothing else on the site is affected. Presentational
   only — no form inputs, names, ids, totals, or gateway hooks are touched.
   ====================================================================== */

/* ---- Progress stepper ---- */
#order-standard_cart .awh-stepper{
    display:flex; list-style:none; margin:0 0 1.75rem; padding:0; counter-reset:none;
}
#order-standard_cart .awh-step{
    flex:1 1 0; display:flex; flex-direction:column; align-items:center; position:relative;
    color:var(--adaptive-text-muted); font-size:.9rem; text-align:center;
}
#order-standard_cart .awh-step + .awh-step::before{
    content:""; position:absolute; top:18px; left:-50%; width:100%; height:2px;
    background:var(--adaptive-border); z-index:0;
}
#order-standard_cart .awh-step.is-done + .awh-step::before,
#order-standard_cart .awh-step.is-active::before{ background:var(--adaptive-primary); }
#order-standard_cart .awh-step-dot{
    position:relative; z-index:1; width:36px; height:36px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; margin-bottom:.5rem;
    background:var(--adaptive-background-light); border:2px solid var(--adaptive-border);
    color:var(--adaptive-text-muted); font-weight:600;
}
#order-standard_cart .awh-step.is-done .awh-step-dot{
    background:var(--adaptive-primary); border-color:var(--adaptive-primary); color:#fff;
}
#order-standard_cart .awh-step.is-active .awh-step-dot{
    border-color:var(--adaptive-primary); color:var(--adaptive-primary);
    box-shadow:0 0 0 4px rgba(0,121,242,.15);
}
#order-standard_cart .awh-step.is-active,
#order-standard_cart .awh-step.is-done{ color:var(--adaptive-text); }
#order-standard_cart .awh-step-label{ font-weight:500; }

/* ---- Trust strip ---- */
#order-standard_cart .awh-trust-strip{
    display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; justify-content:center;
    margin-top:1rem; padding-top:1rem; border-top:1px solid var(--adaptive-border);
}
#order-standard_cart .awh-trust-item{
    color:var(--adaptive-text-light); font-size:.82rem; white-space:nowrap;
}
#order-standard_cart .awh-trust-item i{ color:var(--adaptive-logo-green,#10b981); margin-right:.35rem; }

/* ---- Risk-reversal microcopy under Complete Order ---- */
#order-standard_cart .awh-risk-reversal{
    margin:.85rem auto 0; max-width:32rem; font-size:.85rem;
    color:var(--adaptive-text-light); text-align:center;
}
#order-standard_cart .awh-risk-reversal i{ color:var(--adaptive-logo-green,#10b981); margin-right:.35rem; }

/* ---- Calm secure note (was alarming alert-warning) ---- */
#order-standard_cart .awh-secure-note{
    margin-top:1.25rem; padding:.85rem 1rem; border-radius:.5rem; text-align:center;
    background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.25);
    color:var(--adaptive-text-light); font-size:.85rem;
}
#order-standard_cart .awh-secure-note > i{
    color:var(--adaptive-logo-green,#10b981); margin-right:.4rem;
    /* The theme's standard_cart/all.min.css sets `.checkout-security-msg i{
       float:left; margin-left:-48px; font-size:2.8em }` (old "big lock in a 75px
       left pad" pattern). Our redesigned note is centered with no left pad, so
       that floated/negative-margined icon landed OUTSIDE the box. Reset it to a
       normal inline icon that sits before the centered lead text. */
    float:none !important; margin-left:0 !important; font-size:1em !important;
    display:inline !important; vertical-align:baseline !important;
}
#order-standard_cart .awh-secure-lead{ color:var(--adaptive-text); font-weight:600; }
#order-standard_cart .awh-secure-sub{ display:block; margin-top:.25rem; opacity:.75; font-size:.78rem; }

/* ---- Bigger, consistent primary CTAs (better tap target) ---- */
#order-standard_cart #btnCompleteProductConfig,
#order-standard_cart #btnCompleteOrder,
#order-standard_cart #checkout.btn-checkout{ min-height:48px; }

/* ======================================================================
   MOBILE LAYER — the order-form CSS previously had ZERO media queries
   ====================================================================== */
@media (max-width:576px){
    #order-standard_cart .secondary-cart-sidebar,
    #order-standard_cart #scrollingPanelContainer{
        position:static !important; margin-top:1.25rem !important; width:100% !important; float:none !important;
    }
    #order-standard_cart #btnCompleteProductConfig,
    #order-standard_cart #btnCompleteOrder,
    #order-standard_cart #checkout.btn-checkout{
        width:100% !important; min-height:48px; font-size:1.05rem;
    }
    #order-standard_cart .awh-stepper{ margin-bottom:1.25rem; }
    #order-standard_cart .awh-step-label{ font-size:.72rem; }
    #order-standard_cart .awh-step-dot{ width:30px; height:30px; }
    #order-standard_cart .awh-step + .awh-step::before{ top:15px; }
    #order-standard_cart .awh-trust-strip{ gap:.35rem .8rem; }
    #order-standard_cart .awh-trust-item{ font-size:.76rem; white-space:normal; }
    #order-standard_cart .header-lined h1.font-size-36{ font-size:1.6rem !important; }
}

/* ======================================================================
   AWH ORDER-FLOW — persistent labels, payment cards, sticky summary (2026-05-29 p2)
   Scoped to #order-standard_cart. Float-labels: icons are display:none in this
   theme and inputs have padding-left:.875rem, so the label rests at the text
   start and floats to the top border when focused/filled. JS (footer.tpl) adds
   .awh-float + the label and toggles .awh-focus/.awh-filled.
   ====================================================================== */
#order-standard_cart .form-group.awh-float{ position:relative; }
#order-standard_cart .awh-float > input.form-control::placeholder{ color:transparent !important; }
#order-standard_cart .awh-float > input.form-control::-webkit-input-placeholder{ color:transparent !important; }
#order-standard_cart .awh-float > input.form-control::-moz-placeholder{ color:transparent !important; opacity:0 !important; }
#order-standard_cart .awh-float > input.form-control:-ms-input-placeholder{ color:transparent !important; }
#order-standard_cart .awh-float > .awh-float-label{
    position:absolute; left:0.95rem; top:50%; transform:translateY(-50%); margin:0;
    pointer-events:none; transition:all .14s ease; color:var(--adaptive-text-muted);
    font-size:1rem; font-weight:400; max-width:calc(100% - 1.9rem);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#order-standard_cart .awh-float.awh-focus > .awh-float-label,
#order-standard_cart .awh-float.awh-filled > .awh-float-label{
    top:0; transform:translateY(-50%) scale(.82); transform-origin:left center;
    left:0.7rem; padding:0 .35rem; background:var(--adaptive-input-bg); color:var(--adaptive-primary-light);
    border-radius:3px; font-weight:500;
}

/* ---- Payment-method cards (style the existing .radio-inline; input stays in scope) ---- */
#order-standard_cart #paymentGatewaysContainer .text-center{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
#order-standard_cart #paymentGatewaysContainer .radio-inline{
    display:flex; align-items:center; gap:.6rem; margin:0; padding:.85rem 1.1rem; min-width:210px;
    border:1px solid var(--adaptive-border); border-radius:.6rem; background:var(--adaptive-input-bg); cursor:pointer;
    transition:border-color .15s, box-shadow .15s, background .15s; color:var(--adaptive-text); font-weight:500;
}
#order-standard_cart #paymentGatewaysContainer .radio-inline:hover{ border-color:var(--adaptive-border-light); }
#order-standard_cart #paymentGatewaysContainer .radio-inline.awh-pay-selected,
#order-standard_cart #paymentGatewaysContainer .radio-inline:has(input:checked){
    border-color:var(--adaptive-primary); box-shadow:0 0 0 3px rgba(0,121,242,.15); background:rgba(0,121,242,.06);
}
#order-standard_cart #paymentGatewaysContainer .radio-inline input{ margin:0; accent-color:var(--adaptive-primary); }
#order-standard_cart .awh-stripe-note{ text-align:center; margin-top:.85rem; font-size:.8rem; color:var(--adaptive-text-muted); }
#order-standard_cart .awh-stripe-note i{ color:var(--adaptive-logo-green,#10b981); margin-right:.3rem; }

/* ---- Clearer section separation (safe; no DOM wrapping) ---- */
#order-standard_cart .sub-heading{ margin-top:2.25rem; }
#order-standard_cart .already-registered + .sub-heading{ margin-top:0; }

/* (superseded by the Configure-page sticky block below — 992px + float:none) */

/* ---- Section cards (JS wraps non-payment sections; payment is never touched) ---- */
#order-standard_cart .awh-section-card{
    background:var(--adaptive-card-bg,var(--adaptive-card-bg)); border:1px solid var(--adaptive-border);
    border-radius:.75rem; padding:1.25rem 1.5rem 1.5rem; margin-bottom:1.25rem;
}
#order-standard_cart .awh-section-card .sub-heading{ margin-top:0; margin-bottom:1.1rem; }
/* =====================================================================
   APPEND to the END of
   /var/www/cp.adaptivewebhosting.com/public_html/templates/adaptive/css/custom.css
   Billing-address progressive disclosure. Scoped to #order-standard_cart (dark theme).

   The JS tags each optional column with [data-awh-optional] and sets
   [data-awh-disclosure="collapsed|open"] on the billing .row. We hide the
   COLUMNS (not the inputs) so the fields stay in the DOM + POST, and the
   float-label spans inside them are untouched. Fail-open: with no JS nothing
   is tagged, so all fields stay visible -- never blocks data entry.
   ===================================================================== */

/* Collapsed: hide the optional columns. display:none keeps them in the DOM
   and POSTing; only the layout box is removed. !important beats Bootstrap's
   .col-sm-* display rules. */
#order-standard_cart .row[data-awh-disclosure="collapsed"] > [data-awh-optional] {
    display: none !important;
}

/* Subtle reveal when expanding (purely cosmetic). */
#order-standard_cart .row[data-awh-disclosure="open"] > [data-awh-optional] {
    animation: awhDisclosureReveal .18s ease both;
}
@keyframes awhDisclosureReveal {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- the toggle control ---- */
#order-standard_cart .awh-disclosure-holder {
    margin-bottom: 1rem;
}
#order-standard_cart .awh-disclosure-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    border: 1px dashed var(--adaptive-border-light, var(--adaptive-border-light));
    color: var(--adaptive-primary-light, #3b9eff);
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.2;
    padding: .55rem .9rem;
    border-radius: .5rem;
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
#order-standard_cart .awh-disclosure-toggle:hover,
#order-standard_cart .awh-disclosure-toggle:focus {
    border-color: var(--adaptive-primary, #0079F2);
    color: var(--adaptive-primary, #0079F2);
    background-color: var(--adaptive-background-light, var(--adaptive-background-light));
    outline: none;
}
#order-standard_cart .awh-disclosure-toggle:focus-visible {
    box-shadow: 0 0 0 3px var(--adaptive-primary-glow, rgba(0, 121, 242, 0.4));
}
#order-standard_cart .awh-disclosure-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
}

/* When open, render the toggle in a muted "collapse me" treatment. */
#order-standard_cart .row[data-awh-disclosure="open"] .awh-disclosure-toggle {
    border-style: solid;
    border-color: var(--adaptive-border, var(--adaptive-border));
    color: var(--adaptive-text-muted, var(--adaptive-text-muted));
}
#order-standard_cart .row[data-awh-disclosure="open"] .awh-disclosure-toggle:hover {
    border-color: var(--adaptive-border-light, var(--adaptive-border-light));
    color: var(--adaptive-text, var(--adaptive-text));
    background-color: var(--adaptive-background-light, var(--adaptive-background-light));
}

/* =====================================================================
   AWH CONFIGURE-PRODUCT modernization — FINAL
   APPEND to END of /var/www/cp.adaptivewebhosting.com/public_html/templates/adaptive/css/custom.css
   then bump awhcssrev in adaptive/includes/head.tpl (line 7): 20260534 -> 20260535.
   All rules scoped to #order-standard_cart. Dark theme. Braces 54/54.
   ALSO: delete/leave the stale block at custom.css ~15204 ("Native sticky order
   summary (desktop)") — this supersedes it (same selectors, but min-width:992px
   + float:none; the old one without float:none is why it never won).
   ===================================================================== */

/* ---------- (1) DEFINITIVE NATIVE STICKY ORDER SUMMARY ----------
   Root cause: all.min.css floats the columns (body 65%/sidebar 35%, stacked
   float:none only at <=991px) and scripts.js animates inline margin-top onto
   #orderSummary on scroll. Forcing float:none at >=992px (a) trips scripts.js'
   own `float==='none'` early-return guard so it self-zeros + bails, and (b)
   unlocks native sticky. The form's ONE direct-child .row goes flex so the
   sticky sidebar has a tall sibling to pin against. */
@media (min-width: 992px) {
    #order-standard_cart #frmConfigureProduct > .row,
    #order-standard_cart #frmConfigureProduct > .row[data-awh-sticky-row],
    #order-standard_cart #frmConfigureProduct > .row:has(> #scrollingPanelContainer) {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }
    #order-standard_cart #frmConfigureProduct > .row > .secondary-cart-body {
        float: none !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: auto !important;
    }
    #order-standard_cart #frmConfigureProduct > .row > .secondary-cart-sidebar,
    #order-standard_cart #scrollingPanelContainer {
        float: none !important;            /* trips scripts.js float-guard -> JS bails */
        flex: 0 0 35% !important;
        max-width: 35% !important;
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 1.5rem !important;
        align-self: flex-start !important;
        margin-top: 0 !important;
    }
    #order-standard_cart #scrollingPanelContainer #orderSummary,
    #order-standard_cart #frmConfigureProduct > .row > .secondary-cart-body {
        margin-top: 0 !important;          /* neutralize inline margin JS animated */
    }
}
@media (max-width: 991.98px) {
    #order-standard_cart #scrollingPanelContainer,
    #order-standard_cart .secondary-cart-sidebar {
        position: static !important;
        top: auto !important;
        float: none !important;
        align-self: auto !important;
    }
    #order-standard_cart #scrollingPanelContainer #orderSummary {
        margin-top: 0 !important;
    }
}

/* ---------- (2) FEATURE CHECKLIST + .NET LTS BADGE ----------
   JS builds .awh-feature-card after the description <p>, then hides the <p>
   (reversible). Fail-open: no JS => plain blob stays visible. */
#order-standard_cart .product-info {
    background: var(--adaptive-background-light, var(--adaptive-background-light)) !important;
    border: 1px solid var(--adaptive-border, var(--adaptive-border)) !important;
    border-radius: .75rem !important;
    padding: 1.25rem 1.35rem !important;
    margin-bottom: 1.5rem !important;
}
#order-standard_cart .product-info .product-title {
    color: var(--adaptive-text, var(--adaptive-text)) !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    margin: 0 0 .25rem !important;
    line-height: 1.25 !important;
}
#order-standard_cart .product-info .awh-feature-source-hidden { display: none !important; }
#order-standard_cart .awh-feature-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    margin: .35rem 0 1rem; padding: .45rem .8rem; border-radius: 2rem;
    font-size: .82rem; font-weight: 600; line-height: 1.2;
    color: var(--adaptive-logo-green, #10b981);
    background: rgba(16, 185, 129, .10);
    border: 1px solid rgba(16, 185, 129, .35);
}
#order-standard_cart .awh-feature-badge i { color: var(--adaptive-logo-green, #10b981); font-size: .85em; }
#order-standard_cart .awh-feature-list {
    list-style: none !important; margin: 0 !important; padding: 0 !important;
    display: grid; grid-template-columns: 1fr; gap: .55rem .9rem;
}
@media (min-width: 576px) {
    #order-standard_cart .awh-feature-list { grid-template-columns: 1fr 1fr; }
}
#order-standard_cart .awh-feature-list li {
    display: flex; align-items: flex-start; gap: .55rem;
    margin: 0 !important; padding: 0 !important;
    font-size: .88rem; line-height: 1.45;
    color: var(--adaptive-text, var(--adaptive-text)) !important;
}
#order-standard_cart .awh-feature-list li i.fa-check {
    flex: 0 0 auto; margin-top: .18rem; width: 1.05rem; height: 1.05rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .62rem; border-radius: 50%;
    color: var(--adaptive-logo-green, #10b981); background: rgba(16, 185, 129, .14);
}
#order-standard_cart .awh-feature-list li span { color: var(--adaptive-text-light, var(--adaptive-text-soft)) !important; }

/* ---------- (3) BILLING TERM CARD ----------
   JS adds .awh-term-hostgroup to the .form-group; sr-only-hide ONLY the
   label/<br>/select (kept in DOM -> value POSTs + onchange=updateConfigurableOptions fires). */
#order-standard_cart .awh-term-hostgroup > label,
#order-standard_cart .awh-term-hostgroup > br,
#order-standard_cart .awh-term-hostgroup > select[name="billingcycle"] {
    position: absolute !important; width: 1px !important; height: 1px !important;
    margin: -1px !important; padding: 0 !important; border: 0 !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important; white-space: nowrap !important;
}
#order-standard_cart .awh-term { margin-bottom: 1.5rem; }
#order-standard_cart .awh-term-card {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .9rem 1.1rem; border: 1px solid var(--adaptive-border, var(--adaptive-border));
    border-radius: .75rem; background: var(--adaptive-card-bg, var(--adaptive-card-bg));
}
#order-standard_cart .awh-term-card-l { display: flex; align-items: center; gap: .8rem; min-width: 0; }
#order-standard_cart .awh-term-card-l > i {
    flex: 0 0 auto; width: 2.4rem; height: 2.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: .6rem; font-size: 1.05rem;
    color: var(--adaptive-primary, #0079F2); background: rgba(0, 121, 242, .12);
}
#order-standard_cart .awh-term-card-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
#order-standard_cart .awh-term-card-title { color: var(--adaptive-text, var(--adaptive-text)); font-weight: 600; font-size: .98rem; }
#order-standard_cart .awh-term-card-sub { color: var(--adaptive-text-muted, var(--adaptive-text-muted)); font-size: .8rem; }
#order-standard_cart .awh-term-card-price { flex: 0 0 auto; color: var(--adaptive-primary, #0079F2); font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
#order-standard_cart .awh-term-segments {
    display: inline-flex; flex-wrap: wrap; gap: .35rem; padding: .3rem;
    border: 1px solid var(--adaptive-border, var(--adaptive-border)); border-radius: .7rem;
    background: var(--adaptive-background-light, var(--adaptive-background-light));
}
#order-standard_cart .awh-term-seg-btn {
    -webkit-appearance: none; appearance: none; border: 1px solid transparent;
    background: transparent; color: var(--adaptive-text-muted, var(--adaptive-text-muted));
    font-weight: 600; font-size: .85rem; line-height: 1.2; padding: .5rem .9rem;
    border-radius: .5rem; cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
#order-standard_cart .awh-term-seg-btn:hover { color: var(--adaptive-text, var(--adaptive-text)); }
#order-standard_cart .awh-term-seg-btn.awh-term-seg-active {
    color: #fff; background: var(--adaptive-primary, #0079F2);
    border-color: var(--adaptive-primary, #0079F2); box-shadow: 0 0 0 3px rgba(0, 121, 242, .15);
}
#order-standard_cart .awh-term-seg-btn:focus-visible { outline: 2px solid var(--adaptive-primary, #0079F2); outline-offset: 2px; }

/* ---------- (4) ADDON CARDS — compact tiles, PURE CSS (no DOM changes) ----------
   Whole .panel-addon stays the click target; checkbox/iCheck wrapper + .panel-add
   are NOT reparented. Markup order body->price->add; conservative stacked footer
   (no absolute pill) so a long price never overlaps the Add control. */
#order-standard_cart .addon-products > .row {
    display: flex !important; flex-wrap: wrap !important; align-items: stretch !important;
    margin-left: -.5rem !important; margin-right: -.5rem !important;
}
#order-standard_cart .addon-products > .row > [class*="col-"] {
    display: flex !important; padding-left: .5rem !important; padding-right: .5rem !important; margin-bottom: .75rem !important;
}
#order-standard_cart .panel-addon,
#order-standard_cart .panel.panel-addon {
    position: relative !important; display: flex !important; flex-direction: column !important;
    width: 100% !important; margin-bottom: 0 !important; padding: 0 !important;
    background: var(--adaptive-card-bg, var(--adaptive-card-bg)) !important;
    border: 1px solid var(--adaptive-border, var(--adaptive-border)) !important;
    border-left: 3px solid transparent !important; border-radius: .6rem !important;
    overflow: hidden !important; cursor: pointer !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease !important;
}
#order-standard_cart .panel-addon:hover {
    border-left-color: var(--adaptive-primary, #0079F2) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25) !important; transform: translateY(-1px) !important;
}
#order-standard_cart .panel-addon.panel-addon-selected {
    border-color: var(--adaptive-primary, #0079F2) !important;
    border-left-color: var(--adaptive-primary, #0079F2) !important;
    background: rgba(0, 121, 242, .07) !important;
}
#order-standard_cart .panel-addon .panel-body,
#order-standard_cart .panel-addon .card-body {
    flex: 1 1 auto !important; padding: .85rem .95rem .6rem !important; background: transparent !important;
    color: var(--adaptive-text-muted, var(--adaptive-text-muted)) !important; font-size: .85rem !important; line-height: 1.5 !important;
}
#order-standard_cart .panel-addon .panel-body label,
#order-standard_cart .panel-addon .card-body label {
    display: flex !important; align-items: center !important; gap: .5rem !important;
    margin: 0 0 .35rem 0 !important; color: var(--adaptive-text, var(--adaptive-text)) !important;
    font-weight: 600 !important; font-size: .95rem !important; cursor: pointer !important;
}
#order-standard_cart .panel-addon .panel-body label + br,
#order-standard_cart .panel-addon .card-body label + br { display: none !important; }
#order-standard_cart .panel-addon .icheckbox_square-blue,
#order-standard_cart .panel-addon .iradio_square-blue { flex: 0 0 auto !important; margin: 0 !important; }
#order-standard_cart .panel-addon .panel-price {
    display: flex !important; align-items: center !important; justify-content: flex-start !important;
    background: transparent !important; border-top: 1px solid var(--adaptive-border, var(--adaptive-border)) !important;
    color: var(--adaptive-text, var(--adaptive-text)) !important; font-weight: 700 !important; font-size: .95rem !important;
    padding: .6rem .95rem !important; text-align: left !important;
}
#order-standard_cart .panel-addon .panel-add {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: .35rem !important;
    margin: 0 .95rem .85rem !important; background: var(--adaptive-primary, #0079F2) !important; color: #fff !important;
    font-weight: 600 !important; font-size: .82rem !important; line-height: 1 !important;
    padding: .55rem .85rem !important; border-radius: 999px !important; text-align: center !important;
    cursor: pointer !important; transition: background .15s ease, box-shadow .15s ease !important;
}
#order-standard_cart .panel-addon .panel-add:hover {
    background: var(--adaptive-primary-light, #3b9eff) !important; box-shadow: 0 2px 10px rgba(0, 121, 242, .35) !important;
}
#order-standard_cart .panel-addon.panel-addon-selected .panel-add { background: var(--adaptive-logo-green, #10b981) !important; }
#order-standard_cart .panel-addon.panel-addon-selected .panel-add:hover {
    background: var(--adaptive-logo-green-dark, #047857) !important; box-shadow: 0 2px 10px rgba(16, 185, 129, .4) !important;
}
#order-standard_cart .panel-addon.panel-addon-selected::after {
    content: "\f00c"; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome; font-weight: 900;
    position: absolute; top: .55rem; right: .6rem; width: 1.15rem; height: 1.15rem; line-height: 1.15rem;
    text-align: center; font-size: .65rem; color: #fff; background: var(--adaptive-logo-green, #10b981);
    border-radius: 50%; z-index: 1;
}

/* ---------- (5) COMPACTNESS + summary polish ---------- */
#order-standard_cart .secondary-cart-body > p:first-of-type {
    font-size: .9rem !important; color: var(--adaptive-text-muted, var(--adaptive-text-muted)) !important; margin-bottom: 1rem !important;
}
#order-standard_cart .secondary-cart-body .sub-heading { margin-top: 1.75rem !important; }
#order-standard_cart .secondary-cart-body .field-container { margin: 0 0 1rem 0 !important; }
#order-standard_cart #btnCompleteProductConfig { margin-top: .85rem !important; }


/* ======================================================================
   AWH CONFIGURE refine (2026-05-29): Available Addons -> single column + compact;
   Order Summary -> compact, hero Total Due Today, tight trust strip. CSS-only,
   scoped to #order-standard_cart, overrides earlier addon/summary rules by cascade.
   ====================================================================== */
/* ===== CANDIDATE: addons single column + compact ===== */
#order-standard_cart .addon-products{ margin-left:0 !important; margin-right:0 !important; }
#order-standard_cart .addon-products > [class*="col-"]{ flex:0 0 100% !important; max-width:100% !important; width:100% !important; padding-left:0 !important; padding-right:0 !important; }
#order-standard_cart .panel-addon{ margin-bottom:.6rem !important; }
#order-standard_cart .panel-addon .panel-body, #order-standard_cart .panel-addon .card-body{ padding:.7rem .9rem !important; }
#order-standard_cart .panel-addon .panel-body label{ font-size:.9rem !important; margin-bottom:.15rem !important; }
#order-standard_cart .panel-addon .panel-body{ font-size:.78rem !important; line-height:1.35 !important; color:var(--adaptive-text-muted) !important; }
#order-standard_cart .panel-addon .panel-body label{ color:var(--adaptive-text) !important; }
/* clamp long addon descriptions to 2 lines for compactness */
#order-standard_cart .panel-addon .panel-body{ }
#order-standard_cart .panel-addon .panel-price{ font-size:.82rem !important; padding:.2rem .9rem !important; }
#order-standard_cart .panel-addon .panel-add{ font-size:.8rem !important; padding:.4rem .9rem !important; }

/* ===== CANDIDATE: compact order summary ===== */
#order-standard_cart #orderSummary{ padding:1rem 1.1rem !important; }
#order-standard_cart #orderSummary h2, #order-standard_cart .order-summary h2{ font-size:1.05rem !important; margin:0 0 .6rem !important; }
#order-standard_cart #producttotal .product-name{ font-size:.95rem !important; font-weight:700 !important; display:block; margin-bottom:.1rem !important; }
#order-standard_cart #producttotal .product-group{ display:none !important; }
#order-standard_cart #producttotal .clearfix{ font-size:.8rem !important; color:var(--adaptive-text-muted) !important; margin:.1rem 0 !important; }
#order-standard_cart #producttotal .summary-totals{ border-top:1px solid var(--adaptive-border) !important; margin-top:.5rem !important; padding-top:.5rem !important; }
#order-standard_cart #producttotal .summary-totals .clearfix{ font-size:.82rem !important; }
#order-standard_cart #producttotal .total-due-today{ margin-top:.7rem !important; padding-top:.6rem !important; border-top:1px solid var(--adaptive-border) !important; text-align:center; }
#order-standard_cart #producttotal .total-due-today .amt{ font-size:1.6rem !important; font-weight:800 !important; color:#ffffff !important; display:block; line-height:1.1 !important; }
#order-standard_cart #producttotal .total-due-today > span:last-child{ font-size:.72rem !important; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.85) !important; }
/* compact trust strip: 2x2 grid, smaller */
#order-standard_cart #scrollingPanelContainer .awh-trust-strip{ margin-top:.8rem !important; padding-top:.8rem !important; gap:.3rem .8rem !important; }
#order-standard_cart #scrollingPanelContainer .awh-trust-item{ font-size:.72rem !important; }

/* ==========================================================================
   AWH order-summary redesign — PRODUCT branch (configure step #producttotal).
   APPEND TO THE END of templates/adaptive/css/custom.css (after the ~15549
   "compact order summary" refine block) so it wins on source order. New
   awh-os-* classes; the hero keeps the legacy .total-due-today so the existing
   blue gradient box (custom.css:7986 / :8154) still applies. Uses var() tokens
   so it adapts to body.light-mode (the light-mode token redefinitions at
   custom.css:10952+ cascade through automatically).
   Pairs with the revised ordersummary.tpl PRODUCT branch. Renewals keep the
   legacy classes + legacy CSS unchanged.
   ========================================================================== */

/* container rhythm. The wrapper-reset line below is the FINALIZER HARDENING:
   the legacy rule #producttotal > div (custom.css:7939) sets padding:.5rem 0
   + border-bottom on the .awh-os wrapper (its only direct-child div). Neutralise
   it so the wrapper adds no stray padding/border and the redesign is fully
   self-contained. */
#order-standard_cart #producttotal .awh-os{
    display:flex; flex-direction:column; gap:.15rem;
    padding:0 !important; border-bottom:0 !important; background:transparent !important;
}

/* line items — comfortable padding + label-left / value-right */
#order-standard_cart #producttotal .awh-os-item{
    display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem;
    padding:.7rem 0 !important; border:0 !important; background:transparent !important;
    border-bottom:1px solid var(--adaptive-border) !important;
}
#order-standard_cart #producttotal .awh-os-item:last-of-type{ border-bottom:0 !important; }
#order-standard_cart #producttotal .awh-os-item-label{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }

/* lead row = the title (kills the duplicate product-name heading) */
#order-standard_cart #producttotal .awh-os-item-lead .awh-os-item-name{
    font-size:.98rem !important; font-weight:700 !important; color:var(--adaptive-text) !important; line-height:1.25;
}
#order-standard_cart #producttotal .awh-os-item-group{
    font-size:.72rem !important; font-weight:500 !important; color:var(--adaptive-text-muted) !important;
    text-transform:uppercase; letter-spacing:.04em; line-height:1.2;
}
#order-standard_cart #producttotal .awh-os-item-lead .awh-os-item-price{
    font-size:.98rem !important; font-weight:700 !important; color:var(--adaptive-text) !important; white-space:nowrap;
}

/* sub items (config options / addons) — indented, muted, smaller */
#order-standard_cart #producttotal .awh-os-item-sub{ padding:.45rem 0 !important; padding-left:.9rem !important; position:relative; }
#order-standard_cart #producttotal .awh-os-item-sub::before{
    content:""; position:absolute; left:.1rem; top:50%; width:.3rem; height:.3rem; margin-top:-.15rem;
    border-radius:50%; background:var(--adaptive-primary-light);
}
#order-standard_cart #producttotal .awh-os-item-sub .awh-os-item-label{ font-size:.82rem !important; color:var(--adaptive-text-light) !important; }
#order-standard_cart #producttotal .awh-os-item-sub .awh-os-item-price{ font-size:.82rem !important; color:var(--adaptive-text-light) !important; white-space:nowrap; }

/* subtotal block — only present when itemization adds info; clean rows w/ rhythm */
#order-standard_cart #producttotal .awh-os-totals{
    margin:.5rem 0 .25rem !important; padding:.55rem .75rem !important;
    background:var(--adaptive-background-light) !important;
    border:1px solid var(--adaptive-border) !important; border-radius:.5rem !important;
}
#order-standard_cart #producttotal .awh-os-row{
    display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    padding:.32rem 0 !important; font-size:.82rem !important;
    border-bottom:1px dashed var(--adaptive-border) !important;
}
#order-standard_cart #producttotal .awh-os-row:last-child{ border-bottom:0 !important; }
#order-standard_cart #producttotal .awh-os-row-label{ color:var(--adaptive-text-muted) !important; }
#order-standard_cart #producttotal .awh-os-row-value{ color:var(--adaptive-text-light) !important; font-weight:600 !important; white-space:nowrap; }

/* HERO total — keeps legacy .total-due-today blue gradient box; refine internals.
   3-line stack: small uppercase label, big white amount, tiny reassurance note. */
#order-standard_cart #producttotal .total-due-today.awh-os-hero{
    display:flex !important; flex-direction:column; align-items:center; gap:.15rem;
    margin-top:.85rem !important; padding:1.05rem 1rem !important; text-align:center !important;
    border-radius:.6rem !important;
    background:linear-gradient(135deg, var(--adaptive-primary) 0%, #0056b3 100%) !important;
    box-shadow:0 4px 14px rgba(0,121,242,.28);
}
#order-standard_cart #producttotal .awh-os-hero .awh-os-hero-label{
    font-size:.7rem !important; font-weight:600 !important; text-transform:uppercase; letter-spacing:.06em;
    color:rgba(255,255,255,.85) !important; order:1;
}
#order-standard_cart #producttotal .awh-os-hero .awh-os-hero-amt{
    font-size:1.25rem !important; font-weight:700 !important; line-height:1.1 !important; color:#ffffff !important; order:2; margin:0 !important;
}
#order-standard_cart #producttotal .awh-os-hero .awh-os-hero-note{
    font-size:.7rem !important; color:rgba(255,255,255,.78) !important; order:3; margin-top:.1rem;
}
/* the awh-os-hero flex layout overrides the legacy centered-block .amt margin */
#order-standard_cart #producttotal .total-due-today.awh-os-hero .amt{ margin-bottom:0 !important; }
/* ==========================================================================
   AWH order-summary redesign — CART branch (viewcart.tpl static #orderSummary).
   APPEND TO THE VERY END of templates/adaptive/css/custom.css (after the
   configure #producttotal awh-os block ending ~line 15651) so it wins on
   source order over the legacy cart rules at :7616-7679, :8153-8175 and the
   :15549-15559 compact block. Mirrors the configure awh-os values pixel-for-
   pixel but is scoped to #orderSummary (the configure rules are scoped to
   #producttotal and never reach the cart). Pairs with the restructured
   viewcart.tpl summary block. Bump awhcssrev 20260538 -> 20260539 in
   adaptive/includes/head.tpl line 7. (scripts.min.js is cache-busted by
   its own ?v=versionHash, so NO JS rev is needed.)
   ========================================================================== */

/* wrapper rhythm — .summary-container also carries .awh-os */
#order-standard_cart #orderSummary .awh-os{
    display:flex !important; flex-direction:column; gap:.15rem;
    color:var(--adaptive-text-light) !important;
}

/* TOTALS block (Subtotal + promo/tax) — de-emphasised card so the hero leads
   even in the single-Subtotal case. Replaces legacy .subtotal/.bordered-totals look. */
#order-standard_cart #orderSummary .awh-os-totals{
    margin:.25rem 0 0 !important; padding:.55rem .75rem !important;
    background:var(--adaptive-background-light) !important;
    border:1px solid var(--adaptive-border) !important; border-radius:.5rem !important;
}
#order-standard_cart #orderSummary .awh-os-row{
    display:flex !important; align-items:center; justify-content:space-between; gap:.75rem;
    padding:.32rem 0 !important; margin:0 !important; font-size:.82rem !important;
    border-bottom:1px dashed var(--adaptive-border) !important; float:none !important;
}
#order-standard_cart #orderSummary .awh-os-row:last-child{ border-bottom:0 !important; }
#order-standard_cart #orderSummary .awh-os-row-label{
    color:var(--adaptive-text-muted) !important; flex:1; min-width:0; float:none !important;
}
#order-standard_cart #orderSummary .awh-os-row-value{
    color:var(--adaptive-text-light) !important; font-weight:600 !important; white-space:nowrap; float:none !important;
}
/* discount reads positive/green like a saving */
#order-standard_cart #orderSummary .awh-os-row-discount{ color:#34d399 !important; }

/* RECURRING "Totals" footnote — compact + de-emphasised. Whispers when single-line;
   expands to multiple lines automatically when cycles mix. NEVER set display on
   #recurring's child cycle spans — scripts.js owns their inline fadeIn/fadeOut. */
#order-standard_cart #orderSummary .awh-os-recurring{
    display:flex !important; align-items:flex-start; justify-content:space-between; gap:.75rem;
    padding:.5rem 0 .15rem !important; margin:0 !important; font-size:.74rem !important;
    border:0 !important; background:transparent !important;
}
#order-standard_cart #orderSummary .awh-os-recurring-label{
    color:var(--adaptive-text-muted) !important; text-transform:uppercase;
    letter-spacing:.04em; font-weight:500 !important; flex:1; min-width:0; float:none !important;
}
#order-standard_cart #orderSummary .awh-os-recurring-value{
    text-align:right; color:var(--adaptive-text-muted) !important;
    font-size:.74rem !important; line-height:1.4; float:none !important;
}
/* recurring cost figures: quiet, NOT the loud blue the legacy :7661 rule used,
   so the hero stays the focal point. (No display property — JS-owned.) */
#order-standard_cart #orderSummary .awh-os-recurring-value .cost{
    color:var(--adaptive-text-light) !important; font-weight:600 !important;
}

/* HERO total — keeps legacy .total-due-today gradient box (re-stated for self-
   containment); calm 1.25rem amount, 3-line stack matching the configure hero. */
#order-standard_cart #orderSummary .total-due-today.awh-os-hero{
    display:flex !important; flex-direction:column; align-items:center; gap:.15rem;
    margin-top:.85rem !important; padding:1.05rem 1rem !important; text-align:center !important;
    border-radius:.6rem !important;
    background:linear-gradient(135deg, var(--adaptive-primary) 0%, #0056b3 100%) !important;
    box-shadow:0 4px 14px rgba(0,121,242,.28);
}
#order-standard_cart #orderSummary .awh-os-hero .awh-os-hero-label{
    font-size:.7rem !important; font-weight:600 !important; text-transform:uppercase; letter-spacing:.06em;
    color:rgba(255,255,255,.85) !important; order:1;
}
#order-standard_cart #orderSummary .awh-os-hero .awh-os-hero-amt{
    font-size:1.25rem !important; font-weight:700 !important; line-height:1.1 !important;
    color:#ffffff !important; display:block !important; order:2; margin:0 !important;
}
#order-standard_cart #orderSummary .awh-os-hero .awh-os-hero-note{
    font-size:.7rem !important; color:rgba(255,255,255,.78) !important; order:3; margin-top:.1rem;
}
/* override the legacy .amt 1.75rem at :8168/:7675 + its display:block margin */
#order-standard_cart #orderSummary .total-due-today.awh-os-hero .amt{
    font-size:1.25rem !important; margin-bottom:0 !important;
}

/* neutralise the legacy .subtotal/.clearfix bottom-border (:7635) on any stray
   direct-child .clearfix of the new flex wrapper */
#order-standard_cart #orderSummary .awh-os > .clearfix{ border-bottom:0 !important; padding:0 !important; }

/* === Checkout button hover/focus: kill the generic a:hover cyan text-shadow glow ===
   #checkout is an <a>; the button rules set a white fill but no text-shadow, so on
   hover the global `a:hover{ text-shadow:0 0 8px cyan-glow }` (:781) is the only
   text-shadow that matches and halos the white text -- reads as "blue text on a
   green button." Lock the white fill and remove the glow on every interaction
   state. Scoped to #order-standard_cart so the customer portal is untouched. */
#order-standard_cart a#checkout.btn-checkout,
#order-standard_cart a#checkout.btn-checkout:hover,
#order-standard_cart a#checkout.btn-checkout:focus,
#order-standard_cart a#checkout.btn-checkout:active,
#order-standard_cart .btn-checkout:hover,
#order-standard_cart .btn-checkout:focus,
#order-standard_cart .btn-checkout:active {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* =====================================================================
   AWH CHECKOUT — "twocol" compaction + 2-column innovation (2026-05-29)
   Workflow-designed + adversarially verified (Stripe/JS/POST/layout). All
   rules scoped to #order-standard_cart (dark theme; customer portal untouched).
   PURE LAYOUT — no font-size shrink of body copy/labels/inputs. The page is
   shorter because (a) the leading non-payment section cards go 2-up on desktop
   and (b) dead vertical space (banner bulk, payment->card gap, list chrome) is
   removed. Appended order intentionally overrides .awh-section-card (15207-15211)
   and .sub-heading (15201) by source order.
   ===================================================================== */

/* ---------- (1) Tighter vertical rhythm (geometry, not type) ---------- */
#order-standard_cart #frmCheckout .form-group{ margin-bottom:.7rem; }
#order-standard_cart .awh-section-card{ padding:1.1rem 1.15rem 1.15rem; margin-bottom:1rem; }
/* Breathing room between the section header (underline) and the first field.
   The theme base rule (custom.css:7214) sets `margin:1.5rem 0 1rem !important` on
   .sub-heading, so this MUST be !important to win (a plain rule never applied,
   which is why the headers read as cramped against the fields). */
/* Apply to EVERY checkout sub-heading (not only carded ones) via a 2-ID selector
   (#order-standard_cart #frmCheckout = specificity 2,1,0) so it wins over the
   theme's `#order-standard_cart .sub-heading{margin:..!important}` (1,1,0)
   regardless of source order AND still applies if the JS section-card wrapping
   never runs in a given browser. The header span overflows its thin box by ~6px,
   so 2.25rem (36px) margin yields ~30px of VISIBLE header-text→field gap. */
#order-standard_cart #frmCheckout .sub-heading{ margin-top:1rem !important; margin-bottom:2.75rem !important; }

/* THE actual "not modern / fields touch a black box" bug: the form .row /
   .col / .form-group carry a dark background (~#0d1117, set by the theme) that
   was invisible on the dark page but reads as an ugly near-black box jammed
   against the grey section card once the card sits behind it (the .row's -15px
   Bootstrap margins push that dark fill to within ~4px of the card edges).
   Fix: make the layout wrappers transparent INSIDE section cards so the grey
   card shows through uniformly; only the inputs keep their own surface. */
#order-standard_cart .awh-section-card .row,
#order-standard_cart .awh-section-card [class*="col-"],
#order-standard_cart .awh-section-card .form-group{
    background:transparent !important; box-shadow:none !important;
}

/* In the 2-up grid the Billing card is ~half page wide, so its City(col-sm-4)/
   State(col-sm-5)/Postcode(col-sm-3) 3-across is too cramped — the Postcode
   label truncated to "POS". Reflow ONLY in the gridded (half-width) card:
   City full row, then State + Postcode 50/50 so every label is readable.
   Below 992px the card is full width and the original 3-across is fine. */
@media (min-width:992px){
    #order-standard_cart .awh-section-grid .awh-section-card .row > .col-sm-4{ flex:0 0 100% !important; max-width:100% !important; }
    #order-standard_cart .awh-section-grid .awh-section-card .row > .col-sm-5{ flex:0 0 50% !important; max-width:50% !important; }
    #order-standard_cart .awh-section-grid .awh-section-card .row > .col-sm-3{ flex:0 0 50% !important; max-width:50% !important; }
}

/* Phone field: intl-tel-input overlays a ~72px flag/"+1" prefix over the input's
   left, but the theme's .form-control padding (14px) left the "Phone Number"
   placeholder sitting under the flag. Pad the input so its text clears the prefix. */
#order-standard_cart .intl-tel-input input#inputPhone{ padding-left:5rem !important; }
/* ...but in the half-width gridded Personal card the phone field is only ~166px
   wide, and the 72px flag/+1 prefix leaves no room for the "Phone Number" label
   (truncates to "Phone Nu"). Give the contact fields (Email + Phone) the full card
   width in the gridded context so the label is fully readable; names stay paired. */
@media (min-width:992px){
    #order-standard_cart .awh-section-grid .awh-section-card .row > .col-sm-6:has(#inputEmail),
    #order-standard_cart .awh-section-grid .awh-section-card .row > .col-sm-6:has(#inputPhone){
        flex:0 0 100% !important; max-width:100% !important;
    }
}

/* Card fields — even, modern layout (Card Number on its own row, Expiry + CVV
   50/50). Applies to BOTH the Stripe Elements block (#stripeElements, JS-injected:
   .stripe-cards-inputs is col-md-8 offset-2 with Card#/Expiry/CVV at uneven
   50/25/25) and the native fallback (#newCardInfo, col-sm-6/3/3). COLUMN WIDTHS
   ONLY — never reparent/hide the mounted Stripe iframes (Stripe Elements reflow
   responsively to their container width, so resizing the column is safe). */
#order-standard_cart #stripeElements .stripe-cards-inputs{
    width:100% !important; max-width:100% !important; flex:0 0 100% !important;
    margin-left:0 !important; margin-right:0 !important;
}
#order-standard_cart #stripeElements .col-md-6{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; }
#order-standard_cart #stripeElements .col-md-3{ width:50% !important; max-width:50% !important; flex:0 0 50% !important; }
#order-standard_cart #newCardInfo > .col-sm-6{ flex:0 0 100% !important; max-width:100% !important; }
#order-standard_cart #newCardInfo > .col-sm-3{ flex:0 0 50% !important; max-width:50% !important; }
#order-standard_cart .sub-heading{ margin-top:1.5rem; }
#order-standard_cart .already-registered{ margin-bottom:1rem; }

/* ---------- (2) Slim the "Total Due Today" banner ----------
   Was a full-width .alert.large-text with heavy padding. Keep the green
   confirmation feel, but as a compact inline bar. #totalCartPrice id preserved
   (WHMCS updates its text); we only restyle, never restructure. */
#order-standard_cart #totalDueToday.alert{
    display:flex; align-items:baseline; justify-content:center; gap:.5rem;
    padding:.55rem 1rem; margin:0 0 .75rem; font-size:1rem; line-height:1.2;
    border-radius:.55rem;
}
#order-standard_cart #totalDueToday #totalCartPrice{ font-size:1.18rem; font-weight:700; }

/* ---------- (3) Collapse the payment-method -> card gap ----------
   Real residual gap = paymentGatewaysContainer bottom margin + stripe-note
   margins + a 0-height .clearfix + an empty #paymentGatewayInput div + the
   lone-CVV #existingCardInfo row gutter + the bare <ul> ("Enter New Card")
   default list chrome (~16px margins + 40px padding-left) + #newCardSaveSettings
   top margin. We do NOT touch display on #creditCardInputFields / #newCardInfo /
   #existingCardInfo / #existingCardsContainer / #newCardSaveSettings —
   jQuery slideUp/slideDown + :visible own those; restyling-to-hidden would break
   the gateway toggle. The ONLY :empty display rule is on #paymentGatewayInput,
   which is genuinely empty at the template and self-restores the instant a
   remote-input gateway injects markup. Stripe does NOT use it (it mounts
   cross-origin iframes into #inputCardNumber/#inputCardExpiry/#inputCardCVV),
   and scripts.js never references #paymentGatewayInput. */
#order-standard_cart #paymentGatewaysContainer{ margin-bottom:.5rem; }
#order-standard_cart #paymentGatewaysContainer > p.small.text-muted{ margin-bottom:.6rem; }
#order-standard_cart .awh-stripe-note{ margin-top:.6rem; margin-bottom:0; }
#order-standard_cart #paymentGatewayInput:empty{ display:none; }
/* Neutralize the residual 0-height micro-clearfix margin between the gateway
   choice and the (empty) #paymentGatewayInput. */
#order-standard_cart #paymentGatewaysContainer + .gateway-errors + .clearfix{ margin:0; }
/* cc-input-container starts right under the gateway choice, and reads as a
   deliberate dark panel so the card-field block is visually "the next step"
   (not floating dead space). Padding/bg/border are safe with jQuery slideUp/
   slideDown — they animate height then restore the computed padding; we set NO
   display, so the w-hidden display:none toggle and the slide animation are
   unaffected. */
#order-standard_cart #creditCardInputFields.cc-input-container{
    margin-top:.25rem;
    padding:.75rem .85rem .6rem;
    background-color:var(--adaptive-background-light,var(--adaptive-background-light));
    border:1px solid var(--adaptive-border,var(--adaptive-border));
    border-radius:.6rem;
}
#order-standard_cart #creditCardInputFields.cc-input-container .form-group{
    margin-top:.35rem; margin-bottom:.35rem;
}
/* Lone-CVV row (#existingCardInfo) — margins ONLY, never display. */
#order-standard_cart #existingCardInfo.cvv-input{ margin-top:0; margin-bottom:0; }
/* Trim the gap above the "save this card" settings block (margin only, no display). */
#order-standard_cart #newCardSaveSettings{ margin-top:.35rem; }
/* Kill the bare <ul> list chrome around "Enter New Card Information Below" and
   render its single radio as a clean inline label (not a bulleted list item). */
#order-standard_cart #creditCardInputFields > ul{
    list-style:none; margin:.4rem 0 .55rem; padding:0;
}
#order-standard_cart #creditCardInputFields > ul > li{ margin:0; }
#order-standard_cart #creditCardInputFields > ul .radio-inline{ font-weight:600; padding-left:0; }

/* ---------- (4) THE INNOVATION: 2-column section grid (desktop) ----------
   JS (initSectionGrid) wraps each contiguous run of >=2 sibling .awh-section-card
   elements into a .awh-section-grid, IN PLACE inside their existing visibility
   container (#containerNewUserSignup holds Personal/Billing/Additional;
   #containerNewUserSecurity holds Account Security) so WHMCS slideUp/show/hide
   on those containers is unaffected. Payment + everything after stays full-width
   below. Below 992px the grid is a normal block, so cards stack single-column. */
@media (min-width:992px){
    #order-standard_cart .awh-section-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:1rem 1.25rem;
        align-items:start;
    }
    #order-standard_cart .awh-section-grid > .awh-section-card{ margin-bottom:0; }
    /* Odd card out (e.g. Personal | Billing + a lone Additional Info) spans both
       columns so we never leave a ragged half-empty cell. */
    #order-standard_cart .awh-section-grid > .awh-section-card:last-child:nth-child(odd){
        grid-column:1 / -1;
    }
}
/* Defensive mobile reset (grid is already inert below 992px; this restores the
   per-card bottom margin the desktop rule zeroes and makes stacking explicit). */
@media (max-width:991.98px){
    #order-standard_cart .awh-section-grid{ display:block; }
    #order-standard_cart .awh-section-grid > .awh-section-card{ margin-bottom:1rem; }
}


/* =====================================================================
   AWH ORDER-COMPLETE PAGE modernization (hero-centric variant)
   APPEND to END of
   /var/www/cp.adaptivewebhosting.com/public_html/templates/adaptive/css/custom.css
   then bump awhcssrev in adaptive/includes/head.tpl (line 7): 20260550 -> 20260551.
   All rules scoped to #order-standard_cart. Dark theme. Pure markup + CSS
   (the complete page does NOT load the footer enhancer JS).
   ===================================================================== */

/* Centered single-column wrapper */
#order-standard_cart .awh-complete{
    max-width: 44rem;
    margin: 0 auto;
    padding: .5rem 0 1rem;
}

/* ---- Success hero ---- */
#order-standard_cart .awh-complete-hero{
    text-align: center;
    padding: 1.75rem 1rem .5rem;
}
#order-standard_cart .awh-complete-hero-icon{
    width: 84px;
    height: 84px;
    margin: 0 auto 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, rgba(16,185,129,.22) 0%, rgba(16,185,129,.06) 70%);
    border: 1px solid rgba(16,185,129,.35);
    box-shadow: 0 0 0 6px rgba(16,185,129,.06), 0 8px 28px rgba(5,150,105,.18);
}
#order-standard_cart .awh-complete-hero-icon i{
    font-size: 3rem;
    line-height: 1;
    color: var(--adaptive-logo-green-light, #10b981);
}
#order-standard_cart .awh-complete-hero-title{
    margin: 0 0 .55rem;
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--adaptive-text, var(--adaptive-text));
}
#order-standard_cart .awh-complete-hero-sub{
    margin: 0 auto;
    max-width: 34rem;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--adaptive-text-light, var(--adaptive-text-light));
}

/* ---- Prominent order-number badge ---- */
#order-standard_cart .awh-complete-ordernum{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    margin: 1.5rem auto 0;
    max-width: 30rem;
    padding: 1rem 1.25rem;
    text-align: center;
    border-radius: .75rem;
    background: var(--adaptive-card-bg, var(--adaptive-card-bg));
    border: 1px solid var(--adaptive-border, var(--adaptive-border));
    border-top: 2px solid var(--adaptive-logo-green-light, #10b981);
}
#order-standard_cart .awh-complete-ordernum-label{
    font-size: .8rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--adaptive-text-muted, var(--adaptive-text-muted));
}
#order-standard_cart .awh-complete-ordernum-value{
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--adaptive-logo-green-light, #10b981);
    word-break: break-word;
}

/* ---- Status cards (express info / express error / unpaid invoice) ---- */
#order-standard_cart .awh-complete-status{
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    margin: 1.25rem auto 0;
    max-width: 38rem;
    padding: 1rem 1.15rem;
    border-radius: .75rem;
    font-size: .92rem;
    line-height: 1.5;
}
#order-standard_cart .awh-complete-status > i{
    flex: 0 0 auto;
    margin-top: .12rem;
    font-size: 1.25rem;
    line-height: 1;
}
#order-standard_cart .awh-complete-status-body{ flex: 1 1 auto; text-align: left; }
#order-standard_cart .awh-complete-status-body :last-child{ margin-bottom: 0; }

/* info (express checkout info) — calm blue */
#order-standard_cart .awh-complete-status--info{
    background: rgba(0,121,242,.08);
    border: 1px solid rgba(0,121,242,.30);
    color: var(--adaptive-text-light, var(--adaptive-text-light));
}
#order-standard_cart .awh-complete-status--info > i{ color: var(--adaptive-primary-light, #3b9eff); }

/* error (express checkout error) — red */
#order-standard_cart .awh-complete-status--error{
    background: rgba(220,53,69,.10);
    border: 1px solid rgba(220,53,69,.35);
    color: #f3b9bf;
}
#order-standard_cart .awh-complete-status--error > i{ color: #ef6470; }

/* unpaid invoice — amber call-to-action */
#order-standard_cart .awh-complete-status--unpaid{
    background: rgba(245,158,11,.10);
    border: 1px solid rgba(245,158,11,.35);
    color: #f5d79a;
}
#order-standard_cart .awh-complete-status--unpaid > i{ color: var(--adaptive-orange, #F59E0B); }
#order-standard_cart .awh-complete-status-lead{
    margin: 0 0 .85rem;
    font-weight: 600;
    color: #fbe3b3;
}

/* Pay-invoice primary CTA inside the unpaid card (green brand gradient) */
#order-standard_cart .awh-complete-pay-btn{
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 48px;
    padding: 0 1.4rem;
    border-radius: .55rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 14px var(--adaptive-logo-green-glow, rgba(5,150,105,.4));
    transition: filter .15s ease, box-shadow .15s ease, transform .05s ease;
}
#order-standard_cart .awh-complete-pay-btn:hover,
#order-standard_cart .awh-complete-pay-btn:focus{
    filter: brightness(1.06);
    box-shadow: 0 6px 20px var(--adaptive-logo-green-glow, rgba(5,150,105,.4));
    color: #fff !important;
    text-decoration: none;
}
#order-standard_cart .awh-complete-pay-btn:active{ transform: translateY(1px); }

/* ---- What-happens-next card + vertical step list ---- */
#order-standard_cart .awh-section-card.awh-complete-next{
    margin: 1.5rem auto 0;
    max-width: 38rem;
}
#order-standard_cart .awh-complete-next-title{
    margin: 0 0 1.1rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--adaptive-text, var(--adaptive-text));
}
#order-standard_cart .awh-complete-steps{
    list-style: none;
    margin: 0;
    padding: 0;
}
#order-standard_cart .awh-complete-step{
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: .65rem 0;
}
#order-standard_cart .awh-complete-step + .awh-complete-step{
    border-top: 1px solid var(--adaptive-border, var(--adaptive-border));
}
#order-standard_cart .awh-complete-step-icon{
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(16,185,129,.10);
    border: 1px solid rgba(16,185,129,.30);
}
#order-standard_cart .awh-complete-step-icon i{
    font-size: 1rem;
    color: var(--adaptive-logo-green-light, #10b981);
}
#order-standard_cart .awh-complete-step-text{
    flex: 1 1 auto;
    align-self: center;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--adaptive-text-light, var(--adaptive-text-light));
}

/* Addon HTML output sits inside a section card; keep it readable on dark */
#order-standard_cart .awh-section-card.order-confirmation-addon-output{
    margin: 1.25rem auto 0;
    max-width: 38rem;
}

/* Trust strip already styled globally; just give it breathing room here */
#order-standard_cart .awh-complete .awh-trust-strip{
    margin-top: 1.75rem;
}

/* ---- Primary CTA: continue to client area ---- */
#order-standard_cart .awh-complete-cta{
    margin-top: 1.75rem;
    text-align: center;
}
#order-standard_cart .awh-complete-cta-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 48px;
    padding: 0 1.75rem;
    font-size: 1.05rem;
    font-weight: 600;
}

/* ---- Mobile: clean single column, full-width CTAs ---- */
@media (max-width: 576px){
    #order-standard_cart .awh-complete{ padding-left: .25rem; padding-right: .25rem; }
    #order-standard_cart .awh-complete-hero-title{ font-size: 1.5rem; }
    #order-standard_cart .awh-complete-hero-icon{ width: 72px; height: 72px; }
    #order-standard_cart .awh-complete-hero-icon i{ font-size: 2.5rem; }
    #order-standard_cart .awh-complete-ordernum-value{ font-size: 1.35rem; }
    #order-standard_cart .awh-complete-pay-btn{ width: 100%; justify-content: center; }
    #order-standard_cart .awh-complete-cta-btn{ width: 100%; }
}

/* ============================================================
   Unified primary-forward CTA system (2026-05-29 audit P1:
   contrast + color unification). The advance button on EVERY step
   uses ONE accessible green — deeper than the brand accent #10b981
   so WHITE text clears WCAG AA (~5:1) at the button's text size; the
   bright #10b981 stays as an accent (icons/borders) elsewhere.
   Blue/amber are reserved for SECONDARY/utility actions, whose
   contrast is also fixed below. text-shadow:none kills the theme's
   global a:hover cyan glow on the anchor-based buttons (Select Plan,
   Checkout, the complete-page CTAs). Appended last → wins by order. */
#order-standard_cart .btn-plan-select,
#order-standard_cart #btnCompleteProductConfig,
#order-standard_cart #btnCompleteOrder,
#order-standard_cart .btn-checkout,
#order-standard_cart #checkout.btn-checkout,
#order-standard_cart .btn-continue,
#order-standard_cart .awh-complete-pay-btn,
#order-standard_cart .awh-complete-cta-btn{
    background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
    background-color: #047857 !important;
    color: #ffffff !important;
    border: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
}
#order-standard_cart .btn-plan-select:hover, #order-standard_cart .btn-plan-select:focus,
#order-standard_cart #btnCompleteProductConfig:hover, #order-standard_cart #btnCompleteProductConfig:focus,
#order-standard_cart #btnCompleteOrder:hover, #order-standard_cart #btnCompleteOrder:focus,
#order-standard_cart .btn-checkout:hover, #order-standard_cart .btn-checkout:focus,
#order-standard_cart #checkout.btn-checkout:hover, #order-standard_cart #checkout.btn-checkout:focus,
#order-standard_cart .awh-complete-pay-btn:hover, #order-standard_cart .awh-complete-pay-btn:focus,
#order-standard_cart .awh-complete-cta-btn:hover, #order-standard_cart .awh-complete-cta-btn:focus{
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

/* Secondary / utility buttons — keep semantic color, fix WCAG text contrast. */
#order-standard_cart .btn-info,
#order-standard_cart .btn-info:hover,
#order-standard_cart .btn-info:focus{
    background: #0356a8 !important; background-image: none !important;
    border-color: #0356a8 !important; color: #ffffff !important; text-shadow: none !important;
}
#order-standard_cart .btn-warning,
#order-standard_cart .btn-warning:hover,
#order-standard_cart .btn-warning:focus{
    background: #f59e0b !important; background-image: none !important;
    border-color: #f59e0b !important; color: #1a1f2e !important; text-shadow: none !important;
}

/* ============================================================
   PLAN GRID — single authoritative, blow-out-proof definition (2026-05-29).
   Reported: plan cards "very vertical and thin and overlap the left sidebar."
   Cause: 3 competing repeat(3,1fr) defs (.products :8220 + media, .plans-grid
   :14602, :13558). `1fr` has an implicit content-minimum, so when the cart-body
   is narrow (certain widths/zoom) the grid can't shrink below its content and
   BLOWS OUT — overflowing past the cart-body and overlapping the sidebar, with
   squeezed thin/tall columns. This (1,2,0) rule wins over all of them and uses
   auto-fit + minmax(min(100%,280px),1fr): 3/2/1 columns as space allows, NEVER
   thinner than 280px, NEVER wider than the container (can't overlap), shrinks to
   one full-width column on tiny screens. min-width:0 on items kills any residual
   grid/flex blow-out. ============================================================ */
#order-standard_cart .products.plans-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
    gap: 1.5rem !important;
    max-width: 100% !important;
    margin: 2rem 0 !important;
    padding: 0 !important;
}
#order-standard_cart .products.plans-grid > .plan-card-wrapper {
    min-width: 0 !important; max-width: 100% !important;
}
#order-standard_cart .products.plans-grid .plan-card {
    min-width: 0 !important; width: 100% !important;
}

/* ============================================================
   FULL-WIDTH, DISTRACTION-FREE ORDER FLOW (2026-05-29).
   Hide the left WHMCS category sidebar (Categories / Actions / Plesk logins)
   on every order step and let the content use the full width — the modern
   distraction-free checkout pattern; category nav still lives in the top
   "Store" menu. Content is centered with a comfortable max-width so forms stay
   readable on large monitors (the products grid then sits 3-across at desktop).
   The RIGHT order summary (.secondary-cart-sidebar on configure/cart) is
   PRESERVED — it is nested inside .cart-body, separate from the left
   .cart-sidebar. Mirrors the theme's own mobile collapse rule, at all widths.
   ============================================================ */
#order-standard_cart .cart-sidebar { display: none !important; }
#order-standard_cart .cart-body {
    width: 100% !important;
    float: none !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================
   FULL-WIDTH CLIENT AREA (2026-05-29, per request — sidebars KEPT).
   Widen the layout containers (header/nav, #main-body content, footer) from
   Bootstrap's centered 1140px to the full viewport, site-wide on the WHMCS
   client area (public + logged-in pages). The client-area nav sidebar is kept
   with ALL links intact, but pinned to a sane fixed width so it doesn't stretch
   to 25% of a large screen; the .primary-content fills the rest. Mobile (<992px)
   keeps the native stacked layout. (The order form skips #main-body's .container
   and keeps its own width, so it is unaffected.)
   ============================================================ */
#header .container,
#main-body > .container,
#footer .container {
    max-width: 100% !important;
}
@media (min-width: 992px) {
    #main-body > .container > .row > .col-lg-4.col-xl-3 {
        flex: 0 0 300px !important;
        max-width: 300px !important;
    }
    #main-body .primary-content {
        flex: 1 1 0% !important;
        max-width: 100% !important;
        width: auto !important;
    }
}

/* ============================================================
   FULL-WIDTH domain-search hero (homepage) — 2026-05-29.
   The .domain-search-hero band is already full-bleed; its inner .container
   (1140px) and .domain-search-content (800px) constrained the search box +
   extensions to a narrow centre column. Let them span the full width (with
   side padding) to match the full-width page. ============================================================ */
.domain-search-hero .container { max-width: 100% !important; }
.domain-search-content {
    max-width: 100% !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

/* ============================================================
   Homepage TWO-COLUMN HERO (2026-05-29): domain search (left column) +
   the "Why Serious .NET Apps Choose Us" story card (right column).
   The domain search was moved out of the full-bleed header band into the
   left column (homepage.tpl), so restyle it as a self-contained card that
   matches the story card; both columns stretch to equal height. Below 992px
   they stack (Bootstrap col-lg). ============================================================ */
@media (min-width: 992px) {
    .services-showcase .hero-2col { align-items: stretch !important; margin-bottom: 1rem !important; }
    /* each column is a flex-column; the card inside grows to fill it, so the two
       columns are exactly equal height (the Bootstrap row already equalises the
       column heights via align-items:stretch). */
    .services-showcase .hero-2col > [class*="col-"] { display: flex !important; flex-direction: column !important; }
    .hero-col-search > form { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; width: 100% !important; }
    .hero-col-search .domain-search-hero,
    .hero-col-story > .premium-story-card { flex: 1 1 auto !important; }
    /* the story card had margin-top:1.5rem which pushed the right column down
       (looked taller / misaligned) — remove it so the two cards align at the top. */
    .hero-col-story > .premium-story-card { margin-top: 0 !important; }
}
/* Both hero cards share the SAME border + radius so the columns match. */
.hero-col-search .domain-search-hero,
.hero-col-story > .premium-story-card {
    border: 1px solid var(--adaptive-border) !important;
    border-radius: 1.25rem !important;
}
/* Domain search inside the left column: drop the full-bleed band → a card. */
.hero-col-search .domain-search-hero {
    padding: 2.5rem 2rem !important;
    border-image: none !important;
    margin: 0 !important;
}
.hero-col-search .domain-search-hero .container { max-width: 100% !important; padding: 0 !important; }
.hero-col-search .domain-search-content { max-width: 100% !important; padding: 0 !important; }

/* ============================================================
   HOSTING PLANS — smaller price + more compact cards (2026-05-29).
   The plan price was 2.5rem (overwhelming); reduce it and tighten the
   card padding / vertical rhythm so the plans read more compact. Appended
   last so these win over the base .plan-* rules (same selectors). ============================================================ */
/* MUST be #order-standard_cart-scoped: the EFFECTIVE plan styles live in
   standard_cart/custom.css as `#order-standard_cart .plan-*` (1,x,0) — the price
   there is 3.5rem. Un-scoped `.plan-*` (0,x,0) loses. These match that
   specificity and win by source order (adaptive custom.css loads AFTER it). */
#order-standard_cart .plan-pricing .price { font-size: 2rem !important; }
#order-standard_cart .price-cycle { font-size: 0.95rem !important; }
#order-standard_cart .plan-card { padding: 1.15rem 1.25rem !important; }
#order-standard_cart .plan-name { font-size: 1.2rem !important; margin: 0.25rem 0 0.15rem !important; }
#order-standard_cart .plan-header { margin-bottom: 0.6rem !important; }
#order-standard_cart .plan-pricing { margin-bottom: 0.85rem !important; padding-bottom: 0.85rem !important; }
#order-standard_cart .btn-plan-select { margin-bottom: 0.75rem !important; padding: 0.7rem 1.25rem !important; }
#order-standard_cart .plan-guarantee { margin-bottom: 0.7rem !important; }
#order-standard_cart .plan-features li { padding: 0.32rem 0 !important; }
/* features-visual li uses a 2.5rem LEFT pad to clear the absolute ::before dot
   (left:1rem). Only compact the vertical pad — keep horizontal so the colored
   dot doesn't overlap the text. */
#order-standard_cart .features-visual li { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
#order-standard_cart .features-visual { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#order-standard_cart .included-features { padding: 0.7rem !important; margin-top: 0.5rem !important; }
#order-standard_cart .included-header { margin-bottom: 0.5rem !important; }

/* ============================================================================
   Hosting Plans — "Recommended" (Business) price in highlight green (2026-05-29)
   Match the popular card's emerald border/badge. Higher specificity than the
   base `#order-standard_cart .plan-pricing .price` so it wins. */
#order-standard_cart .plan-card.popular .plan-pricing .price { color:#10b981 !important; }

/* ============================================================================
   GTM "Unified AI" chat widget — readability shield (2026-05-29)
   The dark theme forces `background-color: inherit !important` on every body
   descendant (specificity 0,7,1 via body + 7 :not()) and `color:
   var(--adaptive-text) !important` on all div/p/span (line ~221). That turned
   the light-themed, GTM-injected chat widget TRANSPARENT (panels inherit the
   page's transparent bg) with LIGHT text on light bubbles = unreadable.
   We re-assert the widget's own palette, anchored on its element IDs so the
   selectors outrank the (0,7,1) theme rule. Scoped 100% to the widget. */
#chatToggle { background:#2563eb !important; color:#fff !important; }
#chatWindow { background:#fff !important; }
#chatWindow .adaptive-header { background:#2563eb !important; }
#chatWindow .adaptive-header, #chatWindow .adaptive-header * { color:#fff !important; }
#chatClose { background:transparent !important; color:#fff !important; }
#emailStep, #chatStep, #messages, #chatWindow .adaptive-content,
#chatWindow .adaptive-input { background-color:transparent !important; }
#emailStep p { color:var(--adaptive-text-faint) !important; }
#messages .adaptive-msg.bot { background:#f3f4f6 !important; color:#1f2937 !important; }
#messages .adaptive-msg.bot * { color:#1f2937 !important; }
#messages .adaptive-msg.user { background:#2563eb !important; color:#fff !important; }
#messages .adaptive-msg.user * { color:#fff !important; }
#messages .adaptive-msg.typing { background:#f3f4f6 !important; color:#6b7280 !important; }
#emailInput, #messageInput { background:#fff !important; color:#1f2937 !important; border:1px solid #d1d5db !important; }
#emailInput::placeholder, #messageInput::placeholder { color:#9ca3af !important; }
#startBtn, #sendBtn { background:#2563eb !important; color:#fff !important; }
#startBtn:disabled, #sendBtn:disabled { background:#9ca3af !important; color:#fff !important; }
#errorMsg { background:#fee2e2 !important; color:#dc2626 !important; }

/* ============================================================================
   KB / nav sidebar count badges — dark-mode contrast fix (2026-05-30)
   theme.min.css sets `.sidebar .list-group-item .badge { background:#fff; color:#666 }`
   and our `.badge { color:#fff !important }` then forced the text white too ->
   white-on-white invisible numbers inside a light box that clashes with dark mode.
   Re-style them on-brand (blue + white), matching the "N Articles" card badges. */
.sidebar-menu-item-badge .badge,
.sidebar .list-group-item .badge {
    background-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
    border: none !important;
    width: auto !important;
    min-width: 24px !important;
    padding: 0.3em 0.55em !important;
    border-radius: 0.375rem !important;
}

/* Long category names (e.g. "Plesk (ASP.NET Hosting Plans)" = 138) were pushing
   the count badge off the right edge. The label already has .truncate, but the
   flex item lacked min-width:0 so it couldn't shrink. Let it truncate; keep the
   badge from shrinking so the count stays visible. */
.sidebar .sidebar-menu-item-label {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}
.sidebar .sidebar-menu-item-badge {
    flex: 0 0 auto !important;
    padding-left: 0.4rem !important;
}

/* ============================================================================
   Legacy pill on "Linux Ubuntu" in the top-nav Plesk CP Logins dropdown (2026-05-30)
   The original LEGACY pill above is scoped to .list-group-item (from when Plesk
   CP Logins lived in the sidebar). It now renders as li.dropdown-item in the
   navbar, which has no base chevron ::after to inherit position from, so it
   needs a fully self-contained rule. */
li.dropdown-item[menuItemName="PleskLinux"] {
    position: relative !important;
}
li.dropdown-item[menuItemName="PleskLinux"] > a {
    padding-right: 4rem !important;
}
li.dropdown-item[menuItemName="PleskLinux"]::after {
    content: "LEGACY";
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #78350f;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(245, 158, 11, 0.4);
    line-height: 1.5;
    pointer-events: none;
    z-index: 2;
}

/* ========================================
   LOGIN PAGE - BALANCE THE TWO HALVES (2026-11-01, v2)
   Both halves are equal-height grid cells and the form half is the taller one, so a vertically
   centred brand half started well below "Sign In". Top-align both halves at the same padding;
   the brand copy (logo, heading, tagline, features) stays one group.
   ======================================== */
.login-brand-side,
.login-form-side {
    justify-content: flex-start !important;
}

/* ========================================
   THEME FOUNDATION (light-mode plan phase 1, 2026-11-01)
   Tokens on the root element, switched by data-theme on <html> (written by includes/hooks/awh_theme.php).
   The light values are the same 16 the dormant body.light-mode block defines; defining them here too fixes
   the html background, the main scrollbar and color-scheme, which body-level tokens never reach.
   ======================================== */
/* Phase 2 (2026-11-01): the order and cart flow's second palette, now tokens. Dark values are the literals the
   flow used before, so dark mode is unchanged; the light values live in the two light blocks below. */
:root {
    --adaptive-surface-2: #1f2937;
    --adaptive-surface-3: #1a1f2e;
    --adaptive-surface-4: #151a24;
    --adaptive-surface-5: #1e2536;
    --adaptive-input-bg: #0f1419;
    --adaptive-input-border: #374151;
    --adaptive-divider: #2d3748;
    --adaptive-border-2: #4b5563;
    --adaptive-text-strong: #e5e7eb;
    --adaptive-text-on-surface: #ffffff;
    --adaptive-text-soft: #d1d5db;
    --adaptive-text-muted-2: #9ca3af;
    --adaptive-text-faint: #6b7280;
    --adaptive-overlay: rgba(0, 0, 0, 0.2);
    --adaptive-overlay-strong: rgba(0, 0, 0, 0.4);
    --adaptive-overlay-light: rgba(255, 255, 255, 0.05);
    --adaptive-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
    --adaptive-card-bg-2: #151b26;
    --adaptive-shadow-30: rgba(0, 0, 0, 0.3);
    --adaptive-shadow-40: rgba(0, 0, 0, 0.4);
    --adaptive-shadow-50: rgba(0, 0, 0, 0.5);
    --adaptive-shadow-60: rgba(0, 0, 0, 0.6);
}

:root[data-theme="light"] {
    color-scheme: light;
    --adaptive-surface-2: #ffffff;
    --adaptive-surface-3: #f8fafc;
    --adaptive-surface-4: #f1f5f9;
    --adaptive-surface-5: #e9eef5;
    --adaptive-input-bg: #ffffff;
    --adaptive-input-border: #cbd5e1;
    --adaptive-divider: #e2e8f0;
    --adaptive-border-2: #94a3b8;
    --adaptive-text-strong: #0f172a;
    --adaptive-text-on-surface: #0f172a;
    --adaptive-text-soft: #334155;
    --adaptive-text-muted-2: #64748b;
    --adaptive-text-faint: #64748b;
    --adaptive-overlay: rgba(15, 23, 42, 0.06);
    --adaptive-overlay-strong: rgba(15, 23, 42, 0.12);
    --adaptive-overlay-light: rgba(15, 23, 42, 0.06);
    --adaptive-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%230f172a' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
    --adaptive-card-bg-2: #ffffff;
    --adaptive-shadow-30: rgba(15, 23, 42, 0.10);
    --adaptive-shadow-40: rgba(15, 23, 42, 0.12);
    --adaptive-shadow-50: rgba(15, 23, 42, 0.14);
    --adaptive-shadow-60: rgba(15, 23, 42, 0.16);
    --adaptive-background: #f8fafc;
    --adaptive-background-light: #ffffff;
    --adaptive-card-bg: #ffffff;
    --adaptive-secondary: #f1f5f9;
    --adaptive-text: #1e293b;
    --adaptive-text-light: #64748b;
    --adaptive-text-muted: #94a3b8;
    --adaptive-border: #e2e8f0;
    --adaptive-border-light: #cbd5e1;
    --adaptive-primary-glow: rgba(0, 121, 242, 0.15);
    --adaptive-cyan-glow: rgba(0, 212, 255, 0.15);
    --adaptive-purple-glow: rgba(139, 92, 246, 0.15);
    --adaptive-green-glow: rgba(5, 150, 105, 0.15);
    --adaptive-logo-green-glow: rgba(5, 150, 105, 0.15);
    --adaptive-orange-glow: rgba(245, 158, 11, 0.15);
    --adaptive-pink-glow: rgba(236, 72, 153, 0.15);
}

/* Device mode without a client hint (Safari, Firefox): the server writes data-theme="auto" and the OS decides. */
@media (prefers-color-scheme: light) {
    :root[data-theme="auto"] {
        color-scheme: light;
        --adaptive-surface-2: #ffffff;
        --adaptive-surface-3: #f8fafc;
        --adaptive-surface-4: #f1f5f9;
        --adaptive-surface-5: #e9eef5;
        --adaptive-input-bg: #ffffff;
        --adaptive-input-border: #cbd5e1;
        --adaptive-divider: #e2e8f0;
        --adaptive-border-2: #94a3b8;
        --adaptive-text-strong: #0f172a;
        --adaptive-text-on-surface: #0f172a;
        --adaptive-text-soft: #334155;
        --adaptive-text-muted-2: #64748b;
        --adaptive-text-faint: #64748b;
        --adaptive-overlay: rgba(15, 23, 42, 0.06);
        --adaptive-overlay-strong: rgba(15, 23, 42, 0.12);
        --adaptive-overlay-light: rgba(15, 23, 42, 0.06);
        --adaptive-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%230f172a' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
        --adaptive-card-bg-2: #ffffff;
        --adaptive-shadow-30: rgba(15, 23, 42, 0.10);
        --adaptive-shadow-40: rgba(15, 23, 42, 0.12);
        --adaptive-shadow-50: rgba(15, 23, 42, 0.14);
        --adaptive-shadow-60: rgba(15, 23, 42, 0.16);
        --adaptive-background: #f8fafc;
        --adaptive-background-light: #ffffff;
        --adaptive-card-bg: #ffffff;
        --adaptive-secondary: #f1f5f9;
        --adaptive-text: #1e293b;
        --adaptive-text-light: #64748b;
        --adaptive-text-muted: #94a3b8;
        --adaptive-border: #e2e8f0;
        --adaptive-border-light: #cbd5e1;
        --adaptive-primary-glow: rgba(0, 121, 242, 0.15);
        --adaptive-cyan-glow: rgba(0, 212, 255, 0.15);
        --adaptive-purple-glow: rgba(139, 92, 246, 0.15);
        --adaptive-green-glow: rgba(5, 150, 105, 0.15);
        --adaptive-logo-green-glow: rgba(5, 150, 105, 0.15);
        --adaptive-orange-glow: rgba(245, 158, 11, 0.15);
        --adaptive-pink-glow: rgba(236, 72, 153, 0.15);
    }
}

/* The three-segment control (device / light / dark); rendered only when the hook's AWH_THEME_SWITCH_VISIBLE is true. */
.awh-theme-item { display: flex !important; align-items: center !important; position: relative !important; }
.awh-theme-switch { display: inline-flex !important; align-items: center !important; gap: 2px !important; padding: 2px !important; border: 1px solid var(--adaptive-border) !important; border-radius: 999px !important; background-color: var(--adaptive-card-bg) !important; }
header .awh-theme-switch { background-color: var(--adaptive-card-bg) !important; }
.awh-theme-switch button { width: 32px !important; height: 28px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background-color: transparent !important; color: var(--adaptive-text-light) !important; cursor: pointer !important; line-height: 1 !important; }
.awh-theme-switch button:hover { color: var(--adaptive-text) !important; }
header .awh-theme-switch button[aria-pressed="true"] { background-color: var(--adaptive-primary) !important; color: #ffffff !important; }
.awh-theme-switch button:focus-visible { outline: 2px solid var(--adaptive-primary-light) !important; outline-offset: 1px !important; }
.awh-theme-note { position: absolute !important; top: calc(100% + 6px) !important; right: 0 !important; width: 240px !important; padding: 8px 10px !important; border: 1px solid var(--adaptive-border) !important; border-radius: 8px !important; background-color: var(--adaptive-card-bg) !important; color: var(--adaptive-text) !important; font-size: 12px !important; line-height: 1.4 !important; z-index: 1030 !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important; }
.awh-theme-note[hidden] { display: none !important; }

/* Switching animates as a circular reveal from the control (View Transitions API); reduced motion gets an instant swap. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { clip-path: circle(0 at var(--awh-vt-x, 50%) var(--awh-vt-y, 50%)); animation: awh-vt-reveal .45s ease-out forwards; }
@keyframes awh-vt-reveal { to { clip-path: circle(150vmax at var(--awh-vt-x, 50%) var(--awh-vt-y, 50%)); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-new(root) { animation: none; clip-path: none; } }

/* Phase 2: form fields in the order flow keep a 3:1 boundary on white; card borders stay soft. */
:root[data-theme="light"] #order-standard_cart .form-control,
:root[data-theme="light"] #order-standard_cart .custom-select,
:root[data-theme="light"] #order-standard_cart input:-webkit-autofill {
    border-color: #8a9bb0 !important;
}

/* ========================================
   PHASE 3 (2026-11-01): remaining sections
   ======================================== */
/* The breadcrumb band keeps its gradient in light mode; the light "main containers" rule painted its inner container white. */
body.light-mode .master-breadcrumb .container-fluid,
body.light-mode .master-breadcrumb .container,
body.light-mode .master-breadcrumb .row,
body.light-mode .master-breadcrumb .breadcrumb {
    background: transparent !important;
    background-color: transparent !important;
}
/* Domain search: the category pills read white on blue in light mode. */
body.light-mode .tld-filters .badge {
    background: var(--adaptive-primary) !important;
    color: #ffffff !important;
}
/* Motion: one guard for every animation and transition in this file when the device asks for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}
/* A mode switch must not smear through the 93 "transition: all" rules: theme-switch.js sets this class for the swap. */
html.awh-theme-switching,
html.awh-theme-switching *,
html.awh-theme-switching *::before,
html.awh-theme-switching *::after {
    transition: none !important;
}

/* Phase 3b (2026-11-01): the light layer's generic element rules (body.light-mode h1/p/span/div, a:not(.btn)...) outrank
   the panel and button rules, so white copy on gradients went dark grey. These exceptions carry enough specificity to win. */
body.light-mode .login-brand-side .brand-content,
body.light-mode .login-brand-side .brand-content *,
body.light-mode .register-brand-side,
body.light-mode .register-brand-side *,
body.light-mode .reset-card-header,
body.light-mode .reset-card-header * {
    color: #ffffff !important;
}
body.light-mode .btn-login-submit, body.light-mode .btn-login-submit *,
body.light-mode .btn-register-submit, body.light-mode .btn-register-submit *,
body.light-mode .btn-reset-submit, body.light-mode .btn-reset-submit *,
body.light-mode .btn-hero, body.light-mode .btn-hero *,
body.light-mode .btn-domain-search, body.light-mode .btn-domain-search *,
body.light-mode .btn-story-cta, body.light-mode .btn-story-cta *,
body.light-mode .btn-premium-primary, body.light-mode .btn-premium-primary *,
body.light-mode .btn-plan-select, body.light-mode .btn-plan-select *,
body.light-mode .btn-checkout, body.light-mode .btn-checkout *,
body.light-mode .btn-order-now, body.light-mode .btn-order-now *,
body.light-mode .awh-complete-pay-btn, body.light-mode .awh-complete-pay-btn *,
body.light-mode .btn-cyan, body.light-mode .btn-purple, body.light-mode .btn-orange, body.light-mode .btn-info, body.light-mode .btn-warning,
body.light-mode .btn-cyan *, body.light-mode .btn-purple *, body.light-mode .btn-orange *, body.light-mode .btn-info *, body.light-mode .btn-warning *,
body.light-mode a.btn-hero:not(.awh-x1):not(.awh-x2):not(.awh-x3), body.light-mode a.btn-story-cta:not(.awh-x1):not(.awh-x2):not(.awh-x3),
body.light-mode a.btn-plan-select:not(.awh-x1):not(.awh-x2):not(.awh-x3), body.light-mode a.btn-checkout:not(.awh-x1):not(.awh-x2):not(.awh-x3),
body.light-mode a.btn-order-now:not(.awh-x1):not(.awh-x2):not(.awh-x3), body.light-mode a.btn-domain-search:not(.awh-x1):not(.awh-x2):not(.awh-x3) {
    color: #ffffff !important;
}
/* Breadcrumb links and the domain category pills: anchors, so they need to beat body.light-mode a:not(.btn):not(.nav-link):not(.list-group-item). */
body.light-mode .master-breadcrumb .breadcrumb-item a:not(.btn):not(.nav-link):not(.list-group-item),
body.light-mode .master-breadcrumb .breadcrumb-item a:not(.btn):not(.nav-link):not(.list-group-item):hover {
    color: #ffffff !important;
}
body.light-mode .tld-filters a.badge:not(.btn):not(.nav-link):not(.list-group-item),
body.light-mode .tld-filters a.badge:not(.btn):not(.nav-link):not(.list-group-item):hover {
    color: #ffffff !important;
}

/* Phase 3c (2026-11-01): two things seen on the first manual pass.
   1. Dropdown hover in light mode: the gradient hover background won, but the light layer's anchor rule
      (a:not(.btn):not(.nav-link):not(.list-group-item), specificity 0,4,2) kept the link text blue on it. */
body.light-mode .dropdown-menu a.dropdown-item:not(.btn):not(.nav-link):not(.list-group-item):hover,
body.light-mode .dropdown-menu a.dropdown-item:not(.btn):not(.nav-link):not(.list-group-item):focus,
body.light-mode .dropdown-menu a.dropdown-item:not(.btn):not(.nav-link):not(.list-group-item):hover *,
body.light-mode .dropdown-menu a.dropdown-item:not(.btn):not(.nav-link):not(.list-group-item):focus * {
    color: #ffffff !important;
}
/* 2. Footer social links were green squares with blue glyphs in both modes (".footer a.btn" takes the green gradient,
      ".fab" paints the glyph). Neutral chips that turn brand blue on hover, in both modes. */
.footer a.btn.btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    background: var(--adaptive-card-bg) !important;
    border: 1px solid var(--adaptive-border) !important;
    color: var(--adaptive-text-light) !important;
}
.footer a.btn.btn-icon i,
.footer a.btn.btn-icon .fab {
    color: inherit !important;
}
.footer a.btn.btn-icon:hover,
.footer a.btn.btn-icon:focus {
    background: var(--adaptive-primary) !important;
    border-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
}
body.light-mode .footer a.btn.btn-icon {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #64748b !important;
}
body.light-mode .footer a.btn.btn-icon:hover,
body.light-mode .footer a.btn.btn-icon:focus {
    background: var(--adaptive-primary) !important;
    border-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
}

/* Belt and braces for the footer chips: no box, shadow or lift on the glyph element itself. */
.footer a.btn.btn-icon .fab,
.footer a.btn.btn-icon i {
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
}

/* Phase 3d (2026-11-01): the knowledgebase search hero stays navy in dark mode but read as a black bar on the white
   page; in light mode it becomes a light surface with the same shape. */
body.light-mode .kb-search {
    background: linear-gradient(135deg, #ffffff 0%, #eef2f7 100%) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 6px 20px var(--adaptive-shadow-30) !important;
}
body.light-mode .kb-search::before {
    opacity: 0.35 !important;
}
body.light-mode .kb-search .form-control {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
body.light-mode .kb-search .form-control::placeholder {
    color: #64748b !important;
}
body.light-mode .kb-search .form-control:focus {
    border-color: var(--adaptive-primary) !important;
    box-shadow: 0 0 0 3px var(--adaptive-primary-glow) !important;
}

/* Phase 3e (2026-11-01): checkout findings from the manual pass.
   1. The Stripe gateway's own stylesheet (modules/gateways/stripe/stripe.css) hardcodes the card fields dark
      (#0f1419 on #374151); in light mode the fields follow the page. */
body.light-mode .StripeElement {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}
body.light-mode .StripeElement--focus {
    border-color: var(--adaptive-primary) !important;
    box-shadow: 0 0 0 3px var(--adaptive-primary-glow) !important;
}
/* 2. "Total Due Today" on the checkout page: the ID-scoped .alert-success rule outranks the box's blue gradient and
      left the white price on a green tint. In light mode the box keeps the gradient the sidebar total uses. */
body.light-mode #order-standard_cart #totalDueToday {
    background: linear-gradient(135deg, var(--adaptive-primary) 0%, #0056b3 100%) !important;
    border: none !important;
    color: #ffffff !important;
}
body.light-mode #order-standard_cart #totalDueToday *,
body.light-mode #order-standard_cart #totalDueToday strong,
body.light-mode #order-standard_cart #totalDueToday #totalCartPrice {
    color: #ffffff !important;
}
/* 3. The "Empty Cart" link-button on the view-cart page rendered as a dark button in light mode. */
body.light-mode #order-standard_cart .empty-cart .btn-link,
body.light-mode #order-standard_cart .empty-cart .btn-link *,
body.light-mode #order-standard_cart #btnEmptyCart,
body.light-mode #order-standard_cart #btnEmptyCart * {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #b91c1c !important;
}

/* Phase 3f (2026-11-01): the Stripe gateway stylesheet (modules/gateways/stripe/stripe.css, customised with dark
   literals) uses ID selectors (#stripeElements, #stripeCreditCard ...), which beat the class-level override from 3e.
   These carry the same IDs plus body.light-mode, so the card section follows the page in light mode. */
body.light-mode #stripeElements {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}
body.light-mode #stripeElements label,
body.light-mode #stripeElements .control-label,
body.light-mode #stripeElements h4,
body.light-mode #stripeElements h5 {
    color: #0f172a !important;
}
body.light-mode #stripeElements h4,
body.light-mode #stripeElements h5 {
    border-bottom-color: #e2e8f0 !important;
}
body.light-mode #stripeCreditCard,
body.light-mode #stripeExpiryDate,
body.light-mode #stripeCvc,
body.light-mode #stripeElements .form-control,
body.light-mode #stripeElements .StripeElement {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
body.light-mode #stripeElements .StripeElement--webkit-autofill,
body.light-mode #stripeElements .form-control:-webkit-autofill {
    background-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #0f172a !important;
}
body.light-mode #stripeCreditCard:focus-within,
body.light-mode #stripeExpiryDate:focus-within,
body.light-mode #stripeCvc:focus-within,
body.light-mode #stripeElements .form-control:focus,
body.light-mode #stripeElements .form-control:focus-within {
    border-color: var(--adaptive-primary) !important;
    box-shadow: 0 0 0 3px var(--adaptive-primary-glow) !important;
}
body.light-mode #stripeCardType,
body.light-mode #stripeCvcWhere {
    color: #64748b !important;
}

/* ========================================
   PHASE 4 (2026-11-01): launch
   ======================================== */
/* The register brand panel and the password-reset header were navy in both modes; in light mode they are light surfaces. */
body.light-mode .register-brand-side {
    background: linear-gradient(135deg, #ffffff 0%, #eef2f7 100%) !important;
    border-right: 1px solid #e2e8f0 !important;
}
body.light-mode .register-brand-side,
body.light-mode .register-brand-side *,
body.light-mode .register-brand-side h1,
body.light-mode .register-brand-side .feature-text strong {
    color: #0f172a !important;
}
body.light-mode .register-brand-side .brand-tagline,
body.light-mode .register-brand-side .feature-text span,
body.light-mode .register-brand-side p {
    color: #475569 !important;
}
body.light-mode .register-brand-side .brand-logo,
body.light-mode .register-brand-side .feature-icon {
    background: rgba(0, 121, 242, 0.12) !important;
}
body.light-mode .register-brand-side .brand-logo i,
body.light-mode .register-brand-side .feature-icon i {
    color: var(--adaptive-primary) !important;
}
body.light-mode .register-brand-side .brand-stats {
    border-top-color: #e2e8f0 !important;
}
body.light-mode .reset-card-header {
    background: linear-gradient(135deg, #ffffff 0%, #eef2f7 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
body.light-mode .reset-card-header,
body.light-mode .reset-card-header *,
body.light-mode .reset-card-header h2 {
    color: #0f172a !important;
}
body.light-mode .reset-card-header p {
    color: #475569 !important;
}
body.light-mode .reset-card-header .reset-icon i {
    color: #ffffff !important;
}
/* The raster logo (blue title, grey subtitle on transparent) is light-background art; on the dark invoice, quote
   and OAuth pages it sits on a white plate. */
:root:not([data-theme="light"]) .invoice-container img[src*="logo"],
:root:not([data-theme="light"]) section#header img[src*="logo"],
:root:not([data-theme="light"]) #header img[src*="logo"] {
    background: #ffffff !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
}

/* Phase 4b (2026-11-01): the pressed segment of the colour switch showed no highlight: the header rules that make every
   element inside header.header transparent (base and light layer) outrank the pressed rule, so these carry more :not() classes. */
header .awh-theme-switch button[aria-pressed="true"]:not(.awh-x1):not(.awh-x2):not(.awh-x3):not(.awh-x4):not(.awh-x5):not(.awh-x6),
header.header .awh-theme-switch button[aria-pressed="true"]:not(.awh-x1):not(.awh-x2):not(.awh-x3):not(.awh-x4):not(.awh-x5):not(.awh-x6) {
    background-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
}
header .awh-theme-switch:not(.awh-x1):not(.awh-x2):not(.awh-x3):not(.awh-x4):not(.awh-x5):not(.awh-x6),
header.header .awh-theme-switch:not(.awh-x1):not(.awh-x2):not(.awh-x3):not(.awh-x4):not(.awh-x5):not(.awh-x6) {
    background-color: var(--adaptive-card-bg) !important;
}
body.light-mode header .awh-theme-switch button[aria-pressed="true"]:not(.awh-x1):not(.awh-x2):not(.awh-x3):not(.awh-x4):not(.awh-x5):not(.awh-x6),
body.light-mode header.header .awh-theme-switch button[aria-pressed="true"]:not(.awh-x1):not(.awh-x2):not(.awh-x3):not(.awh-x4):not(.awh-x5):not(.awh-x6) {
    background-color: var(--adaptive-primary) !important;
    color: #ffffff !important;
}
body.light-mode header .awh-theme-switch:not(.awh-x1):not(.awh-x2):not(.awh-x3):not(.awh-x4):not(.awh-x5):not(.awh-x6) {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}