/**
 * VYQ Gold WHMCS Theme - 100% Dark-Only Customer Experience
 * Authoritative Obsidian & Gold Palette across all customer-facing WHMCS pages.
 */

:root {
  --vyq-bg-base: #070a10;
  --vyq-bg-surface: #0c111d;
  --vyq-bg-surface-elevated: #111726;
  --vyq-bg-card: #0e1320;
  --vyq-border-subtle: #1e293b;
  --vyq-border-active: rgba(212, 175, 55, 0.4);
  --vyq-gold-400: #e5c05b;
  --vyq-gold-500: #d4af37;
  --vyq-gold-600: #c59b27;
  --vyq-gold-gradient: linear-gradient(135deg, #d4af37 0%, #f3d078 50%, #c59b27 100%);
  --vyq-text-main: #f8fafc;
  --vyq-text-body: #e2e8f0;
  --vyq-text-muted: #94a3b8;
  --vyq-emerald: #10b981;
  --vyq-amber: #f59e0b;
  color-scheme: dark !important;
}

/* ==========================================================================
   GLOBAL BASE & COLOR SCHEME ENFORCEMENT
   ========================================================================== */

html, body, body.primary-bg-color, body.vyq-invoice-body, body.invoice-body {
  background-color: #070a10 !important;
  color: #e2e8f0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark !important;
}

/* Enforce dark theme even if user OS is set to Light */
@media (prefers-color-scheme: light) {
  :root, html, body, body.primary-bg-color, body.vyq-invoice-body {
    color-scheme: dark !important;
    background-color: #070a10 !important;
    color: #e2e8f0 !important;
  }
}

/* App Wrappers & WHMCS Invoice Overrides */
.main-body, .app-main, .content-area, .login-container, #main-body,
.invoice-container, .vyq-invoice-container {
  background-color: transparent !important;
  background: transparent !important;
}

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

header.header, .header {
  background-color: #0c111d !important;
  border-bottom: 1px solid #1e293b !important;
}
.topbar {
  background-color: #05070c !important;
  border-bottom: 1px solid #141b2d !important;
  padding: 6px 0 !important;
  font-size: 0.75rem !important;
}
.navbar {
  background-color: #0c111d !important;
  padding: 12px 0 !important;
}
.navbar-light .navbar-nav .nav-link {
  color: #94a3b8 !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  transition: all 0.2s ease;
}
.navbar-light .navbar-nav .nav-link:hover, 
.navbar-light .navbar-nav .active > .nav-link {
  color: #e5c05b !important;
}
.navbar-collapse {
  background-color: #0c111d !important;
}
.navbar-toggler {
  border-color: #2a374d !important;
  color: #f1f5f9 !important;
}
.navbar-toggler-icon {
  filter: invert(1) !important;
}

/* Master Breadcrumb */
.master-breadcrumb, nav[aria-label="breadcrumb"] {
  background-color: transparent !important;
  border-bottom: 1px solid #1e293b !important;
  padding: 10px 0 !important;
  margin-bottom: 24px !important;
}
.master-breadcrumb .breadcrumb, .breadcrumb {
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.8125rem !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}
.breadcrumb-item, .breadcrumb-item a {
  color: #94a3b8 !important;
  text-decoration: none !important;
}
.breadcrumb-item a:hover {
  color: #e5c05b !important;
}
.breadcrumb-item.active {
  color: #f8fafc !important;
  font-weight: 600 !important;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: #475569 !important;
  content: "/" !important;
}

/* ==========================================================================
   CARDS, TILES & CONTAINERS
   ========================================================================== */

.card, .vyq-card-main, .vyq-order-summary-card {
  background-color: #0e1320 !important;
  border: 1px solid #1e293b !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  color: #e2e8f0 !important;
}
.card-header {
  background-color: #090d16 !important;
  border-bottom: 1px solid #1e293b !important;
  color: #f8fafc !important;
}
.card-footer {
  background-color: #090d16 !important;
  border-top: 1px solid #1e293b !important;
}
.card-sidebar {
  background-color: #0c111d !important;
  border: 1px solid #1e293b !important;
}

/* Dashboard Metric Tiles */
.tiles, .tile, .tiles .tile, .card-accent-gold {
  background-color: #0e1320 !important;
  border: 1px solid #1e293b !important;
  border-radius: 14px !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}
.tile:hover, .tiles .tile:hover {
  background-color: #141b2d !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
  text-decoration: none !important;
}
.tile .stat {
  color: #e5c05b !important;
  font-weight: 700 !important;
}
.tile .title {
  color: #94a3b8 !important;
}
.tile .icon {
  color: rgba(212, 175, 55, 0.4) !important;
}

/* Articles & Announcements */
article, .announcements article, .announcement-single {
  background-color: #0e1320 !important;
  border: 1px solid #1e293b !important;
  color: #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 20px !important;
}
article h2, article h3, .announcement-single h2 {
  color: #f8fafc !important;
}
article h2 a, article h3 a {
  color: #e5c05b !important;
}

/* ==========================================================================
   SIDEBAR & LIST GROUP NAVIGATION
   ========================================================================== */

.list-group-item,
.list-group-item-action,
a.list-group-item,
button.list-group-item {
  background-color: #0c111d !important;
  border-color: #1e293b !important;
  color: #cbd5e1 !important;
  transition: all 0.15s ease-in-out !important;
}
.list-group-item:hover,
.list-group-item-action:hover,
a.list-group-item:hover,
button.list-group-item:hover {
  background-color: #141b2d !important;
  color: #ffffff !important;
  border-color: #2a374d !important;
}
.list-group-item.active,
.list-group-item-action.active,
a.list-group-item.active,
button.list-group-item.active {
  background-color: rgba(212, 175, 55, 0.12) !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
  color: #e5c05b !important;
  font-weight: 600 !important;
}
.list-group-item-heading {
  color: #ffffff !important;
}
.list-group-item-text {
  color: #94a3b8 !important;
}
.list-group-item .badge {
  background-color: #1a2336 !important;
  color: #f1f5f9 !important;
  border: 1px solid #2a374d !important;
}
.list-group-item.active .badge {
  background-color: #d4af37 !important;
  color: #070a10 !important;
  border-color: #d4af37 !important;
}

/* ==========================================================================
   TYPOGRAPHY & ACCENTS
   ========================================================================== */

.vyq-super-title {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  color: #e5c05b;
}
.vyq-form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 6px;
}
.text-gold-400 {
  color: #e5c05b !important;
}
.border-dark-subtle {
  border-color: #1e293b !important;
}
.bg-dark-alt {
  background-color: rgba(0, 0, 0, 0.25) !important;
}

/* ==========================================================================
   FORM CONTROLS & BROWSER NATIVE ELEMENTS
   ========================================================================== */

.form-control, .vyq-input, .custom-select, .vyq-select,
.field, input.field, select.field, textarea.field,
#registration .field, #registration .form-control,
.prepend-icon .field,
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"],
input[name="companyname"], input[name="address2"], input[name="password"] {
  background-color: #060910 !important;
  border: 1px solid #232d3f !important;
  color: #ffffff !important;
  height: 48px !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 0.9375rem !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus, .vyq-input:focus, .custom-select:focus, .vyq-select:focus,
.field:focus, input.field:focus, select.field:focus, textarea.field:focus,
#registration .field:focus, #registration .form-control:focus,
.prepend-icon .field:focus,
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus {
  background-color: #080c14 !important;
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18) !important;
  color: #ffffff !important;
}
.form-control::placeholder, input.field::placeholder, .field::placeholder, input::placeholder {
  color: rgba(148, 163, 184, 0.5) !important;
}
.progress, #registration .progress {
  background-color: #141b2d !important;
  border: 1px solid #1e293b !important;
  border-radius: 6px !important;
}
.progress-bar, #registration .progress-bar {
  background-color: #d4af37 !important;
}
textarea.form-control {
  height: auto !important;
}
.input-group-text {
  background-color: #0f1422 !important;
  border-color: #232d3f !important;
  color: #94a3b8 !important;
}

/* Autofill styling */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #060910 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Select options styling */
select, select option, select optgroup {
  background-color: #0c111d !important;
  color: #f1f5f9 !important;
}

/* Checkboxes & Radios */
input[type="checkbox"], input[type="radio"], input.icheck-button {
  accent-color: #d4af37 !important;
  background-color: transparent !important;
}
.iCheck-helper {
  background-color: transparent !important;
}
.icheckbox_square-blue, .iradio_square-blue {
  background-color: transparent !important;
  filter: invert(0.85) hue-rotate(180deg) brightness(0.8) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: #d4af37 !important;
  border-color: #d4af37 !important;
}
.custom-control-label::before {
  background-color: #060910 !important;
  border-color: #334155 !important;
}
.custom-control-label {
  color: #e2e8f0 !important;
}

/* International Tel Input Sprite */
.iti-flag {
  background-color: transparent !important;
}

/* Bootstrap Switch in Details / 2FA */
.bootstrap-switch {
  border-color: #232d3f !important;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
  background-color: #1e293b !important;
  color: #94a3b8 !important;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
  background-color: #d4af37 !important;
  color: #070a10 !important;
  font-weight: 700 !important;
}
.bootstrap-switch .bootstrap-switch-label {
  background-color: #0c111d !important;
  color: #64748b !important;
}

/* Subtle Dark Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #070a10;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #d4af37;
}
* {
  scrollbar-width: thin;
  scrollbar-color: #1e293b #070a10;
}

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

.btn-vyq-pay, #btnPayNow, .btn-payment, .vyq-payment-btn-wrapper button {
  background: linear-gradient(135deg, #d4af37 0%, #f3d078 50%, #c59b27 100%) !important;
  color: #070a10 !important;
  border: none !important;
  font-weight: 800 !important;
  font-size: 0.9375rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.28) !important;
  transition: all 0.2s ease !important;
}
.btn-vyq-pay:hover, #btnPayNow:hover, .btn-payment:hover, .vyq-payment-btn-wrapper button:hover {
  filter: brightness(1.12) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(212, 175, 55, 0.38) !important;
  color: #070a10 !important;
}
.btn-default, .btn-light {
  background-color: #111726 !important;
  border-color: #232d3f !important;
  color: #e2e8f0 !important;
}
.btn-default:hover, .btn-light:hover {
  background-color: #182236 !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}
.vyq-btn-secondary, .btn-secondary {
  background-color: #111726 !important;
  border: 1px solid #1e293b !important;
  color: #e2e8f0 !important;
  border-radius: 8px !important;
}
.vyq-btn-secondary:hover, .btn-secondary:hover {
  background-color: #182236 !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}
.btn-primary {
  background-color: #1d4ed8 !important;
  border-color: #2563eb !important;
}
.btn-primary:hover {
  background-color: #2563eb !important;
  border-color: #3b82f6 !important;
}

/* ==========================================================================
   ALERTS (OBSIDIAN DARK THEMED)
   ========================================================================== */

.alert {
  border-radius: 12px !important;
  border-width: 1px !important;
  padding: 14px 18px !important;
}
.alert-info {
  background-color: rgba(14, 165, 233, 0.1) !important;
  border-color: rgba(14, 165, 233, 0.3) !important;
  color: #7dd3fc !important;
}
.alert-info .alert-link, .alert-info a {
  color: #38bdf8 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}
.alert-success {
  background-color: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  color: #6ee7b7 !important;
}
.alert-success .alert-link, .alert-success a {
  color: #34d399 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}
.alert-warning {
  background-color: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fcd34d !important;
}
.alert-warning .alert-link, .alert-warning a {
  color: #fbbf24 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}
.alert-danger {
  background-color: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}
.alert-danger .alert-link, .alert-danger a {
  color: #f87171 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   TABLES & DATATABLES
   ========================================================================== */

.table {
  color: #e2e8f0 !important;
  background-color: transparent !important;
}
.table th, .table thead th {
  background-color: #090d16 !important;
  border-color: #1e293b !important;
  color: #94a3b8 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
}
.table td {
  border-color: #172033 !important;
  color: #f1f5f9 !important;
  background-color: transparent !important;
  vertical-align: middle !important;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #0b0f1a !important;
}
.table-hover tbody tr:hover,
.table-hover tbody tr:hover td {
  background-color: rgba(212, 175, 55, 0.05) !important;
}
.dataTables_wrapper {
  color: #94a3b8 !important;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background-color: #060910 !important;
  border: 1px solid #232d3f !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  color: #94a3b8 !important;
}

/* ==========================================================================
   DROPDOWNS & MODALS
   ========================================================================== */

.dropdown-menu {
  background-color: #0c111d !important;
  border: 1px solid #232d3f !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
  border-radius: 12px !important;
}
.dropdown-item {
  color: #cbd5e1 !important;
  font-size: 0.875rem !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: #141b2d !important;
  color: #e5c05b !important;
}
.dropdown-divider {
  border-top-color: #1e293b !important;
}
.modal-content {
  background-color: #0c111d !important;
  border: 1px solid #232d3f !important;
  color: #f1f5f9 !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8) !important;
}
.modal-header, .modal-footer {
  border-color: #1e293b !important;
  background-color: #090d16 !important;
}
.modal-header .close, .modal-body .close {
  color: #94a3b8 !important;
  text-shadow: none !important;
  opacity: 0.7 !important;
}
.modal-header .close:hover, .modal-body .close:hover {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* ==========================================================================
   TABS, PAGINATION & BADGES
   ========================================================================== */

.nav-tabs {
  border-bottom: 1px solid #1e293b !important;
}
.nav-tabs .nav-link {
  color: #94a3b8 !important;
  border: 1px solid transparent !important;
  border-bottom: none !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 10px 18px !important;
  font-weight: 500 !important;
}
.nav-tabs .nav-link:hover {
  color: #e5c05b !important;
  border-color: #1e293b #1e293b transparent !important;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  color: #ffffff !important;
  background-color: #0c111d !important;
  border-color: #232d3f #232d3f #0c111d !important;
  border-top: 2px solid #d4af37 !important;
}
.pagination .page-item .page-link {
  background-color: #0c111d !important;
  border-color: #1e293b !important;
  color: #94a3b8 !important;
}
.pagination .page-item:hover .page-link {
  background-color: #141b2d !important;
  color: #ffffff !important;
}
.pagination .page-item.active .page-link {
  background-color: #d4af37 !important;
  border-color: #d4af37 !important;
  color: #070a10 !important;
  font-weight: 700 !important;
}
.pagination .page-item.disabled .page-link {
  background-color: rgba(12, 17, 29, 0.5) !important;
  border-color: #141b2d !important;
  color: rgba(148, 163, 184, 0.4) !important;
}

.badge-default, .badge-secondary {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}
.badge-info {
  background-color: rgba(14, 165, 233, 0.2) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(14, 165, 233, 0.3) !important;
}
.badge-success {
  background-color: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}
.badge-warning {
  background-color: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}
.badge-danger {
  background-color: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* ==========================================================================
   CHECKOUT, INVOICE & ORDER SUMMARY DETAILS
   ========================================================================== */

.vyq-order-summary-card {
  border: 1px solid rgba(212, 175, 55, 0.2) !important;
  background: #0b0f1a !important;
}
.vyq-badge-due {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  color: #fbbf24 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  padding: 4px 8px;
  border-radius: 6px;
}
.vyq-total-box {
  background: rgba(212, 175, 55, 0.08) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
}
.vyq-total-amount {
  font-size: 1.75rem;
  font-weight: 800;
  color: #e5c05b;
  line-height: 1;
}

/* ==========================================================================
   VYQ CHECKOUT & PAYMENT SCREEN (AUTHORITATIVE DARK OVERRIDES)
   ========================================================================== */

.vyq-checkout-wrapper {
  max-width: 1060px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
}

/* Card Dark Enforcements - Highest Specificity */
html body .card,
html body .vyq-card-main,
html body .vyq-order-summary-card,
html body #frmPayment .card,
html body .vyq-checkout-container .card,
html body .cc-payment-form {
  background: #0e1320 !important;
  background-color: #0e1320 !important;
  border: 1px solid #1e293b !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
  color: #e2e8f0 !important;
}

html body .vyq-order-summary-card {
  background: #0c111d !important;
  background-color: #0c111d !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
}

html body .card-body {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
}

/* Eliminate Bootstrap White Surfaces */
html body .bg-white,
html body [class*="bg-white"],
html body .card.bg-white,
html body .panel-default {
  background: #0e1320 !important;
  background-color: #0e1320 !important;
  border-color: #1e293b !important;
}

/* Compact Verification Alert */
.email-verification-alert,
.verification-banner,
.alert-warning {
  background: rgba(212, 175, 55, 0.08) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  color: #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-size: 0.85rem !important;
}
.alert-warning .btn {
  padding: 4px 10px !important;
  font-size: 0.75rem !important;
}

/* Stripe Elements Form Grid */
#stripeElements {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-top: 15px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
}

#stripeElements > .form-group {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  position: relative !important;
}

/* Row 1: Card Number - 100% Full Width */
#stripeElements > .form-group:nth-child(1) {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Row 2: Expiry Date - 50% Left */
#stripeElements > .form-group:nth-child(2) {
  flex: 0 0 calc(50% - 8px) !important;
  width: calc(50% - 8px) !important;
  max-width: calc(50% - 8px) !important;
}

/* Row 2: CVV / CVC2 - 50% Right */
#stripeElements > .form-group:nth-child(3) {
  flex: 0 0 calc(50% - 8px) !important;
  width: calc(50% - 8px) !important;
  max-width: calc(50% - 8px) !important;
}

/* Clean up Stripe Element Labels */
#stripeElements label,
#stripeElements .control-label {
  display: block !important;
  text-align: left !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 20px !important;
  min-height: 20px !important;
  line-height: 20px !important;
  position: static !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
}

/* Gateway Radio selector alignment */
.vyq-gateway-selector .paymethod-info label,
.paymethod-info label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  color: #f1f5f9 !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
}

/* Container inside each form-group */
#stripeElements .col-sm-7,
#stripeElements .col-sm-2 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
}

/* Hide empty filler columns and obsolete popover generated by WHMCS Stripe */
#stripeElements > .form-group:nth-child(1) > div.col-sm-4,
#stripeElements > .form-group:nth-child(2) > div.col-sm-6,
#stripeElements > .form-group:nth-child(3) > div.col-sm-4,
#stripeElements .col-sm-4:empty,
#stripeElements .col-sm-6:empty,
#stripeElements #stripeCvcWhere,
#stripeElements #cvvWhereLink {
  display: none !important;
}

/* Stripe Inputs - 50px Height, Gold Glow */
#stripeElements .form-control.StripeElement,
#stripeCreditCard,
#stripeExpiryDate,
#stripeCvc,
#elementCardNumber,
#elementCardExpiry,
#elementCardCvc {
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  background-color: #0b0f1a !important;
  border: 1px solid #1e293b !important;
  border-radius: 8px !important;
  padding: 13px 16px !important;
  box-sizing: border-box !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

#stripeElements .form-control.StripeElement.StripeElement--focus,
#stripeCreditCard:focus-within,
#stripeExpiryDate:focus-within,
#stripeCvc:focus-within,
#stripeCreditCard.StripeElement--focus,
#stripeExpiryDate.StripeElement--focus,
#stripeCvc.StripeElement--focus,
#elementCardNumber.StripeElement--focus,
#elementCardExpiry.StripeElement--focus,
#elementCardCvc.StripeElement--focus {
  background-color: #0d1322 !important;
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.35) !important;
}

#stripeCreditCard.StripeElement--invalid,
#stripeExpiryDate.StripeElement--invalid,
#stripeCvc.StripeElement--invalid {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.25) !important;
}

/* Billing Address Section */
.vyq-billing-address-section {
  width: 100% !important;
  margin-top: 15px !important;
  margin-bottom: 20px !important;
  clear: both !important;
}

.vyq-address-cards-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}

.vyq-address-card,
.vyq-address-card-new {
  display: block !important;
  padding: 14px 16px !important;
  background: #0b0f1a !important;
  border: 1px solid #1e293b !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
}

.vyq-address-card:hover,
.vyq-address-card-new:hover {
  border-color: rgba(212, 175, 55, 0.5) !important;
}

.vyq-address-card.selected,
.vyq-address-card-new.selected {
  border-color: #d4af37 !important;
  background: rgba(212, 175, 55, 0.05) !important;
  box-shadow: 0 0 0 1px #d4af37 !important;
}

/* Standard Inputs (Non-Stripe / Fallback) */
.vyq-expiry-cvv-row {
  display: flex !important;
  gap: 16px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.vyq-expiry-cvv-row > .form-group {
  flex: 1 1 50% !important;
  max-width: calc(50% - 8px) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Native Payment Inputs & Card Description */
.vyq-input,
.form-control.vyq-input,
#inputCardNumber,
#inputCardExpiry,
#inputCardCvv,
#inputDescription,
#inputCardStart,
#inputIssueNum,
.cc-payment-form input.form-control,
#frmPayment input.form-control {
  height: 50px !important;
  min-height: 50px !important;
  background-color: #0b0f1a !important;
  border: 1px solid #1e293b !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 0.95rem !important;
  color-scheme: dark !important;
  caret-color: #d4af37 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

#inputCardNumber,
#inputCardExpiry,
#inputCardCvv {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  letter-spacing: 0.05em !important;
}

#inputDescription {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.vyq-input:focus,
.form-control.vyq-input:focus,
#inputCardNumber:focus,
#inputCardExpiry:focus,
#inputCardCvv:focus,
#inputDescription:focus,
.cc-payment-form input.form-control:focus,
#frmPayment input.form-control:focus {
  background-color: #0d1322 !important;
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.35) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  outline: none !important;
}

/* Placeholders - Muted Slate/Gray */
#inputCardNumber::placeholder,
#inputCardExpiry::placeholder,
#inputCardCvv::placeholder,
#inputDescription::placeholder,
.vyq-input::placeholder,
.form-control.vyq-input::placeholder,
.cc-payment-form input.form-control::placeholder,
#frmPayment input.form-control::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  opacity: 1 !important;
}

/* Autofill Support */
#inputCardNumber:-webkit-autofill,
#inputCardNumber:-webkit-autofill:hover,
#inputCardNumber:-webkit-autofill:focus,
#inputCardExpiry:-webkit-autofill,
#inputCardExpiry:-webkit-autofill:hover,
#inputCardExpiry:-webkit-autofill:focus,
#inputCardCvv:-webkit-autofill,
#inputCardCvv:-webkit-autofill:hover,
#inputCardCvv:-webkit-autofill:focus,
#inputDescription:-webkit-autofill,
#inputDescription:-webkit-autofill:hover,
#inputDescription:-webkit-autofill:focus,
.vyq-input:-webkit-autofill,
.form-control:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #0b0f1a inset !important;
  box-shadow: 0 0 0 1000px #0b0f1a inset !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  caret-color: #d4af37 !important;
  border-color: #d4af37 !important;
  transition: background-color 5000000s ease-in-out 0s !important;
}

#inputCardNumber:-moz-autofill,
#inputCardExpiry:-moz-autofill,
#inputCardCvv:-moz-autofill,
#inputDescription:-moz-autofill,
.vyq-input:-moz-autofill,
.form-control:-moz-autofill {
  filter: none !important;
  background-color: #0b0f1a !important;
  color: #ffffff !important;
  -moz-text-fill-color: #ffffff !important;
}

/* Pay CTA Button */
.btn-vyq-pay {
  background: linear-gradient(135deg, #d4af37 0%, #f3d078 50%, #c59b27 100%) !important;
  color: #070a10 !important;
  height: 52px !important;
  line-height: 52px !important;
  padding: 0 24px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.35) !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-vyq-pay:hover,
.btn-vyq-pay:focus {
  background: linear-gradient(135deg, #f3d078 0%, #d4af37 100%) !important;
  box-shadow: 0 6px 25px rgba(212, 175, 55, 0.5) !important;
  transform: translateY(-1px) !important;
  color: #000000 !important;
}

.btn-vyq-pay:active {
  transform: translateY(1px) !important;
}

/* Trust Line */
.vyq-trust-line {
  color: #64748b !important;
}

/* Sticky Order Summary */
.vyq-sticky-summary {
  top: 24px;
  z-index: 10;
}

/* Mobile Layout Responsive Adjustments */
@media (max-width: 768px) {
  .vyq-checkout-wrapper {
    padding: 0 8px !important;
  }

  .vyq-checkout-row {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Order on Mobile: 1. Heading (above row), 2. Summary, 3. Payment Form, 4. Pay Button */
  .vyq-summary-col {
    order: 1 !important;
    margin-bottom: 20px !important;
  }

  .vyq-payment-col {
    order: 2 !important;
  }

  /* Stripe elements on mobile: 50/50 expiry & cvv */
  #stripeElements > .form-group:nth-child(2),
  #stripeElements > .form-group:nth-child(3) {
    width: calc(50% - 8px) !important;
    flex: 0 0 calc(50% - 8px) !important;
  }

  .btn-vyq-pay {
    height: 48px !important;
    line-height: 48px !important;
    font-size: 0.95rem !important;
  }
}

/* Standalone Invoice Table & Badges */
.vyq-invoice-container {
  max-width: 920px !important;
}
.vyq-status-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.vyq-status-badge.unpaid {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  color: #fbbf24 !important;
}
.vyq-status-badge.paid {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
}
.vyq-status-badge.draft {
  background: rgba(148, 163, 184, 0.12) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  color: #94a3b8 !important;
}
.vyq-invoice-table thead th {
  background-color: #090d16 !important;
  color: #94a3b8 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 12px 14px !important;
}
.vyq-invoice-table tbody td {
  padding: 14px !important;
  border-top: 1px solid #1e293b !important;
  vertical-align: middle !important;
}

/* Footer Simplification */
footer#footer, .footer {
  background: #05070c !important;
  border-top: 1px solid #1e293b !important;
  color: #94a3b8 !important;
  padding: 24px 0 !important;
  font-size: 0.8125rem !important;
}
footer#footer a {
  color: #94a3b8 !important;
}
footer#footer a:hover {
  color: #e5c05b !important;
}
footer .btn, footer .list-inline-item .btn {
  background-color: #0c111d !important;
  border: 1px solid #1e293b !important;
  color: #94a3b8 !important;
}
footer .btn:hover, footer .list-inline-item .btn:hover {
  background-color: #141b2d !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}
#footer p:has(a[href*="whmcs"]) {
  opacity: 0.45 !important;
  font-size: 0.6875rem !important;
  margin-top: 8px !important;
}

/* ==========================================================================
   PRINT SPECIFIC RULES (CLEAN WHITE DOCUMENT EXCEPTION)
   ========================================================================== */

@media print {
  :root, html, body, body.primary-bg-color, body.vyq-invoice-body, body.invoice-body {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    color-scheme: light !important;
  }
  .card, .vyq-card-main, .vyq-invoice-container, .vyq-order-summary-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    color: #000000 !important;
  }
  .text-white, .text-slate-100, .text-slate-200, .text-slate-300, .text-muted, h1, h2, h3, h4, h5, h6 {
    color: #000000 !important;
  }
  .border-dark-subtle {
    border-color: #e2e8f0 !important;
  }
  .vyq-total-box {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
  }
  .vyq-total-amount, .vyq-logo-gold, .text-gold-400 {
    color: #000000 !important;
  }
  .table, .table td, .table th, .vyq-invoice-table, .vyq-invoice-table td, .vyq-invoice-table th {
    color: #000000 !important;
    border-color: #e2e8f0 !important;
    background-color: transparent !important;
  }
  .vyq-status-badge.paid {
    color: #047857 !important;
    border: 1px solid #047857 !important;
    background: transparent !important;
  }
  .vyq-status-badge.unpaid {
    color: #b45309 !important;
    border: 1px solid #b45309 !important;
    background: transparent !important;
  }
  .d-print-none,
  .btn-vyq-pay,
  #btnPayNow,
  .vyq-payment-btn-wrapper,
  form[action*="/pay"],
  .navbar,
  .header,
  footer,
  .master-breadcrumb {
    display: none !important;
  }
}