/* i2webhost Modern (Variant A inspired) – WHMCS Twenty-One theme overrides */
/* No AOS / no scroll animations (client area friendly). */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;600;700;800;900&display=swap");

:root{
  --i2-ink:#0f1020;
  --i2-muted:rgba(15,16,32,.72);
  --i2-border:rgba(15,16,32,.12);
  --i2-purple-600:#6d28d9;
  --i2-purple-400:#8b5cf6;
  --i2-radius:18px;
}

html,body{overflow-x:hidden}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  color:var(--i2-ink);
  background:linear-gradient(180deg,#fff 0%, #fff 45%, #faf7ff 100%) !important;
}
html[dir="rtl"] body{
  font-family:"Noto Kufi Arabic",Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
}

/* Container width like Variant A */
.container,
.container-sm,.container-md,.container-lg,.container-xl{
  max-width:1120px !important;
  padding-left:18px !important;
  padding-right:18px !important;
}

/* Links */
a{color:var(--i2-purple-600)}
a:hover{color:var(--i2-purple-400)}

/* Header (navbar) – clean + roomy */
#header.header{
  background:transparent;
  position:sticky;
  top:0;
  z-index:1000;
}
#header .topbar{
  background:#fff;
  border-bottom:1px solid var(--i2-border);
}
#header .navbar.navbar-light{
  background:rgba(255,255,255,.88);
  border-bottom:1px solid var(--i2-border);
  backdrop-filter:saturate(160%) blur(12px);
}
#header .main-navbar-wrapper{
  /* Make the second navbar feel like a floating modern pill */
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,16,32,.10);
  border-top:0;
  border-left:0;
  border-right:0;
  backdrop-filter:saturate(160%) blur(12px);
}

/* Main nav items */
#header .main-navbar-wrapper .navbar-nav .nav-link{
  font-weight:900;
  color:rgba(15,16,32,.82) !important;
  letter-spacing:-.01em;
  padding:.7rem .9rem;
  border-radius:14px;
}
#header .main-navbar-wrapper .navbar-nav .nav-link:hover{
  background:rgba(109,40,217,.08);
  color:var(--i2-purple-600) !important;
}
#header .main-navbar-wrapper .navbar-nav .nav-link.active{
  background:rgba(109,40,217,.10);
  color:var(--i2-purple-600) !important;
}

/* Dropdowns inside nav */
#header .main-navbar-wrapper .dropdown-menu{
  border-radius:18px !important;
}

/* Improve mobile collapse area readability */
#header .main-navbar-wrapper .navbar-collapse{
  padding:10px 0;
}
#header .navbar-brand{
  font-weight:950;
  letter-spacing:-.02em;
  color:var(--i2-ink) !important;
  display:flex;
  align-items:center;
  gap:10px;
}
.i2-brand-mark{
  width:34px;height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--i2-purple-600),var(--i2-purple-400));
  font-weight:950;
  line-height:1;
}
.i2-brand-text{font-weight:950}

/* Buttons – Variant A style */
.btn{
  border-radius:14px !important;
  font-weight:800 !important;
  border:1px solid transparent;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary, .btn-success{
  color:#fff !important;
  background:linear-gradient(135deg,var(--i2-purple-600),var(--i2-purple-400)) !important;
  border-color:transparent !important;
  box-shadow:0 12px 22px rgba(109,40,217,.20);
}
.btn-primary:hover, .btn-success:hover{
  box-shadow:0 14px 28px rgba(109,40,217,.26);
}
.btn-default, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-light{
  background:#fff !important;
  border-color:var(--i2-border) !important;
  color:rgba(15,16,32,.86) !important;
}
.btn-default:hover, .btn-secondary:hover, .btn-outline:hover, .btn-outline-primary:hover, .btn-light:hover{
  border-color:rgba(109,40,217,.35) !important;
  color:var(--i2-purple-600) !important;
}

/* Cards / panels */
.card, .panel, .list-group-item, .alert, .well,
.client-home-panels .card,
.header-lined, .secondary-header{
  border-radius:var(--i2-radius) !important;
}
.card, .panel, .list-group-item{
  border-color:var(--i2-border) !important;
}

/* Forms – white + purple borders like Variant A */
label{font-weight:800;color:rgba(15,16,32,.78)}
.form-control,
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"],
select, textarea{
  border-radius:14px !important;
  border:1px solid var(--i2-border) !important;
  background:#fff !important;
  color:rgba(15,16,32,.92) !important;
  box-shadow:none !important;
}
.input-group-text{
  border-radius:14px !important;
  border:1px solid var(--i2-border) !important;
  background:#fff !important;
  color:rgba(15,16,32,.74) !important;
  font-weight:800;
}
.form-control:focus,
input:focus, select:focus, textarea:focus{
  outline:none !important;
  border-color:rgba(109,40,217,.45) !important;
  box-shadow:0 0 0 4px rgba(109,40,217,.12) !important;
}
.custom-control-label::before,
.custom-control-label::after{top:.20rem}

/* Checkboxes & radios */
input[type="checkbox"], input[type="radio"]{
  accent-color:var(--i2-purple-600);
}

/* Tables */
.table,
.table th,
.table td{
  border-color:rgba(15,16,32,.10) !important;
}
.table thead th{
  border-bottom:1px solid rgba(15,16,32,.14) !important;
  color:rgba(15,16,32,.82);
  font-weight:900;
}
.table-striped tbody tr:nth-of-type(odd){
  background-color:rgba(109,40,217,.03) !important;
}

/* Pills / badges */
.badge,
.label{
  border-radius:999px !important;
  font-weight:900 !important;
}
.badge-primary, .label-primary{
  background:rgba(109,40,217,.12) !important;
  color:var(--i2-purple-600) !important;
}

/* Alerts */
.alert{
  border:1px solid rgba(15,16,32,.10) !important;
  background:#fff !important;
}
.alert-success{border-color:rgba(16,185,129,.22) !important}
.alert-info{border-color:rgba(59,130,246,.22) !important}
.alert-warning{border-color:rgba(245,158,11,.22) !important}
.alert-danger{border-color:rgba(239,68,68,.22) !important}

/* Modals / dropdowns */
.modal-content,
.dropdown-menu{
  border-radius:18px !important;
  border:1px solid rgba(15,16,32,.12) !important;
  box-shadow:0 30px 80px rgba(15,16,32,.18) !important;
}
.modal-header{border-bottom:1px solid rgba(15,16,32,.10) !important}
.modal-footer{border-top:1px solid rgba(15,16,32,.10) !important}

/* Sidebar panels (client area) */
.sidebar .list-group-item{
  background:#fff !important;
}
.sidebar .list-group-item.active{
  background:rgba(109,40,217,.10) !important;
  border-color:rgba(109,40,217,.22) !important;
  color:var(--i2-purple-600) !important;
}

/* Tabs / nav pills */
.nav-tabs .nav-link,
.nav-pills .nav-link{
  border-radius:14px !important;
  font-weight:900 !important;
}
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active{
  background:rgba(109,40,217,.10) !important;
  color:var(--i2-purple-600) !important;
  border-color:rgba(109,40,217,.22) !important;
}

/* Footer */
#footer.footer{
  padding:40px 0;
  border-top:1px solid var(--i2-border);
  background:#fff;
}