/* Flexus cart — "Your stack" checkout (homepage bento energy) */
.page-flexus-cart #main-body { padding-block: 0; }
.page-flexus-cart .fx-bleed { max-width: none; padding-inline: 0; }

.fx-cart-page {
  background: var(--color-paper-warmth);
}

.fx-cart-page__bento .fx-notion-domain {
  padding-block: clamp(24px, 4vw, 48px) clamp(12px, 2vw, 24px);
}
.fx-cart-page--has-items .fx-cart-page__bento .fx-notion-domain {
  padding-block: clamp(16px, 2.5vw, 28px) clamp(8px, 1.5vw, 16px);
}
.fx-cart-page--has-items .fx-notion-domain__copy {
  padding: clamp(18px, 2.5vw, 28px);
}
.fx-cart-page--has-items .fx-notion-domain__head {
  margin-bottom: var(--spacing-12);
}
.fx-cart-page--has-items .fx-notion-domain__title {
  font-size: clamp(20px, 2.4vw, 28px);
}
.fx-cart-page--has-items .fx-notion-domain__lead {
  font-size: var(--text-body);
  max-width: none;
}
.fx-cart-page--has-items .fx-cart-page__count {
  min-width: 32px;
  height: 32px;
  font-size: var(--text-body);
}

.fx-cart-page__headmeta {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  flex-shrink: 0;
}

.fx-cart-page__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 12px;
  border-radius: var(--radius-full);
  background: var(--color-notion-blue);
  color: #fff;
  font-size: var(--text-body-lg);
  font-weight: 600;
  letter-spacing: -.02em;
}

.fx-cart-page__stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-width: 0;
}

.fx-cart-page__rail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

/* Stack items — compact list rows (matches fx-supp-list / portal UI) */
#order-flexus_cart .fx-cart-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  background: var(--color-canvas-white);
  overflow: hidden;
}

#order-flexus_cart .fx-cart-stack__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--spacing-12);
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-ash);
  border-radius: 0;
  padding: var(--spacing-12) var(--spacing-16);
  position: relative;
  overflow: visible;
  transition: background .12s ease;
  box-shadow: none;
  transform: none;
}
#order-flexus_cart .fx-cart-stack__item:last-child { border-bottom: 0; }
#order-flexus_cart .fx-cart-stack__item::before { display: none; }

#order-flexus_cart .fx-cart-stack__item:hover {
  background: var(--color-paper-mist);
  border-color: var(--color-ash);
  box-shadow: none;
  transform: none;
}
#order-flexus_cart .fx-cart-stack__item--addon {
  margin-left: 0;
  border-bottom-style: dashed;
  background: rgba(246, 245, 244, .45);
}

#order-flexus_cart .fx-cart-stack__orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background: var(--color-paper-mist);
  border: 1px solid var(--color-ash);
  flex-shrink: 0;
  align-self: center;
}
#order-flexus_cart .fx-cart-stack__orb .fx-dashicon {
  display: block;
  width: 20px;
  height: 20px;
}

#order-flexus_cart .fx-cart-stack__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
#order-flexus_cart .fx-cart-stack__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
#order-flexus_cart .fx-cart-stack__kicker {
  display: inline-flex;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-fog);
  background: transparent;
  border-radius: 0;
  padding: 0;
}
#order-flexus_cart .fx-cart-stack__item--domain .fx-cart-stack__kicker { color: #b45309; }
#order-flexus_cart .fx-cart-stack__item--addon .fx-cart-stack__kicker { color: #6d28d9; }
#order-flexus_cart .fx-cart-stack__item--product .fx-cart-stack__kicker { color: var(--color-notion-blue); }

#order-flexus_cart .fx-cart-stack__name {
  font-family: var(--font-inter);
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-charcoal);
  line-height: 1.3;
  word-break: break-word;
}
#order-flexus_cart .fx-cart-stack__name i { font-size: 11px; color: var(--color-fog); margin-inline: 4px; }
#order-flexus_cart .fx-cart-stack__name--mono { font-family: var(--font-geist-mono); }

#order-flexus_cart .fx-cart-stack__domain {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
  color: var(--color-fog);
  word-break: break-word;
}
#order-flexus_cart .fx-cart-stack__domain i {
  font-size: 11px;
  color: var(--color-notion-blue);
  flex-shrink: 0;
}

#order-flexus_cart .fx-cart-stack__opts {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: var(--text-caption);
  color: var(--color-graphite);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
#order-flexus_cart .fx-cart-stack__opts:empty { display: none; }
#order-flexus_cart .fx-cart-stack__opts li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  padding: 0;
  position: static;
  max-width: 100%;
}
#order-flexus_cart .fx-cart-stack__opts li::before { display: none; }
#order-flexus_cart .fx-cart-stack__opts li > span {
  color: var(--color-fog);
}
#order-flexus_cart .fx-cart-stack__opts li > span::after { content: ':'; }
#order-flexus_cart .fx-cart-stack__opts li > b {
  font-weight: 600;
  color: var(--color-charcoal);
  word-break: break-word;
}
#order-flexus_cart .fx-cart-stack__opts li > b:has(.fx-cart-os) {
  font-weight: inherit;
}

/* Virtualizor OS badge (cart / checkout) */
.fx-cart-os {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 4px;
  border-radius: 999px;
  background: var(--color-ash, #f1f5f9);
  vertical-align: middle;
  max-width: 100%;
}
.fx-cart-os i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  flex-shrink: 0;
  background: #e2e8f0;
  color: #334155;
}
.fx-cart-os em {
  font-style: normal;
  font-family: var(--font-inter, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-charcoal, #1e293b);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fx-cart-os--ubuntu i { background: #fff4e8; color: #e95420; }
.fx-cart-os--debian i { background: #fdecef; color: #a81d33; }
.fx-cart-os--alma i { background: #fde8e8; color: #c21807; }
.fx-cart-os--rocky i { background: #e8faf3; color: #10b981; }
.fx-cart-os--centos i { background: #eef0fb; color: #262577; }
.fx-cart-os--suse i { background: #e8f5ee; color: #0c322c; }
.fx-cart-os--windows i { background: #e8f2fc; color: #0078d4; }
.fx-cart-os--other i { background: #eef2ff; color: #4338ca; }
.fx-cart-rail-stack__opts .fx-cart-os em { font-size: 11px; }
.fx-cart-rail-stack__opts .fx-cart-os i { width: 18px; height: 18px; font-size: 10px; }

#order-flexus_cart .fx-cart-stack__links { margin-top: 2px; }
#order-flexus_cart .fx-cart-stack__links a {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-fog);
  text-decoration: none;
}
#order-flexus_cart .fx-cart-stack__links a:hover { color: var(--color-notion-blue); }

#order-flexus_cart .fx-cart-stack__qty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
#order-flexus_cart .fx-cart-stack__qty .fx-input { width: 72px; text-align: center; padding: 6px 8px; }
#order-flexus_cart .fx-cart-stack__qty-update {
  background: none;
  border: 0;
  font-size: var(--text-caption);
  color: var(--color-notion-blue);
  cursor: pointer;
  padding: 0;
}

#order-flexus_cart .fx-cart-stack__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  border: 0;
  min-width: 88px;
}
#order-flexus_cart .fx-cart-stack__price b {
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-charcoal);
  letter-spacing: -.01em;
}
#order-flexus_cart .fx-cart-stack__price span,
#order-flexus_cart .fx-cart-stack__price small {
  font-size: var(--text-caption);
  color: var(--color-fog);
  line-height: 1.3;
}
#order-flexus_cart .fx-cart-stack__price small.renewal { display: none; }
#order-flexus_cart .fx-cart-stack__period { margin-top: 4px; }

#order-flexus_cart .fx-cart-stack__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-fog);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s ease, color .12s ease;
  font-size: 12px;
}
#order-flexus_cart .fx-cart-stack__remove:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* Empty stack */
#order-flexus_cart .fx-cart-stack__empty {
  text-align: center;
  background: linear-gradient(145deg, var(--color-canvas-white) 0%, var(--color-paper-mist) 100%);
  border: 1px dashed var(--color-ash);
  border-radius: var(--radius-2xl);
  padding: clamp(48px, 8vw, 72px) clamp(24px, 4vw, 40px);
}
#order-flexus_cart .fx-cart-stack__empty-orbs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: -8px;
  margin-bottom: var(--spacing-20);
}
#order-flexus_cart .fx-cart-stack__empty-orbs .fx-dashicon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-canvas-white);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  margin-left: -10px;
}
#order-flexus_cart .fx-cart-stack__empty-orbs .fx-dashicon:first-child { margin-left: 0; }
#order-flexus_cart .fx-cart-stack__empty h2 {
  font-family: var(--font-inter);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -.02em;
  margin: 0 0 10px;
  color: var(--color-charcoal);
}
#order-flexus_cart .fx-cart-stack__empty p {
  margin: 0 0 var(--spacing-24);
  font-size: var(--text-body-lg);
  color: var(--color-graphite);
  max-width: 42ch;
  margin-inline: auto;
}
#order-flexus_cart .fx-cart-stack__empty-actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-12);
  flex-wrap: wrap;
}

/* Clear cart */
.fx-cart-toolsrow {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spacing-8);
}
.fx-cart-clear {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  font-size: var(--text-caption);
  color: var(--color-fog);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-lg);
  transition: color .15s ease, background .15s ease;
}
.fx-cart-clear:hover { color: #dc2626; background: #fef2f2; }

/* Promo & tax — compact rail cards */
.fx-cart-page__rail .fx-cart-extras {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  margin-top: 0;
}
.fx-cart-extras__card {
  background: var(--color-canvas-white);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  padding: clamp(12px, 1.6vw, 16px);
}
.fx-cart-extras__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--spacing-10);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-charcoal);
}
.fx-cart-extras__title i { color: var(--color-notion-blue); }
.fx-cart-extras__promo-form {
  display: flex;
  gap: var(--spacing-8);
  flex-wrap: wrap;
}
.fx-cart-extras__promo-form .fx-input { flex: 1; min-width: 140px; }
.fx-cart-extras__promo-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  flex-wrap: wrap;
  font-size: var(--text-body);
  color: var(--color-graphite);
  margin: 0;
}
.fx-cart-extras__promo-remove {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-fog);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fx-cart-extras__promo-remove:hover { color: #dc2626; }
.fx-cart-extras__tax-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  align-items: flex-start;
}
.fx-cart-extras__tax-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-10);
  width: 100%;
}
.fx-cart-extras__tax-fields label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-graphite);
}

/* Order summary — receipt card in rail */
.fx-cart-aside { position: static; }
.fx-cart-summary {
  position: relative;
  background: var(--color-canvas-white);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  padding: clamp(16px, 2vw, 22px);
  box-shadow: none;
}
.fx-cart-summary .loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.75);
  border-radius: inherit;
  z-index: 2;
  color: var(--color-notion-blue);
  font-size: 20px;
}
.fx-cart-summary .loader.w-hidden { display: none; }
.fx-cart-summary__title {
  margin: 0 0 var(--spacing-16);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--color-charcoal);
}
.fx-cart-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: 10px 0;
  border-bottom: 1px solid var(--color-ash);
  font-size: var(--text-body);
  color: var(--color-graphite);
}
.fx-cart-summary__row--recurring { align-items: flex-start; }
.fx-cart-summary__row--recurring .recurring-charges {
  text-align: right;
  font-size: var(--text-caption);
  color: var(--color-fog);
}
.fx-cart-summary__row--recurring .cost {
  font-weight: 600;
  color: var(--color-charcoal);
}
.fx-cart-summary__due {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-16) 0;
}
.fx-cart-summary__due-label {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-charcoal);
}
.fx-cart-summary__due-amt {
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--color-charcoal);
}
.fx-cart-summary__checkout { width: 100%; }
.fx-cart-summary__continue {
  display: block;
  text-align: center;
  margin-top: var(--spacing-12);
  font-size: var(--text-body);
  color: var(--color-graphite);
  text-decoration: none;
}
.fx-cart-summary__continue:hover { color: var(--color-charcoal); }
.fx-cart-summary__trust {
  list-style: none;
  margin: var(--spacing-20) 0 0;
  padding: var(--spacing-16) 0 0;
  border-top: 1px solid var(--color-ash);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--text-caption);
  color: var(--color-fog);
}
.fx-cart-summary__trust i {
  color: var(--color-notion-blue);
  width: 16px;
  text-align: center;
  margin-right: 6px;
}
.fx-cart-summary .express-checkout-buttons { margin-bottom: var(--spacing-12); }
.fx-cart-summary .express-checkout-buttons:empty { display: none; }
.fx-cart-summary .express-checkout-buttons .separator {
  text-align: center;
  font-size: var(--text-caption);
  color: var(--color-fog);
  margin: 8px 0;
}

/* ============================================================
   Checkout & configure-domains — reskin of standard cart forms
   ============================================================ */
.fx-checkout-shell { max-width: 880px; margin-inline: auto; }
.fx-checkout-standard .cart-sidebar { display: none !important; }
.fx-checkout-card {
  background: var(--color-pure-white);
  border: 1px solid var(--color-ash);
  border-radius: clamp(16px, 2vw, 24px);
  padding: clamp(20px, 3.5vw, 40px);
}
/* all.min.css floats .cart-body right at 75% — neutralize inside Flexus */
#order-flexus_cart .cart-body {
  float: none !important;
  width: 100% !important;
  padding: clamp(20px, 3.5vw, 40px);
}

/* ---- Minimal grid + utilities (Flexus theme ships no Bootstrap CSS) ---- */
#order-flexus_cart .row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -10px;
}
#order-flexus_cart .row > [class*="col-"] {
  width: 100%;
  padding-inline: 10px;
  min-width: 0;
}
@media (min-width: 576px) {
  #order-flexus_cart .col-sm-3 { width: 25%; }
  #order-flexus_cart .col-sm-4 { width: 33.3333%; }
  #order-flexus_cart .col-sm-5 { width: 41.6667%; }
  #order-flexus_cart .col-sm-6 { width: 50%; }
  #order-flexus_cart .col-sm-12 { width: 100%; }
  #order-flexus_cart .col-sm-offset-3,
  #order-flexus_cart .offset-sm-3 { margin-left: 25%; }
  #order-flexus_cart .col-sm-offset-6,
  #order-flexus_cart .offset-sm-6 { margin-left: 50%; }
  #order-flexus_cart .text-sm-right { text-align: right; }
}
@media (min-width: 768px) {
  #order-flexus_cart .col-md-6 { width: 50%; }
}
@media (min-width: 992px) {
  #order-flexus_cart .col-lg-3 { width: 25%; }
}
#order-flexus_cart .pull-right,
#order-flexus_cart .float-right { float: right; }
#order-flexus_cart .pull-left,
#order-flexus_cart .float-left { float: left; }
#order-flexus_cart .clearfix::after,
#order-flexus_cart .row::after { content: ""; display: table; clear: both; }
#order-flexus_cart .text-center { text-align: center; }
#order-flexus_cart .d-none { display: none; }
#order-flexus_cart .w-hidden,
#order-standard_cart .w-hidden {
  display: none !important;
}
#order-flexus_cart .small,
#order-flexus_cart small { font-size: var(--text-caption); }
#order-flexus_cart .text-muted { color: var(--color-fog); }
#order-flexus_cart .mb-3 { margin-bottom: var(--spacing-16); }
#order-flexus_cart .pt-4 { padding-top: var(--spacing-24); }
#order-flexus_cart .margin-bottom { margin-bottom: var(--spacing-16); }
#order-flexus_cart .form-group { margin-bottom: var(--spacing-16); position: relative; }
#order-flexus_cart .form-control,
#order-flexus_cart .field { display: block; width: 100%; }
#order-flexus_cart select.field,
#order-flexus_cart select.form-control { appearance: auto; }

/* Inline radios/checkboxes (payment methods, TOS) */
#order-flexus_cart .radio-inline,
#order-flexus_cart .checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 10px;
  font-weight: 400;
  cursor: pointer;
}
#order-flexus_cart .radio { display: block; margin: 6px 0; cursor: pointer; }

/* Account selector labels */
#order-flexus_cart .account {
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: var(--spacing-12);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#order-flexus_cart .account.active {
  border-color: var(--color-notion-blue);
  box-shadow: 0 0 0 3px rgba(0,117,222,.14);
}
#order-flexus_cart .label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
}
#order-flexus_cart .label-info { background: #dbeafe; color: #1e40af; }
#order-flexus_cart .label-default { background: var(--color-paper-mist); color: var(--color-graphite); }

/* Input group (CVV help button) */
#order-flexus_cart .input-group { display: flex; align-items: stretch; width: 100%; }
#order-flexus_cart .input-group .field { flex: 1; border-radius: var(--radius-inputs, 10px) 0 0 var(--radius-inputs, 10px); }
#order-flexus_cart .input-group .input-group-btn .btn,
#order-flexus_cart .input-group .input-group-append .btn {
  height: 100%;
  border-radius: 0 var(--radius-inputs, 10px) var(--radius-inputs, 10px) 0;
  border-left: 0;
}

/* Password strength meter */
#order-flexus_cart .progress {
  height: 8px;
  background: var(--color-paper-mist);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 6px;
}
#order-flexus_cart .progress-bar {
  height: 100%;
  background: var(--color-vivid-green);
  transition: width .3s ease;
}

/* Field validation + card form helpers */
#order-flexus_cart .field-error-msg {
  display: none;
  margin-top: 4px;
  font-size: var(--text-caption);
  color: #dc2626;
}
#order-flexus_cart .field-help-text {
  display: block;
  margin-top: 4px;
  font-size: var(--text-caption);
  color: var(--color-fog);
}
#order-flexus_cart .marketing-email-optin {
  margin: var(--spacing-20) 0;
  padding: 16px 18px;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-lg);
  background: var(--color-paper-warmth);
}
#order-flexus_cart .marketing-email-optin h4 { margin: 0 0 6px; font-weight: 600; }
#order-flexus_cart .marketing-email-optin p { color: var(--color-graphite); }

/* Already registered header row — legacy fallback */
#order-flexus_cart .already-registered:not(.fx-checkout-auth) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-16);
}
#order-flexus_cart .already-registered .pull-right { float: none; order: 2; }
#order-flexus_cart .already-registered p { margin: 0; color: var(--color-graphite); }
#order-flexus_cart .large-text { font-size: var(--text-body-lg); }

/* Section headings */
#order-flexus_cart .sub-heading {
  height: auto;
  border-top: 0;
  text-align: left;
  margin: clamp(24px, 3.5vw, 36px) 0 var(--spacing-16);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-ash);
}
#order-flexus_cart .sub-heading span {
  position: static;
  top: auto;
  display: inline-block;
  padding: 0;
  background: transparent !important;
  color: var(--color-charcoal);
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Inputs */
#order-flexus_cart .field.form-control,
#order-flexus_cart input.field,
#order-flexus_cart select.field,
#order-flexus_cart textarea.field,
#order-flexus_cart .form-control {
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-inputs, 10px);
  background: var(--color-pure-white);
  box-shadow: none;
  height: auto;
  padding-block: 10px;
  font-size: var(--text-body);
  color: var(--color-charcoal);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#order-flexus_cart .field.form-control:focus,
#order-flexus_cart .form-control:focus {
  border-color: var(--color-notion-blue);
  box-shadow: 0 0 0 4px rgba(0,117,222,.12);
  outline: none;
}

/* Buttons */
#order-flexus_cart .btn.btn-primary {
  background: var(--color-primary-action-fill, var(--color-notion-blue));
  border: 0;
  border-radius: var(--radius-buttons, 10px);
  font-weight: 500;
  padding: 12px 22px;
}
#order-flexus_cart .btn.btn-primary:hover { background: var(--color-deep-sapphire); }
#order-flexus_cart .btn.btn-default,
#order-flexus_cart .btn.btn-info,
#order-flexus_cart .btn.btn-warning {
  background: var(--color-pure-white);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-buttons, 10px);
  color: var(--color-charcoal);
  font-weight: 500;
}
#order-flexus_cart .btn.btn-default:hover,
#order-flexus_cart .btn.btn-info:hover,
#order-flexus_cart .btn.btn-warning:hover { border-color: rgba(0,0,0,.32); }

/* Alerts */
#order-flexus_cart .alert { border-radius: var(--radius-lg); border: 0; }
#order-flexus_cart .alert-danger { background: #fef2f2; color: #7f1d1d; }
#order-flexus_cart .alert-info { background: #eff6ff; color: #1e3a8a; }
#order-flexus_cart .alert-warning { background: #fffbeb; color: #78350f; }
#order-flexus_cart .alert-success { background: var(--color-soft-mint); color: #14532d; }

/* Total due banner on checkout */
#order-flexus_cart .fx-checkout-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin: 0 0 var(--spacing-16);
  padding: var(--spacing-14) var(--spacing-16);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  background: var(--color-paper-warmth);
}
#order-flexus_cart .fx-checkout-total__label {
  font-size: var(--text-body);
  color: var(--color-graphite);
}
#order-flexus_cart .fx-checkout-total__amt,
#order-flexus_cart .fx-checkout-total strong {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--color-charcoal);
}

/* Checkout page — bento layout */
.fx-checkout-page {
  background: var(--color-paper-warmth);
}
.fx-checkout-page .fx-notion-domain__card {
  align-items: start;
}
.fx-checkout-page__main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-width: 0;
}
.fx-checkout-form { display: flex; flex-direction: column; gap: 0; }

.fx-checkout-auth {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  flex-wrap: wrap;
  padding: var(--spacing-14) var(--spacing-16);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--color-sky-tint) 0%, var(--color-canvas-white) 55%);
  margin-bottom: 0;
}
.fx-checkout-auth__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 200px;
}
.fx-checkout-auth__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.85);
  border: 1px solid var(--color-ash);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-notion-blue);
}
.fx-checkout-auth__lead {
  margin: 0;
  font-size: var(--text-body);
  color: var(--color-graphite);
}
.fx-checkout-auth__actions {
  display: flex;
  gap: var(--spacing-8);
  flex-wrap: wrap;
  float: none !important;
}
.fx-checkout-auth__actions .fx-btn {
  white-space: nowrap;
  font-size: var(--text-caption);
  padding: 8px 14px;
}

.fx-checkout-section { margin-top: var(--spacing-8); }

.fx-checkout-block {
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  background: var(--color-canvas-white);
  padding: var(--spacing-16) var(--spacing-20);
  margin-top: var(--spacing-16);
}
.fx-checkout-block--soft,
.fx-checkout-block.fx-checkout-block--soft {
  background: var(--color-paper-warmth);
}
.fx-checkout-block--login {
  background: linear-gradient(180deg, #fff 0%, var(--color-paper-warmth) 100%);
}
.fx-checkout-block .sub-heading {
  margin-top: 0;
  padding-bottom: var(--spacing-12);
  margin-bottom: var(--spacing-12);
  border-bottom: 1px solid var(--color-ash);
}
.fx-checkout-block .sub-heading span { font-size: clamp(15px, 1.6vw, 17px); }
.fx-checkout-block .sub-heading-borderless {
  margin: var(--spacing-12) 0;
  text-align: center;
}
.fx-checkout-block .sub-heading-borderless span {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--color-paper-mist);
  color: var(--color-fog);
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.fx-checkout-section--payment {
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  background: var(--color-canvas-white);
  padding: var(--spacing-16) var(--spacing-20);
  margin-top: var(--spacing-20);
}
.fx-checkout-section--payment .sub-heading {
  margin-top: 0;
  border-bottom: 0;
  padding-bottom: 0;
}

.fx-checkout-page__rail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  width: 100%;
  align-self: stretch;
}

/* Checkout rail — match viewcart proportions */
.fx-checkout-page .fx-notion-domain__visual {
  min-height: 0;
  justify-content: flex-start;
  align-items: stretch;
  padding: clamp(16px, 2.5vw, 28px);
  gap: var(--spacing-12);
}

.fx-checkout-rail-aside {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  width: 100%;
}

.fx-cart-rail-stack {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  background: var(--color-canvas-white);
  overflow: hidden;
}
.fx-cart-rail-stack__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--spacing-10);
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-ash);
}
.fx-cart-rail-stack__item:last-child { border-bottom: 0; }
.fx-cart-rail-stack__item--addon {
  background: rgba(246, 245, 244, .5);
  border-bottom-style: dashed;
}
.fx-cart-rail-stack__orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  background: var(--color-paper-mist);
  border: 1px solid var(--color-ash);
  flex-shrink: 0;
}
.fx-cart-rail-stack__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fx-cart-rail-stack__kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-fog);
}
.fx-cart-rail-stack__name {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-charcoal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fx-cart-rail-stack__name--mono {
  font-family: var(--font-geist-mono);
  font-size: 11px;
}
.fx-cart-rail-stack__meta {
  font-size: 11px;
  color: var(--color-fog);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fx-cart-rail-stack__domain {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.fx-cart-rail-stack__domain i {
  font-size: 10px;
  color: var(--color-notion-blue);
  flex-shrink: 0;
}
.fx-cart-rail-stack__opts {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--color-graphite);
  line-height: 1.35;
}
.fx-cart-rail-stack__opts li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  max-width: 100%;
}
.fx-cart-rail-stack__opts .fx-cart-os-label {
  color: var(--color-fog);
}
.fx-cart-rail-stack__opts .fx-cart-os-label::after {
  content: ':';
}
.fx-cart-rail-stack__price {
  text-align: right;
  flex-shrink: 0;
}
.fx-cart-rail-stack__price b {
  display: block;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-charcoal);
}
.fx-cart-rail-stack__price span {
  display: block;
  font-size: 10px;
  color: var(--color-fog);
}

.fx-checkout-rail-summary {
  flex: 1;
  margin-top: 0 !important;
  margin-bottom: 0;
}
.fx-checkout-rail-aside,
.fx-checkout-page__rail,
.fx-checkout-rail-summary {
  position: static !important;
  top: auto !important;
}
.fx-checkout-rail-summary .fx-cart-summary__continue {
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-8);
}

.fx-checkout-page__rail .fx-notion-ui {
  width: 100%;
  flex-shrink: 0;
}

.fx-checkout-rail {
  background: var(--color-canvas-white);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  padding: var(--spacing-16) var(--spacing-20);
}
.fx-checkout-rail__total {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: var(--spacing-14);
  margin-bottom: var(--spacing-14);
  border-bottom: 1px solid var(--color-ash);
}
.fx-checkout-rail__label {
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-fog);
}
.fx-checkout-rail__amt {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--color-charcoal);
}
.fx-checkout-rail__trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--text-caption);
  color: var(--color-graphite);
}
.fx-checkout-rail__trust li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.fx-checkout-rail__trust i {
  color: var(--color-notion-blue);
  margin-top: 2px;
}
.fx-checkout-rail .fx-checkout-secure { margin-top: var(--spacing-14); margin-bottom: 0; }

.fx-checkout-submit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-14);
  margin-top: var(--spacing-20);
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--color-ash);
}
.fx-checkout-tos {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--text-body);
  color: var(--color-graphite);
  cursor: pointer;
  margin: 0;
}
.fx-checkout-tos a { color: var(--color-notion-blue); }

#order-flexus_cart #paymentGatewaysContainer .text-center {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  justify-content: flex-start;
  text-align: left;
}
#order-flexus_cart #paymentGatewaysContainer .radio-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-full);
  background: var(--color-canvas-white);
  font-size: var(--text-caption);
  font-weight: 500;
  cursor: pointer;
}
#order-flexus_cart #paymentGatewaysContainer .radio-inline:has(input:checked) {
  border-color: var(--color-notion-blue);
  background: var(--color-sky-tint);
}

#order-flexus_cart .account-select-container .account {
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  padding: var(--spacing-14);
  margin-bottom: var(--spacing-10);
  background: var(--color-canvas-white);
}
#order-flexus_cart .account-select-container .account.active {
  border-color: var(--color-notion-blue);
  box-shadow: 0 0 0 3px rgba(0,117,222,.1);
}

#order-flexus_cart .apply-credit-container {
  padding: var(--spacing-14);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-lg);
  background: var(--color-paper-warmth);
  margin-bottom: var(--spacing-16);
}
#order-flexus_cart .apply-credit-container .radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-md);
  background: var(--color-canvas-white);
  line-height: 1.45;
  cursor: pointer;
}
#order-flexus_cart .apply-credit-container .iradio_square-blue {
  flex: 0 0 auto;
  margin: 2px 0 0;
}

#order-flexus_cart .generate-password {
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-lg);
  background: var(--color-canvas-white);
  font-size: var(--text-caption);
  padding: 8px 12px;
}

#order-flexus_cart .fx-checkout-login-actions { margin: var(--spacing-12) 0 var(--spacing-4); }

#order-flexus_cart .prepend-icon {
  position: relative;
  width: 100%;
}
#order-flexus_cart .prepend-icon .field-icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 42px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fog);
  pointer-events: none;
  line-height: 1;
}
#order-flexus_cart .prepend-icon .field-icon i { font-size: 14px; color: inherit; }
#order-flexus_cart .prepend-icon .field,
#order-flexus_cart .prepend-icon .form-control {
  padding-left: 42px;
}
#order-flexus_cart .prepend-icon .field:focus,
#order-flexus_cart .prepend-icon .form-control:focus {
  border-color: var(--color-notion-blue);
  box-shadow: 0 0 0 4px rgba(0,117,222,.12);
}

#order-flexus_cart .fx-checkout-form .form-group > label:not(.field-icon):not(.radio-inline):not(.checkbox-inline) {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-graphite);
}

#order-flexus_cart .password-strength-meter {
  padding: var(--spacing-10) var(--spacing-12);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-lg);
  background: var(--color-paper-mist);
}
#order-flexus_cart .password-strength-meter .progress {
  background: var(--color-canvas-white);
  border: 1px solid var(--color-ash);
}
#order-flexus_cart .password-strength-meter .progress-bar,
#order-flexus_cart .password-strength-meter .progress-bar-success {
  background: var(--color-notion-blue);
}
#order-flexus_cart .password-strength-meter #passwordStrengthTextLabel {
  margin: 6px 0 0;
  color: var(--color-graphite);
}

#order-flexus_cart .social-signin-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  justify-content: center;
  margin: var(--spacing-12) 0;
}
#order-flexus_cart .social-signin-btns .btn {
  border-radius: var(--radius-full);
  border: 1px solid var(--color-ash);
  background: var(--color-canvas-white);
  font-size: var(--text-caption);
  font-weight: 500;
  padding: 8px 16px;
  box-shadow: none;
}
#order-flexus_cart .social-signin-btns .btn:hover {
  border-color: rgba(0,0,0,.24);
  background: var(--color-paper-mist);
}

#order-flexus_cart .marketing-email-optin.fx-checkout-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin-top: var(--spacing-16);
}
#order-flexus_cart .marketing-email-optin h4 {
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-charcoal);
}

#order-flexus_cart .fx-checkout-form textarea.field {
  min-height: 120px;
  resize: vertical;
  padding: 12px 14px;
}

#order-flexus_cart .fx-checkout-page .btn.btn-info,
#order-flexus_cart .fx-checkout-page .btn.btn-warning {
  background: transparent;
  border: 0;
  padding: 0;
}

@media (max-width: 900px) {
  .fx-checkout-auth { flex-direction: column; align-items: stretch; }
  .fx-checkout-auth__actions { width: 100%; }
  .fx-checkout-auth__actions .fx-btn { flex: 1; justify-content: center; }
  .fx-checkout-block { padding: var(--spacing-14) var(--spacing-16); }
  .fx-checkout-stepper { flex-wrap: wrap; gap: 6px; }
  .fx-checkout-stepper__line { display: none; }
}

/* ============================================================
   Checkout wizard — progressive steps (guest registration)
   ============================================================ */
.fx-checkout-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-16);
  padding: var(--spacing-10) var(--spacing-12);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  background: var(--color-canvas-white);
}
.fx-checkout-stepper__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-fog);
  white-space: nowrap;
}
.fx-checkout-stepper__item.is-active { color: var(--color-charcoal); font-weight: 600; }
.fx-checkout-stepper__item.is-done { color: var(--color-vivid-green); }
.fx-checkout-stepper__num {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  background: var(--color-paper-mist);
  border: 1px solid var(--color-ash);
  flex-shrink: 0;
}
.fx-checkout-stepper__item.is-active .fx-checkout-stepper__num {
  background: var(--color-notion-blue);
  border-color: var(--color-notion-blue);
  color: #fff;
}
.fx-checkout-stepper__item.is-done .fx-checkout-stepper__num {
  background: var(--color-vivid-green);
  border-color: var(--color-vivid-green);
  color: #fff;
}
.fx-checkout-stepper__line {
  flex: 1;
  min-width: 12px;
  height: 1px;
  background: var(--color-ash);
}

.fx-checkout-step {
  margin-top: var(--spacing-12);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  background: var(--color-canvas-white);
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.fx-checkout-step.is-open {
  border-color: rgba(0,117,222,.35);
  box-shadow: 0 0 0 3px rgba(0,117,222,.08);
}
.fx-checkout-step.is-done:not(.is-open) {
  background: var(--color-paper-warmth);
}
.fx-checkout-step.is-pending { display: none; }

.fx-checkout-step__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  width: 100%;
  padding: var(--spacing-12) var(--spacing-16);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: default;
  font-family: inherit;
}
.fx-checkout-step.is-done .fx-checkout-step__head { cursor: pointer; }
.fx-checkout-step__head--static { cursor: default; pointer-events: none; }
.fx-checkout-step__head:focus-visible {
  outline: 2px solid var(--color-notion-blue);
  outline-offset: -2px;
}
.fx-checkout-step__num {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-paper-mist);
  border: 1px solid var(--color-ash);
  flex-shrink: 0;
  color: var(--color-graphite);
}
.fx-checkout-step.is-open .fx-checkout-step__num {
  background: var(--color-notion-blue);
  border-color: var(--color-notion-blue);
  color: #fff;
}
.fx-checkout-step.is-done .fx-checkout-step__num {
  background: var(--color-vivid-green);
  border-color: var(--color-vivid-green);
  color: #fff;
}
.fx-checkout-step__label {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-charcoal);
  flex: 1;
  min-width: 0;
}
.fx-checkout-step__summary {
  font-size: var(--text-caption);
  color: var(--color-fog);
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fx-checkout-step.is-open .fx-checkout-step__summary,
.fx-checkout-step.is-pending .fx-checkout-step__summary { display: none; }
.fx-checkout-step__chev {
  color: var(--color-fog);
  font-size: 12px;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.fx-checkout-step.is-open .fx-checkout-step__chev { transform: rotate(180deg); }
.fx-checkout-step.is-done:not(.is-open) .fx-checkout-step__chev { transform: rotate(0); }

.fx-checkout-step__body {
  display: none;
  padding: 0 var(--spacing-16) var(--spacing-16);
  border-top: 1px solid var(--color-ash);
  animation: fxCheckoutStepIn .35s ease both;
}
.fx-checkout-step.is-open .fx-checkout-step__body { display: block; }

@keyframes fxCheckoutStepIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fx-checkout-step__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-10);
  margin-top: var(--spacing-16);
  padding-top: var(--spacing-14);
  border-top: 1px solid var(--color-ash);
}
.fx-checkout-step__foot .fx-checkout-step__back { margin-right: auto; }
.fx-checkout-step__foot .fx-btn-primary { margin-left: auto; }

.fx-checkout-step.fx-checkout-block { padding: 0; }
.fx-checkout-step .sub-heading { margin-top: var(--spacing-12); }

.fx-checkout-step-error {
  margin: 0 0 var(--spacing-12);
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  font-size: var(--text-caption);
}

#order-flexus_cart .fx-checkout-pw { position: relative; }
#order-flexus_cart .fx-checkout-pw .field {
  padding-right: 42px;
}
#order-flexus_cart .fx-checkout-pw__toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  border: 0;
  background: transparent;
  color: var(--color-fog);
  padding: 4px 6px;
  cursor: pointer;
  line-height: 1;
}
#order-flexus_cart .fx-checkout-pw__toggle:hover { color: var(--color-charcoal); }
#order-flexus_cart .fx-checkout-pw__toggle.is-on { color: var(--color-notion-blue); }

.fx-checkout-pw-match {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-caption);
  min-height: 1.2em;
}
.fx-checkout-pw-match--ok { color: var(--color-vivid-green); font-weight: 500; }
.fx-checkout-pw-match--bad { color: #dc2626; font-weight: 500; }

/* Existing customer login — hide signup wizard, show login only */
.fx-checkout-page--existing #fxCheckoutStepper,
.fx-checkout-page--existing #fxCheckoutStepError {
  display: none !important;
}

.fx-checkout-form--existing .fx-checkout-step,
.fx-checkout-form--existing .fx-checkout-step-error {
  display: none !important;
}
.fx-checkout-form--existing .fx-checkout-section--payment {
  display: none !important;
}
.fx-checkout-form--existing #containerNewUserSignup {
  display: none !important;
}
.fx-checkout-form--existing .fx-checkout-guest-extra {
  display: none !important;
}

/* Flat mode — logged-in / server errors: show everything */
.fx-checkout-form--flat .fx-checkout-stepper { display: none; }
.fx-checkout-form--flat .fx-checkout-step.is-pending { display: block; }
.fx-checkout-form--flat .fx-checkout-step { display: block !important; }
.fx-checkout-form--flat .fx-checkout-step.is-open .fx-checkout-step__body,
.fx-checkout-form--flat .fx-checkout-step .fx-checkout-step__body { display: block; }
.fx-checkout-form--flat .fx-checkout-step__foot { display: none; }
.fx-checkout-form--flat .fx-checkout-step__head { pointer-events: none; }
.fx-checkout-form--flat .fx-checkout-step__chev { display: none; }

/* Field validation highlight in wizard */
.fx-checkout-form--wizard .form-group.is-invalid .field,
.fx-checkout-form--wizard .form-group.is-invalid .form-control {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}

/* ============================================================
   Configure domains — bento layout (homepage Notion energy)
   ============================================================ */
.fx-confdomains-page__main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-width: 0;
}
.fx-confdomains-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}
.fx-confdomains-block {
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  background: var(--color-canvas-white);
  overflow: hidden;
}
.fx-confdomains-block + .fx-confdomains-block { margin-top: 0; }

.fx-confdomains-domain {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--spacing-12);
  align-items: center;
  padding: var(--spacing-14) var(--spacing-16);
  background: var(--color-paper-warmth);
  border-bottom: 1px solid var(--color-ash);
  margin: 0;
  border-radius: 0;
}
.fx-confdomains-domain__orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: var(--color-canvas-white);
  border: 1px solid var(--color-ash);
  flex-shrink: 0;
}
.fx-confdomains-domain__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fx-confdomains-domain__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-fog);
}
.fx-confdomains-domain__name {
  font-family: var(--font-geist-mono);
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-charcoal);
  word-break: break-word;
}
.fx-confdomains-domain__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: var(--text-caption);
  color: var(--color-fog);
  text-align: right;
}
.fx-confdomains-domain__has-hosting {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-vivid-green);
  font-weight: 600;
}
.fx-confdomains-domain__no-hosting {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #dc2626;
  font-weight: 600;
  text-decoration: none;
}
.fx-confdomains-domain__no-hosting:hover { color: #b91c1c; }

.fx-confdomains-epp {
  padding: var(--spacing-16);
  border-bottom: 1px solid var(--color-ash);
}
.fx-confdomains-epp__label {
  display: block;
  margin: 0 0 8px;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-charcoal);
}
.fx-confdomains-epp .fx-notion-domain__field {
  margin-top: 0;
  max-width: 100%;
}
.fx-confdomains-epp__help {
  margin: 8px 0 0;
  font-size: var(--text-caption);
  color: var(--color-fog);
  line-height: 1.45;
}

.fx-confdomains-addons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-12);
  padding: var(--spacing-16);
}
.fx-confdomains-addons__cell { min-width: 0; }

#order-flexus_cart .fx-confdomains-addons .panel-addon {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 180px;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  background: var(--color-canvas-white);
  box-shadow: none;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
#order-flexus_cart .fx-confdomains-addons .panel-addon:hover {
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
  transform: translateY(-1px);
}
#order-flexus_cart .fx-confdomains-addons .panel-addon.panel-addon-selected {
  border-color: var(--color-notion-blue);
  box-shadow: 0 0 0 3px rgba(0,117,222,.12);
}
#order-flexus_cart .fx-confdomains-addons .panel-addon .panel-body {
  flex: 1;
  padding: var(--spacing-14);
  font-size: var(--text-caption);
  color: var(--color-graphite);
  line-height: 1.45;
}
#order-flexus_cart .fx-confdomains-addons .panel-addon .panel-body label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-charcoal);
  cursor: pointer;
  margin: 0 0 8px;
}
#order-flexus_cart .fx-confdomains-addons .panel-addon .panel-body p {
  margin: 0;
  color: var(--color-fog);
}
#order-flexus_cart .fx-confdomains-addons .panel-addon .panel-price {
  padding: 10px var(--spacing-14);
  background: var(--color-paper-warmth);
  color: var(--color-charcoal);
  font-size: var(--text-caption);
  font-weight: 600;
  border-top: 1px solid var(--color-ash);
}
#order-flexus_cart .fx-confdomains-addons .panel-addon .panel-add {
  padding: 10px var(--spacing-14);
  background: var(--color-notion-blue);
  color: #fff;
  font-size: var(--text-caption);
  font-weight: 600;
  text-align: center;
}
#order-flexus_cart .fx-confdomains-addons .panel-addon.panel-addon-selected .panel-add {
  background: var(--color-deep-sapphire);
}

.fx-confdomains-fields {
  padding: var(--spacing-12) var(--spacing-16) var(--spacing-16);
  border-top: 1px solid var(--color-ash);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}
.fx-confdomains-fields__row {
  display: grid;
  grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
  gap: var(--spacing-12);
  align-items: center;
}
.fx-confdomains-fields__label {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-graphite);
}
.fx-confdomains-fields__input .field,
.fx-confdomains-fields__input select,
.fx-confdomains-fields__input input {
  width: 100%;
}

.fx-confdomains-ns {
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  background: var(--color-canvas-white);
  padding: var(--spacing-16) var(--spacing-20);
}
.fx-confdomains-ns__head { margin-bottom: var(--spacing-16); }
.fx-confdomains-ns__title {
  margin: 0 0 6px;
  font-size: var(--text-body-xl);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--color-charcoal);
}
.fx-confdomains-ns__lead {
  margin: 0;
  font-size: var(--text-body);
  color: var(--color-graphite);
  line-height: 1.45;
}
.fx-confdomains-ns__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-12);
}
.fx-confdomains-ns__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-graphite);
}
.fx-confdomains-ns__field .fx-input {
  font-family: var(--font-geist-mono);
  font-size: var(--text-body);
}

.fx-confdomains-actions {
  display: flex;
  justify-content: flex-start;
  padding-top: var(--spacing-4);
}
.fx-confdomains-actions .fx-btn-lg {
  padding-inline: clamp(20px, 3vw, 28px);
  gap: 10px;
}

.fx-confdomains-page__rail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}
.fx-confdomains-rail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}
.fx-confdomains-rail__card {
  background: var(--color-canvas-white);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  padding: var(--spacing-14) var(--spacing-16);
}
.fx-confdomains-rail__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-charcoal);
}
.fx-confdomains-rail__text {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--color-graphite);
  line-height: 1.45;
}
.fx-confdomains-rail__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-notion-blue);
  text-decoration: none;
}
.fx-confdomains-rail__link:hover { color: var(--color-deep-sapphire); }

@media (max-width: 700px) {
  .fx-confdomains-domain {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .fx-confdomains-domain__meta {
    grid-column: 2 / -1;
    align-items: flex-start;
    text-align: left;
  }
  .fx-confdomains-ns__grid { grid-template-columns: 1fr; }
  .fx-confdomains-fields__row { grid-template-columns: 1fr; }
  .fx-confdomains-addons { grid-template-columns: 1fr; }
}

/* Secure notice */
.fx-checkout-secure {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--spacing-20);
  padding: 12px 16px;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-lg);
  background: var(--color-paper-warmth);
  font-size: var(--text-caption);
  color: var(--color-graphite);
}
.fx-checkout-secure i { color: var(--color-vivid-green); }

/* Marketing sections spacing */
.fx-cart-page__quick { padding-block: clamp(32px, 5vw, 56px); border-top: 1px solid var(--color-ash); }
.fx-cart-page__stats { padding-block: 0 clamp(40px, 6vw, 72px); }
.fx-cart-page__stats .fx-statstrip {
  border: 1px solid var(--color-ash);
  border-radius: clamp(14px, 2vw, 20px);
  overflow: hidden;
  background: var(--color-pure-white);
}

/* Mobile stack tiles */
@media (max-width: 700px) {
  #order-flexus_cart .fx-cart-stack__item {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  #order-flexus_cart .fx-cart-stack__price {
    grid-column: 2 / -1;
    grid-row: 2;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
    width: 100%;
    margin-top: 8px;
  }
  #order-flexus_cart .fx-cart-stack__qty {
    grid-column: 2 / -1;
    grid-row: 3;
    flex-direction: row;
    justify-content: flex-start;
  }
  #order-flexus_cart .fx-cart-stack__item--addon { margin-left: 0; }
}

/* ---- Product groups (/store/vps, Shared, Reseller, …) ---- */
.fx-products-page__plans {
  padding: 0 0 clamp(40px, 6vw, 72px);
}
.fx-products-page__plans.fx-host-pricing {
  background: transparent;
}
.fx-products-page .fx-host-plans {
  margin-top: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--spacing-16);
}
@media (max-width: 960px) {
  .fx-products-page .fx-host-plans {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-inline: auto;
  }
}
.fx-products-page .fx-host-plan {
  height: 100%;
}
.fx-products-page .fx-host-plan__head > p.fx-host-plan__desc,
.fx-products-page .fx-host-plan__head > p:not(.fx-products-card__qty) {
  min-height: 3.9em;
}
.fx-products-page .fx-host-plan__price--whmcs {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-wrap: wrap;
}
.fx-products-page .fx-host-plan__price--whmcs .fx-host-plan__currency {
  font-size: 28px;
  font-weight: 600;
  color: var(--color-charcoal);
  margin-right: 2px;
}
.fx-products-page .fx-host-plan__price--whmcs .fx-host-plan__amount {
  font-size: clamp(40px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--color-charcoal);
  line-height: 1;
}
.fx-products-page .fx-host-plan__price--whmcs .fx-host-plan__period {
  margin-left: 6px;
  color: var(--color-fog);
  font-size: var(--text-body);
}
.fx-products-page .fx-host-plan__highlights + .fx-host-plan__includes {
  margin-top: 0;
}
#order-flexus_cart .fx-host-plan .product-desc {
  float: none;
  width: auto;
  padding: 0;
  font-size: inherit;
}
#order-flexus_cart .fx-host-plan .product-pricing {
  float: none;
  width: auto;
  margin: 0;
}
.fx-products-page .fx-host-plan__head > .fx-products-card__qty {
  margin: -4px 0 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-fog);
}
.fx-products-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--spacing-8);
}
.fx-products-cats__chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-full);
  background: var(--color-canvas-white);
  color: var(--color-graphite);
  font-size: var(--text-caption);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.fx-products-cats__chip:hover {
  border-color: rgba(0,0,0,.2);
  color: var(--color-charcoal);
}
.fx-products-cats__chip.is-active {
  background: var(--color-sky-tint);
  border-color: transparent;
  color: var(--color-notion-blue);
}
.fx-products-card__from {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-fog);
  margin-bottom: 2px;
}
.fx-products-card__setup {
  display: block;
  font-size: 12px;
  color: var(--color-fog);
  font-weight: 500;
}
.fx-products-page__empty { margin-top: var(--spacing-24); }

.fx-products-currency {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--spacing-12);
}
.fx-products-currency__chip {
  display: inline-flex;
  padding: 4px 10px;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-fog);
  text-decoration: none;
}
.fx-products-currency__chip.is-active,
.fx-products-currency__chip:hover {
  color: var(--color-notion-blue);
  border-color: transparent;
  background: var(--color-sky-tint);
}

/* ---- Configure product (cart.php?a=confproduct) — homepage Notion bento ---- */
.fx-confproduct-page.fx-cart-page {
  background: var(--color-paper-warmth);
}
.fx-confproduct-page .fx-notion-domain {
  padding-block: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 28px);
}
.fx-confproduct-page__main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-width: 0;
}
.fx-confproduct-page .fx-notion-domain__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Kill standard_cart dark #666 order-summary (we nest #order-standard_cart for iCheck) */
#order-flexus_cart #order-standard_cart .order-summary.fx-cart-summary,
#order-flexus_cart #order-standard_cart .fx-cart-summary.order-summary,
#order-flexus_cart.fx-confproduct-page #order-standard_cart .order-summary,
.fx-confproduct-page #orderSummary.order-summary {
  margin: 0 !important;
  padding: clamp(16px, 2vw, 22px) !important;
  background: var(--color-canvas-white) !important;
  background-color: var(--color-canvas-white) !important;
  border: 1px solid var(--color-ash) !important;
  border-bottom: 1px solid var(--color-ash) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: none !important;
  position: relative;
  width: 100%;
  color: var(--color-charcoal) !important;
}
#order-flexus_cart #order-standard_cart .fx-cart-summary .summary-container,
#order-flexus_cart #order-standard_cart .order-summary .summary-container,
#order-flexus_cart.fx-confproduct-page #order-standard_cart .summary-container,
.fx-confproduct-page #orderSummary .summary-container {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  font-size: inherit !important;
  color: inherit !important;
}
#order-flexus_cart #order-standard_cart .fx-cart-summary .fx-cart-summary__title,
#order-flexus_cart #order-standard_cart .order-summary .fx-cart-summary__title {
  margin: 0 0 var(--spacing-16) !important;
  padding: 0 !important;
  color: var(--color-charcoal) !important;
  background: transparent !important;
  text-align: left !important;
  font-size: clamp(18px, 2vw, 22px) !important;
  font-weight: 600 !important;
}
#order-flexus_cart #order-standard_cart .fx-cart-summary .loader,
.fx-confproduct-page #orderSummaryLoader.loader {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  height: auto !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.78);
  border-radius: inherit;
  color: var(--color-notion-blue) !important;
  z-index: 2;
  text-align: center;
}
.fx-confproduct-page__visual {
  display: flex !important;
  flex-direction: column;
  gap: var(--spacing-16);
  justify-content: center;
  background: #d4e8f7 !important;
  min-height: 360px;
  padding: clamp(24px, 4vw, 36px) !important;
}
.fx-confproduct-status {
  width: 100%;
  margin-top: 0 !important;
}
.fx-confproduct-summary__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--spacing-12);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-notion-blue);
  text-decoration: none;
}
.fx-confproduct-summary__link:hover { text-decoration: underline; }
.fx-confproduct-page__quick {
  padding-block: clamp(24px, 4vw, 48px) clamp(40px, 6vw, 72px);
}

.fx-confproduct-block {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.fx-confproduct-block + .fx-confproduct-block {
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--color-ash);
}
.fx-confproduct-block__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--spacing-14);
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--color-charcoal);
}
.fx-confproduct-block__title small {
  width: 100%;
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--color-fog);
}
.fx-confproduct-block__lead {
  margin: -4px 0 var(--spacing-12);
  font-size: var(--text-caption);
  color: var(--color-graphite);
}

/* Configurable option cards (shared language with billing cycle) */
.fx-confproduct-grid--opts {
  grid-template-columns: 1fr;
}
.fx-config-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fx-config-opt__label {
  font-size: 13px;
  font-weight: 650;
  color: var(--color-charcoal);
  letter-spacing: -.01em;
}
.fx-config-opt__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
  gap: 10px;
}
.fx-config-opt__grid--toggle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 360px;
}
.fx-config-opt__native,
.fx-config-opt__radios,
.fx-config-opt__radio {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.fx-config-opt__cycle-note {
  margin: 0 0 12px;
}
.fx-config-opt__cycle-note b { color: var(--color-charcoal); }
.fx-config-opt__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 14px 36px 14px 14px;
  border: 1px solid var(--color-ash);
  border-radius: 16px;
  background: var(--color-pure-white);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
  min-height: 108px;
  width: 100%;
}
.fx-config-opt__orb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 5px 10px 5px 7px;
  border-radius: 999px;
  background: var(--color-paper-warmth, #f8fafc);
  color: var(--color-graphite);
  font-size: 12px;
  font-weight: 600;
}
.fx-config-opt__orb i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e8f2fc;
  color: var(--color-notion-blue);
  font-size: 10px;
}
.fx-config-opt__orb em {
  font-style: normal;
  font-family: var(--font-geist-mono, ui-monospace, monospace);
  color: var(--color-fog);
  font-size: 11px;
}
.fx-config-opt__card.is-selected .fx-config-opt__orb {
  background: #e8f2fc;
}
.fx-config-opt__cycle {
  display: inline-block;
  margin-left: 4px;
  color: var(--color-fog);
}
.fx-config-opt__cycle::before {
  content: '·';
  margin-right: 4px;
}
.fx-config-opt__plus {
  margin: 0 4px;
  color: var(--color-fog);
}
.fx-config-opt__setup {
  color: var(--color-graphite);
}
.fx-config-opt__card:hover {
  border-color: rgba(0, 117, 222, .35);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  transform: translateY(-1px);
}
.fx-config-opt__card:focus {
  outline: none;
}
.fx-config-opt__card:focus-visible {
  border-color: var(--color-notion-blue);
  box-shadow: 0 0 0 3px rgba(0, 117, 222, .18);
}
.fx-config-opt__card.is-selected {
  border-color: var(--color-notion-blue);
  background: rgba(0, 117, 222, .04);
  box-shadow: 0 0 0 1px var(--color-notion-blue), 0 10px 28px rgba(0, 117, 222, .12);
}
.fx-config-opt__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
.fx-config-opt__copy b {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--color-charcoal);
  line-height: 1.25;
  word-break: break-word;
}
.fx-config-opt__copy small {
  font-size: 12px;
  color: var(--color-graphite);
  word-break: break-word;
}
.fx-config-opt__check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ash);
  color: transparent;
  font-size: 10px;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.fx-config-opt__card.is-selected .fx-config-opt__check {
  background: var(--color-notion-blue);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 117, 222, .28);
}
.fx-config-opt .icheckbox_square-blue,
.fx-config-opt .iradio_square-blue,
.fx-config-opt .icheckbox_flat-blue,
.fx-config-opt .iradio_flat-blue {
  display: none !important;
}
@media (max-width: 640px) {
  .fx-config-opt__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Billing cycle cards */
.fx-billing-cycle__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.fx-billing-cycle {
  position: relative;
}
.fx-billing-cycle__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.fx-billing-cycle__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 40px 16px 14px;
  border: 1px solid var(--color-ash);
  border-radius: 16px;
  background: var(--color-pure-white);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
  min-height: 124px;
  width: 100%;
}
.fx-billing-cycle__card:hover {
  border-color: rgba(0, 117, 222, .35);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  transform: translateY(-1px);
}
.fx-billing-cycle__card:focus {
  outline: none;
}
.fx-billing-cycle__card:focus-visible {
  border-color: var(--color-notion-blue);
  box-shadow: 0 0 0 3px rgba(0, 117, 222, .18);
}
.fx-billing-cycle__card.is-selected {
  border-color: var(--color-notion-blue);
  background: rgba(0, 117, 222, .04);
  box-shadow: 0 0 0 1px var(--color-notion-blue), 0 10px 28px rgba(0, 117, 222, .12);
}
.fx-billing-cycle__badge {
  position: absolute;
  top: 10px;
  left: 14px;
  z-index: 1;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.fx-billing-cycle__card:has(.fx-billing-cycle__badge) {
  padding-top: 32px;
}
.fx-billing-cycle__orb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
  background: var(--color-paper-warmth, #f8fafc);
  color: var(--color-graphite);
  font-size: 12px;
  font-weight: 600;
}
.fx-billing-cycle__orb i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e8f2fc;
  color: var(--color-notion-blue);
  font-size: 11px;
}
.fx-billing-cycle__orb em {
  font-style: normal;
  font-family: var(--font-geist-mono, ui-monospace, monospace);
  color: var(--color-fog);
  font-size: 11px;
}
.fx-billing-cycle__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.fx-billing-cycle__copy b {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--color-charcoal);
  line-height: 1.2;
}
.fx-billing-cycle__copy small {
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-graphite);
  word-break: break-word;
}
.fx-billing-cycle__check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ash);
  color: transparent;
  font-size: 10px;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.fx-billing-cycle__card.is-selected .fx-billing-cycle__check {
  background: var(--color-notion-blue);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 117, 222, .28);
}
.fx-billing-cycle__card.is-selected .fx-billing-cycle__orb {
  background: #e8f2fc;
}
/* Kill any leftover iCheck widgets inside billing cycle */
.fx-billing-cycle .icheckbox_square-blue,
.fx-billing-cycle .iradio_square-blue,
.fx-billing-cycle .icheckbox_flat-blue,
.fx-billing-cycle .iradio_flat-blue {
  display: none !important;
}
@media (max-width: 640px) {
  .fx-billing-cycle__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.fx-confproduct-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-14);
}
.fx-confproduct-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.fx-confproduct-field--full { grid-column: 1 / -1; }
.fx-confproduct-field label,
.fx-confproduct-field__label {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-graphite);
}
.fx-confproduct-select,
.fx-confproduct-field .fx-input,
.fx-confproduct-field .form-control,
.fx-confproduct-field input[type="text"],
.fx-confproduct-field input[type="password"],
.fx-confproduct-field input[type="number"],
.fx-confproduct-field textarea,
.fx-confproduct-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-lg);
  background: var(--color-paper-warmth);
  font-size: var(--text-body);
  font-family: var(--font-inter);
  color: var(--color-charcoal);
  outline: none;
  transition: border-color .2s ease, background .2s ease;
}
.fx-confproduct-select:focus,
.fx-confproduct-field .fx-input:focus,
.fx-confproduct-field .form-control:focus,
.fx-confproduct-field input:focus,
.fx-confproduct-field textarea:focus,
.fx-confproduct-field select:focus {
  border-color: rgba(0,0,0,.22);
  background: var(--color-pure-white);
}
.fx-confproduct-field--radios {
  gap: 8px;
}
.fx-confproduct-radio,
.fx-confproduct-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--text-body);
  color: var(--color-charcoal);
  font-weight: 500;
  cursor: pointer;
}
.fx-confproduct-qty {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fx-confproduct-qty .form-control-qty { width: 96px; }
.fx-confproduct-help {
  font-size: var(--text-caption);
  color: var(--color-fog);
}
.fx-confproduct-help-contact {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--color-fog);
}
.fx-confproduct-help-contact a {
  color: var(--color-notion-blue);
  font-weight: 600;
  text-decoration: none;
}
.fx-confproduct-metrics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fx-confproduct-metrics li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-ash);
  font-size: var(--text-caption);
  color: var(--color-graphite);
}
.fx-confproduct-metrics li:last-child { border-bottom: 0; }

.fx-confproduct-page .addon-products .panel-addon {
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  background: var(--color-canvas-white);
  box-shadow: none;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  margin-bottom: 12px;
}
.fx-confproduct-page .addon-products .panel-addon:hover {
  border-color: rgba(0,0,0,.18);
}
.fx-confproduct-page .addon-products .panel-addon.panel-addon-selected {
  border-color: var(--color-notion-blue);
  background: rgba(0,117,222,.04);
}
.fx-confproduct-page .addon-products .panel-addon .panel-body {
  padding: 14px 16px 8px;
  font-size: var(--text-caption);
  color: var(--color-graphite);
}
.fx-confproduct-page .addon-products .panel-addon .panel-body label {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-charcoal);
  margin: 0;
  cursor: pointer;
}
.fx-confproduct-page .addon-products .panel-addon .panel-price {
  padding: 0 16px 8px;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-charcoal);
}
.fx-confproduct-page .addon-products .panel-addon .panel-add {
  padding: 10px 16px;
  border-top: 1px solid var(--color-ash);
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-notion-blue);
}
.fx-confproduct-page .addon-products .panel-addon.panel-addon-selected .panel-add {
  color: #047857;
}

/* AJAX order summary inside confproduct rail */
.fx-confproduct-page #producttotal {
  margin-bottom: var(--spacing-16);
}
.fx-confproduct-page #producttotal .product-name {
  display: block;
  margin-bottom: 4px;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-charcoal);
}
.fx-confproduct-page #producttotal .product-group {
  display: block;
  margin-bottom: 12px;
  font-size: var(--text-caption);
  color: var(--color-fog);
  font-style: normal;
}
.fx-confproduct-page #producttotal .clearfix,
.fx-confproduct-page #producttotal .fx-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid var(--color-ash);
  font-size: var(--text-caption);
  color: var(--color-graphite);
}
.fx-confproduct-page #producttotal .clearfix::before,
.fx-confproduct-page #producttotal .clearfix::after,
.fx-confproduct-page #producttotal .fx-summary-row::before,
.fx-confproduct-page #producttotal .fx-summary-row::after {
  content: none !important;
  display: none !important;
}
.fx-confproduct-page #producttotal .summary-totals .clearfix:last-child,
.fx-confproduct-page #producttotal .summary-totals .fx-summary-row:last-child {
  border-bottom: 0;
}
.fx-confproduct-page #producttotal .pull-left,
.fx-confproduct-page #producttotal .pull-right,
.fx-confproduct-page #producttotal .float-left,
.fx-confproduct-page #producttotal .float-right {
  float: none;
}
.fx-confproduct-page #producttotal .summary-totals {
  margin-top: 4px;
  padding-top: 0;
  border: 0;
}
.fx-confproduct-page #producttotal .total-due-today {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 4px;
  padding: var(--spacing-16) 0 0;
  border-top: 1px solid var(--color-ash);
  margin-top: 10px;
}
.fx-confproduct-page #producttotal .total-due-today .amt {
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--color-charcoal);
}
.fx-confproduct-page #producttotal .total-due-today > span:not(.amt) {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-graphite);
}

@media (max-width: 900px) {
  .fx-confproduct-grid { grid-template-columns: 1fr; }
}

/* Server config — clean fields, no fluff */
.fx-server-panel {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.fx-server-panel__stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fx-server-panel__ns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.fx-server-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.fx-server-field__label {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-graphite);
}
.fx-server-field__control {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 12px;
  background: var(--color-paper-warmth);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-lg);
  transition: border-color .15s ease, background .15s ease;
}
.fx-server-field__control:focus-within {
  border-color: rgba(0,0,0,.22);
  background: var(--color-pure-white);
}
.fx-server-field__control > i {
  width: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--color-notion-blue);
  flex-shrink: 0;
}
.fx-server-field__control .form-control,
.fx-server-field__control input {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
  padding: 11px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: var(--text-body);
  font-family: var(--font-inter);
  color: var(--color-charcoal);
  outline: none !important;
}
.fx-server-field__control input::placeholder {
  color: var(--color-fog);
}
.fx-server-field__reveal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-fog);
  cursor: pointer;
  flex-shrink: 0;
}
.fx-server-field__reveal:hover,
.fx-server-field__reveal.is-on { color: var(--color-charcoal); }
.fx-server-field__reveal i { transition: transform .15s ease, opacity .15s ease; }
.fx-server-field__reveal.is-on i { transform: scale(1.05); }

.fx-server-panel .fx-pw-meter {
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-ash);
  overflow: hidden;
}
.fx-server-panel .fx-pw-meter__bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--color-fog);
  transition: width .2s ease, background .2s ease;
}
.fx-server-panel .fx-pw-meter__bar.is-weak { background: #dc2626; }
.fx-server-panel .fx-pw-meter__bar.is-ok { background: #d97706; }
.fx-server-panel .fx-pw-meter__bar.is-strong { background: #16a34a; }
.fx-server-panel .fx-pw-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--color-fog);
}

@media (max-width: 640px) {
  .fx-server-panel__ns { grid-template-columns: 1fr; }
}

/* Virtualizor / VPS OS picker */
.fx-confproduct-field:has(.fx-os-picker),
.fx-confproduct-field--os {
  position: relative;
  grid-column: 1 / -1;
}
.fx-os-picker {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 4px;
}
.fx-os-picker__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.fx-os-picker__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fx-os-picker__title {
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--color-charcoal);
}
.fx-os-picker__req {
  font-style: normal;
  color: #e11d48;
  margin-left: 2px;
}
.fx-os-picker__sub {
  font-size: var(--text-caption);
  color: var(--color-fog);
}
.fx-os-picker__error {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  background: #fff1f2;
  color: #be123c;
  font-size: var(--text-caption);
  font-weight: 600;
}
.fx-os-picker.is-invalid .fx-os-picker__cats {
  outline: 2px solid rgba(225, 29, 72, .25);
  outline-offset: 4px;
  border-radius: var(--radius-full);
}
.fx-os-picker.is-invalid .fx-os-card {
  border-color: rgba(225, 29, 72, .28);
}
.fx-os-picker__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fx-os-picker__cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-full);
  background: var(--color-pure-white);
  color: var(--color-graphite);
  font-size: var(--text-caption);
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.fx-os-picker__cat i { font-size: 14px; }
.fx-os-picker__cat em {
  font-style: normal;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--color-paper-warmth);
  color: var(--color-fog);
  font-size: 11px;
  text-align: center;
}
.fx-os-picker__cat:hover {
  border-color: rgba(0,0,0,.18);
  color: var(--color-charcoal);
}
.fx-os-picker__cat.is-active {
  background: var(--color-sky-tint);
  border-color: transparent;
  color: var(--color-notion-blue);
}
.fx-os-picker__cat.is-active em {
  background: rgba(0,117,222,.12);
  color: var(--color-notion-blue);
}
.fx-os-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.fx-os-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  background: var(--color-pure-white);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.fx-os-card:hover {
  border-color: rgba(0,0,0,.18);
  transform: translateY(-1px);
}
.fx-os-card.is-selected {
  border-color: var(--color-notion-blue);
  background: rgba(0,117,222,.04);
}
.fx-os-card__orb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--color-paper-warmth);
  color: var(--color-charcoal);
  font-size: 18px;
  flex-shrink: 0;
}
.fx-os-card--ubuntu .fx-os-card__orb { background: #fff4e8; color: #e95420; }
.fx-os-card--debian .fx-os-card__orb { background: #fdecef; color: #a81d33; }
.fx-os-card--alma .fx-os-card__orb { background: #fde8e8; color: #c21807; }
.fx-os-card--rocky .fx-os-card__orb { background: #e8faf3; color: #10b981; }
.fx-os-card--centos .fx-os-card__orb { background: #eef0fb; color: #262577; }
.fx-os-card--suse .fx-os-card__orb { background: #e8f5ee; color: #0c322c; }
.fx-os-card--windows .fx-os-card__orb { background: #e8f2fc; color: #0078d4; }
.fx-os-card--none .fx-os-card__orb { background: #f1f5f9; color: #64748b; }
.fx-os-card__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fx-os-card__copy b {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-charcoal);
  letter-spacing: -.01em;
}
.fx-os-card__copy small {
  font-size: 11px;
  color: var(--color-fog);
}
.fx-os-card__check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ash);
  color: transparent;
  font-size: 11px;
  flex-shrink: 0;
}
.fx-os-card.is-selected .fx-os-card__check {
  background: var(--color-notion-blue);
  color: #fff;
}

/* ---- Available addons (cart.php?gid=addons) ---- */
.fx-addons-stack {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  background: var(--color-canvas-white);
  overflow: hidden;
}
.fx-addons-stack__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(12px, 2vw, 20px);
  align-items: start;
  margin: 0;
  padding: clamp(14px, 2vw, 20px);
  border: 0;
  border-bottom: 1px solid var(--color-ash);
  background: transparent;
}
.fx-addons-stack__item:last-child { border-bottom: 0; }
.fx-addons-stack__orb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #f1f5f9;
  flex-shrink: 0;
}
.fx-addons-stack__info { min-width: 0; }
.fx-addons-stack__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}
.fx-addons-stack__kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6d28d9;
}
.fx-addons-stack__name {
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--color-charcoal);
}
.fx-addons-stack__desc {
  margin: 0 0 12px;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--color-graphite);
}
.fx-addons-stack__attach {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 420px;
}
.fx-addons-stack__attach label {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-graphite);
}
.fx-addons-stack__select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  font-size: var(--text-body);
  color: var(--color-charcoal);
  appearance: auto;
}
.fx-addons-stack__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 140px;
}
.fx-addons-stack__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2px;
}
.fx-addons-stack__price b {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--color-charcoal);
}
.fx-addons-stack__price span,
.fx-addons-stack__price small {
  font-size: var(--text-caption);
  color: var(--color-fog);
}

.fx-addons-page__rail .fx-cart-summary {
  background: var(--color-canvas-white);
}
.fx-addons-page__rail-lead {
  margin: 0 0 var(--spacing-16);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-graphite);
}
.fx-addons-page__rail-list {
  list-style: none;
  margin: 0 0 var(--spacing-20);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--text-caption);
  color: var(--color-graphite);
}
.fx-addons-page__rail-list i {
  width: 16px;
  text-align: center;
  margin-right: 8px;
  color: var(--color-notion-blue);
}

@media (max-width: 900px) {
  .fx-addons-stack__item {
    grid-template-columns: auto 1fr;
  }
  .fx-addons-stack__aside {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
  }
  .fx-addons-stack__price { align-items: flex-start; text-align: left; }
}

/* ---- Domain renewals (/cart/domain/renew) ---- */
.fx-renew-page__filter {
  margin-bottom: var(--spacing-12);
}
.fx-renew-page__filter-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  padding: 10px 14px;
  background: var(--color-canvas-white);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-lg);
}
.fx-renew-page__filter-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--text-body);
  color: var(--color-charcoal);
}
.fx-renew-page__showing {
  margin: 0 0 var(--spacing-12);
  font-size: var(--text-caption);
  color: var(--color-fog);
}
.fx-renew-page__showing a {
  margin-left: 6px;
  color: var(--color-notion-blue);
  font-weight: 600;
  text-decoration: none;
}
.fx-renew-page__note {
  margin: var(--spacing-12) 0 0;
  font-size: var(--text-caption);
  color: var(--color-fog);
}

.fx-renew-stack {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-xl);
  background: var(--color-canvas-white);
  overflow: hidden;
}
.fx-renew-stack__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(12px, 2vw, 20px);
  align-items: start;
  padding: clamp(14px, 2vw, 20px);
  border-bottom: 1px solid var(--color-ash);
}
.fx-renew-stack__item:last-child { border-bottom: 0; }
.fx-renew-stack__orb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #f1f5f9;
  flex-shrink: 0;
}
.fx-renew-stack__info { min-width: 0; }
.fx-renew-stack__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}
.fx-renew-stack__kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #b45309;
}
.fx-renew-stack__name {
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--color-charcoal);
  word-break: break-word;
}
.fx-renew-stack__expiry {
  margin: 0 0 8px;
  font-size: var(--text-caption);
  color: var(--color-graphite);
}
.fx-renew-stack__expiry span { color: var(--color-fog); }
.fx-renew-stack__desc {
  margin: 0 0 10px;
  font-size: var(--text-caption);
  color: var(--color-fog);
}
.fx-renew-stack__period {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 420px;
}
.fx-renew-stack__period label {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-graphite);
  margin: 0;
}
.fx-renew-stack__select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  font-size: var(--text-body);
  color: var(--color-charcoal);
  appearance: auto;
}

.fx-renew-stack__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 140px;
}
.fx-renew-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.3;
  white-space: nowrap;
}
.fx-renew-badge--ok { background: #ecfdf5; color: #047857; }
.fx-renew-badge--warn { background: #fff7ed; color: #c2410c; }
.fx-renew-badge--danger { background: #fef2f2; color: #b91c1c; }
.fx-renew-badge--info { background: #eff6ff; color: #1d4ed8; }

.fx-renew-page .btn-add-renewal-to-cart .to-add i { display: none; }
.fx-renew-page .btn-add-renewal-to-cart[disabled] .to-add i { display: inline-block; }
.fx-renew-page .btn-add-renewal-to-cart .added { display: none; }
.fx-renew-page .btn-add-renewal-to-cart.checkout {
  background: #047857;
  border-color: #047857;
}

/* AJAX order summary (ordersummary.tpl) inside renew rail */
.fx-renew-page #producttotal {
  margin-bottom: var(--spacing-16);
}
.fx-renew-page #producttotal .product-name {
  display: block;
  margin-bottom: 10px;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-charcoal);
}
.fx-renew-page #producttotal .clearfix {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-ash);
  font-size: var(--text-caption);
  color: var(--color-graphite);
}
.fx-renew-page #producttotal .clearfix::after { display: none; }
.fx-renew-page #producttotal .pull-left,
.fx-renew-page #producttotal .pull-right,
.fx-renew-page #producttotal .float-left,
.fx-renew-page #producttotal .float-right {
  float: none;
}
.fx-renew-page #producttotal .summary-totals {
  margin-top: 8px;
  padding-top: 4px;
}
.fx-renew-page #producttotal .total-due-today {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 4px;
  padding: var(--spacing-16) 0 0;
  border-top: 1px solid var(--color-ash);
  margin-top: 8px;
}
.fx-renew-page #producttotal .total-due-today .amt {
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--color-charcoal);
}
.fx-renew-page #producttotal .total-due-today > span:not(.amt) {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-graphite);
}
.fx-renew-page #producttotal a {
  color: var(--color-fog);
  margin-left: 6px;
}
.fx-renew-page #producttotal a:hover { color: #dc2626; }

@media (max-width: 900px) {
  .fx-renew-stack__item {
    grid-template-columns: auto 1fr;
  }
  .fx-renew-stack__aside {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
  }
}

/* ---- Product require-domain — same bento as domain register ---- */
.fx-product-domain-page.fx-domain-page {
  background: var(--color-paper-warmth);
}
.fx-product-domain-page .fx-notion-domain__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fx-product-domain-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 4px;
}
.fx-product-domain-mode {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-full);
  background: var(--color-pure-white);
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-graphite);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.fx-product-domain-mode input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.fx-product-domain-mode:has(input:checked),
.fx-product-domain-mode.option-selected {
  background: var(--color-sky-tint, rgba(0,117,222,.08));
  border-color: transparent;
  color: var(--color-notion-blue);
}
/* Keep WHMCS iCheck working, hide its square inside our pills */
.fx-product-domain-mode .iradio_square-blue,
.fx-product-domain-mode .icheckbox_square-blue {
  display: none !important;
}
.fx-product-domain-page .domain-input-group {
  margin: 0;
}
.fx-product-domain-page .fx-notion-domain__form {
  margin-top: var(--spacing-16);
  align-items: stretch;
}
.fx-product-domain-www {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-fog);
  flex-shrink: 0;
  white-space: nowrap;
}
.fx-product-domain-tld-select,
.fx-product-domain-select-plain {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-lg);
  background: var(--color-paper-warmth);
  padding: 0 14px;
  font-size: var(--text-body);
  font-family: var(--font-inter);
  font-weight: 600;
  color: var(--color-charcoal);
  min-width: 96px;
  outline: none;
}
.fx-product-domain-select-plain {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 14px 0;
  font-weight: 500;
}
.fx-product-domain-ai-input {
  flex: 1;
  width: 100%;
  min-height: 88px;
  border: 0;
  background: transparent;
  padding: 8px 0;
  font-family: var(--font-inter);
  font-size: var(--text-body);
  color: var(--color-charcoal);
  resize: vertical;
  outline: none;
}
.fx-product-domain-page .fx-domain-page__note {
  margin: 12px 0 0;
  font-size: var(--text-caption);
  color: var(--color-fog);
}
/* Product domain — identical visual results card as Domain Register */
.fx-product-domain-page .fx-notion-domain__visual {
  min-height: clamp(220px, 32vw, 320px);
}
.fx-product-domain-page.has-results .fx-notion-domain__visual {
  opacity: 1;
}
.fx-product-domain-page #fx-domain-live-results #btnDomainContinue {
  margin-top: 12px;
}
.fx-product-domain-page .cart-sidebar,
.fx-product-domain-page .sidebar-collapsed {
  display: none !important;
}
@media (max-width: 620px) {
  .fx-product-domain-page .fx-notion-domain__form .fx-product-domain-tld-select {
    width: 100%;
  }
}

/* ---- Flexus Product Recommendations / Cross-sell ---- */
.fx-reco-modal .modal-dialog,
.fx-reco-modal__dialog {
  max-width: 560px;
  margin: 48px auto;
}
.fx-reco-modal__content {
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .18);
}
.fx-reco-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-ash);
  background: var(--color-paper-warmth, #f8fafc);
}
.fx-reco-modal__title {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--color-charcoal);
}
.fx-reco-modal__close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-ash);
  border-radius: 999px;
  background: #fff;
  color: var(--color-graphite);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fx-reco-modal__close:hover {
  border-color: var(--color-notion-blue);
  color: var(--color-notion-blue);
}
.fx-reco-modal__body {
  padding: 16px 20px 8px;
  max-height: min(70vh, 640px);
  overflow: auto;
}
.fx-reco-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--color-ash);
  background: #fff;
}
.fx-reco-modal__footer .btn,
.fx-reco-modal__footer .fx-btn { min-width: 140px; }

.fx-reco-added {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}
.fx-reco-added__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #047857;
  color: #fff;
  font-size: 12px;
  flex-shrink: 0;
}
.fx-reco-added__kicker {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #047857;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.fx-reco-added__copy b {
  display: block;
  font-size: 14px;
  color: var(--color-charcoal);
}
.fx-reco-added__copy small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-graphite);
}

.fx-reco__lead {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--color-graphite);
}
.fx-reco__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.fx-reco__head h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  color: var(--color-charcoal);
}
.fx-reco__head small {
  color: var(--color-fog);
  font-size: 12px;
}
.fx-reco__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Override stock WHMCS recommendation cards */
#order-flexus_cart .product-recommendations .product-recommendation,
.fx-reco-modal .product-recommendation,
.fx-complete-reco .product-recommendation,
.fx-reco-card {
  border: 1px solid var(--color-ash) !important;
  border-left: 3px solid var(--fx-reco, var(--color-notion-blue)) !important;
  border-radius: 14px !important;
  background: #fff !important;
  margin: 0 !important;
  overflow: hidden;
  box-shadow: none !important;
}
#order-flexus_cart .product-recommendations .product-recommendation .header,
.fx-reco-card__header {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  gap: 10px 12px;
  align-items: center;
  padding: 12px 14px !important;
  cursor: pointer;
}
.fx-reco-card__expander {
  order: 0;
  color: var(--fx-reco, var(--color-notion-blue)) !important;
  width: 22px;
  text-align: center;
}
.fx-reco-card__content {
  order: 1;
  min-width: 0;
}
.fx-reco-card__content .headline {
  font-size: 14px !important;
  font-weight: 650 !important;
  color: var(--color-charcoal) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fx-reco-card__content .tagline {
  font-size: 12px !important;
  color: var(--color-fog) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fx-reco-card__cta {
  order: 2;
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  position: static !important;
  float: none !important;
  width: auto !important;
}
.fx-reco-card__price {
  color: var(--fx-reco, var(--color-notion-blue)) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  text-align: right;
}
.fx-reco-card__price .setup-fee {
  display: block;
  font-weight: 500;
  color: var(--color-fog) !important;
}
.fx-reco-card__add,
.fx-reco-modal .btn-add {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--color-notion-blue) !important;
  color: #fff !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.fx-reco-card__add .arrow,
.fx-reco-modal .btn-add .arrow {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
}
.fx-reco-card__body,
.fx-reco-modal .product-recommendation .body {
  padding: 0 14px 12px !important;
  border-top: 0 !important;
  font-size: 12px;
  color: var(--color-graphite);
}
.fx-reco-modal .product-added-panel {
  display: none !important; /* replaced by .fx-reco-added */
}

.fx-complete-page .fx-complete-orderid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 18px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #e8f2fc;
  border: 1px solid rgba(0, 117, 222, .18);
}
.fx-complete-page .fx-complete-orderid span {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-notion-blue);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.fx-complete-page .fx-complete-orderid b {
  font-family: var(--font-geist-mono, ui-monospace, monospace);
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -.02em;
  color: var(--color-charcoal);
}
.fx-complete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.fx-complete-reco {
  padding: 8px 0 48px;
}
.fx-complete-reco .fx-reco {
  max-width: 720px;
  margin: 0 auto;
}