/* ===================================================================
   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}
}

/* ===================================================================
   FORM WALE PANNE KA DHAANCHA  (teeno form page me ek jaisa)
   =================================================================== */

/* ---- Panne ka maroon banner ----
   Pehle yahan navy blue ka bada hero tha aur brand uske andar. Ab
   brand upar ki safed patti me hai (landing page jaisi) aur banner
   chhota hai - taaki form pehli nazar me dikhe, sajawat baad me. */
.hero{position:relative;overflow:hidden;background:linear-gradient(112deg,var(--maroon) 0%,#8e2029 62%,#a02b35 100%);color:#fff;padding:24px max(24px,calc((100% - var(--wrap))/2)) 26px}
.hero::after{content:"";position:absolute;width:300px;height:300px;right:-70px;top:-195px;border:1px solid rgba(255,255,255,.14);border-radius:50%;box-shadow:0 0 0 22px rgba(255,255,255,.045),0 0 0 48px rgba(255,255,255,.035);pointer-events:none}
.hero-row{position:relative;z-index:1;display:flex;align-items:center;gap:17px}
.hero h1{margin:0;font-size:29px;line-height:1.15}
.lede{margin:7px 0 0;max-width:680px;color:#f7e8e6;font-size:13.5px;line-height:1.6}
.hero p:last-child{margin-bottom:0}

/* Peeche jaane ka link. Breadcrumb ki tarah, taaki grahak ko pata rahe
   ki wo portal ke andar hai - "back" button par bharosa nahi kiya ja
   sakta, log form seedha link se bhi kholte hain. */
.portal-back,.back{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;margin:0 0 15px;padding:5px 12px 5px 9px;border:1px solid rgba(255,255,255,.28);border-radius:30px;background:rgba(255,255,255,.08);color:#fff;font-size:12px;font-weight:650;text-decoration:none}
.portal-back:hover,.portal-back:focus-visible,.back:hover,.back:focus-visible{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.45)}

.brandmark{display:grid;place-items:center;flex:0 0 auto;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid var(--gold);color:#ffe28a;font-family:var(--serif);font-size:19px;font-weight:700;box-shadow:0 0 0 7px rgba(255,255,255,.055)}

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

/* ---- Form ka kaagaz ---- */
form{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper);box-shadow:var(--sh-1);overflow:hidden}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 22px;border-bottom:1px solid var(--line);background:linear-gradient(#fdfcfa,#faf8f5)}
.toolbar strong{display:block;font-family:var(--serif);font-size:17px;color:var(--ink)}
.toolbar p{margin:4px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5}
.toolbar label{font-weight:700;font-size:13px}

/* ---- Hissa (section) ----
   Heading ke baayein gold ki patti - aankh ko turant pata chal jaata
   hai ki naya hissa shuru hua. */
.form-section,.section{padding:19px 22px;border-bottom:1px solid var(--line-2)}
.form-section:last-of-type,.section:last-of-type{border-bottom:0}
.form-section h2,.section h2{display:flex;align-items:center;gap:9px;margin:0 0 15px;font-size:16px;color:var(--maroon)}
.form-section h2::before,.section h2::before{content:"";width:3px;height:16px;border-radius:2px;background:var(--gold)}
.section{margin:0;border:0;border-bottom:1px solid var(--line-2);border-radius:0;background:transparent}

/* ---- Khaane ---- */
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 18px;align-content:start}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.wide,.checkline.wide{grid-column:1/-1}
.field label{color:var(--ink-2);font-size:12.5px;font-weight:650;letter-spacing:.01em}
.required-mark{color:var(--red);font-weight:800}

input,select,textarea{font:inherit;width:100%;padding:11px 12px;border:1.5px solid #d9d3cb;border-radius:var(--r-s);background:#fff;color:var(--ink);font-size:14.5px;outline:0;transition:border-color .14s ease,box-shadow .14s ease}
input::placeholder,textarea::placeholder{color:#a9b0ba}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:#c6bfb6}
input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:var(--ring)}
textarea{min-height:72px;resize:vertical;line-height:1.5}
select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2397a0ab' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
input[type=file]{padding:9px 11px;background:#fbfaf8;color:var(--muted);font-size:13px;cursor:pointer}
input[type=file]::file-selector-button{margin-right:11px;padding:7px 12px;border:1px solid #dcd6ce;border-radius:6px;background:#fff;color:#4a525e;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
input[type=date]{min-height:45px}

/* Tick wale khaane - unhein input jitni chaudai nahi chahiye. */
input[type=checkbox],input[type=radio]{width:17px;height:17px;min-height:0;padding:0;accent-color:var(--red);cursor:pointer}
.checkline,.field.check{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--ink-2);font-size:13px}
.checkline input,.field.check input[type=checkbox]{flex:0 0 auto;margin:0;transform:none}
.field.check label{margin:0;font-size:13px;font-weight:600}
.option-list{display:flex;flex-wrap:wrap;gap:8px 10px}
.option-list label{display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 13px;border:1.5px solid #e2dcd4;border-radius:30px;background:#fff;color:var(--ink-2);font-size:12.5px;font-weight:600;cursor:pointer;transition:border-color .14s ease,background .14s ease}
.option-list label:hover{border-color:#cfc6bb;background:#fbfaf8}
.option-list label:has(input:checked){border-color:var(--red);background:#fdf3f3;color:var(--red-dk)}
.option-list input{width:16px;height:16px;flex:0 0 auto;margin:0}

/* ---- Chhoti madad ki line ----
   PIN ke neeche yahi line jawab deti hai, isliye ye kam nahi dikhni
   chahiye - par shor bhi na kare. */
.hint{margin:0;padding:0;border:0;background:transparent;color:var(--muted);font-size:11.5px;line-height:1.5}
#form-intro.hint,.hint:not(.field .hint){padding:13px 16px;border:1px solid var(--gold-ln);border-radius:var(--r);background:var(--gold-sf);color:#79601f;font-size:12.5px}

/* ---- Niche ka kaam wala patta ----
   Mobile par chipka hua (sticky) - aath hisse bharne ke baad grahak ko
   "Create PDF" dhoondhne ke liye poora panna neeche scroll karna padta
   tha, aur kai log wahan tak pahunchte hi nahi the. */
.actions{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 22px;border-top:1px solid var(--line);background:linear-gradient(#faf8f5,#f5f2ed)}
.actions p{margin:0;color:var(--muted);font-size:12px}

@media(max-width:700px){
  .hero{padding:20px 16px 22px}
  .hero h1{font-size:23px}
  .lede{font-size:12.5px}
  .brandmark{width:44px;height:44px;font-size:16px;box-shadow:0 0 0 5px rgba(255,255,255,.05)}
  main{margin-top:16px;padding:0 15px 30px}
  .toolbar{flex-direction:column;align-items:stretch;gap:12px;padding:16px}
  .toolbar .button,.toolbar button{width:100%}
  .form-section,.section{padding:16px}
  .fields{grid-template-columns:1fr;gap:13px}
  .field.wide,.checkline.wide{grid-column:auto}
  .actions{position:sticky;bottom:0;z-index:5;flex-direction:column-reverse;align-items:stretch;padding:12px 15px;box-shadow:0 -6px 18px rgba(45,30,20,.09)}
  .actions .button,.actions button{width:100%;padding:13px 18px;font-size:15px}
  .actions p{text-align:center}
}

/* ===================================================================
   CHHAPAI KI SETTING KA PATTA
   -------------------------------------------------------------------
   Band rehta hai. Jisko zarurat nahi uske saamne ye ek line se zyada
   jagah na le - par jab setting badli hui ho to summary par sunehra
   nishaan aa jaata hai, taaki BC bhool na jaaye ki usne kuch badla
   tha aur agli baar "PDF galat aa rahi hai" na samjhe.
   =================================================================== */
.tuner{margin:16px 0 0;border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper);box-shadow:var(--sh-1);overflow:hidden}
.tuner>summary{display:flex;align-items:center;gap:9px;padding:13px 18px;cursor:pointer;color:var(--ink-2);font-size:13.5px;font-weight:700;list-style:none}
.tuner>summary::-webkit-details-marker{display:none}
.tuner>summary::before{content:"\2699";color:var(--red);font-size:15px;line-height:1}
.tuner>summary::after{content:"\25BE";margin-left:auto;color:var(--faint);font-size:12px;transition:transform .15s ease}
.tuner>summary:hover{background:#fbfaf8}
.tuner[open]>summary{border-bottom:1px solid var(--line-2)}
.tuner[open]>summary::after{transform:rotate(180deg)}
.tuner[data-on="1"]>summary::before{content:"\25CF";color:#b8860b}
.tuner-note{margin:14px 18px 6px;color:var(--muted);font-size:12px;line-height:1.65}
.tuner-row{display:grid;grid-template-columns:150px minmax(0,1fr) 96px;align-items:center;gap:12px;padding:8px 18px}
.tuner-row label{margin:0;color:var(--ink-2);font-size:12.5px;font-weight:650}
.tuner-row output{color:var(--red);font-size:12px;font-weight:750;text-align:right;font-variant-numeric:tabular-nums}
.tuner-row input[type=range]{width:100%;height:24px;margin:0;padding:0;border:0;border-radius:0;background:transparent;accent-color:var(--red);cursor:pointer;box-shadow:none}
.tuner-row input[type=range]:focus{box-shadow:none;outline:0}
.tuner-row input[type=range]:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.tuner>button{margin:6px 18px 16px}
@media(max-width:700px){
  .tuner-row{grid-template-columns:minmax(0,1fr) 84px;gap:2px 10px;padding:9px 14px}
  .tuner-row input[type=range]{grid-column:1/-1}
  .tuner-note{margin:12px 14px 4px}
  .tuner>summary{padding:13px 14px;font-size:13px}
  .tuner>button{margin:6px 14px 14px;width:calc(100% - 28px)}
}

/* ===================================================================
   KYC UPDATE  -  thodi apni baatein
   =================================================================== */

/* File chunne wale khaane (photo/signature) ek saath aate hain -
   unhein halka alag dikhana theek rehta hai, warna text khaano ke beech
   kho jaate hain. */
.field:has(input[type=file]) label{color:var(--muted)}

/* Ye ek line poore panne ki chaudai leti hai aur iske aage/peeche
   address ke khaane hain, isliye isko dibbe jaisa rakha hai - warna
   grahak tick karna bhool jaata hai aur address do baar bharta hai. */
.checkline.wide{padding:11px 14px;border:1.5px dashed #e0d9d0;border-radius:var(--r-s);background:#fbfaf8;font-weight:600}
.checkline.wide:has(input:checked){border-style:solid;border-color:var(--red);background:#fdf3f3;color:var(--red-dk)}