/* Pricing platform tabs + the /checkout page. Built on the site's existing
   CSS variables (--color-primary, --color-title, etc.). */

/* ===== Pricing: platform tabs ===== */
.pricing-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 40px;
  padding: 5px;
  background: var(--color-white);
  border: 1px solid #DCE5ED;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.pricing-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 26px;
  border: none;
  background: transparent;
  border-radius: 999px;
  color: #64748b;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pricing-tab:hover {
  color: var(--color-primary);
}
.pricing-tab.active {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Sits over the section's dark-to-light gradient, so it carries its own panel. */
.pricing-empty-note {
  max-width: 640px;
  margin: 0 auto 32px;
  padding: 12px 20px;
  text-align: center;
  font-size: 15px;
  color: var(--color-heading-1);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
}

/* ===== Pricing: plan cards ===== */
/* grid-auto-rows: 1fr makes every row as tall as the tallest card, so a card
   that wraps onto a row of its own still matches the others. Cards span 2 of
   4 (lg) or 8 (xl) tracks so a short last row can be centered. */
.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: 24px;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .pricing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .pricing-grid__item {
    grid-column: span 2;
  }
  .pricing-grid__item:last-child:nth-child(odd) {
    grid-column: 2 / span 2;
  }
}
@media (min-width: 1200px) {
  .pricing-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .pricing-grid__item {
    grid-column: span 2;
  }
  .pricing-grid__item:last-child:nth-child(4n + 1) {
    grid-column: 4 / span 2;
  }
  .pricing-grid__item:nth-last-child(2):nth-child(4n + 1) {
    grid-column: 3 / span 2;
  }
  .pricing-grid__item:nth-last-child(3):nth-child(4n + 1) {
    grid-column: 2 / span 2;
  }
}
.pricing-grid .pricing__card {
  height: 100%;
  border: 1px solid #DCE5ED;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}
.pricing-grid .pricing__card.active {
  border: 2px solid var(--color-primary);
}

/* ===== Pricing: comparison table ===== */
/* The column count follows the catalog, so pin the feature column and let
   plan columns share the rest (the wrapper scrolls once they run out of room). */
.rts-pricing-table-area .pricing-table {
  width: 100%;
  min-width: 0; /* set inline from the column count */
}
.rts-pricing-table-area .pricing-table th:not(:first-child) {
  width: auto;
}
.rts-pricing-table-area .pricing-table th.feature-col {
  width: 320px;
  min-width: 0;
}
.rts-pricing-table-area .pricing-table td:first-child {
  white-space: normal;
}

/* ===== Checkout page ===== */
/* Local tokens for the ported checkout styles, mapped to the site palette. */
.checkout-section,
.checkout-loading {
  --color-primary-dark: var(--color-primary-alt);
  --color-text: var(--color-body-1);
  --color-text-dark: var(--color-title);
  --color-text-light: #64748b;
  --border-color: #e5eaf4;
  --border-radius-md: 12px;
  --border-radius-xl: 20px;
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-xxl: 64px;
  --spacing-3xl: 80px;
}

/* The theme stretches every button to full width; size the inline ones to content. */
.checkout-section .coupon-toggle,
.checkout-section .coupon-apply,
.checkout-section .coupon-remove {
  width: auto;
  flex-shrink: 0;
}
.checkout-section .coupon-input { min-width: 0; }

/* The theme styles input[type=email|tel] directly; keep every field identical. */
.checkout-section input.checkout-input {
  height: auto;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.5;
  background: #f8f9fb;
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-md);
}
.checkout-section input.checkout-input:focus {
  border-color: var(--color-primary);
  background: var(--color-white);
}

.checkout-section {
  padding: var(--spacing-xxl) 0 var(--spacing-3xl);
  background-color: #f8f9fa;
  min-height: 70vh;
}

.checkout-section .container {
  max-width: 1140px;
}

.checkout-back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xxs);
  color: var(--color-primary);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  margin-bottom: var(--spacing-md);
  transition: gap 0.2s ease;
}
.checkout-back:hover { gap: var(--spacing-xs); color: var(--color-primary-dark); }

.checkout-head { margin-bottom: var(--spacing-xl); }
.checkout-badge {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--spacing-xs);
}
.checkout-badge i { margin-right: var(--spacing-xs); }
.checkout-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-xxs);
}
.checkout-subtitle { color: var(--color-text-light); font-size: 17px; margin: 0; }

/* Cards */
.checkout-card {
  background: var(--color-white);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-xl);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}
.checkout-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin: 0 0 var(--spacing-xxs);
}
.checkout-card-hint { color: var(--color-text-light); font-size: 14px; margin: 0 0 var(--spacing-md); }

/* Platform rows */
.platform-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-top: 1px solid var(--border-color);
}
.platform-row:first-of-type { border-top: none; }
.platform-info { display: flex; align-items: center; gap: var(--spacing-sm); }
.platform-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(125, 62, 214, 0.08);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.platform-name { font-weight: 600; color: var(--color-text-dark); font-size: 16px; }
.platform-unit { color: var(--color-text-light); font-size: 13px; }

/* Stepper */
.stepper { display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.step-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 2px solid var(--border-color);
  background: var(--color-white);
  color: var(--color-primary);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
.step-btn:hover:not(:disabled) { border-color: var(--color-primary); background: rgba(125, 62, 214, 0.06); }
.step-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.step-input {
  width: 60px; height: 38px;
  text-align: center;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  font-size: 16px; font-weight: 600;
  color: var(--color-text-dark);
  -moz-appearance: textfield;
}
.step-input::-webkit-outer-spin-button,
.step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step-input:focus { outline: none; border-color: var(--color-primary); }

/* Form fields */
.checkout-field { margin-bottom: var(--spacing-sm); }
.checkout-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: 6px;
}
.checkout-input {
  width: 100%;
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: #f8f9fb;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--color-text-dark);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.checkout-input::placeholder { color: #9aa4b2; }
.checkout-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-white);
}

/* Order summary (sticky on desktop) — tinted sidebar panel */
.summary-card {
  background: #faf8fc;
  border: 2px solid #ece4f3;
  border-radius: var(--border-radius-xl);
  padding: var(--spacing-lg);
  position: sticky;
  top: var(--spacing-md);
}
.summary-head { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); }
.summary-plan-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0;
}
.summary-card-title { font-size: 18px; font-weight: 700; color: var(--color-text-dark); margin: 0; }
.summary-plan { color: var(--color-text-light); font-size: 14px; margin: 2px 0 0; }

.summary-items {
  border-top: 1px solid #ece4f3;
  padding-top: var(--spacing-sm); margin-bottom: var(--spacing-xs);
}
.summary-item {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; color: var(--color-text-dark); padding: 5px 0;
}
.summary-item .qty { color: var(--color-text-light); }

/* Coupon — collapsible "Have a coupon code?" */
.coupon-wrap { margin: var(--spacing-xs) 0; }
.coupon-toggle {
  background: none; border: none; padding: 6px 0;
  color: var(--color-primary); font-weight: 600; font-size: 14px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.coupon-toggle:hover { color: var(--color-primary-dark); }
.coupon-field { position: relative; }
.coupon-inline { display: flex; gap: var(--spacing-xs); margin-top: var(--spacing-xs); }

/* Selectable dropdown of advertised coupons */
.coupon-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--color-white);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-md);
  box-shadow: 0 12px 32px rgba(31, 20, 45, 0.14);
  overflow: hidden; max-height: 260px; overflow-y: auto;
}
.coupon-dd-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-light); font-weight: 600;
  padding: 10px 12px 6px;
}
.coupon-dd-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm);
  width: 100%; text-align: left;
  padding: 10px 12px; cursor: pointer;
  background: none; border: none; border-top: 1px solid #f2eef7;
  transition: background 0.12s ease;
}
.coupon-dd-item:hover { background: rgba(125, 62, 214, 0.06); }
.coupon-dd-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.coupon-dd-code { font-weight: 700; color: var(--color-text-dark); font-size: 14px; }
.coupon-dd-code i { color: var(--color-primary); margin-right: 4px; }
.coupon-dd-desc {
  color: var(--color-text-light); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.coupon-dd-off {
  color: var(--color-primary); font-weight: 700; font-size: 13px;
  white-space: nowrap; flex-shrink: 0;
}
.coupon-input {
  flex: 1;
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: #f8f9fb;
  padding: 10px 12px;
  font-size: 14px; text-transform: uppercase;
}
.coupon-input:focus { outline: none; border-color: var(--color-primary); }
.coupon-apply {
  border: none;
  border-radius: var(--border-radius-md);
  background: rgba(125, 62, 214, 0.08);
  color: var(--color-primary);
  font-weight: 600; font-size: 14px;
  padding: 0 var(--spacing-md);
  cursor: pointer; white-space: nowrap;
  transition: all 0.15s ease;
}
.coupon-apply:hover:not(:disabled) { background: var(--color-primary); color: #fff; }
.coupon-apply:disabled { opacity: 0.5; cursor: not-allowed; }
.coupon-applied {
  display: flex; justify-content: space-between; align-items: center;
  background: #eefaf3; border: 1px solid #bde8cf;
  border-radius: var(--border-radius-md);
  padding: 10px 12px; font-size: 14px; color: #15804d;
}
.coupon-remove { border: none; background: none; color: var(--color-text-light); cursor: pointer; font-size: 13px; }

/* Totals */
.summary-totals { border-top: 1px solid #ece4f3; padding-top: var(--spacing-sm); margin-top: var(--spacing-xs); }
.total-line { display: flex; justify-content: space-between; font-size: 15px; color: var(--color-text); padding: 4px 0; }
.total-line.discount { color: #15804d; }
.total-grand {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--spacing-xs); padding-top: var(--spacing-xs);
  border-top: 1px dashed var(--border-color);
}
.total-grand .label { font-weight: 700; color: var(--color-text-dark); font-size: 17px; }
.total-grand .value { font-weight: 700; color: var(--color-primary); font-size: 26px; }

/* Pay button */
.pay-btn {
  width: 100%;
  margin-top: var(--spacing-md);
  padding: 14px;
  border: none;
  border-radius: var(--border-radius-md);
  background: var(--color-primary);
  color: #fff;
  font-weight: 700; font-size: 17px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs);
  transition: all 0.25s ease;
}
.pay-btn:hover:not(:disabled) { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(125, 62, 214, 0.3); }
.pay-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.secure-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}
.secure-item {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--color-text-light); font-size: 12px; font-weight: 500;
}
.secure-item i { color: #15804d; }

.guarantee {
  display: flex; align-items: center; gap: var(--spacing-xs);
  background: #eefaf3; border: 1px solid #cdeddb;
  border-radius: var(--border-radius-md);
  padding: 10px 12px; margin-top: var(--spacing-md);
  color: #15804d; font-size: 13px; font-weight: 500;
}
.guarantee i { font-size: 16px; }

.checkout-error {
  background: #fdecec; border: 1px solid #f5c2c2; color: #b42323;
  border-radius: var(--border-radius-md); padding: 10px 12px;
  font-size: 14px; margin-top: var(--spacing-sm);
}
.field-error { color: #b42323; font-size: 13px; margin-top: 6px; }

/* Empty / error state */
.checkout-empty { text-align: center; padding: var(--spacing-3xl) 0; }
.checkout-empty h1 { font-size: 28px; color: var(--color-text-dark); margin-bottom: var(--spacing-xs); }
.checkout-empty p { color: var(--color-text-light); margin-bottom: var(--spacing-lg); }

.checkout-loading { text-align: center; padding: var(--spacing-3xl) 0; color: var(--color-text-light); }

@media (max-width: 991px) {
  .summary-card { position: static; margin-top: var(--spacing-md); }
  .checkout-title { font-size: 30px; }
}