/* ========================================
   DIGILOCKER PICKER — shared component styles
   ========================================
   Reuses the existing design system's tokens (--blue/--navy-2/--green/etc.,
   defined per-page) and the existing <dialog> pattern (see dialog{} rules in
   update-voter-details.css) rather than introducing new colors or a new
   modal mechanism. `dl-` prefix avoids collisions with page-scoped classes.
   ======================================== */
.dl-dialog{width:min(480px,calc(100% - 32px));padding:0;border:0;border-radius:14px;box-shadow:0 30px 70px -24px rgba(13,33,54,.55)}
.dl-dialog::backdrop{background:rgba(13,33,54,.48)}
.dl-inner{padding:24px}
.dl-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.dl-head h2{font-size:1.15rem;color:var(--navy-2,#132844);margin:0}
.dl-head p{margin-top:4px;color:var(--muted,#5C6B7A);font-size:.8125rem}
.dl-head>button{width:36px;height:36px;flex:none;border:0;border-radius:8px;background:var(--bg-soft,#F5F8FC);font-size:1.2rem;line-height:1;cursor:pointer;color:var(--slate,#3C4A59)}
.dl-copy{color:var(--slate,#3C4A59);font-size:.875rem;line-height:1.55}
.dl-looking-for,.dl-purpose{margin-top:14px;padding:12px 14px;border-left:3px solid var(--blue,#1358A6);background:var(--blue-soft,#EAF1FA);display:grid;gap:2px}
.dl-looking-for span,.dl-purpose span{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted,#5C6B7A);font-weight:700}
.dl-looking-for strong,.dl-purpose strong{color:var(--navy-2,#132844);font-size:.9375rem}
.dl-trust{margin-top:14px;display:grid;gap:7px;padding:0;list-style:none}
.dl-trust li{position:relative;padding-left:20px;font-size:.8125rem;color:var(--slate,#3C4A59)}
.dl-trust li::before{content:"✓";position:absolute;left:0;color:var(--green,#1E7A4C);font-weight:800}
.dl-proto-note{margin-top:14px;color:var(--muted,#5C6B7A);font-size:.75rem;font-style:italic}
.dl-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.dl-loading{display:flex;align-items:center;gap:12px;min-height:80px;color:var(--slate,#3C4A59);font-size:.9375rem;font-weight:600}
.dl-spinner{width:22px;height:22px;flex:none;border:3px solid var(--blue,#1358A6);border-right-color:transparent;border-radius:50%;animation:dl-spin .8s linear infinite}
@keyframes dl-spin{to{transform:rotate(360deg)}}
.dl-doc-list{display:grid;gap:10px;margin-top:4px}
.dl-doc-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid var(--line,#D8E0E8);border-radius:10px}
.dl-doc-card strong{display:block;color:var(--navy-2,#132844);font-size:.9375rem}
.dl-doc-card span{display:block;margin-top:2px;color:var(--muted,#5C6B7A);font-size:.75rem}
.dl-fallback{margin-top:16px;color:var(--slate,#3C4A59);font-size:.8125rem;text-align:center}
/* Plain text link — used only for the "Upload manually instead" fallback
   inside the picker dialog itself, not for the page-level entry points. */
.digilocker-link{border:0;background:none;color:var(--blue,#1358A6);font:inherit;font-weight:650;cursor:pointer;padding:0}

/* Small entry-point card offering DigiLocker as an import method right where
   a document is asked for — sized like a single form control, not a promo
   banner. Reused everywhere a page offers "Import/Choose from DigiLocker". */
.digilocker-card{display:flex;align-items:center;gap:12px;width:100%;max-width:420px;margin-top:10px;padding:11px 14px;border:1px solid var(--line,#D8E0E8);border-radius:10px;background:var(--blue-soft,#EAF1FA);text-align:left;cursor:pointer;font:inherit;transition:border-color .15s,background .15s}
.digilocker-card:hover{border-color:var(--blue,#1358A6);background:#E1EBF8}
.digilocker-card:focus-visible{outline:3px solid #0B5CAD;outline-offset:2px}
.digilocker-card-icon{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:8px;background:#fff;color:var(--blue,#1358A6)}
.digilocker-card-text{display:grid;gap:1px;min-width:0}
.digilocker-card-text strong{color:var(--navy-2,#132844);font-size:.8438rem;font-weight:700}
.digilocker-card-text small{color:var(--muted,#5C6B7A);font-size:.75rem;line-height:1.35}
.dl-meta{display:grid;gap:10px;margin:4px 0 16px}
.dl-meta div{display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--line-soft,#E6ECF1)}
.dl-meta dt{color:var(--muted,#5C6B7A);font-size:.8125rem}
.dl-meta dd{margin:0;color:var(--navy-2,#132844);font-size:.8125rem;font-weight:650;text-align:right}
.dl-consent{display:flex;align-items:flex-start;gap:10px;margin-top:6px;font-size:.875rem;color:var(--slate,#3C4A59)}
.dl-consent input{width:19px;height:19px;flex:none;accent-color:var(--blue,#1358A6);margin-top:1px}
.dl-error{min-height:18px;margin-top:8px;color:var(--red,#B3261E);font-size:.8125rem;font-weight:650}

/* Attached-document card used on the requesting page after a successful import
   or manual upload — mirrors the existing .document-card pattern so DigiLocker
   imports and manual uploads render identically once attached. */
.dl-attached{margin-top:14px;padding:14px 16px;border:1px solid var(--green,#1E7A4C);border-radius:10px;background:var(--green-soft,#E8F5EC);display:flex;align-items:center;justify-content:space-between;gap:14px}
.dl-attached div{display:grid}
.dl-attached strong{color:var(--navy-2,#132844);font-size:.9375rem}
.dl-attached span{margin-top:2px;color:var(--green-dark,#175C3A);font-size:.75rem;font-weight:650}
.dl-attached button{border:0;background:none;color:var(--blue,#1358A6);font:inherit;font-size:.8125rem;font-weight:700;cursor:pointer}

/* Suggests reusing a document already imported for one requirement toward
   another (e.g. an Aadhaar imported as DOB proof can also cover address
   proof) — still requires an explicit click, never auto-attaches. */
.dl-reuse-hint{margin-bottom:12px;padding:12px 14px;border-left:3px solid var(--blue,#1358A6);background:var(--blue-soft,#EAF1FA);font-size:.8125rem;color:var(--slate,#3C4A59);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.dl-reuse-hint button{border:0;background:none;color:var(--blue,#1358A6);font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}

@media(max-width:760px){
  .dl-dialog{width:100%;max-width:none;height:100%;max-height:none;border-radius:0;margin:0}
}