:root{--g-950:#04150b;--g-900:#052e16;--g-800:#14532d;--g-700:#166534;--g-600:#16a34a;--g-500:#22c55e;--g-300:#86efac;--g-100:#dcfce7;--ink:#0b120c;--muted:#5f6a63;--bg:#f6f8f6;--card:#fff;--line:#e6ebe6;--r:16px;--sh:0 12px 32px rgba(4,21,11,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink)}
body.no-scroll{overflow:hidden}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;margin:0}a{text-decoration:none;color:inherit}img{max-width:100%}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:12px 22px;font-weight:600;font-size:.95rem;cursor:pointer;transition:.25s}
.btn-green{background:linear-gradient(135deg,var(--g-600),var(--g-700));color:#fff;box-shadow:0 6px 18px rgba(22,163,74,.35)}
.btn-green:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-sm{padding:8px 14px;font-size:.85rem;border-radius:8px}
/* ===== NAVBAR ===== */
/* ===== NAVBAR ===== */
/* ===== NAVBAR ===== */
.pub-nav{position:sticky;top:0;z-index:1060;background:rgba(6,12,8,.97)}
.pub-nav .inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:10px}
.brand{display:flex;align-items:center;gap:10px;color:#fff}
.brand img{width:42px;height:42px}
.brand b{font-family:'Poppins';font-size:1.02rem;letter-spacing:.3px}
.brand small{display:block;font-size:.58rem;color:var(--g-300);letter-spacing:2px}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{color:#e7ece8;font-size:.9rem;padding:8px 12px;border-radius:8px;transition:.2s}
.nav-links a:hover{color:var(--g-300)}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer;padding:6px 10px}

/* Overlay sits BELOW navbar/drawer (1040 < 1060) */
.nav-overlay{position:fixed;inset:0;background:rgba(4,10,6,.55);z-index:1040;opacity:0;visibility:hidden;transition:opacity .3s, visibility .3s}
.nav-overlay.show{opacity:1;visibility:visible}

.drawer-head{display:none}
.drawer-close{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;border:0;display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;flex-shrink:0}
.drawer-close:hover{background:rgba(255,255,255,.15)}

/* ===== MOBILE DRAWER ===== */
@media(max-width:991px){
  .nav-toggle{display:block}
  .nav-links{
    position:fixed;top:0;right:0;height:100vh;height:100dvh;
    width:min(290px,85vw);
    background:#0a130d;
    flex-direction:column;align-items:stretch;
    padding:14px 14px 24px;gap:2px;
    transform:translateX(105%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    z-index:1050;overflow-y:auto;
    box-shadow:-10px 0 30px rgba(0,0,0,.5)
  }
  .nav-links.open{transform:translateX(0)}
  .drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 4px 14px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:10px}
  .drawer-head .brand img{width:38px;height:38px}
  .drawer-head .brand b{font-size:.95rem}
  .nav-links a{width:100%;padding:12px 14px;border-radius:10px;font-size:.95rem;color:#ffffff}
  .nav-links a:hover{background:rgba(255,255,255,.08);color:var(--g-300)}
  .nav-links .btn{margin-top:10px}
}
/* ===== HERO ===== */
.hero{background:radial-gradient(1000px 400px at 80% -10%,rgba(34,197,94,.18),transparent),linear-gradient(160deg,#07130b 0%,#0a1f12 55%,#0d2818 100%);color:#fff;position:relative;overflow:hidden;padding:70px 0 110px}
.hero h1{font-size:clamp(1.9rem,5vw,3.4rem);line-height:1.15;font-weight:700}
.hero h1 span{color:var(--g-500)}
.hero p{color:#c4d0c7;max-width:520px;margin:16px 0 26px}
.hero-slide{min-height:560px;background-size:cover;background-position:center;display:flex;align-items:center;position:relative}
.hero-slide:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,21,11,.94) 0%,rgba(4,21,11,.6) 55%,rgba(4,21,11,.25) 100%)}
.hero-content{position:relative;z-index:2;color:#fff;padding:70px 0}
.hero-content h1{font-size:clamp(1.9rem,5vw,3.4rem);font-weight:700;line-height:1.15}
.hero-content p{color:#c4d0c7;max-width:540px;margin:16px 0 26px}
@media(max-width:767px){.hero-slide{min-height:480px}.hero-content{padding:50px 0}}
.stats-bar{background:linear-gradient(135deg,var(--g-800),var(--g-900));border-radius:18px;margin-top:-70px;position:relative;z-index:5;box-shadow:var(--sh);display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:26px 10px}
.stat{display:flex;align-items:center;justify-content:center;gap:12px;color:#fff}
.stat .ic{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:var(--g-300);flex-shrink:0}
.stat small{color:#bcd0c0;display:block;font-size:.75rem}.stat b{font-size:1.2rem}
@media(max-width:767px){.stats-bar{grid-template-columns:repeat(2,1fr);margin-top:-50px}}
/* ===== SECTIONS ===== */
section{padding:60px 0}
.eyebrow{color:var(--g-600);font-weight:700;font-size:.78rem;letter-spacing:2px;text-transform:uppercase}
.sec-title{font-size:clamp(1.3rem,3vw,2rem);font-weight:700;margin:6px 0 8px}
.sec-sub{color:var(--muted);max-width:640px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap}
.view-all{color:var(--g-700);font-weight:700;font-size:.9rem}
/* Services grid: 3 cols desktop, 2 cols mobile */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
@media(max-width:991px){.svc-grid{grid-template-columns:repeat(2,1fr);gap:14px}.svc-grid .f-card{padding:18px}.svc-grid .f-card .ic{width:44px;height:44px;font-size:1.1rem;margin-bottom:12px}.svc-grid .f-card h3{font-size:.92rem}.svc-grid .f-card p{font-size:.78rem}}
@media(max-width:400px){.svc-grid{gap:10px}.svc-grid .f-card{padding:14px}}
.f-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:.3s}
.f-card:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:var(--g-500)}
.f-card .ic{width:52px;height:52px;border-radius:14px;background:var(--g-100);color:var(--g-700);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:16px}
.f-card h3{font-size:1.05rem;margin-bottom:8px}.f-card p{color:var(--muted);font-size:.9rem;line-height:1.6;margin:0}
/* Generic 3-col grid */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
@media(max-width:991px){.grid3{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:600px){.grid3{grid-template-columns:1fr}}
/* Events */
.ev-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.3s}
.ev-card:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.ev-img{height:170px;object-fit:cover;width:100%}
.ev-date{position:absolute;top:12px;left:12px;background:#fff;border-radius:10px;text-align:center;padding:6px 10px;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.ev-date b{display:block;font-size:1.1rem;color:var(--g-700)}.ev-date small{font-size:.65rem;letter-spacing:1px;color:var(--muted)}
.ev-body{padding:18px}.ev-body h3{font-size:1rem;margin-bottom:6px}
.ev-meta{color:var(--muted);font-size:.82rem;display:flex;flex-direction:column;gap:4px;margin:10px 0 14px}
/* ===== MEMBER CARDS — RECTANGLE PHOTOS + HIGHLIGHTED POSITION ===== */
.slider-wrap{position:relative}
.slider{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 24px;scrollbar-width:none}
.slider::-webkit-scrollbar{display:none}

.m-card{
    min-width:220px;max-width:220px;
    scroll-snap-align:start;
    background:#fff;border:1px solid var(--line);
    border-radius:14px;padding:24px 20px;
    text-align:center;position:relative;
    transition:.3s;display:flex;flex-direction:column;align-items:center;
}
.m-card:hover{border-color:var(--g-500);box-shadow:var(--sh);transform:translateY(-5px)}

/* RECTANGLE PHOTO — no circle */
.m-card img{
    width:130px;height:170px;
    border-radius:10px;
    object-fit:cover;object-position:center 20%;
    border:3px solid #fff;
    box-shadow:0 6px 18px rgba(4,21,11,.12);
    margin-bottom:14px;background:var(--g-100);
    display:block;
}
.m-card h4{
    font-size:1rem;font-weight:700;
    margin:6px 0 10px;color:var(--ink);line-height:1.3;
}

/* HIGHLIGHTED POSITION BADGE — styled differently */
.m-pos{
    display:inline-block;
    background:linear-gradient(135deg,#065F46,#047857);
    color:#fff;
    padding:6px 16px;
    border-radius:50px;
    font-size:.73rem;
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
    margin:4px 0 8px;
    box-shadow:0 4px 12px rgba(6,95,70,.3);
}
.m-place{font-size:.8rem;color:var(--muted);margin:3px 0}
.m-place i{color:var(--g-600);margin-right:4px}
.m-ph{font-size:.8rem;color:var(--g-700);font-weight:600;margin-top:6px}
.m-ph i{margin-right:5px;color:var(--g-600)}

.sl-btn{
    position:absolute;top:50%;width:42px;height:42px;
    border-radius:50%;border:1px solid var(--line);
    background:#fff;cursor:pointer;z-index:5;
    box-shadow:var(--sh);
    display:flex;align-items:center;justify-content:center;
    transform:translateY(-50%);
}
.sl-prev{left:-12px}.sl-next{right:-12px}

@media(max-width:600px){
    .m-card{min-width:180px;max-width:180px;padding:18px 14px}
    .m-card img{width:100px;height:135px}
    .sl-btn{display:none}
}

/* ===== GALLERY GRID — PROPER SIZE ===== */
.gal-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:180px;
    gap:12px;margin-top:30px;
}
.gal-item{
    position:relative;border-radius:12px;
    overflow:hidden;cursor:zoom-in;
    background:#0d2818;
}
.gal-item img{
    width:100%;height:100%;
    object-fit:cover;transition:transform .5s ease;
    display:block;
}
.gal-item:hover img{transform:scale(1.08)}
.gal-ov{
    position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 50%,rgba(4,21,11,.85));
    opacity:0;transition:.3s;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:14px;color:#fff;
}
.gal-item:hover .gal-ov{opacity:1}
.gal-ov b{font-size:.9rem;margin:0}
.gal-ov span{font-size:.7rem;color:var(--g-300);margin-top:3px}
.gal-zoom{
    position:absolute;top:12px;right:12px;
    width:34px;height:34px;border-radius:50%;
    background:rgba(255,255,255,.2);backdrop-filter:blur(6px);
    color:#fff;display:flex;align-items:center;justify-content:center;
    opacity:0;transition:.3s;
}
.gal-item:hover .gal-zoom{opacity:1}

/* First image larger */
.gal-item:nth-child(1){grid-column:span 2;grid-row:span 2}

.gal-empty{
    grid-column:1/-1;text-align:center;
    padding:50px 20px;color:var(--muted);
}
.gal-empty i{font-size:3rem;color:var(--g-300);margin-bottom:12px;display:block}

@media(max-width:900px){
    .gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
    .gal-item:nth-child(1){grid-column:span 2;grid-row:span 1}
}
@media(max-width:500px){
    .gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px}
}

/* ===== LIGHTBOX WITH ZOOM ===== */
.lightbox{
    position:fixed;inset:0;
    background:rgba(2,8,4,.96);
    z-index:2000;display:none;
    align-items:center;justify-content:center;
    padding:20px;
}
.lightbox.open{display:flex}
.lb-stage{
    max-width:90vw;max-height:85vh;
    overflow:auto;display:flex;
    align-items:center;justify-content:center;
    border-radius:10px;scrollbar-width:thin;
}
.lb-stage img{
    max-width:90vw;max-height:85vh;
    border-radius:8px;
    box-shadow:0 30px 80px rgba(0,0,0,.6);
    cursor:zoom-in;user-select:none;
    transition:transform .2s;
}
.lb-stage.zoomed{overflow:auto;cursor:grab}
.lb-stage.zoomed img{
    max-width:none;max-height:none;
    cursor:grab;
}
.lb-btn{
    position:fixed;width:42px;height:42px;
    border-radius:50%;border:0;
    background:rgba(255,255,255,.15);
    color:#fff;font-size:1rem;
    cursor:pointer;display:flex;
    align-items:center;justify-content:center;
    transition:.2s;z-index:2001;
    backdrop-filter:blur(8px);
}
.lb-btn:hover{background:rgba(255,255,255,.3)}
.lb-close{top:20px;right:20px}
.lb-in{bottom:24px;right:76px}
.lb-out{bottom:24px;right:24px}
.lb-cap{
    position:fixed;bottom:28px;left:50%;
    transform:translateX(-50%);
    color:#e7ece8;font-size:.85rem;
    background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
    padding:8px 18px;border-radius:99px;
    max-width:80vw;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
}
.lb-hint{
    position:fixed;top:22px;left:50%;
    transform:translateX(-50%);
    color:#9fb3a5;font-size:.68rem;
    letter-spacing:1px;
    background:rgba(0,0,0,.4);
    padding:6px 14px;border-radius:99px;
}

/* ===== DRAWER CLOSE BUTTON — HIDDEN ON DESKTOP ===== */
.drawer-close{display:none}
@media(max-width:991px){
    .drawer-close{
        width:38px;height:38px;border-radius:10px;
        background:rgba(255,255,255,.08);color:#fff;
        border:0;display:flex;align-items:center;justify-content:center;
        font-size:1rem;cursor:pointer;flex-shrink:0;
    }
    .drawer-close:hover{background:rgba(255,255,255,.15)}
}
/* Donations */
.donate{background:linear-gradient(150deg,var(--g-900),var(--g-950));color:#fff;border-radius:24px;padding:44px 26px}
.d-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:22px}
.d-card h4{font-size:1rem;margin-bottom:6px}.d-card p{color:#bcd0c0;font-size:.85rem}
.prog{height:8px;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden;margin:14px 0 8px}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--g-500),var(--g-300));border-radius:99px}
/* Gallery / videos */
.g-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
@media(max-width:900px){.g-grid{grid-template-columns:repeat(2,1fr)}}
.g-grid img{height:150px;width:100%;object-fit:cover;border-radius:14px;transition:.3s}
.g-grid img:hover{transform:scale(1.03)}
.v-card{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff;transition:.3s;display:block}
.v-card:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.v-card img{height:180px;width:100%;object-fit:cover}
.v-play{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(22,163,74,.95);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.v-body{padding:14px}.v-body b{font-size:.9rem}
/* Voters table */
.v-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.v-table th{background:var(--g-800);color:#fff;text-align:left;padding:12px 16px;font-size:.8rem}
.v-table td{padding:12px 16px;font-size:.87rem;border-bottom:1px solid var(--line)}
.badge-v{padding:4px 10px;border-radius:99px;font-size:.72rem;font-weight:700}
/* Footer */
footer{background:#060d08;color:#c9d4cc;padding:60px 0 0;margin-top:40px}
.f-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:34px}
@media(max-width:900px){.f-cols{grid-template-columns:1fr 1fr}}@media(max-width:600px){.f-cols{grid-template-columns:1fr}}
footer h4{color:#fff;font-size:.95rem;margin-bottom:16px}
footer a{display:block;color:#9fb3a5;font-size:.87rem;margin-bottom:10px}
footer a:hover{color:var(--g-300)}
.f-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:44px;padding:18px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem}
/* Auth */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#07130b,#0d2818);padding:30px 16px}
.auth-card{background:#fff;border-radius:26px 26px 18px 18px;max-width:430px;width:100%;padding:38px 30px 90px;position:relative;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.4);animation:fadeUp .6s ease}
.auth-card .sil{position:absolute;bottom:0;left:0;right:0;opacity:.5;pointer-events:none}
.otp-box{background:var(--g-100);border:1.5px dashed var(--g-600);color:var(--g-800);border-radius:12px;padding:12px;text-align:center;font-weight:700;letter-spacing:4px;margin:12px 0}
/* Account */
.steps{display:flex;justify-content:space-between;max-width:640px;margin:26px auto;position:relative}
.steps:before{content:'';position:absolute;top:16px;left:8%;right:8%;height:2px;background:var(--line);z-index:0}
.step{position:relative;z-index:1;text-align:center;width:25%}
.step .dot{width:34px;height:34px;border-radius:50%;background:#e5e7eb;color:#6b7280;display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 8px;border:2px solid #fff;transition:.3s}
.step.active .dot{background:var(--g-600);color:#fff}
.step small{font-size:.72rem;color:var(--muted);font-weight:600}
.wiz{display:none}.wiz.active{display:block;animation:fadeUp .4s ease}
.mem-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--g-600);border-radius:14px;padding:18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.mem-card img{width:56px;height:56px;border-radius:50%;object-fit:cover}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(28px);transition:.7s ease}
.reveal.visible{opacity:1;transform:none}
.form-label{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}

.f-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.8rem;align-items:center}
.f-bottom a{display:inline;color:#9fb3a5}
.f-bottom a:hover{color:var(--g-300)}
@media(max-width:768px){
  .f-bottom{flex-direction:column;text-align:center;gap:8px}
  
  
}


/* ===== PAGE HERO (inner pages) ===== */
.page-hero{
    background:linear-gradient(160deg,#07130b,#0d2818);
    color:#fff;padding:48px 0 40px;
}
.page-hero .breadcrumb{margin-bottom:8px}
.page-hero .breadcrumb-item a{color:var(--g-300);text-decoration:none;font-size:.82rem}
.page-hero .breadcrumb-item a:hover{color:#fff}
.page-hero .breadcrumb-item.active{color:#9fb3a5;font-size:.82rem}
.page-hero .breadcrumb-item+.breadcrumb-item::before{color:#5f6a63}
.page-hero h1{font-size:clamp(1.4rem,4vw,2.2rem);font-weight:700;margin:0 0 6px}
.page-hero p{color:#bcd0c0;font-size:.95rem;margin:0}

.page-section{padding:40px 0 60px}

/* ===== PRESIDENT SPOTLIGHT ===== */
.president-card{
    background:#fff;border:2px solid var(--g-100);
    border-radius:20px;padding:40px;
    display:flex;align-items:center;gap:40px;
    margin-bottom:50px;
    box-shadow:0 12px 40px rgba(4,21,11,.08);
    position:relative;overflow:hidden;
}
.president-card::before{
    content:'';position:absolute;top:0;left:0;
    width:6px;height:100%;
    background:linear-gradient(180deg,var(--g-500),var(--g-700));
}
.president-photo{flex-shrink:0}
.president-photo img{
    width:180px;height:230px;
    border-radius:14px;object-fit:cover;
    object-position:center 20%;
    box-shadow:0 12px 30px rgba(4,21,11,.15);
    border:4px solid #fff;
}
.president-info h2{font-size:1.6rem;font-weight:700;margin:10px 0 12px}
.president-detail{
    font-size:.9rem;color:var(--muted);margin:6px 0;
    display:flex;align-items:center;gap:8px;
}
.president-detail i{color:var(--g-600);width:16px}

@media(max-width:700px){
    .president-card{flex-direction:column;text-align:center;padding:30px 20px;gap:20px}
    .president-photo img{width:140px;height:180px}
    .president-detail{justify-content:center}
    .president-info .btn{margin-top:10px}
}

/* ===== MEMBER GRID (Elected / Salahkar) ===== */
.sub-heading{
    font-size:1.3rem;font-weight:700;
    margin:10px 0 24px;
    padding-bottom:12px;
    border-bottom:3px solid var(--g-100);
    display:inline-block;
}
.member-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}
.member-card{
    background:#fff;border:1px solid var(--line);
    border-radius:14px;padding:24px 18px;
    text-align:center;transition:.3s;
    display:flex;flex-direction:column;align-items:center;
}
.member-card:hover{border-color:var(--g-500);box-shadow:var(--sh);transform:translateY(-4px)}

/* Rectangle photo for elected members */
.member-photo img{
    width:130px;height:170px;
    border-radius:10px;object-fit:cover;
    object-position:center 20%;
    box-shadow:0 6px 16px rgba(4,21,11,.12);
    border:3px solid #fff;background:var(--g-100);
    display:block;
}
.member-info{margin-top:14px}
.member-info h4{font-size:.95rem;font-weight:700;margin:0 0 8px;color:var(--ink)}
.member-meta{font-size:.8rem;color:var(--muted);margin:4px 0;display:flex;align-items:center;justify-content:center;gap:5px}
.member-meta i{color:var(--g-600);font-size:.7rem}

/* Position badge */
.m-pos{
    display:inline-block;
    background:linear-gradient(135deg,#065F46,#047857);
    color:#fff;padding:5px 14px;border-radius:50px;
    font-size:.72rem;font-weight:700;
    letter-spacing:.5px;text-transform:uppercase;
    margin:4px 0 8px;
    box-shadow:0 4px 10px rgba(6,95,70,.25);
}
.m-pos-lg{
    font-size:.82rem;padding:7px 20px;
    box-shadow:0 6px 16px rgba(6,95,70,.3);
}

/* COP members — smaller size */
.member-grid-sm{grid-template-columns:repeat(5,1fr)}
.member-card-sm{padding:18px 14px}
.member-photo-sm img{width:100px;height:130px;border-radius:10px}
.m-pos-sm{font-size:.65rem;padding:4px 10px}

@media(max-width:1000px){
    .member-grid{grid-template-columns:repeat(3,1fr)}
    .member-grid-sm{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
    .member-grid{grid-template-columns:repeat(2,1fr);gap:14px}
    .member-grid-sm{grid-template-columns:repeat(2,1fr);gap:12px}
    .member-photo img{width:100px;height:135px}
    .member-photo-sm img{width:80px;height:105px}
}

/* ===== VOTERS TABLE ===== */
.voter-toolbar{
    display:flex;justify-content:space-between;
    align-items:center;flex-wrap:wrap;gap:14px;
    margin-bottom:16px;
}
.voter-count{
    display:flex;align-items:center;gap:10px;
    background:var(--g-100);color:var(--g-800);
    padding:10px 20px;border-radius:10px;
    font-size:.9rem;font-weight:600;
}
.voter-count i{color:var(--g-600)}
.voter-filter select{
    min-width:180px;border-radius:8px;
    border:1px solid var(--line);font-size:.88rem;
}
.voter-search{
    position:relative;margin-bottom:20px;
}
.voter-search i{
    position:absolute;left:14px;top:50%;
    transform:translateY(-50%);color:var(--muted);
}
.voter-search input{
    padding-left:40px;border-radius:10px;
    border:1px solid var(--line);height:44px;
    font-size:.9rem;
}
.voter-search input:focus{
    border-color:var(--g-500);
    box-shadow:0 0 0 3px rgba(22,163,74,.12);
}
.voter-table-wrap{
    background:#fff;border:1px solid var(--line);
    border-radius:14px;overflow:hidden;
    box-shadow:0 4px 16px rgba(4,21,11,.06);
}
.voter-table{width:100%;border-collapse:collapse}
.voter-table thead{background:linear-gradient(135deg,var(--g-800),var(--g-900))}
.voter-table th{
    color:#fff;padding:14px 16px;
    font-size:.78rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.5px;
}
.voter-table td{
    padding:12px 16px;font-size:.88rem;
    border-bottom:1px solid #f1f5f1;
}
.voter-table tbody tr:hover{background:#f0fdf4}
.voter-table tbody tr:last-child td{border-bottom:0}
.voter-num{
    color:var(--muted);font-weight:700;font-size:.8rem;
    text-align:center;
}
.voter-name{font-weight:600;color:var(--ink)}
.loc-badge{
    display:inline-flex;align-items:center;gap:5px;
    background:var(--g-100);color:var(--g-800);
    padding:4px 12px;border-radius:50px;
    font-size:.78rem;font-weight:600;
}
.loc-badge i{color:var(--g-600);font-size:.65rem}

@media(max-width:600px){
    .voter-toolbar{flex-direction:column;align-items:stretch}
    .voter-table th{padding:10px 12px;font-size:.7rem}
    .voter-table td{padding:10px 12px;font-size:.82rem}
    .loc-badge{font-size:.72rem;padding:3px 8px}
}

/* ===== LOGOUT BUTTON + NAV DIVIDER ===== */
.btn-logout{
    background:rgba(239,68,68,.1);color:#ef4444;
    border:1px solid rgba(239,68,68,.2);
    padding:8px 14px;border-radius:8px;
    font-size:.85rem;font-weight:600;transition:.2s;
}
.btn-logout:hover{background:#ef4444;color:#fff}
.nav-divider{
    height:1px;background:rgba(255,255,255,.1);
    margin:10px 0;width:100%;
}
@media(min-width:992px){
    .nav-divider{display:none}
    .btn-logout{
        background:transparent;color:#ef4444;
        border:1px solid rgba(239,68,68,.3);
        padding:6px 12px;font-size:.8rem;
    }
}

/* ===== DRAWER CLOSE — DESKTOP HIDDEN ===== */
.drawer-close{display:none}
.drawer-head{display:none}
@media(max-width:991px){
    .drawer-head{
        display:flex;align-items:center;
        justify-content:space-between;gap:10px;
        padding:4px 4px 14px;
        border-bottom:1px solid rgba(255,255,255,.08);
        margin-bottom:10px;
    }
    .drawer-head .brand img{width:38px;height:38px}
    .drawer-head .brand b{font-size:.95rem}
    .drawer-close{
        width:38px;height:38px;border-radius:10px;
        background:rgba(255,255,255,.08);color:#fff;
        border:0;display:flex;align-items:center;
        justify-content:center;font-size:1rem;
        cursor:pointer;flex-shrink:0;
    }
   
    .drawer-close:hover{background:rgba(255,255,255,.15)}
}

/* ===== ACCOUNT DROPDOWN (Desktop) ===== */
.account-dropdown{position:relative;margin-left:10px}
.account-btn{
    display:flex;align-items:center;gap:8px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    border-radius:50px;padding:6px 14px 6px 6px;
    color:#fff;cursor:pointer;transition:.2s;
    font-size:.88rem;font-weight:500;
    font-family:inherit;
}
.account-btn:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.25)}
.account-btn.open .account-arrow{transform:rotate(180deg)}
.account-avatar{
    width:32px;height:32px;border-radius:50%;
    background:linear-gradient(135deg,var(--g-500),var(--g-700));
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:.85rem;
}
.account-name{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-arrow{
    font-size:.65rem;transition:.2s;color:rgba(255,255,255,.7);
}

/* Dropdown Menu */
.account-menu{
    position:absolute;top:calc(100% + 10px);right:0;
    background:#fff;border-radius:14px;
    min-width:260px;padding:10px;
    box-shadow:0 20px 50px rgba(4,21,11,.25);
    border:1px solid var(--line);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:.25s;z-index:1100;
}
.account-menu.show{opacity:1;visibility:visible;transform:translateY(0)}
.account-menu::before{
    content:'';position:absolute;top:-6px;right:20px;
    width:12px;height:12px;background:#fff;
    border-left:1px solid var(--line);
    border-top:1px solid var(--line);
    transform:rotate(45deg);
}
.account-menu-header{
    display:flex;align-items:center;gap:12px;
    padding:10px 8px;
}
.account-avatar-lg{
    width:44px;height:44px;border-radius:50%;
    background:linear-gradient(135deg,var(--g-100),var(--g-300));
    color:var(--g-700);display:flex;align-items:center;
    justify-content:center;font-size:1.1rem;flex-shrink:0;
}
.account-menu-name{font-weight:700;font-size:.92rem;color:var(--ink);margin-bottom:2px}
.account-menu-mobile{font-size:.75rem;color:var(--muted)}
.account-menu-divider{
    height:1px;background:var(--line);
    margin:6px 4px;
}
.account-menu-item{
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:8px;
    color:var(--ink);font-size:.88rem;font-weight:500;
    transition:.15s;text-decoration:none;
}
.account-menu-item:hover{background:var(--g-100);color:var(--g-700)}
.account-menu-item i{
    width:18px;color:var(--g-600);font-size:.85rem;
}
.account-menu-item-danger{color:#dc2626}
.account-menu-item-danger:hover{background:#fef2f2;color:#dc2626}
.account-menu-item-danger i{color:#dc2626}

/* Hide account dropdown on mobile — drawer handles it */
@media(max-width:991px){
    .account-dropdown{display:none !important}
}

/* ===== NAV LINKS SPACING (prevent overlap) ===== */
.nav-links{
    display:flex;align-items:center;gap:2px;
    flex-wrap:nowrap;
}
.nav-links > a{
    font-size:.82rem;padding:8px 10px;
    white-space:nowrap;
}
.nav-links > a i.d-lg-none{display:none}
@media(max-width:991px){
    .nav-links > a i.d-lg-none{display:inline}
    .nav-links > a{font-size:.95rem;padding:12px 14px}
}

/* Adjust brand size on smaller desktop */
@media(max-width:1100px) and (min-width:992px){
    .brand b{font-size:.88rem}
    .brand small{font-size:.52rem}
    .brand img{width:36px;height:36px}
    .nav-links > a{font-size:.78rem;padding:8px 8px}
}

/* ===== DRAWER — MOBILE ONLY ===== */
.drawer-close{display:none}
.drawer-head{display:none}
.nav-divider{display:none}

@media(max-width:991px){
    .nav-toggle{display:block}
    .nav-links{
        position:fixed;top:0;right:0;
        height:100vh;height:100dvh;
        width:min(300px,85vw);
        background:#0a130d;
        flex-direction:column;align-items:stretch;
        padding:14px 14px 24px;gap:2px;
        transform:translateX(105%);
        transition:transform .35s cubic-bezier(.4,0,.2,1);
        z-index:1050;overflow-y:auto;
        box-shadow:-10px 0 30px rgba(0,0,0,.5);
    }
    .nav-links.open{transform:translateX(0)}
    .drawer-head{
        display:flex;align-items:center;
        justify-content:space-between;gap:10px;
        padding:4px 4px 14px;
        border-bottom:1px solid rgba(255,255,255,.08);
        margin-bottom:10px;
    }
    .drawer-head .brand img{width:38px;height:38px}
    .drawer-head .brand b{font-size:.95rem}
    .drawer-close{
        width:38px;height:38px;border-radius:10px;
        background:rgba(255,255,255,.08);color:#fff;
        border:0;display:flex;align-items:center;
        justify-content:center;font-size:1rem;
        cursor:pointer;flex-shrink:0;
    }
    .drawer-close:hover{background:rgba(255,255,255,.15)}
    .nav-links > a{
        width:100%;padding:12px 14px;border-radius:10px;
        font-size:.95rem;color:#fff;
    }
    .nav-links > a:hover{background:rgba(255,255,255,.08);color:var(--g-300)}
    .nav-divider{
        display:block;height:1px;
        background:rgba(255,255,255,.1);
        margin:10px 0;width:100%;
    }
}

/* ===== LOGOUT BUTTON STYLING ===== */
.btn-logout{
    background:rgba(239,68,68,.1);color:#ef4444;
    border:1px solid rgba(239,68,68,.2);
    padding:8px 14px;border-radius:8px;
    font-size:.85rem;font-weight:600;transition:.2s;
}
.btn-logout:hover{background:#ef4444;color:#fff}


/* ============ ACCOUNT DROPDOWN – READABLE COLORS ============ */

/* The white panel */
.dropdown-menu {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    padding: 10px;
}

/* "Guest User" header */
.dropdown-menu .guest-name,
.dropdown-menu h6,
.dropdown-menu .fw-bold {
    color: #111827;              /* near-black, clearly visible */
    font-weight: 700;
}
.dropdown-menu .guest-sub,
.dropdown-menu small,
.dropdown-menu .text-muted {
    color: #6b7280 !important;   /* medium gray subtitle */
}

/* ✅ THE MAIN FIX – menu links (Login / Create Account / KhaneSumari) */
.dropdown-menu .dropdown-item,
.dropdown-menu a {
    color: #1f2937 !important;          /* dark charcoal text – fully readable */
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: transparent;
    opacity: 1 !important;              /* kills any faded/transparent look */
    transition: background .2s ease, color .2s ease;
}

/* Icons stay green */
.dropdown-menu .dropdown-item i,
.dropdown-menu .dropdown-item svg,
.dropdown-menu .dropdown-item .icon {
    color: #16a34a !important;
    font-size: 18px;
}

/* Hover / focus – soft green highlight */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus {
    background-color: #e8f5e9 !important;   /* light green background */
    color: #14532d !important;              /* deep green text */
}

/* Active / pressed */
.dropdown-menu .dropdown-item:active {
    background-color: #c8e6c9 !important;
    color: #0b3d1f !important;
}

/* Divider lines */
.dropdown-menu .dropdown-divider,
.dropdown-menu hr {
    border: 0;
    border-top: 1px solid #e5e7eb;
    opacity: 1;
    margin: 8px 4px;
}
/* ============ ACCOUNT DROPDOWN – FIXED COLORS ============ */

.account-dropdown {
    position: relative;
}

.account-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
    font-weight: 600;
}

.account-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.account-btn.open {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.account-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--g-500), var(--g-600));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}

.account-arrow {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.account-btn.open .account-arrow {
    transform: rotate(180deg);
}

.account-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 280px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow: hidden;
}

.account-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown Header */
.account-menu-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-bottom: 1px solid #e5e7eb;
}

.account-avatar-lg {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--g-500), var(--g-600));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

.account-menu-name {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2px;
}

.account-menu-mobile {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

/* Dropdown Items */
.account-menu-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0;
}

.account-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: #1f2937 !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.account-menu-item i {
    width: 20px;
    text-align: center;
    color: var(--g-600) !important;
    font-size: 16px;
}

.account-menu-item:hover {
    background: #f9fafb;
    border-left-color: var(--g-500);
    color: #111827 !important;
    transform: translateX(2px);
}

.account-menu-item:hover i {
    color: var(--g-700) !important;
}

.account-menu-item-danger {
    color: #dc2626 !important;
}

.account-menu-item-danger i {
    color: #dc2626 !important;
}

.account-menu-item-danger:hover {
    background: #fef2f2;
    border-left-color: #dc2626;
}

.account-menu-item-danger:hover i {
    color: #b91c1c !important;
}

/* ============ STYLISH FOOTER ============ */

footer#contact {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #e2e8f0;
    padding: 60px 0 0;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
}

footer#contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--g-500), var(--g-600), var(--g-700));
}

footer#contact::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(22, 163, 74, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.f-cols {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 48px;
    padding-bottom: 48px;
    position: relative;
    z-index: 1;
}

@media (max-width: 991px) {
    .f-cols {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 576px) {
    .f-cols {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

footer#contact .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
    margin-bottom: 20px;
}

footer#contact .brand img {
    height: 48px;
    width: auto;
}

footer#contact .brand span {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

footer#contact p {
    color: #94a3b8;
    line-height: 1.8;
    margin-bottom: 0;
}

footer#contact h4 {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 12px;
}

footer#contact h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, var(--g-500), var(--g-600));
    border-radius: 2px;
}

footer#contact a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 14px;
    line-height: 2.2;
    transition: all 0.3s ease;
    display: inline-block;
}

footer#contact a:hover {
    color: var(--g-400);
    transform: translateX(4px);
}

footer#contact a i {
    color: var(--g-500);
    margin-right: 8px;
    font-size: 14px;
}

/* Newsletter Section */
.f-newsletter {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 48px;
    position: relative;
    z-index: 1;
}

.f-newsletter h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.f-newsletter p {
    color: #94a3b8;
    font-size: 14px;
    margin-bottom: 20px;
}

.f-newsletter-form {
    display: flex;
    gap: 12px;
    max-width: 500px;
}

.f-newsletter-form input {
    flex: 1;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50px;
    color: #fff;
    font-size: 14px;
}

.f-newsletter-form input::placeholder {
    color: #64748b;
}

.f-newsletter-form input:focus {
    outline: none;
    border-color: var(--g-500);
    background: rgba(255, 255, 255, 0.08);
}

.f-newsletter-form button {
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--g-500), var(--g-600));
    border: none;
    border-radius: 50px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.f-newsletter-form button:hover {
    background: linear-gradient(135deg, var(--g-600), var(--g-700));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.4);
}

/* Social Links */
.f-social {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.f-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.f-social a:hover {
    background: var(--g-500);
    transform: translateY(-4px) rotate(8deg);
    box-shadow: 0 8px 20px rgba(22, 163, 74, 0.4);
}

/* Footer Bottom */
.f-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: #64748b;
    position: relative;
    z-index: 1;
}

.f-bottom a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.3s ease;
}

.f-bottom a:hover {
    color: var(--g-400);
}

.f-bottom .f-developer {
    display: flex;
    align-items: center;
    gap: 6px;
}

.f-bottom .f-developer a {
    color: var(--g-400);
    font-weight: 600;
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--g-500), var(--g-600));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(22, 163, 74, 0.4);
    z-index: 999;
    border: none;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 24px rgba(22, 163, 74, 0.5);
}