/* ================================================================
   RIGHT RUPEE — repay-loan.css
   Page-specific styles for the Repay Loan page.
   Extends style-new.css. No duplicate base styles.
   All design tokens inherited from :root in style-new.css.
================================================================ */

/* ──────────────────────────────────────────────────────────────
   PAGE HERO / BREADCRUMB
────────────────────────────────────────────────────────────── */
.rp-page-hero {
  position: relative;
  padding: 70px 0 60px;
  background: linear-gradient(135deg, #070b18, #101a3a 55%, #08111f);
  overflow: hidden;
}

/* Animated grid overlay */
.rp-page-hero__bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* Glow orbs */
.rp-page-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}
.rp-page-hero__orb--1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(79,165,220,.22), transparent 70%);
  top: -100px; left: -100px;
  animation: rp-orb-move 10s ease-in-out infinite;
}
.rp-page-hero__orb--2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(97,98,219,.24), transparent 70%);
  bottom: -80px; right: -80px;
  animation: rp-orb-move 10s ease-in-out 2s infinite;
}
@keyframes rp-orb-move {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(20px, 20px); }
}

.rp-page-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.rp-page-hero__text h1 {
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 900;
  color: #fff;
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}

.rp-page-hero__text p {
  font-size: var(--fs-md);
  color: rgba(255,255,255,.60);
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 22px;
}

/* Breadcrumb */
.rp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.50);
}
.rp-breadcrumb a {
  color: rgba(255,255,255,.65);
  transition: color var(--t);
}
.rp-breadcrumb a:hover { color: var(--blue); }
.rp-breadcrumb i { font-size: 12px; }
.rp-breadcrumb [aria-current="page"] { color: var(--blue); font-weight: 600; }

/* Hero stat badges */
.rp-page-hero__stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.rp-hero-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-full);
  padding: 10px 20px;
  color: rgba(255,255,255,.80);
  font-size: var(--fs-sm);
  font-weight: 600;
  backdrop-filter: blur(10px);
  transition: all var(--t);
}
.rp-hero-stat:hover {
  border-color: rgba(79,165,220,.40);
  background: rgba(79,165,220,.10);
  color: #fff;
}
.rp-hero-stat i { color: var(--blue); font-size: 15px; }


/* ──────────────────────────────────────────────────────────────
   MAIN SECTION  (2-column grid)
────────────────────────────────────────────────────────────── */
.rp-main-section {
  padding: 70px 0;
  background: var(--surface);
  overflow-x: hidden;
}

.rp-main-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 36px;
  align-items: start;
  width: 100%;
}

/* Prevent children from blowing out grid columns */
.rp-form-col,
.rp-info-col { min-width: 0; }


/* ──────────────────────────────────────────────────────────────
   FORM CARD
────────────────────────────────────────────────────────────── */
.rp-form-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 36px;
  box-shadow: 0 8px 40px rgba(97,98,219,.09);
  transition: box-shadow var(--t);
}
.rp-form-card:hover { box-shadow: 0 12px 56px rgba(97,98,219,.13); }

.rp-form-card--hidden { display: none; }

.rp-form-card__header {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.rp-form-card__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(97,98,219,.30);
}
.rp-form-card__icon--success { background: linear-gradient(135deg, #22C55E, #16A34A); box-shadow: 0 6px 20px rgba(34,197,94,.30); }
.rp-form-card__icon--gold    { background: linear-gradient(135deg, #F7B733, #FC4A1A); box-shadow: 0 6px 20px rgba(247,183,51,.30); }

.rp-form-card__header h2 {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 4px;
  line-height: 1.2;
}
.rp-form-card__header p {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
}
.rp-form-card__header p strong { color: var(--dark); }


/* ── Step Indicators ────── */
.rp-step-indicators {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 30px;
  width: 100%;
  overflow: hidden;
}
.rp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.rp-step__num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--muted);
  transition: all var(--t);
}
.rp-step__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--t);
}
.rp-step--active .rp-step__num {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(97,98,219,.35);
}
.rp-step--active .rp-step__label { color: var(--indigo); }
.rp-step--done .rp-step__num {
  background: linear-gradient(135deg, #22C55E, #16A34A);
  border-color: transparent;
  color: #fff;
}
.rp-step--done .rp-step__label { color: var(--success); }
.rp-step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 8px;
  margin-bottom: 20px;
  transition: background var(--t);
}
.rp-step-line--done { background: linear-gradient(90deg, #22C55E, #16A34A); }


/* ── Form Fields ──────── */
.rp-field-group {
  margin-bottom: 22px;
}
.rp-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
}
.rp-required { color: #EF4444; }

.rp-input-wrap {
  position: relative;
}
.rp-input-wrap--prefix .rp-input {
  padding-left: 80px;
}
.rp-input-prefix {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  display: flex; align-items: center;
  padding: 0 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--indigo);
  background: rgba(97,98,219,.06);
  border-right: 1.5px solid var(--border);
  border-radius: var(--r) 0 0 var(--r);
  white-space: nowrap;
  gap: 6px;
  pointer-events: none;
}

.rp-input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  font-family: var(--font);
  font-size: var(--fs-sm);
  color: var(--dark);
  background: var(--white);
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
  -webkit-appearance: none;
}
.rp-input::placeholder { color: var(--muted); opacity: .65; }
.rp-input:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(97,98,219,.12);
}
.rp-input.rp-input--error { border-color: #EF4444; }
.rp-input.rp-input--error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.12); }

/* Hide number input spinners */
.rp-input[type="number"]::-webkit-inner-spin-button,
.rp-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.rp-input[type="number"] { -moz-appearance: textfield; }

.rp-field-error {
  display: block;
  font-size: 13px;
  color: #EF4444;
  margin-top: 5px;
  min-height: 18px;
  display: none;
}


/* ── OTP Boxes ─────────── */
.rp-otp-boxes {
  display: flex;
  gap: 10px;
  width: 100%;
}
.rp-otp-box {
  flex: 1;
  min-width: 0;        /* allow shrinking below content size */
  height: 54px;
  text-align: center;
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--dark);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: var(--white);
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
  caret-color: var(--indigo);
}
.rp-otp-box:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(97,98,219,.12);
}
.rp-otp-box.rp-otp-box--filled {
  border-color: var(--indigo);
  background: rgba(97,98,219,.04);
}
.rp-otp-box.rp-otp-box--error {
  border-color: #EF4444;
  background: rgba(239,68,68,.04);
}

.rp-otp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 8px;
}
.rp-otp-timer {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.rp-otp-timer strong { color: var(--indigo); }
.rp-resend-btn {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--indigo);
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: color var(--t);
  padding: 0;
}
.rp-resend-btn:disabled { color: var(--muted); cursor: default; }
.rp-resend-btn:not(:disabled):hover { color: var(--blue); }


/* ── Submit button ──────── */
.rp-submit-btn {
  width: 100%;
  justify-content: center;
  padding: 16px 32px;
  font-size: var(--fs-md);
  position: relative;
  margin-bottom: 16px;
}
.rp-pay-btn { background: linear-gradient(135deg, #22C55E, #16A34A); box-shadow: 0 6px 24px rgba(34,197,94,.30); }
.rp-pay-btn:hover { box-shadow: 0 10px 36px rgba(34,197,94,.45); transform: translateY(-2px); }

.rp-btn-loader {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  display: none;
  animation: rp-spin .65s linear infinite;
  margin-left: 4px;
}
.rp-btn-loader.active { display: inline-block; }
@keyframes rp-spin { to { transform: rotate(360deg); } }

.rp-back-btn {
  width: 100%;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  padding: 12px 24px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all var(--t);
}
.rp-back-btn:hover {
  border-color: var(--indigo);
  color: var(--indigo);
  background: rgba(97,98,219,.04);
}

.rp-form-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.rp-form-note i { color: var(--blue); flex-shrink: 0; }
.rp-form-note--success i { color: var(--success); }


/* ── Loan Summary (Step 3) ── */
.rp-loan-summary {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 26px;
}
.rp-loan-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.rp-loan-summary__row:last-child { border-bottom: none; }
.rp-loan-summary__row span { color: var(--muted); }
.rp-loan-summary__row strong { color: var(--dark); font-weight: 700; }
.rp-amount-highlight { color: var(--indigo) !important; font-size: var(--fs-lg) !important; }
.rp-due-warning { color: #EF4444 !important; display: flex; align-items: center; gap: 6px; }


/* ── Quick Amounts ────── */
.rp-quick-amounts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.rp-quick-amt {
  padding: 7px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  background: var(--white);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--t);
}
.rp-quick-amt:hover,
.rp-quick-amt.active {
  border-color: var(--indigo);
  color: var(--indigo);
  background: rgba(97,98,219,.06);
}


/* ── Payment Modes ────── */
.rp-payment-modes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
}
.rp-mode-option { cursor: pointer; min-width: 0; }
.rp-mode-option input[type="radio"] { display: none; }
.rp-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  transition: all var(--t);
  cursor: pointer;
  background: var(--white);
}
.rp-mode-card i { font-size: 22px; color: var(--muted); transition: color var(--t); }
.rp-mode-option input:checked ~ .rp-mode-card {
  border-color: var(--indigo);
  color: var(--indigo);
  background: rgba(97,98,219,.05);
  box-shadow: 0 0 0 3px rgba(97,98,219,.10);
}
.rp-mode-option input:checked ~ .rp-mode-card i { color: var(--indigo); }
.rp-mode-card:hover {
  border-color: rgba(97,98,219,.40);
  color: var(--indigo);
}
.rp-mode-card:hover i { color: var(--indigo); }


/* ──────────────────────────────────────────────────────────────
   INFO PANEL (Right column cards)
────────────────────────────────────────────────────────────── */
.rp-info-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rp-info-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 25px;
  box-shadow: 0 4px 24px rgba(97,98,219,.06);
}
.rp-info-card--dark {
  background: linear-gradient(135deg, #070b18, #101a3a 55%, #08111f);
  border-color: rgba(255,255,255,.08);
}
.rp-info-card--contact {
  background: linear-gradient(135deg, rgba(79,165,220,.06), rgba(97,98,219,.06));
  border-color: rgba(97,98,219,.18);
}

.rp-info-card__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 20px;
}
.rp-info-card__title--light { color: #fff; }
.rp-info-card__icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 17px; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(97,98,219,.30);
}
.rp-info-card__icon--light { background: rgba(255,255,255,.14); box-shadow: none; }

/* Checklist */
.rp-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rp-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.55;
}
.rp-checklist li i {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(34,197,94,.12);
  color: var(--success);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Representative Example */
.rp-example-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 16px;
}
.rp-example-item {
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
}
.rp-example-label { display: block; font-size: 12px; color: rgba(255,255,255,.50); margin-bottom: 3px; }
.rp-example-val   { display: block; font-size: var(--fs-sm); font-weight: 700; color: rgba(255,255,255,.85); }
.rp-example-val--highlight { color: #4ADE80 !important; font-size: var(--fs-md) !important; }
.rp-example-note {
  font-size: 12px;
  color: rgba(255,255,255,.40);
  line-height: 1.6;
}

/* Contact card */
.rp-contact-text {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: 16px;
}
.rp-contact-links { display: flex; flex-direction: column; gap: 10px; }
.rp-contact-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: all var(--t);
}
.rp-contact-link i {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; flex-shrink: 0;
}
.rp-contact-link:hover {
  border-color: var(--indigo);
  color: var(--indigo);
  background: rgba(97,98,219,.04);
  transform: translateX(4px);
}


/* ──────────────────────────────────────────────────────────────
   INFO SECTION  (What is Repayment / Eligibility / Methods)
────────────────────────────────────────────────────────────── */
.rp-info-section {
  padding: 80px 0;
  background: var(--white);
  overflow-x: hidden;
}

/* Content block (alternating 2-col layout) */
.rp-content-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  margin-bottom: 80px;
}
.rp-content-block > * { min-width: 0; } /* prevent overflow */
.rp-content-block:last-child { margin-bottom: 0; }
.rp-content-block--reverse .rp-content-block__text { order: 1; }
.rp-content-block--reverse .rp-content-block__visual { order: 2; }

.rp-para {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.8;
  margin-top: 16px;
  max-width: 560px;
}

/* Highlight boxes (two-up) */
.rp-highlight-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 28px;
}
.rp-highlight-box {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  transition: all var(--t);
}
.rp-highlight-box:hover {
  border-color: rgba(97,98,219,.30);
  box-shadow: 0 6px 24px rgba(97,98,219,.10);
  transform: translateY(-3px);
}
.rp-highlight-box i {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(97,98,219,.30);
}
.rp-highlight-box strong { display: block; font-size: var(--fs-sm); color: var(--dark); font-weight: 700; }
.rp-highlight-box span   { font-size: 13px; color: var(--muted); }


/* Stat cards (reuse .rr-rate-card) */
.rp-stat-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.rp-stat-card { transition: all .4s var(--ease); }


/* Eligibility list */
.rp-eligibility-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 28px;
}
.rp-eligibility-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.rp-elig-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(97,98,219,.28);
}
.rp-eligibility-list strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 3px;
}
.rp-eligibility-list p {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* Eligibility visual */
.rp-eligibility-visual { display: flex; flex-direction: column; gap: 16px; }
.rp-elig-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px;
  text-align: center;
  box-shadow: 0 8px 36px rgba(97,98,219,.08);
  transition: all var(--t);
}
.rp-elig-card--featured {
  background: linear-gradient(135deg, rgba(79,165,220,.05), rgba(97,98,219,.07));
  border-color: rgba(97,98,219,.22);
}
.rp-elig-card__icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 28px;
  margin: 0 auto 18px;
  box-shadow: 0 8px 24px rgba(97,98,219,.35);
}
.rp-elig-card h4 {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 10px;
}
.rp-elig-card p {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 22px;
}
.rp-trust-row,
.rp-elig-trust-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.rp-trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
}
.rp-trust-badge i { color: var(--blue); }


/* Payment methods grid */
.rp-methods-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
  margin-top: 28px;
}
.rp-method-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 18px;
  text-align: center;
  transition: all .4s var(--ease);
  box-shadow: 0 4px 18px rgba(97,98,219,.06);
}
.rp-method-card:hover {
  transform: translateY(-8px);
  border-color: rgba(97,98,219,.28);
  box-shadow: 0 18px 48px rgba(97,98,219,.14);
}
.rp-method-card__icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px;
  margin: 0 auto 14px;
  box-shadow: 0 6px 20px rgba(97,98,219,.28);
  transition: transform .3s;
}
.rp-method-card:hover .rp-method-card__icon { transform: scale(1.1) rotate(-5deg); }
.rp-method-card h4 { font-size: var(--fs-sm); font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.rp-method-card p  { font-size: 13px; color: var(--muted); line-height: 1.6; }


/* ──────────────────────────────────────────────────────────────
   NOTICE BAND
────────────────────────────────────────────────────────────── */
.rp-notice-band {
  background: linear-gradient(135deg, rgba(247,183,51,.08), rgba(252,74,26,.08));
  border-top: 1px solid rgba(247,183,51,.20);
  border-bottom: 1px solid rgba(247,183,51,.20);
  padding: 20px 0;
}
.rp-notice-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.rp-notice-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(247,183,51,.15);
  display: flex; align-items: center; justify-content: center;
  color: #D97706;
  font-size: 18px;
  flex-shrink: 0;
}
.rp-notice-text {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.7;
}
.rp-notice-text strong { color: #D97706; }
.rp-notice-text a { color: var(--indigo); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(97,98,219,.30); }
.rp-notice-text a:hover { color: var(--blue); }


/* ──────────────────────────────────────────────────────────────
   RESPONSIVE  — comprehensive mobile-first fixes
────────────────────────────────────────────────────────────── */

/* ── Large tablet (≤ 1100px) ───────────────────────────────── */
@media (max-width: 1100px) {
  .rp-main-grid         { grid-template-columns: 1fr 340px; gap: 28px; }
  .rp-payment-modes     { grid-template-columns: repeat(2, 1fr); }
  .rp-methods-grid      { grid-template-columns: repeat(3, 1fr); }
}

/* ── Tablet (≤ 960px) ──────────────────────────────────────── */
@media (max-width: 960px) {
  /* Stack main grid — form above, info below */
  .rp-main-grid         { grid-template-columns: 1fr; gap: 24px; }

  /* Info panel: 2-col side by side */
  .rp-info-col          { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .rp-info-card--dark   { grid-column: span 2; }

  /* Content blocks stack */
  .rp-content-block     { grid-template-columns: 1fr; gap: 36px; }
  .rp-content-block--reverse .rp-content-block__text  { order: 0; }
  .rp-content-block--reverse .rp-content-block__visual { order: 0; }

  /* Stat cards: 4 in a row on tablet */
  .rp-stat-cards        { grid-template-columns: repeat(4, 1fr); }

  /* Methods: 2 cols */
  .rp-methods-grid      { grid-template-columns: repeat(2, 1fr); }

  /* Page hero: stack text + badges */
  .rp-page-hero__inner  { flex-direction: column; align-items: flex-start; gap: 24px; }
  .rp-page-hero__stats  { flex-wrap: wrap; }

  /* Eligibility visual */
  .rp-eligibility-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .rp-elig-card--featured { grid-column: span 2; }
  .rp-elig-trust-row    { justify-content: flex-start; }
}

/* ── Mobile large (≤ 767px) ────────────────────────────────── */
@media (max-width: 767px) {
  /* Page hero */
  .rp-page-hero         { padding: 44px 0 36px; }
  .rp-page-hero__text h1 { font-size: clamp(28px, 7vw, 40px); letter-spacing: -0.02em; }
  .rp-page-hero__text p  { font-size: var(--fs-sm); margin-bottom: 16px; }
  .rp-page-hero__stats  { gap: 10px; }
  .rp-hero-stat         { padding: 8px 14px; font-size: 14px; }

  /* Main section */
  .rp-main-section      { padding: 36px 0; }

  /* Form card */
  .rp-form-card         { padding: 24px 18px; border-radius: var(--r-lg); }
  .rp-form-card__header { gap: 14px; margin-bottom: 22px; padding-bottom: 18px; }
  .rp-form-card__icon   { width: 44px; height: 44px; font-size: 18px; border-radius: 12px; flex-shrink: 0; }
  .rp-form-card__header h2 { font-size: var(--fs-lg); }
  .rp-form-card__header p  { font-size: 14px; }

  /* Step indicators — shrink labels */
  .rp-step-indicators   { margin-bottom: 22px; }
  .rp-step__num         { width: 28px; height: 28px; font-size: 13px; }
  .rp-step__label       { font-size: 11px; }
  .rp-step-line         { margin: 0 4px; margin-bottom: 16px; }

  /* Input fields */
  .rp-input             { padding: 13px 14px; font-size: var(--fs-sm); }
  .rp-input-wrap--prefix .rp-input { padding-left: 72px; }
  .rp-input-prefix      { padding: 0 10px; font-size: 14px; }
  .rp-label             { font-size: 14px; margin-bottom: 7px; }

  /* OTP boxes */
  .rp-otp-boxes         { gap: 8px; }
  .rp-otp-box           { height: 48px; font-size: var(--fs-lg); border-radius: var(--r-sm); }

  /* OTP actions */
  .rp-otp-actions       { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 18px; }
  .rp-otp-timer         { font-size: 14px; }

  /* Quick amounts */
  .rp-quick-amounts     { gap: 6px; margin-top: 8px; }
  .rp-quick-amt         { font-size: 13px; padding: 7px 12px; }

  /* Payment modes: 2 per row */
  .rp-payment-modes     { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .rp-mode-card         { padding: 12px 6px; font-size: 12px; }
  .rp-mode-card i       { font-size: 18px; }

  /* Loan summary */
  .rp-loan-summary__row { padding: 12px 16px; flex-wrap: wrap; gap: 4px; }
  .rp-loan-summary__row span  { font-size: 13px; flex: 0 0 100%; }
  .rp-loan-summary__row strong { font-size: var(--fs-sm); }
  .rp-amount-highlight  { font-size: var(--fs-md) !important; }

  /* Submit buttons */
  .rp-submit-btn        { padding: 14px 24px; font-size: var(--fs-sm); }
  .rp-back-btn          { padding: 10px 20px; font-size: 14px; }
  .rp-form-note         { font-size: 12px; }

  /* Info panel: single column */
  .rp-info-col          { grid-template-columns: 1fr; }
  .rp-info-card--dark   { grid-column: auto; }
  .rp-info-card         { padding: 22px 18px; }
  .rp-info-card__title  { font-size: var(--fs-md); gap: 10px; margin-bottom: 16px; }
  .rp-info-card__icon   { width: 34px; height: 34px; font-size: 15px; }
  .rp-checklist li      { font-size: 14px; }

  /* Representative example */
  .rp-example-grid      { grid-template-columns: 1fr 1fr; }
  .rp-example-label     { font-size: 11px; }
  .rp-example-val       { font-size: 14px; }

  /* Contact card */
  .rp-contact-text      { font-size: 14px; }
  .rp-contact-link      { padding: 10px 14px; font-size: 14px; }
  .rp-contact-link i    { width: 30px; height: 30px; font-size: 13px; }

  /* Info section content blocks */
  .rp-info-section      { padding: 44px 0; }
  .rp-content-block     { gap: 28px; margin-bottom: 44px; }

  /* Heading sizes in info section */
  .rp-content-block .sec-title { font-size: clamp(22px, 5.5vw, 34px); }
  .rp-content-block .sec-sub   { font-size: var(--fs-sm); }
  .rp-para              { font-size: 14px; }

  /* Highlight boxes: single col */
  .rp-highlight-boxes   { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
  .rp-highlight-box     { padding: 14px 16px; }
  .rp-highlight-box i   { width: 36px; height: 36px; font-size: 16px; }

  /* Stat cards: 2×2 grid */
  .rp-stat-cards        { grid-template-columns: 1fr 1fr; gap: 14px; }

  /* Eligibility */
  .rp-eligibility-list  { gap: 16px; margin-top: 20px; }
  .rp-eligibility-list li { gap: 12px; }
  .rp-elig-icon         { width: 38px; height: 38px; font-size: 16px; border-radius: 10px; }
  .rp-eligibility-list strong { font-size: 15px; }
  .rp-eligibility-list p { font-size: 13px; }
  .rp-eligibility-visual { grid-template-columns: 1fr; }
  .rp-elig-card--featured { grid-column: auto; }
  .rp-elig-card         { padding: 22px 18px; }
  .rp-elig-card__icon   { width: 52px; height: 52px; font-size: 22px; }
  .rp-elig-trust-row    { gap: 8px; }
  .rp-trust-badge       { font-size: 12px; padding: 6px 12px; }

  /* Payment methods: 2×3 grid */
  .rp-methods-grid      { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
  .rp-method-card       { padding: 18px 14px; }
  .rp-method-card__icon { width: 44px; height: 44px; font-size: 18px; border-radius: 12px; margin-bottom: 10px; }
  .rp-method-card h4    { font-size: 14px; margin-bottom: 6px; }
  .rp-method-card p     { font-size: 12px; }

  /* Notice band */
  .rp-notice-band       { padding: 16px 0; }
  .rp-notice-inner      { flex-direction: row; align-items: flex-start; gap: 12px; }
  .rp-notice-icon       { width: 36px; height: 36px; font-size: 16px; flex-shrink: 0; }
  .rp-notice-text       { font-size: 13px; }

  /* Success card */
  .rp-success-card      { padding: 32px 18px !important; }
  .rp-success-icon      { width: 64px; height: 64px; font-size: 28px; }
  .rp-success-title     { font-size: var(--fs-xl); }
  .rp-success-sub       { font-size: 14px; }
}

/* ── Mobile small (≤ 420px) ────────────────────────────────── */
@media (max-width: 420px) {
  /* Even smaller OTP boxes */
  .rp-otp-boxes         { gap: 5px; }
  .rp-otp-box           { height: 44px; font-size: var(--fs-md); }

  /* Payment modes: keep 2-col but tighter */
  .rp-payment-modes     { gap: 6px; }
  .rp-mode-card         { padding: 10px 4px; font-size: 11px; }
  .rp-mode-card i       { font-size: 16px; }

  /* Quick amounts wrap nicely */
  .rp-quick-amounts     { gap: 5px; }
  .rp-quick-amt         { font-size: 12px; padding: 6px 10px; }

  /* Loan summary row stays readable */
  .rp-loan-summary__row { padding: 10px 14px; }
  .rp-loan-summary__row span { font-size: 12px; }

  /* Step label: hide on tiny screens to prevent overflow */
  .rp-step__label       { display: none; }
  .rp-step-indicators   { justify-content: center; }

  /* Methods: still 2-col */
  .rp-methods-grid      { grid-template-columns: 1fr 1fr; }

  /* Hero text */
  .rp-page-hero__text h1 { font-size: clamp(24px, 8vw, 34px); }
  .rp-page-hero__stats  { gap: 8px; }
  .rp-hero-stat         { padding: 7px 12px; font-size: 13px; }

  /* Form card tightest padding */
  .rp-form-card         { padding: 18px 14px; }

  /* Notice band: stack on tiny screens */
  .rp-notice-inner      { flex-direction: column; gap: 10px; }
}

/* ──────────────────────────────────────────────────────────────
   SUCCESS SCREEN
────────────────────────────────────────────────────────────── */
.rp-success-card {
  text-align: center;
  padding: 48px 36px !important;
}
.rp-success-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 36px;
  margin: 0 auto 24px;
  box-shadow: 0 10px 32px rgba(34,197,94,.35);
  animation: rp-success-pop .5s var(--ease) both;
}
@keyframes rp-success-pop {
  from { transform: scale(.5); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.rp-success-title {
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: var(--dark);
  margin-bottom: 10px;
}
.rp-success-sub {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: 28px;
  line-height: 1.7;
}
.rp-success-sub strong { color: var(--indigo); }
.rp-success-details {
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 20px;
}
.rp-success-note {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; font-size: 13px; color: var(--muted);
}
.rp-success-note i { color: var(--blue); }