/**
 * ARPHost WHMCS Template - Dark Theme
 * Parent: Twenty-One
 * Version: 6.0.9
 * Matches ARPHost WordPress dark theme with formatting fixes
 */

/* ==========================================================================
   Import Google Font
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
    --arp-bg-dark: #0a0f1a;
    --arp-bg-card: #111827;
    --arp-bg-card-hover: #1f2937;
    --arp-border: #1f2937;
    --arp-text: #f1f5f9;
    --arp-text-muted: #94a3b8;
    --arp-primary: #0891b2;
    --arp-primary-dark: #0e7490;
    --arp-primary-light: #22d3ee;
    --arp-success: #10b981;
    --arp-danger: #ef4444;
    --arp-warning: #f59e0b;
}

/* ==========================================================================
   Base - Dark Background
   ========================================================================== */
html, body {
    background: var(--arp-bg-dark) !important;
    color: var(--arp-text) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ==========================================================================
   Header/Navbar - Dark
   ========================================================================== */
.header,
header,
.navbar,
.navbar-default,
.main-menu {
    background: var(--arp-bg-card) !important;
    border-bottom: 1px solid var(--arp-border) !important;
}

.navbar-brand img,
.logo img {
    max-height: 45px !important;
}

/* Navigation Links */
.navbar-nav > li > a,
.main-menu a,
.nav > li > a {
    color: var(--arp-text) !important;
    font-weight: 500 !important;
}

.navbar-nav > li > a:hover,
.main-menu a:hover,
.nav > li > a:hover {
    color: var(--arp-primary-light) !important;
    background: transparent !important;
}

/* Remove bullet points from nav */
.navbar-nav,
.nav,
ul.nav {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.navbar-nav li,
.nav li {
    list-style: none !important;
}

/* ==========================================================================
   CRITICAL: Override Twenty-One header ul flex rule
   ========================================================================== */
header ul.dropdown-menu,
header nav ul.dropdown-menu,
.navbar ul.dropdown-menu,
ul.dropdown-menu {
    display: none !important;
    flex-direction: column !important;
}

/* Dropdown Menus - Very specific selectors */
.dropdown-menu,
ul.dropdown-menu,
.navbar-nav .dropdown-menu,
#nav .dropdown-menu,
header .dropdown-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 9999 !important;
    min-width: 220px !important;
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
    padding: 8px 0 !important;
    margin-top: 0 !important;
    flex-direction: column !important;
}

/* Show dropdown on hover and when open/show class is added */
.dropdown:hover > .dropdown-menu,
.dropdown.open > .dropdown-menu,
.dropdown.show > .dropdown-menu,
li.dropdown:hover > ul.dropdown-menu,
li.dropdown.show > ul.dropdown-menu,
.nav-item.dropdown:hover > .dropdown-menu,
.nav-item.dropdown.show > .dropdown-menu,
#nav li.dropdown:hover > .dropdown-menu {
    display: block !important;
}

/* Dropdown menu items */
.dropdown-menu > li,
.dropdown-menu > .dropdown-item,
ul.dropdown-menu > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
}

.dropdown-menu > li > a,
.dropdown-menu .dropdown-item,
ul.dropdown-menu > li > a {
    display: block !important;
    color: var(--arp-text) !important;
    font-size: 0.98rem !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    white-space: nowrap !important;
    background: transparent !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu .dropdown-item:hover,
ul.dropdown-menu > li > a:hover {
    background: var(--arp-bg-card-hover) !important;
    color: var(--arp-primary-light) !important;
}

/* Ensure dropdown parent is positioned */
.dropdown,
li.dropdown,
.nav-item.dropdown,
#nav > li.dropdown {
    position: relative !important;
}

/* Fix navbar-nav to be horizontal on desktop */
@media (min-width: 1200px) {
    #nav.navbar-nav,
    .navbar-nav {
        flex-direction: row !important;
    }

    #nav.navbar-nav > li,
    .navbar-nav > li {
        display: inline-block !important;
        float: none !important;
    }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-primary {
    background: linear-gradient(135deg, var(--arp-primary), var(--arp-primary-dark)) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    position: relative !important;
    z-index: 1 !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--arp-primary-dark), #065f6f) !important;
    color: #fff !important;
}

.btn-success {
    background: linear-gradient(135deg, var(--arp-success), #059669) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #fff !important;
}

a.btn-success,
button.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success i,
.btn-success span,
.btn-success strong,
a.btn-danger,
button.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger i,
.btn-danger span,
.btn-danger strong {
    color: #fff !important;
}

.btn-default,
.btn-secondary {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 8px !important;
    color: var(--arp-text) !important;
}

.btn-default:hover,
.btn-secondary:hover {
    background: var(--arp-bg-card-hover) !important;
    border-color: var(--arp-primary) !important;
    color: var(--arp-primary-light) !important;
}

.btn-danger {
    background: linear-gradient(135deg, var(--arp-danger), #dc2626) !important;
    border: none !important;
    border-radius: 8px !important;
}

.btn-warning {
    background: linear-gradient(135deg, var(--arp-warning), #d97706) !important;
    border: none !important;
    border-radius: 8px !important;
}

/* ==========================================================================
   Cards & Panels - Dark
   ========================================================================== */
.panel,
.card,
.well {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2) !important;
}

.panel-default > .panel-heading,
.panel-heading,
.card-header {
    background: var(--arp-bg-card-hover) !important;
    border-bottom: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
    border-radius: 12px 12px 0 0 !important;
}

.panel-title,
.card-title {
    color: var(--arp-text) !important;
    font-weight: 600 !important;
}

.panel-body,
.card-body {
    color: var(--arp-text-muted) !important;
}

/* ==========================================================================
   Forms - Dark
   ========================================================================== */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    background: var(--arp-bg-dark) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 8px !important;
    color: var(--arp-text) !important;
    padding: 10px 14px !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--arp-primary) !important;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.2) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: var(--arp-text-muted) !important;
}

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

/* ==========================================================================
   Tables - Dark
   ========================================================================== */
.table {
    color: var(--arp-text) !important;
}

.table > thead > tr > th,
.table > thead > tr > td {
    background: var(--arp-bg-card-hover) !important;
    border-color: var(--arp-border) !important;
    color: var(--arp-text) !important;
    font-weight: 600 !important;
}

.table > tbody > tr > td,
.table > tbody > tr > th {
    border-color: var(--arp-border) !important;
    color: var(--arp-text-muted) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background: rgba(30, 41, 59, 0.5) !important;
}

.table-hover > tbody > tr:hover {
    background: var(--arp-bg-card-hover) !important;
}

/* ==========================================================================
   Sidebar - Dark
   ========================================================================== */
.sidebar .panel,
.sidebar .list-group {
    background: var(--arp-bg-card) !important;
}

.list-group-item {
    background: var(--arp-bg-card) !important;
    border-color: var(--arp-border) !important;
    color: var(--arp-text) !important;
}

.list-group-item:hover {
    background: var(--arp-bg-card-hover) !important;
    color: var(--arp-primary-light) !important;
}

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

/* ==========================================================================
   Alerts - Dark
   ========================================================================== */
.alert {
    border: none !important;
    border-radius: 8px !important;
}

.alert-success {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border-left: 4px solid var(--arp-success) !important;
}

.alert-danger,
.alert-error {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-left: 4px solid var(--arp-danger) !important;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border-left: 4px solid var(--arp-warning) !important;
}

.alert-info {
    background: rgba(8, 145, 178, 0.15) !important;
    color: var(--arp-primary-light) !important;
    border-left: 4px solid var(--arp-primary) !important;
}

/* ==========================================================================
   Footer - Dark
   ========================================================================== */
footer,
.footer {
    background: var(--arp-bg-card) !important;
    border-top: 1px solid var(--arp-border) !important;
    color: var(--arp-text-muted) !important;
}

footer a,
.footer a {
    color: var(--arp-text-muted) !important;
}

footer a:hover,
.footer a:hover {
    color: var(--arp-primary-light) !important;
}

/* ==========================================================================
   Links
   ========================================================================== */
a {
    color: var(--arp-primary-light) !important;
}

a:hover {
    color: var(--arp-primary) !important;
}

/* ==========================================================================
   Badges & Labels
   ========================================================================== */
.badge,
.label {
    border-radius: 4px !important;
    font-weight: 500 !important;
}

.badge-success, .label-success { background: var(--arp-success) !important; }
.badge-primary, .label-primary { background: var(--arp-primary) !important; }
.badge-danger, .label-danger { background: var(--arp-danger) !important; }
.badge-warning, .label-warning { background: var(--arp-warning) !important; }
.badge-info, .label-info { background: var(--arp-primary) !important; }

/* ==========================================================================
   Modal - Dark
   ========================================================================== */
.modal-content {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
}

.modal-header {
    border-bottom: 1px solid var(--arp-border) !important;
}

.modal-header .close {
    color: var(--arp-text) !important;
}

.modal-footer {
    border-top: 1px solid var(--arp-border) !important;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination > li > a,
.pagination > li > span {
    background: var(--arp-bg-card) !important;
    border-color: var(--arp-border) !important;
    color: var(--arp-text) !important;
}

.pagination > li > a:hover {
    background: var(--arp-bg-card-hover) !important;
    color: var(--arp-primary-light) !important;
}

.pagination > .active > a,
.pagination > .active > span {
    background: var(--arp-primary) !important;
    border-color: var(--arp-primary) !important;
    color: #fff !important;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumb {
    background: transparent !important;
    color: var(--arp-text-muted) !important;
}

.breadcrumb > li + li:before {
    color: var(--arp-text-muted) !important;
}

.breadcrumb > .active {
    color: var(--arp-text-muted) !important;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    color: var(--arp-text) !important;
    font-weight: 600 !important;
}

p, span, div {
    color: inherit;
}

/* ==========================================================================
   Homepage Specific
   ========================================================================== */
.home-shortcuts .panel {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.home-shortcuts .panel:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(8, 145, 178, 0.2) !important;
    border-color: var(--arp-primary) !important;
}

/* ==========================================================================
   Client Area Specific
   ========================================================================== */
.client-home-panels .panel-icon {
    color: var(--arp-primary) !important;
}

/* Service status colors */
.label-active, .badge-active {
    background: var(--arp-success) !important;
}

.label-pending, .badge-pending {
    background: var(--arp-warning) !important;
}

.label-suspended, .badge-suspended,
.label-terminated, .badge-terminated {
    background: var(--arp-danger) !important;
}

/* ==========================================================================
   Wrapper and Container
   ========================================================================== */
.wrapper,
.main-content,
#main-body,
.container {
    background: transparent !important;
}

/* ==========================================================================
   Misc Fixes
   ========================================================================== */
hr {
    border-color: var(--arp-border) !important;
}

.help-block {
    color: var(--arp-text-muted) !important;
}

.text-muted {
    color: var(--arp-text-muted) !important;
}

/* Progress bars */
.progress {
    background: var(--arp-bg-dark) !important;
    border-radius: 4px !important;
}

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

/* Tabs */
.nav-tabs {
    border-bottom-color: var(--arp-border) !important;
}

.nav-tabs > li > a {
    color: var(--arp-text-muted) !important;
    border: none !important;
}

.nav-tabs > li > a:hover {
    background: var(--arp-bg-card-hover) !important;
    border: none !important;
    color: var(--arp-text) !important;
}

.nav-tabs > li.active > a {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-bottom-color: var(--arp-bg-card) !important;
    color: var(--arp-primary-light) !important;
}

/* Tab content */
.tab-content {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-top: none !important;
    padding: 20px !important;
}

/* ==========================================================================
   Twenty-One Specific Overrides
   ========================================================================== */

/* Main wrapper */
.main-container,
.content-area,
#main-container {
    background: var(--arp-bg-dark) !important;
}

/* Header area for Twenty-One */
.header-area,
.header-container,
.top-nav {
    background: var(--arp-bg-card) !important;
}

/* Twenty-One specific navigation */
.navbar-toggle {
    border-color: var(--arp-border) !important;
}

.navbar-toggle .icon-bar {
    background-color: var(--arp-text) !important;
}

.navbar-collapse {
    background: var(--arp-bg-card) !important;
    border-color: var(--arp-border) !important;
}

/* Twenty-One store/product panels */
.product-group,
.product-item {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
    margin-bottom: 24px !important;
}

.product-group:hover,
.product-item:hover {
    border-color: var(--arp-primary) !important;
    box-shadow: 0 8px 24px rgba(8, 145, 178, 0.2) !important;
}

/* Product pricing */
.product-pricing,
.price {
    color: var(--arp-primary-light) !important;
}

/* Sidebar widgets */
.sidebar-widget,
.widget {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
}

/* Twenty-One login/register forms */
.login-container,
.register-container,
.login-form-container {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
}

/* Input groups */
.input-group-addon {
    background: var(--arp-bg-card-hover) !important;
    border-color: var(--arp-border) !important;
    color: var(--arp-text) !important;
}

/* Service details */
.service-status,
.product-status {
    border-radius: 4px !important;
}

/* Domain search */
.domain-checker,
.domain-search {
    background: var(--arp-bg-card) !important;
}

/* Shopping cart */
.cart-body,
.shopping-cart {
    background: var(--arp-bg-card) !important;
}

/* Order summary */
.order-summary,
.summary-totals {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
}

/* Invoice styling */
.invoice-container {
    background: var(--arp-bg-card) !important;
}

/* Ticket system */
.ticket-reply,
.ticket-message {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
}

.ticket-reply.staff {
    border-left: 4px solid var(--arp-primary) !important;
}

/* Knowledgebase */
.kb-article,
.kb-category {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 8px !important;
}

/* Icon colors in panels */
.fa, .fas, .far, .fab,
.glyphicon,
[class*="icon-"] {
    color: inherit;
}

.fa-inverse,
.fas.fa-inverse,
.far.fa-inverse,
.fab.fa-inverse {
    color: #fff !important;
}

.panel .fa, .panel .fas, .panel .far,
.panel .glyphicon {
    color: var(--arp-primary) !important;
}

.product-icon .fa-stack-2x {
    color: #9aa9bf !important;
}

.product-icon .fa-stack-1x,
.product-icon .fa-inverse {
    color: #fff !important;
}

/* Ensure text is readable everywhere */
* {
    color: inherit;
}

/* Fix any white backgrounds */
.bg-white,
.bg-light {
    background: var(--arp-bg-card) !important;
}

/* ==========================================================================
   STORE & PRODUCT PAGES - CRITICAL FIXES
   ========================================================================== */

/* Product pricing cards */
.product,
.product-card,
.pricing-column,
.store-product,
[class*="product-"],
.col-product {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
    overflow: hidden;
}

/* Product header/title area */
.product-header,
.product-title-row,
.pricing-header,
.product h3,
.product h4 {
    background: linear-gradient(135deg, var(--arp-primary), var(--arp-primary-dark)) !important;
    color: #fff !important;
    padding: 15px !important;
}

/* Product body/features */
.product-body,
.product-content,
.pricing-body,
.product-features,
.features-list,
.product ul,
ul.product-features {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text) !important;
    padding: 20px !important;
}

.product ul li,
.product-features li,
.features-list li {
    color: var(--arp-text-muted) !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--arp-border) !important;
}

.product ul li:last-child,
.product-features li:last-child {
    border-bottom: none !important;
}

/* Product footer/order button area */
.product-footer,
.pricing-footer,
.product-order {
    background: var(--arp-bg-card-hover) !important;
    padding: 15px !important;
    text-align: center !important;
}

/* Store page specific - Twenty-One */
.products .product,
.store-products .item,
#products .product {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text) !important;
}

/* ==========================================================================
   CART & ORDER PAGES
   ========================================================================== */

/* Main order container */
.order-form,
.cart-form,
#order-standard_cart,
#frmConfigureProduct,
.configure-product {
    background: transparent !important;
}

/* Product info boxes in cart */
.product-info-box,
.cart-product-info,
.order-product-info,
.product-summary-box,
.configurable-options,
#productInfo {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
    color: var(--arp-text) !important;
    padding: 20px !important;
}

/* Order summary sidebar */
.order-summary,
#orderSummary,
.summary-container,
.order-summary-box {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
    color: var(--arp-text) !important;
}

/* Keep order-form sidebar wrapper borderless; only inner cards are boxed */
#order-standard_cart .cart-sidebar,
#order-arphost_cart .cart-sidebar {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.order-summary .header,
.order-summary-header,
#orderSummary .header {
    background: var(--arp-primary) !important;
    color: #fff !important;
    padding: 15px !important;
    border-radius: 12px 12px 0 0 !important;
}

/* Addon/upsell boxes */
.addon-products,
.product-addons,
.available-addons,
.addon-container,
.upsell-container,
[id*="addon"],
.panel-addon {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
    color: var(--arp-text) !important;
    margin-bottom: 20px !important;
    padding: 20px !important;
}

.addon-products h4,
.addon-products h5,
.available-addons h4 {
    color: var(--arp-primary-light) !important;
    margin-bottom: 15px !important;
}

/* Billing cycle selector */
.billing-cycle,
.cycle-selector,
[id*="billingcycle"],
.pricing-breakdown {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 8px !important;
    color: var(--arp-text) !important;
}

/* ==========================================================================
   FORMS - COMPREHENSIVE
   ========================================================================== */

/* All form controls */
.form-control,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea,
.markItUpEditor,
#inputMessage,
.markdown-editor {
    background: var(--arp-bg-dark) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 8px !important;
    color: var(--arp-text) !important;
}

/* Rich text editor / Markdown area */
.markItUp,
.markdown-wrapper,
.editor-wrapper,
#inputMessage_parent {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 8px !important;
}

.markItUpHeader,
.editor-toolbar {
    background: var(--arp-bg-card-hover) !important;
    border-bottom: 1px solid var(--arp-border) !important;
}

.markItUpHeader ul li a {
    color: var(--arp-text) !important;
}

/* File upload */
.file-upload,
input[type="file"],
.custom-file,
.custom-file-input,
.custom-file-label {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
}

/* Radio buttons and checkboxes */
input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--arp-primary) !important;
}

.radio label,
.checkbox label,
.form-check-label {
    color: var(--arp-text) !important;
}

/* Custom radio/checkbox styling */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--arp-primary) !important;
    border-color: var(--arp-primary) !important;
}

.custom-radio .custom-control-label::before,
.custom-checkbox .custom-control-label::before {
    background-color: var(--arp-bg-dark) !important;
    border-color: var(--arp-border) !important;
}

/* Radio group options (SiteLock etc) */
.radio-group,
.option-group,
.addon-options {
    background: var(--arp-bg-card) !important;
}

.radio-group label,
.option-group label {
    color: var(--arp-text) !important;
    padding: 12px 15px !important;
    border-bottom: 1px solid var(--arp-border) !important;
    display: block !important;
}

.radio-group label:hover {
    background: var(--arp-bg-card-hover) !important;
}

/* ==========================================================================
   DOMAIN SEARCH BOX
   ========================================================================== */

.domain-checker-container,
.domain-search-box,
#domainChecker,
.spotlight-tld {
    background: var(--arp-bg-card) !important;
    border-radius: 12px !important;
    padding: 30px !important;
}

.domain-checker-container input,
#domainChecker input[type="text"],
.domain-input {
    background: var(--arp-bg-dark) !important;
    border: 2px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
    font-size: 16px !important;
    padding: 15px 20px !important;
}

.domain-checker-container input:focus,
#domainChecker input:focus {
    border-color: var(--arp-primary) !important;
}

/* TLD pricing */
.tld-pricing,
.spotlight-tlds,
.domain-pricing {
    color: var(--arp-text-muted) !important;
}

/* ==========================================================================
   CAPTCHA STYLING
   ========================================================================== */

.captcha-container,
.g-recaptcha,
[id*="captcha"],
.hcaptcha {
    background: var(--arp-bg-card) !important;
    border-radius: 8px !important;
    padding: 10px !important;
}

/* reCAPTCHA dark theme helper */
.grecaptcha-badge {
    background: var(--arp-bg-card) !important;
}

/* ==========================================================================
   SEARCH BAR IMPROVEMENTS
   ========================================================================== */

.search,
.search-box,
.kb-search,
#frmSearch,
.input-group.search {
    background: transparent !important;
}

.search input,
.search-box input,
.kb-search input {
    background: var(--arp-bg-dark) !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
}

.search .btn,
.search-box .btn,
.input-group.search .btn {
    background: var(--arp-primary) !important;
    border-color: var(--arp-primary) !important;
    color: #fff !important;
}

/* ==========================================================================
   SECONDARY NAV / BREADCRUMB BAR
   ========================================================================== */

.secondary-nav,
.sub-nav,
.breadcrumb-bar,
nav[aria-label="breadcrumb"] {
    background: var(--arp-bg-card-hover) !important;
    border-bottom: 1px solid var(--arp-border) !important;
}

/* ==========================================================================
   SPECIFIC WHMCS PAGES
   ========================================================================== */

/* View cart page */
#viewCartTable,
.view-cart-items {
    background: var(--arp-bg-card) !important;
}

#viewCartTable th {
    background: var(--arp-bg-card-hover) !important;
    color: var(--arp-text) !important;
}

#viewCartTable td {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text-muted) !important;
    border-color: var(--arp-border) !important;
}

/* Checkout page */
.checkout-container,
#checkout {
    background: transparent !important;
}

.payment-methods,
.payment-method {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 8px !important;
}

.payment-method:hover,
.payment-method.selected {
    border-color: var(--arp-primary) !important;
}

/* Invoice view */
.invoice,
.invoice-container,
#invoiceTable {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text) !important;
}

/* Client area home */
.client-home,
#clientAreaHome {
    background: transparent !important;
}

.shortcuts-container .shortcut {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

.shortcuts-container .shortcut:hover {
    border-color: var(--arp-primary) !important;
    transform: translateY(-3px) !important;
}

/* ==========================================================================
   DARK MODE TOGGLE SUPPORT
   ========================================================================== */

/* Theme toggle button styling */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background: var(--arp-primary) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 50px;
    height: 50px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}

.theme-toggle:hover {
    transform: scale(1.1);
}

/* Light mode overrides */
body.light-mode {
    --arp-bg-dark: #f8fafc;
    --arp-bg-card: #ffffff;
    --arp-bg-card-hover: #f1f5f9;
    --arp-border: #e2e8f0;
    --arp-text: #1e293b;
    --arp-text-muted: #64748b;
}

body.light-mode .navbar,
body.light-mode header {
    background: #ffffff !important;
    border-bottom-color: #e2e8f0 !important;
}

body.light-mode .dropdown-menu {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

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

@media (max-width: 768px) {
    .product,
    .product-card {
        margin-bottom: 20px !important;
    }

    .order-summary {
        margin-top: 20px !important;
    }

    .domain-checker-container {
        padding: 15px !important;
    }
}

/* ==========================================================================
   ANIMATIONS & TRANSITIONS
   ========================================================================== */

.product,
.product-card,
.panel,
.card,
.shortcut,
.addon-products {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.product:hover,
.product-card:hover,
.panel:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

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

.text-primary { color: var(--arp-primary-light) !important; }
.text-success { color: var(--arp-success) !important; }
.text-danger { color: var(--arp-danger) !important; }
.text-warning { color: var(--arp-warning) !important; }
.text-info { color: var(--arp-primary) !important; }
.text-dark { color: var(--arp-text) !important; }

.bg-primary { background: var(--arp-primary) !important; }
.bg-dark { background: var(--arp-bg-dark) !important; }

/* Fix any remaining white elements */
.white-bg,
.bg-white,
.white,
[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"] {
    background: var(--arp-bg-card) !important;
}

/* ==========================================================================
   TICKET PAGE FIXES - v4.2
   ========================================================================== */

/* Rich text editor (Markdown) textarea - FIX WHITE BACKGROUND */
.markItUpEditor,
textarea.markItUpEditor,
#inputMessage,
textarea#inputMessage,
.markdown-editor textarea,
textarea.form-control,
.ticket-form textarea,
.submitticket textarea,
#ticketMessage,
.support-form textarea {
    background: var(--arp-bg-dark) !important;
    background-color: var(--arp-bg-dark) !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
}

/* Markdown editor wrapper */
.markItUp,
.markItUp .markItUpContainer,
#inputMessage_parent,
.markdown-wrapper {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 8px !important;
}

/* Markdown toolbar */
.markItUpHeader,
.markItUpHeader ul,
.markItUpHeader ul li {
    background: var(--arp-bg-card-hover) !important;
}

.markItUpHeader ul li a {
    background: transparent !important;
    color: var(--arp-text) !important;
}

.markItUpHeader ul li a:hover {
    background: var(--arp-primary) !important;
}

/* Bootstrap markdown editor shell */
.container-markdown-editor,
.md-editor {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.md-editor > .md-header,
.md-editor .btn-toolbar {
    background: var(--arp-bg-card-hover) !important;
    border-bottom: 1px solid var(--arp-border) !important;
    padding: 0.55rem !important;
}

.md-editor > .md-header .btn,
.md-editor > .md-header button,
.md-editor > .md-header .btn-default,
.md-editor > .md-header .btn-secondary {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
    box-shadow: none !important;
}

.md-editor > .md-header .btn:hover,
.md-editor > .md-header button:hover,
.md-editor > .md-header .btn-default:hover,
.md-editor > .md-header .btn-secondary:hover {
    background: var(--arp-bg-card-hover) !important;
    border-color: var(--arp-primary) !important;
    color: var(--arp-primary-light) !important;
}

.md-editor > .md-header .active,
.md-editor > .md-header .btn-primary,
.md-editor > .md-header .btn-info {
    color: #fff !important;
}

.md-editor .md-preview,
.md-editor .md-preview * {
    background: var(--arp-bg-dark) !important;
    color: var(--arp-text) !important;
}

.md-editor .md-preview {
    border-top: 1px solid var(--arp-border) !important;
    padding: 1rem !important;
}

.markdown-editor-status,
.md-editor > .md-footer {
    background: var(--arp-bg-card-hover) !important;
    border-top: 1px solid var(--arp-border) !important;
    color: var(--arp-text-muted) !important;
    padding: 0.55rem 0.75rem !important;
}

.markdown-editor-status,
.markdown-editor-status .smallfont,
.markdown-editor-status .markdown-save,
.markdown-editor-status span {
    color: var(--arp-text-muted) !important;
}

/* Support ticket submit layout containment */
.submitticket .panel,
.submitticket .card,
.submitticket .well,
.ticket-form .panel,
.ticket-form .card,
.ticket-form .well,
form[action*="submitticket.php"] .panel,
form[action*="submitticket.php"] .card,
form[action*="submitticket.php"] .well {
    overflow: hidden !important;
}

.submitticket .panel-body,
.submitticket .card-body,
.ticket-form,
.ticket-form .panel-body,
form[action*="submitticket.php"],
form[action*="submitticket.php"] .panel-body,
form[action*="submitticket.php"] .card-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.submitticket .markItUp,
.submitticket .markItUp .markItUpContainer,
.submitticket .markItUpEditor,
.submitticket textarea.markItUpEditor,
.submitticket .md-editor,
.submitticket #inputMessage_parent,
.ticket-form .markItUp,
.ticket-form .markItUp .markItUpContainer,
.ticket-form .markItUpEditor,
.ticket-form .md-editor,
form[action*="submitticket.php"] .markItUp,
form[action*="submitticket.php"] .markItUp .markItUpContainer,
form[action*="submitticket.php"] .markItUpEditor,
form[action*="submitticket.php"] textarea.markItUpEditor,
form[action*="submitticket.php"] .md-editor,
form[action*="submitticket.php"] #inputMessage_parent {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.submitticket .markItUpHeader,
.submitticket .markItUpHeader ul,
.ticket-form .markItUpHeader,
.ticket-form .markItUpHeader ul,
form[action*="submitticket.php"] .markItUpHeader,
form[action*="submitticket.php"] .markItUpHeader ul {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.45rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0.65rem !important;
    box-sizing: border-box !important;
}

.submitticket .markItUpHeader ul li,
.ticket-form .markItUpHeader ul li,
form[action*="submitticket.php"] .markItUpHeader ul li {
    float: none !important;
    margin: 0 !important;
}

.submitticket .attachments,
.submitticket .file-attachments,
.submitticket .attachment-upload,
.ticket-form .attachments,
.ticket-form .file-attachments,
.ticket-form .attachment-upload,
form[action*="submitticket.php"] .attachments,
form[action*="submitticket.php"] .file-attachments,
form[action*="submitticket.php"] .attachment-upload {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.submitticket .input-group,
.ticket-form .input-group,
form[action*="submitticket.php"] .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.submitticket .input-group > .form-control,
.submitticket .input-group > .custom-file,
.ticket-form .input-group > .form-control,
.ticket-form .input-group > .custom-file,
form[action*="submitticket.php"] .input-group > .form-control,
form[action*="submitticket.php"] .input-group > .custom-file {
    flex: 1 1 auto !important;
    width: 1% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.submitticket .input-group-btn,
.submitticket .input-group-append,
.ticket-form .input-group-btn,
.ticket-form .input-group-append,
form[action*="submitticket.php"] .input-group-btn,
form[action*="submitticket.php"] .input-group-append {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: stretch !important;
}

.submitticket .btn-file,
.ticket-form .btn-file,
form[action*="submitticket.php"] .btn-file {
    white-space: nowrap !important;
}

.submitticket .custom-file,
.submitticket .custom-file-input,
.submitticket .custom-file-label,
.ticket-form .custom-file,
.ticket-form .custom-file-input,
.ticket-form .custom-file-label,
form[action*="submitticket.php"] .custom-file,
form[action*="submitticket.php"] .custom-file-input,
form[action*="submitticket.php"] .custom-file-label {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.submitticket .custom-file-label,
.ticket-form .custom-file-label,
form[action*="submitticket.php"] .custom-file-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media (max-width: 767px) {
    .submitticket .input-group,
    .ticket-form .input-group,
    form[action*="submitticket.php"] .input-group {
        flex-wrap: wrap !important;
        gap: 0.65rem !important;
    }

    .submitticket .input-group-btn,
    .submitticket .input-group-append,
    .ticket-form .input-group-btn,
    .ticket-form .input-group-append,
    form[action*="submitticket.php"] .input-group-btn,
    form[action*="submitticket.php"] .input-group-append {
        width: 100% !important;
    }
}

/* File upload input - FIX LIGHT BACKGROUND */
input[type="file"],
.custom-file-input,
.custom-file-label,
.file-upload-input,
.btn-file,
.input-group .custom-file,
.form-group input[type="file"] {
    background: var(--arp-bg-card) !important;
    background-color: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
    border-radius: 8px !important;
}

.custom-file-label::after {
    background: var(--arp-bg-card-hover) !important;
    color: var(--arp-text) !important;
    border-left: 1px solid var(--arp-border) !important;
}

/* Attachment section styling */
.attachments,
.file-attachments,
.attachment-upload {
    background: var(--arp-bg-card) !important;
    border: 1px dashed var(--arp-border) !important;
    border-radius: 8px !important;
    padding: 15px !important;
}

/* ==========================================================================
   DOMAIN SELECTION PAGE FIXES - v4.2
   ========================================================================== */

/* Radio button labels - FIX FADED TEXT */
.domain-option label,
.domain-selection label,
.radio-container label,
.sub-heading,
.domain-input-group label,
[class*="domain"] label,
.spotlight-tld-row label,
.transfer-option label {
    color: var(--arp-text) !important;
    opacity: 1 !important;
}

/* Domain selection radio options */
.radio label,
.domain-checker .radio label,
.form-check-label,
input[type="radio"] + label,
input[type="radio"] ~ label,
.custom-radio label {
    color: var(--arp-text) !important;
}

/* Inactive/unchecked radio option text */
.radio:not(.active) label,
.form-check:not(.active) label {
    color: var(--arp-text-muted) !important;
}

/* Selected/active radio option */
.radio.active label,
.form-check.active label,
input[type="radio"]:checked + label,
input[type="radio"]:checked ~ label {
    color: var(--arp-text) !important;
}

/* Domain option cards */
.domain-option,
.domain-selection-option,
.transfer-domain-option,
.use-domain-option {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin-bottom: 10px !important;
}

.domain-option:hover,
.domain-selection-option:hover {
    border-color: var(--arp-primary) !important;
    background: var(--arp-bg-card-hover) !important;
}

.domain-option.selected,
.domain-selection-option.selected {
    border-color: var(--arp-primary) !important;
    background: rgba(8, 145, 178, 0.1) !important;
}

/* Domain input TLD dropdown */
.tld-select,
.domain-tld-select,
select.tld {
    background: var(--arp-bg-dark) !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
}

/* Subheading and helper text on cart pages */
.sub-heading,
.helper-text,
.hint-text,
small.text-muted,
.form-text {
    color: var(--arp-text-muted) !important;
}

/* ==========================================================================
   ADDITIONAL FORM FIXES - v4.2
   ========================================================================== */

/* Ensure all textareas are dark */
textarea {
    background: var(--arp-bg-dark) !important;
    background-color: var(--arp-bg-dark) !important;
    color: var(--arp-text) !important;
    border: 1px solid var(--arp-border) !important;
}

/* Input placeholder text */
input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: var(--arp-text-muted) !important;
    opacity: 0.7 !important;
}

/* Select dropdowns */
select,
select.form-control,
.form-select,
.custom-select,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter select {
    background: var(--arp-bg-dark) !important;
    color: var(--arp-text) !important;
    border: 1px solid var(--arp-border) !important;
    font-size: 0.98rem !important;
    line-height: 1.35 !important;
}

select:not([multiple]):not([size]),
select.form-control:not([multiple]):not([size]),
.form-select:not([multiple]):not([size]),
.custom-select:not([multiple]):not([size]),
.dataTables_wrapper .dataTables_length select {
    min-height: 46px !important;
    height: 46px !important;
    padding: 0.55rem 2.35rem 0.55rem 0.95rem !important;
}

select option,
.custom-select option {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text) !important;
    font-size: 0.98rem !important;
    line-height: 1.4 !important;
}

/* Required field validation tooltip */
.tooltip,
.tooltip-inner {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text) !important;
    border: 1px solid var(--arp-border) !important;
}

/* Validation states */
.has-error .form-control,
.is-invalid {
    border-color: var(--arp-danger) !important;
}

.has-success .form-control,
.is-valid {
    border-color: var(--arp-success) !important;
}

/* ==========================================================================
   KNOWLEDGEBASE ARTICLE BADGES - v4.2
   ========================================================================== */

.kb-article-count,
.article-count,
.badge.badge-info,
.badge-secondary {
    background: var(--arp-primary) !important;
    color: #fff !important;
}

/* ==========================================================================
   HOMEPAGE LAYOUT FIXES - v5.0
   ========================================================================== */

/* Convert card-columns to CSS Grid for consistent heights */
.card-columns.home {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 30px !important;
    padding: 8px !important;
    column-count: unset !important;
    column-gap: unset !important;
    orphans: unset !important;
    widows: unset !important;
}

.card-columns.home .card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin: 0 !important;
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.card-columns.home .card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(8, 145, 178, 0.15) !important;
    border-color: var(--arp-primary) !important;
}

.card-columns.home .card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 22px 18px !important;
}

.card-columns.home .card-title {
    color: var(--arp-text) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
}

.card-columns.home .card-body p {
    color: var(--arp-text-muted) !important;
    margin-bottom: 14px !important;
    flex-grow: 1 !important;
}

.card-columns.home .btn-outline-primary {
    background: transparent !important;
    border: 2px solid var(--arp-primary) !important;
    color: var(--arp-primary-light) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
    margin-top: auto !important;
}

.card-columns.home .btn-outline-primary:hover {
    background: var(--arp-primary) !important;
    color: #fff !important;
}

[data-theme="light"] .card-columns.home .btn-outline-primary,
body.theme-light .card-columns.home .btn-outline-primary {
    color: var(--arp-primary) !important;
}

/* ==========================================================================
   DOMAIN SEARCH BOX - v5.0 (Force Dark)
   ========================================================================== */

.home-domain-search,
.home-domain-search.bg-white,
#frmDomainHomepage .home-domain-search {
    background: var(--arp-bg-card) !important;
    border-bottom: 1px solid var(--arp-border) !important;
}

.home-domain-search .container {
    background: transparent !important;
}

.home-domain-search .p-5,
.home-domain-search > div {
    background: transparent !important;
}

.home-domain-search h2 {
    color: var(--arp-text) !important;
    font-weight: 600 !important;
    margin-bottom: 24px !important;
}

.home-domain-search .input-group-wrapper,
#frmDomainHomepage .input-group-wrapper {
    max-width: 700px !important;
    margin: 0 auto 20px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    outline: 0 !important;
}

.home-domain-search .input-group {
    background: var(--arp-bg-dark) !important;
    border: 2px solid var(--arp-border) !important;
    border-radius: 50px !important;
    overflow: hidden !important;
}

.home-domain-search .input-group:focus-within {
    border-color: var(--arp-primary) !important;
    box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.15) !important;
}

.home-domain-search input.form-control {
    background: transparent !important;
    border: none !important;
    color: var(--arp-text) !important;
    padding: 16px 24px !important;
    font-size: 16px !important;
    box-shadow: none !important;
}

.home-domain-search input.form-control::placeholder {
    color: var(--arp-text-muted) !important;
}

.home-domain-search .input-group-append {
    display: flex !important;
    gap: 8px !important;
    padding-right: 8px !important;
    align-items: center !important;
}

.home-domain-search .input-group-append .btn {
    border-radius: 50px !important;
    min-width: 124px !important;
    min-height: 52px !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
    border: none !important;
    white-space: nowrap !important;
}

[data-theme="light"] #frmDomainHomepage #btnTransfer,
body.theme-light #frmDomainHomepage #btnTransfer,
[data-theme="light"] #frmDomainHomepage #btnTransfer2,
body.theme-light #frmDomainHomepage #btnTransfer2 {
    background: var(--arp-bg-card-hover) !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
    box-shadow: none !important;
}

[data-theme="light"] #frmDomainHomepage #btnTransfer:hover,
body.theme-light #frmDomainHomepage #btnTransfer:hover,
[data-theme="light"] #frmDomainHomepage #btnTransfer2:hover,
body.theme-light #frmDomainHomepage #btnTransfer2:hover,
[data-theme="light"] #frmDomainHomepage #btnTransfer:focus,
body.theme-light #frmDomainHomepage #btnTransfer:focus,
[data-theme="light"] #frmDomainHomepage #btnTransfer2:focus,
body.theme-light #frmDomainHomepage #btnTransfer2:focus {
    background: #dfe7f2 !important;
    border-color: var(--arp-primary) !important;
    color: var(--arp-text) !important;
}

/* TLD logos/pricing */
.tld-logos {
    display: flex !important;
    justify-content: center !important;
    gap: 30px !important;
    list-style: none !important;
    padding: 20px 0 !important;
    margin: 0 !important;
    flex-wrap: wrap !important;
}

.tld-logos li {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.7rem !important;
    min-width: 132px !important;
    padding: 16px 18px 14px !important;
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 16px !important;
    text-align: center !important;
    color: var(--arp-text) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

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

.tld-logos li::before,
.domain-pricing .featured-tld .img-container::before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 88px !important;
    height: 42px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    box-shadow: 0 10px 24px rgba(8, 145, 178, 0.18) !important;
    content: ".COM";
}

.tld-logos li:nth-child(1)::before,
.domain-pricing .featured-tlds-container .row > [class*="col-"]:nth-child(1) .img-container::before {
    content: ".COM";
    background: linear-gradient(135deg, #0891b2, #22d3ee) !important;
}

.tld-logos li:nth-child(2)::before,
.domain-pricing .featured-tlds-container .row > [class*="col-"]:nth-child(2) .img-container::before {
    content: ".NET";
    background: linear-gradient(135deg, #334155, #0f172a) !important;
}

.tld-logos li:nth-child(3)::before,
.domain-pricing .featured-tlds-container .row > [class*="col-"]:nth-child(3) .img-container::before {
    content: ".TV";
    background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
}

.domain-pricing .featured-tld {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 16px !important;
    padding: 16px 14px !important;
    text-align: center !important;
    height: 100% !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

.domain-pricing .featured-tld .img-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    margin-bottom: 0.8rem !important;
}

.domain-pricing .featured-tld .img-container img {
    display: none !important;
}

.domain-pricing .featured-tld .price {
    color: var(--arp-text) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

[data-theme="light"] .tld-logos li,
body.theme-light .tld-logos li,
[data-theme="light"] .domain-pricing .featured-tld,
body.theme-light .domain-pricing .featured-tld {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

.home-domain-search .btn-link {
    color: var(--arp-primary-light) !important;
}

/* ==========================================================================
   ACTION ICON BUTTONS - v5.0
   ========================================================================== */

.action-icon-btns {
    margin: 40px 0 !important;
}

.action-icon-btns > div {
    padding: 8px !important;
}

.action-icon-btns a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 30px 20px !important;
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
    color: var(--arp-text) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    height: 100% !important;
    min-height: 140px !important;
}

.action-icon-btns a:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
    border-color: var(--arp-primary) !important;
    color: var(--arp-primary-light) !important;
}

.action-icon-btns .ico-container {
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--arp-bg-card-hover) !important;
    border-radius: 12px !important;
    margin-bottom: 15px !important;
    transition: all 0.2s ease !important;
}

.action-icon-btns a:hover .ico-container {
    background: var(--arp-primary) !important;
}

.action-icon-btns .ico-container i {
    font-size: 24px !important;
    color: var(--arp-primary-light) !important;
    transition: color 0.2s ease !important;
}

.action-icon-btns a:hover .ico-container i {
    color: #fff !important;
}

/* Color accents for action buttons */
.action-icon-btns a.card-accent-teal .ico-container { background: rgba(8, 145, 178, 0.15) !important; }
.action-icon-btns a.card-accent-teal .ico-container i { color: #22d3ee !important; }
.action-icon-btns a.card-accent-teal:hover .ico-container { background: #0891b2 !important; }

.action-icon-btns a.card-accent-pomegranate .ico-container { background: rgba(239, 68, 68, 0.15) !important; }
.action-icon-btns a.card-accent-pomegranate .ico-container i { color: #f87171 !important; }
.action-icon-btns a.card-accent-pomegranate:hover .ico-container { background: #ef4444 !important; }

.action-icon-btns a.card-accent-sun-flower .ico-container { background: rgba(245, 158, 11, 0.15) !important; }
.action-icon-btns a.card-accent-sun-flower .ico-container i { color: #fbbf24 !important; }
.action-icon-btns a.card-accent-sun-flower:hover .ico-container { background: #f59e0b !important; }

.action-icon-btns a.card-accent-asbestos .ico-container { background: rgba(148, 163, 184, 0.15) !important; }
.action-icon-btns a.card-accent-asbestos .ico-container i { color: #94a3b8 !important; }
.action-icon-btns a.card-accent-asbestos:hover .ico-container { background: #64748b !important; }

.action-icon-btns a.card-accent-green .ico-container { background: rgba(16, 185, 129, 0.15) !important; }
.action-icon-btns a.card-accent-green .ico-container i { color: #34d399 !important; }
.action-icon-btns a.card-accent-green:hover .ico-container { background: #10b981 !important; }

.action-icon-btns a.card-accent-midnight-blue .ico-container { background: rgba(8, 145, 178, 0.15) !important; }
.action-icon-btns a.card-accent-midnight-blue .ico-container i { color: #22d3ee !important; }
.action-icon-btns a.card-accent-midnight-blue:hover .ico-container { background: #0891b2 !important; }

/* ==========================================================================
   HEADER/NAVBAR IMPROVEMENTS - v5.0
   ========================================================================== */

#header,
.header {
    background: rgba(30, 41, 59, 0.95) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--arp-border) !important;
}

/* Top bar styling */
.topbar {
    background: var(--arp-bg-dark) !important;
    border-bottom: 1px solid var(--arp-border) !important;
    padding: 8px 0 !important;
}

.topbar .btn {
    color: var(--arp-text-muted) !important;
    font-size: 14px !important;
}

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

.btn-active-client {
    background: var(--arp-bg-card-hover) !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
    border-radius: 8px !important;
}

/* Logo area */
.navbar .container {
    padding: 12px 15px !important;
}

/* Search box in header */
.input-group.search {
    background: var(--arp-bg-dark) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 50px !important;
    overflow: hidden !important;
}

.input-group.search .btn {
    background: transparent !important;
    border: none !important;
    color: var(--arp-text-muted) !important;
}

.input-group.search .form-control {
    background: transparent !important;
    border: none !important;
    color: var(--arp-text) !important;
    box-shadow: none !important;
}

/* Cart button */
.cart-btn .badge {
    background: var(--arp-primary) !important;
}

/* Main navigation wrapper */
.main-navbar-wrapper {
    background: var(--arp-bg-card) !important;
    border-top: 1px solid var(--arp-border) !important;
}

/* Navigation links */
#nav.navbar-nav > li > a {
    color: var(--arp-text) !important;
    font-weight: 500 !important;
    padding: 14px 16px !important;
    transition: color 0.15s ease !important;
}

#nav.navbar-nav > li > a:hover {
    color: var(--arp-primary-light) !important;
    background: transparent !important;
}

/* Breadcrumb bar */
.master-breadcrumb {
    background: var(--arp-bg-card-hover) !important;
    border-bottom: 1px solid var(--arp-border) !important;
    padding: 12px 0 !important;
}

.breadcrumb {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

.breadcrumb-item,
.breadcrumb > li {
    color: var(--arp-text-muted) !important;
    font-size: 14px !important;
}

.breadcrumb-item.active {
    color: var(--arp-text) !important;
}

/* ==========================================================================
   MAIN CONTENT AREA - v5.0
   ========================================================================== */

#main-body {
    background: var(--arp-bg-dark) !important;
    padding: 40px 0 !important;
    min-height: calc(100vh - 300px) !important;
}

/* Section headings on homepage */
#main-body h2.text-center {
    color: var(--arp-text) !important;
    font-weight: 600 !important;
    font-size: 28px !important;
    margin: 40px 0 30px !important;
}

/* ==========================================================================
   FOOTER IMPROVEMENTS - v5.0
   ========================================================================== */

#footer,
footer,
.footer {
    background: var(--arp-bg-card) !important;
    border-top: 1px solid var(--arp-border) !important;
    padding: 40px 0 !important;
}

.footer .nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    justify-content: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px !important;
}

.footer .nav li {
    list-style: none !important;
}

.footer .nav-link,
.footer a {
    color: var(--arp-text-muted) !important;
    font-size: 14px !important;
    transition: color 0.15s ease !important;
}

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

/* Social icons */
.footer .social-icons,
.footer [class*="social"] {
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
    margin: 20px 0 !important;
}

.footer .social-icons a {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--arp-bg-card-hover) !important;
    border-radius: 50% !important;
    color: var(--arp-text-muted) !important;
    transition: all 0.2s ease !important;
}

.footer .social-icons a:hover {
    background: var(--arp-primary) !important;
    color: #fff !important;
}

.footer .copyright {
    color: var(--arp-text-muted) !important;
    font-size: 14px !important;
    text-align: center !important;
}

/* ==========================================================================
   MODAL IMPROVEMENTS - v5.0
   ========================================================================== */

.modal-content {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}

.modal-header {
    background: var(--arp-bg-card-hover) !important;
    border-bottom: 1px solid var(--arp-border) !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 16px 24px !important;
}

.modal-title {
    color: var(--arp-text) !important;
    font-weight: 600 !important;
}

.modal-header .close,
.modal-header .btn-close {
    color: var(--arp-text-muted) !important;
    opacity: 1 !important;
}

.modal-body {
    padding: 24px !important;
    color: var(--arp-text) !important;
}

.modal-footer {
    background: var(--arp-bg-card-hover) !important;
    border-top: 1px solid var(--arp-border) !important;
    border-radius: 0 0 16px 16px !important;
    padding: 16px 24px !important;
}

/* Language/Currency selector modal */
.modal-localisation .modal-content {
    background: var(--arp-bg-card) !important;
}

.modal-localisation .item-selector .item {
    display: block !important;
    padding: 12px 16px !important;
    color: var(--arp-text) !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    transition: all 0.15s ease !important;
}

.modal-localisation .item-selector .item:hover {
    background: var(--arp-bg-card-hover) !important;
}

.modal-localisation .item-selector .item.active {
    background: var(--arp-primary) !important;
    color: #fff !important;
}

/* ==========================================================================
   RESPONSIVE FIXES - v5.0
   ========================================================================== */

@media (max-width: 1199px) {
    #mainNavbar {
        background: var(--arp-bg-card) !important;
        border-top: 1px solid var(--arp-border) !important;
        padding: 16px !important;
    }

    #nav.navbar-nav > li {
        display: block !important;
        width: 100% !important;
    }

    #nav.navbar-nav > li > a {
        padding: 12px 0 !important;
        border-bottom: 1px solid var(--arp-border) !important;
    }

    .dropdown-menu {
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        padding-left: 16px !important;
        background: transparent !important;
    }
}

@media (max-width: 767px) {
    #main-body {
        padding: 24px 0 !important;
    }

    .card-columns.home {
        grid-template-columns: 1fr !important;
    }

    .action-icon-btns a {
        padding: 20px 15px !important;
        min-height: 120px !important;
    }

    .action-icon-btns .ico-container {
        width: 50px !important;
        height: 50px !important;
    }

    .action-icon-btns .ico-container i {
        font-size: 20px !important;
    }

    .home-domain-search .p-5 {
        padding: 20px !important;
    }

    .home-domain-search input.form-control {
        padding: 12px 16px !important;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }

    .header,
    .footer,
    .sidebar,
    .breadcrumb,
    .action-icon-btns {
        display: none !important;
    }

    .card,
    .panel {
        background: #fff !important;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }
}

/* ==========================================================================
   PRODUCT PRICING TABLE FIXES - v5.0.1
   Fix Order Now button position (should be below features, not beside)
   ========================================================================== */

/* Product pricing table - force vertical layout */
.products .product,
.product-group .product,
.pricing-table .product,
[class*="product"] table,
.product table {
    display: block !important;
    width: 100% !important;
}

/* Product table rows - stack vertically */
.products .product tr,
.product-group .product tr,
.pricing-table tr,
.product table tr {
    display: block !important;
    width: 100% !important;
}

/* Product table cells - full width stacking */
.products .product td,
.products .product th,
.product-group .product td,
.product-group .product th,
.pricing-table td,
.pricing-table th,
.product table td,
.product table th {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    border: none !important;
    padding: 8px 15px !important;
}

/* Product header row (title/price) */
.products .product .product-header,
.products .product tr:first-child,
.product-group .product tr:first-child {
    background: linear-gradient(135deg, var(--arp-primary), var(--arp-primary-dark)) !important;
    padding: 20px !important;
    border-radius: 12px 12px 0 0 !important;
}

.products .product .product-header td,
.products .product .product-header th,
.products .product tr:first-child td,
.products .product tr:first-child th {
    color: #fff !important;
    font-weight: 600 !important;
}

/* Product features area */
.products .product .product-features,
.products .product tbody {
    background: var(--arp-bg-card) !important;
    padding: 15px !important;
}

/* Feature list items */
.products .product li,
.product-features li,
.features li {
    color: var(--arp-text-muted) !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--arp-border) !important;
    text-align: left !important;
}

.products .product li:last-child,
.product-features li:last-child {
    border-bottom: none !important;
}

/* Order Now button - force below features */
.products .product .btn-order-now,
.products .product .order-btn,
.products .product a.btn,
.product-group .product a.btn {
    display: block !important;
    width: calc(100% - 30px) !important;
    margin: 15px auto !important;
    padding: 12px 20px !important;
    text-align: center !important;
}

/* ==========================================================================
   CART/DOMAIN FORMS - DARK THEME FIX - v5.0.1
   Fix white backgrounds on forms
   ========================================================================== */

/* Domain selection form container */
.domain-checker-bg,
.domainchecker-bg,
.bg-white,
.bg-light,
[class*="bg-white"],
[class*="bg-light"] {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text) !important;
}

/* Domain option rows */
.domain-option,
.domain-selection-row,
.domainchecker-row,
.transfer-option,
.register-option,
.existing-domain-option,
.domain-lookup-result,
#domainresults .result,
.domain-result {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    padding: 15px 20px !important;
    color: var(--arp-text) !important;
}

.domain-option:hover,
.domain-selection-row:hover {
    background: var(--arp-bg-card-hover) !important;
    border-color: var(--arp-primary) !important;
}

/* Radio button rows in domain selection */
.domain-option label,
.domain-selection-row label,
.radio-option,
.form-check,
.custom-control {
    color: var(--arp-text) !important;
}

/* Domain input group with www prefix */
.input-group-prepend .input-group-text,
.input-group-append .input-group-text,
.input-group-addon,
.input-group > span {
    background: var(--arp-bg-card-hover) !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
}

/* The main domain input field */
.domain-input,
.domainchecker input,
#inputDomain,
input[name="domain"],
input[name="sld"],
.sld-input {
    background: var(--arp-bg-dark) !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
}

/* TLD dropdown */
.tld-select,
select[name="tld"],
.domain-tld-select,
#inputTld {
    background: var(--arp-bg-dark) !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
}

/* Cart domain configuration area */
.domain-config,
.configure-domain,
#configureDomain,
.cart-domain-config {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
    padding: 20px !important;
}

/* Tab content areas (often white) */
.tab-content,
.tab-pane,
.nav-tabs + .tab-content {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-top: none !important;
    color: var(--arp-text) !important;
}

/* Store domain tab content specifically */
.store-domain-tab-content,
.store-domain-tab-content.bg-white {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text) !important;
    border-radius: 0 0 12px 12px !important;
}

/* Subdomain helper text */
.domain-option small,
.domain-option .text-muted,
.help-text,
.form-text {
    color: var(--arp-text-muted) !important;
}

/* ==========================================================================
   ADDITIONAL WHITE BACKGROUND OVERRIDES - v5.0.1
   ========================================================================== */

/* Any remaining white backgrounds */
div[style*="background: white"],
div[style*="background:#fff"],
div[style*="background: #fff"],
div[style*="background-color: white"],
div[style*="background-color:#fff"],
div[style*="background-color: #fff"],
.white-bg,
.light-bg {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text) !important;
}

/* Ensure all text in cards is readable */
.card,
.card *,
.panel,
.panel *,
.well,
.well * {
    color: inherit;
}

.card p,
.card span,
.card div,
.card label,
.panel p,
.panel span,
.panel div,
.panel label {
    color: var(--arp-text-muted);
}

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6,
.card .card-title,
.panel .panel-title {
    color: var(--arp-text) !important;
}

/* Shopping cart forms */
#frmConfigureProduct,
#frmDomainChecker,
#frmDomainConfigure,
.cart-form,
.order-form {
    background: transparent !important;
}

#frmConfigureProduct .bg-white,
#frmDomainChecker .bg-white,
.cart-form .bg-white {
    background: var(--arp-bg-card) !important;
}

/* Product table in cart */
#cartConfigureProduct,
.configure-product-container,
.product-configuration {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
}

/* Responsive tabs connector (often has white bg) */
.responsive-tabs-sm-connector,
.responsive-tabs-sm-connector.store {
    background: var(--arp-bg-card) !important;
}

.responsive-tabs-sm-connector .channel,
.responsive-tabs-sm-connector .bottom-border {
    background: var(--arp-bg-card) !important;
    border-color: var(--arp-border) !important;
}

/* ==========================================================================
   TWENTY-ONE SPECIFIC PRODUCT/PRICING OVERRIDES - v5.0.1
   ========================================================================== */

/* Main products container */
#products,
.products-container,
.store-products {
    background: transparent !important;
    padding-top: 10px !important;
}

/* Individual product cards in Twenty-One */
#products .product,
.products-list .product,
.store-products .product {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Product price header */
#products .product .product-title,
#products .product .price-header,
#products .product > div:first-child {
    background: linear-gradient(135deg, var(--arp-primary), var(--arp-primary-dark)) !important;
    color: #fff !important;
    padding: 20px !important;
    text-align: center !important;
}

/* Product price display */
#products .product .price,
.product-price,
.pricing-amt {
    color: var(--arp-primary-light) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
}

#products .product .price .period,
.price-period,
.billing-cycle {
    font-size: 14px !important;
    color: var(--arp-text-muted) !important;
    font-weight: 400 !important;
}

/* Product features list */
#products .product .features,
#products .product ul,
.product-features-list {
    flex-grow: 1 !important;
    padding: 20px !important;
    margin: 0 !important;
    list-style: none !important;
}

#products .product .features li,
#products .product ul li {
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--arp-border) !important;
    color: var(--arp-text-muted) !important;
    text-align: left !important;
}

#products .product .features li:last-child,
#products .product ul li:last-child {
    border-bottom: none !important;
}

/* Product order button container */
#products .product .order-button,
#products .product .product-footer,
#products .product > div:last-child {
    padding: 20px !important;
    text-align: center !important;
    background: var(--arp-bg-card-hover) !important;
    margin-top: auto !important;
}

#products .product .btn {
    width: 100% !important;
    padding: 12px 20px !important;
}

/* ==========================================================================
   CONFIGURE/CART PAGE FIXES - v5.0.2
   Fix white background boxes on product configure page
   ========================================================================== */

/* Main product info card on configure page */
.product-info-container,
.product-details-container,
.product-config-info,
.order-product,
.card.product-info,
.panel.product-info,
.product-summary,
#productInfo,
.main-content .card,
.primary-content > .card,
.primary-content > .panel,
.store-order-container .card,
.configure-product .card {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
}

/* Product info card body */
.product-info-container .card-body,
.product-details-container .card-body,
#productInfo .card-body,
.order-product .card-body {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text) !important;
}

/* Feature list checkmarks */
.product-info-container li,
.product-details li,
.feature-list li,
#productInfo li {
    color: var(--arp-text-muted) !important;
}

/* ==========================================================================
   ADDON CARDS FIX - v5.0.2
   ========================================================================== */

/* Addon container cards */
.addon-container,
.available-addon,
.addon-card,
.addon-product,
.product-addon,
.panel-addon,
.card-addon,
[class*="addon"] > .card,
[class*="addon"] > .panel,
.store-order-container .card,
.configurable-addons .card,
.addons-container .card,
#addons .card,
#productAddons .card,
.product-addons .card,
.addon-products .card,
.available-addons .card {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
    color: var(--arp-text) !important;
    overflow: hidden !important;
}

/* Addon card headers */
.addon-container .card-header,
.addon-product .card-header,
.available-addon .card-header,
#addons .card-header,
.product-addons .card-header {
    background: var(--arp-bg-card-hover) !important;
    border-bottom: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
}

/* Addon card body */
.addon-container .card-body,
.addon-product .card-body,
.available-addon .card-body,
#addons .card-body,
.product-addons .card-body {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text) !important;
    padding: 20px !important;
}

/* Addon titles */
.addon-container h3,
.addon-container h4,
.addon-container h5,
.addon-product h3,
.addon-product h4,
.available-addon h3,
.available-addon h4,
#addons h3,
#addons h4 {
    color: var(--arp-text) !important;
    font-weight: 600 !important;
}

/* Addon description text */
.addon-container p,
.addon-container .description,
.addon-product p,
.available-addon p,
#addons p {
    color: var(--arp-text-muted) !important;
}

/* ==========================================================================
   RADIO OPTIONS IN ADDONS - v5.0.2
   ========================================================================== */

/* Radio option rows */
.addon-options,
.addon-option,
.addon-radio-option,
.radio-option-row,
.addon-container .radio,
.addon-container .form-check,
.addon-product .radio,
.available-addon .radio,
#addons .radio,
.product-addons .radio,
.addon-products .radio {
    background: var(--arp-bg-card) !important;
    border-bottom: 1px solid var(--arp-border) !important;
    padding: 12px 15px !important;
    margin: 0 !important;
    transition: background 0.15s ease !important;
}

.addon-container .radio:last-child,
.addon-container .form-check:last-child,
.addon-product .radio:last-child,
#addons .radio:last-child {
    border-bottom: none !important;
}

.addon-container .radio:hover,
.addon-container .form-check:hover,
.addon-product .radio:hover,
#addons .radio:hover {
    background: var(--arp-bg-card-hover) !important;
}

/* Radio labels */
.addon-container .radio label,
.addon-container .form-check-label,
.addon-product .radio label,
#addons .radio label,
.product-addons .radio label {
    color: var(--arp-text) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    cursor: pointer !important;
}

/* Addon pricing on right side */
.addon-container .radio .price,
.addon-container .radio span:last-child,
.addon-product .radio .price,
#addons .radio .price {
    color: var(--arp-primary-light) !important;
    font-weight: 500 !important;
}

/* Selected radio option */
.addon-container .radio.selected,
.addon-container .form-check.selected,
.addon-product .radio.selected,
#addons .radio input:checked + label,
.addon-container input[type="radio"]:checked + label {
    background: rgba(8, 145, 178, 0.1) !important;
}

/* ==========================================================================
   BILLING CYCLE DROPDOWN - v5.0.2
   ========================================================================== */

.billing-cycle-select,
.billing-cycle-dropdown,
select[name="billingcycle"],
#inputBillingCycle,
.payment-term select {
    background: var(--arp-bg-dark) !important;
    border: 2px solid var(--arp-border) !important;
    border-radius: 8px !important;
    color: var(--arp-text) !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
}

.billing-cycle-select:focus,
select[name="billingcycle"]:focus {
    border-color: var(--arp-primary) !important;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.2) !important;
}

/* Payment term section */
.payment-term {
    background: var(--arp-bg-card) !important;
    padding: 15px !important;
    border-radius: 8px !important;
    border: 1px solid var(--arp-border) !important;
}

.payment-term h4 {
    color: var(--arp-text) !important;
    margin-bottom: 12px !important;
}

/* ==========================================================================
   ORDER SUMMARY BOX - v5.0.2
   ========================================================================== */

.order-summary,
#orderSummary,
.cart-sidebar .card,
.order-summary-container,
.summary-box {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.order-summary .header,
.order-summary .card-header,
#orderSummary .header,
.summary-header {
    background: var(--arp-primary) !important;
    color: #fff !important;
    padding: 16px 20px !important;
    font-weight: 600 !important;
}

.order-summary .card-body,
#orderSummary .body,
.summary-body {
    background: var(--arp-bg-card) !important;
    padding: 20px !important;
    color: var(--arp-text) !important;
}

.order-summary .total,
#orderSummary .total,
.summary-total {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--arp-text) !important;
}

.order-summary .total-label,
.summary-total-label {
    color: var(--arp-text-muted) !important;
    font-size: 14px !important;
}

/* Line items in order summary */
.order-summary .line-item,
.order-summary .summary-row,
#orderSummary .line-item {
    display: flex !important;
    justify-content: space-between !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--arp-border) !important;
    color: var(--arp-text-muted) !important;
}

.order-summary .line-item:last-child {
    border-bottom: none !important;
}

.order-summary .line-item .price,
#orderSummary .line-item .price {
    color: var(--arp-text) !important;
}

/* ==========================================================================
   AVAILABLE ADDONS DIVIDER - v5.0.2
   ========================================================================== */

.available-addons-divider,
.addons-heading,
.section-divider,
hr + h4,
.addon-section-title {
    color: var(--arp-text) !important;
    text-align: center !important;
    margin: 30px 0 20px !important;
}

/* Horizontal rule styling */
hr {
    border-color: var(--arp-border) !important;
    margin: 30px 0 !important;
}

/* ==========================================================================
   LEARN MORE LINKS - v5.0.2
   ========================================================================== */

.addon-container a,
.addon-product a,
#addons a,
.learn-more {
    color: var(--arp-primary-light) !important;
}

.addon-container a:hover,
.addon-product a:hover,
#addons a:hover {
    color: var(--arp-primary) !important;
}

/* ==========================================================================
   ADDON LOGOS/IMAGES - v5.0.2
   ========================================================================== */

.addon-container img,
.addon-product img,
.addon-logo,
#addons img {
    max-height: 50px !important;
    opacity: 0.9 !important;
}

/* ==========================================================================
   CONFIGURABLE OPTIONS / IP ADDRESS ADDON FIX - v5.0.3
   ========================================================================== */

/* Configurable options container */
.configurable-options,
.config-options,
.product-options,
#productConfigurableOptions,
.configoptions,
.panel-configoptions,
.card-configoptions {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
    color: var(--arp-text) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.configurable-options .card-body,
.config-options .card-body,
#productConfigurableOptions .card-body {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text) !important;
}

/* Checkbox options */
.configurable-options .checkbox,
.configurable-options .form-check,
.config-options .checkbox,
#productConfigurableOptions .checkbox {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text) !important;
    padding: 12px 15px !important;
    border-bottom: 1px solid var(--arp-border) !important;
}

.configurable-options .checkbox:last-child,
.configurable-options .form-check:last-child {
    border-bottom: none !important;
}

.configurable-options .checkbox label,
.configurable-options .form-check-label,
#productConfigurableOptions label {
    color: var(--arp-text) !important;
}

/* Quantity input for configurable options */
.configurable-options input[type="number"],
.configurable-options input[type="text"],
.config-options input,
#productConfigurableOptions input {
    background: var(--arp-bg-dark) !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
}

/* Add to Cart button in configurable options */
.configurable-options .btn,
.config-options .btn,
#productConfigurableOptions .btn {
    margin-top: 15px !important;
}

/* ==========================================================================
   PROMO CODE / COUPON FORM FIX - v5.0.3
   ========================================================================== */

/* Promo code container */
.promo-code,
.promo-code-container,
.coupon-code,
.promocode-container,
#promoCode,
.apply-promo,
[class*="promo"],
[class*="coupon"] {
    background: transparent !important;
}

/* Promo code input field */
.promo-code input,
.promo-code-container input,
.coupon-code input,
#promoCode input,
#inputPromoCode,
input[name="promocode"],
input[name="couponcode"],
input[placeholder*="promo"],
input[placeholder*="coupon"] {
    background: var(--arp-bg-dark) !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
}

.promo-code input:focus,
#inputPromoCode:focus,
input[name="promocode"]:focus {
    border-color: var(--arp-primary) !important;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.2) !important;
}

.promo-code input::placeholder,
#inputPromoCode::placeholder,
input[name="promocode"]::placeholder {
    color: var(--arp-text-muted) !important;
}

/* Validate Code button */
.promo-code .btn,
.promo-code-container .btn,
#promoCode .btn,
.btn-validate-code,
button[name="validatepromo"],
.promocode-btn {
    background: var(--arp-bg-card-hover) !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
}

.promo-code .btn:hover,
#promoCode .btn:hover,
.btn-validate-code:hover {
    background: var(--arp-primary) !important;
    border-color: var(--arp-primary) !important;
    color: #fff !important;
}

/* Apply Promo Code link/tab */
.apply-promo-code,
.promo-code-toggle,
#applyPromoCode,
a[href*="promo"],
.nav-link[data-target*="promo"] {
    color: var(--arp-primary-light) !important;
}

/* ==========================================================================
   CART TABLE FIX - v5.0.3
   ========================================================================== */

/* View cart table */
#viewCartTable,
.view-cart-table,
.cart-table,
.cart-items-table {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

#viewCartTable thead,
.cart-table thead {
    background: var(--arp-primary) !important;
}

#viewCartTable thead th,
.cart-table thead th {
    background: var(--arp-primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 14px 16px !important;
    border: none !important;
}

#viewCartTable tbody tr,
.cart-table tbody tr {
    background: var(--arp-bg-card) !important;
    border-bottom: 1px solid var(--arp-border) !important;
}

#viewCartTable tbody td,
.cart-table tbody td {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text) !important;
    padding: 16px !important;
    border: none !important;
    border-bottom: 1px solid var(--arp-border) !important;
}

#viewCartTable tbody tr:last-child td {
    border-bottom: none !important;
}

/* Cart item details */
#viewCartTable .item-title,
.cart-table .product-name {
    color: var(--arp-text) !important;
    font-weight: 500 !important;
}

#viewCartTable .item-domain,
#viewCartTable .item-details,
.cart-table .product-details {
    color: var(--arp-text-muted) !important;
    font-size: 13px !important;
}

/* Edit link in cart */
#viewCartTable a,
.cart-table a.edit-link {
    color: var(--arp-primary-light) !important;
}

/* Remove button (x) */
#viewCartTable .remove-item,
.cart-table .btn-remove,
.cart-item-remove {
    color: var(--arp-text-muted) !important;
}

#viewCartTable .remove-item:hover,
.cart-table .btn-remove:hover {
    color: var(--arp-danger) !important;
}

/* Empty Cart button */
.btn-empty-cart,
#btnEmptyCart {
    background: transparent !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text-muted) !important;
}

.btn-empty-cart:hover,
#btnEmptyCart:hover {
    background: var(--arp-danger) !important;
    border-color: var(--arp-danger) !important;
    color: #fff !important;
}

/* ==========================================================================
   RECOMMENDED/UPSELL PRODUCTS FIX - v5.0.3
   ========================================================================== */

/* Recommended products container */
.recommended-products,
.recommended-for-you,
.upsell-products,
#recommendedProducts,
.cross-sell {
    background: transparent !important;
}

/* Individual recommendation cards */
.recommended-products .product,
.recommended-for-you .card,
.upsell-product,
#recommendedProducts .product,
.promotion-item {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
    color: var(--arp-text) !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
}

.recommended-products .product:hover,
.upsell-product:hover,
.promotion-item:hover {
    border-color: var(--arp-primary) !important;
}

/* Recommendation card content */
.recommended-products .product h4,
.recommended-products .product h5,
.upsell-product h4,
.promotion-item h4 {
    color: var(--arp-text) !important;
}

.recommended-products .product p,
.upsell-product p,
.promotion-item p {
    color: var(--arp-text-muted) !important;
}

/* Recommendation price */
.recommended-products .price,
.upsell-product .price,
.promotion-item .price {
    color: var(--arp-primary-light) !important;
    font-weight: 600 !important;
}

/* Expand arrow/chevron */
.recommended-products .expand,
.upsell-product .expand,
.promotion-item .chevron {
    color: var(--arp-text-muted) !important;
}

/* Feature list in expanded state */
.recommended-products .features,
.upsell-product .features,
.promotion-item .features {
    background: var(--arp-bg-card-hover) !important;
    border-top: 1px solid var(--arp-border) !important;
    padding: 15px !important;
}

.recommended-products .features li,
.upsell-product .features li {
    color: var(--arp-text-muted) !important;
}

/* ==========================================================================
   HELP/INFO ALERT BOX - v5.0.3
   ========================================================================== */

/* Help box with question mark icon */
.help-box,
.info-box,
.assistance-box,
.contact-sales,
.alert-info.help,
.alert-warning.help {
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid var(--arp-warning) !important;
    border-left: 4px solid var(--arp-warning) !important;
    border-radius: 8px !important;
    color: var(--arp-text) !important;
    padding: 15px 20px !important;
}

.help-box a,
.info-box a,
.contact-sales a {
    color: var(--arp-primary-light) !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   GLOBAL WHITE BACKGROUND NUCLEAR OPTION - v5.0.3
   Catch any remaining white backgrounds
   ========================================================================== */

/* Target any element with inline white background */
[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#ffffff"],
[style*="background: #ffffff"],
[style*="background: rgb(255, 255, 255)"],
[style*="background-color: white"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background-color: rgb(255, 255, 255)"] {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text) !important;
}

/* Target Bootstrap's bg-white class aggressively */
.bg-white,
.bg-light,
.bg-white *,
.bg-light * {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text) !important;
}

/* Ensure form elements inside white containers are dark */
.bg-white input,
.bg-white select,
.bg-white textarea,
.bg-light input,
.bg-light select,
.bg-light textarea {
    background: var(--arp-bg-dark) !important;
    color: var(--arp-text) !important;
    border-color: var(--arp-border) !important;
}

/* Ensure text is readable */
.bg-white p,
.bg-white span,
.bg-white label,
.bg-white div,
.bg-light p,
.bg-light span,
.bg-light label,
.bg-light div {
    color: var(--arp-text) !important;
}

.bg-white a,
.bg-light a {
    color: var(--arp-primary-light) !important;
}

/* ==========================================================================
   CHECKOUT / PAYMENT FORM FIX - v5.0.4
   Fix white background on credit card form
   ========================================================================== */

/* Payment details section */
.payment-details,
.payment-section,
#paymentDetails,
.checkout-payment,
.payment-container {
    background: transparent !important;
}

/* Payment method selection */
.payment-methods,
.payment-method-options,
.gateway-options {
    background: transparent !important;
}

.payment-method,
.gateway-option,
.payment-option {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
}

/* Credit Card Form Container - THE MAIN FIX */
.cc-form,
.credit-card-form,
.card-form,
.payment-form,
#creditCardForm,
#cardForm,
.gateway-form,
.checkout-form .card,
.checkout-form .panel,
#paymentGatewayContainer,
.payment-gateway-container,
.new-card-form,
#newCardInfo,
.enter-card-info,
[class*="card-input"],
[class*="cc-input"],
.stripe-form,
.braintree-form,
#frmCheckout .card,
#frmCheckout .panel,
#frmCheckout > .card,
.checkout-payment .card,
.payment-details .card,
.tab-pane .card,
.panel-body > .card,
.form-group.card,
div.card:not(.product):not(.sidebar *),
.primary-content > div > .card,
.primary-content .card,
form .card {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
    color: var(--arp-text) !important;
}

/* Card form body */
.cc-form .card-body,
.credit-card-form .card-body,
#creditCardForm .card-body,
.checkout-form .card .card-body,
.payment-details .card .card-body,
form .card .card-body {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text) !important;
}

/* "Enter New Card Information Below" text */
.cc-form h4,
.cc-form h5,
.cc-form label,
.credit-card-form h4,
.credit-card-form label,
#creditCardForm label,
.new-card-form label,
.enter-card-info,
.card-info-header,
.payment-details label,
form .card label {
    color: var(--arp-text) !important;
}

/* Card number, expiry, CVV inputs */
.cc-form input,
.credit-card-form input,
#creditCardForm input,
#cardNumber,
#cardExpiry,
#cardCvc,
input[name="cardnumber"],
input[name="expiry"],
input[name="cvc"],
input[name="ccnumber"],
input[name="ccexpiry"],
input[name="cccvv"],
input[placeholder*="1234"],
input[placeholder*="MM"],
input[placeholder*="CVC"],
input[placeholder*="CVV"],
.card-number-input,
.card-expiry-input,
.card-cvv-input {
    background: var(--arp-bg-dark) !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
    border-radius: 8px !important;
}

.cc-form input:focus,
.credit-card-form input:focus,
#creditCardForm input:focus {
    border-color: var(--arp-primary) !important;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.2) !important;
}

.cc-form input::placeholder,
.credit-card-form input::placeholder {
    color: var(--arp-text-muted) !important;
}

/* Card name input */
input[name="cardname"],
input[name="ccname"],
input[placeholder*="name for this card"],
.card-name-input {
    background: var(--arp-bg-dark) !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
}

/* Stripe Elements iframe container */
.stripe-element,
.stripe-input,
.StripeElement,
#card-element,
.card-element {
    background: var(--arp-bg-dark) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 8px !important;
    padding: 12px !important;
}

/* Payment total display */
.total-due,
.total-due-today,
.payment-total {
    background: var(--arp-primary) !important;
    color: #fff !important;
    padding: 15px 20px !important;
    border-radius: 8px !important;
}

/* Pay with Link button (Stripe) */
.pay-with-link,
.stripe-link-btn,
#linkButton {
    /* Keep as styled by Stripe */
}

/* Additional Notes textarea */
#inputNotes,
textarea[name="notes"],
textarea[name="customernotes"],
.additional-notes textarea,
.order-notes textarea {
    background: var(--arp-bg-dark) !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
    border-radius: 8px !important;
    min-height: 120px !important;
}

#inputNotes::placeholder,
textarea[name="notes"]::placeholder {
    color: var(--arp-text-muted) !important;
}

/* Section dividers/labels like "Payment Details", "Additional Notes" */
.section-header,
.checkout-section-header,
.fieldset-header,
legend,
.form-section-title {
    color: var(--arp-text) !important;
    background: transparent !important;
}

/* Checkbox for terms */
.terms-checkbox,
.accept-terms,
#inputAgreeTos,
input[name="accepttos"] {
    accent-color: var(--arp-primary) !important;
}

.terms-checkbox label,
.accept-terms label {
    color: var(--arp-text) !important;
}

/* Complete Order button */
.btn-complete-order,
#btnCompleteOrder,
button[value="checkout"],
input[value="Complete Order"],
.checkout-btn {
    background: linear-gradient(135deg, var(--arp-success), #059669) !important;
    border: none !important;
    color: #fff !important;
    padding: 14px 30px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

.btn-complete-order:hover,
#btnCompleteOrder:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
}

/* ==========================================================================
   ADDITIONAL GLOBAL CARD FIXES - v5.0.4
   ========================================================================== */

/* Ensure ALL cards in main content are dark */
.primary-content .card,
.main-content .card,
#main-body .card,
.container .card {
    background: var(--arp-bg-card) !important;
    border-color: var(--arp-border) !important;
    color: var(--arp-text) !important;
}

.primary-content .card .card-body,
.main-content .card .card-body,
#main-body .card .card-body {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text) !important;
}

/* Fix any card-header that's light */
.card-header {
    background: var(--arp-bg-card-hover) !important;
    border-bottom: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
}

/* Fix card-footer */
.card-footer {
    background: var(--arp-bg-card-hover) !important;
    border-top: 1px solid var(--arp-border) !important;
    color: var(--arp-text) !important;
}

/* ==========================================================================
   STORE PRODUCT CARDS - COMPLETE LAYOUT FIX - v5.0.5
   Fix Order Now button position to be below features
   ========================================================================== */

/* Main product listing container */
#products,
.products,
.products-list,
.product-listing {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 24px !important;
    padding-top: 10px !important;
}

/* Individual product card */
#products .product,
.products .product,
.product-listing .product,
.pricing-card,
.product-card {
    display: flex !important;
    flex-direction: column !important;
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    height: 100% !important;
    margin-bottom: 24px !important;
}

/* Product table - convert to block layout */
#products .product table,
.products .product table,
.product-card table {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
}

#products .product table tbody,
.products .product table tbody {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* All table rows become block */
#products .product table tr,
.products .product table tr,
.product-card table tr {
    display: block !important;
    width: 100% !important;
}

/* All table cells become block */
#products .product table td,
.products .product table td,
.products .product table th,
.product-card table td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    text-align: center !important;
}

/* Product header/name row */
#products .product table tr:first-child,
.products .product table tr:first-child {
    background: linear-gradient(135deg, var(--arp-primary), var(--arp-primary-dark)) !important;
    padding: 20px !important;
}

#products .product table tr:first-child td,
.products .product table tr:first-child td {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 18px !important;
}

/* Price display */
#products .product .price,
.products .product .price,
.product-card .price {
    color: var(--arp-primary-light) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    padding: 15px 20px !important;
    background: var(--arp-bg-card) !important;
}

#products .product .price span,
.products .product .price span {
    font-size: 14px !important;
    color: var(--arp-text-muted) !important;
    font-weight: 400 !important;
}

/* Product description */
#products .product .product-desc,
#products .product p,
.products .product p,
.product-card .description {
    color: var(--arp-text-muted) !important;
    padding: 15px 20px !important;
    text-align: left !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Features list container */
#products .product ul,
#products .product .features,
.products .product ul,
.product-card .features {
    list-style: none !important;
    padding: 0 20px 20px !important;
    margin: 0 !important;
    flex-grow: 1 !important;
    text-align: left !important;
}

/* Individual feature items */
#products .product ul li,
#products .product .features li,
.products .product ul li,
.product-card .features li {
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--arp-border) !important;
    color: var(--arp-text-muted) !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: flex-start !important;
}

#products .product ul li:last-child,
.products .product ul li:last-child {
    border-bottom: none !important;
}

/* Checkmark icons in features */
#products .product ul li:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-light):not(.fa-brands)::before,
.products .product ul li:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-light):not(.fa-brands)::before {
    content: "✓" !important;
    color: var(--arp-success) !important;
    margin-right: 10px !important;
    font-weight: bold !important;
}

/* Order Now button - FORCE to bottom */
#products .product .btn,
#products .product a.btn,
#products .product .order-btn,
.products .product .btn,
.products .product a.btn,
.product-card .btn {
    display: block !important;
    width: calc(100% - 40px) !important;
    margin: auto 20px 20px 20px !important;
    padding: 12px 20px !important;
    background: var(--arp-primary) !important;
    color: #fff !important;
    text-align: center !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
    margin-top: auto !important;
}

#products .product .btn:hover,
.products .product .btn:hover,
.product-card .btn:hover {
    background: var(--arp-primary-dark) !important;
}

/* ==========================================================================
   DROPDOWN Z-INDEX FIX - v5.0.5
   Ensure dropdowns appear above all content
   ========================================================================== */

#header,
.header,
header {
    position: relative !important;
    z-index: 99999 !important;
}

.navbar,
.main-navbar-wrapper,
nav.navbar {
    position: relative !important;
    z-index: 99999 !important;
}

.dropdown-menu,
ul.dropdown-menu,
.navbar-nav .dropdown-menu {
    z-index: 999999 !important;
}

/* Lower z-index for content */
#main-body,
.primary-content,
.main-content,
form,
.card,
.panel {
    position: relative !important;
    z-index: 1 !important;
}

/* ==========================================================================
   THEME TOGGLE BUTTON - v5.0.5
   ========================================================================== */

.theme-toggle-btn,
#themeToggle {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 999999 !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: var(--arp-primary) !important;
    border: none !important;
    color: #fff !important;
    font-size: 20px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
}

.theme-toggle-btn:hover,
#themeToggle:hover {
    transform: scale(1.1) !important;
    background: var(--arp-primary-dark) !important;
}

/* ==========================================================================
   LIGHT MODE THEME - v5.0.5
   Applied when data-theme="light" or body.theme-light
   ========================================================================== */

[data-theme="light"],
body.theme-light {
    --arp-bg-dark: #f8fafc;
    --arp-bg-card: #ffffff;
    --arp-bg-card-hover: #f1f5f9;
    --arp-border: #e2e8f0;
    --arp-text: #1e293b;
    --arp-text-muted: #64748b;
}

[data-theme="light"] body,
body.theme-light {
    background: var(--arp-bg-dark) !important;
    color: var(--arp-text) !important;
}

[data-theme="light"] .header,
[data-theme="light"] header,
[data-theme="light"] .navbar,
body.theme-light .header,
body.theme-light header,
body.theme-light .navbar {
    background: var(--arp-bg-dark) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
}

[data-theme="light"] .main-navbar-wrapper,
[data-theme="light"] .navbar-collapse,
[data-theme="light"] #mainNavbar,
[data-theme="light"] .main-navbar-wrapper > .container,
[data-theme="light"] .header-area,
[data-theme="light"] .header-container,
[data-theme="light"] .top-nav,
body.theme-light .main-navbar-wrapper,
body.theme-light .navbar-collapse,
body.theme-light #mainNavbar,
body.theme-light .main-navbar-wrapper > .container,
body.theme-light .header-area,
body.theme-light .header-container,
body.theme-light .top-nav {
    background: var(--arp-bg-dark) !important;
    border-top: 0 !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

[data-theme="light"] .dropdown-menu,
body.theme-light .dropdown-menu {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .dropdown-menu > li > a,
body.theme-light .dropdown-menu > li > a {
    color: #1e293b !important;
}

[data-theme="light"] .dropdown-menu > li > a:hover,
body.theme-light .dropdown-menu > li > a:hover {
    background: #f1f5f9 !important;
}

[data-theme="light"] .card,
[data-theme="light"] .panel,
body.theme-light .card,
body.theme-light .panel {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .form-control,
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
body.theme-light .form-control,
body.theme-light input,
body.theme-light select,
body.theme-light textarea {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

[data-theme="light"] .sidebar .panel,
[data-theme="light"] .sidebar .card,
body.theme-light .sidebar .panel,
body.theme-light .sidebar .card {
    background: #ffffff !important;
}

[data-theme="light"] .list-group-item,
body.theme-light .list-group-item {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

[data-theme="light"] .list-group-item:hover,
body.theme-light .list-group-item:hover {
    background: #f1f5f9 !important;
}

[data-theme="light"] .list-group-item.active,
body.theme-light .list-group-item.active {
    background: var(--arp-primary) !important;
    border-color: var(--arp-primary) !important;
    color: #fff !important;
}

[data-theme="light"] .list-group-item.active:hover,
[data-theme="light"] .list-group-item.active:focus,
[data-theme="light"] .list-group-item.active *,
body.theme-light .list-group-item.active:hover,
body.theme-light .list-group-item.active:focus,
body.theme-light .list-group-item.active * {
    color: #fff !important;
}

[data-theme="light"] .alert-info,
[data-theme="light"] .alert.alert-info,
body.theme-light .alert-info,
body.theme-light .alert.alert-info {
    background: rgba(8, 145, 178, 0.12) !important;
    color: #0f172a !important;
    border-left: 4px solid var(--arp-primary) !important;
}

[data-theme="light"] .alert-warning,
[data-theme="light"] .alert.alert-warning,
body.theme-light .alert-warning,
body.theme-light .alert.alert-warning {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #7c2d12 !important;
    border-left: 4px solid var(--arp-warning) !important;
}

[data-theme="light"] .alert-danger,
[data-theme="light"] .alert.alert-danger,
[data-theme="light"] .alert-error,
body.theme-light .alert-danger,
body.theme-light .alert.alert-danger,
body.theme-light .alert-error {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #7f1d1d !important;
    border-left: 4px solid var(--arp-danger) !important;
}

[data-theme="light"] .alert-success,
[data-theme="light"] .alert.alert-success,
body.theme-light .alert-success,
body.theme-light .alert.alert-success {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #065f46 !important;
    border-left: 4px solid var(--arp-success) !important;
}

[data-theme="light"] .alert a,
[data-theme="light"] .alert strong,
body.theme-light .alert a,
body.theme-light .alert strong {
    color: inherit !important;
}

[data-theme="light"] footer,
[data-theme="light"] .footer,
body.theme-light footer,
body.theme-light .footer {
    background: #ffffff !important;
    border-top-color: #e2e8f0 !important;
}

[data-theme="light"] .table > thead > tr > th,
body.theme-light .table > thead > tr > th {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}

[data-theme="light"] .table > tbody > tr > td,
body.theme-light .table > tbody > tr > td {
    background: #ffffff !important;
    color: #64748b !important;
}

/* Light mode link colors */
[data-theme="light"] a,
body.theme-light a {
    color: var(--arp-primary) !important;
}

[data-theme="light"] a:hover,
body.theme-light a:hover {
    color: var(--arp-primary-dark) !important;
}

/* ==========================================================================
   ARPHost Theme Toggle - Hard Override
   ========================================================================== */
.arphost-theme-toggle-floating {
    position: fixed !important;
    right: 20px !important;
    bottom: 20px !important;
    z-index: 2147483000 !important;
}

.nav-item-theme-toggle {
    display: flex !important;
    align-items: center !important;
    margin-left: 8px !important;
}

.arphost-theme-toggle {
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    border: 1px solid var(--arp-border) !important;
    background: var(--arp-bg-card) !important;
    color: var(--arp-text-muted) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    padding: 0 !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

.arphost-theme-toggle i {
    font-size: 1.05rem !important;
}

header .navbar-nav.toolbar .nav-item-theme-toggle > .arphost-theme-toggle,
header .navbar-nav .nav-item-theme-toggle > .arphost-theme-toggle,
.header-actions .arphost-theme-toggle {
    background: var(--arp-bg-card) !important;
    border: 1px solid var(--arp-border) !important;
    color: var(--arp-text-muted) !important;
}

.arphost-theme-toggle-floating .arphost-theme-toggle {
    width: 50px !important;
    height: 50px !important;
    border: 0 !important;
    background: var(--arp-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

.arphost-theme-toggle:hover {
    transform: translateY(-1px) !important;
    background: var(--arp-bg-card-hover) !important;
    border-color: var(--arp-primary) !important;
    color: var(--arp-primary-light) !important;
}

.arphost-theme-toggle-floating .arphost-theme-toggle:hover {
    transform: scale(1.08) !important;
    background: var(--arp-primary-dark) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* ==========================================================================
   CART LAYOUT RESET
   Undo aggressive global product/card overrides inside WHMCS cart pages.
   ========================================================================== */
#order-standard_cart #products .product,
#order-standard_cart .products .product {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

#order-standard_cart #products,
#order-standard_cart .products {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 10px 8px 8px !important;
    overflow: hidden !important;
}

#order-standard_cart #products .row.row-eq-height {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 16px !important;
}

#order-standard_cart #products .col-md-4,
#order-standard_cart #products .col-md-6 {
    width: calc(33.333% - 11px) !important;
    max-width: calc(33.333% - 11px) !important;
    flex: 0 0 calc(33.333% - 11px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 1199px) {
    #order-standard_cart #products .col-md-4,
    #order-standard_cart #products .col-md-6 {
        width: calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        flex: 0 0 calc(50% - 8px) !important;
    }
}

@media (max-width: 991px) {
    #order-standard_cart #products .col-md-4,
    #order-standard_cart #products .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

#order-standard_cart .products .product header,
#order-standard_cart #products .product header {
    display: block !important;
}

#order-standard_cart .products .product div.product-desc,
#order-standard_cart #products .product div.product-desc {
    float: none !important;
    width: 100% !important;
    padding: 12px 16px !important;
    flex: 1 1 auto !important;
}

#order-standard_cart .products .product div.product-desc-full-width,
#order-standard_cart #products .product div.product-desc-full-width {
    width: 100% !important;
    float: none !important;
}

#order-standard_cart .products .product footer,
#order-standard_cart #products .product footer {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 16px 16px !important;
    border-top: 1px solid var(--arp-border) !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

#order-standard_cart .products .product .product-pricing,
#order-standard_cart #products .product .product-pricing {
    margin-bottom: 0 !important;
    padding: 0.35rem 0.5rem !important;
    min-height: 72px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-align: center !important;
}

#order-standard_cart .products .product ul,
#order-standard_cart #products .product ul {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

#order-standard_cart .products .product ul li,
#order-standard_cart #products .product ul li {
    display: block !important;
    border-bottom: 1px solid var(--arp-border) !important;
    padding: 8px 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

#order-standard_cart .products .product ul li:last-child,
#order-standard_cart #products .product ul li:last-child {
    border-bottom: 0 !important;
}

#order-standard_cart .products .product .btn-order-now,
#order-standard_cart #products .product .btn-order-now,
#order-standard_cart .products .product footer .btn,
#order-standard_cart #products .product footer .btn {
    width: 100% !important;
    margin: 0 !important;
}

#order-standard_cart .products .product table,
#order-standard_cart .products .product tbody,
#order-standard_cart .products .product tr,
#order-standard_cart #products .product table,
#order-standard_cart #products .product tbody,
#order-standard_cart #products .product tr {
    display: table !important;
    width: 100% !important;
}

#order-standard_cart .products .product td,
#order-standard_cart .products .product th,
#order-standard_cart #products .product td,
#order-standard_cart #products .product th {
    display: table-cell !important;
    width: auto !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    vertical-align: top !important;
}

/* ==========================================================================
   CLIENT AREA SPACING + DARK MODE CLEANUP - v6.0.2
   ========================================================================== */

/* Keep visual spacing between content boxes across client-area pages */
#main-body .card,
#main-body .panel,
#main-body .well,
#main-body .widget,
#main-body .panel-default,
#main-body .box {
    margin-bottom: 16px !important;
}

#main-body .sidebar .card,
#main-body .sidebar .panel,
#main-body .sidebar .list-group {
    margin-bottom: 14px !important;
}

/* Homepage product/service cards need clearer separation */
.card-columns.home {
    gap: 34px !important;
    padding: 10px !important;
}

.card-columns.home .card {
    overflow: hidden !important;
}

/* Remove light/white surfaces that still appear under dark theme */
[data-theme="dark"] .table,
[data-theme="dark"] .table-list,
[data-theme="dark"] .dataTable,
[data-theme="dark"] .dataTables_wrapper table,
body.theme-dark .table,
body.theme-dark .table-list {
    background: var(--arp-bg-card) !important;
    border-color: var(--arp-border) !important;
}

[data-theme="dark"] .table > thead > tr > th,
[data-theme="dark"] .table > thead > tr > td,
[data-theme="dark"] .table-list thead th,
[data-theme="dark"] .dataTables_wrapper table thead th,
body.theme-dark .table > thead > tr > th {
    background: var(--arp-bg-card-hover) !important;
    color: var(--arp-text) !important;
    border-color: var(--arp-border) !important;
}

[data-theme="dark"] .table > tbody > tr > td,
[data-theme="dark"] .table > tbody > tr > th,
[data-theme="dark"] .table-list tbody td,
[data-theme="dark"] .table-list tbody th,
[data-theme="dark"] .dataTables_wrapper table tbody td,
[data-theme="dark"] .dataTables_wrapper table tbody th,
body.theme-dark .table > tbody > tr > td {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text) !important;
    border-color: var(--arp-border) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button,
body.theme-dark .dataTables_wrapper .dataTables_filter input,
body.theme-dark .dataTables_wrapper .dataTables_length select {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text) !important;
    border-color: var(--arp-border) !important;
}

[data-theme="dark"] .table-list > tbody > tr:hover > td,
[data-theme="dark"] .dataTables_wrapper table > tbody > tr:hover > td,
[data-theme="dark"] .table-hover > tbody > tr:hover > td,
body.theme-dark .table-list > tbody > tr:hover > td {
    background: var(--arp-bg-card-hover) !important;
}

[data-theme="dark"] .alert-lagom,
[data-theme="dark"] .alert.alert-warning,
[data-theme="dark"] .alert.alert-info,
[data-theme="dark"] .alert.alert-danger,
body.theme-dark .alert.alert-warning {
    background: rgba(17, 24, 39, 0.96) !important;
    color: var(--arp-text) !important;
    border-color: var(--arp-border) !important;
}

[data-theme="dark"] .alert .close,
[data-theme="dark"] .alert button.close,
body.theme-dark .alert .close {
    color: var(--arp-text) !important;
    text-shadow: none !important;
    opacity: 0.75 !important;
}

[data-theme="dark"] .panel,
[data-theme="dark"] .panel-default,
[data-theme="dark"] .panel-body,
[data-theme="dark"] .panel-footer,
[data-theme="dark"] .card,
[data-theme="dark"] .card-body,
[data-theme="dark"] .well,
[data-theme="dark"] .tile,
[data-theme="dark"] .dashboard-stat,
[data-theme="dark"] .metric,
[data-theme="dark"] .stat,
[data-theme="dark"] .list-group,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .content-block,
[data-theme="dark"] .product-details,
[data-theme="dark"] .product-details-tab-container,
[data-theme="dark"] .nav-tabs + .tab-content,
[data-theme="dark"] .tab-content,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .white,
[data-theme="dark"] .white-bg,
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: #fff"],
body.theme-dark .panel,
body.theme-dark .card,
body.theme-dark .well,
body.theme-dark .bg-light,
body.theme-dark .bg-white {
    background: var(--arp-bg-card) !important;
    color: var(--arp-text) !important;
    border-color: var(--arp-border) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .panel-default > .panel-heading,
[data-theme="dark"] .panel-heading,
[data-theme="dark"] .card-header,
[data-theme="dark"] .tile .tile-heading,
[data-theme="dark"] .nav-tabs > li > a,
body.theme-dark .panel-heading {
    background: var(--arp-bg-card-hover) !important;
    color: var(--arp-text) !important;
    border-color: var(--arp-border) !important;
}

[data-theme="dark"] .nav-tabs > li > a:hover,
[data-theme="dark"] .nav-tabs > li.active > a,
body.theme-dark .nav-tabs > li.active > a {
    background: var(--arp-bg-card) !important;
    color: var(--arp-primary-light) !important;
    border-color: var(--arp-border) !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--arp-text-muted) !important;
}

/* ==========================================================================
   HOMEPAGE + STORE POLISH - v6.0.3
   ========================================================================== */

/* Remove any outer frame around the homepage domain search */
#frmDomainHomepage,
#frmDomainHomepage .input-group-wrapper,
#frmDomainHomepage .input-group-wrapper::before,
#frmDomainHomepage .input-group-wrapper::after {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

#frmDomainHomepage .input-group-wrapper {
    padding: 0 !important;
}

#frmDomainHomepage .input-group-wrapper:focus-within {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Remove white outlines from cart/menu toolbar buttons in the header */
header .navbar-nav.toolbar .btn,
header .navbar-nav.toolbar .btn.nav-link,
header .navbar-nav.toolbar .nav-item > .btn {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

header .navbar-nav.toolbar .btn:hover,
header .navbar-nav.toolbar .btn:focus {
    background: var(--arp-bg-card-hover) !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Keep the store/sidebar wrapper fully clear behind category/action cards */
#order-standard_cart .cart-sidebar,
#order-standard_cart .cart-sidebar.sidebar,
#order-standard_cart .sidebar,
#order-standard_cart .cart-sidebar::before,
#order-standard_cart .cart-sidebar::after {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* Remove language switcher where only one language/currency is supported */
button[data-target="#modalChooseLanguage"],
a[data-target="#modalChooseLanguage"],
#modalChooseLanguage {
    display: none !important;
}

li.list-inline-item:has(> button[data-target="#modalChooseLanguage"]),
li.list-inline-item:has(> a[data-target="#modalChooseLanguage"]) {
    display: none !important;
}

/* Show 3 product cards per row on desktop */
#order-standard_cart #products .col-md-4,
#order-standard_cart #products .col-md-6 {
    width: calc(33.333% - 11px) !important;
    max-width: calc(33.333% - 11px) !important;
    flex: 0 0 calc(33.333% - 11px) !important;
}

@media (max-width: 1199px) {
    #order-standard_cart #products .col-md-4,
    #order-standard_cart #products .col-md-6 {
        width: calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        flex: 0 0 calc(50% - 8px) !important;
    }
}

@media (max-width: 991px) {
    #order-standard_cart #products .col-md-4,
    #order-standard_cart #products .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

@media (min-width: 1200px) {
    .card-columns.home {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    #order-standard_cart #products .product header {
        padding: 0.65rem 0.85rem !important;
    }

    #order-standard_cart #products .product .product-desc {
        padding: 0.62rem 0.85rem !important;
    }

    #order-standard_cart #products .product ul li {
        padding: 0.35rem 0 !important;
        line-height: 1.3 !important;
    }

    #order-standard_cart #products .product footer {
        padding: 0.62rem 0.85rem 0.78rem !important;
    }

    #order-standard_cart #products .product .product-pricing .price {
        font-size: 1.38rem !important;
        line-height: 1.04 !important;
        letter-spacing: -0.02em !important;
    }

    #order-standard_cart #products .product .product-pricing {
        min-height: 68px !important;
    }

    #order-standard_cart #products .product .btn-order-now {
        margin-top: 6px !important;
        padding: 0.5rem 0.85rem !important;
    }
}

/* ==========================================================================
   Theme Toggle Styles (from header.tpl inline styles)
   ========================================================================== */
.arphost-theme-toggle-floating {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2147483000;
}

.nav-item-theme-toggle {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.arphost-theme-toggle {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--arp-border, #1f2937);
    background: var(--arp-bg-card, #111827);
    color: var(--arp-text-muted, #94a3b8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    padding: 0;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.arphost-theme-toggle i {
    font-size: 1.05rem;
}

header .navbar-nav.toolbar .nav-item-theme-toggle > .arphost-theme-toggle,
header .navbar-nav .nav-item-theme-toggle > .arphost-theme-toggle,
.header-actions .arphost-theme-toggle {
    background: var(--arp-bg-card, #111827);
    border: 1px solid var(--arp-border, #1f2937);
    color: var(--arp-text-muted, #94a3b8);
}

.arphost-theme-toggle-floating .arphost-theme-toggle {
    width: 50px;
    height: 50px;
    border: none;
    background: #0891b2;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.arphost-theme-toggle:hover {
    background: var(--arp-bg-card-hover, #1f2937);
    border-color: #0891b2;
    color: #22d3ee;
    transform: translateY(-1px);
}

.arphost-theme-toggle-floating .arphost-theme-toggle:hover {
    background: #0e7490;
    border-color: transparent;
    color: #fff;
    transform: scale(1.06);
}

/* ==========================================================================
   Cart Safety Overrides (fallback for cached CSS)
   ========================================================================== */
#order-standard_cart #products .product,
#order-standard_cart .products .product {
    display: flex !important;
    flex-direction: column !important;
    max-width: none !important;
    width: 100% !important;
}

#order-standard_cart #products .row.row-eq-height {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 16px !important;
}

#order-standard_cart > .row {
    gap: 0 !important;
}

#order-standard_cart #products .col-md-4,
#order-standard_cart #products .col-md-6 {
    width: calc(33.333% - 11px) !important;
    max-width: calc(33.333% - 11px) !important;
    flex: 0 0 calc(33.333% - 11px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 1199px) {
    #order-standard_cart #products .col-md-4,
    #order-standard_cart #products .col-md-6 {
        width: calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        flex: 0 0 calc(50% - 8px) !important;
    }
}

@media (max-width: 991px) {
    #order-standard_cart #products .col-md-4,
    #order-standard_cart #products .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

#order-standard_cart .products .product div.product-desc,
#order-standard_cart #products .product div.product-desc {
    float: none !important;
    width: 100% !important;
    padding: 0.8rem 1rem !important;
}

#order-standard_cart .products .product footer,
#order-standard_cart #products .product footer {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.75rem 1rem 0.95rem !important;
}

#order-standard_cart .products .product .product-pricing,
#order-standard_cart #products .product .product-pricing {
    margin-bottom: 0 !important;
    padding: 0.35rem 0.5rem !important;
    min-height: 72px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-align: center !important;
}

#order-standard_cart .products .product .product-pricing .price,
#order-standard_cart #products .product .product-pricing .price {
    display: inline-block !important;
    max-width: 100% !important;
    font-size: 1.58rem !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

#order-standard_cart .products .product .product-pricing small,
#order-standard_cart #products .product .product-pricing small {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
}

#order-standard_cart #frmConfigureProduct .form-group > label,
#order-standard_cart #frmConfigureProduct .field-container label {
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
}

#order-standard_cart #frmConfigureProduct .form-control,
#order-standard_cart #frmConfigureProduct select.form-control,
#order-standard_cart #frmConfigureProduct .custom-select,
#order-standard_cart #frmConfigureProduct .select-inline {
    font-size: 0.97rem !important;
    line-height: 1.3 !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0.55rem 2.35rem 0.55rem 0.95rem !important;
}

#order-standard_cart #frmConfigureProduct select.form-control option,
#order-standard_cart #frmConfigureProduct .custom-select option {
    font-size: 0.97rem !important;
    line-height: 1.35 !important;
}

#order-standard_cart #frmConfigureProduct #inputBillingcycle,
#order-standard_cart #frmConfigureProduct .product-configurable-options select.form-control,
#order-standard_cart #frmConfigureProduct .product-configurable-options .custom-select {
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0.5rem 2.2rem 0.5rem 0.9rem !important;
}

#order-standard_cart .products .product .btn-order-now,
#order-standard_cart #products .product .btn-order-now {
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0.58rem 1rem !important;
}

@media (min-width: 1200px) {
    #order-standard_cart #products .product header {
        padding: 0.65rem 0.85rem !important;
    }

    #order-standard_cart #products .product .product-desc {
        padding: 0.62rem 0.85rem !important;
    }

    #order-standard_cart #products .product ul li {
        padding: 0.35rem 0 !important;
        line-height: 1.3 !important;
    }

    #order-standard_cart #products .product footer {
        padding: 0.62rem 0.85rem 0.78rem !important;
    }

    #order-standard_cart #products .product .product-pricing .price {
        font-size: 1.38rem !important;
    }

    #order-standard_cart #products .product .product-pricing {
        min-height: 68px !important;
    }

    #order-standard_cart #products .product .btn-order-now {
        margin-top: 6px !important;
        padding: 0.5rem 0.85rem !important;
    }
}

#order-standard_cart .products .product header span,
#order-standard_cart #products .product header span,
#order-standard_cart .products .product header .qty,
#order-standard_cart #products .product header .qty,
#order-standard_cart .header-lined h1,
#order-standard_cart .header-lined h2,
#order-standard_cart .header-lined h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] #order-standard_cart .products .product header span,
[data-theme="dark"] #order-standard_cart #products .product header span,
[data-theme="dark"] #order-standard_cart .products .product header .qty,
[data-theme="dark"] #order-standard_cart #products .product header .qty,
[data-theme="dark"] #order-standard_cart .header-lined h1,
[data-theme="dark"] #order-standard_cart .header-lined h2,
[data-theme="dark"] #order-standard_cart .header-lined h3 {
    color: #fff !important;
}

[data-theme="light"] #order-standard_cart .products .product header span,
[data-theme="light"] #order-standard_cart #products .product header span,
[data-theme="light"] #order-standard_cart .products .product header .qty,
[data-theme="light"] #order-standard_cart #products .product header .qty,
[data-theme="light"] #order-standard_cart .header-lined h1,
[data-theme="light"] #order-standard_cart .header-lined h2,
[data-theme="light"] #order-standard_cart .header-lined h3,
body.theme-light #order-standard_cart .products .product header span,
body.theme-light #order-standard_cart #products .product header span,
body.theme-light #order-standard_cart .products .product header .qty,
body.theme-light #order-standard_cart #products .product header .qty,
body.theme-light #order-standard_cart .header-lined h1,
body.theme-light #order-standard_cart .header-lined h2,
body.theme-light #order-standard_cart .header-lined h3 {
    color: #000 !important;
}

#order-standard_cart .products .product ul li {
    display: block !important;
    padding: 0.45rem 0 !important;
    white-space: normal !important;
    word-break: normal !important;
}

#order-standard_cart #products {
    padding: 0 8px 8px !important;
    overflow: hidden !important;
}

#order-standard_cart .cart-sidebar .panel,
#order-standard_cart .cart-sidebar .card.card-sidebar {
    overflow: hidden !important;
}

#order-standard_cart .cart-sidebar .panel .list-group,
#order-standard_cart .cart-sidebar .card .list-group,
#order-standard_cart .cart-sidebar .panel .collapsable-card-body {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0.45rem 0.55rem 0.65rem !important;
}

#order-standard_cart .cart-sidebar .list-group-item {
    margin-bottom: 0.2rem !important;
}