/* Pricing & Checkout — ported from Admin_Design_system/files (3) */

.ifx-main--pricing { max-width: 1140px; }
.ifx-main--checkout { max-width: 1100px; }
.ifx-pricing-banner { display: flex;
 align-items: flex-start;
 gap: var(--ifx-space-12);
 padding: 14px 18px;
 margin-bottom: var(--ifx-space-24);
 border-radius: var(--ix-radius-lg);
 background: var(--ix-accent-soft);
 border: 1px solid rgba(27, 53, 135, 0.25);

 color: var(--ix-text-secondary); }

.ifx-pricing-banner i { font-size: var(--ifx-font-size-20); color: var(--ix-accent); flex-shrink: 0; margin-top: 1px; }.ifx-pricing-banner strong { color: var(--ix-text-primary); }
.ix-billing-toggle { display: flex; align-items: center; gap: var(--ifx-space-12);
color: var(--ix-text-secondary); }
.ix-billing-toggle input[type=checkbox] { width: 40px; height: 22px; appearance: none;
 background: var(--ix-bg-hover);
 border-radius: 20px; cursor: pointer;
 position: relative; transition: background .2s;
 border: 1px solid var(--ix-border); flex-shrink: 0; }
.ix-billing-toggle input[type=checkbox]::after { content: ''; position: absolute;
 width: 16px; height: 16px; border-radius: 50%;
 background: #fff; top: 2px; left: 2px;
 transition: transform .2s; }
.ix-billing-toggle input[type=checkbox]:checked { background: var(--ix-accent); }
.ix-billing-toggle input[type=checkbox]:checked::after { transform: translateX(18px); }
.ix-save-badge { background: var(--ix-success-soft); color: var(--ix-success);
padding: 2px 8px;
 border-radius: 10px; }
.ix-billing-segments { display: inline-flex;
 align-items: center;
 gap: var(--ifx-space-4);
 padding: 4px;
 border-radius: var(--ix-radius-lg);
 background: var(--ix-bg-card);
 border: 1px solid var(--ix-border); }
.ix-billing-seg { border: none;
 background: transparent;
 color: var(--ix-text-secondary);

 padding: var(--ifx-space-8) 16px;
 border-radius: var(--ix-radius);
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: var(--ifx-inline-sm);
 transition: background .15s, color .15s; }
.ix-billing-seg:hover { color: var(--ix-text-primary); }
.ix-billing-seg.active { background: var(--ix-accent-soft);
 color: var(--ix-accent); }
.ix-billing-seg.hidden { display: none; }
.ix-plan-grid { display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: var(--ifx-space-20);
 margin-top: 32px; }
.ix-plan-box { background: var(--ix-bg-card);
 border: 1px solid var(--ix-border);
 border-radius: var(--ix-radius-lg);
 padding: 28px 24px;
 display: flex; flex-direction: column;
 position: relative;
 transition: border-color .2s, box-shadow .2s; }
.ix-plan-box:hover { border-color: rgba(27, 53, 135, .4);
 box-shadow: var(--ix-shadow); }
.ix-plan-box.featured { border-color: var(--ix-accent);
 box-shadow: 0 0 0 1px var(--ix-accent), var(--ix-shadow); }
.ix-plan-popular { position: absolute; top: -12px; left: 50%;
 transform: translateX(-50%);
 background: var(--ix-accent); color: #fff;

 padding: 3px 12px; border-radius: 10px;

 white-space: nowrap; }

.ix-plan-img {
  height: 80px; display: flex; align-items: center; justify-content: center;
  font-size: 56px; margin-bottom: var(--ifx-space-16); opacity: .7;
}.ix-plan-name { color: var(--ix-text-primary); text-align: center; margin-bottom: var(--ifx-space-4); }
.ix-plan-tagline { color: var(--ix-text-muted);
 text-align: center; margin-bottom: 20px; }
.ix-plan-price-block { text-align: center; margin-bottom: 20px; min-height: 56px; }
.ix-plan-price-big { color: var(--ix-accent); }
.ix-plan-price-cur { vertical-align: super; margin-right: 2px; }
.ix-plan-price-per { color: var(--ix-text-muted); margin-top: var(--ifx-space-4); }
.ix-plan-price-annual { color: var(--ix-text-muted); margin-top: 2px;
 min-height: 16px; }
.ix-plan-feats { list-style: none; padding: 0; margin: 0 0 24px;
 flex: 1; }
.ix-plan-feats li { display: flex; align-items: flex-start; gap: var(--ifx-space-8);
color: var(--ix-text-secondary);
 margin-bottom: 10px; }

.ix-plan-feats li i { font-size: var(--ifx-font-size-16); flex-shrink: 0; margin-top: 1px; }
.ix-plan-feats li.has i { color: var(--ix-success); }.ix-plan-feats li.no { color: var(--ix-text-muted); }

.ix-plan-feats li.no  i { color: var(--ix-text-muted); }.ix-faq-grid { display: grid; grid-template-columns: 1fr 1fr;
 gap: var(--ifx-space-16); margin-top: 24px; }
.ix-accordion { display: flex; flex-direction: column; gap: var(--ifx-space-8); }
.ix-accordion-item { background: var(--ix-bg-card);
 border: 1px solid var(--ix-border);
 border-radius: var(--ix-radius);
 overflow: hidden; }
.ix-accordion-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between;
 gap: var(--ifx-space-12); padding: 14px 16px;
 background: none; border: none; cursor: pointer;
color: var(--ix-text-primary);
 text-align: left; }
.ix-accordion-arrow { transition: transform .2s; color: var(--ix-text-muted); }
.ix-accordion-item.open .ix-accordion-arrow { transform: rotate(180deg); }
.ix-accordion-body { display: none; padding: 0 16px 14px;
color: var(--ix-text-secondary); }
.ix-accordion-item.open .ix-accordion-body { display: block; }
.ix-compare-table { width: 100%; border-collapse: collapse; }
.ix-compare-table th, .ix-compare-table td { padding: var(--ifx-inset-widget);
 border-bottom: 1px solid var(--ix-border);
 text-align: left; }
.ix-compare-table th { color: var(--ix-text-muted);
 background: var(--ix-bg-hover); }
.ix-compare-table td:not(:first-child),
.ix-compare-table th:not(:first-child) { text-align: center; }
.ix-compare-table .check { color: var(--ix-success); }
.ix-compare-table .dash { color: var(--ix-text-muted); }
.ix-compare-table tbody tr:hover td { background: rgba(255,255,255,.02); }
.ix-compare-table .section-row td { background: var(--ix-bg-hover);
color: var(--ix-text-primary); }
.ix-checkout-stepper { display: flex; align-items: center;
 gap: 0; margin-bottom: 32px;
 overflow-x: auto; }
.ix-checkout-step { display: flex; align-items: center; gap: var(--ifx-inline-md);
 cursor: pointer; flex-shrink: 0; }
.ix-checkout-step-circle { width: 36px; height: 36px; border-radius: 50%;
 border: 2px solid var(--ix-border);
 display: flex; align-items: center; justify-content: center;

 color: var(--ix-text-muted);
 background: var(--ix-bg-card);
 transition: all .2s; flex-shrink: 0; }
.ix-checkout-step.active .ix-checkout-step-circle { border-color: var(--ix-accent);
 background: var(--ix-accent); color: #fff; }
.ix-checkout-step.done .ix-checkout-step-circle { border-color: var(--ix-success);
 background: var(--ix-success); color: #fff; }
.ix-checkout-step-title { color: var(--ix-text-primary); }
.ix-checkout-step-sub { color: var(--ix-text-muted); }
.ix-checkout-step.active .ix-checkout-step-title { color: var(--ix-accent); }
.ix-checkout-connector { flex: 1; height: 2px;
 background: var(--ix-border);
 margin: 0 8px; min-width: 24px;
 transition: background .2s; }
.ix-checkout-connector.done { background: var(--ix-success); }
.ix-checkout-panel { display: none; }
.ix-checkout-panel.active { display: block; }
.ix-order-summary { background: var(--ix-bg-card);
 border: 1px solid var(--ix-border);
 border-radius: var(--ix-radius-lg);
 overflow: hidden; position: sticky; top: calc(var(--ifx-topnav-h) + 16px); }
.ix-order-summary-header { background: var(--ix-accent-soft);
 padding: var(--ifx-inset-card);

 color: var(--ix-accent);
 display: flex; align-items: center; gap: var(--ifx-space-8); }
.ix-order-summary-body { padding: 20px; }
.ix-order-row { display: flex; justify-content: space-between;
padding: 7px 0;
 border-bottom: 1px solid var(--ix-border);
 color: var(--ix-text-secondary); }
.ix-order-row:last-of-type { border-bottom: none; }
.ix-order-total { display: flex; justify-content: space-between;

 color: var(--ix-text-primary);
 padding: 14px 0 0; margin-top: var(--ifx-space-4);
 border-top: 2px solid var(--ix-border); }
.ix-pay-method { display: grid; grid-template-columns: repeat(2, 1fr);
 gap: var(--ifx-inline-md); margin-bottom: 20px; }
.ix-pay-opt { border: 1px solid var(--ix-border);
 border-radius: var(--ix-radius);
 padding: var(--ifx-space-12) 14px;
 display: flex; align-items: center; gap: var(--ifx-inline-md);
 cursor: pointer; transition: all .12s;

 color: var(--ix-text-secondary); }
.ix-pay-opt:hover { border-color: var(--ix-accent); }
.ix-pay-opt.selected { border-color: var(--ix-accent); background: var(--ix-accent-soft); color: var(--ix-accent); }

.ix-pay-opt i { font-size: var(--ifx-font-size-20); }.ix-checkout-success { text-align: center; padding: 48px 24px; }

.ix-success-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--ix-success-soft);
  color: var(--ix-success);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  margin: 0 auto 20px;
}.ix-card-number-wrap { position: relative; }
.ix-card-type-badge { position: absolute; right: 12px; top: 50%;
 transform: translateY(-50%);

 background: var(--ix-bg-hover); color: var(--ix-text-muted);
 padding: 2px 6px; border-radius: 4px; }
.ifx-checkout-grid { display: grid;
 grid-template-columns: 1fr 340px;
 gap: var(--ifx-space-24);
 align-items: flex-start; }
.ix-plan-box .ix-btn[disabled],
.ix-radio-card[aria-disabled="true"] { cursor: default; }
@media (max-width: 900px) { .ix-plan-grid { grid-template-columns: 1fr; }
.ix-faq-grid { grid-template-columns: 1fr; }
.ifx-checkout-grid { grid-template-columns: 1fr; }
.ix-order-summary { position: static; }
}
@media (max-width: 768px) { .ix-pay-method { grid-template-columns: 1fr; }
#ifx-checkout-cycles { grid-template-columns: 1fr !important; }

}