/* =====================================================
   سیستم ارسال و رهگیری (Woodmart Friendly)
   Prefix: serh-
   هدف: همخونی با تایپوگرافی و رنگ‌های Woodmart
===================================================== */

/* 1) متغیرهای پایه (fallback) */
:root{
  --serh-accent: #111;                 /* رنگ اصلی */
  --serh-accent-contrast: #fff;        /* رنگ متن روی دکمه */
  --serh-border: rgba(0,0,0,.12);
  --serh-muted: rgba(0,0,0,.62);
  --serh-bg: #fff;
  --serh-radius: 12px;
  --serh-radius-lg: 16px;
  --serh-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* 2) اگر Woodmart متغیر داشت، از آن استفاده کن (بدون شکستن) */
/* اینها در نسخه‌های مختلف ممکن است متفاوت باشند؛ ما چند حالت رایج را پوشش می‌دهیم */
body{
  --serh-accent: var(--wd-primary-color, var(--primary-color, #111));
  --serh-accent-contrast: var(--wd-primary-color-contrast, #fff);
  --serh-border: var(--wd-brd-color, rgba(0,0,0,.12));
  --serh-bg: var(--wd-body-bg, #fff);
}

/* Box sizing */
.serh-wrap, .serh-wrap *{ box-sizing: border-box; }

/* Wrapper */
.serh-wrap{
  max-width: 680px;
  margin: 0 auto;
  direction: rtl;
  color: inherit;
  font-size: inherit; /* از قالب تبعیت */
}

/* Head */
.serh-head{
  font-size: 1.3em;  /* نسبت به فونت قالب */
  font-weight: 700;
  text-align: center;
  margin: 0 0 16px 0;
}

/* Form */
.serh-form{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:end;
  margin-bottom:14px;
}

.serh-label{
  width:100%;
  font-weight:600;
}

.serh-input{
  flex:1;
  min-width:190px;
  padding: 10px 12px;
  border-radius: var(--serh-radius);
  border: 1px solid var(--serh-border);
  background: var(--serh-bg);
  transition: all .18s ease;
  font-size: 14px;
}

.serh-input:focus{
  outline: 2px solid rgba(0,0,0,.12);
  outline-offset: 2px;
  border-color: rgba(0,0,0,.25);
}

/* Buttons */
.serh-btn, .serh-btn:visited{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: var(--serh-radius);
  border: none;
  cursor:pointer;
  font-weight: 600;
  text-decoration:none !important;
  line-height: 1.2;
  transition: all .18s ease;
  white-space: nowrap;
}

/* Default button = Woodmart primary */
.serh-btn{
  background: var(--serh-accent);
  color: var(--serh-accent-contrast);
}

.serh-btn:hover{ opacity:.95; transform: translateY(-1px); }
.serh-btn:active{ transform: translateY(0); }
.serh-btn:focus{ outline:2px solid rgba(0,0,0,.18); outline-offset:2px; }

/* Ghost buttons */
.serh-btn.ghost{
  background: transparent;
  color: inherit;
  border: 1px solid var(--serh-border);
}
.serh-btn.ghost:hover{ background: rgba(0,0,0,.04); }

/* Card */
.serh-card{
  background: var(--serh-bg);
  border: 1px solid var(--serh-border);
  border-radius: var(--serh-radius-lg);
  padding: 16px;
  margin-top: 12px;
}

/* Error box */
.serh-error{
  border-color: rgba(200,0,0,.25);
  background: rgba(255,0,0,.05);
}

/* Rows */
.serh-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding: 7px 0;
  flex-wrap:wrap;
}

.serh-k{ color: var(--serh-muted); }
.serh-v{ font-weight: 700; }
.serh-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: .4px;
}

.serh-divider{
  height:1px;
  background: rgba(0,0,0,.08);
  margin: 14px 0;
}

.serh-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.serh-note{
  margin-top:8px;
  font-size: 0.92em;
  color: rgba(0,0,0,.55);
}

/* Badges */
.serh-badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

/* ===============================
   Style 1: Woodmart native (تخت و همخوان)
   - کمترین جلوه
================================= */
.serh-wrap.style1 .serh-badge{
  background: rgba(0,0,0,.04);
  border: 1px solid var(--serh-border);
  color: inherit;
}

.serh-wrap.style1 .serh-card{
  box-shadow: none;
}

/* ===============================
   Style 2: Woodmart premium (کمی مدرن‌تر)
   - سایه ملایم و فرم جمع‌وجورتر
================================= */
.serh-wrap.style2 .serh-form{
  padding: 12px;
  border-radius: var(--serh-radius-lg);
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
}

.serh-wrap.style2 .serh-card{
  box-shadow: var(--serh-shadow);
}

.serh-wrap.style2 .serh-badge{
  background: color-mix(in srgb, var(--serh-accent) 92%, #000 8%);
  color: var(--serh-accent-contrast);
  border: none;
}

/* Toast */
.serh-toast{
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 99999;
  background: rgba(0,0,0,.92);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--serh-radius);
  font-size: 14px;
  opacity: 0;
  transform: translateY(16px);
  transition: all .25s ease;
}
.serh-toast.show{ opacity:1; transform: translateY(0); }

/* Responsive */
@media (max-width: 480px){
  .serh-row{ flex-direction: column; align-items: flex-start; }
  .serh-form{ flex-direction: column; align-items: stretch; }
  .serh-btn{ width: 100%; }
  .serh-toast{ right: 12px; left: 12px; bottom: 18px; text-align: center; }
}