/* Layout: one cream invitation pass on black paper. Red band on top, teal riso offset behind,
   perforated sections, a ticket stub at the bottom holding the submit button. */
:root{
  --ink:#0E0B0A; --red:#C8231E; --red-d:#8F1713; --teal:#0F3F3A; --teal-2:#1F6B62;
  --gold:#E8B520; --cream:#F2E6CF; --paper:#F7EEDB; --char:#2B2322; --tan:#D8C29A;
  --line:rgba(14,11,10,.55); --soft:rgba(14,11,10,.08);
  --f-display:"Anton","Impact",sans-serif; --f-label:"Bebas Neue","Arial Narrow",sans-serif;
  --f-serif:"Rozha One","Georgia",serif; --f-body:"Hind","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:calc(22px + env(safe-area-inset-top,0px)) calc(40px + env(safe-area-inset-bottom,0px));min-height:100vh}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.28;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='260' height='260' filter='url(%23n)'/></svg>")}
.wrap{max-width:560px;margin:0 auto}
.preview{background:var(--gold);color:var(--ink);font:600 13px/1.4 var(--f-body);padding:8px 12px;margin-bottom:14px;border:2px solid var(--ink);outline:2px solid var(--gold)}
.preview b{font-family:var(--f-label);letter-spacing:1.5px;font-weight:400;font-size:16px}

/* ---------- pass ---------- */
.pass{position:relative;background:var(--cream);border-radius:4px;box-shadow:9px 9px 0 var(--teal);
  background-image:radial-gradient(rgba(14,11,10,.07) 1px,transparent 1.4px);background-size:7px 7px}
.band{background:var(--red);color:var(--cream);display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 22px;font-family:var(--f-label);letter-spacing:3px;font-size:19px;border-radius:4px 4px 0 0;
  border-bottom:3px solid var(--ink)}
.band svg{width:15px;height:15px;flex:none}
.band span{white-space:nowrap}
.sec{padding:22px 22px}
.hero{position:relative;padding-top:26px;padding-bottom:20px}
.stamp{position:absolute;right:14px;top:-22px;width:92px;height:92px;transform:rotate(11deg);filter:drop-shadow(2px 3px 0 rgba(14,11,10,.35))}
.kicker{font-family:var(--f-label);letter-spacing:2.5px;font-size:17px;color:var(--teal);margin:0 0 4px;padding-right:96px}
h1{margin:0;font-weight:400;line-height:.86}
h1 .b2{display:block;font-family:var(--f-display);font-size:clamp(70px,22vw,104px);letter-spacing:1px;color:var(--red);
  text-shadow:4px 4px 0 var(--ink)}
h1 .wd{display:flex;align-items:baseline;gap:12px;margin-top:10px}
h1 .wali{font-family:var(--f-serif);font-size:clamp(26px,7.5vw,34px);color:var(--ink)}
h1 .diw{font-family:var(--f-serif);font-size:clamp(46px,14vw,66px);color:var(--ink);letter-spacing:0}
.tag{font-family:var(--f-serif);font-size:19px;line-height:1.3;margin:14px 0 0;max-width:30ch}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;border-block:2px solid var(--ink)}
.facts div{padding:10px 10px 10px 12px;border-left:2px dashed var(--line)}
.facts div:first-child{border-left:0;padding-left:0}
.facts dt{font-family:var(--f-label);letter-spacing:2px;font-size:15px;color:var(--red);line-height:1}
.facts dd{margin:3px 0 0;font-weight:600;font-size:14.5px;line-height:1.25}
.facts{margin-bottom:0}
dl{margin:0}

.pricebar{background:var(--teal);color:var(--cream);display:flex;gap:16px;align-items:center;padding:16px 22px}
.pricebar .amt{font-family:var(--f-display);font-size:50px;line-height:1;color:var(--gold);white-space:nowrap}
.pricebar p{margin:0;font-size:14.5px;line-height:1.35}
.pricebar p b{font-family:var(--f-label);font-weight:400;letter-spacing:2px;font-size:18px;color:var(--gold);display:block}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.steps li{display:flex;flex-direction:column;gap:6px}
.steps .n{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--cream);font-family:var(--f-display);font-size:17px;display:grid;place-items:center;line-height:1}
.steps b{font-family:var(--f-label);font-weight:400;font-size:20px;letter-spacing:1.5px;line-height:1}
.steps span{font-size:13.5px;line-height:1.3}
.nopay{margin:14px 0 0;font-size:14px;font-weight:600;border:2px solid var(--ink);padding:8px 12px;background:var(--paper)}

.perf{position:relative;height:0;border-top:2px dashed var(--line);margin:0}
.perf::before,.perf::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--ink)}
.perf::before{left:-11px}.perf::after{right:-11px}

/* ---------- form ---------- */
.legend{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-family:var(--f-label);font-size:22px;letter-spacing:3px;color:var(--ink);line-height:1}
.legend::after{content:"";flex:1;height:2px;background:var(--ink)}
.field{margin:0 0 18px}
.field>label:not(.check):not(.drop),.field>.lbl{display:block;font-family:var(--f-label);letter-spacing:2px;font-size:19px;color:var(--red);line-height:1;margin-bottom:6px}
.field .hint{display:block;font-size:13px;line-height:1.35;margin-top:5px;color:var(--char);opacity:.85}
/* input[type=text],input[type=tel],input[type=date],select{width:100%;font:500 17px/1.3 var(--f-body);color:var(--ink);background:transparent;
  border:0;border-bottom:2.5px solid var(--ink);border-radius:0;padding:9px 2px 8px;appearance:none;-webkit-appearance:none;min-height:46px} */
  .pre {
       box-shadow: 3px 2px 1px 0px #741717;
    border: 2px solid #8b1e1e;
    border-radius: 4px;

  }
input[type=text], input[type=tel], input[type=date], select {
     width: 100%;
    font: 500 17px / 1.3 var(--f-body);
    /* color: #000000; */
    background: #f0e6d2;
    border: none;
    border-radius: 4px;
    padding: 10px 14px;
    appearance: none;
    -webkit-appearance: none;
    min-height: 46px;
    box-sizing: border-box;
    /* box-shadow: 1px 1px 1px 1px #741717; */
    transition: all 0.2s ease-in-out;
}

/* Jab user input par click ya focus kare */
input[type=text]:focus, input[type=tel]:focus, input[type=date]:focus, select:focus {
    outline: none;
    background: #ebdcc0;
    box-shadow: 4px 4px 0px #6a1414; /* Stronger shadow on focus */
}
  
input::placeholder{color:rgba(14,11,10,.38)}
select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 14px) 20px,calc(100% - 8px) 20px;background-size:6px 6px;background-repeat:no-repeat;padding-right:26px}
input:focus,select:focus{outline:0;border-bottom-color:var(--red);box-shadow:0 3px 0 var(--gold)}
.pre{display:flex;align-items:flex-end;gap:0}
.pre .p{font:500 19px/1.3 var(--f-body);padding:9px 1px 8px 9px;min-height:46px;display:flex;align-items:flex-end;color:var(--char)}
.pre input{flex:1;min-width:0}
.pre:focus-within .p{border-bottom-color:var(--red)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.err{display:none;color:var(--red-d);font-weight:600;font-size:13.5px;margin-top:5px}
.field.bad .err{display:block}
.field.bad input,.field.bad select{border-bottom-color:var(--red)}
.field.bad .chips .chip span,.field.bad .drop{border-color:var(--red)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips .chip.wide{flex:1 1 210px}.chips .chip.wide span{width:100%}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:grid;place-items:center;min-width:44px;height:46px;padding:0 12px;border:2.5px solid var(--ink);font-family:var(--f-display);font-size:20px;line-height:1;background:transparent;transition:transform .08s}
.chip.wide span{font-family:var(--f-label);font-size:19px;letter-spacing:1.5px;padding:0 16px}
.chip input:checked+span{background:var(--ink);color:var(--gold);box-shadow:3px 3px 0 var(--red);transform:translate(-1px,-1px)}
.chip input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.tablehint{display:none;margin-top:10px;font-size:13.5px;line-height:1.35;background:var(--paper);border:2px solid var(--ink);padding:8px 12px}
.tablehint.show{display:block}

.drop{display:flex;gap:14px;align-items:center;border:2.5px dashed var(--ink);padding:12px;background:var(--paper);cursor:pointer;position:relative}
.drop input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.drop:focus-within{outline:3px solid var(--gold);outline-offset:2px}
.thumb{width:76px;height:96px;flex:none;background:var(--cream) center/cover no-repeat;border:2px solid var(--ink);display:grid;place-items:center;font-family:var(--f-label);font-size:14px;letter-spacing:1.5px;color:var(--teal);text-align:center;line-height:1.1}
.drop b{display:block;font-family:var(--f-label);font-weight:400;letter-spacing:2px;font-size:20px;line-height:1.05}
.drop small{display:block;font-size:13px;line-height:1.3;margin-top:3px}

.checks{display:grid;gap:12px;margin:0 0 4px}
.check{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;font-size:14.5px;line-height:1.4;cursor:pointer}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .bx{width:26px;height:26px;border:2.5px solid var(--ink);background:var(--paper);display:grid;place-items:center;margin-top:1px}
.check .bx::after{content:"";width:12px;height:7px;border-left:3.5px solid var(--cream);border-bottom:3.5px solid var(--cream);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.check input:checked+.bx{background:var(--red);border-color:var(--ink)}
.check input:checked+.bx::after{opacity:1}
.check input:focus-visible+.bx{outline:3px solid var(--gold);outline-offset:2px}
.check.bad .bx{border-color:var(--red);box-shadow:0 0 0 3px rgba(200,35,30,.25)}
.check .err{grid-column:2}
.check.bad .err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.stub{background:#134540;color:var(--cream);padding:22px;border-radius:0 0 4px 4px;position:relative}
.stub .perf{margin:0 -22px 18px;border-top-color:rgba(242,230,207,.4)}
.stub .perf::before,.stub .perf::after{background:var(--ink)}
.btn{width:100%;border:0;cursor:pointer;background:var(--red);color:var(--cream);font-family:var(--f-display);font-size:25px;letter-spacing:1.5px;
  padding:16px 18px 14px;line-height:1;box-shadow:5px 5px 0 var(--gold);border:2.5px solid var(--cream);transition:transform .08s,box-shadow .08s;min-height:58px}
.btn:hover{transform:translate(-1px,-1px);box-shadow:7px 7px 0 var(--gold)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--gold)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn[disabled]{opacity:.7;cursor:progress;transform:none}
.btn.ghost{background:transparent;color:var(--cream);box-shadow:none;font-size:20px;border-color:rgba(242,230,207,.6);padding:13px 14px 11px}
.btn.ghost:hover{box-shadow:none;background:rgba(242,230,207,.08);transform:none}
.small{font-size:12.5px;line-height:1.45;opacity:.8;margin:14px 0 0}
.formerr{display:none;margin:0 0 14px;padding:10px 12px;border:2.5px solid var(--cream);background:var(--red-d);color:var(--cream);font-weight:600;font-size:14.5px}
.formerr.show{display:block}
.formerr .btn{margin-top:10px}
.foot{max-width:560px;margin:26px auto 0;text-align:center;font-family:var(--f-label);letter-spacing:3px;font-size:16px;color:var(--tan);opacity:.85}
.foot em{display:block;font-family:var(--f-serif);font-style:normal;letter-spacing:0;font-size:15px;margin-top:4px;color:var(--gold)}

/* ---------- wizard ---------- */
.prog{padding-bottom:0}
.pg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;counter-reset:x}
.pg li{font-family:var(--f-label);letter-spacing:1.8px;font-size:16px;line-height:1;display:flex;flex-direction:column;gap:7px;color:rgba(14,11,10,.45);padding-top:2px;border-top:4px solid rgba(14,11,10,.2)}
.pg li span{font-family:var(--f-display);font-size:15px;width:26px;height:26px;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;margin-top:6px;letter-spacing:0}
.pg li.on{color:var(--ink);border-top-color:var(--red)}
.pg li.on span{background:var(--ink);color:var(--gold);border-color:var(--ink)}
.pg li.ok{color:var(--teal);border-top-color:var(--teal)}
.pg li.ok span{background:var(--teal);color:var(--cream);border-color:var(--teal)}
.formsec{padding-top:20px}
.step{display:none}.step.on{display:block}
.navrow{display:grid;grid-template-columns:auto 1fr;gap:12px}
.navrow .btn{font-size:22px;letter-spacing:1px}.navrow .btn.ghost{padding:13px 16px 11px;font-size:19px}
.navrow .btn.ghost[hidden]{display:none}.navrow:has(#back[hidden]){grid-template-columns:1fr}
.faq{padding-top:8px}
.faq details{border-top:2px solid var(--ink);padding:12px 0}
.faq details:last-child{border-bottom:2px solid var(--ink)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--f-label);letter-spacing:1.8px;font-size:21px;line-height:1.1;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-display);color:var(--red)}
.faq details[open] summary::after{content:"-"}
.faq p{margin:8px 0 0;font-size:14.5px;line-height:1.45}

/* ---------- thank-you ---------- */
#done{display:none}
.done .band{background:var(--teal)}
.big{font-family:var(--f-display);font-size:clamp(46px,14vw,50px);line-height:.95;color:var(--red);text-shadow:3px 3px 0 var(--ink);margin:0}
.refbox{display:inline-block;margin:14px 0 0;border:2.5px dashed var(--ink);padding:8px 14px;background:var(--paper)}
.refbox small{display:block;font-family:var(--f-label);letter-spacing:2px;font-size:15px;color:var(--red)}
.refbox b{font-family:var(--f-display);font-size:28px;letter-spacing:2px;font-weight:400;line-height:1.1}
.next{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.next li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.next .n{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--cream);font-family:var(--f-display);font-size:17px;display:grid;place-items:center;line-height:1}
.next b{font-family:var(--f-label);font-weight:400;font-size:21px;letter-spacing:1.5px;line-height:1}
.next span{display:block;font-size:14.5px;line-height:1.35}
.actions{display:grid;gap:12px}

@media (max-width:420px){
  .sec{padding:20px 18px}.band{padding:9px 18px;font-size:17px;letter-spacing:2px}.pricebar{padding:14px 18px}.stub{padding:20px 18px}
  .stub .perf,.perf.edge{margin-left:-18px;margin-right:-18px}
  .facts dd{font-size:13.5px}.steps span{font-size:12.5px}.row2{grid-template-columns:1fr}
  .stamp{width:78px;height:78px;right:10px;top:-20px}.kicker{padding-right:80px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}