/* ===================================================================
   PNB Customer Forms - common look
   -------------------------------------------------------------------
   Ek hi design poore portal par. Pehle landing page maroon/gold (PNB ke
   rang) me thi aur andar ke form navy blue me - grahak maroon card
   dabata tha aur neele panne par pahunchta tha, jaise do alag website
   hon. Bharose ke liye yahi sabse bura asar daalta hai, isliye rang,
   font, kinare aur button sab ek kar diye gaye hain.

   Class ke naam JAANBUJH KAR purane rakhe gaye hain - app.js khud
   .field, .fields, .section, .tab, .hint, .error, .success banata hai.
   Naam badalte to form chup-chaap bikhar jaata.
   =================================================================== */

:root{
  --maroon:#7d1824; --maroon-dk:#5d101a; --red:#a52835; --red-dk:#8a1d29;
  --gold:#e7b536; --gold-sf:#fdf6e3; --gold-ln:#eedfb4;
  --ink:#1d232e; --ink-2:#2c3542; --muted:#67707e; --faint:#8a929e;
  --line:#e6e2db; --line-2:#f0ece6; --paper:#fff; --bg:#f6f5f2;
  --ok:#1f6b45; --ok-bg:#eff7f1; --ok-ln:#c9e3d3;
  --err:#a3242e; --err-bg:#fdf1f0; --err-ln:#f1cdc9;
  --ring:0 0 0 3px rgba(165,40,53,.15);
  --r-s:8px; --r:11px; --r-l:14px;
  --sh-1:0 1px 2px rgba(45,30,20,.04), 0 2px 8px rgba(45,30,20,.05);
  --sh-2:0 12px 30px rgba(77,35,32,.11);
  --serif:Georgia,"Times New Roman",serif;
  --sans:Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --wrap:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:.005em}
img{max-width:100%}
[hidden]{display:none!important}

/* Keyboard se chalne walo ke liye saaf nishaan. Pehle kai jagah
   outline:0 likha tha - tab dabane par pata hi nahi chalta tha ki
   kahan hain. */
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---- Sabse upar ki patti (har panne par ek jaisi) ---- */
.site-header{position:relative;background:var(--paper);border-bottom:1px solid var(--line)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:linear-gradient(90deg,var(--maroon) 0%,var(--red) 45%,var(--gold) 100%)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:var(--wrap);margin:auto;padding:0 24px;height:70px}
.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}
.brand-mark{display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--maroon);border:2px solid var(--gold);color:#fff;font-weight:900;font-size:13px;letter-spacing:.02em}
.brand-copy{display:flex;flex-direction:column;line-height:1.15}
.brand-copy strong{font-size:13.5px;letter-spacing:.13em;color:var(--maroon)}
.brand-copy small{margin-top:3px;color:var(--faint);font-size:11px;letter-spacing:.02em}
.secure-label{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:30px;background:#fbfaf8;color:#59616d;font-size:11.5px;font-weight:600;white-space:nowrap}
.secure-dot{width:7px;height:7px;border-radius:50%;background:#3f9169;box-shadow:0 0 0 3px #e4f2ea}

/* ---- Chhoti suchnaayein ---- */
.eyebrow{margin:0 0 8px;color:#ffe7a3;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.eyebrow.dark{color:var(--red)}

/* ---- Button ----
   Bare <button> aur .button dono chalte hain: Additional_Bank_Forms ka
   panna pehle se bare button istemal karta hai, baaki do .button. */
button,.button{font:inherit;font-weight:700;border:1px solid transparent;border-radius:var(--r-s);padding:11px 18px;cursor:pointer;transition:background .15s ease,box-shadow .15s ease,transform .08s ease}
button:active:not(:disabled),.button:active:not(:disabled){transform:translateY(1px)}
button:disabled,.button:disabled{opacity:.55;cursor:not-allowed;transform:none}
button,.button.primary,button.primary{background:var(--red);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05)}
button:hover:not(:disabled),.button.primary:hover:not(:disabled),button.primary:hover:not(:disabled){background:var(--red-dk)}
.button.secondary,button.secondary{background:#fff;border-color:#dcd6ce;color:#4a525e;box-shadow:none}
.button.secondary:hover:not(:disabled),button.secondary:hover:not(:disabled){background:#f6f4f1;border-color:#cfc8bf}

/* ---- Jawab ki line (status) ----
   Pehle sirf rang badalta tha. Rang akela kaafi nahi hota - jo rang
   nahi pehchante unke liye shabd ke saath nishaan bhi aata hai. */
#status{margin:0;min-height:22px;color:var(--muted);font-size:12.5px;font-weight:600}
#status.success{color:var(--ok)}
#status.error{color:var(--err)}
#status.success::before{content:"✓ ";font-weight:900}
#status.error::before{content:"! ";font-weight:900}

/* ---- Niji jaankari wala note ---- */
.privacy,.privacy-note{display:flex;gap:11px;align-items:flex-start;padding:13px 16px;border:1px solid var(--ok-ln);border-radius:var(--r);background:var(--ok-bg);color:#3b5245;font-size:12.5px;line-height:1.55}
.privacy strong,.privacy-note strong{color:#1e5436}
.privacy-icon{display:grid;place-items:center;flex:0 0 26px;height:26px;border-radius:50%;background:#dbeee2;color:var(--ok);font-weight:900;font-size:13px}

/* ---- Niche ki patti ---- */
.site-footer{margin-top:34px;border-top:1px solid var(--line);background:var(--paper)}
.footer-inner{display:flex;justify-content:space-between;gap:12px;max-width:var(--wrap);margin:auto;padding:17px 24px;color:var(--faint);font-size:11.5px}
footer,.footnote{color:var(--muted);font-size:11.5px;line-height:1.6}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

@media(max-width:600px){
  .header-inner{height:58px;padding:0 15px}
  .brand-mark{width:37px;height:37px;font-size:12px}
  .brand-copy strong{font-size:12.5px}
  .brand-copy small{display:none}
  .secure-label{padding:5px 9px;font-size:10.5px}
  .footer-inner{padding:15px}
}

/* ---- Chhapne par ---- */
@media print{
  body{background:#fff}
  .site-header,.site-footer,.privacy,.privacy-note,.actions,.tabs,.search{display:none!important}
}

/* ===================================================================
   LANDING PAGE  (form ki suchi)
   =================================================================== */

main{max-width:var(--wrap);margin:0 auto;padding:26px 24px 10px}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:218px;padding:34px 44px;border-radius:var(--r-l);background:linear-gradient(112deg,var(--maroon) 0%,#8e2029 60%,#a42c36 100%);color:#fff;box-shadow:var(--sh-2)}
.hero::after{content:"";position:absolute;width:330px;height:330px;right:96px;top:-208px;border:1px solid rgba(255,255,255,.14);border-radius:50%;box-shadow:0 0 0 24px rgba(255,255,255,.05),0 0 0 52px rgba(255,255,255,.035);pointer-events:none}
.hero-copy{position:relative;z-index:1}
.hero h1{margin:0;font-size:41px;line-height:1.1}
.hero-text{margin:12px 0 18px;max-width:430px;color:#f8e9e7;font-size:14.5px;line-height:1.6}
.hero-points{display:flex;flex-wrap:wrap;gap:8px}
.hero-points span{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border:1px solid rgba(255,255,255,.26);border-radius:30px;background:rgba(255,255,255,.08);font-size:11.5px;font-weight:650;letter-spacing:.01em}
.hero-points b{color:#ffe28a;font-size:13px}
.hero-emblem{position:relative;z-index:1;display:grid;place-items:center;flex:0 0 auto;width:126px;height:126px;margin-right:18px;border:1px solid var(--gold);border-radius:50%;color:#ffe28a;font-family:var(--serif);font-size:25px;font-weight:700;box-shadow:0 0 0 10px rgba(255,255,255,.06),0 0 0 21px rgba(255,255,255,.035)}
.hero-emblem i{position:absolute;inset:9px;border:1px dashed rgba(244,211,107,.5);border-radius:50%}

.privacy-note{margin:17px 0 30px;align-items:center}
.privacy-note p{margin:0;font-size:12.5px}

/* ---- "Choose a service" ki patti ---- */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.section-head h2{margin:0;font-size:27px;color:var(--ink)}
.section-head .eyebrow{margin-bottom:6px}
.search{display:flex;align-items:center;gap:9px;width:min(320px,100%);height:44px;padding:0 13px;border:1.5px solid #d9d3cb;border-radius:var(--r-s);background:#fff;color:var(--faint);transition:border-color .14s ease,box-shadow .14s ease}
.search span{font-size:20px;line-height:1}
.search input{width:100%;height:100%;padding:0;border:0;outline:0;background:transparent;color:var(--ink);font-size:13.5px}
.search:focus-within{border-color:var(--red);box-shadow:var(--ring)}
.result-count{margin:13px 0 15px;color:var(--faint);font-size:12px}

/* ---- Card ----
   Neeche gold ki ek patli patti hover par khulti hai. Chhoti baat hai,
   par card "dabane layak" lagta hai - pehle hover par sirf khiskta tha
   aur kai log samajh nahi paate the ki poora card hi link hai. */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:206px;padding:20px 21px 17px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper);box-shadow:var(--sh-1);color:inherit;text-decoration:none;transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--red),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.card:hover,.card:focus-visible{transform:translateY(-3px);border-color:#dbb9b6;box-shadow:var(--sh-2);outline:0}
.card:hover::after,.card:focus-visible::after{transform:scaleX(1)}
.card:focus-visible{box-shadow:0 0 0 3px rgba(165,40,53,.22),var(--sh-2)}
.card-top{display:flex;align-items:center;gap:10px}
.card-icon{display:grid;place-items:center;flex:0 0 auto;width:35px;height:35px;border-radius:9px;font-family:var(--serif);font-size:13px;font-weight:700}
.card-icon.red{background:#fbeceb;color:#9a2733;border:1px solid #f3dcda}
.card-icon.gold{background:var(--gold-sf);color:#8a6414;border:1px solid var(--gold-ln)}
.tag{color:var(--faint);font-size:9.5px;font-weight:800;letter-spacing:.12em}
.card h3{margin:16px 0 7px;font-size:18px;line-height:1.25;color:var(--ink)}
.card p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.55}
.go{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:16px;color:var(--red);font-size:12px;font-weight:750}
.go b{display:grid;place-items:center;width:26px;height:26px;border:1px solid #ecd9d8;border-radius:50%;background:#fdf6f5;font-size:14px;transition:background .17s ease,border-color .17s ease,transform .17s ease}
.card:hover .go b{background:var(--red);border-color:var(--red);color:#fff;transform:translate(2px,-2px)}

.empty{padding:34px;border:1px dashed #ddd6cd;border-radius:var(--r);background:#fff;text-align:center;color:var(--muted);font-size:13px}
.print-note{display:flex;gap:11px;align-items:flex-start;margin-top:26px;padding:14px 17px;border:1px solid var(--gold-ln);border-left:3px solid var(--gold);border-radius:var(--r);background:var(--gold-sf)}
.print-note span{color:#9c7625;font-size:15px;line-height:1.3}
.print-note p{margin:0;color:#79601f;font-size:11.5px;line-height:1.6}

@media(max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.hero h1{font-size:35px}.hero{padding:30px 32px}.hero-emblem{width:104px;height:104px;font-size:21px;margin-right:4px}.hero::after{right:20px}}
@media(max-width:640px){
  main{padding:16px 15px 6px}
  .hero{min-height:0;gap:14px;padding:24px 20px;border-radius:var(--r)}
  .hero h1{font-size:30px}
  .hero-text{margin:10px 0 15px;max-width:none;font-size:13px}
  .hero-points span{padding:6px 11px;font-size:11px}
  .hero-emblem{width:66px;height:66px;margin:0;font-size:15px;box-shadow:0 0 0 6px rgba(255,255,255,.05)}
  .hero-emblem i{inset:6px}
  .hero::after{right:-150px;top:-215px}
  .privacy-note{align-items:flex-start;margin:14px 0 24px;padding:12px 14px}
  .section-head{flex-direction:column;align-items:stretch;gap:13px}
  .section-head h2{font-size:23px}
  .search{width:100%}
  .cards{grid-template-columns:1fr;gap:12px}
  .card{min-height:0;padding:17px}
  .card h3{margin-top:13px;font-size:16.5px}
  .go{padding-top:14px}
  .print-note{margin-top:20px}
}