/* ============================================================
   HostFe Custom Theme for HostBill 2030
   Brand: HostFe.com
   Primary:    #5A0A28  (Deep Maroon)
   Secondary:  #FFD600  (Yellow)
   Dark Text:  #1a3b5d
   Muted Text: #666666
   Border:     #E0E0E0
   Font:       Poppins
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --hf-primary:      #5A0A28;
  --hf-primary-dark: #4A0920;
  --hf-primary-deep: #3D0619;
  --hf-secondary:    #FFD600;
  --hf-secondary-dk: #E6C000;
  --hf-dark-text:    #1a3b5d;
  --hf-muted:        #666666;
  --hf-light:        #ffffff;
  --hf-border:       #E0E0E0;
  --hf-success:      #22c55e;
  --hf-bg:           #FFFFFF;
  --hf-primary-muted: rgba(90,10,40,0.08);

  /* Override HostBill bootstrap variables */
  --primary:   #5A0A28;
  --secondary: #9BA0B3;
  --warning:   #FFD600;
  --blue:      #5A0A28;
  --info:      #5A0A28;
}

/* ── Global Font & Body ────────────────────────────────────── */
/* NOTE: Do NOT use * { font-family } — it breaks Material Icons & FontAwesome.
   Instead target specific text elements only. */

body,
p, span, div, li, a, td, th, label, input, select, textarea, button,
h1, h2, h3, h4, h5, h6,
.nav-link, .dropdown-item, .btn, .form-control, .card, .alert,
.breadcrumb-item, .badge, .tooltip, .popover,
.sidebar .nav-item > .nav-link,
.navbar .navbar-body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Preserve icon fonts — Material Icons, FontAwesome must NOT be overridden */
.material-icons,
[class^="fa-"],
[class*=" fa-"],
.fa,
.fas,
.far,
.fal,
.fab,
.fad,
i.material-icons {
  font-family: 'Material Icons' !important;
  font-style: normal;
  font-weight: normal;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.fa, .fas, .far, .fal, .fab {
  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands' !important;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--hf-dark-text);
  background-color: var(--hf-bg);
  line-height: 1.6;
}

/* ── Links ─────────────────────────────────────────────────── */
a {
  color: var(--hf-primary);
  transition: color 0.3s ease;
}
a:hover,
a:focus {
  color: var(--hf-secondary-dk);
}

/* ── TOP NAVBAR ────────────────────────────────────────────── */
/* Left logo area — light grey background as requested */
.navbar .navbar-left {
  background-color: #EBECF0 !important;
  border-bottom: none;
  border-right: 1px solid #d8d9de;
}
.navbar .navbar-left .btn-left-navbar {
  color: var(--hf-primary) !important;
}
.navbar .navbar-left .btn-left-navbar:hover {
  color: var(--hf-primary-dark) !important;
  background-color: rgba(90,10,40,0.08) !important;
}

/* Top bar (white area) */
.navbar,
.navbar .navbar-body {
  background-color: var(--hf-light) !important;
  border-bottom: 1px solid var(--hf-border) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
}

/* Fix top-right login/register box — remove unwanted border/background */
.navbar .navbar-body .navbar-right,
.navbar .navbar-body .nav-item.nav-item-user,
.navbar .navbar-body .dropdown.nav-item,
.navbar-right .btn-group,
.navbar .user-menu,
.navbar .navbar-body > .navbar-nav:last-child,
.navbar .navbar-body .nav-item:last-child {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Remove any rectangular box artifacts in top navbar right area */
.navbar .navbar-body .dropdown-toggle::after {
  display: none !important;
}
.navbar .nav-item .nav-link,
.navbar .nav-item > a {
  border: none !important;
  background: transparent !important;
}

/* Navbar menu right items — remove the grey separator box look,
   use subtle border only between items */
.navbar .navbar-body .navbar-menu .nav-link {
  background: transparent !important;
  border-left: 1px solid var(--hf-border) !important;
  color: var(--hf-dark-text) !important;
}
.navbar .navbar-body .navbar-menu .nav-link:hover:not(.active):not(.disabled) {
  background: var(--hf-primary-muted) !important;
  color: var(--hf-primary) !important;
  opacity: 1 !important;
}
/* First nav-link in menu — remove left border to avoid double border */
.navbar .navbar-body .navbar-menu .nav-item:first-child .nav-link {
  border-left: none !important;
}


/* Navbar icons, dropdowns */
.navbar .navbar-body .nav-link,
.navbar .navbar-body .nav-item .nav-link {
  color: var(--hf-dark-text) !important;
  font-weight: 500;
  transition: color 0.3s ease;
}
.navbar .navbar-body .nav-link:hover {
  color: var(--hf-primary) !important;
}

/* Active nav underline indicator */
.navbar .navbar-body .nav-item.active .nav-link,
.navbar .navbar-body .nav-link.active {
  color: var(--hf-primary) !important;
}

/* Navbar badge / notification */
.navbar .badge-primary,
.navbar .bg-primary {
  background-color: #FFD600 !important;
  border-color: #FFD600 !important;
  color: var(--hf-dark-text) !important;
}

/* ── SIDEBAR ───────────────────────────────────────────────── */
/* Sidebar background — deep maroon matching HostFe footer/stats */
.sidebar {
  background-color: #3D0619 !important;
}
.sidebar .sidebar-wrap {
  background-color: #3D0619 !important;
}

/* Section headings in sidebar */
.sidebar .sidebar-heading {
  color: rgba(255,214,0,0.6) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
}

/* Nav items — default */
.sidebar .nav-item > .nav-link {
  color: rgba(255,255,255,0.65) !important;
  border-radius: 6px;
  margin: 3px 12px;
  padding: 9px 10px;
  transition: all 0.2s ease;
}
.sidebar .nav-item > .nav-link > .material-icons {
  color: rgba(255,255,255,0.5) !important;
}

/* Nav items — hover */
.sidebar .nav-item > .nav-link:hover:not(.active) {
  background-color: rgba(255,214,0,0.1) !important;
  color: #fff !important;
}
.sidebar .nav-item > .nav-link:hover:not(.active) > .material-icons {
  color: var(--hf-secondary) !important;
}

/* Nav items — ACTIVE (yellow accent, matching HostFe secondary) */
.sidebar .nav-item > .nav-link.active {
  background-color: var(--hf-secondary) !important;
  color: var(--hf-primary) !important;
  font-weight: 600 !important;
}
.sidebar .nav-item > .nav-link.active .material-icons {
  color: var(--hf-primary) !important;
}

/* Sub-nav (dropdown inside sidebar) */
.sidebar .nav-item .nav-subnav {
  background-color: #2e0412 !important;
}
.sidebar .nav-item .nav-subnav .nav-item > .nav-link {
  background-color: transparent !important;
  color: rgba(255,255,255,0.5) !important;
  padding-left: 3rem;
}
.sidebar .nav-item .nav-subnav .nav-item > .nav-link:hover:not(.active) {
  background-color: rgba(255,214,0,0.08) !important;
  color: rgba(255,255,255,0.85) !important;
}
.sidebar .nav-item .nav-subnav .nav-item > .nav-link.active {
  color: var(--hf-primary) !important;
  background-color: var(--hf-secondary) !important;
  font-weight: 600 !important;
}

/* Scrollbar in sidebar */
.sidebar .ps__rail-y,
.sidebar .ps__rail-x {
  background-color: #2e0412 !important;
}
.sidebar .ps__thumb-y,
.sidebar .ps__thumb-x {
  background-color: var(--hf-secondary) !important;
}

/* ── BUTTONS ───────────────────────────────────────────────── */
/* Primary button — maroon */
.btn-primary,
.btn-info {
  background-color: var(--hf-primary) !important;
  border-color: var(--hf-primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  letter-spacing: 0.3px;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 6px rgba(90,10,40,0.2) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: var(--hf-primary-dark) !important;
  border-color: var(--hf-primary-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(90,10,40,0.3) !important;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled):active {
  background-color: var(--hf-primary-deep) !important;
  border-color: var(--hf-primary-deep) !important;
}

/* Secondary / warning button — yellow */
.btn-warning {
  background-color: var(--hf-secondary) !important;
  border-color: var(--hf-secondary) !important;
  color: var(--hf-dark-text) !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 6px rgba(255,214,0,0.2) !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background-color: var(--hf-secondary-dk) !important;
  border-color: var(--hf-secondary-dk) !important;
  color: var(--hf-dark-text) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(255,214,0,0.3) !important;
}

/* Outline primary */
.btn-outline-primary,
.btn-outline-info {
  color: var(--hf-primary) !important;
  border-color: var(--hf-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-info:hover {
  background-color: var(--hf-primary) !important;
  border-color: var(--hf-primary) !important;
  color: #fff !important;
}

/* ── FORMS & INPUTS ────────────────────────────────────────── */
.form-control:focus {
  border-color: var(--hf-primary) !important;
  box-shadow: 0 0 0 3px rgba(90,10,40,0.1) !important;
  outline: none !important;
}

.form-control {
  border-radius: 6px !important;
  border-color: var(--hf-border) !important;
  color: var(--hf-dark-text) !important;
  font-size: 0.95rem !important;
  /* NOTE: Do NOT set padding here with !important — it breaks floating labels.
     HostBill's .form-label-group dynamically adjusts padding-top for label animation.
     Padding is intentionally left to HostBill's own CSS to handle. */
  transition: all 0.3s ease !important;
}

/* Fix floating label overlap: ensure form-label-group inputs respect
   HostBill's calculated padding for floating label animation */
.form-label-group .form-control {
  padding: 0.6rem 0.8rem !important;
}
.form-label-group.freeze .form-control,
.form-label-group input.form-control:focus,
.form-label-group select.form-control {
  padding-top: calc(0.6rem + 0.6rem * (2 / 3)) !important;
  padding-bottom: calc(0.6rem / 3) !important;
}
/* Ensure filled inputs (freeze class = has value) also show label above */
.form-label-group.freeze label.form-label-placeholder,
.form-label-group input.form-control:focus ~ label.form-label-placeholder,
.form-label-group select.form-control ~ label.form-label-placeholder {
  font-size: 70% !important;
  padding-top: calc(0.6rem / 3) !important;
  padding-bottom: calc(0.6rem / 3) !important;
  color: var(--hf-primary) !important;
}
/* Label default state — sits as placeholder */
.form-label-group label.form-label-placeholder {
  color: #AFB2C1 !important;
  font-size: 1rem !important;
}

/* Custom checkboxes / radios */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--hf-primary) !important;
  border-color: var(--hf-primary) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px rgba(90,10,40,0.15) !important;
}

/* Input group addon */
.input-group-text {
  background-color: var(--hf-primary-muted) !important;
  border-color: var(--hf-border) !important;
  color: var(--hf-primary) !important;
  font-weight: 500;
}

/* Select (chosen / selectize) */
.chosen-container .chosen-results li.highlighted,
.selectize-dropdown [data-selectable].option.active {
  background-color: var(--hf-primary) !important;
  color: #fff !important;
}
.chosen-container-single .chosen-single {
  border-color: var(--hf-border) !important;
  border-radius: 6px !important;
}
.chosen-container-single .chosen-single:focus,
.chosen-container-active .chosen-single {
  border-color: var(--hf-primary) !important;
  box-shadow: 0 0 0 3px rgba(90,10,40,0.1) !important;
}

/* ── CARDS ─────────────────────────────────────────────────── */
.card {
  border-radius: 10px !important;
  border-color: var(--hf-border) !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.06) !important;
  transition: all 0.3s ease !important;
}
.card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.12) !important;
  border-color: var(--hf-secondary) !important;
  transform: translateY(-3px);
}

/* ── ROOT / PORTAL HOME CARDS (Place New Order, Client Area, Support) ── */
/* Force white background regardless of any bg-primary class HostBill may add */
.root-boxes .root-box,
.root-boxes .root-box.bg-primary,
.root-boxes .root-box.card {
  background-color: #ffffff !important;
  color: var(--hf-dark-text) !important;
  border: 1px solid var(--hf-border) !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.06) !important;
}
/* Icon and text inside root-box */
.root-boxes .root-box .material-icons,
.root-boxes .root-box .text-primary {
  color: var(--hf-primary) !important;
}
.root-boxes .root-box h4 {
  color: var(--hf-dark-text) !important;
}
.root-boxes .root-box span {
  color: var(--hf-muted) !important;
}
/* Hover state — maroon bg, white content */
.root-boxes .root-box:hover {
  background-color: var(--hf-primary) !important;
  border-color: var(--hf-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(90,10,40,0.2) !important;
  transform: translateY(-4px);
}
.root-boxes .root-box:hover .material-icons,
.root-boxes .root-box:hover .text-primary,
.root-boxes .root-box:hover h4,
.root-boxes .root-box:hover span {
  color: #ffffff !important;
}
.card-header {
  background-color: var(--hf-bg) !important;
  border-bottom: 2px solid var(--hf-secondary) !important;
  font-weight: 600 !important;
  color: var(--hf-dark-text) !important;
  border-radius: 10px 10px 0 0 !important;
}
.card-title {
  color: var(--hf-primary) !important;
  font-weight: 700 !important;
}

/* ── TABLES ────────────────────────────────────────────────── */
.table thead th {
  background-color: var(--hf-primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-color: var(--hf-primary-dark) !important;
  letter-spacing: 0.3px;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--hf-primary-muted) !important;
}
.table tbody tr:hover {
  background-color: rgba(90,10,40,0.04) !important;
}
.table td,
.table th {
  border-color: var(--hf-border) !important;
  color: var(--hf-dark-text) !important;
}
.table-primary,
.table-primary > th,
.table-primary > td {
  background-color: rgba(90,10,40,0.12) !important;
  color: var(--hf-primary) !important;
}

/* ── ALERTS ────────────────────────────────────────────────── */
.alert-primary,
.alert-info {
  color: var(--hf-primary) !important;
  background-color: rgba(90,10,40,0.08) !important;
  border-color: rgba(90,10,40,0.2) !important;
}
.alert-warning {
  color: #6b4a00 !important;
  background-color: #fffae0 !important;
  border-color: #ffe066 !important;
}
.alert-success {
  color: #166534 !important;
  background-color: #dcfce7 !important;
  border-color: #bbf7d0 !important;
}
.alert-danger {
  color: #991b1b !important;
  background-color: #fee2e2 !important;
  border-color: #fecaca !important;
}

/* ── BADGES ────────────────────────────────────────────────── */
.badge-primary,
.badge-info {
  background-color: var(--hf-primary) !important;
  color: #fff !important;
}
.badge-warning {
  background-color: var(--hf-secondary) !important;
  color: var(--hf-dark-text) !important;
}
.badge-success {
  background-color: var(--hf-success) !important;
  color: #fff !important;
}

/* ── TABS / NAV PILLS ──────────────────────────────────────── */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--hf-primary) !important;
  color: #fff !important;
  font-weight: 600;
}
.nav-pills .nav-link {
  color: var(--hf-dark-text) !important;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-weight: 500;
}
.nav-pills .nav-link:hover:not(.active) {
  background-color: var(--hf-primary-muted) !important;
  color: var(--hf-primary) !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--hf-primary) !important;
  border-bottom: 3px solid var(--hf-secondary) !important;
  font-weight: 600 !important;
  border-top: 1px solid var(--hf-border);
  border-left: 1px solid var(--hf-border);
  border-right: 1px solid var(--hf-border);
}
.nav-tabs .nav-link {
  color: var(--hf-muted) !important;
  font-weight: 500;
  transition: all 0.2s ease;
}
.nav-tabs .nav-link:hover {
  color: var(--hf-primary) !important;
  border-color: var(--hf-border) var(--hf-border) transparent !important;
}
.nav-tabs {
  border-bottom: 2px solid var(--hf-border) !important;
}

/* ── PAGINATION ────────────────────────────────────────────── */
.page-item.active .page-link {
  background-color: var(--hf-primary) !important;
  border-color: var(--hf-primary) !important;
  color: #fff !important;
  font-weight: 600;
}
.page-link {
  color: var(--hf-primary) !important;
  border-color: var(--hf-border) !important;
  transition: all 0.2s ease;
}
.page-link:hover {
  background-color: var(--hf-primary-muted) !important;
  color: var(--hf-primary) !important;
}

/* ── MODALS ────────────────────────────────────────────────── */
.modal-header {
  background-color: var(--hf-primary) !important;
  color: #fff !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
}
.modal-header .modal-title {
  color: #fff !important;
  font-weight: 700 !important;
}
.modal-header .close,
.modal-header button.close {
  color: rgba(255,255,255,0.8) !important;
  opacity: 1;
}
.modal-header .close:hover {
  color: var(--hf-secondary) !important;
}
.modal-content {
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
}
.modal-footer {
  border-top: 1px solid var(--hf-border) !important;
}

/* ── DROPDOWNS ─────────────────────────────────────────────── */
.dropdown-menu {
  border-radius: 8px !important;
  border: 1px solid var(--hf-border) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
  padding: 8px 0 !important;
}
.dropdown-item {
  color: var(--hf-dark-text) !important;
  font-weight: 400;
  padding: 10px 20px !important;
  transition: all 0.2s ease !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--hf-primary-muted) !important;
  color: var(--hf-primary) !important;
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--hf-primary) !important;
  color: #fff !important;
}
.dropdown-divider {
  border-color: var(--hf-border) !important;
}
.dropdown-header {
  color: var(--hf-muted) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── BREADCRUMBS ───────────────────────────────────────────── */
.breadcrumb {
  background-color: transparent !important;
  padding: 8px 0 !important;
}
.breadcrumb-item a {
  color: var(--hf-primary) !important;
  font-weight: 500;
}
.breadcrumb-item.active {
  color: var(--hf-muted) !important;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--hf-muted) !important;
}

/* ── PROGRESS BARS ─────────────────────────────────────────── */
.progress-bar {
  background-color: var(--hf-primary) !important;
}
.progress-bar.bg-warning {
  background-color: var(--hf-secondary) !important;
}
.progress-bar.bg-success {
  background-color: var(--hf-success) !important;
}
.progress {
  border-radius: 50px !important;
  background-color: var(--hf-border) !important;
}

/* ── LIST GROUPS ───────────────────────────────────────────── */
.list-group-item.active {
  background-color: var(--hf-primary) !important;
  border-color: var(--hf-primary) !important;
  color: #fff !important;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--hf-primary-muted) !important;
  color: var(--hf-primary) !important;
}

/* ── INVOICE / BILLING SECTION ─────────────────────────────── */
.invoice-header,
.invoice-title {
  color: var(--hf-primary) !important;
  font-weight: 700 !important;
}
.invoice-total,
.total-amount {
  color: var(--hf-primary) !important;
  font-weight: 700 !important;
}

/* ── SECTION TITLES (matching HostFe style) ────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--hf-dark-text);
  font-weight: 700;
}

.section-title,
.panel-title,
.card-title,
.widget-title {
  color: var(--hf-primary) !important;
  font-weight: 700 !important;
  position: relative;
  display: inline-block;
}

/* Yellow underline accent on section titles */
.page-header h1,
.page-header h2 {
  color: var(--hf-primary) !important;
  font-weight: 700 !important;
  padding-bottom: 12px !important;
  border-bottom: 4px solid var(--hf-secondary) !important;
  display: inline-block !important;
}

/* ── TOP NOTIFICATION BAR (like HostFe announcement banner) ── */
.notice-bar,
.announcement,
.top-alert {
  background-color: var(--hf-secondary) !important;
  color: var(--hf-dark-text) !important;
  font-weight: 600;
}

/* ── FOOTER ────────────────────────────────────────────────── */
.footer-content,
.footer,
footer {
  background-color: var(--hf-primary) !important;
  color: rgba(255,255,255,0.85) !important;
}
.footer a,
footer a {
  color: rgba(255,255,255,0.8) !important;
  transition: color 0.3s ease;
}
.footer a:hover,
footer a:hover {
  color: var(--hf-secondary) !important;
}
.footer .text-muted {
  color: rgba(255,255,255,0.6) !important;
}

/* ── BG UTILITY OVERRIDES ──────────────────────────────────── */
.bg-primary {
  background-color: var(--hf-primary) !important;
  color: #fff !important;
}
.bg-secondary {
  background-color: #9BA0B3 !important;
}
.bg-warning {
  background-color: var(--hf-secondary) !important;
  color: var(--hf-dark-text) !important;
}
.bg-info {
  background-color: var(--hf-primary) !important;
  color: #fff !important;
}
.bg-dark {
  background-color: var(--hf-dark-text) !important;
}

/* Text utility overrides */
.text-primary,
.text-info {
  color: var(--hf-primary) !important;
}
.text-warning {
  color: #b8860b !important;
}
.text-success {
  color: var(--hf-success) !important;
}
.text-muted {
  color: var(--hf-muted) !important;
}

/* ── CHECKLIST ICONS (matching HostFe green checks) ────────── */
.fa-check,
.fa-check-circle,
.material-icons.text-success {
  color: var(--hf-success) !important;
}

/* ── LOADING / SPINNER ─────────────────────────────────────── */
.spinner-border.text-primary,
.spinner-grow.text-primary {
  color: var(--hf-primary) !important;
}

/* ── DOMAIN SEARCH INPUT (order pages) ─────────────────────── */
.domain-search-form input[type="text"],
.domain-search input {
  border: 1px solid var(--hf-border) !important;
  border-radius: 6px !important;
  padding: 14px 20px !important;
  font-size: 1rem !important;
  transition: all 0.3s ease !important;
}
.domain-search-form input:focus,
.domain-search input:focus {
  border-color: var(--hf-primary) !important;
  box-shadow: 0 0 0 3px rgba(90,10,40,0.1) !important;
}
.domain-search-form .btn,
.domain-search .btn {
  background-color: var(--hf-primary) !important;
  border-color: var(--hf-primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 14px 28px !important;
  border-radius: 4px !important;
}
.domain-search-form .btn:hover,
.domain-search .btn:hover {
  background-color: var(--hf-primary-dark) !important;
  transform: translateY(-2px);
}

/* Available domain result */
.domain-result-available {
  color: var(--hf-success) !important;
  font-weight: 600;
}
.domain-result-unavailable {
  color: #D9252E !important;
}

/* Domain price / TLD tags */
.domain-tag,
.tld-tag {
  color: var(--hf-primary) !important;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
}
.domain-tag:hover,
.tld-tag:hover {
  color: var(--hf-secondary) !important;
}

/* ── PRICING / PACKAGE CARDS ───────────────────────────────── */
.order-package,
.package-card,
.pricing-card {
  background-color: var(--hf-bg) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
  border: 1px solid var(--hf-border) !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}
.order-package:hover,
.package-card:hover,
.pricing-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.14) !important;
  border-color: var(--hf-secondary) !important;
}

/* Package header banner */
.order-package .package-header,
.package-header {
  background-color: var(--hf-primary) !important;
  color: #fff !important;
  padding: 25px 20px !important;
  text-align: center;
}
.order-package .package-header h3,
.order-package .package-header .plan-name {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
}

/* Package price */
.order-package .package-price,
.plan-price,
.price-amount {
  font-size: 2.8rem !important;
  font-weight: 700 !important;
  color: var(--hf-dark-text) !important;
}
.order-package .price-period,
.price-period {
  color: var(--hf-muted) !important;
  font-size: 0.9rem !important;
}

/* Package CTA tag (e.g. "Most Popular") */
.package-tag,
.most-popular-badge,
.label-popular {
  background-color: var(--hf-secondary) !important;
  color: var(--hf-dark-text) !important;
  font-weight: 600 !important;
  border-radius: 0 0 0 10px !important;
  padding: 6px 14px !important;
  font-size: 0.78rem !important;
}

/* ── STATS / COUNTER BAR ────────────────────────────────────── */
.stats-section,
.stats-bar,
.counter-section {
  background-color: var(--hf-primary) !important;
  color: #fff !important;
}
.stats-section h1,
.stats-section h2,
.stats-section h3,
.counter-number {
  color: #fff !important;
  font-weight: 700 !important;
}
.stats-section p,
.counter-label {
  color: rgba(255,255,255,0.8) !important;
}

/* ── DASHBOARD QUICK ACTIONS ───────────────────────────────── */
.quick-actions .btn,
.quick-action-btn {
  background-color: var(--hf-primary-muted) !important;
  color: var(--hf-primary) !important;
  border: 1px solid rgba(90,10,40,0.15) !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}
.quick-actions .btn:hover,
.quick-action-btn:hover {
  background-color: var(--hf-primary) !important;
  color: #fff !important;
  border-color: var(--hf-primary) !important;
}

/* ── FAQs (accordion) ──────────────────────────────────────── */
.faq-item,
.accordion-item {
  border: 1px solid var(--hf-border) !important;
  border-radius: 8px !important;
  margin-bottom: 12px !important;
  overflow: hidden;
}
.faq-question,
.accordion-header button,
.accordion-button {
  background-color: var(--hf-bg) !important;
  color: var(--hf-dark-text) !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background-color 0.2s ease !important;
}
.faq-question:hover,
.accordion-button:hover {
  background-color: #f9f9f9 !important;
}
.faq-item.active .faq-question,
.accordion-button:not(.collapsed) {
  background-color: #f9f9f9 !important;
  color: var(--hf-primary) !important;
}
.accordion-button:not(.collapsed)::after {
  filter: none !important;
}

/* ── TESTIMONIAL CARDS ─────────────────────────────────────── */
.testimonial-card {
  background-color: var(--hf-bg) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
  transition: all 0.3s ease !important;
}
.testimonial-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.12) !important;
}
.testimonial-author h4 {
  color: var(--hf-primary) !important;
  font-weight: 700 !important;
}

/* ── FEATURE CARDS ─────────────────────────────────────────── */
.feature-card {
  background-color: var(--hf-bg) !important;
  border-radius: 8px !important;
  border: 1px solid var(--hf-border) !important;
  padding: 35px 25px !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
}
.feature-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 18px 30px rgba(0,0,0,0.1) !important;
  border-color: var(--hf-secondary) !important;
}
.feature-card .feature-icon,
.feature-icon svg,
.feature-card i {
  color: var(--hf-primary) !important;
  transition: all 0.3s ease !important;
}
.feature-card:hover .feature-icon,
.feature-card:hover svg,
.feature-card:hover i {
  color: var(--hf-secondary) !important;
  transform: scale(1.15) !important;
}

/* ── LOGIN PAGE ─────────────────────────────────────────────── */
.login-page .card,
.login-card {
  border-radius: 10px !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.12) !important;
}
.login-page .card-header,
.login-card .card-header {
  background-color: var(--hf-primary) !important;
  color: #fff !important;
  text-align: center;
  padding: 25px !important;
  border-radius: 10px 10px 0 0 !important;
}
.login-page .card-header .logo img,
.login-card .logo img {
  max-height: 50px;
}

/* ── NOTIFICATION DROPDOWN ─────────────────────────────────── */
.notification-item:hover {
  background-color: var(--hf-primary-muted) !important;
}
.notification-unread {
  border-left: 3px solid var(--hf-primary) !important;
}

/* ── TICKETS / SUPPORT ─────────────────────────────────────── */
.ticket-status-open {
  color: var(--hf-primary) !important;
  font-weight: 600;
}
.ticket-reply-staff {
  background-color: var(--hf-primary-muted) !important;
  border-left: 4px solid var(--hf-primary) !important;
  border-radius: 0 8px 8px 0 !important;
}

/* ── ORDER WIZARD STEPS ─────────────────────────────────────── */
.wizard-steps .step.active,
.order-progress .step.current {
  background-color: var(--hf-primary) !important;
  color: #fff !important;
  border-color: var(--hf-primary) !important;
}
.wizard-steps .step.completed,
.order-progress .step.done {
  background-color: var(--hf-success) !important;
  border-color: var(--hf-success) !important;
}
.wizard-steps .step-number {
  background-color: var(--hf-primary) !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 50%;
}

/* ── WAVE / BANNER SECTIONS ─────────────────────────────────── */
.wave-banner,
.cta-banner {
  background-color: var(--hf-secondary) !important;
  color: var(--hf-dark-text) !important;
}
.wave-banner h2,
.cta-banner h2,
.wave-banner .discount-text {
  color: var(--hf-dark-text) !important;
  font-weight: 700 !important;
}

/* ── SCROLLBAR (global) ─────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb {
  background: var(--hf-primary);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--hf-primary-dark);
}

/* ── MISCELLANEOUS ──────────────────────────────────────────── */
/* Focus ring */
*:focus {
  outline-color: var(--hf-secondary) !important;
}

/* Horizontal rule */
hr {
  border-color: var(--hf-border) !important;
}

/* Selection highlight */
::selection {
  background-color: var(--hf-secondary) !important;
  color: var(--hf-dark-text) !important;
}

/* Tooltips */
.tooltip .tooltip-inner {
  background-color: var(--hf-primary) !important;
  color: #fff !important;
  font-size: 0.85rem;
  border-radius: 6px !important;
  padding: 6px 12px !important;
}
.tooltip.bs-tooltip-top .arrow::before {
  border-top-color: var(--hf-primary) !important;
}
.tooltip.bs-tooltip-bottom .arrow::before {
  border-bottom-color: var(--hf-primary) !important;
}

/* Popovers */
.popover-header {
  background-color: var(--hf-primary) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 6px 6px 0 0 !important;
}
.popover {
  border: 1px solid var(--hf-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* Close buttons */
.close,
button.close {
  color: var(--hf-primary) !important;
  opacity: 0.7;
  transition: all 0.2s ease !important;
}
.close:hover,
button.close:hover {
  color: var(--hf-primary) !important;
  opacity: 1;
}

/* Floating support ticket button */
.floating-ticket-btn {
  background-color: var(--hf-primary) !important;
  color: #fff !important;
  border-radius: 30px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 10px rgba(90,10,40,0.3) !important;
  transition: all 0.3s ease !important;
}
.floating-ticket-btn:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 18px rgba(90,10,40,0.4) !important;
  color: #fff !important;
}

/* WhatsApp float button (keep green) */
.whatsapp-float {
  background-color: #25d366 !important;
}

/* ── RESPONSIVE FIXES ───────────────────────────────────────── */
@media (max-width: 993px) {
  /* Mobile sidebar toggler color */
  .navbar .navbar-toggler-icon,
  .navbar .menu-icon {
    color: var(--hf-primary) !important;
  }

  /* Mobile dropdown */
  .dropdown-content {
    background-color: var(--hf-bg) !important;
    border: 1px solid var(--hf-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
  }
  .dropdown-content a {
    color: var(--hf-dark-text) !important;
    border-bottom: 1px solid var(--hf-border) !important;
  }
  .dropdown-content a:hover {
    background-color: #f9f9f9 !important;
    color: var(--hf-primary) !important;
  }
}

/* ── ORDER PAGES (cart_2030wizard / domain_2030) ────────────── */
.cart-header,
.orderpage-header {
  background-color: var(--hf-primary) !important;
  color: #fff !important;
}
.cart-progress .step.active {
  background-color: var(--hf-secondary) !important;
  color: var(--hf-dark-text) !important;
  font-weight: 700 !important;
}
.cart-progress .step.done {
  background-color: var(--hf-success) !important;
  color: #fff !important;
}
.cart-summary {
  border: 1px solid var(--hf-border) !important;
  border-radius: 10px !important;
}
.cart-summary .cart-summary-header {
  background-color: var(--hf-primary) !important;
  color: #fff !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 15px 20px !important;
  font-weight: 600 !important;
}
.cart-total-row {
  font-weight: 700 !important;
  color: var(--hf-primary) !important;
  font-size: 1.1rem !important;
}

/* Domain TLD pricing table */
.domain-pricing-table th {
  background-color: var(--hf-primary) !important;
  color: #fff !important;
}
.domain-pricing-table tr:hover td {
  background-color: var(--hf-primary-muted) !important;
}

/* Add to cart button */
.btn-add-to-cart,
.btn-order-now,
a[href*="cart"],
button[name*="order"] {
  background-color: var(--hf-primary) !important;
  border-color: var(--hf-primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
}
.btn-add-to-cart:hover,
.btn-order-now:hover {
  background-color: var(--hf-primary-dark) !important;
  transform: translateY(-2px) !important;
}

/* ── ORDER PAGE BLUE FIXES ──────────────────────────────────── */

/* Domain panel — bg-gradient-primary full maroon override */
.bg-gradient-primary,
.mobile-domian-firendly,
.p-4.bg-gradient-primary {
  background: linear-gradient(135deg, #FFD600 0%, #3D0619 100%) !important;
}

/* "Order" dropdown button in top navbar — change from green to maroon */
.navbar .navbar-body .navbar-menu .button-add-service,
.navbar .button-add-service,
.navbar .btn-success.button-add-service,
.navbar .navbar-menu a.button-add-service,
.navbar .navbar-menu .btn.button-add-service {
  background-color: var(--hf-primary) !important;
  border-color: var(--hf-primary) !important;
  color: #ffffff !important;
}
.navbar .navbar-body .navbar-menu .button-add-service:hover {
  background-color: var(--hf-primary-dark) !important;
  border-color: var(--hf-primary-dark) !important;
}

/* Step progress tabs — active underline border */
.step-box.active,
.step-box.active.text-primary,
.step-box.border-primary {
  color: var(--hf-primary) !important;
  border-color: var(--hf-primary) !important;
}

/* Transfer / Register / Already Have toggle buttons */
.domain-option .btn-primary,
.domain-option .btn-outline-primary.active,
.domain-option .btn-outline-primary:active,
#options .btn-primary,
#options label.active {
  background-color: var(--hf-primary) !important;
  border-color: var(--hf-primary) !important;
  color: #ffffff !important;
}
.domain-option .btn-outline-primary,
#options label {
  color: var(--hf-primary) !important;
  border-color: var(--hf-primary) !important;
}
.domain-option .btn-outline-primary:hover {
  background-color: var(--hf-primary) !important;
  color: #ffffff !important;
}

/* Domain search results & add buttons */
.btn-outline-primary.domain-register,
.btn-outline-primary.domain-transfer,
.btn-outline-primary.domain-loading {
  color: var(--hf-primary) !important;
  border-color: var(--hf-primary) !important;
}
.btn-outline-primary.domain-register:hover,
.btn-outline-primary.domain-transfer:hover {
  background-color: var(--hf-primary) !important;
  color: #ffffff !important;
}

/* Cart preloader lines */
.cart_preloader_line.bg-primary {
  background-color: var(--hf-primary) !important;
}

/* Progress-indicator active underline (step tabs) */
#progress-indicator .progress-el.active,
#progress-indicator .active {
  border-bottom-color: var(--hf-primary) !important;
  color: var(--hf-primary) !important;
}

/* Any remaining Bootstrap blue utilities */
.text-primary { color: var(--hf-primary) !important; }
.bg-primary    { background-color: var(--hf-primary) !important; }
.border-primary { border-color: var(--hf-primary) !important; }

/* ── a.png: Pricing / Package Card Header → Yellow background ── */
.order-package .package-header,
.package-header,
.pricing-card .card-header,
.plan-header,
.product-header {
  background-color: #FFD600 !important;
  color: var(--hf-dark-text) !important;
}
.order-package .package-header h3,
.order-package .package-header .plan-name,
.package-header h3,
.package-header .plan-name,
.plan-header h3,
.product-header h3 {
  color: var(--hf-dark-text) !important;
}

/* ── b.png: Cart badge / cart button in navbar → Yellow background ── */
.navbar .cart-btn,
.navbar .btn-cart,
.navbar a[href*="cart"],
.navbar .nav-item a[href*="cart"],
.navbar .shopping-cart,
.navbar .cart-count,
.navbar .navbar-menu .cart-icon,
.button-cart,
a.button-cart,
.btn.button-cart {
  background-color: #FFD600 !important;
  border-color: #FFD600 !important;
  color: var(--hf-dark-text) !important;
}

/* ── Pricing card wave SVG fill → yellow ─────────────────────────── */
.bg-primary-svg > path {
    fill: #FFD600 !important;
}

/* Card wave background area override */
.orderpage .card .card-wave,
.card-wave {
    background-color: #FFD600 !important;
}

/* Text on yellow wave must be dark */
.orderpage .card .card-top .text-white,
.orderpage .card .card-top h1.text-white,
.orderpage .card .card-top .card-price.text-white,
.orderpage .card .card-top small.text-white {
    color: #1a3b5d !important;
}

/* ── cart_2030wizard Order button → yellow border + dark text ─────── */
.orderpage .btn-order,
.orderpage .btn-order:hover,
.orderpage a.btn-order {
    border-color: #FFD600 !important;
    color: #1a3b5d !important;
}