/* ===========================
   JoyHobe — Clean Fresh Theme
   =========================== */

/* ---------- 0) Variables ---------- */
:root{
  /* Teal (top bg) */
  --teal-900:#04282d;
  --teal-800:#063239;
  --teal-700:#0a3f47;

  /* Deep plum band */
  --plum-900:#17081b;
  --plum-800:#1f0b26;
  --plum-700:#2a0f35;

  /* Text & accents */
  --text-strong:#eef6f7;     /* headings / strong text */
  --text-normal:#dbe8ea;     /* body text */
  --text-muted:#a6c0c3;      /* helper */
  --gold:#fbbf24;            /* accent (buttons/links) */

  /* Cards / borders */
  --card:#0e1a1c;
  --card-soft:#102125;
  --border:#183b42;

  /* Success/alert if needed */
  --red:#ef4444;
  --red-dark:#dc2626;
}

/* ---------- 1) Global reset ---------- */
*,
*::before,
*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text-normal);
  background:
    radial-gradient(900px 400px at 25% -15%, rgba(251,191,36,.10), transparent 60%),
    radial-gradient(700px 300px at 90% 0%, rgba(14,165,233,.10), transparent 60%),
    linear-gradient(180deg, var(--teal-800), var(--teal-900));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6{ color:var(--text-strong); margin:0 0 .35rem; }
p,li,td,th,small{ color:var(--text-normal); }

/* Links */
a{ color:var(--text-normal); text-decoration:none; }
a:hover{ color:var(--gold); }

/* Utility */
.text-gold{ color:var(--gold) !important; }
.muted{ color:var(--text-muted) !important; }

/* ---------- 2) Navbar ---------- */
.navbar-dark,
header .navbar{ background:transparent; }
.navbar-dark .navbar-nav .nav-link{
  color:var(--text-normal) !important;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active{
  color:var(--gold) !important;
}

/* ---------- 3) Hero / title ---------- */
.hero{ padding:3rem 0 1rem; }
.hero .lead{ color:var(--text-muted); }
.brand-em{ color:var(--gold); }  /* e.g. “JoyHobe” */

/* ---------- 4) Section: deep plum band ---------- */
/* হোমে মাঝখানের ব্যান্ডের জন্য wrapper-এ এই ক্লাস দিন */
.section-plum{
  background: linear-gradient(180deg, var(--plum-800), var(--plum-900));
  padding:2rem 0;
  position: relative;
  z-index: 1;
  box-shadow: inset 0 -20px 40px rgba(0,0,0,.25), inset 0 20px 40px rgba(0,0,0,.25);
}

/* ---------- 5) Cards ---------- */
.card-glass{
  background: var(--card);
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  border-radius: .75rem;
  color:var(--text-strong);
}
.card-glass .text-secondary,
.card-glass small{ color:var(--text-muted) !important; }

/* হোমের 5টা বড় বাটনের কার্ড */
.quick-menu .card-glass{
  background: var(--card-soft);
  border-color: rgba(251,191,36,.22);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.quick-menu .card-glass h5{ color:var(--gold) !important; letter-spacing:.2px; }
.quick-menu .card-glass:hover{
  transform: translateY(-2px);
  border-color: rgba(251,191,36,.35);
  box-shadow: 0 16px 34px rgba(251,191,36,.18);
}

/* ---------- 6) Buttons ---------- */
.btn{ cursor:pointer; }
.btn-primary{
  background:var(--gold);
  border-color:var(--gold);
  color:#0b0b0b;
}
.btn-primary:hover{ filter:brightness(.92); }

.btn-outline-primary{
  border-color:var(--gold);
  color:var(--gold);
  background:transparent;
}
.btn-outline-primary:hover{
  background:var(--gold);
  color:#0b0b0b;
}

.complain-btn{ background:var(--red); border:none; color:#fff; }
.complain-btn:hover{ background:var(--red-dark); }

/* ---------- 7) Forms / Inputs ---------- */
.form-control{
  background:#08363b;
  color:var(--text-strong);
  border:1px solid #0e3a41;
}
.form-control::placeholder{ color:#9eb8bb; }
.form-control:focus{
  background:#0a4046;
  color:var(--text-strong);
  border-color:#3fb7c2;
  outline:0;
  box-shadow:none;
}

/* ---------- 8) Tables (generic) ---------- */
.table{
  width:100%;
  border-collapse:collapse;
}
.table thead th{
  background:#0f2f35;
  color:#e7eef0;
  border-bottom:1px solid var(--border);
  padding:.75rem .75rem;
}
.table tbody td{
  color:var(--text-strong);
  border-top:1px solid var(--border);
  padding:.75rem .75rem;
}
.table tbody tr:hover{ background:rgba(255,255,255,.03); }

/* ---------- 9) Agents table (public list/search) ---------- */
/* টেবিলের ভিতরে টেক্সট স্পষ্ট + গোল্ড হাইলাইট */
.agents-table thead th{
  color: #eaf3f5;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

.agents-table tbody tr{
  background: rgba(0, 0, 0, 0.28);
}
.agents-table tbody tr:hover{
  background: rgba(0, 0, 0, 0.40);
}
.agents-table td,
.agents-table th{
  color:#e6f2f2 !important;
  vertical-align: middle;
  border-color: rgba(255, 255, 255, 0.08);
}
/* ID (col 3) & Phone (col 6) -> gold */
.agents-table tbody td:nth-child(3),
.agents-table tbody td:nth-child(6){
  color: var(--gold) !important;
  font-weight: 700;
}
/* Below-note row (colspan) */
.agents-table tbody td[colspan]{
  background: rgba(255,255,255,.06);
  color: var(--text-normal) !important;
}
/* Badges (Type) */
.agents-table .badge-type{
  background: #0ea5a5;
  color:#022224;
  font-weight:600;
  border-radius:.4rem;
  padding:.35rem .55rem;
}

/* ---------- 10) Ticker (news) ---------- */
.ticker{
  overflow:hidden;
  position:relative;
  background:var(--gold);
  color:#1b1b1b;
  font-weight:600;
  border-radius:.5rem;
}
.ticker__wrap{
  white-space:nowrap;
  display:inline-block;
  animation: ticker var(--spd,25s) linear infinite;
  padding:.4rem .75rem;
}
@keyframes ticker{ from{transform:translateX(100%);} to{transform:translateX(-100%);} }

/* ---------- 11) Footer ---------- */
.footer, footer{
  color:#c8d7d9;
  background:#1b2528;
  border-top:1px solid rgba(255,255,255,.06);
}

/* ---------- 12) Helpers ---------- */
.text-primary{ color:var(--gold) !important; }
.badge-type{ background:#155e75; color:#dff5f7; }

/* Position tweaks for sections */
.section{ padding:2rem 0; }
.section-lg{ padding:3rem 0; }

/* ---------- 13) Responsive ---------- */
@media (max-width: 768px){
  .hero{ padding:2rem 0 .5rem; }
  .quick-menu .card-glass{ margin-bottom: .75rem; }
}

/* === Deep Purple theme (site-wide) === */
:root{
  --bg-900: #120d2a;      /* main deep purple */
  --bg-800: #18113a;      /* slightly lighter for hero/header */
  --panel:  #0e0a22;      /* cards/panels */
  --text:   #f2f6ff;      /* main text */
  --muted:  #c1c6db;      /* secondary text */
  --line:   #241d4d;      /* borders */
  --accent: #ffd34d;      /* gold accent (buttons/links/id/phone) */
}

/* page background + default text */
html, body { background: var(--bg-900); color: var(--text); }

/* whole site band / background sections */
.site-band,
.bg-gradient { 
  background: var(--bg-900) !important; 
  color: var(--text) !important;
}

/* hero/header area – হালকা depth */
.hero{
  background:
    radial-gradient(900px 340px at 50% -14%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, var(--bg-800) 0%, var(--bg-900) 60%);
}

/* cards / panels */
.card-glass{
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  color: var(--text);
}

/* tables */
.table thead th{
  background: var(--bg-800);
  color: var(--text);
  border-color: var(--line);
}
.table tbody td{
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}

/* inputs */
.form-control{
  background: #1a1541;
  border-color: #2b2369;
  color: var(--text);
}
.form-control::placeholder{ color:#9aa0bd; }
.form-control:focus{
  background:#211a54; 
  color:var(--text);
  border-color:#5a4de0; 
  box-shadow:none;
}

/* buttons/links */
.btn-primary{ background:var(--accent); border-color:var(--accent); color:#111; }
.btn-primary:hover{ filter:brightness(.92); }
.btn-outline-primary{ border-color:var(--accent); color:var(--accent); }
.btn-outline-primary:hover{ background:var(--accent); color:#111; }
.text-primary, a:hover{ color:var(--accent) !important; }

/* navbar */
.navbar-dark .navbar-nav .nav-link{ color:var(--text) !important; }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active{ color:var(--accent) !important; }

/* footer */
.footer, .footer a{ color: var(--muted); }

/* agents table – ID/Phone গোল্ড, সবকিছু পড়ার মতো */
.agents-table tbody tr{ background: transparent !important; }
.agents-table tbody td{ color: var(--text) !important; opacity: 1 !important; }
.agents-table tbody td:nth-child(3),
.agents-table tbody td:nth-child(6){
  color: var(--accent) !important;
  font-weight: 700;
}
.agents-table tbody td[colspan]{
  background: rgba(255,255,255,.03);
  color: var(--muted) !important;
}

/* complain button লালই থাকুক */
.complain-btn{ background:#ef4444; border:none; }
.complain-btn:hover{ background:#dc2626; }

/* ===== Navbar = Deep Purple ===== */
:root{
  /* এগুলো আগে দেয়া না থাকলে দরকার হবে */
  --bg-900:#120d2a;   /* main deep purple */
  --bg-800:#18113a;   /* lighter strip */
  --text:#f2f6ff;
  --muted:#c1c6db;
  --line:#241d4d;
  --accent:#ffd34d;
}

/* আসল নেভবার ব্যাকগ্রাউন্ড */
header .navbar,
.navbar,
.navbar.bg-dark,
.navbar-dark,
.navbar-dark.bg-dark {
  background: linear-gradient(180deg, var(--bg-800) 0%, var(--bg-900) 80%) !important;
  border-bottom: 1px solid var(--line);
}

/* ব্র্যান্ড/লিংক কালার */
.navbar-dark .navbar-brand,
.navbar .navbar-brand { color: var(--accent) !important; }

.navbar-dark .navbar-nav .nav-link{
  color: var(--text) !important;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active{
  color: var(--accent) !important;
}

/* নেভবার সার্চ বক্স/বোতাম */
.navbar .form-control{
  background:#1a1541 !important;
  border-color:#2b2369 !important;
  color:var(--text) !important;
}
.navbar .form-control::placeholder{ color:#9aa0bd !important; }
.navbar .btn,
.navbar .btn-outline-light{
  border-color: var(--accent) !important;
  color: var(--bg-900) !important;
  background: var(--accent) !important;
}
.navbar .btn:hover{ filter: brightness(.92); }

/* ড্রপডাউন কালার (যদি থাকে) */
.navbar .dropdown-menu{
  background:#1a1541 !important;
  border:1px solid #2b2369;
}
.navbar .dropdown-item{ color:var(--text) !important; }
.navbar .dropdown-item:hover{ background:#211a54 !important; color:var(--accent) !important; }

/* ===== Footer: Deep Purple theme ===== */
:root{
  /* আপনার রুট ভ্যারগুলো আগে থাকলে এগুলো দরকার নেই */
  --bg-900:#120d2a;   /* main deep purple */
  --bg-800:#18113a;   /* lighter */
  --text:#f2f6ff;
  --muted:#c1c6db;
  --accent:#ffd34d;
  --line:#241d4d;
}

/* footer যেভাবেই লেখা থাকুক—সব ধরার জন্য বিস্তৃত সিলেক্টর */
footer,
.footer,
.site-footer,
footer.bg-dark,
.footer.bg-dark,
.footer .bg-dark {
  background: linear-gradient(180deg, var(--bg-800) 0%, var(--bg-900) 100%) !important;
  color: var(--text) !important;
  border-top: 1px solid var(--line);
}

/* ফুটারের লিংক/টেক্সট */
footer a, .footer a { color: var(--muted) !important; text-decoration: none; }
footer a:hover, .footer a:hover { color: var(--accent) !important; }

footer .small, .footer .small { color: var(--muted) !important; }

/* ===== Base tap targets ===== */
.btn, .form-control { min-height: 44px; }

/* ===== Navbar ===== */
.site-navbar{
  background: #0c1122;      /* আপনার নবীনের deep navy */
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.navbar-dark .navbar-brand .brand-logo{ height: 28px; width:auto; }
@media (min-width: 992px){
  .navbar-dark .navbar-brand .brand-logo{ height: 32px; }
}

/* ===== Hero texts ===== */
.hero h1{ font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3rem); line-height: 1.15; }
.hero .lead{ font-size: clamp(.95rem, .85rem + .6vw, 1.25rem); }

/* ===== Search inputs: full width on mobile ===== */
.navbar form .form-control{ min-width: 0; }
@media (max-width: 991.98px){
  .navbar form { width: 100%; }
}

/* ===== Quick menu cards ===== */
.quick-menu .card-glass{
  background: rgba(9, 12, 28, .9);
  border: 1px solid rgba(255,255,255,.06);
  color: #e9f2ff;
  transition: transform .15s ease, box-shadow .2s ease;
}
.quick-menu .card-glass h5{
  color: #ffd76a;
  margin: 0;
  letter-spacing: .2px;
}
.quick-menu .card-glass:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 215, 106, .18);
}

/* ===== Cards & sections ===== */
.card-glass{
  background: #10122a;
  border: 1px solid rgba(255,255,255,.06);
  color: #e9f2ff;
}

/* ===== Table responsive ===== */
.table-responsive{ overflow-x: auto; }

/* ডেক্সটপ টেবিল ডিফল্ট—আগের মতোই থাকবে */
.agents-table{ width:100%; }

/* মোবাইলে কার্ড ভিউ */
@media (max-width: 575.98px){
  .agents-table thead{ display:none; }
  .agents-table, .agents-table tbody, .agents-table tr, .agents-table td { display:block; width:100%; }
  .agents-table tr{ margin-bottom: .85rem; border: 1px solid rgba(255,255,255,.08); border-radius: .5rem; background: rgba(255,255,255,.03); padding: .5rem .75rem; }
  .agents-table td{ border:0 !important; padding: .35rem 0; color:#e9f2ff !important; }
  .agents-table td[data-label]::before{
    content: attr(data-label) " : ";
    font-weight:600;
    color:#a7b7ff;
    width: 48%;
    display:inline-block;
  }
  .agents-table td[colspan]{ padding-top:.5rem; }
}

/* আইডি/ফোন গোল্ড (ডেস্কটপে) */
@media (min-width: 576px){
  .agents-table tbody td:nth-child(3),
  .agents-table tbody td:nth-child(6){
    color:#ffd76a !important; font-weight:700;
  }
}

/* ===== Footer ===== */
.footer, .footer a{ color:#cfd8e3; }
@media (max-width: 575.98px){
  .footer .container{ text-align:center; }
}

/* ===== Utilities ===== */
a,button{ touch-action: manipulation; }
img{ max-width:100%; height:auto; }

.agents-table td{
  word-break: break-word;
}

/* ---------- DESKTOP POLISH (PC view) ---------- */
@media (min-width: 1200px){
  /* Container একটু চওড়া, কিন্তু খুব বেশি না */
  .container { max-width: 1240px; }
}

.page-title, .container h2 {
  font-size: 2.15rem;
  font-weight: 800;
  letter-spacing: .2px;
}

/* Table টাকে কার্ডের মতো দেখাই */
.agents-table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  overflow: hidden; /* rounded corner ধরে রাখতে */
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* রো-প্যাডিং একটু কমপ্যাক্ট */
.agents-table th,
.agents-table td{
  padding: .70rem .9rem !important;
  vertical-align: middle;
  border-color: rgba(255,255,255,.08) !important;
}

/* Header গাঢ় এবং স্পষ্ট */
.agents-table thead th{
  background:#120e25 !important;
  color:#f3f5f7 !important;
  border:0 !important;
  font-weight:700;
}

/* Zebra striping + hover */
.agents-table tbody tr{ background:#0e0b1b !important; }
.agents-table tbody tr:nth-child(even){ background:#120e22 !important; }
.agents-table tbody tr:hover{ background:#1a1630 !important; }

/* Type badge একটু ছোট ও টানটান */
.agents-table .badge-type{
  font-weight:600;
  font-size:.75rem;
  padding:.35rem .55rem;
  border-radius:20px;
}

/* নোট/গ্রুপ সাব-হেডার */
.agents-table .note-row td[colspan]{
  background:rgba(255,255,255,.03) !important;
  color:#cbd6ff !important;
}

/* গ্রুপ সাব-হেডার (যদি Trusted… এর মত রো ব্যবহার করো) */
.agents-table .table-subtitle td{
  background:#18122f !important;
  color:#f0e7ff !important;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  border:0 !important;
}

/* টপ টুলবার / ফিল্টার বারের স্পেসিং */
.toolbar,
.container > .d-flex.mb-3{
  gap: .75rem;
}

/* Footer ছোট করে দেই (বড় লোগো থাকলে সাইজ কমে যাবে) */
footer.footer, .footer{
  padding: 18px 0 !important;
}
footer .container img{
  max-height: 26px !important;
  height: auto;
}

/* পেজ ছোট হলে নিচে huge gap যেন না পড়ে */
main, .page-wrap{
  min-height: calc(100vh - 220px); /* approx header+footer বাদ */
}

/* Optional: টেবিলের Action বাটনগুলো টেকশই */
.agents-table .btn.btn-danger.btn-sm{
  padding: .35rem .6rem;
  font-weight:600;
  border-radius: 8px;
}
.agents-table .btn.btn-success.btn-sm{
  padding: .35rem .6rem;
  border-radius: 8px;
}

.faq-answer {
  color: #000 !important;
}
.faq-answer p,
.faq-answer span,
.faq-answer div {
  color: #000 !important;
}