@font-face {
  font-family: "Vazir";
  src: url("../fonts/Vazir.woff2") format("woff2"),
       url("../fonts/Vazir.woff") format("woff"),
       url("../fonts/Vazir.eot") format("eot"),
       url("../fonts/Vazir.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root{
  --blue:#d4a278;--blue-d:#ba8b5f;--bl:#ffecda;
  --teal:#ba8b5f;--gold:#e8920c;
  --txt:#0d1829;--muted:#627289;--border:#dce6f5;--bg:#f4f7ff;--w:#fff;
  --shadow:0 4px 24px rgba(20,50,120,.07);
  --shadow-lg:0 12px 40px rgba(20,50,120,.12);
  --mono:'Courier New',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--txt);font-family:'Vazir',sans-serif;min-height:100vh;}
::selection{background:var(--blue);color:#fff;}
::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-thumb{background:var(--blue);border-radius:2px;}
a{text-decoration:none;color:inherit;}

/* ── NAV ── */
#nav{
  position:sticky;top:0;z-index:100;
  height:60px;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,4vw,48px);
  background:rgba(255,255,255,.88);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 16px rgba(20,50,120,.06);
}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:700;font-size:17px;}
.logo img{width:27px;height:27px;object-fit:contain;}
.ldot{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(30,95,219,.2);animation:ldot 2s infinite;}
@keyframes ldot{0%,100%{box-shadow:0 0 0 3px rgba(30,95,219,.2);}50%{box-shadow:0 0 0 6px rgba(30,95,219,.07);}}
.logo-en{font-size:11px;color:var(--muted);}
.nav-back{font-family:var(--mono);font-size:12px;color:var(--muted);cursor:pointer;transition:color .2s;display:flex;align-items:center;gap:5px;}
.nav-back:hover{color:var(--blue);}

/* ── HERO ── */
.form-hero{
  background:linear-gradient(135deg,var(--blue) 0%,#d4a278 60%,var(--teal) 100%);
  padding:clamp(36px,6vw,64px) clamp(16px,4vw,48px);
  text-align:center;position:relative;overflow:hidden;
}
.form-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px);background-size:24px 24px;}
.form-hero::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:40px;background:var(--bg);clip-path:ellipse(55% 100% at 50% 100%);}
.fh-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:100px;padding:6px 14px;font-family:var(--mono);font-size:11px;color:#fff;margin-bottom:18px;}
.fh-badge .dot{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px #4ade80;animation:ldot 2s infinite;}
.form-hero h1{font-size:clamp(22px,4vw,38px);font-weight:900;color:#fff;margin-bottom:10px;letter-spacing:-.5px;position:relative;}
.form-hero p{font-size:15px;color:rgba(255,255,255,.75);max-width:520px;margin:0 auto;line-height:1.8;position:relative;}

/* ── WRAPPER ── */
.form-wrap{max-width:860px;margin:0 auto;padding:clamp(24px,4vw,48px) clamp(16px,3vw,28px) 60px;}

/* ── PROGRESS ── */
.form-progress{
  display:flex;align-items:center;gap:0;margin-bottom:36px;
  background:var(--w);border:1px solid var(--border);border-radius:14px;
  padding:16px 20px;box-shadow:var(--shadow);overflow-x:auto;
}
.fp-step{display:flex;align-items:center;gap:0;flex-shrink:0;}
.fp-dot{
  width:32px;height:32px;border-radius:50%;border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted);
  transition:.3s;flex-shrink:0;cursor:pointer;background:var(--w);
}
.fp-dot.done{background:var(--blue);border-color:var(--blue);color:#fff;}
.fp-dot.active{border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 4px rgba(30,95,219,.12);}
.fp-label{font-size:11px;color:var(--muted);margin:0 8px;white-space:nowrap;}
.fp-label.active{color:var(--blue);font-weight:700;}
.fp-line{width:28px;height:2px;background:var(--border);border-radius:1px;transition:.3s;}
.fp-line.done{background:var(--blue);}
@media(max-width:600px){.fp-label{display:none;}.fp-line{width:14px;}}

.bot-img{width: 50px;height: 50px;}
.bot-img-mini{width: 30px;height: 30px;}
.bot-img-mini2{width: 24px;height: 24px;}

/* ── SECTION CARD ── */
.sec-card{
  background:var(--w);border:1px solid var(--border);border-radius:18px;
  padding:clamp(20px,3vw,32px);margin-bottom:20px;
  box-shadow:var(--shadow);
  animation:fadeUp .5s ease both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.sec-card-head{display:flex;align-items:center;gap:12px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border);}
.sec-icon{width:42px;height:42px;border-radius:12px;background:var(--bl);border:1px solid rgba(30,95,219,.2);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}
.sec-card-head h2{font-size:17px;font-weight:800;color:var(--txt);}
.sec-card-head p{font-size:12.5px;color:var(--muted);margin-top:2px;}
.sec-step-num{margin-right:auto;font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--bg);padding:4px 10px;border-radius:100px;border:1px solid var(--border);}

/* ── FIELDS ── */
.fg{display:grid;gap:16px;margin-bottom:4px;}
.fg-2{grid-template-columns:1fr 1fr;}
.fg-3{grid-template-columns:1fr 1fr 1fr;}
@media(max-width:580px){.fg-2,.fg-3{grid-template-columns:1fr;}}
.fi{display:flex;flex-direction:column;gap:6px;}
.fi label{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.5px;display:flex;align-items:center;gap:5px;}
.fi label .req{color:var(--blue);font-size:13px;}
.fi label .hint{font-size:9px;color:var(--muted);background:var(--bg);padding:1px 6px;border-radius:100px;border:1px solid var(--border);font-style:normal;}
.fi input,.fi textarea,.fi select{
  background:var(--bg);border:1.5px solid var(--border);border-radius:10px;
  padding:12px 14px;font-family:'Vazir';font-size:14px;color:var(--txt);outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;width:100%;
}
.fi input:focus,.fi textarea:focus,.fi select:focus{border-color:var(--blue);background:var(--w);box-shadow:0 0 0 4px rgba(30,95,219,.08);}
.fi input.error{border-color:#e11d48;background:#fff8f9;}
.fi .err-msg{font-size:11px;color:#e11d48;display:none;}
.fi.has-error .err-msg{display:block;}
.fi.has-error input{border-color:#e11d48;}
.fi textarea{resize:vertical;min-height:80px;line-height:1.7;}
.fi select{cursor:pointer;}
/* prefix input */
.input-prefix{display:flex;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg);transition:border-color .2s,box-shadow .2s;}
.input-prefix:focus-within{border-color:var(--blue);background:var(--w);box-shadow:0 0 0 4px rgba(30,95,219,.08);}
.input-prefix .pre{padding:12px 12px;background:rgba(30,95,219,.05);border-left:1px solid var(--border);font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap;display:flex;align-items:center;}
.input-prefix input{border:none;border-radius:0;background:transparent;flex:1;padding:12px 10px;box-shadow:none !important;}
.input-prefix:focus-within{border-color:var(--blue);}

/* ── LOGO UPLOAD ── */
.upload-zone{
  border:2px dashed var(--border);border-radius:12px;padding:28px 20px;
  text-align:center;cursor:pointer;transition:.3s;background:var(--bg);position:relative;
}
.upload-zone:hover,.upload-zone.drag{border-color:var(--blue);background:var(--bl);}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;}
.upload-zone .uz-icon{font-size:32px;margin-bottom:8px;}
.upload-zone .uz-title{font-size:14px;font-weight:700;color:var(--txt);margin-bottom:4px;}
.upload-zone .uz-sub{font-size:12px;color:var(--muted);}
.upload-zone .uz-btn{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--blue);background:var(--bl);border:1px solid rgba(30,95,219,.2);padding:5px 14px;border-radius:100px;}
#logo-preview{display:none;margin-top:12px;}
#logo-preview img{max-height:80px;max-width:200px;border-radius:8px;border:1px solid var(--border);}

/* ── COLOR PICKER ── */
.colors-area{display:flex;flex-direction:column;gap:10px;}
.color-row{display:flex;align-items:center;gap:10px;}
.color-swatch{width:40px;height:40px;border-radius:10px;border:2px solid var(--border);overflow:hidden;cursor:pointer;flex-shrink:0;position:relative;}
.color-swatch input[type=color]{position:absolute;inset:-4px;width:calc(100%+8px);height:calc(100%+8px);border:none;cursor:pointer;opacity:0;}
.color-swatch .csw{width:100%;height:100%;border-radius:8px;}
.color-name{flex:1;font-family:var(--mono);font-size:12px;color:var(--muted);}
.color-hex{font-family:var(--mono);font-size:12px;color:var(--txt);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:5px 8px;width:90px;}
.add-color-btn{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:var(--blue);cursor:pointer;padding:8px 14px;border:1px dashed rgba(30,95,219,.3);border-radius:8px;transition:.2s;margin-top:4px;}
.add-color-btn:hover{background:var(--bl);}
.del-color{width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:transparent;cursor:pointer;color:var(--muted);font-size:14px;display:flex;align-items:center;justify-content:center;transition:.2s;flex-shrink:0;}
.del-color:hover{border-color:#e11d48;color:#e11d48;background:#fff8f9;}

/* ── CARD NUMBER ── */
.card-number-wrap{position:relative;}
.card-number-wrap input{letter-spacing:2px;font-family:var(--mono);font-size:15px;padding-left:46px;}
.card-ic{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:18px;pointer-events:none;}

/* ── DIVIDER ── */
.divider{display:flex;align-items:center;gap:10px;margin:8px 0;}
.divider span{font-size:12px;color:var(--muted);white-space:nowrap;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border);}

/* ── SUBMIT AREA ── */
.submit-area{
  background:linear-gradient(135deg,var(--blue),#d4a278);
  border-radius:18px;padding:clamp(24px,4vw,36px);
  text-align:center;color:#fff;margin-top:8px;
  position:relative;overflow:hidden;
}
.submit-area::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px;}
.submit-area h3{font-size:20px;font-weight:900;margin-bottom:8px;position:relative;}
.submit-area p{font-size:14px;color:rgba(255,255,255,.75);margin-bottom:24px;position:relative;}
.submit-btn{
  background:#fff;color:var(--blue);font-family:'Vazir';font-weight:800;font-size:15px;
  padding:15px 40px;border-radius:10px;border:none;cursor:pointer;
  box-shadow:0 6px 24px rgba(0,0,0,.15);transition:.3s;position:relative;
  display:inline-flex;align-items:center;gap:8px;
}
.submit-btn:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.2);}
.submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;}

/* ── SUCCESS ── */
#success-msg{
  display:none;background:var(--w);border:1px solid var(--border);
  border-radius:18px;padding:48px 32px;text-align:center;
  box-shadow:var(--shadow-lg);margin-top:20px;
}
.succ-icon{font-size:52px;margin-bottom:16px;}
#success-msg h2{font-size:24px;font-weight:900;margin-bottom:8px;color:var(--txt);}
#success-msg p{color:var(--muted);font-size:15px;line-height:1.8;}

/* ── REQUIRED NOTICE ── */
.req-note{font-size:12px;color:var(--muted);margin-bottom:20px;display:flex;align-items:center;gap:5px;}
.req-note .dot{color:var(--blue);}

/* ── TOOLTIP ── */
.tooltip{position:relative;display:inline-flex;}
.tooltip .tip{position:absolute;bottom:calc(100%+6px);right:0;background:#0d1829;color:#fff;font-size:11px;padding:5px 10px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:.2s;z-index:10;}
.tooltip:hover .tip{opacity:1;}

/* char counter */
.char-counter{font-family:var(--mono);font-size:10px;color:var(--muted);text-align:left;}

/* ── RADIO GROUP ── */
.radio-group-label{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.5px;margin-bottom:10px;}
.radio-group{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
@media(max-width:520px){.radio-group{grid-template-columns:1fr;}}
.radio-card{display:flex;align-items:center;gap:12px;border:2px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;transition:border-color .25s,background .25s,box-shadow .25s;background:var(--bg);position:relative;}
.radio-card input[type=radio]{position:absolute;opacity:0;width:0;height:0;}
.radio-card:hover{border-color:var(--blue);background:var(--w);}
.radio-card.active{border-color:var(--blue);background:var(--bl);box-shadow:0 0 0 4px rgba(30,95,219,.08);}
.rc-icon{font-size:22px;flex-shrink:0;}
.rc-body{flex:1;}
.rc-title{font-size:13px;font-weight:700;color:var(--txt);}
.rc-sub{font-size:11px;color:var(--muted);margin-top:2px;}
.rc-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;flex-shrink:0;transition:.25s;background:transparent;}
.radio-card.active .rc-check{background:var(--blue);border-color:var(--blue);}
.slide-field{overflow:hidden;transition:max-height .45s cubic-bezier(.16,1,.3,1),opacity .35s;max-height:300px;opacity:1;}
.slide-field.hidden{max-height:0 !important;opacity:0;}
.notice-box{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:16px;margin-top:4px;margin-bottom:6px;animation:fadeUp .4s ease both;}
.notice-teal{background:rgba(8,145,178,.06);border:1px solid rgba(8,145,178,.2);}
.notice-blue{background:rgba(30,95,219,.05);border:1px solid rgba(30,95,219,.18);}
.notice-gold{background:rgba(232,146,12,.06);border:1px solid rgba(232,146,12,.22);}
.notice-purple{background:rgba(124,58,237,.05);border:1px solid rgba(124,58,237,.2);}
.nb-icon{font-size:22px;flex-shrink:0;margin-top:1px;}
.nb-title{font-size:13px;font-weight:800;color:var(--txt);margin-bottom:6px;}
.nb-desc{font-size:12.5px;color:var(--muted);line-height:1.75;}
.nb-link{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--blue);background:var(--bl);border:1px solid rgba(30,95,219,.25);padding:8px 16px;border-radius:8px;margin-top:12px;transition:.25s;text-decoration:none;}
.nb-link:hover{background:var(--blue);color:#fff;}
.nb-note{margin-top:12px;font-size:12px;padding:8px 12px;border-radius:7px;background:rgba(30,95,219,.05);border:1px solid rgba(30,95,219,.15);color:var(--blue);line-height:1.6;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}