@font-face{
  font-family:"STCFont";
  src:url("fonts/YekanBakh-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"STCFont";
  src:url("fonts/YekanBakh-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --stc-font:"STCFont", Tahoma, Arial, sans-serif;
  --stc-border:#e5e7eb;
  --stc-text:#0f172a;
  --stc-muted:#64748b;
  --stc-shadow:0 18px 60px rgba(2,6,23,.10);
}
.stcx-wrap, .stcx-wrap *{
  font-family:var(--stc-font) !important;
  box-sizing:border-box;
}

/* ===== Modal: NO black background, compact width, slow open ===== */
.stcx-modal{position:fixed;inset:0;z-index:999999;display:block}
.stcx-modal-backdrop{
  position:absolute;inset:0;
  background:transparent; /* ✅ remove dark overlay */
}

.stcx-modal-dialog{
  position:relative;
  width:min(640px,92vw);  /* ✅ less wide */
  max-height:86vh;
  overflow:auto;
  margin:7vh auto;
  background:#fff;
  border-radius:18px;
  box-shadow:0 25px 80px rgba(0,0,0,.22);
  padding:18px 18px 16px;
  transform:translateY(18px) scale(.98);
  opacity:0;
  transition:transform .28s ease, opacity .28s ease;
}

.stcx-modal.is-open .stcx-modal-dialog{
  transform:translateY(0) scale(1);
  opacity:1;
  font-family: 'STCFont';
}

.stcx-modal-close{
  position:absolute;
  left:14px;
  top:12px;
  border:0;
  background:#f3f4f6;
  border-radius:12px;
  width:40px;
  height:40px;
  font-size:22px;
  cursor:pointer;
  line-height:1;
}

body.stcx-modal-open{overflow:hidden}

/* ===== Result card ===== */
.stcx-result-card{padding:4px 2px}

/* ===== Animated circle (ring draw + icon pop) ===== */
.stcx-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin:6px 0 12px;
}

.stcx-circle{
  width:96px;height:96px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:6px solid currentColor;
  padding:6px;             /* ✅ prevent cropping */
  box-sizing:border-box;
  overflow:visible;        /* ✅ prevent cropping */
}

.stcx-circle svg{
  width:54px;height:54px;
  stroke:currentColor;
  transform:scale(.85);
  opacity:0;
}

.stcx-ok{color:#16a34a}
.stcx-bad{color:#ef4444}

/* ring animation */
.stcx-anim{
  animation: stcxRing .55s ease forwards;
}
@keyframes stcxRing{
  0%{transform:scale(.9); filter:blur(.2px)}
  60%{transform:scale(1.05)}
  100%{transform:scale(1)}
}

/* icon pop */
.stcx-anim svg{
  animation: stcxIcon .45s ease .20s forwards;
}
@keyframes stcxIcon{
  0%{opacity:0; transform:scale(.7)}
  80%{opacity:1; transform:scale(1.08)}
  100%{opacity:1; transform:scale(1)}
}

.stcx-state-text{font-weight:900}

/* ===== compact info grid ===== */
.stcx-grid{
  border:1px solid #e5e7eb;
  border-radius:16px;
  overflow:hidden;
}
.stcx-row{
  display:flex;
  gap:18px;
  justify-content:space-between;
  padding:12px 14px;       /* ✅ tighter */
  border-top:1px dashed #e5e7eb;
}
.stcx-row:first-child{border-top:0}
.stcx-k{color:#6b7280;font-weight:800}
.stcx-v{color:#111827;font-weight:900}

/* ===== download button ===== */
.stcx-dl{
  display:block;
  margin-top:12px;
  text-decoration:none;
  text-align:center;
  background:#16a34a;
  color:#fff;
  padding:14px;
  border-radius:14px;
  font-weight:900;
}

/* ✅ Fix form UI on verify page (input + button) */
.stcx-wrap{
  direction: rtl;
  text-align: center;
}

.stcx-card{
  width: min(760px, 92vw);
  margin: 28px auto 0;
  padding: 26px 22px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
}

.stcx-card-h{
  font-size: 22px;
  font-weight: 900;
  color: #111827;
  margin-bottom: 6px;
}

.stcx-form{
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-direction: row-reverse; /* input right, button left */
  margin-top: 14px;
}

#stcx_code{
  width: min(520px, 72vw);
  height: 52px;
  padding: 0 16px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  outline: none;
  font-size: 16px;
  font-weight: 700;
  direction: ltr;           /* کد انگلیسی/عدد درست تایپ شود */
  text-align: right;        /* داخل باکس از راست دیده شود */
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  transition: .2s ease;
}

#stcx_code:focus{
  border-color: #60a5fa;
  box-shadow: 0 12px 38px rgba(59,130,246,.18);
}

#stcx_btn{
  height: 52px;
  min-width: 120px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: #111827;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}

#stcx_btn:hover{ transform: translateY(-1px); }
#stcx_btn:active{ transform: translateY(0); opacity: .9; }
#stcx_btn:disabled{ opacity: .65; cursor: not-allowed; transform: none; }

.stcx-error{
  width: min(640px, 92vw);
  margin: 14px auto 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #fecaca;
  background: #fff1f2;
  color: #b91c1c;
  font-weight: 900;
}

/* ===============================
   FORCE FONT ON VERIFY + MODAL
   =============================== */

/* کل صفحه استعلام */
.page-id-61,
.page-id-61 * {
  font-family: "STCFont", Tahoma, Arial, sans-serif !important;
}

/* خود شورت‌کد */
.page-id-61 .stcx-wrap,
.page-id-61 .stcx-wrap * {
  font-family: "STCFont", Tahoma, Arial, sans-serif !important;
}

/* پاپ‌آپ و تمام محتویاتش */
.page-id-61 .stcx-modal,
.page-id-61 .stcx-modal * {
  font-family: "STCFont", Tahoma, Arial, sans-serif !important;
}

/* متن‌های داخل نتیجه */
.page-id-61 .stcx-row,
.page-id-61 .stcx-k,
.page-id-61 .stcx-v,
.page-id-61 .stcx-state-text,
.page-id-61 .stcx-dl {
  font-family: "STCFont", Tahoma, Arial, sans-serif !important;
  font-weight: 700;
}

/* عنوان‌ها بولد واقعی */
.page-id-61 h1,
.page-id-61 h2,
.page-id-61 h3,
.page-id-61 .stcx-card-h {
  font-family: "STCFont", Tahoma, Arial, sans-serif !important;
  font-weight: 900;
}

html, body{
  overflow-x: hidden !important;
}

@media (max-width: 640px){
  .entry-content,
  .wp-block-post-content,
  .wp-block-post-content.is-layout-constrained,
  .wp-site-blocks,
  main,
  .site,
  .content-area,
  .site-main,
  .container,
  .content,
  .row{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  .stcx-wrap{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;  
  }

  .stcx-card{
    width: calc(100% - 32px) !important;
    max-width: 520px !important;
    margin: 18px auto 0 !important;      
    left: auto !important;
    right: auto !important;
    transform: none !important;          
    box-sizing: border-box !important;
  }
}

/* ===============================
   MOBILE FIX – VERIFY FORM
   =============================== */
@media (max-width: 640px){

  .stcx-form{
    flex-direction: column !important;   /* عمودی */
    gap: 12px;
  }

  #stcx_code{
    width: 100% !important;
    height: 52px;
    text-align: center;   /* وسط برای موبایل قشنگ‌تره */
    direction: ltr;
  }

  #stcx_btn{
    width: 100% !important;
    height: 52px;
    font-size: 15px;
  }

  .stcx-card{
    padding: 22px 16px;
  }
}

/* ===============================
   FIX: موبایل راست/چپ کج نشه + دقیق وسط
================================ */

/* 1) جلوِ overflow و اسکرول افقی رو بگیر */
html, body{
  overflow-x: hidden !important;
}

/* 2) کانتینرهای قالب که padding یکطرفه میدن رو خنثی کن */
@media (max-width: 640px){
  .entry-content,
  .wp-block-post-content,
  .wp-block-post-content.is-layout-constrained,
  .wp-site-blocks,
  main,
  .site,
  .content-area,
  .site-main,
  .container,
  .content,
  .row{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  /* 3) خود wrapper رو فول و وسط کن */
  .stcx-wrap{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;  /* ✅ دقیقا وسط */
  }

  /* 4) کارت رو با margin auto وسط کن (بدون left/transform که چپه نشه) */
  .stcx-card{
    width: calc(100% - 32px) !important;
    max-width: 520px !important;
    margin: 18px auto 0 !important;      /* ✅ وسط واقعی */
    left: auto !important;
    right: auto !important;
    transform: none !important;          /* ✅ علت چپه شدن همین بود */
    box-sizing: border-box !important;
  }
}

.stcx-empty{
  padding:14px;
  color:#64748b;
  font-weight:800;
  text-align:center;
}
.stcx-dl:hover{
  text-decoration:none;
  opacity:.96;
}