/* =====================================================================
   CLAUDE NEW IMPL DATED ON 02/11/2026 : new file
   View Bill entry page (viewBillMain.jsp, /viewBillDetailsMain)
   Scope: body.viewBillMain only. Styles the search card and the intro
   column between the shared header and footer; it never touches the
   shared stylesheets. Every element id / hook class used by the page
   script is unchanged (ltscno, mobile, Billans, Billreset, Billsignin,
   captchaCanvas, scnoDiv, mobOtpDiv, listdata, .mainDiv,
   .PayBillButtomNote, .ServiceNumber*, .MobileNumber*, .AadharNumber*).
   ===================================================================== */

body.viewBillMain {
  --vbm-brand: #1f6cf0;
  --vbm-brand-dark: #1553c4;
  --vbm-brand-soft: #e8f1ff;
  --vbm-navy: #14213d;
  --vbm-ink: #1f2a44;
  --vbm-muted: #5c6b84;
  --vbm-line: #dbe3ef;
  --vbm-card: #ffffff;
  --vbm-sky-top: #dcecfb;
  --vbm-sky-bottom: #f5faff;
  --vbm-sun: #f6b40e;
  --vbm-green: #22b35a;
  --vbm-green-soft: #e3f7ea;
  --vbm-orange: #f59e0b;
  --vbm-orange-soft: #fff1dc;
  --vbm-radius: 16px;
  --vbm-font: "Mulish", "Segoe UI", Arial, sans-serif;
  --vbm-top: 100px; /* height of the fixed header stack above the page; the page script sets the measured value */
}

/* ---- page wrapper: no gap under the navigation, scene is full-bleed */
body.viewBillMain .step-home-page-about.inner-pages {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0;
  padding-top: var(--vbm-top); /* the shared header is fixed (165px on desktop while the page starts at 65px); the page script measures the real overlap */
}
body.viewBillMain #listdata:not(:empty) {
  padding: 24px 0 40px;
  background: #fff;
}

/* ---- scenic background: the supplied scenery image (view-bill-bg.jpg, 16:9, no text in it).
   The hero fills the window width and the height left under the fixed header; the picture covers
   it (cropped, never distorted). The intro text sits over the sky on the left, the card on the right. */
body.viewBillMain .vbm-scene {
  position: relative;
  font-family: var(--vbm-font);
  color: var(--vbm-ink);
  background: #2f7fe8 url("../images/viewbill/view-bill-bg.jpg?v=1") no-repeat center bottom / cover; /* CLAUDE CHANGES DATED ON 05/11/2026 : anchored to the bottom (was 70%) so the picture stays put when the hero grows to the window height */
  /* CLAUDE CHANGES DATED ON 05/11/2026 : START - these four lines had slipped into the .vbm-tall rule below, so on a normal load the hero
     only took its content height and the footer's blue top showed under it; the hero again fills the window height under the header */
  width: 100%;
  min-height: calc(100vh - var(--vbm-hdr, var(--vbm-top))); /* --vbm-hdr = measured bottom of the fixed header, so the hero ends exactly at the bottom of the window and the footer only appears on scroll */
  display: flex;
  flex-direction: column;
  /* CLAUDE CHANGES DATED ON 05/11/2026 : END */
}
body.viewBillMain .vbm-scene.vbm-tall {
  /* set by the page script when the hero is taller than the picture fitted to its width: the picture keeps
     its width and the wave colour fills below it */
  background-size: 100% auto;
  background-position: center top;
}
body.viewBillMain .vbm-bg { display: none; }
body.viewBillMain .vbm-wrap {
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 8.2% 31% 3% minmax(0, 650px) 1fr; /* intro | gap | card (CLAUDE CHANGES DATED ON 02/11/2026 : card column sized to the 650px card) */
  align-items: start; /* CLAUDE CHANGES DATED ON 05/11/2026 : was center; the card and intro stay at the top of the hero when the hero is taller than the card */
  padding: 24px 0;
}
body.viewBillMain .vbm-intro {
  grid-column: 2;
  align-self: stretch;
  background: transparent; /* CLAUDE CHANGES DATED ON 02/11/2026 : no white panel behind the intro text */
  border-radius: 20px;
  padding: 4% 7% 6%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* the text sits in the upper, clear part of the sky */
}
body.viewBillMain .vbm-card {
  grid-column: 4;
  align-self: start; /* CLAUDE CHANGES DATED ON 05/11/2026 : was center; the card keeps its place at the top of the hero */
  margin-top: 28px; /* CLAUDE CHANGES DATED ON 05/11/2026 : a little more room between the navigation bar and the card */
  justify-self: start;
  width: 100%;   /* CLAUDE CHANGES DATED ON 02/11/2026 : 650 x 900 card as tested by the user in DevTools; the grid column is capped at 650px, so the card shrinks only when the window has no room for it */
  max-width: 650px;
  height: auto;  /* CLAUDE CHANGES DATED ON 05/11/2026 : was 900px; the card now ends at its content so the empty band under the Need Help box is gone (hero background unchanged) */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---- intro column */
body.viewBillMain .vbm-eyebrow {
  display: inline-block;
  align-self: flex-start; /* the intro is a flex column; keep the pill as wide as its text */
  background: var(--vbm-brand-soft);
  color: var(--vbm-brand);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 8px;
  margin: 0 0 18px;
}
body.viewBillMain .vbm-title {
  font-family: var(--vbm-font);
  font-size: clamp(1.9rem, 3.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  color: var(--vbm-navy);
  margin: 0 0 12px;
  letter-spacing: -.01em;
}
body.viewBillMain .vbm-title span { color: var(--vbm-brand); }
body.viewBillMain .vbm-tagline {
  font-size: 1.15rem;
  color: var(--vbm-muted);
  margin: 0 0 34px;
  font-weight: 500;
}
body.viewBillMain .vbm-tagline b {
  font-weight: 700;
  padding: 0 8px;
  color: #9aa7bd;
}
body.viewBillMain .vbm-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}
body.viewBillMain .vbm-features li {
  display: flex;
  align-items: center;
  gap: 18px;
}
body.viewBillMain .vbm-feature-icon {
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  background: var(--vbm-brand-soft);
  color: var(--vbm-brand);
}
body.viewBillMain .vbm-feature-icon.tone-green { background: var(--vbm-green-soft); color: var(--vbm-green); }
body.viewBillMain .vbm-feature-icon.tone-orange { background: var(--vbm-orange-soft); color: var(--vbm-orange); }
body.viewBillMain .vbm-features strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--vbm-navy);
}
body.viewBillMain .vbm-features small {
  display: block;
  font-size: .95rem;
  color: var(--vbm-muted);
}

/* ---- the card */
body.viewBillMain .vbm-card {
  background: var(--vbm-card);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(20, 45, 90, .14), 0 2px 6px rgba(20, 45, 90, .06);
  padding: 34px 36px 14px;  /* CLAUDE CHANGES DATED ON 05/11/2026 : bottom padding 30px -> 14px, the card ends closer under the Need Help box */
  min-width: 0;
}
body.viewBillMain .vbm-alert {
  background: #ecfdf3;
  border: 1px solid #b7ebc9;
  color: #15803d;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  margin-bottom: 18px;
}
body.viewBillMain .vbm-card-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}
body.viewBillMain .vbm-badge {
  flex: 0 0 92px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #f1f5fb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.3rem;
  color: var(--vbm-sun);
}
body.viewBillMain .vbm-card-head h2 {
  font-family: var(--vbm-font);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  color: var(--vbm-navy);
  margin: 0 0 6px;
  line-height: 1.15;
}
body.viewBillMain .vbm-card-head h2 span { color: var(--vbm-brand); }
body.viewBillMain .vbm-card-head p {
  margin: 0;
  color: var(--vbm-muted);
  font-size: 1rem;
  font-weight: 400;
}

body.viewBillMain .vbm-q,
body.viewBillMain .vbm-label {
  display: flex;
  align-items: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--vbm-navy);
  margin: 0 0 10px;
  width: 100%;
}
body.viewBillMain .vbm-label .req { color: #e11d48; margin-left: 2px; }

/* search type tabs */
body.viewBillMain .vbm-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 0 0 24px;
}
body.viewBillMain .vbm-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  width: 100%;
  background: #fff;
  border: 1px solid var(--vbm-line);
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  color: var(--vbm-ink);
  font-family: var(--vbm-font);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
body.viewBillMain .vbm-tab:hover { border-color: #b8c8e4; }
body.viewBillMain .vbm-tab:focus-visible { outline: 3px solid rgba(31, 108, 240, .35); outline-offset: 2px; }
body.viewBillMain .vbm-tab-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f1f5fb;
  color: var(--vbm-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
body.viewBillMain .vbm-tab strong {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: var(--vbm-navy);
}
body.viewBillMain .vbm-tab small {
  display: block;
  font-size: .85rem;
  color: var(--vbm-muted);
}
body.viewBillMain .vbm-tab.active {
  background: #f0f6ff;
  border: 2px solid var(--vbm-brand);
  box-shadow: 0 0 0 4px rgba(31, 108, 240, .08);
  padding: 11px 15px;
}
body.viewBillMain .vbm-tab.active .vbm-tab-icon { background: var(--vbm-brand-soft); color: var(--vbm-brand); }
body.viewBillMain .vbm-tab.active strong { color: var(--vbm-brand); }

/* field groups: the shared FormsForPay.css toggles .ServiceNumber / .MobileNumber
   with .active; repeated here so the page does not depend on it */
body.viewBillMain .ServiceNumber,
body.viewBillMain .MobileNumber,
body.viewBillMain .AadharNumber { display: none; width: 100%; }
body.viewBillMain .ServiceNumber.active,
body.viewBillMain .MobileNumber.active,
body.viewBillMain .AadharNumber.active { display: block; }
body.viewBillMain .ServiceNumberBTN,
body.viewBillMain .MobileNumberBTN,
body.viewBillMain .AadharNumberBTN { display: none; }
body.viewBillMain .ServiceNumberBTN.active,
body.viewBillMain .MobileNumberBTN.active,
body.viewBillMain .AadharNumberBTN.active { display: block; }

body.viewBillMain #scnoform { margin: 0; display: block; }
body.viewBillMain .vbm-group { margin: 0 0 22px; }
body.viewBillMain .vbm-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
body.viewBillMain .vbm-label-row .vbm-label { margin: 0; width: auto; }
body.viewBillMain .vbm-help-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--vbm-brand);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
}
body.viewBillMain .vbm-help-link:hover { text-decoration: underline; }
body.viewBillMain .vbm-help-text {
  background: var(--vbm-brand-soft);
  color: #1e3a8a;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .9rem;
  line-height: 1.5;
  margin: 0 0 12px;
}
body.viewBillMain .vbm-help-text[hidden] { display: none; }

/* input with a leading icon */
body.viewBillMain .vbm-field { position: relative; }
body.viewBillMain .vbm-field > i {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa7bd;
  font-size: 1.1rem;
  pointer-events: none;
}
body.viewBillMain .vbm-field .vbm-input,
body.viewBillMain .vbm-field .form-control {
  width: 100%;
  height: 56px;
  border-radius: 12px;
  border: 1px solid var(--vbm-line) !important;
  box-shadow: none;
  padding: 0 16px 0 52px;
  font-family: var(--vbm-font);
  font-size: 1rem !important;
  color: var(--vbm-ink);
  text-align: left;
  background: #fff;
  margin: 0;
}
body.viewBillMain .vbm-field .form-control:focus {
  border-color: var(--vbm-brand) !important;
  box-shadow: 0 0 0 4px rgba(31, 108, 240, .12);
  outline: none;
}
body.viewBillMain .vbm-field .form-control::placeholder { color: #9aa7bd; }

/* captcha */
body.viewBillMain .vbm-captcha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 14px;
}
body.viewBillMain .vbm-captcha canvas {
  width: 200px;
  height: 56px;
  border-radius: 8px;
  border: 1px solid var(--vbm-line);
  background: #f0f0f0;
}
body.viewBillMain #Billreset {
  width: 56px;
  min-height: 56px;
  margin: 0;
  padding: 0;
  float: none;
  border: 1px solid var(--vbm-line) !important;
  border-radius: 12px;
  background: #fff !important;
  color: var(--vbm-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: static !important;
}
body.viewBillMain #Billreset i { color: var(--vbm-navy) !important; font-size: 1.1rem; margin: 0; }
body.viewBillMain #Billreset:hover { border-color: #b8c8e4 !important; }

/* submit */
body.viewBillMain .vbm-submit { margin: 4px 0 22px; }
body.viewBillMain .vbm-submit button,
body.viewBillMain #Billsignin {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 12px;
  background: var(--vbm-brand) !important;
  color: #fff;
  font-family: var(--vbm-font);
  font-size: 1rem !important;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(31, 108, 240, .28);
  transition: background .15s, transform .15s;
  margin: 0;
  padding: 0;
}
body.viewBillMain #Billsignin i { font-size: 1rem; margin: 0; }
body.viewBillMain #Billsignin:hover { background: var(--vbm-brand-dark) !important; }
body.viewBillMain #Billsignin:disabled { opacity: .55; cursor: default; box-shadow: none; }

/* OTP step (shown for a mobile-number search) */
body.viewBillMain #mobOtpDiv {
  padding: 0;
  margin: 0 0 22px;
}
body.viewBillMain #mobOtpDiv #countdown {
  display: block;
  color: #dc2626;
  font-weight: 800;
  margin: 8px 0 14px;
}
body.viewBillMain #mobOtpDiv .vbm-submit { margin-bottom: 0; }

/* help note inside the card */
body.viewBillMain .vbm-help.PayBillButtomNote {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 16px 22px;  /* CLAUDE CHANGES DATED ON 05/11/2026 : was 20px 22px, slightly shorter help box */
  background: #eef5ff;
  border: 1px solid #d7e5fb;
  border-radius: 14px;
  color: var(--vbm-ink);
}
body.viewBillMain .vbm-help-icon {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #dbe9ff;
  color: var(--vbm-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  align-self: center;
}
body.viewBillMain .vbm-help-body {
  margin-left: 20px;
  padding-left: 20px;
  border-left: 1px solid #c9dbf7;
}
body.viewBillMain .vbm-help-body h6 {
  font-family: var(--vbm-font);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--vbm-navy);
  margin: 0 0 6px;
}
body.viewBillMain .vbm-help-body p {
  margin: 0 0 10px;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--vbm-muted);
  font-weight: 400;
}
body.viewBillMain .vbm-help-body a {
  color: var(--vbm-brand);
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.viewBillMain .vbm-help-body a:hover { text-decoration: underline; }

/* ---- narrow desktops: the card is only 52% of the width, keep the tiles on one line */
@media (min-width: 992px) { /* the card is a fixed 650px, so the compact tiles apply at every desktop width */
  body.viewBillMain .vbm-tabs { gap: 12px; }
  body.viewBillMain .vbm-tab { gap: 10px; padding: 10px 12px; }
  body.viewBillMain .vbm-tab.active { padding: 9px 11px; }
  body.viewBillMain .vbm-tab-icon { width: 40px; height: 40px; flex-basis: 40px; font-size: 1rem; }
  body.viewBillMain .vbm-tab strong { font-size: .9rem; }
  body.viewBillMain .vbm-tab small { font-size: .76rem; }
  body.viewBillMain .vbm-card { padding: 26px 24px 12px; } /* CLAUDE CHANGES DATED ON 05/11/2026 : bottom padding 24px -> 12px */
  body.viewBillMain .vbm-card-head { gap: 14px; }
  body.viewBillMain .vbm-badge { width: 72px; height: 72px; flex-basis: 72px; font-size: 1.8rem; }
  body.viewBillMain .vbm-intro { padding: 5% 6% 6%; }
  body.viewBillMain .vbm-feature-icon { width: 54px; height: 54px; flex-basis: 54px; font-size: 1.25rem; }
  body.viewBillMain .vbm-features { gap: 16px; }
  body.viewBillMain .vbm-features strong { font-size: 1rem; }
  body.viewBillMain .vbm-features small { font-size: .85rem; }
}

/* CLAUDE NEW IMPL DATED ON 05/11/2026 : START - short desktop viewports: tighten the card's vertical spacing so the whole card
   (down to the Need Help box) is visible without scrolling; tall screens keep the normal spacing, the hero background is untouched */
@media (min-width: 992px) and (max-height: 1000px) {
  body.viewBillMain .vbm-wrap { padding: 12px 0; }
  body.viewBillMain .vbm-card { padding: 20px 24px 10px; margin-top: 24px; } /* CLAUDE CHANGES DATED ON 05/11/2026 : card moved down from the navigation */
  body.viewBillMain .vbm-card-head { margin-bottom: 16px; }
  body.viewBillMain .vbm-card-head h2 { margin-bottom: 4px; }
  body.viewBillMain .vbm-tabs { margin-bottom: 16px; }
  body.viewBillMain .vbm-group { margin-bottom: 14px; }
  body.viewBillMain .vbm-label-row { margin-bottom: 8px; }
  body.viewBillMain .vbm-captcha { margin-bottom: 10px; }
  body.viewBillMain .vbm-submit { margin: 2px 0 14px; }
  body.viewBillMain .vbm-help.PayBillButtomNote { padding: 12px 20px; }
}
@media (min-width: 992px) and (max-height: 880px) {
  body.viewBillMain .vbm-wrap { padding: 8px 0; }
  body.viewBillMain .vbm-card { padding: 16px 24px 8px; margin-top: 4px; } /* CLAUDE CHANGES DATED ON 05/11/2026 : smaller offset so the card still fits on 768px-tall screens */
  body.viewBillMain .vbm-card-head { margin-bottom: 10px; }
  body.viewBillMain .vbm-badge { width: 56px; height: 56px; flex-basis: 56px; font-size: 1.4rem; }
  body.viewBillMain .vbm-card-head h2 { font-size: 1.5rem; }
  body.viewBillMain .vbm-card-head p { font-size: .9rem; }
  body.viewBillMain .vbm-tabs { margin-bottom: 10px; }
  body.viewBillMain .vbm-tab { padding: 7px 12px; }
  body.viewBillMain .vbm-tab.active { padding: 6px 11px; }
  body.viewBillMain .vbm-tab-icon { width: 34px; height: 34px; flex-basis: 34px; }
  body.viewBillMain .vbm-group { margin-bottom: 10px; }
  body.viewBillMain .vbm-label-row { margin-bottom: 6px; }
  body.viewBillMain .vbm-field .vbm-input,
  body.viewBillMain .vbm-field .form-control { height: 46px; }
  body.viewBillMain .vbm-captcha { margin-bottom: 8px; }
  body.viewBillMain .vbm-captcha canvas { height: 46px; width: 170px; }
  body.viewBillMain #Billreset { width: 46px; min-height: 46px; }
  body.viewBillMain .vbm-submit { margin: 0 0 10px; }
  body.viewBillMain .vbm-submit button,
  body.viewBillMain #Billsignin { height: 48px; }
  body.viewBillMain .vbm-help.PayBillButtomNote { padding: 10px 18px; }
  body.viewBillMain .vbm-help-body p { font-size: .85rem; }
}
/* CLAUDE NEW IMPL DATED ON 05/11/2026 : END */
/* ---- narrow desktops (992-1199px): less margin on the left so the 650px card still fits; the card takes its content height */
@media (min-width: 992px) and (max-width: 1199px) {
  body.viewBillMain .vbm-wrap { grid-template-columns: 64px minmax(0, 1fr) 2% minmax(0, 650px) 2%; } /* 64px clears the fixed social bar on the left */
  body.viewBillMain .vbm-card { height: auto; }
  body.viewBillMain .vbm-intro { padding: 6% 2% 6% 0; }
  body.viewBillMain .vbm-title { font-size: 2rem; }
  body.viewBillMain .vbm-tagline { font-size: .95rem; margin-bottom: 20px; }
  body.viewBillMain .vbm-features { gap: 14px; }
  body.viewBillMain .vbm-features li { gap: 12px; }
  body.viewBillMain .vbm-feature-icon { width: 48px; height: 48px; flex-basis: 48px; font-size: 1.1rem; }
  body.viewBillMain .vbm-features strong { font-size: .95rem; }
  body.viewBillMain .vbm-features small { font-size: .8rem; }
  body.viewBillMain .vbm-intro .vbm-title, body.viewBillMain .vbm-intro .vbm-tagline, body.viewBillMain .vbm-features strong, body.viewBillMain .vbm-features small { text-shadow: 0 0 10px #fff, 0 0 18px #fff, 0 1px 2px rgba(255, 255, 255, .9); }
}

/* ---- tablet / phone */
@media (max-width: 991px) {
  body.viewBillMain .step-home-page-about.inner-pages { padding-top: 172px; }
  /* phones / tablets: the left part of the scenery behind the intro, the card below on a sky gradient */
  body.viewBillMain .vbm-scene {
    min-height: 0;
    display: block;
    padding: 36px 16px 120px;
    background:
      linear-gradient(180deg, rgba(238, 245, 252, 0) 22vw, #eef5fc 60vw, #f7fbff 100%),
      url("../images/viewbill/view-bill-bg-mobile.jpg?v=1") no-repeat center top / 100% auto,
      #f7fbff; /* the crop is 3:2, so it is 66vw tall; it fades into the sky tint before it ends */
  }
  body.viewBillMain .vbm-bg { display: none; }
  body.viewBillMain .vbm-wrap { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 0; }
  body.viewBillMain .vbm-intro { grid-column: 1; display: block; padding: 22px 18px; text-align: center; background: transparent; }
  body.viewBillMain .vbm-eyebrow { align-self: auto; }
  body.viewBillMain .vbm-intro .vbm-title, body.viewBillMain .vbm-intro .vbm-tagline, body.viewBillMain .vbm-features strong, body.viewBillMain .vbm-features small { text-shadow: 0 0 10px #fff, 0 0 18px #fff, 0 1px 2px rgba(255, 255, 255, .9); } /* readable over the scenery without a panel */
  body.viewBillMain .vbm-card { grid-column: 1; display: block; width: auto; max-width: none; height: auto; margin-top: 0; } /* CLAUDE CHANGES DATED ON 05/11/2026 : no desktop offset when stacked */
  body.viewBillMain .vbm-features { grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: left; }
  body.viewBillMain .vbm-features li { flex-direction: column; text-align: center; gap: 10px; }
  body.viewBillMain .vbm-feature-icon { width: 54px; height: 54px; flex-basis: 54px; font-size: 1.25rem; }
}
@media (max-width: 575px) {
  body.viewBillMain .vbm-scene { padding: 22px 12px 48px; }
  body.viewBillMain .vbm-card { padding: 22px 18px 20px; border-radius: 18px; }
  body.viewBillMain .vbm-card-head { gap: 14px; margin-bottom: 20px; }
  body.viewBillMain .vbm-badge { width: 64px; height: 64px; flex-basis: 64px; font-size: 1.6rem; }
  body.viewBillMain .vbm-tabs { grid-template-columns: 1fr; gap: 12px; }
  body.viewBillMain .vbm-tagline { font-size: 1rem; margin-bottom: 22px; }
  body.viewBillMain .vbm-features strong { font-size: .95rem; }
  body.viewBillMain .vbm-features small { font-size: .8rem; }
  body.viewBillMain .vbm-label-row { flex-wrap: wrap; }
  body.viewBillMain .vbm-captcha { gap: 12px; }
  body.viewBillMain .vbm-captcha canvas { width: 160px; height: 50px; }
  body.viewBillMain .vbm-help.PayBillButtomNote { flex-direction: column; padding: 16px; }
  body.viewBillMain .vbm-help-icon { width: 56px; height: 56px; flex-basis: 56px; font-size: 1.4rem; align-self: flex-start; }
  body.viewBillMain .vbm-help-body { margin: 12px 0 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid #c9dbf7; }
}

/* CLAUDE NEW IMPL DATED ON 05/11/2026 : START - message popup (replaces the browser alert boxes of this page) */
body.viewBillMain .vbm-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; font-family: var(--vbm-font); }
body.viewBillMain .vbm-modal[hidden] { display: none; }
body.viewBillMain .vbm-modal-backdrop { position: absolute; inset: 0; background: rgba(11, 30, 60, .55); backdrop-filter: blur(2px); }
body.viewBillMain .vbm-modal-box { position: relative; width: 100%; max-width: 420px; background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(20, 45, 90, .3); padding: 28px 26px 24px; text-align: center; animation: vbmModalIn .18s ease-out; }
@keyframes vbmModalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
body.viewBillMain .vbm-modal-icon { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-size: 2rem; background: #fff4e5; color: #e07b00; }
body.viewBillMain .vbm-modal[data-kind="ok"] .vbm-modal-icon { background: #e6f7ee; color: #15803d; }
body.viewBillMain .vbm-modal[data-kind="info"] .vbm-modal-icon { background: #e8effd; color: var(--vbm-brand); }
body.viewBillMain .vbm-modal-title { margin: 0 0 8px; font-size: 1.25rem; font-weight: 800; color: var(--vbm-navy); line-height: 1.2; }
body.viewBillMain .vbm-modal-msg { margin: 0 0 20px; font-size: 1rem; line-height: 1.5; color: var(--vbm-ink); word-break: break-word; }
body.viewBillMain .vbm-modal-ok { min-width: 140px; height: 46px; padding: 0 28px; border: 0; border-radius: 12px; background: var(--vbm-brand) !important; color: #fff; font-family: var(--vbm-font); font-size: .95rem !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 22px rgba(31, 108, 240, .3); }
body.viewBillMain .vbm-modal-ok:hover { background: var(--vbm-brand-dark) !important; }
body.viewBillMain .vbm-modal-ok:focus-visible { outline: 3px solid rgba(31, 108, 240, .35); outline-offset: 2px; }
body.viewBillMain.vbm-modal-open { overflow: hidden; }
@media (max-width: 575px) {
  body.viewBillMain .vbm-modal-box { padding: 22px 18px 18px; border-radius: 16px; }
  body.viewBillMain .vbm-modal-ok { width: 100%; }
}
/* CLAUDE NEW IMPL DATED ON 05/11/2026 : END */

/* CLAUDE NEW IMPL DATED ON 07/11/2026 : START - the hero picture is dimmed and desaturated behind a navy wash so the
   search card stands out; the intro text turns light to stay readable on the darker picture; the card gets a white
   rim and a deeper shadow. Only colours and shadows change, no sizes or positions. */
body.viewBillMain .vbm-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 28, 58, .50) 0%, rgba(12, 28, 58, .44) 55%, rgba(12, 28, 58, .54) 100%);
  -webkit-backdrop-filter: saturate(.55);
  backdrop-filter: saturate(.55);
  pointer-events: none;
  z-index: 0;
}
body.viewBillMain .vbm-eyebrow { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .28); }
body.viewBillMain .vbm-title { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
body.viewBillMain .vbm-title span { color: #8fc1ff; }
body.viewBillMain .vbm-tagline { color: rgba(255, 255, 255, .88); text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
body.viewBillMain .vbm-tagline b { color: rgba(255, 255, 255, .55); }
body.viewBillMain .vbm-features strong { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
body.viewBillMain .vbm-features small { color: rgba(255, 255, 255, .82); text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
body.viewBillMain .vbm-feature-icon { box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
body.viewBillMain .vbm-card {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .75), 0 0 0 6px rgba(255, 255, 255, .14), 0 36px 90px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .25);
}
/* CLAUDE NEW IMPL DATED ON 07/11/2026 : END */

/* CLAUDE NEW IMPL DATED ON 07/11/2026 : START - the Need Help box is a single line: "Need Help? - Call Support (1912)" */
body.viewBillMain .vbm-help.PayBillButtomNote { align-items: center; padding: 12px 20px; }
body.viewBillMain .vbm-help-icon { flex-basis: 48px; width: 48px; height: 48px; font-size: 1.25rem; }
body.viewBillMain .vbm-help-body { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-left: 16px; padding-left: 16px; min-width: 0; }
body.viewBillMain .vbm-help-body h6 { margin: 0; }
body.viewBillMain .vbm-help-sep { color: var(--vbm-muted); font-weight: 700; }
@media (min-width: 992px) and (max-height: 1000px) { body.viewBillMain .vbm-help.PayBillButtomNote { padding: 10px 18px; } }
@media (min-width: 992px) and (max-height: 880px) { body.viewBillMain .vbm-help.PayBillButtomNote { padding: 8px 16px; } }
@media (max-width: 575px) {
  body.viewBillMain .vbm-help.PayBillButtomNote { flex-direction: row; padding: 12px 14px; }
  body.viewBillMain .vbm-help-icon { width: 44px; height: 44px; flex-basis: 44px; font-size: 1.15rem; align-self: center; }
  body.viewBillMain .vbm-help-body { margin: 0 0 0 12px; padding: 0 0 0 12px; border-top: 0; border-left: 1px solid #c9dbf7; flex-direction: column; align-items: flex-start; gap: 4px; }
  body.viewBillMain .vbm-help-sep { display: none; } /* on phones the two parts stack, no dangling dash */
}
/* CLAUDE NEW IMPL DATED ON 07/11/2026 : END */

/* CLAUDE NEW IMPL DATED ON 07/11/2026 : START - after the service number is submitted the hero is hidden and the bill
   result is injected into #listdata; body.vbm-result (added by the two AJAX success handlers) keeps the same dimmed,
   desaturated scenery behind the result, fixed to the window so the cards scroll over it. Back reloads the page. */
body.viewBillMain.vbm-result { position: relative; z-index: 0; background: #2f7fe8; }
body.viewBillMain.vbm-result::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12, 28, 58, .50) 0%, rgba(12, 28, 58, .44) 55%, rgba(12, 28, 58, .54) 100%),
    #2f7fe8 url("../images/viewbill/view-bill-bg.jpg?v=1") no-repeat center bottom / cover;
  -webkit-filter: saturate(.55);
  filter: saturate(.55);
}
body.viewBillMain.vbm-result #listdata:not(:empty) { padding: 26px 0 110px; background: transparent; } /* the white result column goes, the cards sit on the scenery; room below for the scenery before the footer */
body.viewBillMain.vbm-result .vbill .vb-pagehead h2 { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
body.viewBillMain.vbm-result .vbill .vb-pagehead p { color: rgba(255, 255, 255, .88); text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
@media (max-width: 991px) {
  body.viewBillMain.vbm-result::before {
    background:
      linear-gradient(180deg, rgba(12, 28, 58, .50) 0%, rgba(12, 28, 58, .46) 100%),
      #2f7fe8 url("../images/viewbill/view-bill-bg-mobile.jpg?v=1") no-repeat center top / cover;
  }
  body.viewBillMain.vbm-result #listdata:not(:empty) { padding: 16px 0 48px; }
}
/* CLAUDE NEW IMPL DATED ON 07/11/2026 : END */