/* ============================================================
 * استایل پاپ‌آپ کد تخفیف باوان
 * ------------------------------------------------------------
 * راهنما:
 * - رنگ‌های اصلی (رنگ سبز و رنگ دکمه) از طریق پیشخوان وردپرس
 *   (منوی «کد تخفیف باوان» > تنظیمات ظاهری) قابل تغییرند و
 *   به صورت خودکار در متغیرهای CSS زیر جایگزین می‌شوند.
 * - اگر می‌خواهید مستقیم از همین فایل رنگ‌ها را تغییر دهید،
 *   مقادیر :root را ویرایش کنید. اما توجه کنید در آن صورت
 *   مقدار تنظیم‌شده در پیشخوان آن را بازنویسی (override) می‌کند،
 *   پس بهتر است رنگ‌ها را از پیشخوان تغییر دهید.
 * ============================================================ */

:root {
  --bavan-bg: #0a0d0a;
  --bavan-panel: #0f130f;
  --bavan-green: #8fe000;          /* رنگ سبز اصلی (لوگو، حاشیه‌ها، کد تخفیف) */
  --bavan-button-bg: #a6ff1a;      /* رنگ پس‌زمینه دکمه */
  --bavan-button-text: #05060a;    /* رنگ متن روی دکمه */
  --bavan-text: #f2f2f2;
  --bavan-muted: #9aa79a;
  --bavan-border: rgba(143, 224, 0, .35);
}

/* جلوگیری از تداخل با استایل‌های قالب سایت */
#bavan-popup-overlay,
#bavan-popup-overlay *,
#bavan-popup-overlay *::before,
#bavan-popup-overlay *::after {
  box-sizing: border-box !important;
}

#bavan-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .86);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  padding: 16px;
  opacity: 0;
  transition: opacity .35s ease;
  font-family: 'Vazirmatn', 'IRANSans', Tahoma, sans-serif;
  direction: rtl;
}

#bavan-popup-overlay.bavan-show {
  display: flex;
  opacity: 1;
}

#bavan-popup {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(180deg, #0d110d 0%, #070907 100%);
  border: 1.5px solid var(--bavan-border);
  border-radius: 20px;
  padding: 28px 22px 24px;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(143, 224, 0, .05), 0 20px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(143, 224, 0, .08);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  overflow: hidden;
  transform: translateY(16px) scale(.97);
  transition: transform .35s ease;
}

#bavan-popup-overlay.bavan-show #bavan-popup {
  transform: translateY(0) scale(1);
}

#bavan-popup::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--bavan-green), transparent);
  border-radius: 20px 20px 0 0;
}

.bavan-close-btn {
  position: absolute;
  top: 12px;
  left: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--bavan-border);
  background: rgba(255, 255, 255, .03);
  color: var(--bavan-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
}

.bavan-close-btn:hover {
  background: var(--bavan-green);
  color: #05060a;
  border-color: var(--bavan-green);
}

.bavan-logo {
  width: 78px;
  height: 78px;
  object-fit: contain;
  margin: 4px auto 14px;
  display: block;
  filter: drop-shadow(0 0 10px rgba(143, 224, 0, .25));
}

.bavan-title {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
}

.bavan-title span {
  color: var(--bavan-green);
}

.bavan-desc {
  color: var(--bavan-muted);
  font-size: 13.5px;
  line-height: 1.9;
  margin: 0 0 20px;
}

.bavan-input-wrap {
  position: relative;
  margin-bottom: 14px;
}

#bavan-phone {
  width: 100% !important;
  max-width: 100% !important;
  background: #0a0d0a;
  border: 1.5px solid rgba(255, 255, 255, .18);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  padding: 13px 16px;
  border-radius: 12px;
  outline: none;
  direction: ltr;
  text-align: center;
  letter-spacing: 1px;
  transition: border-color .2s, box-shadow .2s;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  display: block;
  height: auto;
}

#bavan-phone::placeholder {
  color: #66716a;
  letter-spacing: normal;
}

#bavan-phone:focus {
  border-color: var(--bavan-green);
  box-shadow: 0 0 0 3px rgba(143, 224, 0, .12);
}

#bavan-submit {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--bavan-button-text);
  background: var(--bavan-button-bg);
  cursor: pointer;
  transition: filter .2s, transform .1s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#bavan-submit:hover {
  filter: brightness(1.08);
}

#bavan-submit:active {
  transform: scale(.98);
}

#bavan-submit:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.bavan-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(5, 6, 10, .35);
  border-top-color: var(--bavan-button-text);
  border-radius: 50%;
  animation: bavan-spin .7s linear infinite;
  display: none;
}

@keyframes bavan-spin {
  to { transform: rotate(360deg); }
}

#bavan-error {
  color: #ff6b6b;
  font-size: 13px;
  margin-top: 10px;
  display: none;
}

#bavan-result {
  display: none;
  margin-top: 6px;
}

#bavan-result .bavan-result-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(143, 224, 0, .12);
  border: 1px solid var(--bavan-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: var(--bavan-green);
  font-size: 22px;
}

#bavan-result p {
  color: var(--bavan-muted);
  font-size: 13.5px;
  margin: 0 0 12px;
}

#bavan-code-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #0a0d0a;
  border: 1.5px dashed var(--bavan-green);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 6px;
}

#bavan-code {
  color: var(--bavan-green);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 2px;
  direction: ltr;
}

#bavan-copy-btn {
  border: 1px solid var(--bavan-border);
  background: transparent;
  color: var(--bavan-green);
  font-family: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}

#bavan-copy-btn:hover {
  background: rgba(143, 224, 0, .1);
}

.bavan-fine-print {
  color: #5c665c;
  font-size: 11px;
  margin-top: 14px;
  line-height: 1.7;
}

@media (max-width: 420px) {
  #bavan-popup {
    max-width: 100%;
    padding: 24px 16px 20px;
    border-radius: 16px;
  }

  .bavan-logo {
    width: 64px;
    height: 64px;
  }

  .bavan-title {
    font-size: 18px;
  }
}