/* ==========================================================================
   Member panel (dashboard, profile, id card, payment history ...) + home page.
   Sabhi member pages me `.layout / .sidebar / .main` ek hi naam se hain, isliye
   yahin se unka look aur mobile behaviour badla gaya hai. (modern.css ke tokens use hote hain)
   ========================================================================== */
body .layout{display:flex;background:var(--m-bg);min-height:calc(100vh - 70px);align-items:stretch}
body .layout .sidebar{background:#fff !important;color:var(--m-ink) !important;border-right:1px solid var(--m-line);width:250px;flex:0 0 250px;padding:18px 0}
body .layout .sidebar .sidebar-header{padding:0 18px 14px;border-bottom:1px solid var(--m-line);margin-bottom:8px;color:var(--m-ink)}
body .layout .sidebar .user-info-name{font-size:1rem;font-weight:700;color:var(--m-ink)}
body .layout .sidebar .user-info-badge{background:var(--m-brand-soft);color:var(--m-brand-dark);font-weight:700;border-radius:999px;padding:2px 10px}
body .layout .sidebar .sidebar-header div[style],body .layout .sidebar .sidebar-header small{color:var(--m-muted) !important}
body .layout .sidebar .nav{display:flex;flex-direction:column;flex-wrap:nowrap}
body .layout .sidebar .nav-link{color:var(--m-ink) !important;margin:2px 10px;padding:0 !important;border-radius:12px;font-size:.92rem;font-weight:500;background:transparent}
body .layout .sidebar .nav-link a{display:block;padding:10px 14px;color:inherit !important;text-decoration:none;width:100%}
body .layout .sidebar .nav-link .nav-link-icon{display:none}
body .layout .sidebar .nav-link:hover{background:var(--m-brand-soft)}
body .layout .sidebar .nav-link.active{background:var(--m-brand) !important;color:#fff !important}
body .layout .sidebar .nav-link.active a{color:#fff !important;font-weight:700}
body .layout .sidebar .sidebar-footer{border-top:1px solid var(--m-line);padding:14px 18px 0}
body .layout .sidebar .btn-logout{background:#fff;color:var(--m-danger);border:1.5px solid #fda29b;border-radius:12px;font-weight:700;min-height:42px}
body .layout .main{flex:1;padding:22px 22px 40px;min-width:0}
body .layout .main .page-title{font-size:1.35rem;font-weight:700;color:var(--m-ink)}

@media (max-width:991.98px){
  body .layout{flex-direction:column}
  body .layout .sidebar{width:100%;flex:none;border-right:0;border-bottom:1px solid var(--m-line);padding:10px 0 8px;box-shadow:0 4px 14px rgba(16,24,40,.05)}
  body .layout .sidebar{height:auto !important;min-height:0 !important;position:static !important;top:auto !important;overflow:visible !important}
  body .layout .main{margin-left:0 !important;width:100% !important;max-width:100%;overflow-x:auto}
  body .layout .sidebar .sidebar-header{padding:0 14px 8px;margin:0;border:0}
  body .layout .sidebar .sidebar-header div[style]{display:inline-block;margin-right:10px}
  body .layout .sidebar .user-info-badge{display:inline-block;width:auto}
  body .layout .sidebar .nav{display:flex;flex-direction:row;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding:2px 12px 6px;margin:0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  body .layout .sidebar .nav::-webkit-scrollbar{display:none}
  body .layout .sidebar .nav-link{flex:0 0 auto;margin:0;border:1px solid var(--m-line);background:#fff;white-space:nowrap}
  body .layout .sidebar .nav-link a{padding:8px 14px}
  body .layout .sidebar .sidebar-footer{display:none}
  body .layout .main{padding:16px 14px 90px}
}

/* ---------- dashboard widgets ---------- */
.d-greet{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.d-greet h1{font-size:1.3rem;font-weight:700;margin:0}
.d-greet p{margin:2px 0 0;color:var(--m-muted);font-size:.88rem}
.d-status{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-weight:700;font-size:.82rem}
.d-status.ok{background:#dcfae6;color:#067647}.d-status.wait{background:#fef0c7;color:#b54708}.d-status.bad{background:#fee4e2;color:#b42318}
.d-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-bottom:16px}
@media(min-width:900px){.d-grid{grid-template-columns:repeat(4,1fr)}}
.d-tile{background:#fff;border:1px solid var(--m-line);border-radius:16px;padding:14px;box-shadow:var(--m-shadow);position:relative;overflow:hidden}
.d-tile .ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:8px;background:var(--m-brand-soft);color:var(--m-brand)}
.d-tile.warn .ic{background:#fef0c7;color:#b54708}.d-tile.acc .ic{background:var(--m-accent-soft);color:var(--m-accent)}
.d-tile .k{font-size:.74rem;color:var(--m-muted);font-weight:600}
.d-tile .v{font-size:1.05rem;font-weight:700;line-height:1.3;margin-top:2px}
.d-tile .s{font-size:.74rem;color:var(--m-muted);margin-top:2px}
.d-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:900px){.d-actions{grid-template-columns:repeat(4,1fr)}}
.d-act{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:14px 8px;background:#fff;border:1px solid var(--m-line);border-radius:16px;text-decoration:none;color:var(--m-ink);font-size:.84rem;font-weight:600;box-shadow:var(--m-shadow);transition:transform .1s}
.d-act:hover{transform:translateY(-2px);color:var(--m-brand-dark)}
.d-act i{font-size:1.4rem;color:var(--m-brand)}
.d-alert{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--m-line);border-left:5px solid var(--m-danger);border-radius:14px;padding:12px;margin-bottom:10px}
.d-alert.pink{border-left-color:#db2777}
.d-alert .tx{flex:1;min-width:0}.d-alert .tx b{display:block;font-size:.95rem}.d-alert .tx span{font-size:.78rem;color:var(--m-muted)}
.d-alert img{width:58px;height:58px;border-radius:10px;object-fit:cover;border:1px solid var(--m-line)}
.d-share{display:flex;gap:8px;flex-wrap:wrap}
.d-share input{flex:1;min-width:180px}
.d-timeline{list-style:none;margin:0;padding:0}
.d-timeline li{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed var(--m-line);font-size:.88rem}
.d-timeline li:last-child{border:0}
.d-timeline .dt{flex:0 0 74px;color:var(--m-muted);font-size:.76rem;font-weight:600}

/* ---------- home page ---------- */
.h-hero{background:radial-gradient(1100px 420px at 85% -10%,rgba(249,115,22,.22),transparent 60%),linear-gradient(135deg,var(--m-brand-dark),var(--m-brand) 65%,#2fa85a);color:#fff;padding:44px 0 74px;position:relative;overflow:hidden}
.h-hero .wrap{max-width:1180px;margin:0 auto;padding:0 16px;display:grid;gap:28px;align-items:center}
@media(min-width:992px){.h-hero .wrap{grid-template-columns:1.15fr .85fr}}
.h-hero .tag{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:5px 14px;font-size:.8rem;font-weight:600;margin-bottom:14px}
.h-hero h1{font-size:clamp(1.7rem,5.4vw,3rem);font-weight:800;line-height:1.25;margin:0 0 12px;color:#fff;text-transform:none}
.h-hero p{font-size:1.02rem;opacity:.94;max-width:560px;margin-bottom:22px;color:#fff}
.h-hero .cta{display:flex;gap:10px;flex-wrap:wrap}
.h-hero .cta .m-btn{min-height:50px;padding:12px 24px}
.h-hero .m-btn.ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.45)}
.h-hero img.art.logo-art{max-width:240px;background:#fff;border-radius:50%;padding:14px}
.h-hero img.art{width:100%;max-width:420px;margin:0 auto;display:block;filter:drop-shadow(0 18px 30px rgba(0,0,0,.25))}
.h-stats{max-width:1180px;margin:-44px auto 0;padding:0 16px;position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:768px){.h-stats{grid-template-columns:repeat(4,1fr);gap:14px}}
.h-stat{background:#fff;border-radius:18px;padding:16px 14px;box-shadow:var(--m-shadow);border:1px solid var(--m-line);text-align:center}
.h-stat b{display:block;font-size:1.5rem;color:var(--m-brand-dark);line-height:1.2}
.h-stat span{font-size:.78rem;color:var(--m-muted);font-weight:600}
.h-sec{max-width:1180px;margin:0 auto;padding:34px 16px 6px}
.h-sec .hd{text-align:center;margin-bottom:20px}
.h-sec .hd h2{font-size:clamp(1.3rem,3.6vw,1.9rem);font-weight:800;margin:0 0 6px}
.h-sec .hd p{color:var(--m-muted);margin:0;font-size:.95rem}
.h-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:768px){.h-tiles{grid-template-columns:repeat(4,1fr)}}
.h-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px 10px;background:#fff;border:1px solid var(--m-line);border-radius:18px;text-decoration:none;color:var(--m-ink);font-weight:700;font-size:.92rem;box-shadow:var(--m-shadow);transition:transform .12s}
.h-tile:hover{transform:translateY(-3px);color:var(--m-brand-dark)}
.h-tile i{width:48px;height:48px;border-radius:14px;background:var(--m-brand-soft);color:var(--m-brand);display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.h-tile small{font-weight:500;color:var(--m-muted);font-size:.76rem}
.h-steps{display:grid;gap:12px}
@media(min-width:768px){.h-steps{grid-template-columns:repeat(3,1fr)}}
.h-step{background:#fff;border:1px solid var(--m-line);border-radius:18px;padding:18px;box-shadow:var(--m-shadow);position:relative}
.h-step .n{width:34px;height:34px;border-radius:50%;background:var(--m-accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.h-step h3{font-size:1.02rem;font-weight:700;margin:0 0 6px}.h-step p{margin:0;color:var(--m-muted);font-size:.88rem}
.h-alerts{display:grid;gap:12px}
@media(min-width:640px){.h-alerts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px){.h-alerts{grid-template-columns:repeat(3,1fr)}}
.h-alert{background:#fff;border:1px solid var(--m-line);border-radius:18px;padding:14px;box-shadow:var(--m-shadow);display:flex;flex-direction:column;gap:8px}
.h-alert .bd{align-self:flex-start;font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:999px;background:#fee4e2;color:#b42318}
.h-alert.pink .bd{background:#fce7f3;color:#be185d}
.h-alert .row1{display:flex;gap:12px;align-items:center}
.h-alert .row1 img{width:64px;height:64px;border-radius:14px;object-fit:cover;border:1px solid var(--m-line)}
.h-alert .nm{font-weight:700}.h-alert .sb{font-size:.8rem;color:var(--m-muted)}
.h-alert .qr{display:flex;gap:12px;align-items:center;background:#f8faf7;border-radius:12px;padding:8px}
.h-alert .qr img{width:76px;height:76px;object-fit:contain;background:#fff;border-radius:8px}
.h-alert .bank{font-size:.74rem;color:var(--m-muted);word-break:break-all}
.h-notice{max-width:1180px;margin:22px auto 0;padding:0 16px}
.h-notice .box{background:#fff7ed;border:1px solid #fed7aa;border-radius:16px;padding:14px 16px}
.h-notice .box b{color:#c2410c}
.h-notice .it{padding:8px 0;border-top:1px dashed #fed7aa;font-size:.9rem}
.h-notice .it small{color:var(--m-muted)}
.h-two{display:grid;gap:14px}
@media(min-width:900px){.h-two{grid-template-columns:1fr 1fr}}
.h-list{list-style:none;margin:0;padding:0}
.h-list li{padding:8px 0 8px 30px;position:relative;font-size:.92rem;border-bottom:1px dashed var(--m-line)}
.h-list li:last-child{border:0}
.h-list li:before{content:"✓";position:absolute;left:0;top:8px;width:20px;height:20px;border-radius:50%;background:var(--m-brand-soft);color:var(--m-brand);font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.h-team{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:768px){.h-team{grid-template-columns:repeat(4,1fr)}}
.h-member{background:#fff;border:1px solid var(--m-line);border-radius:18px;padding:12px;text-align:center;box-shadow:var(--m-shadow)}
.h-member img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;margin-bottom:8px;background:#eef3ec}
.h-member b{font-size:.95rem}
.h-help{max-width:1180px;margin:34px auto 0;padding:0 16px}
.h-help .box{background:linear-gradient(135deg,var(--m-accent),#fb923c);color:#fff;border-radius:22px;padding:22px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.h-help .box h3{margin:0;font-size:1.15rem;font-weight:800;color:#fff}.h-help .box p{margin:2px 0 0;opacity:.95;color:#fff}
.h-help .m-btn{background:#fff;color:#c2410c}

/* ---------- hero slider ---------- */
.h-slides{display:grid}
.h-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateX(18px);transition:opacity .55s ease,transform .55s ease,visibility .55s}
.h-slide.on{opacity:1;visibility:visible;transform:none}
.h-hero img.art{border-radius:20px;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.h-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.14);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.h-nav:hover{background:rgba(255,255,255,.28)}
.h-nav.prev{left:12px}.h-nav.next{right:12px}
@media(min-width:992px){.h-nav{display:flex}}
.h-dots{position:absolute;left:0;right:0;bottom:56px;z-index:3;display:flex;justify-content:center;gap:8px}
.h-dots button{width:10px;height:10px;border-radius:999px;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer;transition:width .25s,background .25s}
.h-dots button.on{width:28px;background:#fff}
@media(prefers-reduced-motion:reduce){.h-slide{transition:none}}

/* ---------- menu icons ---------- */
body .layout .sidebar .nav-link a{display:flex !important;align-items:center;gap:12px}
body .layout .sidebar .nav-link a i.bi{font-size:1.1rem;width:22px;text-align:center;opacity:.9;flex:0 0 22px}
@media (max-width:991.98px){body .layout .sidebar .nav-link a{gap:8px}body .layout .sidebar .nav-link a i.bi{width:auto;flex:none;font-size:1rem}}
.ft-tabs a i{margin-right:4px}
.nav-bar .navbar .nav-link i.bi,.nav-bar .dropdown-item i.bi{opacity:.9}
@media (min-width:992px){
  .nav-bar .navbar .navbar-nav .nav-link{white-space:nowrap;padding-left:.55rem !important;padding-right:.55rem !important}
}
@media (min-width:992px) and (max-width:1399.98px){
  .nav-bar .navbar .navbar-nav>.nav-link i.bi,.nav-bar .navbar .navbar-nav>.dropdown>.nav-link i.bi{display:none}
}

/* ---- top menu: 10 items + lang switch ek line me (frctup jaisa menu) ---- */
@media (min-width:992px){
  .nav-bar .navbar{padding-left:14px !important;padding-right:14px !important}
  .nav-bar .navbar .navbar-nav{flex-wrap:nowrap;align-items:center}
  .nav-bar .navbar .navbar-nav .nav-link{font-size:.84rem;padding-left:.42rem !important;padding-right:.42rem !important}
  .nav-bar .navbar .dropdown-toggle:after{margin-left:.3em}
  .lang-switch{margin-left:6px !important}
  .nav-bar .main-logo{width:46px !important}
}
@media (min-width:1400px){.nav-bar .navbar .navbar-nav .nav-link{font-size:.9rem;padding-left:.6rem !important;padding-right:.6rem !important}}
.nav-bar .navbar .navbar-nav .nav-link.active{background:rgba(255,255,255,.16);border-radius:10px}