/* ============================================================
   কৃষক সহায়তা প্ল্যাটফর্ম — Global Stylesheet
   Palette: ধানক্ষেত সবুজ, ফসলি সোনালি, মাটির বাদামি
   ============================================================ */
:root{
  --green-900:#143D24; --green-700:#1E5631; --green-500:#2E7D46; --green-100:#E3EFE6;
  --gold:#D99A1B; --gold-soft:#F6E7C6;
  --earth:#6B4F2A; --paper:#F3F6F0; --card:#FFFFFF;
  --ink:#22301F; --muted:#5F6F5A; --line:#D9E2D4;
  --danger:#B3261E; --info:#0B5FA5;
  --radius:12px; --shadow:0 2px 10px rgba(20,61,36,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Hind Siliguri',sans-serif;background:var(--paper);color:var(--ink);line-height:1.65;font-size:16px}
h1,h2,h3,.brand{font-family:'Tiro Bangla',serif}
a{color:var(--green-700);text-decoration:none}
img{max-width:100%}

/* ---------- Top navbar ---------- */
.navbar{background:var(--green-900);color:#fff;position:sticky;top:0;z-index:50;
  background-image:radial-gradient(circle at 15% 120%, rgba(217,154,27,.18), transparent 45%)}
.navbar .inner{max-width:1200px;margin:auto;display:flex;align-items:center;gap:16px;padding:12px 20px;flex-wrap:wrap}
.brand{font-size:1.35rem;color:#fff;display:flex;align-items:center;gap:10px}
.site-logo{height:36px;width:auto;border-radius:6px;background:#fff;padding:2px}
.brand .leaf{width:30px;height:30px;background:var(--gold);border-radius:50% 0 50% 50%;display:inline-block}
.nav-links{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.nav-links a{color:#EAF3EC;padding:8px 14px;border-radius:8px;font-size:.95rem}
.nav-links a:hover,.nav-links a.active{background:rgba(255,255,255,.14)}
.nav-links .cta{background:var(--gold);color:var(--green-900);font-weight:600}

/* ---------- Layout ---------- */
.container{max-width:1200px;margin:24px auto;padding:0 20px}
.panel{display:grid;grid-template-columns:240px 1fr;gap:24px}
.sidebar{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;height:fit-content}
.sidebar a{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:8px;color:var(--ink);margin-bottom:4px}
.sidebar a:hover,.sidebar a.active{background:var(--green-100);color:var(--green-900);font-weight:600}
.sidebar .count{background:var(--gold);color:var(--green-900);border-radius:12px;padding:0 8px;font-size:.8rem;font-weight:700}
.main{min-width:0}

/* ---------- Cards & stats ---------- */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:20px}
.card h2{color:var(--green-900);margin-bottom:14px;font-size:1.3rem;border-bottom:2px solid var(--gold-soft);padding-bottom:8px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:20px}
.stat{position:relative;background:var(--card);border-radius:14px;box-shadow:var(--shadow);
  padding:20px 18px 16px;display:flex;align-items:center;gap:14px;overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--green-500),var(--green-100));border-radius:14px 14px 0 0}
.stat:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(20,61,36,.16)}
.stat .stat-ico{flex:0 0 52px;width:52px;height:52px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;font-size:1.6rem;background:var(--green-100)}
.stat .num{font-size:2rem;font-weight:700;color:var(--green-900);font-family:'Tiro Bangla',serif;line-height:1.1}
.stat .lbl{color:var(--muted);font-size:.88rem;margin-top:2px}
.stat.gold::before{background:linear-gradient(90deg,var(--gold),var(--gold-soft))}
.stat.gold .stat-ico{background:var(--gold-soft)}
.stat.earth::before{background:linear-gradient(90deg,var(--earth),#E8DCC9)}
.stat.earth .stat-ico{background:#F0E7D8}
.stat.info::before{background:linear-gradient(90deg,var(--info),#D6E8F7)}
.stat.info .stat-ico{background:#E3F0FB}
.stat.danger::before{background:linear-gradient(90deg,var(--danger),#F6D9D7)}
.stat.danger .stat-ico{background:#FBEAE9}

/* ---------- Forms ---------- */
label{display:block;font-weight:600;margin:12px 0 4px;color:var(--green-900)}
input,select,textarea{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;font-family:inherit;font-size:1rem;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green-500);border-color:var(--green-500)}
textarea{min-height:120px;resize:vertical}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px}
.btn{display:inline-block;background:var(--green-700);color:#fff;border:none;padding:11px 22px;border-radius:8px;font-size:1rem;font-family:inherit;cursor:pointer;margin-top:14px}
.btn:hover{background:var(--green-900)}
.btn-gold{background:var(--gold);color:var(--green-900);font-weight:700}
.btn-danger{background:var(--danger)} .btn-sm{padding:6px 12px;font-size:.85rem;margin-top:0} .btn-outline{background:#fff;color:var(--green-700);border:1.5px solid var(--green-700)}

/* ---------- Alerts & badges ---------- */
.alert{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-weight:500}
.alert-success{background:var(--green-100);color:var(--green-900);border:1px solid var(--green-500)}
.alert-error{background:#FBEAE9;color:var(--danger);border:1px solid var(--danger)}
.alert-info{background:#E8F1FA;color:var(--info);border:1px solid var(--info)}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.8rem;font-weight:600;white-space:nowrap}
.badge-pending{background:#FFF3D6;color:#8a6100}.badge-assigned{background:#E8F1FA;color:var(--info)}
.badge-under_review{background:#EFE6FA;color:#5b21b6}.badge-answered{background:var(--green-100);color:var(--green-700)}
.badge-solved{background:var(--green-700);color:#fff}.badge-closed{background:#E5E7EB;color:#374151}
.badge-rejected{background:#FBEAE9;color:var(--danger)}.badge-urgent{background:var(--danger);color:#fff}
.badge-normal{background:#E5E7EB;color:#374151}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:#fff;font-size:.95rem}
th{background:var(--green-900);color:#fff;text-align:left;padding:10px 12px;white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:hover td{background:var(--paper)}
.pagination{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.pagination a,.pagination span{padding:6px 12px;border:1px solid var(--line);border-radius:6px;background:#fff}
.pagination .cur{background:var(--green-700);color:#fff;border-color:var(--green-700)}

/* ---------- Ticket chat (Messenger style) ---------- */
.chat{display:flex;flex-direction:column;gap:12px;max-height:520px;overflow-y:auto;padding:10px;background:var(--paper);border-radius:var(--radius)}
.msg{max-width:75%;padding:10px 14px;border-radius:14px;box-shadow:var(--shadow)}
.msg .who{font-size:.78rem;font-weight:700;margin-bottom:2px}
.msg .when{font-size:.72rem;color:var(--muted);margin-top:4px}
.msg-farmer{align-self:flex-start;background:#fff;border-bottom-left-radius:4px}
.msg-farmer .who{color:var(--earth)}
.msg-expert,.msg-admin{align-self:flex-end;background:var(--green-100);border-bottom-right-radius:4px}
.msg-expert .who,.msg-admin .who{color:var(--green-700)}
.msg-internal{align-self:flex-end;background:var(--gold-soft);border:1px dashed var(--gold)}
.msg img{border-radius:8px;margin-top:6px;max-height:180px;display:block}

/* ---------- Auth pages ---------- */
.auth-wrap{max-width:460px;margin:40px auto}
.auth-wrap.wide{max-width:760px}
.auth-head{text-align:center;margin-bottom:18px}
.auth-head h1{color:var(--green-900);font-size:1.6rem}
.auth-head p{color:var(--muted)}

/* ---------- Public / KB ---------- */
.hero{background:var(--green-900);color:#fff;padding:72px 20px;text-align:center;
  background-image:linear-gradient(rgba(20,61,36,.55),rgba(20,61,36,.78)),var(--hero-img);
  background-size:cover;background-position:center;
  text-shadow:0 1px 8px rgba(0,0,0,.45)}
.hero h1{font-size:2.2rem;margin-bottom:10px}
.hero p{max-width:640px;margin:0 auto 22px;color:#DCEDE1}
.kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.kb-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;border-left:4px solid var(--gold);display:flex;gap:12px;align-items:flex-start}
.kb-thumb{width:76px;height:76px;flex:0 0 76px;border-radius:10px;object-fit:cover;background:var(--green-100)}
.kb-thumb.ph{display:flex;align-items:center;justify-content:center;font-size:2rem}
.kb-card .kb-body{min-width:0}
.kb-card h3 a{color:var(--green-900)}
.tag{display:inline-block;background:var(--green-100);color:var(--green-700);border-radius:20px;padding:2px 10px;font-size:.78rem;margin:2px}
.searchbar{display:flex;gap:8px;max-width:560px;margin:0 auto}
.searchbar input{flex:1}
.searchbar .btn{margin-top:0}
.filterbar{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:16px}
.filterbar > div{min-width:140px;flex:1}
.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--green-100)}
footer{background:var(--green-900);color:#CFE3D4;margin-top:48px;padding:26px 20px;text-align:center;font-size:.9rem}
footer .social a{color:#F6E7C6;margin:0 8px;text-decoration:underline}

@media(max-width:860px){
  .panel{grid-template-columns:1fr}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .msg{max-width:92%}
  .hero h1{font-size:1.6rem}
}
@media print{.navbar,.sidebar,.btn,footer,.filterbar{display:none!important}.panel{display:block}}

/* ============================================================
   Hero v2 — মকআপ অনুযায়ী নতুন হোমপেজ হিরো
   ============================================================ */
.hero2{position:relative;overflow:hidden;
  background:linear-gradient(180deg,#DDEFF8 0%,#CBE7DB 38%,#8FC48A 70%,#5FA463 100%)}
.hero2::before{content:"";position:absolute;inset:auto 0 0 0;height:46%;
  background:url('../img/hero-bg.svg') center bottom/cover no-repeat;opacity:.35;pointer-events:none}
.hero2-inner{position:relative;max-width:1200px;margin:auto;padding:48px 20px 0;
  display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:center}
.hero2-left h1{font-size:2.7rem;line-height:1.25;margin:0}
.t-green{color:var(--green-700)} .t-navy{color:#1B3A5C}
.accent-line{height:4px;width:170px;background:linear-gradient(90deg,var(--green-500),transparent);
  border-radius:4px;margin:14px 0 18px;position:relative}
.accent-line .leaf-dot{position:absolute;right:-10px;top:-13px;font-size:1.1rem}
.hero2-left p{font-size:1.12rem;color:#22301F;max-width:520px}
.ask-card{background:rgba(255,255,255,.92);border-radius:16px;box-shadow:0 8px 26px rgba(20,61,36,.16);
  padding:18px;margin:22px 0 44px;max-width:560px;backdrop-filter:blur(3px)}
.ask-card label{margin:0 0 8px;color:var(--green-900);font-size:1.05rem}
.ask-row{display:flex;gap:10px}
.ask-row input{flex:1;border-radius:10px}
.ask-row .btn{margin-top:0;border-radius:10px;white-space:nowrap}

/* Right: farmer image + floating bubbles */
.hero2-right{display:flex;justify-content:center}
.person-wrap{position:relative;width:min(400px,100%);min-height:520px;aspect-ratio:47/73;margin-bottom:44px}
.person{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:22px;box-shadow:0 14px 34px rgba(20,61,36,.25)}
@supports (mask-image: radial-gradient(#000,#0000)) or (-webkit-mask-image: radial-gradient(#000,#0000)){
  .person{border-radius:22px;
    -webkit-mask-image:linear-gradient(#000 78%,transparent 100%);
            mask-image:linear-gradient(#000 78%,transparent 100%)}
}
.bubble{position:absolute;background:#fff;border-radius:50%;width:92px;height:92px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  font-size:1.3rem;box-shadow:0 6px 18px rgba(20,61,36,.22);animation:floaty 4s ease-in-out infinite}
.bubble b{font-size:.68rem;color:var(--green-900);line-height:1.25;margin-top:2px}
.b1{top:8%;left:-58px} .b2{top:30%;right:-56px;animation-delay:1s}
.b3{top:56%;left:-62px;animation-delay:2s} .b4{top:74%;right:-60px;animation-delay:3s}
.speech{position:absolute;top:-6px;right:-10px;background:#fff;border-radius:12px;padding:8px 12px;
  font-size:.74rem;font-weight:600;color:var(--green-900);box-shadow:0 6px 18px rgba(20,61,36,.18)}
.speech::after{content:"";position:absolute;left:22px;bottom:-8px;border:5px solid transparent;border-top-color:#fff}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* Bottom feature strip */
.feature-strip{position:relative;max-width:1200px;margin:auto;padding:0 20px 26px;
  display:grid;grid-template-columns:2.4fr 1fr;gap:16px;align-items:stretch}
.fs-bar{background:var(--green-900);border-radius:16px;padding:16px 20px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;box-shadow:0 10px 26px rgba(20,61,36,.28)}
.fs-item{display:flex;gap:10px;align-items:center;color:#fff;
  border-right:1px solid rgba(255,255,255,.16);padding-right:10px}
.fs-item:last-child{border-right:none}
.fs-ico{font-size:1.5rem;background:rgba(217,154,27,.2);border-radius:12px;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;flex:0 0 44px}
.fs-item b{display:block;font-size:.92rem}
.fs-item small{color:#CFE3D4;font-size:.74rem;line-height:1.3;display:block}
.fs-card{background:#fff;border-radius:16px;padding:14px 18px;display:flex;gap:12px;align-items:center;
  box-shadow:0 10px 26px rgba(20,61,36,.18)}
.fs-phone{font-size:1.6rem;background:var(--gold-soft);border-radius:50%;width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;flex:0 0 48px}
.fs-card small{display:block;color:var(--muted);font-size:.78rem}
.fs-card b{color:var(--green-900);font-size:1rem}
.fs-num{font-weight:700;color:var(--green-700)!important}

@media(max-width:980px){
  .hero2-inner{grid-template-columns:1fr;padding-top:32px}
  .hero2-left h1{font-size:2rem}
  .hero2-right{order:2}
  .person-wrap{width:min(320px,86%);margin-bottom:30px}
  .b1{left:-22px}.b3{left:-26px}.b2{right:-20px}.b4{right:-24px}
  .bubble{width:76px;height:76px;font-size:1.05rem}
  .feature-strip{grid-template-columns:1fr}
  .fs-bar{grid-template-columns:1fr 1fr}
}
