/* ════════════════════════════════════════════════════════════
   CibilBazaar — design polish layer (loaded after style.css)
   Goals: one icon language (SVG, no emoji), one accent colour (brand blue),
   consistent spacing, no clipped text, proper focus states, reduced-motion support.
   ════════════════════════════════════════════════════════════ */

/* ── Icons ── */
.cb-ico { display: inline-block; vertical-align: -0.22em; flex-shrink: 0; }
.loan-icon, .feat-ic, .ll-icon, .ll-feat-card .ic, .lp-hub-ico, .hbc-ph { color: var(--blue); }
.loan-icon svg, .feat-ic svg { display: block; }
.ci-icon svg { display: block; }
.hbc-ph { display: flex; align-items: center; justify-content: center; }
.lp-hub-ico { display: inline-flex; width: 36px; height: 36px; border-radius: 10px; background: var(--blue-pale); align-items: center; justify-content: center; margin-right: 10px; vertical-align: middle; }
.ll-feat-card .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--blue-pale); display: flex; align-items: center; justify-content: center; font-size: 0; }
.loan-landing .ll-icon { font-size: 0; }
.btn-green .cb-ico, .btn-blue .cb-ico, .btn-white .cb-ico { margin-right: 2px; }
.zero-fee-badge .cb-ico { vertical-align: -0.18em; margin-right: 2px; }

/* ── Accessibility ── */
.cb-skip { position: absolute; left: 12px; top: -60px; z-index: 10000; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; transition: top .15s; }
.cb-skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.faq-q:focus-visible { outline-offset: -2px; border-radius: 12px; }
.cb-main { display: block; }
/* Motion: the original theme keeps the bank-logo marquee running even when the OS asks for reduced motion (see style.css); nothing here overrides that. */

/* ── Breadcrumb bar / page head (printed under the fixed navbar) ── */
body.cb-has-head { --cb-top: 0px; }
.cb-pagehead { margin-top: var(--cb-nav-h, 76px); background: #fff; border-bottom: 1px solid var(--border, #e2e8f0); }
.cb-pagehead-in { max-width: 1200px; margin: 0 auto; padding: 12px 24px; }
.cb-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; list-style: none; margin: 0; padding: 0; font-size: .82rem; color: var(--muted, #64748b); }
.cb-crumbs li { display: inline-flex; align-items: center; }
.cb-crumbs li + li::before { content: ""; width: 5px; height: 5px; margin: 0 10px; border-top: 1.5px solid #94a3b8; border-right: 1.5px solid #94a3b8; transform: rotate(45deg); }
.cb-crumbs a { color: var(--muted, #64748b); text-decoration: none; }
.cb-crumbs a:hover { color: var(--blue); text-decoration: underline; }
.cb-crumbs [aria-current] span { color: var(--text, #0f172a); font-weight: 600; }
.cb-pagehead.has-title .cb-pagehead-in { padding: 14px 24px 22px; }
.cb-pagehead-title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; line-height: 1.2; color: var(--text, #0f172a); margin: 14px 0 6px; letter-spacing: -.01em; }
.cb-pagehead-lead { max-width: 760px; color: var(--muted, #64748b); font-size: 1rem; line-height: 1.6; margin: 0; }
@media (max-width: 600px) { .cb-pagehead-in { padding: 10px 16px; } .cb-pagehead.has-title .cb-pagehead-in { padding: 12px 16px 18px; } }

/* ── Headings ── */
h1, h2 { text-wrap: balance; }
.sec-title { letter-spacing: -.01em; }

/* ── Homepage hero offer cards ──
 * Same look as the original on desktop (container 500px × 38% = 190px cards, overlapping).
 * Card width is a % of the art box, so the overlap stays the same at EVERY screen width —
 * the old fixed 172px cards stopped overlapping and "spread out" between ~520px and ~980px. */
.hero2-art .h2-card { width: 38%; }
.hero2-art .h2-c1 { left: 0; }
.hero2-art .h2-c2 { left: 31%; margin-left: 0; }
.hero2-art .h2-c3 { right: 0; }

.h2-emoji svg { display: block; width: 1em; height: 1em; }
.h2-go { display: inline-flex; align-items: center; gap: 6px; }
.hero2-chips a { display: inline-flex; align-items: center; gap: 8px; }
.hero2-chips a .cb-ico { color: var(--blue); }

/* ── Loan cards: whole card is a real link (crawlable), button is its own link ── */
.loan-card { display: flex; flex-direction: column; }
.loan-card-link { color: inherit; text-decoration: none; }
.loan-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.loan-card .loan-meta { margin-top: auto; }
.loan-card .loan-apply-btn { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin-top: 16px; align-self: flex-start; }
.loan-card:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(16,96,241,.15); }
.loan-badge { font-weight: 700; }

/* ── Loan landing / hub pages ── */
.loan-landing section.ll-hero { padding-top: 44px; }
.loan-landing section.lp-hub-hero { padding-top: 44px; }
.loan-landing .ll-feat-card h5 { font-size: 1.05rem; }
.lp-hub-cat > h2 { display: flex; align-items: center; }

/* ── Footer ── */
.fc-line { display: flex; align-items: center; gap: 10px; }
.fc-line .cb-ico { color: #558ef6; }
.footer-popular { max-width: 1200px; margin: 0 auto; padding: 22px 24px 4px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: .82rem; }
.footer-popular strong { color: #fff; font-weight: 700; }
.footer-popular a { color: rgba(255,255,255,.6); text-decoration: none; }
.footer-popular a:hover { color: #558ef6; text-decoration: underline; }
.social-btn:focus-visible { outline-color: #fff; }

/* ── Login modal heading (was an <h2>; now a div so it is not the first heading of every page) ── */
.login-modal-heading { font-size: 1.4rem; font-weight: 800; color: var(--text, #0f172a); text-align: center; margin: 0 0 6px; }

/* ── 404 ── */
.cb-404 { padding: calc(var(--cb-top, 76px) + 56px) 24px 80px; background: linear-gradient(180deg, var(--blue-pale) 0%, #fff 70%); text-align: center; }
.cb-404-in { max-width: 820px; margin: 0 auto; }
.cb-404-code { font-size: 4.5rem; font-weight: 900; line-height: 1; color: var(--blue); margin: 0 0 8px; letter-spacing: -.03em; }
.cb-404 h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800; color: var(--text); margin: 0 0 10px; }
.cb-404-sub { color: var(--muted); margin: 0 auto 26px; max-width: 520px; line-height: 1.6; }
.cb-404-search { display: flex; gap: 10px; max-width: 520px; margin: 0 auto 36px; }
.cb-404-search input { flex: 1; min-width: 0; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: 10px; font: inherit; }
.cb-404-search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(16,96,241,.15); }
.cb-404-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; margin-bottom: 32px; }
.cb-404-grid > div { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px; }
.cb-404-grid h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .6px; color: var(--blue); margin: 0 0 10px; }
.cb-404-grid ul { list-style: none; margin: 0; padding: 0; }
.cb-404-grid a { display: block; padding: 6px 0; color: var(--text2); text-decoration: none; font-size: .95rem; }
.cb-404-grid a:hover { color: var(--blue); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
@media (max-width: 640px) { .cb-404-grid { grid-template-columns: 1fr; } .cb-404-search { flex-direction: column; } }

/* ── Blog ── */
body.cb-has-head .blog-single { padding-top: 8px; }
body.cb-has-head .blog-wrap section.bl-hero { padding-top: 40px; }
.bl-cats { max-width: 1200px; margin: 0 auto; padding: 8px 24px 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.bl-cats a { padding: 8px 16px; border-radius: 100px; border: 1px solid var(--border); background: #fff; color: var(--text2); font-size: .85rem; font-weight: 600; text-decoration: none; transition: all .15s; }
.bl-cats a:hover { border-color: var(--blue); color: var(--blue); }
.bl-cats a.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.blog-wrap .bl-card-img { aspect-ratio: 1200 / 630; object-fit: cover; }
.home-blog-card img { aspect-ratio: 1200 / 630; object-fit: cover; }
.blog-single .bs-hero-img img { aspect-ratio: 1200 / 630; object-fit: cover; }
.blog-single .bs-related-card img { aspect-ratio: 1200 / 630; object-fit: cover; }
.cb-takeaways { background: var(--blue-pale); border: 1px solid #cfe0ff; border-radius: 12px; padding: 16px 20px; margin: 0 0 26px; }
.cb-takeaways strong { display: block; color: var(--blue); font-size: .8rem; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.cb-takeaways ul { margin: 0 !important; padding-left: 20px; gap: 4px !important; }
.cb-takeaways li { color: var(--text); font-size: .98rem; line-height: 1.6; }
.blog-single .bs-body li h3 { display: inline; font-size: 1.08rem; }
.blog-single .bs-body ol > li > h3 { display: block; margin: 0 0 4px; }
.cb-disclaimer { font-size: .85rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: 18px; margin-top: 34px; }
.blog-single .bs-hero-img img, .blog-single .bs-related-card img, .blog-wrap .bl-card-img { height: auto; }

/* ── Post FAQ block ── */
.blog-single .bs-body { padding-bottom: 8px; }
.cb-faq { max-width: 740px; margin: 28px auto 60px; padding: 0 24px; }
.cb-faq h2 { font-size: 1.35rem; font-weight: 800; color: var(--text); margin: 0 0 14px; }
.cb-faq details { border: 1px solid var(--border); border-radius: 12px; background: #fff; margin-bottom: 10px; }
.cb-faq summary { cursor: pointer; padding: 15px 44px 15px 18px; font-weight: 600; font-size: 1rem; color: var(--text); list-style: none; position: relative; }
.cb-faq summary::-webkit-details-marker { display: none; }
.cb-faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.cb-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.cb-faq details[open] summary { color: var(--blue); }
.cb-faq details p { margin: 0; padding: 0 18px 16px; color: var(--text2); line-height: 1.7; font-size: .98rem; }
.cb-faq summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 12px; }
.blog-single .bs-related .bs-related-card img { aspect-ratio: 1200 / 630; height: auto; }