/* ========================================================= NeedAServer Design System — WHMCS Bridge (FULL FILE) Paste this as the entire custom.css ========================================================= */ /* ========================= LIGHT MODE (default) ========================= */ :root { --bg-page: #FFFFFF; --bg-section: #F8FAFC; --bg-card: #FFFFFF; --bg-card-hover: #F1F5F9; --text-primary: #0E1A2B; --text-body: #374151; --text-muted: #6B7280; --text-disabled: #9CA3AF; --accent-primary: #2DD4BF; --accent-hover: #14B8A6; --accent-muted: rgba(45, 212, 191, 0.4); --accent-bg-soft: rgba(45, 212, 191, 0.08); --status-success: #22C55E; --status-warning: #F59E0B; --status-error: #EF4444; --status-info: #38BDF8; --border-subtle: rgba(14, 26, 43, 0.08); --border-accent: var(--accent-muted); } /* ========================= DARK MODE (manual toggle) Put data-theme="dark" on to force dark. ========================= */ html[data-theme="dark"] { --bg-page: #0B1220; --bg-section: #0F172A; --bg-card: #111827; --bg-card-hover: #162036; --text-primary: #E5E7EB; --text-body: #CBD5E1; --text-muted: #94A3B8; --text-disabled: #64748B; --accent-primary: #2DD4BF; --accent-hover: #14B8A6; --accent-muted: rgba(45, 212, 191, 0.4); --accent-bg-soft: rgba(45, 212, 191, 0.08); --status-success: #22C55E; --status-warning: #F59E0B; --status-error: #EF4444; --status-info: #38BDF8; --border-subtle: rgba(148, 163, 184, 0.12); --border-accent: var(--accent-muted); } /* ========================= SYSTEM PREFERENCE (auto dark) ========================= */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --bg-page: #0B1220; --bg-section: #0F172A; --bg-card: #111827; --bg-card-hover: #162036; --text-primary: #E5E7EB; --text-body: #CBD5E1; --text-muted: #94A3B8; --text-disabled: #64748B; --accent-primary: #2DD4BF; --accent-hover: #14B8A6; --accent-muted: rgba(45, 212, 191, 0.4); --accent-bg-soft: rgba(45, 212, 191, 0.08); --status-success: #22C55E; --status-warning: #F59E0B; --status-error: #EF4444; --status-info: #38BDF8; --border-subtle: rgba(148, 163, 184, 0.12); --border-accent: var(--accent-muted); } } /* ========================= BASE ========================= */ html, body { background: var(--bg-page) !important; color: var(--text-body) !important; } h1,h2,h3,h4,h5,h6, .page-header h1, .page-header h2 { color: var(--text-primary) !important; letter-spacing: -0.015em; } a { color: var(--accent-hover) !important; } a:hover { color: var(--accent-primary) !important; } /* ========================= WHMCS SURFACES / CARDS ========================= */ .main-content, .seo-content, .content-wrapper, .contentarea, #main-body { background: var(--bg-page) !important; } .panel, .well, .client-home-panels .panel, .card, .announcement-single { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; box-shadow: none !important; } .panel:hover, .card:hover { background: var(--bg-card-hover) !important; } .section, .client-home-panels { padding: 2.5rem 0 !important; } /* ========================= FORMS ========================= */ .form-control, input[type="text"], input[type="email"], input[type="password"], select, textarea { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; } .form-control:focus, input:focus, select:focus, textarea:focus { border-color: var(--border-accent) !important; box-shadow: 0 0 0 3px var(--accent-bg-soft) !important; outline: none !important; } /* ========================= BUTTONS Neutral CTA (matches your marketing hero) ========================= */ .btn-primary, .btn.btn-primary { background: #64748B !important; border-color: #64748B !important; color: #fff !important; border-radius: 14px !important; font-weight: 600 !important; padding: 14px 28px !important; } .btn-primary:hover, .btn.btn-primary:hover { background: #475569 !important; border-color: #475569 !important; } /* Secondary buttons */ .btn-default, .btn.btn-default { background: transparent !important; border: 1px solid var(--border-subtle) !important; color: var(--text-primary) !important; border-radius: 14px !important; } /* ========================= PORTAL: REMOVE WHMCS BLUE (matches the page you screenshotted) ========================= */ /* Top navigation bar */ #header { background: var(--bg-page) !important; border-bottom: 1px solid var(--border-subtle) !important; } /* Main menu */ #main-menu, .navbar.navbar-main, .navbar-main { background: var(--bg-page) !important; border-bottom: 1px solid var(--border-subtle) !important; } .navbar-nav > li > a { color: var(--text-body) !important; font-weight: 500 !important; } .navbar-nav > li > a:hover { color: var(--accent-hover) !important; } /* Home banner (big blue strip) */ #home-banner { background: var(--bg-section) !important; color: var(--text-primary) !important; padding: 44px 0 !important; } #home-banner h2 { color: var(--text-primary) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } /* Shortcut strip */ .home-shortcuts { background: var(--bg-section) !important; border-bottom: 1px solid var(--border-subtle) !important; } /* Shortcut buttons */ .home-shortcuts ul li a { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; color: var(--text-primary) !important; background-image: none !important; transition: background .15s ease, border-color .15s ease, transform .15s ease !important; } .home-shortcuts ul li a i, .home-shortcuts ul li a span { color: var(--accent-hover) !important; } .home-shortcuts ul li a:hover { background: var(--bg-card-hover) !important; border-color: var(--border-accent) !important; transform: translateY(-1px) !important; } /* News section heading */ #main-body h2 { color: var(--text-primary) !important; } /* Announcement label */ .announcement-single .label { background: var(--bg-card-hover) !important; color: var(--text-muted) !important; border-radius: 10px !important; } /* “Read More” label/button */ .announcement-single .label-warning { background: var(--accent-bg-soft) !important; color: var(--accent-hover) !important; border-radius: 10px !important; } /* Footer */ #footer { background: var(--bg-page) !important; border-top: 1px solid var(--border-subtle) !important; color: var(--text-muted) !important; } #footer p { color: var(--text-muted) !important; } /* ========================================================= PORTAL HOMEPAGE POLISH (Hero + Shortcuts) ========================================================= */ /* Hero (replaces WHMCS blue banner vibe) */ #home-banner { background: var(--bg-section) !important; border-bottom: 1px solid var(--border-subtle) !important; padding: 72px 0 !important; } #home-banner h2 { color: var(--text-primary) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; margin: 0 !important; } /* Shortcuts strip background */ .home-shortcuts { background: var(--bg-section) !important; padding: 28px 0 48px !important; border-bottom: 1px solid var(--border-subtle) !important; } /* Shortcut cards */ .home-shortcuts ul li a { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; background-image: none !important; transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease !important; box-shadow: 0 10px 22px rgba(0,0,0,0.04) !important; } .home-shortcuts ul li a:hover { background: var(--bg-card-hover) !important; border-color: var(--border-accent) !important; transform: translateY(-1px) !important; box-shadow: 0 14px 30px rgba(0,0,0,0.06) !important; } /* Icon + text */ .home-shortcuts ul li a i { color: var(--accent-hover) !important; } .home-shortcuts ul li a p { color: var(--text-primary) !important; font-weight: 600 !important; margin: 0 !important; } .home-shortcuts ul li a span { color: var(--accent-hover) !important; } /* ========================================================= CART + CHECKOUT (Standard Cart / WHMCS order pages) ========================================================= */ /* Page background consistency */ body[data-filename="cart"], body[data-filename="order"], body[data-filename="checkout"], body[data-filename="viewcart"], body[data-filename="configureproduct"], body[data-filename="complete"] { background: var(--bg-page) !important; } /* Common cart containers (covers most WHMCS versions/themes) */ #order-standard_cart, .order-container, .cart, .cart-body, .cart-sidebar, #orderSummary, .summary-container, .checkout-container { background: transparent !important; } /* Panels/cards used in cart */ #order-standard_cart .panel, #order-standard_cart .panel-default, #order-standard_cart .panel-sidebar, #order-standard_cart .panel-summary, #order-standard_cart .view-cart-items, #order-standard_cart .cart-items, #order-standard_cart .cart-item, #order-standard_cart .cart-summary, #order-standard_cart .checkout, #order-standard_cart .checkout .panel, #order-standard_cart .well, #order-standard_cart .form-container, #order-standard_cart .domain-selection, #order-standard_cart .domain-options, #order-standard_cart .sub-heading, #order-standard_cart .sidebar, #order-standard_cart .cart-sidebar, #order-standard_cart .cart-body, #order-standard_cart .order-summary, #order-standard_cart .order-summary .summary-container { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; box-shadow: none !important; } /* Section headings */ #order-standard_cart h1, #order-standard_cart h2, #order-standard_cart h3, #order-standard_cart h4, #order-standard_cart .sub-heading span, #order-standard_cart .panel-title { color: var(--text-primary) !important; font-weight: 700 !important; letter-spacing: -0.015em !important; } /* Cart tables */ #order-standard_cart table, #order-standard_cart .table { background: transparent !important; color: var(--text-body) !important; } #order-standard_cart .table > thead > tr > th { border-bottom: 1px solid var(--border-subtle) !important; color: var(--text-muted) !important; font-weight: 600 !important; } #order-standard_cart .table > tbody > tr > td { border-top: 1px solid var(--border-subtle) !important; } /* Totals / Order Summary box */ #order-standard_cart #orderSummary, #order-standard_cart .order-summary, #order-standard_cart .order-summary-content, #order-standard_cart .summary-container { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; } #order-standard_cart #orderSummary .summary-title, #order-standard_cart .order-summary-title { color: var(--text-primary) !important; font-weight: 700 !important; } #order-standard_cart #orderSummary .summary-totals, #order-standard_cart .summary-totals { border-top: 1px solid var(--border-subtle) !important; } #order-standard_cart #orderSummary .total-due-today, #order-standard_cart .total-due-today, #order-standard_cart .total-due, #order-standard_cart .total { color: var(--text-primary) !important; font-weight: 800 !important; } /* Coupon/promo input */ #order-standard_cart input[type="text"], #order-standard_cart input[type="email"], #order-standard_cart input[type="password"], #order-standard_cart select, #order-standard_cart textarea { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; } #order-standard_cart input:focus, #order-standard_cart select:focus, #order-standard_cart textarea:focus { border-color: var(--border-accent) !important; box-shadow: 0 0 0 3px var(--accent-bg-soft) !important; outline: none !important; } /* Primary action buttons in cart/checkout */ #order-standard_cart .btn.btn-primary, #order-standard_cart .btn-primary, #order-standard_cart button.btn-primary, #order-standard_cart input.btn-primary[type="submit"] { background: #64748B !important; border-color: #64748B !important; color: #fff !important; border-radius: 14px !important; font-weight: 700 !important; padding: 14px 28px !important; } #order-standard_cart .btn-primary:hover, #order-standard_cart .btn.btn-primary:hover { background: #475569 !important; border-color: #475569 !important; } /* Secondary buttons */ #order-standard_cart .btn.btn-default, #order-standard_cart .btn-default, #order-standard_cart .btn.btn-link { background: transparent !important; border: 1px solid var(--border-subtle) !important; color: var(--text-primary) !important; border-radius: 14px !important; } /* Remove “WHMCS blue” links/accents in cart */ #order-standard_cart a, #order-standard_cart a:visited { color: var(--accent-hover) !important; } #order-standard_cart a:hover { color: var(--accent-primary) !important; } /* Alerts: keep functional */ #order-standard_cart .alert { border-radius: 14px !important; border: 1px solid var(--border-subtle) !important; } #order-standard_cart .alert-success { border-color: rgba(34, 197, 94, 0.35) !important; } #order-standard_cart .alert-warning { border-color: rgba(245, 158, 11, 0.35) !important; } #order-standard_cart .alert-danger { border-color: rgba(239, 68, 68, 0.35) !important; } ::contentReference[oaicite:0]{index=0} /* ========================================================= BARE METAL / PRODUCT SLIDER FIX (product selection page) ========================================================= */ /* Page section background (remove that big gray block look) */ #order-standard_cart, #order-premium_comparison, #order-modern, #order { background: var(--bg-page) !important; } #order-standard_cart .main-content, #order-premium_comparison .main-content, #order-modern .main-content, #order .main-content { background: var(--bg-page) !important; } /* Headings */ #order-standard_cart h1, #order-premium_comparison h1, #order-modern h1, #order h1 { color: var(--text-primary) !important; font-weight: 800 !important; letter-spacing: -0.02em !important; } #order-standard_cart h2, #order-premium_comparison h2, #order-modern h2, #order h2, #order-standard_cart .lead, #order-premium_comparison .lead, #order-modern .lead, #order .lead { color: var(--text-muted) !important; } /* Product card container (the big white rectangle) */ .product, .product-container, .product-box, .products, .product-selection, .product-selector, .package, .package-box, #productSlider, #product-slider, .product-slider, .slider-container, .comparison-table, #pricing, #productList { background: var(--bg-section) !important; } /* The actual “plan” card */ .product .product-content, .product .plan, .product .package, .product .package-content, .product-box, .package-box, #productSlider .panel, #productSlider .well, #product-slider .panel, #product-slider .well { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; box-shadow: none !important; } /* Clean up pricing text */ .price, .price .amount, .product-price, .product-pricing, .package-price, .pricing, .pricing .amount { color: var(--text-primary) !important; font-weight: 800 !important; } /* Make the blue "Order Now" match your neutral primary */ .btn-order, .btn-order-now, .btnOrderNow, a.btn-order-now, .product button, .product a.btn, .product .btn, .package a.btn, .package .btn { background: #64748B !important; border-color: #64748B !important; color: #fff !important; border-radius: 14px !important; font-weight: 700 !important; padding: 14px 22px !important; } .btn-order:hover, .btn-order-now:hover, .btnOrderNow:hover, a.btn-order-now:hover, .product button:hover, .product a.btn:hover, .product .btn:hover, .package a.btn:hover, .package .btn:hover { background: #475569 !important; border-color: #475569 !important; } /* --------------------------------------------------------- Slider styling (WHMCS often uses Ion.RangeSlider classes) --------------------------------------------------------- */ /* Slider track */ .irs-line, .irs-line-left, .irs-line-mid, .irs-line-right { background: rgba(14, 26, 43, 0.08) !important; border-radius: 999px !important; } /* Slider fill (keep teal subtle, not dominant) */ .irs-bar, .irs-bar-edge { background: rgba(45, 212, 191, 0.35) !important; border-radius: 999px !important; } /* Slider handle */ .irs-handle, .irs-handle > i:first-child { background: var(--bg-card) !important; border: 2px solid rgba(45, 212, 191, 0.55) !important; border-radius: 999px !important; box-shadow: 0 8px 18px rgba(0,0,0,0.10) !important; } /* Slider labels/text */ .irs-min, .irs-max, .irs-from /* ========================================================= LOGIN + REGISTER (Client Area auth pages) ========================================================= */ /* Center the auth box and make it look like a clean card */ body[data-filename="clientarea"] #main-body, body[data-filename="register"] #main-body, body[data-filename="login"] #main-body { background: var(--bg-page) !important; } /* WHMCS uses various wrappers depending on version/theme */ .logincontainer, .login-container, #login, #loginform, #registration, #registration-form, .client-login, .client-register, div[class*="login"], div[class*="register"] { background: transparent !important; } /* Cardify panels/wells used on auth screens */ body[data-filename="clientarea"] .panel, body[data-filename="clientarea"] .well, body[data-filename="register"] .panel, body[data-filename="register"] .well, body[data-filename="login"] .panel, body[data-filename="login"] .well, #login .panel, #registration .panel { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; box-shadow: none !important; } /* Titles */ body[data-filename="clientarea"] h1, body[data-filename="clientarea"] h2, body[data-filename="register"] h1, body[data-filename="register"] h2, body[data-filename="login"] h1, body[data-filename="login"] h2 { color: var(--text-primary) !important; font-weight: 800 !important; letter-spacing: -0.02em !important; } /* Inputs */ body[data-filename="clientarea"] .form-control, body[data-filename="register"] .form-control, body[data-filename="login"] .form-control { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; } body[data-filename="clientarea"] .form-control:focus, body[data-filename="register"] .form-control:focus, body[data-filename="login"] .form-control:focus { border-color: var(--border-accent) !important; box-shadow: 0 0 0 3px var(--accent-bg-soft) !important; } /* Primary button on auth pages */ body[data-filename="clientarea"] .btn-primary, body[data-filename="clientarea"] .btn.btn-primary, body[data-filename="register"] .btn-primary, body[data-filename="register"] .btn.btn-primary, body[data-filename="login"] .btn-primary, body[data-filename="login"] .btn.btn-primary { background: #64748B !important; border-color: #64748B !important; color: #fff !important; border-radius: 14px !important; font-weight: 700 !important; padding: 14px 28px !important; } body[data-filename="clientarea"] .btn-primary:hover, body[data-filename="register"] .btn-primary:hover, body[data-filename="login"] .btn-primary:hover { background: #475569 !important; border-color: #475569 !important; } /* Links */ body[data-filename="clientarea"] a, body[data-filename="register"] a, body[data-filename="login"] a { color: var(--accent-hover) !important; } body[data-filename="clientarea"] a:hover, body[data-filename="register"] a:hover, body[data-filename="login"] a:hover { color: var(--accent-primary) !important; } /* ========================================================= PRODUCT COMPARISON TABLES (Store / Order form comparison) ========================================================= */ /* Common comparison wrappers */ .comparison-table, .product-comparison, .pricing-table, #pricing, .products, .product-group, #order-premium_comparison .comparison-table, #order-premium_comparison .products { background: transparent !important; } /* Table shell */ .comparison-table table, .pricing-table table, table.comparison, table.pricing, #pricing table, .products table { width: 100% !important; background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; overflow: hidden !important; border-collapse: separate !important; border-spacing: 0 !important; } /* Header row */ .comparison-table thead th, .pricing-table thead th, table.comparison thead th, table.pricing thead th, #pricing thead th { background: var(--bg-section) !important; color: var(--text-primary) !important; font-weight: 800 !important; border-bottom: 1px solid var(--border-subtle) !important; } /* Cells */ .comparison-table td, .comparison-table th, .pricing-table td, .pricing-table th, #pricing td, #pricing th { padding: 16px 16px !important; border-bottom: 1px solid var(--border-subtle) !important; color: var(--text-body) !important; vertical-align: middle !important; } /* First column (feature names) */ .comparison-table tbody td:first-child, .pricing-table tbody td:first-child, #pricing tbody td:first-child { color: var(--text-primary) !important; font-weight: 700 !important; } /* Zebra rows (subtle) */ .comparison-table tbody tr:nth-child(even) td, .pricing-table tbody tr:nth-child(even) td, #pricing tbody tr:nth-child(even) td { background: rgba(14, 26, 43, 0.02) !important; } /* Price styling */ .comparison-table .price, .pricing-table .price, #pricing .price, .comparison-table .pricing, .pricing-table .pricing, #pricing .pricing { color: var(--text-primary) !important; font-weight: 900 !important; } /* “Featured” column (if theme marks one) */ .comparison-table .featured, .pricing-table .featured, #pricing .featured, .comparison-table th.featured, .pricing-table th.featured, #pricing th.featured { background: var(--accent-bg-soft) !important; } /* Buttons inside comparison cells */ .comparison-table .btn, .pricing-table .btn, #pricing .btn { background: #64748B !important; border-color: #64748B !important; color: #fff !important; border-radius: 14px !important; font-weight: 700 !important; padding: 12px 18px !important; } .comparison-table .btn:hover, .pricing-table .btn:hover, #pricing .btn:hover { background: #475569 !important; border-color: #475569 !important; } /* ========================================================= CONFIGURE PRODUCT PAGE (configureproduct.tpl) ========================================================= */ /* Page background */ body[data-filename="configureproduct"] { background: var(--bg-page) !important; } /* Main configure container */ body[data-filename="configureproduct"] #order-standard_cart, body[data-filename="configureproduct"] .configure-product, body[data-filename="configureproduct"] .cart-body { background: transparent !important; } /* Left-side configuration panel */ body[data-filename="configureproduct"] .panel, body[data-filename="configureproduct"] .well, body[data-filename="configureproduct"] .form-container { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; box-shadow: none !important; } /* Section titles */ body[data-filename="configureproduct"] h1, body[data-filename="configureproduct"] h2, body[data-filename="configureproduct"] h3 { color: var(--text-primary) !important; font-weight: 800 !important; letter-spacing: -0.02em !important; } /* Config option labels */ body[data-filename="configureproduct"] label, body[data-filename="configureproduct"] .configoption, body[data-filename="configureproduct"] .config-option { color: var(--text-primary) !important; font-weight: 600 !important; } /* Inputs & selects */ body[data-filename="configureproduct"] select, body[data-filename="configureproduct"] input, body[data-filename="configureproduct"] textarea { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; } body[data-filename="configureproduct"] select:focus, body[data-filename="configureproduct"] input:focus { border-color: var(--border-accent) !important; box-shadow: 0 0 0 3px var(--accent-bg-soft) !important; } /* --------------------------------------------------------- ORDER SUMMARY (Right sidebar) --------------------------------------------------------- */ body[data-filename="configureproduct"] #orderSummary, body[data-filename="configureproduct"] .order-summary { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; box-shadow: none !important; } /* Order Summary header */ body[data-filename="configureproduct"] #orderSummary .summary-title { background: var(--bg-section) !important; color: var(--text-primary) !important; font-weight: 800 !important; border-bottom: 1px solid var(--border-subtle) !important; border-radius: 18px 18px 0 0 !important; } /* Line items */ body[data-filename="configureproduct"] #orderSummary .summary-content, body[data-filename="configureproduct"] #orderSummary li { color: var(--text-body) !important; border-bottom: 1px solid var(--border-subtle) !important; } /* Total price */ body[data-filename="configureproduct"] #orderSummary .total-due-today, body[data-filename="configureproduct"] #orderSummary .total { color: var(--text-primary) !important; font-weight: 900 !important; font-size: 1.4rem !important; } /* --------------------------------------------------------- CONTINUE BUTTON --------------------------------------------------------- */ body[data-filename="configureproduct"] .btn-primary, body[data-filename="configureproduct"] button[type="submit"] { background: #22c55e !important; /* success green */ border-color: #22c55e !important; color: #ffffff !important; border-radius: 16px !important; font-weight: 800 !important; padding: 16px 32px !important; width: 100% !important; font-size: 1.05rem !important; } body[data-filename="configureproduct"] .btn-primary:hover { background: #16a34a !important; border-color: #16a34a !important; } /* Remove WHMCS blue highlights */ body[data-filename="configureproduct"] a { color: var(--accent-hover) !important; } body[data-filename="configureproduct"] a:hover { color: var(--accent-primary) !important; } /* Reduce excess vertical whitespace */ body[data-filename="configureproduct"] #main-body { padding-top: 32px !important; padding-bottom: 48px !important; } /* ========================================================= CONFIGURE PAGE: STICKY ORDER SUMMARY + CLEAN SECTIONS ========================================================= */ /* 1) Sticky Order Summary (right column) */ body[data-filename="configureproduct"] #orderSummary, body[data-filename="configureproduct"] .order-summary { position: sticky !important; top: 96px !important; /* adjust if your header is taller */ align-self: flex-start !important; z-index: 2 !important; } /* Prevent weird clipping on some themes */ body[data-filename="configureproduct"] .cart-sidebar, body[data-filename="configureproduct"] .sidebar, body[data-filename="configureproduct"] .col-md-4, body[data-filename="configureproduct"] .col-md-3 { overflow: visible !important; } /* 2) Make config options look like grouped sections */ body[data-filename="configureproduct"] .sub-heading, body[data-filename="configureproduct"] .section-heading, body[data-filename="configureproduct"] .configurable-options h3, body[data-filename="configureproduct"] h3 { margin-top: 18px !important; margin-bottom: 10px !important; padding: 10px 12px !important; background: var(--bg-section) !important; border: 1px solid var(--border-subtle) !important; border-radius: 14px !important; color: var(--text-primary) !important; font-weight: 800 !important; } /* Each option row as its own mini-card (cleaner scanning) */ body[data-filename="configureproduct"] .configoption, body[data-filename="configureproduct"] .config-option, body[data-filename="configureproduct"] .field-container, body[data-filename="configureproduct"] .form-group { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 14px !important; padding: 12px !important; margin-bottom: 10px !important; } /* Labels */ body[data-filename="configureproduct"] .configoption label, body[data-filename="configureproduct"] .form-group label { color: var(--text-primary) !important; font-weight: 700 !important; } /* Tighten dropdowns */ body[data-filename="configureproduct"] select.form-control, body[data-filename="configureproduct"] select { height: 44px !important; } /* 3) Make the Continue button stay visually attached to summary */ body[data-filename="configureproduct"] .btn-primary, body[data-filename="configureproduct"] button[type="submit"] { margin-top: 14px !important; box-shadow: 0 14px 28px rgba(0,0,0,0.08) !important; } /* 4) Optional: reduce the huge empty margins around the content */ body[data-filename="configureproduct"] #main-body .container { max-width: 1140px !important; } /* ========================================================= REVIEW & CHECKOUT PAGE (viewcart / checkout) ========================================================= */ body[data-filename="viewcart"], body[data-filename="checkout"] { background: var(--bg-page) !important; } /* Wrap entire checkout area as one soft container */ body[data-filename="viewcart"] #order-standard_cart, body[data-filename="checkout"] #order-standard_cart { background: var(--bg-section) !important; border-radius: 22px !important; padding: 28px !important; } /* Product table container */ body[data-filename="viewcart"] .panel, body[data-filename="viewcart"] .cart-items, body[data-filename="checkout"] .panel { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; box-shadow: none !important; } /* REMOVE WHMCS BLUE BAR */ body[data-filename="viewcart"] .panel-heading, body[data-filename="viewcart"] .cart-items-header { background: var(--bg-section) !important; color: var(--text-primary) !important; border-bottom: 1px solid var(--border-subtle) !important; font-weight: 800 !important; } /* Product rows */ body[data-filename="viewcart"] .cart-item, body[data-filename="viewcart"] .cart-item-row { border-bottom: 1px solid var(--border-subtle) !important; padding: 16px 0 !important; } /* Product name */ body[data-filename="viewcart"] .cart-item-title, body[data-filename="viewcart"] strong { color: var(--text-primary) !important; font-weight: 700 !important; } /* Quantity input */ body[data-filename="viewcart"] input[type="number"] { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 10px !important; height: 38px !important; } /* Remove tiny “Update” button clutter */ body[data-filename="viewcart"] .btn-update, body[data-filename="viewcart"] button[name="update"] { display: none !important; } /* --------------------------------------------------------- ORDER SUMMARY (Right side) --------------------------------------------------------- */ body[data-filename="viewcart"] #orderSummary, body[data-filename="checkout"] #orderSummary { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; padding: 20px !important; } /* Summary title */ body[data-filename="viewcart"] #orderSummary h2, body[data-filename="checkout"] #orderSummary h2 { color: var(--text-primary) !important; font-weight: 800 !important; } /* Total amount */ body[data-filename="viewcart"] .total-due-today, body[data-filename="checkout"] .total-due-today { font-size: 1.6rem !important; font-weight: 900 !important; color: var(--text-primary) !important; } /* --------------------------------------------------------- CHECKOUT BUTTON (PRIMARY ACTION) --------------------------------------------------------- */ body[data-filename="viewcart"] .btn-checkout, body[data-filename="viewcart"] .btn-primary, body[data-filename="checkout"] .btn-primary { background: #22c55e !important; border-color: #22c55e !important; color: #fff !important; border-radius: 16px !important; font-weight: 800 !important; padding: 16px 36px !important; font-size: 1.05rem !important; width: 100% !important; } body[data-filename="viewcart"] .btn-checkout:hover, body[data-filename="checkout"] .btn-primary:hover { background: #16a34a !important; border-color: #16a34a !important; } /* Continue Shopping = secondary */ body[data-filename="viewcart"] .btn-continue-shopping { background: transparent !important; border: 1px solid var(--border-subtle) !important; color: var(--text-primary) !important; border-radius: 14px !important; } /* Promo code box */ body[data-filename="viewcart"] .promo-code, body[data-filename="viewcart"] .promotion { background: var(--bg-card) !important; border: 1px dashed var(--border-subtle) !important; border-radius: 14px !important; padding: 16px !important; } /* ========================================================= LOGIN + REGISTER (clientarea.php / register.php) ========================================================= */ body[data-filename="clientarea"], body[data-filename="register"] { background: var(--bg-section) !important; } body[data-filename="clientarea"] #main-body, body[data-filename="register"] #main-body { padding-top: 48px !important; padding-bottom: 64px !important; } body[data-filename="clientarea"] .logincontainer, body[data-filename="register"] .registercontainer, body[data-filename="clientarea"] .panel, body[data-filename="register"] .panel { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 22px !important; box-shadow: 0 16px 40px rgba(0,0,0,0.06) !important; } body[data-filename="clientarea"] .panel-heading, body[data-filename="register"] .panel-heading { background: transparent !important; border-bottom: 1px solid var(--border-subtle) !important; color: var(--text-primary) !important; font-weight: 800 !important; } body[data-filename="clientarea"] .form-control, body[data-filename="register"] .form-control { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; height: 46px !important; } body[data-filename="clientarea"] .form-control:focus, body[data-filename="register"] .form-control:focus { border-color: var(--border-accent) !important; box-shadow: 0 0 0 3px var(--accent-bg-soft) !important; } body[data-filename="clientarea"] .btn-primary, body[data-filename="register"] .btn-primary { background: #64748B !important; border-color: #64748B !important; color: #fff !important; border-radius: 16px !important; font-weight: 800 !important; padding: 14px 22px !important; } body[data-filename="clientarea"] .btn-primary:hover, body[data-filename="register"] .btn-primary:hover { background: #475569 !important; border-color: #475569 !important; } /* Links */ body[data-filename="clientarea"] a, body[data-filename="register"] a { color: var(--accent-hover) !important; } body[data-filename="clientarea"] a:hover, body[data-filename="register"] a:hover { color: var(--accent-primary) !important; } /* ========================================================= PRODUCT LISTING / COMPARISON (store pages) ========================================================= */ /* Make store pages feel like a table/grid instead of random blocks */ body[data-filename="index"] .products, body[data-filename="index"] .product-list, body[data-filename="index"] .product { background: transparent !important; } /* Product cards */ body[data-filename="index"] .product, body[data-filename="index"] .product-item, body[data-filename="index"] .package { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; box-shadow: none !important; overflow: hidden !important; } /* Product header strip */ body[data-filename="index"] .product header, body[data-filename="index"] .product-title, body[data-filename="index"] .package-name { background: var(--bg-section) !important; border-bottom: 1px solid var(--border-subtle) !important; color: var(--text-primary) !important; font-weight: 800 !important; } /* Price */ body[data-filename="index"] .product .price, body[data-filename="index"] .package-price { color: var(--text-primary) !important; font-weight: 900 !important; } /* Feature list rows */ body[data-filename="index"] .product ul li, body[data-filename="index"] .package-features li { border-top: 1px solid var(--border-subtle) !important; color: var(--text-body) !important; } /* Primary CTA */ body[data-filename="index"] .product .btn-primary, body[data-filename="index"] .package .btn-primary { background: #64748B !important; border-color: #64748B !important; color: #fff !important; border-radius: 16px !important; font-weight: 800 !important; padding: 14px 22px !important; width: 100% !important; } body[data-filename="index"] .product .btn-primary:hover, body[data-filename="index"] .package .btn-primary:hover { background: #475569 !important; border-color: #475569 !important; } /* ========================================================= CART/CHECKOUT FINAL POLISH ========================================================= */ body[data-filename="viewcart"] h1, body[data-filename="checkout"] h1 { color: var(--text-primary) !important; font-weight: 900 !important; letter-spacing: -0.02em !important; } /* Remove dark/blue bars that sneak back in */ body[data-filename="viewcart"] .table > thead > tr > th, body[data-filename="viewcart"] .panel-heading, body[data-filename="checkout"] .panel-heading { background: var(--bg-section) !important; color: var(--text-primary) !important; border-bottom: 1px solid var(--border-subtle) !important; } /* Make the whole area tighter and more “enterprise” */ body[data-filename="viewcart"] #main-body .container, body[data-filename="checkout"] #main-body .container { max-width: 1140px !important; } /* ========================================================= MOBILE PASS (global) ========================================================= */ @media (max-width: 768px) { /* Reduce top padding */ #main-body { padding-top: 18px !important; } /* Make buttons full width */ .btn, .btn-primary, .btn-default { width: 100% !important; } /* Cart/checkout columns stack nicely */ #order-standard_cart .row, .cart-body .row { display: block !important; } /* Order summary spacing */ #orderSummary { margin-top: 18px !important; } /* Home shortcuts */ .home-shortcuts ul li a { width: 100% !important; } } /* ========================================================= TARGET: cart.php?a=view (Review & Checkout page) ========================================================= */ /* WHMCS often uses data-filename="cart" for /cart.php */ body[data-filename="cart"] { background: var(--bg-page) !important; } /* Outer wrapper */ body[data-filename="cart"] #order-standard_cart, body[data-filename="cart"] #order-modern, body[data-filename="cart"] #order-premium_comparison, body[data-filename="cart"] #order, body[data-filename="cart"] .order-container { background: var(--bg-section) !important; border-radius: 22px !important; padding: 28px !important; } /* Remove WHMCS blue/dark bars */ body[data-filename="cart"] .panel-heading, body[data-filename="cart"] .table > thead > tr > th, body[data-filename="cart"] .cart-heading, body[data-filename="cart"] .header, body[data-filename="cart"] .bg-primary { background: var(--bg-section) !important; color: var(--text-primary) !important; border-bottom: 1px solid var(--border-subtle) !important; } /* Cardify main blocks */ body[data-filename="cart"] .panel, body[data-filename="cart"] .well, body[data-filename="cart"] .cart-items, body[data-filename="cart"] #orderSummary, body[data-filename="cart"] .order-summary, body[data-filename="cart"] .summary-container { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; box-shadow: none !important; } /* Checkout button: make it the obvious primary */ body[data-filename="cart"] .btn-checkout, body[data-filename="cart"] .btn.btn-checkout, body[data-filename="cart"] .btn-primary.checkout, body[data-filename="cart"] a.btn-primary[href*="checkout"], body[data-filename="cart"] button.btn-primary[name="checkout"] { background: #22c55e !important; border-color: #22c55e !important; color: #fff !important; border-radius: 16px !important; font-weight: 900 !important; padding: 16px 36px !important; width: 100% !important; } body[data-filename="cart"] .btn-checkout:hover, body[data-filename="cart"] a.btn-primary[href*="checkout"]:hover, body[data-filename="cart"] button.btn-primary[name="checkout"]:hover { background: #16a34a !important; border-color: #16a34a !important; } /* Secondary buttons */ body[data-filename="cart"] .btn-default, body[data-filename="cart"] .btn.btn-default, body[data-filename="cart"] .btn-continue-shopping { background: transparent !important; border: 1px solid var(--border-subtle) !important; color: var(--text-primary) !important; border-radius: 14px !important; } /* ========================================================= CONFIGURE PRODUCT (Standard Cart) — Match clean two-card UI Targets: cart.php?a=confproduct / configureproduct step ========================================================= */ /* 1) Page canvas */ body[data-filename="cart"] #main-body { background: var(--bg-page) !important; } /* 2) Center content width a bit (optional) */ body[data-filename="cart"] #order-standard_cart { max-width: 1180px; margin: 0 auto; } /* 3) Two-column layout spacing */ body[data-filename="cart"] #order-standard_cart .row { --gap: 24px; } body[data-filename="cart"] #order-standard_cart .row > [class*="col-"] { padding-left: 12px !important; padding-right: 12px !important; } /* 4) Left “Configurable Options” card */ body[data-filename="cart"] #order-standard_cart .config-product, body[data-filename="cart"] #order-standard_cart .configure-product, body[data-filename="cart"] #order-standard_cart .product-config, body[data-filename="cart"] #order-standard_cart .content { background: transparent !important; } /* The main config panel/card wrapper (WHMCS varies; cover common containers) */ body[data-filename="cart"] #order-standard_cart .panel, body[data-filename="cart"] #order-standard_cart .well, body[data-filename="cart"] #order-standard_cart .form-container, body[data-filename="cart"] #order-standard_cart .domain-selection, body[data-filename="cart"] #order-standard_cart .config-options, body[data-filename="cart"] #order-standard_cart .product-config-wrapper { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; box-shadow: none !important; } /* Remove old “panel heading bar” look */ body[data-filename="cart"] #order-standard_cart .panel-heading, body[data-filename="cart"] #order-standard_cart .panel-title { background: transparent !important; border: none !important; color: var(--text-primary) !important; } /* 5) Make form fields look like your screenshot */ body[data-filename="cart"] #order-standard_cart label, body[data-filename="cart"] #order-standard_cart .control-label { color: var(--text-primary) !important; font-weight: 700 !important; margin-bottom: 8px !important; } body[data-filename="cart"] #order-standard_cart .form-group { margin-bottom: 18px !important; } body[data-filename="cart"] #order-standard_cart select, body[data-filename="cart"] #order-standard_cart input[type="text"], body[data-filename="cart"] #order-standard_cart input[type="email"], body[data-filename="cart"] #order-standard_cart input[type="password"], body[data-filename="cart"] #order-standard_cart textarea { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; height: 48px !important; padding: 10px 14px !important; box-shadow: none !important; } body[data-filename="cart"] #order-standard_cart select:focus, body[data-filename="cart"] #order-standard_cart input:focus, body[data-filename="cart"] #order-standard_cart textarea:focus { border-color: var(--border-accent) !important; box-shadow: 0 0 0 3px var(--accent-bg-soft) !important; outline: none !important; } /* Helper text under fields */ body[data-filename="cart"] #order-standard_cart .help-block, body[data-filename="cart"] #order-standard_cart .text-muted, body[data-filename="cart"] #order-standard_cart small { color: var(--text-muted) !important; } /* 6) Right “Price Summary” card styling */ body[data-filename="cart"] #order-standard_cart #orderSummary, body[data-filename="cart"] #order-standard_cart .order-summary, body[data-filename="cart"] #order-standard_cart .summary-container { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; box-shadow: none !important; padding: 18px !important; } /* Make it “sticky” like modern checkout */ @media (min-width: 992px) { body[data-filename="cart"] #order-standard_cart #orderSummary, body[data-filename="cart"] #order-standard_cart .order-summary, body[data-filename="cart"] #order-standard_cart .summary-container { position: sticky !important; top: 110px !important; } } /* Summary header */ body[data-filename="cart"] #order-standard_cart #orderSummary .summary-title, body[data-filename="cart"] #order-standard_cart .order-summary-title, body[data-filename="cart"] #order-standard_cart .panel-title { color: var(--text-primary) !important; font-weight: 800 !important; } /* Summary separators */ body[data-filename="cart"] #order-standard_cart #orderSummary hr, body[data-filename="cart"] #order-standard_cart .order-summary hr { border-color: var(--border-subtle) !important; } /* Total highlight */ body[data-filename="cart"] #order-standard_cart #orderSummary .total-due-today, body[data-filename="cart"] #order-standard_cart .total-due-today, body[data-filename="cart"] #order-standard_cart .total-due, body[data-filename="cart"] #order-standard_cart .total { color: var(--accent-hover) !important; font-weight: 900 !important; } /* 7) Big bottom CTA like screenshot */ body[data-filename="cart"] #order-standard_cart .btn-checkout, body[data-filename="cart"] #order-standard_cart .btn.btn-primary, body[data-filename="cart"] #order-standard_cart button.btn-primary, body[data-filename="cart"] #order-standard_cart input.btn-primary[type="submit"] { background: linear-gradient(180deg, #2DD4BF 0%, #14B8A6 100%) !important; border: none !important; color: #ffffff !important; border-radius: 18px !important; font-weight: 900 !important; padding: 18px 22px !important; } /* Make the main action full-width */ body[data-filename="cart"] #order-standard_cart .btn-checkout, body[data-filename="cart"] #order-standard_cart .btn.btn-primary { width: 100% !important; } /* Hover */ body[data-filename="cart"] #order-standard_cart .btn-checkout:hover, body[data-filename="cart"] #order-standard_cart .btn.btn-primary:hover { filter: brightness(0.95) !important; } /* Remove any leftover blue bars/headers on this step */ body[data-filename="cart"] #order-standard_cart .bg-primary, body[data-filename="cart"] #order-standard_cart .btn-success, body[data-filename="cart"] #order-standard_cart .btn-info { background: inherit !important; } /* ========================================================= CONFIGURE PRODUCT (Standard Cart) — Match clean two-card UI Targets: cart.php?a=confproduct / configureproduct step ========================================================= */ /* 1) Page canvas */ body[data-filename="cart"] #main-body { background: var(--bg-page) !important; } /* 2) Center content width a bit (optional) */ body[data-filename="cart"] #order-standard_cart { max-width: 1180px; margin: 0 auto; } /* 3) Two-column layout spacing */ body[data-filename="cart"] #order-standard_cart .row { --gap: 24px; } body[data-filename="cart"] #order-standard_cart .row > [class*="col-"] { padding-left: 12px !important; padding-right: 12px !important; } /* 4) Left “Configurable Options” card */ body[data-filename="cart"] #order-standard_cart .config-product, body[data-filename="cart"] #order-standard_cart .configure-product, body[data-filename="cart"] #order-standard_cart .product-config, body[data-filename="cart"] #order-standard_cart .content { background: transparent !important; } /* The main config panel/card wrapper (WHMCS varies; cover common containers) */ body[data-filename="cart"] #order-standard_cart .panel, body[data-filename="cart"] #order-standard_cart .well, body[data-filename="cart"] #order-standard_cart .form-container, body[data-filename="cart"] #order-standard_cart .domain-selection, body[data-filename="cart"] #order-standard_cart .config-options, body[data-filename="cart"] #order-standard_cart .product-config-wrapper { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; box-shadow: none !important; } /* Remove old “panel heading bar” look */ body[data-filename="cart"] #order-standard_cart .panel-heading, body[data-filename="cart"] #order-standard_cart .panel-title { background: transparent !important; border: none !important; color: var(--text-primary) !important; } /* 5) Make form fields look like your screenshot */ body[data-filename="cart"] #order-standard_cart label, body[data-filename="cart"] #order-standard_cart .control-label { color: var(--text-primary) !important; font-weight: 700 !important; margin-bottom: 8px !important; } body[data-filename="cart"] #order-standard_cart .form-group { margin-bottom: 18px !important; } body[data-filename="cart"] #order-standard_cart select, body[data-filename="cart"] #order-standard_cart input[type="text"], body[data-filename="cart"] #order-standard_cart input[type="email"], body[data-filename="cart"] #order-standard_cart input[type="password"], body[data-filename="cart"] #order-standard_cart textarea { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; height: 48px !important; padding: 10px 14px !important; box-shadow: none !important; } body[data-filename="cart"] #order-standard_cart select:focus, body[data-filename="cart"] #order-standard_cart input:focus, body[data-filename="cart"] #order-standard_cart textarea:focus { border-color: var(--border-accent) !important; box-shadow: 0 0 0 3px var(--accent-bg-soft) !important; outline: none !important; } /* Helper text under fields */ body[data-filename="cart"] #order-standard_cart .help-block, body[data-filename="cart"] #order-standard_cart .text-muted, body[data-filename="cart"] #order-standard_cart small { color: var(--text-muted) !important; } /* 6) Right “Price Summary” card styling */ body[data-filename="cart"] #order-standard_cart #orderSummary, body[data-filename="cart"] #order-standard_cart .order-summary, body[data-filename="cart"] #order-standard_cart .summary-container { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; box-shadow: none !important; padding: 18px !important; } /* Make it “sticky” like modern checkout */ @media (min-width: 992px) { body[data-filename="cart"] #order-standard_cart #orderSummary, body[data-filename="cart"] #order-standard_cart .order-summary, body[data-filename="cart"] #order-standard_cart .summary-container { position: sticky !important; top: 110px !important; } } /* Summary header */ body[data-filename="cart"] #order-standard_cart #orderSummary .summary-title, body[data-filename="cart"] #order-standard_cart .order-summary-title, body[data-filename="cart"] #order-standard_cart .panel-title { color: var(--text-primary) !important; font-weight: 800 !important; } /* Summary separators */ body[data-filename="cart"] #order-standard_cart #orderSummary hr, body[data-filename="cart"] #order-standard_cart .order-summary hr { border-color: var(--border-subtle) !important; } /* Total highlight */ body[data-filename="cart"] #order-standard_cart #orderSummary .total-due-today, body[data-filename="cart"] #order-standard_cart .total-due-today, body[data-filename="cart"] #order-standard_cart .total-due, body[data-filename="cart"] #order-standard_cart .total { color: var(--accent-hover) !important; font-weight: 900 !important; } /* 7) Big bottom CTA like screenshot */ body[data-filename="cart"] #order-standard_cart .btn-checkout, body[data-filename="cart"] #order-standard_cart .btn.btn-primary, body[data-filename="cart"] #order-standard_cart button.btn-primary, body[data-filename="cart"] #order-standard_cart input.btn-primary[type="submit"] { background: linear-gradient(180deg, #2DD4BF 0%, #14B8A6 100%) !important; border: none !important; color: #ffffff !important; border-radius: 18px !important; font-weight: 900 !important; padding: 18px 22px !important; } /* Make the main action full-width */ body[data-filename="cart"] #order-standard_cart .btn-checkout, body[data-filename="cart"] #order-standard_cart .btn.btn-primary { width: 100% !important; } /* Hover */ body[data-filename="cart"] #order-standard_cart .btn-checkout:hover, body[data-filename="cart"] #order-standard_cart .btn.btn-primary:hover { filter: brightness(0.95) !important; } /* Remove any leftover blue bars/headers on this step */ body[data-filename="cart"] #order-standard_cart .bg-primary, body[data-filename="cart"] #order-standard_cart .btn-success, body[data-filename="cart"] #order-standard_cart .btn-info { background: inherit !important; } /* ========================================================= CONFIGURE PRODUCT (Standard Cart) — Match clean two-card UI Targets: cart.php?a=confproduct / configureproduct step ========================================================= */ /* 1) Page canvas */ body[data-filename="cart"] #main-body { background: var(--bg-page) !important; } /* 2) Center content width a bit (optional) */ body[data-filename="cart"] #order-standard_cart { max-width: 1180px; margin: 0 auto; } /* 3) Two-column layout spacing */ body[data-filename="cart"] #order-standard_cart .row { --gap: 24px; } body[data-filename="cart"] #order-standard_cart .row > [class*="col-"] { padding-left: 12px !important; padding-right: 12px !important; } /* 4) Left “Configurable Options” card */ body[data-filename="cart"] #order-standard_cart .config-product, body[data-filename="cart"] #order-standard_cart .configure-product, body[data-filename="cart"] #order-standard_cart .product-config, body[data-filename="cart"] #order-standard_cart .content { background: transparent !important; } /* The main config panel/card wrapper (WHMCS varies; cover common containers) */ body[data-filename="cart"] #order-standard_cart .panel, body[data-filename="cart"] #order-standard_cart .well, body[data-filename="cart"] #order-standard_cart .form-container, body[data-filename="cart"] #order-standard_cart .domain-selection, body[data-filename="cart"] #order-standard_cart .config-options, body[data-filename="cart"] #order-standard_cart .product-config-wrapper { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; box-shadow: none !important; } /* Remove old “panel heading bar” look */ body[data-filename="cart"] #order-standard_cart .panel-heading, body[data-filename="cart"] #order-standard_cart .panel-title { background: transparent !important; border: none !important; color: var(--text-primary) !important; } /* 5) Make form fields look like your screenshot */ body[data-filename="cart"] #order-standard_cart label, body[data-filename="cart"] #order-standard_cart .control-label { color: var(--text-primary) !important; font-weight: 700 !important; margin-bottom: 8px !important; } body[data-filename="cart"] #order-standard_cart .form-group { margin-bottom: 18px !important; } body[data-filename="cart"] #order-standard_cart select, body[data-filename="cart"] #order-standard_cart input[type="text"], body[data-filename="cart"] #order-standard_cart input[type="email"], body[data-filename="cart"] #order-standard_cart input[type="password"], body[data-filename="cart"] #order-standard_cart textarea { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; height: 48px !important; padding: 10px 14px !important; box-shadow: none !important; } body[data-filename="cart"] #order-standard_cart select:focus, body[data-filename="cart"] #order-standard_cart input:focus, body[data-filename="cart"] #order-standard_cart textarea:focus { border-color: var(--border-accent) !important; box-shadow: 0 0 0 3px var(--accent-bg-soft) !important; outline: none !important; } /* Helper text under fields */ body[data-filename="cart"] #order-standard_cart .help-block, body[data-filename="cart"] #order-standard_cart .text-muted, body[data-filename="cart"] #order-standard_cart small { color: var(--text-muted) !important; } /* 6) Right “Price Summary” card styling */ body[data-filename="cart"] #order-standard_cart #orderSummary, body[data-filename="cart"] #order-standard_cart .order-summary, body[data-filename="cart"] #order-standard_cart .summary-container { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 18px !important; box-shadow: none !important; padding: 18px !important; } /* Make it “sticky” like modern checkout */ @media (min-width: 992px) { body[data-filename="cart"] #order-standard_cart #orderSummary, body[data-filename="cart"] #order-standard_cart .order-summary, body[data-filename="cart"] #order-standard_cart .summary-container { position: sticky !important; top: 110px !important; } } /* Summary header */ body[data-filename="cart"] #order-standard_cart #orderSummary .summary-title, body[data-filename="cart"] #order-standard_cart .order-summary-title, body[data-filename="cart"] #order-standard_cart .panel-title { color: var(--text-primary) !important; font-weight: 800 !important; } /* Summary separators */ body[data-filename="cart"] #order-standard_cart #orderSummary hr, body[data-filename="cart"] #order-standard_cart .order-summary hr { border-color: var(--border-subtle) !important; } /* Total highlight */ body[data-filename="cart"] #order-standard_cart #orderSummary .total-due-today, body[data-filename="cart"] #order-standard_cart .total-due-today, body[data-filename="cart"] #order-standard_cart .total-due, body[data-filename="cart"] #order-standard_cart .total { color: var(--accent-hover) !important; font-weight: 900 !important; } /* 7) Big bottom CTA like screenshot */ body[data-filename="cart"] #order-standard_cart .btn-checkout, body[data-filename="cart"] #order-standard_cart .btn.btn-primary, body[data-filename="cart"] #order-standard_cart button.btn-primary, body[data-filename="cart"] #order-standard_cart input.btn-primary[type="submit"] { background: linear-gradient(180deg, #2DD4BF 0%, #14B8A6 100%) !important; border: none !important; color: #ffffff !important; border-radius: 18px !important; font-weight: 900 !important; padding: 18px 22px !important; } /* Make the main action full-width */ body[data-filename="cart"] #order-standard_cart .btn-checkout, body[data-filename="cart"] #order-standard_cart .btn.btn-primary { width: 100% !important; } /* Hover */ body[data-filename="cart"] #order-standard_cart .btn-checkout:hover, body[data-filename="cart"] #order-standard_cart .btn.btn-primary:hover { filter: brightness(0.95) !important; } /* Remove any leftover blue bars/headers on this step */ body[data-filename="cart"] #order-standard_cart .bg-primary, body[data-filename="cart"] #order-standard_cart .btn-success, body[data-filename="cart"] #order-standard_cart .btn-info { background: inherit !important; } /* ===================================== REMOVE WHMCS DEFAULT HOMEPAGE BANNERS ===================================== */ #home-banner, .home-shortcuts, .client-home-panels, #homepage-content, #homepage-panels { display: none !important; } /* Fix spacing after removal */ #main-body { padding-top: 48px !important; } /* WHMCS Standard Cart - Checkout: hide sidebars + full width */ body[data-filename="cart"] #order-standard_cart .sidebar, body[data-filename="cart"] #order-standard_cart .col-md-3, body[data-filename="cart"] #order-standard_cart .col-lg-3 { display: none !important; } body[data-filename="cart"] #order-standard_cart .main-content, body[data-filename="cart"] #order-standard_cart .col-md-9, body[data-filename="cart"] #order-standard_cart .col-lg-9 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }