/* ============================================================
   HOST-PROFESIONAL — Brand CSS pentru WHMCS 9 (twenty-one-hp)
   Se incarca DUPA CSS-ul temei twenty-one, ca override.
   Fisier: /templates/twenty-one-hp/css/brand.css
   Culori brand: cyan #01ABEF + magenta #FF2E7E + grafit #0B2942
   ============================================================ */

:root{
  --hp-cyan:#01ABEF;
  --hp-cyan-deep:#009DE0;
  --hp-cyan-soft:#33B4F4;
  --hp-ink:#0B2942;
  --hp-ink-2:#12385a;
  --hp-magenta:#FF2E7E;
  --hp-magenta-soft:#ff5c9b;
  --hp-paper:#f6fafd;
  --hp-white:#ffffff;
  --hp-text:#33475b;
  --hp-text-soft:#6b7f92;
  --hp-line:#e4eef5;
  --hp-radius:16px;
  --hp-radius-sm:11px;
  --hp-shadow:0 20px 50px -20px rgba(11,41,66,.28);
  --hp-shadow-sm:0 8px 24px -12px rgba(11,41,66,.25);
}

/* ---------- FONTS ---------- */
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif !important;
  color:var(--hp-text);
  background:var(--hp-paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Sora','Inter',sans-serif !important;
  color:var(--hp-ink);
  letter-spacing:-.02em;
  font-weight:700;
}

/* ---------- LINKS ---------- */
a{color:var(--hp-cyan-deep);transition:.2s}
a:hover,a:focus{color:var(--hp-magenta);text-decoration:none}

/* ---------- BUTTONS ---------- */
.btn{
  font-family:'Inter',sans-serif;
  font-weight:600;
  border:none;
  border-radius:var(--hp-radius-sm);
  padding:10px 22px;
  text-transform:none;
  letter-spacing:0;
  transition:.2s;
}
.btn-primary,.btn-info{
  background:linear-gradient(135deg,var(--hp-cyan),var(--hp-cyan-deep)) !important;
  color:#fff !important;
  box-shadow:0 10px 24px -12px rgba(1,171,239,.8);
}
.btn-primary:hover,.btn-info:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px -14px rgba(1,171,239,.9);
  color:#fff !important;
}
.btn-warning,.btn-default{
  background:linear-gradient(135deg,var(--hp-magenta),var(--hp-magenta-soft)) !important;
  color:#fff !important;
  box-shadow:0 10px 24px -12px rgba(255,46,126,.7);
}
.btn-warning:hover,.btn-default:hover{transform:translateY(-2px);color:#fff !important}
.btn-success{background:linear-gradient(135deg,#22c55e,#16a34a) !important;color:#fff !important}
.btn-lg{padding:14px 30px;font-size:16px}

/* =========================================================
   HEADER NOU (Bootstrap 4) — clase hp-*
   ========================================================= */

/* ---------- TOPBAR ---------- */
.hp-topbar{
  background:var(--hp-ink);
  color:#bcd4e6;
  font-family:'Inter',sans-serif;
  font-size:13px;
  padding:8px 0;
}
.hp-topbar a{color:#bcd4e6;}
.hp-topbar a:hover{color:#fff;}
.hp-topbar-item{margin-right:18px;}
.hp-topbar-item i{color:var(--hp-cyan-soft);margin-right:4px;}

.hp-promo{
  display:inline-block;background:var(--hp-magenta);color:#fff !important;
  padding:2px 10px;border-radius:20px;font-size:11px;font-weight:700;
  letter-spacing:.03em;margin-right:6px;
}

.hp-quick-nav{
  color:#bcd4e6 !important;font-weight:500;text-decoration:none;
  padding:4px 10px;border:0;background:transparent;
}
.hp-quick-nav:hover{color:#fff !important;}
.hp-quick-nav i{color:var(--hp-cyan-soft);margin-right:4px;}
.hp-cart .badge,.hp-quick-nav .badge{background:var(--hp-magenta);color:#fff;}
.hp-topbar-nav{display:inline-block;position:relative;}

#loginOrRegisterContent,#accountNotificationsContent{
  min-width:280px;text-align:left;color:var(--hp-text);
}

/* ---------- NAVBAR PRINCIPAL (cyan, ca site-ul static) ---------- */
.hp-navbar{
  background:var(--hp-cyan);
  padding:6px 0;
  box-shadow:0 2px 12px -4px rgba(1,171,239,.4);
}
.hp-logo{max-height:54px;width:auto;}

.hp-menu .nav-link{
  font-family:'Sora',sans-serif;
  font-weight:600;
  font-size:15px;
  color:#ffffff !important;
  padding:18px 18px !important;
  transition:background .15s,color .15s;
}
.hp-menu .nav-link:hover,
.hp-menu .nav-item.active > .nav-link,
.hp-menu .nav-item.current > .nav-link,
.hp-menu .nav-link.active{
  color:#ffffff !important;
  background:var(--hp-cyan-deep);
}

/* dropdown alb lizibil */
.hp-menu .dropdown-menu{
  border:0;border-radius:0 0 12px 12px;background:#fff;
  box-shadow:var(--hp-shadow-sm);padding:8px;margin-top:0;
}
.hp-menu .dropdown-item{
  font-family:'Inter',sans-serif;font-weight:500;
  border-radius:8px;padding:9px 14px;color:var(--hp-text);
}
.hp-menu .dropdown-item:hover{
  background:var(--hp-paper);color:var(--hp-cyan-deep);
}
@media (min-width:992px){
  .hp-menu .dropdown:hover > .dropdown-menu{display:block;}
}

/* meniu client area (Servicii/Domenii/Facturi) — separator */
.hp-menu-whmcs{border-left:1px solid rgba(255,255,255,.35);}
@media (max-width:991px){
  .hp-menu-whmcs{border-left:0;border-top:1px solid rgba(255,255,255,.35);margin-top:6px;padding-top:6px;}
}

/* toggler mobil */
.navbar-toggler{border-color:rgba(255,255,255,.6);}
.navbar-toggler .fa-bars{color:#fff;}

/* ---------- HERO / HOME BANNER ---------- */
#home-banner{
  background:linear-gradient(135deg,var(--hp-ink),var(--hp-ink-2)) !important;
  position:relative;overflow:hidden;padding:70px 0 !important;
}
#home-banner::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 400px at 80% -20%,rgba(1,171,239,.35),transparent 60%),
    radial-gradient(600px 300px at 10% 120%,rgba(255,46,126,.22),transparent 60%);
}
#home-banner .container{position:relative;z-index:1}
#home-banner h2{
  color:#fff !important;font-size:38px !important;font-weight:800 !important;
  text-align:center;margin-bottom:14px !important;
}
#home-banner .hp-hero-sub{
  color:#bcd9ef;text-align:center;font-size:18px;max-width:620px;
  margin:0 auto 30px;font-family:'Inter'
}
#home-banner .input-group-lg .form-control{
  border:none;border-radius:12px 0 0 12px;padding:16px 20px;height:auto;font-size:16px;
}
#home-banner .input-group-lg .btn{border-radius:0 12px 12px 0;padding:16px 26px}

/* ---------- PANELS / CARDS ---------- */
.panel,.card{
  border:1px solid var(--hp-line) !important;
  border-radius:var(--hp-radius) !important;
  box-shadow:var(--hp-shadow-sm) !important;
  overflow:hidden;
}
.panel-heading,.panel-title{
  background:var(--hp-white) !important;color:var(--hp-ink) !important;
  font-family:'Sora',sans-serif;border-bottom:1px solid var(--hp-line);
}
.header-lined h1{
  color:var(--hp-ink) !important;background:none !important;
  text-transform:none !important;font-family:'Sora',sans-serif;
}

/* badges / labels */
.badge{background:var(--hp-magenta) !important}
.label-default{background:var(--hp-cyan) !important}

/* sidebar list activ */
.list-group-item.active,
.list-group-item.active:hover{
  background:linear-gradient(135deg,var(--hp-cyan),var(--hp-cyan-deep)) !important;
  border-color:var(--hp-cyan) !important;
}

/* ---------- FOOTER ---------- */
.hp-footer{
  background:var(--hp-ink);color:#9fbdd4;padding:56px 0 26px;margin-top:60px;
}
.hp-footer h4{
  color:#fff;font-size:15px;margin-bottom:16px;
  font-family:'Sora',sans-serif;letter-spacing:0;
}
.hp-footer ul{list-style:none;padding:0;margin:0}
.hp-footer ul li{margin-bottom:10px}
.hp-footer ul a,.hp-footer .footer-link{color:#9fbdd4 !important;font-size:14px;transition:.2s}
.hp-footer ul a:hover,.hp-footer .footer-link:hover{color:var(--hp-cyan) !important;padding-left:3px}
.hp-footer .hp-foot-brand p{color:#7fa0ba;font-size:14px;max-width:280px;margin-top:14px}
.hp-footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding-top:22px;margin-top:30px;
  text-align:center;color:#6f8da7;font-size:13px;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px){
  #home-banner h2{font-size:28px !important}
}


/* =========================================================
   BARA CLIENT AREA (neagra, sub navbarul cyan) + telefon topbar
   Adauga la finalul brand.css
   ========================================================= */

/* telefon topbar mai mic si clickabil */
.hp-topbar-phone{
  color:#bcd4e6 !important;
  font-size:13px;
  font-weight:500;
  text-decoration:none;
}
.hp-topbar-phone:hover{ color:#fff !important; }
.hp-topbar-phone i{ color:var(--hp-cyan-soft); margin-right:5px; font-size:12px; }

/* ---------- BARA CLIENT (neagra) ---------- */
.hp-client-nav{
  background:var(--hp-ink);
  padding:0;
  border-top:1px solid rgba(255,255,255,.06);
}
.hp-client-nav .navbar-nav > li > a,
.hp-client-nav .nav-link{
  color:#dbe9f5 !important;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:16px;
  padding:16px 20px !important;
  transition:background .15s,color .15s;
}
.hp-client-nav .navbar-nav > li > a:hover,
.hp-client-nav .nav-link:hover,
.hp-client-nav .navbar-nav > li.active > a,
.hp-client-nav .nav-item.active > .nav-link{
  color:#fff !important;
  background:var(--hp-cyan);
}

/* dropdown din bara client */
.hp-client-nav .dropdown-menu{
  background:#fff;border:0;border-radius:0 0 12px 12px;
  box-shadow:var(--hp-shadow-sm);padding:8px;margin-top:0;
}
.hp-client-nav .dropdown-menu .dropdown-item{
  color:var(--hp-text);border-radius:8px;padding:9px 14px;font-size:14px;
}
.hp-client-nav .dropdown-menu .dropdown-item:hover{
  background:var(--hp-paper);color:var(--hp-cyan-deep);
}
@media (min-width:992px){
  .hp-client-nav .dropdown:hover > .dropdown-menu{display:block;}
}

/* "Salut, Nume" din dreapta — accent */
.hp-client-nav .navbar-nav.ml-auto > li > a{
  font-weight:600;
}

/* toggler bara client pe mobil */
.hp-client-nav .navbar-toggler{border-color:rgba(255,255,255,.4);}
.hp-client-nav .navbar-toggler .fa-bars{color:#fff;}


/* =========================================================
   BARA ADMIN (revino la admin) + fix spatiu sidebar
   Adauga la finalul brand.css
   ========================================================= */

/* ---------- Bara "revino la admin" ---------- */
.admin-masquerade-notice{
  background:linear-gradient(135deg,#fff4d6,#ffe9b0) !important;
  border:1px solid #f0d98a !important;
  border-radius:var(--hp-radius-sm) !important;
  color:#7a5c00 !important;
  font-size:14px;
  font-weight:500;
  padding:10px 16px !important;
  margin-top:10px !important;
  text-align:center;
}
.admin-masquerade-notice a,
.admin-masquerade-notice .alert-link{
  color:var(--hp-cyan-deep) !important;
  font-weight:700;
  text-decoration:underline;
}
.admin-masquerade-notice a:hover{ color:var(--hp-magenta) !important; }

/* ---------- Fix spatiu mare in sidebar ---------- */
/* elimina panourile goale care ocupa spatiu */
.sidebar .panel:empty,
.sidebar .list-group:empty{ display:none !important; }

/* spatiere consistenta intre panourile din sidebar */
.sidebar .panel{ margin-bottom:20px !important; }
.sidebar .panel:last-child{ margin-bottom:0 !important; }

/* daca al doilea sidebar (secondary) e gol, ascunde-l */
.sidebar:empty{ display:none !important; }