/* Horaffi theme override — keeps ClientExec core markup and behavior intact. */
:root {
  --primary: #7467f0;
  --primary-hover: #6254e7;
  --hf-bg: #08111f;
  --hf-panel: #111d30;
  --hf-panel-2: #15243a;
  --hf-border: rgba(255,255,255,.10);
  --hf-text: #f5f7fb;
  --hf-muted: #9eacc2;
  --hf-accent: #4db8ff;
  --hf-success: #39d98a;
  --hf-shadow: 0 20px 55px rgba(0,0,0,.25);
}

html, body { min-height: 100%; }
body {
  color: var(--hf-text);
  background:
    radial-gradient(circle at 85% 0, rgba(116,103,240,.15), transparent 32rem),
    radial-gradient(circle at 5% 45%, rgba(77,184,255,.08), transparent 28rem),
    var(--hf-bg);
}

h1,h2,h3,h4,h5,h6 { color: var(--hf-text); }
a { color: #77caff; }
a:hover { color: #a9dcff; }

.header {
  background: rgba(8,17,31,.88) !important;
  border-bottom: 1px solid var(--hf-border);
  box-shadow: 0 10px 35px rgba(0,0,0,.18);
  backdrop-filter: blur(16px);
}
.header .main-meta { background: transparent !important; }
.header .container { max-width: 1180px; }
.navbar { min-height: 76px; }
.logo h1 a { color: var(--hf-text) !important; font-weight: 800; letter-spacing: -.04em; }
.logo img { max-height: 42px; width: auto; }
.main-menu .navbar-nav > li > a,
.main-menu .navbar-nav > li > .dropdown-toggle { color: var(--hf-muted) !important; font-weight: 700; }
.main-menu .navbar-nav > li > a:hover,
.main-menu .navbar-nav > li > .dropdown-toggle:hover { color: var(--hf-text) !important; }
.dropdown-menu {
  color: var(--hf-text);
  background: var(--hf-panel);
  border: 1px solid var(--hf-border);
  border-radius: 14px;
  box-shadow: var(--hf-shadow);
}
.dropdown-menu a { color: var(--hf-muted) !important; }
.dropdown-menu a:hover { color: var(--hf-text) !important; background: rgba(255,255,255,.06) !important; }

.main-content,
.client-area,
.client-area-dashboard,
.client-area-content { background: transparent !important; }
.container { max-width: 1180px; }

.client-area-top-box,
.content-box,
.card,
.panel,
.invoice-box,
.package-list-box,
.domain-list-box,
.client-area-bottom-block,
.cm-holder,
.login-box,
.register-box {
  color: var(--hf-text);
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) !important;
  border: 1px solid var(--hf-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--hf-shadow);
}

.client-area-top-box {
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.client-area-top-box:hover {
  transform: translateY(-4px);
  border-color: rgba(116,103,240,.55) !important;
  background: linear-gradient(145deg, rgba(116,103,240,.14), rgba(77,184,255,.06)) !important;
}
.client-area-top-box p,
.client-area-top-box p span { color: var(--hf-text) !important; }
.client-area-top-box p { color: var(--hf-muted) !important; }
.client-area-top-box p span { font-weight: 800; }

.table { color: var(--hf-text); background: transparent; }
.table thead th {
  color: #c8d2e3;
  background: rgba(255,255,255,.055);
  border-color: var(--hf-border);
}
.table td, .table th { border-color: var(--hf-border); }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.025); }

.form-control,
.custom-select,
input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select {
  color: var(--hf-text) !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid var(--hf-border) !important;
  border-radius: 11px !important;
}
.form-control:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(116,103,240,.18) !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #73829a !important; }
label, .form-text, small, .text-muted { color: var(--hf-muted) !important; }

.btn-primary,
button.btn-primary,
input.btn-primary {
  color: white !important;
  background: linear-gradient(135deg, var(--primary), #5b8cff) !important;
  border: 0 !important;
  border-radius: 11px !important;
  box-shadow: 0 12px 30px rgba(95,104,240,.25);
  font-weight: 800;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-secondary, .btn-default {
  color: var(--hf-text) !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid var(--hf-border) !important;
  border-radius: 11px !important;
}

.alert { border: 0; border-radius: 12px; }
.alert-success { color: #b8f3d4; background: rgba(57,217,138,.14); }
.alert-danger { color: #ffcccc; background: rgba(255,90,90,.14); }
.alert-info { color: #c6eaff; background: rgba(77,184,255,.14); }

.resp-tabs-list li,
.nav-tabs .nav-link { color: var(--hf-muted) !important; }
.resp-tabs-list li.resp-tab-active,
.nav-tabs .nav-link.active {
  color: var(--hf-text) !important;
  background: rgba(116,103,240,.15) !important;
  border-color: var(--primary) !important;
}

.footer {
  color: var(--hf-muted);
  background: rgba(0,0,0,.16) !important;
  border-top: 1px solid var(--hf-border);
}
.footer a { color: #beddf5; }

/* Login and registration */
.login-box, .register-box { padding: 30px !important; }

/* Order/cart pages */
.cart-wrapper, .signup-wrapper, .package-box, .product-box {
  color: var(--hf-text);
  background: var(--hf-panel) !important;
  border-color: var(--hf-border) !important;
  border-radius: 18px !important;
}

@media (max-width: 991px) {
  .navbar-collapse { padding: 16px; background: var(--hf-panel); border: 1px solid var(--hf-border); border-radius: 15px; }
}

/* =========================================================
   Horaffi v2 — Public home page and pricing plans
   ========================================================= */
.hf-home { background: var(--hf-bg); }
.hf-home-hero {
  position: relative;
  overflow: hidden;
  padding: 92px 0 82px;
  border-bottom: 1px solid var(--hf-border);
  background:
    radial-gradient(circle at 78% 12%, rgba(77,184,255,.14), transparent 28rem),
    radial-gradient(circle at 5% 90%, rgba(116,103,240,.16), transparent 24rem),
    var(--hf-bg);
}
.hf-home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(330px,.85fr);
  gap: 70px;
  align-items: center;
}
.hf-eyebrow {
  display: inline-block;
  margin-bottom: 17px;
  color: #85caff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hf-home-copy h1 {
  margin: 0;
  color: var(--hf-text);
  font-size: clamp(44px,5.5vw,72px);
  line-height: 1.02;
  letter-spacing: -.06em;
}
.hf-home-copy h1 span {
  color: transparent;
  background: linear-gradient(90deg,#a7a1ff,#68c8ff);
  -webkit-background-clip: text;
  background-clip: text;
}
.hf-home-copy > p {
  max-width: 650px;
  margin: 25px 0 0;
  color: var(--hf-muted);
  font-size: 18px;
  line-height: 1.72;
}
.hf-home-buttons { display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }
.hf-main-button,.hf-secondary-button { min-height:50px; padding:0 23px; display:inline-flex; align-items:center; border-radius:12px!important; font-weight:800; }
.hf-secondary-button { color:var(--hf-text)!important; border:1px solid var(--hf-border)!important; background:rgba(255,255,255,.045)!important; }
.hf-home-benefits { display:flex; flex-wrap:wrap; gap:20px; margin-top:27px; color:var(--hf-muted); font-size:13px; }
.hf-home-benefits i { margin-right:6px; color:#39d98a; }
.hf-home-summary { overflow:hidden; border:1px solid var(--hf-border); border-radius:24px; background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); box-shadow:0 28px 75px rgba(0,0,0,.3); }
.hf-summary-header { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:17px 20px; border-bottom:1px solid var(--hf-border); color:var(--hf-muted); font-size:12px; font-weight:700; }
.hf-online { display:inline-flex; align-items:center; gap:7px; }
.hf-online i { width:8px; height:8px; border-radius:50%; background:#39d98a; box-shadow:0 0 0 5px rgba(57,217,138,.12); }
.hf-summary-body { padding:32px; }
.hf-summary-icon { width:52px; height:52px; display:grid; place-items:center; margin-bottom:20px; border-radius:15px; color:#fff; font-size:22px; background:linear-gradient(135deg,#7467f0,#4db8ff); box-shadow:0 12px 30px rgba(95,104,240,.28); }
.hf-summary-body h2 { margin:0 0 12px; color:var(--hf-text); font-size:30px; letter-spacing:-.04em; }
.hf-summary-body > p { margin:0; color:var(--hf-muted); line-height:1.65; }
.hf-summary-points { display:grid; grid-template-columns:repeat(3,1fr); margin-top:27px; overflow:hidden; border:1px solid var(--hf-border); border-radius:15px; }
.hf-summary-points div { padding:16px 10px; text-align:center; }
.hf-summary-points div+div { border-left:1px solid var(--hf-border); }
.hf-summary-points strong { display:block; color:var(--hf-text); font-size:18px; }
.hf-summary-points span { display:block; margin-top:4px; color:var(--hf-muted); font-size:10px; }
.hf-plans-section { padding:84px 0 92px; background:#0b1525; }
.hf-section-title { max-width:760px; margin:0 auto 42px; text-align:center; }
.hf-section-title h2 { margin:0; color:var(--hf-text); font-size:clamp(34px,4vw,50px); line-height:1.08; letter-spacing:-.05em; }
.hf-section-title p { margin:18px auto 0; color:var(--hf-muted); font-size:16px; line-height:1.7; }
.hf-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.hf-plan-card { position:relative; display:flex; flex-direction:column; padding:29px; border:1px solid var(--hf-border); border-radius:21px; background:rgba(255,255,255,.03); box-shadow:0 18px 55px rgba(0,0,0,.16); }
.hf-plan-featured { transform:translateY(-9px); border-color:transparent; background:linear-gradient(#101e32,#101e32) padding-box,linear-gradient(135deg,#7467f0,#4db8ff) border-box; box-shadow:0 28px 70px rgba(65,79,180,.25); }
.hf-popular-badge { position:absolute; top:-13px; right:24px; padding:7px 12px; border-radius:999px; color:#fff; background:linear-gradient(135deg,#7467f0,#4db8ff); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.hf-plan-label { color:#91cdf8; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.hf-plan-card h3 { margin:17px 0 9px; color:var(--hf-text); font-size:27px; letter-spacing:-.035em; }
.hf-plan-description { min-height:72px; margin:0; color:var(--hf-muted); line-height:1.55; }
.hf-plan-price { display:flex; align-items:baseline; gap:7px; margin:22px 0; }
.hf-plan-price strong { color:var(--hf-text); font-size:36px; letter-spacing:-.05em; }
.hf-plan-price span { color:var(--hf-muted); font-size:13px; }
.hf-plan-card ul { flex:1; margin:0 0 27px; padding:0; list-style:none; }
.hf-plan-card li { padding:10px 0; border-bottom:1px solid var(--hf-border); color:#d9e0ec; font-size:14px; }
.hf-plan-card li i { width:20px; color:#39d98a; }
.hf-plan-button { width:100%; min-height:48px; display:flex!important; align-items:center; justify-content:center; color:var(--hf-text)!important; border:1px solid var(--hf-border)!important; border-radius:11px!important; background:rgba(255,255,255,.05)!important; font-weight:800; }
.hf-plan-featured .hf-plan-button { border:0!important; background:linear-gradient(135deg,#7467f0,#5b8cff)!important; }
.hf-plans-note { margin-top:27px; color:var(--hf-muted); text-align:center; font-size:12px; }
.hf-plans-note i { margin-right:6px; color:#6ac7ff; }
.hf-home-actions { padding:38px 0 75px; background:#0b1525; }
.hf-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.hf-action-card { display:grid; grid-template-columns:auto 1fr auto; gap:17px; align-items:center; padding:22px 24px; border:1px solid var(--hf-border); border-radius:17px; color:var(--hf-text)!important; background:rgba(255,255,255,.03); transition:.2s ease; }
.hf-action-card:hover { transform:translateY(-2px); border-color:rgba(116,103,240,.65); background:rgba(116,103,240,.08); }
.hf-action-card>i:first-child { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:#8dd1ff; background:rgba(77,184,255,.1); font-size:18px; }
.hf-action-card strong,.hf-action-card span { display:block; }
.hf-action-card strong { margin-bottom:4px; }
.hf-action-card span { color:var(--hf-muted); font-size:13px; }
.hf-action-card>i:last-child { color:var(--hf-muted); }
@media(max-width:991px){.hf-home-hero-grid{grid-template-columns:1fr;gap:45px}.hf-plan-grid{grid-template-columns:1fr}.hf-plan-featured{transform:none}.hf-plan-description{min-height:0}.hf-action-grid{grid-template-columns:1fr}}
@media(max-width:575px){.hf-home-hero{padding:65px 0 60px}.hf-home-copy h1{font-size:43px}.hf-home-benefits{flex-direction:column;gap:8px}.hf-summary-header{align-items:flex-start;flex-direction:column}.hf-summary-points{grid-template-columns:1fr}.hf-summary-points div+div{border-left:0;border-top:1px solid var(--hf-border)}.hf-plan-card{padding:24px}.hf-plans-section{padding:65px 0}}

/* Horaffi — finition du menu principal */
.hf-order-page .dropdown-menu,
.navbar .dropdown-menu,
.main-menu .dropdown-menu,
.top-menu .dropdown-menu {
    min-width: 210px !important;
    padding: 8px !important;
    margin-top: 8px !important;
    background: rgba(16, 28, 47, .98) !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .32) !important;
    backdrop-filter: blur(14px);
}

.hf-order-page .dropdown-menu .dropdown-item,
.navbar .dropdown-menu .dropdown-item,
.main-menu .dropdown-menu .dropdown-item,
.top-menu .dropdown-menu .dropdown-item,
.navbar .dropdown-menu a,
.main-menu .dropdown-menu a,
.top-menu .dropdown-menu a {
    display: block !important;
    padding: 10px 12px !important;
    color: #b9c8dc !important;
    background: transparent !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}

.hf-order-page .dropdown-menu .dropdown-item:hover,
.hf-order-page .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus,
.main-menu .dropdown-menu a:hover,
.top-menu .dropdown-menu a:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(113, 103, 240, .30), rgba(79, 156, 255, .22)) !important;
}

.navbar .nav-item.show > .nav-link,
.navbar .dropdown.show > .nav-link,
.main-menu .dropdown.show > a,
.top-menu .dropdown.show > a {
    color: #ffffff !important;
    background: rgba(113, 103, 240, .16) !important;
    border-radius: 8px !important;
}

/* =========================================================
   Horaffi v3 — header et navigation du portail client
   ========================================================= */
.header .container {
    max-width: 1320px !important;
}

.hf-navbar {
    width: 100%;
    min-height: 78px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.hf-navbar-brand {
    flex: 0 0 auto;
    margin-right: 42px;
}

.hf-navbar-brand img {
    display: block;
    max-width: 185px;
    max-height: 44px;
    object-fit: contain;
}

.hf-navbar-content {
    min-width: 0;
    align-items: center;
}

.hf-main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: auto !important;
}

.hf-main-nav > .nav-item {
    position: relative;
}

.hf-main-nav > .nav-item > a {
    position: relative;
    display: flex !important;
    align-items: center;
    min-height: 44px;
    padding: 0 13px !important;
    color: #aebbd0 !important;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease;
}

.hf-main-nav > .nav-item > a::after {
    margin-left: 7px;
}

.hf-main-nav > .nav-item:not(.dropdown) > a::after {
    content: '';
    position: absolute;
    right: 13px;
    bottom: 3px;
    left: 13px;
    height: 2px;
    margin: 0;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(90deg, #7467f0, #4db8ff);
    opacity: 0;
    transform: scaleX(.4);
    transition: opacity .18s ease, transform .18s ease;
}

.hf-main-nav > .nav-item > a:hover,
.hf-main-nav > .nav-item.show > a {
    color: #fff !important;
    background: rgba(255,255,255,.055) !important;
}

.hf-main-nav > .nav-item:not(.dropdown) > a:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.hf-main-nav .dropdown-menu {
    left: 0 !important;
    right: auto !important;
    min-width: 245px !important;
    padding: 9px !important;
    margin-top: 9px !important;
}

.hf-main-nav .dropdown-menu li a,
.hf-user-dropdown li a {
    display: flex !important;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    padding: 10px 12px !important;
}

.hf-main-nav .dropdown-menu li a i,
.hf-user-dropdown li a i {
    width: 18px;
    color: #79c7ff;
    text-align: center;
}

.hf-user-area {
    flex: 0 0 auto;
    margin-left: 22px;
}

.hf-current-user {
    position: relative;
}

.hf-user-toggle {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 5px 10px 5px 6px;
    color: #eef4ff !important;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
    text-decoration: none !important;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.hf-user-toggle:hover {
    color: #fff !important;
    border-color: rgba(116,103,240,.55);
    background: rgba(116,103,240,.10);
    transform: translateY(-1px);
}

.hf-user-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    overflow: hidden;
    display: grid !important;
    place-items: center;
    border: 2px solid rgba(123,189,255,.72);
    border-radius: 50% !important;
    background: linear-gradient(135deg,#7467f0,#4db8ff);
}

.hf-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.hf-user-name {
    max-width: 145px;
    overflow: hidden;
    color: #f5f7fb;
    font-size: 14px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hf-user-chevron {
    color: #8291a8;
    font-size: 10px;
    transition: transform .18s ease;
}

.hf-current-user.open .hf-user-chevron,
.hf-current-user.show .hf-user-chevron {
    transform: rotate(180deg);
}

.hf-user-dropdown {
    top: calc(100% + 9px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 250px !important;
}

.hf-user-separator {
    height: 1px;
    margin: 7px 5px;
    background: rgba(255,255,255,.09);
}

.hf-user-dropdown .hf-logout a,
.hf-user-dropdown .hf-logout a i {
    color: #ff9ca8 !important;
}

.hf-user-dropdown .hf-logout a:hover {
    background: rgba(255,90,105,.10) !important;
}

.hf-login-menu a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 16px;
    color: #fff !important;
    border: 1px solid rgba(116,103,240,.50);
    border-radius: 11px;
    background: rgba(116,103,240,.12);
    font-weight: 800;
}

.hf-navbar-toggler {
    margin-left: auto;
    border-color: rgba(255,255,255,.14) !important;
    border-radius: 10px;
}

@media (max-width: 1199px) {
    .hf-navbar-brand { margin-right: 22px; }
    .hf-main-nav > .nav-item > a { padding-right: 9px !important; padding-left: 9px !important; font-size: 13px; }
    .hf-user-area { margin-left: 12px; }
    .hf-user-name { max-width: 95px; }
}

@media (max-width: 991px) {
    .hf-navbar {
        min-height: 70px;
        flex-wrap: wrap;
    }

    .hf-navbar-brand img {
        max-width: 165px;
        max-height: 39px;
    }

    .hf-navbar-content {
        width: 100%;
        flex-basis: 100%;
        margin-top: 10px;
        padding: 14px !important;
        border: 1px solid var(--hf-border);
        border-radius: 16px;
        background: rgba(12,23,39,.98) !important;
        box-shadow: 0 22px 48px rgba(0,0,0,.32);
    }

    .hf-main-nav {
        display: block;
        width: 100%;
    }

    .hf-main-nav > .nav-item > a {
        min-height: 46px;
        padding: 0 13px !important;
    }

    .hf-main-nav .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100%;
        margin: 2px 0 8px !important;
        box-shadow: none !important;
    }

    .hf-user-area {
        width: 100%;
        margin: 12px 0 0;
        padding-top: 12px;
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .hf-user-toggle {
        width: 100%;
    }

    .hf-user-name {
        max-width: none;
    }

    .hf-user-dropdown {
        position: static !important;
        float: none !important;
        width: 100%;
        margin-top: 8px !important;
        box-shadow: none !important;
    }
}

/* =========================================================
   Horaffi — Dashboard color harmonization
   Keeps the original ClientExec dashboard layout intact.
   ========================================================= */
.dashboard-wraper {
    color: var(--hf-text) !important;
    background:
        radial-gradient(circle at 88% 4%, rgba(116,103,240,.13), transparent 30rem),
        var(--hf-bg) !important;
}

.dashboard-wraper .dashboard-main,
.dashboard-wraper .dashboard-right-block,
.dashboard-wraper .dashboard-four-block {
    background: transparent !important;
}

.dashboard-wraper .dashboard-main .dashboard-left-bar {
    color: var(--hf-text) !important;
    background: var(--hf-panel) !important;
    border: 1px solid var(--hf-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--hf-shadow) !important;
    overflow: hidden;
}

.dashboard-wraper .dashboard-main .dashboard-left-bar .dashboard-info-box,
.dashboard-wraper .dashboard-main .dashboard-left-bar .dashboard-info-box.no-border {
    background: transparent !important;
    border-color: var(--hf-border) !important;
}

.dashboard-wraper .dashboard-main .dashboard-left-bar .dashboard-info-box .heading,
.dashboard-wraper .dashboard-main .dashboard-left-bar .dashboard-info-box ul li {
    border-color: var(--hf-border) !important;
}

.dashboard-wraper .dashboard-main .dashboard-left-bar .dashboard-info-box .heading h4,
.dashboard-wraper .dashboard-main .dashboard-left-bar .dashboard-info-box p {
    color: var(--hf-text) !important;
}

.dashboard-wraper .dashboard-main .dashboard-left-bar .dashboard-info-box p,
.dashboard-wraper .dashboard-main .dashboard-left-bar .dashboard-info-box ul li a {
    color: var(--hf-muted) !important;
}

.dashboard-wraper .dashboard-main .dashboard-left-bar .dashboard-info-box ul li a:hover {
    color: #fff !important;
    background: rgba(116,103,240,.10) !important;
}

.dashboard-wraper .dashboard-main .dashboard-left-bar .dashboard-info-box ul li a i {
    color: #79c7ff !important;
}

/* Statistic tiles: same Horaffi surface, colored icon accents only. */
.dashboard-wraper .dashboard-main .dashboard-right-block .dashboard-four-block .dash-commen-boxes,
.dashboard-wraper .dashboard-main .dashboard-right-block .dashboard-four-block .dash-commen-boxes.yellow-bg,
.dashboard-wraper .dashboard-main .dashboard-right-block .dashboard-four-block .dash-commen-boxes.purple-bg,
.dashboard-wraper .dashboard-main .dashboard-right-block .dashboard-four-block .dash-commen-boxes.green-bg {
    color: var(--hf-text) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) !important;
    border: 1px solid var(--hf-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.20) !important;
}

.dashboard-wraper .dash-commen-boxes > i { color: #69bfff !important; }
.dashboard-wraper .dash-commen-boxes.yellow-bg > i { color: #f6c85f !important; }
.dashboard-wraper .dash-commen-boxes.purple-bg > i { color: #c18cff !important; }
.dashboard-wraper .dash-commen-boxes.green-bg > i { color: #55ddb0 !important; }

.dashboard-wraper .dash-commen-boxes p,
.dashboard-wraper .dash-commen-boxes p span {
    color: var(--hf-text) !important;
}

.dashboard-wraper .dash-commen-boxes p {
    color: var(--hf-muted) !important;
}

/* Dashboard list cards. */
.dashboard-wraper .cm-holder,
.dashboard-wraper .support-ticket-list-table,
.dashboard-wraper .package-list-table,
.dashboard-wraper .invoice-list-table {
    color: var(--hf-text) !important;
    background: var(--hf-panel) !important;
    border: 1px solid var(--hf-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--hf-shadow) !important;
    overflow: hidden;
}

.dashboard-wraper .cm-holder .head,
.dashboard-wraper .cm-holder .head.padding-bottom {
    background: var(--hf-panel) !important;
    border-color: var(--hf-border) !important;
}

.dashboard-wraper .cm-holder .head h3,
.dashboard-wraper .dataTables_info,
.dashboard-wraper .dataTables_length,
.dashboard-wraper .dataTables_length label {
    color: var(--hf-text) !important;
}

.dashboard-wraper .view-all-table {
    color: #dfe8f7 !important;
    background: rgba(116,103,240,.16) !important;
    border: 1px solid rgba(116,103,240,.35) !important;
}
.dashboard-wraper .view-all-table:hover {
    color: #fff !important;
    background: rgba(116,103,240,.28) !important;
}

.dashboard-wraper .data-table-wrapper,
.dashboard-wraper .pending-orders,
.dashboard-wraper .table-responsive {
    background: transparent !important;
}

.dashboard-wraper .data-table-wrapper table,
.dashboard-wraper .data-table-wrapper table.display,
.dashboard-wraper table.dataTable {
    color: var(--hf-text) !important;
    background: transparent !important;
}

.dashboard-wraper .data-table-wrapper table tr th,
.dashboard-wraper table.dataTable thead th {
    color: #cbd6e8 !important;
    background: var(--hf-panel-2) !important;
    border-color: var(--hf-border) !important;
}

.dashboard-wraper .data-table-wrapper table tr td,
.dashboard-wraper table.dataTable tbody td,
.dashboard-wraper .data-table-wrapper table tr:nth-child(even) td {
    color: var(--hf-text) !important;
    background: rgba(255,255,255,.018) !important;
    border-color: var(--hf-border) !important;
}

.dashboard-wraper .data-table-wrapper table tbody tr:hover td,
.dashboard-wraper table.dataTable tbody tr:hover td {
    background: rgba(116,103,240,.075) !important;
}

.dashboard-wraper .data-table-wrapper table tr td a,
.dashboard-wraper .product-name a {
    color: #72c5ff !important;
}

.dashboard-wraper .dataTables_wrapper .dataTables_info,
.dashboard-wraper .dataTables_wrapper .dataTables_paginate,
.dashboard-wraper .dataTables_wrapper .dataTables_length,
.dashboard-wraper .dataTables_wrapper .dataTables_filter {
    color: var(--hf-muted) !important;
    background: var(--hf-panel) !important;
}

.dashboard-wraper .dataTables_wrapper .dataTables_paginate .paginate_button,
.dashboard-wraper .pagination .page-link {
    color: var(--hf-muted) !important;
    background: rgba(255,255,255,.04) !important;
    border-color: var(--hf-border) !important;
}

.dashboard-wraper .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dashboard-wraper .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dashboard-wraper .pagination .page-item.active .page-link {
    color: #fff !important;
    background: linear-gradient(135deg, var(--primary), #5b8cff) !important;
    border-color: transparent !important;
}

.dashboard-wraper .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dashboard-wraper .pagination .page-link:hover {
    color: #fff !important;
    background: rgba(116,103,240,.18) !important;
}

.dashboard-wraper .status.green,
.dashboard-wraper .status.active {
    color: #bff5d9 !important;
    background: rgba(57,217,138,.18) !important;
}

.dashboard-wraper .status.orange,
.dashboard-wraper .status.pending {
    color: #ffe0a3 !important;
    background: rgba(245,158,11,.18) !important;
}

.dashboard-wraper .status.red,
.dashboard-wraper .status.suspended {
    color: #ffc0c5 !important;
    background: rgba(239,68,68,.18) !important;
}

@media (max-width: 767px) {
    .dashboard-wraper .dashboard-main .dashboard-left-bar,
    .dashboard-wraper .cm-holder {
        border-radius: 14px !important;
    }
}

/* =========================================================
   Horaffi — Header spacing + dashboard product readability
   ========================================================= */
@media (min-width: 992px) {
    .hf-navbar-content {
        align-items: center !important;
    }

    .hf-main-nav {
        align-items: center !important;
        gap: 8px !important;
    }

    .hf-main-nav > .nav-item > a {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        font-size: 14px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    /* Bootstrap draws the dropdown arrow with ::after. Give it its own space. */
    .hf-main-nav > .nav-item > a.dropdown-toggle::after {
        position: static !important;
        display: inline-block !important;
        width: 0 !important;
        height: 0 !important;
        margin: 1px 0 0 2px !important;
        vertical-align: middle !important;
        transform: none !important;
    }

    .hf-user-area {
        margin-left: auto !important;
        padding-left: 20px !important;
    }
}

/* Keep every value in the package/product row readable on the dark dashboard. */
.dashboard-wraper .package-list-table table.dataTable tbody td,
.dashboard-wraper .package-list-table .data-table-wrapper table tbody td,
.dashboard-wraper .package-list-table table.dataTable tbody td span,
.dashboard-wraper .package-list-table .data-table-wrapper table tbody td span,
.dashboard-wraper .package-list-table table.dataTable tbody td div,
.dashboard-wraper .package-list-table .data-table-wrapper table tbody td div {
    color: #e8eef8 !important;
}

.dashboard-wraper .package-list-table table.dataTable tbody td a,
.dashboard-wraper .package-list-table .data-table-wrapper table tbody td a,
.dashboard-wraper .package-list-table .product-name a {
    color: #65c4ff !important;
}

.dashboard-wraper .package-list-table table.dataTable tbody td .status,
.dashboard-wraper .package-list-table .data-table-wrapper table tbody td .status {
    color: #bff5d9 !important;
}

.dashboard-wraper .package-list-table table.dataTable tbody td i,
.dashboard-wraper .package-list-table .data-table-wrapper table tbody td i,
.dashboard-wraper .package-list-table .fa-cog,
.dashboard-wraper .package-list-table .fas {
    color: #66c7ff !important;
}

/* =========================================================
   Horaffi — Package table border cleanup
   ========================================================= */
.dashboard-wraper .package-list-table .data-table-wrapper,
.dashboard-wraper .package-list-table .table-responsive {
    border: 0 !important;
    box-shadow: none !important;
}

.dashboard-wraper .package-list-table table,
.dashboard-wraper .package-list-table table.display,
.dashboard-wraper .package-list-table table.dataTable {
    border: 1px solid rgba(145, 162, 192, .18) !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.dashboard-wraper .package-list-table table thead th,
.dashboard-wraper .package-list-table table.dataTable thead th {
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid rgba(145, 162, 192, .12) !important;
}

.dashboard-wraper .package-list-table table tbody td,
.dashboard-wraper .package-list-table table.dataTable tbody td {
    border: 0 !important;
    border-top: 1px solid rgba(145, 162, 192, .08) !important;
}

.dashboard-wraper .package-list-table table tbody tr:first-child td,
.dashboard-wraper .package-list-table table.dataTable tbody tr:first-child td {
    border-top: 0 !important;
}

.dashboard-wraper .package-list-table .dataTables_paginate,
.dashboard-wraper .package-list-table .pagination {
    border: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   Horaffi — Client products list page
   ========================================================= */
.datatable-page {
    min-height: calc(100vh - 95px) !important;
    padding: 46px 0 72px !important;
    background:
        radial-gradient(circle at 82% 12%, rgba(116,103,240,.10), transparent 30%),
        #081321 !important;
}

.datatable-page .container {
    max-width: 1160px !important;
}

.datatable-page .cm-holder,
.datatable-page .data-table-wrapper {
    background: #121f34 !important;
    border: 1px solid rgba(145,162,192,.18) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.18) !important;
    overflow: hidden !important;
}

.datatable-page .data-table-wrapper > .head {
    min-height: 88px !important;
    padding: 22px 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    background: #121f34 !important;
    border-bottom: 1px solid rgba(145,162,192,.12) !important;
}

.datatable-page .data-table-wrapper > .head h1 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.datatable-page .knowledge-base-search {
    display: flex !important;
    align-items: stretch !important;
    width: 300px !important;
    max-width: 100% !important;
    border: 1px solid rgba(145,162,192,.18) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.035) !important;
}

.datatable-page .knowledge-search-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 46px !important;
    padding: 0 15px !important;
    color: #e8eef8 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.datatable-page .knowledge-search-input::placeholder {
    color: #91a2c0 !important;
    opacity: 1 !important;
}

.datatable-page .knowledge-search-submit {
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 46px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #7467f0, #5b8cff) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.datatable-page .knowledge-search-submit:hover {
    filter: brightness(1.08) !important;
}

.datatable-page .table-responsive.cs-padding {
    padding: 26px 28px 30px !important;
    background: #121f34 !important;
}

.datatable-page .dataTables_wrapper,
.datatable-page .dataTables_wrapper label,
.datatable-page .dataTables_info {
    color: #aebbd2 !important;
}

.datatable-page .dataTables_length select,
.datatable-page .dataTables_filter input {
    color: #e8eef8 !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(145,162,192,.18) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

.datatable-page table.product-list-table,
.datatable-page table.product-list-table.dataTable {
    width: 100% !important;
    margin-top: 18px !important;
    border: 1px solid rgba(145,162,192,.18) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #17243a !important;
    box-shadow: none !important;
}

.datatable-page table.product-list-table thead th,
.datatable-page table.product-list-table.dataTable thead th {
    padding: 13px 14px !important;
    color: #c7d6f0 !important;
    background: #1b2a43 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(145,162,192,.12) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.datatable-page table.product-list-table tbody td,
.datatable-page table.product-list-table.dataTable tbody td {
    padding: 16px 14px !important;
    color: #e8eef8 !important;
    background: #17243a !important;
    border: 0 !important;
    border-top: 1px solid rgba(145,162,192,.08) !important;
    vertical-align: middle !important;
}

.datatable-page table.product-list-table tbody tr:first-child td {
    border-top: 0 !important;
}

.datatable-page table.product-list-table tbody tr:hover td {
    background: #1a2941 !important;
}

.datatable-page table.product-list-table a,
.datatable-page table.product-list-table .product-name a {
    color: #65c4ff !important;
}

.datatable-page table.product-list-table .status.green,
.datatable-page table.product-list-table .status.active {
    color: #bff5d9 !important;
    background: rgba(57,217,138,.18) !important;
    border-radius: 4px !important;
}

.datatable-page table.product-list-table .action,
.datatable-page table.product-list-table .fa-cog {
    color: #66c7ff !important;
}

.datatable-page .dataTables_paginate .paginate_button,
.datatable-page .pagination .page-link {
    color: #aebbd2 !important;
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(145,162,192,.18) !important;
}

.datatable-page .dataTables_paginate .paginate_button.current,
.datatable-page .dataTables_paginate .paginate_button.current:hover,
.datatable-page .pagination .page-item.active .page-link {
    color: #fff !important;
    background: linear-gradient(135deg, #7467f0, #5b8cff) !important;
    border-color: transparent !important;
}

.datatable-page .dataTables_paginate .paginate_button:hover,
.datatable-page .pagination .page-link:hover {
    color: #fff !important;
    background: rgba(116,103,240,.18) !important;
}

.datatable-page .cog-drop-down {
    background: #17243a !important;
    border: 1px solid rgba(145,162,192,.18) !important;
    box-shadow: 0 14px 35px rgba(0,0,0,.28) !important;
}

.datatable-page .cog-drop-down a {
    color: #dce7f7 !important;
}

.datatable-page .cog-drop-down a:hover {
    background: rgba(116,103,240,.14) !important;
}

@media (max-width: 767px) {
    .datatable-page {
        padding: 24px 0 48px !important;
    }

    .datatable-page .data-table-wrapper > .head {
        align-items: stretch !important;
        flex-direction: column !important;
        padding: 20px !important;
    }

    .datatable-page .knowledge-base-search {
        width: 100% !important;
    }

    .datatable-page .table-responsive.cs-padding {
        padding: 20px !important;
    }
}

/* Horaffi — fix product amount and due date readability */
.datatable-page table.product-list-table tbody td,
.datatable-page table.product-list-table tbody td span,
.datatable-page table.product-list-table.dataTable tbody td,
.datatable-page table.product-list-table.dataTable tbody td span {
    color: #e8eef8 !important;
}

.datatable-page table.product-list-table tbody .total,
.datatable-page table.product-list-table.dataTable tbody .total {
    color: #f4f7fc !important;
    font-weight: 500 !important;
}

.datatable-page table.product-list-table tbody .due-date,
.datatable-page table.product-list-table.dataTable tbody .due-date {
    color: #d8e2f1 !important;
    font-weight: 500 !important;
}

.datatable-page table.product-list-table tbody .product-name a,
.datatable-page table.product-list-table.dataTable tbody .product-name a {
    color: #65c4ff !important;
}

.datatable-page table.product-list-table tbody .status,
.datatable-page table.product-list-table.dataTable tbody .status {
    color: #c8f7df !important;
}

/* Horaffi — remove the doubled/bright border on datatable cards */
.datatable-page .cm-holder {
    border: 1px solid rgba(145,162,192,.18) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.18) !important;
}

.datatable-page .cm-holder > .data-table-wrapper {
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.datatable-page .cm-holder > .data-table-wrapper::before,
.datatable-page .cm-holder > .data-table-wrapper::after {
    display: none !important;
    content: none !important;
}

/* Horaffi — definitive single-border fix for products page */
.datatable-page .cm-holder {
    border: 1px solid rgba(145,162,192,.18) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.datatable-page .cm-holder .data-table-wrapper {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.datatable-page .cm-holder .data-table-wrapper > .head {
    border: 0 !important;
    border-bottom: 1px solid rgba(145,162,192,.12) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.datatable-page .cm-holder .data-table-wrapper > .table-responsive {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}


/* Product detail redesign */
.product-view .panel,
.product-view .card,
#product-content .panel,
.ce-panel{
 background:#182338!important;
 border:1px solid rgba(255,255,255,.08)!important;
 border-radius:14px!important;
 box-shadow:none!important;
 color:#e6edf7!important;
}
.panel-heading,.card-header{
 background:#1f2b42!important;
 color:#fff!important;
 border-bottom:1px solid rgba(255,255,255,.08)!important;
}
.panel-body,.card-body,.list-group-item{
 background:#182338!important;
 color:#e6edf7!important;
}
.list-group-item{
 border-color:rgba(255,255,255,.08)!important;
}
.list-group-item.active{
 background:linear-gradient(90deg,#5b8cff,#7c6cff)!important;
 color:#fff!important;
}
.table,.table td,.table th{
 background:#182338!important;
 color:#e6edf7!important;
 border-color:rgba(255,255,255,.08)!important;
}
a{ }
.product-view a,.panel a{color:#67b7ff!important;}


/* Horaffi — invoices page */
.datatable-page table.invoice-list-table,
.datatable-page table.invoice-list-table.dataTable {
    width: 100% !important;
    margin-top: 14px !important;
    border: 1px solid rgba(145,162,192,.16) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #17243a !important;
}

.datatable-page table.invoice-list-table thead th,
.datatable-page table.invoice-list-table.dataTable thead th {
    padding: 13px 14px !important;
    color: #c7d6f0 !important;
    background: #1b2a43 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(145,162,192,.12) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.datatable-page table.invoice-list-table tbody td,
.datatable-page table.invoice-list-table.dataTable tbody td {
    padding: 12px 14px !important;
    color: #e8eef8 !important;
    background: #17243a !important;
    border: 0 !important;
    border-top: 1px solid rgba(145,162,192,.07) !important;
    vertical-align: middle !important;
}

.datatable-page table.invoice-list-table tbody tr:first-child td {
    border-top: 0 !important;
}

.datatable-page table.invoice-list-table tbody tr:hover td {
    background: #1a2941 !important;
}

.datatable-page table.invoice-list-table a {
    color: #65c4ff !important;
}

.datatable-page table.invoice-list-table .invoicepdflink a {
    color: #61bfff !important;
}

.datatable-page table.invoice-list-table input[type="checkbox"],
.datatable-page #check-all-boxes {
    width: 15px !important;
    height: 15px !important;
    accent-color: #6d78ff;
}

.datatable-page #filter-ul {
    display: inline-flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.datatable-page #filter-ul .btn {
    min-width: 82px !important;
    padding: 9px 16px !important;
    color: #b9c6da !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(145,162,192,.16) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

.datatable-page #filter-ul .btn:hover {
    color: #fff !important;
    background: rgba(116,103,240,.16) !important;
    border-color: rgba(116,103,240,.4) !important;
}

.datatable-page #filter-ul .btn.btn-primary {
    color: #fff !important;
    background: linear-gradient(135deg,#7467f0,#5b8cff) !important;
    border-color: transparent !important;
}

.datatable-page .invoice-buttons {
    margin-top: 18px !important;
    gap: 12px !important;
}

.datatable-page .invoice-buttons > div {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

.datatable-page .invoice-buttons .btn {
    min-width: 178px !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg,#7467f0,#5b8cff) !important;
    color: #fff !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    box-shadow: none !important;
}

.datatable-page .invoice-buttons .btn:hover:not(:disabled) {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
}

.datatable-page .invoice-buttons .btn:disabled,
.datatable-page .invoice-buttons .btn.disabled {
    color: #75839a !important;
    background: #22304a !important;
    border-color: rgba(145,162,192,.14) !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

.datatable-page table.invoice-list-table .status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 58px !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.datatable-page table.invoice-list-table .status.green,
.datatable-page table.invoice-list-table .status.paid {
    color: #d5ffea !important;
    background: rgba(57,217,138,.42) !important;
}

@media (max-width: 767px) {
    .datatable-page #filter-ul {
        width: 100% !important;
    }
    .datatable-page #filter-ul .btn {
        flex: 1 1 calc(50% - 6px) !important;
    }
    .datatable-page .invoice-buttons .btn,
    .datatable-page .invoice-buttons > div {
        width: 100% !important;
    }
}