/* Sahtain purchase options — water plan calculator + buy step */

.sahtain-purchase {
  --sp-purple: #5b54c8;
  --sp-purple-soft: rgba(91, 84, 200, 0.12);
  --sp-green: #1fa97a;
  --sp-line: #e6e8ef;
  --sp-muted: #8b93a7;
  --sp-text: #1a1f36;
}

.sahtain-purchase .plan-eyebrow {
  color: var(--sp-intro-eyebrow-color, var(--brand));
  font-size: var(--sp-intro-eyebrow-size, 13.44px);
  line-height: var(--sp-intro-eyebrow-lh, 1.2);
}

.sahtain-purchase .plan-intro-title {
  color: var(--sp-intro-title-color, #0b2340);
  font-size: clamp(calc(var(--sp-intro-title-size, 112px) * 0.4857142857), 6vw, var(--sp-intro-title-size, 112px));
  line-height: var(--sp-intro-title-lh, 1.06);
}

.sahtain-purchase .plan-intro p {
  color: var(--sp-intro-desc-color, var(--muted));
  font-size: clamp(calc(var(--sp-intro-desc-size, 17.92px) * 0.875), 1.15vw, var(--sp-intro-desc-size, 17.92px));
  line-height: var(--sp-intro-desc-lh, 1.9);
}

.sahtain-purchase .plan-panel .eyebrow {
  color: var(--sp-panel-eyebrow-color, var(--brand));
  font-size: var(--sp-panel-eyebrow-size, 16px);
  line-height: var(--sp-panel-eyebrow-lh, 1.2);
}

.sahtain-purchase .plan-panel-title {
  color: var(--sp-panel-title-color, #0b2340);
  font-size: clamp(calc(var(--sp-panel-title-size, 91.2px) * 0.5438596491), 5.1vw, var(--sp-panel-title-size, 91.2px));
  line-height: var(--sp-panel-title-lh, 1.08);
}

.sahtain-purchase .plan-panel .lead {
  color: var(--sp-panel-lead-color, var(--muted));
  font-size: var(--sp-panel-lead-size, 17.92px);
  line-height: var(--sp-panel-lead-lh, 1.85);
}

.sahtain-purchase .choices--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sahtain-purchase .result-card.is-empty {
  opacity: 0.45;
}

.sp-result-liters {
  margin: -6px 0 0;
  color: var(--sp-muted);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.sp-buy {
  display: grid;
  gap: 14px;
}

.sp-buy__title {
  margin: 0 0 4px;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--sp-text);
}

.sp-buy__modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sp-buy__mode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px;
  border: 1.5px solid var(--sp-line);
  border-radius: 14px;
  background: #f4f5f8;
  color: var(--sp-text);
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  transition: 0.2s;
}

.sp-buy__mode.is-active {
  background: #fff;
  border-color: var(--sp-purple);
  box-shadow: 0 0 0 1px var(--sp-purple);
}

.sp-buy__mode-label {
  font-size: 1.12rem;
  font-weight: 800;
}

.sp-buy__mode-price {
  font-size: 1.1rem;
  font-weight: 800;
}

.sp-buy__mode-save {
  color: var(--sp-green);
  font-size: 1.05rem;
  font-weight: 800;
}

.sp-buy__size-label {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--sp-text);
  margin-bottom: 8px;
}

.sp-buy__lines {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-buy__lines li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  background: #fff;
  color: var(--sp-text);
  font-size: 1.05rem;
  font-weight: 700;
}

.sp-buy__lines b {
  font-weight: 900;
  white-space: nowrap;
}

.sp-buy__once,
.sp-buy__subscribe {
  display: grid;
  gap: 14px;
}

.sp-buy__eshtarek:empty {
  display: none;
}

.sp-buy__eshtarek .esh-widget {
  max-width: none;
  width: 100%;
  margin: 0;
}

/* The section already shows «خيارات الشراء» above the mode toggle */
.sp-buy__eshtarek .esh-step-header--compact .esh-step-title {
  display: none;
}

.sp-buy__hint {
  margin: 0;
  color: var(--sp-muted);
  font-size: 1rem;
  line-height: 1.5;
}

a.sp-buy__cta {
  display: block;
  text-align: center;
  text-decoration: none;
}

.sp-buy__cta {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 15px 18px;
  background: var(--sp-purple);
  color: #fff;
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(91, 84, 200, 0.22);
  transition: 0.2s;
}

.sp-buy__cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.sp-buy__cta:disabled {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

.sp-buy__back {
  justify-self: start;
  padding-inline: 0;
}

[data-sahtain-purchase] [hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  .sahtain-purchase .choices--3,
  .sp-buy__modes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .sahtain-purchase .plan-eyebrow {
    font-size: var(--sp-intro-eyebrow-size-m, 13.44px);
    line-height: var(--sp-intro-eyebrow-lh-m, 1.2);
  }

  .sahtain-purchase .plan-intro-title {
    font-size: var(--sp-intro-title-size-m, 56.8px);
    line-height: var(--sp-intro-title-lh-m, 1.06);
  }

  .sahtain-purchase .plan-intro p {
    font-size: var(--sp-intro-desc-size-m, 15.68px);
    line-height: var(--sp-intro-desc-lh-m, 1.9);
  }

  .sahtain-purchase .plan-panel .eyebrow {
    font-size: var(--sp-panel-eyebrow-size-m, 16px);
    line-height: var(--sp-panel-eyebrow-lh-m, 1.2);
  }

  .sahtain-purchase .plan-panel-title {
    font-size: var(--sp-panel-title-size-m, 56.8px);
    line-height: var(--sp-panel-title-lh-m, 1.08);
  }

  .sahtain-purchase .plan-panel .lead {
    font-size: var(--sp-panel-lead-size-m, 17.92px);
    line-height: var(--sp-panel-lead-lh-m, 1.85);
  }
}