/**
 * Homepage subscription cards — "طرح A / کارت آرام".
 * Scoped to body.home so the subscription archive and every other listing keep
 * the plugin's original look. Structure it restyles (plugin markup):
 *   article.td-subs__card > span.dl-sub-ribbon? + span.td-subs__badge
 *     + div.td-subs__card-top (h*.td-subs__name, .td-subs__price-row, .td-subs__duration)
 *     + a.td-subs__btn + a.td-subs__btn--buy
 * `.td-subs__card-top { display: contents }` lifts its children into the card's
 * own flex column so `order` can put the badge under the name as a quiet
 * subtitle and pin the buttons to the bottom. assets/js/dl-subs-home.js adds
 * .dl-subs-monthly and .dl-subs-gift inside this markup.
 *
 * Two things the selectors here have to beat, hence their shape:
 * - the plugin sheet (tadris-widget/assets/css/subscriptions-widget.css), and
 * - Elementor's generated post-8459.css, which styles this widget's badge with
 *   `!important` at a 4-class specificity
 *   (`.elementor-8459 .elementor-element.elementor-element-42d3c65 .td-subs__badge`).
 * So every rule inside a card keeps `.td-subs__card` in the chain — that extra
 * class is what wins — and the colour declarations are `!important` on purpose.
 * Dropping either one puts the purple pills back.
 */

body.home .elementor-widget-td_subscriptions .td-subs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 1024px) {
  body.home .elementor-widget-td_subscriptions .td-subs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 640px) {
  body.home .elementor-widget-td_subscriptions .td-subs__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

body.home .elementor-widget-td_subscriptions .td-subs__grid .td-subs__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  box-sizing: border-box;
  padding: 26px 24px;
  background: #ffffff !important;
  border: 1px solid #ece7df !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  overflow: visible;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

body.home .elementor-widget-td_subscriptions .td-subs__grid .td-subs__card:hover {
  border-color: #d9d2c6 !important;
  box-shadow: 0 6px 20px rgba(23, 22, 28, 0.06) !important;
}

body.home .elementor-widget-td_subscriptions .td-subs__grid .td-subs__card::before,
body.home .elementor-widget-td_subscriptions .td-subs__grid .td-subs__card::after {
  display: none !important;
}

body.home .elementor-widget-td_subscriptions .td-subs__card .td-subs__card-top {
  display: contents;
}

body.home .elementor-widget-td_subscriptions .td-subs__card .td-subs__name {
  order: 1;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  color: #17161c !important;
}

/* The plugin's purple pill becomes a quiet one-line descriptor under the name. */
body.home .elementor-widget-td_subscriptions .td-subs__card .td-subs__badge {
  order: 2;
  position: static !important;
  display: block !important;
  align-self: auto !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 5px 0 0 0 !important;
  padding: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #6b6875 !important;
  text-align: right !important;
  white-space: normal !important;
  transform: none !important;
}

body.home .elementor-widget-td_subscriptions .td-subs__card .td-subs__price-row {
  order: 3;
  display: flex !important;
  align-items: baseline;
  justify-content: flex-start;
  gap: 7px;
  margin: 18px 0 0 0 !important;
  padding: 0 !important;
}

body.home .elementor-widget-td_subscriptions .td-subs__card .td-subs__price {
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px;
  color: #17161c !important;
}

body.home .elementor-widget-td_subscriptions .td-subs__card .td-subs__currency {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #6b6875 !important;
}

body.home .elementor-widget-td_subscriptions .td-subs__card .dl-subs-monthly {
  order: 4;
  margin: 4px 0 0 0;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.7;
  color: #6b6875;
}

body.home .elementor-widget-td_subscriptions .td-subs__card .dl-subs-monthly--best {
  font-weight: 600;
  color: #2f2c3a;
}

body.home .elementor-widget-td_subscriptions .td-subs__card .td-subs__duration {
  order: 5;
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  margin: 18px 0 0 0 !important;
  padding: 18px 0 0 0 !important;
  border: 0 !important;
  border-top: 1px solid #f1ece4 !important;
  border-radius: 0 !important;
  background: none !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  color: #45424f !important;
}

/* Small clock, drawn with a ring plus one hand — no image request, and no
   data-URI background that a stray CSS filter could strip. */
body.home .elementor-widget-td_subscriptions .td-subs__card .td-subs__duration-icon {
  position: relative;
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1.6px solid #8b8794 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

body.home .elementor-widget-td_subscriptions .td-subs__card .td-subs__duration-icon::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 1.6px;
  height: 4.5px;
  background: #8b8794;
  border-radius: 1px;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(38deg);
}

body.home .elementor-widget-td_subscriptions .td-subs__card .dl-subs-gift {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fcf0e9;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  color: #b4460f;
}

/* Primary action: one filled blue button, pinned to the card's bottom. */
body.home .elementor-widget-td_subscriptions .td-subs__card .td-subs__btn--buy {
  order: 7;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 46px !important;
  margin: auto 0 0 0 !important;
  padding: 8px 16px !important;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 11px !important;
  background-color: #1f5fe0 !important;
  background-image: none !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: center;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color 0.18s ease;
}

body.home .elementor-widget-td_subscriptions .td-subs__card .td-subs__btn--buy:hover,
body.home .elementor-widget-td_subscriptions .td-subs__card .td-subs__btn--buy:focus {
  background-color: #1b4fbd !important;
  color: #ffffff !important;
}

/* Secondary action: a quiet text link, not a second solid button. */
body.home .elementor-widget-td_subscriptions .td-subs__card .td-subs__btn:not(.td-subs__btn--buy) {
  order: 8;
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #1b54c9 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.8 !important;
  text-align: center !important;
  text-decoration: none !important;
}

body.home .elementor-widget-td_subscriptions .td-subs__card .td-subs__btn:not(.td-subs__btn--buy):hover,
body.home .elementor-widget-td_subscriptions .td-subs__card .td-subs__btn:not(.td-subs__btn--buy):focus {
  background-color: transparent !important;
  color: #123e96 !important;
  text-decoration: underline !important;
}

/* The recommended plan is the only card that carries the accent. */
body.home .elementor-widget-td_subscriptions .td-subs__grid .td-subs__card--recommended {
  border: 1.5px solid #1f5fe0 !important;
  box-shadow: 0 10px 30px rgba(31, 95, 224, 0.13) !important;
}

body.home .elementor-widget-td_subscriptions .td-subs__grid .td-subs__card--recommended:hover {
  border-color: #1b4fbd !important;
  box-shadow: 0 12px 34px rgba(31, 95, 224, 0.18) !important;
}

body.home .elementor-widget-td_subscriptions .td-subs__card .dl-sub-ribbon {
  position: absolute !important;
  top: -13px !important;
  right: 24px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 2;
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  max-width: calc(100% - 48px);
  height: auto !important;
  margin: 0 !important;
  padding: 5px 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background-color: #1f5fe0 !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  color: #ffffff !important;
  white-space: nowrap;
  transform: none !important;
}

body.home .elementor-widget-td_subscriptions .td-subs__card .dl-sub-ribbon::before,
body.home .elementor-widget-td_subscriptions .td-subs__card .dl-sub-ribbon::after {
  display: none !important;
}

body.home .elementor-widget-td_subscriptions .td-subs__card .dl-sub-ribbon * {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
}