/* =====================================================
   TaminYar final site fixes
   ===================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}


/* =====================================================
   ENAMAD
   کد رسمی anchor/image دست نخورده است.
   فقط container استایل می‌شود.
   ===================================================== */

.enamad-slot {
  width: 140px !important;
  max-width: 100% !important;
  min-height: 110px;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin-top: 14px !important;
  margin-bottom: 0 !important;

  overflow: hidden;
}

.enamad-slot > a {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;

  align-items: center !important;
  justify-content: center !important;
}

.enamad-slot > a > img {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 110px !important;
  max-height: 110px !important;

  object-fit: contain;
}


/* =====================================================
   BUY / CHECKOUT
   ===================================================== */

.checkout-section {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.checkout-section .checkout-layout {
  width: calc(100% - 32px) !important;
  max-width: 1120px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  gap: 24px !important;
}

.checkout-layout > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

.checkout-card,
.checkout-assurance {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.checkout-assurance {
  grid-column: 1 / -1 !important;
}


/* plans */

.commerce-plans {
  width: 100% !important;
  max-width: 100% !important;

  display: grid !important;

  grid-template-columns:
    repeat(auto-fit, minmax(210px, 1fr)) !important;

  gap: 16px !important;
}

.commerce-plans > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}


/* checkout fields */

.checkout-card form,
.checkout-card fieldset,
.checkout-card label,
.checkout-card input,
.checkout-card select,
.checkout-card textarea {
  max-width: 100%;
}

.checkout-card input,
.checkout-card select,
.checkout-card textarea {
  width: 100%;
  box-sizing: border-box;
}

.checkout-summary {
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.checkout-submit {
  max-width: 100%;
}


/* =====================================================
   PAYMENT RESULT
   ===================================================== */

.payment-result,
.payment-result-card,
.payment-card,
.result-card,
.payment-status,
.payment-status-card {
  width: calc(100% - 32px) !important;
  max-width: 720px !important;

  margin-left: auto !important;
  margin-right: auto !important;
}


/* =====================================================
   FAQ
   ===================================================== */

.faq {
  width: 100%;
  max-width: 100%;

  display: grid;
  gap: 12px;
}

.faq-item {
  width: 100%;
  max-width: 100%;

  overflow: hidden;
}

.faq-q {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  text-align: right;
}

.faq-q > span {
  flex: 0 0 auto;
  transition: transform .25s ease;
}

.faq-a {
  display: grid !important;
  grid-template-rows: 0fr;

  overflow: hidden;

  transition:
    grid-template-rows .28s ease;
}

.faq-a > div {
  min-height: 0;
  overflow: hidden;
}

.faq-q[aria-expanded="true"] + .faq-a {
  grid-template-rows: 1fr;
}

.faq-q[aria-expanded="true"] > span {
  transform: rotate(45deg);
}


/* =====================================================
   Tablet
   ===================================================== */

@media (max-width: 900px) {

  .checkout-section .checkout-layout {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .checkout-assurance {
    grid-column: auto !important;
  }

}


/* =====================================================
   Mobile
   ===================================================== */

@media (max-width: 640px) {

  .checkout-section .checkout-layout {
    width: calc(100% - 24px) !important;
    gap: 14px !important;
  }

  .checkout-card,
  .checkout-assurance {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .commerce-plans {
    grid-template-columns: 1fr !important;
  }

  .payment-result,
  .payment-result-card,
  .payment-card,
  .result-card,
  .payment-status,
  .payment-status-card {
    width: calc(100% - 24px) !important;
  }

  .faq-q {
    gap: 10px;
    line-height: 1.9;
  }

  .site-footer .enamad-slot {
    margin-left: auto !important;
    margin-right: auto !important;
  }

}


/* =====================================================
   Very small phones
   ===================================================== */

@media (max-width: 380px) {

  .checkout-section .checkout-layout {
    width: calc(100% - 18px) !important;
  }

  .checkout-card,
  .checkout-assurance {
    padding: 13px !important;
  }

}


/* ===== TY MOBILE CHECKOUT V2 START ===== */


/* -----------------------------------------
   مشاهده همه سوالات
   ----------------------------------------- */

.faq-all-btn {
  position: relative !important;
  z-index: 5 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: fit-content !important;
  max-width: calc(100% - 32px) !important;

  margin: 26px auto 0 !important;

  padding: 12px 22px !important;

  text-align: center !important;
  white-space: nowrap;

  cursor: pointer !important;
  pointer-events: auto !important;

  text-decoration: none !important;
}

.faq-all-btn::before,
.faq-all-btn::after {
  pointer-events: none !important;
}


/* -----------------------------------------
   Checkout Desktop
   ----------------------------------------- */

.checkout-section {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

.checkout-section > .container,
.checkout-section .checkout-layout {
  width: calc(100% - 40px) !important;
  max-width: 1180px !important;

  margin-left: auto !important;
  margin-right: auto !important;
}

.checkout-layout {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  gap: 22px !important;
  align-items: start !important;
}

.checkout-layout > * {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.checkout-card,
.checkout-assurance {
  box-sizing: border-box !important;

  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.checkout-assurance {
  grid-column: 1 / -1 !important;
}


/* -----------------------------------------
   Plans
   ----------------------------------------- */

.commerce-plans {
  box-sizing: border-box !important;

  display: grid !important;

  grid-template-columns:
    repeat(auto-fit, minmax(210px, 1fr)) !important;

  width: 100% !important;
  max-width: 100% !important;

  gap: 14px !important;
}

.commerce-plans > * {
  box-sizing: border-box !important;

  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* -----------------------------------------
   Forms
   ----------------------------------------- */

.checkout-card form,
.checkout-card fieldset,
.checkout-card label,
.checkout-card input,
.checkout-card select,
.checkout-card textarea,
.checkout-summary {
  box-sizing: border-box !important;

  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.checkout-card input,
.checkout-card select,
.checkout-card textarea {
  display: block !important;
}

.checkout-submit {
  max-width: 100% !important;
}

.checkout-summary {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}


/* -----------------------------------------
   Tablet
   ----------------------------------------- */

@media (max-width: 900px) {

  .checkout-layout {
    grid-template-columns: 1fr !important;
  }

  .checkout-assurance {
    grid-column: auto !important;
  }

}


/* -----------------------------------------
   Mobile
   ----------------------------------------- */

@media (max-width: 640px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;

    overflow-x: hidden !important;
  }

  .checkout-hero {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .checkout-hero .container {
    width: calc(100% - 28px) !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }

  .checkout-section {
    padding-top: 20px !important;
    padding-bottom: 40px !important;
  }

  .checkout-section > .container,
  .checkout-section .checkout-layout {
    width: calc(100% - 24px) !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .checkout-layout {
    display: flex !important;
    flex-direction: column !important;

    gap: 14px !important;
  }

  .checkout-card,
  .checkout-assurance {
    flex: 0 0 auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    padding: 16px !important;

    margin: 0 !important;

    border-radius: 18px !important;
  }

  .checkout-heading {
    display: flex !important;
    align-items: flex-start !important;

    gap: 10px !important;
  }

  .checkout-heading > * {
    min-width: 0 !important;
  }

  .checkout-step {
    flex: 0 0 auto !important;
  }

  .commerce-plans {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;

    width: 100% !important;

    gap: 12px !important;
  }

  .commerce-plans > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .checkout-card input,
  .checkout-card select,
  .checkout-card textarea {
    width: 100% !important;

    /*
     * جلوگیری از Zoom خودکار موبایل هنگام Focus
     */
    font-size: 16px !important;
  }

  .checkout-submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;

    white-space: normal !important;
    text-align: center !important;
  }

  .checkout-summary {
    width: 100% !important;
    max-width: 100% !important;

    overflow: hidden !important;
  }

  .faq-all-btn {
    width: fit-content !important;
    max-width: calc(100% - 24px) !important;

    margin: 22px auto 0 !important;

    padding: 11px 18px !important;

    white-space: normal !important;
  }

}


/* -----------------------------------------
   Small phones
   ----------------------------------------- */

@media (max-width: 390px) {

  .checkout-section > .container,
  .checkout-section .checkout-layout {
    width: calc(100% - 18px) !important;
  }

  .checkout-card,
  .checkout-assurance {
    padding: 13px !important;
    border-radius: 16px !important;
  }

  .commerce-plans {
    gap: 10px !important;
  }

  .checkout-heading {
    gap: 8px !important;
  }

}


/* ===== TY MOBILE CHECKOUT V2 END ===== */


/* ===== TY PLAN MOBILE V3 START ===== */


/* ==================================================
   FAQ final spacing
   ================================================== */

.faq + .cta-box {
  margin-top: 34px !important;
}

.faq .faq-item:last-child {
  margin-bottom: 0 !important;
}


/* ==================================================
   Plans base safety
   ================================================== */

#commerce-plans,
.commerce-plans {
  width: 100% !important;
  max-width: 100% !important;

  min-width: 0 !important;

  box-sizing: border-box !important;
}

#commerce-plans *,
.commerce-plans * {
  box-sizing: border-box;
}


/* ==================================================
   Mobile plan selector
   ================================================== */

@media (max-width: 640px) {

  /*
   * فضای کلی کارت انتخاب پلن
   */
  .checkout-card[aria-labelledby="plans-title"] {
    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    padding: 15px !important;

    overflow: hidden !important;
  }


  /*
   * خود لیست پلن‌ها:
   * بدون scroll افقی
   * یک کارت در هر ردیف
   */
  #commerce-plans,
  .commerce-plans {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 12px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 16px 0 0 !important;
    padding: 0 !important;

    overflow-x: visible !important;
    overflow-y: visible !important;

    scroll-snap-type: none !important;

    white-space: normal !important;
  }


  /*
   * هر کارت برنزی / نقره‌ای / طلایی
   */
  #commerce-plans > *,
  .commerce-plans > * {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;
    flex: none !important;

    margin: 0 !important;

    transform: none !important;

    scroll-snap-align: none !important;
  }


  /*
   * جلوگیری از min-widthهایی که در commerce.css
   * باعث scroll افقی می‌شوند
   */
  #commerce-plans [class*="plan"],
  #commerce-plans [class*="tier"],
  #commerce-plans [class*="package"],
  #commerce-plans [class*="subscription"],
  #commerce-plans [class*="card"] {
    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }


  /*
   * اگر داخل پلن tab / level وجود داشته باشد
   */
  #commerce-plans [role="tablist"],
  #commerce-plans [class*="tabs"],
  #commerce-plans [class*="levels"],
  #commerce-plans [class*="tiers"] {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 8px !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow: visible !important;
  }


  /*
   * عنوان‌ها و قیمت نباید کارت را بزرگ‌تر کنند
   */
  #commerce-plans h2,
  #commerce-plans h3,
  #commerce-plans h4,
  #commerce-plans p,
  #commerce-plans span {
    max-width: 100% !important;

    white-space: normal !important;

    overflow-wrap: anywhere;
  }


  /*
   * دکمه‌های انتخاب
   */
  #commerce-plans button,
  #commerce-plans .btn,
  #commerce-plans label {
    max-width: 100% !important;

    min-width: 0 !important;

    white-space: normal !important;
  }


  /*
   * اگر دوره‌های ۱ / ۳ / ۶ / ۱۲ ماهه
   * به شکل گزینه باشند، دو ستونه شوند
   */
  #commerce-plans [class*="duration"],
  #commerce-plans [class*="period"],
  #commerce-plans [class*="term"] {
    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    overflow: visible !important;
  }


  /*
   * کل checkout هم نباید scroll افقی ایجاد کند
   */
  .checkout-layout,
  .checkout-section,
  .checkout-section .container {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .checkout-layout {
    overflow: visible !important;
  }


  /*
   * فاصله آخرین سؤال تا CTA
   */
  .faq + .cta-box {
    margin-top: 30px !important;
  }

}


/* موبایل خیلی کوچک */
@media (max-width: 390px) {

  .checkout-card[aria-labelledby="plans-title"] {
    padding: 13px !important;
  }

  #commerce-plans,
  .commerce-plans {
    gap: 10px !important;
  }

}


/* ===== TY PLAN MOBILE V3 END ===== */