/*
 * Pricing, FAQ hub and legal pages. Markup follows GoSaaS pricing / faqs / term-condition views;
 * these rules only adapt the template to MyCaly data (3 billing periods, plan limits, RTL).
 * Logical properties for RTL; no tinted panels (accent only on buttons, checks, the featured card).
 */

/* ---------- Pricing: heading ---------- */
.mc-pricing-head { max-width: 900px; margin-inline: auto; }
.mc-pricing-head .mc-answer-box, .mc-pricing-lead { max-width: 760px; }
.mc-pricing-head .cs_list.cs_style_2 li { text-wrap: wrap; }

/* ---------- Pricing: period switch (GoSaaS cs_pricing_control, 2 or 3 labels) ---------- */
.cs_pricing_control.mc-billing-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 0;
  margin: 0 auto 60px;
  padding: 36px 0 0 !important;
  border: 0;
  border-radius: 0;
  background: none;
}
.cs_pricing_control.mc-billing-toggle .mc-period-btn {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 2px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--body-color);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6em;
  transition: color .3s ease;
}
.cs_pricing_control.mc-billing-toggle .mc-period-btn:hover,
.cs_pricing_control.mc-billing-toggle .mc-period-btn[aria-selected="true"] { background: none; color: var(--heading-color); }
.cs_pricing_control.mc-billing-toggle .mc-period-btn[aria-selected="true"] { font-weight: 600; }
.cs_pricing_control.mc-billing-toggle .mc-period-btn:focus-visible { outline: 2px solid var(--heading-color); outline-offset: 3px; }
.mc-period-note { font-size: 13px; font-weight: 500; color: var(--gray2-color, #9a9aa2); }

/* Every knob points at the selected label: switches before it sit at the end, switches after it at the start. */
.cs_pricing_control.mc-billing-toggle .cs_switch { flex: none; margin: 0 15px; cursor: default; }
.cs_pricing_control.mc-billing-toggle .cs_switch::before { left: auto; inset-inline-start: 30px; }
.cs_pricing_control.mc-billing-toggle .mc-period-btn[aria-selected="true"] ~ .cs_switch::before { inset-inline-start: 5px; }

.cs_pricing_control.mc-billing-toggle .cs_offer_info {
  top: auto;
  bottom: 62%;
  left: auto;
  inset-inline-start: 62%;
  transform: none;
  align-items: flex-start;
  gap: 2px;
  font-size: 15px;
  font-weight: 600;
  pointer-events: none;
  animation: mc-offer-nudge 3s linear infinite;
}
.cs_pricing_control.mc-billing-toggle .cs_offer_info span { margin: 0; color: var(--mc-green-700, #0f9f6b); }
[dir="rtl"] .cs_pricing_control.mc-billing-toggle .cs_offer_info svg { transform: scaleX(-1); }
@keyframes mc-offer-nudge { 50% { transform: translate(4px, -2px) rotate(-2deg); } }
@media (max-width: 575px) {
  .cs_pricing_control.mc-billing-toggle { padding-top: 0 !important; margin-bottom: 40px; }
  .cs_pricing_control.mc-billing-toggle .cs_switch { margin: 0 10px; width: 52px; }
  .cs_pricing_control.mc-billing-toggle .cs_switch::before { inset-inline-start: 22px; }
  .cs_pricing_control.mc-billing-toggle { flex-wrap: nowrap; }
  .cs_pricing_control.mc-billing-toggle .mc-period-btn { flex-direction: column; align-items: center; gap: 0; }
  .cs_pricing_control.mc-billing-toggle .cs_offer_info { position: static !important; display: block !important; animation: none; font-size: 12px; line-height: 1.3; }
  .mc-period-note { font-size: 12px; line-height: 1.3; }
  .cs_pricing_control.mc-billing-toggle .cs_offer_info svg { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cs_pricing_control.mc-billing-toggle .cs_offer_info { animation: none; } }

/* ---------- Pricing: plan cards (GoSaaS cs_pricing_table cs_style_1) ---------- */
.cs_pricing_table_wrapper { align-items: stretch; }
.cs_pricing_table_wrapper.mc-plans-1 { grid-template-columns: minmax(0, 460px); justify-content: center; }
.cs_pricing_table_wrapper.mc-plans-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; margin-inline: auto; }
.cs_pricing_table_wrapper.mc-plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs_pricing_table_wrapper.mc-plans-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1199px) { .cs_pricing_table_wrapper.mc-plans-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) {
  .cs_pricing_table_wrapper.mc-plans-2, .cs_pricing_table_wrapper.mc-plans-3, .cs_pricing_table_wrapper.mc-plans-4 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
    margin-inline: auto;
  }
}

.cs_pricing_table.cs_style_1 { border: 1px solid var(--mc-line, #ececf0); }
.cs_pricing_table.cs_style_1.is-featured { border-color: var(--purple-color); }
.cs_pricing_table.cs_style_1 .mc-plan-amount { line-height: 1.1; overflow-wrap: anywhere; }
.cs_pricing_table.cs_style_1 .cs_pricing_head_subtitle { color: var(--body-color); }
.cs_pricing_table.cs_style_1 .mc-plan-trial { display: inline-flex; align-items: center; gap: 6px; color: var(--heading-color); }
.cs_pricing_table.cs_style_1 .mc-plan-trial i { color: var(--purple-color); }
.cs_pricing_table.cs_style_1 .cs_pricing_btn { display: block; }

.cs_pricing_table.cs_style_1 .mc-plan-limits-title { padding-top: 22px; border-top: 1px solid var(--mc-line, #ececf0); letter-spacing: .02em; }
.cs_pricing_table.cs_style_1 .cs_pricing_feature_list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-left: 0;
  padding-inline-start: 28px;
  font-size: 15px;
}
.cs_pricing_table.cs_style_1 .cs_pricing_feature_list li i { top: 5px; left: auto; inset-inline-start: 0; font-size: 16px; }
.cs_pricing_table.cs_style_1 .cs_pricing_feature_list li .mc-plan-value { flex: none; max-width: 55%; font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.cs_pricing_table.cs_style_1 .cs_pricing_feature_list li.mc-off .mc-plan-value { font-weight: 500; }

/* Featured plan: filled accent card (GoSaaS "Standard" card, cs_type_3 active). */
.cs_pricing_table.cs_style_1.is-featured .cs_pricing_head_subtitle,
.cs_pricing_table.cs_style_1.is-featured .cs_pricing_feature_list i,
.cs_pricing_table.cs_style_1.is-featured .mc-plan-trial,
.cs_pricing_table.cs_style_1.is-featured .mc-plan-trial i { color: #fff; }
.cs_pricing_table.cs_style_1.is-featured .cs_pricing_feature_list li.mc-off { color: rgba(255, 255, 255, .7); }
.cs_pricing_table.cs_style_1.is-featured .mc-plan-limits-title { border-color: rgba(255, 255, 255, .3); }
.cs_pricing_table.cs_style_1.is-featured .cs_pricing_btn { border-color: #fff; }
.cs_pricing_table.cs_style_1.is-featured .cs_pricing_btn:hover { background-color: var(--heading-color); border-color: var(--heading-color); color: #fff; }
.cs_pricing_table.cs_style_1 .cs_pricing_badge {
  min-width: 230px;
  padding: 3px 60px;
  background-color: var(--heading-color);
  text-align: center;
  top: 26px;
  right: -64px;
}
[dir="rtl"] .cs_pricing_table.cs_style_1 .cs_pricing_badge { right: auto; left: -64px; transform: rotate(-45deg); }
.mc-plan-empty { max-width: 560px; }

/* ---------- Pricing: comparison table ---------- */
.mc-compare-wrap { border: 0; box-shadow: 0 0 20px 5px rgba(216, 216, 216, .25); }
.mc-compare-table thead th { background: #fff; font-weight: 500; }
.mc-compare-table th small.mc-compare-price { display: block; margin-top: 4px; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--body-color); }
.mc-compare-table tbody th { font-weight: 500; }
.mc-compare-table tbody tr:nth-child(odd) { background: #FBFBFC; }
.mc-compare-table tbody tr:last-child th, .mc-compare-table tbody tr:last-child td { border-bottom: 0; }
.mc-compare-table .mc-icon { vertical-align: middle; }

/* ---------- Pricing + FAQ hub: GoSaaS FAQ section ---------- */
.mc-more-link { display: inline-flex; align-items: center; gap: 8px; color: var(--heading-color); }
.mc-more-link:hover { color: var(--mc-green-700, #0f9f6b); }
.cs_accordian .cs_accordian_head { line-height: 1.4; }

/* ---------- FAQ hub ---------- */
.mc-faqs-head { max-width: 900px; margin-inline: auto; }
.mc-faqs-head .mc-answer-box { max-width: 820px; }
.mc-faq-cats ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mc-faq-cats a {
  display: inline-block;
  padding: 9px 20px;
  border: 1px solid var(--mc-line, #e4e4ea);
  border-radius: 50px;
  color: var(--heading-color);
  font-size: 15px;
  font-weight: 500;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}
.mc-faq-cats a:hover, .mc-faq-cats a:focus-visible { border-color: var(--heading-color); background: var(--heading-color); color: #fff; }
.mc-faq-group { scroll-margin-top: 110px; }
.mc-faq-group + .mc-faq-group { margin-top: clamp(56px, 7vw, 90px); }
.mc-faq-group-head { display: flex; align-items: center; gap: 14px; }
.mc-faq-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--mc-surface, #F7F7F9); color: var(--heading-color); }
.mc-faq-count { margin-inline-start: auto; font-size: 14px; font-weight: 500; color: var(--body-color); white-space: nowrap; }

/* GoSaaS support strip (cs_support_content_wrapper) with RTL + two actions */
.cs_support_content_wrapper .cs_support_text { padding-left: 0; padding-inline-start: 132px; min-height: 52px; }
.cs_support_content_wrapper .cs_support_text img { left: auto; inset-inline-start: 0; top: 4px; }
.cs_support_content_wrapper .mc-support-actions .cs_btn.cs_style_1 { margin: 0; }
@media (max-width: 575px) {
  .cs_support_content_wrapper .cs_support_text { padding-inline-start: 0; }
  .cs_support_content_wrapper .mc-support-actions { width: 100%; justify-content: center; }
}

/* ---------- Legal pages (GoSaaS term-condition) ---------- */
.mc-legal-head { max-width: 900px; margin-inline: auto; }
.mc-legal-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--body-color); }
.mc-legal-meta li { display: inline-flex; align-items: center; gap: 6px; }
.mc-legal-meta a { color: var(--heading-color); text-decoration: underline; text-underline-offset: 3px; }
.mc-legal-meta a:hover { color: var(--mc-green-700, #0f9f6b); }
.mc-legal-body { max-width: 860px; margin-inline: auto; }
.mc-legal-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 32px; padding: 14px 18px; border-radius: 10px; background: var(--mc-surface, #F7F7F9); color: var(--heading-color); font-size: 15px; }
.mc-legal-note .mc-icon { flex-shrink: 0; margin-top: 2px; }
.cs_terms_condition_wrapper .mc-prose { max-width: none; overflow-wrap: anywhere; }
.cs_terms_condition_wrapper .mc-prose > :first-child { margin-top: 0; }
.cs_terms_condition_wrapper .mc-prose h2,
.cs_terms_condition_wrapper .mc-prose h3 { margin: 1.5em 0 .55em; font-weight: 400; color: var(--heading-color); }
.cs_terms_condition_wrapper .mc-prose h2 { font-size: clamp(22px, 2.4vw, 29px); }
.cs_terms_condition_wrapper .mc-prose h3 { font-size: clamp(19px, 2vw, 22px); }
.cs_terms_condition_wrapper .mc-prose ul { padding-left: 0; padding-inline-start: 30px; }
.cs_terms_condition_wrapper .mc-prose li { list-style: disc; }
.cs_terms_condition_wrapper .mc-prose ol li { list-style: decimal; }
.cs_terms_condition_wrapper .mc-prose a { color: var(--heading-color); }
.cs_terms_condition_wrapper .mc-prose a:hover { color: var(--mc-green-700, #0f9f6b); }
.cs_terms_condition_wrapper .mc-prose table { display: block; max-width: 100%; overflow-x: auto; }
.cs_terms_condition_wrapper .mc-prose img { max-width: 100%; height: auto; }

/* Centred heroes: keep the answer paragraph centred with the title. */
.mc-pricing-head .mc-answer-box, .mc-faqs-head .mc-answer-box, .mc-legal-head .mc-answer-box { text-align: center; }