/* =============================================================
   MORANDI — Modern Flat Client Area
   DM Sans · White content · Deep navy header · Morandi accents
   ============================================================= */

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

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --navy:        #1E3448;
  --navy-2:      #243D55;   /* brand bar */
  --navy-3:      #1A2D3E;   /* nav bar */
  --navy-text:   rgba(255,255,255,0.88);
  --navy-muted:  rgba(255,255,255,0.5);
  --navy-border: rgba(255,255,255,0.1);

  --primary:     #4A7FA5;
  --primary-h:   #3A6A8F;
  --primary-pale:#E8F2F8;
  --primary-bg:  #F0F6FA;

  --sage:        #6A9E72;
  --sage-h:      #578461;
  --sage-pale:   #EDF5EE;

  --rose:        #B97070;
  --rose-h:      #A05E5E;
  --rose-pale:   #F8EEED;

  --amber:       #B8934A;
  --amber-h:     #9A7A38;
  --amber-pale:  #FBF4E8;

  --sky:         #5A94B8;
  --sky-h:       #4A7EA0;
  --sky-pale:    #EAF3F9;

  --bg:          #FFFFFF;
  --bg-page:     #F4F6F8;
  --bg-alt:      #F8F9FA;
  --border:      #E2E6EA;
  --border-dark: #CDD2D8;

  --text:        #1A2330;
  --text-sub:    #5A6472;
  --text-mute:   #9AA3AD;
  --text-inv:    #FFFFFF;

  --radius:      6px;
  --radius-lg:   10px;
  --accent-w:    3px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }

html { font-size: 14px; }

body {
  font-family: 'DM Sans', 'Segoe UI', 'PingFang SC', sans-serif;
  background: var(--bg-page);
  color: var(--text);
  line-height: 1.6;
}
.primary-bg-color { background: var(--bg-page) !important; }

a            { color: var(--primary); transition: color .15s; }
a:hover      { color: var(--primary-h); text-decoration: none; }
hr           { border-color: var(--border) !important; }
h1,h2,h3,h4,h5,h6 { font-family: 'DM Sans', sans-serif; font-weight: 700; color: var(--text); }

/* ── Topbar ──────────────────────────────────────────────────── */
.topbar {
  background: var(--navy) !important;
  border-bottom: 1px solid var(--navy-border) !important;
  font-size: 12.5px;
  padding: 0;
  min-height: 36px;
}
.btn-topbar {
  color: var(--navy-muted) !important;
  font-size: 12.5px;
  padding: 0 0.75rem;
  line-height: 36px;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  transition: color .15s;
}
.btn-topbar:hover { color: var(--navy-text) !important; background: rgba(255,255,255,.06) !important; }
.topbar-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--rose); color: #fff;
  font-size: 10px; font-weight: 700;
  margin-left: 3px;
}
.topbar-user {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--navy-text) !important;
  font-size: 12.5px; font-weight: 500;
  padding: 0 1rem; line-height: 36px;
  text-decoration: none;
  border-left: 1px solid var(--navy-border);
}
.topbar-user:hover { background: rgba(255,255,255,.06); color: #fff !important; }
.topbar-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: 11px; font-weight: 700;
}

/* ── Brand bar ───────────────────────────────────────────────── */
.brand-bar {
  background: var(--navy-2) !important;
  padding: 0 !important;
  min-height: 58px;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.navbar-brand, .brand-text {
  color: #fff !important;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 58px;
  padding: 0;
}
.logo-img { max-height: 34px; }

/* Search in brand bar */
.search-group { position: relative; }
.search-input {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-right: none !important;
  color: #fff !important;
  border-radius: var(--radius) 0 0 var(--radius) !important;
  font-size: 13px;
  width: 340px;
  height: 36px;
  padding: 0 1rem;
  transition: background .15s, border-color .15s;
}
.search-input::placeholder { color: rgba(255,255,255,.45); }
.search-input:focus {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.35) !important;
}
.btn-search {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-left: none !important;
  color: rgba(255,255,255,.7) !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  padding: 0 .85rem;
  height: 36px;
}
.btn-search:hover { background: rgba(255,255,255,.2) !important; color: #fff !important; }

.btn-cart {
  position: relative;
  color: rgba(255,255,255,.75) !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: var(--radius) !important;
  padding: 0.35rem 0.75rem !important;
  font-size: 14px;
  transition: all .15s;
}
.btn-cart:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.cart-count {
  position: absolute; top: -5px; right: -5px;
  background: var(--rose); color: #fff;
  font-size: 10px; font-weight: 700;
  border-radius: 50%; width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
}
.btn-nav-toggle {
  color: rgba(255,255,255,.8) !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: var(--radius) !important;
  padding: .35rem .75rem !important;
}

/* ── Main navbar ─────────────────────────────────────────────── */
.main-navbar-wrapper {
  background: var(--navy-3) !important;
  padding: 0 !important;
  min-height: 44px;
  border-bottom: none !important;
}
.main-navbar-wrapper .navbar-nav { flex-wrap: nowrap; }
.main-navbar-wrapper .nav-link {
  color: var(--navy-muted) !important;
  font-size: 13px;
  font-weight: 500;
  padding: 0 1rem !important;
  line-height: 44px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.main-navbar-wrapper .nav-link:hover {
  color: var(--navy-text) !important;
  background: rgba(255,255,255,.05) !important;
}
.main-navbar-wrapper .nav-item.active > .nav-link,
.main-navbar-wrapper .nav-link.active {
  color: #fff !important;
  border-bottom-color: var(--primary) !important;
  background: rgba(255,255,255,.05) !important;
}
.main-navbar-wrapper .dropdown-menu {
  background: var(--navy-3) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  padding: .25rem 0;
  margin-top: 0;
}
.main-navbar-wrapper .dropdown-item {
  color: var(--navy-muted) !important;
  padding: .45rem 1rem;
  font-size: 13px;
}
.main-navbar-wrapper .dropdown-item:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--navy-text) !important;
}

/* ── Breadcrumb ──────────────────────────────────────────────── */
.master-breadcrumb {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border);
  padding: .5rem 0;
}
.breadcrumb {
  background: transparent !important;
  padding: .2rem 0;
  margin: 0;
  font-size: 12.5px;
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-mute); }
.breadcrumb-item a { color: var(--primary); }
.breadcrumb-item.active { color: var(--text-sub); }

/* ── Main content area ───────────────────────────────────────── */
#main-body {
  padding: 1.5rem 0 2rem;
  min-height: calc(100vh - 200px);
}

/* ── Sidebar ──────────────────────────────────────────────────── */
.sidebar-col { padding-right: .75rem; }

.sidebar {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  margin-bottom: 1rem;
}
.sidebar .panel, .sidebar .panel-default {
  border: none !important;
  border-radius: 0 !important;
  margin-bottom: 0;
}
.sidebar .panel-heading {
  background: var(--bg-alt) !important;
  border-bottom: 1px solid var(--border) !important;
  border-left: none !important;
  color: var(--text-sub) !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .65rem 1rem;
  border-radius: 0 !important;
}
.sidebar .list-group { border-radius: 0; }
.sidebar .list-group-item {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: .6rem 1rem;
  font-size: 13.5px;
  color: var(--text-sub) !important;
  background: var(--bg) !important;
  transition: background .12s, color .12s;
}
.sidebar .list-group-item:last-child { border-bottom: none !important; }
.sidebar .list-group-item i { margin-right: .5rem; opacity: .7; }
.sidebar .list-group-item:hover {
  background: var(--primary-bg) !important;
  color: var(--primary) !important;
}
.sidebar .list-group-item.active {
  background: var(--primary-pale) !important;
  color: var(--primary) !important;
  font-weight: 600;
  border-left: var(--accent-w) solid var(--primary) !important;
}
.sidebar .list-group-item.active i { opacity: 1; }

/* ── Cards ────────────────────────────────────────────────────── */
.card, .panel, .panel-default {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 1.5rem;
}
/* Remove extra border-left on panels inside sidebar */
.sidebar .panel { border-left: none !important; }

.card-header, .panel-heading {
  background: var(--bg-alt) !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: none !important;
  border-left: none !important;
  color: var(--text) !important;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .75rem 1.25rem;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0 !important;
}
.panel-success .panel-heading { color: var(--sage)  !important; }
.panel-danger  .panel-heading { color: var(--rose)  !important; }
.panel-warning .panel-heading { color: var(--amber) !important; }
.panel-info    .panel-heading { color: var(--sky)   !important; }

.card-body, .panel-body { padding: 1.25rem; color: var(--text); }
.card-footer {
  background: var(--bg-alt) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) !important;
  padding: .65rem 1.25rem;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radius);
  padding: .42rem 1.1rem;
  border-width: 1px;
  background-image: none !important;
  transition: background-color .15s, border-color .15s, color .15s;
  letter-spacing: .01em;
}
.btn-primary   { background: var(--primary) !important; border-color: var(--primary)!important; color:#fff!important; }
.btn-primary:hover { background: var(--primary-h)!important; border-color:var(--primary-h)!important; }
.btn-success   { background: var(--sage)   !important; border-color: var(--sage)   !important; color:#fff!important; }
.btn-success:hover { background: var(--sage-h)!important; border-color:var(--sage-h)!important; }
.btn-danger    { background: var(--rose)   !important; border-color: var(--rose)   !important; color:#fff!important; }
.btn-danger:hover  { background: var(--rose-h)!important; border-color:var(--rose-h)!important; }
.btn-warning   { background: var(--amber)  !important; border-color: var(--amber)  !important; color:#fff!important; }
.btn-warning:hover { background: var(--amber-h)!important; border-color:var(--amber-h)!important; }
.btn-info      { background: var(--sky)    !important; border-color: var(--sky)    !important; color:#fff!important; }
.btn-info:hover    { background: var(--sky-h)!important;  border-color:var(--sky-h)!important;  }
.btn-secondary { background: var(--bg-alt)!important; border-color:var(--border)!important; color:var(--text)!important; }
.btn-secondary:hover { background: var(--border)!important; }
.btn-default   { background: var(--bg-alt)!important; border-color:var(--border)!important; color:var(--text-sub)!important; }
.btn-default:hover { background: var(--border)!important; }
.btn-link      { color: var(--primary)!important; background: transparent!important; border-color:transparent!important; }
.btn-link:hover{ color: var(--primary-h)!important; }
.btn-outline-primary {
  background: transparent!important; border-color:var(--primary)!important; color:var(--primary)!important;
}
.btn-outline-primary:hover { background:var(--primary-pale)!important; }

/* ── Forms ────────────────────────────────────────────────────── */
.form-control {
  background: var(--bg)!important;
  border: 1px solid var(--border-dark)!important;
  border-radius: var(--radius)!important;
  color: var(--text)!important;
  font-size: 13.5px;
  height: calc(2.15rem + 2px);
  transition: border-color .15s;
}
.form-control:focus { border-color: var(--primary)!important; background: var(--bg)!important; }
.form-control::placeholder { color: var(--text-mute); }
.form-control:disabled,.form-control[readonly] { background:var(--bg-alt)!important; color:var(--text-mute)!important; }
.input-group-text {
  background: var(--bg-alt)!important;
  border: 1px solid var(--border-dark)!important;
  color: var(--text-sub)!important;
}
.custom-select {
  background: var(--bg)!important;
  border: 1px solid var(--border-dark)!important;
  border-radius: var(--radius)!important;
  color: var(--text)!important;
}
label { color: var(--text-sub); font-size: 13px; font-weight: 500; margin-bottom: .35rem; }
.form-group { margin-bottom: 1.1rem; }

/* ── Tables ───────────────────────────────────────────────────── */
.table { color: var(--text); font-size: 13.5px; }
.table thead th {
  background: var(--bg-alt)!important;
  border-top: none!important;
  border-bottom: 2px solid var(--primary)!important;
  color: var(--text-sub);
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .65rem .75rem; white-space: nowrap;
}
.table td, .table th { border-color: var(--border)!important; padding: .65rem .75rem; vertical-align: middle; color: var(--text); }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(74,127,165,.04)!important; }
.table-hover tbody tr:hover { background: var(--primary-pale)!important; }
.table-bordered,.table-bordered td,.table-bordered th { border-color: var(--border)!important; }

/* ── Alerts ───────────────────────────────────────────────────── */
.alert { border: none; border-left: 4px solid; border-radius: var(--radius); font-size: 13.5px; padding: .75rem 1rem; }
.alert-success { background:var(--sage-pale)!important;  border-left-color:var(--sage)!important;  color:#2D5E34!important; }
.alert-info    { background:var(--sky-pale)!important;   border-left-color:var(--sky)!important;   color:#24506A!important; }
.alert-warning { background:var(--amber-pale)!important; border-left-color:var(--amber)!important; color:#6A4A18!important; }
.alert-danger  { background:var(--rose-pale)!important;  border-left-color:var(--rose)!important;  color:#6A2424!important; }

/* ── Badges ───────────────────────────────────────────────────── */
.badge { font-weight:700; font-size:10.5px; border-radius:3px; padding:.2em .55em; letter-spacing:.03em; text-transform:uppercase; }
.badge-primary   { background:var(--primary)!important; color:#fff!important; }
.badge-success   { background:var(--sage)!important;    color:#fff!important; }
.badge-danger    { background:var(--rose)!important;    color:#fff!important; }
.badge-warning   { background:var(--amber)!important;   color:#fff!important; }
.badge-info      { background:var(--sky)!important;     color:#fff!important; }
.badge-secondary { background:var(--border)!important;  color:var(--text-sub)!important; }
.label { padding:.2em .55em; border-radius:3px; font-size:10.5px; font-weight:700; text-transform:uppercase; }
.label-success { background:var(--sage)!important;  color:#fff!important; }
.label-danger  { background:var(--rose)!important;  color:#fff!important; }
.label-warning { background:var(--amber)!important; color:#fff!important; }
.label-info    { background:var(--sky)!important;   color:#fff!important; }
.label-default { background:var(--border)!important;color:var(--text-sub)!important; }

/* ── Pagination ───────────────────────────────────────────────── */
.page-link {
  background:var(--bg)!important; border-color:var(--border)!important;
  color:var(--primary)!important; font-size:13px;
}
.page-link:hover { background:var(--primary-pale)!important; border-color:var(--primary)!important; }
.page-item.active .page-link { background:var(--primary)!important; border-color:var(--primary)!important; color:#fff!important; }
.page-item.disabled .page-link { background:var(--bg-alt)!important; color:var(--text-mute)!important; }

/* ── Dropdowns ────────────────────────────────────────────────── */
.dropdown-menu {
  background:var(--bg)!important; border:1px solid var(--border)!important;
  border-radius:var(--radius)!important; font-size:13.5px; padding:.25rem 0;
}
.dropdown-item { color:var(--text)!important; padding:.42rem 1rem; }
.dropdown-item:hover { background:var(--primary-pale)!important; color:var(--primary)!important; }
.dropdown-divider { border-color:var(--border)!important; }
.dropdown-header { color:var(--text-mute)!important; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }

/* ── Modals ───────────────────────────────────────────────────── */
.modal-content { background:var(--bg)!important; border:1px solid var(--border)!important; border-radius:var(--radius-lg)!important; }
.modal-header {
  background:var(--navy-2)!important; border-bottom:none!important;
  border-radius:calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0!important;
  padding:1rem 1.25rem;
}
.modal-title { color:#fff!important; font-weight:700; font-size:15px; }
.modal-header .close { color:rgba(255,255,255,.7)!important; opacity:1; }
.modal-footer { background:var(--bg-alt)!important; border-top:1px solid var(--border)!important; border-radius:0 0 calc(var(--radius-lg)-1px) calc(var(--radius-lg)-1px)!important; }
.modal-body { color:var(--text); }

/* ── Nav tabs ─────────────────────────────────────────────────── */
.nav-tabs { border-bottom:2px solid var(--border)!important; }
.nav-tabs .nav-link {
  color:var(--text-sub)!important; border:none!important;
  border-bottom:2px solid transparent!important; border-radius:0!important;
  padding:.6rem 1rem; margin-bottom:-2px; font-weight:500;
}
.nav-tabs .nav-link:hover { color:var(--primary)!important; background:transparent!important; border-bottom-color:var(--primary)!important; }
.nav-tabs .nav-link.active { color:var(--primary)!important; background:transparent!important; border-bottom:2px solid var(--primary)!important; font-weight:700; }

/* ── Progress bars ────────────────────────────────────────────── */
.progress { background:var(--bg-alt)!important; border-radius:2px; height:6px; border:1px solid var(--border)!important; }
.progress-bar { background:var(--primary)!important; background-image:none!important; }

/* ── Footer ───────────────────────────────────────────────────── */
#footer, .footer, footer {
  background: var(--navy) !important;
  border-top: none !important;
  padding: 1.25rem 0;
  margin-top: 2rem;
}
.footer-links a, footer a, #footer a { color: var(--navy-muted) !important; font-size: 13px; }
.footer-links a:hover, footer a:hover { color: #fff !important; }
.footer-sep { color: var(--navy-muted); margin: 0 .5rem; }
.footer-copy { color: var(--navy-muted); font-size: 12px; }
.footer-locale .btn-footer-locale {
  color: var(--navy-muted) !important; background: transparent !important;
  border: 1px solid var(--navy-border) !important; font-size: 12.5px;
  border-radius: var(--radius) !important; padding: .3rem .75rem !important;
}
.footer-locale .btn-footer-locale:hover { color: var(--navy-text) !important; border-color: rgba(255,255,255,.2) !important; }

/* ── List groups (general) ─────────────────────────────────────── */
.list-group-item {
  background:var(--bg)!important; border-color:var(--border)!important;
  color:var(--text)!important; font-size:13.5px; padding:.6rem 1rem;
}
.list-group-item:hover { background:var(--primary-pale)!important; color:var(--primary)!important; }
.list-group-item.active { background:var(--primary)!important; border-color:var(--primary)!important; color:#fff!important; font-weight:600; }

/* ── Misc utility ────────────────────────────────────────────── */
.bg-primary { background:var(--primary)!important; color:#fff!important; }
.bg-success { background:var(--sage)!important;    color:#fff!important; }
.bg-danger  { background:var(--rose)!important;    color:#fff!important; }
.bg-warning { background:var(--amber)!important;   color:#fff!important; }
.bg-info    { background:var(--sky)!important;     color:#fff!important; }
.bg-light   { background:var(--bg-alt)!important;  color:var(--text)!important; }
.bg-dark    { background:var(--navy)!important;    color:#fff!important; }
.bg-white   { background:var(--bg)!important;      color:var(--text)!important; }
.text-muted { color:var(--text-mute)!important; }
.text-primary { color:var(--primary)!important; }
.border     { border-color:var(--border)!important; }
.well       { background:var(--bg-alt)!important; border:1px solid var(--border)!important; border-radius:var(--radius); }
.card-deck .card { margin-bottom:1.5rem; }

/* ── Ticket replies ──────────────────────────────────────────── */
.ticket-reply { background:var(--bg)!important; border:1px solid var(--border)!important; border-radius:var(--radius); padding:1rem; margin-bottom:1rem; }
.ticket-reply-admin { background:var(--primary-pale)!important; border-left:var(--accent-w) solid var(--primary)!important; }

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg-alt); }
::-webkit-scrollbar-thumb { background:var(--border-dark); border-radius:3px; }

/* ================================================================
   DOMAIN SEARCH HERO
   ================================================================ */
.home-domain-search {
  background: var(--navy-2) !important;
  padding: 2.5rem 0 !important;
  margin-bottom: 0 !important;
}
.home-domain-search h2 {
  color: #fff !important;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.home-domain-search .form-control {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: var(--radius) 0 0 var(--radius) !important;
  color: #fff !important;
  font-size: 14px;
  height: 44px;
}
.home-domain-search .form-control::placeholder { color: rgba(255,255,255,.5); }
.home-domain-search .form-control:focus {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.4) !important;
}
.home-domain-search .btn-primary {
  height: 44px; border-radius: 0 !important;
  font-weight: 600; padding: 0 1.5rem !important;
}
.home-domain-search .btn-success {
  height: 44px; border-radius: 0 var(--radius) var(--radius) 0 !important;
  font-weight: 600; padding: 0 1.5rem !important;
}
.home-domain-search .btn-link { color: rgba(255,255,255,.65) !important; font-size: 12.5px; }
.home-domain-search .btn-link:hover { color: #fff !important; }
.home-domain-search label { color: rgba(255,255,255,.75) !important; }
.home-domain-search .tld-logos li { color: rgba(255,255,255,.7); font-size: 12px; }

/* ================================================================
   HOMEPAGE SECTIONS — Morandi card/icon layout
   ================================================================ */
.m-home-section { margin-bottom: 2.5rem; }

.m-section-title {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-sub);
  margin: 0 0 1.25rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--border);
  display: flex; align-items: center; gap: .5rem;
}
.m-section-title::before {
  content: '';
  display: inline-block;
  width: 3px; height: 1em;
  background: var(--primary);
  border-radius: 2px;
}

/* Product cards grid */
.m-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.m-product-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: border-color .15s;
}
.m-product-card:hover { border-top-color: var(--primary-h); }
.m-product-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--primary-pale);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  margin: 0 auto 1rem;
}
.m-product-card h3 {
  font-size: 1rem; font-weight: 700;
  color: var(--text); margin-bottom: .35rem;
}
.m-product-card p {
  font-size: 13px; color: var(--text-sub);
  margin-bottom: 1rem; min-height: 2.5em;
}
.m-product-card .btn { font-size: 13px; }

/* Icon grid */
.m-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .75rem;
}
.m-icon-card {
  display: flex; flex-direction: column; align-items: center;
  gap: .6rem; padding: 1.25rem .75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none !important;
  transition: transform .12s, border-color .15s;
  color: var(--text-sub) !important;
}
.m-icon-card:hover {
  transform: translateY(-2px);
  color: var(--text) !important;
}
.m-icon-card i {
  font-size: 1.5rem;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.m-icon-card span { font-size: 12.5px; font-weight: 600; text-align: center; }

/* Icon colour variants */
.m-accent-blue  i { background: var(--primary-pale); color: var(--primary); }
.m-accent-blue:hover  { border-color: var(--primary); }
.m-accent-blue:hover  i { background: var(--primary); color: #fff; }

.m-accent-rose  i { background: var(--rose-pale);    color: var(--rose); }
.m-accent-rose:hover  { border-color: var(--rose); }
.m-accent-rose:hover  i { background: var(--rose);  color: #fff; }

.m-accent-amber i { background: var(--amber-pale);   color: var(--amber); }
.m-accent-amber:hover { border-color: var(--amber); }
.m-accent-amber:hover i { background: var(--amber); color: #fff; }

.m-accent-sage  i { background: var(--sage-pale);    color: var(--sage); }
.m-accent-sage:hover  { border-color: var(--sage); }
.m-accent-sage:hover  i { background: var(--sage);  color: #fff; }

.m-accent-sky   i { background: var(--sky-pale);     color: var(--sky); }
.m-accent-sky:hover   { border-color: var(--sky); }
.m-accent-sky:hover   i { background: var(--sky);   color: #fff; }

.m-accent-navy  i { background: #E8EFF5;             color: var(--navy-2); }
.m-accent-navy:hover  { border-color: var(--navy-2); }
.m-accent-navy:hover  i { background: var(--navy-2); color: #fff; }

/* ── Hide old action-icon-btns if still rendered ── */
.action-icon-btns [class^="card-accent"],
.action-icon-btns [class*=" card-accent"] {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text-sub) !important;
}
.action-icon-btns .ico-container {
  background: var(--primary-pale) !important;
  color: var(--primary) !important;
  border: none !important;
}

/* ── Nav link fix — make text clearly visible ── */
.main-navbar-wrapper .nav-link { color: rgba(255,255,255,.82) !important; }
.main-navbar-wrapper .nav-link:hover { color: #fff !important; }

/* ── Domain search — fix textarea & captcha contrast ── */
.home-domain-search textarea,
.home-domain-search .advanced-input textarea {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: var(--radius) !important;
  color: #fff !important;
  min-height: 80px;
}
.home-domain-search textarea::placeholder { color: rgba(255,255,255,.5) !important; }
.home-domain-search textarea:focus {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.4) !important;
}

/* captcha + lower part of domain search */
.home-domain-search .input-group-wrapper { }
.home-domain-search > .container > .p-5 { background: transparent !important; }

/* captcha image wrapper */
.home-domain-search img[src*="captcha"],
.home-domain-search .captcha { filter: invert(0); opacity: .9; }

/* "查看所有價格" link */
.home-domain-search .btn-link,
.home-domain-search a.btn-link {
  color: rgba(255,255,255,.65) !important;
  font-size: 12.5px;
}
.home-domain-search .btn-link:hover { color: #fff !important; }

/* captcha input field */
.home-domain-search input[name="capd"],
.home-domain-search input[type="text"][id*="captcha"],
.home-domain-search input[class*="captcha"] {
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  color: #fff !important;
  border-radius: var(--radius) !important;
}

/* multiselect buttons inside domain search */
.home-domain-search .multiselect.dropdown-toggle,
.home-domain-search .btn-group > .btn {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.25) !important;
  color: rgba(255,255,255,.85) !important;
}
.home-domain-search .multiselect-container {
  background: var(--navy-3) !important;
  border-color: var(--navy-border) !important;
}
.home-domain-search .multiselect-container a { color: var(--navy-text) !important; }

/* checkbox label text */
.home-domain-search label,
.home-domain-search .checkbox label {
  color: rgba(255,255,255,.75) !important;
}

/* ── Nuclear fix: all form elements inside domain search dark ── */
.home-domain-search *:not(button):not(.btn):not(img) {
  background-color: transparent !important;
  color: rgba(255,255,255,.9) !important;
  border-color: rgba(255,255,255,.25) !important;
}
.home-domain-search textarea,
.home-domain-search input[type="text"],
.home-domain-search input[type="hidden"] {
  background: rgba(255,255,255,.1) !important;
}
.home-domain-search textarea { min-height: 70px; }
.home-domain-search .input-group,
.home-domain-search .input-group-wrapper,
.home-domain-search .advanced-input {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: var(--radius) !important;
  padding: .5rem !important;
}
.home-domain-search .btn-group > .multiselect.dropdown-toggle {
  background: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
}
.home-domain-search .multiselect-container.dropdown-menu {
  background: var(--navy-3) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}
.home-domain-search .multiselect-container li a,
.home-domain-search .multiselect-container li label {
  color: var(--navy-text) !important;
}
.home-domain-search .btn-primary,
.home-domain-search .btn-success {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.home-domain-search .btn-success {
  background: var(--sage) !important;
  border-color: var(--sage) !important;
}

/* ================================================================
   SIDEBAR CARDS (.card-sidebar) — collapsible panel headers
   ================================================================ */
.card-sidebar {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-left: none !important;        /* remove accent on sidebar container */
  border-radius: var(--radius-lg) !important;
  margin-bottom: .75rem !important;
  overflow: hidden;
}
.card-sidebar .card-header {
  background: var(--bg-alt) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: .6rem 1rem;
  cursor: pointer;
  border-radius: 0 !important;
}
.card-sidebar .card-header .card-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-sub) !important;
  margin: 0;
}
.card-sidebar .card-header .card-title i:first-child {
  color: var(--primary);
  margin-right: .4rem;
}
.card-sidebar .card-minimise {
  color: var(--text-mute) !important;
  font-size: 11px;
}
.card-sidebar .list-group-item {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: .55rem 1rem;
  font-size: 13px;
  color: var(--text-sub) !important;
  background: var(--bg) !important;
}
.card-sidebar .list-group-item:last-child { border-bottom: none !important; }
.card-sidebar .list-group-item:hover {
  background: var(--primary-pale) !important;
  color: var(--primary) !important;
}
.card-sidebar .list-group-item.active {
  background: var(--primary-pale) !important;
  color: var(--primary) !important;
  border-left: var(--accent-w) solid var(--primary) !important;
  font-weight: 600;
}
.sidebar-menu-item-icon { color: var(--text-mute); margin-right: .4rem; font-size: 13px; }
.list-group-item.active .sidebar-menu-item-icon { color: var(--primary); }
.sidebar-menu-item-label { flex: 1; }
.sidebar-menu-item-wrapper { display: flex; align-items: center; gap: .4rem; }
.sidebar-menu-item-badge .badge {
  background: var(--primary) !important;
  color: #fff !important;
  font-size: 10px;
}

/* ================================================================
   CAPTCHA — universal clean styling
   ================================================================ */
.captcha, [id*="captcha"], .captcha-wrapper,
div:has(> img[src*="captcha"]) {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
input[name="capd"], input[id*="captchaInput"],
.captcha + input, .captcha-input {
  width: 140px !important;
  border: 1px solid var(--border-dark) !important;
  border-radius: var(--radius) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  height: calc(2.15rem + 2px);
  padding: .375rem .75rem;
}

/* ================================================================
   FORM IMPROVEMENTS — global
   ================================================================ */
.form-group { margin-bottom: 1.1rem; }
.form-group label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: .3rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.form-control { height: calc(2.2rem + 2px); font-size: 13.5px; }
textarea.form-control { height: auto; }

/* ================================================================
   GENERAL CARD — ensure left accent shows everywhere
   ================================================================ */
.card:not(.card-sidebar):not(.modal-content):not(.kb-category) {
  border-left: var(--accent-w) solid var(--primary) !important;
}
.card.panel-success:not(.card-sidebar) { border-left-color: var(--sage)  !important; }
.card.panel-danger:not(.card-sidebar)  { border-left-color: var(--rose)  !important; }
.card.panel-warning:not(.card-sidebar) { border-left-color: var(--amber) !important; }
.card.panel-info:not(.card-sidebar)    { border-left-color: var(--sky)   !important; }

/* KB category cards — no left accent, hover border-top */
.kb-category {
  border-left: 1px solid var(--border) !important;
  border-top: 2px solid transparent !important;
  transition: border-top-color .15s !important;
}
.kb-category:hover { border-top-color: var(--primary) !important; }
.kb-category .card-body { padding: 1rem 1.25rem; }

/* ================================================================
   LOGIN PAGE
   ================================================================ */
.login-page, body.login-page #main-body {
  display: flex; align-items: center; min-height: 60vh;
}
/* Login card extra width */
#main-body .container > .row > .col-md-6,
#main-body .container > .col-md-6 {
  max-width: 480px; margin: 0 auto;
}

/* ================================================================
   ALERT.TPL — ensure info alert has proper Morandi blue
   ================================================================ */
.alert-info {
  background: var(--sky-pale) !important;
  border-left-color: var(--sky) !important;
  color: #1E4D6A !important;
}