/* ==========================================================================
WPExpert - Master Overrides CSS (Flatsome & WHMCS Croster Harmonized)

TABLE OF CONTENTS:

Imports & CSS Custom Properties (Variables)

Typography & Reset Overrides

Theme Modes (Light & Dark Mode Support)

Header, Navigation & Logo Controls

Buttons & Action Links (PayFast / Yoco Neon Actions)

Forms, Controls & Input Styling

Tables, Cards & Panel Components

Grid Column & Form Layout Helpers (CF7 / Flatsome)

Custom Sections & Interactive Components (TLD Marquee & Search)

Image & Performance Adjustments (LiteSpeed Lazy Loading)
========================================================================== */

/* ==========================================================================

Imports & CSS Custom Properties (Variables)
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,700&family=Raleway:wght@700&display=swap');

:root {
/* Brand Palette */
--wpe-primary: #0ea5e9;
--wpe-primary-hover: #0284c7;
--wpe-secondary: #ab16d2;
--wpe-secondary-hover: #8e12ae;
--wpe-success: #66bc29;
--wpe-alert: #b20000;

/* Accent Payment Colors */
--wpe-pay-now: #BF00FF;
--wpe-pay-now-hover: #d012ff;
--wpe-add-card: #0088FF;
--wpe-add-card-hover: #0099ff;

/* Default Theme (Light) Settings */
--wpe-base: #333333;
--wpe-light-bg: #ffffff;
--wpe-card-bg: #ffffff;
--wpe-border-color: #dddddd;
--wpe-input-bg: #ffffff;
--wpe-input-border: #b2b2b2;
}

/* ==========================================================================
2. Typography & Reset Overrides
========================================================================== */
body,
input,
button,
select,
textarea {
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--wpe-base);
}

h1, h2, h3, h4, h5, h6 {
font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-weight: 700 !important;
}

.container-fluid.without-padding {
padding-left: 0;
padding-right: 0;
overflow-x: hidden;
}

/* ==========================================================================
3. Theme Modes (Light & Dark Mode Support)
========================================================================== */
body.dark-mode {
--wpe-base: #e0e0e0;
--wpe-dark-bg: #0f0f0f;
--wpe-card-bg: #212121;
--wpe-border-color: #333333;
--wpe-input-bg: #1a1a1a;
--wpe-input-border: var(--wpe-border-color);

background-color: var(--wpe-dark-bg) !important;
color: var(--wpe-base) !important;
}

body.dark-mode .main-content,
body.dark-mode .main-container,
body.dark-mode .tab-content,
body.dark-mode section {
background-color: var(--wpe-dark-bg) !important;
color: var(--wpe-base) !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
color: #ffffff !important;
}

body.dark-mode .panel,
body.dark-mode .card,
body.dark-mode .list-group-item,
body.dark-mode .well,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu {
background-color: var(--wpe-card-bg) !important;
border-color: var(--wpe-border-color) !important;
color: var(--wpe-base) !important;
}

body.dark-mode .panel-heading,
body.dark-mode .card-header {
background-color: #2a2a2a !important;
border-bottom: 1px solid var(--wpe-border-color) !important;
color: #ffffff !important;
}

body.dark-mode .panel-footer,
body.dark-mode .card-footer {
background-color: #1c1c1c !important;
border-top: 1px solid var(--wpe-border-color) !important;
color: var(--wpe-base) !important;
}

/* Dark Login Specifics */
body.loginpage,
body.loginpage #wrapper,
.loginpage-with-sidebar {
background: radial-gradient(circle at center, #1f1f1f 0%, #121212 100%) !important;
background-attachment: fixed !important;
color: var(--wpe-base) !important;
}

#login-box.login-box,
.login-container,
.login-wrapper .card {
background: var(--wpe-card-bg) !important;
border: 0px solid #14181f !important;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
border-radius: 8px !important;
}

#login-box h1,
#login-box p.text-muted,
.login-container h1,
.login-container p {
color: var(--wpe-base) !important;
}

/* ==========================================================================
4. Header, Navigation & Logo Controls
========================================================================== */
.navbar,
.main-navbar,
header {
border-bottom: 1px solid var(--wpe-border-color) !important;
}

.main-navbar .navbar-nav > .nav-item > .nav-link,
header .navbar-nav .nav-link,
.header-navbar .nav-link {
font-family: 'Poppins', sans-serif !important;
font-size: 0.88rem !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
color: var(--wpe-base) !important;
}

.main-navbar .navbar-nav > .nav-item.active > .nav-link,
.main-navbar .navbar-nav > .nav-item > .nav-link:hover {
color: var(--wpe-primary) !important;
}

/* Dropdown Navigation Overrides */
.nav-dropdown-bold .nav-column li > a,
.nav-dropdown.nav-dropdown-bold > li > a {
border-radius: 0;
color: #21262f;
line-height: 1.3 !important;
}

.main-navbar .dropdown-menu .dropdown-item,
header .dropdown-menu a {
font-family: 'Poppins', sans-serif !important;
font-size: 0.9em !important;
font-weight: 400 !important;
color: var(--wpe-base) !important;
}

.cros-navbar .dropdown-menu a.dropdown-item,
.cros-navbar .dropdown-menu .nav-link,
.dropdown-menu .dropdown-item {
border-left: 3px solid transparent !important;
transition: all 0.2s ease !important;
}

.cros-navbar .dropdown-menu a.dropdown-item:hover,
.cros-navbar .dropdown-menu a.dropdown-item.active,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item.active {
background-color: rgba(14, 165, 233, 0.08) !important;
color: var(--wpe-primary) !important;
border-left-color: var(--wpe-primary) !important;
}

@media (min-width: 992px) {
.cros-navbar .container,
.cros-navbar .container-fluid,
.cros-navbar .navbar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}

.cros-navbar .navbar-collapse {
display: flex !important;
justify-content: center !important;
flex-grow: 1 !important;
}

.cros-navbar .navbar-nav {
margin-left: auto !important;
margin-right: auto !important;
}
}

/* Logo Alignment & Dynamic Switching */
.navbar-brand img,
.header-logo img,
.logo img,
.login-header img {
max-height: 45px !important;
width: auto !important;
display: inline-block !important;
opacity: 1 !important;
visibility: visible !important;
}

.login-header {
padding: 12px;
text-align: center !important;
background-color: #14181f !important;
border-color: #14181f !important;
border-radius: 7px 7px 0px 0px !important;
}

.header-logo a,
.navbar-brand {
display: inline-block !important;
height: 50px !important;
width: 180px !important;
}

body.dark-mode .logo img.logo-light {
display: none !important;
}
body:not(.dark-mode) .logo img.logo-dark {
display: none !important;
}
body.dark-mode .logo img.logo-dark {
display: inline-block !important;
}
body:not(.dark-mode) .logo img.logo-light {
display: inline-block !important;
}

/* ==========================================================================
5. Buttons & Action Links (PayFast / Yoco Neon Actions)
========================================================================== */
.button,
.btn {
font-weight: 400;
overflow: hidden;
border-radius: 4px;
}

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

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background-color: var(--wpe-primary-hover) !important;
border-color: var(--wpe-primary-hover) !important;
}

.btn-secondary {
background-color: var(--wpe-secondary) !important;
border-color: var(--wpe-secondary) !important;
color: #ffffff !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
background-color: var(--wpe-secondary-hover) !important;
border-color: var(--wpe-secondary-hover) !important;
}

/* Fixed Multi-class Action Button Selector */
.btn.btn-primary.btn-custom-action.d-block.div-service-item,
.btn.btn-primary.btn-custom-action.div-service-item {
min-width: 160px !important;
height: 42px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-top: 1px !important;
}

/* Payfast & Yoco Dual-Tone Neon Buttons /
form[action="payfast"],
form[action*="yoco"],
.payfast-btn-container,
#payfast-form,
#payment-form,
.payment-btn-container {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
width: 100% !important;
margin: 15px 0 0 0 !important;
padding: 0 !important;
}

input[type="submit"][value*="Pay Now"],
input[type="submit"][value*="Add Card"] {
flex: 1 1 calc(50% - 6px) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 48px !important;
padding: 0 12px !important;
border-radius: 8px !important;
font-size: 0.88rem !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
appearance: none !important;
-webkit-appearance: none !important;
}

input[type="submit"][value*="Pay Now"] {
background: var(--wpe-pay-now) !important;
border: 1px solid var(--wpe-pay-now) !important;
color: #ffffff !important;
box-shadow: 0 4px 14px rgba(191, 0, 255, 0.35) !important;
}

input[type="submit"][value*="Pay Now"]:hover {
background: var(--wpe-pay-now-hover) !important;
transform: translateY(-2px) !important;
}

input[type="submit"][value*="Add Card"] {
background: var(--wpe-add-card) !important;
border: 1px solid var(--wpe-add-card) !important;
color: #ffffff !important;
box-shadow: 0 4px 14px rgba(0, 136, 255, 0.35) !important;
}

input[type="submit"][value*="Add Card"]:hover {
background: var(--wpe-add-card-hover) !important;
transform: translateY(-2px) !important;
}

@media (max-width: 575px) {
input[type="submit"][value*="Pay Now"],
input[type="submit"][value*="Add Card"] {
flex: 1 1 100% !important;
width: 100% !important;
}
}

/* ==========================================================================
6. Forms, Controls & Input Styling
========================================================================== */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
background-color: var(--wpe-input-bg) !important;
border: 1px solid var(--wpe-input-border) !important;
}

body.dark-mode .form-control,
body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode input[type="email"],
body.dark-mode input[type="number"],
body.dark-mode select,
body.dark-mode textarea {
color: #ffffff !important;
}

.form-control:focus {
border-color: var(--wpe-primary) !important;
box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.25) !important;
}

input[type='file'].form-control {
height: inherit;
margin-bottom: 5px;
}

.wpcf7 label {
font-weight: 400 !important;
}

input.wpcf7-submit {
border: none;
width: 100%;
margin-top: -5px;
padding-top: 5px;
padding-bottom: 5px;
font-weight: 400;
text-transform: capitalize;
}

.form-flat input:not([type=submit]),
.form-flat select,
.form-flat textarea {
background-color: var(--wpe-input-bg) !important;
border-color: var(--wpe-input-border) !important;
}

.wpcf-wrap {
min-height: 90px;
}

div.wpcf7-response-output {
width: 100%;
clear: both;
margin: 0;
}

.wpcf-accept {
clear: both;
}

/* ==========================================================================
7. Tables, Cards & Panel Components
========================================================================== */
.panel,
.card,
.list-group {
font-size: 0.9em;
}

.panel-body,
.card-body {
padding: 12px 15px;
}

.list-group-item {
border-color: var(--wpe-border-color);
padding: 10px 15px;
}

.list-group-item .badge,
.list-group-item span:not(.badge) {
color: #b0b0b0;
}

a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus,
.list-group-item.active {
background-color: var(--wpe-primary) !important;
border-color: var(--wpe-primary) !important;
color: #ffffff !important;
}

table,
.table {
color: var(--wpe-base) !important;
background-color: var(--wpe-card-bg);
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
border-color: var(--wpe-border-color) !important;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
background-color: #1a1a1a !important;
}

body.dark-mode .table-hover > tbody > tr:hover {
background-color: #2a2a2a !important;
}

/* Pagination & Badges */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus,
.page-item.active .page-link {
color: #ffffff !important;
background-color: var(--wpe-primary) !important;
border-color: var(--wpe-primary) !important;
}

.pagination > li > a,
.pagination > li > span,
.page-link {
background-color: var(--wpe-card-bg) !important;
border-color: var(--wpe-border-color) !important;
color: var(--wpe-base) !important;
}

.badge,
.label {
border-radius: 2px;
}

/* ==========================================================================
8. Grid Column & Form Layout Helpers (CF7 / Flatsome)
========================================================================== */
.full,
.one-half,
.one-third,
.two-third,
.one-fourth {
position: relative;
margin-right: 4%;
float: left;
margin-bottom: 10px;
}

.one-half   { width: 48%; }
.one-third  { width: 30.66%; }
.two-third  { width: 61.32%; }
.one-fourth { width: 22%; }
.full       { width: 100%; }

.last {
margin-right: 0 !important;
clear: right;
}

@media only screen and (max-width: 1024px) {
.full,
.one-fourth {
width: 100%;
margin-right: 0;
}
}

@media only screen and (max-width: 767px) {
.full,
.one-half,
.one-third,
.two-third {
width: 100%;
margin-right: 0;
}
}

/* ==========================================================================
9. Custom Sections & Interactive Components (TLD Marquee & Search)
========================================================================== */
.wpe-custom-section-a {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
padding-bottom: 0 !important;
}

.wpexpert-cta-wrapper {
display: flex;
align-items: center;
gap: 16px;
}

.wpexpert-cta-wrapper .button.is-large {
height: 45px !important;
display: inline-flex !important;
align-items: center !important;
box-sizing: border-box !important;
border-radius: 8px !important;
margin-top: 10px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}

/* Marquee & Domain Hero */
.wpe-domain-hero,
.wpe-domain-hero * {
box-sizing: border-box;
}

.wpe-domain-hero {
width: 100%;
padding: 10px 0;
}

.wpe-domain-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px;
width: 100%;
}

.wpe-domain-col {
flex: 1 1 calc(50% - 12px);
min-width: 0;
display: flex;
align-items: center;
}

.wpe-marquee-col { order: 1; }
.wpe-search-col  { order: 2; justify-content: flex-end; }

.wpe-marquee-wrapper {
overflow: hidden;
width: 100%;
background: transparent;
}

.wpe-marquee-track {
display: flex;
align-items: center;
width: max-content;
gap: 12px;
animation: wpe-marquee 40s linear infinite;
}

.wpe-marquee-track:hover {
animation-play-state: paused;
}

@keyframes wpe-marquee {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}

.wpe-tld-badge {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 14px;
background: #f8f9fa;
border-radius: 20px;
white-space: nowrap;
font-size: 14px;
line-height: 1;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.wpe-tld-badge .tld-item { font-weight: 600; color: #1a1a1a; }
.wpe-tld-badge .dots { color: var(--wpe-primary); }
.wpe-tld-badge .tld-price { color: #555; font-weight: 500; font-size: 13px; }

/* Domain Search Inputs */
.wpe-domain-search {
width: 100%;
max-width: 520px;
margin: 0;
}

.wpe-search-group {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
width: 100%;
margin: 0;
gap: 0;
}

.wpe-search-input {
flex: 1 1 auto;
width: auto !important;
min-width: 0;
height: 48px !important;
margin: 0 !important;
padding: 0 16px !important;
border: 1px solid #d0d5dd !important;
border-right: 0 !important;
border-radius: 6px 0 0 6px !important;
background: #fff !important;
box-shadow: none !important;
font-size: 16px !important;
line-height: 48px !important;
color: #1a1a1a;
}

button.wpe-search-btn {
flex: 0 0 auto;
height: 48px !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 22px !important;
border: 0 !important;
border-radius: 0 6px 6px 0 !important;
background: var(--wpe-primary) !important;
color: #fff !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-shadow: none !important;
box-shadow: none !important;
white-space: nowrap;
cursor: pointer;
display: inline-flex !important;
align-items: center;
justify-content: center;
}

button.wpe-search-btn:hover {
background: var(--wpe-primary-hover) !important;
}

@media (max-width: 849px) {
.wpe-domain-col {
flex: 1 1 100%;
}
.wpe-marquee-col { order: 1; }
.wpe-search-col  { order: 2; justify-content: stretch; }
.wpe-domain-search { max-width: none; }

.wpe-search-group {
flex-direction: column;
align-items: stretch;
gap: 10px;
}

.wpe-search-input {
width: 100% !important;
border-right: 1px solid #d0d5dd !important;
border-radius: 6px !important;
}

button.wpe-search-btn {
width: 100% !important;
border-radius: 6px !important;
}
}

/* ==========================================================================
10. Image & Performance Adjustments (LiteSpeed Lazy Loading)
========================================================================== */
img[data-lazyloaded] {
opacity: 0;
}

img.litespeed-loaded {
transition: opacity .5s linear 0.2s;
opacity: 1;
}

.btn.btn-primary.btn-custom-action.d-block.div-service-item {
    min-width: 160px !important;
}
}