/* =================================================
   Print Portal - Main Stylesheet
   ================================================= */

:root {
    --primary: #4f46e5;
    --secondary: #6366f1;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #06b6d4;
    --purple: #8b5cf6;
    --orange: #f97316;
    --pink: #ec4899;
    --teal: #14b8a6;
    --sidebar-bg: #ffffff;
    --sidebar-shadow: 0 2px 10px rgba(0,0,0,.08);
}

body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: #f4f7fb; }

/* ===== Brand ===== */
.brand { text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; color: inherit; font-weight: 700; }
.brand-badge {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: white; padding: 4px 10px; border-radius: 6px; font-weight: 800;
    font-size: 12px; letter-spacing: 1px;
}
.brand-text { font-size: 1.1rem; }

/* ===== HOME PAGE ===== */
.home-navbar {
    background: linear-gradient(135deg, #1e40af 0%, #4f46e5 100%);
    padding: 1rem 0;
}
.home-navbar .nav-link { font-weight: 500; }
.hero-section {
    background: linear-gradient(135deg, #1e3a8a 0%, #4f46e5 50%, #7c3aed 100%);
    padding: 5rem 0; min-height: 70vh;
}
.hero-section h1 { line-height: 1.2; }
.hero-stats { display: flex; gap: 2rem; }
.hero-stats h3 { color: #fbbf24; font-size: 2rem; margin: 0; }
.hero-stats small { color: rgba(255,255,255,.7); }
.hero-illustration { font-size: 12rem; color: rgba(255,255,255,.15); }
.about-icon { font-size: 10rem; color: #f59e0b; }
.site-footer { background: #1f2937; }

.services-section .category-title { color: #1f2937; margin: 1.5rem 0 1rem; }
.service-tile {
    background: white; border-radius: 12px; padding: 1.5rem 1rem;
    text-align: center; position: relative; transition: all .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    border: 1px solid #e5e7eb; height: 100%;
}
.service-tile:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,.1); }
.service-icon {
    width: 60px; height: 60px; border-radius: 12px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white; display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin: 0 auto 1rem;
}
.service-name { font-weight: 600; color: #1f2937; }
.service-badge {
    position: absolute; top: 9px; right: 9px; z-index: 3;
    color: white; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700;
    box-shadow: 0 2px 6px -2px rgba(16,24,40,.5);
}

/* ===== AUTH PAGES ===== */
.auth-wrapper {
    display: flex; min-height: 100vh; background: #f4f7fb;
}
.auth-left {
    flex: 1; padding: 4rem 3rem;
    background: linear-gradient(135deg, #1e3a8a 0%, #4f46e5 50%, #7c3aed 100%);
    display: none;
}
@media (min-width: 992px) { .auth-left { display: block; } }
.auth-right {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 2rem;
}
.auth-card {
    background: white; padding: 2.5rem; border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,.08); width: 100%; max-width: 450px;
}
.auth-card-wide { max-width: 700px; }

/* ===== PORTAL LAYOUT (USER DASHBOARD) ===== */
.portal-body { background: #fff5e1; }

.portal-topbar {
    background: linear-gradient(90deg, #1e40af 0%, #2563eb 100%);
    color: white; padding: .75rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0,0,0,.1); position: sticky; top: 0; z-index: 100;
}
.btn-sidebar-toggle { background: transparent; border: none; color: white; font-size: 1.25rem; }
.top-nav-buttons { display: flex; gap: .5rem; flex-wrap: wrap; }
.nav-pill {
    color: white; text-decoration: none; padding: .4rem .9rem;
    border-radius: 8px; font-weight: 600; font-size: .85rem;
    display: inline-flex; align-items: center; gap: .35rem;
}
.nav-pill:hover { color: white; opacity: .9; }
.nav-blue { background: #3b82f6; }
.nav-green { background: #10b981; }
.nav-teal { background: #14b8a6; }
.nav-indigo { background: #6366f1; }
.nav-orange { background: #f97316; }
.nav-pink { background: #ec4899; }
.nav-green-dark { background: #059669; }
.nav-red { background: #dc2626; }
.balance-chip {
    background: #111827; color: white; padding: .45rem .8rem;
    border-radius: 8px; font-weight: 700;
}
.avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: white; color: #1f2937;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}

.portal-layout {
    display: flex; min-height: calc(100vh - 65px);
}
.portal-sidebar {
    width: 260px; background: white; padding: 1rem;
    box-shadow: var(--sidebar-shadow);
    overflow-y: auto; max-height: calc(100vh - 65px); position: sticky; top: 65px;
}
.portal-main { flex: 1; padding: 1.25rem; overflow-x: hidden; }

@media (max-width: 991px) {
    .portal-sidebar {
        position: fixed; top: 65px; left: -260px; height: calc(100vh - 65px);
        transition: left .25s; z-index: 99;
    }
    .portal-sidebar.show { left: 0; }
}

/* Sidebar top action buttons */
.sidebar-top-btns {
    display: flex !important;
    gap: .5rem;
    margin-bottom: 1rem;
    width: 100%;
}
.sidebar-btn-dashboard,
.sidebar-btn-print {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .45rem;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: .9rem !important;
    padding: .75rem 1rem !important;
    text-decoration: none !important;
    color: #fff !important;
    border: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .15s, opacity .15s;
    line-height: 1.2;
}
.sidebar-btn-dashboard:hover,
.sidebar-btn-print:hover {
    color: #fff !important;
    opacity: .88;
    transform: translateY(-1px);
}
.sidebar-btn-dashboard {
    flex: 2 1 0% !important;
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 40%, #4f46e5 100%) !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, .4) !important;
}
.sidebar-btn-print {
    flex: 1 1 0% !important;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #f97316 100%) !important;
    box-shadow: 0 4px 14px rgba(249, 115, 22, .4) !important;
}

/* Sidebar items */
.wallet-card {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white; padding: 1rem; border-radius: 12px; margin-bottom: 1rem;
}
.wallet-card small { opacity: .85; letter-spacing: 1px; font-size: 10px; }
.wallet-card h4 { font-weight: 800; }
.btn-add, .btn-history {
    background: rgba(255,255,255,.25); color: white; border: none;
    padding: .35rem .7rem; border-radius: 8px; font-size: .8rem; font-weight: 600;
    text-decoration: none;
}
.sidebar-section-title {
    font-size: 11px; letter-spacing: 1px; color: #9ca3af;
    text-transform: uppercase; margin: 1rem 0 .5rem; font-weight: 700;
}
.sidebar-card {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1rem; border-radius: 12px;
    text-decoration: none; color: white; margin-bottom: .5rem;
}
.sidebar-card-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.sidebar-card-orange { background: linear-gradient(135deg, #f97316, #ea580c); }
.sidebar-card-icon {
    width: 36px; height: 36px; background: rgba(255,255,255,.2);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
}
.card-title { font-weight: 700; font-size: .9rem; }
.sidebar-card small { opacity: .85; font-size: .7rem; }
.badge-hot, .badge-fast, .badge-new {
    background: white; color: #1f2937; padding: 1px 6px; border-radius: 4px;
    font-size: 9px; margin-left: 4px;
}
.badge-hot { background: #fbbf24; color: white; }
.badge-fast { background: #10b981; color: white; }
.badge-new { background: #ef4444; color: white; }

.sidebar-menu { display: flex; flex-direction: column; gap: 2px; margin-top: .5rem; }
.menu-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem .75rem; border-radius: 8px;
    color: #374151; text-decoration: none; font-weight: 500; font-size: .9rem;
}
.menu-item:hover, .menu-item.active { background: #f3f4f6; color: #1f2937; }
.text-purple { color: #8b5cf6; }

.theme-toggle {
    margin-top: 1rem; text-align: center; color: #6b7280;
    padding: .5rem; cursor: pointer; font-size: .85rem;
}

/* Stats cards */
.stat-card {
    color: white; padding: 1.25rem; border-radius: 12px;
    text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,.08);
    display: block; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card h2 { font-weight: 800; margin: 0; }
.stat-card small { font-weight: 600; opacity: .95; letter-spacing: 1px; }

/* Ab ye card <a> hain (dashboard se /user/requests?status=... par jaate hain).
   Bootstrap ka default link-rang <a> par laal/neela kar deta hai, isliye teenon
   jagah rang zabardasti safed rakhna zaroori hai — warna gradient par text padha
   hi nahi jaata. */
a.stat-card, a.stat-card:hover, a.stat-card:focus,
a.stat-card h2, a.stat-card small { color: #fff; text-decoration: none; }
a.stat-card { cursor: pointer; }
a.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.16); }
a.stat-card:active { transform: translateY(0); }

/* Phone: chaaron stat ek line me aane chahiye, isliye padding/font chhota.
   Bina iske col-3 par text wrap hokar cards alag-alag unchai ke ho jaate hain. */
@media (max-width: 575.98px) {
    .stat-card { padding: .6rem .25rem; border-radius: 10px; }
    .stat-card h2 { font-size: 1.25rem; line-height: 1.1; }
    .stat-card small { font-size: .58rem; letter-spacing: .2px; display: block; }

    .svc-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: .55rem; }
    .service-tile-mini { padding: .75rem .35rem .6rem; border-radius: 16px; }
    .service-icon-mini { width: 56px; height: 56px; font-size: 1.3rem; margin-bottom: .45rem; border-radius: 16px; }
    .service-mini-name { font-size: .7rem; line-height: 1.2; }
    .service-mini-cat { font-size: .6rem; margin-top: .18rem; }
    .service-mini-fee { font-size: .64rem; padding-top: .35rem; }
    .service-mini-fee::before { margin-bottom: .3rem; width: 20px; }
    .services-block { padding: .75rem .6rem; border-radius: 12px; }
    .service-badge { font-size: .55rem; padding: .1rem .3rem; }
}
.stat-orange { background: linear-gradient(135deg, #f97316, #ea580c); }
.stat-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.stat-green { background: linear-gradient(135deg, #10b981, #059669); }
.stat-red { background: linear-gradient(135deg, #ef4444, #dc2626); }

.services-block { background: white; border-radius: 14px; padding: 1.25rem; margin-bottom: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.services-category {
    font-size: 11px; letter-spacing: 1px; color: #9ca3af;
    text-transform: uppercase; margin-bottom: 1rem; font-weight: 700;
}

/* Instant / Manual / Banking / Ecommerce ke button.

   Ye BILKUL sidebar ke "New Services" card jaise hain (.sidebar-card) — wahi
   gradient, wahi .75rem/1rem padding, wahi 12px radius, aur wahi 36x36 ka
   halka icon dabba. Grid isliye (flex nahi) taaki har card BARABAR naap ka
   rahe; auto-fit se bade screen par ek line me 5, phone par 1-2 aa jaate hain.

   <button> aur <a> dono ek jaise dikhne chahiye — Instant/Manual isi page par
   list chhaante hain (isliye button), Banking/Ecommerce alag page kholte hain
   (isliye anchor). */
.svc-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: .6rem; margin-bottom: 1rem;
}
.svc-tab {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1rem; border-radius: 12px;
    border: 0; width: 100%; text-align: left;
    color: #fff; text-decoration: none; cursor: pointer;
    background: linear-gradient(135deg, #64748b, #475569);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.svc-tab:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.14); }
.svc-tab-ico {
    width: 36px; height: 36px; background: rgba(255,255,255,.2);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    flex: 0 0 36px; font-size: 1rem;
}
.svc-tab-txt { min-width: 0; }
.svc-tab-title { font-weight: 700; font-size: .9rem; display: block; }
.svc-tab small { opacity: .85; font-size: .7rem; display: block; line-height: 1.3; }

/* Har button ka apna rang. Jo chuna hua NAHI hai wo halka pad jaata hai —
   isse ek nazar me dikhta hai ki abhi kaunsa filter laga hai. */
.svc-tab-all     { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.svc-tab-instant { background: linear-gradient(135deg, #f97316, #ea580c); }
.svc-tab-manual  { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.svc-tab-bank    { background: linear-gradient(135deg, #10b981, #059669); }
/* Tax = gehra neela (kaagzi kaam), FinTech = amber (paisa) — Banking ke hare aur
   Shop ke laal se saaf alag, taaki chaaron ek nazar me pehchane jayein. */
.svc-tab-tax     { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.svc-tab-fintech { background: linear-gradient(135deg, #f59e0b, #b45309); }
.svc-tab-shop    { background: linear-gradient(135deg, #ef4444, #be123c); }
/* Original Service = gulaabi/magenta — Manual ke cyan ke bilkul bagal me baithta
   hai, isliye rang bhi usse door rakha. (Chip filhaal sirf master par banta hai;
   ye niyam har portal par pahunchta hai par bina button ke kuch karta nahi.) */
.svc-tab-original { background: linear-gradient(135deg, #ec4899, #be185d); }

/* ---- Original Service ke shehar-wale box (NDMC / Agra / Gorakhpur / Kanpur) ----
   Chhota thumbnail + naam + neeche do button. Ye niyam har portal par pahunchte
   hain par bina `.bc-card` ke kuch karte nahi — filhaal ye box sirf master par
   bante hain. */
.bc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
    gap: .7rem;
    margin: 0 0 1rem 0;
}
.bc-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: .7rem .75rem; display: flex; flex-direction: column; gap: .6rem;
    box-shadow: 0 1px 3px rgba(15,23,42,.06);
    transition: box-shadow .15s ease, transform .15s ease;
}
.bc-card:hover { box-shadow: 0 8px 20px rgba(15,23,42,.12); transform: translateY(-2px); }
.bc-top   { display: flex; gap: .65rem; align-items: flex-start; }
.bc-thumb {
    flex: 0 0 48px; width: 48px; height: 62px; border-radius: 6px;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: #f8fafc; border: 1px solid #eef2f7;
}
.bc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-info  { display: flex; flex-direction: column; min-width: 0; gap: .12rem; }
.bc-title { font-weight: 700; font-size: .93rem; color: #1d4ed8; line-height: 1.25; }
.bc-sub   { font-size: .74rem; color: #64748b; line-height: 1.3; }
.bc-fee   {
    align-self: flex-start; margin-top: .2rem; font-size: .74rem; font-weight: 700;
    color: #0f172a; background: #f1f5f9; border-radius: 999px; padding: .1rem .45rem;
}
.bc-act   { display: flex; gap: .4rem; }
.bc-btn   {
    flex: 1 1 0; text-align: center; text-decoration: none; border-radius: 8px;
    padding: .38rem .3rem; font-size: .78rem; font-weight: 700; line-height: 1.3;
}
.bc-apply { background: #16a34a; color: #fff; }
.bc-apply:hover { background: #15803d; color: #fff; }
.bc-list  { background: #fff; color: #334155; border: 1px solid #cbd5e1; }
.bc-list:hover  { background: #f1f5f9; color: #0f172a; }

@media (max-width: 575.98px) {
    .bc-grid  { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: .5rem; }
    .bc-thumb { flex-basis: 40px; width: 40px; height: 52px; }
    .bc-title { font-size: .85rem; }
}

button.svc-tab:not(.active) { filter: saturate(.55) brightness(.97); opacity: .75; }
button.svc-tab.active {
    box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 0 0 2px rgba(255,255,255,.75);
}

@media (max-width: 575.98px) {
    .svc-tabs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .45rem; }
    .svc-tab { padding: .6rem .7rem; gap: .5rem; }
    .svc-tab-ico { width: 30px; height: 30px; flex: 0 0 30px; font-size: .85rem; }
    .svc-tab-title { font-size: .8rem; }
    .svc-tab small { font-size: .62rem; }
}

/* ---- Shop (Ecommerce) ----
   Product ki photo har naap ki aati hai, isliye dabba fixed-ratio hai aur image
   `contain` par — `cover` rakhne se packet ka naam kat jaata hai. */
.shop-thumb {
    position: relative; width: 100%; aspect-ratio: 1 / 1;
    background: #f8fafc; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; color: #cbd5e1; font-size: 2rem;
}
.shop-thumb img { width: 100%; height: 100%; object-fit: contain; }
.shop-thumb-lg { aspect-ratio: 4 / 3; font-size: 3rem; }
.shop-thumb-sm { width: 48px; height: 48px; aspect-ratio: auto; font-size: 1rem; border-radius: 8px; }
.shop-oos {
    position: absolute; inset: auto 0 0 0; background: rgba(220,38,38,.9);
    color: #fff; font-size: .68rem; font-weight: 700; padding: .15rem; text-align: center;
}
.shop-card { transition: transform .15s ease, box-shadow .15s ease; }
.shop-card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.10); }
.min-w-0 { min-width: 0; }
/* Ek hi grid — Bootstrap columns ki jagah CSS grid, kyunki 10-per-row jaisa koi
   Bootstrap class hai hi nahi, aur auto-fill jagah ke hisaab se khud column bana leta
   hai. Isse aakhri line me akeli tile nahi bachti aur har screen par apne aap fit hota
   hai: ~1200px par 11-12, tablet par 6-7, phone par 3-4. */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .9rem;
    align-items: stretch;
}

/* ---- Service tile — maalik ke bheje namoone jaisa -------------------------
   Bada safed card, bahut mulayam chhaya, andar bada logo, neeche gehra bold
   naam aur uske neeche neeli category line. Hover par card uthta hai aur
   click par baith jaata hai, isliye "dabane wali cheez" saaf lagti hai. */
.service-tile-mini {
    background: #fff; border: 1px solid #eef1f6; border-radius: 20px;
    padding: 1.15rem .7rem 1rem; text-align: center;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    color: #111827; display: flex; flex-direction: column; align-items: center;
    position: relative; height: 100%;
    box-shadow: 0 1px 2px rgba(16,24,40,.04),
                0 10px 20px -14px rgba(16,24,40,.35),
                inset 0 1px 0 rgba(255,255,255,.9);
}
.service-tile-mini:hover {
    transform: translateY(-5px);
    border-color: #e3e9f2;
    box-shadow: 0 2px 5px rgba(16,24,40,.06),
                0 22px 34px -18px rgba(16,24,40,.5),
                inset 0 1px 0 rgba(255,255,255,.95);
    color: #111827;
}
.service-tile-mini:active { transform: translateY(-1px); }

/* Logo / icon ka dabba — namoone jaisa bada aur gol */
.service-icon-mini {
    width: 78px; height: 78px; border-radius: 20px;
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem; margin: 0 auto .7rem;
    overflow: hidden; position: relative; flex: 0 0 auto;
    box-shadow: 0 6px 14px -6px rgba(16,24,40,.45),
                inset 0 1px 0 rgba(255,255,255,.35),
                inset 0 -2px 7px rgba(0,0,0,.12);
    transition: transform .18s ease, box-shadow .18s ease;
}
.service-tile-mini:hover .service-icon-mini {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 12px 22px -8px rgba(16,24,40,.5),
                inset 0 1px 0 rgba(255,255,255,.4),
                inset 0 -2px 7px rgba(0,0,0,.12);
}
.service-icon-mini > i { line-height: 1; }
/* Jis service par apna logo laga hai.
   PEHLE `object-fit: cover` tha — wo logo ko dabbe me BHAR kar KAAT deta hai.
   Chaude logo (jaise "SIM DETAILS FIND") ke dono kinare kat jaate the aur
   beech ka text dabbe se bahar nikalta dikhta tha. `contain` poora logo
   dikhata hai aur bacha hua khaali hissa safed rehta hai, isliye logo hamesha
   theek BEECH me baithta hai — chahe wo chauda ho ya lamba. */
/* Apne logo wali service. Do dikkatein theen:
   1. 4px padding + 50px ka dabba milkar chaude logo ("SIM DETAILS FIND" jaise)
      ka text itna chhota kar dete the ki padha hi nahi jaata. Ab padding 2px
      aur dabba 56px — logo saaf padha jaata hai.
   2. Logo aane se pehle dabba bilkul SAFED rehta tha, isliye "kuch tha hi nahi,
      achanak aa gaya" wala jhatka dikhta tha. Ab dabbe ka apna halka tal hai,
      to kuch bhi ho dabba hamesha dikhta hai.
   Chalti hui skeleton-shimmer jaan-bujh kar NAHI lagayi: `img` ka apna
   background usay waise bhi dhak deta, aur transparent logo ke peeche wo
   hamesha hilti rehti — theek karne se zyada ganda kar deti. */
.service-icon-mini.has-logo {
    background: #f7f9fc; border: 1px solid #eaeef4; padding: 3px;
    box-shadow: 0 5px 12px -6px rgba(16,24,40,.3),
                inset 0 1px 0 rgba(255,255,255,.9);
}
.service-icon-mini img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    position: relative; z-index: 1; border-radius: 16px;
}

/* Daam — sabse neeche, taaki user ko pehle se pata ho kitna katega.
   `margin-top:auto` se ye hamesha card ki TALI se chipka rehta hai, isliye
   chhote-bade naam wali tile me bhi sab daam ek hi line par baithte hain. */
.service-mini-fee {
    margin-top: auto; padding-top: .5rem;
    font-size: .74rem; font-weight: 800;
    letter-spacing: .2px; color: #0f766e;
}
.service-mini-fee::before {
    content: ''; display: block; width: 26px; height: 1px;
    background: #e8ecf3; margin: 0 auto .45rem;
}
.service-mini-fee.is-free { color: #1d4ed8; }
.bg-success { background: linear-gradient(135deg, #10b981, #059669) !important; }
.bg-primary { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; }
.bg-warning { background: linear-gradient(135deg, #f59e0b, #d97706) !important; }
.bg-danger { background: linear-gradient(135deg, #ef4444, #dc2626) !important; }
.bg-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important; }
.bg-info { background: linear-gradient(135deg, #06b6d4, #0891b2) !important; }
.service-mini-name {
    font-size: .88rem; font-weight: 700; line-height: 1.28;
    color: #111827; letter-spacing: -.1px;
    /* card ab flex-column hai: bina width ke lamba naam shrink-to-fit ho kar
       kinare se bahar nikal sakta hai — 100% dene par saaf wrap hota hai */
    width: 100%; overflow-wrap: anywhere;
}
/* Naam ke neeche category — namoone wali neeli line */
.service-mini-cat {
    margin-top: .28rem; font-size: .74rem; font-weight: 500;
    color: #4f7df3; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

.btn-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: white; border: none; }
.btn-orange { background: linear-gradient(135deg, #f97316, #ea580c); color: white; border: none; }
.btn-purple:hover, .btn-orange:hover { color: white; opacity: .9; }

/* Service form */
.balance-box, .charge-box {
    text-align: center; padding: .75rem; border-radius: 10px;
}
.balance-box { background: #d1fae5; color: #065f46; }
.charge-box { background: #fed7aa; color: #9a3412; }
.balance-box h5, .charge-box h5 { margin: 0; font-weight: 800; }

/* ===== ADMIN LAYOUT ===== */
.admin-body { background: #f1f5f9; }
.admin-topbar {
    background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
    color: white; padding: .85rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0,0,0,.15); position: sticky; top: 0; z-index: 100;
}
.admin-layout { display: flex; min-height: calc(100vh - 65px); }
.admin-sidebar {
    width: 250px; background: #1e293b; color: white;
    padding: 1rem 0; overflow-y: auto; max-height: calc(100vh - 65px); position: sticky; top: 65px;
}
.admin-main { flex: 1; padding: 1.5rem; overflow-x: hidden; }

@media (max-width: 991px) {
    .admin-sidebar { position: fixed; top: 65px; left: -250px; transition: left .25s; z-index: 99; height: calc(100vh - 65px); }
    .admin-sidebar.show { left: 0; }
}

.admin-menu { display: flex; flex-direction: column; }
.admin-menu-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .8rem 1.25rem; color: #cbd5e1; text-decoration: none;
    font-weight: 500; border-left: 3px solid transparent;
}
.admin-menu-item:hover, .admin-menu-item.active {
    background: rgba(99, 102, 241, .15); color: white; border-left-color: #6366f1;
}
.admin-menu-section {
    font-size: 11px; color: #64748b; padding: 1rem 1.25rem .5rem;
    letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
}

.admin-stat-card {
    color: white; padding: 1.25rem; border-radius: 14px;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.08); cursor: pointer; transition: transform .2s;
}
.admin-stat-card:hover { transform: translateY(-3px); }
.admin-stat-card h2 { font-weight: 800; margin: 0; }
.admin-stat-card h6 { opacity: .9; font-size: .85rem; margin-bottom: .25rem; }
.admin-stat-card i { font-size: 2.5rem; opacity: .35; }
.bg-gradient-primary { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.bg-gradient-success { background: linear-gradient(135deg, #10b981, #059669); }
.bg-gradient-warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
.bg-gradient-danger { background: linear-gradient(135deg, #ef4444, #dc2626); }
.bg-gradient-orange { background: linear-gradient(135deg, #f97316, #ea580c); }
.bg-gradient-green { background: linear-gradient(135deg, #22c55e, #16a34a); }
.bg-gradient-red { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.bg-gradient-purple { background: linear-gradient(135deg, #a855f7, #7e22ce); }

/* Tables */
.table th { font-weight: 700; font-size: .85rem; }
.card { border: none; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.card-header { border-bottom: none; font-weight: 600; }

/* ============================================================
   WEBSITE SETTING (2026-07-25) — logo, Help Desk card, sidebar banner
   Sirf naye class naam. Kuch purana restyle NAHI hota.
   ============================================================ */
.brand-logo-img{height:40px;max-width:180px;object-fit:contain;display:block}

.help-desk-card{background:linear-gradient(135deg,#12a150,#0d8a44);color:#fff;border-radius:14px;
  padding:16px;margin-bottom:16px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.help-desk-card .hd-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.help-desk-card .hd-icon{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.help-desk-card .hd-title{font-size:18px;font-weight:700;line-height:1.2}
.help-desk-card .hd-phone{font-size:17px;font-weight:700}
.help-desk-card .hd-note{margin:0 0 6px;font-size:13.5px;line-height:1.5;opacity:.95}
.help-desk-card .hd-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.help-desk-card .hd-actions .btn{font-weight:600}
.help-desk-card .hd-hours{margin-top:12px;font-size:12.5px;opacity:.9}

.portal-side-banner{display:block;border-radius:12px;overflow:hidden;margin:10px 0}
.portal-side-banner img{width:100%;display:block}

/* ============================================================
   USER PORTAL — RESPONSIVE  (31-08-2026)
   ------------------------------------------------------------
   Maang: "kahin khali na rahe, kuch idhar-udhar na ho — display,
   laptop ya mobile, sab apne aap set ho jaye."

   Teen cheezein theek ki gayi hain:
     1. topbar chhoti screen par tootta tha aur WALLET BALANCE
        `d-none d-lg-flex` ke andar hone se phone par dikhta hi nahi tha;
     2. table apne dabbe se bahar nikal jaate the (ab layout ka JS har
        table ko `.table-responsive` me lapet deta hai);
     3. grid ke box last row me kheench kar bade ho jaate the.
   ============================================================ */

/* ---- Kuch bhi bahar na nikle ---- */
.portal-body, .portal-layout, .portal-main,
.portal-main .row, .portal-main .card, .portal-main .card-body { min-width: 0; }
.portal-main .card-body,
.portal-main .table td, .portal-main .table th,
.portal-main .list-group-item { overflow-wrap: anywhere; }
.portal-main .table-responsive { -webkit-overflow-scrolling: touch; max-width: 100%; }

/* ---- Topbar: kabhi na toote ---- */
.portal-topbar { flex-wrap: wrap; row-gap: .5rem; column-gap: .6rem; }
.portal-topbar > * { min-width: 0; }
.top-nav-buttons { flex: 1 1 auto; justify-content: flex-end; min-width: 0; }

/* Balance ab HAR naap par dikhta hai (pehle sirf lg+ par tha) */
.topbar-balance { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }

@media (max-width: 767.98px) {
    .portal-topbar { padding: .6rem .75rem; }
    .balance-chip { padding: .35rem .6rem; font-size: .82rem; }
    .portal-topbar .brand-logo-img { height: 32px; max-width: 130px; }
}
@media (max-width: 400px) {
    .balance-chip { padding: .3rem .5rem; font-size: .76rem; }
    .portal-topbar .brand-logo-img { height: 28px; max-width: 104px; }
}

/* ---- Sidebar ---- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .portal-sidebar { width: 216px; padding: .75rem; }
}
@media (max-width: 991.98px) {
    .portal-sidebar { width: min(84vw, 288px); left: calc(-1 * min(84vw, 288px)); }
    .portal-sidebar.show { left: 0; }
}

/* ---- Main area ka padding ---- */
@media (max-width: 767.98px) { .portal-main { padding: .85rem .7rem; } }
@media (max-width: 360px)    { .portal-main { padding: .7rem .5rem; } }

/* ---- Stat cards (4 ek line me — mobile par bhi, par sikud kar) ---- */
@media (min-width: 576px) and (max-width: 767.98px) {
    .stat-card { padding: .8rem .5rem; }
    .stat-card h2 { font-size: 1.45rem; }
    .stat-card small { font-size: .68rem; letter-spacing: .3px; }
}
@media (max-width: 360px) {
    .stat-card { padding: .5rem .2rem; }
    .stat-card h2 { font-size: 1.05rem; }
    .stat-card small { font-size: .52rem; }
}
.stat-card h2, .stat-card small {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}

/* ---- Service grid: har naap par poori line bharti rahe ---- */
@media (min-width: 1600px) {
    .svc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .bc-grid  { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 400px) {
    .svc-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .45rem; }
    .bc-grid  { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .45rem; }
    .svc-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
}

/* ---- Sidebar ke do upari button chhote phone par ---- */
@media (max-width: 360px) {
    .sidebar-btn-dashboard, .sidebar-btn-print { font-size: .8rem !important; padding: .6rem .5rem !important; }
}

/* ---- Banner + Help Desk ---- */
@media (max-width: 991.98px) {
    .dbh-row { row-gap: .75rem; }
}

/* ---- Form / modal ---- */
@media (max-width: 575.98px) {
    .portal-main .card-header { padding: .7rem .8rem; }
    .portal-main .card-body { padding: .8rem; }
    .modal-dialog { margin: .5rem; }
}

/* ---- Bahut badi screen par content bekaar me na phaile ---- */
@media (min-width: 2100px) {
    .portal-main > * { max-width: 1900px; margin-left: auto; margin-right: auto; }
}

/* ---- Print ---- */
@media print {
    .portal-topbar, .portal-sidebar, .btn-sidebar-toggle { display: none !important; }
    .portal-main { padding: 0 !important; }
    .portal-layout { display: block !important; }
}

/* `1fr` = `minmax(auto,1fr)` — lambe naam wala tile apne hisse se bada ho kar
   line ko bahar dhakel deta tha. `minmax(0,1fr)` se har tile barabar rehta hai. */
.svc-tabs, .svc-grid, .bc-grid { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.svc-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.bc-grid  { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
.svc-tabs > *, .svc-grid > *, .bc-grid > * { min-width: 0; }
.svc-tab-title, .service-mini-name { overflow: hidden; text-overflow: ellipsis; }