/* =========================================================
   TaminYar Final Responsive Fix
   ========================================================= */

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

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


/* =========================================================
   GLOBAL SECTION SPACING
   فاصله سکشن‌ها کمتر و یکدست
   ========================================================= */

main > section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

main > section.section {
  padding-top: 42px !important;
  padding-bottom: 42px !important;
}

main > .page-hero,
main > section.page-hero {
  padding-top: 42px !important;
  padding-bottom: 30px !important;
}

.section-title,
.section-head,
.section-header {
  margin-bottom: 24px !important;
}

.cta-box {
  margin-top: 28px !important;
  margin-bottom: 0 !important;
}


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

.faq {
  display: grid !important;
  gap: 12px !important;

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

  margin: 0 !important;
}

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

  margin: 0 !important;
}

.faq + .cta-box,
.ty-faq-final-cta {
  margin-top: 32px !important;
}


/* =========================================================
   SUBSCRIPTION PLANS
   Desktop safety
   ========================================================= */

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

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


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  /* -----------------------------------------
     Global spacing موبایل
     ----------------------------------------- */

  main > section.section {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  main > .page-hero,
  main > section.page-hero {
    padding-top: 26px !important;
    padding-bottom: 20px !important;
  }

  main > section + section {
    margin-top: 0 !important;
  }

  .section-title,
  .section-head,
  .section-header {
    margin-bottom: 16px !important;
  }

  .cta-box {
    margin-top: 24px !important;
  }


  /* -----------------------------------------
     Checkout container
     ----------------------------------------- */

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

    padding-top: 18px !important;
    padding-bottom: 28px !important;

    overflow: visible !important;
  }

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

    width: calc(100% - 24px) !important;
    max-width: 520px !important;
    min-width: 0 !important;

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

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

    gap: 14px !important;

    overflow: visible !important;
  }

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

    margin: 0 !important;
  }


  /* -----------------------------------------
     Checkout cards
     ----------------------------------------- */

  .checkout-card,
  .checkout-assurance {
    position: relative !important;

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

    height: auto !important;
    min-height: 0 !important;

    padding: 15px !important;

    margin: 0 !important;

    border-radius: 18px !important;

    overflow: hidden !important;
  }


  /* =====================================================
     PLAN LIST
     مهم‌ترین بخش:
     کاروسل کاملاً در موبایل خاموش می‌شود.
     ===================================================== */

  #commerce-plans.ty-plans-normalized,
  .commerce-plans.ty-plans-normalized,
  #commerce-plans,
  .commerce-plans {
    position: static !important;

    display: flex !important;
    flex-direction: column !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    gap: 12px !important;

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

    white-space: normal !important;

    scroll-snap-type: none !important;

    transform: none !important;
  }


  /* -----------------------------------------
     هر پلن
     ----------------------------------------- */

  #commerce-plans > *,
  .commerce-plans > *,
  .ty-plan-item {
    position: relative !important;

    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;

    flex: 0 0 auto !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;

    transform: none !important;
    translate: none !important;

    scroll-snap-align: none !important;

    overflow: hidden !important;
  }


  /* -----------------------------------------
     حذف ارتفاع‌های عجیب داخل کارت فعال
     ----------------------------------------- */

  .ty-plan-item [class*="body"],
  .ty-plan-item [class*="content"],
  .ty-plan-item [class*="detail"],
  .ty-plan-item [class*="feature"],
  .ty-plan-item [class*="benefit"] {
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    transform: none !important;
  }


  /* -----------------------------------------
     جلوگیری از بیرون‌زدگی متن و قیمت
     ----------------------------------------- */

  .ty-plan-item h2,
  .ty-plan-item h3,
  .ty-plan-item h4,
  .ty-plan-item p,
  .ty-plan-item span,
  .ty-plan-item strong,
  .ty-plan-item small {
    max-width: 100% !important;

    white-space: normal !important;

    overflow-wrap: break-word !important;
  }


  /* -----------------------------------------
     Button / inputs
     ----------------------------------------- */

  .checkout-card button,
  .checkout-card .btn,
  .checkout-card input,
  .checkout-card select,
  .checkout-card textarea {
    max-width: 100% !important;
    min-width: 0 !important;
  }

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

    font-size: 16px !important;
  }

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

    width: 100% !important;

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


  /* -----------------------------------------
     FAQ final CTA
     ----------------------------------------- */

  .faq + .cta-box,
  .ty-faq-final-cta {
    margin-top: 28px !important;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@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,
  .commerce-plans {
    gap: 10px !important;
  }

  main > section.section {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

}