/* ═══════════════════════════════════════════════════════════
   Atom Fees Payment v4 — Parent UI
   Color palette: Deep navy + warm gold + cream (Aryavedant)
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  --navy:      #1a3557;
  --navy-d:    #112340;
  --navy-l:    #234f83;
  --gold:      #c9a036;
  --gold-l:    #e8c060;
  --gold-pale: #fdf6e3;
  --cream:     #faf8f4;
  --white:     #ffffff;
  --text:      #1c2b3a;
  --muted:     #6b7d8f;
  --border:    #dde3eb;
  --success:   #16a34a;
  --error:     #dc2626;
  --warn:      #d97706;
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --shadow:    0 4px 24px rgba(26,53,87,.10);
  --shadow-sm: 0 2px 8px  rgba(26,53,87,.07);
}

/* ── Reset & base ── */
.afp-pay-wrap *, .afp-pay-wrap *::before, .afp-pay-wrap *::after { box-sizing:border-box; margin:0; padding:0; }
.afp-pay-wrap { font-family:'DM Sans',system-ui,sans-serif; color:var(--text); background:var(--cream); padding:32px 16px 48px; }

/* ── Page header — simple, clean ── */
.afp-header {
  background: white;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-top: 3px solid var(--navy);
  padding: 18px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.afp-header-inner { display:flex; align-items:center; gap:12px; min-width:0; }
.afp-school-badge {
  width:40px; height:40px; border-radius:10px;
  background:var(--navy); color:white;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.afp-school-name {
  font-family:'Playfair Display',serif; font-size:1rem; font-weight:700;
  color:var(--navy); line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.afp-school-sub  { font-size:.75rem; color:var(--muted); margin-top:1px; }
.afp-header-secure {
  display:flex; align-items:center; gap:5px; flex-shrink:0;
  background:#f0fdf4; border:1px solid #86efac;
  border-radius:20px; padding:5px 11px;
  font-size:.72rem; font-weight:600; color:#15803d; white-space:nowrap;
}
/* hide badges that were inside header — now footer only */
.afp-header-badges, .afp-hbadge, .afp-hbadge-dot { display:none; }

/* ── Pre-fill notice (encrypted link) ── */
.afp-prefill-notice {
  background:linear-gradient(135deg,#fff8e6,#fdf3d0);
  border:1.5px solid var(--gold);
  border-radius:var(--radius);
  padding:14px 18px;
  margin-bottom:20px;
  display:flex; gap:12px; align-items:flex-start;
}
.afp-prefill-notice .icon { font-size:20px; flex-shrink:0; }
.afp-prefill-notice .text { font-size:.88rem; color:#5c4006; line-height:1.5; }
.afp-prefill-notice strong { color:#3d2a00; }

/* ── Step progress indicator ── */
.afp-steps {
  display:flex; align-items:center; gap:0;
  margin-bottom:20px;
  background:white; border-radius:var(--radius); padding:12px 14px;
  box-shadow:var(--shadow-sm); border:1px solid var(--border);
}
.afp-step { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:default; min-width:0; }
.afp-step-num {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--border); background:white;
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:600; color:var(--muted);
  transition:all .25s;
}
.afp-step-label {
  font-size:.64rem; color:var(--muted); text-align:center;
  transition:color .25s; font-weight:500; line-height:1.2;
  max-width:56px; overflow:hidden;
}
.afp-step.active  .afp-step-num  { background:var(--navy); border-color:var(--navy); color:white; box-shadow:0 0 0 3px rgba(26,53,87,.12); }
.afp-step.active  .afp-step-label { color:var(--navy); font-weight:600; }
.afp-step.done    .afp-step-num  { background:var(--success); border-color:var(--success); color:white; }
.afp-step.done    .afp-step-label { color:var(--success); }
/* Connector — flex:1 on very small screens so steps aren't squeezed */
.afp-step-connector { flex:0 0 14px; height:2px; background:var(--border); margin-bottom:14px; transition:background .25s; }
.afp-step.done + .afp-step-connector { background:var(--success); }

/* ── Cards ── */
.afp-panel {
  background:white; border-radius:var(--radius);
  box-shadow:var(--shadow); border:1px solid var(--border);
  overflow:hidden; margin-bottom:16px;
  animation: afp-slide-in .3s ease both;
}
@keyframes afp-slide-in { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }

.afp-panel-head {
  padding:18px 22px 14px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.afp-panel-icon { font-size:18px; }
.afp-panel-title { font-family:'Playfair Display',serif; font-size:1rem; font-weight:600; color:var(--navy); }
.afp-panel-body { padding:20px 22px; }

/* ── Form fields ── */
.afp-field { margin-bottom:16px; }
.afp-field:last-child { margin-bottom:0; }
.afp-label {
  display:block; margin-bottom:6px;
  font-size:.78rem; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em;
}
.afp-label .req { color:var(--error); margin-left:2px; }
.afp-input, .afp-select {
  width:100%; padding:11px 14px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:.95rem; color:var(--text); background:white;
  font-family:'DM Sans',sans-serif;
  transition:border-color .2s, box-shadow .2s; outline:none;
  -webkit-appearance:none;
}
.afp-input:focus, .afp-select:focus {
  border-color:var(--navy-l); box-shadow:0 0 0 3px rgba(26,53,87,.10);
}
.afp-input[readonly], .afp-input:disabled {
  background:#f5f7fa; color:var(--muted); cursor:default;
}
.afp-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:520px) { .afp-row { grid-template-columns:1fr; } }

/* ── Amount input ── */
.afp-amount-wrap { position:relative; }
.afp-rupee { position:absolute; left:14px; top:50%; transform:translateY(-50%); font-weight:700; color:var(--navy); font-size:1rem; pointer-events:none; }
.afp-amount-input { padding-left:36px; font-size:1.1rem; font-weight:700; }
.afp-amount-hint { font-size:.76rem; color:var(--muted); margin-top:4px; }
.afp-amount-locked { background:var(--gold-pale) !important; border-color:var(--gold) !important; color:var(--navy) !important; font-weight:700; }

/* ── Pill buttons (fee category) ── */
.afp-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.afp-pill {
  padding:9px 16px; border-radius:24px; font-size:.82rem; font-weight:600;
  border:1.5px solid var(--border); background:white; color:var(--muted);
  cursor:pointer; transition:all .15s; min-height:44px; display:inline-flex; align-items:center;
  font-family:'DM Sans',sans-serif;
}
.afp-pill:hover { border-color:var(--navy-l); color:var(--navy); background:#f0f5ff; }
.afp-pill.active { background:var(--navy); border-color:var(--navy); color:white; }
.afp-pill:disabled { opacity:.5; cursor:not-allowed; }

/* ── Review card ── */
.afp-review-card {
  background:var(--gold-pale); border:1.5px solid var(--gold);
  border-radius:var(--radius); padding:18px 20px; margin-bottom:16px;
}
.afp-review-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:7px 0; border-bottom:1px solid rgba(201,160,54,.2);
  font-size:.9rem;
}
.afp-review-row:last-child { border:none; }
.afp-review-row .rlabel { color:#7a5c00; font-weight:500; }
.afp-review-row .rvalue { color:var(--navy-d); font-weight:600; }
.afp-review-total {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0 4px; border-top:2px solid var(--gold);
  margin-top:4px;
}
.afp-review-total .rlabel { color:#5c4000; font-size:1rem; font-weight:700; }
.afp-review-total .rvalue { color:var(--navy-d); font-size:1.25rem; font-weight:700; }

/* ── Reference ID banner ── */
.afp-ref-banner {
  background:linear-gradient(135deg,#eef4ff,#dde8ff);
  border:2px dashed #7ba7e0; border-radius:var(--radius);
  padding:16px 20px; margin-bottom:16px; text-align:center;
}
.afp-ref-banner-label { font-size:.72rem; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.afp-ref-banner-id { font-size:1.2rem; font-weight:900; color:var(--navy-d); font-family:monospace; letter-spacing:.06em; word-break:break-all; }
.afp-ref-banner-hint { font-size:.74rem; color:var(--muted); margin-top:5px; }

/* ── Navigation buttons ── */
.afp-nav { display:flex; gap:12px; margin-top:16px; }
.afp-btn-back {
  flex:0 0 auto; padding:13px 20px;
  background:white; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); font-size:.9rem; font-weight:600;
  color:var(--muted); cursor:pointer; transition:all .15s;
  font-family:'DM Sans',sans-serif;
}
.afp-btn-back:hover { border-color:var(--navy); color:var(--navy); }
.afp-btn-next, .afp-btn-pay {
  flex:1; padding:13px 20px;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-l) 100%);
  border:none; border-radius:var(--radius-sm);
  font-size:.95rem; font-weight:700; color:white;
  cursor:pointer; transition:opacity .2s, transform .1s;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:'DM Sans',sans-serif; letter-spacing:.01em;
}
.afp-btn-next:hover, .afp-btn-pay:hover { opacity:.92; }
.afp-btn-next:active, .afp-btn-pay:active { transform:scale(.98); }
.afp-btn-next:disabled, .afp-btn-pay:disabled { opacity:.55; cursor:not-allowed; }

/* ── Spinner ── */
.afp-spinner { display:none; width:18px; height:18px; border:3px solid rgba(255,255,255,.35); border-top-color:white; border-radius:50%; animation:afp-spin .8s linear infinite; }
@keyframes afp-spin { to { transform:rotate(360deg); } }

/* ── Alert ── */
.afp-alert { padding:11px 16px; border-radius:var(--radius-sm); font-size:.87rem; margin-top:12px; display:none; }
.afp-alert-error   { background:#fef2f2; border:1.5px solid #fca5a5; color:var(--error); }
.afp-alert-success { background:#f0fdf4; border:1.5px solid #86efac; color:var(--success); }
.afp-alert-info    { background:#eff6ff; border:1.5px solid #93c5fd; color:var(--navy); }

/* ── Trust footer ── */
.afp-trust-footer { text-align:center; margin-top:20px; }
.afp-trust-badges { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.afp-trust-badge {
  display:flex; align-items:center; gap:6px;
  background:white; border:1px solid var(--border); border-radius:20px;
  padding:5px 12px; font-size:.76rem; color:var(--muted);
}
.afp-trust-note { font-size:.74rem; color:var(--muted); }

/* ── Step panels (hide/show) ── */
.afp-step-panel { display:none; }
.afp-step-panel.active { display:block; }

/* ── Status checker ── */
.afp-status-result { margin-top:0; }
.afp-status-hero { text-align:center; padding:24px 0 16px; }
.afp-status-icon { font-size:52px; margin-bottom:12px; }
.afp-status-badge-pill {
  display:inline-block; padding:6px 18px; border-radius:20px;
  font-weight:700; font-size:.88rem; margin-top:6px;
}
.afp-detail-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.afp-detail-table th, .afp-detail-table td { padding:9px 12px; border:1px solid var(--border); text-align:left; }
.afp-detail-table th { background:#f8fafc; font-weight:600; color:var(--muted); width:42%; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.afp-detail-table td { color:var(--text); font-weight:500; word-break:break-word; overflow-wrap:anywhere; }
.afp-detail-table { table-layout:fixed; }

/* ── Responsive tweaks ── */
@media(max-width:480px) {
  .afp-pay-wrap { padding:16px 10px 36px; }
  .afp-header { padding:14px 14px; }
  .afp-school-name { font-size:.9rem; }
  .afp-school-sub { display:none; } /* hide subtitle on tiny screens */
  .afp-panel-body { padding:14px 13px; }
  .afp-panel-head { padding:14px 14px 11px; }
}

/* ── Extra-small: hide step labels, show only numbers ── */
@media(max-width:380px) {
  .afp-step-label { display:none; }
  .afp-step-connector { flex:0 0 10px; }
  .afp-steps { padding:10px 10px; }
  .afp-header-secure span:not(:first-child) { display:none; } /* show only lock icon */
}

/* ── UAT notice ── */
.afp-uat-notice {
  background:#fffbeb; border:1.5px solid #fcd34d; border-radius:var(--radius-sm);
  padding:10px 14px; font-size:.82rem; color:#92400e;
  margin-bottom:16px; display:flex; gap:8px; align-items:flex-start;
}