/* Nepal Interest Rates – Public Styles v1.2.1
 * --------------------------------------------------------------
 * Fixes vs v1.2.0:
 *  - iOS no longer auto-zooms on input focus (16px min font-size)
 *  - No hover transforms on touch devices (eliminates "shake")
 *  - Stronger dark-mode override specificity
 *  - tap highlight removed, touch-action: manipulation
 * --------------------------------------------------------------
 */

/* ── Custom Properties (scoped to wrapper) ──────────────────────────── */
.nir-wrapper {
	--nir-accent:        #2563eb;
	--nir-accent-light:  #dbeafe;
	--nir-accent-dark:   #1d4ed8;
	--nir-bg:            #ffffff;
	--nir-surface:       #f8fafc;
	--nir-surface-2:     #f1f5f9;
	--nir-border:        #e2e8f0;
	--nir-text:          #0f172a;
	--nir-text-muted:    #64748b;
	--nir-text-light:    #94a3b8;
	--nir-gold:          #f59e0b;
	--nir-silver:        #94a3b8;
	--nir-bronze:        #cd7c4d;
	--nir-green:         #059669;
	--nir-green-bg:      #ecfdf5;
	--nir-orange:        #d97706;
	--nir-orange-bg:     #fffbeb;
	--nir-radius:        14px;
	--nir-radius-sm:     10px;
	--nir-radius-xs:     7px;
	--nir-shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
	--nir-shadow-md:     0 4px 12px rgba(0,0,0,.10);
	--nir-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Force dark-mode variables when the wrapper is in dark mode.
   Use multiple selectors to maximize specificity over WP themes. */
.nir-wrapper[data-theme="dark"],
#nir-app[data-theme="dark"] {
	--nir-accent:        #3b82f6;
	--nir-accent-light:  #1e3a5f;
	--nir-accent-dark:   #60a5fa;
	--nir-bg:            #0f172a;
	--nir-surface:       #1e293b;
	--nir-surface-2:     #293548;
	--nir-border:        #334155;
	--nir-text:          #f1f5f9;
	--nir-text-muted:    #94a3b8;
	--nir-text-light:    #64748b;
	--nir-green:         #34d399;
	--nir-green-bg:      #022c22;
	--nir-orange:        #fbbf24;
	--nir-orange-bg:     #1c1200;
}


/* ── Wrapper Reset ──────────────────────────────────────────────────── */
.nir-wrapper {
	background:                 var(--nir-bg);
	color:                      var(--nir-text);
	font-family:                var(--nir-font);
	font-size:                  16px;
	line-height:                1.5;
	border-radius:              var(--nir-radius);
	overflow-x:                 clip;       /* stronger than hidden, no scroll context */
	overflow-y:                 visible;
	box-shadow:                 var(--nir-shadow-md);
	max-width:                  100%;
	width:                      100%;
	-webkit-text-size-adjust:   100%;
	text-size-adjust:           100%;
	transform:                  translateZ(0);
	-webkit-backface-visibility:hidden;
	backface-visibility:        hidden;
	contain:                    layout paint;
}
/* Fallback for browsers without overflow: clip */
@supports not (overflow: clip) {
	.nir-wrapper { overflow: hidden; }
}

.nir-wrapper *,
.nir-wrapper *::before,
.nir-wrapper *::after {
	box-sizing: border-box;
	margin:     0;
	padding:    0;
	min-width:  0;
}

.nir-wrapper img { display: block; max-width: 100%; }

.nir-wrapper button,
.nir-wrapper select,
.nir-wrapper input {
	font-family:                inherit;
	color:                      inherit;
	-webkit-tap-highlight-color: transparent;
}

.nir-wrapper button {
	cursor:        pointer;
	touch-action:  manipulation;
}

.nir-wrapper a {
	-webkit-tap-highlight-color: transparent;
	touch-action:                manipulation;
}

/* ── Utilities ──────────────────────────────────────────────────────── */
.nir-no-data {
	padding:    2.5rem 1rem;
	text-align: center;
	color:      var(--nir-text-muted);
	font-size:  .9rem;
}
.nir-hidden { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════
   HERO HEADER  (single-bank pages)
   ═══════════════════════════════════════════════════════════════════ */

.nir-wrapper .nir-hero {
	display:     flex;
	align-items: center;
	gap:         1rem;
	padding:     1.5rem 1.25rem;
	background:  linear-gradient(135deg, var(--nir-accent) 0%, var(--nir-accent-dark) 100%);
	color:       #fff;
}

.nir-wrapper .nir-hero-logo-wrap {
	flex-shrink:     0;
	width:           68px;
	height:          68px;
	border-radius:   16px;
	background:      rgba(255,255,255,.18);
	overflow:        hidden;
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.nir-wrapper .nir-hero-logo {
	width:      100%;
	height:     100%;
	object-fit: contain;
	padding:    8px;
	background: #fff;
	border-radius: 12px;
}

.nir-wrapper .nir-hero-fallback {
	display:         none;
	width:           100%;
	height:          100%;
	align-items:     center;
	justify-content: center;
	font-size:       1rem;
	font-weight:     700;
	color:           #fff;
	letter-spacing:  1.5px;
}

.nir-wrapper .nir-hero-content { flex: 1; min-width: 0; }

.nir-wrapper .nir-hero-title {
	font-size:     clamp(1.05rem, 4.5vw, 1.45rem);
	font-weight:   700;
	color:         #fff;
	margin:        0 0 .4rem;
	line-height:   1.25;
	word-break:    break-word;
	overflow-wrap: anywhere;
}

.nir-wrapper .nir-hero-meta {
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	gap:         .3rem .55rem;
	font-size:   .8rem;
	color:       rgba(255,255,255,.88);
}

.nir-wrapper .nir-hero-sep { opacity: .45; }

.nir-wrapper .nir-hero-link {
	color:           rgba(255,255,255,.95);
	text-decoration: none;
	font-weight:     500;
	border-bottom:   1px solid rgba(255,255,255,.45);
	transition:      color .15s, border-color .15s;
}

/* ── Month tag ──────────────────────────────────────────────────────── */
.nir-wrapper .nir-month-tag {
	display:        inline-flex;
	align-items:    center;
	padding:        .2rem .6rem;
	border-radius:  20px;
	font-size:      .73rem;
	font-weight:    600;
	background:     rgba(255,255,255,.22);
	color:          #fff;
	letter-spacing: .3px;
	white-space:    nowrap;
}
.nir-wrapper .nir-subtitle .nir-month-tag {
	background: var(--nir-accent-light);
	color:      var(--nir-accent);
}
.nir-wrapper[data-theme="dark"] .nir-subtitle .nir-month-tag {
	background: var(--nir-accent-light);
	color:      var(--nir-accent-dark);
}


/* ═══════════════════════════════════════════════════════════════════
   SINGLE-BANK DEPOSIT TYPE TABS  (.nir-sb-*)
   ═══════════════════════════════════════════════════════════════════ */

/* Single-bank deposit-type tabs — wrappable pill chips */
.nir-wrapper .nir-sb-tabs {
	display:        flex;
	flex-wrap:      wrap;
	gap:            .45rem;
	padding:        .8rem .85rem;
	background:     var(--nir-surface);
	border-bottom:  1px solid var(--nir-border);
}

.nir-wrapper .nir-sb-tab {
	display:         inline-flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	flex:            0 1 auto;
	min-height:      48px;
	padding:         .5rem 1rem;
	border:          1.5px solid var(--nir-border);
	border-radius:   999px;
	background:      var(--nir-bg);
	color:           var(--nir-text-muted);
	transition:      background .15s, border-color .15s, color .15s, box-shadow .15s;
	text-align:      center;
}

.nir-wrapper .nir-sb-tab.active {
	background:   var(--nir-accent);
	border-color: var(--nir-accent);
	color:        #fff;
	box-shadow:   0 4px 12px rgba(37,99,235,.30);
}

.nir-wrapper .nir-sb-label {
	font-size:   .8rem;
	font-weight: 600;
	line-height: 1.2;
}

.nir-wrapper .nir-sb-range {
	font-size:   .67rem;
	margin-top:  .22rem;
	opacity:     .8;
	font-weight: 400;
}
.nir-wrapper .nir-sb-tab.active .nir-sb-range { opacity: .95; }

/* ── Single-bank panels ─────────────────────────────────────────────── */
.nir-wrapper .nir-sb-panel        { display: none; padding: 1rem; }
.nir-wrapper .nir-sb-panel.active { display: block; animation: nirFade .25s ease; }

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


/* ═══════════════════════════════════════════════════════════════════
   RATE CARDS (used by both single-bank & accordion)
   ═══════════════════════════════════════════════════════════════════ */

.nir-wrapper .nir-rate-cards {
	display:        flex;
	flex-direction: column;
	gap:            .5rem;
}

.nir-wrapper .nir-rate-card {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             .75rem;
	padding:         .85rem 1rem;
	background:      var(--nir-surface);
	border:          1px solid var(--nir-border);
	border-radius:   var(--nir-radius-sm);
	transition:      box-shadow .15s, border-color .15s;
	min-height:      54px;
}

.nir-wrapper .nir-rate-card.nir-rc-top {
	border-left: 3px solid var(--nir-green);
	background:  var(--nir-green-bg);
}
.nir-wrapper .nir-rate-card.nir-rc-mid {
	border-left: 3px solid var(--nir-orange);
	background:  var(--nir-orange-bg);
}

.nir-wrapper .nir-rc-name {
	flex:        1;
	font-size:   .88rem;
	font-weight: 500;
	color:       var(--nir-text);
	line-height: 1.4;
	word-break:  break-word;
}

.nir-wrapper .nir-rc-right {
	display:        flex;
	flex-direction: column;
	align-items:    flex-end;
	flex-shrink:    0;
}

.nir-wrapper .nir-rc-rate {
	font-size:   1.05rem;
	font-weight: 700;
	color:       var(--nir-accent);
	white-space: nowrap;
	letter-spacing: -.01em;
}
.nir-wrapper .nir-rc-rate.nir-rc-zero {
	color:       var(--nir-text-muted);
	font-size:   .9rem;
	font-weight: 400;
}

.nir-wrapper .nir-rc-top .nir-rc-rate { color: var(--nir-green); }
.nir-wrapper .nir-rc-mid .nir-rc-rate { color: var(--nir-orange); }

.nir-wrapper .nir-rc-upd {
	font-size:   .68rem;
	color:       var(--nir-text-light);
	margin-top:  .18rem;
	white-space: nowrap;
}

/* ── Official / bank site links ─────────────────────────────────────── */
.nir-wrapper .nir-official-note,
.nir-wrapper .nir-bank-site-link {
	margin-top: .85rem;
	font-size:  .75rem;
	color:      var(--nir-text-muted);
	text-align: center;
}
.nir-wrapper .nir-official-note a,
.nir-wrapper .nir-bank-site-link a {
	color:           var(--nir-accent);
	text-decoration: none;
	font-weight:     500;
}

/* ── Footer note ────────────────────────────────────────────────────── */
.nir-wrapper .nir-footer-note {
	padding:    .9rem 1.25rem;
	background: var(--nir-surface);
	border-top: 1px solid var(--nir-border);
}
.nir-wrapper .nir-footer-note p {
	font-size:   .73rem;
	color:       var(--nir-text-muted);
	line-height: 1.65;
	margin:      0;
}
.nir-wrapper .nir-footer-note a { color: var(--nir-accent); text-decoration: none; }


/* ═══════════════════════════════════════════════════════════════════
   ALL-BANKS HEADER
   ═══════════════════════════════════════════════════════════════════ */

/* Hub intro — neutral surface (replaces solid blue Class-A-only header bar) */
.nir-wrapper .nir-hub-top {
	display:         flex;
	flex-direction:  column;
	align-items:     flex-start;
	gap:             .65rem;
	padding:         1.15rem 1rem 1rem;
	background:      var(--nir-surface-2);
	border-bottom:   1px solid var(--nir-border);
	color:           var(--nir-text);
}

.nir-wrapper .nir-hub-top-inner {
	width:      100%;
	min-width:  0;
}

.nir-wrapper .nir-hub-title {
	color:          var(--nir-text);
	margin:         0 0 .35rem;
	font-size:      clamp(1.05rem, 5vw, 1.4rem);
	font-weight:    700;
	line-height:    1.25;
}

.nir-wrapper .nir-hub-tagline {
	font-size:      .82rem;
	color:          var(--nir-text-muted);
	margin:         0;
	display:        flex;
	flex-wrap:      wrap;
	align-items:    center;
	gap:            .35rem;
}

.nir-wrapper .nir-hub-sep { opacity: .45; }

.nir-wrapper .nir-hub-top .nir-month-tag {
	display:       inline-block;
	padding:       .22rem .55rem;
	border-radius: 999px;
	background:    var(--nir-accent-light);
	color:         var(--nir-accent-dark);
	font-size:     .78rem;
	font-weight:   600;
}

.nir-wrapper[data-theme="dark"] .nir-hub-top .nir-month-tag {
	background: var(--nir-accent-light);
	color:      var(--nir-accent);
}

.nir-wrapper .nir-hub-badge .nir-nrb-label {
	background:  var(--nir-accent-light);
	color:       var(--nir-accent-dark);
	border:      1px solid var(--nir-border);
}

.nir-wrapper .nir-class-rank-block {
	margin-top: 1.35rem;
}

.nir-wrapper .nir-class-rank-block:first-of-type {
	margin-top: .85rem;
}

.nir-wrapper .nir-class-rank-title {
	font-size:      .93rem;
	font-weight:    700;
	margin:         0 0 .55rem;
	padding-bottom: .3rem;
	border-bottom:  2px solid var(--nir-accent);
	display:        inline-block;
	color:          var(--nir-text);
}

.nir-wrapper .nir-ranked-after-top3 {
	margin-top:   1.35rem;
	padding-top:  1.1rem;
	border-top:   1px solid var(--nir-border);
}

.nir-wrapper .nir-no-data-inline {
	padding:   .6rem 0 .2rem;
	font-size: .84rem;
	text-align: left;
}

/* Legacy: FD-only pages may still reference .nir-header in older caches */
.nir-wrapper .nir-header {
	display:         flex;
	flex-direction:  column;
	align-items:     flex-start;
	gap:             .65rem;
	padding:         1.2rem 1rem 1rem;
	background:      var(--nir-surface-2);
	border-bottom:   1px solid var(--nir-border);
	color:           var(--nir-text);
}

.nir-wrapper .nir-header-text { width: 100%; min-width: 0; }

.nir-wrapper .nir-main-title {
	font-size:      clamp(1.05rem, 5vw, 1.4rem);
	font-weight:    700;
	color:          var(--nir-text);
	margin:         0 0 .3rem;
	line-height:    1.25;
	word-break:     break-word;
	overflow-wrap:  anywhere;
}

.nir-wrapper .nir-subtitle {
	font-size:   .82rem;
	color:       var(--nir-text-muted);
	margin:      0;
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	gap:         .35rem;
}

.nir-wrapper .nir-nrb-label {
	display:        inline-block;
	padding:        .3rem .75rem;
	background:     var(--nir-accent-light);
	border-radius:  20px;
	font-size:      .72rem;
	font-weight:    600;
	color:          var(--nir-accent-dark);
	letter-spacing: .5px;
	white-space:    nowrap;
}


/* ═══════════════════════════════════════════════════════════════════
   MAIN TABS (all-banks)
   ═══════════════════════════════════════════════════════════════════ */

/* Tabs are wrappable pill chips — no horizontal scroll, every tab
   always fully visible. Flows to multiple rows on narrow screens. */
.nir-wrapper .nir-main-tabs {
	display:        flex;
	flex-wrap:      wrap;
	gap:            .4rem;
	padding:        .75rem .85rem;
	background:     var(--nir-surface);
	border-bottom:  1px solid var(--nir-border);
}

.nir-wrapper .nir-tab {
	display:        inline-flex;
	align-items:    center;
	gap:            .35rem;
	flex:           0 1 auto;
	min-height:     40px;
	padding:        .5rem .9rem;
	background:     var(--nir-bg);
	border:         1.5px solid var(--nir-border);
	border-radius:  999px;
	color:          var(--nir-text-muted);
	font-size:      .82rem;
	font-weight:    500;
	white-space:    nowrap;
	transition:     background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.nir-wrapper .nir-tab.active {
	background:    var(--nir-accent);
	border-color:  var(--nir-accent);
	color:         #fff;
	font-weight:   600;
	box-shadow:    0 2px 8px rgba(37,99,235,.3);
}

.nir-wrapper .nir-tab-icon { font-size: .95rem; line-height: 1; }

.nir-wrapper .nir-tab-panel        { display: none; }
.nir-wrapper .nir-tab-panel.active { display: block; animation: nirFade .25s ease; }


/* ═══════════════════════════════════════════════════════════════════
   SEARCH BAR
   ═══════════════════════════════════════════════════════════════════ */

.nir-wrapper .nir-search-bar { padding: .9rem 1rem .5rem; }

/* font-size: 16px is REQUIRED to stop iOS auto-zoom on focus
   (the "shaking" effect on mobile). Do not change. */
.nir-wrapper #nir-bank-search {
	width:         100%;
	padding:       .7rem 1rem;
	border:        1px solid var(--nir-border);
	border-radius: 999px;
	background:    var(--nir-surface);
	color:         var(--nir-text);
	font-size:     16px;
	font-family:   var(--nir-font);
	outline:       none;
	transition:    border-color .15s, box-shadow .15s;
}
.nir-wrapper #nir-bank-search:focus {
	border-color: var(--nir-accent);
	box-shadow:   0 0 0 3px rgba(37,99,235,.15);
}
.nir-wrapper #nir-bank-search::placeholder { color: var(--nir-text-light); }


/* ═══════════════════════════════════════════════════════════════════
   ACCORDION
   ═══════════════════════════════════════════════════════════════════ */

.nir-wrapper .nir-accordion {
	padding:        .65rem .75rem;
	display:        flex;
	flex-direction: column;
	gap:            .55rem;
}

.nir-wrapper .nir-accordion-item {
	border:                  1px solid var(--nir-border);
	border-radius:           var(--nir-radius-sm);
	background:              var(--nir-surface);
	overflow:                hidden;
	/* Render only when in (or near) viewport — saves paint work on
	   the big 20-bank list. Item shrinks to 80px placeholder when off-screen. */
	content-visibility:      auto;
	contain-intrinsic-size:  0 80px;
}

.nir-wrapper .nir-accordion-header {
	display:     flex;
	align-items: center;
	gap:         .65rem;
	width:       100%;
	min-height:  64px;
	padding:     .8rem 1rem;
	background:  none;
	border:      none;
	text-align:  left;
	transition:  background .15s;
}
.nir-wrapper .nir-accordion-header[aria-expanded="true"] { background: var(--nir-surface-2); }

.nir-wrapper .nir-bank-identity {
	display:     flex;
	align-items: center;
	gap:         .65rem;
	flex:        1;
	min-width:   0;
}

.nir-wrapper .nir-bank-logo-wrap {
	flex-shrink:     0;
	width:           44px;
	height:          44px;
	border-radius:   10px;
	background:      var(--nir-bg);
	border:          1px solid var(--nir-border);
	display:         flex;
	align-items:     center;
	justify-content: center;
	overflow:        hidden;
}

.nir-wrapper .nir-bank-logo {
	width:      38px;
	height:     38px;
	object-fit: contain;
}

.nir-wrapper .nir-logo-text-fallback {
	display:         none;
	width:           100%;
	height:          100%;
	align-items:     center;
	justify-content: center;
	font-size:       .68rem;
	font-weight:     700;
	color:           var(--nir-accent);
	background:      var(--nir-accent-light);
	border-radius:   8px;
	letter-spacing:  .5px;
}

.nir-wrapper .nir-bank-name-wrap {
	min-width:      0;
	display:        flex;
	flex-direction: column;
}

.nir-wrapper .nir-bank-full-name {
	font-size:     .9rem;
	font-weight:   600;
	color:         var(--nir-text);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.nir-wrapper .nir-bank-short {
	font-size: .73rem;
	color:     var(--nir-text-muted);
}

.nir-wrapper .nir-bank-rate-peek {
	display:     flex;
	gap:         .85rem;
	flex-shrink: 0;
}
.nir-wrapper .nir-peek-item   { display: flex; flex-direction: column; align-items: flex-end; }
.nir-wrapper .nir-peek-label  { font-size: .63rem; color: var(--nir-text-light); text-transform: uppercase; letter-spacing: .5px; }
.nir-wrapper .nir-peek-rate   { font-size: .82rem; font-weight: 700; color: var(--nir-accent); white-space: nowrap; }

.nir-wrapper .nir-chevron {
	font-size:   1.25rem;
	color:       var(--nir-text-muted);
	flex-shrink: 0;
	transition:  transform .25s;
	line-height: 1;
	margin-left: auto;
}
.nir-wrapper .nir-accordion-header[aria-expanded="true"] .nir-chevron { transform: rotate(180deg); }

.nir-wrapper .nir-accordion-body {
	display:    none;
	border-top: 1px solid var(--nir-border);
}
.nir-wrapper .nir-accordion-body.open { display: block; }

/* Inner type tabs — wrappable pill chips */
.nir-wrapper .nir-inner-tabs {
	display:       flex;
	flex-wrap:     wrap;
	gap:           .4rem;
	padding:       .65rem .85rem;
	background:    var(--nir-bg);
	border-bottom: 1px solid var(--nir-border);
}

.nir-wrapper .nir-inner-tab {
	flex:          0 1 auto;
	min-height:    36px;
	padding:       .4rem .85rem;
	border:        1px solid var(--nir-border);
	border-radius: 999px;
	background:    none;
	color:         var(--nir-text-muted);
	font-size:     .77rem;
	font-weight:   500;
	white-space:   nowrap;
	transition:    background .15s, border-color .15s, color .15s;
}
.nir-wrapper .nir-inner-tab.active {
	background:   var(--nir-accent);
	border-color: var(--nir-accent);
	color:        #fff;
}

.nir-wrapper .nir-inner-panel        { display: none; padding: .8rem .85rem .9rem; }
.nir-wrapper .nir-inner-panel.active { display: block; animation: nirFade .2s ease; }


/* ═══════════════════════════════════════════════════════════════════
   RANKED LIST
   ═══════════════════════════════════════════════════════════════════ */

.nir-wrapper .nir-ranked-wrap { padding: 1rem; }

.nir-wrapper .nir-ranked-head { margin-bottom: 1rem; }

.nir-wrapper .nir-ranked-title {
	font-size:   1.1rem;
	font-weight: 700;
	color:       var(--nir-text);
	margin:      0 0 .3rem;
}
.nir-wrapper .nir-ranked-hint {
	font-size: .78rem;
	color:     var(--nir-text-muted);
	margin:    0;
	line-height: 1.5;
}

.nir-wrapper .nir-ranked-list {
	display:        flex;
	flex-direction: column;
	gap:            .5rem;
}

.nir-wrapper .nir-ranked-row {
	display:               grid;
	grid-template-columns: 2.4rem 1fr auto;
	align-items:           center;
	column-gap:            .7rem;
	row-gap:               .15rem;
	padding:               .8rem .9rem;
	background:            var(--nir-surface);
	border:                1px solid var(--nir-border);
	border-radius:         var(--nir-radius-sm);
	transition:            box-shadow .15s, border-color .15s;
}

.nir-wrapper .nir-ranked-row.nir-medal-gold   { border-left: 3px solid var(--nir-gold);   background: rgba(245,158,11,.06); }
.nir-wrapper .nir-ranked-row.nir-medal-silver { border-left: 3px solid var(--nir-silver); background: rgba(148,163,184,.06); }
.nir-wrapper .nir-ranked-row.nir-medal-bronze { border-left: 3px solid var(--nir-bronze); background: rgba(205,124,77,.06); }

.nir-wrapper[data-theme="dark"] .nir-ranked-row.nir-medal-gold   { background: rgba(245,158,11,.10); }
.nir-wrapper[data-theme="dark"] .nir-ranked-row.nir-medal-silver { background: rgba(148,163,184,.10); }
.nir-wrapper[data-theme="dark"] .nir-ranked-row.nir-medal-bronze { background: rgba(205,124,77,.10); }

.nir-wrapper .nir-ranked-num {
	width:           2rem;
	height:          2rem;
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       .8rem;
	font-weight:     700;
	background:      var(--nir-surface-2);
	color:           var(--nir-text-muted);
	flex-shrink:     0;
	grid-column:     1;
	grid-row:        1 / span 2;
}
.nir-wrapper .nir-ranked-num.nir-medal-gold   { background: var(--nir-gold);   color: #fff; }
.nir-wrapper .nir-ranked-num.nir-medal-silver { background: var(--nir-silver); color: #fff; }
.nir-wrapper .nir-ranked-num.nir-medal-bronze { background: var(--nir-bronze); color: #fff; }

.nir-wrapper .nir-ranked-bank-cell {
	display:     flex;
	align-items: center;
	gap:         .55rem;
	min-width:   0;
	grid-column: 2;
	grid-row:    1;
}
.nir-wrapper .nir-ranked-bank-cell img {
	width:        30px;
	height:       30px;
	object-fit:   contain;
	border-radius:7px;
	border:       1px solid var(--nir-border);
	background:   var(--nir-bg);
	flex-shrink:  0;
}

.nir-wrapper .nir-ranked-bank-name {
	min-width:      0;
	display:        flex;
	flex-direction: column;
}
.nir-wrapper .nir-rb-short {
	font-size:     .87rem;
	font-weight:   600;
	color:         var(--nir-text);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}
.nir-wrapper .nir-rb-full {
	font-size:     .68rem;
	color:         var(--nir-text-muted);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
	display:       none;
}

.nir-wrapper .nir-ranked-scheme {
	font-size:     .75rem;
	color:         var(--nir-text-muted);
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
	grid-column:   2;
	grid-row:      2;
}

.nir-wrapper .nir-ranked-rate-cell {
	display:        flex;
	flex-direction: column;
	align-items:    flex-end;
	flex-shrink:    0;
	grid-column:    3;
	grid-row:       1 / span 2;
}
.nir-wrapper .nir-rr-rate {
	font-size:      1.05rem;
	font-weight:    700;
	color:          var(--nir-accent);
	white-space:    nowrap;
	letter-spacing: -.01em;
}
.nir-wrapper .nir-rr-upd {
	font-size:   .67rem;
	color:       var(--nir-text-light);
	white-space: nowrap;
	margin-top:  .1rem;
}


/* ═══════════════════════════════════════════════════════════════════
   FD-ONLY SHORTCODE  ([nir_fixed_deposits])
   ═══════════════════════════════════════════════════════════════════ */

.nir-wrapper .nir-fd-stat-row {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   .55rem;
	padding:               .85rem 1rem .25rem;
}

.nir-wrapper .nir-fd-stat {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	padding:        .7rem .85rem;
	background:     var(--nir-surface);
	border:         1px solid var(--nir-border);
	border-radius:  var(--nir-radius-sm);
	min-width:      0;
}
.nir-wrapper .nir-fd-stat-label {
	font-size:      .65rem;
	font-weight:    700;
	color:          var(--nir-text-muted);
	text-transform: uppercase;
	letter-spacing: .5px;
}
.nir-wrapper .nir-fd-stat-value {
	font-size:      1.4rem;
	font-weight:    700;
	color:          var(--nir-accent);
	letter-spacing: -.02em;
	line-height:    1.1;
	margin-top:     .15rem;
}
.nir-wrapper .nir-fd-stat:first-child .nir-fd-stat-value { color: var(--nir-green); }
.nir-wrapper .nir-fd-stat-hint {
	font-size:  .68rem;
	color:      var(--nir-text-muted);
	margin-top: .15rem;
	white-space:nowrap;
	overflow:   hidden;
	text-overflow: ellipsis;
	max-width:  100%;
}

/* Best-rate badge inside FD accordion header */
.nir-wrapper .nir-fd-best {
	display:        flex;
	flex-direction: column;
	align-items:    flex-end;
	flex-shrink:    0;
	padding:        0 .25rem 0 .35rem;
}
.nir-wrapper .nir-fd-best-label {
	font-size:      .6rem;
	font-weight:    700;
	color:          var(--nir-text-muted);
	text-transform: uppercase;
	letter-spacing: .4px;
}
.nir-wrapper .nir-fd-best-value {
	font-size:   1rem;
	font-weight: 700;
	color:       var(--nir-green);
	white-space: nowrap;
	letter-spacing: -.01em;
}

/* Medal accents on the top-3 FD banks */
.nir-wrapper .nir-fd-item.nir-medal-gold   { border-left: 3px solid var(--nir-gold); }
.nir-wrapper .nir-fd-item.nir-medal-silver { border-left: 3px solid var(--nir-silver); }
.nir-wrapper .nir-fd-item.nir-medal-bronze { border-left: 3px solid var(--nir-bronze); }

/* "★ Best" tag next to the best scheme name within a bank */
.nir-wrapper .nir-fd-best-tag {
	display:        inline-block;
	margin-left:    .4rem;
	padding:        .1rem .45rem;
	background:     var(--nir-gold);
	color:          #fff;
	border-radius:  999px;
	font-size:      .62rem;
	font-weight:    700;
	letter-spacing: .3px;
	vertical-align: middle;
}

/* Tighter FD stats on very small phones */
@media (max-width: 359px) {
	.nir-wrapper .nir-fd-stat-row { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════
   COMPARE PANEL
   ═══════════════════════════════════════════════════════════════════ */

.nir-wrapper .nir-compare-intro { padding: .9rem 1rem .5rem; }
.nir-wrapper .nir-compare-intro p { font-size: .85rem; color: var(--nir-text-muted); margin: 0; }

/* Mobile-first: selectors stack vertically. Desktop gets side-by-side. */
.nir-wrapper .nir-compare-selectors {
	display:        flex;
	flex-direction: column;
	gap:            .65rem;
	padding:        .5rem 1rem 1rem;
}

.nir-wrapper .nir-compare-col {
	min-width: 0;
}
.nir-wrapper .nir-compare-col label {
	display:        block;
	font-size:      .73rem;
	font-weight:    600;
	color:          var(--nir-text-muted);
	margin-bottom:  .3rem;
	text-transform: uppercase;
	letter-spacing: .5px;
}

/* font-size: 16px prevents iOS auto-zoom on focus */
.nir-wrapper .nir-compare-select {
	display:       block;
	width:         100%;
	max-width:     100%;
	min-width:     0;
	min-height:    44px;
	padding:       .55rem .75rem;
	border:        1px solid var(--nir-border);
	border-radius: var(--nir-radius-xs);
	background:    var(--nir-surface);
	color:         var(--nir-text);
	font-size:     16px;
	font-family:   var(--nir-font);
	outline:       none;
	cursor:        pointer;
	box-sizing:    border-box;
}
.nir-wrapper .nir-compare-select:focus {
	border-color: var(--nir-accent);
	box-shadow:   0 0 0 3px rgba(37,99,235,.12);
}

.nir-wrapper .nir-compare-vs {
	font-weight: 700;
	color:       var(--nir-text-muted);
	font-size:   .8rem;
	text-align:  center;
	letter-spacing: 1px;
	padding:     .15rem 0;
	opacity:     .6;
}

/* Tablet+: optional side-by-side compare selectors */
@media (min-width: 640px) {
	.nir-wrapper .nir-compare-selectors {
		display:               grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items:           end;
		gap:                   .75rem;
	}
	.nir-wrapper .nir-compare-vs {
		text-align:  left;
		padding:     0 .1rem .55rem;
		align-self:  end;
	}
}

.nir-wrapper #nir-compare-result {
	padding:    0 1rem 1rem;
}

/* ── Compare cards (replaces the old wide table) ───────────────────── */
.nir-wrapper .nir-cmp-empty {
	color:      var(--nir-text-muted);
	text-align: center;
	padding:    1.5rem .5rem;
	font-size:  .85rem;
	margin:     0;
}

.nir-wrapper .nir-cmp-cards {
	display:        flex;
	flex-direction: column;
	gap:            .55rem;
}

.nir-wrapper .nir-cmp-section {
	margin:         .85rem 0 .15rem;
	font-size:      .72rem;
	font-weight:    700;
	color:          var(--nir-text-muted);
	text-transform: uppercase;
	letter-spacing: .5px;
}
.nir-wrapper .nir-cmp-section:first-child { margin-top: .25rem; }

.nir-wrapper .nir-cmp-card {
	background:    var(--nir-surface);
	border:        1px solid var(--nir-border);
	border-radius: var(--nir-radius-sm);
	padding:       .7rem .85rem .8rem;
}

.nir-wrapper .nir-cmp-scheme {
	font-size:     .85rem;
	font-weight:   600;
	color:         var(--nir-text);
	margin-bottom: .55rem;
	line-height:   1.35;
	word-break:    break-word;
}

.nir-wrapper .nir-cmp-banks {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   .5rem;
}

.nir-wrapper .nir-cmp-bank {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	padding:         .55rem .4rem;
	background:      var(--nir-bg);
	border:          1.5px solid var(--nir-border);
	border-radius:   var(--nir-radius-xs);
	min-width:       0;
	transition:      border-color .15s, background .15s;
}

.nir-wrapper .nir-cmp-bank.nir-cmp-better {
	border-color: var(--nir-green);
	background:   var(--nir-green-bg);
}

.nir-wrapper .nir-cmp-bank-name {
	font-size:     .72rem;
	font-weight:   600;
	color:         var(--nir-text-muted);
	margin-bottom: .25rem;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
	max-width:     100%;
	display:       flex;
	align-items:   center;
	gap:           .25rem;
}

.nir-wrapper .nir-cmp-better .nir-cmp-bank-name { color: var(--nir-green); }

.nir-wrapper .nir-cmp-trophy {
	color:     var(--nir-gold);
	font-size: .8rem;
}

.nir-wrapper .nir-cmp-rate {
	font-size:    1.1rem;
	font-weight:  700;
	color:        var(--nir-accent);
	white-space:  nowrap;
	letter-spacing: -.01em;
}
.nir-wrapper .nir-cmp-better .nir-cmp-rate { color: var(--nir-green); }
.nir-wrapper .nir-cmp-rate small {
	font-size:   .65em;
	font-weight: 600;
	margin-left: .05rem;
}
.nir-wrapper .nir-cmp-na {
	color:       var(--nir-text-light);
	font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════════════
   HOVER EFFECTS — only on devices with real hover (desktop)
   This is THE KEY FIX for mobile "shaking": touch devices fire :hover
   on tap and the transform stays, making elements appear to jiggle.
   By gating hover under (hover: hover), this never fires on touch.
   ═══════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {

	.nir-wrapper .nir-rate-card:hover {
		transform:    translateY(-1px);
		box-shadow:   var(--nir-shadow-md);
		border-color: var(--nir-accent);
	}

	.nir-wrapper .nir-ranked-row:hover {
		transform:    translateY(-1px);
		box-shadow:   var(--nir-shadow-md);
		border-color: var(--nir-accent);
	}

	.nir-wrapper .nir-sb-tab:not(.active):hover {
		border-color: var(--nir-accent);
		color:        var(--nir-accent);
		background:   var(--nir-accent-light);
	}

	.nir-wrapper .nir-tab:not(.active):hover { color: var(--nir-accent); }

	.nir-wrapper .nir-inner-tab:not(.active):hover {
		border-color: var(--nir-accent);
		color:        var(--nir-accent);
	}

	.nir-wrapper .nir-accordion-header:hover { background: var(--nir-surface-2); }

	.nir-wrapper .nir-hero-link:hover { color: #fff; border-bottom-color: #fff; }

	.nir-wrapper .nir-official-note a:hover,
	.nir-wrapper .nir-bank-site-link a:hover,
	.nir-wrapper .nir-footer-note a:hover { text-decoration: underline; }
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

/* Show full bank name on slightly bigger screens */
@media (min-width: 480px) {
	.nir-wrapper .nir-rb-full { display: block; }
}

/* Tablets and up — restore the horizontal header layout */
@media (min-width: 640px) {
	.nir-wrapper .nir-header,
	.nir-wrapper .nir-hub-top        {
		flex-direction:  row;
		align-items:     center;
		justify-content: space-between;
		gap:             1rem;
		padding:         1.4rem 1.5rem 1.15rem;
	}
	.nir-wrapper .nir-header-text,
	.nir-wrapper .nir-hub-top-inner   { width: auto; flex: 1; }
	.nir-wrapper .nir-main-title         { font-size: 1.5rem; }
	.nir-wrapper .nir-hero               { padding: 2rem 1.75rem; gap: 1.25rem; }
	.nir-wrapper .nir-hero-logo-wrap     { width: 80px; height: 80px; border-radius: 18px; }
	.nir-wrapper .nir-sb-tab             { min-width: 96px; }
	.nir-wrapper .nir-accordion          { padding: .85rem; }
	.nir-wrapper .nir-accordion-header   { padding: .95rem 1.25rem; }
	.nir-wrapper .nir-ranked-wrap        { padding: 1.25rem; }
	.nir-wrapper .nir-rate-card          { padding: 1rem 1.15rem; }
}

/* Very small phones */
@media (max-width: 419px) {
	.nir-wrapper                     { border-radius: 10px; }
	.nir-wrapper .nir-bank-rate-peek { display: none; }
	.nir-wrapper .nir-hero           { padding: 1rem .85rem; gap: .65rem; }
	.nir-wrapper .nir-hero-logo-wrap { width: 52px; height: 52px; border-radius: 12px; }
	.nir-wrapper .nir-hero-meta      { font-size: .73rem; }
	.nir-wrapper .nir-header,
	.nir-wrapper .nir-hub-top          { padding: 1rem .85rem .9rem; }
	.nir-wrapper .nir-subtitle       { font-size: .76rem; }
	.nir-wrapper .nir-nrb-label      { font-size: .68rem; padding: .22rem .6rem; }
	.nir-wrapper .nir-search-bar     { padding: .75rem .85rem .4rem; }
	.nir-wrapper .nir-accordion      { padding: .55rem .55rem; gap: .45rem; }
	.nir-wrapper .nir-accordion-header { padding: .7rem .85rem; }
	.nir-wrapper .nir-bank-full-name { font-size: .82rem; }
	.nir-wrapper .nir-bank-short     { font-size: .68rem; }
	.nir-wrapper .nir-rate-card      { padding: .65rem .8rem; }
	.nir-wrapper .nir-rc-name        { font-size: .82rem; }
	.nir-wrapper .nir-rc-rate        { font-size: .95rem; }
	.nir-wrapper .nir-ranked-row     { padding: .65rem .75rem; column-gap: .5rem; }
	.nir-wrapper .nir-rb-short       { font-size: .82rem; }
	.nir-wrapper .nir-rr-rate        { font-size: 1rem; }
	/* compare selectors already stack on mobile via base styles */
}


/* ═══════════════════════════════════════════════════════════════════
   OVERFLOW CONTAINMENT  (prevents the "shaking" on mobile by ensuring
   nothing inside the wrapper can escape it horizontally)
   ═══════════════════════════════════════════════════════════════════ */
.nir-wrapper,
.nir-wrapper .nir-accordion-body,
.nir-wrapper .nir-sb-panel,
.nir-wrapper .nir-tab-panel,
.nir-wrapper .nir-inner-panel {
	overflow-x: hidden;
}

/* Only the compare result table needs to scroll horizontally — every
   tab strip is now wrap-based, so no other element is allowed to scroll. */
.nir-wrapper #nir-compare-result {
	overflow-x: auto;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.nir-wrapper *,
	.nir-wrapper *::before,
	.nir-wrapper *::after {
		animation-duration:  .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}