/* ===== پایه ===== */
*{box-sizing:border-box}
.rtl{direction:rtl;text-align:right}
:root{
  --brand:#f38b1c;
  --ink:#0f172a;
  --line:#E8EDF2;
  --muted:#7f8892;
  --input:#DFE3E8;
}

/* کارت اصلی */
.hz-wrap{
  max-width:1100px;
  margin:28px auto;
  padding:28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 2px 12px rgba(31,39,51,.03);
}

/* ===== هدر ===== */
.hz-head{
  display:grid;
  grid-template-columns:1fr auto; /* راست: تیتر / چپ: تب‌ها */
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}

/* تیتر (نصفِ حالت درشت قبلی) */
.hz-title{
  margin:0;
  text-align:right;
  font-weight:900;
  color:var(--ink);
  font-size:18px;
  letter-spacing:-.2px;
}
.hz-title em{color:var(--brand);font-style:normal}
@media (min-width:1100px){
  .hz-title{font-size:20px}
}

/* تب‌ها */
.hz-tabs{justify-self:start;display:flex;gap:12px}
.hz-tab{
  height:44px; min-width:116px; padding:0 18px;
  border-radius:12px; border:2px solid transparent;
  font-weight:700; cursor:pointer; font-size:16px;
}
.hz-tab.orange{background:var(--brand);color:#fff}
.hz-tab.gray{background:#CFD6DF;color:#19202a}
.hz-tab.is-active{box-shadow:0 0 0 3px rgba(243,139,28,.18)}
.hz-tab.orange:hover{filter:brightness(1.05)}
.hz-tab.gray:hover{filter:brightness(.98)}

/* ===== بدنه: ردیف‌های دو ستونه ===== */
.hz-grid{display:flex;flex-direction:column;gap:16px}
.hz-row{
  display:grid;
  grid-template-columns:260px 1fr;   /* چپ = 260px (دکمه/OTP) | راست = فیلد */
  gap:26px;
  align-items:center;
}

/* ستون راست (فیلدها) */
.hz-input,.hz-select{
  width:100%; height:52px; padding:12px 14px;
  background:#fff; border:1px solid var(--input);
  border-radius:12px; font-size:15px
}
.hz-input:focus,.hz-select:focus{
  outline:2px solid #3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.12)
}
.hz-input::placeholder{color:#9aa3ad}
.hz-note{font-size:12px;color:var(--muted)}

/* ستون چپ (دکمه‌ها/OTP) */
.hz-btn{
  background:var(--brand); color:#fff;
  height:52px; border-radius:12px; border:none;
  font-weight:700; cursor:pointer; width:100%;
}
.hz-btn:hover{filter:brightness(1.04)}

.hz-otp{display:flex;gap:12px;width:100%}
.hz-otp input{
  flex:1 1 0; min-width:0;
  height:52px;
  border:1px solid #CFD6DF; border-radius:12px;
  text-align:center; font-size:20px; background:#fff
}

/* نمایش/اختفا بر اساس تب */
#hz-block-ot{display:block}
#hz-block-leave{display:none}

/* ===== واکنش‌گرا ===== */
@media (max-width:980px){
  .hz-row{grid-template-columns:1fr}      /* هر ردیف تک‌ستونه */
  .hz-row .left{order:2}                  /* اول فیلد، بعد دکمه/OTP بیاد */
  .hz-row .right{order:1}
  .hz-btn{width:100%}
  .hz-otp{width:100%}
  .hz-head{grid-template-columns:1fr}     /* تب‌ها زیر تیتر */
  .hz-tabs{justify-self:end}
}