/* ============================================================
   File 23: public/assets/css/tools.css
   BankZop — Tool Pages Stylesheet (Complete)
   Covers: IFSC, MICR, BSR, SWIFT, Routing, PIN Code,
           IBAN, UPI, Calculators
   Fonts: Sora (headings), DM Sans (body), JetBrains Mono (codes)
   Design: Mobile-first, card-based, fintech utility
   ── Changes vs File 19 ──────────────────────────────────────
   Added: tool-card, tool-form, tool-input-*, quick-chip,
          btn-search, drilldown-trail, drilldown-pane,
          drill-search-input, drilldown-list, result-card,
          result-grid, result-field, result-badge,
          multi-office-*, info-list, lead-mini-form,
          sidebar-card--search, sidebar-card--info,
          related-tool-*, toast, prose, data-table,
          tool-badge, live-dot, result-area, result-error,
          text-success, text-warning, spin @keyframe
============================================================ */

/* ── CSS Variables ─────────────────────────────────────── */
:root {
    /* Brand */
    --color-navy:       #0B1F3A;
    --color-blue:       #0066FF;
    --color-mint:       #00C896;
    --color-bg:         #F7F9FC;
    --color-surface:    #FFFFFF;
    --color-text:       #1A1A2E;
    --color-text-muted: #6B7280;
    --color-border:     #E5E9F0;
    --color-error:      #EF4444;
    --color-warning:    #F59E0B;
    --color-success:    #10B981;

    /* Tool-specific */
    --tool-hero-bg:          #EEF4FF;
    --tool-tab-bg:           #F1F5F9;
    --tool-tab-active-bg:    #FFFFFF;
    --tool-step-done-bg:     #F0FDF4;
    --tool-step-done-border: #BBF7D0;
    --tool-result-highlight: #EEF4FF;
    --tool-result-border:    #C7D9FF;

    /* Shadows */
    --shadow-card:   0 1px 3px rgba(11,31,58,.06), 0 4px 16px rgba(11,31,58,.08);
    --shadow-hover:  0 4px 20px rgba(0,102,255,.12);
    --shadow-result: 0 2px 8px rgba(11,31,58,.08), 0 8px 32px rgba(11,31,58,.10);

    /* Spacing */
    --tool-gap: 2rem;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ============================================================
   CONTAINER
============================================================ */
.container {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

@media (min-width: 768px) {
    .container { padding-inline: 2rem; }
}


/* ============================================================
   BREADCRUMB
============================================================ */
.bz-breadcrumb,
.breadcrumb-nav {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: .65rem 0;
}

.breadcrumb-list,
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: .8125rem;
    color: var(--color-text-muted);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.breadcrumb-item + .breadcrumb-item::before,
.bc-sep {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid var(--color-text-muted);
    border-top:   1.5px solid var(--color-text-muted);
    transform: rotate(45deg);
    margin-right: .15rem;
    flex-shrink: 0;
}

/* bc-sep is an explicit element in pincode.php */
.bc-sep {
    width: auto;
    height: auto;
    border: none;
    transform: none;
    font-size: .75rem;
    color: var(--color-text-muted);
    padding: 0 .1rem;
}

.breadcrumb-item a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color .15s;
}

.breadcrumb-item a:hover { color: var(--color-blue); text-decoration: underline; }

.breadcrumb-item:last-child > span {
    color: var(--color-text);
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================
   TOOL HERO
============================================================ */
.tool-hero {
    background: var(--tool-hero-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 2rem 0 1.75rem;
}

/* ── Used by ifsc.php ── */
.tool-hero__h1 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.3rem, 3vw, 1.875rem);
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1.25;
    margin: 0 0 .5rem;
    letter-spacing: -.015em;
}

.tool-hero__subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: .9375rem;
    color: var(--color-text-muted);
    margin: 0;
    max-width: 640px;
    line-height: 1.6;
}

.tool-hero__meta { flex-shrink: 0; }

.meta-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .75rem;
    color: var(--color-text-muted);
    background: rgba(255,255,255,.75);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    padding: .3rem .75rem;
    white-space: nowrap;
}

.meta-badge svg { flex-shrink: 0; color: var(--color-blue); }

/* ── Used by pincode.php ── */
.tool-hero__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.tool-hero__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tool-hero__text { flex: 1; min-width: 0; }

.tool-hero__text h1 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.3rem, 3vw, 1.875rem);
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1.25;
    margin: 0 0 .4rem;
    letter-spacing: -.015em;
}

.tool-hero__sub {
    font-family: 'DM Sans', sans-serif;
    font-size: .9375rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.6;
}

/* Badges row */
.tool-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
}

.tool-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .75rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: rgba(255,255,255,.8);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    padding: .3rem .7rem;
    white-space: nowrap;
}

.tool-badge--live {
    color: #065f46;
    background: rgba(0,200,150,.08);
    border-color: rgba(0,200,150,.25);
}

.live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-mint);
    animation: livePulse 1.8s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1;  transform: scale(1); }
    50%       { opacity: .5; transform: scale(.8); }
}

/* Intro text block below hero headline */
.tool-hero__intro {
    margin-top: 1rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .9375rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    max-width: 720px;
}


/* ============================================================
   TOOL SECTION WRAPPER
============================================================ */
.tool-widget-section,
.tool-section {
    padding: 2rem 0 3rem;
    background: var(--color-bg);
}


/* ============================================================
   TOOL LAYOUT — Two-column with sidebar
============================================================ */
.tool-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tool-gap);
}

@media (min-width: 1024px) {
    .tool-layout {
        grid-template-columns: 1fr 300px;
        align-items: start;
    }
}

.tool-main { min-width: 0; }

@media (min-width: 1024px) {
    .tool-sidebar {
        position: sticky;
        top: 80px;
    }
}


/* ============================================================
   TOOL CARD (generic wrapper — used by pincode, future tools)
============================================================ */
.tool-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}


/* ============================================================
   TOOL TABS
============================================================ */
.tool-tabs {
    display: flex;
    gap: .375rem;
    background: var(--tool-tab-bg);
    border-radius: var(--radius-lg);
    padding: .3rem;
    margin-bottom: 1.25rem;
}

.tool-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    padding: .625rem .75rem;
    cursor: pointer;
    transition: all .2s var(--ease-out);
    white-space: nowrap;
    line-height: 1.3;
}

.tool-tab svg { flex-shrink: 0; opacity: .7; }

.tool-tab.active {
    background: var(--color-surface);
    color: var(--color-blue);
    box-shadow: var(--shadow-card);
    font-weight: 600;
}

.tool-tab.active svg { opacity: 1; }
.tool-tab:hover:not(.active) { color: var(--color-text); background: rgba(255,255,255,.6); }

@media (max-width: 480px) {
    .tool-tab { font-size: .75rem; padding: .5rem; }
    .tool-tab svg { display: none; }
}


/* ============================================================
   TOOL PANELS
============================================================ */
.tool-panel {
    display: none;
    animation: panelFadeIn .2s var(--ease-out);
}

.tool-panel.active { display: block; }

@keyframes panelFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   TOOL FORM (generic — used by pincode direct search)
============================================================ */
.tool-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Label + hint */
.tool-label {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: .5rem;
}

.tool-label__hint {
    font-size: .775rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

/* Input wrapper with icon + clear button */
.tool-input-group { display: flex; flex-direction: column; gap: .5rem; }

.tool-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.tool-input-icon {
    position: absolute;
    left: .875rem;
    color: var(--color-text-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
}

.tool-input {
    width: 100%;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .8rem 2.75rem .8rem 2.75rem; /* space for icon left + clear right */
    letter-spacing: .06em;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    -webkit-appearance: none;
}

.tool-input::placeholder {
    font-family: 'DM Sans', sans-serif;
    font-size: .9rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-text-muted);
}

.tool-input:focus {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(0,102,255,.1);
    background: #fff;
}

.tool-input[aria-invalid="true"] {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(239,68,68,.08);
}

/* Clear button inside input */
.tool-input-clear {
    position: absolute;
    right: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--color-border);
    border: none;
    border-radius: 50%;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
    padding: 0;
}

.tool-input-clear:hover { background: var(--color-blue); color: #fff; }

/* Hint + error text */
.tool-hint {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .8rem;
    color: var(--color-text-muted);
    margin: 0;
}

.tool-hint strong {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    color: var(--color-text);
}

.tool-error {
    font-family: 'DM Sans', sans-serif;
    font-size: .8rem;
    color: var(--color-error);
    font-weight: 500;
    margin: 0;
}


/* ============================================================
   QUICK SUGGESTION CHIPS
============================================================ */
.quick-suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.quick-suggestions__label {
    font-family: 'DM Sans', sans-serif;
    font-size: .775rem;
    font-weight: 600;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.quick-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.quick-chip {
    font-family: 'DM Sans', sans-serif;
    font-size: .775rem;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    padding: .3rem .75rem;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.quick-chip:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
    background: rgba(0,102,255,.05);
}


/* ============================================================
   SEARCH BUTTON (with loading state)
============================================================ */
.btn-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .9375rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-blue);
    border: none;
    border-radius: var(--radius-md);
    padding: .875rem 1.5rem;
    width: 100%;
    cursor: pointer;
    transition: background .18s, transform .18s, box-shadow .18s;
    position: relative;
}

.btn-search:hover:not(:disabled) {
    background: #0055d4;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,102,255,.28);
}

.btn-search:disabled {
    opacity: .7;
    cursor: not-allowed;
    transform: none;
}

.btn-search__text,
.btn-search__loader {
    display: flex;
    align-items: center;
    gap: .45rem;
}

/* Spinner animation */
.spin {
    animation: spinAnim .7s linear infinite;
}

@keyframes spinAnim {
    to { transform: rotate(360deg); }
}


/* ============================================================
   IFSC SEARCH FORM (File 19 original — kept intact)
============================================================ */
.ifsc-search-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}

.search-label {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: .6rem;
}

.search-field-wrap  { display: flex; flex-direction: column; gap: .5rem; }
.search-input-group { display: flex; gap: .5rem; align-items: stretch; }

.search-input {
    flex: 1;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .75rem 1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    min-width: 0;
}

.search-input::placeholder {
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    font-family: 'DM Sans', sans-serif;
    font-size: .9rem;
    font-weight: 400;
}

.search-input:focus {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(0,102,255,.1);
    background: #fff;
}

.search-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .9375rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    padding: .75rem 1.25rem;
}

.search-hint {
    font-family: 'DM Sans', sans-serif;
    font-size: .8rem;
    color: var(--color-text-muted);
    margin: 0;
}

.search-hint strong {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    color: var(--color-text);
}


/* ============================================================
   SKELETON LOADER (original + pincode variants)
============================================================ */
.skeleton-wrap,
.result-skeleton {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* Base shimmer block */
.skeleton,
.skeleton-block {
    background: linear-gradient(
        90deg,
        #e8edf5 25%,
        #f3f6fb 50%,
        #e8edf5 75%
    );
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Original variants */
.skeleton-title           { height: 1.4rem; width: 60%; }
.skeleton-row             { height: 1rem;   width: 100%; }
.skeleton-row.short       { width: 45%; }

/* Pincode skeleton variants */
.skeleton-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .5rem;
}

.skeleton-block--title  { height: 1.4rem; width: 55%; }
.skeleton-block--badge  { height: 1.2rem; width: 80px; border-radius: 100px; }
.skeleton-block--label  { height: .75rem; width: 40%; margin-bottom: .3rem; }
.skeleton-block--value  { height: 1rem;   width: 75%; }
.skeleton-block--list-item { height: 3rem; width: 100%; border-radius: var(--radius-md); }

.skeleton-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .875rem 1.25rem;
}

@media (max-width: 600px) {
    .skeleton-grid { grid-template-columns: 1fr; }
}

.skeleton-item { display: flex; flex-direction: column; gap: .25rem; }

.skeleton-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}


/* ============================================================
   RESULT AREA (live-region container)
============================================================ */
.result-area {
    margin-top: 1.25rem;
    animation: panelFadeIn .25s var(--ease-out);
}


/* ============================================================
   DRILL-DOWN TRAIL (step indicator)
============================================================ */
.drilldown-trail {
    margin-bottom: 1.25rem;
}

.drilldown-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.drilldown-step {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .8125rem;
    color: var(--color-text-muted);
    transition: color .15s;
}

.drilldown-step.active {
    color: var(--color-blue);
    font-weight: 600;
}

.drilldown-step.completed {
    color: var(--color-mint);
}

.drilldown-step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: .7rem;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--color-border);
    color: var(--color-text-muted);
    transition: background .15s, color .15s;
}

.drilldown-step.active .drilldown-step__num {
    background: var(--color-blue);
    color: #fff;
}

.drilldown-step.completed .drilldown-step__num {
    background: var(--color-mint);
    color: #fff;
}

.drilldown-step__label {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drilldown-sep {
    color: var(--color-border);
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
}


/* ============================================================
   DRILL-DOWN PANEL + PANES
============================================================ */
.drilldown-panel { position: relative; min-height: 200px; }

.drilldown-pane {
    animation: panelFadeIn .2s var(--ease-out);
}

.drilldown-pane__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-bottom: .875rem;
    padding-bottom: .875rem;
    border-bottom: 1px solid var(--color-border);
}

.drilldown-pane__header h3 {
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-navy);
    margin: 0;
    flex: 1;
}

.drilldown-pane__count {
    font-family: 'DM Sans', sans-serif;
    font-size: .775rem;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    padding: .2rem .65rem;
    white-space: nowrap;
    margin: 0;
}

/* Back button */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-blue);
    background: rgba(0,102,255,.06);
    border: 1px solid rgba(0,102,255,.15);
    border-radius: var(--radius-sm);
    padding: .35rem .75rem;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}

.btn-back:hover {
    background: var(--color-blue);
    color: #fff;
    border-color: var(--color-blue);
}


/* ============================================================
   DRILL SEARCH INPUT (within drill-down panes)
============================================================ */
.search-within-drill { margin-bottom: .75rem; }

.drill-search-input {
    width: 100%;
    font-family: 'DM Sans', sans-serif;
    font-size: .875rem;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .6rem .875rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
}

.drill-search-input:focus {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(0,102,255,.08);
    background: #fff;
}


/* ============================================================
   DRILL-DOWN LIST (states / districts / taluks / offices)
============================================================ */
.drilldown-list {
    list-style: none;
    margin: 0;
    padding: .25rem;
    max-height: 360px;
    overflow-y: auto;
    scroll-behavior: smooth;

    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.drilldown-list::-webkit-scrollbar        { width: 5px; }
.drilldown-list::-webkit-scrollbar-track  { background: transparent; }
.drilldown-list::-webkit-scrollbar-thumb  { background: var(--color-border); border-radius: 100px; }

.drilldown-list__item { list-style: none; }

.drilldown-list__btn {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: .7rem .75rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .875rem;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    transition: background .12s, color .12s;
    line-height: 1.4;
}

.drilldown-list__btn:hover,
.drilldown-list__btn:focus-visible {
    background: var(--tool-hero-bg);
    color: var(--color-blue);
    outline: none;
}

.drilldown-list__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-style: normal;
    transition: background .12s, color .12s;
}

.drilldown-list__btn:hover .drilldown-list__icon {
    background: rgba(0,102,255,.08);
    border-color: rgba(0,102,255,.2);
    color: var(--color-blue);
}

.drilldown-list__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.drilldown-list__meta {
    font-size: .75rem;
    color: var(--color-text-muted);
    font-weight: 400;
}

.drilldown-list__btn:hover .drilldown-list__meta { color: rgba(0,102,255,.65); }

.drilldown-list__arrow {
    flex-shrink: 0;
    color: var(--color-border);
    font-size: 1rem;
    transition: color .12s, transform .12s;
}

.drilldown-list__btn:hover .drilldown-list__arrow {
    color: var(--color-blue);
    transform: translateX(2px);
}

/* PIN badge on office items */
.drilldown-list__badge {
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: .72rem;
    font-weight: 600;
    color: var(--color-blue);
    background: rgba(0,102,255,.07);
    border: 1px solid rgba(0,102,255,.15);
    border-radius: 4px;
    padding: .15rem .5rem;
    letter-spacing: .04em;
}

.drilldown-list__empty {
    padding: 1.5rem 1rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .875rem;
    color: var(--color-text-muted);
    text-align: center;
    list-style: none;
}


/* ============================================================
   SKELETON — Original
============================================================ */
.skeleton-wrap {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* Keep .skeleton alias for File 19 compatibility */
.skeleton {
    background: linear-gradient(
        90deg, #e8edf5 25%, #f3f6fb 50%, #e8edf5 75%
    );
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: shimmer 1.5s infinite;
}

.skeleton-title { height: 1.4rem; width: 60%; }
.skeleton-row   { height: 1rem;   width: 100%; }
.skeleton-row.short { width: 45%; }


/* ============================================================
   DRILL-DOWN FORM (IFSC File 19 style — bank / state / city steps)
============================================================ */
.drilldown-form {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* Step card */
.drilldown-step-card {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color .2s;
}

.drilldown-step-card.step-active  { border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(0,102,255,.06); }
.drilldown-step-card.step-done    { background: var(--tool-step-done-bg); border-color: var(--tool-step-done-border); }

.step-header {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .875rem 1rem;
    font-family: 'DM Sans', sans-serif;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--color-blue);
    color: #fff;
}

.step-done .step-number { background: var(--color-mint); font-size: 0; }
.step-done .step-number::before { content: '✓'; font-size: .75rem; }

.step-label       { font-size: .875rem; font-weight: 600; color: var(--color-text); flex: 1; }
.step-done .step-label { color: var(--color-text-muted); font-weight: 500; }

.step-selected-value {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-navy);
}

.step-change-link {
    font-size: .75rem;
    font-weight: 500;
    color: var(--color-blue);
    text-decoration: none;
    padding: .15rem .4rem;
    border-radius: 4px;
    border: 1px solid var(--color-blue);
    transition: all .15s;
}

.step-change-link:hover { background: var(--color-blue); color: #fff; }


/* ============================================================
   SEARCHABLE DROPDOWN (IFSC bank / state / city)
============================================================ */
.searchable-dropdown { border-top: 1px solid var(--color-border); }

.dropdown-search-wrap {
    position: relative;
    padding: .625rem .875rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.dropdown-search {
    width: 100%;
    font-family: 'DM Sans', sans-serif;
    font-size: .875rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: .5rem .875rem .5rem 2.25rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.dropdown-search:focus { border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(0,102,255,.08); }

.dropdown-search-icon {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

.dropdown-list {
    list-style: none;
    margin: 0;
    padding: .375rem;
    max-height: 280px;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.dropdown-list::-webkit-scrollbar        { width: 5px; }
.dropdown-list::-webkit-scrollbar-track  { background: transparent; }
.dropdown-list::-webkit-scrollbar-thumb  { background: var(--color-border); border-radius: 100px; }

.dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem .875rem;
    border-radius: var(--radius-sm);
    font-family: 'DM Sans', sans-serif;
    font-size: .875rem;
    color: var(--color-text);
    cursor: pointer;
    transition: background .12s, color .12s;
    line-height: 1.4;
}

.dropdown-item:hover,
.dropdown-item:focus { background: var(--tool-hero-bg); color: var(--color-blue); outline: none; }

.dropdown-item--detected {
    background: rgba(0,200,150,.06);
    border: 1px solid rgba(0,200,150,.2);
    border-radius: var(--radius-sm);
    margin-bottom: .25rem;
    color: #065f46;
    font-weight: 500;
}

.dropdown-item--detected:hover,
.dropdown-item--detected:focus { background: rgba(0,200,150,.12); color: #065f46; }

.location-pin-icon { flex-shrink: 0; color: var(--color-mint); }

.detected-badge {
    margin-left: auto;
    font-size: .7rem;
    font-weight: 600;
    color: var(--color-mint);
    background: rgba(0,200,150,.1);
    border-radius: 100px;
    padding: .1rem .45rem;
    white-space: nowrap;
}

.bank-logo-sm {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
}

.bank-name-full { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bank-short-tag {
    flex-shrink: 0;
    font-size: .7rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: var(--tool-tab-bg);
    border-radius: 4px;
    padding: .1rem .4rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.branch-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.branch-ifsc-tag {
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: .7rem;
    color: var(--color-blue);
    background: rgba(0,102,255,.06);
    border-radius: 4px;
    padding: .15rem .4rem;
    letter-spacing: .04em;
}

.dropdown-empty {
    padding: 1rem .875rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .875rem;
    color: var(--color-text-muted);
    text-align: center;
}


/* ============================================================
   RESULT CARD — IFSC (File 19)
============================================================ */
.ifsc-result-card {
    background: var(--color-surface);
    border: 1.5px solid var(--tool-result-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-result);
    overflow: hidden;
    margin-top: 1.25rem;
    animation: resultSlideIn .3s var(--ease-out);
}

@keyframes resultSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.result-card-header {
    background: linear-gradient(135deg, var(--color-navy) 0%, #1a3a6e 100%);
    padding: 1.25rem 1.5rem;
}

.result-bank-identity     { display: flex; align-items: center; gap: .875rem; }

.result-bank-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: #fff;
    padding: 4px;
    flex-shrink: 0;
}

.result-bank-name {
    font-family: 'Sora', sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 .2rem;
    line-height: 1.3;
}

.result-branch-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: .8125rem;
    color: rgba(255,255,255,.65);
    margin: 0;
    line-height: 1.4;
}

.ifsc-highlight-box {
    background: var(--tool-result-highlight);
    border-bottom: 1px solid var(--tool-result-border);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.ifsc-highlight-label {
    font-family: 'DM Sans', sans-serif;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-blue);
}

.ifsc-highlight-value     { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.ifsc-code-mono {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    font-weight: 700;
    color: var(--color-navy);
    letter-spacing: .12em;
    line-height: 1;
}

.ifsc-highlight-note {
    font-family: 'DM Sans', sans-serif;
    font-size: .8rem;
    color: var(--color-text-muted);
    margin: 0;
}

.result-details-table { padding: 0 1.5rem 1.5rem; }

.details-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'DM Sans', sans-serif;
    font-size: .875rem;
}

.details-table th,
.details-table td {
    padding: .75rem 0;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
    line-height: 1.5;
    text-align: left;
}

.details-table tr:last-child th,
.details-table tr:last-child td { border-bottom: none; }

.details-table th {
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: .8125rem;
    width: 35%;
    min-width: 120px;
    padding-right: 1rem;
    white-space: nowrap;
}

.details-table td { color: var(--color-text); font-weight: 450; word-break: break-word; }

.mono-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--color-navy);
    letter-spacing: .04em;
    background: var(--color-bg);
    padding: .2rem .5rem;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    display: inline-block;
}

.field-note    { display: block; font-size: .75rem; color: var(--color-text-muted); margin-top: .25rem; font-style: italic; }
.link-soft     { color: var(--color-blue); text-decoration: none; font-weight: 500; font-size: .8125rem; }
.link-soft:hover { text-decoration: underline; }

.btn-copy--inline {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-family: 'DM Sans', sans-serif;
    font-size: .7rem;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: .15rem .45rem;
    cursor: pointer;
    transition: all .15s;
    margin-left: .35rem;
    vertical-align: middle;
}

.btn-copy--inline:hover { border-color: var(--color-blue); color: var(--color-blue); background: rgba(0,102,255,.04); }


/* ============================================================
   RESULT CARD — PINCODE (generic card used by pincode.php)
============================================================ */
.result-card {
    background: var(--color-surface);
    border: 1.5px solid var(--tool-result-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-result);
    overflow: hidden;
    animation: resultSlideIn .3s var(--ease-out);
}

.result-card__header {
    background: linear-gradient(135deg, var(--color-navy) 0%, #1a3a6e 100%);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.result-card__headline {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    min-width: 0;
    flex: 1;
}

.result-card__icon {
    font-size: 1.75rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: .1rem;
}

.result-card__title {
    font-family: 'Sora', sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 .2rem;
    line-height: 1.3;
    word-break: break-word;
}

.result-card__sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: .8125rem;
    color: rgba(255,255,255,.6);
    margin: 0;
    letter-spacing: .05em;
}

.result-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    flex-shrink: 0;
}

/* Badge pill */
.result-badge {
    display: inline-flex;
    align-items: center;
    font-family: 'DM Sans', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    padding: .3rem .65rem;
    border-radius: 100px;
    white-space: nowrap;
    background: rgba(255,255,255,.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
}

.result-badge--success { background: rgba(0,200,150,.2); border-color: rgba(0,200,150,.4); color: #86efcc; }
.result-badge--warning { background: rgba(245,158,11,.2); border-color: rgba(245,158,11,.4); color: #fcd34d; }
.result-badge--type    { background: rgba(255,255,255,.12); }


/* ── Result Grid (field table) ── */
.result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
}

.result-grid--pincode .result-field { padding: .875rem 1.25rem; border-bottom: 1px solid var(--color-border); }
.result-grid--pincode .result-field:nth-child(odd)  { border-right: 1px solid var(--color-border); }
.result-field--full { grid-column: 1 / -1; }

@media (max-width: 580px) {
    .result-grid { grid-template-columns: 1fr; }
    .result-grid--pincode .result-field { border-right: none !important; }
}

.result-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    position: relative;
}

.result-field__label {
    font-family: 'DM Sans', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-text-muted);
}

.result-field__value {
    font-family: 'DM Sans', sans-serif;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--color-text);
    word-break: break-word;
    line-height: 1.4;
}

.result-field__value--mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: .875rem;
    letter-spacing: .06em;
    color: var(--color-navy);
    font-weight: 700;
}

/* Copy button inside result field */
.result-field .btn-copy {
    align-self: flex-start;
    margin-top: .25rem;
    font-size: .72rem;
    padding: .25rem .6rem;
    gap: .25rem;
}


/* ── Result Card Actions ── */
.result-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}

.btn-copy-all,
.btn-share,
.btn-browse {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .8125rem;
    font-weight: 600;
    padding: .45rem .9rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    border: 1.5px solid;
}

.btn-copy-all {
    color: var(--color-blue);
    background: rgba(0,102,255,.07);
    border-color: rgba(0,102,255,.2);
}

.btn-copy-all:hover { background: var(--color-blue); color: #fff; border-color: var(--color-blue); }

.btn-share {
    color: var(--color-text-muted);
    background: var(--color-surface);
    border-color: var(--color-border);
}

.btn-share:hover { border-color: var(--color-blue); color: var(--color-blue); background: rgba(0,102,255,.04); }

.btn-browse {
    color: var(--color-text-muted);
    background: var(--color-surface);
    border-color: var(--color-border);
}

.btn-browse:hover { border-color: var(--color-mint); color: var(--color-mint); background: rgba(0,200,150,.04); }

/* Inline text link button */
.btn-link {
    background: none;
    border: none;
    color: var(--color-blue);
    font-family: 'DM Sans', sans-serif;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0;
}

.btn-link:hover { color: #0055d4; }


/* ── Multi-office notice ── */
.multi-office-notice {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .8375rem;
    color: var(--color-text-muted);
    background: rgba(245,158,11,.06);
    border-top: 1px solid rgba(245,158,11,.15);
}

.multi-office-notice svg { flex-shrink: 0; color: var(--color-warning); }

.multi-office-list {
    border-top: 1px solid var(--color-border);
    padding: .5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.multi-office-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .75rem;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    font-family: 'DM Sans', sans-serif;
    font-size: .8375rem;
}

.multi-office-item--primary {
    background: rgba(0,102,255,.04);
    border-color: rgba(0,102,255,.15);
}

.multi-office-name { flex: 1; font-weight: 500; color: var(--color-text); }
.multi-office-type { font-size: .75rem; color: var(--color-text-muted); }
.multi-office-delivery { font-size: .75rem; font-weight: 600; }


/* ── Result Error State ── */
.result-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    color: var(--color-text-muted);
}

.result-error svg { color: var(--color-error); opacity: .6; }

.result-error p {
    font-family: 'DM Sans', sans-serif;
    font-size: .9375rem;
    color: var(--color-text);
    margin: 0;
    line-height: 1.6;
}

.result-error__sub {
    font-size: .8375rem !important;
    color: var(--color-text-muted) !important;
}


/* ============================================================
   COPY BUTTON (shared — works in both IFSC and pincode cards)
============================================================ */
.btn-copy {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-blue);
    background: rgba(0,102,255,.08);
    border: 1.5px solid rgba(0,102,255,.2);
    border-radius: var(--radius-sm);
    padding: .4rem .875rem;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}

.btn-copy:hover       { background: var(--color-blue); color: #fff; border-color: var(--color-blue); }
.btn-copy--copied     { background: var(--color-mint) !important; border-color: var(--color-mint) !important; color: #fff !important; }

/* Result actions row */
.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--color-border);
}

.result-actions .btn { font-size: .8125rem; padding: .5rem .875rem; }


/* ============================================================
   NOT FOUND STATE
============================================================ */
.tool-not-found {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    text-align: center;
    margin-top: 1rem;
}

.not-found-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #FEF2F2;
    color: var(--color-error);
    margin-bottom: 1rem;
}

.not-found-title { font-family: 'Sora', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--color-text); margin: 0 0 .5rem; }

.not-found-message {
    font-family: 'DM Sans', sans-serif;
    font-size: .9375rem;
    color: var(--color-text-muted);
    margin: 0 0 1.25rem;
    max-width: 400px;
    margin-inline: auto;
    line-height: 1.6;
}

.not-found-tips {
    text-align: left;
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: .875rem;
    color: var(--color-text-muted);
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.not-found-tips li { padding: .3rem 0 .3rem 1.25rem; position: relative; }
.not-found-tips li::before { content: '→'; position: absolute; left: 0; color: var(--color-blue); font-size: .75rem; }


/* ============================================================
   BRANCH LISTING (city mode — IFSC)
============================================================ */
.branch-listing       { margin-top: 1.25rem; }
.branch-listing-title { font-family: 'Sora', sans-serif; font-size: 1.0625rem; font-weight: 600; color: var(--color-navy); margin: 0 0 .875rem; }
.branch-cards-grid    { display: flex; flex-direction: column; gap: .375rem; }

.branch-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .875rem 1rem;
    text-decoration: none;
    color: var(--color-text);
    transition: all .15s;
}

.branch-card:hover { border-color: var(--color-blue); box-shadow: var(--shadow-hover); transform: translateX(2px); }

.branch-card-name   { flex: 1; font-family: 'DM Sans', sans-serif; font-size: .9rem; font-weight: 500; color: var(--color-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.branch-card-ifsc   { font-family: 'JetBrains Mono', monospace; font-size: .75rem; color: var(--color-blue); background: rgba(0,102,255,.06); padding: .2rem .5rem; border-radius: 4px; flex-shrink: 0; letter-spacing: .04em; }
.branch-card-arrow  { flex-shrink: 0; color: var(--color-text-muted); transition: color .15s, transform .15s; }
.branch-card:hover .branch-card-arrow { color: var(--color-blue); transform: translateX(2px); }


/* ============================================================
   SIDEBAR
============================================================ */
.tool-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sidebar-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.125rem 1.25rem;
    box-shadow: var(--shadow-card);
}

.sidebar-card__title,
.sidebar-card-title {
    font-family: 'Sora', sans-serif;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 .875rem;
    padding-bottom: .625rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* ── Search sidebar card ── */
.sidebar-card--search { background: var(--tool-hero-bg); }

.sidebar-search-form {
    display: flex;
    gap: .375rem;
    align-items: stretch;
}

.sidebar-search-input {
    flex: 1;
    font-family: 'DM Sans', sans-serif;
    font-size: .875rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: .55rem .875rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    min-width: 0;
}

.sidebar-search-input:focus { border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(0,102,255,.08); }

.sidebar-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background: var(--color-blue);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .15s;
}

.sidebar-search-btn:hover { background: #0055d4; }

/* ── Info sidebar card ── */
.sidebar-card--info { background: var(--color-bg); }

.info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.info-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .625rem 0;
    border-bottom: 1px solid var(--color-border);
    font-family: 'DM Sans', sans-serif;
    font-size: .8375rem;
}

.info-list__item:last-child { border-bottom: none; }

.info-list__key { color: var(--color-text-muted); font-weight: 400; }

.info-list__val {
    color: var(--color-navy);
    font-weight: 600;
    text-align: right;
}


/* ── Lead gen sidebar card ── */
.sidebar-card--lead {
    background: linear-gradient(135deg, #0B1F3A 0%, #0D3166 100%);
    border-color: transparent;
}

.lead-widget-header { margin-bottom: 1rem; }

.lead-widget-badge {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-mint);
    background: rgba(0,200,150,.15);
    border: 1px solid rgba(0,200,150,.3);
    border-radius: 100px;
    padding: .2rem .6rem;
    margin-bottom: .5rem;
}

.lead-widget-title {
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 .35rem;
}

.lead-widget-sub {
    font-family: 'DM Sans', sans-serif;
    font-size: .8125rem;
    color: rgba(255,255,255,.6);
    margin: 0;
    line-height: 1.5;
}

/* Lead mini form */
.lead-mini-form {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.lead-mini-field { display: flex; flex-direction: column; }

.lead-mini-input,
.lead-mini-select {
    width: 100%;
    font-family: 'DM Sans', sans-serif;
    font-size: .875rem;
    color: var(--color-text);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radius-sm);
    padding: .6rem .875rem;
    outline: none;
    transition: border-color .15s, background .15s;
    -webkit-appearance: none;
}

.lead-mini-input::placeholder { color: rgba(255,255,255,.45); }
.lead-mini-input:focus,
.lead-mini-select:focus {
    border-color: rgba(255,255,255,.5);
    background: rgba(255,255,255,.18);
}

.lead-mini-select option { background: var(--color-navy); color: #fff; }

.lead-mini-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-mint);
    border: none;
    border-radius: var(--radius-md);
    padding: .75rem 1rem;
    cursor: pointer;
    width: 100%;
    transition: background .15s, transform .15s, box-shadow .15s;
    margin-top: .25rem;
}

.lead-mini-btn:hover {
    background: #00b386;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,200,150,.3);
}

.lead-mini-disclaimer {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .72rem;
    color: rgba(255,255,255,.45);
    margin: .25rem 0 0;
    line-height: 1.4;
}

/* Old sidebar lead card title style kept for IFSC */
.lead-widget-btn {
    width: 100%;
    justify-content: center;
    background: var(--color-mint);
    border-color: var(--color-mint);
    color: #fff;
    font-weight: 700;
    font-size: .875rem;
}

.lead-widget-btn:hover { background: #00b386; border-color: #00b386; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,200,150,.3); }

.lead-widget-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: .8125rem;
    color: rgba(255,255,255,.65);
    margin: 0 0 1rem;
    line-height: 1.5;
}


/* ============================================================
   RELATED TOOLS (sidebar list — pincode style)
============================================================ */
.related-tools-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.related-tools-item { list-style: none; }

.related-tool-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .5rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text);
    transition: all .15s;
}

.related-tool-link:hover { background: var(--tool-hero-bg); color: var(--color-blue); }

.related-tool-icon { font-size: 1rem; flex-shrink: 0; width: 24px; text-align: center; }

.related-tool-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }

.related-tool-name {
    font-family: 'DM Sans', sans-serif;
    font-size: .8375rem;
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.related-tool-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: .72rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.related-tool-arrow { flex-shrink: 0; color: var(--color-border); transition: color .15s, transform .15s; }
.related-tool-link:hover .related-tool-arrow { color: var(--color-blue); transform: translateX(2px); }

/* Original related tools (IFSC sidebar) */
.related-tools-list .related-tool-link { font-family: 'DM Sans', sans-serif; font-size: .875rem; font-weight: 500; }

.tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-family: 'Sora', sans-serif;
    font-size: .7rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.tool-icon--micr  { background: #7C3AED; }
.tool-icon--bsr   { background: #0891B2; }
.tool-icon--swift { background: #059669; }
.tool-icon--pin   { background: #EA580C; }
.tool-icon--emi   { background: #0066FF; }
.tool-icon--ifsc  { background: var(--color-navy); }
.tool-icon--iban  { background: #DB2777; }
.tool-icon--upi   { background: #7C3AED; }
.tool-icon--fd    { background: #047857; }
.tool-icon--rd    { background: #0369A1; }

/* Popular banks list (IFSC sidebar) */
.popular-banks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }

.popular-bank-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .8375rem;
    color: var(--color-text);
    text-decoration: none;
    padding: .4rem .5rem;
    border-radius: var(--radius-sm);
    transition: all .15s;
}

.popular-bank-link:hover { color: var(--color-blue); background: var(--tool-hero-bg); }
.popular-bank-link img   { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; border-radius: 3px; border: 1px solid var(--color-border); }


/* ============================================================
   TOAST NOTIFICATION
============================================================ */
.toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    font-family: 'DM Sans', sans-serif;
    font-size: .875rem;
    font-weight: 600;
    padding: .75rem 1.5rem;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 24px rgba(0,0,0,.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
    z-index: 9999;
    white-space: nowrap;
    max-width: calc(100vw - 2rem);
}

.toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast--success { background: var(--color-navy);  color: #fff; }
.toast--error   { background: var(--color-error);  color: #fff; }
.toast--info    { background: var(--color-blue);   color: #fff; }
.toast--warning { background: var(--color-warning); color: #fff; }


/* ============================================================
   SEO CONTENT / PROSE BLOCK
============================================================ */
.tool-seo-content,
.tool-seo-content.prose {
    margin-top: 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: var(--shadow-card);
}

/* Typography inside any prose/seo block */
.tool-seo-content h2,
.seo-content-inner h2 {
    font-family: 'Sora', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-navy);
    margin: 1.75rem 0 .75rem;
    line-height: 1.3;
}

.tool-seo-content h2:first-child,
.seo-content-inner h2:first-child { margin-top: 0; }

.tool-seo-content h3,
.seo-content-inner h3 {
    font-family: 'Sora', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 1.25rem 0 .5rem;
    line-height: 1.35;
}

.tool-seo-content p,
.seo-content-inner p {
    font-family: 'DM Sans', sans-serif;
    font-size: .9375rem;
    color: var(--color-text);
    line-height: 1.75;
    margin: 0 0 1rem;
}

.tool-seo-content ul,
.tool-seo-content ol,
.seo-content-inner ul,
.seo-content-inner ol {
    font-family: 'DM Sans', sans-serif;
    font-size: .9375rem;
    color: var(--color-text);
    line-height: 1.7;
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

.tool-seo-content li,
.seo-content-inner li { margin-bottom: .4rem; }

.tool-seo-content a,
.seo-content-inner a { color: var(--color-blue); text-decoration: underline; text-underline-offset: 2px; }

.tool-seo-content strong,
.seo-content-inner strong { font-weight: 600; color: var(--color-navy); }

/* Data table (zone table etc.) */
.zone-table-wrap { overflow-x: auto; margin: 1.25rem 0; border-radius: var(--radius-md); border: 1px solid var(--color-border); }

.data-table,
.tool-seo-content table,
.seo-content-inner table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'DM Sans', sans-serif;
    font-size: .875rem;
}

.data-table th,
.tool-seo-content th,
.seo-content-inner th {
    background: var(--tool-hero-bg);
    color: var(--color-navy);
    font-weight: 600;
    padding: .75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.data-table td,
.tool-seo-content td,
.seo-content-inner td {
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: top;
}

.data-table tr:last-child td,
.tool-seo-content tr:last-child td,
.seo-content-inner tr:last-child td { border-bottom: none; }

.data-table tr:nth-child(even) td,
.tool-seo-content tr:nth-child(even) td,
.seo-content-inner tr:nth-child(even) td { background: rgba(247,249,252,.6); }


/* ============================================================
   FAQ SECTION
============================================================ */
.tool-faq-section,
.tool-faq {
    margin-top: 2rem;
}

.tool-faq__title,
.section-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.15rem, 2.5vw, 1.4rem);
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 1.25rem;
    letter-spacing: -.01em;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color .15s;
}

.faq-item--open,
.faq-item:has(.faq-question[aria-expanded="true"]) { border-color: var(--color-blue); }

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--color-text);
    background: none;
    border: none;
    padding: 1rem 1.125rem;
    cursor: pointer;
    text-align: left;
    transition: color .15s;
}

.faq-question:hover { color: var(--color-blue); }
.faq-question[aria-expanded="true"] { color: var(--color-blue); }

.faq-chevron {
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: transform .25s var(--ease-out);
}

.faq-question[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); color: var(--color-blue); }
.faq-item--open .faq-chevron                     { transform: rotate(180deg); color: var(--color-blue); }

.faq-answer {
    font-family: 'DM Sans', sans-serif;
    font-size: .9rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    padding: 0 1.125rem 1rem;
    border-top: 1px solid var(--color-border);
}


/* ============================================================
   UTILITY — text colours
============================================================ */
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error   { color: var(--color-error); }
.text-muted   { color: var(--color-text-muted); }


/* ============================================================
   SHARED BUTTON STYLES
============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    border-radius: var(--radius-md);
    padding: .65rem 1.25rem;
    font-size: .9375rem;
    cursor: pointer;
    border: 1.5px solid transparent;
    text-decoration: none;
    transition: all .18s var(--ease-out);
    line-height: 1;
    white-space: nowrap;
}

.btn-primary  { background: var(--color-blue);  color: #fff; border-color: var(--color-blue); }
.btn-primary:hover  { background: #0055d4; border-color: #0055d4; box-shadow: 0 4px 16px rgba(0,102,255,.25); transform: translateY(-1px); }
.btn-outline  { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-outline:hover  { border-color: var(--color-blue); color: var(--color-blue); background: rgba(0,102,255,.04); }
.btn-accent   { background: var(--color-mint);  color: #fff; border-color: var(--color-mint); }
.btn-accent:hover   { background: #00b386; border-color: #00b386; transform: translateY(-1px); }


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 600px) {
    /* IFSC result table — stack vertically */
    .details-table th,
    .details-table td { display: block; width: 100%; padding: .375rem 0; border-bottom: none; }
    .details-table th { padding-top: .875rem; color: var(--color-text-muted); font-size: .75rem; min-width: unset; }
    .details-table tr { border-bottom: 1px solid var(--color-border); display: block; padding: .125rem 0; }
    .details-table tr:last-child { border-bottom: none; }
    .ifsc-code-mono { font-size: 1.25rem; }
    .result-card-header, .ifsc-highlight-box { padding: 1rem; }
    .result-details-table { padding: 0 1rem 1rem; }
    .result-actions { padding: .875rem 1rem 1.25rem; }
    .branch-card-ifsc { display: none; }

    /* Pincode result card */
    .result-card__header { padding: 1rem; }
    .result-card__actions { padding: .75rem 1rem; }
    .result-grid--pincode .result-field { padding: .75rem 1rem; }
    .tool-card { padding: 1rem; }

    /* Drilldown trail — abbreviate */
    .drilldown-step__label { max-width: 60px; }
}

@media (max-width: 380px) {
    .tool-tab:first-child::after  { content: 'PIN'; }
    .tool-tab:last-child::after   { content: 'Browse'; }
    .drilldown-step__num { width: 18px; height: 18px; font-size: .65rem; }
}

/* Print */
@media print {
    .tool-sidebar,
    .tool-tabs,
    .result-actions,
    .result-card__actions,
    .tool-faq,
    .tool-faq-section,
    .bz-breadcrumb,
    .breadcrumb-nav,
    .toast,
    .btn-back { display: none !important; }

    .tool-layout { display: block; }

    .ifsc-result-card,
    .result-card { box-shadow: none; border: 1px solid #ccc; }
}

/* ============================================================
   tools_append_FINAL.css
   PASTE THIS ENTIRE BLOCK AT THE BOTTOM OF tools.css
   Replaces ALL previous appended sections
   Combines: Popular States + Mobile fixes + Ad banners +
             Lead form visibility + FAQ fix + Hamburger fix
============================================================ */

/* ── Popular States sidebar ── */
.popular-states-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: .125rem;
}
.popular-state-item { list-style: none; }
.popular-state-link {
    display: flex; align-items: center; gap: .625rem;
    padding: .45rem .5rem; border-radius: var(--radius-sm);
    text-decoration: none; color: var(--color-text); transition: all .15s;
}
.popular-state-link:hover { background: var(--tool-hero-bg); }
.state-icon {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 7px;
    font-family: 'Sora', sans-serif; font-size: .65rem;
    font-weight: 800; color: #fff; flex-shrink: 0; letter-spacing: .01em;
}
.state-name { flex: 1; font-family: 'DM Sans', sans-serif; font-size: .8375rem; font-weight: 500; color: var(--color-text); }
.popular-state-link:hover .state-name { color: var(--color-blue); }
.popular-state-link svg { color: var(--color-border); flex-shrink: 0; transition: color .15s; }
.popular-state-link:hover svg { color: var(--color-blue); }

/* ── Tool icon colours (fill any gaps) ── */
.tool-icon--ifsc  { background: #0B1F3A; }
.tool-icon--upi   { background: #7C3AED; }

/* ── Tool hero content block ── */
.tool-hero__content { display: flex; flex-direction: column; gap: .75rem; }
.tool-hero__meta    { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .25rem; }
.meta-badge         { white-space: normal; font-size: .72rem; padding: .25rem .6rem; gap: .3rem; }
.meta-badge--live   { color: #065f46; background: rgba(0,200,150,.08); border-color: rgba(0,200,150,.25); }

/* ── Tool page sections — stay below sticky header ── */
.tool-hero,
.tool-section,
.ad-unit { position: relative; z-index: 1; }

/* ── FAQ full visibility fix ── */
/* .faq-item has overflow:hidden which clips expanded answers */
.tool-faq .faq-item { overflow: visible !important; }
.tool-faq .faq-answer:not([hidden]) {
    display: block !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: .875rem 1.125rem 1rem;
}

/* ── Lead form — dark background visibility ── */
.sidebar-card--lead { padding: 1.25rem; }
.lead-mini-form { gap: .75rem; }
.sidebar-card--lead .lead-mini-input,
.sidebar-card--lead .lead-mini-select {
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    font-size: .875rem;
    padding: .7rem .875rem;
    -webkit-appearance: none;
    border-radius: 8px;
}
.sidebar-card--lead .lead-mini-input::placeholder { color: rgba(255,255,255,0.6) !important; }
.sidebar-card--lead .lead-mini-input:focus,
.sidebar-card--lead .lead-mini-select:focus {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
    outline: none;
}
.sidebar-card--lead .lead-mini-select {
    color: rgba(255,255,255,0.85) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    padding-right: 2rem !important;
}
.sidebar-card--lead .lead-mini-select option { background: #0B1F3A !important; color: #fff !important; }
.lead-mini-btn {
    background: #007A5C !important;
    border-radius: 8px; padding: .8rem 1rem;
    font-size: .9rem; margin-top: .25rem;
    width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.lead-mini-btn:hover { background: #00634a !important; }
.lead-mini-disclaimer { margin-top: .5rem; }
.lead-form-msg { padding: .5rem .75rem; border-radius: 6px; font-size: .8rem; font-family: 'DM Sans', sans-serif; margin-top: .25rem; }
.lead-form-msg--error   { background: rgba(239,68,68,.2); color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }
.lead-form-msg--success { background: rgba(0,200,150,.2); color: #6ee7b7; border: 1px solid rgba(0,200,150,.3); }
.lead-success { text-align: center; padding: 1rem 0; }
.lead-success p { font-size: .875rem; color: rgba(255,255,255,.85); line-height: 1.6; margin: .5rem 0 0; }

/* ── Duplicate breadcrumb suppression ── */
.bz-breadcrumb { display: none; }

/* ── Mobile overrides ── */
@media (max-width: 640px) {
    /* Hero */
    .tool-hero { padding: 1.25rem 0 1rem; }
    .tool-hero__h1 { font-size: 1.25rem; }
    .tool-hero__subtitle { font-size: .875rem; }
    .meta-badge { font-size: .7rem; padding: .2rem .5rem; }

    /* Tool card */
    .tool-card { padding: 1rem .875rem; border-radius: 12px; }

    /* Tabs */
    .tool-tabs { padding: .25rem; gap: .25rem; }
    .tool-tab  { font-size: .75rem; padding: .5rem .4rem; gap: .3rem; }
    .tool-tab svg { width: 13px; height: 13px; }

    /* Inputs */
    .tool-input { font-size: .9rem; padding: .7rem 2.5rem .7rem 2.5rem; }
    .tool-label { font-size: .825rem; }
    .quick-chip { font-size: .7rem; padding: .25rem .6rem; }
    .btn-search { font-size: .875rem; padding: .75rem 1rem; }

    /* Result card */
    .result-card__header { padding: .875rem 1rem; flex-direction: column; gap: .6rem; }
    .result-card__badges { flex-direction: row; }
    .result-card__title  { font-size: .95rem; }
    .result-grid--pincode .result-field { padding: .75rem 1rem; }
    .result-card__actions { padding: .75rem 1rem; gap: .4rem; }
    .btn-copy-all, .btn-share { font-size: .75rem; padding: .4rem .75rem; }

    /* Drilldown */
    .drilldown-trail { overflow-x: auto; padding-bottom: .25rem; }
    .drilldown-steps { flex-wrap: nowrap; }
    .drilldown-step__label { max-width: 56px; font-size: .72rem; }
    .drilldown-step__num   { width: 20px; height: 20px; font-size: .65rem; }
    .drilldown-list { max-height: 260px; }
    .drilldown-list__btn { font-size: .825rem; padding: .65rem .625rem; }
    .drilldown-pane__header h3 { font-size: .9rem; }

    /* SEO content */
    .tool-seo-content,
    .tool-seo-content.prose { padding: 1.125rem; margin-top: 1.25rem; }
    .tool-seo-content h2 { font-size: 1.1rem; }
    .tool-seo-content p,
    .tool-seo-content li  { font-size: .875rem; }

    /* FAQ */
    .tool-faq { margin-top: 1.25rem; }
    .faq-question { font-size: .875rem; padding: .875rem 1rem; }
    .faq-answer   { font-size: .85rem; padding: 0 1rem .875rem; }

    /* Sidebar */
    .tool-sidebar { gap: .875rem; }
    .sidebar-card { padding: 1rem; }
    .sidebar-card__title { font-size: .875rem; margin-bottom: .75rem; }

    /* Popular states — 2 columns */
    .popular-states-list { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
    .popular-state-link { padding: .4rem; gap: .4rem; }
    .state-icon  { width: 28px; height: 28px; font-size: .6rem; }
    .state-name  { font-size: .775rem; }

    /* Lead form */
    .sidebar-card--lead .lead-mini-input,
    .sidebar-card--lead .lead-mini-select { font-size: .825rem !important; padding: .6rem .75rem !important; }
    .lead-mini-btn { font-size: .85rem; padding: .75rem; }

    /* Tables */
    .zone-table-wrap { margin: .75rem 0; }
    .data-table th,
    .data-table td { padding: .5rem .625rem; font-size: .78rem; }

    /* Ads */
    .ad-unit--top .ad-placeholder,
    .ad-unit--mid .ad-placeholder { max-width: 320px; height: 60px; padding: 0 1rem; }
    .ad-unit--top .ad-demo-text h4,
    .ad-unit--mid .ad-demo-text h4 { font-size: .8rem; }
    .ad-unit--top .ad-demo-text p,
    .ad-unit--mid .ad-demo-text p  { display: none; }
    .ad-unit--content .ad-placeholder { max-width: 300px; height: 250px; }
    .ad-unit--sidebar { display: none; }
}

@media (max-width: 380px) {
    .tool-hero__h1 { font-size: 1.1rem; }
    .tool-tab { font-size: .7rem; }
    .tool-tab svg { display: none; }
    .quick-chips { gap: .25rem; }
    .meta-badge { font-size: .65rem; }
}

/* ── IN-TOOL AD (between drilldown trail and state list) ── */
.ad-unit--in-tool {
    margin: .75rem 0;
    border-radius: 8px;
    overflow: hidden;
}
.ad-placeholder--in-tool {
    width: 100%;
    height: auto;
    min-height: 52px;
    background: linear-gradient(90deg, #0d2d52 0%, #1a4a7a 100%);
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: .6rem 1rem;
    gap: .75rem;
    position: relative;
}
.ad-inline-content {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
}
.ad-inline-icon { font-size: 1.25rem; flex-shrink: 0; line-height: 1; }
.ad-inline-text { flex: 1; min-width: 0; }
.ad-inline-text strong {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}
.ad-inline-text small {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: .7rem;
    color: rgba(255,255,255,.65);
    margin-top: .1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ad-inline-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    background: #00C896;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: .75rem;
    font-weight: 700;
    padding: .35rem .8rem;
    border-radius: 100px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}
.ad-inline-btn:hover { background: #00b386; }

/* Mobile: hide small text on tiny screens */
@media (max-width: 480px) {
    .ad-inline-text small { display: none; }
    .ad-placeholder--in-tool { min-height: 44px; padding: .5rem .75rem; }
    .ad-inline-icon { font-size: 1rem; }
}

/* ── Advertisement Units — Fully Responsive ── */
/* No fixed pixel dimensions. Adapts to container width on all devices. */

.ad-unit--tool {
    width: 100%;
    margin: .875rem 0;
}

.ad-inner {
    width: 100%;
    background: linear-gradient(135deg, #0B1F3A 0%, #145A94 100%);
    border-radius: 8px;
    padding: .875rem 1.125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    position: relative;
    overflow: hidden;
    min-height: 56px;
}

.ad-label {
    position: absolute;
    top: .4rem;
    right: .75rem;
    font-size: .6rem;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
}

.ad-demo-text {
    display: flex;
    align-items: center;
    gap: .875rem;
    flex: 1;
    min-width: 0;
}

.ad-demo-copy { flex: 1; min-width: 0; }

.ad-demo-text h4 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(.75rem, 1.8vw, .95rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 .15rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ad-demo-text p {
    font-size: clamp(.65rem, 1.4vw, .78rem);
    color: rgba(255,255,255,.7);
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ad-demo-btn {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    background: #00C896;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(.7rem, 1.5vw, .8rem);
    font-weight: 700;
    padding: .4rem .875rem;
    border-radius: 100px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}

.ad-demo-btn:hover { background: #00a87e; }

/* On very narrow containers (inside tool card ~620px) */
@media (max-width: 520px) {
    .ad-inner { padding: .75rem .875rem; gap: .5rem; min-height: 50px; }
    .ad-demo-text { gap: .5rem; }
    .ad-demo-text p { display: none; } /* hide sub-text, keep headline + CTA */
    .ad-demo-btn { font-size: .7rem; padding: .35rem .65rem; }
}

/* Sidebar + medium content ad units (unchanged from before) */
.ad-unit--mid,
.ad-unit--content,
.ad-unit--sidebar {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 1.25rem 0;
}
.ad-unit--mid .ad-inner,
.ad-unit--content .ad-inner { border-radius: 10px; }

/* ============================================================
   BANKZOP — WCAG AA CONTRAST FIXES
   Target: axe 4.11 color-contrast rule (4.5:1 normal, 3:1 large)
   Verified ratios listed on each rule.
   Append these to: public_html/assets/css/tools.css
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   FIX 1 — .tool-hero__subtitle
   Was:  #6B7280 on #0B1F3A navy  → 3.42:1  ❌
   Now:  rgba(255,255,255,0.90)   → 13.24:1 ✅
   ──────────────────────────────────────────────────────────── */
.tool-hero__subtitle {
    color: rgba(255, 255, 255, 0.90) !important;
}

/* Also catch if the hero subtitle has a secondary/muted class */
.tool-hero .subtitle,
.tool-hero .hero-subtitle,
.tool-hero p {
    color: rgba(255, 255, 255, 0.90) !important;
}


/* ────────────────────────────────────────────────────────────
   FIX 2 — .tool-tab (inactive state)
   Was:  #6B7280 on #F7F9FC  → 4.58:1 (marginal, axe flags at element level)
   Now:  #374151 on #F7F9FC  → 9.77:1 ✅
   Active tab inherits or uses navy — already passes.
   ──────────────────────────────────────────────────────────── */
.tool-tab {
    color: #374151 !important;
}

.tool-tab[aria-selected="false"] {
    color: #374151 !important;
}

.tool-tab[aria-selected="true"] {
    color: #0B1F3A !important;
}

/* Tab label/text inside button if wrapped in a span */
.tool-tab span,
.tool-tab .tab-label {
    color: inherit !important;
}


/* ────────────────────────────────────────────────────────────
   FIX 3 — .ad-demo-btn (Check Free, Check Eligibility, Apply Now)
   Was:  #FFFFFF on #00C896 mint  → 2.16:1  ❌
   Now:  #0B1F3A on #00C896 mint  → 7.63:1  ✅
   ──────────────────────────────────────────────────────────── */
.ad-demo-btn {
    color: #0B1F3A !important;
    font-weight: 700 !important;
}

.ad-demo-btn:hover,
.ad-demo-btn:focus,
.ad-demo-btn:active,
.ad-demo-btn:visited {
    color: #0B1F3A !important;
}

/* Arrow/icon inside button */
.ad-demo-btn .arrow,
.ad-demo-btn svg,
.ad-demo-btn i {
    color: #0B1F3A !important;
    fill: #0B1F3A !important;
}


/* ────────────────────────────────────────────────────────────
   FIX 4 — h4 inside .tool-section / ad sections
   Was:  ~#6B7280 or lighter on white  → ≤4.27:1  ❌
   Now:  #111827 on white              → 17.74:1  ✅
   ──────────────────────────────────────────────────────────── */
.tool-section h4,
.ad-section h4,
.ad-card h4,
section.tool-section h4 {
    color: #111827 !important;
}

/* Catch sub-headings inside ad widgets */
.tool-section .ad-widget h4,
.tool-section .lead-widget h4 {
    color: #111827 !important;
}


/* ────────────────────────────────────────────────────────────
   FIX 5 — .ad-label ("ADVERTISEMENT" text)
   Was:  ~#9CA3AF on white  → 2.54:1  ❌
   Now:  #4B5563 on white   → 7.56:1  ✅
   ──────────────────────────────────────────────────────────── */
.ad-label {
    color: #4B5563 !important;
    font-weight: 600 !important;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* ────────────────────────────────────────────────────────────
   FIX 6 — .state-icon colored circles
   Was:  #FFFFFF on medium-pastel bg  → 1.95–3.05:1  ❌
   Now:  #0B1F3A on light-pastel bg   → 9.52–13.26:1 ✅
   Background colors are updated in PHP (see snippet below).
   This CSS covers the text color for ALL state icons.
   ──────────────────────────────────────────────────────────── */
.state-icon {
    color: #0B1F3A !important;
    font-weight: 700 !important;
}

/* Ensure text inside state-icon spans inherits */
.state-icon * {
    color: inherit !important;
}


/* ────────────────────────────────────────────────────────────
   BONUS — Other low-contrast elements caught by axe
   These are pre-emptive fixes for elements axe commonly
   flags on similar page structures.
   ──────────────────────────────────────────────────────────── */

/* Placeholder text in inputs — axe flags these below 4.5 */
.tool-input::placeholder,
.search-input::placeholder,
input[type="text"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder {
    color: #6B7280 !important; /* 4.58:1 on white — borderline, use #4B5563 to be safe */
    color: #4B5563 !important; /* 7.56:1 on white ✅ */
}

/* Disabled button text — axe may flag */
button:disabled:not(.btn-search),
.btn:disabled:not(.btn-search),
.tool-tab:disabled {
    color: #6B7280 !important;
    opacity: 1 !important; /* Don't use opacity to dim — it reduces contrast */
}

/* Badge / chip text */
.badge,
.state-badge,
.tag-chip {
    color: #1A1A2E !important;
}

/* Breadcrumb separator and muted text */
.breadcrumb-separator,
.breadcrumb-item.active {
    color: #4B5563 !important; /* 7.56:1 on white */
}

/* Footer note text if light */
.tool-footer-note,
.result-note,
.helper-text {
    color: #374151 !important; /* 9.77:1 on white */
}

/* Ad widget titles — removed from heading hierarchy, styled to match */
.ad-widget-title {
    font-family: 'Sora', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;          /* already fixed from contrast fix */
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}

/* Subtitle forced visible — overrides any conflicting rule */
.tool-hero .tool-hero__subtitle {
    color: #1A1A2E !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-top: 0.6rem;
}

.tool-hero .tool-hero__subtitle strong {
    color: #0052CC !important;
    font-weight: 600;
}

/* drilldown-pane heading — removed from h3 to fix heading hierarchy */
.drilldown-pane__heading {
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #1A1A2E;
    margin: 0 0 0.35rem 0;
    line-height: 1.4;
}

/* ── Ad Unit Layout Fixes ── */

/* Spacing above and below every ad unit */
.ad-unit {
    margin: 2rem 0;
    text-align: center;
}

/* Label centered, sits ABOVE the image, outside the image box */
.ad-label {
    display: block;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4B5563;
    margin-bottom: 6px;
}

/* Image link — centered block, no gap under image */
.ad-banner-link {
    display: inline-block;
    line-height: 0;
}

/* Image itself — centered, no extra space */
.ad-unit img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* Extra breathing room for ads inside tool panels */
.ad-unit--leaderboard {
    margin: 1.75rem 0;
}

/* Sidebar ad */
.ad-unit--sidebar {
    margin: 1.5rem 0;
}

/* First ad in a panel — don't double-stack with panel padding */
.tool-panel > .ad-unit:first-child,
.drilldown-pane > .ad-unit:first-child {
    margin-top: 1rem;
}

/* Force ad label center — overrides any conflicting rule */
.ad-unit .ad-label {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
}


/* ============================================================
   PINCODE STATE PAGE — District Grid
   Append to: public_html/assets/css/tools.css
   ============================================================ */

/* District grid — 2 columns desktop, 1 mobile */
.district-grid {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

@media (max-width: 640px) {
    .district-grid {
        grid-template-columns: 1fr;
    }
}

/* Each district card */
.district-grid__item {
    display: flex;
}

.district-grid__btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: #F7F9FC;
    border: 1.5px solid #E5E9F0;
    border-radius: 8px;
    text-decoration: none;
    color: #1A1A2E;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    cursor: pointer;
}

.district-grid__btn:hover,
.district-grid__btn:focus {
    background: #EEF4FF;
    border-color: #0066FF;
    color: #0052CC;
    outline: none;
}

.district-grid__btn:focus-visible {
    outline: 2px solid #0066FF;
    outline-offset: 2px;
}

/* Icon */
.district-grid__icon {
    flex-shrink: 0;
    color: #0066FF;
    display: flex;
    align-items: center;
}

/* Name — takes remaining space */
.district-grid__name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Arrow — right side */
.district-grid__arrow {
    flex-shrink: 0;
    color: #6B7280;
    transition: color 0.15s, transform 0.15s;
}

.district-grid__btn:hover .district-grid__arrow,
.district-grid__btn:focus .district-grid__arrow {
    color: #0052CC;
    transform: translateX(2px);
}

/* Drilldown step — completed state */
.drilldown-step.completed .drilldown-step__num {
    background: #00C896;
    color: #fff;
    font-size: 0.7rem;
}

/* Sidebar view-all link */
.sidebar-view-all {
    display: block;
    text-align: center;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #0066FF;
    text-decoration: none;
    padding: 0.4rem;
    border-radius: 6px;
    transition: background 0.15s;
}

.sidebar-view-all:hover {
    background: #EEF4FF;
}
/* ============================================================
   PINCODE STATE PAGE — Enhanced Components
   Append to: public_html/assets/css/tools.css
   ============================================================ */

/* ── State Stats Grid — 4 boxes ── */
.state-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin: 1.25rem 0 1.5rem;
}

@media (max-width: 768px) {
    .state-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 400px) {
    .state-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

.state-stat-box {
    background: #FFFFFF;
    border: 1.5px solid #E5E9F0;
    border-radius: 10px;
    padding: 1rem 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.state-stat-box:hover {
    border-color: #0066FF;
    box-shadow: 0 2px 8px rgba(0,102,255,0.08);
}

.state-stat-box__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.15rem;
}

.state-stat-box__icon--total   { background: #EEF4FF; color: #0066FF; }
.state-stat-box__icon--ho      { background: #FEF9EE; color: #D97706; }
.state-stat-box__icon--delivery{ background: #ECFDF5; color: #059669; }
.state-stat-box__icon--pin     { background: #FFF1F2; color: #E11D48; }

.state-stat-box__num {
    font-family: 'Sora', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #0B1F3A;
    line-height: 1;
}

.state-stat-box__label {
    font-size: 0.72rem;
    color: #6B7280;
    font-weight: 500;
    line-height: 1.3;
}

/* ── Top Districts Featured Grid ── */
.top-districts-section {
    margin: 2rem 0;
}

.top-districts__title {
    font-family: 'Sora', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0B1F3A;
    margin: 0 0 0.25rem;
}

.top-districts__sub {
    font-size: 0.85rem;
    color: #6B7280;
    margin: 0 0 1rem;
}

.top-districts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .top-districts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .top-districts-grid {
        grid-template-columns: 1fr;
    }
}

.top-district-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem 1rem;
    background: #FFFFFF;
    border: 1.5px solid #E5E9F0;
    border-radius: 10px;
    text-decoration: none;
    color: #1A1A2E;
    position: relative;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.top-district-card:hover {
    border-color: #0066FF;
    box-shadow: 0 4px 12px rgba(0,102,255,0.1);
    transform: translateY(-2px);
}

.top-district-card:focus-visible {
    outline: 2px solid #0066FF;
    outline-offset: 2px;
}

.top-district-card__rank {
    font-size: 0.65rem;
    font-weight: 700;
    color: #0066FF;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.top-district-card__name {
    font-family: 'Sora', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0B1F3A;
    line-height: 1.3;
}

.top-district-card__stats {
    font-size: 0.75rem;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.top-district-card__dot {
    color: #D1D5DB;
}

.top-district-card__arrow {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    color: #D1D5DB;
    transition: color 0.15s, transform 0.15s;
}

.top-district-card:hover .top-district-card__arrow {
    color: #0066FF;
    transform: translateY(-50%) translateX(2px);
}
/* Fix: state list text visibility in Browse by State panel */
.drilldown-list__btn {
    color: #1A1A2E !important;
}

.drilldown-list__text {
    color: #1A1A2E !important;
}

.drilldown-list__arrow {
    color: #6B7280 !important;
}

.drilldown-list__btn:hover .drilldown-list__text,
.drilldown-list__btn:focus .drilldown-list__text {
    color: #0052CC !important;
}

.drilldown-list__btn:hover .drilldown-list__arrow,
.drilldown-list__btn:focus .drilldown-list__arrow {
    color: #0052CC !important;
}
/* Force skeleton loaders to hide when not in use */
#skeleton-drilldown[hidden],
#skeleton-direct[hidden],
.result-skeleton[hidden],
.skeleton-wrap[hidden] {
    display: none !important;
}
/* Search button — keep white text in ALL states */
.btn-search,
.btn-search:hover,
.btn-search:focus,
.btn-search:active,
.btn-search:disabled {
    color: #FFFFFF !important;
}

.btn-search .btn-search__text,
.btn-search .btn-search__loader {
    color: #FFFFFF !important;
}

/* Button active/click state — change background not text */
.btn-search:active {
    background: #0052CC !important; /* darker blue on click */
    color: #FFFFFF !important;
}

/* Disabled state during loading — dim background only */
.btn-search:disabled {
    background: #0052CC !important;
    opacity: 0.85 !important;
    color: #FFFFFF !important;
    cursor: wait;
}
/* ============================================================
   PINCODE DISTRICT PAGE — PIN Code Grid
   Append to: public_html/assets/css/tools.css
   ============================================================ */

/* PIN code grid — 3 cols desktop, 2 tablet, 1 mobile */
.pin-code-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
    margin: 0.75rem 0 0;
}

@media (max-width: 900px) {
    .pin-code-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .pin-code-grid { grid-template-columns: 1fr; }
}

/* PIN code card */
.pin-code-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.8rem 0.9rem;
    background: #FFFFFF;
    border: 1.5px solid #E5E9F0;
    border-radius: 10px;
    text-decoration: none;
    color: #1A1A2E;
    position: relative;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    cursor: pointer;
}

.pin-code-card:hover {
    border-color: #0066FF;
    box-shadow: 0 4px 12px rgba(0,102,255,0.1);
    transform: translateY(-2px);
}

.pin-code-card:focus-visible {
    outline: 2px solid #0066FF;
    outline-offset: 2px;
}

/* Top row: PIN + badge */
.pin-code-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* PIN number — large, monospace */
.pin-code-card__pin {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0B1F3A;
    letter-spacing: 0.05em;
}

/* Delivery badge */
.pin-code-card__badge {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.pin-code-card__badge--delivery {
    background: #ECFDF5;
    color: #059669;
}

.pin-code-card__badge--nondel {
    background: #FEF9EE;
    color: #D97706;
}

/* Office name */
.pin-code-card__office {
    font-size: 0.78rem;
    color: #374151;
    font-weight: 500;
    line-height: 1.35;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meta: taluk + type */
.pin-code-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.1rem;
}

.pin-code-card__taluk {
    font-size: 0.7rem;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 3px;
}

.pin-code-card__type {
    font-size: 0.65rem;
    color: #0066FF;
    font-weight: 600;
    background: #EEF4FF;
    padding: 1px 6px;
    border-radius: 4px;
}

/* Arrow */
.pin-code-card__arrow {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    color: #D1D5DB;
    transition: color 0.15s;
}

.pin-code-card:hover .pin-code-card__arrow {
    color: #0066FF;
}

/* No results message */
.drilldown-list__empty {
    text-align: center;
    color: #6B7280;
    font-size: 0.9rem;
    padding: 2rem 1rem;
}
/* FAQ toggle fix */
.faq-answer { display: none; }
/* ============================================================
   DRILLDOWN STEPPER — Option C (card with rounded badges)
   Replaces .drilldown-trail / .drilldown-steps
   ============================================================ */
.drilldown-trail { margin-bottom: 0; }

.drilldown-steps-c {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
    background: #FFFFFF;
    border: 1px solid #E5E9F0;
    border-radius: 12px;
    list-style: none;
    margin: 0;
}

.drilldown-step-c {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.drilldown-badge {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

/* Done step */
.drilldown-step-c.done .drilldown-badge {
    background: #E8FFF6;
    color: #00A87C;
}
.drilldown-step-c.done .drilldown-step-name {
    color: #00A87C;
    font-weight: 500;
    text-decoration: none;
}
.drilldown-step-c.done .drilldown-step-name:hover {
    color: #007A5A;
    text-decoration: underline;
}

/* Active step */
.drilldown-step-c.active .drilldown-badge {
    background: #0066FF;
    color: #FFFFFF;
}
.drilldown-step-c.active .drilldown-step-name {
    color: #0066FF;
    font-weight: 600;
}

/* Inactive step */
.drilldown-step-c.inactive .drilldown-badge {
    background: #F3F4F6;
    color: #4B5563;
}
.drilldown-step-c.inactive .drilldown-step-name {
    color: #4B5563;
    font-weight: 400;
}

/* Separator */
.drilldown-sep-c {
    color: #D1D5DB;
    font-size: 16px;
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
}

/* Mobile: wrap gracefully */
@media (max-width: 480px) {
    .drilldown-steps-c {
        padding: 8px 10px;
        gap: 4px;
    }
    .drilldown-step-c {
        font-size: 12px;
    }
    .drilldown-badge {
        width: 22px;
        height: 22px;
        font-size: 10px;
        border-radius: 6px;
    }
}
/* ── Stat boxes — Option A (icon cards) ── */
.state-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 1.25rem 0 0;
}
.state-stat-box {
    background: #FFFFFF;
    border: 1px solid #E5E9F0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.state-stat-box__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    flex-shrink: 0;
}
.state-stat-box__icon--total   { background: #EEF4FF; color: #0066FF; }
.state-stat-box__icon--pin     { background: #E8FFF6; color: #00A87C; }
.state-stat-box__icon--delivery { background: #FFF7E6; color: #D97706; }
.state-stat-box__icon--ho      { background: #F3F0FF; color: #7F77DD; }
.state-stat-box__icon--states  { background: #F3F0FF; color: #7F77DD; }
 
.state-stat-box__num {
    font-size: 22px;
    font-weight: 700;
    color: #0B1F3A;
    line-height: 1;
    font-family: 'Sora', sans-serif;
}
.state-stat-box__label {
    font-size: 11px;
    color: #6B7280;
    font-weight: 500;
    margin-top: 3px;
    line-height: 1.3;
}
 
/* Mobile: 2×2 grid */
@media (max-width: 600px) {
    .state-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .state-stat-box__num { font-size: 20px; }
}
/* WCAG AA contrast fix — drilldown stepper */
.drilldown-step-c.done .drilldown-step-name,
.drilldown-step-c.done a.drilldown-step-name,
.drilldown-step-c.done a.drilldown-step-name:visited {
    color: #065F46;
}

.drilldown-step-c.done .drilldown-badge {
    background: #D1FAE5;
    color: #065F46;
}

.drilldown-step-c.inactive .drilldown-step-name {
    color: #4B5563;
}

.drilldown-step-c.inactive .drilldown-badge {
    background: #F3F4F6;
    color: #4B5563;
}

.drilldown-sep-c {
    color: #4B5563;
}
/* WCAG AA contrast fix — PIN code cards */
.pin-code-card__badge--delivery {
    background: #D1FAE5;
    color: #065F46;
}

.pin-code-card__badge--nondel {
    background: #FEE2E2;
    color: #991B1B;
}

.pin-code-card__type {
    color: #4B5563;
}

.pin-code-card__taluk {
    color: #4B5563;
}

.pin-code-card__pin {
    color: #0B1F3A;
}
/* Copy button feedback */
.btn-copy--inline,
.btn-copy-all,
.btn-copy {
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-copy--copied,
.btn-copy-all--copied {
    background: #00C896 !important;
    color: #fff !important;
    border-color: #00C896 !important;
}
.btn-copy--copied {
    background: #00C896 !important;
    color: #fff !important;
    border-color: #00C896 !important;
}