/* ==========================================================
   Barishal Host - WHMCS twenty-one custom theme
   আপলোড করুন: templates/twenty-one/css/custom.css
   রং বদলাতে শুধু নিচের :root এর ভ্যালুগুলো বদলান
   ========================================================== */

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

:root {
  --brand: #2563eb;        /* মূল রং */
  --brand-dark: #1d4ed8;   /* hover রং */
  --brand-soft: #eff4ff;   /* হালকা ব্যাকগ্রাউন্ড */
  --text: #1e293b;
  --muted: #64748b;
  --bg: #f4f7fb;
  --card: #ffffff;
  --border: #e5eaf2;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(15, 23, 42, .07);
}

/* ---------- Base ---------- */
body {
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  background: var(--bg);
  color: var(--text);
}
a { color: var(--brand); transition: .2s; }
a:hover { color: var(--brand-dark); text-decoration: none; }
h1, h2, h3, h4, h5 { font-weight: 600; color: var(--text); }

/* ---------- Header / Top bar ---------- */
#header {
  background: #fff;
  box-shadow: 0 2px 14px rgba(15, 23, 42, .06);
  padding: 8px 0;
}
#header .navbar-brand img { max-height: 48px; width: auto; }


/* ==========================================================
   TOP MENU  (header.header .main-navbar-wrapper > #mainNavbar > ul#nav)
   ========================================================== */

/* পুরো মেনু বারের রং */
html body header.header .main-navbar-wrapper,
html body header.header .main-navbar-wrapper nav.navbar,
html body header.header .main-navbar-wrapper .container {
  background: transparent !important;
}
html body header.header .main-navbar-wrapper {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, .25);
  border: 0 !important;
}

/* সব সময় দেখা যাবে: সাদা লেখা + হালকা বর্ডার */
html body header.header .main-navbar-wrapper #mainNavbar ul.navbar-nav > li > a,
html body header.header .main-navbar-wrapper ul#nav > li > a {
  color: #ffffff !important;
  background: rgba(255, 255, 255, .10) !important;
  border: 1px solid rgba(255, 255, 255, .45) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  margin: 8px 4px !important;
  font-weight: 500;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none;
  transition: all .25s ease;
}

/* হোভার / ক্লিক / ফোকাস / খোলা ড্রপডাউন: সবকিছুতে একই রং */
html body header.header .main-navbar-wrapper #mainNavbar ul.navbar-nav > li > a:hover,
html body header.header .main-navbar-wrapper #mainNavbar ul.navbar-nav > li > a:focus,
html body header.header .main-navbar-wrapper #mainNavbar ul.navbar-nav > li > a:active,
html body header.header .main-navbar-wrapper #mainNavbar ul.navbar-nav > li.show > a,
html body header.header .main-navbar-wrapper #mainNavbar ul.navbar-nav > li.active > a,
html body header.header .main-navbar-wrapper ul#nav > li > a:hover,
html body header.header .main-navbar-wrapper ul#nav > li > a:focus,
html body header.header .main-navbar-wrapper ul#nav > li > a:active {
  background: #ffffff !important;
  color: var(--brand) !important;
  border-color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}

/* মোবাইল মেনু বাটন (হ্যামবার্গার) */
html body header.header .main-navbar-wrapper .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, .6) !important;
  border-radius: 8px;
}
html body header.header .main-navbar-wrapper .navbar-toggler .navbar-toggler-icon,
html body header.header .main-navbar-wrapper .navbar-toggler i {
  color: #fff !important;
}

/* ড্রপডাউন বক্স */
html body header.header .main-navbar-wrapper .dropdown-menu {
  background: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow);
  padding: 8px !important;
}
html body header.header .main-navbar-wrapper .dropdown-menu li.dropdown-item {
  padding: 0 !important;
  border-radius: 8px;
  background: transparent !important;
}
html body header.header .main-navbar-wrapper .dropdown-menu li.dropdown-item > a.dropdown-item {
  display: block;
  color: var(--text) !important;
  padding: 9px 14px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  transform: none;
  box-shadow: none;
  transition: all .2s ease;
}
html body header.header .main-navbar-wrapper .dropdown-menu li.dropdown-item > a.dropdown-item:hover,
html body header.header .main-navbar-wrapper .dropdown-menu li.dropdown-item > a.dropdown-item:focus,
html body header.header .main-navbar-wrapper .dropdown-menu li.dropdown-item > a.dropdown-item:active {
  background: var(--brand) !important;
  color: #fff !important;
  padding-left: 20px !important;
}

/* নিচের ধূসর বার (Shopping Cart) */
.master-breadcrumb {
  background: var(--brand-soft) !important;
  border-bottom: 1px solid var(--border);
}

/* ==========================================================
   Sidebar category menu: সিলেক্ট/হোভারে কালচে রং বন্ধ
   ========================================================== */
.sidebar .list-group-item,
.card-sidebar .list-group-item,
.list-group-item-action {
  color: var(--text) !important;
  background: #fff !important;
  border-color: var(--border) !important;
  transition: all .2s ease;
}
.sidebar .list-group-item:hover,
.sidebar .list-group-item:focus,
.card-sidebar .list-group-item:hover,
.card-sidebar .list-group-item:focus,
.list-group-item-action:hover,
.list-group-item-action:focus {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus,
.sidebar .list-group-item.active:active,
.card-sidebar .list-group-item.active,
.card-sidebar .list-group-item.active:hover,
.card-sidebar .list-group-item.active:focus,
.card-sidebar .list-group-item.active:active,
.list-group-item.active,
.list-group-item.active:hover {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.list-group-item.active *,
.list-group-item.active:hover * {
  color: #fff !important;
}

/* ---------- Home banner ---------- */
#home-banner {
  background: linear-gradient(135deg, var(--brand), #4f8cff);
  color: #fff;
  padding: 56px 0;
  margin-bottom: 30px;
}
#home-banner h2, #home-banner p { color: #fff; }
#home-banner .input-group {
  background: #fff;
  border-radius: 50px;
  padding: 5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}
#home-banner .form-control { border: 0; background: transparent; box-shadow: none; }
#home-banner .btn { border-radius: 50px; }

/* ---------- Cards / Panels ---------- */
.card,
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-header,
.card-title {
  background: transparent;
  font-weight: 600;
}
.card-header { border-bottom: 1px solid var(--border); padding: 16px 20px; }
.card-body { padding: 20px; }
.card-sidebar .list-group-item { border: 0; border-bottom: 1px solid var(--border); }
.card-sidebar .list-group-item.active,
.card-sidebar .list-group-item:hover {
  background: var(--brand-soft);
  color: var(--brand);
}

/* Dashboard tiles */
div.tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: .25s;
}
div.tile:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(37, 99, 235, .16); }
div.tile .stat { color: var(--brand); font-weight: 700; }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; font-weight: 500; padding: 9px 20px; transition: .2s; }
.btn-primary,
.btn-info {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .28);
}
.btn-primary:hover,
.btn-info:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  transform: translateY(-1px);
}
.btn-success { box-shadow: 0 4px 12px rgba(34, 197, 94, .25); }
.btn-default { border: 1px solid var(--border); background: #fff; }

/* ---------- Forms ---------- */
.form-control,
.custom-select {
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 10px 14px;
  height: auto;
}
.form-control:focus,
.custom-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

/* ---------- Tables ---------- */
.table thead th {
  background: var(--brand-soft);
  color: var(--brand-dark);
  border: 0;
  font-weight: 600;
}
.table td { vertical-align: middle; border-color: var(--border); }
.table-hover tbody tr:hover { background: #f8faff; }

/* ---------- Status labels ---------- */
.label, .badge { border-radius: 50px; padding: 5px 12px; font-weight: 500; }

/* ---------- Alerts ---------- */
.alert { border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- Login page ---------- */
.logincontainer .card,
.login-form .card { max-width: 460px; margin: 30px auto; padding: 10px; }

/* ---------- Product / order form ---------- */
.product,
.package { border-radius: var(--radius); border: 1px solid var(--border); transition: .25s; }
.product:hover,
.package:hover { box-shadow: 0 12px 30px rgba(37, 99, 235, .15); transform: translateY(-3px); }

/* ---------- Footer ---------- */
#footer {
  background: #0f172a;
  color: #94a3b8;
  padding: 28px 0;
  margin-top: 50px;
}
#footer a { color: #cbd5e1; }
#footer a:hover { color: #fff; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .btn { width: 100%; margin-bottom: 8px; }
  #home-banner { padding: 36px 0; }
  .card-body { padding: 16px; }
}

/* ==========================================================
   FINAL OVERRIDES (ফাইলের একদম শেষে থাকতে হবে)
   আপনার Inspect অনুযায়ী: header.header .navbar a { color:#444 } কে হারানোর জন্য
   ========================================================== */

/* মেনু বারের ব্যাকগ্রাউন্ড */
html body header.header .main-navbar-wrapper,
html body header.header nav.navbar {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
}

/* মেনুর লিংক: সব সময় সাদা লেখা + বর্ডার */
html body header.header .navbar a,
html body header.header .navbar-nav a,
html body header.header #nav > li > a {
  color: #fff !important;
  text-decoration: none !important;
}
html body header.header #nav > li > a,
html body header.header .navbar-nav > li > a {
  background: rgba(255, 255, 255, .10) !important;
  border: 1px solid rgba(255, 255, 255, .45) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  margin: 8px 4px !important;
  transition: all .25s ease;
}

/* হোভার / ক্লিক / ফোকাস */
html body header.header .navbar a:hover,
html body header.header .navbar a:focus,
html body header.header .navbar a:active,
html body header.header #nav > li > a:hover,
html body header.header #nav > li > a:focus,
html body header.header #nav > li > a:active,
html body header.header #nav > li.show > a,
html body header.header .navbar-nav > li > a:hover,
html body header.header .navbar-nav > li > a:focus,
html body header.header .navbar-nav > li > a:active {
  background: #fff !important;
  color: var(--brand) !important;
  border-color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}

/* ড্রপডাউনের ভেতরের লিংক আবার ঠিক রং */
html body header.header .dropdown-menu a,
html body header.header .dropdown-menu a.dropdown-item {
  color: var(--text) !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  transform: none !important;
  box-shadow: none !important;
}
html body header.header .dropdown-menu a:hover,
html body header.header .dropdown-menu a.dropdown-item:hover,
html body header.header .dropdown-menu li:hover > a {
  background: var(--brand) !important;
  color: #fff !important;
}

/* বাম পাশের ক্যাটাগরি মেনু: সিলেক্ট থাকা অবস্থায় হোভারে #666 না হয়ে নীল থাকবে */
html body a.list-group-item.active,
html body a.list-group-item.active:hover,
html body a.list-group-item.active:focus,
html body a.list-group-item.active:active,
html body .list-group-item.active,
html body .list-group-item.active:hover,
html body .list-group-item-action.active,
html body .list-group-item-action.active:hover,
html body .card-sidebar .list-group-item.active,
html body .card-sidebar .list-group-item.active:hover,
html body .card-sidebar a.active:hover,
html body .sidebar a.active:hover {
  background: var(--brand) !important;
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  text-decoration: none !important;
}
html body .list-group-item.active:hover *,
html body .list-group-item.active:hover i,
html body .list-group-item.active:hover span {
  color: #fff !important;
}

/* ---------- Categories sidebar: ক্লিকের পর হোভারে কালো ব্যাকগ্রাউন্ড বন্ধ ---------- */
html body .list-group-item,
html body a.list-group-item,
html body .list-group-item-action {
  background-image: none !important;
}
html body .list-group-item:focus,
html body .list-group-item:active,
html body a.list-group-item:focus,
html body a.list-group-item:active,
html body .list-group-item-action:focus,
html body .list-group-item-action:active,
html body .list-group-item.active:focus,
html body .list-group-item.active:active,
html body .list-group-item.active:hover,
html body a.list-group-item.active:hover,
html body .list-group-item-action.active:hover,
html body .card-sidebar .list-group-item:hover.active,
html body .card-sidebar a:hover.active {
  background: var(--brand) !important;
  background-color: var(--brand) !important;
  background-image: none !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}
html body .list-group-item.active:hover *,
html body .list-group-item.active:focus *,
html body a.list-group-item.active:hover *,
html body a.list-group-item.active:focus * {
  color: #fff !important;
}
/* সিলেক্ট না করা আইটেমে হোভারে হালকা নীল */
html body .list-group-item:not(.active):hover,
html body a.list-group-item:not(.active):hover {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}

/* ---------- Menu: বক্স ভাব কমানো (বর্ডার ছাড়া, ক্লিন লুক) ---------- */
html body header.header #nav > li > a,
html body header.header .navbar-nav > li > a {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 50px !important;
  padding: 8px 18px !important;
  margin: 8px 2px !important;
  box-shadow: none !important;
  transform: none !important;
  position: relative;
}

html body header.header #nav > li > a:hover,
html body header.header #nav > li > a:focus,
html body header.header #nav > li > a:active,
html body header.header #nav > li.show > a,
html body header.header .navbar-nav > li > a:hover,
html body header.header .navbar-nav > li > a:focus,
html body header.header .navbar-nav > li > a:active,
html body header.header .navbar-nav > li.show > a {
  background: #fff !important;
  color: var(--brand) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15) !important;
}

/* ---------- Menu: খুব হালকা বর্ডার ---------- */
html body header.header #nav > li > a,
html body header.header .navbar-nav > li > a {
  border: 1px solid rgba(255, 255, 255, .18) !important;
}
html body header.header #nav > li > a:hover,
html body header.header #nav > li > a:focus,
html body header.header #nav > li > a:active,
html body header.header #nav > li.show > a,
html body header.header .navbar-nav > li > a:hover,
html body header.header .navbar-nav > li > a:focus,
html body header.header .navbar-nav > li > a:active,
html body header.header .navbar-nav > li.show > a {
  border-color: #fff !important;
}