/* =====================================================================
   ANNADATA CARD — styles.css
   -----------------------------------------------------------------------
   Section map (search for these comment headers below):
   :root                 -> color/font variables used everywhere
   Header                -> top nav bar + logo + language toggle
   Not-govt banner        -> the dark green disclaimer strip under the nav
   Layout                 -> #formView / #previewView page containers
   Card Preview            -> the flip card itself (#card3d, .face, card-top,
                              card-top-logo-badge, card-body, card-strip)
   Download / payment      -> the "Submit, Pay Now & Download" button + note
   Modal                   -> the payment popup (#modalBg)
   Register Sheet          -> (legacy, kept off-screen; not shown on page)
   ===================================================================== */
  :root{
    --gold:#d79b2c;
    --gold-soft:#f0c774;
    --fern:#1f4d3a;
    --fern-deep:#123024;
    --soil:#6b4226;
    --wheat:#faf3e3;
    --ink:#1c2621;
    --paper:#fffdf8;
    --line:#e4d9bf;
    --danger:#a3391c;
    --radius:14px;
    --shadow: 0 20px 45px -20px rgba(18,48,36,.45);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(circle at 15% 0%, rgba(215,155,44,.10), transparent 45%),
      radial-gradient(circle at 100% 20%, rgba(31,77,58,.10), transparent 40%),
      var(--wheat);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    min-height:100vh;
  }
  .hindi body, [data-lang="hi"] .hi-font{font-family:'Hind',sans-serif;}
  h1,h2,h3, .display{font-family:'Fraunces',serif;}
  .mono{font-family:'IBM Plex Mono',monospace; letter-spacing:.03em;}

  /* ---------- Header ---------- */
  header{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 28px; border-bottom:1px solid var(--line);
    background:var(--paper);
    position:sticky; top:0; z-index:40;
  }
  .brand{display:flex; align-items:center; gap:12px;}
  .brand svg{width:38px;height:38px;flex:none;}
  .brand-logo-img{height:34px; width:auto; flex:none;}
  .brand-text .name{font-size:20px; font-weight:700; color:var(--fern-deep); line-height:1.1;}
  .brand-text .tag{font-size:11.5px; color:var(--soil); font-weight:600; letter-spacing:.02em;}
  .lang-toggle{display:flex; border:1.5px solid var(--fern); border-radius:999px; overflow:hidden;}
  .lang-toggle button{
    border:none; background:transparent; padding:7px 16px; font-size:13px; font-weight:600;
    cursor:pointer; color:var(--fern); font-family:'Inter',sans-serif;
  }
  .lang-toggle button.active{background:var(--fern); color:#fff;}

  /* ---------- Not-govt banner ---------- */
  .notice{
    background:var(--fern-deep); color:#f4ead0; text-align:center;
    font-size:13px; padding:9px 16px; font-weight:500; letter-spacing:.01em;
  }
  .notice b{color:var(--gold-soft);}

  /* ---------- Layout ---------- */
  main{
    max-width:820px; margin:0 auto; padding:34px 24px 80px;
  }

  .panel{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    padding:26px 26px 28px; box-shadow:var(--shadow); min-width:0;
  }
  .section-divider{
    margin:26px 0 16px; padding-top:18px; border-top:2px dashed var(--line);
    font-size:12.5px; font-weight:800; letter-spacing:.06em; color:var(--fern-deep); text-transform:uppercase;
  }
  .step:first-of-type + .section-divider, .step:first-child{margin-top:0;}
  .panel h2{margin:0 0 4px; font-size:22px; color:var(--fern-deep);}
  .panel .sub{margin:0 0 22px; font-size:13.5px; color:#6b6355;}

  .step{margin-bottom:22px;}
  .step-label{
    display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
    text-transform:uppercase; letter-spacing:.08em; color:var(--soil); margin-bottom:10px;
  }
  .step-label .n{
    width:20px;height:20px;border-radius:50%;background:var(--gold); color:#fff;
    display:flex;align-items:center;justify-content:center; font-size:11px; font-family:'IBM Plex Mono',monospace;
  }
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  @media(max-width:480px){.grid2{grid-template-columns:1fr;}}

  label{display:block; font-size:12.5px; font-weight:600; color:#4b453b; margin:10px 0 5px;}
  input[type=text], input[type=tel], input[type=date], select, textarea{
    width:100%; padding:10px 12px; border:1.5px solid var(--line); border-radius:9px;
    font-size:14px; font-family:'Inter',sans-serif; background:#fffefb; color:var(--ink);
  }
  input:focus, select:focus, textarea:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold);}
  textarea{resize:vertical; min-height:56px;}

  .photo-row{display:flex; align-items:center; gap:14px; margin-top:8px;}
  .photo-drop{
    width:76px;height:76px;border-radius:50%; border:2px dashed var(--line);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    background:#fff; flex:none; cursor:pointer; position:relative;
  }
  .photo-drop img{width:100%;height:100%;object-fit:cover;}
  .photo-drop span{font-size:22px; color:#c7bda3;}
  .file-btn{
    border:1.5px solid var(--fern); background:#fff; color:var(--fern); font-weight:600;
    font-size:13px; padding:9px 14px; border-radius:8px; cursor:pointer;
  }
  input[type=file]{display:none;}

  /* ---------- Card Preview ---------- */
  .preview-panel-wrap{min-width:0;}
  .unique-id-bar{
    background:linear-gradient(120deg, var(--wheat), #f3e6c4);
    border:1.5px solid var(--gold); border-radius:12px;
    padding:12px 18px; max-width:560px; margin:0 auto 18px;
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  }
  .unique-id-bar label{margin:0; font-size:13px; font-weight:700; color:var(--fern-deep); white-space:nowrap;}
  .unique-id-bar input{
    flex:1; min-width:140px; border:1.5px solid var(--gold); border-radius:8px;
    padding:8px 12px; font-size:14px; font-family:'IBM Plex Mono',monospace; background:#fffefa; color:var(--ink);
  }
  .unique-id-bar input:focus{outline:2px solid var(--fern); outline-offset:1px;}
  .preview-panel{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    padding:30px 30px 32px; box-shadow:var(--shadow); max-width:560px; margin:0 auto;
  }
  .flip-controls{display:flex; justify-content:center; gap:10px; margin-bottom:18px;}
  .flip-controls button{
    border:1.5px solid var(--fern); background:#fff; color:var(--fern); font-weight:700;
    font-size:13px; padding:9px 20px; border-radius:999px; cursor:pointer; letter-spacing:.03em;
  }
  .flip-controls button.active{background:var(--fern); color:#fff;}

  .stage-scroll{ overflow-x:auto; padding-bottom:2px; }
  .stage{ perspective:1800px; margin:0 auto; width:480px; flex:none; position:relative; }
  .stage-inner{ position:relative; width:100%; padding-top:63.03%; } /* locks 85.6:54 ratio in every browser */
  .card3d{
    position:absolute; inset:0; transition:transform .7s cubic-bezier(.4,.2,.2,1);
    transform-style:preserve-3d;
  }
  .card3d.flipped{transform:rotateY(180deg);}
  .face{
    position:absolute; inset:0; backface-visibility:hidden; border-radius:16px;
    overflow:hidden; box-shadow:0 18px 34px -14px rgba(18,48,36,.5); border:1px solid #d8cba0;
    display:flex; flex-direction:column;
  }
  .face.back{transform:rotateY(180deg);}

  .card-top{
    background:linear-gradient(120deg, var(--fern-deep), var(--fern) 70%);
    color:#fdf6e3; padding:8px 14px; display:flex; align-items:center; gap:9px;
  }
  .card-top svg{width:26px;height:26px;flex:none;}
  /* Card logo — placed directly, no colored box behind it. Auto-sized by
     height (width follows automatically) so any image just fits cleanly.
     To change the logo, use assets/update-logo.html (auto background
     removal + auto-sizing, no editing needed). */
  .card-top-logo-badge{flex:none; display:flex; align-items:center;}
  .card-top-logo{height:22px; width:auto; max-width:110px; display:block; object-fit:contain;}
  .card-top .t1{font-size:13.5px; font-weight:700; line-height:1.15; font-family:'Fraunces',serif;}
  .card-top .t2{font-size:9.5px; color:var(--gold-soft); font-weight:600; letter-spacing:.03em;}
  .card-top-uid{margin-left:auto; text-align:right; flex:none; max-width:34%; padding-left:6px;}
  .card-top-uid .uid-label{font-size:7px; font-weight:700; color:var(--gold-soft); letter-spacing:.1em; text-transform:uppercase;}
  .card-top-uid .uid-value{
    font-size:10px; font-weight:700; color:#fdf6e3; font-family:'IBM Plex Mono',monospace;
    line-height:1.2; word-break:break-all;
  }
  .card-body{
    background:var(--paper); padding:12px 14px 8px; display:flex; gap:12px; flex:1; position:relative;
  }
  .card-photo{
    width:72px;height:86px;border-radius:6px; border:2px solid var(--gold); object-fit:cover; background:#eee; flex:none;
    position:relative; z-index:2;
  }
  .card-info{position:relative; z-index:2;}
  .card-info .name-en{font-size:15px; font-weight:700; color:var(--fern-deep); font-family:'Fraunces',serif; line-height:1.15;}
  .card-info .name-hi{font-size:13px; color:var(--soil); font-weight:600; margin-top:1px;}
  .card-info dl{margin:6px 0 0; font-size:10.3px; line-height:1.55;}
  .card-info dl div{display:flex; gap:5px;}
  .card-info dl b{font-weight:600; color:#5b5346; min-width:58px;}
  .card-info dl span{color:var(--ink); font-weight:500;}
  .card-strip{
    background:var(--fern-deep); text-align:center; padding:9px 8px 10px;
    font-family:'IBM Plex Mono',monospace;
  }
  .card-strip .strip-label{font-size:8.5px; font-weight:700; color:var(--gold-soft); letter-spacing:.12em; text-transform:uppercase;}
  .card-strip .strip-value{font-size:26px; font-weight:800; color:#fdf6e3; letter-spacing:.03em; line-height:1.2; margin-top:1px;}
  .watermark{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    pointer-events:none; opacity:.09; transform:rotate(-22deg); z-index:1;
  }
  .watermark span{font-size:22px; font-weight:800; color:#a3391c; letter-spacing:.08em; white-space:nowrap; font-family:'Fraunces',serif;}

  .face.back .card-body{flex-direction:column; padding:10px 13px 5px; position:relative;}
  .back-title{font-size:9.5px; font-weight:700; color:var(--fern-deep); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; position:relative; z-index:2;}
  .back-addr{font-size:9.5px; color:#4b453b; margin-bottom:8px; line-height:1.3; position:relative; z-index:2; max-height:14px; overflow:hidden;}
  .mini-reg-wrap{position:relative; z-index:2; margin-bottom:8px; border:0.6px solid var(--line); border-radius:4px; overflow:hidden;}
  table.mini-reg-table{width:100%; border-collapse:collapse; table-layout:fixed;}
  table.mini-reg-table th, table.mini-reg-table td{
    border:0.5px solid #e4d9bf; font-size:8px; line-height:1.25; padding:3px 3px;
    text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink);
  }
  table.mini-reg-table th{background:#f2ead3; color:var(--fern-deep); font-weight:700; font-size:7.6px;}
  table.mini-reg-table td.sl{text-align:center; font-weight:700; color:var(--soil); background:#faf6ea;}
  .disclaimer-box{
    border:1px dashed var(--danger); background:#fbeee8; color:var(--danger);
    font-size:7px; line-height:1.3; padding:4px 6px; border-radius:5px; font-weight:600;
    position:relative; z-index:2;
  }
  .back-foot{margin-top:auto; display:flex; justify-content:space-between; align-items:flex-end; position:relative; z-index:2; padding-top:3px;}
  .sig{font-size:7px; color:#8a8272; border-top:1px solid var(--line); padding-top:1.5px; width:76px; text-align:center;}
  .emblem-mini{height:20px; width:auto; max-width:60px; opacity:.9; object-fit:contain;}

  /* ---------- Download / payment ---------- */
  .download-bar{margin-top:20px; display:flex; flex-direction:column; gap:10px; align-items:center;}
  .price-note{font-size:12.5px; color:#6b6355; text-align:center;}
  .btn-primary{
    background:var(--gold); color:#3c2a04; border:none; font-weight:700; font-size:15px;
    padding:13px 26px; border-radius:10px; cursor:pointer; width:100%; max-width:440px;
    box-shadow:0 10px 22px -10px rgba(215,155,44,.7);
  }
  .btn-primary:hover{background:var(--gold-soft);}
  .btn-primary:disabled{opacity:.55; cursor:not-allowed;}
  .btn-ghost{
    background:transparent; border:1.5px solid var(--fern); color:var(--fern); font-weight:600;
    font-size:13px; padding:9px 16px; border-radius:9px; cursor:pointer;
  }
  .preview-actions{display:flex; gap:10px; width:100%; max-width:460px; align-items:stretch;}
  .preview-actions .btn-ghost{flex:0 0 auto; padding:0 18px; font-size:14px;}
  .preview-actions .btn-primary{flex:1; max-width:none; font-size:13.5px; padding:13px 14px;}
  .paid-badge{font-size:12px; font-weight:700; color:var(--fern-deep); display:flex; gap:6px; align-items:center;}

  /* ---------- Modal ---------- */
  .modal-bg{
    position:fixed; inset:0; background:rgba(18,25,20,.55); display:none;
    align-items:center; justify-content:center; z-index:100; padding:20px;
  }
  .modal-bg.show{display:flex;}
  .modal{
    background:var(--paper); border-radius:16px; width:100%; max-width:380px; padding:26px;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.5); text-align:center;
  }
  .modal h3{margin:0 0 4px; color:var(--fern-deep);}
  .modal p.sub{font-size:13px; color:#6b6355; margin:0 0 18px;}
  .amount{font-size:32px; font-weight:800; font-family:'Fraunces',serif; color:var(--gold); margin:6px 0 18px;}
  .modal input{margin-bottom:10px;}
  .spinner{
    width:28px;height:28px;border:3px solid var(--line); border-top-color:var(--gold);
    border-radius:50%; animation:spin .8s linear infinite; margin:14px auto;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  .success-tick{font-size:44px; color:var(--fern); margin:6px 0;}
  .close-x{position:absolute; top:14px; right:16px; background:none; border:none; font-size:20px; cursor:pointer; color:#8a8272;}
  .modal{position:relative;}

  /* ---------- Register Sheet (kept off-screen: used only for the PDF, not shown on the page) ---------- */
  .register-wrap{
    position:absolute; left:-99999px; top:0; width:900px; pointer-events:none;
  }
  .register-sheet{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); position:relative; overflow:hidden;
  }
  .register-head{
    background:linear-gradient(120deg, var(--fern-deep), var(--fern) 70%); color:#fdf6e3;
    padding:14px 22px; display:flex; align-items:center; gap:10px;
  }
  .register-head svg{width:24px;height:24px;flex:none;}
  .register-head .rt1{font-family:'Fraunces',serif; font-size:17px; font-weight:700;}
  .register-head .rt2{font-size:10.5px; color:var(--gold-soft); font-weight:600;}
  .register-body{padding:18px 22px 22px; position:relative; z-index:2;}
  .register-addr{font-size:13px; color:#4b453b; margin-bottom:14px;}
  .register-addr b{color:var(--fern-deep);}
  .table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:8px;}
  table.reg-table{border-collapse:collapse; width:100%; table-layout:fixed; font-size:10px;}
  table.reg-table th{
    background:#f2ead3; color:var(--fern-deep); font-weight:700; padding:6px 3px;
    border:1px solid var(--line); text-align:center; white-space:normal; word-break:break-word;
    font-size:9.5px; line-height:1.15;
  }
  table.reg-table td{border:1px solid var(--line); padding:1px;}
  table.reg-table td input{
    border:none; width:100%; padding:6px 3px; font-size:10px; background:transparent;
    font-family:'Inter',sans-serif; color:var(--ink); border-radius:0;
  }
  table.reg-table td input:focus{outline:1.5px solid var(--gold); background:#fffef6;}
  table.reg-table td.sl{text-align:center; font-weight:700; color:var(--soil); background:#faf6ea; width:26px;}
  .register-note{font-size:9.5px; color:#8a8272; margin-top:8px;}
  .reg-wm{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    pointer-events:none; opacity:.07; transform:rotate(-18deg); z-index:1;
  }
  .reg-wm span{font-size:44px; font-weight:800; color:#a3391c; letter-spacing:.06em; white-space:nowrap; font-family:'Fraunces',serif;}

  footer{
    text-align:center; padding:26px 20px 40px; font-size:11.5px; color:#8a8272;
    border-top:1px solid var(--line); margin-top:10px;
  }
  footer b{color:var(--danger);}