/**
 * 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, #0d1117 0%, #1c2432 50%, #0d1117 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 rgba(0, 0, 0, 0.5) !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 rgba(0, 0, 0, 0.3) !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%, #151b26 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 rgba(0, 0, 0, 0.3), 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 rgba(0, 0, 0, 0.5),
                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 rgba(0, 0, 0, 0.6),
                0 8px 10px -6px rgba(0, 0, 0, 0.5),
                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;
}

.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 rgba(0, 0, 0, 0.3) !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 rgba(0, 0, 0, 0.3) !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 rgba(0, 0, 0, 0.3) !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 rgba(0, 0, 0, 0.4) !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 rgba(0, 0, 0, 0.4) !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 rgba(0, 0, 0, 0.3) !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 rgba(0, 0, 0, 0.3) !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 rgba(0, 0, 0, 0.3) !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) 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") 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: #0f1419 !important;
}

/* Fallback for browsers without :has() */
#order-standard_cart {
    background-color: #0f1419 !important;
    min-height: 100vh;
    padding-bottom: 2rem;
}

/* Page title styling */
#order-standard_cart .font-size-36 {
    color: #e5e7eb !important;
    font-family: 'Roboto Mono', monospace !important;
}

#order-standard_cart .font-size-30 {
    color: #e5e7eb !important;
    font-family: 'Roboto Mono', monospace !important;
}

/* View Cart Items Header */
#order-standard_cart .view-cart-items-header {
    background: #1a1f2e !important;
    border: 1px solid #374151 !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    padding: 1rem !important;
    color: #e5e7eb !important;
    font-weight: 600 !important;
}

/* View Cart Items */
#order-standard_cart .view-cart-items {
    background: #1f2937 !important;
    border: 1px solid #374151 !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 #374151 !important;
    padding: 1rem !important;
    color: #e5e7eb !important;
}

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

#order-standard_cart .view-cart-items .item-title {
    color: #e5e7eb !important;
    font-weight: 600 !important;
}

#order-standard_cart .view-cart-items .item-group,
#order-standard_cart .view-cart-items .item-domain {
    color: #9ca3af !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: #9ca3af !important;
    font-weight: 400 !important;
}

/* Empty Cart */
#order-standard_cart .view-cart-empty {
    background: #1f2937 !important;
    color: #9ca3af !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: #1f2937 !important;
    border: 1px solid #374151 !important;
    border-radius: 0.5rem !important;
    margin-top: 1.5rem !important;
    overflow: hidden !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs {
    background: #1a1f2e !important;
    border-bottom: 1px solid #374151 !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs .nav-item .nav-link {
    background: transparent !important;
    color: #9ca3af !important;
    border: none !important;
    padding: 0.75rem 1.25rem !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs .nav-item .nav-link.active {
    background: #1f2937 !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: #1a1f2e !important;
    border: 1px solid #374151 !important;
    color: #e5e7eb !important;
    border-radius: 0.5rem !important;
}

#order-standard_cart .view-cart-tabs .btn-default {
    background: #374151 !important;
    border: 1px solid #4b5563 !important;
    color: #e5e7eb !important;
}

#order-standard_cart .view-cart-tabs .btn-default:hover {
    background: #4b5563 !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: #1f2937 !important;
    padding: 1.5rem !important;
    border-radius: 0.75rem !important;
    border: 1px solid #374151 !important;
}

#order-standard_cart .order-summary h2 {
    color: #e5e7eb !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid #374151 !important;
}

#order-standard_cart .summary-container {
    color: #e5e7eb !important;
}

#order-standard_cart .summary-container .subtotal,
#order-standard_cart .summary-container .clearfix {
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid #374151 !important;
}

#order-standard_cart .summary-container .bordered-totals {
    border: 1px solid #374151 !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem !important;
    margin: 0.75rem 0 !important;
    background: #1a1f2e !important;
}

#order-standard_cart .summary-container .bordered-totals .clearfix {
    border-bottom: 1px dashed #374151 !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: #9ca3af !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: #1f2937 !important;
    border: 1px solid #374151 !important;
    border-radius: 0.75rem !important;
    color: #e5e7eb !important;
}

#order-standard_cart .modal-header {
    border-bottom: 1px solid #374151 !important;
}

#order-standard_cart .modal-footer {
    border-top: 1px solid #374151 !important;
}

#order-standard_cart .modal-title {
    color: #e5e7eb !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: #1a1f2e !important;
    border: 1px solid #374151 !important;
    color: #e5e7eb !important;
    width: 60px !important;
    text-align: center !important;
}

#order-standard_cart .item-qty .btn {
    background: #374151 !important;
    border: 1px solid #4b5563 !important;
    color: #e5e7eb !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: #1f2937 !important;
    border: 1px solid #374151 !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem !important;
}

#order-standard_cart .dropdown-menu .dropdown-item {
    color: #e5e7eb !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.25rem !important;
}

#order-standard_cart .dropdown-menu .dropdown-item a {
    color: #e5e7eb !important;
    text-decoration: none !important;
}

#order-standard_cart .dropdown-menu .dropdown-item:hover,
#order-standard_cart .dropdown-menu .dropdown-item a:hover {
    background: #374151 !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: #6b7280 !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: #9ca3af !important;
}

/* Metrics pricing */
#order-standard_cart ul {
    color: #9ca3af !important;
}

#order-standard_cart ul li {
    color: #9ca3af !important;
    margin-bottom: 0.5rem !important;
}

/* Field help text */
#order-standard_cart .field-help-text {
    color: #9ca3af !important;
    font-size: 0.85rem !important;
    margin-top: 0.25rem !important;
}

/* Cards within cart */
#order-standard_cart .card {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
    border-radius: 0.5rem !important;
}

#order-standard_cart .card-body {
    background: transparent !important;
    color: #e5e7eb !important;
}

#order-standard_cart .card-header {
    background: #1a1f2e !important;
    border-bottom: 1px solid #374151 !important;
    color: #e5e7eb !important;
}

/* Panels */
#order-standard_cart .panel {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
    border-radius: 0.5rem !important;
}

#order-standard_cart .panel-body {
    background: transparent !important;
    color: #e5e7eb !important;
}

#order-standard_cart .panel-default {
    border-color: #374151 !important;
}

/* ========================================
   ORDER SUMMARY CARD - AGGRESSIVE OVERRIDES
   ======================================== */

/* Main Order Summary Container */
#orderSummary {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
}

#orderSummary * {
    color: #e5e7eb !important;
}

#orderSummary .order-summary {
    background: #1f2937 !important;
    padding: 1.5rem !important;
}

#orderSummary h2,
#orderSummary .font-size-30 {
    color: #e5e7eb !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid #374151 !important;
    font-family: 'Roboto Mono', monospace !important;
}

/* Product Total Container - Dynamic Content */
#producttotal {
    background: transparent !important;
    color: #e5e7eb !important;
}

#producttotal * {
    color: #e5e7eb !important;
    background: transparent !important;
}

#producttotal .item,
#producttotal .clearfix,
#producttotal > div {
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid #374151 !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: #e5e7eb !important;
    font-weight: 600 !important;
}

#producttotal .item-group,
#producttotal .small,
#producttotal small {
    color: #9ca3af !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: #e5e7eb !important;
    padding: 0.5rem !important;
    border-color: #374151 !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: #1f2937 !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: #e5e7eb !important;
}

.order-summary .summary-container * {
    color: #e5e7eb !important;
}

/* Additional table styling if summary uses tables */
#orderSummary table {
    background: transparent !important;
    color: #e5e7eb !important;
}

#orderSummary table td,
#orderSummary table th {
    background: transparent !important;
    color: #e5e7eb !important;
    border-color: #374151 !important;
}

#orderSummary table tr {
    background: transparent !important;
}

/* Horizontal rules in summary */
#orderSummary hr {
    border-color: #374151 !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: #e5e7eb !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    display: block !important;
    margin-bottom: 0.25rem !important;
}

#orderSummary .product-group,
#producttotal .product-group {
    color: #9ca3af !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: #e5e7eb !important;
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid #374151 !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: #e5e7eb !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: #1a1f2e !important;
    border: 1px solid #374151 !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 #374151 !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, #1a1f2e 0%, #0f1419 100%) !important;
    border: 1px solid #2d3748 !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 rgba(255, 255, 255, 0.05) !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: #ffffff !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: #9ca3af !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 rgba(255, 255, 255, 0.06) !important;
    color: #d1d5db !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: #ffffff !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, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.4) 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !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: #ffffff !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: #9ca3af !important;
}

/* Setup fee */
#order-standard_cart .products .product footer small {
    display: block !important;
    margin-top: 0.5rem !important;
    font-size: 0.8rem !important;
    color: #6b7280 !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: #ffffff !important;
    font-weight: 700 !important;
    font-size: 2.25rem !important;
    margin-bottom: 0.75rem !important;
}

#order-standard_cart .header-lined p {
    color: #9ca3af !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, #1a1f2e 0%, #151a24 100%) !important;
    border: 1px solid #2d3748 !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, #1e2536 0%, #1a1f2e 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: #e5e7eb !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, #1a1f2e 0%, #151a24 100%) !important;
    border: 1px solid #2d3748 !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: #0f1419 !important;
    border: 1px solid #374151 !important;
    color: #e5e7eb !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: #0f1419 !important;
    border: 1px solid #374151 !important;
    color: #e5e7eb !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: #1a1f2e !important;
    border: 1px solid #374151 !important;
    color: #9ca3af !important;
    border-radius: 0.5rem 0 0 0.5rem !important;
}

#order-standard_cart .input-group .form-control {
    background: #0f1419 !important;
    border: 1px solid #374151 !important;
    color: #e5e7eb !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: #0f1419 !important;
    border: 1px solid #374151 !important;
    border-left: none !important;
    color: #e5e7eb !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: #0f1419 !important;
    border: 1px solid #374151 !important;
    color: #e5e7eb !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: #0f1419 !important;
    border: 1px solid #374151 !important;
    color: #e5e7eb !important;
    border-radius: 0.5rem !important;
}

#order-standard_cart #owndomaintld::placeholder {
    color: #6b7280 !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: #374151 !important;
}

#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading .primary-bg-color {
    background: #0f1419 !important;
    color: #0079F2 !important;
}

/* Field labels */
#order-standard_cart .field-container label,
#order-standard_cart label {
    color: #d1d5db !important;
}

/* Domain suggestions/results */
#order-standard_cart .domain-lookup-primary-results,
#order-standard_cart .domain-checker-result-headline {
    color: #e5e7eb !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 #374151 !important;
    color: #9ca3af !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, #1a1f2e 0%, #151a24 100%) !important;
    border: 1px solid #2d3748 !important;
    color: #e5e7eb !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, #1e2536 0%, #1a1f2e 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, #1a1f2e 0%, #151a24 100%) !important;
    border: 1px solid #2d3748 !important;
    border-radius: 0.75rem !important;
}

#order-standard_cart .spotlight-tld {
    background: #0f1419 !important;
    border: 1px solid #374151 !important;
    color: #e5e7eb !important;
}

#order-standard_cart .spotlight-tld:hover {
    border-color: #0079F2 !important;
}

#order-standard_cart .spotlight-tld span {
    color: #9ca3af !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 #374151 !important;
    color: #e5e7eb !important;
}

#order-standard_cart .btn-default:hover,
#order-standard_cart .btn-secondary:hover {
    background: #1a1f2e !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: #6b7280 !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: #0f1419 !important;
    border: 1px solid #374151 !important;
    color: #e5e7eb !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: #e5e7eb !important;
    caret-color: #e5e7eb !important;
    -webkit-box-shadow: 0 0 0 1000px #0f1419 inset !important;
            box-shadow: 0 0 0 1000px #0f1419 inset !important;
    border: 1px solid #374151 !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: #0f1419 !important;
    border: 1px solid #374151 !important;
    color: #e5e7eb !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: #6b7280 !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: #1a1f2e !important;
    border: 1px solid #374151 !important;
    color: #9ca3af !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: #0f1419 !important;
    border: 1px solid #374151 !important;
    color: #e5e7eb !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: #1a1f2e !important;
    color: #6b7280 !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: #d1d5db !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, #1a1f2e 0%, #151a24 100%) !important;
    border: 1px solid #2d3748 !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 #2d3748 !important;
    color: #ffffff !important;
    padding: 1rem 1.25rem !important;
}

#order-standard_cart .panel-body,
#order-standard_cart .card-body {
    padding: 1.25rem !important;
    color: #e5e7eb !important;
}

#order-standard_cart .panel-footer,
#order-standard_cart .card-footer {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid #2d3748 !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: #6b7280 !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: #1a1f2e !important;
    border-right: 1px solid #374151 !important;
    padding: 0 8px !important;
    height: 44px !important;
}

#order-standard_cart .iti__country-list {
    background: #1a1f2e !important;
    border: 1px solid #374151 !important;
    color: #e5e7eb !important;
}

#order-standard_cart .iti__country:hover,
#order-standard_cart .iti__country.iti__highlight {
    background: #2d3748 !important;
}

#order-standard_cart .iti__dial-code {
    color: #9ca3af !important;
}

/* Checkout section headers */
#order-standard_cart .sub-heading span {
    background: #0f1419 !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, #1a1f2e 0%, #151a24 100%) !important;
    border: 1px solid #2d3748 !important;
    border-radius: 0.75rem !important;
    color: #e5e7eb !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: #ffffff !important;
    background: transparent !important;
    border-bottom: 1px solid #2d3748 !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: #9ca3af !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: #d1d5db !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: #f3f4f6 !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, #1a1f2e 0%, #151a24 100%) !important;
    border: 1px solid #2d3748 !important;
    color: #e5e7eb !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, #1a1f2e 0%, #151a24 100%) !important;
    border: 1px solid #2d3748 !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 #2d3748 !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: #9ca3af !important;
}

#order-standard_cart .mc-promo .expander i {
    color: #9ca3af !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: #ffffff !important;
    background: transparent !important;
}

#order-standard_cart .mc-promo .tagline {
    color: #9ca3af !important;
    background: transparent !important;
}

/* Body section with features */
#order-standard_cart .mc-promo .body {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid #2d3748 !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: #d1d5db !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: rgba(0, 0, 0, 0.2) !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 */
.fab,
.floating-btn {
    background: var(--adaptive-gradient-primary) !important;
    box-shadow: 0 6px 20px var(--adaptive-primary-glow) !important;
}

.fab:hover,
.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 rgba(0, 0, 0, 0.4),
        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%, #1a1f2e 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;
}

/* Light mode text elements */
body.light-mode h1, body.light-mode h2, body.light-mode h3,
body.light-mode h4, body.light-mode h5, body.light-mode h6,
body.light-mode .h1, body.light-mode .h2, body.light-mode .h3,
body.light-mode .h4, body.light-mode .h5, body.light-mode .h6 {
    color: #1e293b !important;
}

body.light-mode p, body.light-mode span, body.light-mode div,
body.light-mode label, body.light-mode small, body.light-mode strong,
body.light-mode b, body.light-mode em, body.light-mode i,
body.light-mode li, body.light-mode dt, body.light-mode dd,
body.light-mode td, body.light-mode th {
    color: #334155 !important;
}

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;
}

/* Light mode links */
body.light-mode a {
    color: var(--adaptive-primary) !important;
}

body.light-mode a:hover,
body.light-mode a:focus {
    color: var(--adaptive-primary-dark) !important;
    text-shadow: none !important;
}

/* 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
   ======================================== */

/* Force all text dark in light mode */
body.light-mode,
body.light-mode *,
body.light-mode *::before,
body.light-mode *::after {
    color: #334155 !important;
}

/* 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;
}

/* Specific text colors */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6,
body.light-mode .h1,
body.light-mode .h2,
body.light-mode .h3,
body.light-mode .h4,
body.light-mode .h5,
body.light-mode .h6,
body.light-mode .header-lined h1,
body.light-mode .font-size-36 {
    color: #1e293b !important;
}

body.light-mode p,
body.light-mode span,
body.light-mode div,
body.light-mode li,
body.light-mode a,
body.light-mode label,
body.light-mode td,
body.light-mode th {
    color: #334155 !important;
}

body.light-mode a:hover {
    color: var(--adaptive-primary) !important;
}

/* 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;
}

/* Links in primary color */
body.light-mode a:not(.btn):not(.nav-link):not(.list-group-item) {
    color: var(--adaptive-primary) !important;
}

/* 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.25rem !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;
}

/* Hide old header-lined */
#order-standard_cart .header-lined {
    display: none !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, #30363d) !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, #1c2432) 0%, var(--adaptive-secondary, #1e2738) 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, #161b22) 0%, var(--adaptive-card-bg, #1c2432) 100%) !important;
    border-bottom: 1px solid var(--adaptive-border, #30363d) !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, #8b949e) !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, #30363d) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--adaptive-text, #f0f6fc) !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, #30363d);
    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, #b1bac4) !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, #30363d) !important;
    padding: 0.5rem 0.875rem !important;
    font-size: 0.875rem !important;
    background: var(--adaptive-background-light, #161b22) !important;
    color: var(--adaptive-text, #f0f6fc) !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; }
#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:#0f1419; 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:#0f1419; 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,#1c2432); 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, #484f58);
    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, #161b22);
    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, #30363d);
    color: var(--adaptive-text-muted, #8b949e);
}
#order-standard_cart .row[data-awh-disclosure="open"] .awh-disclosure-toggle:hover {
    border-color: var(--adaptive-border-light, #484f58);
    color: var(--adaptive-text, #f0f6fc);
    background-color: var(--adaptive-background-light, #161b22);
}

/* =====================================================================
   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, #161b22) !important;
    border: 1px solid var(--adaptive-border, #30363d) !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, #f0f6fc) !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, #f0f6fc) !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, #c9d1d9) !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, #30363d);
    border-radius: .75rem; background: var(--adaptive-card-bg, #1c2432);
}
#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, #f0f6fc); font-weight: 600; font-size: .98rem; }
#order-standard_cart .awh-term-card-sub { color: var(--adaptive-text-muted, #8b949e); 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, #30363d); border-radius: .7rem;
    background: var(--adaptive-background-light, #161b22);
}
#order-standard_cart .awh-term-seg-btn {
    -webkit-appearance: none; appearance: none; border: 1px solid transparent;
    background: transparent; color: var(--adaptive-text-muted, #8b949e);
    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, #f0f6fc); }
#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, #1c2432) !important;
    border: 1px solid var(--adaptive-border, #30363d) !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, #8b949e) !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, #f0f6fc) !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, #30363d) !important;
    color: var(--adaptive-text, #f0f6fc) !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, #8b949e) !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; }