/* ============================================================
   UPAVP Axis — Citizen Portal Theme (2026 redesign)
   Loaded AFTER assets/css/style.css and (on form pages) dist/css/app.css
   so the rules below win on shared class names. Only linked from
   citizen-facing pages — admin/back-office pages do not load this file.
   ============================================================ */

:root {
  --upavp-maroon: #861F41;
  --upavp-maroon-dark: #6C1834;
  --upavp-maroon-light: #A52A54;
  --upavp-rose: #C44A66;
  --upavp-cream: #FDF6F2;
  --upavp-pink-soft: #FBEAF0;
  --upavp-pink-badge: #FCE4EA;
  --upavp-ink: #1F2430;
  --upavp-muted: #6B7280;
  --upavp-border: #ECD9DF;
  --upavp-success-bg: #E7F7ED;
  --upavp-success-text: #15803D;
  --upavp-info-bg: #EAF2FB;
  --upavp-info-text: #1D4ED8;
  --upavp-radius: 14px;
}

/* ---------- Top contact bar ---------- */
.contact-topbar {
  background: var(--upavp-maroon);
  color: #fff;
  font-size: 12px;
  padding: 5px 0;
  line-height: 1.3;
}
.contact-topbar .container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
.contact-topbar a { color: #fff; text-decoration: none; }
.contact-topbar .contact-phones,
.contact-topbar .contact-mail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.contact-topbar .contact-sep { opacity: .6; margin: 0 4px; font-size: 12px; }

/* ---------- Brand header ---------- */
.upavp-header {
  background: #fff;
  border-bottom: 1px solid var(--upavp-border);
  position: relative;
  z-index: 30;
}
.upavp-header .header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.brand-lockup { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-lockup img.brand-icon { height: 42px; width: auto; }
.brand-lockup .brand-text { display: flex; flex-direction: column; }
.brand-lockup .brand-text-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16.5px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.2;
  margin: 0;
}
.brand-lockup .brand-text-tagline {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px;
  color: #0284C7;
  font-weight: 600;
  margin: 2px 0 0 0;
  line-height: 1.2;
}
.upavp-nav { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.upavp-nav a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14.5px;
  font-weight: 500;
  color: #1E293B;
  text-decoration: none;
  transition: color .2s ease;
}
.upavp-nav a:hover, .upavp-nav a.active { color: var(--upavp-maroon); }
.header-right { display: flex; align-items: center; gap: 18px; }
.partner-badge {
  border-radius: 6px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(134,31,65,0.25);
}
.partner-badge img { height: 40px; width: auto; display: block; }
.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--upavp-maroon);
  color: var(--upavp-maroon);
  background: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s ease;
}
.btn-logout:hover { background: var(--upavp-maroon); color: #fff; }
.btn-logout-sleek {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid #861F41 !important;
  color: #861F41 !important;
  background: #FFFFFF !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.btn-logout-sleek:hover {
  background: #861F41 !important;
  color: #FFFFFF !important;
}
.header-user-name {
  font-size: 14px;
  color: var(--upavp-ink);
  font-weight: 500;
}

/* ---------- Login / home hero section ---------- */
.hero-cream {
  position: relative;
  background:
    linear-gradient(90deg, #fff 0%, #fff 14%, rgba(255,255,255,0.82) 26%, rgba(255,255,255,0.4) 42%, rgba(255,255,255,0.08) 58%),
    url('../images/hero/upavp-hero-login.jpg');
  background-size: cover;
  background-position: center right;
  padding-top: 160px;
  padding-bottom: 100px;
  overflow: hidden;
}
/* Reserves clear space at the bottom for the pinned quote ribbon (see .quote-card-photo)
   so it never overlaps the OTP card above it, whatever the card's height. */
.hero-cream.hero-cream-login { padding-bottom: 150px; }

/* ---------- Login page: fit header + hero + footer in one screen, no scrolling ---------- */
.login-page-noscroll {
  height: 100vh;
  overflow: hidden;
}
.login-page-noscroll > .overflow-hidden {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.login-page-noscroll .contact-topbar,
.login-page-noscroll .upavp-header,
.login-page-noscroll footer.footer {
  flex: none;
}
.login-page-noscroll .hero-cream-login {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  padding-top: 15px;
  padding-bottom: 30px;
}
.login-page-noscroll .hero-cream-login .container {
  width: 100%;
}
.login-page-noscroll #scrollUp {
  display: none !important;
}

/* Full-size clean desktop footer */
.login-page-noscroll footer.footer {
  padding-top: 22px !important;
  padding-bottom: 14px !important;
}
.login-page-noscroll footer.footer .grid {
  row-gap: 12px !important;
}
.login-page-noscroll footer.footer .footer-col h3,
.login-page-noscroll footer.footer .footer-brand a {
  margin-bottom: 6px !important;
}
.login-page-noscroll footer.footer .footer-brand p {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
  max-width: 320px;
}
.login-page-noscroll footer.footer .footer-social {
  margin-top: 8px !important;
}
.login-page-noscroll footer.footer > .container > div:last-child {
  margin-top: 10px !important;
  padding-top: 8px !important;
}

/* Hero Content */
.hero-cream .hero-title {
  font-family: 'Lora', serif;
  font-size: 42px;
  line-height: 1.15;
  color: var(--upavp-ink);
  margin-bottom: 16px;
}
.hero-cream .hero-sub {
  color: var(--upavp-muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 480px;
}

/* ---------- Hero feature icon row (home page) ---------- */
/* ---------- Hero feature icon row (home page) ---------- */
.feature-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}
.feature-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 82px;
}
.feature-badge .feature-icon-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--upavp-pink-badge);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--upavp-maroon);
  font-size: 19px;
  margin-bottom: 6px;
}
.feature-badge .feature-label {
  font-size: 12.5px;
  color: var(--upavp-ink);
  font-weight: 500;
  line-height: 1.25;
}

/* ---------- Quote card ---------- */
.quote-card {
  background: #F6EDE3;
  border-radius: var(--upavp-radius);
  padding: 22px 26px;
  max-width: 380px;
}
.quote-card p {
  font-family: 'Lora', serif;
  font-style: italic;
  color: var(--upavp-ink);
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 6px 0;
}
.quote-card .quote-source {
  font-size: 12.5px;
  color: var(--upavp-muted);
}
.quote-card .quote-rule {
  width: 40px;
  height: 3px;
  background: var(--upavp-maroon);
  border-radius: 2px;
  margin-top: 10px;
}

/* Photo-hero variant: pinned as a maroon ribbon over the bottom-right corner of the hero photo */
.quote-card.quote-card-photo {
  position: absolute;
  right: 0;
  bottom: 0;
  background: rgba(134,31,65,0.85);
  border-top-left-radius: 26px;
  padding: 24px 38px 22px 30px;
  max-width: 330px;
  margin: 0 !important;
  z-index: 2;
}
.quote-card-photo .quote-mark {
  font-family: 'Lora', serif;
  font-size: 38px;
  line-height: 1;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}
.quote-card-photo p {
  color: #fff;
  font-size: 15px;
  margin: 0 0 4px 0;
  line-height: 1.4;
}
.quote-card-photo .quote-source {
  color: rgba(255,255,255,0.82);
  font-size: 12px;
}
.quote-card-photo .quote-rule {
  background: #fff;
  margin-left: 0;
  width: 36px;
  height: 3px;
  margin-top: 8px;
}

/* ---------- Login / OTP card (Base styling: desktop) ---------- */
.login-otp-card {
  background: #FDF9F7;
  border-radius: 18px;
  padding: 26px 28px;
  box-shadow: 0 12px 40px rgba(134,31,65,0.12);
  position: relative;
  z-index: 5;
}
.login-otp-card .login-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--upavp-pink-badge);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--upavp-maroon);
  font-size: 19px;
  margin: 0 auto 12px;
}
.login-otp-card h3 {
  font-family: 'Lora', serif;
  text-align: center;
  font-size: 20px;
  color: var(--upavp-ink);
  margin-bottom: 3px;
}
.login-otp-card h3 span {
  color: var(--upavp-maroon);
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 3px;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.login-otp-card .login-sub {
  text-align: center;
  color: var(--upavp-muted);
  font-size: 13px;
  margin-bottom: 16px;
}
.login-otp-card label {
  font-size: 13px;
  color: var(--upavp-ink);
  font-weight: 500;
  margin-bottom: 5px;
  display: block;
}
.login-otp-card input[type="text"] {
  border-radius: 10px !important;
  border: 1px solid var(--upavp-border) !important;
  padding: 11px 16px 11px 38px !important;
  height: auto !important;
  min-height: 44px !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  box-sizing: border-box !important;
}
.login-field-wrap {
  position: relative;
}
.login-field-wrap i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--upavp-maroon);
}
.login-secure-note {
  text-align: center;
  font-size: 12px;
  color: var(--upavp-muted);
  background: var(--upavp-pink-soft);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 14px;
}

/* Clean vertical spacing between input fields and buttons */
.login-otp-card #MobileNoDiv,
.login-otp-card #VerifyOtpDiv,
.login-page-noscroll .login-otp-card #MobileNoDiv,
.login-page-noscroll .login-otp-card #VerifyOtpDiv {
  margin-bottom: 18px !important;
}

.login-otp-card #SendOtpDiv {
  margin-top: 0;
}

/* Side-by-side OTP Buttons: identical height, width, and alignment */
.otp-btn-row {
  display: flex;
  gap: 10px;
  width: 100%;
  align-items: stretch;
  margin-top: 0;
}
.otp-btn-row[style*="none"] {
  display: none !important;
}
.otp-btn-row #VerifyOtpBtn,
.otp-btn-row #ResendOtpBtn {
  flex: 1 1 0% !important;
  width: 50% !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border: 1.5px solid transparent !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
.otp-btn-row #VerifyOtpBtn[style*="none"],
.otp-btn-row #ResendOtpBtn[style*="none"] {
  display: none !important;
}
.otp-btn-row #VerifyOtpBtn {
  background: var(--upavp-maroon) !important;
  color: #ffffff !important;
  border-color: var(--upavp-maroon) !important;
}
.otp-btn-row #VerifyOtpBtn:hover {
  background: var(--upavp-maroon-dark) !important;
  border-color: var(--upavp-maroon-dark) !important;
}
.otp-btn-row #ResendOtpBtn {
  background: var(--upavp-pink-soft) !important;
  color: var(--upavp-maroon) !important;
  border-color: var(--upavp-pink-soft) !important;
}
.otp-btn-row #ResendOtpBtn:hover:not(:disabled) {
  background: var(--upavp-pink-badge) !important;
  border-color: var(--upavp-pink-badge) !important;
}
.otp-btn-row #ResendOtpBtn:disabled,
.otp-btn-row #ResendOtpBtn.disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  background: #f1f1f1 !important;
  color: #888888 !important;
  border-color: #e0e0e0 !important;
  pointer-events: none !important;
}
.login-otp-card #SendOtpBtn {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  width: 100% !important;
  padding: 0 20px !important;
  font-size: 14px !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
}
#SendOtpDiv[style*="none"],
#SendOtpBtn[style*="none"],
.login-otp-card #SendOtpBtn[style*="none"],
.login-page-noscroll #SendOtpBtn[style*="none"],
.login-page-noscroll #SendOtpDiv[style*="none"] {
  display: none !important;
}

/* ============================================================
   RESPONSIVE RULES: Cascade overrides for laptop & mobile
   ============================================================ */

/* Laptop screens & Windows 125%/150% scaled screens (height <= 880px):
   Scale gently so the card NEVER touches header or footer */
@media (max-height: 880px) {
  .login-page-noscroll .hero-cream-login {
    padding-top: 8px !important;
    padding-bottom: 14px !important;
  }
  .login-page-noscroll .hero-title {
    font-size: 34px !important;
    margin-bottom: 8px !important;
  }
  .login-page-noscroll .hero-sub {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
  }
  .login-page-noscroll .feature-badge-row {
    margin-top: 14px !important;
    gap: 12px !important;
  }
  .login-page-noscroll .feature-badge {
    width: 76px !important;
  }
  .login-page-noscroll .feature-badge .feature-icon-circle {
    width: 40px !important;
    height: 40px !important;
    font-size: 15px !important;
    margin-bottom: 4px !important;
  }
  .login-page-noscroll .feature-badge .feature-label {
    font-size: 11px !important;
  }

  /* Compact card on short/laptop screens */
  .login-page-noscroll .login-otp-card {
    padding: 18px 22px !important;
    border-radius: 14px !important;
  }
  .login-page-noscroll .login-otp-card .login-icon-circle {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
    margin: 0 auto 6px !important;
  }
  .login-page-noscroll .login-otp-card h3 {
    font-size: 18px !important;
    margin-bottom: 2px !important;
  }
  .login-page-noscroll .login-otp-card h3 span {
    font-size: 13px !important;
    margin-top: 2px !important;
  }
  .login-page-noscroll .login-otp-card .login-sub {
    font-size: 11.5px !important;
    margin-bottom: 10px !important;
  }
  .login-page-noscroll .login-otp-card label {
    font-size: 12px !important;
    margin-bottom: 3px !important;
  }
  .login-page-noscroll .login-otp-card #MobileNoDiv,
  .login-page-noscroll .login-otp-card #VerifyOtpDiv {
    margin-bottom: 14px !important;
  }
  .login-page-noscroll .login-otp-card input[type="text"] {
    min-height: 38px !important;
    height: 38px !important;
    padding: 8px 12px 8px 34px !important;
    font-size: 13px !important;
  }
  .login-page-noscroll .btn-maroon,
  .login-page-noscroll .btn-maroon-outline {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }
  .login-page-noscroll .otp-btn-row #VerifyOtpBtn,
  .login-page-noscroll .otp-btn-row #ResendOtpBtn,
  .login-page-noscroll .login-otp-card #SendOtpBtn {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }
  .login-page-noscroll .login-secure-note {
    font-size: 11px !important;
    padding: 5px 8px !important;
    margin-top: 8px !important;
  }

  .login-page-noscroll .quote-card.quote-card-photo {
    padding: 14px 26px 12px 20px !important;
    max-width: 270px !important;
  }
  .login-page-noscroll .quote-card-photo .quote-mark {
    font-size: 26px !important;
  }
  .login-page-noscroll .quote-card-photo p {
    font-size: 13px !important;
  }

  .login-page-noscroll footer.footer {
    padding-top: 10px !important;
    padding-bottom: 8px !important;
  }
  .login-page-noscroll footer.footer .footer-brand p {
    font-size: 11px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 4px !important;
  }
}

/* Very short laptop heights (height <= 700px) */
@media (max-height: 700px) {
  .login-page-noscroll .hero-cream-login .feature-badge-row {
    display: none !important;
  }
  .login-page-noscroll .login-otp-card {
    padding: 14px 18px !important;
  }
  .login-page-noscroll .login-otp-card .login-icon-circle {
    display: none !important;
  }
  .login-page-noscroll .quote-card.quote-card-photo {
    display: none !important;
  }
}

/* Mobile & Tablet Portrait (< 992px width): smooth clean vertical scroll */
@media (max-width: 991px) {
  .login-page-noscroll {
    height: auto !important;
    overflow-y: auto !important;
  }
  .login-page-noscroll > .overflow-hidden {
    height: auto !important;
    overflow: visible !important;
  }
  .login-page-noscroll .hero-cream-login {
    padding: 40px 0 50px !important;
    min-height: auto !important;
  }
  .login-page-noscroll .quote-card.quote-card-photo {
    position: static !important;
    max-width: 100% !important;
    border-radius: var(--upavp-radius) !important;
    margin-top: 22px !important;
  }
  .login-page-noscroll footer.footer {
    padding-top: 45px !important;
    padding-bottom: 35px !important;
  }
  .login-page-noscroll #scrollUp {
    display: flex !important;
  }
}

/* ---------- Buttons ---------- */
.btn-maroon {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--upavp-maroon);
  color: #fff !important;
  border: none;
  border-radius: 8px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.btn-maroon:hover { background: var(--upavp-maroon-dark); color: #fff; }
.btn-maroon-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--upavp-pink-soft);
  color: var(--upavp-maroon) !important;
  border: none;
  border-radius: 8px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease;
}
.btn-maroon-outline:hover { background: var(--upavp-pink-badge); }
.btn-maroon-sm { padding: 9px 18px; font-size: 13.5px; border-radius: 6px; }

/* ---------- Page banner (scheme / registration flow header strip) ---------- */
.page-banner {
  background: linear-gradient(120deg, #EEF3FA 0%, #FBEFF3 60%, #FBEFF3 100%);
  border-radius: var(--upavp-radius);
  padding: 30px 34px;
  margin: 26px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
}
.page-banner .banner-left h1 {
  font-family: 'Lora', serif;
  font-size: 28px;
  color: var(--upavp-ink);
  margin: 0 0 6px 0;
  text-decoration: underline;
  text-decoration-color: var(--upavp-maroon);
  text-underline-offset: 6px;
}
.page-banner .banner-left p.banner-sub { color: var(--upavp-muted); font-size: 14px; margin: 0 0 16px 0; }
.page-banner .banner-icons { display: flex; gap: 26px; flex-wrap: wrap; }
.page-banner .banner-icons .b-icon { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--upavp-ink); font-weight: 500; }
.page-banner .banner-icons .b-icon .b-icon-circle {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--upavp-pink-badge); color: var(--upavp-maroon);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.page-banner .banner-right { max-width: 380px; }
.page-banner .banner-right img { width: 100%; border-radius: 10px; display: block; }
.page-banner .banner-quote {
  font-family: 'Lora', serif; font-style: italic; text-align: right;
  color: var(--upavp-ink); font-size: 16px; max-width: 260px;
}
.page-banner .banner-quote .quote-rule { width: 40px; height: 3px; background: var(--upavp-maroon); border-radius: 2px; margin-top: 8px; margin-left: auto; }

/* ---------- Photo variant of the page banner (Schemes listing pages) ---------- */
.page-banner.page-banner-photo {
  background:
    linear-gradient(90deg, #FDF6F2 0%, #FDF6F2 36%, rgba(253,246,242,0.6) 58%, rgba(253,246,242,0.12) 82%),
    url('../images/hero/upavp-hero-schemes.jpg');
  background-size: cover;
  background-position: center;
  min-height: 260px;
  padding: 40px 34px;
}
.page-banner.page-banner-photo .banner-left h1 {
  font-size: 42px;
  text-decoration: none;
}
.page-banner.page-banner-photo .banner-quote {
  background: #FDF6F2;
  border-radius: var(--upavp-radius);
  padding: 20px 24px;
  box-shadow: 0 14px 34px rgba(31,36,48,0.14);
}
@media (max-width: 700px) {
  .page-banner.page-banner-photo { min-height: 0; padding: 30px 24px; }
  .page-banner.page-banner-photo .banner-left h1 { font-size: 30px; }
}

/* ---------- Form / content card ---------- */
.upavp-card {
  background: #fff;
  border-radius: var(--upavp-radius);
  border: 1px solid var(--upavp-border);
  box-shadow: 0 6px 24px rgba(31,36,48,0.05);
  margin-bottom: 24px;
  overflow: hidden;
}
.upavp-card-header {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--upavp-border);
}
.upavp-card-header .card-icon {
  width: 42px; height: 42px; border-radius: 10px; flex: none;
  background: var(--upavp-pink-badge); color: var(--upavp-maroon);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.upavp-card-header h2 { font-size: 17px; font-weight: 600; color: var(--upavp-ink); margin: 0 0 2px 0; }
.upavp-card-header p { font-size: 13px; color: var(--upavp-muted); margin: 0; }
.upavp-card-body { padding: 26px; }

.form-note {
  background: var(--upavp-pink-soft);
  color: var(--upavp-maroon-dark);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  display: flex; align-items: flex-start; gap: 8px;
}
.form-note > i:first-child { margin-top: 3px; flex: none; }
.form-note-content { flex: 1 1 auto; min-width: 0; }

/* ---------- Admin-authored rich text (bannerhtml / termconditionhtml) ----------
   These fields are free-form HTML pasted by staff (often straight from Word/Excel),
   so a raw <table> inside them arrives with no classes and sometimes stray inline
   styles. Re-theme any table found inside these two wrappers rather than relying on
   markup we don't control. */
.bannerhtml, .form-note-content {
  overflow-x: auto;
  max-width: 100%;
  color: var(--upavp-ink);
  line-height: 1.6;
}
.bannerhtml table, .form-note-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 14px 0 !important;
  font-size: 12.5px !important;
  min-width: 560px;
}
.bannerhtml td, .bannerhtml th,
.form-note-content td, .form-note-content th {
  border: 1px solid var(--upavp-border) !important;
  padding: 9px 11px !important;
  text-align: center !important;
  color: var(--upavp-ink) !important;
  background: #fff !important;
  font-size: 12.5px !important;
}
.bannerhtml tr:nth-child(-n+2) td, .bannerhtml tr:nth-child(-n+2) th,
.form-note-content tr:nth-child(-n+2) td, .form-note-content tr:nth-child(-n+2) th {
  background: var(--upavp-pink-soft) !important;
  color: var(--upavp-maroon-dark) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.bannerhtml tr:nth-child(even) td,
.form-note-content tr:nth-child(even) td { background: #FAF7F8 !important; }

/* ---------- "View Scheme Details" trigger button + popup modal (UserLogin.jsp) ----------
   The scheme cost/registration table (admin-authored bannerhtml) used to sit inline on the
   login hero, pushing the OTP card far down the page. It now opens in a modal instead. */
.btn-scheme-details {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff;
  color: var(--upavp-maroon-dark);
  border: 1.5px solid var(--upavp-maroon);
  border-radius: 10px;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin: 6px 0 4px;
  box-shadow: 0 6px 18px rgba(134,31,65,0.10);
  transition: background .2s ease, color .2s ease;
}
.btn-scheme-details:hover { background: var(--upavp-maroon); color: #fff !important; }
.btn-scheme-details i.fa-arrow-right { font-size: 12px; opacity: .7; }

/* ---------- Animated Opened Modal (Scheme Details / Rich Text Content) ---------- */
@keyframes modalOverlayFadeIn {
  from { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  to { opacity: 1; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}

@keyframes modalOverlayFadeOut {
  from { opacity: 1; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  to { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
}

@keyframes modalSpringPopIn {
  0% {
    opacity: 0;
    transform: scale(0.88) translateY(24px);
  }
  60% {
    opacity: 1;
    transform: scale(1.02) translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modalSpringPopOut {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.92) translateY(18px);
  }
}

.upavp-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1050;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.upavp-modal-overlay.is-open {
  display: flex;
  animation: modalOverlayFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.upavp-modal-overlay.is-closing {
  animation: modalOverlayFadeOut 0.22s ease forwards;
}

.upavp-modal {
  background: #ffffff;
  border-radius: 16px;
  max-width: 920px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 60px -15px rgba(134, 31, 65, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.06);
  transform-origin: center center;
}
.upavp-modal-overlay.is-open .upavp-modal {
  animation: modalSpringPopIn 0.36s cubic-bezier(0.34, 1.35, 0.64, 1) forwards;
}
.upavp-modal-overlay.is-closing .upavp-modal {
  animation: modalSpringPopOut 0.2s ease-in forwards;
}

.upavp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: linear-gradient(135deg, #861F41 0%, #5A122B 100%);
  color: #fff;
  flex: none;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.upavp-modal-header-content {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.upavp-modal-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
}
.upavp-modal-title-wrap {
  flex: 1;
  min-width: 0;
}
.upavp-modal-title {
  font-family: 'Lora', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upavp-modal-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.upavp-modal-close {
  background: rgba(255, 255, 255, 0.16);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-left: 12px;
}
.upavp-modal-close:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: rotate(90deg);
}

.upavp-modal-info-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 10px 24px;
  background: #FAF5F7;
  border-bottom: 1px solid #F0E2E7;
  font-size: 12.5px;
  color: #4A5568;
}
.upavp-modal-info-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.upavp-modal-info-item i {
  color: #861F41;
  font-size: 13px;
}
.upavp-modal-info-label {
  color: #718096;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.upavp-modal-info-val {
  font-weight: 700;
  color: #1A202C;
}

.upavp-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  max-height: calc(90vh - 180px);
}
.upavp-modal-body.bannerhtml {
  overflow-y: auto;
}

.upavp-modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  gap: 12px;
  color: #861F41;
}
.upavp-modal-spinner {
  width: 38px;
  height: 38px;
  border: 3.5px solid #F0E2E7;
  border-top-color: #861F41;
  border-radius: 50%;
  animation: modalSpin 0.75s linear infinite;
}
@keyframes modalSpin {
  to { transform: rotate(360deg); }
}

.upavp-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: #FAF7F8;
  border-top: 1px solid #EAE2E5;
  flex: none;
}
.upavp-modal-btn-close {
  background: #fff;
  border: 1.5px solid #CBD5E1;
  color: #4A5568;
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.upavp-modal-btn-close:hover {
  background: #F1F5F9;
  border-color: #94A3B8;
  color: #1E293B;
}
.upavp-modal-btn-apply {
  background: linear-gradient(135deg, #861F41 0%, #A02852 100%);
  color: #fff !important;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(134, 31, 65, 0.28);
  transition: all 0.2s ease;
}
.upavp-modal-btn-apply:hover {
  background: linear-gradient(135deg, #6E1834 0%, #861F41 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(134, 31, 65, 0.38);
}
.modal-documents-strip {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed #E2E8F0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.modal-doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E40AF;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}
.modal-doc-chip:hover {
  background: #DBEAFE;
  color: #1D4ED8;
}

@media (max-width: 600px) {
  .upavp-modal-header h3, .upavp-modal-title { font-size: 15px; }
  .upavp-modal-body { padding: 16px; }
  .upavp-modal-info-bar { padding: 10px 16px; font-size: 11.5px; }
  .upavp-modal-footer { padding: 10px 16px; }
}
/* NewRegistration.jsp wraps its copy in Tailwind's `flex justify-center`, which squeezes
   a wide raw table instead of letting it scroll. Force block layout for that instance. */
.upavp-theme .form-note-content.flex { display: block !important; }

/* ---------- Stepper ---------- */
.upavp-stepper {
  display: flex; align-items: flex-start; flex-wrap: wrap;
  gap: 0; margin: 24px 0 8px; padding: 0;
}
.upavp-stepper .step-item {
  display: flex; align-items: center; flex: 1 1 auto; min-width: 130px;
}
.upavp-stepper .step-node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-width: 120px; }
.upavp-stepper .step-circle {
  width: 38px; height: 38px; border-radius: 50%;
  background: #EDEDED; color: #9AA0A6;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px;
  border: 2px solid #EDEDED;
}
.upavp-stepper .step-title { font-size: 12.5px; font-weight: 600; color: var(--upavp-muted); max-width: 120px; }
.upavp-stepper .step-sub { font-size: 11px; color: #B0B4BA; }
.upavp-stepper .step-connector { flex: 1 1 auto; height: 2px; background: #EDEDED; margin: 0 6px; margin-top: 19px; min-width: 20px; }
.upavp-stepper .step-item.done .step-circle { background: var(--upavp-maroon); border-color: var(--upavp-maroon); color: #fff; }
.upavp-stepper .step-item.done .step-title { color: var(--upavp-ink); }
.upavp-stepper .step-item.done .step-connector,
.upavp-stepper .step-item.active .step-connector.prev-done { background: var(--upavp-maroon); }
.upavp-stepper .step-item.active .step-circle { background: var(--upavp-maroon); border-color: var(--upavp-maroon); color: #fff; box-shadow: 0 0 0 4px var(--upavp-pink-badge); }
.upavp-stepper .step-item.active .step-title { color: var(--upavp-ink); }

/* Simple 4-stage progress used on payment page */
.upavp-progress {
  display: flex; align-items: center; margin: 22px 0 30px; flex-wrap: wrap; gap: 0;
}
.upavp-progress .pstep { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 130px; gap: 6px; }
.upavp-progress .pstep .pcircle {
  width: 34px; height: 34px; border-radius: 50%; background: #EDEDED; color: #9AA0A6;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px;
}
.upavp-progress .pstep .ptitle { font-size: 12.5px; font-weight: 600; color: var(--upavp-muted); }
.upavp-progress .pstep .psub { font-size: 11px; color: #B0B4BA; }
.upavp-progress .pline { flex: 1 1 auto; height: 2px; background: #EDEDED; margin-top: 17px; min-width: 24px; }
.upavp-progress .pstep.done .pcircle { background: var(--upavp-maroon); color: #fff; }
.upavp-progress .pstep.active .pcircle { background: var(--upavp-maroon); color: #fff; }
.upavp-progress .pstep.done .ptitle, .upavp-progress .pstep.active .ptitle { color: var(--upavp-ink); }
.upavp-progress .pline.done { background: var(--upavp-maroon); }

/* ---------- Re-themed legacy form inputs (registration / booklet forms) ---------- */
.upavp-theme .form-control,
.upavp-theme input.form-control,
.upavp-theme select.form-control,
.upavp-theme textarea.form-control {
  border: 1px solid var(--upavp-border) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  background: #fff !important;
  color: var(--upavp-ink) !important;
  box-shadow: none !important;
}
.upavp-theme .form-control:focus {
  border-color: var(--upavp-maroon) !important;
  box-shadow: 0 0 0 3px var(--upavp-pink-badge) !important;
  outline: none !important;
}
/* The maroon background override above (via the shorthand `background`) wipes out the
   grey dropdown chevron that dist/css/app.css paints onto every native <select>. Re-add
   it here, in the theme's own maroon, for every select on citizen forms. */
.upavp-theme select.form-control,
.upavp-theme select.form-select,
.upavp-theme select.box,
.upavp-theme select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23861F41' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 13px !important;
  padding-right: 38px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  cursor: pointer;
}
.upavp-theme .form-label {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--upavp-ink) !important;
  margin-bottom: 6px !important;
}
.upavp-theme .mandatory { color: var(--upavp-maroon) !important; }
.upavp-theme .box {
  border: 1px solid var(--upavp-border) !important;
  border-radius: var(--upavp-radius) !important;
  box-shadow: 0 6px 24px rgba(31,36,48,0.05) !important;
}
.upavp-theme .btn-primarynew {
  background: var(--upavp-maroon) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 11px 26px !important;
  font-weight: 500 !important;
  transition: background .2s ease;
}
.upavp-theme .btn-primarynew:hover { background: var(--upavp-maroon-dark) !important; }
.upavp-theme .declare-area { font-size: 13.5px; color: var(--upavp-ink); }
.upavp-theme .table thead.table-light th,
.upavp-theme .table thead th {
  background: var(--upavp-pink-soft) !important;
  color: var(--upavp-maroon-dark) !important;
  font-size: 12.5px !important;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.upavp-theme .table td, .upavp-theme .table th { vertical-align: middle !important; font-size: 13.5px; }
.upavp-theme .refundable {
  background: var(--upavp-pink-soft) !important;
  color: var(--upavp-maroon-dark) !important;
  border-radius: 10px;
  padding: 12px 18px;
  display: inline-block;
  font-size: 14px !important;
}

/* ---------- Legacy multi-step "containersteps" stepper (NewRegistration / Registration) ----------
   Re-skins the existing stepper markup in place rather than replacing it, so the goNext()/
   goPrevious() jQuery in NewRegistration.js / Registration.js (which toggles the
   .activebgcolor / .bgcolor classes on #step1..#step7) keeps working unmodified. */
.upavp-theme .containersteps { margin: 4px 0 20px !important; }
.upavp-theme .containersteps [id^="step"] {
  border-radius: 12px !important;
  border-color: var(--upavp-border) !important;
  background: #F7F4F5 !important;
  min-height: 64px;
}
.upavp-theme .containersteps [id^="step"] > div {
  background: transparent !important;
}
.upavp-theme .containersteps [id^="step"] h2 {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--upavp-muted);
  display: flex; align-items: center; gap: 7px; justify-content: center;
}
.upavp-theme .containersteps [id^="step"] h2::before {
  content: "";
  flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--upavp-border);
  color: var(--upavp-muted);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.upavp-theme .containersteps #step1 h2::before { content: "1"; }
.upavp-theme .containersteps #step2 h2::before { content: "2"; }
.upavp-theme .containersteps #step3 h2::before { content: "3"; }
.upavp-theme .containersteps #step4 h2::before { content: "4"; }
.upavp-theme .containersteps #step5 h2::before { content: "5"; }
.upavp-theme .containersteps #step6 h2::before { content: "6"; }
.upavp-theme .containersteps #step7 h2::before { content: "7"; }
.upavp-theme .containersteps [id^="step"].activebgcolor {
  background: var(--upavp-maroon) !important;
  border-color: var(--upavp-maroon) !important;
  box-shadow: 0 0 0 4px var(--upavp-pink-badge);
}
.upavp-theme .containersteps [id^="step"].activebgcolor h2 { color: #fff !important; }
.upavp-theme .containersteps [id^="step"].activebgcolor h2::before {
  background: #fff; border-color: #fff; color: var(--upavp-maroon);
}
.upavp-theme .containersteps .fa-arrow-right { color: var(--upavp-rose) !important; opacity: .55; }
.upavp-theme .refundable-banner {
  background: var(--upavp-pink-soft);
  border-radius: var(--upavp-radius);
  padding: 26px;
  text-align: center;
  margin-bottom: 24px;
}
.upavp-theme .refundable-banner .rb-title {
  color: var(--upavp-maroon-dark);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
}
.upavp-theme .refundable-banner #downloadBooklet a.btn-primarynew {
  display: inline-flex; align-items: center; gap: 8px;
}
.upavp-theme .step-section-title {
  font-family: 'Lora', serif;
  font-size: 17px;
  color: var(--upavp-ink);
  margin: 4px 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--upavp-border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.upavp-theme .step-section-title i { color: var(--upavp-maroon); }
.upavp-theme .float-end { display: flex; justify-content: flex-end; gap: 10px; }

/* =========================================================================
 * UPAVP x Axis — ADMIN CONSOLE THEME
 *
 * Citizen side ka maroon theme hi admin panel par, lekin admin ke apne
 * shell ke liye (sidebar, top bar, cards, forms, DataTables).
 *
 * Scope: har admin JSP ke <body> par `page-admin` class hai. Yahan sab kuch
 * usi ke neeche scoped hai, isliye citizen pages (jinpar sirf `upavp-theme`
 * hai) bilkul chhoote nahi.
 *
 * Yeh file legacy `dist/css/app.css` (Rubick template) ko override karti hai,
 * isliye kai jagah !important zaroori hai.
 * ========================================================================= */

body.page-admin {
  /* surface + ink */
  --adm-canvas: #F6F1F3;
  --adm-surface: #FFFFFF;
  --adm-line: #EFE1E7;
  --adm-line-soft: #F6EDF0;
  --adm-ink: #1C2331;
  --adm-ink-2: #48505F;
  --adm-muted: #8A8F9C;

  /* brand */
  --adm-brand: #861F41;
  --adm-brand-dark: #6C1834;
  --adm-brand-light: #A52A54;
  --adm-brand-soft: #FBEAF0;
  --adm-brand-tint: #FDF7F9;

  /* status */
  --adm-ok-bg: #E7F7ED;     --adm-ok-fg: #15803D;
  --adm-warn-bg: #FEF4E6;   --adm-warn-fg: #B45309;
  --adm-bad-bg: #FDECEC;    --adm-bad-fg: #B91C1C;
  --adm-info-bg: #EAF2FB;   --adm-info-fg: #1D4ED8;

  /* geometry */
  --adm-radius: 16px;
  --adm-radius-sm: 10px;
  --adm-sidebar: 258px;
  --adm-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 30px -18px rgba(108, 24, 52, .22);
  --adm-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);

  /* sidebar icons (mask images — colour follows text) */
  --ic-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E");
  --ic-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.6 12 3.2l9 7.4'/%3E%3Cpath d='M5.6 9.6V20.4h12.8V9.6'/%3E%3Cpath d='M9.9 20.4v-5.3h4.2v5.3'/%3E%3C/svg%3E");
  --ic-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='3.4' width='7' height='7' rx='1.8'/%3E%3Crect x='13.6' y='3.4' width='7' height='7' rx='1.8'/%3E%3Crect x='3.4' y='13.6' width='7' height='7' rx='1.8'/%3E%3Crect x='13.6' y='13.6' width='7' height='7' rx='1.8'/%3E%3C/svg%3E");
  --ic-cash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='6' width='18.8' height='12' rx='2.2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6.2 10v4M17.8 10v4'/%3E%3C/svg%3E");
  --ic-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.6 20v-1.7a3.9 3.9 0 0 0-3.9-3.9H6.3a3.9 3.9 0 0 0-3.9 3.9V20'/%3E%3Ccircle cx='9' cy='7.4' r='3.6'/%3E%3Cpath d='M21.6 20v-1.7a3.9 3.9 0 0 0-2.9-3.8M16.4 4.2a3.9 3.9 0 0 1 0 7.4'/%3E%3C/svg%3E");
  --ic-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5.2' width='18.8' height='13.6' rx='2.4'/%3E%3Cpath d='M2.6 9.8h18.8'/%3E%3Cpath d='M6.4 14.6h3.4'/%3E%3C/svg%3E");
  --ic-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='4' width='17.2' height='16.4' rx='2.6'/%3E%3Ccircle cx='12' cy='10.2' r='2.4'/%3E%3Cpath d='M7.8 17.2c.5-2 2.2-3 4.2-3s3.7 1 4.2 3'/%3E%3C/svg%3E");
  --ic-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 19.2 6v5.6c0 4.3-3 7.7-7.2 9.2-4.2-1.5-7.2-4.9-7.2-9.2V6z'/%3E%3Cpath d='m9.3 11.8 1.9 1.9 3.5-3.6'/%3E%3C/svg%3E");
  --ic-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 4.8-9 4.8-9-4.8z'/%3E%3Cpath d='m3.6 12.4 8.4 4.5 8.4-4.5'/%3E%3Cpath d='m3.6 16.8 8.4 4.5 8.4-4.5'/%3E%3C/svg%3E");
  --ic-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.4 6.4h12M8.4 12h12M8.4 17.6h12'/%3E%3Ccircle cx='4' cy='6.4' r='1.2'/%3E%3Ccircle cx='4' cy='12' r='1.2'/%3E%3Ccircle cx='4' cy='17.6' r='1.2'/%3E%3C/svg%3E");
  --ic-bank: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9.6 9-5.4 9 5.4'/%3E%3Cpath d='M5.4 10.6v7.8M10 10.6v7.8M14 10.6v7.8M18.6 10.6v7.8'/%3E%3Cpath d='M3 20.4h18'/%3E%3C/svg%3E");
  --ic-headset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 13.4v-1.2a7.8 7.8 0 0 1 15.6 0v1.2'/%3E%3Crect x='2.6' y='13' width='4.4' height='6.4' rx='1.8'/%3E%3Crect x='17' y='13' width='4.4' height='6.4' rx='1.8'/%3E%3Cpath d='M19.2 19.4a2.8 2.8 0 0 1-2.8 2.2h-2.1'/%3E%3C/svg%3E");
  --ic-refund: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 12a8.4 8.4 0 1 1-2.6-6.1'/%3E%3Cpath d='M19.6 3.4v4.8h-4.8'/%3E%3C/svg%3E");
  --ic-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 15.6v3a2 2 0 0 1-2 2H5.6a2 2 0 0 1-2-2v-3'/%3E%3Cpath d='m7.8 8.4 4.2-4.2 4.2 4.2'/%3E%3Cpath d='M12 4.6v11'/%3E%3C/svg%3E");
  --ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 11.1V12a8.4 8.4 0 1 1-5-7.7'/%3E%3Cpath d='m8.4 11.4 3 3 8-8'/%3E%3C/svg%3E");
  --ic-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.6 20.4H5.8a2 2 0 0 1-2-2V5.6a2 2 0 0 1 2-2h3.8'/%3E%3Cpath d='m15.4 16.4 4.4-4.4-4.4-4.4'/%3E%3Cpath d='M19.8 12H9.4'/%3E%3C/svg%3E");
  --ic-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.8'/%3E%3Cpath d='m20 20-4.4-4.4'/%3E%3C/svg%3E");
  --ic-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  --ic-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E");
  --ic-inbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 13.6h4.4l1.6 2.6h5.6l1.6-2.6h4.4'/%3E%3Cpath d='M5.6 4.6h12.8l2.4 9v4.2a2 2 0 0 1-2 2H5.2a2 2 0 0 1-2-2v-4.2z'/%3E%3C/svg%3E");
}

/* =============================================================== canvas === */
/* Rubick template har page load par sidebar ke items ko ek-ek karke uda kar
   laata hai (intro-x / intro-y / intro-menu-animation). Admin panel me yeh
   jhatka dikhta hai — aur agar animation kisi wajah se na chale to item
   opacity:0 par atak jaata hai. Isliye admin par band, uski jagah neeche ek
   halka sa content fade hai. */
body.page-admin .intro-x,
body.page-admin .-intro-x,
body.page-admin .intro-y,
body.page-admin .-intro-y,
body.page-admin .side-nav > a,
body.page-admin .side-nav > ul > li > a,
body.page-admin .side-nav > ul > li,
body.page-admin .side-nav .side-nav__devider,
body.page-admin .top-bar > nav {
  -webkit-animation: none !important;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

body.page-admin,
body.page-admin.bodybgcolor {
  background: var(--adm-canvas) !important;
  color: var(--adm-ink);
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* app.css body par 0 32px padding deta hai — usi se sidebar ke dono taraf
     gap dikhta tha. Admin shell full-bleed chahiye. */
  padding: 0 !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased;
}
body.page-admin ::-webkit-scrollbar { width: 10px; height: 10px; }
body.page-admin ::-webkit-scrollbar-track { background: transparent; }
body.page-admin ::-webkit-scrollbar-thumb { background: #E2D2D9; border-radius: 99px; border: 3px solid var(--adm-canvas); }
body.page-admin ::-webkit-scrollbar-thumb:hover { background: #CDB4BF; }

/* the shell: sidebar + content, full height */
body.page-admin > .flex { min-height: 100vh; align-items: stretch; }

/* ============================================================== sidebar === */
body.page-admin .side-nav {
  width: var(--adm-sidebar) !important;
  padding: 0 0 18px !important;
  background: linear-gradient(176deg, #92244A 0%, var(--adm-brand) 46%, var(--adm-brand-dark) 100%);
  box-shadow: 1px 0 0 rgba(255, 255, 255, .06) inset, 6px 0 28px -18px rgba(28, 12, 18, .55);
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 65;
}
body.page-admin .side-nav::-webkit-scrollbar { width: 6px; }
body.page-admin .side-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border: none; border-radius: 99px; }

/* brand lockup */
body.page-admin .side-nav > a {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 22px 20px 18px !important;
  margin: 0 !important;
  text-decoration: none;
}
body.page-admin .side-nav > a img {
  width: 38px !important;
  height: 38px;
  padding: 7px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5);
  object-fit: contain;
  flex: none;
}
body.page-admin .side-nav > a span {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.1;
  color: #fff !important;
}
body.page-admin .side-nav > a span::after {
  content: "Admin Console";
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
body.page-admin .side-nav .side-nav__devider {
  margin: 0 20px 14px !important;
  width: auto !important;
  background: rgba(255, 255, 255, .13) !important;
}

/* section caption above the menu */
body.page-admin .side-nav ul.menu { padding: 0; margin: 0; }
body.page-admin .side-nav ul.menu::before {
  content: "Navigation";
  display: block;
  padding: 0 22px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}

/* menu rows */
body.page-admin .side-nav .side-menu {
  height: auto !important;
  min-height: 44px;
  margin: 2px 12px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, .78) !important;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}
body.page-admin .side-nav .side-menu:hover {
  background: rgba(255, 255, 255, .10) !important;
  color: #fff !important;
  transform: translateX(2px);
}
/* kill the legacy "notch" artefacts + the 230px hover slab */
body.page-admin .side-nav .side-menu::before,
body.page-admin .side-nav .side-menu::after,
body.page-admin .side-nav .side-menu .side-menu__icon::before,
body.page-admin .side-nav .side-menu .side-menu__icon::after { display: none !important; content: none !important; }

/* icon: mask-image, so the colour follows the row's text colour */
body.page-admin .side-nav .side-menu .side-menu__icon {
  flex: none;
  width: 21px;
  height: 21px;
  position: static;
  background-color: currentColor;
  -webkit-mask-image: var(--ic, var(--ic-default));
  mask-image: var(--ic, var(--ic-default));
  -webkit-mask-size: 21px 21px;
  mask-size: 21px 21px;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: .92;
}
body.page-admin .side-nav .side-menu .side-menu__icon > * { display: none; }

body.page-admin .side-nav .side-menu .side-menu__title {
  margin: 0 !important;
  font-size: 13.6px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .005em;
}
body.page-admin .side-nav .side-menu .side-menu__sub-icon { display: none !important; }

/* active row */
body.page-admin .side-nav > ul > li > .side-menu.side-menu--active,
body.page-admin .side-nav .side-menu.side-menu--active {
  background: #fff !important;
  color: var(--adm-brand) !important;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .55);
  transform: none;
}
body.page-admin .side-nav .side-menu.side-menu--active .side-menu__icon { color: var(--adm-brand) !important; opacity: 1; }
body.page-admin .side-nav .side-menu.side-menu--active .side-menu__title {
  color: var(--adm-brand) !important;
  font-weight: 700 !important;
}

/* per-item icons, keyed off the menu-right code that the JSP puts on @id */
body.page-admin .side-nav ul.menu > li:first-child > .side-menu { --ic: var(--ic-home); }
body.page-admin #Dashboard.side-menu { --ic: var(--ic-grid); }
body.page-admin #DailyPaymentCollection.side-menu { --ic: var(--ic-cash); }
body.page-admin #UserList.side-menu { --ic: var(--ic-users); }
body.page-admin #PaymentList.side-menu { --ic: var(--ic-card); }
body.page-admin #EmployeeList.side-menu { --ic: var(--ic-badge); }
body.page-admin #RoleList.side-menu { --ic: var(--ic-shield); }
body.page-admin #SchemeList.side-menu,
body.page-admin #SchemeListForUpdate.side-menu { --ic: var(--ic-layers); }
body.page-admin #SubSchemeList.side-menu { --ic: var(--ic-list); }
body.page-admin #IfscList.side-menu,
body.page-admin #EditBankDetails.side-menu { --ic: var(--ic-bank); }
body.page-admin #ContactSettings.side-menu { --ic: var(--ic-headset); }
body.page-admin #RefundList.side-menu { --ic: var(--ic-refund); }
body.page-admin #UploadIfscExcel.side-menu { --ic: var(--ic-upload); }
body.page-admin #verifyOfflinePaymentList.side-menu,
body.page-admin #AllotmentList.side-menu { --ic: var(--ic-check); }

/* collapsed rail (< 1280px): icons only, centred */
@media (max-width: 1279px) {
  body.page-admin .side-nav { width: 82px !important; }
  body.page-admin .side-nav > a { justify-content: center; padding: 20px 10px 16px !important; }
  body.page-admin .side-nav ul.menu::before { content: ""; padding: 0 0 6px; }
  body.page-admin .side-nav .side-menu { justify-content: center; padding: 11px 0 !important; margin: 3px 14px !important; }
}

/* mobile menu bar + dropdown (JS isse sidebar ke items se bharta hai) */
body.page-admin .mobile-menu {
  background: linear-gradient(120deg, var(--adm-brand) 0%, var(--adm-brand-dark) 100%) !important;
  box-shadow: 0 6px 20px -12px rgba(0, 0, 0, .6);
  position: sticky;
  top: 0;
  z-index: 70;
}
body.page-admin .mobile-menu .mobile-menu-bar { display: flex; align-items: center; padding: 12px 16px; }
/* hamburger: template ka feather icon kabhi render hi nahi hota tha, isliye
   button dikhta hi nahi tha — yahan apna icon. */
body.page-admin #mobile-menu-toggler {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border-radius: 11px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
}
body.page-admin #mobile-menu-toggler > * { display: none !important; }
body.page-admin #mobile-menu-toggler::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--ic-menu) center / 20px 20px no-repeat;
  mask: var(--ic-menu) center / 20px 20px no-repeat;
}
body.page-admin .mobile-menu.is-open #mobile-menu-toggler::before {
  -webkit-mask-image: var(--ic-close);
  mask-image: var(--ic-close);
}
body.page-admin .mobile-menu .mobile-menu-bar img { width: 34px; height: 34px; padding: 6px; border-radius: 10px; background: #fff; }
body.page-admin .mobile-menu ul {
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
  padding: 10px !important;
  margin: 0;
  list-style: none;
  max-height: 68vh;
  overflow-y: auto;
}
body.page-admin .mobile-menu ul .menu {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 11px;
  color: rgba(255, 255, 255, .84) !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
}
body.page-admin .mobile-menu ul .menu .menu__icon {
  flex: none;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-image: var(--ic, var(--ic-default));
  mask-image: var(--ic, var(--ic-default));
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
body.page-admin .mobile-menu ul .menu .menu__icon > * { display: none; }
body.page-admin .mobile-menu ul .menu--active {
  background: #fff !important;
  color: var(--adm-brand) !important;
  font-weight: 700;
}

/* ============================================================== top bar === */
body.page-admin .contentdashboard,
body.page-admin .content {
  background: transparent !important;
  color: var(--adm-ink) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 28px 44px !important;
  min-width: 0;
}
body.page-admin .top-bar {
  height: auto !important;
  min-height: 70px;
  position: sticky !important;
  top: 0;
  /* app.css har .intro-y / .intro-x block ko position:relative + z-index:49
     deta hai, isliye 35 par content top bar ke upar chala jaata tha. */
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 -28px 4px;
  padding: 12px 28px !important;
  background: rgba(255, 255, 255, .94) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--adm-line);
  border-radius: 0 !important;
  transition: box-shadow .2s ease;
}
body.page-admin .top-bar.is-scrolled { box-shadow: 0 10px 26px -20px rgba(28, 12, 18, .55); }
body.page-admin .top-bar > nav { align-items: center; }

body.page-admin .top-bar .scheme-name { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
body.page-admin .top-bar .scheme-name::before {
  content: "Scheme";
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--adm-muted);
  line-height: 1;
  margin-bottom: 5px;
}
body.page-admin .top-bar.no-scheme .scheme-name::before { display: none; }
body.page-admin .top-bar .scheme-name p {
  margin: 0;
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--adm-ink) !important;
  line-height: 1.2;
}
body.page-admin .top-bar #backBtnIcon a { color: var(--adm-brand) !important; }
body.page-admin .top-bar .backBtnIcon { color: var(--adm-brand) !important; font-size: 22px !important; }

/* user chip with initials avatar (JS sets data-initials) */
body.page-admin .top-bar .user-name-area {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--adm-line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--adm-shadow-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--adm-ink) !important;
  white-space: nowrap;
}
body.page-admin .top-bar .user-name-area::before {
  content: attr(data-initials);
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--adm-brand-light), var(--adm-brand-dark));
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
body.page-admin .top-bar .logout-btn { flex: none; }
body.page-admin .top-bar .logout-btn a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--adm-line);
  background: var(--adm-brand-soft);
  color: var(--adm-brand-dark) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
body.page-admin .top-bar .logout-btn a::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--ic-logout) center / 16px 16px no-repeat;
  mask: var(--ic-logout) center / 16px 16px no-repeat;
}
body.page-admin .top-bar .logout-btn a:hover {
  background: var(--adm-brand) !important;
  border-color: var(--adm-brand) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px -12px rgba(134, 31, 65, .9);
}

/* ================================================================ cards === */
body.page-admin .grid.grid-cols-12 { row-gap: 22px; }
body.page-admin .contentdashboard > .grid,
body.page-admin .content > .grid { margin-top: 22px !important; }
body.page-admin .box {
  border-radius: var(--adm-radius) !important;
  border: 1px solid var(--adm-line) !important;
  background: var(--adm-surface) !important;
  box-shadow: var(--adm-shadow) !important;
  color: var(--adm-ink);
  overflow: hidden;
}
/* nested .box wrappers (button rows) must not look like cards */
body.page-admin .box .box,
body.page-admin .box-new {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible;
}

/* card header strip */
body.page-admin .box > .flex.flex-col.sm\:flex-row,
body.page-admin .box > div[class*="border-b"] {
  padding: 18px 24px !important;
  border-bottom: 1px solid var(--adm-line-soft) !important;
  background: linear-gradient(180deg, #fff 0%, var(--adm-brand-tint) 100%);
}
body.page-admin .box h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  letter-spacing: -.005em;
  color: var(--adm-ink) !important;
}
body.page-admin .box h2::before {
  content: "";
  flex: none;
  width: 4px;
  height: 18px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--adm-brand-light), var(--adm-brand));
}
/* headings elsewhere inherited white from .contentdashboard — force ink */
body.page-admin h1, body.page-admin h2, body.page-admin h3,
body.page-admin h4, body.page-admin label, body.page-admin p,
body.page-admin .textcolor { color: var(--adm-ink); }

/* ================================================================ forms === */
body.page-admin .application-form .input-form { padding: 12px 22px !important; }
body.page-admin .input-form:empty { display: none !important; }
body.page-admin .form-label,
body.page-admin label.form-label {
  display: block;
  margin-bottom: 7px !important;
  font-size: 12.8px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  color: var(--adm-ink-2) !important;
}
body.page-admin .form-control,
body.page-admin input.form-control,
body.page-admin select.form-control,
body.page-admin textarea.form-control {
  width: 100%;
  height: 44px;
  border: 1px solid var(--adm-line) !important;
  border-radius: var(--adm-radius-sm) !important;
  padding: 10px 14px !important;
  font-size: 13.8px !important;
  color: var(--adm-ink) !important;
  background-color: #fff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .03) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.page-admin textarea.form-control { height: auto; min-height: 96px; }
body.page-admin .form-control::placeholder { color: #B6BAC4 !important; }
body.page-admin .form-control:hover { border-color: #E3CDD6 !important; }
body.page-admin .form-control:focus {
  border-color: var(--adm-brand) !important;
  box-shadow: 0 0 0 4px var(--adm-brand-soft) !important;
  outline: none !important;
}
body.page-admin select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23861F41' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  background-size: 15px !important;
  padding-right: 38px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer;
}
body.page-admin input[type="date"].form-control::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
body.page-admin .mandatory { color: #D92D20 !important; }

/* ============================================================== buttons === */
body.page-admin .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 22px !important;
  border-radius: var(--adm-radius-sm) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  border: 1px solid transparent;
  transition: background-color .16s ease, box-shadow .16s ease, transform .12s ease, color .16s ease;
}
body.page-admin .btn-primarynew,
body.page-admin .btn-primary,
body.page-admin a.btn-primarynew,
body.page-admin a.btn-primary {
  background: var(--adm-brand) !important;
  border-color: var(--adm-brand) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px -12px rgba(134, 31, 65, .95) !important;
}
body.page-admin .btn-primarynew:hover,
body.page-admin .btn-primary:hover,
body.page-admin .btn-primarynew:focus,
body.page-admin .btn-primary:focus {
  background: var(--adm-brand-dark) !important;
  border-color: var(--adm-brand-dark) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 24px -12px rgba(108, 24, 52, .95) !important;
}
body.page-admin .btn.btn-outline-secondary,
body.page-admin .btn.btn-secondary {
  background: #fff !important;
  border: 1px solid var(--adm-line) !important;
  color: var(--adm-ink-2) !important;
  box-shadow: var(--adm-shadow-sm) !important;
}
/* app.css forces .btn:hover{color:#fff!important} — beat it */
body.page-admin .btn.btn-outline-secondary:hover,
body.page-admin .btn.btn-outline-secondary:focus,
body.page-admin .btn.btn-secondary:hover,
body.page-admin .btn.btn-secondary:focus {
  background: var(--adm-brand-soft) !important;
  border-color: #E8C9D5 !important;
  color: var(--adm-brand-dark) !important;
}
body.page-admin .btn-success { background: #0F9D58 !important; border-color: #0F9D58 !important; color: #fff !important; }
body.page-admin .btn-danger { background: #D92D20 !important; border-color: #D92D20 !important; color: #fff !important; }
/* button row inside a card */
body.page-admin .box-new .text-center {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 6px 22px 20px;
}
body.page-admin .box-new .text-center .btn { min-width: 118px; margin: 0 !important; }

/* ========================================================== DataTables === */
body.page-admin .dataTables_wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  padding: 2px 0 0;
}
body.page-admin .dataTables_wrapper > * { min-width: 0; }
body.page-admin .dataTables_wrapper .dataTables_length { order: 1; margin: 0; }
body.page-admin .dataTables_wrapper .dataTables_filter { order: 2; margin: 0 0 0 auto; }
body.page-admin .dataTables_wrapper .toolbar { order: 3; margin-left: auto; }
body.page-admin .dataTables_wrapper .toolbar .row,
body.page-admin .dataTables_wrapper .toolbar .float-right,
body.page-admin .dataTables_wrapper .toolbar [class*="col-md"] {
  float: none !important;
  display: flex;
  justify-content: flex-end;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
}
body.page-admin .dataTables_wrapper .toolbar .btn { margin: 0 !important; }
body.page-admin .dataTables_wrapper .upavp-table-scroll,
body.page-admin .dataTables_wrapper > table.dataTable {
  order: 4;
  flex: 0 1 100%;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
}
body.page-admin .dataTables_wrapper .dataTables_processing { order: 4; }
body.page-admin .dataTables_wrapper .dataTables_info { order: 5; margin: 0; }
body.page-admin .dataTables_wrapper .dataTables_paginate { order: 6; margin: 0 0 0 auto; }

/* length + search controls */
body.page-admin .dataTables_wrapper .dataTables_length label,
body.page-admin .dataTables_wrapper .dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--adm-muted) !important;
}
body.page-admin .dataTables_wrapper .dataTables_length select {
  height: 38px;
  min-width: 74px;
  padding: 0 32px 0 12px !important;
  border: 1px solid var(--adm-line) !important;
  border-radius: 9px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23861F41' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 14px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  font-size: 13.2px;
  font-weight: 600;
  color: var(--adm-ink) !important;
  cursor: pointer;
  box-shadow: var(--adm-shadow-sm);
}
body.page-admin .dataTables_wrapper .dataTables_filter input {
  height: 38px;
  width: 260px;
  max-width: 48vw;
  padding: 0 14px 0 38px !important;
  margin: 0 !important;
  border: 1px solid var(--adm-line) !important;
  border-radius: 9px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8F9C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.8'/%3E%3Cpath d='m20 20-4.4-4.4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 12px center !important;
  background-size: 16px !important;
  font-size: 13.4px;
  color: var(--adm-ink) !important;
  box-shadow: var(--adm-shadow-sm);
}
body.page-admin .dataTables_wrapper .dataTables_filter input:focus,
body.page-admin .dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--adm-brand) !important;
  box-shadow: 0 0 0 4px var(--adm-brand-soft) !important;
  outline: none !important;
}

/* the table itself */
/* Chaudi table apne box me scroll hoti hai. Kinare par halki shadow batati
   hai ki aur columns bache hain — scroll karne par woh apne aap hat jaati hai
   (background-attachment: local ka purana trick). */
body.page-admin .upavp-table-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--adm-line);
  border-radius: 13px;
  background-color: #fff;
  background-image:
    linear-gradient(to right, #fff 28%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, #fff 28%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(108, 24, 52, .13), rgba(108, 24, 52, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(108, 24, 52, .13), rgba(108, 24, 52, 0));
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-attachment: local, local, scroll, scroll;
}
body.page-admin .upavp-table-scroll::-webkit-scrollbar { height: 10px; }
body.page-admin .upavp-table-scroll::-webkit-scrollbar-track { background: #FBF5F7; border-radius: 0 0 12px 12px; }
body.page-admin .upavp-table-scroll::-webkit-scrollbar-thumb { background: #E2CBD5; border: 2px solid #FBF5F7; border-radius: 99px; }
body.page-admin .upavp-table-scroll::-webkit-scrollbar-thumb:hover { background: #CBA9B7; }
body.page-admin table.table,
body.page-admin table.dataTable {
  width: auto !important;
  min-width: 100%;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: none !important;
  font-size: 13.4px;
}
body.page-admin table.table-bordered,
body.page-admin table.table-bordered > :not(caption) > * > * { border: none !important; box-shadow: none !important; }
body.page-admin table.table thead th,
body.page-admin table.dataTable thead th {
  padding: 13px 16px !important;
  background: #F8FAFC !important;
  border: none !important;
  border-bottom: 1.5px solid #E2E8F0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #475569 !important;
  white-space: nowrap;
  text-align: left;
  vertical-align: middle;
}
body.page-admin table.table tbody td,
body.page-admin table.dataTable tbody td {
  padding: 13px 16px !important;
  border: none !important;
  border-bottom: 1px solid #F1F5F9 !important;
  color: #1E293B !important;
  vertical-align: middle;
  line-height: 1.45;
  white-space: nowrap;
  font-size: 13px !important;
}
/* lambe text wale cells (address / remarks) wrap ho sakein */
body.page-admin table.table tbody td.wrap,
body.page-admin table.table tbody td[data-wrap] { white-space: normal; min-width: 220px; }
body.page-admin table.table tbody tr:last-child td { border-bottom: none !important; }
body.page-admin table.table tbody tr { transition: background-color .12s ease; }
body.page-admin table.table tbody tr:hover td { background: #F8FAFC !important; }
body.page-admin table.dataTable tbody tr.odd td,
body.page-admin table.dataTable tbody tr.even td { background: transparent; }
/* compact action buttons inside rows */
body.page-admin table.table tbody td .btn {
  height: 34px;
  padding: 0 15px !important;
  font-size: 12.5px !important;
  border-radius: 8px !important;
  white-space: nowrap;
}
body.page-admin table.table tbody td .btn + .btn { margin-left: 6px; }

/* empty state */
body.page-admin td.dataTables_empty {
  padding: 46px 20px !important;
  text-align: center !important;
  color: var(--adm-muted) !important;
  font-size: 13.6px;
  font-weight: 500;
  background: #fff !important;
}
body.page-admin td.dataTables_empty::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  background-color: #D9C4CD;
  -webkit-mask: var(--ic-inbox) center / 40px 40px no-repeat;
  mask: var(--ic-inbox) center / 40px 40px no-repeat;
}
body.page-admin table.table tbody tr:hover td.dataTables_empty { background: #fff !important; }

/* info + pagination */
body.page-admin .dataTables_wrapper .dataTables_info {
  padding: 0 !important;
  font-size: 12.8px;
  font-weight: 500;
  color: var(--adm-muted) !important;
}
body.page-admin .dataTables_wrapper .dataTables_paginate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 !important;
}
body.page-admin .dataTables_wrapper .dataTables_paginate > span { display: inline-flex; gap: 6px; }
body.page-admin .dataTables_wrapper .dataTables_paginate .paginate_button,
body.page-admin .dataTables_wrapper .dataTables_paginate .page-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 11px !important;
  margin: 0 !important;
  border: 1px solid var(--adm-line) !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: var(--adm-ink-2) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: var(--adm-shadow-sm);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
body.page-admin .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
body.page-admin .dataTables_wrapper .dataTables_paginate .page-link:hover {
  background: var(--adm-brand-soft) !important;
  border-color: #E8C9D5 !important;
  color: var(--adm-brand-dark) !important;
}
body.page-admin .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.page-admin .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  background: var(--adm-brand) !important;
  border-color: var(--adm-brand) !important;
  color: #fff !important;
  box-shadow: 0 8px 16px -10px rgba(134, 31, 65, .95) !important;
}
body.page-admin .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.page-admin .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
body.page-admin .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
  background: #fff !important;
  border-color: var(--adm-line-soft) !important;
  color: #C6C9D1 !important;
  box-shadow: none !important;
  cursor: default;
}
body.page-admin .dataTables_wrapper .dataTables_paginate ul.pagination { display: inline-flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
body.page-admin .dataTables_wrapper .dataTables_processing {
  border: 1px solid var(--adm-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: var(--adm-shadow) !important;
  color: var(--adm-ink) !important;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 20px !important;
}

/* ========================================================= status pills === */
body.page-admin .upavp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.8px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.5;
  white-space: nowrap;
}
body.page-admin .upavp-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
body.page-admin .upavp-pill.is-ok { background: var(--adm-ok-bg); color: var(--adm-ok-fg); }
body.page-admin .upavp-pill.is-warn { background: var(--adm-warn-bg); color: var(--adm-warn-fg); }
body.page-admin .upavp-pill.is-bad { background: var(--adm-bad-bg); color: var(--adm-bad-fg); }
body.page-admin .upavp-pill.is-info { background: var(--adm-info-bg); color: var(--adm-info-fg); }

/* ================================================== charts + misc cards === */
body.page-admin [id^="ChartFor"],
body.page-admin #RegistrationPaymentDetaiil,
body.page-admin #applicationPaymentDetails { padding: 8px 6px 14px; }

/* focus visibility */
body.page-admin a:focus-visible,
body.page-admin button:focus-visible,
body.page-admin .btn:focus-visible,
body.page-admin .form-control:focus-visible {
  outline: 2px solid var(--adm-brand) !important;
  outline-offset: 2px;
}

/* content enters softly */
body.page-admin .contentdashboard > .grid,
body.page-admin .content > .grid { animation: admIn .28s ease both; }
@keyframes admIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 767px) {
  body.page-admin .contentdashboard,
  body.page-admin .content { padding: 0 16px 32px !important; }
  body.page-admin .top-bar { margin: 0 -16px 4px; padding: 10px 16px !important; }
  body.page-admin .top-bar .user-name-area { font-size: 0; gap: 0; padding: 4px; border: none; box-shadow: none; }
  body.page-admin .application-form .input-form { width: 100% !important; }
  body.page-admin .dataTables_wrapper .dataTables_filter input { width: 100%; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-admin *, body.page-admin *::before, body.page-admin *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================================
 * SCHEME DETAIL FORM  (SchemeDetail.jsp -> /SchemeData)
 *
 * Yeh page pehle `page-newreg` class use kar raha tha sirf document-card CSS
 * ke liye — uske saath citizen registration page ke sau rules bhi aa jaate the
 * aur legacy `.application-form .input-form { width: 33% }` sab fields ko
 * choti kar deta tha. Ab page ka apna scope hai: `page-schemeform`.
 * ========================================================================= */

/* ------------------------------------------------------------ page head === */
body.page-schemeform .page-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 20px !important;
}
body.page-schemeform .page-head .page-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  border: 1px solid var(--adm-line);
  background: #fff;
  color: var(--adm-brand) !important;
  box-shadow: var(--adm-shadow-sm);
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}
body.page-schemeform .page-head .page-back:hover {
  background: var(--adm-brand);
  color: #fff !important;
  transform: translateX(-2px);
}
body.page-schemeform .page-head .page-back i { font-size: 17px !important; color: inherit !important; }
body.page-schemeform .page-head h2 {
  margin: 0;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -.015em;
  color: var(--adm-ink) !important;
  line-height: 1.25;
}
body.page-schemeform .page-head h2::before { display: none; }
body.page-schemeform .page-head .page-sub {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 500;
  color: var(--adm-muted);
}

/* -------------------------------------------------------------- panels === */
body.page-schemeform .application-form { display: block; }
body.page-schemeform .grid-panel {
  background: var(--adm-surface) !important;
  border: 1px solid var(--adm-line) !important;
  border-radius: var(--adm-radius) !important;
  box-shadow: var(--adm-shadow) !important;
  padding: 24px 26px 26px !important;
  height: 100%;
}
body.page-schemeform .section-title {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 20px !important;
  padding: 0 0 14px !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  letter-spacing: -.005em;
  color: var(--adm-ink) !important;
  border-bottom: 1px solid var(--adm-line-soft) !important;
}
body.page-schemeform .section-title i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  margin: 0 !important;
  border-radius: 10px;
  background: var(--adm-brand-soft);
  color: var(--adm-brand) !important;
  font-size: 14px;
}

/* -------------------------------------------------------------- fields === */
/* legacy `.application-form .input-form { width: 33% }` ko yahan band karte
   hain — is page ka layout apne grid se banta hai. */
body.page-schemeform .application-form .input-form,
body.page-schemeform .input-form {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  display: flex;
  flex-direction: column;
}
body.page-schemeform .input-form:last-child { margin-bottom: 0 !important; }
body.page-schemeform .form-label,
body.page-schemeform label.form-label {
  display: flex !important;
  align-items: center;
  gap: 4px;
  margin: 0 0 7px !important;
  font-size: 12.8px !important;
  font-weight: 600 !important;
  color: var(--adm-ink-2) !important;
  white-space: nowrap;
}
body.page-schemeform .mandatory { color: #D92D20 !important; padding-left: 2px; }
body.page-schemeform .form-control {
  width: 100% !important;
  min-width: 0;
  height: 44px;
}
body.page-schemeform textarea.form-control { height: auto; }
body.page-schemeform .form-hint {
  display: block;
  margin: 6px 0 0 !important;
  font-size: 11.6px !important;
  line-height: 1.5;
  color: var(--adm-muted) !important;
  white-space: normal;
}
body.page-schemeform input[type="date"].form-control,
body.page-schemeform input[type="time"].form-control { padding-right: 10px !important; }
body.page-schemeform input[type="date"].form-control::-webkit-calendar-picker-indicator,
body.page-schemeform input[type="time"].form-control::-webkit-calendar-picker-indicator {
  opacity: .6;
  cursor: pointer;
  filter: invert(16%) sepia(48%) saturate(2589%) hue-rotate(311deg) brightness(93%) contrast(97%);
}

/* two-column rows (markup: .grid.grid-cols-2) */
body.page-schemeform .grid.grid-cols-2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}
body.page-schemeform .grid.grid-cols-2 .input-form { margin-bottom: 0 !important; }

/* checkbox card */
body.page-schemeform .input-form.flex.items-center {
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px;
  padding: 14px 16px !important;
  margin-top: 4px !important;
  border: 1px solid var(--adm-line) !important;
  border-radius: 12px;
  background: var(--adm-brand-tint) !important;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
body.page-schemeform .input-form.flex.items-center:hover { border-color: #E4C6D2 !important; }
body.page-schemeform input[type="checkbox"].form-check-input {
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  flex: none;
  accent-color: var(--adm-brand);
  cursor: pointer;
}
body.page-schemeform .form-check-label {
  margin: 0 !important;
  font-size: 13.8px;
  font-weight: 600;
  color: var(--adm-ink) !important;
  cursor: pointer;
}

/* booking-window note */
body.page-schemeform #regWindowNote,
body.page-schemeform .reg-window-note {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px !important;
  border-radius: 10px;
  border: 1px solid #F0DCE4;
  background: var(--adm-brand-soft) !important;
  color: var(--adm-brand-dark) !important;
  font-size: 12.4px !important;
  line-height: 1.5;
}
body.page-schemeform #regWindowNote:empty { display: none !important; }
body.page-schemeform #regWindowNote b { font-weight: 700; }

/* payment-gateway credential panels */
body.page-schemeform #ccavenueCreds,
body.page-schemeform #razorpayCreds {
  padding: 18px 18px 16px !important;
  border: 1px dashed #E7D2DB !important;
  border-radius: 12px;
  background: var(--adm-brand-tint) !important;
  margin-bottom: 18px;
}
body.page-schemeform #ccavenueCreds h4,
body.page-schemeform #razorpayCreds h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--adm-brand) !important;
}
body.page-schemeform #ccavenueCreds h4::before,
body.page-schemeform #razorpayCreds h4::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--adm-brand);
}
body.page-schemeform hr { border: none; border-top: 1px solid var(--adm-line-soft); margin: 22px 0 !important; }

/* ------------------------------------------------------ document uploads === */
body.page-schemeform .doc-upload-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1500px) { body.page-schemeform .doc-upload-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { body.page-schemeform .doc-upload-grid { grid-template-columns: 1fr; } }

body.page-schemeform .doc-card { height: 100%; }
body.page-schemeform .doc-card .doc-zone { min-height: 128px; cursor: pointer; }
body.page-schemeform .doc-card .doc-zone-empty { cursor: pointer; }
body.page-schemeform .doc-card .form-control-sm { height: 38px; font-size: 13px !important; }
body.page-schemeform .doc-status-col .form-control { width: 104px !important; height: 38px; }
body.page-schemeform .doc-card-hint { margin: 8px 0 12px !important; }
/* the card is hidden by JS when booklet = No */
body.page-schemeform .doc-card.is-hidden { display: none !important; }

/* -------------------------------------------------------- rich content === */
body.page-schemeform .rich-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1280px) { body.page-schemeform .rich-grid { grid-template-columns: 1fr; } }
body.page-schemeform .note-editor.note-frame {
  width: 100% !important;
  margin: 8px 0 0 !important;
  border: 1px solid var(--adm-line) !important;
  border-radius: 12px !important;
  /* overflow:hidden yahan colour palette / table picker / style dropdown ko
     kaat deta tha — isliye visible (corners toolbar/statusbar par gol kiye) */
  overflow: visible;
  background: #fff;
  box-shadow: var(--adm-shadow-sm);
}
body.page-schemeform .note-editor .note-toolbar {
  padding: 8px 10px !important;
  background: var(--adm-brand-tint) !important;
  border-bottom: 1px solid var(--adm-line-soft) !important;
}
body.page-schemeform .note-editor .note-btn:not(.note-color-btn) {
  border-radius: 8px !important;
  border-color: var(--adm-line) !important;
  color: var(--adm-ink-2) !important;
  background: #fff !important;
}
body.page-schemeform .note-editor .note-btn:not(.note-color-btn):hover {
  background: var(--adm-brand-soft) !important;
  color: var(--adm-brand-dark) !important;
}
body.page-schemeform .note-editor .note-editable {
  padding: 16px 18px !important;
  font-size: 13.8px;
  color: var(--adm-ink);
  background: #fff;
}
body.page-schemeform .note-editor .note-placeholder { padding: 16px 18px !important; color: #B6BAC4; }
body.page-schemeform .note-editor .note-statusbar { background: #FCF8F9 !important; border-top: 1px solid var(--adm-line-soft) !important; }

/* ----------------------------------------------------------- action bar === */
body.page-schemeform .form-actionbar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0 0;
  padding: 14px 20px;
  border-radius: 14px;
  border: 1px solid var(--adm-line);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 -2px 18px -12px rgba(28, 12, 18, .4), var(--adm-shadow-sm);
}
body.page-schemeform .form-actionbar .actionbar-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12.6px;
  color: var(--adm-muted);
}
body.page-schemeform .form-actionbar .actionbar-note i { color: var(--adm-brand); }
body.page-schemeform .form-actionbar .actionbar-actions { margin-left: auto; display: flex; gap: 10px; }
body.page-schemeform .form-actionbar .btn { height: 44px; }
body.page-schemeform .form-actionbar .btn-primarynew { min-width: 170px; }

/* the JSP's old bottom spacing is no longer needed */
body.page-schemeform .application-form > .grid > .col-span-12.text-right { text-align: left !important; margin: 0 !important; }

@media (max-width: 900px) {
  body.page-schemeform .grid.grid-cols-2 { grid-template-columns: 1fr !important; }
  body.page-schemeform .form-actionbar { flex-wrap: wrap; }
  body.page-schemeform .form-actionbar .actionbar-actions { width: 100%; }
  body.page-schemeform .form-actionbar .btn { flex: 1 1 auto; }
}

/* ---------- Trust badge row ---------- */
.trust-row {
  display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px;
  background: #fff; border: 1px solid var(--upavp-border); border-radius: var(--upavp-radius);
  padding: 22px 26px; margin: 24px 0;
}
.trust-row .trust-item { display: flex; align-items: center; gap: 12px; min-width: 180px; }
.trust-row .trust-icon {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--upavp-pink-badge); color: var(--upavp-maroon);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.trust-row .trust-title { font-size: 13.5px; font-weight: 600; color: var(--upavp-ink); }
.trust-row .trust-sub { font-size: 12px; color: var(--upavp-muted); }

/* ---------- Payment method selection ---------- */
.payment-method-card {
  border: 1px solid var(--upavp-border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex; align-items: flex-start; gap: 12px;
  cursor: pointer;
  transition: all .15s ease;
  background: #fff;
}
.payment-method-card:hover { border-color: var(--upavp-maroon-light); }
.payment-method-card.selected { border-color: var(--upavp-maroon); background: var(--upavp-pink-soft); }
.payment-method-card .pm-icon {
  width: 38px; height: 38px; border-radius: 8px; flex: none;
  background: var(--upavp-pink-badge); color: var(--upavp-maroon);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.payment-method-card .pm-title { font-size: 14.5px; font-weight: 600; color: var(--upavp-ink); }
.payment-method-card .pm-sub { font-size: 12px; color: var(--upavp-muted); }

.order-summary-card {
  border: 1px solid var(--upavp-border);
  border-radius: var(--upavp-radius);
  padding: 22px 24px;
  background: #fff;
}
.order-summary-card h3 { font-size: 15px; font-weight: 600; color: var(--upavp-ink); margin: 0 0 16px; display:flex; align-items:center; gap:8px; }
.order-summary-card .os-row { display: flex; justify-content: space-between; font-size: 13.5px; padding: 9px 0; border-bottom: 1px dashed var(--upavp-border); color: var(--upavp-ink); }
.order-summary-card .os-row.total { font-weight: 700; border-bottom: none; font-size: 15px; color: var(--upavp-maroon); }

.info-callout {
  background: var(--upavp-info-bg); color: var(--upavp-info-text);
  border-radius: 12px; padding: 16px 18px; font-size: 13px; margin: 18px 0;
}
.info-callout ul { margin: 6px 0 0 18px; padding: 0; }
.info-callout li { margin-bottom: 4px; }
.success-callout {
  background: var(--upavp-success-bg); color: var(--upavp-success-text);
  border-radius: 12px; padding: 16px 18px; font-size: 13px; margin: 18px 0;
}

.amount-hero {
  background: var(--upavp-pink-soft);
  border-radius: var(--upavp-radius);
  padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.amount-hero .amount-value { font-family: 'Lora', serif; font-size: 32px; color: var(--upavp-maroon); font-weight: 700; }
.amount-hero .amount-label { font-size: 12.5px; color: var(--upavp-muted); }

.secure-badge-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.secure-badge-row img { height: 20px; }

/* status pill (payment table) */
.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.status-pill.success { background: var(--upavp-success-bg); color: var(--upavp-success-text); }
.status-pill.pending { background: #FEF3C7; color: #92400E; }
.status-pill.failed { background: #FEE2E2; color: #B91C1C; }

/* ---------- Shared Citizen Portal Footer ---------- */
footer.footer {
  position: relative;
  background: #F8FAFC !important;
  border-top: 3px solid var(--upavp-maroon) !important;
  padding-top: 48px !important;
  padding-bottom: 24px !important;
}
footer.footer > .container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.footer-brand p {
  max-width: 340px;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: #475569 !important;
  margin-top: 12px !important;
  margin-bottom: 16px !important;
}
.footer-col h3, .footer-brand h3 {
  font-family: 'Lora', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 14px;
  padding-bottom: 8px;
  position: relative;
}
.footer-col h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 28px; height: 2.5px;
  background: var(--upavp-maroon);
  border-radius: 2px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col ul li { margin-bottom: 9px; }
.footer-col ul li a {
  color: #475569;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .2s ease;
}
.footer-col ul li a::before {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 11px;
  color: #94A3B8;
  transition: all .2s ease;
}
.footer-col ul li a:hover {
  color: var(--upavp-maroon);
  transform: translateX(3px);
}
.footer-col ul li a:hover::before {
  color: var(--upavp-maroon);
}
.footer-col .footer-contact-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 12px;
  color: #334155;
}
.footer-col .footer-contact-line i {
  color: var(--upavp-maroon);
  font-size: 14px;
  margin-top: 3px;
  flex-shrink: 0;
}
.footer-col .footer-contact-line span b {
  color: #0F172A;
  font-size: 13.5px;
  display: block;
  margin-bottom: 2px;
}
.footer-col .footer-contact-line a {
  color: #334155;
  text-decoration: none;
  font-weight: 500;
  transition: color .2s ease;
}
.footer-col .footer-contact-line a:hover {
  color: var(--upavp-maroon);
  text-decoration: underline;
}
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%; background: #fff;
  border: 1px solid #E2E8F0;
  display: flex; align-items: center; justify-content: center; color: var(--upavp-maroon);
  font-size: 14px;
  text-decoration: none; box-shadow: 0 2px 5px rgba(0,0,0,0.04);
  transition: all .25s ease;
}
.footer-social a:hover {
  background: var(--upavp-maroon);
  color: #fff;
  border-color: var(--upavp-maroon);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(134,31,65,0.22);
}
.footer-bottom-divider {
  margin-top: 36px !important;
  padding-top: 18px !important;
  border-top: 1px solid #E2E8F0 !important;
}
.footer-bottom-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.footer-bottom-bar p {
  color: #64748B;
  font-size: 13px;
  margin: 0;
}
.footer-bottom-bar p a {
  color: #475569;
  text-decoration: none;
  font-weight: 500;
}
.footer-bottom-bar p a:hover {
  color: var(--upavp-maroon);
  text-decoration: underline;
}
.footer-bottom-bar .footer-legal-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom-bar .footer-legal-links a {
  color: #64748B;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color .2s ease;
}
.footer-bottom-bar .footer-legal-links a:hover {
  color: var(--upavp-maroon);
  text-decoration: underline;
}

/* ---------- Scheme list / cards ---------- */
.scheme-toolbar {
  background: #fff; border: 1px solid var(--upavp-border); border-radius: var(--upavp-radius);
  padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 26px;
}
.scheme-toolbar .st-search { flex: 1 1 260px; position: relative; }
.scheme-toolbar .st-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--upavp-muted); }
.scheme-toolbar .st-search input {
  width: 100%; border: 1px solid var(--upavp-border); border-radius: 10px;
  padding: 11px 14px 11px 38px; font-size: 14px; color: var(--upavp-ink);
}
.scheme-toolbar select {
  border: 1px solid var(--upavp-border); border-radius: 10px; padding: 11px 14px; font-size: 14px; color: var(--upavp-ink); min-width: 150px;
}
.scheme-count { color: var(--upavp-muted); font-size: 14px; margin-bottom: 16px; }
.scheme-count b { color: var(--upavp-maroon); }

.scheme-row-card {
  background: #fff; border: 1px solid var(--upavp-border); border-radius: var(--upavp-radius);
  display: flex; gap: 20px; padding: 16px; margin-bottom: 18px; align-items: stretch; flex-wrap: wrap;
  transition: box-shadow .2s ease;
}
.scheme-row-card:hover { box-shadow: 0 10px 30px rgba(134,31,65,0.10); }
.scheme-row-card .scheme-thumb { width: 210px; flex: none; border-radius: 12px; overflow: hidden; background: #f4f4f4; }
.scheme-row-card .scheme-thumb img { width: 100%; height: 150px; object-fit: cover; display: block; }
.scheme-row-card .scheme-body { flex: 1 1 260px; display: flex; flex-direction: column; }
.scheme-row-card .scheme-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.scheme-row-card .scheme-tag {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}
.scheme-tag.tag-residential { background: #FDE8E8; color: #B91C1C; }
.scheme-tag.tag-affordable { background: #E7EFFB; color: #1D4ED8; }
.scheme-row-card h3 { font-family: 'Lora', serif; font-size: 19px; color: var(--upavp-maroon); margin: 0 0 4px; }
.scheme-row-card .scheme-loc { font-size: 13px; color: var(--upavp-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.scheme-row-card .scheme-desc { font-size: 13.5px; color: var(--upavp-ink); margin-bottom: 0; }
.scheme-row-card .scheme-dates { flex: none; width: 170px; display: flex; flex-direction: column; gap: 12px; justify-content: center; border-left: 1px dashed var(--upavp-border); padding-left: 18px; }
.scheme-row-card .scheme-date-item { font-size: 12.5px; color: var(--upavp-ink); }
.scheme-row-card .scheme-date-item .sd-label { color: var(--upavp-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.scheme-row-card .scheme-actions { flex: none; width: 160px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.scheme-row-card .scheme-actions .btn-maroon,
.scheme-row-card .scheme-actions .btn-maroon-outline { width: 100%; font-size: 13.5px; padding: 10px 14px; }

@media (max-width: 900px) {
  .scheme-row-card { flex-direction: column; }
  .scheme-row-card .scheme-thumb { width: 100%; }
  .scheme-row-card .scheme-dates { border-left: none; border-top: 1px dashed var(--upavp-border); padding-left: 0; padding-top: 14px; flex-direction: row; flex-wrap: wrap; }
  .scheme-row-card .scheme-actions { width: 100%; flex-direction: row; }
  .upavp-header .header-inner { flex-direction: column; align-items: flex-start; }
  .upavp-nav { gap: 18px; }
  .page-banner { padding: 22px; }
}

/* ============================================================
   Registration For Booklet - 1:1 Pixel Match with Screenshot 3
   ============================================================ */

.upavp-booklet-page {
  background-color: #FAF8F8 !important;
  background-image: 
    radial-gradient(circle at 5% 5%, rgba(254, 226, 226, 0.45) 0%, transparent 40%),
    radial-gradient(circle at 95% 10%, rgba(255, 237, 213, 0.4) 0%, transparent 45%),
    radial-gradient(circle at 95% 90%, rgba(254, 226, 226, 0.35) 0%, transparent 40%),
    radial-gradient(circle at 5% 95%, rgba(255, 228, 230, 0.3) 0%, transparent 40%) !important;
  background-attachment: fixed !important;
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: #1E293B !important;
  margin: 0 !important;
  padding: 0 !important;
}

.booklet-main-container {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 8px 20px 24px !important;
  position: relative !important;
}

/* --- Hero Section --- */
.booklet-hero-integrated {
  position: relative !important;
  min-height: 200px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 32px 40px 44px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  width: 100% !important;
}

.hero-building-backdrop {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 65% !important;
  background-image: url('../images/hero/upavp-hero-banner.jpg') !important;
  background-size: cover !important;
  background-position: center right !important;
  z-index: 1 !important;
  border-radius: 0 !important;
}

.hero-backdrop-fade {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(90deg, 
    #FAF8F8 0%, 
    #FAF8F8 30%, 
    rgba(250, 248, 248, 0.88) 40%, 
    rgba(250, 248, 248, 0.35) 52%, 
    rgba(250, 248, 248, 0.04) 65%, 
    transparent 78%
  ) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.hero-backdrop-curve {
  position: absolute !important;
  top: -15% !important;
  right: -30px !important;
  width: 280px !important;
  height: 130% !important;
  background: rgba(250, 248, 248, 0.92) !important;
  border-radius: 50% 0 0 50% / 60% 0 0 60% !important;
  box-shadow: -20px 0 40px rgba(250, 248, 248, 0.85) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

.hero-inner-content {
  position: relative !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 24px !important;
}

.hero-text-block {
  flex: 1 1 540px !important;
}

.hero-title-container {
  display: inline-block !important;
}

.hero-scheme-heading {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin: 0 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
}

.hero-title-accent-line {
  width: 100% !important;
  height: 2.5px !important;
  background: #861F41 !important;
  border-radius: 2px !important;
  margin-top: 3px !important;
}

.hero-scheme-desc {
  font-size: 13px !important;
  color: #64748B !important;
  margin: 4px 0 10px 0 !important;
  font-weight: 400 !important;
}

.hero-badges-group {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
}

.hero-badge-pill {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.hero-badge-circle {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #FCE7EB !important;
  color: #861F41 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
}

.hero-badge-label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #1E293B !important;
}

.hero-quote-block {
  flex: 0 0 170px !important;
  text-align: right !important;
  padding-right: 10px !important;
}

.hero-quote-phrase {
  font-family: 'Lora', Georgia, serif !important;
  font-style: italic !important;
  font-size: 14.5px !important;
  line-height: 1.3 !important;
  color: #1E293B !important;
  font-weight: 600 !important;
}

.hero-quote-line {
  width: 38px !important;
  height: 2.5px !important;
  background: #861F41 !important;
  margin-top: 6px !important;
  margin-left: auto !important;
  border-radius: 2px !important;
}

/* --- Form Card --- */
.target-form-card {
  background: #FFFFFF !important;
  border-radius: 14px !important;
  border: 1px solid #EEF2F6 !important;
  box-shadow: 0 6px 24px -4px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02) !important;
  padding: 18px 28px 18px !important;
  margin-bottom: 16px !important;
  position: relative !important;
}

.target-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  margin-bottom: 14px !important;
}

.target-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.target-header-icon-box {
  width: 38px !important;
  height: 38px !important;
  border-radius: 9px !important;
  background: #EFF6FF !important;
  color: #2563EB !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

.target-card-title {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

.target-card-subtitle {
  font-size: 12px !important;
  color: #64748B !important;
  margin: 2px 0 0 0 !important;
}

.mandatory-red {
  color: #DC2626 !important;
  font-weight: 700 !important;
}

.fee-red-text {
  color: #DC2626 !important;
  font-weight: 600 !important;
}

.target-header-alert {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #FFF1F3 !important;
  border: 1px solid #FFE4E8 !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  max-width: 320px !important;
}

.target-header-alert i {
  color: #BE185D !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

.target-header-alert span {
  font-size: 11px !important;
  color: #BE185D !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

/* 3-Column Grid for Both Rows */
.target-grid-row-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 10px !important;
}

.target-input-group {
  display: flex !important;
  flex-direction: column !important;
}

.target-input-label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #1E293B !important;
  margin-bottom: 5px !important;
}

.target-input-wrapper {
  position: relative !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  width: 100% !important;
}

.input-icon-inside {
  position: absolute !important;
  left: 13px !important;
  top: 20px !important;
  transform: translateY(-50%) !important;
  color: #94A3B8 !important;
  font-size: 14px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.currency-symbol-inside {
  position: absolute !important;
  left: 13px !important;
  top: 20px !important;
  transform: translateY(-50%) !important;
  color: #475569 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

input.target-input-field {
  width: 100% !important;
  height: 40px !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 7px !important;
  padding: 0 14px 0 38px !important;
  font-size: 13px !important;
  color: #0F172A !important;
  background: #FFFFFF !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

input.target-input-field:focus {
  border-color: #861F41 !important;
  box-shadow: 0 0 0 3px rgba(134, 31, 65, 0.12) !important;
  outline: none !important;
}

input.target-input-field::placeholder {
  color: #94A3B8 !important;
  font-size: 12.5px !important;
}

input.input-field-readonly {
  background: #F8FAFC !important;
  color: #1E293B !important;
  font-weight: 600 !important;
  border-color: #E2E8F0 !important;
}

.target-input-wrapper > div[style*="color:red"],
.target-input-wrapper > .field-validation-error {
  width: 100% !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #DC2626 !important;
  margin-top: 5px !important;
  padding-left: 2px !important;
  line-height: 1.35 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.target-input-wrapper > div[style*="color:red"]::before,
.target-input-wrapper > .field-validation-error::before {
  content: "\f06a" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 11.5px !important;
  color: #DC2626 !important;
  display: inline-block !important;
}

/* Declaration */
.target-declaration-box {
  margin: 10px 0 6px !important;
  padding: 2px 0 !important;
}

.target-checkbox-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  cursor: pointer !important;
  font-size: 12px !important;
  color: #475569 !important;
  line-height: 1.45 !important;
  user-select: none !important;
}

.target-native-checkbox {
  width: 16px !important;
  height: 16px !important;
  margin-top: 1px !important;
  border-radius: 4px !important;
  accent-color: #861F41 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

/* Danger alert */
.target-alert-danger {
  background: #FEF2F2 !important;
  border: 1px solid #FEE2E2 !important;
  color: #B91C1C !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 10px 0 !important;
}

/* Buttons Row: LEFT vs RIGHT pinned */
.target-buttons-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 14px !important;
  padding-top: 4px !important;
  box-sizing: border-box !important;
}

.btn-action-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #FCE7EB !important;
  color: #861F41 !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 9px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  margin-right: auto !important;
}

.btn-action-back:hover {
  background: #F8D5DC !important;
  color: #6C1834 !important;
}

.btn-action-submit {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #861F41 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 10px 24px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 3px 12px rgba(134, 31, 65, 0.22) !important;
  transition: all 0.2s ease !important;
  margin-left: auto !important;
}

.btn-action-submit:hover {
  background: #6C1834 !important;
  box-shadow: 0 5px 16px rgba(134, 31, 65, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Support / Trust Strip with Vertical Dividers */
.target-trust-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #FFFFFF !important;
  border: 1px solid #EEF2F6 !important;
  border-radius: 12px !important;
  padding: 14px 28px !important;
  box-shadow: 0 3px 16px -2px rgba(15, 23, 42, 0.02) !important;
  margin: 16px 0 24px !important;
}

.trust-strip-col {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
}

.trust-circle-badge {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #FCE7EB !important;
  color: #861F41 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
}

.trust-main-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
}

.trust-sub-desc {
  font-size: 11.5px !important;
  color: #64748B !important;
  margin-top: 1px !important;
}

.trust-vertical-divider {
  width: 1px !important;
  height: 32px !important;
  background: #E2E8F0 !important;
  margin: 0 18px !important;
  flex-shrink: 0 !important;
}

/* Accordion */
.scheme-details-accordion {
  margin-bottom: 24px !important;
}

.btn-accordion-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  background: #FDF6F2 !important;
  border: 1px solid #F5E6DC !important;
  border-radius: 10px !important;
  padding: 12px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1E293B !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.btn-accordion-toggle:hover {
  background: #FAEFE9 !important;
}

.accordion-content {
  margin-top: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 18px !important;
  overflow-x: auto !important;
}

@media (max-width: 900px) {
  .booklet-hero-integrated {
    flex-direction: column !important;
    padding: 24px 20px !important;
  }
  .hero-building-backdrop {
    width: 100% !important;
    opacity: 0.2 !important;
  }
  .hero-inner-content {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .hero-quote-block {
    text-align: left !important;
  }
  .hero-quote-line {
    margin-left: 0 !important;
  }
  .target-grid-row-3 {
    grid-template-columns: 1fr !important;
  }
  .target-form-card {
    padding: 24px 20px !important;
  }
  .target-trust-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 20px !important;
  }
  .trust-vertical-divider {
    display: none !important;
  }
}

/* ============================================================================
   LOGIN PAGE (/Userlogin) — visual match to the approved design mock.
   Everything below is scoped to body.login-page-noscroll, which only the
   login page carries, so the shared header / footer / hero rules used by the
   home, schemes and error pages are untouched.
   Reference metrics were taken from the approved mock at a 1655 x 950
   desktop viewport and are noted next to each block.
   ============================================================================ */

.login-page-noscroll {
  --lp-shell: 1290px;      /* top bar / header shell (content 1250) */
  --lp-hero-shell: 1280px; /* hero shell                            */
  --lp-footer-shell: 1460px;
  --lp-card-w: 485px;      /* OTP card width in the mock            */
  /* ribbon width: full size at the design width, tapering on narrower
     desktops so the text column never gets squeezed */
  --lp-quote-w: clamp(290px, calc(100vw - 1150px), 425px);
  --lp-quote-gap: 5px;     /* clear space between card and ribbon   */
}

/* The page is designed to fit one screen, but it must never clip: when the OTP
   step adds a field the shell grows and the page scrolls instead of cutting off. */
.login-page-noscroll { height: auto; min-height: 100vh; overflow: visible; overflow-x: hidden; }
.login-page-noscroll > .overflow-hidden { height: auto; min-height: 100vh; overflow: visible; }

/* ---------- Top contact strip: 38px tall, both blocks right aligned ---------- */
.login-page-noscroll .contact-topbar { font-size: 14px; padding: 9px 0; line-height: 1.4; }
.login-page-noscroll .contact-topbar .container {
  max-width: none;
  padding: 0 24px;
  justify-content: flex-end;
  gap: 0 18px;
}
.login-page-noscroll .contact-topbar .contact-phones,
.login-page-noscroll .contact-topbar .contact-mail { font-size: 14px; gap: 7px; }
.login-page-noscroll .contact-topbar .contact-sep { margin: 0; font-size: 14px; }

/* ---------- Brand header: 88px tall ---------- */
.login-page-noscroll .upavp-header .header-inner {
  max-width: var(--lp-shell);
  padding: 4px 20px;
  justify-content: flex-start;
  gap: 0;
  flex-wrap: nowrap;
}
.login-page-noscroll .brand-lockup img.brand-icon { height: 80px; }
.login-page-noscroll .upavp-nav { margin-left: auto; gap: 43px; }
.login-page-noscroll .upavp-nav a {
  font-family: 'Lora', serif !important;
  font-size: 19px;
  font-weight: 400;
  color: var(--upavp-ink);
}
.login-page-noscroll .header-right { margin-left: 46px; }
.login-page-noscroll .partner-badge img { height: 48px; }

/* ---------- Hero shell ---------- */
/* the shell is centred in the hero band, so the band itself carries no padding */
.login-page-noscroll .hero-cream-login { padding-top: 0; padding-bottom: 0; }
.login-page-noscroll .hero-cream-login .container {
  width: 100%;
  max-width: var(--lp-hero-shell);
  padding-left: 15px;
  padding-right: 15px;
}

/* Two real columns: a flexible text column and a fixed-width card column,
   with the right-hand strip reserved for the pinned quote ribbon. */
@media (min-width: 1310px) {
  .login-page-noscroll .hero-cream-login .container > .grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--lp-card-w);
    column-gap: 30px;
    /* reserve only the part of the ribbon that reaches inside the centred
       shell; on very wide screens the ribbon clears the shell entirely */
    padding-right: max(0px, calc(var(--lp-quote-w) + 630px - 50vw));
    align-items: center;
  }
  .login-page-noscroll .hero-cream-login .container > .grid > div { grid-column: auto; }
  /* the mock sits the text block a little above the optical centre */
  .login-page-noscroll .hero-cream-login .container > .grid > div:first-child { padding-bottom: 79px; }
}

/* ---------- Hero text block ---------- */
.login-page-noscroll .hero-cream-login .max-w-\[620px\] { max-width: none; }
.login-page-noscroll .hero-cream-login .hero-title {
  font-size: 52px;
  line-height: 1.08;
  margin-bottom: 12px;
}
/* eyebrow line from the mock */
.login-page-noscroll .hero-cream-login .hero-title::before {
  content: "Affordable Homes for a Brighter Tomorrow";
  display: block;
  font-family: 'Karla', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--upavp-maroon);
  padding-left: 58px;
  margin-bottom: 20px;
  background: linear-gradient(var(--upavp-maroon), var(--upavp-maroon)) no-repeat left center / 44px 2px;
}
.login-page-noscroll .hero-cream-login .hero-sub {
  font-size: 17px;
  line-height: 1.45;
  max-width: 490px;
  margin-bottom: 0;
}
.login-page-noscroll .hero-cream-login .feature-badge-row { margin-top: 28px; gap: 27px; }
/* empty JS placeholder for the scheme-document button: keep it out of the flow
   so it cannot push the feature row down (it carries a 50px top margin) */
.login-page-noscroll .hero-cream-login .schemeDocument:empty { display: none; }
.login-page-noscroll .hero-cream-login .feature-badge { width: 100px; }
.login-page-noscroll .hero-cream-login .feature-icon-circle {
  width: 70px; height: 70px; font-size: 26px; margin-bottom: 8px;
}
.login-page-noscroll .hero-cream-login .feature-label { font-size: 14px; line-height: 1.3; }

/* ---------- OTP card ---------- */
.login-page-noscroll .login-otp-card {
  padding: 25px 32px 25px;
  border-radius: 20px;
}
.login-page-noscroll .login-otp-card .login-icon-circle {
  width: 72px; height: 72px; font-size: 28px; margin: 0 auto 12px;
}
.login-page-noscroll .login-otp-card h3 { font-size: 28px; line-height: 1.25; margin-bottom: 0; }
.login-page-noscroll .login-otp-card h3 span { font-size: 22px; line-height: 1.35; margin-top: 5px; }
.login-page-noscroll .login-otp-card .login-sub { font-size: 15px; line-height: 1.45; margin: 10px 0 22px; }
.login-page-noscroll .login-otp-card label { font-size: 15px; line-height: 1.3; margin-bottom: 5px; }
.login-page-noscroll .login-otp-card form { line-height: normal; }
.login-page-noscroll .login-field-wrap { display: block; line-height: normal; }
.login-page-noscroll .login-otp-card #MobileNoDiv,
.login-page-noscroll .login-otp-card #VerifyOtpDiv {
  margin-bottom: 18px !important;
}
.login-page-noscroll .login-otp-card input[type="text"] {
  display: block !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 16px 12px 42px !important;
  font-size: 15px !important;
}
.login-page-noscroll .login-otp-card .btn-maroon,
.login-page-noscroll .login-otp-card .btn-maroon-outline { margin-bottom: 0; }
.login-page-noscroll .login-secure-note {
  font-size: 13.5px;
  padding: 12px 10px;
  margin-top: 18px;
}

/* ---------- Quote ribbon: elliptical maroon sweep, bottom-right ---------- */
.login-page-noscroll .quote-card.quote-card-photo {
  width: var(--lp-quote-w);
  max-width: var(--lp-quote-w);
  padding: 31px 30px 32px max(70px, calc(var(--lp-quote-w) * 0.27));
  border-top-left-radius: 100% 100%;
  border-bottom-left-radius: 0;
  text-align: center;
}
.login-page-noscroll .quote-card-photo .quote-mark { font-size: 40px; margin-bottom: 8px; }
.login-page-noscroll .quote-card-photo p { font-size: 19px; line-height: 1.55; margin: 0; }
.login-page-noscroll .quote-card-photo .quote-source { display: none; }
.login-page-noscroll .quote-card-photo .quote-rule { width: 48px; height: 3px; margin: 14px auto 0; }

/* ---------- Footer ---------- */
.login-page-noscroll footer.footer {
  background: #F4F8FA !important;
  padding-top: 14px !important;
  padding-bottom: 0 !important;
}
.login-page-noscroll footer.footer > .container {
  max-width: var(--lp-footer-shell);
  padding-left: 15px;
  padding-right: 15px;
}
.login-page-noscroll footer.footer .grid > *:nth-child(1) { grid-column: span 5 / span 5; }  /* brand        */
.login-page-noscroll footer.footer .grid > *:nth-child(2) { grid-column: span 3 / span 3; }  /* quick links  */
.login-page-noscroll footer.footer .grid > *:nth-child(3) { grid-column: span 4 / span 4; }  /* our location */
/* the approved design shows three footer columns; the support details in the
   fourth one are already in the maroon contact strip at the top of this page */
.login-page-noscroll footer.footer .grid > *:nth-child(4) { display: none; }
.login-page-noscroll footer.footer .footer-brand > a { display: block; line-height: 0; margin-bottom: 12px !important; }
.login-page-noscroll footer.footer .footer-brand img { width: 315px; max-width: 100%; }
.login-page-noscroll footer.footer .footer-brand p,
.login-page-noscroll footer.footer .footer-social { margin-left: 96px; }
.login-page-noscroll footer.footer .footer-brand p { font-size: 15px; line-height: 1.45; max-width: 400px; }
.login-page-noscroll footer.footer .footer-col h3,
.login-page-noscroll footer.footer .footer-brand h3 {
  font-size: 21px; line-height: 1.2; margin-bottom: 14px !important; padding-bottom: 12px;
}
.login-page-noscroll footer.footer .footer-col ul li { margin-bottom: 6px; line-height: 1.45; }
.login-page-noscroll footer.footer .footer-col ul li a { font-size: 15px; }
.login-page-noscroll footer.footer .footer-col .footer-contact-line { font-size: 15px; line-height: 1.5; }
.login-page-noscroll footer.footer .footer-social { margin-top: 14px !important; gap: 12px; }
.login-page-noscroll footer.footer .footer-social a { width: 38px; height: 38px; margin-bottom: 0 !important; }
.login-page-noscroll footer.footer > .container > div:last-child {
  margin-top: 13px !important;
  padding-top: 12px !important;
  padding-bottom: 10px !important;
  border-top: none !important;
}
/* full-width tint behind the copyright row, without any bleed that could
   introduce a horizontal scrollbar */
.login-page-noscroll footer.footer {
  background: linear-gradient(180deg, #F4F8FA calc(100% - 52px), #EDF1F3 calc(100% - 52px)) !important;
}
.login-page-noscroll footer.footer .footer-bottom-bar p { font-size: 15px; }
.login-page-noscroll footer.footer .footer-bottom-bar .footer-legal-links a { font-size: 15px; }

/* ---------- Hero photo + veil ----------
   Same asset as before; only the crop and the light veil change so the
   composition reads like the mock: buildings and trees along the lower right,
   soft light behind the headline and the OTP card. */
.login-page-noscroll .hero-cream-login {
  background-image:
    radial-gradient(105% 88% at 34% 44%, rgba(255,252,251,0.94) 0%, rgba(255,252,251,0.86) 30%, rgba(255,252,251,0.45) 50%, rgba(255,252,251,0) 82%),
    url('../images/hero/upavp-hero-login.jpg');
  background-size: auto, cover;
  background-position: center, right bottom;
  background-repeat: no-repeat;
}

/* ---------- Narrower desktops / tablets / phones ---------- */
/* Between the design width and the stacked layout the card and ribbon shrink
   together so they can never meet. */
@media (min-width: 1100px) and (max-width: 1309px) {
  .login-page-noscroll .hero-cream-login .container > .grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 430px);
    column-gap: 30px;
    padding-right: 320px;
    align-items: center;
  }
  .login-page-noscroll .hero-cream-login .container > .grid > div { grid-column: auto; }
  .login-page-noscroll .quote-card.quote-card-photo { width: 315px; padding-left: 78px; padding-right: 24px; }
}
/* Below that the ribbon returns to the flow underneath the card, as before. */
@media (max-width: 1099px) {
  .login-page-noscroll { height: auto; overflow: visible; }
  .login-page-noscroll > .overflow-hidden { height: auto; overflow: visible; }
  .login-page-noscroll .hero-cream-login { padding-top: 60px; padding-bottom: 70px; }
  .login-page-noscroll .hero-cream-login .container > .grid { grid-template-columns: 1fr; row-gap: 34px; }
  .login-page-noscroll .hero-cream-login .container > .grid > div { grid-column: 1 / -1; padding-bottom: 0; }
  .login-page-noscroll .quote-card.quote-card-photo {
    position: static; width: auto; max-width: 100%;
    border-radius: var(--upavp-radius);
    padding: 24px 28px; margin-top: 22px !important; text-align: left;
  }
  .login-page-noscroll .quote-card-photo .quote-rule { margin-left: 0; }
  .login-page-noscroll footer.footer { padding-top: 60px !important; }
  .login-page-noscroll #scrollUp { display: flex; }
}

/* ============================================================================
   SCHEMES / HOME PAGE (/) — visual match to the approved design mock.
   Scoped to body.page-schemes so no other page is affected.
   Reference metrics taken from the mock at a 1648px-wide desktop viewport.
   ============================================================================ */

body.page-schemes {
  --sc-shell: 1482px;         /* content shell: 1452 + 2 x 15 padding */
  --sc-ink: #1F2430;
  --sc-muted: #64748B;
  --sc-line: #E6EBF0;
  --sc-page-bg: #F1F3F5;
  background: var(--sc-page-bg);
}

/* ---------- Shell ---------- */
body.page-schemes .schemes-shell {
  max-width: var(--sc-shell);
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* ---------- Header (80px, larger brand lock-up) ---------- */
body.page-schemes .upavp-header .header-inner {
  max-width: 1313px;   /* the mock's header sits on a slightly narrower shell */
  padding: 8px 15px;
  justify-content: flex-start;
  gap: 0;
  flex-wrap: nowrap;
}
body.page-schemes .brand-lockup img.brand-icon { height: 63px; }
body.page-schemes .upavp-nav { margin-left: auto; gap: 40px; }
body.page-schemes .upavp-nav a {
  font-size: 16px;
  color: var(--sc-ink);
  position: relative;
  padding-bottom: 6px;
}
/* the shared header has no active flag; on this page the third link is Schemes */
body.page-schemes .upavp-nav a.active,
body.page-schemes .upavp-nav a:nth-child(3) { color: var(--upavp-maroon); }
body.page-schemes .upavp-nav a.active::after,
body.page-schemes .upavp-nav a:nth-child(3)::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--upavp-maroon); border-radius: 2px;
}
body.page-schemes .header-right { margin-left: 52px; }
body.page-schemes .partner-badge img { height: 52px; }

/* ---------- Full-bleed photo banner ---------- */
.scheme-hero {
  position: relative;
  height: 212px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.86) 22%, rgba(255,255,255,0.55) 38%, rgba(255,255,255,0.12) 52%, rgba(255,255,255,0) 64%),
    url('../images/hero/upavp-hero-home.jpg');
  background-size: auto, cover;
  background-position: center, center bottom;
  background-repeat: no-repeat;
  overflow: hidden;
}
.scheme-hero-inner {
  max-width: var(--sc-shell, 1482px);
  height: 100%;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.scheme-hero-copy { flex: 1 1 auto; min-width: 0; }
.scheme-hero-eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--upavp-maroon);
  padding-left: 58px;
  margin-bottom: 12px;
  background: linear-gradient(var(--upavp-maroon), var(--upavp-maroon)) no-repeat left center / 44px 2px;
}
.scheme-hero-copy h1 {
  font-family: 'Lora', serif;
  font-size: 54px;
  line-height: 1.05;
  color: var(--sc-ink);
  margin: 0 0 14px;
}
.scheme-hero-copy p {
  font-size: 16.5px;
  line-height: 1.5;
  color: #475569;
  margin: 0;
}
.scheme-hero-quote {
  flex: none;
  width: 431px;
  background: #F6F1EA;
  border-radius: 14px;
  padding: 22px 26px 20px;
  text-align: center;
  box-shadow: 0 8px 26px rgba(15,23,42,0.08);
}
.scheme-hero-quote p {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  color: var(--sc-ink);
  margin: 0;
}
.scheme-hero-quote .quote-rule {
  width: 48px; height: 3px; background: var(--upavp-maroon);
  border-radius: 2px; margin: 14px auto 12px;
}
.scheme-hero-quote .quote-source { font-size: 14.5px; color: var(--sc-muted); }

/* ---------- Toolbar ---------- */
body.page-schemes .scheme-toolbar {
  background: transparent;
  border: none;
  padding: 0;
  margin: 25px 0 0;
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
body.page-schemes .scheme-toolbar .st-search { flex: 1 1 320px; position: relative; }
body.page-schemes .scheme-toolbar .st-search i {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: var(--sc-muted); font-size: 15px;
}
body.page-schemes .scheme-toolbar .st-search input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--sc-line);
  border-radius: 10px;
  background: #fff;
  padding: 0 16px 0 46px;
  font-size: 14.5px;
  color: var(--sc-ink);
}
body.page-schemes .scheme-toolbar .st-select { position: relative; flex: none; }
body.page-schemes .scheme-toolbar .st-select:nth-of-type(2) { width: 300px; }
body.page-schemes .scheme-toolbar .st-select:nth-of-type(3) { width: 316px; }
body.page-schemes .scheme-toolbar .st-select i {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: var(--upavp-maroon); font-size: 15px; pointer-events: none;
}
body.page-schemes .scheme-toolbar .st-select select {
  width: 100%;
  height: 40px;
  border: 1px solid var(--sc-line);
  border-radius: 10px;
  background: #fff;
  padding: 0 40px 0 46px;
  font-size: 14.5px;
  color: var(--sc-ink);
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
body.page-schemes .scheme-toolbar .btn-maroon {
  width: 200px; height: 40px; border-radius: 10px;
  font-size: 15px; font-weight: 600; padding: 0;
  margin: 0;   /* style.css gives every button 25px vertical margins */
}

/* ---------- Count / sort row ---------- */
body.page-schemes .scheme-listbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin: 30px 0 0;
}
body.page-schemes .scheme-count { font-size: 15px; color: var(--sc-ink); margin: 0; }
body.page-schemes .scheme-count b { color: var(--upavp-maroon); font-size: 17px; }
body.page-schemes .scheme-sort {
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; color: var(--sc-muted);
}
body.page-schemes .scheme-sort select {
  width: 192px; height: 34px;
  border: 1px solid var(--sc-line); border-radius: 8px;
  background: #fff; padding: 0 32px 0 12px; font-size: 14px; color: var(--sc-ink);
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* ---------- Scheme cards ---------- */
body.page-schemes #schemeListContainer { margin-top: 13px; padding-bottom: 40px; }
@keyframes fadeInUpCard {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

body.page-schemes .scheme-row-card {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  background: #fff;
  border: 1px solid #EDF1F4;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
  padding: 8px 15px;
  margin-bottom: 22px;
  min-height: 124px;
  opacity: 0;
  animation: fadeInUpCard 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: box-shadow .3s ease, transform .3s ease;
}
/* Stagger card load animations */
body.page-schemes .scheme-row-card:nth-child(1) { animation-delay: 0.05s; }
body.page-schemes .scheme-row-card:nth-child(2) { animation-delay: 0.15s; }
body.page-schemes .scheme-row-card:nth-child(3) { animation-delay: 0.25s; }
body.page-schemes .scheme-row-card:nth-child(4) { animation-delay: 0.35s; }
body.page-schemes .scheme-row-card:nth-child(5) { animation-delay: 0.45s; }
body.page-schemes .scheme-row-card:nth-child(n+6) { animation-delay: 0.5s; }

body.page-schemes .scheme-row-card:hover {
  box-shadow: 0 12px 28px rgba(15,23,42,0.12);
  transform: translateY(-2px);
  z-index: 2; position: relative;
}
body.page-schemes .scheme-row-card .scheme-thumb {
  width: 232px; height: 110px; flex: none;
  border-radius: 8px; overflow: hidden; position: relative; background: #E8EDF1;
}
body.page-schemes .scheme-row-card .scheme-img-popup {
  display: block; width: 100%; height: 100%; position: relative; overflow: hidden;
}
@keyframes hintPulseOverlay {
  0% { opacity: 0; transform: scale(0.9); }
  20% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1); }
}
body.page-schemes .scheme-row-card .scheme-img-popup::after {
  content: '\f00e'; /* fa-search-plus */
  font-family: 'Font Awesome 5 Free'; font-weight: 900;
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  color: #fff; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: all 0.3s ease;
  backdrop-filter: blur(2px);
  z-index: 5;
}
/* Show hint animation on the first card on load */
body.page-schemes .scheme-row-card:nth-child(1) .scheme-img-popup::after {
  animation: hintPulseOverlay 1.8s ease 1s; /* Plays once after 1s */
}
body.page-schemes .scheme-row-card .scheme-img-popup:hover::after {
  opacity: 1 !important;
  animation: none !important;
}

body.page-schemes .scheme-row-card .scheme-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-schemes .scheme-row-card .scheme-img-popup:hover img {
  transform: scale(1.1);
}
body.page-schemes .scheme-row-card .scheme-thumb .thumb-loc {
  position: absolute; left: 8px; bottom: 8px;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(15,23,42,0.75); color: #fff;
  font-size: 12.5px; line-height: 1;
  padding: 7px 11px; border-radius: 7px;
  max-width: calc(100% - 16px);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
body.page-schemes .scheme-row-card .scheme-thumb .thumb-loc i { font-size: 12px; }

body.page-schemes .scheme-row-card .scheme-body {
  flex: 1 1 auto; min-width: 0; padding: 0 26px;
  display: flex; flex-direction: column; justify-content: center;
}
body.page-schemes .scheme-row-card h3 {
  font-family: 'Lora', serif;
  font-size: 21px; line-height: 1.25;
  color: var(--sc-ink);
  margin: 0 0 6px;
}
body.page-schemes .scheme-row-card h3 a { color: inherit; text-decoration: none; }
body.page-schemes .scheme-row-card h3 a:hover { color: var(--upavp-maroon); }
body.page-schemes .scheme-row-card .scheme-tags { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
body.page-schemes .scheme-row-card .scheme-tag {
  font-size: 12.5px; font-weight: 600; line-height: 1;
  padding: 8px 12px; border-radius: 6px;
}
body.page-schemes .scheme-tag.tag-residential { background: #FCE7EC; color: #BE1E4B; }
body.page-schemes .scheme-tag.tag-affordable { background: #E6F0FB; color: #1D4ED8; }
body.page-schemes .scheme-tag.tag-open { background: #E6F6EC; color: #15803D; }
body.page-schemes .scheme-tag.tag-closed { background: #EEF1F4; color: #64748B; }
body.page-schemes .scheme-row-card .scheme-desc {
  font-size: 14.5px; line-height: 1.5; color: var(--sc-muted);
  margin: 6px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

body.page-schemes .scheme-row-card .scheme-dates {
  flex: none; width: 271px;
  border-left: 1px solid var(--sc-line);
  padding-left: 28px;
  display: flex; flex-direction: column; gap: 16px; justify-content: center;
}
body.page-schemes .scheme-row-card .scheme-date-item {
  display: flex; align-items: center; gap: 14px;
}
body.page-schemes .scheme-row-card .sd-icon {
  width: 22px; text-align: center; color: var(--sc-muted); font-size: 16px; flex: none;
}
body.page-schemes .scheme-row-card .sd-text { display: flex; flex-direction: column; gap: 3px; }
body.page-schemes .scheme-row-card .sd-label { font-size: 13.5px; color: var(--sc-muted); line-height: 1.1; }
body.page-schemes .scheme-row-card .sd-value { font-size: 15px; font-weight: 600; color: var(--sc-ink); line-height: 1.1; }

body.page-schemes .scheme-row-card .scheme-actions {
  flex: none; width: 199px;
  display: flex; flex-direction: column; gap: 12px; justify-content: center;
}
body.page-schemes .scheme-row-card .scheme-actions .btn-maroon,
body.page-schemes .scheme-row-card .scheme-actions .btn-maroon-outline {
  width: 100%; height: 37px; padding: 0;
  font-size: 14.5px; font-weight: 600; border-radius: 8px;
  margin: 0;
  transition: all 0.25s ease;
}
body.page-schemes .scheme-row-card .scheme-actions .btn-maroon:not(.is-disabled):hover,
body.page-schemes .scheme-row-card .scheme-actions .btn-maroon-outline:not(.is-disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(136, 19, 55, 0.15);
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  body.page-schemes .scheme-row-card { flex-wrap: wrap; gap: 16px; padding: 14px; }
  body.page-schemes .scheme-row-card .scheme-body { padding: 0; flex: 1 1 320px; }
  body.page-schemes .scheme-row-card .scheme-dates {
    border-left: none; padding-left: 0; width: auto; flex-direction: row; gap: 30px;
  }
  body.page-schemes .scheme-row-card .scheme-actions { width: 100%; flex-direction: row; }
  body.page-schemes .scheme-toolbar .st-select:nth-of-type(2),
  body.page-schemes .scheme-toolbar .st-select:nth-of-type(3) { width: auto; flex: 1 1 200px; }
  body.page-schemes .scheme-toolbar .st-select { flex: 1 1 200px; }
}
@media (max-width: 900px) {
  .scheme-hero { height: auto; padding: 34px 0 30px; }
  .scheme-hero-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .scheme-hero-copy h1 { font-size: 38px; }
  .scheme-hero-quote { width: 100%; }
  body.page-schemes .scheme-row-card .scheme-thumb { width: 100%; height: 160px; }
  body.page-schemes .scheme-toolbar .btn-maroon { width: 100%; }
}

/* ============================================================================
   BOOKLET / APPLICATION FORM PAGE — visual match to the approved design mock.
   Scoped to body.upavp-booklet-page. Appended last so it wins over the
   earlier draft rules for this page.
   Reference metrics taken from the mock at a 1654px-wide desktop viewport.
   ============================================================================ */

body.upavp-booklet-page {
  --bk-shell: 1260px;
  --bk-ink: #1F2937;
  --bk-muted: #64748B;
  --bk-line: #E2E8F0;
  background-color: #F8FAFC !important;
  background-image:
    radial-gradient(circle at 4% 6%, rgba(253, 228, 236, 0.45) 0%, transparent 32%),
    radial-gradient(circle at 97% 88%, rgba(253, 228, 236, 0.35) 0%, transparent 30%) !important;
  overflow-x: hidden;
}

/* ---------- Header ---------- */
body.upavp-booklet-page .upavp-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid #EEF2F6 !important;
}

body.upavp-booklet-page .upavp-header .header-inner {
  max-width: var(--bk-shell) !important;
  padding: 10px 15px !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

body.upavp-booklet-page .brand-lockup img.brand-icon {
  height: 56px !important;
  width: auto !important;
}

body.upavp-booklet-page .upavp-nav {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 32px !important;
}

body.upavp-booklet-page .upavp-nav a {
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #1E293B !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

body.upavp-booklet-page .upavp-nav a:hover {
  color: var(--upavp-maroon) !important;
}

body.upavp-booklet-page .header-right {
  margin-left: 36px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

body.upavp-booklet-page .partner-badge img {
  height: 44px !important;
  width: auto !important;
  display: block !important;
}

body.upavp-booklet-page .btn-logout-sleek {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  color: #861F41 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

body.upavp-booklet-page .btn-logout-sleek:hover {
  background: #FCE7EF !important;
  border-color: #861F41 !important;
  color: #6D1432 !important;
}

/* ---------- Page Background & Ambient Glow ---------- */
body.upavp-booklet-page {
  background:
    radial-gradient(ellipse 600px 400px at 0% 30%, rgba(254, 237, 230, 0.7) 0%, transparent 70%),
    radial-gradient(ellipse 600px 400px at 100% 75%, rgba(253, 232, 240, 0.6) 0%, transparent 70%),
    #F8FAFC !important;
  min-height: 100vh !important;
}

/* Hide Logout button in header to match target mockup */
body.upavp-booklet-page .btn-logout-sleek,
body.upavp-booklet-page a[href*="Logout"],
body.upavp-booklet-page a[href*="logout"] {
  display: none !important;
}

/* ---------- Full-bleed photo banner matching Schemes / Home page ---------- */
.scheme-hero,
body.upavp-booklet-page .scheme-hero.booklet-scheme-hero {
  position: relative !important;
  height: auto !important;
  min-height: 220px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.93) 0%, rgba(255,255,255,0.88) 26%, rgba(255,255,255,0.58) 42%, rgba(255,255,255,0.14) 56%, rgba(255,255,255,0) 68%),
    url('../images/hero/upavp-hero-home.jpg') !important;
  background-size: auto, cover !important;
  background-position: center, center bottom !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
  padding: 30px 0 32px !important;
  margin: 0 !important;
  display: block !important;
}

.scheme-hero .scheme-hero-inner {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
}

.scheme-hero .scheme-hero-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.scheme-hero .scheme-hero-eyebrow {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--upavp-maroon) !important;
  padding-left: 54px !important;
  margin-bottom: 10px !important;
  background: linear-gradient(var(--upavp-maroon), var(--upavp-maroon)) no-repeat left center / 40px 2px !important;
}

.scheme-hero h1.hero-scheme-heading,
.scheme-hero h1 {
  font-family: 'Lora', Georgia, serif !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #1F2430 !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.01em !important;
}

.scheme-hero p.hero-scheme-desc,
.scheme-hero p {
  font-size: 15.5px !important;
  line-height: 1.5 !important;
  color: #475569 !important;
  margin: 0 !important;
}

.scheme-hero .scheme-hero-quote {
  flex: none !important;
  width: 410px !important;
  background: #F6F1EA !important;
  border-radius: 14px !important;
  padding: 20px 26px 18px !important;
  text-align: center !important;
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.08) !important;
  border: 1px solid rgba(230, 220, 208, 0.6) !important;
}

.scheme-hero .scheme-hero-quote p {
  font-family: 'Lora', Georgia, serif !important;
  font-style: italic !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
  color: #1F2430 !important;
  margin: 0 !important;
}

.scheme-hero .scheme-hero-quote .quote-rule {
  width: 48px !important;
  height: 3px !important;
  background: var(--upavp-maroon) !important;
  border-radius: 2px !important;
  margin: 12px auto 10px !important;
}

.scheme-hero .scheme-hero-quote .quote-source {
  font-size: 14px !important;
  color: #64748B !important;
  font-weight: 500 !important;
}

/* ---------- Shell & Main Container ---------- */
body.upavp-booklet-page {
  background-color: #F1F5F9 !important;
  color: #0F172A;
}

body.upavp-booklet-page .booklet-main-container {
  max-width: 1240px !important;
  margin: 28px auto 0 !important;
  padding: 0 24px 44px !important;
  position: relative !important;
  z-index: 10 !important;
}

/* ---------- 2-Column Booklet Form with Right-Side Information Card ---------- */
body.upavp-booklet-page .booklet-form-row {
  display: flex !important;
  gap: 28px !important;
  align-items: flex-start !important;
  margin-bottom: 26px !important;
}

body.upavp-booklet-page .booklet-form-col {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.upavp-booklet-page .booklet-reg-side {
  flex: none !important;
  width: 320px !important;
  background: linear-gradient(160deg, #FDF0F5 0%, #FCF5F8 100%) !important;
  border: 1px solid #F6DDE8 !important;
  border-radius: 16px !important;
  padding: 24px 22px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important;
  position: sticky !important;
  top: 24px !important;
}

body.upavp-booklet-page .booklet-reg-side .reg-side-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: #FBDDE7 !important;
  color: var(--upavp-maroon) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  margin-bottom: 14px !important;
}

body.upavp-booklet-page .booklet-reg-side h4 {
  font-family: 'Lora', Georgia, serif !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin: 0 0 10px !important;
  line-height: 1.25 !important;
}

body.upavp-booklet-page .booklet-reg-side > p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #475569 !important;
  margin: 0 0 16px !important;
}

body.upavp-booklet-page .booklet-reg-side hr {
  border: none !important;
  border-top: 1px solid #F2DCE6 !important;
  margin: 0 0 16px !important;
}

body.upavp-booklet-page .booklet-reg-side .reg-side-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: #475569 !important;
}

body.upavp-booklet-page .booklet-reg-side .reg-side-item:last-child {
  margin-bottom: 0 !important;
}

body.upavp-booklet-page .booklet-reg-side .reg-side-item i {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  flex: none !important;
  background: #FBDDE7 !important;
  color: var(--upavp-maroon) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
}

@media (max-width: 1024px) {
  body.upavp-booklet-page .booklet-form-row {
    flex-direction: column !important;
  }
  body.upavp-booklet-page .booklet-reg-side {
    width: 100% !important;
    position: static !important;
  }
}

/* ---------- Form card ---------- */
body.upavp-booklet-page .target-form-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-top: 4px solid var(--upavp-maroon) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.08) !important;
  padding: 0 !important;
  margin: 0 0 26px !important;
  overflow: hidden !important;
}

body.upavp-booklet-page .target-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #EEF2F6 !important;
  padding: 22px 30px !important;
  margin: 0 !important;
}

body.upavp-booklet-page .target-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

body.upavp-booklet-page .target-header-icon-box {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  background: #FDF2F4 !important;
  border: 1px solid #FCE7EF !important;
  color: var(--upavp-maroon) !important;
  font-size: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
}

body.upavp-booklet-page .target-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 17.5px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 4px !important;
  line-height: 1.25 !important;
}

body.upavp-booklet-page .target-card-subtitle {
  font-size: 13px !important;
  color: #64748B !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

body.upavp-booklet-page .target-header-alert {
  background: #FFF5F7 !important;
  border: 1px solid #FED7E2 !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  max-width: 420px !important;
}

body.upavp-booklet-page .target-header-alert i {
  color: #9B1C38 !important;
  background: transparent !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
}

body.upavp-booklet-page .target-header-alert span {
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: #9B1C38 !important;
  font-weight: 500 !important;
}

/* Accordion */
body.upavp-booklet-page .scheme-details-accordion {
  border-bottom: 1px solid #EEF2F6 !important;
  background: #F8FAFC !important;
}

body.upavp-booklet-page .btn-accordion-toggle {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 30px !important;
  background: transparent !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  cursor: pointer !important;
}

body.upavp-booklet-page .accordion-content {
  padding: 18px 30px 22px !important;
  border-top: 1px dashed #CBD5E1 !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #334155 !important;
}

/* ---------- Form body ---------- */
body.upavp-booklet-page .target-form-body {
  padding: 28px 30px 30px !important;
}

body.upavp-booklet-page .target-grid-row-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 24px !important;
  row-gap: 22px !important;
  margin-bottom: 24px !important;
  align-items: start !important;
}

body.upavp-booklet-page .target-input-group {
  margin: 0 !important;
}

body.upavp-booklet-page .target-input-label {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin: 0 0 8px !important;
  line-height: 1.3 !important;
}

body.upavp-booklet-page .target-input-wrapper {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

body.upavp-booklet-page .target-input-wrapper .input-icon-inside {
  position: absolute !important;
  left: 14px !important;
  top: 23px !important;
  transform: translateY(-50%) !important;
  color: #94A3B8 !important;
  font-size: 14px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

body.upavp-booklet-page .target-input-wrapper .currency-symbol-inside {
  position: absolute !important;
  left: 14px !important;
  top: 23px !important;
  transform: translateY(-50%) !important;
  color: var(--upavp-maroon) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

body.upavp-booklet-page input.target-input-field {
  width: 100% !important;
  height: 46px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  padding: 0 14px 0 42px !important;
  font-size: 13.5px !important;
  color: #0F172A !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.upavp-booklet-page input.target-input-field::placeholder {
  color: #94A3B8 !important;
  font-size: 13px !important;
}

body.upavp-booklet-page input.target-input-field:focus {
  border-color: var(--upavp-maroon) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3.5px rgba(134, 31, 65, 0.12) !important;
}

body.upavp-booklet-page input.input-field-readonly,
body.upavp-booklet-page input[readonly] {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
  font-weight: 600 !important;
}

body.upavp-booklet-page input.fee-highlight {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--upavp-maroon) !important;
}

body.upavp-booklet-page .badge-input-status {
  position: absolute !important;
  right: 12px !important;
  top: 23px !important;
  transform: translateY(-50%) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #065F46 !important;
  background: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  pointer-events: none !important;
}

/* Payment Mode Card in 3rd Column of Row 2 */
body.upavp-booklet-page .target-payment-mode-card {
  height: 46px !important;
  background: #F8FAFC !important;
  border: 1.5px dashed #CBD5E1 !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

body.upavp-booklet-page .target-payment-mode-card .pm-icon-wrap {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: #ECFDF5 !important;
  color: #059669 !important;
  font-size: 13.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
}

body.upavp-booklet-page .target-payment-mode-card .pm-text-wrap {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}

body.upavp-booklet-page .target-payment-mode-card .pm-title {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

body.upavp-booklet-page .target-payment-mode-card .pm-sub {
  font-size: 11px !important;
  color: #64748B !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

body.upavp-booklet-page .fee-red-text {
  color: #DC2626 !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
}

body.upavp-booklet-page .mandatory-red {
  color: #DC2626 !important;
}

/* Validation Error Message & Invalid Field Styling */
body.upavp-booklet-page .target-input-wrapper > div[style*="color:red"],
body.upavp-booklet-page .target-input-wrapper > .field-validation-error {
  width: 100% !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #DC2626 !important;
  margin-top: 5px !important;
  padding-left: 2px !important;
  line-height: 1.35 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

body.upavp-booklet-page .target-input-wrapper > div[style*="color:red"]::before,
body.upavp-booklet-page .target-input-wrapper > .field-validation-error::before {
  content: "\f06a" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  color: #DC2626 !important;
  display: inline-block !important;
}

body.upavp-booklet-page input.target-input-field.is-invalid,
body.upavp-booklet-page .target-input-wrapper.has-error input.target-input-field,
body.upavp-booklet-page .target-input-wrapper:has(> div[style*="color:red"]) input.target-input-field,
body.upavp-booklet-page .target-input-wrapper:has(> .field-validation-error) input.target-input-field {
  border-color: #EF4444 !important;
  background-color: #FEF2F2 !important;
}

body.upavp-booklet-page input.target-input-field.is-invalid:focus,
body.upavp-booklet-page .target-input-wrapper.has-error input.target-input-field:focus,
body.upavp-booklet-page .target-input-wrapper:has(> div[style*="color:red"]) input.target-input-field:focus,
body.upavp-booklet-page .target-input-wrapper:has(> .field-validation-error) input.target-input-field:focus {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 3.5px rgba(220, 38, 38, 0.12) !important;
  background-color: #FFFFFF !important;
}

/* Declaration Checkbox */
body.upavp-booklet-page .target-declaration-box {
  background: #F8FAFC !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin: 10px 0 0 !important;
  transition: all 0.15s ease !important;
}

body.upavp-booklet-page .target-declaration-box:hover {
  border-color: #CBD5E1 !important;
  background: #F1F5F9 !important;
}

body.upavp-booklet-page .target-checkbox-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  font-size: 13.5px !important;
  color: #1E293B !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  cursor: pointer !important;
}

body.upavp-booklet-page .target-native-checkbox {
  width: 19px !important;
  height: 19px !important;
  margin: 2px 0 0 !important;
  accent-color: var(--upavp-maroon) !important;
  flex: none !important;
  cursor: pointer !important;
}

/* Due date alert */
body.upavp-booklet-page .target-alert-danger { display: none !important; }
body.upavp-booklet-page .target-alert-danger[style*="display: block"],
body.upavp-booklet-page .target-alert-danger[style*="display:block"],
body.upavp-booklet-page .target-alert-danger[style*="display: flex"] {
  display: flex !important;
}
body.upavp-booklet-page .btn-action-submit[style*="display: none"],
body.upavp-booklet-page .btn-action-submit[style*="display:none"] { display: none !important; }
body.upavp-booklet-page .target-alert-danger {
  align-items: center; gap: 10px;
  background: #FEF2F2 !important; color: #B91C1C !important;
  border: 1px solid #FEE2E2 !important; border-radius: 10px !important;
  padding: 12px 18px !important; font-size: 13.5px !important; margin: 18px 0 0 !important;
}

/* Action Buttons */
body.upavp-booklet-page .target-buttons-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 26px 0 0 !important;
  padding-top: 22px !important;
  border-top: 1px solid #F1F5F9 !important;
}

body.upavp-booklet-page .btn-action-back {
  min-width: 110px !important;
  height: 46px !important;
  background: #FFFFFF !important;
  color: #334155 !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 22px !important;
  margin: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.15s ease !important;
}

body.upavp-booklet-page .btn-action-back:hover {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
  color: #0F172A !important;
}

body.upavp-booklet-page .btn-action-submit {
  min-width: 220px !important;
  height: 46px !important;
  background: linear-gradient(135deg, #861F41 0%, #5E142B 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 0 28px !important;
  margin: 0 !important;
  box-shadow: 0 4px 14px rgba(134, 31, 65, 0.28) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

body.upavp-booklet-page .btn-action-submit:hover {
  box-shadow: 0 8px 22px rgba(134, 31, 65, 0.38) !important;
  transform: translateY(-1px) !important;
  background: linear-gradient(135deg, #9B264E 0%, #6E1733 100%) !important;
}

/* ---------- Trust strip ---------- */
body.upavp-booklet-page .target-trust-strip {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  padding: 22px 30px !important;
  margin: 26px 0 40px !important;
  height: auto !important;
  min-height: 74px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03) !important;
}

body.upavp-booklet-page .trust-strip-col {
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0 20px !important;
  min-width: 0 !important;
}

body.upavp-booklet-page .trust-vertical-divider {
  width: 1px !important;
  height: 38px !important;
  background: #E2E8F0 !important;
  flex: none !important;
}

body.upavp-booklet-page .trust-circle-badge {
  width: 38px !important;
  height: 38px !important;
  background: #FDF2F4 !important;
  border: 1px solid #FCE7EF !important;
  border-radius: 10px !important;
  color: var(--upavp-maroon) !important;
  font-size: 17px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
}

body.upavp-booklet-page .trust-main-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin-bottom: 2px !important;
  line-height: 1.2 !important;
}

body.upavp-booklet-page .trust-sub-desc {
  font-size: 12px !important;
  color: #64748B !important;
  line-height: 1.3 !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  body.upavp-booklet-page .booklet-scheme-hero .scheme-hero-quote {
    width: 340px !important;
    padding: 16px 20px !important;
  }
  body.upavp-booklet-page .booklet-scheme-hero h1.hero-scheme-heading {
    font-size: 32px !important;
  }
  body.upavp-booklet-page .target-grid-row-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.upavp-booklet-page .target-grid-row-3 > .target-input-group:last-child {
    grid-column: span 2 !important;
  }
}

@media (max-width: 860px) {
  body.upavp-booklet-page .booklet-scheme-hero {
    padding: 24px 0 28px !important;
  }
  body.upavp-booklet-page .booklet-scheme-hero .scheme-hero-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  body.upavp-booklet-page .booklet-scheme-hero .scheme-hero-quote {
    width: 100% !important;
  }
  body.upavp-booklet-page .booklet-scheme-hero h1.hero-scheme-heading {
    font-size: 28px !important;
  }
  body.upavp-booklet-page .target-card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 18px 20px !important;
  }
  body.upavp-booklet-page .target-header-alert {
    max-width: 100% !important;
    width: 100% !important;
  }
  body.upavp-booklet-page .target-form-body {
    padding: 20px !important;
  }
  body.upavp-booklet-page .target-grid-row-3 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  body.upavp-booklet-page .target-grid-row-3 > .target-input-group:last-child {
    grid-column: auto !important;
  }
  body.upavp-booklet-page .target-trust-strip {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 16px 20px !important;
  }
  body.upavp-booklet-page .trust-strip-col {
    padding: 0 !important;
  }
  body.upavp-booklet-page .trust-vertical-divider {
    width: 100% !important;
    height: 1px !important;
  }
  body.upavp-booklet-page .target-buttons-row {
    flex-direction: row !important;
    gap: 12px !important;
  }
  body.upavp-booklet-page .btn-action-submit {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}

@media (max-width: 520px) {
  body.upavp-booklet-page .booklet-scheme-hero h1.hero-scheme-heading { font-size: 24px !important; }
  body.upavp-booklet-page .target-buttons-row { flex-direction: column-reverse !important; width: 100% !important; }
  body.upavp-booklet-page .btn-action-back,
  body.upavp-booklet-page .btn-action-submit { width: 100% !important; }
}

/* ============================================================================
   PAYMENT PAGE (/PaymentDetailsForRazorPay) — visual match to the approved mock.
   Scoped to body.upavp-payment-page. The progress stepper is intentionally not
   part of this page (removed on request).
   Reference metrics taken from the mock at a 1647px-wide desktop viewport.
   ============================================================================ */

body.upavp-payment-page {
  --pay-shell: 1493px;      /* 1463 content + 2 x 15 */
  --pay-ink: #1B2A4A;
  --pay-muted: #64748B;
  --pay-line: #E8EDF3;
  background: #F5F6F9 !important;
  padding: 0 !important;
}

body.upavp-payment-page .payment-shell {
  max-width: var(--pay-shell) !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
}
body.upavp-payment-page .payment-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-top: 32px;
}
body.upavp-payment-page .payment-main-card { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
body.upavp-payment-page .payment-side { flex: none; width: 501px; }

/* ---------- Main card ---------- */
body.upavp-payment-page .upavp-card {
  background: #fff;
  border: 1px solid #EEF1F6;
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(15,23,42,0.06);
  overflow: hidden;
}
body.upavp-payment-page .upavp-card-header {
  display: flex; align-items: center; gap: 20px;
  background: #fff;
  border-bottom: none;
  padding: 26px 34px 0;
}
body.upavp-payment-page .upavp-card-header .card-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: #FCE4EA; color: var(--upavp-maroon);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex: none;
}
body.upavp-payment-page .upavp-card-header h2 {
  font-family: 'Lora', Georgia, serif;
  font-size: 21px; font-weight: 700; color: var(--pay-ink); margin: 0 0 5px;
}
body.upavp-payment-page .upavp-card-header p { font-size: 15.5px; color: #475569; margin: 0; }
body.upavp-payment-page .upavp-card-body { padding: 24px 34px 34px; }

/* ---------- Amount panel ---------- */
body.upavp-payment-page .amount-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: #FDECF2;
  border: none;
  border-radius: 12px;
  padding: 16px 30px;
  margin: 0 0 24px;
}
body.upavp-payment-page .amount-hero-left { flex: none; }
body.upavp-payment-page .amount-hero .amount-label { font-size: 14px; color: #64748B; }
body.upavp-payment-page .amount-hero .amount-value {
  font-family: 'Lora', Georgia, serif;
  font-size: 38px; font-weight: 700; color: var(--upavp-maroon);
  line-height: 1.15; margin: 4px 0 6px;
}
body.upavp-payment-page .amount-hero-art { flex: 0 1 auto; align-self: flex-end; }
body.upavp-payment-page .amount-hero-art svg { width: 176px; height: 96px; display: block; }
body.upavp-payment-page .amount-hero-quote {
  flex: none;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 17.5px;
  line-height: 1.5;
  color: var(--upavp-maroon);
  text-align: center;
}
body.upavp-payment-page .amount-hero-rule {
  display: block; width: 110px; height: 3px; border-radius: 2px;
  background: var(--upavp-maroon); margin: 12px auto 0;
}

/* ---------- Payment methods ---------- */
body.upavp-payment-page .pay-section-title {
  font-family: 'Lora', Georgia, serif;
  font-size: 18px; font-weight: 700; color: var(--pay-ink); margin: 0 0 14px;
}
body.upavp-payment-page .payment-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
body.upavp-payment-page .payment-method-card {
  display: flex; align-items: flex-start; gap: 14px;
  border: 1.5px solid var(--pay-line);
  border-radius: 12px;
  background: #fff;
  padding: 20px 20px 22px;
  margin: 0;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
body.upavp-payment-page .payment-method-card.selected {
  border-color: var(--upavp-maroon);
  background: #FDECF2;
}
body.upavp-payment-page .payment-method-card input[type="radio"] {
  width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--upavp-maroon); flex: none;
}
body.upavp-payment-page .payment-method-card .pm-icon {
  width: 30px; flex: none; color: var(--upavp-maroon); font-size: 22px; text-align: center; margin-top: 1px;
}
body.upavp-payment-page .payment-method-card .pm-title {
  font-size: 15.5px; font-weight: 700; color: var(--pay-ink); line-height: 1.35; margin-bottom: 6px;
}
body.upavp-payment-page .payment-method-card .pm-sub { font-size: 14px; color: var(--pay-muted); line-height: 1.45; }

/* ---------- Terms / agree / actions ---------- */
body.upavp-payment-page .pay-terms-link { margin: 22px 0 0; }
body.upavp-payment-page .pay-terms-link a {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--upavp-maroon); font-size: 15px; text-decoration: none;
}
body.upavp-payment-page .pay-terms-link a:hover { text-decoration: underline; }
body.upavp-payment-page .pay-agree-wrap {
  margin: 16px 0 0;
}
body.upavp-payment-page .pay-agree-row {
  display: flex; align-items: center; gap: 12px; margin: 0;
  padding: 8px 12px; border-radius: 8px;
  border: 1.5px solid transparent;
  transition: all 0.25s ease;
}
body.upavp-payment-page .pay-agree-row.terms-error,
.pay-agree-row.terms-error {
  background: #FEF2F2 !important;
  border: 1.5px solid #EF4444 !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15) !important;
  animation: termsShake 0.4s ease-in-out;
}
@keyframes termsShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.pay-terms-error-msg {
  display: none;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  padding: 9px 14px;
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-radius: 8px;
  color: #B91C1C;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}
.pay-terms-error-msg i {
  color: #DC2626;
  font-size: 16px;
  flex: none;
}
body.upavp-payment-page .pay-agree-row input[type="checkbox"] {
  width: 18px; height: 18px; margin: 0; accent-color: var(--upavp-maroon); flex: none;
}
body.upavp-payment-page .pay-agree-row label { font-size: 15px; color: #334155; margin: 0; }
body.upavp-payment-page .payment-help-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  padding: 10px 14px;
  background: #F0F7FF;
  border: 1px solid #BAE6FD;
  border-left: 4px solid #0284C7;
  border-radius: 8px;
  font-size: 13.5px;
  color: #0369A1;
  line-height: 1.45;
}
body.upavp-payment-page .payment-help-note i {
  color: #0284C7;
  font-size: 16px;
  flex: none;
}
body.upavp-payment-page .payment-help-note strong {
  color: #0C4A6E;
  font-weight: 700;
}
body.upavp-payment-page .pay-actions-row {
  display: flex; align-items: center; justify-content: space-between; margin: 24px 0 0;
}
body.upavp-payment-page .btn-pay-back {
  min-width: 126px; height: 51px;
  background: #FCE7EF; color: var(--upavp-maroon);
  border: none; border-radius: 10px;
  font-size: 15.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 22px; margin: 0; cursor: pointer;
}
body.upavp-payment-page .btn-pay-back:hover { background: #F8D5DC; }
body.upavp-payment-page .pay-actions-row .btn-maroon {
  min-width: 242px; height: 51px; border-radius: 10px;
  font-size: 15.5px; font-weight: 600; padding: 0 24px; margin: 0;
}

/* ---------- Sidebar ---------- */
body.upavp-payment-page .order-summary-card {
  background: #fff; border: 1px solid #EEF1F6; border-radius: 16px;
  box-shadow: 0 10px 34px rgba(15,23,42,0.05);
  padding: 20px 24px; margin: 0 0 16px;
}
body.upavp-payment-page .order-summary-card h3 {
  font-family: 'Lora', Georgia, serif;
  font-size: 19px; font-weight: 700; color: var(--pay-ink);
  display: flex; align-items: center; gap: 12px; margin: 0 0 10px;
}
body.upavp-payment-page .order-summary-card h3 i { color: var(--pay-ink); font-size: 20px; }
body.upavp-payment-page .order-summary-card .os-row {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 15px; color: #334155;
  padding: 10px 0; border-bottom: 1px solid #EFF2F6;
}
body.upavp-payment-page .order-summary-card .os-row span:last-child { color: var(--pay-ink); text-align: right; }
body.upavp-payment-page .order-summary-card .os-row.total {
  background: #FDECF2; border: none; border-radius: 10px;
  margin: 12px -8px 0; padding: 12px 14px;
  font-size: 17px; font-weight: 700; color: var(--upavp-maroon);
}
body.upavp-payment-page .order-summary-card .os-row.total span:last-child { color: var(--upavp-maroon); }

body.upavp-payment-page .info-callout {
  background: #EFF5FE; border: 1px solid #DCE8FB; border-radius: 16px;
  padding: 17px 22px; margin: 0 0 16px; color: #334155; font-size: 14.5px;
}
body.upavp-payment-page .info-callout b {
  display: flex; align-items: center; gap: 11px;
  color: #1D4ED8; font-size: 15.5px; font-weight: 700; margin-bottom: 10px;
}
body.upavp-payment-page .info-callout b i {
  color: #fff; background: #2563EB; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
body.upavp-payment-page .info-callout ul { margin: 0 0 0 20px; padding: 0; list-style: disc outside; }
body.upavp-payment-page .info-callout li { margin-bottom: 5px; line-height: 1.5; display: list-item; }
body.upavp-payment-page .info-callout li:last-child { margin-bottom: 0; }

body.upavp-payment-page .success-callout {
  background: #EFFAF3; border: 1px solid #D6F0E1; border-radius: 16px;
  padding: 17px 22px; margin: 0; color: #334155; font-size: 14.5px;
}
body.upavp-payment-page .success-callout b {
  display: flex; align-items: center; gap: 11px;
  color: #15803D; font-size: 15.5px; font-weight: 700; margin-bottom: 8px;
}
body.upavp-payment-page .success-callout b i { color: #16A34A; font-size: 19px; }
body.upavp-payment-page .success-callout p { margin: 0; line-height: 1.5; }
body.upavp-payment-page .secure-badge-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px;
}
body.upavp-payment-page .pay-badge {
  background: #fff; border: 1px solid #E6ECF2; border-radius: 6px;
  height: 30px; min-width: 64px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; letter-spacing: .02em;
}
body.upavp-payment-page .pay-badge-razorpay { color: #0C2451; }
body.upavp-payment-page .pay-badge-visa { color: #1A1F71; font-style: italic; font-size: 15px; }
body.upavp-payment-page .pay-badge-rupay { color: #097A3D; }
body.upavp-payment-page .pay-badge-upi { color: #097A3D; font-style: italic; }
body.upavp-payment-page .pay-badge-mc { gap: 0; }
body.upavp-payment-page .pay-badge-mc i {
  width: 15px; height: 15px; border-radius: 50%; display: inline-block;
}
body.upavp-payment-page .pay-badge-mc i:first-child { background: #EB001B; }
body.upavp-payment-page .pay-badge-mc i:last-child { background: #F79E1B; margin-left: -6px; opacity: .92; }

/* ---------- Trust band ---------- */
body.upavp-payment-page .payment-trust-row {
  background: #fff;
  border: none;
  border-top: 1px solid #EEF1F6;
  border-radius: 0;
  margin: 34px 0 0;
  padding: 0;
  height: 86px;
  display: flex;
  align-items: center;
}
body.upavp-payment-page .trust-row-inner {
  max-width: var(--pay-shell);
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
}
body.upavp-payment-page .payment-trust-row .trust-item {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 0 40px;
  position: relative;
}
body.upavp-payment-page .payment-trust-row .trust-item + .trust-item::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 44px; background: #E8EDF3;
}
body.upavp-payment-page .payment-trust-row .trust-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: #FCE4EA; color: var(--upavp-maroon);
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none;
}
body.upavp-payment-page .payment-trust-row .trust-title { font-size: 15.5px; font-weight: 700; color: var(--pay-ink); }
body.upavp-payment-page .payment-trust-row .trust-sub { font-size: 14px; color: var(--pay-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1250px) {
  body.upavp-payment-page .payment-layout { flex-wrap: wrap; }
  body.upavp-payment-page .payment-side { width: 100%; }
  body.upavp-payment-page .amount-hero-art { display: none; }
}
@media (max-width: 900px) {
  body.upavp-payment-page .payment-method-grid { grid-template-columns: minmax(0,1fr); }
  body.upavp-payment-page .amount-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
  body.upavp-payment-page .amount-hero-quote { text-align: left; }
  body.upavp-payment-page .amount-hero-rule { margin-left: 0; }
  body.upavp-payment-page .upavp-card-header,
  body.upavp-payment-page .upavp-card-body { padding-left: 20px; padding-right: 20px; }
  body.upavp-payment-page .pay-actions-row .btn-maroon { min-width: 0; flex: 1 1 auto; margin-left: 12px; }
  body.upavp-payment-page .payment-trust-row { height: auto; padding: 18px 0; }
  body.upavp-payment-page .trust-row-inner { flex-direction: column; align-items: stretch; gap: 14px; }
  body.upavp-payment-page .payment-trust-row .trust-item { padding: 0 6px; }
  body.upavp-payment-page .payment-trust-row .trust-item + .trust-item::before { display: none; }
}





/* ============================================================================
   NEW REGISTRATION PAGE (/newRegistration) — visual match to the approved mock.
   Scoped to body.page-newreg.
   Reference metrics taken from the mock at a 1656px-wide desktop viewport.
   ============================================================================ */

body.page-newreg {
  --nr-shell: 1622px;        /* 1592 content + 2 x 15 */
  --nr-ink: #1B2A4A;
  --nr-muted: #64748B;
  --nr-line: #E9EDF3;
  background: #F7F5FA !important;
  padding: 0 !important;
}
body.page-newreg .newreg-shell {
  box-sizing: border-box;
  max-width: var(--nr-shell);
  margin: 0 auto;
  padding: 0 15px 40px;
}
body.page-newreg .grid.grid-cols-12 { margin-top: 0 !important; }

/* ---------- "Application Fees Is Non-Refundable" hero ---------- */
body.page-newreg .refundable-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 197px;
  margin: 22px 0 25px;
  padding: 14px 40px 14px 24px !important;
  background: linear-gradient(120deg, #FDEFF4 0%, #FDF3F7 55%, #FCEFF4 100%) !important;
  border: 1px solid #F6DDE8;
  border-radius: 16px;
  overflow: hidden;
  text-align: left !important;
}
body.page-newreg .refundable-banner .rb-copy { text-align: left; }
body.page-newreg .refundable-banner .rb-art { flex: none; width: 200px; }
body.page-newreg .refundable-banner .rb-art svg { width: 100%; height: auto; display: block; }
body.page-newreg .refundable-banner .rb-copy { flex: 1 1 auto; min-width: 0; }
/* the shared .refundable chip style (pink pill, 14px, !important) and the
   .blink animation both target this element, so every property is reset here */
body.page-newreg .refundable-banner .rb-title {
  font-family: 'Lora', Georgia, serif !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  color: var(--upavp-maroon) !important;
  background: transparent !important;
  display: block !important;
  padding: 0 !important;
  text-align: left !important;
  margin: 0 0 10px !important;
  line-height: 1.15 !important;
  border-radius: 0 !important;
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.page-newreg .refundable-banner .rb-sub {
  font-size: 16.5px;
  line-height: 1.55;
  color: #475569;
  margin: 0 0 20px;
  max-width: 700px;
}
body.page-newreg .refundable-banner .rb-action { margin: 0; }
body.page-newreg .refundable-banner .rb-house { flex: none; width: 210px; opacity: .95; }
body.page-newreg .refundable-banner .rb-house svg { width: 100%; height: auto; display: block; }
body.page-newreg .refundable-banner .rb-quote {
  flex: none;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 17.5px;
  line-height: 1.5;
  color: var(--upavp-maroon);
  text-align: center;
  padding-right: 6px;
}
body.page-newreg .refundable-banner .rb-quote-rule {
  display: block; width: 84px; height: 3px; border-radius: 2px;
  background: var(--upavp-maroon); margin: 12px auto 0;
}
body.page-newreg .btn-download-booklet,
body.page-newreg .rb-action .btn-primarynew {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--upavp-maroon) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  height: 44px; padding: 0 24px !important;
  font-size: 15.5px; font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(134,31,65,0.22);
  margin: 0 !important;
}
body.page-newreg .btn-download-booklet:hover { background: var(--upavp-maroon-dark) !important; color: #fff !important; }

/* ---------- Payment Details card ---------- */
body.page-newreg .paydetail-card-wrapper,
body.page-newreg #ccAvenuePaymentTable,
body.page-newreg #razorpayPaymentTable {
  margin-top: 32px !important;
  clear: both;
}
body.page-newreg .intro-y.box {
  background: #fff;
  border: 1px solid #EEF1F6;
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(15,23,42,0.05);
  overflow: hidden;
}
body.page-newreg .paydetail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 24px 26px;
  border-bottom: none;
}
body.page-newreg .paydetail-head-left { display: flex; align-items: center; gap: 18px; }
body.page-newreg .paydetail-icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: #FCE4EA; color: var(--upavp-maroon);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none;
}
body.page-newreg .paydetail-head h2 {
  font-family: 'Lora', Georgia, serif;
  font-size: 24px; font-weight: 700; color: var(--nr-ink); margin: 0 0 4px;
}
body.page-newreg .paydetail-head p { font-size: 15px; color: var(--nr-muted); margin: 0; }
body.page-newreg .paydetail-head-tools { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
body.page-newreg .pd-search { position: relative; width: 425px; max-width: 100%; }
body.page-newreg .pd-search i {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: var(--nr-muted); font-size: 15px;
}
body.page-newreg .pd-search-input {
  width: 100%; height: 41px;
  border: 1px solid var(--nr-line); border-radius: 10px; background: #fff;
  padding: 0 16px 0 46px; font-size: 14.5px; color: var(--nr-ink);
}
body.page-newreg .pd-datefilter { position: relative; width: 212px; }
body.page-newreg .pd-datefilter i {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--upavp-maroon); font-size: 15px; pointer-events: none;
}
body.page-newreg .pd-date-select {
  width: 100%; height: 41px;
  border: 1px solid var(--nr-line); border-radius: 10px; background: #fff;
  padding: 0 38px 0 44px; font-size: 14.5px; color: var(--nr-ink);
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
body.page-newreg .paydetail-body { padding: 0 26px 22px; }
body.page-newreg .paydetail-body .table-responsive { overflow-x: auto; }

/* ---------- Table ---------- */
body.page-newreg .paydetail-body table.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--nr-line);
  border-radius: 10px;
  overflow: hidden;
  margin: 0;
}
body.page-newreg .paydetail-body table.table thead th {
  background: #FCEAF1;
  border: none;
  border-bottom: 1px solid #F5D8E4;
  color: var(--nr-ink);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  padding: 15px 16px;
  white-space: nowrap;
  vertical-align: middle;
  text-align: left !important;
  cursor: pointer;
  user-select: none;
}
body.page-newreg .paydetail-body table.table thead th:last-child { cursor: default; }
body.page-newreg .paydetail-body table.table thead th:not(:last-child)::after {
  content: "\f0dc";               /* fa-sort */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 11px;
  color: #B9C2CE;
  margin-left: 9px;
}
body.page-newreg .paydetail-body table.table thead th.sorted-asc::after { content: "\f0de"; color: var(--upavp-maroon); }
body.page-newreg .paydetail-body table.table thead th.sorted-desc::after { content: "\f0dd"; color: var(--upavp-maroon); }
body.page-newreg .paydetail-body table.table tbody td {
  border: none;
  border-bottom: 1px solid #F1F4F8;
  padding: 17px 16px;
  font-size: 14.5px;
  color: #334155;
  vertical-align: middle;
  text-align: left !important;
  white-space: nowrap;
}
body.page-newreg .paydetail-body table.table tbody tr:last-child td { border-bottom: none; }
body.page-newreg .paydetail-body table.table tbody tr:hover td { background: #FCFAFB; }

body.page-newreg .cell-copy { display: inline-flex; align-items: center; gap: 10px; }
body.page-newreg .copy-btn {
  border: none; background: transparent; padding: 0; cursor: pointer;
  color: #94A3B8; font-size: 14px; line-height: 1;
}
body.page-newreg .copy-btn:hover { color: var(--upavp-maroon); }
body.page-newreg .copy-btn.copied { color: #15803D; }
body.page-newreg .copy-btn.copied::after { content: " copied"; font-size: 11.5px; }

body.page-newreg .status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; line-height: 1;
}
body.page-newreg .status-pill.status-ok { background: #E7F7ED; color: #15803D; }
body.page-newreg .status-pill.status-pending { background: #FEF6E7; color: #B45309; }
body.page-newreg .status-pill.status-failed { background: #FDECEC; color: #B91C1C; }

body.page-newreg .paydetail-body .btn-row-download,
body.page-newreg .paydetail-body .btn-primarynew {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff !important;
  color: var(--upavp-maroon) !important;
  border: 1px solid #F0C8D8 !important;
  border-radius: 9px !important;
  padding: 9px 18px !important;
  font-size: 14.5px; font-weight: 600;
  text-decoration: none; margin: 0 !important;
  box-shadow: none !important;
}
body.page-newreg .paydetail-body .btn-row-download:hover,
body.page-newreg .paydetail-body .btn-primarynew:hover {
  background: #FDECF2 !important; color: var(--upavp-maroon) !important;
}

/* ---------- DataTables chrome ---------- */
body.page-newreg .dataTables_wrapper { padding: 0; }
body.page-newreg .dataTables_length,
body.page-newreg .dataTables_filter { display: none !important; }
body.page-newreg .dataTables_info {
  padding-top: 20px !important;
  font-size: 14.5px;
  color: var(--nr-muted);
  float: left;
}
body.page-newreg .dataTables_paginate {
  padding-top: 14px !important;
  float: right;
  display: flex; align-items: center; gap: 10px;
}
body.page-newreg .dataTables_paginate .paginate_button {
  min-width: 42px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 16px !important;
  border: 1px solid var(--nr-line) !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: var(--nr-ink) !important;
  font-size: 14.5px !important;
  margin: 0 !important;
  cursor: pointer;
}
body.page-newreg .dataTables_paginate .paginate_button.current,
body.page-newreg .dataTables_paginate .paginate_button.current:hover {
  background: var(--upavp-maroon) !important;
  border-color: var(--upavp-maroon) !important;
  color: #fff !important;
}
body.page-newreg .dataTables_paginate .paginate_button.disabled,
body.page-newreg .dataTables_paginate .paginate_button.disabled:hover {
  color: #B9C2CE !important; background: #F8FAFC !important; cursor: default;
}
body.page-newreg .dataTables_paginate .paginate_button:hover {
  background: #FDECF2 !important; color: var(--upavp-maroon) !important;
}
body.page-newreg .dataTables_wrapper::after { content: ""; display: block; clear: both; }

/* ---------- Responsive ---------- */
@media (max-width: 1250px) {
  body.page-newreg .refundable-banner { flex-wrap: wrap; padding: 24px; }
  body.page-newreg .refundable-banner .rb-house { display: none; }
  body.page-newreg .refundable-banner .rb-quote { width: 100%; text-align: left; }
  body.page-newreg .refundable-banner .rb-quote-rule { margin-left: 0; }
  body.page-newreg .pd-search { width: 100%; }
}
@media (max-width: 900px) {
  body.page-newreg .refundable-banner .rb-art { display: none; }
  body.page-newreg .refundable-banner .rb-title { font-size: 26px; }
  body.page-newreg .paydetail-head { padding: 20px; }
  body.page-newreg .paydetail-head-tools { width: 100%; }
  body.page-newreg .pd-datefilter { width: 100%; }
  body.page-newreg .paydetail-body { padding: 0 16px 18px; }
}

/* ============================================================================
   NEW REGISTRATION — multi-step application form
   ============================================================================ */

/* ---------- full-bleed scheme hero ---------- */
body.page-newreg { overflow-x: hidden; }
body.page-newreg #userFormDiv { background: transparent; border: none; box-shadow: none; overflow: visible; }
body.page-newreg .newreg-hero {
  position: relative;
  margin-left: calc(50% - 50vw);
  width: 100vw;
  height: 125px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(247,245,250,0.97) 0%, rgba(247,245,250,0.93) 26%, rgba(247,245,250,0.55) 40%, rgba(247,245,250,0.08) 54%, rgba(247,245,250,0) 64%),
    url('../images/hero/booklet-page-bg.png');
  background-size: auto, cover;
  background-position: center, center 35%;
  background-repeat: no-repeat;
}
body.page-newreg .newreg-hero-curve {
  position: absolute; top: -60%; right: -80px; width: 430px; height: 220%;
  background: #F7F5FA; border-radius: 50%; z-index: 2;
}
body.page-newreg .newreg-hero-inner {
  position: relative; z-index: 3;
  box-sizing: border-box;
  max-width: var(--nr-shell); height: 100%;
  margin: 0 auto; padding: 0 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
}
body.page-newreg .newreg-hero-copy h1 {
  font-family: 'Lora', Georgia, serif;
  font-size: 34px; font-weight: 700; color: #1B2A4A; margin: 0; line-height: 1.1;
}
body.page-newreg .newreg-hero-rule { width: 62px; height: 3px; border-radius: 2px; background: var(--upavp-maroon); margin: 7px 0 8px; }
body.page-newreg .newreg-hero-copy p { font-size: 15.5px; color: #475569; margin: 0; }
body.page-newreg .newreg-hero-quote {
  flex: none; text-align: center;
  font-family: 'Lora', Georgia, serif; font-style: italic; font-weight: 600;
  font-size: 17.5px; line-height: 1.5; color: #1B2A4A; padding-right: 20px;
}
body.page-newreg .newreg-hero-quote-rule {
  display: block; width: 60px; height: 3px; border-radius: 2px;
  background: var(--upavp-maroon); margin: 10px auto 0;
}

/* ---------- collapsible scheme terms ---------- */
body.page-newreg .reg-terms { margin: 16px 0 0; }
body.page-newreg .reg-terms-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid var(--nr-line); border-radius: 12px;
  padding: 14px 20px; font-size: 15px; font-weight: 600; color: var(--nr-ink);
  cursor: pointer; margin: 0;
}
body.page-newreg .reg-terms-toggle i:first-child { color: var(--upavp-maroon); margin-right: 8px; }
body.page-newreg .reg-terms-body {
  background: #fff; border: 1px solid var(--nr-line); border-top: none;
  border-radius: 0 0 12px 12px; padding: 18px 20px; overflow-x: auto;
}

/* ---------- stepper ---------- */
body.page-newreg .reg-stepper-wrap {
  background: #fff; border: 1px solid #EEF1F6; border-radius: 14px;
  box-shadow: 0 6px 22px rgba(15,23,42,0.05);
  padding: 14px 18px; margin: 18px 0 16px;
}
body.page-newreg .reg-stepper {
  display: flex; align-items: center; justify-content: space-between;
  gap: 4px; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
}
body.page-newreg .reg-stepper::-webkit-scrollbar { height: 5px; }
body.page-newreg .reg-stepper::-webkit-scrollbar-thumb { background: #E4D3DA; border-radius: 3px; }
body.page-newreg .rs-step {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px; flex: 0 0 auto; min-width: 0;
  background: transparent; border: none; border-radius: 0;
}
/* compact "Step N of 7" line, shown once the chip labels are dropped */
body.page-newreg .rs-current { display: none; align-items: center; gap: 10px; margin-bottom: 10px; }
body.page-newreg .rsc-badge {
  background: var(--upavp-maroon); color: #fff; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  padding: 5px 11px; white-space: nowrap; flex: none;
}
body.page-newreg .rsc-title {
  font-size: 14.5px; font-weight: 700; color: var(--nr-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.page-newreg .rs-num {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: #EEF1F5; color: #94A3B8;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14.5px; font-weight: 700;
}
body.page-newreg .rs-ico { color: #B7C0CC; font-size: 16px; flex: none; }
body.page-newreg .rs-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.page-newreg .rs-text b {
  font-size: 14.5px; font-weight: 700; color: #94A3B8; white-space: nowrap;
  position: relative; padding-bottom: 3px;
}
body.page-newreg .rs-text i {
  font-style: normal; font-size: 12.5px; color: #A9B2BE; white-space: nowrap;
}
body.page-newreg .rs-sep { color: #CBD5E1; font-size: 13px; flex: none; }

body.page-newreg .rs-step.is-done .rs-num { background: var(--upavp-maroon); color: #fff; }
body.page-newreg .rs-step.is-done .rs-ico { color: var(--upavp-maroon); }
body.page-newreg .rs-step.is-done .rs-text b { color: var(--nr-ink); }
body.page-newreg .rs-step.is-done .rs-text i { color: #15803D; }

body.page-newreg .rs-step.is-active .rs-num { background: var(--upavp-maroon); color: #fff; }
body.page-newreg .rs-step.is-active .rs-ico { color: var(--upavp-maroon); }
body.page-newreg .rs-step.is-active .rs-text b { color: var(--upavp-maroon); }
body.page-newreg .rs-step.is-active .rs-text b::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--upavp-maroon); border-radius: 2px;
}
body.page-newreg .rs-step.is-active .rs-text i { color: var(--nr-muted); }

/* ---------- two-column body ---------- */
body.page-newreg .reg-body,
body.page-newreg .reg-body *,
body.page-newreg .reg-stepper-wrap,
body.page-newreg .reg-stepper-wrap * { box-sizing: border-box; }
body.page-newreg .reg-body { 
  display: flex; 
  align-items: flex-start; 
  gap: 16px; 
  margin-bottom: 30px !important;
}
body.page-newreg .reg-form-col {
  flex: 1 1 auto; min-width: 0;
  background: #fff; border: 1px solid #EEF1F6; border-radius: 16px;
  box-shadow: 0 10px 34px rgba(15,23,42,0.05);
  overflow: hidden;
}
body.page-newreg .reg-side {
  flex: none; width: 294px;
  background: linear-gradient(160deg, #FDF0F5 0%, #FCF5F8 100%);
  border: 1px solid #F6DDE8; border-radius: 16px;
  padding: 24px 22px;
}
body.page-newreg .reg-side-icon {
  width: 56px; height: 56px; border-radius: 50%; background: #FBDDE7; color: var(--upavp-maroon);
  display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px;
}
body.page-newreg .reg-side h4 {
  font-family: 'Lora', Georgia, serif;
  font-size: 21px; font-weight: 700; color: var(--nr-ink); margin: 0 0 10px; line-height: 1.25;
}
body.page-newreg .reg-side > p { font-size: 14.5px; line-height: 1.55; color: #475569; margin: 0 0 16px; }
body.page-newreg .reg-side hr { border: none; border-top: 1px solid #F2DCE6; margin: 0 0 16px; }
body.page-newreg .reg-side-item {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px;
  font-size: 14.5px; line-height: 1.45; color: #475569;
}
body.page-newreg .reg-side-item:last-child { margin-bottom: 0; }
body.page-newreg .reg-side-item i {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: #FBDDE7; color: var(--upavp-maroon);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}

/* ---------- step header ---------- */
body.page-newreg .step-head {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(120deg, #FDF1F6 0%, #FCF7FA 100%);
  border-bottom: 1px solid #F6E4EC;
  padding: 20px 26px;
  margin: 0 0 4px;
}
body.page-newreg .step-head-icon {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: #FBDDE7; color: var(--upavp-maroon);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
body.page-newreg .step-head-text { flex: 1 1 320px; min-width: 0; }
body.page-newreg .step-head-text h3 {
  font-family: 'Lora', Georgia, serif;
  font-size: 21px; font-weight: 700; color: var(--nr-ink); margin: 0 0 4px;
}
body.page-newreg .step-head-text p { font-size: 15px; color: #475569; margin: 0; }
body.page-newreg .step-head-note {
  flex: none; max-width: 320px;
  display: flex; align-items: center; gap: 11px;
  background: #FCE7EF; border-radius: 10px; padding: 9px 14px;
  font-size: 13px; line-height: 1.35; color: var(--upavp-maroon);
}
body.page-newreg .step-head-note i {
  color: #fff; background: var(--upavp-maroon);
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}

/* ---------- fields ---------- */
body.page-newreg .reg-form-col .preview > .grid,
body.page-newreg .reg-form-col .grid.grid-cols-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 30px !important;
  padding: 0 26px !important;
  margin: 0 !important;
}
/* the legacy .col-md-4 / bootstrap widths fight the grid tracks - neutralise them */
body.page-newreg .reg-form-col .grid.grid-cols-3 > * {
  width: auto !important; max-width: 100% !important; min-width: 0 !important;
  flex: initial !important; padding-left: 0 !important; padding-right: 0 !important;
}
body.page-newreg .reg-form-col .col-md-4 { margin-top: 18px !important; }
body.page-newreg .reg-form-col .form-label,
body.page-newreg .reg-form-col label.form-label {
  display: block !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #1F2937 !important;
  margin: 0 0 8px !important;
}
body.page-newreg .reg-form-col .form-control {
  width: 100% !important;
  min-height: 44px !important;
  border: 1px solid var(--nr-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  color: var(--nr-ink) !important;
  box-shadow: none !important;
}
body.page-newreg .reg-form-col textarea.form-control { min-height: 90px !important; }
body.page-newreg .reg-form-col .form-control:focus {
  border-color: var(--upavp-maroon) !important;
  box-shadow: 0 0 0 3px rgba(134,31,65,0.08) !important;
}
body.page-newreg .reg-form-col .form-control[readonly] { background: #F1F4F8 !important; color: #475569 !important; }
body.page-newreg .reg-form-col select.form-control {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 38px !important;
}
body.page-newreg .reg-form-col .mandatory { color: #E11D48 !important; }

/* icons inside the address fields, as in the approved design */
body.page-newreg .reg-form-col #ccity,
body.page-newreg .reg-form-col #cpincode,
body.page-newreg .reg-form-col #cstate,
body.page-newreg .reg-form-col #cdistrict,
body.page-newreg .reg-form-col #paddress2,
body.page-newreg .reg-form-col #pcity,
body.page-newreg .reg-form-col #ppincode,
body.page-newreg .reg-form-col #pstate,
body.page-newreg .reg-form-col #pdistrict { padding-left: 46px !important; background-repeat: no-repeat !important; background-position: left 15px center, right 14px center !important; }
body.page-newreg .reg-form-col #ccity,
body.page-newreg .reg-form-col #pcity {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V8l7-5 7 5v13M9 21v-6h6v6'/%3E%3C/svg%3E") !important;
}
body.page-newreg .reg-form-col #cpincode,
body.page-newreg .reg-form-col #ppincode {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") !important;
}
body.page-newreg .reg-form-col #cstate,
body.page-newreg .reg-form-col #pstate {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6l7-3 8 3 7-3v15l-7 3-8-3-7 3z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
body.page-newreg .reg-form-col #cdistrict,
body.page-newreg .reg-form-col #pdistrict {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M9 8h2M13 8h2M9 12h2M13 12h2M9 16h6'/%3E%3C/svg%3E") !important;
}

/* ---------- step buttons ---------- */
body.page-newreg .reg-form-col .float-end {
  display: flex !important; align-items: center !important;
  float: none !important;
  padding: 0 26px 26px !important;
  margin-top: 26px !important;
}
body.page-newreg .reg-form-col .float-end .btn-primarynew {
  height: 48px; min-width: 148px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 10px !important; border: none !important;
  font-size: 15.5px !important; font-weight: 600 !important;
  margin: 0 !important; padding: 0 24px !important; box-shadow: none !important;
}
body.page-newreg .reg-form-col .float-end [id^="preForm"] {
  background: #FCE7EF !important; color: var(--upavp-maroon) !important;
}
body.page-newreg .reg-form-col .float-end [id^="preForm"]:hover { background: #F8D5DC !important; }
body.page-newreg .reg-form-col .float-end [id^="nextForm"],
body.page-newreg .reg-form-col .float-end #registerUser {
  background: var(--upavp-maroon) !important; color: #fff !important;
  margin-left: auto !important;
  box-shadow: 0 6px 18px rgba(134,31,65,0.20) !important;
}
body.page-newreg .reg-form-col .float-end [id^="nextForm"]::after,
body.page-newreg .reg-form-col .float-end #registerUser::after {
  content: "\f061"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 13px;
}
body.page-newreg .reg-form-col .float-end [id^="preForm"]::before {
  content: "\f060"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 13px;
}


/* ---------- step 7: fee table, declaration, submit (Modern Enhanced UI) ---------- */
body.page-newreg .reg-form-col #Form7 .form7-body-wrap {
  padding: 16px 26px 26px !important;
}

/* Property & Payment Plan Section */
body.page-newreg .scheme-select-section {
  margin-top: 6px;
}
body.page-newreg .scheme-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}
body.page-newreg .scheme-section-header .ssh-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--nr-ink);
  display: flex;
  align-items: center;
  gap: 9px;
}
body.page-newreg .scheme-section-header .ssh-title i {
  color: var(--upavp-maroon);
  font-size: 16px;
}
body.page-newreg .scheme-section-header .ssh-hint {
  font-size: 12.5px;
  color: #64748B;
  background: #F1F5F9;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

/* Table Container & Rows */
body.page-newreg .scheme-table-wrap {
  border: 1px solid #F0D5DF !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  box-shadow: 0 4px 20px rgba(142, 31, 69, 0.05) !important;
}
body.page-newreg table.scheme-plan-table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
body.page-newreg table.scheme-plan-table thead tr {
  background: linear-gradient(90deg, #8E1F45 0%, #761838 100%) !important;
}
body.page-newreg table.scheme-plan-table thead th {
  background: transparent !important;
  color: #FFFFFF !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 14px 18px !important;
  border: none !important;
  white-space: nowrap;
  vertical-align: middle !important;
}
body.page-newreg table.scheme-plan-table tbody tr.scheme-row-item {
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 4px solid transparent;
  background: #FFFFFF;
}
body.page-newreg table.scheme-plan-table tbody tr.scheme-row-item td {
  padding: 16px 18px !important;
  font-size: 14.5px !important;
  color: #334155 !important;
  border: none !important;
  border-bottom: 1px solid #F3E8EC !important;
  vertical-align: middle !important;
}
body.page-newreg table.scheme-plan-table tbody tr.scheme-row-item:last-child td {
  border-bottom: none !important;
}
body.page-newreg table.scheme-plan-table tbody tr.scheme-row-item:hover {
  background: #FFF5F8 !important;
}
body.page-newreg table.scheme-plan-table tbody tr.scheme-row-item:hover td {
  background: transparent !important;
}
body.page-newreg table.scheme-plan-table tbody tr.scheme-row-item.selected-scheme-row {
  border-left: 4px solid var(--upavp-maroon) !important;
  background: linear-gradient(90deg, #FFF0F5 0%, #FFFFFF 100%) !important;
}
body.page-newreg table.scheme-plan-table tbody tr.scheme-row-item.selected-scheme-row td {
  background: transparent !important;
}
body.page-newreg table.scheme-plan-table tbody tr.scheme-row-item.selected-scheme-row .row-check-icon {
  opacity: 1;
  color: var(--upavp-maroon);
}

/* Radio button styling */
body.page-newreg .custom-radio-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.page-newreg .custom-radio-shell input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--upavp-maroon);
  cursor: pointer;
  margin: 0 !important;
}

/* Mode of payment column */
body.page-newreg .plan-mode-label {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.page-newreg .row-check-icon {
  font-size: 15px;
  color: #CBD5E1;
  transition: all 0.2s ease;
}
body.page-newreg .plan-name {
  font-weight: 600;
  color: #0F172A;
  font-size: 14.5px;
}

/* Category badge */
body.page-newreg .cat-pill-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: #FCE7EF;
  color: var(--upavp-maroon);
  border: 1px solid #F6CAD8;
}
body.page-newreg .cat-pill-badge.cat-General {
  background: #EFF6FF;
  color: #1D4ED8;
  border-color: #BFDBFE;
}

/* Registration Fee column */
body.page-newreg .plan-fee-text {
  font-size: 16px;
  font-weight: 700;
  color: #0F172A;
  display: flex;
  align-items: center;
  gap: 3px;
}
body.page-newreg .fee-curr-sym {
  font-size: 14px;
  color: #64748B;
  font-weight: 600;
}
body.page-newreg .fee-num {
  color: var(--upavp-maroon);
}

/* Area badge */
body.page-newreg .plan-area-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}
body.page-newreg .plan-area-badge small {
  font-size: 10.5px;
  color: #64748B;
  font-weight: 700;
}

/* ---------- Fee Summary Hero Card ---------- */
body.page-newreg .fee-summary-hero {
  margin-top: 22px;
  background: linear-gradient(135deg, #FFF6F9 0%, #FFFFFF 60%, #FFF8FA 100%);
  border: 1.5px solid #F3CFDB;
  border-radius: 16px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: 0 8px 26px rgba(142, 31, 69, 0.06);
  position: relative;
  overflow: hidden;
}
body.page-newreg .fee-summary-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, var(--upavp-maroon) 0%, #D4426F 100%);
}
body.page-newreg .fee-hero-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 260px;
}
body.page-newreg .fee-hero-icon-ring {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #FCE7EF;
  color: var(--upavp-maroon);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex: none;
  box-shadow: 0 4px 14px rgba(142, 31, 69, 0.12);
}
body.page-newreg .fee-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.page-newreg .fee-hero-title {
  font-size: 16.5px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.01em;
}
body.page-newreg .fee-hero-desc {
  font-size: 13px;
  color: #64748B;
  line-height: 1.4;
}
body.page-newreg .fee-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
body.page-newreg .fee-display-group {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
body.page-newreg .fee-hero-curr {
  font-family: 'Lora', Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--upavp-maroon);
}
body.page-newreg .fee-hero-val {
  font-family: 'Lora', Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--upavp-maroon);
  line-height: 1;
}
body.page-newreg .fee-hero-chip {
  display: inline-flex;
  align-items: center;
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ---------- Submission Advisory Banner ---------- */
body.page-newreg .submission-advisory-banner {
  margin-top: 22px;
  background: linear-gradient(135deg, #FFFDF8 0%, #FFF8F9 100%);
  border: 1px solid #FAD7DF;
  border-left: 5px solid #D93863;
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 4px 18px rgba(217, 56, 99, 0.06);
}
body.page-newreg .advisory-badge-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #FDE8ED;
  color: #D93863;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex: none;
}
body.page-newreg .advisory-content-col {
  flex: 1 1 auto;
  min-width: 0;
}
body.page-newreg .advisory-heading {
  font-size: 14.5px;
  font-weight: 700;
  color: #8E1F45;
  margin-bottom: 7px;
  letter-spacing: -0.01em;
}
body.page-newreg .advisory-text-en,
body.page-newreg .advisory-text-hi {
  font-size: 13.5px;
  line-height: 1.55;
  color: #475569;
  margin-bottom: 6px;
}
body.page-newreg .advisory-text-hi {
  margin-bottom: 0;
  color: #334155;
}
body.page-newreg .advisory-text-en strong,
body.page-newreg .advisory-text-hi strong {
  color: #8E1F45;
}

/* ---------- Consent & Declaration Card ---------- */
body.page-newreg .consent-ack-card {
  margin-top: 18px;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
  transition: all 0.22s ease;
  user-select: none;
}
body.page-newreg .consent-ack-card:hover {
  border-color: #F0C4D3;
  background: #FFFCFD;
}
body.page-newreg .consent-ack-card.is-checked {
  border-color: var(--upavp-maroon);
  background: #FFF8FA;
  box-shadow: 0 4px 20px rgba(142, 31, 69, 0.08);
}
body.page-newreg .consent-checkbox-wrap input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--upavp-maroon);
  cursor: pointer;
  margin: 1px 0 0 !important;
}
body.page-newreg .consent-label-wrap label.consent-text {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #334155 !important;
  margin: 0 !important;
  cursor: pointer;
}
body.page-newreg .consent-label-wrap label.consent-text strong {
  color: #0F172A;
}

/* ---------- Due date alert ---------- */
body.page-newreg .due-date-alert {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: #B42318;
  background: #FEF3F2;
  border: 1px solid #FECDCA;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
}

/* ---------- Action buttons row ---------- */
body.page-newreg .form7-actions-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 24px !important;
  margin-top: 20px !important;
  border-top: 1px solid #F1F5F9 !important;
}
body.page-newreg .btn-prev-step {
  height: 48px;
  min-width: 148px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FCE7EF !important;
  color: var(--upavp-maroon) !important;
  border: 1px solid #F8D3DF !important;
  border-radius: 10px !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  padding: 0 24px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none !important;
}
body.page-newreg .btn-prev-step:hover {
  background: #F7D4DF !important;
  transform: translateX(-2px);
}
body.page-newreg .btn-submit-step {
  height: 48px;
  min-width: 190px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #8E1F45 0%, #6E1232 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 0 32px !important;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(142, 31, 69, 0.28) !important;
  transition: all 0.22s ease;
}
body.page-newreg .btn-submit-step:hover {
  box-shadow: 0 8px 28px rgba(142, 31, 69, 0.42) !important;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  body.page-newreg .reg-form-col #Form7 .form7-body-wrap { padding: 14px 16px 20px !important; }
  body.page-newreg .fee-summary-hero { flex-direction: column; align-items: flex-start; padding: 18px 20px; }
  body.page-newreg .fee-hero-right { align-items: flex-start; }
  body.page-newreg .form7-actions-row { flex-direction: column; gap: 12px; }
  body.page-newreg .btn-prev-step,
  body.page-newreg .btn-submit-step { width: 100%; }
}


/* ---------- booklet action bar (visible on every step) ---------- */
body.page-newreg .reg-actionbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fff; border: 1px solid #EEF1F6; border-radius: 14px;
  box-shadow: 0 6px 22px rgba(15,23,42,0.05);
  padding: 12px 16px; margin: 16px 0 0;
  box-sizing: border-box;
}
body.page-newreg .reg-actionbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }

/* step-wise save indicator */
body.page-newreg .reg-save-status {
  flex: none; margin-left: auto; display: none;
  align-items: center; gap: 7px; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; color: var(--nr-muted);
  padding: 6px 12px; border-radius: 999px; background: #F1F5F9;
}
body.page-newreg .reg-save-status.is-saving,
body.page-newreg .reg-save-status.is-saved,
body.page-newreg .reg-save-status.is-error { display: inline-flex; }
body.page-newreg .reg-save-status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #94A3B8; flex: none;
}
body.page-newreg .reg-save-status.is-saved { background: #ECFDF3; color: #15803D; }
body.page-newreg .reg-save-status.is-saved::before { background: #16A34A; }
body.page-newreg .reg-save-status.is-error { background: #FEF3F2; color: #B42318; }
body.page-newreg .reg-save-status.is-error::before { background: #D92D20; }
body.page-newreg .reg-actionbar-icon {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: #FCE7EF; color: var(--upavp-maroon);
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
body.page-newreg .reg-actionbar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.page-newreg .reg-actionbar-text b { font-size: 14.5px; font-weight: 700; color: var(--nr-ink); }
body.page-newreg .reg-actionbar-text i {
  font-style: normal; font-size: 12.5px; color: var(--nr-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.page-newreg .reg-actionbar-slot { flex: none; }
body.page-newreg a.btn-booklet-step {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  height: 42px; padding: 0 18px; border-radius: 10px;
  background: #FCE7EF; color: var(--upavp-maroon) !important;
  font-size: 14px; font-weight: 600; text-decoration: none !important;
  border: 1px solid #F3D3DF; transition: background .15s ease, box-shadow .15s ease;
}
body.page-newreg a.btn-booklet-step:hover {
  background: var(--upavp-maroon); color: #fff !important; border-color: var(--upavp-maroon);
  box-shadow: 0 6px 18px rgba(134,31,65,0.22);
}

/* ---------- stepper: progressive compaction so chips never overlap ---------- */
@media (max-width: 1560px) {
  body.page-newreg .rs-ico { display: none; }
  body.page-newreg .rs-step { gap: 9px; }
  body.page-newreg .rs-num { width: 31px; height: 31px; font-size: 13.5px; }
  body.page-newreg .rs-text b { font-size: 13.5px; }
  body.page-newreg .rs-text i { font-size: 11.5px; }
}
@media (max-width: 1300px) {
  body.page-newreg .rs-text i { display: none; }
  body.page-newreg .rs-text b { font-size: 13px; padding-bottom: 2px; }
  body.page-newreg .rs-step { gap: 8px; padding: 6px 2px; }
  body.page-newreg .rs-sep { font-size: 11px; }
}
@media (max-width: 1120px) {
  body.page-newreg .rs-current { display: flex; }
  body.page-newreg .rs-text { display: none; }
  body.page-newreg .reg-stepper { justify-content: flex-start; gap: 2px; }
  body.page-newreg .rs-step { padding: 4px 2px; }
  body.page-newreg .rs-num { width: 30px; height: 30px; }
  body.page-newreg .rs-step.is-active .rs-num {
    box-shadow: 0 0 0 4px rgba(134,31,65,0.14);
  }
}
@media (max-width: 640px) {
  body.page-newreg .reg-actionbar { flex-direction: column; align-items: stretch; gap: 12px; }
  body.page-newreg .reg-save-status { margin-left: 0; align-self: flex-start; }
  body.page-newreg .reg-actionbar-slot { display: block; width: 100%; }
  body.page-newreg a.btn-booklet-step { display: flex; width: 100%; justify-content: center; }
  body.page-newreg .reg-actionbar-text i { white-space: normal; }
}

/* ---------- responsive ---------- */
@media (max-width: 1250px) {
  body.page-newreg .reg-body { flex-wrap: wrap; }
  body.page-newreg .reg-side { width: 100%; }
  body.page-newreg .reg-form-col .grid.grid-cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 900px) {
  body.page-newreg .newreg-hero { height: auto; padding: 26px 0; }
  body.page-newreg .newreg-hero-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  body.page-newreg .newreg-hero-curve { display: none; }
  body.page-newreg .newreg-hero-copy h1 { font-size: 28px; }
  body.page-newreg .reg-form-col .grid.grid-cols-3 { grid-template-columns: minmax(0,1fr) !important; padding: 0 18px !important; }
  body.page-newreg .step-head { padding: 18px; }
  body.page-newreg .reg-stepper { justify-content: flex-start; }
}

/* ============================================================
   Step 6: Document Upload Redesign (2026 UI Upgrade)
   ============================================================ */

/* ---------- Upload Progress Strip ---------- */
body.page-newreg .doc-upload-progress-strip {
  margin: 18px 26px 6px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #FFF7FA 0%, #FDF1F5 100%);
  border: 1px solid #F3D5DF;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(134,31,65,0.04);
}
body.page-newreg .doc-progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}
body.page-newreg .doc-progress-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--upavp-maroon);
}
body.page-newreg .doc-progress-title i {
  font-size: 14px;
}
body.page-newreg .doc-progress-count {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}
body.page-newreg .doc-progress-count span {
  color: var(--upavp-maroon);
  font-weight: 700;
}
body.page-newreg .doc-progress-track {
  width: 100%;
  height: 8px;
  background: #EED7E0;
  border-radius: 999px;
  overflow: hidden;
}
body.page-newreg .doc-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #861F41 0%, #C44A66 100%);
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Document Cards Grid ---------- */
body.page-newreg #Form6 .doc-upload-grid,
body.page-schemeform #Form6 .doc-upload-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  padding: 18px 26px !important;
  margin: 0 !important;
}

/* ---------- Document Card ---------- */
body.page-newreg .doc-card,
body.page-schemeform .doc-card {
  background: #FFFFFF;
  border: 1.5px solid #ECD9DF;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.25s ease;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}
body.page-newreg .doc-card:hover,
body.page-schemeform .doc-card:hover {
  border-color: #D4A5B8;
  box-shadow: 0 6px 20px rgba(134, 31, 65, 0.08);
  transform: translateY(-2px);
}
body.page-newreg .doc-card.is-filled,
body.page-schemeform .doc-card.is-filled {
  border-color: #10B981;
  background: linear-gradient(180deg, #FAFCFA 0%, #FFFFFF 100%);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.08);
}
body.page-newreg .doc-card.has-error,
body.page-schemeform .doc-card.has-error {
  border-color: #E11D48 !important;
  background: #FFF8F9 !important;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12) !important;
  animation: docCardShake 0.4s ease;
}
@keyframes docCardShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

/* ---------- Card Header ---------- */
body.page-newreg .doc-card-top,
body.page-schemeform .doc-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
body.page-newreg .doc-card-title-col,
body.page-schemeform .doc-card-title-col {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}
body.page-newreg .doc-icon-badge,
body.page-schemeform .doc-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #FCE7EF;
  color: var(--upavp-maroon);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex: none;
  transition: transform 0.2s ease;
}
body.page-newreg .doc-card:hover .doc-icon-badge,
body.page-schemeform .doc-card:hover .doc-icon-badge {
  transform: scale(1.05);
}
body.page-newreg .doc-title-meta,
body.page-schemeform .doc-title-meta {
  flex: 1 1 auto;
  min-width: 0;
}
body.page-newreg .doc-title-row,
body.page-schemeform .doc-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
body.page-newreg .doc-num,
body.page-schemeform .doc-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--upavp-maroon);
  background: #FCE7EF;
  border-radius: 5px;
  padding: 1px 6px;
  line-height: 1.3;
}
body.page-newreg .doc-title,
body.page-schemeform .doc-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15.5px;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
  line-height: 1.3;
}
body.page-newreg .doc-specs,
body.page-schemeform .doc-specs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
body.page-newreg .spec-chip,
body.page-schemeform .spec-chip {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748B;
  background: #F1F5F9;
  border-radius: 5px;
  padding: 2px 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
body.page-newreg .spec-chip i,
body.page-schemeform .spec-chip i {
  font-size: 10.5px;
  color: #94A3B8;
}
body.page-newreg .doc-status-col,
body.page-schemeform .doc-status-col {
  flex: none;
}
body.page-newreg .doc-badge,
body.page-schemeform .doc-badge {
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
body.page-newreg .doc-badge.req,
body.page-schemeform .doc-badge.req {
  background: #FCE7EF;
  color: var(--upavp-maroon);
  border: 1px solid #F8CBD9;
}
body.page-newreg .doc-badge.req i,
body.page-schemeform .doc-badge.req i {
  font-size: 9px;
}
body.page-newreg .doc-badge.opt,
body.page-schemeform .doc-badge.opt {
  background: #F8FAFC;
  color: #64748B;
  border: 1px solid #E2E8F0;
}
body.page-newreg .doc-card-hint,
body.page-schemeform .doc-card-hint {
  font-size: 12.5px;
  color: #64748B;
  line-height: 1.45;
  margin: 0 0 12px 0;
}

/* ---------- Dropzone ---------- */
body.page-newreg .doc-zone,
body.page-schemeform .doc-zone {
  border: 1.8px dashed #D5B4C2;
  border-radius: 12px;
  background: #FCF8FA;
  padding: 16px;
  cursor: pointer;
  position: relative;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  user-select: none;
}
body.page-newreg .doc-zone:hover,
body.page-schemeform .doc-zone:hover,
body.page-newreg .doc-zone.is-dragover,
body.page-schemeform .doc-zone.is-dragover {
  border-color: var(--upavp-maroon);
  background: #FDF1F5;
  box-shadow: inset 0 0 0 1px var(--upavp-maroon);
}
body.page-newreg .doc-native-input,
body.page-schemeform .doc-native-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  z-index: -1 !important;
}

/* Empty Dropzone State */
body.page-newreg .doc-zone-empty,
body.page-schemeform .doc-zone-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  justify-content: center;
  padding: 6px 0;
}
body.page-newreg .doc-upload-icon-circle,
body.page-schemeform .doc-upload-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid #F0D4DF;
  color: var(--upavp-maroon);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: 0 2px 6px rgba(134,31,65,0.06);
  flex: none;
  transition: transform 0.2s ease, background 0.2s ease;
}
body.page-newreg .doc-zone:hover .doc-upload-icon-circle,
body.page-schemeform .doc-zone:hover .doc-upload-icon-circle {
  transform: translateY(-2px);
  background: var(--upavp-maroon);
  color: #fff;
  border-color: var(--upavp-maroon);
}
body.page-newreg .doc-zone-prompt,
body.page-schemeform .doc-zone-prompt {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.page-newreg .btn-doc-browse,
body.page-schemeform .btn-doc-browse {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--upavp-maroon);
  transition: color 0.15s ease;
}
body.page-newreg .doc-zone-drag-hint,
body.page-schemeform .doc-zone-drag-hint {
  font-size: 12px;
  color: #94A3B8;
  font-weight: 500;
}

/* Filled / Selected State */
body.page-newreg .doc-zone-filled,
body.page-schemeform .doc-zone-filled {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}
body.page-newreg .doc-thumb,
body.page-schemeform .doc-thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--upavp-maroon);
  overflow: hidden;
  flex: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
body.page-newreg .doc-thumb img,
body.page-schemeform .doc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-newreg .doc-filled-meta,
body.page-schemeform .doc-filled-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.page-newreg .doc-file-name,
body.page-schemeform .doc-file-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
body.page-newreg .doc-file-sub,
body.page-schemeform .doc-file-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
body.page-newreg .doc-file-size,
body.page-schemeform .doc-file-size {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748B;
  background: #F1F5F9;
  border-radius: 4px;
  padding: 1px 6px;
}
body.page-newreg .doc-file-ready,
body.page-schemeform .doc-file-ready {
  font-size: 12px;
  font-weight: 600;
  color: #15803D;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
body.page-newreg .doc-filled-actions,
body.page-schemeform .doc-filled-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
body.page-newreg .btn-doc-action,
body.page-schemeform .btn-doc-action {
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
body.page-newreg .btn-doc-action.btn-change:hover,
body.page-schemeform .btn-doc-action.btn-change:hover {
  background: #FCE7EF;
  color: var(--upavp-maroon);
  border-color: #F2C1D1;
}
body.page-newreg .btn-doc-action.btn-view,
body.page-schemeform .btn-doc-action.btn-view {
  background: #F0FDF4;
  color: #166534;
  border-color: #BBF7D0;
  text-decoration: none !important;
}
body.page-newreg .btn-doc-action.btn-view:hover,
body.page-schemeform .btn-doc-action.btn-view:hover {
  background: #DCFCE7;
  color: #14532D;
  border-color: #86EFAC;
}
body.page-newreg .btn-doc-action.btn-remove,
body.page-schemeform .btn-doc-action.btn-remove {
  padding: 0 10px;
  color: #94A3B8;
}
body.page-newreg .btn-doc-action.btn-remove:hover,
body.page-schemeform .btn-doc-action.btn-remove:hover {
  background: #FEF2F2;
  color: #DC2626;
  border-color: #FECACA;
}

/* ---------- Server Uploaded Document Span ---------- */
body.page-newreg .doc-server-span:not(:empty),
body.page-schemeform .doc-server-span:not(:empty) {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 14px;
  background: #F0FDF4;
  border: 1px solid #DCFCE7;
  border-radius: 8px;
}
body.page-newreg .doc-server-span a.btn-primarynew,
body.page-schemeform .doc-server-span a.btn-primarynew {
  height: 32px !important;
  min-width: auto !important;
  padding: 0 14px !important;
  font-size: 12.5px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  background: #166534 !important;
  color: #fff !important;
}
body.page-newreg .doc-server-span a.btn-danger,
body.page-schemeform .doc-server-span a.btn-danger {
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 12.5px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  background: #EF4444 !important;
  border: none !important;
  color: #fff !important;
}

/* Validation error alert on card */
body.page-newreg .doc-card .field-validation-error,
body.page-schemeform .doc-card .field-validation-error {
  margin-top: 10px;
  padding: 8px 12px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #DC2626 !important;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: docCardShake 0.3s ease;
}
body.page-newreg .doc-card .field-validation-error::before,
body.page-schemeform .doc-card .field-validation-error::before {
  content: "\f06a";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 13px;
  color: #DC2626;
}

@media (max-width: 992px) {
  body.page-newreg #Form6 .doc-upload-grid,
  body.page-schemeform #Form6 .doc-upload-grid {
    grid-template-columns: 1fr !important;
    padding: 14px 18px !important;
  }
  body.page-newreg .doc-upload-progress-strip,
  body.page-schemeform .doc-upload-progress-strip {
    margin: 14px 18px 4px;
  }
}

/* ---------- shared header: prevent horizontal scroll on small phones ---------- */
@media (max-width: 480px) {
  .upavp-header-inner, .header-inner { flex-wrap: wrap !important; row-gap: 10px; }
  .header-right { margin-left: 0 !important; gap: 10px !important; flex-wrap: wrap !important; }
  .btn-logout-sleek { padding: 0 14px !important; font-size: 13px !important; }
  html, body { overflow-x: hidden; }
}

/* ============================================================================
   ADMIN SCHEME SELECTION PAGE (/SchemeList) - EXACT MOCKUP MATCH DESIGN
   ============================================================================ */

body.page-scheme-selection {
  background: #F8FAFC !important;
  color: #1E293B !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-scheme-selection .scheme-select-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 24px 60px !important;
  box-sizing: border-box !important;
}

body.page-scheme-selection .upavp-header .header-inner,
body.page-scheme-selection .contact-topbar .contact-inner {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* Override legacy .content from dist/css/app.css */
body.page-scheme-selection .content,
body.page-scheme-selection .contentdashboard {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: inherit !important;
  min-height: auto !important;
  border-radius: 0 !important;
}

body.page-scheme-selection .content:before {
  display: none !important;
}

/* ---------- Top Contact Bar Enhancements ---------- */
.contact-topbar-flex {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.contact-topbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.contact-topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.contact-topbar-item {
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
}

.contact-topbar-item:hover {
  color: #FDE68A !important;
}

/* ---------- Navbar Active Indicator for Scheme ---------- */
body.page-scheme-selection .upavp-nav a[href*="Scheme"],
body.page-scheme-selection .upavp-nav a.active {
  color: #861F41 !important;
  font-weight: 700 !important;
  position: relative !important;
}

body.page-scheme-selection .upavp-nav a[href*="Scheme"]::after,
body.page-scheme-selection .upavp-nav a.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: -10px !important;
  left: 0 !important;
  right: 0 !important;
  height: 3.5px !important;
  background: #861F41 !important;
  border-radius: 2px !important;
}

body.page-scheme-selection .header-user-name {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1E293B !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* ---------- 1. Hero banner ----------
   Do hisse: baayein taraf content (pills, title, welcome line, live metrics)
   aur daayein taraf photo panel jisme brand ka halka duotone aur neeche ek
   glass quote card hai. Photo ab background ki jagah apne panel me hai, isliye
   text kabhi uske upar nahi girta. */
body.page-scheme-selection .executive-hero-banner {
  position: relative !important;
  background: #FFFFFF !important;
  border-radius: 22px !important;
  border: 1px solid #F1E5E8 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 40px -24px rgba(108, 24, 52, .28) !important;
  margin-bottom: 24px !important;
}

body.page-scheme-selection .ehb-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: stretch;
  min-height: 356px;
}

body.page-scheme-selection .ehb-left-block {
  display: flex !important;
  flex-direction: column;
  padding: 36px 38px 30px !important;
  min-width: 0;
}

/* eyebrow pills */
body.page-scheme-selection .ehb-eyebrow {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 12px !important;
  margin-bottom: 18px !important;
}
body.page-scheme-selection .ehb-admin-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #FBEAF0 !important;
  border: 1px solid #F1D7E1 !important;
  color: #861F41 !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  padding: 7px 14px !important;
  border-radius: 999px !important;
}
body.page-scheme-selection .ehb-escrow-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #8A8F9C !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}
body.page-scheme-selection .ehb-maroon-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #861F41 !important;
  display: inline-block !important;
}

/* title + welcome line */
body.page-scheme-selection .ehb-title {
  margin: 0 0 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 40px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -.028em !important;
  color: #1C2331 !important;
}
body.page-scheme-selection .ehb-title .ehb-title-accent {
  color: #861F41 !important;
  display: block;
}
body.page-scheme-selection .ehb-desc {
  margin: 0 0 24px !important;
  max-width: 560px;
  font-size: 14.6px !important;
  line-height: 1.68 !important;
  color: #5A6273 !important;
}
body.page-scheme-selection .ehb-desc strong {
  color: #1C2331 !important;
  font-weight: 700 !important;
}

/* live metrics strip */
body.page-scheme-selection .ehb-metrics {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px !important;
  margin-top: auto !important;
}
body.page-scheme-selection .ehb-metric {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  flex: 1 1 206px;
  min-width: 0;
  padding: 11px 14px !important;
  border: 1px solid #F0E2E7 !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
body.page-scheme-selection .ehb-metric:hover {
  border-color: #E4C6D2 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -16px rgba(108, 24, 52, .55);
}
body.page-scheme-selection .ehm-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  flex: none;
  border-radius: 11px !important;
  background: #FBEAF0 !important;
  color: #861F41 !important;
  font-size: 14px !important;
}
body.page-scheme-selection .ehm-icon.is-live { background: #ECFDF5 !important; }
body.page-scheme-selection .ehm-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .18);
}
body.page-scheme-selection .ehm-text { display: flex; flex-direction: column; min-width: 0; }
body.page-scheme-selection .ehm-text b {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1C2331 !important;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-scheme-selection .ehm-text i {
  font-style: normal;
  margin-top: 2px;
  font-size: 10.4px !important;
  font-weight: 700 !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #9AA0AC !important;
}

/* photo panel */
body.page-scheme-selection .ehb-media {
  position: relative !important;
  min-height: 100%;
  background: linear-gradient(115deg, rgba(134, 31, 65, .30) 0%, rgba(134, 31, 65, .06) 46%, rgba(255, 255, 255, 0) 100%),
              url('/assets/images/hero/upavp-hero-home.jpg') center center / cover no-repeat !important;
}
/* baayein kinare par white me ghulne wala fade, taaki joint dikhe hi nahi */
body.page-scheme-selection .ehb-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, .82) 12%, rgba(255, 255, 255, .22) 34%, rgba(255, 255, 255, 0) 56%);
}
body.page-scheme-selection .ehb-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(28, 12, 18, 0) 0%, rgba(28, 12, 18, .32) 100%);
}

body.page-scheme-selection .ehb-media-quote {
  position: absolute !important;
  right: 26px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 14px 18px 15px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 18px 34px -20px rgba(28, 12, 18, .55);
  text-align: right;
}
body.page-scheme-selection .ehb-media-quote span {
  font-family: 'Lora', Georgia, serif !important;
  font-style: italic;
  font-size: 13.5px !important;
  color: #5A6273 !important;
  line-height: 1.35;
}
body.page-scheme-selection .ehb-media-quote strong {
  font-family: 'Lora', Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #861F41 !important;
  line-height: 1.2;
}
body.page-scheme-selection .ehb-quote-rule {
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: #861F41;
  margin-top: 6px;
}

@media (max-width: 1180px) {
  body.page-scheme-selection .ehb-inner { grid-template-columns: 1fr; }
  body.page-scheme-selection .ehb-media { min-height: 200px; order: -1; }
  body.page-scheme-selection .ehb-media::before {
    background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, .55) 40%, rgba(255, 255, 255, 0) 100%);
  }
  body.page-scheme-selection .ehb-media-quote { right: 18px; bottom: 16px; padding: 10px 14px; }
  body.page-scheme-selection .ehb-title { font-size: 32px !important; }
}
@media (max-width: 640px) {
  body.page-scheme-selection .ehb-left-block { padding: 24px 20px 22px !important; }
  body.page-scheme-selection .ehb-title { font-size: 27px !important; }
  body.page-scheme-selection .ehb-metric { flex: 1 1 100%; }
}


/* ---------- 2. Shared Card Styles ---------- */
body.page-scheme-selection .scheme-select-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 12px -1px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
}

body.page-scheme-selection .ssc-header {
  padding: 18px 26px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #F1F5F9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

body.page-scheme-selection .ssc-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

body.page-scheme-selection .ssc-icon-box {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: #FDEEF2 !important;
  color: #861F41 !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
}

body.page-scheme-selection .ssc-title {
  font-size: 16.5px !important;
  font-weight: 700 !important;
  color: #6D1432 !important;
  margin: 0 0 2px !important;
  line-height: 1.25 !important;
}

body.page-scheme-selection .ssc-subtitle {
  font-size: 13px !important;
  color: #64748B !important;
  margin: 0 !important;
}

/* Watermark in filter header */
body.page-scheme-selection .ssc-watermark {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body.page-scheme-selection .ssc-wm-text {
  display: flex !important;
  flex-direction: column !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #861F41 !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

/* Green Live pill badge */
body.page-scheme-selection .badge-live-green {
  background: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
  color: #065F46 !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.page-scheme-selection .solid-green-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  display: inline-block !important;
}

body.page-scheme-selection .ssc-body {
  padding: 24px 26px !important;
}

body.page-scheme-selection .ssc-body.p-0 {
  padding: 0 !important;
}

/* ---------- 3. Filter Grid & Controls ---------- */
body.page-scheme-selection .filter-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin-bottom: 20px !important;
}

body.page-scheme-selection .filter-label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
  margin-bottom: 7px !important;
}

body.page-scheme-selection .filter-input-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

body.page-scheme-selection .filter-input-wrap i {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94A3B8 !important;
  font-size: 14px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

body.page-scheme-selection input.filter-input,
body.page-scheme-selection select.filter-select {
  width: 100% !important;
  height: 44px !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  padding: 0 14px 0 42px !important;
  font-size: 13.5px !important;
  color: #1E293B !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

body.page-scheme-selection input.filter-input:focus,
body.page-scheme-selection select.filter-select:focus {
  border-color: #861F41 !important;
  box-shadow: 0 0 0 3px rgba(134, 31, 65, 0.12) !important;
  outline: none !important;
}

body.page-scheme-selection .filter-btn-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-top: 10px !important;
}

body.page-scheme-selection .btn-filter-clear {
  height: 42px !important;
  padding: 0 20px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

body.page-scheme-selection .btn-filter-clear:hover {
  background: #F8FAFC !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

body.page-scheme-selection .btn-filter-search {
  height: 42px !important;
  padding: 0 26px !important;
  background: #861F41 !important;
  border: none !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 8px rgba(134, 31, 65, 0.22) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

body.page-scheme-selection .btn-filter-search:hover {
  background: #6D1432 !important;
  box-shadow: 0 4px 14px rgba(134, 31, 65, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* ---------- 4. Table Controls & Blush Pink Table Header ---------- */
body.page-scheme-selection .table-responsive {
  width: 100% !important;
  overflow-x: auto !important;
}

body.page-scheme-selection .table-top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 26px 14px !important;
  background: #FFFFFF !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

body.page-scheme-selection .dataTables_length {
  font-size: 13px !important;
  color: #64748B !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

body.page-scheme-selection .dataTables_length select {
  height: 36px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 8px !important;
  padding: 0 10px !important;
  margin: 0 6px !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
  font-weight: 600 !important;
  outline: none !important;
  font-size: 13px !important;
  cursor: pointer !important;
}

/* Common Search Box in DataTable Top Bar */
body.page-scheme-selection .dataTables_filter {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

body.page-scheme-selection .dataTables_filter label {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important; /* hides any default 'Search:' text */
  line-height: 1 !important;
}

body.page-scheme-selection .dataTables_filter label::before {
  content: "\f002" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  margin-top: 1px !important; /* optical center adjustment for font glyph */
  height: 14px !important;
  line-height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94A3B8 !important;
  font-size: 13px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transition: color 0.2s ease !important;
}

body.page-scheme-selection .dataTables_filter:focus-within label::before {
  color: #861F41 !important;
}

body.page-scheme-selection .dataTables_filter input[type="search"] {
  width: 280px !important;
  height: 40px !important;
  margin: 0 !important;
  vertical-align: middle !important;
  line-height: 40px !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  padding: 0 14px 0 40px !important;
  font-size: 13.5px !important;
  color: #1E293B !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  box-sizing: border-box !important;
}

body.page-scheme-selection .dataTables_filter input[type="search"]:focus {
  border-color: #861F41 !important;
  box-shadow: 0 0 0 3px rgba(134, 31, 65, 0.12) !important;
  width: 330px !important;
}

body.page-scheme-selection table.scheme-select-datatable {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 13.5px !important;
  color: #1E293B !important;
}

/* Exact blush pink header */
body.page-scheme-selection table.scheme-select-datatable thead th {
  background: #FDF2F4 !important;
  color: #861F41 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 12px 10px !important;
  border: none !important;
  white-space: nowrap !important;
}

body.page-scheme-selection table.scheme-select-datatable thead th i {
  color: #A06173 !important;
  margin-left: 4px !important;
  font-size: 11px !important;
}

body.page-scheme-selection table.scheme-select-datatable tbody td {
  padding: 13px 10px !important;
  vertical-align: middle !important;
  border-top: none !important;
  border-bottom: 1px solid #F1F5F9 !important;
  border-left: none !important;
  border-right: none !important;
}

body.page-scheme-selection table.scheme-select-datatable tbody tr:hover td {
  background: #FAFBFD !important;
}

/* Cell Elements */
body.page-scheme-selection .table-sr-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 28px !important;
  height: 28px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
}

body.page-scheme-selection .scheme-desc-clamp {
  color: #64748B !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  max-width: 300px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body.page-scheme-selection .text-muted-italic {
  font-style: italic !important;
  color: #94A3B8 !important;
  font-size: 12.5px !important;
}

/* Status Badges */
body.page-scheme-selection .badge-status-running {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #ECFDF5 !important;
  color: #059669 !important;
  border: 1px solid #A7F3D0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

body.page-scheme-selection .pulse-green-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  display: inline-block !important;
}

body.page-scheme-selection .badge-status-completed {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #F1F5F9 !important;
  color: #475569 !important;
  border: 1px solid #CBD5E1 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

body.page-scheme-selection .badge-status-other {
  display: inline-flex !important;
  background: #F8FAFC !important;
  color: #64748B !important;
  border: 1px solid #E2E8F0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

body.page-scheme-selection .scheme-date-cell,
body.page-scheme-selection .scheme-loc-cell {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  white-space: nowrap !important;
}

body.page-scheme-selection .scheme-date-cell i {
  color: #94A3B8 !important;
  font-size: 13px !important;
}

body.page-scheme-selection .scheme-loc-cell i {
  color: #861F41 !important;
  font-size: 13px !important;
}

/* Action Button */
body.page-scheme-selection .btn-enter-dashboard {
  background: #861F41 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

body.page-scheme-selection .btn-enter-dashboard:hover {
  background: #6D1432 !important;
  transform: translateY(-1px) !important;
}

/* Exact Empty State Modern */
body.page-scheme-selection .table-empty-state-modern {
  padding: 48px 20px !important;
  text-align: center !important;
}

body.page-scheme-selection .tes-icon-wrap {
  margin-bottom: 14px !important;
  display: flex !important;
  justify-content: center !important;
}

body.page-scheme-selection .tes-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
  margin: 0 0 6px !important;
}

body.page-scheme-selection .tes-desc {
  font-size: 13px !important;
  color: #64748B !important;
  margin: 0 !important;
}

/* ---------- 5. Table Bottom Bar & Clean Pagination ---------- */
body.page-scheme-selection .table-bottom-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 26px !important;
  background: #FFFFFF !important;
  border-top: 1px solid #F1F5F9 !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

body.page-scheme-selection .dataTables_info {
  font-size: 13px !important;
  color: #64748B !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

body.page-scheme-selection .dataTables_paginate {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
}

body.page-scheme-selection .dataTables_paginate span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-scheme-selection .dataTables_paginate a,
body.page-scheme-selection .dataTables_paginate .paginate_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  float: none !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

body.page-scheme-selection .dataTables_paginate .paginate_button:hover:not(.disabled) {
  background: #861F41 !important;
  border-color: #861F41 !important;
  color: #FFFFFF !important;
}

body.page-scheme-selection .dataTables_paginate .paginate_button.current {
  background: #861F41 !important;
  border-color: #861F41 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

body.page-scheme-selection .dataTables_paginate .paginate_button.disabled {
  opacity: 0.45 !important;
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #94A3B8 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Fallback clearfix */
body.page-scheme-selection .dataTables_wrapper::after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}

/* ---------- 6. Responsive Design ---------- */
@media (max-width: 992px) {
  body.page-scheme-selection .filter-grid-3 {
    grid-template-columns: 1fr !important;
  }
  /* hero ki padding ab .ehb-left-block sambhalta hai (banner khud full-bleed hai) */
  body.page-scheme-selection .table-bottom-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 576px) {
  body.page-scheme-selection .scheme-select-container {
    padding: 14px 12px 40px !important;
  }
  body.page-scheme-selection .filter-btn-row {
    flex-direction: column !important;
  }
  body.page-scheme-selection .btn-filter-clear,
  body.page-scheme-selection .btn-filter-search {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ============================================================================
   SCHEME SELECTION PAGE — premium polish
   (hero ke baad ka hissa: page canvas, table card, rows, controls)
   ============================================================================ */

/* warm canvas, taaki maroon branding ke saath thanda grey na lage */
body.page-scheme-selection {
  background: #F7F3F4 !important;
}
body.page-scheme-selection .scheme-select-container {
  position: relative;
}
/* upar halka sa brand glow */
body.page-scheme-selection .scheme-select-container::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 92%);
  height: 220px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(134, 31, 65, .10) 0%, rgba(134, 31, 65, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
body.page-scheme-selection .executive-hero-banner,
body.page-scheme-selection .scheme-select-card { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- card --- */
body.page-scheme-selection .scheme-select-card {
  border: 1px solid #F0E2E7 !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 40px -28px rgba(108, 24, 52, .32) !important;
}
body.page-scheme-selection .ssc-header {
  padding: 20px 26px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FDF7F9 100%) !important;
  border-bottom: 1px solid #F4EAEE !important;
}
body.page-scheme-selection .ssc-icon-box {
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
  background: #FBEAF0 !important;
  color: #861F41 !important;
  font-size: 16px !important;
  box-shadow: inset 0 0 0 1px #F3DBE4;
}
body.page-scheme-selection .ssc-title {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  color: #1C2331 !important;
}
body.page-scheme-selection .ssc-count-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #FBEAF0;
  color: #861F41;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
body.page-scheme-selection .ssc-count-chip:empty { display: none; }
body.page-scheme-selection .ssc-subtitle {
  font-size: 12.8px !important;
  color: #8A8F9C !important;
  margin-top: 3px !important;
}
body.page-scheme-selection .badge-live-green {
  background: #ECFDF5 !important;
  border: 1px solid #C7F0DC !important;
  color: #0F7A52 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
}

/* ------------------------------------------------------------ controls --- */
body.page-scheme-selection .table-top-bar {
  padding: 18px 26px 14px !important;
  gap: 14px;
}
body.page-scheme-selection .dataTables_length label {
  font-size: 12.8px !important;
  font-weight: 500 !important;
  color: #8A8F9C !important;
}
body.page-scheme-selection .dataTables_length select {
  height: 40px !important;
  min-width: 82px !important;
  padding: 0 34px 0 14px !important;
  border: 1px solid #EFE1E7 !important;
  border-radius: 11px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23861F41' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 15px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  font-size: 13.2px !important;
  font-weight: 600 !important;
  color: #1C2331 !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
  cursor: pointer;
}
body.page-scheme-selection .dataTables_length select:focus,
body.page-scheme-selection .dataTables_filter input[type="search"]:focus {
  border-color: #861F41 !important;
  box-shadow: 0 0 0 4px #FBEAF0 !important;
  outline: none !important;
}
body.page-scheme-selection .dataTables_filter input[type="search"] {
  height: 40px !important;
  width: 290px !important;
  max-width: 50vw;
  margin: 0 !important;
  vertical-align: middle !important;
  line-height: 40px !important;
  border: 1px solid #EFE1E7 !important;
  border-radius: 11px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
  font-size: 13.4px !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------- table --- */
body.page-scheme-selection table.scheme-select-datatable thead th {
  background: #FBEFF3 !important;
  color: #8E5871 !important;
  font-size: 10.8px !important;
  letter-spacing: .085em !important;
  padding: 12px 10px !important;
  border-bottom: 1px solid #F1DDE5 !important;
}
body.page-scheme-selection table.scheme-select-datatable tbody td {
  padding: 13px 10px !important;
  border-bottom: 1px solid #F4EEF1 !important;
  transition: background-color .14s ease;
}
body.page-scheme-selection table.scheme-select-datatable tbody tr:last-child td { border-bottom: none !important; }
body.page-scheme-selection table.scheme-select-datatable tbody tr:hover td {
  background: #FDF8FA !important;
}
/* hover par baayein taraf patla maroon accent */
body.page-scheme-selection table.scheme-select-datatable tbody tr td:first-child {
  box-shadow: inset 3px 0 0 transparent;
}
body.page-scheme-selection table.scheme-select-datatable tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 #861F41;
}

/* sr. no. */
body.page-scheme-selection .table-sr-chip {
  min-width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  background: #F6F0F2 !important;
  color: #7A8091 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

/* scheme name + initials chip */
body.page-scheme-selection .scheme-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
body.page-scheme-selection .snc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  background: linear-gradient(140deg, #A52A54 0%, #6C1834 100%);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 6px 14px -8px rgba(108, 24, 52, .9);
}
body.page-scheme-selection .snc-name {
  font-size: 13.6px;
  font-weight: 700;
  color: #1C2331;
  line-height: 1.4;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* description / date / location cells */
body.page-scheme-selection .scheme-desc-clamp { color: #6B7280 !important; max-width: 330px !important; }
body.page-scheme-selection .scheme-date-cell,
body.page-scheme-selection .scheme-loc-cell {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: #48505F !important;
  white-space: nowrap;
}
body.page-scheme-selection .scheme-date-cell i,
body.page-scheme-selection .scheme-loc-cell i {
  color: #B08497 !important;
  font-size: 12.5px !important;
}

/* status pills */
body.page-scheme-selection .badge-status-running {
  background: #ECFDF5 !important;
  border-color: #BBEFD6 !important;
  color: #0F7A52 !important;
  padding: 6px 13px !important;
}
body.page-scheme-selection .pulse-green-dot {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .16) !important;
}
body.page-scheme-selection .badge-status-completed {
  background: #F4F1F2 !important;
  border-color: #E4DADE !important;
  color: #6B7280 !important;
  padding: 6px 13px !important;
}

/* action button */
body.page-scheme-selection .btn-enter-dashboard {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  height: 40px !important;
  padding: 0 18px !important;
  border: none !important;
  border-radius: 11px !important;
  background: #861F41 !important;
  color: #fff !important;
  font-size: 12.8px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  cursor: pointer;
  box-shadow: 0 10px 20px -12px rgba(134, 31, 65, .95) !important;
  transition: background-color .16s ease, transform .14s ease, box-shadow .16s ease !important;
}
body.page-scheme-selection .btn-enter-dashboard i {
  font-size: 11px !important;
  transition: transform .18s ease;
}
body.page-scheme-selection .btn-enter-dashboard:hover {
  background: #6C1834 !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 24px -12px rgba(108, 24, 52, .95) !important;
}
body.page-scheme-selection .btn-enter-dashboard:hover i { transform: translateX(3px); }
body.page-scheme-selection .btn-enter-dashboard:focus-visible {
  outline: 2px solid #861F41 !important;
  outline-offset: 2px;
}

/* footer bar: info + pagination */
body.page-scheme-selection .table-bottom-bar {
  padding: 16px 26px !important;
  border-top: 1px solid #F4EEF1 !important;
  background: #FFFDFE !important;
}
body.page-scheme-selection .dataTables_info {
  font-size: 12.8px !important;
  color: #8A8F9C !important;
}
body.page-scheme-selection .dataTables_paginate .paginate_button {
  min-width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
  border: 1px solid #EFE1E7 !important;
  background: #fff !important;
  color: #48505F !important;
  font-size: 12.8px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
}
body.page-scheme-selection .dataTables_paginate .paginate_button:hover {
  background: #FBEAF0 !important;
  border-color: #E8C9D5 !important;
  color: #6C1834 !important;
}
body.page-scheme-selection .dataTables_paginate .paginate_button.current {
  background: #861F41 !important;
  border-color: #861F41 !important;
  color: #fff !important;
  box-shadow: 0 8px 16px -10px rgba(134, 31, 65, .95) !important;
}
body.page-scheme-selection .dataTables_paginate .paginate_button.disabled {
  color: #C6C9D1 !important;
  background: #fff !important;
  border-color: #F4EEF1 !important;
  box-shadow: none !important;
}

/* empty state */
body.page-scheme-selection .table-empty-state-modern { padding: 54px 20px !important; }

@media (max-width: 900px) {
  body.page-scheme-selection .table-top-bar { flex-direction: column; align-items: stretch !important; }
  body.page-scheme-selection .dataTables_filter input[type="search"] { width: 100% !important; max-width: none; }
  body.page-scheme-selection .snc-chip { display: none; }
}

/* ============================================================================
   VIEW NEW REGISTRATION (/viewNewRegistration) — submitted application.
   Shown step by step on screen, fully expanded on paper.
   Scoped to body.page-viewreg.
   ============================================================================ */

body.page-viewreg {
  --vr-shell: 1622px;
  --vr-ink: #0F172A;
  --vr-muted: #64748B;
  --vr-line: #E2E8F0;
  --vr-border-subtle: #EDF2F7;
  --vr-bg: #F1F5F9;
  background: #F1F5F9 !important;
  color: #0F172A !important;
  padding: 0 !important;
  overflow-x: hidden;
  font-size: 14px;
}
body.page-viewreg .content {
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.page-viewreg .vr-shell,
body.page-viewreg .vr-shell * { box-sizing: border-box; }
body.page-viewreg .vr-shell {
  max-width: var(--vr-shell);
  margin: 0 auto;
  padding: 0 15px 48px;
}
body.page-viewreg .vr-print-head,
body.page-viewreg .vr-print-sign,
body.page-viewreg .vr-doc-print { display: none; }

/* ==============================================================
   ADMIN APPLICANT DOSSIER HEADER (inside ViewNewRegistration when flag == 2)
   ============================================================== */
body.page-admin.is-admin-view {
  background-color: #F8FAFC !important;
  overflow-x: hidden;
}

body.page-admin.is-admin-view .contentdashboard {
  min-width: 0;
  flex: 1 1 auto;
}

body.page-admin.is-admin-view .admin-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 16px 22px;
  margin: 16px 0 20px 0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

body.page-admin.is-admin-view .admin-view-header .avh-left {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

body.page-admin.is-admin-view .admin-view-header .avh-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FDF2F4;
  color: #861F41 !important;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 9px;
  border: 1.5px solid #F3C3D1;
  text-decoration: none !important;
  transition: all 0.2s ease;
  cursor: pointer;
}

body.page-admin.is-admin-view .admin-view-header .avh-back-btn:hover {
  background: #861F41;
  color: #FFFFFF !important;
  border-color: #861F41;
  box-shadow: 0 4px 12px rgba(134, 31, 65, 0.2);
  transform: translateX(-2px);
}

body.page-admin.is-admin-view .admin-view-header .avh-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.page-admin.is-admin-view .admin-view-header .avh-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #861F41;
}

body.page-admin.is-admin-view .admin-view-header .avh-name {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
}

body.page-admin.is-admin-view .admin-view-header .avh-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

body.page-admin.is-admin-view .admin-view-header .avh-stat {
  display: flex;
  flex-direction: column;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 7px 14px;
  border-radius: 9px;
  min-width: 100px;
}

body.page-admin.is-admin-view .admin-view-header .avh-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #64748B;
  text-transform: uppercase;
}

body.page-admin.is-admin-view .admin-view-header .avh-stat-val {
  font-size: 13.5px;
  font-weight: 700;
  color: #1E293B;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

body.page-admin.is-admin-view .admin-view-header .badge-status-paid {
  color: #16A34A;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}

body.page-admin.is-admin-view .admin-view-header .badge-status-app {
  color: #0284C7;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}

body.page-admin.is-admin-view .admin-view-header .badge-status-pending {
  color: #D97706;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}

/* Adjust vr-shell margin and padding in admin view */
body.page-admin.is-admin-view .vr-shell {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 0 40px !important;
}

body.page-admin.is-admin-view .vr-statusbar {
  margin-top: 0 !important;
}

/* Hide admin bars on print */
@media print {
  body.page-admin.is-admin-view {
    background: #FFFFFF !important;
    padding: 0 !important;
  }
  body.page-admin.is-admin-view .side-nav,
  body.page-admin.is-admin-view .mobile-menu,
  body.page-admin.is-admin-view .top-bar,
  body.page-admin.is-admin-view .admin-view-header {
    display: none !important;
  }
  body.page-admin.is-admin-view .contentdashboard {
    padding: 0 !important;
    margin: 0 !important;
  }
  body.page-admin.is-admin-view .flex {
    display: block !important;
  }
}

/* ---------- full-bleed scheme hero ---------- */
body.page-viewreg .vr-hero {
  position: relative;
  margin-left: calc(50% - 50vw);
  width: 100vw;
  height: 125px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(241,245,249,0.98) 0%, rgba(241,245,249,0.94) 28%, rgba(241,245,249,0.55) 45%, rgba(241,245,249,0.10) 60%, rgba(241,245,249,0) 70%),
    url('../images/hero/booklet-page-bg.png');
  background-size: auto, cover;
  background-position: center, center 35%;
  background-repeat: no-repeat;
  border-bottom: 1px solid #E2E8F0;
}
body.page-viewreg .vr-hero-curve {
  position: absolute; top: -60%; right: -80px; width: 430px; height: 220%;
  background: #F1F5F9; border-radius: 50%; z-index: 2;
}
body.page-viewreg .vr-hero-inner {
  position: relative; z-index: 3; box-sizing: border-box;
  max-width: var(--vr-shell); height: 100%;
  margin: 0 auto; padding: 0 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
}
body.page-viewreg .vr-hero-copy h1 {
  font-family: 'Lora', Georgia, serif;
  font-size: 32px; font-weight: 700; color: #0F172A; margin: 0; line-height: 1.15;
}
body.page-viewreg .vr-hero-rule {
  width: 52px; height: 3px; border-radius: 2px;
  background: var(--upavp-maroon); margin: 7px 0 8px;
}
body.page-viewreg .vr-hero-copy p { font-size: 14.5px; color: #64748B; margin: 0; font-weight: 500; }
body.page-viewreg .vr-hero-quote {
  flex: none; text-align: center;
  font-family: 'Lora', Georgia, serif; font-style: italic; font-weight: 600;
  font-size: 17px; line-height: 1.5; color: #1E293B; padding-right: 20px;
}
body.page-viewreg .vr-hero-quote-rule {
  display: block; width: 56px; height: 3px; border-radius: 2px;
  background: var(--upavp-maroon); margin: 9px auto 0;
}

/* ---------- status bar ---------- */
body.page-viewreg .vr-statusbar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: #FFFFFF; border: 1.5px solid #E2E8F0; border-left: 5px solid #16A34A; border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.05);
  padding: 18px 24px; margin: 20px 0 0;
}
body.page-viewreg .vr-status-left { display: flex; align-items: center; gap: 15px; min-width: 0; flex: 1 1 auto; }
body.page-viewreg .vr-status-ico {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  background: linear-gradient(135deg, #16A34A 0%, #15803D 100%); color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}
body.page-viewreg .vr-status-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.page-viewreg .vr-status-text b { font-size: 16.5px; font-weight: 700; color: #0F172A; }
body.page-viewreg .vr-status-text i { font-style: normal; font-size: 13px; color: #64748B; font-weight: 500; }
body.page-viewreg .vr-status-actions { display: flex; align-items: center; gap: 12px; flex: none; flex-wrap: wrap; }

body.page-viewreg .vr-btn,
body.page-viewreg .vr-status-actions .btn-primarynew {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; border-radius: 10px; white-space: nowrap;
  font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; margin: 0 !important; box-shadow: none;
  text-decoration: none !important; transition: all .2s ease;
}
body.page-viewreg .vr-btn-ghost,
body.page-viewreg .vr-status-actions .btn-primarynew {
  background: #F8FAFC !important; color: #1E293B !important; border: 1.5px solid #CBD5E1 !important;
}
body.page-viewreg .vr-btn-ghost:hover:not(:disabled),
body.page-viewreg .vr-status-actions .btn-primarynew:hover {
  background: #FFFFFF !important; color: var(--upavp-maroon) !important; border-color: var(--upavp-maroon) !important;
  box-shadow: 0 4px 12px rgba(134,31,65,0.12);
}
body.page-viewreg .vr-btn-solid {
  background: linear-gradient(135deg, #861F41 0%, #A52A54 100%); color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(134,31,65,0.30); font-weight: 700;
}
body.page-viewreg .vr-btn-solid:hover:not(:disabled) {
  background: linear-gradient(135deg, #6C1834 0%, #861F41 100%);
  box-shadow: 0 6px 18px rgba(134,31,65,0.38); transform: translateY(-1px);
}
body.page-viewreg .vr-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ---------- status chips ---------- */
body.page-viewreg .vr-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
body.page-viewreg .vr-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 700; border: 1.5px solid transparent;
}
body.page-viewreg .vr-chip i { font-size: 12px; }
body.page-viewreg .vr-chip-ok   {
  background: #ECFDF3; color: #15803D; border-color: #86EFAC;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.08);
}
body.page-viewreg .vr-chip-wait {
  background: #FFFBEB; color: #B45309; border-color: #FCD34D;
  box-shadow: 0 2px 6px rgba(180, 83, 9, 0.08);
}
body.page-viewreg .vr-chip-info {
  background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE;
  box-shadow: 0 2px 6px rgba(29, 78, 216, 0.08);
}
body.page-viewreg .vr-chip-info i { color: #2563EB; }
body.page-viewreg .vr-chip-info b { font-weight: 800; color: #1E3A8A; }

/* ---------- collapsible scheme pricing ---------- */
body.page-viewreg .vr-terms { margin: 14px 0 0; }
body.page-viewreg .vr-terms-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: #FFFFFF; border: 1.5px solid #E2E8F0; border-left: 5px solid var(--upavp-maroon);
  border-radius: 14px; padding: 15px 22px; font-size: 15px; font-weight: 700; color: #0F172A;
  cursor: pointer; margin: 0 !important; transition: all .2s ease;
  box-shadow: 0 4px 14px rgba(15,23,42,0.04);
}
body.page-viewreg .vr-terms-toggle:hover {
  background: #FAF5F7; border-color: var(--upavp-maroon);
  box-shadow: 0 6px 18px rgba(134,31,65,0.08);
}
body.page-viewreg .vr-terms-toggle i:first-child { color: var(--upavp-maroon); margin-right: 9px; font-size: 16px; }
body.page-viewreg .vr-terms-toggle i.fa-chevron-down,
body.page-viewreg .vr-terms-toggle i.fa-chevron-up { color: #64748B; font-size: 13px; }
body.page-viewreg .vr-terms-body {
  background: #FFFFFF; border: 1.5px solid #E2E8F0; border-top: none;
  border-radius: 0 0 14px 14px; padding: 20px 24px; overflow-x: auto;
  box-shadow: 0 8px 24px rgba(15,23,42,0.04);
}
body.page-viewreg .vr-terms-body table { max-width: 100%; }

/* ---------- stepper ---------- */
body.page-viewreg .vs-wrap {
  background: #FFFFFF; border: 1.5px solid #E2E8F0; border-radius: 16px;
  box-shadow: 0 6px 20px rgba(15,23,42,0.05);
  padding: 16px 20px; margin: 16px 0 0;
}
body.page-viewreg .vs-current { display: none; align-items: center; gap: 10px; margin-bottom: 10px; }
body.page-viewreg .vsc-badge {
  background: var(--upavp-maroon); color: #FFFFFF; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  padding: 5px 12px; white-space: nowrap; flex: none;
}
body.page-viewreg .vsc-title {
  font-size: 14.5px; font-weight: 700; color: #0F172A;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.page-viewreg .vs-stepper {
  display: flex; align-items: center; justify-content: space-between;
  gap: 4px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
body.page-viewreg .vs-stepper::-webkit-scrollbar { height: 4px; }
body.page-viewreg .vs-stepper::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
body.page-viewreg .vs-step {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: 6px 8px; margin: 0 !important;
  background: transparent; border: none; border-radius: 10px; cursor: pointer;
  text-align: left; transition: all .15s ease;
}
body.page-viewreg .vs-step:hover { background: #F8FAFC; }
body.page-viewreg .vs-num {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: #F1F5F9; color: #64748B; border: 1.5px solid #CBD5E1;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; transition: all .2s ease;
}
body.page-viewreg .vs-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.page-viewreg .vs-txt b {
  font-size: 14px; font-weight: 700; color: #64748B; white-space: nowrap;
  position: relative; padding-bottom: 2px;
}
body.page-viewreg .vs-txt i { font-style: normal; font-size: 12px; color: #94A3B8; white-space: nowrap; }
body.page-viewreg .vs-sep { color: #CBD5E1; font-size: 12px; flex: none; }

/* Completed step: crisp green check tint or dark neutral */
body.page-viewreg .vs-step.is-done .vs-num {
  background: #16A34A; color: #FFFFFF; border: none;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
}
body.page-viewreg .vs-step.is-done .vs-txt b { color: #0F172A; }
body.page-viewreg .vs-step.is-done .vs-txt i { color: #16A34A; font-weight: 600; }

/* Active step: brand maroon */
body.page-viewreg .vs-step.is-active .vs-num {
  background: linear-gradient(135deg, #861F41 0%, #A52A54 100%); color: #FFFFFF; border: none;
  box-shadow: 0 4px 14px rgba(134,31,65,0.35); transform: scale(1.05);
}
body.page-viewreg .vs-step.is-active .vs-txt b { color: var(--upavp-maroon); font-weight: 800; }
body.page-viewreg .vs-step.is-active .vs-txt b::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--upavp-maroon); border-radius: 2px;
}
body.page-viewreg .vs-step.is-active .vs-txt i { color: #475569; }

/* ---------- step navigation ---------- */
body.page-viewreg .vs-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 20px 0 0;
}
body.page-viewreg .vs-nav-hint {
  font-size: 14px; color: #475569; text-align: center; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto;
}
body.page-viewreg #vsPrev {
  background: #FFFFFF !important; border: 1.5px solid #CBD5E1 !important; color: #1E293B !important;
  font-weight: 700; padding: 0 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
body.page-viewreg #vsPrev:hover:not(:disabled) {
  background: #F8FAFC !important; border-color: #94A3B8 !important;
}
body.page-viewreg #vsNext {
  background: linear-gradient(135deg, #861F41 0%, #A52A54 100%); color: #FFFFFF;
  font-weight: 700; padding: 0 28px; box-shadow: 0 4px 16px rgba(134, 31, 65, 0.3);
}
body.page-viewreg #vsNext:hover:not(:disabled) {
  background: linear-gradient(135deg, #6C1834 0%, #861F41 100%);
  box-shadow: 0 6px 20px rgba(134, 31, 65, 0.38); transform: translateY(-1px);
}

/* ---------- section cards ---------- */
body.page-viewreg .vr-card {
  display: block;
  background: #FFFFFF; border: 1px solid #E2E8F0; border-top: 4px solid var(--upavp-maroon);
  border-radius: 16px;
  box-shadow: 0 10px 30px -4px rgba(15,23,42,0.07), 0 4px 8px -2px rgba(15,23,42,0.03);
  margin: 18px 0 0; overflow: hidden;
}
body.page-viewreg .vr-card-head {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(90deg, #FDF7F9 0%, #FFFFFF 100%);
  border-bottom: 1.5px solid #F1E5EC;
  padding: 20px 28px;
}
body.page-viewreg .vr-card-ico {
  width: 48px; height: 48px; border-radius: 14px; flex: none;
  background: linear-gradient(135deg, #861F41 0%, #A52A54 100%); color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
  box-shadow: 0 4px 14px rgba(134, 31, 65, 0.28);
}
body.page-viewreg .vr-card-text { flex: 1 1 auto; min-width: 0; }
body.page-viewreg .vr-card-text h3 {
  font-family: 'Lora', Georgia, serif;
  font-size: 21px; font-weight: 700; color: #0F172A; margin: 0 0 4px;
}
body.page-viewreg .vr-card-text p { font-size: 13.5px; color: #64748B; margin: 0; }
body.page-viewreg .vr-card-step {
  flex: none; white-space: nowrap;
  background: var(--upavp-maroon); color: #FFFFFF;
  border-radius: 999px; padding: 6px 16px; font-size: 12.5px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(134, 31, 65, 0.25);
}

/* ---------- read-only value grid / field textboxes ---------- */
body.page-viewreg .vr-fields {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 20px; padding: 24px 28px 30px;
  background: #FFFFFF;
}
body.page-viewreg .vr-field {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 0; border-bottom: none;
}
body.page-viewreg .vr-field-wide { grid-column: 1 / -1; }
body.page-viewreg .vr-f-label {
  font-size: 11px; font-weight: 700; color: #475569;
  letter-spacing: .04em; text-transform: uppercase;
  padding-left: 2px; transition: color .15s ease;
}
body.page-viewreg .vr-f-value {
  font-size: 14.5px; font-weight: 600; color: #0F172A;
  line-height: 1.4; word-break: break-word;
  background: #F8FAFC; border: 1.5px solid #CBD5E1;
  border-radius: 10px; padding: 10px 14px;
  min-height: 44px; display: flex; align-items: center;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: all .2s ease;
}
body.page-viewreg .vr-field:hover .vr-f-value {
  background: #FFFFFF; border-color: var(--upavp-maroon);
  box-shadow: 0 0 0 3px rgba(134, 31, 65, 0.10), inset 0 1px 2px rgba(15, 23, 42, 0.02);
}
body.page-viewreg .vr-field:hover .vr-f-label {
  color: var(--upavp-maroon);
}
body.page-viewreg .vr-empty {
  margin: 20px 28px 26px; padding: 18px 22px;
  background: #F8FAFC; border: 1.5px dashed #CBD5E1; border-radius: 12px;
  font-size: 14px; color: #64748B; font-weight: 500;
}
body.page-viewreg .vr-empty i { color: var(--upavp-maroon); margin-right: 8px; font-size: 15px; }

/* ---------- documents (Step 6) ---------- */
body.page-viewreg .vr-docs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px; padding: 24px 28px 30px;
}
body.page-viewreg .vr-doc {
  border: 1.5px solid #E2E8F0; border-top: 3.5px solid var(--upavp-maroon); border-radius: 14px;
  background: #FFFFFF; padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 4px 14px rgba(15,23,42,0.04);
  transition: all .2s ease;
}
body.page-viewreg .vr-doc:hover {
  border-color: #CBD5E1; box-shadow: 0 10px 24px rgba(15,23,42,0.08);
  transform: translateY(-2px);
}
body.page-viewreg .vr-doc-top { display: flex; align-items: center; gap: 12px; }
body.page-viewreg .vr-doc-ico {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, #861F41 0%, #A52A54 100%); color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
  box-shadow: 0 4px 10px rgba(134, 31, 65, 0.25);
}
body.page-viewreg .vr-doc-name { font-size: 14px; font-weight: 700; color: #0F172A; line-height: 1.35; }
body.page-viewreg .vr-doc-hint { font-size: 12px; color: #64748B; margin: 0; flex: 1 1 auto; }
body.page-viewreg .vr-doc-slot { display: block; }
body.page-viewreg .vr-doc-slot:empty::before {
  content: "Not uploaded";
  display: inline-block; font-size: 12px; font-weight: 600; color: #94A3B8;
  background: #F1F5F9; border: 1.5px solid #E2E8F0; border-radius: 8px; padding: 8px 14px;
}
body.page-viewreg .vr-doc-slot a,
body.page-viewreg .vr-doc-slot .btn-primarynew {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  height: 40px; width: 100%; padding: 0 16px !important; border-radius: 9px !important;
  background: linear-gradient(135deg, #861F41 0%, #A52A54 100%) !important; color: #FFFFFF !important;
  border: none !important;
  font-size: 13.5px !important; font-weight: 700 !important;
  margin: 0 !important; box-shadow: 0 4px 12px rgba(134, 31, 65, 0.25) !important; text-decoration: none !important;
  transition: all .2s ease !important;
}
body.page-viewreg .vr-doc-slot a::before {
  content: "\f019"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900; font-size: 13px;
}
body.page-viewreg .vr-doc-slot a:hover {
  background: linear-gradient(135deg, #6C1834 0%, #861F41 100%) !important;
  box-shadow: 0 6px 16px rgba(134, 31, 65, 0.35) !important;
  transform: translateY(-1px);
}

/* ---------- registration fee (Step 7) ---------- */
body.page-viewreg .vr-fee-body { padding: 24px 28px 30px; }
body.page-viewreg .vr-fee-body .table-responsive {
  border: 1.5px solid #E2E8F0; border-radius: 14px; overflow: auto; background: #FFFFFF;
  box-shadow: 0 4px 16px rgba(15,23,42,0.04);
}
body.page-viewreg table.vr-fee-table {
  width: 100% !important; margin: 0 !important; border-collapse: collapse !important;
}
body.page-viewreg table.vr-fee-table thead tr { background: #F8FAFC !important; }
body.page-viewreg table.vr-fee-table thead th {
  background: #F8FAFC !important; color: #334155 !important;
  font-size: 12px !important; font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase;
  padding: 14px 16px !important; border: none !important;
  border-bottom: 2px solid #E2E8F0 !important; text-align: left !important; white-space: nowrap;
}
body.page-viewreg table.vr-fee-table tbody td {
  padding: 15px 16px !important; font-size: 14px !important; color: #1E293B !important;
  border: none !important; border-bottom: 1px solid #F1F5F9 !important; vertical-align: middle !important;
}
body.page-viewreg table.vr-fee-table tbody tr:last-child td { border-bottom: none !important; }
body.page-viewreg table.vr-fee-table tbody tr.vr-fee-selected td {
  background: #F0FDF4 !important; color: #0F172A !important; font-weight: 700;
}
body.page-viewreg table.vr-fee-table tbody tr.vr-fee-selected td:nth-child(2)::after {
  content: "Selected"; display: inline-block; margin-left: 10px;
  background: #16A34A; color: #FFFFFF; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 10px; vertical-align: middle; box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25);
}
body.page-viewreg .vr-fee-tick {
  width: 24px; height: 24px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center;
  background: #16A34A; color: #FFFFFF; font-size: 11px;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
}
body.page-viewreg .vr-fee-dot {
  width: 18px; height: 18px; border-radius: 50%; display: inline-block;
  border: 2px solid #CBD5E1; background: #FFFFFF;
}
body.page-viewreg #dueDateMsg {
  margin: 16px 0 0 !important; font-size: 13.5px !important; font-weight: 600 !important;
  color: #B42318 !important; background: #FEF3F2; border: 1.5px solid #FECDCA;
  border-radius: 12px; padding: 12px 16px !important;
}

body.page-viewreg .vr-print-note {
  margin: 18px 0 0; font-size: 13px; color: #475569; font-weight: 500;
  background: #FFFFFF; border: 1.5px dashed #CBD5E1; border-radius: 14px; padding: 14px 20px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.03);
}
body.page-viewreg .vr-print-note i { color: var(--upavp-maroon); margin-right: 8px; font-size: 15px; }

/* ---------- payment details modal & receipt download button ---------- */
.btn-receipt-download {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #861F41 0%, #5E142B 100%) !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  border: 1px solid #731A36 !important;
  box-shadow: 0 2px 8px rgba(134, 31, 65, 0.25) !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
}
.btn-receipt-download:hover {
  background: linear-gradient(135deg, #9B264E 0%, #751A38 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(134, 31, 65, 0.38) !important;
  transform: translateY(-1px) !important;
}
.btn-receipt-download i {
  color: #FDE047 !important;
  font-size: 13px !important;
}

body.page-viewreg .main-modal {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200 !important;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}
body.page-viewreg .main-modal .model-left {
  width: min(1200px, 95vw) !important;
  max-height: 90vh !important;
  overflow: auto !important;
}
body.page-viewreg .main-modal .box {
  background: #FFFFFF !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.35) !important;
  border: 1px solid #E2E8F0 !important;
}
body.page-viewreg .main-modal .box > div:first-child {
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
  padding: 16px 24px !important;
}
body.page-viewreg .main-modal h2 {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin: 0 !important;
}
body.page-viewreg .main-modal .modal-close {
  cursor: pointer !important;
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all .15s ease !important;
}
body.page-viewreg .main-modal .modal-close:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}
body.page-viewreg .main-modal table {
  width: 100% !important;
  margin-bottom: 0 !important;
}
body.page-viewreg .main-modal table thead th {
  background: #F8FAFC !important;
  color: #1E293B !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
  border: 1px solid #E2E8F0 !important;
  padding: 12px 14px !important;
}
body.page-viewreg .main-modal table tbody td {
  font-size: 13px !important;
  color: #334155 !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
  border: 1px solid #E2E8F0 !important;
}
body.page-viewreg .main-modal table tbody tr:nth-child(even) {
  background: #F8FAFC;
}
body.page-viewreg .main-modal table tbody tr:hover {
  background: #F1F5F9;
}

/* ============================================================================
   PRINT / SAVE AS PDF
   Every step is opened, the pricing table is expanded, and the page prints as
   a proper two-column application form on A4.
   ============================================================================ */
@media print {
  @page { size: A4 portrait; margin: 12mm 11mm 13mm; }

  body.page-viewreg {
    background: #fff !important;
    font-size: 10.5pt !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* screen-only chrome */
  body.page-viewreg .upavp-header,
  body.page-viewreg .contact-topbar,
  body.page-viewreg .top-contact-bar,
  body.page-viewreg .top-bar,
  body.page-viewreg .vr-hero,
  body.page-viewreg .vr-statusbar,
  body.page-viewreg .vr-terms-toggle,
  body.page-viewreg .vs-wrap,
  body.page-viewreg .vs-nav,
  body.page-viewreg .vr-print-note,
  body.page-viewreg .main-modal,
  body.page-viewreg .vr-card-step,
  body.page-viewreg .vr-doc-slot,
  body.page-viewreg .upavp-footer,
  body.page-viewreg footer { display: none !important; }

  body.page-viewreg .content { margin: 0 !important; padding: 0 !important; }
  body.page-viewreg .vr-shell { max-width: none !important; padding: 0 !important; margin: 0 !important; }

  /* letterhead on the first page */
  body.page-viewreg .vr-print-head {
    display: flex !important; align-items: flex-start; justify-content: space-between; gap: 16px;
    border-bottom: 2px solid #861F41; padding-bottom: 8px; margin-bottom: 10px;
  }
  body.page-viewreg .vr-ph-brand { display: flex; align-items: center; gap: 10px; }
  body.page-viewreg .vr-ph-brand img { height: 34px; width: auto; }
  body.page-viewreg .vr-ph-brand img { height: 38px !important; }
  body.page-viewreg .vr-ph-brand > div { display: none; }
  body.page-viewreg .vr-ph-meta { text-align: right; }
  body.page-viewreg .vr-ph-meta > b { display: block; font-size: 12pt; color: #861F41; }
  body.page-viewreg .vr-ph-meta > span { display: block; font-size: 8.5pt; color: #475569; line-height: 1.5; }
  body.page-viewreg .vr-ph-meta > span b { display: inline; font-weight: 700; color: #1B2A4A; }

  /* status chips read as a summary line */
  body.page-viewreg .vr-chips { display: flex !important; gap: 8px; margin: 0 0 8px !important; }
  body.page-viewreg .vr-chip {
    border: 1px solid #D9DEE7 !important; background: #fff !important; color: #334155 !important;
    font-size: 8.5pt !important; padding: 3px 9px !important;
  }
  body.page-viewreg .vr-chip i { display: none; }

  /* every step on paper */
  body.page-viewreg .vs-panel { display: block !important; }

  body.page-viewreg .vr-card {
    box-shadow: none !important;
    border: 1px solid #D9DEE7 !important; border-radius: 6px !important;
    margin: 0 0 8px !important; overflow: visible !important;
    break-inside: auto; page-break-inside: auto;
  }
  body.page-viewreg .vr-card-head {
    background: #F5E7EE !important; border-bottom: 1px solid #E4C9D6 !important;
    padding: 6px 10px !important; gap: 8px;
    break-after: avoid; page-break-after: avoid;
  }
  body.page-viewreg .vr-card-ico { width: 22px !important; height: 22px !important; font-size: 10px !important; }
  body.page-viewreg .vr-card-text h3 { font-size: 12pt !important; margin: 0 !important; }
  body.page-viewreg .vr-card-text p { font-size: 8pt !important; }

  body.page-viewreg .vr-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important; padding: 4px 10px 8px !important;
  }
  body.page-viewreg .vr-field {
    padding: 5px 14px 5px 0 !important; gap: 1px;
    break-inside: avoid; page-break-inside: avoid;
  }
  body.page-viewreg .vr-f-label { font-size: 7.5pt !important; text-transform: none; letter-spacing: 0; }
  body.page-viewreg .vr-f-value { font-size: 10pt !important; }
  body.page-viewreg .vr-empty { margin: 6px 10px 10px !important; padding: 8px 10px !important; font-size: 9pt !important; }

  /* documents: a compact checklist, download links are useless on paper */
  body.page-viewreg .vr-docs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px 14px !important; padding: 6px 10px 10px !important;
  }
  body.page-viewreg .vr-doc {
    flex-direction: row !important; align-items: baseline; gap: 7px;
    border: none !important; background: transparent !important; padding: 3px 0 !important;
    border-bottom: 1px solid #EDF0F5 !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  body.page-viewreg .vr-doc-ico { display: none !important; }
  body.page-viewreg .vr-doc-name { font-size: 9.5pt !important; flex: 1 1 auto; }
  body.page-viewreg .vr-doc-hint { display: none !important; }
  body.page-viewreg .vr-doc-print {
    display: inline-block !important; font-size: 8.5pt !important; font-weight: 700;
    color: #94A3B8; white-space: nowrap;
  }
  body.page-viewreg .vr-doc.has-doc .vr-doc-print { color: #15803D; }
  body.page-viewreg .vr-doc.has-doc .vr-doc-print::before { content: "\2713 \00a0"; }

  /* fee table */
  body.page-viewreg .vr-fee-body { padding: 6px 10px 10px !important; }
  body.page-viewreg .vr-fee-body .table-responsive { border: 1px solid #D9DEE7 !important; border-radius: 4px !important; overflow: visible !important; }
  body.page-viewreg table.vr-fee-table thead { display: table-header-group; }
  body.page-viewreg table.vr-fee-table thead th {
    background: #F5E7EE !important; color: #861F41 !important;
    font-size: 7.5pt !important; padding: 5px 7px !important; border-bottom: 1px solid #E4C9D6 !important;
  }
  body.page-viewreg table.vr-fee-table tbody td {
    font-size: 9pt !important; padding: 5px 7px !important; border-bottom: 1px solid #EDF0F5 !important;
  }
  body.page-viewreg table.vr-fee-table tbody tr { break-inside: avoid; page-break-inside: avoid; }
  body.page-viewreg table.vr-fee-table tbody tr.vr-fee-selected td { background: #FBF1F5 !important; }
  body.page-viewreg .vr-fee-tick { width: 13px !important; height: 13px !important; font-size: 7px !important; }
  body.page-viewreg .vr-fee-dot { width: 11px !important; height: 11px !important; }

  /* scheme details & pricing - always expanded, on its own page */
  body.page-viewreg .vr-terms { margin: 0 0 8px !important; break-inside: auto; page-break-inside: auto; }
  body.page-viewreg .vr-terms::before {
    content: "Scheme Details & Pricing";
    display: block; background: #F5E7EE; border: 1px solid #E4C9D6; border-bottom: none;
    border-radius: 6px 6px 0 0; padding: 6px 10px;
    font-family: 'Lora', Georgia, serif; font-size: 12pt; font-weight: 700; color: #1B2A4A;
  }
  body.page-viewreg .vr-terms-body {
    display: block !important; border: 1px solid #D9DEE7 !important;
    border-radius: 0 0 6px 6px !important; padding: 8px 10px !important; overflow: visible !important;
  }
  body.page-viewreg .vr-terms-body * { max-width: 100% !important; }
  body.page-viewreg .vr-terms-body table {
    width: 100% !important; border-collapse: collapse !important;
    font-size: 8.5pt !important; table-layout: auto !important;
  }
  body.page-viewreg .vr-terms-body td,
  body.page-viewreg .vr-terms-body th {
    border: 1px solid #D9DEE7 !important; padding: 4px 6px !important;
    word-break: normal; overflow-wrap: break-word; vertical-align: top;
  }
  body.page-viewreg .vr-terms-body tr { break-inside: avoid; page-break-inside: avoid; }
  body.page-viewreg .vr-terms-body th { background: #F5F7FA !important; font-weight: 700; }
  body.page-viewreg .vr-terms-body img { max-width: 100% !important; height: auto !important; }

  /* declaration + signature */
  body.page-viewreg .vr-print-sign {
    display: block !important; margin-top: 10px;
    break-inside: avoid; page-break-inside: avoid;
  }
  body.page-viewreg .vr-print-decl {
    border: 1px solid #D9DEE7; border-radius: 6px; padding: 7px 10px; margin-bottom: 14px;
  }
  body.page-viewreg .vr-print-decl b { font-size: 9.5pt; color: #1B2A4A; }
  body.page-viewreg .vr-print-decl p { font-size: 8.5pt; color: #334155; margin: 3px 0 0; line-height: 1.45; }
  body.page-viewreg .vr-print-slots { display: flex; justify-content: space-between; gap: 40px; }
  body.page-viewreg .vr-print-slots > div { flex: 1 1 0; font-size: 8.5pt; color: #475569; text-align: center; }
  body.page-viewreg .vr-sign-line { display: block; border-top: 1px solid #94A3B8; margin-bottom: 4px; height: 34px; }
}

/* ---------- responsive ---------- */
@media (max-width: 1400px) {
  body.page-viewreg .vs-txt i { display: none; }
  body.page-viewreg .vs-txt b { font-size: 13.5px; }
  body.page-viewreg .vs-num { width: 31px; height: 31px; font-size: 13.5px; }
  body.page-viewreg .vr-docs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1150px) {
  body.page-viewreg .vs-current { display: flex; }
  body.page-viewreg .vs-txt { display: none; }
  body.page-viewreg .vs-stepper { justify-content: flex-start; gap: 2px; }
  body.page-viewreg .vs-step { padding: 4px 2px; }
  body.page-viewreg .vr-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-viewreg .vr-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  body.page-viewreg .vr-hero { height: auto; padding: 24px 0; }
  body.page-viewreg .vr-hero-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  body.page-viewreg .vr-hero-curve { display: none; }
  body.page-viewreg .vr-hero-copy h1 { font-size: 27px; }
  body.page-viewreg .vr-hero-quote { text-align: left; padding-right: 0; }
  body.page-viewreg .vr-hero-quote-rule { margin-left: 0; }
  body.page-viewreg .vr-statusbar { flex-direction: column; align-items: stretch; }
  body.page-viewreg .vr-card-head { padding: 16px 18px; gap: 12px; flex-wrap: wrap; }
  body.page-viewreg .vr-card-text h3 { font-size: 18px; }
  body.page-viewreg .vr-fields { grid-template-columns: minmax(0, 1fr); padding: 6px 18px 18px; }
  body.page-viewreg .vr-docs { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  body.page-viewreg .vr-fee-body { padding: 18px; }
  body.page-viewreg .vs-nav-hint { display: none; }
}
@media (max-width: 640px) {
  body.page-viewreg .vr-status-actions { flex-direction: column; align-items: stretch; }
  body.page-viewreg .vr-btn,
  body.page-viewreg .vr-status-actions .btn-primarynew { width: 100%; }
  body.page-viewreg .vr-status-actions > span { display: block; }
  body.page-viewreg .vs-nav { flex-wrap: wrap; }
  body.page-viewreg .vs-nav .vr-btn { flex: 1 1 140px; }
}

/* ============================================================================
   SCHEME LIST — TYPE / TAGLINE CHIPS, LIVE BOOKING STATUS, COUNTDOWN TIMER
   Booking status and the timer come from the registration window the admin
   sets (date + time), so a scheme closes by itself the moment it expires.
   ============================================================================ */

/* ---------- type + tagline chips ---------- */
.scheme-tag.tag-type { text-transform: capitalize; }
.scheme-tag.tag-residential { background: #FDE8E8; color: #B91C1C; }
.scheme-tag.tag-commercial  { background: #EDE9FE; color: #6D28D9; }
.scheme-tag.tag-affordable  { background: #E7EFFB; color: #1D4ED8; }

/* ---------- live status chips ---------- */
.scheme-tag.scheme-status-tag {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent; white-space: nowrap;
}
.scheme-tag.scheme-status-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
.scheme-tag.tag-open     { background: #E9F8EF; color: #15803D; border-color: #CDEFD9; }
.scheme-tag.tag-soon     { background: #FFF3E4; color: #B45309; border-color: #FCE0BE; }
.scheme-tag.tag-soon::before { animation: upavpPulse 1.1s ease-in-out infinite; }
.scheme-tag.tag-upcoming { background: #EEF2FF; color: #4338CA; border-color: #D8DEFB; }
.scheme-tag.tag-closed   { background: #F1F3F7; color: #64748B; border-color: #E2E6ED; }

@keyframes upavpPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

/* ---------- end time under the end date ---------- */
.scheme-row-card .scheme-date-item .sd-time {
  display: block; font-size: 11.5px; font-weight: 600; color: var(--upavp-maroon); margin-top: 1px;
}

/* ---------- countdown ---------- */
.scheme-row-card .scheme-countdown {
  display: inline-flex; flex-direction: row; align-items: center; gap: 6px;
  background: #FFF3E4;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #FCE0BE;
}
.scheme-row-card .scheme-countdown:empty { display: none; }
.scheme-row-card .cd-label {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: #B45309; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px;
}
.scheme-row-card .cd-label i { font-size: 10px; color: #B45309; }
.scheme-row-card .cd-label.is-urgent,
.scheme-row-card .cd-label.is-urgent i { color: #B45309; }
.scheme-row-card .cd-label.cd-over,
.scheme-row-card .cd-label.cd-over i { color: #94A3B8; }
.scheme-row-card[data-status="closed"] .scheme-countdown { background: #F1F3F7; border-color: #E2E6ED; }

.scheme-row-card .cd-clock {
  display: inline-flex; align-items: baseline; gap: 2px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.scheme-row-card .cd-clock b {
  font-size: 12px; font-weight: 700; color: #92400E;
  background: #fff; border-radius: 4px; padding: 2px 4px; min-width: 20px; text-align: center;
  box-shadow: 0 1px 2px rgba(180, 83, 9, 0.1);
}
.scheme-row-card .cd-clock i {
  font-style: normal; font-size: 9px; font-weight: 700; color: #B45309; margin: 0 2px 0 1px;
}
.scheme-row-card .cd-clock.is-urgent b { background: #FFF3E4; color: #B45309; }

/* ---------- an expired scheme cannot be applied to ---------- */
.scheme-row-card .scheme-actions .btn-maroon.is-disabled {
  background: #E2E6ED !important; color: #94A3B8 !important;
  box-shadow: none !important; cursor: not-allowed; pointer-events: none;
}
.scheme-row-card .scheme-actions .btn-maroon.is-disabled i { color: #94A3B8 !important; }

/* ---------- empty state when the filters match nothing ---------- */
.scheme-empty {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: #fff; border: 1px dashed var(--upavp-border); border-radius: 16px;
  padding: 46px 24px; text-align: center; margin-top: 4px;
}
.scheme-empty i { font-size: 24px; color: var(--upavp-maroon); opacity: .5; }
.scheme-empty b { font-family: 'Lora', Georgia, serif; font-size: 18px; color: var(--upavp-ink); }
.scheme-empty span { font-size: 13.5px; color: var(--upavp-muted); }

/* ---------- toolbar now carries five controls ---------- */
.scheme-toolbar { flex-wrap: wrap; }
.scheme-toolbar .st-search { flex: 2 1 260px; min-width: 220px; }
.scheme-toolbar .st-select { flex: 1 1 165px; min-width: 150px; }
.scheme-toolbar .btn-maroon { flex: 0 0 auto; }

@media (max-width: 900px) {
  .scheme-toolbar .st-search,
  .scheme-toolbar .st-select { flex: 1 1 100%; }
  .scheme-toolbar .btn-maroon { width: 100%; }
  .scheme-row-card .scheme-countdown { margin-top: 6px; }
}

/* ---------- admin scheme form: booking window preview ---------- */
.reg-window-note {
  display: block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: #861F41;
  background: #FCE7EF; border: 1px solid #F3D3DF; border-radius: 9px; padding: 8px 12px;
}
.reg-window-note:empty { display: none; }
.reg-window-note i { margin-right: 6px; }

/* =========================================================================
   ADMIN SCHEME LIST ENHANCED COLUMNS & BADGES (SchemeList & SchemeListForUpdate)
   ========================================================================= */
.badge-status-running {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #ECFDF5 !important;
  color: #059669 !important;
  border: 1px solid #A7F3D0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.08) !important;
}

.pulse-green-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  display: inline-block !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
  animation: pulseGreenDot 2s infinite !important;
}

@keyframes pulseGreenDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.badge-status-completed {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #F1F5F9 !important;
  color: #475569 !important;
  border: 1px solid #CBD5E1 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

.badge-status-upcoming {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #BFDBFE !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

.badge-status-other {
  display: inline-flex !important;
  background: #F8FAFC !important;
  color: #64748B !important;
  border: 1px solid #E2E8F0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

.scheme-dt-cell {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  font-size: 12px !important;
}
.scheme-dt-date {
  font-weight: 600 !important;
  color: #1E293B !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}
.scheme-dt-date i {
  color: #97144D !important;
  font-size: 11.5px !important;
}
.scheme-dt-time {
  font-size: 11px !important;
  color: #64748B !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}
.scheme-dt-time i {
  color: #94A3B8 !important;
  font-size: 11px !important;
}

.scheme-pill-tag {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
.scheme-pill-tag.tag-residential {
  background: #FDF2F8 !important;
  color: #9D174D !important;
  border: 1px solid #FBCFE8 !important;
}
.scheme-pill-tag.tag-commercial {
  background: #FFFBEB !important;
  color: #B45309 !important;
  border: 1px solid #FDE68A !important;
}
.scheme-pill-tag.tag-tagline {
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #DBEAFE !important;
}
.scheme-fee-val {
  font-weight: 700 !important;
  color: #0F172A !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

/* =========================================================================
   EMPLOYEE DETAIL PAGE (editEmployeeDetail / addEmployeeDetail)
   ========================================================================= */
.emp-detail-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 24px -6px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden !important;
}

.emp-detail-header {
  padding: 18px 24px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%) !important;
  border-bottom: 1px solid #F1F5F9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.emp-btn-back {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #F1F5F9 !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  border: 1px solid #E2E8F0 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-size: 14px !important;
}
.emp-btn-back:hover {
  background: #97144D !important;
  color: #FFFFFF !important;
  border-color: #97144D !important;
  transform: translateX(-3px) !important;
}

.emp-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
.emp-status-badge.edit {
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #BFDBFE !important;
}
.emp-status-badge.create {
  background: #ECFDF5 !important;
  color: #047857 !important;
  border: 1px solid #A7F3D0 !important;
}

.emp-section-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 22px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

.emp-section-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #64748B !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.emp-section-title i {
  color: #97144D !important;
  font-size: 13px !important;
}

/* 2 Columns Per Row Form Grid */
.emp-form-grid-2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px 20px !important;
}
@media (max-width: 768px) {
  .emp-form-grid-2 {
    grid-template-columns: 1fr !important;
  }
}

.emp-input-group {
  position: relative !important;
  margin-bottom: 0 !important;
}

.emp-label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.01em !important;
}
.emp-label .req {
  color: #E11D48 !important;
  margin-left: 2px !important;
}
.emp-label-desc {
  display: block !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #64748B !important;
  margin-top: 1px !important;
  margin-bottom: 6px !important;
  line-height: 1.35 !important;
}

.emp-input-icon-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}
.emp-input-icon {
  position: absolute !important;
  left: 14px !important;
  top: 13px !important;
  color: #94A3B8 !important;
  font-size: 13px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transition: color 0.2s ease !important;
}
.emp-input-icon-wrap:focus-within .emp-input-icon {
  color: #97144D !important;
}

.emp-input-control {
  width: 100% !important;
  height: 42px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 8px !important;
  padding: 0 14px 0 40px !important;
  font-size: 13.5px !important;
  color: #1E293B !important;
  background: #FFFFFF !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  outline: none !important;
}
.emp-input-control:focus {
  border-color: #97144D !important;
  box-shadow: 0 0 0 3px rgba(151, 20, 77, 0.12) !important;
}

select.emp-input-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748B'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px 16px !important;
  padding-right: 38px !important;
  cursor: pointer !important;
}

.emp-input-icon-wrap > .field-validation-error,
.emp-input-group > .field-validation-error {
  width: 100% !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #DC2626 !important;
  margin-top: 5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.emp-input-control.is-invalid {
  border-color: #EF4444 !important;
  background-color: #FEF2F2 !important;
}
.emp-input-control.is-invalid:focus {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* Status Privileges Toggle Cards */
.emp-toggle-cards {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}
@media (max-width: 640px) {
  .emp-toggle-cards {
    grid-template-columns: 1fr !important;
  }
}

.emp-privilege-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
}
.emp-privilege-card:hover {
  border-color: #CBD5E1 !important;
  background: #FAFBFD !important;
}
.emp-privilege-card.is-active {
  background: #FDF4F7 !important;
  border-color: #F3C4D4 !important;
  box-shadow: 0 2px 6px rgba(151, 20, 77, 0.08) !important;
}

.emp-custom-checkbox {
  width: 18px !important;
  height: 18px !important;
  border-radius: 5px !important;
  border: 1.5px solid #CBD5E1 !important;
  accent-color: #97144D !important;
  cursor: pointer !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

.emp-privilege-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
  display: block !important;
  line-height: 1.2 !important;
}
.emp-privilege-card.is-active .emp-privilege-title {
  color: #831843 !important;
}
.emp-privilege-desc {
  font-size: 11px !important;
  color: #64748B !important;
  display: block !important;
  margin-top: 3px !important;
  line-height: 1.3 !important;
}

/* Scheme Rights Column */
.emp-scheme-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
}

.emp-scheme-count-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  background: #FDF2F8 !important;
  color: #9D174D !important;
  border: 1px solid #FBCFE8 !important;
}

.emp-select-all-box {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
}
.emp-select-all-box:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}

/* Scheme Search Input */
.emp-scheme-search {
  position: relative !important;
  margin-bottom: 14px !important;
}
.emp-scheme-search input {
  width: 100% !important;
  height: 38px !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 8px !important;
  padding: 0 34px 0 36px !important;
  font-size: 12.5px !important;
  color: #1E293B !important;
  background: #FFFFFF !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  outline: none !important;
}
.emp-scheme-search input:focus {
  border-color: #97144D !important;
  box-shadow: 0 0 0 3px rgba(151, 20, 77, 0.1) !important;
}
.emp-scheme-search .search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94A3B8 !important;
  font-size: 12px !important;
  pointer-events: none !important;
}
.emp-scheme-search .clear-search-btn {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94A3B8 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 4px !important;
  display: none;
}
.emp-scheme-search .clear-search-btn:hover {
  color: #475569 !important;
}

/* Scheme List Scrollable Area - 2 SCHEMES PER ROW */
.emp-scheme-scroll-box {
  max-height: 480px !important;
  overflow-y: auto !important;
  padding-right: 6px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 14px !important;
  align-content: start !important;
}
@media (max-width: 768px) {
  .emp-scheme-scroll-box {
    grid-template-columns: 1fr !important;
  }
}

.emp-scheme-scroll-box::-webkit-scrollbar {
  width: 6px !important;
}
.emp-scheme-scroll-box::-webkit-scrollbar-track {
  background: #F1F5F9 !important;
  border-radius: 3px !important;
}
.emp-scheme-scroll-box::-webkit-scrollbar-thumb {
  background: #CBD5E1 !important;
  border-radius: 3px !important;
}
.emp-scheme-scroll-box::-webkit-scrollbar-thumb:hover {
  background: #94A3B8 !important;
}

#noSchemeMatchMsg {
  grid-column: 1 / -1 !important;
}

/* Scheme Item Card */
.emp-scheme-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 14px !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  user-select: none !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}
.emp-scheme-item:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  transform: translateY(-1px) !important;
}
.emp-scheme-item.is-selected {
  background: #FDF4F7 !important;
  border-color: #F3C4D4 !important;
  box-shadow: 0 1px 3px rgba(151, 20, 77, 0.06) !important;
}
.emp-scheme-item.is-hidden {
  display: none !important;
}

.emp-scheme-item .emp-custom-checkbox {
  margin-top: 0 !important;
}

.emp-scheme-icon-badge {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: #F1F5F9 !important;
  color: #64748B !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}
.emp-scheme-item.is-selected .emp-scheme-icon-badge {
  background: #97144D !important;
  color: #FFFFFF !important;
}

.emp-scheme-text-wrap {
  flex: 1 !important;
  min-width: 0 !important;
}
.emp-scheme-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1E293B !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}
.emp-scheme-item.is-selected .emp-scheme-name {
  color: #831843 !important;
  font-weight: 700 !important;
}
.emp-scheme-id {
  font-size: 11px !important;
  color: #64748B !important;
  display: block !important;
  margin-top: 2px !important;
}

/* Actions Footer */
.emp-actions-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  background: #FAFBFD !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
}
@media (max-width: 640px) {
  .emp-actions-footer {
    flex-direction: column-reverse !important;
  }
  .emp-actions-footer .btn-emp-submit,
  .emp-actions-footer .btn-emp-cancel {
    width: 100% !important;
  }
}

/* Submit Action Button */
.btn-emp-submit {
  background: linear-gradient(135deg, #97144D 0%, #7E1040 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 11px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 12px rgba(151, 20, 77, 0.28) !important;
}
.btn-emp-submit:hover {
  background: linear-gradient(135deg, #7E1040 0%, #680C34 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(151, 20, 77, 0.38) !important;
}
.btn-emp-submit:disabled {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
.btn-emp-cancel {
  border: 1.5px solid #CBD5E1 !important;
  background: #FFFFFF !important;
  color: #475569 !important;
  border-radius: 10px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.btn-emp-cancel:hover {
  background: #F8FAFC !important;
  border-color: #94A3B8 !important;
  color: #1E293B !important;
}


/* ============================================================================
   PAYMENT MODAL – PRINT / SAVE AS PDF
   Always suppress the payment popup from appearing in any printed or PDF
   output. The modal uses position:fixed, which most browsers DO render in
   the print context, so we must explicitly hide it here.
   ============================================================================ */
@media print {
  .main-modal { display: none !important; }
}

/* ============================================================================
   PAYMENT MODAL – TABLE SCROLL FIX
   The modal container must allow horizontal scrolling so all columns of the
   payment history table (10 columns) are accessible.  The old overflow:hidden
   on .intro-y.box was clipping the table at about 6 columns.
   ============================================================================ */
.main-modal .model-left {
  overflow-y: auto;
  overflow-x: visible;
}
.main-modal .intro-y.box {
  overflow: visible !important;
}
.main-modal .table-responsive {
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-width: 100% !important;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 #F1F5F9;
}
.main-modal .table-responsive::-webkit-scrollbar { height: 6px; }
.main-modal .table-responsive::-webkit-scrollbar-track { background: #F1F5F9; border-radius: 3px; }
.main-modal .table-responsive::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
.main-modal .table-responsive::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ============================================================================
   SEARCHABLE DROPDOWNS (Select2) + THEMED DATE/TIME PICKERS (Flatpickr)
   ----------------------------------------------------------------------------
   Poore application ke <select> ab Select2 se enhance hote hain (search box
   built-in) aur <input type="date"/time"> Flatpickr se (theme ke maroon color
   ke saath calendar/clock popup). JS: assets/js/upavp-ui-enhance.js
   Yeh single block dono variable-sets (--adm-* admin pages, --upavp-* citizen
   pages) ko cover karta hai, isliye poori site pe consistent dikhta hai.
   ============================================================================ */

/* ---------- Select2 : container ko form-control jaisa dikhana ---------- */
.select2-container {
  width: 100% !important;
}
.select2-container .select2-selection--single {
  height: 44px !important;
  display: flex;
  align-items: center;
  border: 1px solid var(--adm-line, var(--upavp-border, #ECD9DF)) !important;
  border-radius: var(--adm-radius-sm, 10px) !important;
  background-color: #fff !important;
  padding: 0 14px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.select2-container .select2-selection--single:hover {
  border-color: #E3CDD6 !important;
}
.select2-container--open .select2-selection--single,
.select2-container .select2-selection--single.select2-selection--focused {
  border-color: var(--adm-brand, var(--upavp-maroon, #861F41)) !important;
  box-shadow: 0 0 0 4px var(--adm-brand-soft, var(--upavp-pink-badge, #FBEAF0)) !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  line-height: 42px !important;
  font-size: 13.8px;
  color: var(--adm-ink, var(--upavp-ink, #1C2331));
}
.select2-container .select2-selection--single .select2-selection__placeholder {
  color: #94A3B8;
}
.select2-container .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
  right: 10px !important;
}
.select2-container .select2-selection--single .select2-selection__arrow b {
  border-color: var(--adm-brand, var(--upavp-maroon, #861F41)) transparent transparent transparent !important;
  border-width: 6px 5px 0 5px !important;
  margin-left: -5px !important;
}
.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--adm-brand, var(--upavp-maroon, #861F41)) transparent !important;
  border-width: 0 5px 6px 5px !important;
}
.select2-container .select2-selection--single .select2-selection__clear {
  color: #94A3B8;
  margin-right: 6px;
}
/* disabled selects should still look like disabled form-controls */
.select2-container--disabled .select2-selection--single {
  background-color: #F6F1F3 !important;
  cursor: not-allowed;
}
/* multi-select (tags) — used sparingly, but kept consistent just in case */
.select2-container .select2-selection--multiple {
  min-height: 44px !important;
  border: 1px solid var(--adm-line, var(--upavp-border, #ECD9DF)) !important;
  border-radius: var(--adm-radius-sm, 10px) !important;
  padding: 4px 8px !important;
}
.select2-container--open .select2-selection--multiple {
  border-color: var(--adm-brand, var(--upavp-maroon, #861F41)) !important;
  box-shadow: 0 0 0 4px var(--adm-brand-soft, var(--upavp-pink-badge, #FBEAF0)) !important;
}
.select2-selection__choice {
  background: var(--adm-brand-soft, var(--upavp-pink-badge, #FBEAF0)) !important;
  border: 1px solid var(--adm-brand-light, var(--upavp-maroon-light, #A52A54)) !important;
  color: var(--adm-brand, var(--upavp-maroon, #861F41)) !important;
  border-radius: 999px !important;
  padding: 2px 10px !important;
}
.select2-selection__choice__remove { color: var(--adm-brand, #861F41) !important; }

/* ---------- Select2 : dropdown panel + built-in search box ---------- */
.select2-dropdown {
  border: 1px solid var(--adm-line, var(--upavp-border, #ECD9DF)) !important;
  border-radius: var(--adm-radius-sm, 10px) !important;
  box-shadow: var(--adm-shadow, 0 10px 30px rgba(16,24,40,.12)) !important;
  overflow: hidden;
  z-index: 9999;
}
.select2-search--dropdown {
  padding: 8px !important;
  background: var(--adm-brand-tint, var(--upavp-cream, #FDF7F9));
}
.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--adm-line, var(--upavp-border, #ECD9DF)) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 13.5px !important;
  outline: none !important;
}
.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--adm-brand, var(--upavp-maroon, #861F41)) !important;
  box-shadow: 0 0 0 3px var(--adm-brand-soft, var(--upavp-pink-badge, #FBEAF0)) !important;
}
.select2-results__option {
  padding: 9px 14px !important;
  font-size: 13.6px;
  color: var(--adm-ink, var(--upavp-ink, #1C2331));
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--adm-brand, var(--upavp-maroon, #861F41)) !important;
  color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--adm-brand-soft, var(--upavp-pink-badge, #FBEAF0)) !important;
  color: var(--adm-brand, var(--upavp-maroon, #861F41)) !important;
  font-weight: 600;
}
.select2-results__option--group .select2-results__group {
  font-weight: 700;
  color: var(--adm-muted, var(--upavp-muted, #8A8F9C));
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.select2-results__message {
  color: var(--adm-muted, var(--upavp-muted, #8A8F9C));
  padding: 12px 14px !important;
  font-size: 13px;
}
/* scrollbar polish inside the results list */
.select2-results__options { scrollbar-width: thin; scrollbar-color: #CBD5E1 #F6F1F3; }
.select2-results__options::-webkit-scrollbar { width: 6px; }
.select2-results__options::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }

/* form-control sized selects (form-control-sm) get a shorter Select2 too */
select.form-control-sm.select2-hidden-accessible + .select2-container .select2-selection--single {
  height: 38px !important;
}
select.form-control-sm.select2-hidden-accessible + .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important;
}
select.form-control-sm.select2-hidden-accessible + .select2-container .select2-selection--single .select2-selection__arrow {
  height: 36px !important;
}

/* ---------- Flatpickr : calendar + time popup themed to the brand ---------- */
.flatpickr-calendar {
  border-radius: var(--adm-radius-sm, 10px) !important;
  box-shadow: var(--adm-shadow, 0 10px 30px rgba(16,24,40,.14)) !important;
  border: 1px solid var(--adm-line, var(--upavp-border, #ECD9DF));
}
.flatpickr-months .flatpickr-month {
  background: var(--adm-brand, var(--upavp-maroon, #861F41)) !important;
  border-radius: var(--adm-radius-sm, 10px) var(--adm-radius-sm, 10px) 0 0;
  color: #fff !important;
  fill: #fff !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .cur-month {
  color: #fff !important;
  fill: #fff !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months option { color: #1F2430; }
.flatpickr-weekdays { background: var(--adm-brand, var(--upavp-maroon, #861F41)) !important; }
span.flatpickr-weekday {
  background: var(--adm-brand, var(--upavp-maroon, #861F41)) !important;
  color: #F8D9E2 !important;
  font-weight: 600;
}
/* prev/next month arrows — must be visible by DEFAULT against the maroon
   header (pehle sirf hover par dikhte the, isliye "arrow ka UI thik nahi"
   lag raha tha), aur hover par pura white ho jaate hain. */
.flatpickr-calendar .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-next-month svg {
  fill: #F3D3DD !important;
  width: 14px !important;
  height: 14px !important;
}
.flatpickr-calendar .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-next-month:hover svg {
  fill: #ffffff !important;
}

/* Din (day) cells — har state me text hamesha visible rahe. Compound
   selector (.flatpickr-calendar .flatpickr-day) jaanbujh kar use kiya hai
   taaki specificity kisi bhi doosri global hover rule (dist/css/app.css)
   se zyada rahe aur text kabhi white-on-white na bane. */
.flatpickr-calendar .flatpickr-day {
  color: var(--adm-ink, var(--upavp-ink, #1C2331)) !important;
}
.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay {
  color: #C7CBD4 !important;
}
.flatpickr-calendar .flatpickr-day:hover,
.flatpickr-calendar .flatpickr-day:focus {
  color: var(--adm-ink, var(--upavp-ink, #1C2331)) !important;
  background: var(--adm-brand-soft, var(--upavp-pink-badge, #FBEAF0)) !important;
  border-color: var(--adm-brand-soft, var(--upavp-pink-badge, #FBEAF0)) !important;
}
.flatpickr-calendar .flatpickr-day.today {
  border-color: var(--adm-brand, var(--upavp-maroon, #861F41)) !important;
  color: var(--adm-brand, var(--upavp-maroon, #861F41)) !important;
  font-weight: 700 !important;
}
.flatpickr-calendar .flatpickr-day.today:hover {
  color: var(--adm-brand, var(--upavp-maroon, #861F41)) !important;
}
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.selected:focus,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange {
  background: var(--adm-brand, var(--upavp-maroon, #861F41)) !important;
  border-color: var(--adm-brand, var(--upavp-maroon, #861F41)) !important;
  color: #ffffff !important;
}
/* Pehle yeh #D5D8DE (bahot halka, white background par lagbhag invisible)
   tha — disabled (jaise past) dates dikhti hi nahi thi. Ab ek saaf, medium
   gray rakha hai jo clearly "disabled" bhi lage aur padhne me aasan bhi
   rahe, aur cursor bhi not-allowed taaki click na hone ka signal mile. */
.flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover {
  color: #98A1B0 !important;
  background: transparent !important;
  cursor: not-allowed !important;
}
.flatpickr-calendar .flatpickr-day.inRange {
  background: var(--adm-brand-tint, var(--upavp-cream, #FDF7F9)) !important;
  box-shadow: -5px 0 0 var(--adm-brand-tint, #FDF7F9), 5px 0 0 var(--adm-brand-tint, #FDF7F9) !important;
  color: var(--adm-ink, var(--upavp-ink, #1C2331)) !important;
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: var(--adm-brand-soft, var(--upavp-pink-badge, #FBEAF0)) !important;
}
.flatpickr-time .flatpickr-am-pm { color: var(--adm-brand, var(--upavp-maroon, #861F41)); font-weight: 600; }

/* Year spinner (numInput) — arrows ab hamesha dikhte hain, sirf hover par nahi */
.flatpickr-calendar .numInputWrapper span.arrowUp,
.flatpickr-calendar .numInputWrapper span.arrowDown {
  opacity: 0.75 !important;
}
.flatpickr-calendar .numInputWrapper:hover span.arrowUp,
.flatpickr-calendar .numInputWrapper:hover span.arrowDown {
  opacity: 1 !important;
}
.flatpickr-calendar .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--adm-brand, #861F41) !important;
}
.flatpickr-calendar .numInputWrapper span.arrowDown:after {
  border-top-color: var(--adm-brand, #861F41) !important;
}

/* ---------- Time field: single box + Hour/Minute/AM-PM popup ------------
   Field ek hi box dikhta hai (jaise date field). Click karne par neeche ek
   popup khulta hai jisme Hour/Minute/AM-PM apne-apne alag column me hote
   hain, har column apni length ke hisaab se khud scroll hota hai (dekhein
   upavp-ui-enhance.js ka buildTimePickerWidget()). */
.upavp-time-picker-wrap {
  position: relative;
  width: 100%;
}
.upavp-time-display {
  width: 100% !important;
  cursor: pointer;
  background-color: #fff !important;
  padding-right: 38px !important;
}
.upavp-time-picker-icon {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--adm-brand, var(--upavp-maroon, #861F41));
  font-size: 15px;
  cursor: pointer;
}
.upavp-time-picker-wrap.is-open .upavp-time-display,
.upavp-time-display:focus {
  border-color: var(--adm-brand, var(--upavp-maroon, #861F41)) !important;
  box-shadow: 0 0 0 3px var(--adm-brand-soft, rgba(151, 20, 77, 0.12));
}
.upavp-time-popup {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 3000;
  background: #fff;
  border: 1px solid var(--adm-line, var(--upavp-border, #ECD9DF));
  border-radius: 10px;
  box-shadow: var(--adm-shadow, 0 10px 30px rgba(16, 24, 40, .14));
  padding: 8px;
  gap: 4px;
  min-width: 190px;
}
.upavp-time-popup.is-open { display: flex; }
/* form ke last field jaisi jagah jahan neeche jagah na ho, wahaan popup
   khud upar khul jaata hai */
.upavp-time-popup.upavp-time-popup-flip { top: auto; bottom: calc(100% + 6px); }
/* chhoti screen par right edge se bahar na nikle */
.upavp-time-popup.upavp-time-popup-right { left: auto; right: 0; }

.upavp-time-col {
  flex: 1 1 33%;
  max-height: 190px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* AM/PM sirf 2 options hain, unhe scroll ki zaroorat nahi — apni height ke
   hisaab se hi dikhte hain */
.upavp-time-col-ampm {
  flex: 0 0 52px;
  max-height: none;
  overflow: visible;
}
.upavp-time-popup-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1px;
  color: #94A3B8;
  font-weight: 700;
  flex: none;
}
.upavp-time-opt {
  padding: 7px 10px;
  text-align: center;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13.5px;
  color: #334155;
  font-weight: 600;
  user-select: none;
}
.upavp-time-opt:hover { background: var(--adm-brand-soft, var(--upavp-pink-badge, #FBEAF0)); }
.upavp-time-opt.is-selected {
  background: var(--adm-brand, var(--upavp-maroon, #861F41)) !important;
  color: #ffffff !important;
}
.upavp-time-col::-webkit-scrollbar { width: 5px; }
.upavp-time-col::-webkit-scrollbar-thumb { background: #E2C7D1; border-radius: 4px; }

/* ---------- Select2 inside the "icon" input style (EmployeeDetail /
   SubSchemeDetail: .emp-input-icon-wrap > i + form:select.emp-input-control)
   ----------------------------------------------------------------------
   Select2 hides the real <select> and inserts its own widget as a sibling
   of the decorative left icon, so it needs the same 40px left padding the
   icon-aware input already reserves — warna icon aur placeholder text ek
   doosre ke upar overlap ho jaate hain. */
.emp-input-icon-wrap .select2-container .select2-selection--single {
  height: 42px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 8px !important;
  padding-left: 40px !important;
  box-shadow: none !important;
}
.emp-input-icon-wrap .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 40px !important;
  color: #1E293B;
}
.emp-input-icon-wrap .select2-container--open .select2-selection--single,
.emp-input-icon-wrap .select2-container .select2-selection--single.select2-selection--focused {
  border-color: #97144D !important;
  box-shadow: 0 0 0 3px rgba(151, 20, 77, 0.12) !important;
}
.emp-input-icon-wrap .select2-container .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
}

/* ---------- Select2 inside the Schemes page toolbar (.st-select: Sector /
   Type / Status filters) ----------------------------------------------
   Same overlap problem as .emp-input-icon-wrap above — Select2 ka box iski
   apni left-icon (<i class="fa ...">) ke upar aa kar use chhupa deta tha
   (screenshot me icons gayab dikh rahe the). Yahan bhi wahi 46px left
   padding reserve karte hain jo asli <select> already use karta tha, aur
   icon ko Select2 ke box se upar (z-index) rakhte hain taaki dono overlap
   na karein. */
body.page-schemes .scheme-toolbar .st-select {
  z-index: 0; /* naya stacking context, taaki neeche ka z-index sirf isi box tak seemit rahe */
}
body.page-schemes .scheme-toolbar .st-select i {
  z-index: 2;
}
body.page-schemes .scheme-toolbar .st-select .select2-container {
  position: relative;
  z-index: 1;
}
body.page-schemes .scheme-toolbar .st-select .select2-container .select2-selection--single {
  height: 40px !important;
  border: 1px solid var(--sc-line, var(--upavp-border, #ECD9DF)) !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  padding-left: 46px !important;
  padding-right: 14px !important;
  box-shadow: none !important;
}
body.page-schemes .scheme-toolbar .st-select .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 38px !important;
  font-size: 14.5px;
  color: var(--sc-ink);
}
body.page-schemes .scheme-toolbar .st-select .select2-container .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
  right: 12px !important;
}
body.page-schemes .scheme-toolbar .st-select .select2-container--open .select2-selection--single,
body.page-schemes .scheme-toolbar .st-select .select2-container .select2-selection--single.select2-selection--focused {
  border-color: var(--upavp-maroon, #861F41) !important;
  box-shadow: 0 0 0 3px rgba(134, 31, 65, 0.12) !important;
}

/* ---------- Select2 inside the Schemes page "Sort by" dropdown ---------- */
body.page-schemes .scheme-sort .select2-container {
  width: 192px !important;
}
body.page-schemes .scheme-sort .select2-container .select2-selection--single {
  height: 34px !important;
  border: 1px solid var(--sc-line, var(--upavp-border, #ECD9DF)) !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  padding: 0 12px !important;
  box-shadow: none !important;
}
body.page-schemes .scheme-sort .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 32px !important;
  font-size: 14px;
  color: var(--sc-ink);
}
body.page-schemes .scheme-sort .select2-container .select2-selection--single .select2-selection__arrow {
  height: 32px !important;
  right: 10px !important;
}
body.page-schemes .scheme-sort .select2-container--open .select2-selection--single,
body.page-schemes .scheme-sort .select2-container .select2-selection--single.select2-selection--focused {
  border-color: var(--upavp-maroon, #861F41) !important;
  box-shadow: 0 0 0 3px rgba(134, 31, 65, 0.12) !important;
}
/* icon + "Sort by" label us select ke saath ek hi line me rahein, kabhi
   alag line par wrap na ho */
body.page-schemes .scheme-sort {
  flex-wrap: nowrap;
}
body.page-schemes .scheme-sort > span {
  white-space: nowrap;
}

/* the visible "alt" input that Flatpickr renders — keep it looking exactly
   like the original .form-control (and add a calendar/clock affordance) */
input.flatpickr-alt-input.form-control {
  width: 100% !important;
  background-color: #fff !important;
  cursor: pointer;
}
input.flatpickr-input[type="hidden"] ~ input.flatpickr-alt-input {
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px;
}
.flatpickr-date-affordance ~ input.flatpickr-alt-input,
input.flatpickr-alt-input.upavp-date-alt {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23861F41' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M8 7V3m8 4V3M4 11h16M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 17px !important;
  padding-right: 38px !important;
}
input.flatpickr-alt-input.upavp-time-alt {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23861F41' stroke-width='2'%3e%3ccircle cx='12' cy='12' r='9'/%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M12 7v5l3 3'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 17px !important;
  padding-right: 38px !important;
}

/* =========================================================================
   ROLE DETAIL PAGE (addRoleDetail / editRole)
   ========================================================================= */
.role-rights-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 12px 14px !important;
}
@media (max-width: 640px) {
  .role-rights-grid {
    grid-template-columns: 1fr !important;
  }
}

.role-right-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.role-right-card:hover {
  background: #FAFBFD !important;
  border-color: #CBD5E1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

.role-right-card.is-selected {
  background: #FDF4F7 !important;
  border-color: #F3C4D4 !important;
  box-shadow: 0 2px 8px rgba(151, 20, 77, 0.08) !important;
}

.role-right-card.is-hidden {
  display: none !important;
}

.role-right-card .emp-custom-checkbox {
  margin-top: 0 !important;
}

.role-right-icon-badge {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  background: #F1F5F9 !important;
  color: #64748B !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.role-right-card:hover .role-right-icon-badge {
  color: #97144D !important;
  background: #F8E7EE !important;
}

.role-right-card.is-selected .role-right-icon-badge {
  background: #97144D !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(151, 20, 77, 0.25) !important;
}

.role-right-text {
  flex: 1 !important;
  min-width: 0 !important;
}

.role-right-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1E293B !important;
  display: block !important;
  line-height: 1.3 !important;
}

.role-right-card.is-selected .role-right-title {
  color: #831843 !important;
  font-weight: 700 !important;
}

.role-right-desc {
  font-size: 11px !important;
  color: #64748B !important;
  display: block !important;
  margin-top: 2px !important;
  line-height: 1.2 !important;
}

.role-empty-search {
  grid-column: 1 / -1 !important;
  text-align: center !important;
  padding: 36px 16px !important;
  color: #94A3B8 !important;
}
.role-empty-search i {
  font-size: 28px !important;
  margin-bottom: 8px !important;
  display: block !important;
  color: #CBD5E1 !important;
}

#roleForm,
#roleForm > div,
.emp-detail-card,
.emp-section-card {
  width: 100% !important;
  box-sizing: border-box !important;
}

#roleForm {
  display: block !important;
}

/* =========================================================================
   PREMIUM ADMIN LIST PAGES DESIGN SYSTEM (Filters, Tables & Actions)
   ========================================================================= */

/* Filter Card */
.list-filter-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 6px 18px -4px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden !important;
  margin-bottom: 22px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.list-filter-header {
  padding: 14px 22px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%) !important;
  border-bottom: 1px solid #F1F5F9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.list-filter-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  letter-spacing: 0.01em !important;
}

.list-filter-title i {
  color: #97144D !important;
  font-size: 13px !important;
}

.list-filter-body {
  padding: 22px !important;
}

.list-filter-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 16px 20px !important;
  align-items: flex-end !important;
}

.list-filter-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid #F1F5F9 !important;
}

.btn-filter-search {
  background: linear-gradient(135deg, #97144D 0%, #7E1040 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 9px 22px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(151, 20, 77, 0.22) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-filter-search:hover {
  background: linear-gradient(135deg, #7E1040 0%, #680C34 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(151, 20, 77, 0.32) !important;
}

.btn-filter-reset {
  background: #FFFFFF !important;
  color: #475569 !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-filter-reset:hover {
  background: #F8FAFC !important;
  border-color: #94A3B8 !important;
  color: #1E293B !important;
}

/* Modern List Table Card */
.list-table-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 6px 18px -4px rgba(15, 23, 42, 0.04) !important;
  padding: 22px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* DataTable Length Dropdown Fix */
body.page-admin .dataTables_wrapper .dataTables_length {
  margin-bottom: 14px !important;
  font-size: 13px !important;
  color: #64748B !important;
  font-weight: 500 !important;
}

body.page-admin .dataTables_wrapper .dataTables_length label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 0 !important;
}

body.page-admin .dataTables_wrapper .dataTables_length select {
  height: 34px !important;
  min-width: 68px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 8px !important;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748B'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") no-repeat right 8px center / 13px 13px !important;
  padding: 0 24px 0 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1E293B !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

body.page-admin .dataTables_wrapper .dataTables_length select:focus {
  border-color: #97144D !important;
  box-shadow: 0 0 0 3px rgba(151, 20, 77, 0.12) !important;
}

/* Modern List Table Header (Title on Left, Actions on Right) */
.list-table-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  width: 100% !important;
}

.list-table-header-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  text-align: left !important;
}

.list-table-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.list-table-subtitle {
  font-size: 12px !important;
  color: #64748B !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.list-table-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}

/* Fallback for legacy .toolbar wrappers */
body.page-admin .toolbar {
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

body.page-admin .btn-table-primary,
body.page-admin a.btn.btn-primarynew.btn-fw,
body.page-admin button.btn.btn-primarynew.btn-fw {
  background: linear-gradient(135deg, #97144D 0%, #7E1040 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  box-shadow: 0 2px 6px rgba(151, 20, 77, 0.24) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  height: 36px !important;
}

body.page-admin .btn-table-primary:hover,
body.page-admin a.btn.btn-primarynew.btn-fw:hover,
body.page-admin button.btn.btn-primarynew.btn-fw:hover {
  background: linear-gradient(135deg, #7E1040 0%, #680C34 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(151, 20, 77, 0.35) !important;
  color: #FFFFFF !important;
}

/* Excel Download Button */
body.page-admin .btn-table-excel {
  background: linear-gradient(135deg, #107C41 0%, #0B5C30 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  box-shadow: 0 2px 6px rgba(16, 124, 65, 0.24) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  height: 36px !important;
}

body.page-admin .btn-table-excel:hover {
  background: linear-gradient(135deg, #0B5C30 0%, #084824 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(16, 124, 65, 0.35) !important;
  color: #FFFFFF !important;
}

/* Sleek Row Action Buttons */
body.page-admin .btn-table-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid #F3C4D4 !important;
  background: #FDF4F7 !important;
  color: #97144D !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  height: 30px !important;
}

body.page-admin .btn-table-action:hover {
  background: #97144D !important;
  color: #FFFFFF !important;
  border-color: #97144D !important;
  box-shadow: 0 2px 6px rgba(151, 20, 77, 0.25) !important;
  transform: translateY(-1px) !important;
}

body.page-admin .btn-table-action.view {
  border-color: #BFDBFE !important;
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
}

body.page-admin .btn-table-action.view:hover {
  background: #1D4ED8 !important;
  color: #FFFFFF !important;
  border-color: #1D4ED8 !important;
  box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25) !important;
}

body.page-admin .btn-table-action.doc {
  border-color: #DDD6FE !important;
  background: #F5F3FF !important;
  color: #6D28D9 !important;
}

body.page-admin .btn-table-action.doc:hover {
  background: #6D28D9 !important;
  color: #FFFFFF !important;
  border-color: #6D28D9 !important;
  box-shadow: 0 2px 6px rgba(109, 40, 217, 0.25) !important;
}




/* =============================================================================
   ADVANCED RICH TEXT EDITOR (CustomJS/upavp-richtext.js — Summernote-lite)
   -----------------------------------------------------------------------------
   Har editor par ".upavp-rte" class lagti hai. Isme: toolbar, dropdowns, emoji
   / special-character grid, word-count status bar, dialogs (image / link /
   help), fullscreen fix, mention popup aur toasts ka look hai.
   ============================================================================= */
.note-editor.note-frame.upavp-rte {
  width: 100% !important;
  border: 1px solid var(--adm-line, #ECD9DF) !important;
  border-radius: 12px !important;
  background: #fff;
  overflow: visible;
  box-shadow: var(--adm-shadow-sm, 0 1px 2px rgba(16, 24, 40, .05));
}
.note-editor.upavp-rte .note-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px !important;
  background: var(--adm-brand-tint, #FDF7F9) !important;
  border-bottom: 1px solid var(--adm-line-soft, #F3E6EB) !important;
  border-radius: 12px 12px 0 0;
  position: relative;
  z-index: 2;
}
.note-editor.upavp-rte .note-toolbar > .note-btn-group {
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  padding-right: 6px;
  border-right: 1px solid #EFDDE4;
}
.note-editor.upavp-rte .note-toolbar > .note-btn-group:last-child { border-right: 0; padding-right: 0; }
.note-editor.upavp-rte .note-toolbar .note-btn-group .note-btn-group { margin: 0; }
.note-editor.upavp-rte .note-btn:not(.note-color-btn) {
  min-width: 32px;
  height: 32px;
  padding: 0 8px !important;
  margin: 0 1px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--adm-line, #ECD9DF) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--adm-ink-2, #334155) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.note-editor.upavp-rte .note-btn:not(.note-color-btn):hover,
.note-editor.upavp-rte .note-btn:not(.note-color-btn):focus-visible {
  background: var(--adm-brand-soft, #FBEAF0) !important;
  border-color: #E7C5D2 !important;
  color: var(--adm-brand-dark, #6C1834) !important;
}
.note-editor.upavp-rte .note-btn.active:not(.note-color-btn),
.note-editor.upavp-rte .note-btn-group.open > .note-btn {
  background: var(--adm-brand, #861F41) !important;
  border-color: var(--adm-brand, #861F41) !important;
  color: #fff !important;
}
.note-editor.upavp-rte .note-btn.disabled,
.note-editor.upavp-rte .note-btn[disabled] { opacity: .45; cursor: not-allowed; }
.note-editor.upavp-rte .note-btn .note-current-fontname,
.note-editor.upavp-rte .note-btn .note-current-fontsize {
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-editor.upavp-rte .upavp-rte-txt { font-weight: 700; font-size: 11.5px; letter-spacing: .02em; }
.note-editor.upavp-rte .upavp-rte-attach-holder { display: inline-flex; }
.note-editor.upavp-rte .upavp-rte-file-input { display: none !important; }
.note-editor.upavp-rte .upavp-rte-attach-btn.is-busy { pointer-events: none; opacity: .6; }
.note-editor.upavp-rte .upavp-rte-attach-btn.is-busy i { animation: upavpRteSpin .8s linear infinite; }
@keyframes upavpRteSpin { to { transform: rotate(360deg); } }

/* ---------- dropdowns (style, font, size, colour, table, emoji) ---------- */
.note-editor.upavp-rte .note-dropdown-menu {
  z-index: 1070;
  min-width: 170px;
  padding: 6px !important;
  border: 1px solid var(--adm-line, #ECD9DF) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .16) !important;
  background: #fff;
}
.note-editor.upavp-rte .note-dropdown-menu.dropdown-fontname,
.note-editor.upavp-rte .note-dropdown-menu.dropdown-fontsize,
.note-editor.upavp-rte .note-dropdown-menu.dropdown-style,
.note-editor.upavp-rte .note-dropdown-menu.dropdown-line-height {
  max-height: 320px;
  overflow-y: auto;
}
.note-editor.upavp-rte .note-dropdown-item {
  display: block;
  padding: 6px 10px !important;
  border-radius: 6px;
  color: #1E293B !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.note-editor.upavp-rte .note-dropdown-item:hover {
  background: var(--adm-brand-soft, #FBEAF0) !important;
  color: var(--adm-brand-dark, #6C1834) !important;
}
.note-editor.upavp-rte .note-dropdown-item h1,
.note-editor.upavp-rte .note-dropdown-item h2,
.note-editor.upavp-rte .note-dropdown-item h3,
.note-editor.upavp-rte .note-dropdown-item h4,
.note-editor.upavp-rte .note-dropdown-item h5,
.note-editor.upavp-rte .note-dropdown-item h6,
.note-editor.upavp-rte .note-dropdown-item p,
.note-editor.upavp-rte .note-dropdown-item blockquote,
.note-editor.upavp-rte .note-dropdown-item pre { margin: 2px 0 !important; }
.note-editor.upavp-rte .note-dropdown-menu .note-palette-title { font-size: 12px; font-weight: 700; color: #64748B; }
.note-editor.upavp-rte .note-color-all .note-dropdown-menu,
.note-editor.upavp-rte .note-color .note-dropdown-menu { min-width: 180px; }
.note-editor.upavp-rte .note-dimension-display { font-size: 12px; color: #64748B; }

.note-editor.upavp-rte .upavp-rte-grid-menu {
  width: 330px;
  max-height: 330px;
  overflow-y: auto;
}
.note-editor.upavp-rte .upavp-rte-grid-title {
  position: sticky;
  top: -6px;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #94A3B8;
  padding: 6px 4px 4px;
}
.note-editor.upavp-rte .upavp-rte-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2px;
  margin-bottom: 6px;
}
.note-editor.upavp-rte .upavp-rte-cell {
  height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #1E293B;
}
.note-editor.upavp-rte .is-special .upavp-rte-cell { font-size: 16px; font-family: 'Segoe UI', Arial, sans-serif; }
.note-editor.upavp-rte .upavp-rte-cell:hover { background: var(--adm-brand-soft, #FBEAF0); transform: scale(1.12); }

/* ---------- writing area ---------- */
.note-editor.upavp-rte .note-editing-area { position: relative; z-index: 1; }
.note-editor.upavp-rte .note-editable {
  padding: 16px 18px !important;
  font-size: 14px;
  line-height: 1.6;
  color: var(--adm-ink, #1C2331);
  background: #fff;
}
.note-editor.upavp-rte .note-placeholder { padding: 16px 18px !important; color: #B6BAC4; }
.note-editor.upavp-rte .note-codable {
  font-family: Consolas, 'Courier New', monospace !important;
  font-size: 13px !important;
  background: #0F172A !important;
  color: #E2E8F0 !important;
  padding: 14px 16px !important;
}

/* ---------- status bar: word / character count ---------- */
.note-editor.upavp-rte .note-statusbar {
  background: #FCF8F9 !important;
  border-top: 1px solid var(--adm-line-soft, #F3E6EB) !important;
  border-radius: 0 0 12px 12px;
}
.note-editor.upavp-rte .upavp-rte-counter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 6px 14px 2px;
  font-size: 11.8px;
  color: #64748B;
}
.note-editor.upavp-rte .upavp-rte-counter b { color: var(--adm-brand, #861F41); font-weight: 700; }
.note-editor.upavp-rte .upavp-rte-counter .upavp-rte-hint-tip { margin-left: auto; color: #94A3B8; }

/* ---------- popovers (image / link / table) aur @mention list ---------- */
.note-editor.upavp-rte .note-popover,
.note-popover.note-hint-popover { z-index: 1080; }
.note-editor.upavp-rte .note-popover .popover-content,
.note-editor.upavp-rte .note-popover .note-popover-content {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px !important;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .16);
  background: #fff;
}
.note-hint-popover {
  min-width: 240px !important;
  border: 1px solid var(--adm-line, #ECD9DF);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
  background: #fff;
  overflow: hidden;
}
.note-hint-popover .popover-content,
.note-hint-popover .note-popover-content { max-height: 260px !important; padding: 4px !important; overflow-y: auto; }
.note-hint-popover .note-hint-item { padding: 6px 8px !important; border-radius: 8px; }
.note-hint-popover .note-hint-item.active,
.note-hint-popover .note-hint-item:hover { background: var(--adm-brand, #861F41) !important; color: #fff !important; }
.upavp-hint-item { display: flex; align-items: center; gap: 10px; }
.upavp-hint-avatar {
  width: 28px; height: 28px; flex: none;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--adm-brand-soft, #FBEAF0);
  color: var(--adm-brand, #861F41);
  font-weight: 700; font-size: 12px;
}
.upavp-hint-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.upavp-hint-text b { font-weight: 600; }
.upavp-hint-text small { font-size: 11px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- dialogs (Insert image / link / video / help) ----------
   dialogsInBody ki wajah se ab yeh <body> me khulte hain; Summernote-lite ka
   apna backdrop khaali hai, isliye backdrop yahin modal par diya gaya. */
.note-modal {
  z-index: 10060 !important;
}
.note-modal.open {
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  padding: 7vh 16px 24px;
  overflow-y: auto;
  background: rgba(15, 23, 42, .5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.note-modal .note-modal-content {
  width: 100% !important;
  max-width: 600px;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28) !important;
  overflow: hidden;
  animation: upavpRteModalIn .18s ease-out;
}
.note-modal .note-modal-content-large { max-width: 900px; }
@keyframes upavpRteModalIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.note-modal .note-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  padding: 16px 20px !important;
  border: 0 !important;
  border-bottom: 1px solid #F1E4E9 !important;
  background: var(--adm-brand-tint, #FDF7F9);
}
.note-modal .note-modal-title { font-size: 16px !important; font-weight: 700; color: #1E293B !important; }
.note-modal .note-modal-header .close {
  border: 0; background: transparent; font-size: 24px; line-height: 1; color: #94A3B8; cursor: pointer;
}
.note-modal .note-modal-header .close:hover { color: var(--adm-brand, #861F41); }
.note-modal .note-modal-body { padding: 18px 20px !important; max-height: 65vh; overflow-y: auto; }
.note-modal .note-form-group { margin-bottom: 14px; }
.note-modal .note-form-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #334155; }
.note-modal .note-input,
.note-modal input[type="text"],
.note-modal input[type="file"] {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #CBD5E1 !important;
  border-radius: 8px !important;
  background: #fff;
  font-size: 13.5px;
  box-shadow: none !important;
}
.note-modal .note-input:focus,
.note-modal input[type="text"]:focus {
  outline: none;
  border-color: var(--adm-brand, #861F41) !important;
  box-shadow: 0 0 0 3px rgba(134, 31, 65, .12) !important;
}
.note-modal .note-form-help { font-size: 12px; color: #64748B; }
.note-modal .checkbox label,
.note-modal .note-checkbox label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #334155; }
.note-modal .note-modal-footer {
  height: auto !important;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px !important;
  border-top: 1px solid #F1E4E9;
  background: #fff;
}
.note-modal .note-modal-footer .note-btn {
  float: none !important;
  height: 38px;
  padding: 0 18px !important;
  border-radius: 8px !important;
  border: 1px solid var(--adm-brand, #861F41) !important;
  background: var(--adm-brand, #861F41) !important;
  color: #fff !important;
  font-weight: 600;
  cursor: pointer;
}
.note-modal .note-modal-footer .note-btn:disabled,
.note-modal .note-modal-footer .note-btn.disabled { opacity: .5; cursor: not-allowed; }
.note-modal .note-help-dialog,
.note-modal .note-help-dialog .note-modal-content { color: #1E293B; }
.note-modal kbd { background: #F1F5F9; color: #334155; border: 1px solid #E2E8F0; border-radius: 4px; padding: 1px 6px; font-size: 12px; }
.note-tooltip { z-index: 10070 !important; }

/* ---------- fullscreen ----------
   Editor ke parents (Rubick ke .intro-y waghera) apna stacking context
   banate hain, jisse fixed editor unhi ke andar band ho jaata tha. JS
   fullscreen ke waqt unpar yeh class lagata hai. */
.upavp-rte-fs-ancestor {
  transform: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  perspective: none !important;
  contain: none !important;
  will-change: auto !important;
  z-index: auto !important;
  animation: none !important;
}
body.upavp-rte-fullscreen .top-bar,
body.upavp-rte-fullscreen .side-nav { z-index: 1 !important; }
body .note-editor.note-frame.upavp-rte.fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  z-index: 10050 !important;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: none !important;
}
body .note-editor.upavp-rte.fullscreen .note-toolbar { border-radius: 0; flex: none; }
body .note-editor.upavp-rte.fullscreen .note-editing-area { flex: 1 1 auto; overflow: hidden; }
body .note-editor.upavp-rte.fullscreen .note-editable { max-width: 1100px; margin: 0 auto; }
body .note-editor.upavp-rte.fullscreen .note-statusbar { border-radius: 0; flex: none; }

/* ---------- toasts ---------- */
.upavp-rte-toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.upavp-rte-toast {
  max-width: 360px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #1E293B;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .25);
  animation: upavpRteModalIn .18s ease-out;
  transition: opacity .3s ease, transform .3s ease;
}
.upavp-rte-toast.is-success { background: #047857; }
.upavp-rte-toast.is-error { background: #B42318; }
.upavp-rte-toast.is-leaving { opacity: 0; transform: translateY(8px); }

/* ---------- content look: editor ke andar aur Home / Login page par ---------- */
.note-editable img,
.bannerhtml img,
.form-note-content img { max-width: 100%; height: auto; }
.note-editable blockquote,
.bannerhtml blockquote,
.form-note-content blockquote {
  margin: 10px 0;
  padding: 8px 14px;
  border-left: 4px solid var(--adm-brand, #861F41);
  background: #FDF7F9;
  color: #475569;
}
.note-editable pre,
.bannerhtml pre,
.form-note-content pre {
  padding: 10px 12px;
  border-radius: 8px;
  background: #F1F5F9;
  font-size: 13px;
  white-space: pre-wrap;
}
.note-editable table { width: 100%; border-collapse: collapse; }
.note-editable table td,
.note-editable table th { border: 1px solid #E2E8F0; padding: 6px 8px; }
.note-editable [dir="rtl"],
.bannerhtml [dir="rtl"],
.form-note-content [dir="rtl"] { text-align: right; }
.upavp-mention {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  background: #FBEAF0;
  color: #861F41;
  font-weight: 600;
}
a.upavp-attachment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0;
  padding: 3px 10px;
  border: 1px solid #E7C5D2;
  border-radius: 8px;
  background: #FDF7F9;
  color: #861F41 !important;
  font-weight: 600;
  text-decoration: none !important;
}
a.upavp-attachment:hover { background: #FBEAF0; }

@media (max-width: 640px) {
  .note-editor.upavp-rte .note-toolbar > .note-btn-group { border-right: 0; padding-right: 0; }
  .note-editor.upavp-rte .upavp-rte-grid-menu { width: 270px; }
  .note-editor.upavp-rte .upavp-rte-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .note-modal.open { padding-top: 16px; }
}

/* =============================================================================
   RICH TEXT EDITOR — colour palette fix + advanced table tools
   -----------------------------------------------------------------------------
   Colour palette ke chips bhi ".note-btn" class rakhte hain, isliye upar ka
   button style unhe safed khaali dabbe bana deta tha. Ab chips alag style
   paate hain aur apna asli rang dikhate hain.
   ============================================================================= */
.note-editor.upavp-rte .note-color .note-dropdown-menu {
  min-width: 0;
  width: auto;
  padding: 8px !important;
}
.note-editor.upavp-rte .note-color .note-dropdown-menu .note-palette {
  display: block !important;
  width: 184px !important;
  margin: 0 !important;
}
.note-editor.upavp-rte .note-palette .note-palette-title {
  margin: 0 0 8px !important;
  padding-bottom: 6px;
  border-bottom: 1px solid #F1E4E9 !important;
  font-size: 12px !important;
  font-weight: 700;
  color: #475569;
  text-align: left !important;
}
.note-editor.upavp-rte .note-palette .note-color-reset,
.note-editor.upavp-rte .note-palette .note-color-select {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 30px !important;
  min-height: 0 !important;
  margin: 0 0 8px !important;
  padding: 0 8px !important;
  border: 1px solid var(--adm-line, #ECD9DF) !important;
  border-radius: 7px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer;
}
.note-editor.upavp-rte .note-palette .note-color-select { margin: 8px 0 !important; }
.note-editor.upavp-rte .note-palette .note-color-reset:hover,
.note-editor.upavp-rte .note-palette .note-color-select:hover {
  background: var(--adm-brand-soft, #FBEAF0) !important;
  color: var(--adm-brand-dark, #6C1834) !important;
}
.note-editor.upavp-rte .note-palette .note-color-palette { line-height: 0; }
.note-editor.upavp-rte .note-palette .note-color-row {
  display: flex !important;
  height: auto !important;
  gap: 3px;
  margin-bottom: 3px;
}
.note-editor.upavp-rte .note-palette .note-color-btn {
  flex: none;
  width: 20px !important;
  height: 20px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  cursor: pointer;
}
.note-editor.upavp-rte .note-palette .note-color-btn:hover {
  transform: scale(1.18);
  border-color: #334155 !important;
}
.note-editor.upavp-rte .note-palette .note-holder-custom .note-color-btn { border-style: dashed !important; }
.note-editor.upavp-rte .note-palette .note-color-select-btn { display: none !important; }
.note-editor.upavp-rte .note-current-color-button .note-recent-color {
  display: inline-block;
  padding: 1px 3px;
  border-radius: 3px;
}

/* ---------- table: editor ke andar ---------- */
.note-editor.upavp-rte .note-editable table {
  width: 100%;
  margin: 10px 0;
  border-collapse: collapse;
  background: transparent;
  table-layout: auto;
}
.note-editor.upavp-rte .note-editable table td,
.note-editor.upavp-rte .note-editable table th {
  min-width: 48px;
  height: 32px;
  padding: 6px 10px;
  border: 1px solid #94A3B8;
  vertical-align: middle;
  background-color: transparent;
}
.note-editor.upavp-rte .note-editable table th { font-weight: 700; }
/* purane "table table-bordered" par admin theme borders hata deta tha aur hover par grey kar deta tha */
body.page-admin .note-editor.upavp-rte .note-editable table.table-bordered td,
body.page-admin .note-editor.upavp-rte .note-editable table.table-bordered th {
  border: 1px solid #94A3B8 !important;
}
body.page-admin .note-editor.upavp-rte .note-editable table.table tbody tr:hover td { background-color: transparent !important; }
.note-editor.upavp-rte .note-editable td.upavp-cell-selected,
.note-editor.upavp-rte .note-editable th.upavp-cell-selected {
  background-image: linear-gradient(rgba(134, 31, 65, .16), rgba(134, 31, 65, .16));
  box-shadow: inset 0 0 0 2px rgba(134, 31, 65, .55);
  caret-color: transparent;
}
.note-editor.upavp-rte .note-editable table.upavp-rt-table ::selection { background: rgba(134, 31, 65, .18); }

/* ---------- table popup (merge / split / colour / align / style) ---------- */
.note-editor.upavp-rte .note-table-popover .popover-content,
.note-editor.upavp-rte .note-table-popover .note-popover-content { max-width: 560px; }
.note-editor.upavp-rte .note-table-popover .note-btn-group { display: inline-flex; align-items: center; margin: 0 4px 0 0 !important; }
.note-editor.upavp-rte .upavp-rt-menu {
  min-width: 220px !important;
  max-height: 360px;
  overflow-y: auto;
}
.note-editor.upavp-rte .upavp-rt-menu-title {
  padding: 6px 6px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #94A3B8;
}
.note-editor.upavp-rte .upavp-rt-menu-row { display: flex; flex-wrap: wrap; gap: 4px; }
.note-editor.upavp-rte .upavp-rt-menu-row .upavp-rt-item { flex: 1 1 auto; width: auto; }
.note-editor.upavp-rte .upavp-rt-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #1E293B;
  font-size: 12.8px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.note-editor.upavp-rte .upavp-rt-item i { width: 16px; text-align: center; color: var(--adm-brand, #861F41); }
.note-editor.upavp-rte .upavp-rt-item:hover { background: var(--adm-brand-soft, #FBEAF0); color: var(--adm-brand-dark, #6C1834); }
.note-editor.upavp-rte .upavp-rt-colors {
  display: grid;
  grid-template-columns: repeat(8, 22px);
  gap: 4px;
  padding: 2px 6px 8px;
}
.note-editor.upavp-rte .upavp-rt-swatch {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, .15);
  border-radius: 5px;
  cursor: pointer;
}
.note-editor.upavp-rte .upavp-rt-swatch:hover { transform: scale(1.15); border-color: #334155; }
.note-editor.upavp-rte .upavp-rt-color-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- table ka look: editor + Home / Login / Registration page ----------
   (sirf naye editor ke tables — "upavp-rt-table". Word se paste kiye purane
   tables ka pehle wala look waisa hi rahta hai.) Cell ka apna colour /
   alignment inline "!important" se aata hai, isliye woh hamesha jeet-ta hai. */
table.upavp-rt-table,
.bannerhtml table.upavp-rt-table,
.form-note-content table.upavp-rt-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 12px 0 !important;
}
table.upavp-rt-table.rt-auto,
.bannerhtml table.upavp-rt-table.rt-auto,
.form-note-content table.upavp-rt-table.rt-auto { width: auto !important; min-width: 0 !important; }
.bannerhtml table.upavp-rt-table tr td, .bannerhtml table.upavp-rt-table tr th,
.form-note-content table.upavp-rt-table tr td, .form-note-content table.upavp-rt-table tr th,
table.upavp-rt-table tr td, table.upavp-rt-table tr th {
  padding: 8px 12px !important;
  background-color: transparent !important;
  color: inherit !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  vertical-align: middle;
}
.bannerhtml table.upavp-rt-table tr th,
.form-note-content table.upavp-rt-table tr th,
table.upavp-rt-table tr th { font-weight: 700 !important; }
table.upavp-rt-table.rt-border-dark tr td, table.upavp-rt-table.rt-border-dark tr th,
.bannerhtml table.upavp-rt-table.rt-border-dark tr td, .bannerhtml table.upavp-rt-table.rt-border-dark tr th,
.form-note-content table.upavp-rt-table.rt-border-dark tr td, .form-note-content table.upavp-rt-table.rt-border-dark tr th {
  border: 1px solid #334155 !important;
}
table.upavp-rt-table.rt-border-light tr td, table.upavp-rt-table.rt-border-light tr th,
.bannerhtml table.upavp-rt-table.rt-border-light tr td, .bannerhtml table.upavp-rt-table.rt-border-light tr th,
.form-note-content table.upavp-rt-table.rt-border-light tr td, .form-note-content table.upavp-rt-table.rt-border-light tr th {
  border: 1px solid #D5DAE1 !important;
}
table.upavp-rt-table.rt-border-none tr td, table.upavp-rt-table.rt-border-none tr th,
.bannerhtml table.upavp-rt-table.rt-border-none tr td, .bannerhtml table.upavp-rt-table.rt-border-none tr th,
.form-note-content table.upavp-rt-table.rt-border-none tr td, .form-note-content table.upavp-rt-table.rt-border-none tr th {
  border: 0 !important;
}
.note-editor.upavp-rte .note-editable table.upavp-rt-table.rt-border-none td,
.note-editor.upavp-rte .note-editable table.upavp-rt-table.rt-border-none th {
  border: 1px dashed #E2E8F0 !important; /* sirf editor me dikhe, taaki cells nazar aayein */
}
table.upavp-rt-table.rt-striped tr:nth-child(even) td,
.bannerhtml table.upavp-rt-table.rt-striped tr:nth-child(even) td,
.form-note-content table.upavp-rt-table.rt-striped tr:nth-child(even) td { background-color: #F8FAFC !important; }
table.upavp-rt-table.rt-compact tr td, table.upavp-rt-table.rt-compact tr th,
.bannerhtml table.upavp-rt-table.rt-compact tr td, .bannerhtml table.upavp-rt-table.rt-compact tr th,
.form-note-content table.upavp-rt-table.rt-compact tr td, .form-note-content table.upavp-rt-table.rt-compact tr th {
  padding: 3px 6px !important;
  font-size: 12.5px !important;
}

/* public page par purana theme har cell ko "center !important" kar deta tha —
   naye tables me default left, aur editor me jo alignment diya woh hi dikhe */
.bannerhtml table.upavp-rt-table tr td, .bannerhtml table.upavp-rt-table tr th,
.form-note-content table.upavp-rt-table tr td, .form-note-content table.upavp-rt-table tr th { text-align: left !important; }
.bannerhtml table.upavp-rt-table tr [style*="text-align: center"], .form-note-content table.upavp-rt-table tr [style*="text-align: center"] { text-align: center !important; }
.bannerhtml table.upavp-rt-table tr [style*="text-align: right"], .form-note-content table.upavp-rt-table tr [style*="text-align: right"] { text-align: right !important; }
.bannerhtml table.upavp-rt-table tr [style*="text-align: justify"], .form-note-content table.upavp-rt-table tr [style*="text-align: justify"] { text-align: justify !important; }
/* table popup ab table ke upar/neeche khud position hota hai — library ka arrow galat taraf dikhta tha */
.note-editor.upavp-rte .note-popover.upavp-rt-popover .note-popover-arrow,
.note-editor.upavp-rte .note-popover.upavp-rt-popover .arrow { display: none !important; }
.note-editor.upavp-rte .note-popover.upavp-rt-popover { z-index: 1085; }