/* ==========================================================================
   SERVICE PLAN CARDS
   A shared comparison pattern for the public catalog and client order page.
   Product data and ordering behavior remain owned by their existing scripts.
   ========================================================================== */

/* Public catalog --------------------------------------------------------- */

.board-selector,
#clientOrderCatalogRoot {
  --service-card-radius: 14px;
  --service-icon-radius: 9px;
  --service-control-radius: 7px;
  --service-pill-radius: 99px;
}

.catalog-intro {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: center;
}

.catalog-intro h2 {
  margin: 0;
  color: var(--chalk);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
}

.catalog-intro p {
  margin: 12px auto 0;
  color: var(--chalk-dim);
  font-size: 0.95rem;
}

.board-selector .ledger-heads {
  display: none;
}

.board-selector .pricing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding-top: 20px;
}

.board-selector .pricing-card {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'head price'
    'specs specs'
    'order order';
  column-gap: 16px;
  row-gap: 18px;
  align-content: start;
  min-height: 254px;
  padding: 18px;
  color: var(--chalk);
  background: var(--board-rail);
  background-image: none;
  border: 1px solid var(--seam-strong);
  border-radius: var(--service-card-radius);
  box-shadow: 0 12px 28px -18px rgba(2, 4, 10, 0.82);
  backdrop-filter: none;
  transition: transform var(--tick), border-color var(--tick), background var(--tick), box-shadow var(--tick);
}

.board-selector .pricing-card::before,
.board-selector .pricing-card::after {
  content: none;
}

.board-selector .pricing-card:hover {
  transform: translateY(-4px);
  background: var(--board-lip);
  border-color: color-mix(in srgb, var(--steel) 54%, var(--seam-strong));
  box-shadow: 0 20px 42px -22px rgba(2, 4, 10, 0.9);
}

.board-selector .pricing-card.popular {
  border-color: var(--seam-strong);
  box-shadow: 0 12px 28px -18px rgba(2, 4, 10, 0.82);
}

.board-selector .pricing-ribbon {
  top: -12px;
  padding: 5px 12px;
  border-radius: var(--service-pill-radius);
  background: var(--steel);
  color: var(--board-deep);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  box-shadow: 0 7px 18px -10px rgba(2, 4, 10, 0.85);
}

.board-selector .card-head {
  grid-area: head;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  align-self: start;
  min-width: 0;
  padding: 0;
  border: 0;
}

.board-selector .plan-cloud-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--steel) 44%, transparent);
  border-radius: var(--service-icon-radius);
  color: var(--steel);
  background: color-mix(in srgb, var(--steel) 10%, transparent);
}

.board-selector .plan-cloud-svg {
  width: 18px;
  height: 18px;
}

.board-selector .plan-identity,
.board-selector .card-head > .plan-identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.board-selector .provider-pill {
  padding: 0;
  background: transparent;
  color: var(--chalk-dim);
  font-size: 0.58rem;
  letter-spacing: 0.11em;
}

.board-selector .card-head h3 {
  overflow-wrap: anywhere;
  color: var(--chalk);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
}

.board-selector .plan-type-pill {
  grid-column: 2;
  color: var(--chalk-dim);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
}

.board-selector .spec-list {
  grid-area: specs;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 18px;
  padding: 15px 0 0;
  border-top: 1px solid var(--seam);
}

.board-selector .spec-list li {
  gap: 3px;
  min-width: 0;
  padding: 0;
  border: 0;
}

.board-selector .spec-label {
  gap: 6px;
  color: var(--chalk-dim);
  font-size: 0.59rem;
  letter-spacing: 0.1em;
}

.board-selector .spec-icon {
  width: 13px;
  height: 13px;
  color: var(--steel);
}

.board-selector .spec-value {
  color: var(--chalk);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
}

.board-selector .price-stack {
  grid-area: price;
  display: grid;
  justify-items: end;
  align-self: start;
  gap: 4px;
  min-width: 92px;
  padding: 0;
  border: 0;
  text-align: right;
}

.board-selector .price-row > div {
  align-items: flex-end;
}

.board-selector .price-row small {
  color: var(--chalk-dim);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

.board-selector .price-row strong,
.board-selector .price-row + .price-row strong {
  color: var(--chalk);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.board-selector .price-row + .price-row strong {
  font-size: 0.95rem;
  color: var(--chalk);
}

.board-selector .price-note {
  max-width: 14ch;
  color: var(--chalk-dim);
  font-size: 0.58rem;
  line-height: 1.25;
}

.board-selector .price-note-alert {
  color: var(--red-chalk);
}

.board-selector .price-note-ok {
  color: var(--live);
}

.board-selector .order-btn {
  grid-area: order;
  align-self: end;
  min-height: 42px;
  padding: 11px 15px;
  border: 1px solid var(--seam-strong);
  border-radius: var(--service-control-radius);
  background: var(--board-lip);
  color: var(--chalk);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: none;
}

.board-selector .order-btn::after {
  content: '\2192';
  margin-left: 8px;
  font-size: 1rem;
  line-height: 1;
}

.board-selector .order-btn:hover,
[data-theme='bright'] .board-selector .order-btn:hover {
  border-color: var(--steel);
  background: var(--steel);
  color: var(--board-deep);
}

.board-selector .pricing-card.out-of-stock,
.board-selector .pricing-card.is-term-empty {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'head price'
    'stock stock'
    'specs specs'
    'order order';
  background: color-mix(in srgb, var(--board-rail) 76%, var(--board-deep));
  border-style: dashed;
  box-shadow: none;
}

.board-selector .pricing-card.out-of-stock:hover,
.board-selector .pricing-card.is-term-empty:hover {
  transform: none;
  box-shadow: none;
}

.board-selector .stock-note,
.board-selector .term-empty-note {
  grid-area: stock;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--red-chalk) 34%, transparent);
  border-radius: var(--service-control-radius);
  background: color-mix(in srgb, var(--red-chalk) 8%, transparent);
  color: var(--red-chalk);
  font-size: 0.68rem;
}

/* Client portal ---------------------------------------------------------- */

#clientOrderCatalogRoot {
  --service-card: #070a0f;
  --service-card-hover: #0b1018;
  --service-card-border: #1c293a;
  --service-card-seam: rgba(232, 239, 249, 0.09);
  --service-card-text: #edf2f8;
  --service-card-muted: #99a6b8;
  --service-card-accent: #72a7ff;
  --service-card-accent-strong: #4f8ff7;
  --service-tab-danger: #8f3d3d;
  --service-danger-border: rgba(255, 103, 103, 0.34);
  --service-danger-bg: rgba(255, 103, 103, 0.08);
  --service-danger-text: #ff9b9b;
  --service-shadow: 0 14px 32px -22px rgba(0, 0, 0, 0.9);
  --service-shadow-hover: 0 22px 46px -26px rgba(0, 0, 0, 0.96);
  --service-shadow-featured: 0 20px 42px -24px rgba(79, 143, 247, 0.72);
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#clientOrderCatalogRoot .client-order-provider-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 14px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

#clientOrderCatalogRoot .client-order-provider-tab {
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--service-card-accent) 52%, var(--service-card-border));
  border-radius: var(--service-icon-radius);
  background: #05080d;
  color: var(--service-card-muted);
  text-align: center;
  align-items: center;
  box-shadow:
    0 0 0 1px rgba(79, 143, 247, 0.12),
    0 0 13px rgba(79, 143, 247, 0.22),
    0 0 28px rgba(79, 143, 247, 0.1);
}

#clientOrderCatalogRoot .client-order-provider-tab:hover,
#clientOrderCatalogRoot .client-order-provider-tab.is-active {
  background: var(--service-card-hover);
  color: var(--service-card-text);
  border-color: var(--service-card-accent);
  box-shadow:
    0 0 0 1px rgba(79, 143, 247, 0.3),
    0 0 16px rgba(79, 143, 247, 0.4),
    0 0 34px rgba(79, 143, 247, 0.18);
}

#clientOrderCatalogRoot .client-order-provider-tab.is-active::after {
  content: '';
  position: absolute;
  right: 14px;
  bottom: -1px;
  left: 14px;
  height: 2px;
  background: var(--service-card-accent);
}

#clientOrderCatalogRoot .client-order-provider-tab.is-out-of-stock {
  border-color: var(--service-tab-danger);
  box-shadow: none;
}

#clientOrderCatalogRoot .client-order-provider-tab-label {
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

#clientOrderCatalogRoot .client-order-delivery-notice {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-color: var(--service-card-border);
  border-radius: var(--service-icon-radius);
  background: #05080d;
}

#clientOrderCatalogRoot .client-order-delivery-notice-text {
  color: var(--service-card-text);
  font-size: 0.67rem;
  letter-spacing: 0.11em;
}

#clientOrderCatalogRoot .client-order-delivery-notice-icon {
  color: var(--service-card-accent);
}

#clientOrderCatalogRoot .client-order-ledger-heads {
  display: none;
}

#clientOrderCatalogRoot .client-order-plan-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-top: 0;
}

#clientOrderCatalogRoot .client-order-plan-card {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'head price'
    'specs specs'
    'order order';
  column-gap: 16px;
  row-gap: 18px;
  align-content: start;
  min-height: 254px;
  padding: 18px;
  color: var(--service-card-text);
  background: var(--service-card);
  background-image: none;
  border: 1px solid var(--service-card-border);
  border-radius: var(--service-card-radius);
  box-shadow: var(--service-shadow);
  transition: transform 180ms cubic-bezier(0.33, 1, 0.68, 1), border-color 180ms cubic-bezier(0.33, 1, 0.68, 1), background 180ms cubic-bezier(0.33, 1, 0.68, 1), box-shadow 180ms cubic-bezier(0.33, 1, 0.68, 1);
}

#clientOrderCatalogRoot .client-order-plan-card::before,
#clientOrderCatalogRoot .client-order-plan-card::after {
  content: none;
}

#clientOrderCatalogRoot .client-order-plan-card:hover {
  transform: translateY(-4px);
  background: var(--service-card-hover);
  border-color: color-mix(in srgb, var(--service-card-accent) 58%, var(--service-card-border));
  box-shadow: var(--service-shadow-hover);
}

#clientOrderCatalogRoot .client-order-plan-card.is-featured {
  border-color: var(--service-card-accent);
  box-shadow: var(--service-shadow-featured);
}

#clientOrderCatalogRoot .client-order-plan-head {
  grid-area: head;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
}

#clientOrderCatalogRoot .client-order-plan-cloud-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--service-card-accent) 44%, transparent);
  border-radius: var(--service-icon-radius);
  color: var(--service-card-accent);
  background: color-mix(in srgb, var(--service-card-accent) 10%, transparent);
}

#clientOrderCatalogRoot .client-order-plan-cloud-svg {
  width: 18px;
  height: 18px;
}

#clientOrderCatalogRoot .client-order-plan-title {
  gap: 3px;
  min-width: 0;
}

#clientOrderCatalogRoot .client-order-plan-provider {
  padding: 0;
  background: transparent;
  color: var(--service-card-muted);
  font-size: 0.58rem;
  letter-spacing: 0.11em;
}

#clientOrderCatalogRoot .client-order-plan-head h3 {
  overflow-wrap: anywhere;
  color: var(--service-card-text);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
}

#clientOrderCatalogRoot .client-order-plan-tags {
  grid-column: 2;
  gap: 6px;
}

#clientOrderCatalogRoot .client-order-plan-type {
  color: var(--service-card-muted);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
}

#clientOrderCatalogRoot .client-order-plan-badge {
  top: -12px;
  padding: 5px 12px;
  border-radius: var(--service-pill-radius);
  background: var(--service-card-accent);
  color: #07101f;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  box-shadow: 0 7px 18px -10px rgba(0, 0, 0, 0.85);
}

#clientOrderCatalogRoot .client-order-spec-list {
  grid-area: specs;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 18px;
  padding: 15px 0 0;
  border-top: 1px solid var(--service-card-seam);
}

#clientOrderCatalogRoot .client-order-spec-list li {
  gap: 3px;
  min-width: 0;
  padding: 0;
  border: 0;
}

#clientOrderCatalogRoot .client-order-spec-list li span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--service-card-muted);
  font-size: 0.59rem;
  letter-spacing: 0.1em;
}

#clientOrderCatalogRoot .client-order-spec-list li span svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--service-card-accent);
}

#clientOrderCatalogRoot .client-order-spec-list li strong {
  color: var(--service-card-text);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
}

#clientOrderCatalogRoot .client-order-price-stack {
  grid-area: price;
  display: grid;
  justify-items: end;
  align-self: start;
  gap: 4px;
  min-width: 92px;
  text-align: right;
}

#clientOrderCatalogRoot .client-order-price-row {
  align-items: flex-end;
}

#clientOrderCatalogRoot .client-order-price-row small {
  color: var(--service-card-muted);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

#clientOrderCatalogRoot .client-order-price-row strong,
#clientOrderCatalogRoot .client-order-price-row + .client-order-price-row strong {
  color: var(--service-card-text);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

#clientOrderCatalogRoot .client-order-price-row + .client-order-price-row strong {
  color: var(--service-card-text);
  font-size: 0.95rem;
}

#clientOrderCatalogRoot .client-order-renewable-note {
  color: var(--live);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#clientOrderCatalogRoot .client-order-plan-btn {
  grid-area: order;
  align-self: end;
  min-height: 42px;
  padding: 11px 15px;
  border: 1px solid var(--service-card-border);
  border-radius: var(--service-control-radius);
  background: #0b111a;
  color: var(--service-card-text);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: none;
}

#clientOrderCatalogRoot .client-order-plan-btn::after {
  content: '\2192';
  margin-left: 8px;
  font-size: 1rem;
  line-height: 1;
}

#clientOrderCatalogRoot .client-order-plan-btn:hover:not(:disabled) {
  border-color: var(--service-card-accent);
  background: var(--service-card-accent-strong);
  color: #07101f;
}

#clientOrderCatalogRoot .client-order-plan-card.is-out-of-stock {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'head price'
    'stock stock'
    'specs specs'
    'order order';
  background: #06090e;
  border-style: dashed;
  box-shadow: none;
}

#clientOrderCatalogRoot .client-order-plan-card.is-out-of-stock:hover {
  transform: none;
  box-shadow: none;
}

#clientOrderCatalogRoot .client-order-stock-note,
#clientOrderCatalogRoot .client-order-price-note {
  grid-area: stock;
  padding: 9px 10px;
  border: 1px solid var(--service-danger-border);
  border-radius: var(--service-control-radius);
  background: var(--service-danger-bg);
  color: var(--service-danger-text);
  font-size: 0.68rem;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1180px) {
  .board-selector .pricing-grid,
  #clientOrderCatalogRoot .client-order-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #clientOrderCatalogRoot .client-order-provider-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .catalog-intro {
    margin-bottom: 20px;
    text-align: left;
  }

  .catalog-intro h2 {
    font-size: 2rem;
  }

  .board-selector .pricing-grid,
  #clientOrderCatalogRoot .client-order-plan-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .board-selector .pricing-card,
  #clientOrderCatalogRoot .client-order-plan-card {
    min-height: 0;
  }

  #clientOrderCatalogRoot .client-order-provider-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .board-selector .pricing-card,
  #clientOrderCatalogRoot .client-order-plan-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'head'
      'price'
      'specs'
      'order';
  }

  .board-selector .price-stack,
  #clientOrderCatalogRoot .client-order-price-stack {
    justify-items: start;
    text-align: left;
  }

  .board-selector .price-row > div,
  #clientOrderCatalogRoot .client-order-price-row {
    align-items: flex-start;
  }

  .board-selector .pricing-card.out-of-stock,
  .board-selector .pricing-card.is-term-empty,
  #clientOrderCatalogRoot .client-order-plan-card.is-out-of-stock {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'head'
      'price'
      'stock'
      'specs'
      'order';
  }
}

@media (prefers-reduced-motion: reduce) {
  .board-selector .pricing-card,
  #clientOrderCatalogRoot .client-order-plan-card {
    transition-duration: 0.01ms;
  }
}