/* ===== Single Coupon — Stable RTL Version ===== */

.coupon-single{ margin-top:24px; }

/* ===== هدر ===== */
.mc-single-head{
  display:flex; direction:rtl; align-items:center; gap:16px;
  padding:18px 0; margin-bottom:18px;
}
.mc-single-logo{
  width:78px; height:78px; /* مربع ثابت */
  border:1px solid var(--shadow-12);
  border-radius:12px; background:var(--white);
  display:grid; place-items:center; overflow:hidden;
}
.mc-store-logo{ width:100%; height:100%; object-fit:contain; }
.mc-store-logo--icon{ color:var(--muted-light); font-size:26px; }

.mc-single-titles{ flex:1; text-align:right; }
.mc-single-title{
  margin:0; font-size:clamp(18px, 2.2vw, 26px);
  font-weight:800; line-height:1.35;
}
.mc-single-meta{
  margin-top:6px; font-size:14px; color:var(--text-secondary-strong);
  display:flex; flex-wrap:wrap; gap:8px 14px;
}
.mc-single-meta i{ margin-left:6px; opacity:.7; }

/* ===== گرید ===== */
.mc-single-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 400px; /* سایدبار بزرگ‌تر */
  gap:24px;
}
@media (max-width: 960px){ .mc-single-grid{ grid-template-columns:1fr; } }

/* ===== محتوای اصلی ===== */
.mc-article{
  border:1px solid var(--shadow-08);
  border-radius:14px; padding:18px; background:var(--white);
}
.mc-article .content{
  direction:rtl; text-align:right; line-height:1.9; font-size:15.5px;
}

/* ===== سایدبار (دسکتاپ استیکی، موبایل غیر استیکی) ===== */
.mc-single-aside{ position:sticky; top:calc(var(--sticky-header-offset, 82px) + 12px); height:max-content; }
.mc-aside{
  background:var(--white); border:1px solid var(--shadow-08);
  border-radius:16px; padding:22px; display:grid; gap:16px; text-align:center;
  box-shadow:0 4px 10px var(--shadow-04);
}
.mc-aside-header h3{ margin:0; font-size:17px; font-weight:800; }
.mc-aside-header p{ font-size:14px; color:var(--text-secondary); margin:6px 0 0; }

/* ===== باکس کد و دکمه کپی ===== */
.mc-coupon-box{
  display:flex; direction:ltr; align-items:stretch;
  border:2px dashed var(--success); border-radius:14px; overflow:hidden; background:var(--success-bg);
}
.mc-coupon-box .mc-coupon-input{
  flex:1 1 auto; min-width:0;
  height:56px; box-sizing:border-box;
  font-family: "Consolas", "JetBrains Mono", "Courier New", monospace !important; font-size:20px; font-weight:800; line-height:1;
  border:0; padding:0 12px; text-align:center; background:transparent;
  direction:ltr; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mc-coupon-box .mc-copy-btn{
  display:inline-flex; align-items:center; justify-content:center;
  box-sizing:border-box; height:56px;
  min-width:110px; padding:0 14px; border:0; outline:0;
  line-height:1; font-weight:800; font-size:16px; white-space:nowrap;
  background:var(--success); color:var(--white); cursor:pointer; transition:background-color .2s ease;
}
.mc-coupon-box .mc-copy-btn:hover{ background:var(--success-hover); }
.mc-coupon-box .mc-copy-btn:active{ background:var(--success-active); }
.mc-codebox__hint{ color:var(--muted); font-size:13px; }

/* ===== CTA فروشگاه =====
   استایل پایه از style.css می‌آید؛ اینجا فقط جای‌گذاری صفحه تک است. */
.mc-use-code-single{
  margin:12px auto 0;
}

.btn-coupon-link{
  margin:12px auto 0;
}

/* ===== لایک/دیس‌لایک (نسخه صفحه تکی) ===== */
.coupon-single .mc-feedback{
  display:flex; align-items:center;
  justify-content:center;           /* ✅ وسط‌چین افقی */
  text-align:center;
  width:100%;
  gap:8px;                          /* فاصله‌ی متعادل بین آیتم‌ها */
  flex-wrap:wrap;                   /* شکستن در موبایل */
  margin-top:14px;
  color:var(--ink-soft); font-size:1rem;
}
.coupon-single .mc-fb{
  border:1px solid var(--line); background:var(--white);
  border-radius:12px; padding:6px 10px; cursor:pointer;
  font-size:20px; line-height:1;
  transition:background .15s ease,border .15s ease;
}
.coupon-single .mc-fb:hover{ background:var(--surface-soft); }
.coupon-single .mc-fb-count{ margin:0 4px; text-align:center; color:var(--muted); font-weight:600; }
.coupon-single .mc-fb-msg{ margin-inline-start:4px; font-style:normal; }
.mc-fb-box .is-active{ background:var(--ink); color:var(--white); border-color:var(--ink); }

/* ===== کوپن‌های مشابه: تمام‌عرض ===== */
.related-coupons{ grid-column:1 / -1; margin-top:28px; }
.related-title{ font-size:18px; font-weight:800; margin:0 0 12px; }
.mc-related2-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:14px;
}
.mc-related2{
  display:flex; align-items:center; gap:12px;
  background:var(--white); border:1px solid var(--shadow-08);
  border-radius:12px; padding:12px 14px; text-decoration:none; color:inherit;
  transition: box-shadow .2s ease, transform .15s ease;
}
.mc-related2:hover{ box-shadow:0 4px 10px var(--shadow-06); transform: translateY(-2px); }
.mc-related2-logo{
  width:58px; height:58px; display:grid; place-items:center;
 background:var(--white); overflow:hidden; flex-shrink:0;
}
.mc-related2-logo img{ width:auto; height:auto; max-width:90%; max-height:90%; object-fit:contain; }
.mc-related2-title{ font-weight:700; line-height:1.4; flex:1; }

/* ===================================================================== */
/* ========================  موبایل: جابه‌جایی  ======================== */
/*  هدف: «استفاده از کوپن» (aside) بالای «توضیحات» (content) بیاید      */
/* ===================================================================== */
@media (max-width: 960px){
  .mc-single-title{ font-size:19px; }
  .mc-single-grid{
    display:grid !important;
    grid-template-columns:1fr;
    grid-template-areas:
      "aside"     /* ✅ استفاده از کوپن اول */
      "content"   /* سپس توضیحات */
      "related";  /* بعدی مشابه‌ها */
    gap:18px;
  }

  /* بچه‌های main را به آیتم‌های گرید ارتقا بده */
  .mc-single-main{ display: contents !important; }

  /* نگاشت نواحی */
  .mc-longdesc, .mc-article{ grid-area: content !important; }
  .mc-single-aside{
    grid-area: aside !important;
    position: static !important;
    top: auto !important;
    height: auto !important;
  }
  .related-coupons{ grid-area: related !important; margin-top:18px; }

  /* ریزتنظیمات */
  .mc-aside{ padding:18px; }
  .mc-coupon-box .mc-coupon-input{ font-size:18px; }
  .mc-coupon-box .mc-copy-btn{ min-width:100px; font-size:15px; }
}

/* فالبک برای مرورگرهایی که display: contents ندارند */
@supports not (display: contents) {
  @media (max-width: 960px){
    .mc-single-grid{ display:flex !important; flex-direction:column !important; gap:18px; }
    .mc-single-aside{ order:1 !important; position:static !important; }
    .mc-longdesc, .mc-article{ order:2 !important; }
    .related-coupons{ order:3 !important; }
  }
}

/* Single coupon SVG icon details */
.mc-single-meta .mc-icon{width:15px;height:15px;margin-inline-end:4px;}
.mc-single-logo > .mc-store-logo--icon{
  width:46px !important;height:46px !important;padding:8px;
  border:1px solid var(--line);border-radius:12px;color:var(--muted-light);background:var(--white);box-sizing:border-box;
}


/* ===== پیام کپی صفحه تک — هماهنگ با مودال ===== */
.mc-copy-status{
  direction:rtl;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;

  /* نزدیک‌تر به کادر کد */
  margin-top:2px;
  min-height:20px;

  opacity:0;
  visibility:hidden;
  transform:translateY(-3px);

  font-size:14px;
  font-weight:600;
  color:var(--success);
  line-height:1.35;

  transition:
    opacity .28s ease,
    transform .28s ease,
    visibility 0s linear .28s;
}
.mc-copy-status.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(-1px);
  transition:
    opacity .28s ease,
    transform .28s ease,
    visibility 0s linear 0s;
}
.mc-copy-status__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:16px;
}

/* خود کد قابل کلیک است ولی شکل موس عادی می‌ماند */
.mc-coupon-input{
  cursor:default;
}