/*
 * fiberax-lite skeleton CSS override
 *
 * Этот файл - НЕ baseline. Bootstrap 5 (jsdelivr CDN) - baseline. Здесь
 * только то что Bootstrap не покрывает или что мы делаем по-своему:
 *  - layout нашего custom navbar (не Bootstrap .navbar - наш .page-header).
 *  - mega-menu Products dropdown (Bootstrap .dropdown-menu base + наш grid).
 *  - notifications dropdown с custom header/items внутри Bootstrap menu.
 *  - user dropdown с custom info-блоком сверху.
 *  - clientarea sidebar layout.
 *  - auth-form spacing (Bootstrap .form-* классы делают input/label).
 *  - services-list visual.
 *
 * Конвенция: BEM (block, block__element, block--modifier) поверх Bootstrap.
 *
 * Полноценный визуальный дизайн (брендинг, типографика, анимации) -
 * отдельная фаза.
 */

/* ============================================================
   0. Design tokens (brand palette, typography, radii)
   ============================================================ */

:root {
  --color-primary: #0050FF;
  --color-primary-light: #80C6FF;
  --color-accent: #FF5400;
  --color-success: #22C55E;
  --color-text: #212126;
  --color-muted: #888888;
  --color-border: #E2E4E9;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F5F5F5;

  /* Design-system tokens ported from the approved Fiberax mockup. */
  --subtext: #46516F;
  --hover-bg: #F3F8FE;
  --ease: 0.2s ease;

  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --radius-control: 10px;
  --radius-pill: 999px;

  --field-height: 52px;
  --field-padding-x: 16px;
}

/* ============================================================
   1. Page layout (minimal beyond Bootstrap)
   ============================================================ */

/* Full-bleed sections use width:100vw (homepage hero + mobile products band).
   100vw includes the vertical scrollbar width, so on classic-scrollbar browsers
   it overflows by ~15px and causes a page-wide horizontal scroll (most visible
   at the footer). Clip it horizontally. overflow-x:clip (not hidden) does NOT
   create a scroll container, so position:sticky (Tier 1 sidebar) keeps working. */
html, body {
  overflow-x: clip;
}

/* Page background - subtle top-blue fade to white (dashboard mockup body).
   Very light tint at the top of the viewport; covered on storefront/auth by
   their own full-bleed hero/orbs + footer, visible mainly around the cabinet
   cards. */
body {
  background: linear-gradient(180deg, #F8FBFF 0%, #FCFEFF 41%, #FFFFFF 100%);
  min-height: 100vh;
}

/* Full-width passthrough: the content box is provided by the inner container
   (.page-content > .container / .page-content--clientarea), unified to the same
   1336px / 32px box as header & footer so all edges align. */
.page-main {
  padding: 20px 0;
  min-height: calc(100vh - 220px);
}

/* Homepage: the hero is full-bleed and self-sized. Drop the sticky-footer
   min-height + bottom padding so the blue hero meets the footer with no white
   gap on tall viewports. Other cmd=root pages (tier/order/checkout) keep the
   sticky footer via their own action class. */
body.page--cmd-root.page--action-default .page-main,
body.page--cmd-root.page--action-none .page-main {
  min-height: 0;
  padding-bottom: 0;
}

/* Unified content container — identical box to .page-header__container and
   .page-footer__container (max-width 1336, 32px gutters, centered). Overrides
   Bootstrap .container responsive max-widths (1140/1320) and 12px padding. */
.page-content > .container {
  max-width: 1336px;
  padding-left: 32px;
  padding-right: 32px;
}

.page-footer {
  background: #F7F7F7;
  padding: 48px 0 0;
  font-family: var(--font-sans);
  color: var(--color-text);
}
.page-footer__container {
  max-width: 1336px;
  margin: 0 auto;
  padding: 0 32px;
}
.page-footer__columns {
  display: grid;
  grid-template-columns: 200px 1fr 1fr 240px;
  gap: 48px;
  align-items: start;
  padding-bottom: 48px;
}
.page-footer__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-footer__col--logo {
  padding-top: 4px;
}
.page-footer__logo {
  height: 28px;
  width: auto;
  display: block;
}
.page-footer__block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-footer__block + .page-footer__block {
  margin-top: 16px;
}
.page-footer__heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 14px;
}
.page-footer__text {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--subtext);
  margin: 0;
}
.page-footer__text a {
  color: var(--subtext);
  text-decoration: none;
  transition: color var(--ease);
}
.page-footer__text a:hover {
  color: var(--color-primary);
  text-decoration: none;
}
.page-footer__col--support .page-footer__text a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-footer__col--support .page-footer__text a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.page-footer__icons--pay {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.page-footer__pay-badge {
  height: 28px;
  background: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  overflow: hidden;
}
.page-footer__pay-icon {
  /* Official brand logos with mixed aspect ratios (wide VISA/PayPal,
     squarer Mastercard). Cap by height + width so each fits the badge
     while keeping its own proportions. */
  max-height: 20px;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}
/* blik logo ships on a solid black background; round it to read as a chip
   and let it sit slightly larger than the other marks. */
.page-footer__pay-icon--framed { border-radius: 4px; max-height: 24px; }
.page-footer__icons--social {
  display: flex;
  gap: 8px;
}
.page-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: opacity var(--ease), transform var(--ease);
}
.page-footer__social-link:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
.page-footer__social-link svg {
  width: 14px;
  height: 14px;
  display: block;
}
/* Mockup brand-circle colours (white glyph on solid fill). */
.page-footer__social-link--facebook  { background: #5E66B1; }
.page-footer__social-link--linkedin  { background: #3A9CB5; }
.page-footer__social-link--whatsapp  { background: #25A244; }
.page-footer__social-link--messenger { background: #3B83F6; }
.page-footer__social-link--youtube   { background: #E50000; }
.page-footer__bottom {
  border-top: 1px solid var(--color-border);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.page-footer__copyright {
  font-size: 13px;
  color: var(--subtext);
}
.page-footer__bottom-nav {
  font-size: 13px;
  color: var(--subtext);
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
}
.page-footer__bottom-nav a {
  color: var(--subtext);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--ease);
}
.page-footer__bottom-nav a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.page-footer__bottom-nav a.page-footer__bottom-link--emph,
.page-footer__bottom-nav a.page-footer__bottom-link--emph:hover {
  font-style: italic;
  text-decoration: underline;
  color: var(--color-muted);
}
@media (max-width: 1024px) {
  /* 3 columns: logo | (address + email stacked) | (payment + social) */
  .page-footer__columns {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 24px 48px;
    align-items: start;
  }
  .page-footer__col--logo    { grid-column: 1; grid-row: 1 / 3; }
  .page-footer__col--offices { grid-column: 2; grid-row: 1; }
  .page-footer__col--support { grid-column: 2; grid-row: 2; }
  .page-footer__col--paysoc  { grid-column: 3; grid-row: 1 / 3; }
}
@media (max-width: 640px) {
  .page-footer__container { padding: 0 16px; }
  .page-footer__columns {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 32px;
    padding-bottom: 32px;
  }
  /* Reset the tablet 3-column placement so everything stacks. */
  .page-footer__col--logo,
  .page-footer__col--offices,
  .page-footer__col--support,
  .page-footer__col--paysoc {
    grid-column: auto;
    grid-row: auto;
  }
  .page-footer__icons--social { justify-content: center; }
  .page-footer__heading { text-align: center; }
  .page-footer__bottom { padding: 20px 0; }
}

/* ============================================================
   2. Page header (our custom navbar, not Bootstrap .navbar)
   ============================================================ */

.page-header {
  background: var(--color-surface);
  font-family: var(--font-sans);
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.page-header__container {
  max-width: 1336px;
  margin: 0 auto;
  padding: 0 32px;
  height: 72px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 40px;
}
.page-header__brand { flex-shrink: 0; display: flex; align-items: center; }
.page-header__brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.page-header__brand-link:hover { text-decoration: none; }
.page-header__brand-logo {
  display: block;
  height: 32px;
  width: auto;
}
.page-header__nav {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
}

/* ============================================================
   3. Top-nav primary/secondary lists
   ============================================================ */

.top-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.top-nav__primary,
.top-nav__secondary {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.top-nav__primary { gap: 2px; }
.top-nav__secondary { gap: 10px; }

.top-nav__link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ease), background-color var(--ease), border-color var(--ease);
}
.top-nav__link:hover {
  color: var(--color-primary);
  background: var(--hover-bg);
  text-decoration: none;
}
.top-nav__link.dropdown-toggle::after {
  /* Bootstrap dropdown chevron - keep its default arrow */
  margin-left: 4px;
}
.top-nav__icon { flex-shrink: 0; color: var(--color-muted); transition: color 0.15s ease; }
.top-nav__link:hover .top-nav__icon { color: var(--color-primary); }
.top-nav__link:hover .top-nav__balance-credit,
.top-nav__link:hover .top-nav__balance-due { color: var(--color-primary); }
.top-nav__chevron {
  flex-shrink: 0;
  color: var(--color-text);
  margin-left: 0;
  transition: transform 0.15s ease;
}
[aria-expanded="true"] .top-nav__chevron { transform: rotate(180deg); }

.top-nav__flag { display: inline-block; vertical-align: middle; width: 20px; height: 15px; object-fit: cover; margin-right: 4px; flex-shrink: 0; border-radius: 2px; }

/* Language dropdown - hover trigger + Fiberax.online style */
.top-nav__item--language { position: relative; margin-left: -4px; }
.top-nav__dropdown--language {
  display: none;
  position: absolute;
  /* !important overrides Bootstrap .dropdown-menu / .dropdown-menu-end so the
     box stretches to the toggle width (left+right = full item width). */
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  margin-top: 0 !important;
  min-width: 0 !important;
  padding: 0;
  background: var(--color-surface);
  /* No border: header panels sit on their shadow alone (same as the user and
     notifications dropdowns, which went through the mockup). A 1px outline on top
     of the shadow read as a double edge. */
  border: 0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
  z-index: 1000;
  overflow: hidden;
  background-clip: padding-box;
}
.top-nav__item--language .top-nav__dropdown--language.show {
  display: block;
}
.top-nav__dropdown--language .dropdown-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.2;
  color: var(--color-text);
  text-decoration: none;
}
.top-nav__dropdown--language .dropdown-item:hover {
  background: var(--color-surface-alt);
}
.top-nav__label { font-size: 1rem; }
.top-nav__badge {
  display: inline-block;
  background: #cc0000;
  color: #fff;
  font-size: 0.625rem;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  margin-left: 4px;
}

.top-nav__link--cta {
  padding: 11px 26px;
  margin-top: -1px;
  font-weight: 700;
  border-radius: var(--radius-control);
  transition: none;
}
.top-nav__link--cta-outline { padding: 11px 18px; }
.top-nav__link--cta-outline {
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.top-nav__link--cta-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.top-nav__link--cta-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  /* Match the blue action buttons (login/checkout/signup submit):
     resting shadow, then lift + darken + bigger shadow on hover. */

  transition: all var(--ease);
}
.top-nav__link--cta-primary:hover {
  background: #0040cc;
  color: #fff;
  border-color: #0040cc;
  transform: translateY(-1px);

}

/* ============================================================
   4. Products dropdown (Bootstrap .dropdown-menu base + mega grid)
   ============================================================ */

.top-nav__item--products { position: relative; }
.top-nav__dropdown--products {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: -16px;
  margin-top: 0;
  width: 920px;
  max-width: calc(100vw - 64px);
  padding: 24px;
  background: var(--color-surface);
  /* No border - see the language panel above: the mega panel rests on its shadow. */
  border: 0;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 80, 255, 0.10), 0 4px 16px rgba(0, 0, 0, 0.06);
  z-index: 1000;
  background-clip: padding-box;
}
/* Invisible hover bridge so the cursor can travel toggle -> panel without the
   gap dropping the :hover. Tall enough (24px) to cover the cabinet offset too. */
.top-nav__dropdown--products::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -24px;
  height: 24px;
}
/* Shown via Bootstrap click (.show), the sidebar Order more trigger, OR
   desktop hover (designer requirement). Mobile (<=1024) uses the burger sheet. */
.top-nav__item--products .top-nav__dropdown--products.show { display: block; }
@media (min-width: 1025px) {
  .top-nav__item--products:hover .top-nav__dropdown--products { display: block; }
}
.products-dropdown {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 0;
}
.products-dropdown__card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-sans);
}
.products-dropdown__card:hover {
  background: var(--hover-bg);
  text-decoration: none;
  color: var(--color-text);
}
.products-dropdown__icon {
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  border-radius: 14px;
  background: var(--hover-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.products-dropdown__img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.products-dropdown__content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.products-dropdown__title {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.2px;
  color: var(--color-text);
}
.products-dropdown__desc {
  display: block;
  font-size: 14px;
  color: var(--subtext);
  line-height: 1.5;
}

/* ============================================================
   5. Balance variations
   ============================================================ */

.top-nav__balance-amount {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 2px;
}
.top-nav__balance-credit { font-weight: bold; }
.top-nav__balance-due { font-weight: bold; color: #cc0000; }

/* ============================================================
   6. Card-active (Solidgate) pill
   ============================================================ */

.top-nav__card-icon { font-size: 1rem; }
.top-nav__item--unverified .top-nav__card-icon { color: #cc7700; }
.top-nav__item--verified .top-nav__card-icon { color: #008844; }
.top-nav__card-label { font-size: 0.8125rem; }

/* ============================================================
   7. Notifications dropdown (custom content within Bootstrap menu)
   ============================================================ */

.top-nav__dropdown--notifications {
  min-width: 340px;
  padding: 0;
}
.notifications-dropdown__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
}
.notifications-dropdown__title { font-weight: bold; font-size: 0.8125rem; }
.notifications-dropdown__actions {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.notifications-dropdown__action { color: #0066cc; font-size: 0.875rem; text-decoration: none; }
.notifications-dropdown__items {
  max-height: 400px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.notifications-dropdown__item a {
  display: block;
  padding: 8px 14px;
  color: #222;
  text-decoration: none;
}
.notifications-dropdown__item a:hover {
  background: #f5f5f5;
}
.notifications-dropdown__item--seen a { color: #888; }
.notifications-dropdown__item--empty {
  padding: 16px;
  text-align: center;
  color: #888;
}
.notifications-dropdown__item-title { display: block; }
.notifications-dropdown__item-date { color: #888; font-size: 0.6875rem; }

/* ============================================================
   8. User dropdown (custom info-block + standard links)
   ============================================================ */

.top-nav__dropdown--user {
  min-width: 260px;
}
.user-dropdown__info {
  padding: 10px 14px;
}
.user-dropdown__name { display: block; color: #666; font-size: 0.6875rem; }
.user-dropdown__email { display: block; font-size: 0.8125rem; }
.user-dropdown__loggedas {
  display: block;
  color: #666;
  font-size: 0.6875rem;
  margin-top: 4px;
}
.user-dropdown__divider { margin: 4px 0; }
.user-dropdown__link--logout { color: #cc0000; }
.user-dropdown__link--admin { color: #6600cc; }

/* ============================================================
   9. Language dropdown (extra styles - main rules in block 3)
   ============================================================ */

.language-dropdown__item--current > .dropdown-item {
  font-weight: bold;
}

/* ============================================================
   9b. Divider, burger, mobile menu (design-system header)
   ============================================================ */

.top-nav__divider {
  width: 1px;
  height: 22px;
  background: var(--color-border);
  flex-shrink: 0;
  align-self: center;
}

.top-nav__burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.top-nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--ease), opacity var(--ease);
}
/* Animate to an X when open (clear close affordance). */
.top-nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.top-nav__burger.open span:nth-child(2) { opacity: 0; }
.top-nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.top-nav__mobile {
  display: none;
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px;
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  z-index: 1029;
}
.top-nav__mobile a {
  text-align: center;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  border-radius: 10px;
  transition: background var(--ease), color var(--ease);
}
.top-nav__mobile a:hover {
  background: var(--hover-bg);
  color: var(--color-primary);
}

/* Collapsible Products group inside the mobile sheet (mirrors desktop dropdown). */
.top-nav__mobile-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.top-nav__mobile-grouptoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  border-radius: 10px;
  transition: background var(--ease), color var(--ease);
}
.top-nav__mobile-grouptoggle:hover {
  background: var(--hover-bg);
  color: var(--color-primary);
}
.top-nav__mobile-chevron {
  transition: transform var(--ease);
}
.top-nav__mobile-group.open .top-nav__mobile-grouptoggle { color: var(--color-primary); }
.top-nav__mobile-group.open .top-nav__mobile-chevron { transform: rotate(180deg); }
/* Smooth expand via grid-rows 0fr<->1fr (same trick as the Team accordion). */
.top-nav__mobile-panel {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows var(--ease);
}
.top-nav__mobile-group.open .top-nav__mobile-panel { grid-template-rows: 1fr; }
.top-nav__mobile-panel-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.top-nav__mobile .top-nav__mobile-panel-inner a {
  padding: 11px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--subtext);
  text-decoration: none;
  border-radius: 10px;
  text-align: center;
  transition: background var(--ease), color var(--ease);
}
.top-nav__mobile .top-nav__mobile-panel-inner a:hover {
  background: var(--hover-bg);
  color: var(--color-primary);
}

/* ============================================================
   9c. Header right-block - mockup restyle (2026-06-29)
   Dashboard pill, balance, bell 32x32, notifications panel,
   user avatar+name. Logged header only. Conditional logic in
   menu.top.logged.tpl is unchanged - this is visual only.
   ============================================================ */

/* Dashboard - blue pill */
.page-header--logged .top-nav__item--dashboard .top-nav__link {
  padding: 8px 14px;
  border-radius: 8px;
  background: #EEF3FF;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
}
.page-header--logged .top-nav__item--dashboard .top-nav__link:hover {
  background: #E0EBFF;
  color: var(--color-primary);
}
.page-header--logged .top-nav__item--dashboard .top-nav__icon { color: var(--color-primary); }
.page-header--logged .top-nav__item--dashboard .top-nav__label { font-size: 14px; }

/* Balance - text + icon, hover -> blue, no pill bg */
.page-header--logged .top-nav__balance {
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}
.page-header--logged .top-nav__balance:hover { background: transparent; color: var(--color-primary); }
.page-header--logged .top-nav__balance .top-nav__balance-credit,
.page-header--logged .top-nav__balance .top-nav__balance-due { font-weight: 700; }

/* Bell - 32x32 square icon button, subtext -> blue on hover */
.top-nav__notifications-toggle {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--subtext);
  border-radius: 8px;
  position: relative;
}
.top-nav__notifications-toggle:hover { color: var(--color-primary); background: transparent; }
.top-nav__notifications-toggle .top-nav__icon { color: inherit; }
.top-nav__notifications-toggle:hover .top-nav__icon { color: var(--color-primary); }
/* Count badge (our data) - small red pill, top-right of the bell */
.top-nav__item--notifications .top-nav__badge {
  position: absolute;
  top: 1px;
  right: -1px;
  margin: 0;
  min-width: 15px;
  padding: 1px 4px;
  font-size: 0.5625rem;
  background: #E53E3E;
  border: 1px solid #fff;
}

/* Notifications panel - mockup container (variant A: our data rows kept) */
.top-nav__dropdown--notifications {
  min-width: 0;
  width: 380px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.notifications-dropdown__header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
}
.notifications-dropdown__title { font-size: 14px; font-weight: 800; color: var(--color-text); letter-spacing: -0.2px; }
.notifications-dropdown__action { color: var(--color-primary); font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 6px; }
.notifications-dropdown__action:hover { background: var(--hover-bg); }
.notifications-dropdown__item a { padding: 12px 16px; color: var(--color-text); border-bottom: 1px solid #F1F2F5; }
.notifications-dropdown__item:last-child a { border-bottom: 0; }
.notifications-dropdown__item--unread a { background: #F3F8FE; }
.notifications-dropdown__item a:hover { background: var(--hover-bg); }
.notifications-dropdown__item-title { font-size: 13px; font-weight: 700; color: var(--color-text); margin-bottom: 2px; }
.notifications-dropdown__item-date { font-size: 11px; color: var(--subtext); font-weight: 600; }

/* User - avatar circle (initial) + name; hover -> name blue, no bg */
.top-nav__user-toggle { gap: 8px; padding: 6px 8px 6px 6px; }
.top-nav__user-toggle:hover { background: transparent; }
.top-nav__user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #EEF3FF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--color-primary);
  flex-shrink: 0;
}
.top-nav__user-name { font-size: 13px; font-weight: 700; color: var(--color-text); }
.top-nav__user-toggle:hover .top-nav__user-name { color: var(--color-primary); }
.top-nav__user-toggle .top-nav__chevron { width: 12px; height: 12px; color: var(--subtext); }

/* User (account) dropdown - mockup styling + desktop hover (mirrors Products).
   data-bs-display="static" on the toggle disables Popper so our CSS positions it;
   the ::before bridge spans the gap so the cursor keeps :hover toggle->panel. */
.top-nav__dropdown--user {
  position: absolute;
  top: calc(100% + 18px);
  right: 0;
  left: auto;
  margin: 0;
  min-width: 220px;
  padding: 6px;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
}
.top-nav__dropdown--user::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}
@media (min-width: 1025px) {
  .top-nav__item--user:hover .top-nav__dropdown--user { display: block; }
}
/* Info block (name + email) */
.user-dropdown__info {
  padding: 8px 10px 4px;
}
.user-dropdown__name { display: block; color: var(--subtext); font-size: 12px; font-weight: 500; }
.user-dropdown__email { display: block; color: var(--color-text); font-size: 13px; font-weight: 700; }
/* Name + email as a Profile shortcut: full-width hover row (offsets the info padding). */
.user-dropdown__profile {
  display: block; text-decoration: none; color: inherit;
  margin: -8px -10px 0; padding: 8px 10px;
  border-radius: 8px; transition: background var(--ease);
}
.user-dropdown__profile:hover { background: #EEF3FF; }
.user-dropdown__loggedas { display: block; color: var(--subtext); font-size: 11px; margin-top: 4px; }
/* Links (Switch user / admin / Logout) - pill rows with hover */
.top-nav__dropdown--user .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.top-nav__dropdown--user .dropdown-item svg { flex-shrink: 0; }
.top-nav__dropdown--user .dropdown-item:hover { background: #EEF3FF; color: var(--color-primary); }
.top-nav__dropdown--user .dropdown-divider { margin: 4px 0; border-top: 1px solid var(--color-border); }
.top-nav__dropdown--user .user-dropdown__link--logout { color: #E53E3E; }
.top-nav__dropdown--user .user-dropdown__link--logout:hover { background: #FFF5F5; color: #E53E3E; }
.top-nav__dropdown--user .user-dropdown__link--admin { color: #6600CC; }

@media (max-width: 768px) {
  .page-header--logged .top-nav__user-name { display: none; }
}

@media (max-width: 1024px) {
  .page-header__container { padding: 0 20px; gap: 20px; }
  .top-nav__primary { display: none; }
  /* Primary hidden - keep the language + burger group right-aligned (like desktop). */
  .top-nav__secondary { margin-left: auto; }
  .top-nav__burger { display: flex; }
  /* Animated reveal: present but hidden, fades/slides in on .open. */
  .top-nav__mobile {
    display: flex;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  }
  .top-nav__mobile.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  /* Compact language switcher: flag only (toggle + dropdown options). */
  .top-nav__language-current,
  .top-nav__language-name { display: none; }
  .top-nav__dropdown--language .dropdown-item { justify-content: center; }
  .top-nav__dropdown--language .top-nav__flag { margin-right: 0; }
}
@media (max-width: 640px) {
  .page-header__container { height: 64px; padding: 0 16px; }
  .top-nav__secondary { gap: 8px; }
  .top-nav__mobile { top: 64px; }
  .top-nav__divider { display: none; }
  /* Register / Login live in the burger menu at this width. */
  .top-nav__item--signup,
  .top-nav__item--signin { display: none; }
}

/* Logged-in header on mobile (<=768): icons-only right cluster. Dashboard and
   the balance pill leave the bar (both stay reachable in the burger sheet);
   pills tighten so logo + bell + user + flag + burger fit a 390px viewport.
   Scoped to .page-header--logged - the guest header already fits. */
@media (max-width: 768px) {
  .page-header--logged .top-nav__item--dashboard,
  .page-header--logged .top-nav__item--balance { display: none; }
  .page-header--logged .top-nav__secondary .top-nav__link { padding: 8px; }
}
@media (max-width: 640px) {
  .page-header--logged .page-header__brand-logo { width: 120px; height: auto; }
  .page-header--logged .top-nav__secondary { gap: 6px; }
}

/* ============================================================
   10. Page content layouts
   ============================================================ */

.page-content--auth {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 220px);
}

/* Signup is wider than --auth (login is narrow, signup may have many fields
   incl. company details). Centered, ~2/3 of standard content width.
   Mirrors fiberax/ajax.signup.tpl col-md-8 (8/12 width). */
.page-content--signup { max-width: 720px; margin: 0 auto; padding: 0 32px; }

.page-content--clientarea {
  max-width: 1336px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: row;
  gap: 24px;
}
/* Sidebar is a white card (mockup fiberax_team): sticky, natural height,
   help badge raised right under the nav (not pinned to the bottom). */
.clientarea__sidebar {
  flex-shrink: 0;
  align-self: flex-start;
  width: 220px;
  position: sticky;
  top: 88px;
  padding: 16px 12px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 80, 255, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  font-family: var(--font-sans);
}
.clientarea__menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
.clientarea__menu-item { margin: 0; padding: 0; }

/* Section divider line */
.clientarea__divider {
  height: 1px;
  margin: 8px 4px;
  background: var(--color-border);
  list-style: none;
}

.clientarea__menu-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--subtext);
  background: transparent;
  border: 0;
  border-radius: 8px;
  width: 100%;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 1px;
  transition: color var(--ease), background-color var(--ease);
}
/* Hover (any non-active item): light bg + text darkens to near-black */
.clientarea__menu-link:hover {
  color: var(--color-text);
  background: var(--hover-bg);
  text-decoration: none;
}
.clientarea__menu-link:focus { outline: none; }
.clientarea__menu-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
/* Active (current page): light-blue bg + blue text + bold. Placed AFTER hover
   so an active item hovered keeps the blue active look. No right-edge bar. */
.clientarea__menu-link.active {
  color: var(--color-primary);
  background: #EEF3FF;
  font-weight: 600;
}
.clientarea__menu-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: currentColor;
}
.clientarea__menu-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.clientarea__menu-label { flex: 1; }
.clientarea__home-item { margin: 0 0 6px; list-style: none; }
.clientarea__home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  /* Always-blue filled pill - mirrors the header Client Area entry style */
  color: var(--color-primary);
  background: #EEF3FF;
  transition: color var(--ease), background-color var(--ease);
}
.clientarea__home:hover { color: var(--color-primary); background: #E0EBFF; }
.clientarea__home.active { color: var(--color-primary); background: #EEF3FF; }
.clientarea__home svg { width: 20px; height: 20px; display: block; }

.clientarea__menu-heading {
  padding: 8px 8px 4px;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtext);
  list-style: none;
}
/* Help badge - sits right under the nav (raised, not pinned to card bottom) */
.clientarea__help {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.clientarea__help-inner {
  background: #F8FBFF;
  border-radius: 10px;
  padding: 14px;
}
.clientarea__help-icon { display: block; margin-bottom: 6px; color: var(--color-text); }
.clientarea__help-icon svg { width: 20px; height: 20px; display: block; }
.clientarea__help-title { font-size: 0.75rem; font-weight: 700; color: var(--color-text); margin-bottom: 3px; }
.clientarea__help-sub { font-size: 0.6875rem; color: var(--subtext); line-height: 1.5; margin-bottom: 10px; }
.clientarea__help-btn {
  display: block;
  width: 100%;
  padding: 7px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 7px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color var(--ease);
}
.clientarea__help-btn:hover { background: #0040cc; color: #fff; text-decoration: none; }
.clientarea__main { flex: 1; min-width: 0; }

/* Mobile clientarea drawer (<=768px): sidebar becomes an off-canvas panel.
   Trigger + backdrop hidden on desktop; backdrop can only open via the
   mobile-only trigger, so no desktop side effects. */
.clientarea__menu-trigger { display: none; }
.clientarea__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(17, 24, 39, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ease), visibility var(--ease);
}
.clientarea__backdrop.is-open { opacity: 1; visibility: visible; }
@media (max-width: 768px) {
  .page-content--clientarea { display: block; }
  .clientarea__main { width: 100%; }
  .clientarea__menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 9px 14px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: background-color var(--ease);
  }
  .clientarea__menu-trigger:hover { background: var(--hover-bg); }
  .clientarea__menu-trigger svg { flex-shrink: 0; color: var(--subtext); }
  .clientarea__sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1050;
    width: 280px;
    max-width: 84vw;
    border-radius: 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--ease);
  }
  .clientarea__sidebar.is-open { transform: translateX(0); }
  body.clientarea-drawer-open { overflow: hidden; }
}

/* ------------------------------------------------------------
   Cabinet order pages (A2). For a LOGGED user the order screens
   (order-vdc/s3/veeam/apitokens/checkout) render INSIDE the cabinet
   shell (.clientarea__main). These pages ship with their own marketing
   wrapper (oversized hero + a centered .container gutter)
   built for the full-width guest layout. Inside the narrow cabinet
   column that reads as a duplicate header + double gutter, so:
     - strip the inner .container / .checkout__inner gutter + centering
       (the shell already provides the 32px page gutter);
     - hide the marketing hero (sidebar gives the context/title).
   Scoped under .clientarea__main so guest full-width pages are untouched,
   and normal cabinet pages don't use .page-content > .container so they
   are unaffected. */
.clientarea__main .page-content > .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.clientarea__main .checkout__inner {
  max-width: none;
  margin: 0;
  padding: 0;
}
/* checkout ships as a full-bleed gradient surface (width:100vw + negative
   margins, mirroring the login page). Inside the cabinet column that breaks
   out of the column onto the whole viewport (and slides under the sidebar),
   so neutralize the full-bleed and let it flow inside the column. */
.clientarea__main .checkout {
  width: auto;
  margin: 0;
  min-height: 0;
  padding: 0;
  background: none;
}
/* Compact heading in cabinet: keep the page title but drop the
   oversized 72px icon + big hero padding (the sidebar already
   gives context). Subtitle stays as a small line under the title. */
.clientarea__main .order-vdc__header,
.clientarea__main .order-s3__header,
.clientarea__main .order-apitokens__header {
  padding: 0 0 20px;
}
/* Veeam keeps a wider gap under the heading: its content (product cards / config)
   starts with a bordered block, so the heading needs to read as a separate group. */
.clientarea__main .order-veeam__header {
  padding: 0 0 36px;
}
.clientarea__main .checkout__header { margin-bottom: 20px; }
.clientarea__main .order-vdc__title-icon,
.clientarea__main .order-s3__title-icon,
.clientarea__main .order-apitokens__title-icon,
.clientarea__main .order-veeam__title-icon,
.clientarea__main .checkout__back {
  display: none;
}
.clientarea__main .order-vdc__title,
.clientarea__main .order-s3__title,
.clientarea__main .order-apitokens__title,
.clientarea__main .order-veeam__title,
.clientarea__main .checkout__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.25;
}

/* "See example setups" link (order-vdc About section, both modes), centered
   within the About block. */
.order-vdc__examples { margin-top: 20px; text-align: center; }
.order-vdc__examples-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.order-vdc__examples-link:hover { text-decoration: underline; }
.order-vdc__examples-link svg { flex-shrink: 0; }

/* ============================================================
   11. Auth (login + passreminder) - Figma "sign in" applied
   ============================================================ */

.auth-login {
  font-family: var(--font-sans);
  color: var(--color-text);
  padding: 24px 16px 40px;
}

.auth-login__brand {
  display: inline-flex;
  align-items: center;
  margin: 0 0 24px;
  text-decoration: none;
}
.auth-login__brand img {
  display: block;
  height: 32px;
  width: auto;
}

.auth-login__title {
  margin: 0 0 32px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.15;
  color: var(--color-text);
  letter-spacing: -0.01em;
  display: block;
}
.auth-login__title-line { display: block; }
.auth-login__title-line--sub {
  font-weight: 700;
  font-size: 1.5rem;
  margin-top: 4px;
  letter-spacing: -0.005em;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

/* Floating-label field: input with placeholder=" " plus following <label>.
   Label sits inside field; collapses to small caption when input is focused
   or filled. Works pure-CSS via :placeholder-shown + :focus selectors. */
.field {
  position: relative;
  display: block;
}
.field__input {
  width: 100%;
  height: var(--field-height);
  padding: 18px var(--field-padding-x) 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.21;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.15s ease;
}
.field__input::placeholder { color: transparent; }
.field__input:focus { border-color: var(--color-primary); }

.field__label {
  position: absolute;
  top: 50%;
  left: var(--field-padding-x);
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.21;
  color: var(--color-muted);
  pointer-events: none;
  transition: top 0.15s ease, font-size 0.15s ease, transform 0.15s ease;
  background: transparent;
}
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label {
  top: 10px;
  transform: translateY(0);
  font-size: 0.75rem;
}

.field--password .field__input { padding-right: 48px; }
.field__toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  padding: 0;
}
.field__toggle svg { display: block; }

.auth-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin: 4px 0 0;
}
.auth-links--centered {
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.auth-links a {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.21;
  color: var(--color-primary);
  text-decoration: none;
}
.auth-links a:hover { text-decoration: underline; }

.auth-aux-link {
  margin: 20px 0 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
}
.auth-aux-link--center { text-align: center; }
.auth-aux-link a {
  color: var(--color-primary);
  text-decoration: none;
}
.auth-aux-link a:hover { text-decoration: underline; }

.auth-form__captcha {
  margin-top: 8px;
}

.auth-submit {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-primary-light);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.21;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.auth-submit:hover { background: var(--color-primary); }
.auth-submit:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ============================================================
   11a. Homepage product cards
   ============================================================ */

.homepage__hero {
  position: relative;
  /* Mockup recipe: fixed min-height decouples the cover/center background
     from content height, so the wave stays put regardless of card size. */
  min-height: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Full-bleed: break out of the 1336px .page-main container so the
     background spans the full viewport width. Inner .container keeps the
     title + cards centered. */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: -20px;
  padding: 0;
  text-align: center;
  overflow: hidden;
}
.homepage__hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
}
.homepage__hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor the vertical crop near the top (30%, not center) so on wide
     viewports the cover-by-width overflow is cut mostly from the bottom and
     the blue wave never rises onto the title/subtitle. Below ~1575px there is
     no vertical overflow, so this value is a no-op there. See §9.3. */
  object-position: center 30%;
  display: block;
}
/* Lift hero content above the absolute background layer. */
.homepage__hero > .container {
  position: relative;
  z-index: 2;
}
.homepage__hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  /* Compact spacing from the fiberax_home mockup: tighter top/bottom so the
     cards sit higher and overlap the top of the blue wave. */
  padding: 3rem 2rem 1.5rem;
  width: 100%;
}
.homepage__hero-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: var(--color-text);
  margin: 0 0 16px;
}
.homepage__hero-title-accent { color: var(--color-primary); }
@media (max-width: 1024px) {
  .homepage__hero-title { font-size: 42px; letter-spacing: -1px; }
}
@media (max-width: 640px) {
  /* Mobile: drop the decorative image. Light title area, solid blue band
     behind the cards (full-width). */
  .homepage__hero {
    min-height: auto;
    background: var(--bg);
  }
  .homepage__hero-bg { display: none; }
  .homepage__hero-title { font-size: 30px; letter-spacing: -0.5px; }
}

.tier1,
.tier2 { padding-bottom: 44px; font-family: var(--font-sans); }

.tier1__header,
.tier2__header,
.tier3__header { padding: 28px 0 56px; }
.tier1__hero-row,
.tier2__hero-row,
.tier3__hero-row { display: flex; align-items: center; gap: 1.25rem; }
.tier1__title,
.tier2__title,
.tier3__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.75px;
  color: var(--color-text);
  margin: 0 0 0.25rem;
}
.tier1__title-accent,
.tier2__title-accent,
.tier3__title-accent { color: var(--color-primary); }
.tier1__title-icon,
.tier2__title-icon,
.tier3__title-icon { width: 72px; height: 64px; object-fit: contain; flex-shrink: 0; margin: 0; }
.tier1__subtitle,
.tier2__subtitle,
.tier3__subtitle {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--subtext);
  line-height: 1.6;
  margin: 0;
}

.tier1__order,
.tier2__order,
.tier3__order {
  max-width: 1230px;
  margin-left: 14px;
  margin-right: auto;
}
/* Fixed-width summary (mockup .order-sidebar 360px) + 40px gap (mockup 2.5rem).
   Drop Bootstrap row negative margins / col padding so the card fills the full
   360px and the steps↔summary gap is a clean 40px (not the 24px g-4 gutter). */
@media (min-width: 992px) {
  .tier1 .row { margin-left: 0; margin-right: 0; gap: 40px; flex-wrap: nowrap; }
  .tier1__main,
.tier2__main,
.tier3__main { flex: 1 1 auto; width: auto; max-width: none; padding-left: 0; padding-right: 0; }
  .tier1__sidebar,
.tier2__sidebar,
.tier3__sidebar { flex: 0 0 360px; width: 360px; max-width: 360px; padding-left: 0; padding-right: 0; }
}

.tier1__step,
.tier2__step,
.tier3__step { margin-bottom: 2.5rem; }
.tier1__step:last-child,
.tier2__step:last-child,
.tier3__step:last-child { margin-bottom: 0; }
.tier1__step-header,
.tier2__step-header,
.tier3__step-header { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.5rem; }
.tier1__step-num,
.tier2__step-num,
.tier3__step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; flex-shrink: 0;
}
.tier1__step-title,
.tier2__step-title,
.tier3__step-title {
  font-family: var(--font-sans); font-size: 18px; font-weight: 800;
  color: var(--color-text); margin: 0;
}

.tier1__tabs,
.tier2__tabs { border-bottom: 1px solid var(--color-border); gap: 0.375rem; margin-bottom: 1.25rem; }
.tier1__tabs .nav-link,
.tier2__tabs .nav-link {
  color: var(--subtext); font-weight: 600; font-size: 13px;
  border: none; border-bottom: 2.5px solid transparent; background: none;
  padding: 0.5rem 1rem; margin-bottom: -1px; font-family: var(--font-sans);
}
.tier1__tabs .nav-link:hover,
.tier2__tabs .nav-link:hover { color: var(--color-text); border-color: transparent; }
.tier1__tabs .nav-link.active,
.tier2__tabs .nav-link.active { color: var(--color-primary); border-bottom-color: var(--color-primary); background: none; }

/* Step 3 (Server details) form labels - match the tab label typography
   (e.g. "Marketplace"): Manrope, 13px, 600, subtext colour. */
/* Crisp Manrope rendering (without this the font looks soft/heavy in Chrome). */
.tier1__details {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Match the mockup server-details card: 14px radius, 1.5rem body padding. */
  border: 1px solid var(--color-border);
  border-radius: 14px;
}
.tier1__details .card-body,
.tier2__details .card-body,
.tier3__details .card-body { padding: 1.5rem; }
.tier1__details .btn-outline-secondary,
.tier2__details .btn-outline-secondary,
.tier3__details .btn-outline-secondary {
  border-color: var(--color-border);
  color: var(--color-muted);
}
.tier1__details .btn-outline-secondary:hover, .tier1__details .btn-outline-secondary:focus, .tier1__details .btn-outline-secondary:active,
.tier2__details .btn-outline-secondary:hover, .tier2__details .btn-outline-secondary:focus, .tier2__details .btn-outline-secondary:active,
.tier3__details .btn-outline-secondary:hover, .tier3__details .btn-outline-secondary:focus, .tier3__details .btn-outline-secondary:active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: transparent;
}
.tier1__details .form-control, .tier1__details .form-select, .tier1__details .form-label,
.tier2__details .form-control, .tier2__details .form-select, .tier2__details .form-label,
.tier3__details .form-control, .tier3__details .form-select, .tier3__details .form-label {
  font-family: var(--font-sans);
}
.tier1__details .form-label,
.tier2__details .form-label,
.tier3__details .form-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text);
}
.tier1__details .form-text,
.tier2__details .form-text,
.tier3__details .form-text {
  font-size: 11px;
  color: var(--color-muted);
}
.tier1__details .text-danger.small,
.tier2__details .text-danger.small {
  font-size: 11px;
}
.tier1__details .form-control, .tier1__details .form-select,
.tier2__details .form-control, .tier2__details .form-select,
.tier3__details .form-control, .tier3__details .form-select {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.tier1__details .form-control::placeholder,
.tier2__details .form-control::placeholder,
.tier3__details .form-control::placeholder {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-muted);
  opacity: 1;
}
.tier1__details .form-select,
.tier2__details .form-select,
.tier3__details .form-select {
  color: var(--color-muted);
}
.tier1__details .form-control:focus, .tier1__details .form-select:focus,
.tier2__details .form-control:focus, .tier2__details .form-select:focus,
.tier3__details .form-control:focus, .tier3__details .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: none;
}
.tier1__details .form-select,
.tier2__details .form-select,
.tier3__details .form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2346516F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 15px 15px;
}
.tier1__details .form-select:hover,
.tier2__details .form-select:hover,
.tier3__details .form-select:hover {
  border-color: #BFCFFF;
}
.tier1__details .form-select:focus,
.tier2__details .form-select:focus,
.tier3__details .form-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230050FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.tier1__pwd-wrap,
.tier2__pwd-wrap,
.tier3__pwd-wrap { position: relative; }
.tier1__pwd-wrap .form-control,
.tier2__pwd-wrap .form-control,
.tier3__pwd-wrap .form-control { padding-right: 2.5rem; }
.tier1__pwd-eye,
.tier2__pwd-eye,
.tier3__pwd-eye {
  position: absolute; top: 50%; right: 0.85rem; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: none; background: none; color: var(--color-muted);
  cursor: pointer; transition: color var(--ease);
}
.tier1__pwd-eye:hover,
.tier2__pwd-eye:hover,
.tier3__pwd-eye:hover { color: var(--color-primary); }

/* Plans (grouped Standard / High Memory, colored top border, checkmark) */
.tier1__plans-wrap { display: flex; flex-direction: column; gap: 1.25rem; }
.tier1__plans-group-label { font-size: 13px; font-weight: 600; color: var(--subtext); margin-bottom: 0.625rem; }
.tier1__plans-grid-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.tier1__plan-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 0.7rem 0.7rem 0.65rem; cursor: pointer;
  transition: all var(--ease); position: relative;
  display: flex; flex-direction: column; text-align: left;
}
.tier1__plan-card:hover,
.tier3__plan-card:hover { border-color: var(--color-primary); background: linear-gradient(160deg, #EBF4FF, #F5F9FF); }
.tier1__plan-card.selected,
.tier3__plan-card.selected { border-color: var(--color-primary); background: linear-gradient(160deg, #EBF4FF, #F5F9FF); }
.tier1__plan-card.selected::after,
.tier3__plan-card.selected::after {
  content: ''; position: absolute; top: 7px; right: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-primary) url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  box-shadow: 0 0 0 2px white;
}
.tier1__plan-tier {
  display: inline-block; align-self: flex-start;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 100px; margin-bottom: 0.5rem; white-space: nowrap;
}
.tier1__plan-tier--entry       { background: #DBEAFE; color: #1D4ED8; }
.tier1__plan-tier--popular     { background: #E0ECFF; color: #0040CC; }
.tier1__plan-tier--recommended { background: #FF5400; color: #fff; }
.tier1__plan-tier--high        { background: #FEF3C7; color: #B45309; }
.tier1__plan-tier--capacity    { background: #FCE7F3; color: #9D174D; }
.tier1__plan-tier--advanced    { background: #CCFBF1; color: #0F766E; }
.tier1__plan-tier--enterprise  { background: #EDE9FE; color: #5B21B6; }
.tier1__plan-name,
.tier3__plan-name {
  font-size: 13.5px; font-weight: 800; color: var(--color-text);
  letter-spacing: -0.2px; margin-bottom: 0.55rem; padding-right: 1.2rem;
}
.tier1__plan-specs,
.tier3__plan-specs { display: flex; flex-direction: column; margin-bottom: 0.6rem; border-top: 1px solid var(--color-border); }
.tier1__plan-spec,
.tier3__plan-spec { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0; border-bottom: 1px solid var(--color-border); font-size: 10.5px; }
.tier1__plan-spec-label,
.tier3__plan-spec-label { display: flex; align-items: center; gap: 0.3rem; color: var(--subtext); font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 0.3px; }
.tier1__plan-spec-label svg,
.tier3__plan-spec-label svg { width: 11px; height: 11px; opacity: 0.5; }
.tier1__plan-spec-val,
.tier3__plan-spec-val { font-weight: 700; color: var(--color-text); font-size: 11px; }
.tier1__plan-price,
.tier3__plan-price { font-size: 16px; font-weight: 800; color: var(--color-text); letter-spacing: -0.4px; line-height: 1; margin-top: auto; }
.tier1__plan-price span,
.tier3__plan-price span { font-size: 10px; font-weight: 500; color: var(--subtext); letter-spacing: 0; margin-left: 2px; }

/* ===== Windows SPLA agreement (tier-1 + tier-2, from mockup v6) ===== */
.win-agreement__title { display: block; font-size: 12px; font-weight: 700; color: var(--color-text); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.4px; }
.win-agreement__req { color: #E53E3E; }
.win-agreement__check { display: flex; align-items: flex-start; gap: 0.65rem; cursor: pointer; padding: 0.7rem 0.95rem; border: 1px solid var(--color-border); border-radius: 10px; background-color: #fff; font-size: 12.5px; color: var(--color-text); line-height: 1.5; transition: all var(--ease); user-select: none; }
.win-agreement__check:hover { border-color: var(--color-primary); background: #FAFBFD; }
.win-agreement__check input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.win-agreement__check-box { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--color-border); background: #fff; display: inline-flex; align-items: center; justify-content: center; transition: all var(--ease); flex-shrink: 0; margin-top: 1px; }
.win-agreement__check input:checked + .win-agreement__check-box { background: var(--color-primary); border-color: var(--color-primary); }
.win-agreement__check input:checked + .win-agreement__check-box::after { content: ''; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(0px, -1px); }
.win-agreement__check.is-checked { border-color: var(--color-primary); background: #EEF3FF; }
.win-agreement__refs { display: flex; gap: 8px; margin-top: 0.7rem; align-items: center; flex-wrap: wrap; }
.win-agreement__refs-label { font-size: 11px; color: var(--subtext); }
.win-agreement__chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--color-primary); background: #fff; border: 1px solid var(--color-border); border-radius: 100px; padding: 4px 11px; text-decoration: none; transition: all var(--ease); }
.win-agreement__chip:hover { border-color: var(--color-primary); background: #EEF3FF; }
.win-agreement__chip svg { width: 11px; height: 11px; opacity: 0.7; }

/* ===== Windows license notice (amber, tier-1 + tier-2, from mockup v6) ===== */
.win-notice { display: flex; align-items: center; gap: 0.75rem; background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%); border: 1px solid #FDE68A; border-radius: 10px; padding: 0.7rem 0.95rem; }
.win-notice__icon-wrap { width: 30px; height: 30px; background: #fff; border-radius: 7px; border: 1px solid #FDE68A; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #92400E; }
.win-notice__body { flex: 1; min-width: 0; font-size: 12.5px; color: #92400E; line-height: 1.45; }
.win-notice__body strong { font-weight: 700; color: #3D2D02; }
.win-notice__chip { display: inline-flex; align-items: center; background: #FDE68A; color: #3D2D02; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; flex-shrink: 0; }
.win-notice__link { font-size: 11.5px; font-weight: 700; color: var(--color-primary); text-decoration: none; flex-shrink: 0; }
.win-notice__link:hover { color: #0040CC; text-decoration: underline; }
@media (max-width: 640px) {
  .win-notice { flex-wrap: wrap; }
  .win-notice__body { flex: 1 1 100%; order: 3; }
}

.tier1__tpl-grid,
.tier2__tpl-grid,
.tier3__tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.tier1__tpl-card,
.tier2__tpl-card,
.tier3__tpl-card {
  border: 1px solid var(--color-border); border-radius: 12px; padding: 0.875rem;
  cursor: pointer; background: #fff; position: relative;
  display: flex; align-items: center; gap: 0.75rem;
}
.tier1__tpl-card:hover,
.tier2__tpl-card:hover,
.tier3__tpl-card:hover { border-color: var(--color-primary); background: var(--hover-bg); }
.tier1__tpl-card.selected,
.tier2__tpl-card.selected,
.tier3__tpl-card.selected { border-color: var(--color-primary); background: #EEF3FF; box-shadow: 0 4px 20px rgba(0,80,255,0.13); }
.tier1__tpl-card.selected::after,
.tier2__tpl-card.selected::after,
.tier3__tpl-card.selected::after {
  content: ''; position: absolute; top: 8px; right: 8px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M6.5 11.5L3 8l1.5-1.5L6.5 8.5l5-5L13 5z'/%3E%3C/svg%3E");
  background-size: 11px; background-repeat: no-repeat; background-position: center;
}
.tier1__tpl-card--dim,
.tier2__tpl-card--dim { opacity: 0.45; }
/* Incompatible with the selected template/plan: clicks are blocked in JS (tier-1), the
   cursor says why. Plans below the selected template's minimum share the dim look. */
.tier1__plan-card--dim { opacity: 0.45; cursor: not-allowed; }
.tier1__tpl-card--dim { cursor: not-allowed; }
.tier1__tpl-card--more,
.tier2__tpl-card--more { justify-content: center; text-align: center; background: var(--color-surface-alt); color: var(--color-primary); font-weight: 700; }
.tier1__tpl-icon,
.tier2__tpl-icon,
.tier3__tpl-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tier1__tpl-icon img,
.tier2__tpl-icon img,
.tier3__tpl-icon img { object-fit: contain; }
.tier1__tpl-info,
.tier2__tpl-info,
.tier3__tpl-info { min-width: 0; }
.tier1__tpl-name,
.tier2__tpl-name,
.tier3__tpl-name { font-size: 12px; font-weight: 700; color: var(--color-text); line-height: 1.3; }
.tier1__tpl-ver,
.tier2__tpl-ver,
.tier3__tpl-ver { font-size: 11px; color: var(--subtext); }
.tier1__tpl-kb,
.tier2__tpl-kb { display: inline-block; font-size: 11px; margin-top: 2px; color: var(--color-primary); text-decoration: none; }
.tier1__tpl-kb:hover,
.tier2__tpl-kb:hover { text-decoration: underline; }

.tier1__sidebar,
.tier2__sidebar,
.tier3__sidebar { font-family: var(--font-sans); color: var(--color-text); }
.tier1__summary.card,
.tier2__summary.card,
.tier3__summary.card {
  border: none; border-radius: 20px; background: #fff;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  position: sticky; top: 90px;
}
.tier1__summary .card-body,
.tier2__summary .card-body,
.tier3__summary .card-body { padding: 1.75rem; }
.tier1__summary-title,
.tier2__summary-title,
.tier3__summary-title {
  font-size: 17px; font-weight: 800; color: var(--color-text);
  margin: 0 0 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border);
}
.tier1__summary-row,
.tier2__summary-row,
.tier3__summary-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.75rem; }
.tier1__summary-label,
.tier2__summary-label,
.tier3__summary-label { font-size: 13px; color: var(--subtext); font-weight: 500; }
.tier1__summary-val,
.tier2__summary-val,
.tier3__summary-val { font-size: 13px; font-weight: 700; color: var(--color-text); text-align: right; }
.tier1__summary-divider,
.tier2__summary-divider,
.tier3__summary-divider { border: none; border-top: 1px solid var(--color-border); margin: 1rem 0; opacity: 1; }
.tier1__summary-total,
.tier2__summary-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.tier1__summary-total-label,
.tier2__summary-total-label,
.tier3__summary-total-label { font-size: 15px; font-weight: 700; color: var(--color-text); }
.tier1__summary-total-price,
.tier2__summary-total-price,
.tier3__summary-total-price { font-size: 26px; font-weight: 800; color: var(--color-primary); }
.tier1__summary-total-price span,
.tier2__summary-total-price span,
.tier3__summary-total-price span { font-size: 13px; font-weight: 500; color: var(--subtext); }

/* Create VM button - match the other blue action buttons (login/checkout/signup
   submit): brand blue, radius 12px, shadow, lift on hover, grey when disabled. */
#tier1-create {
  background: var(--color-primary);
  border: none;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.3px;

  transition: all var(--ease);
}
#tier1-create:hover:not(:disabled),
#tier1-create:focus:not(:disabled) {
  background: #0040cc;
  transform: translateY(-1px);

}
#tier1-create:disabled {
  background: #a0b0cc;
  opacity: 1;
  box-shadow: none;
  transform: none;
}

.tier1__field-flash,
.tier2__field-flash,
.tier3__field-flash {
  border-color: #E53E3E !important;
  box-shadow: none !important;
}
.tier1__step,
.tier2__step,
.tier3__step { scroll-margin-top: 90px; }
.tier1__step-header,
.tier2__step-header { position: relative; }
.tier1__step--flash .tier1__step-header::after,
.tier2__step--flash .tier2__step-header::after,
.tier3__step--flash .tier3__step-header::after {
  content: '';
  position: absolute;
  left: 0; bottom: -8px;
  height: 3px; width: 100%;
  background: #E53E3E;
  border-radius: 2px;
  transform-origin: left center;
  animation: tier1StepStrip 2s ease forwards;
}
@keyframes tier1StepStrip {
  0%   { transform: scaleX(0); opacity: 1; }
  18%  { transform: scaleX(1); opacity: 1; }
  82%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}


.tier2__details,
.tier3__details {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border: 1px solid var(--color-border);
  border-radius: 14px;
}


#tier2-create {
  background: var(--color-primary); border: none; border-radius: 12px;
  font-family: var(--font-sans); font-weight: 800; letter-spacing: 0.3px;
 transition: all var(--ease);
}
#tier2-create:hover:not(:disabled),
#tier2-create:focus:not(:disabled) {
  background: #0040cc; transform: translateY(-1px);
}
#tier2-create:disabled { background: #a0b0cc; opacity: 1; box-shadow: none; transform: none; }
.tier1__summary-detail,
.tier2__summary-detail { font-size: 11px; color: var(--subtext); margin-top: 0.5rem; }
.tier1__label-optional,
.tier2__label-optional,
.tier3__label-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--subtext); }
.tier1__fineprint,
.tier2__fineprint,
.tier3__fineprint { font-size: 11px; color: var(--subtext); }

.tier1__sidebar .form-label,
.tier2__sidebar .form-label { color: var(--color-text); font-family: var(--font-sans); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
.tier1__sidebar .form-text,
.tier2__sidebar .form-text { color: var(--subtext); font-family: var(--font-sans); font-size: 11px; }
.tier1__sidebar .form-control, .tier1__sidebar .form-select,
.tier2__sidebar .form-control, .tier2__sidebar .form-select {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text);
  transition: border-color var(--ease);
}
.tier1__sidebar .form-control:focus, .tier1__sidebar .form-select:focus,
.tier2__sidebar .form-control:focus, .tier2__sidebar .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: none;
  outline: none;
}
.tier1__sidebar .form-control::placeholder,
.tier2__sidebar .form-control::placeholder { color: var(--subtext); }
.tier1__sidebar .form-select,
.tier2__sidebar .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%2346516F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 14px;
}

/* Router LAN "new network" fields (name + CIDR). Own 2-col grid instead of
   Bootstrap .row.g-2 - the page-level ".tierN .row { gap:40px; nowrap }" override
   leaks into nested rows and pushes the CIDR input past the card. Shared tier1/2. */
.router-lan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
@media (max-width: 640px) { .router-lan-grid { grid-template-columns: 1fr; } }

.tier1__net-toggle,
.tier2__net-toggle,
.tier3__net-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.tier1__net-btn,
.tier2__net-btn,
.tier3__net-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 0.85rem 1rem; border-radius: 10px; border: 1px solid var(--color-border);
  background: #fff; font-size: 13px; font-weight: 600; color: var(--subtext);
  cursor: pointer; transition: all var(--ease); text-align: center; margin: 0;
}
.tier1__net-radio,
.tier2__net-radio,
.tier3__net-radio { position: absolute; opacity: 0; pointer-events: none; }
.tier1__net-btn:has(.tier1__net-radio:checked),
.tier2__net-btn:has(.tier2__net-radio:checked),
.tier3__net-btn:has(.tier3__net-radio:checked) { border-color: var(--color-primary); background: #EEF3FF; color: var(--color-primary); }
.tier1__net-btn:has(.tier1__net-radio:disabled),
.tier2__net-btn:has(.tier2__net-radio:disabled),
.tier3__net-btn:has(.tier3__net-radio:disabled) { opacity: 0.5; cursor: not-allowed; }

/* Guest network buttons: they carry the explanation themselves (the select is hidden -
   a guest has nothing to pick from), so Public states that an IP is assigned and Private
   is locked. Sub-labels appear only on .is-guest; a logged user keeps the plain toggle.
   Shared by tier-1/2/3 - one rule, not three copies (the surrounding .tierN__* blocks are
   still duplicated, see fiberax-lite/open-items.md). */
.tier1__net-toggle.is-guest .tier1__net-btn,
.tier2__net-toggle.is-guest .tier2__net-btn,
.tier3__net-toggle.is-guest .tier3__net-btn {
  flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.7rem 0.75rem; text-align: center;
}
.tier-net-btn__title { display: inline-flex; align-items: center; }
.tier-net-btn__sub {
  display: none; font-size: 11px; font-weight: 500; line-height: 1.35;
  color: var(--subtext); text-wrap: balance;
}
.tier1__net-toggle.is-guest .tier-net-btn__sub,
.tier2__net-toggle.is-guest .tier-net-btn__sub,
.tier3__net-toggle.is-guest .tier-net-btn__sub { display: block; }
/* Router networks, guest view: both networks are predetermined (new public IP + the
   project's Default Network), so the WAN/LAN selects give way to this plain statement. */
.tier-net-plan {
  border: 1px solid var(--color-border); border-radius: 10px; background: var(--hover-bg);
  padding: 0.75rem 1rem; margin-bottom: 0.75rem;
}
.tier-net-plan__row { display: flex; align-items: flex-start; gap: 0.625rem; }
.tier-net-plan__row + .tier-net-plan__row { margin-top: 0.625rem; }
.tier-net-plan__ic { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--color-primary); }
.tier-net-plan__text { display: flex; flex-direction: column; gap: 1px; }
.tier-net-plan__title { font-size: 13px; font-weight: 700; color: var(--color-text); }
.tier-net-plan__sub { font-size: 11px; font-weight: 500; line-height: 1.35; color: var(--subtext); }
.tier-net-lock { display: none; width: 13px; height: 13px; margin-left: 0.375rem; flex: none; }
.tier1__net-btn.is-locked,
.tier2__net-btn.is-locked,
.tier3__net-btn.is-locked { opacity: 0.55; cursor: not-allowed; background: var(--hover-bg); }
.tier1__net-btn.is-locked .tier-net-lock,
.tier2__net-btn.is-locked .tier-net-lock,
.tier3__net-btn.is-locked .tier-net-lock { display: inline-block; }

.tier1__sidebar .btn-primary,
.tier2__sidebar .btn-primary {
  background: var(--color-primary); border: none; color: #fff;
  border-radius: 12px; font-family: var(--font-sans); font-weight: 800;
  font-size: 14px; letter-spacing: 0.4px; padding: 1rem;
 transition: all var(--ease);
}
.tier1__sidebar .btn-primary:hover:not(:disabled),
.tier2__sidebar .btn-primary:hover:not(:disabled) {
  background: #0040cc; transform: translateY(-1px);
}
.tier1__sidebar .btn-primary:disabled,
.tier2__sidebar .btn-primary:disabled {
  background: #a0b0cc; box-shadow: none; transform: none;
}

@media (max-width: 991.98px) {
  .tier1__summary.card,
.tier2__summary.card { position: static; }
}
@media (max-width: 1024px) {
  .tier1__plans-grid-inner { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .tier1__plans-grid-inner { grid-template-columns: 1fr 1fr; }
  .tier1__tpl-grid,
.tier2__tpl-grid { grid-template-columns: 1fr 1fr; }
  .tier1__title,
.tier2__title { font-size: 1.6rem; }
}


@media (min-width: 992px) {
  .tier2 .row { margin-left: 0; margin-right: 0; gap: 40px; flex-wrap: nowrap; }
  
  
}


/* Step 1 — resource sliders (mockup .slider look + number input retained) */
.tier2__sliders-wrap { display: flex; flex-direction: column; gap: 2rem; max-width: 860px; }
.tier2__slider-row { display: flex; flex-direction: column; gap: 0.625rem; }
.tier2__slider-label { display: flex; justify-content: space-between; align-items: center; }
.tier2__slider-label label { font-size: 14px; font-weight: 700; color: var(--color-text); margin: 0; }
.tier2__slider-val { font-size: 15px; font-weight: 600; color: var(--color-primary); }
.tier2__slider-val strong { font-weight: inherit; }
.tier2__slider-controls { display: flex; align-items: center; gap: 0.875rem; }
.tier2__slider {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 auto; width: 100%; height: 6px; border-radius: 999px;
  background: var(--color-border); outline: none; cursor: pointer;
  transition: background var(--ease);
}
.tier2__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-primary); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,80,255,0.3); border: 3px solid #fff;
  transition: transform var(--ease), box-shadow var(--ease);
}
.tier2__slider::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 4px 14px rgba(0,80,255,0.4); }
.tier2__slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-primary); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,80,255,0.3); border: 3px solid #fff;
}
.tier2__slider-num {
  flex: 0 0 84px; width: 84px; text-align: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-control);
  background: var(--color-surface); font-family: var(--font-sans);
  font-size: 14px; font-weight: 700; color: var(--color-text);
  padding: 0.5rem 0.5rem; transition: border-color var(--ease);
}
.tier2__slider-num:focus { border-color: var(--color-primary); box-shadow: none; outline: none; }
/* Marks row is clamped to the track width (controls row minus the 84px number input + gap);
   each mark is centered under the native thumb position for its value via --f (set by JS). */
.tier2__slider-marks { position: relative; height: 16px; margin-right: calc(84px + 0.875rem); }
.tier2__slider-marks span {
  position: absolute; top: 0;
  left: calc(var(--f, 0) * (100% - 22px) + 11px); /* mirrors 22px thumb geometry */
  transform: translateX(-50%);
  font-size: 11px; line-height: 16px; color: var(--subtext); white-space: nowrap;
}


@media (max-width: 991.98px) {
  
}
@media (max-width: 640px) {
  
  .tier2__sliders-wrap { gap: 1.5rem; }
  
}

/* Tier 3 page (mirrors Tier 1/2 styling + plan-card variant) */
.tier3, .order-s3, .order-veeam { font-family: var(--font-sans); }
.tier3 { padding-bottom: 44px; }


@media (min-width: 992px) {
  .tier3 .row { margin-left: 0; margin-right: 0; gap: 40px; flex-wrap: nowrap; }
  
  
}


/* Step 1 - GPU packages (mirror Tier-1 plan cards) */
.tier3__plans-wrap { display: flex; flex-direction: column; gap: 1.5rem; }
.tier3__plans-grid-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
/* When only a single GPU package is available, center the lone card instead of
   leaving it stretched in the left column (JS toggles this on packages.length===1). */
.tier3__plans-grid-inner--single { grid-template-columns: min(400px, 100%); justify-content: center; }
.tier3__plan-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 0.85rem 0.85rem 0.8rem; cursor: pointer;
  transition: all var(--ease); position: relative;
  display: flex; flex-direction: column; text-align: left;
}


.tier3__step--flash .tier3__step-header { position: relative; }


.tier3__summary-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }


.tier3__summary-detail { font-size: 11px; color: var(--subtext); margin-top: 0.25rem; min-height: 1em; }
.tier3__summary-hint { font-size: 11px; color: var(--subtext); text-align: center; margin: 0.75rem 0 0; }

/* Create button - match the blue action buttons (login/checkout/Tier-1 Create). */
#tier3-create {
  background: var(--color-primary); border: none; border-radius: 12px;
  font-family: var(--font-sans); font-weight: 800; letter-spacing: 0.3px;
 transition: all var(--ease);
}
#tier3-create:hover:not(:disabled),
#tier3-create:focus:not(:disabled) {
  background: #0040cc; transform: translateY(-1px);
}
#tier3-create:disabled { background: #a0b0cc; opacity: 1; box-shadow: none; transform: none; }

/* Mobile: full-width grid + non-sticky summary (below Tier-1 992 breakpoint) */
@media (max-width: 991px) {
  .tier3__order { max-width: none; margin-left: 0; }
  .tier3__summary.card { position: static; }
}
@media (max-width: 575px) {
  .tier3__plans-grid-inner, .tier3__tpl-grid { grid-template-columns: 1fr 1fr; }
}

/* S3 page (mirrors Tier-2 header+slider + Tier-1 sticky summary) */
.order-s3__header { padding: 28px 0 56px; }
.order-s3__hero-row { display: flex; align-items: center; gap: 1.25rem; }
.order-s3__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.75px;
  color: var(--color-text);
  margin: 0 0 0.25rem;
}
.order-s3__title-accent { color: var(--color-primary); }
.order-s3__title-icon { width: 72px; height: 64px; object-fit: contain; flex-shrink: 0; margin: 0; }
.order-s3__subtitle {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--subtext);
  line-height: 1.6;
  margin: 0;
}

/* Order grid wrapper (header full-width, steps+sidebar inset - mirror Tier-2) */
.order-s3__order { max-width: 1230px; margin-left: 14px; margin-right: auto; }
@media (min-width: 992px) {
  .order-s3 .row { margin-left: 0; margin-right: 0; gap: 40px; flex-wrap: nowrap; }
  .order-s3__main { flex: 1 1 auto; width: auto; max-width: none; padding-left: 0; padding-right: 0; }
  .order-s3__sidebar { flex: 0 0 360px; width: 360px; max-width: 360px; padding-left: 0; padding-right: 0; }
}

/* Step block (numbered circle + title) */
.order-s3__step { margin-bottom: 2.5rem; }
.order-s3__step:last-child { margin-bottom: 0; }
.order-s3__step-header { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.5rem; }
.order-s3__step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; flex-shrink: 0;
}
.order-s3__step-title {
  font-family: var(--font-sans); font-size: 18px; font-weight: 800;
  color: var(--color-text); margin: 0;
}

/* Volume slider (mirror Tier-2 slider look + number input) */
.order-s3__sliders-wrap { display: flex; flex-direction: column; gap: 2rem; max-width: 860px; }
.order-s3__slider-row { display: flex; flex-direction: column; gap: 0.625rem; }
.order-s3__slider-label { display: flex; justify-content: space-between; align-items: center; }
.order-s3__slider-label label { font-size: 14px; font-weight: 700; color: var(--color-text); margin: 0; }
.order-s3__slider-val { font-size: 15px; font-weight: 600; color: var(--color-primary); }
.order-s3__slider-val strong { font-weight: inherit; }
.order-s3__slider-controls { display: flex; align-items: center; gap: 0.875rem; }
.order-s3__slider {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 auto; width: 100%; height: 6px; border-radius: 999px;
  background: var(--color-border); outline: none; cursor: pointer;
  transition: background var(--ease);
}
.order-s3__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-primary); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,80,255,0.3); border: 3px solid #fff;
  transition: transform var(--ease), box-shadow var(--ease);
}
.order-s3__slider::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 4px 14px rgba(0,80,255,0.4); }
.order-s3__slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-primary); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,80,255,0.3); border: 3px solid #fff;
}
.order-s3__slider-num {
  flex: 0 0 84px; width: 84px; text-align: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-control);
  background: var(--color-surface); font-family: var(--font-sans);
  font-size: 14px; font-weight: 700; color: var(--color-text);
  padding: 0.5rem 0.5rem; transition: border-color var(--ease);
}
.order-s3__slider-num:focus { border-color: var(--color-primary); box-shadow: none; outline: none; }
/* Same mark geometry as tier-2: row clamped to track width, marks centered under thumb via --f. */
.order-s3__slider-marks { position: relative; height: 16px; margin-right: calc(84px + 0.875rem); }
.order-s3__slider-marks span {
  position: absolute; top: 0;
  left: calc(var(--f, 0) * (100% - 22px) + 11px); /* mirrors 22px thumb geometry */
  transform: translateX(-50%);
  font-size: 11px; line-height: 16px; color: var(--subtext); white-space: nowrap;
}
.order-s3__slider-help { font-size: 11px; color: var(--subtext); margin-top: 0.25rem; }
/* About S3 block (variant C - intro + two-column icon feature list). Fills the
   left column under the storage slider so the page isn't sparse. */
.order-s3__about { margin-top: 2.75rem; }
.order-s3__about-title { font-size: 18px; font-weight: 800; color: var(--color-text); margin: 0 0 1rem; }
.order-s3__about-lead { font-size: 15px; line-height: 1.65; color: var(--subtext); margin: 0 0 1.5rem; }
/* About features and Workloads use-cases are ONE component with two class names
   (the markup is identical: icon tile + title + text). Styling them together is
   what keeps their icons on the same vertical line - a card of its own padding
   per block is exactly what pushed them apart before. */
.order-s3__features,
.order-s3__usecases-grid,
.order-apitokens__features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.order-s3__feature,
.order-s3__usecase,
.order-apitokens__feature {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px; background: #fff;
  border: 1px solid #e6e9f2; border-radius: 14px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.order-s3__feature:hover,
.order-s3__usecase:hover,
.order-apitokens__feature:hover { border-color: var(--color-primary); box-shadow: 0 4px 14px rgba(0,80,255,.08); }
.order-s3__feature-ic,
.order-s3__usecase-ic,
.order-apitokens__feature-ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  background: #eef3ff; color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.order-s3__feature-ic svg,
.order-s3__usecase-ic svg,
.order-apitokens__feature-ic svg { width: 20px; height: 20px; }
.order-s3__feature h3,
.order-s3__usecase h3,
.order-apitokens__feature h3 { font-size: 14.5px; font-weight: 700; color: var(--color-text); margin: 1px 0 4px; }
.order-s3__feature p,
.order-s3__usecase p,
.order-apitokens__feature p { font-size: 12.5px; color: var(--subtext); margin: 0; line-height: 1.45; }
@media (max-width: 640px) {
  .order-s3__features,
  .order-s3__usecases-grid,
  .order-apitokens__features { grid-template-columns: 1fr; }
}

/* Sidebar — Summary card (mirror Tier-1 sticky summary) */
.order-s3__sidebar { font-family: var(--font-sans); color: var(--color-text); }
.order-s3__summary.card {
  border: none; border-radius: 20px; background: #fff;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  position: sticky; top: 90px;
}
.order-s3__summary .card-body { padding: 1.75rem; }
.order-s3__summary-title {
  font-size: 17px; font-weight: 800; color: var(--color-text);
  margin: 0 0 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border);
}
.order-s3__summary-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.order-s3__summary-total-label { font-size: 15px; font-weight: 700; color: var(--color-text); }
.order-s3__summary-total-price { font-size: 26px; font-weight: 800; color: var(--color-primary); }
.order-s3__summary-detail { font-size: 11px; color: var(--subtext); margin-top: 0.25rem; min-height: 1em; }
.order-s3__summary-tax { font-size: 11px; color: var(--subtext); margin-top: 0.5rem; }
.order-s3__summary-hint { font-size: 11px; color: var(--subtext); text-align: center; margin: 0.75rem 0 0; }

/* Order button - match the blue action buttons (login/checkout/tier Create). */
#order-s3-submit {
  background: var(--color-primary); border: none; border-radius: 12px;
  font-family: var(--font-sans); font-weight: 800; letter-spacing: 0.3px;
 transition: all var(--ease);
}
#order-s3-submit:hover:not(:disabled),
#order-s3-submit:focus:not(:disabled) {
  background: #0040cc; transform: translateY(-1px);

}
#order-s3-submit:disabled { background: #a0b0cc; opacity: 1; box-shadow: none; transform: none; }

/* Pricing examples (metered) - compact tiles, sit in the config column up to Summary */
.order-s3__pricing { margin-top: 1.5rem; padding: 22px 26px; background: #fff; border: 1px solid #e6e9f2; border-radius: 16px; }
.order-s3__pricing-title { font-size: 17px; font-weight: 800; color: var(--color-text); margin: 0 0 4px; }
.order-s3__pricing-sub { font-size: 13.5px; color: var(--subtext); margin: 0 0 16px; line-height: 1.5; }
.order-s3__pricing-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.order-s3__price-tile { flex: 0 1 auto; min-width: 126px; border: 1px solid #e6e9f2; border-radius: 12px; padding: 11px 22px; text-align: center; background: linear-gradient(180deg, #f7f9ff 0%, #ffffff 100%); transition: border-color var(--ease), box-shadow var(--ease); }
.order-s3__price-tile:hover { border-color: var(--color-primary); box-shadow: 0 4px 14px rgba(0,80,255,.08); }
.order-s3__price-tile-size { font-size: 12px; font-weight: 700; color: var(--subtext); margin-bottom: 5px; }
.order-s3__price-tile-cost { font-size: 18px; font-weight: 800; color: var(--color-primary); line-height: 1; }
.order-s3__price-tile-cost span { font-size: 12px; font-weight: 600; color: var(--subtext); margin-left: 2px; }
.order-s3__pricing-note { font-size: 12.5px; color: var(--subtext); margin: 14px 0 0; line-height: 1.5; }

/* Use-cases - 2 across in the config column */
.order-s3__usecases { margin-top: 1.5rem; }
.order-s3__usecases-title { font-size: 18px; font-weight: 800; color: var(--color-text); margin: 0 0 1rem; }
/* Card + icon + type live with .order-s3__feature (single source, see above). */

/* Mobile: full-width grid + non-sticky summary (below Tier-2 992 breakpoint) */
@media (max-width: 991px) {
  .order-s3__order { max-width: none; margin-left: 0; }
  .order-s3__summary.card { position: static; }
}

/* ============================================================
   §20a Order VDC (create a new Virtual Data Center)
   Mirrors the §order-s3 layout (header + numbered step + sticky summary),
   minus the slider; adds a project-name field. Scoped .order-vdc__* so a
   future S3 restyle does not bleed here (per the tier1/tier2 isolation rule).
   ============================================================ */
.order-vdc { font-family: var(--font-sans); padding-bottom: 44px; }
.order-vdc__header { padding: 28px 0 56px; }
.order-vdc__hero-row { display: flex; align-items: center; gap: 1.25rem; }
.order-vdc__title { font-family: var(--font-sans); font-weight: 800; font-size: 2rem; line-height: 1.15; letter-spacing: -0.75px; color: var(--color-text); margin: 0 0 0.25rem; }
.order-vdc__title-accent { color: var(--color-primary); }
.order-vdc__title-icon { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; margin: 0; }
.order-vdc__subtitle { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--subtext); line-height: 1.6; margin: 0; }

/* Flush-left, like every other cabinet block (the page title, the alert and the
   preview/order cards on the sibling S3 page all start at the column edge). */
.order-vdc__order { max-width: 1230px; margin-left: 0; margin-right: auto; }

/* The whole order form lives in one white card - fields left, summary right -
   mirroring the S3 buy widget. Summary is no longer sticky: the card is short
   and the Create button stays in view without it. */
.order-vdc__buy {
  padding: 24px 26px;
  background: #fff;
  border: 1px solid #e6e9f2;
  border-radius: 16px;
}
.order-vdc__buy-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
/* Top padding is trimmed so "Summary" sits on the same line as the step heading
   opposite it (the heading is centred against the 32px "+" badge). */
.order-vdc__buy-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 0.5rem 1.25rem 1.25rem;
}
.order-vdc__buy-summary .order-vdc__summary-title { margin-bottom: 1rem; padding-bottom: 1rem; }
@media (max-width: 900px) { .order-vdc__buy-grid { grid-template-columns: 1fr; } }
.order-vdc__step-header { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.5rem; }
.order-vdc__step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex-shrink: 0; }
.order-vdc__step-title { font-family: var(--font-sans); font-size: 18px; font-weight: 800; color: var(--color-text); margin: 0; }

.order-vdc__field { max-width: 460px; }
.order-vdc__field-label { font-size: 14px; font-weight: 700; color: var(--color-text); margin: 0 0 0.5rem; display: block; }
.order-vdc__name { border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--color-text); padding: 0.625rem 0.875rem; transition: border-color var(--ease); }
.order-vdc__name::placeholder { color: var(--color-muted); }
.order-vdc__name:focus { border-color: var(--color-primary); box-shadow: none; outline: none; }
.order-vdc__field-help { font-size: 11px; color: var(--subtext); margin-top: 0.4rem; }
/* Guest-only "What you get" list: the left column would otherwise hold just the backup
   switch (a client fills it with the project-name field instead). */
.order-vdc__included-field { margin-bottom: 1.5rem; }
.order-vdc__included { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.order-vdc__included li {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; line-height: 1.5;
  color: var(--color-text);
}
.order-vdc__included svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--color-primary); margin-top: 1px; }
.order-vdc__about { margin-top: 2.75rem; }
.order-vdc__about-title { font-size: 18px; font-weight: 800; color: var(--color-text); margin: 0 0 1rem; }
/* About spans the full page width (the order card above it no longer sits in a
   narrow column). The feature grid packs as many ~280px cells as fit - four on
   a wide screen, two on a tablet, one on a phone. */
.order-vdc__about-lead { font-size: 15px; line-height: 1.65; color: var(--subtext); margin: 0 0 1.5rem; }
.order-vdc__features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem 2rem; }
.order-vdc__feat { display: flex; gap: 0.75rem; align-items: flex-start; }
.order-vdc__feat-ic { width: 32px; height: 32px; border-radius: 8px; background: #F5F6FA; color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.order-vdc__feat-ic svg { width: 17px; height: 17px; }
.order-vdc__feat h3 { font-size: 13.5px; font-weight: 700; color: var(--color-text); margin: 0 0 2px; }
.order-vdc__feat p { font-size: 12px; color: var(--subtext); margin: 0; line-height: 1.45; }
@media (max-width: 640px) { .order-vdc__features-grid { grid-template-columns: 1fr; } }
.order-vdc__backup { border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); border-radius: 10px; padding: 0.8rem 1rem; margin-top: 1.25rem; font-size: 12.5px; color: var(--color-text); background: var(--color-surface); line-height: 1.55; }

.order-vdc__summary-title { font-size: 17px; font-weight: 800; color: var(--color-text); margin: 0 0 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); }
.order-vdc__summary-row { display: flex; justify-content: space-between; align-items: center; }
.order-vdc__summary-row-label { font-size: 15px; font-weight: 700; color: var(--color-text); }
.order-vdc__summary-row-val { font-size: 20px; font-weight: 800; color: var(--color-primary); }
.order-vdc__summary-detail { font-size: 11px; color: var(--subtext); margin-top: 0.5rem; line-height: 1.5; }
.order-vdc__summary-hint { font-size: 11px; color: var(--subtext); text-align: center; margin: 0.75rem 0 0; }
/* Shared by order-vdc and order-s3: the guest sign-up line under the CTA. */
.order-vdc__guest-hint,
.order-s3__guest-hint { font-size: 12px; color: var(--subtext); text-align: center; margin: 0.75rem 0 0; }
.order-vdc__guest-hint a,
.order-s3__guest-hint a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.order-vdc__guest-hint a:hover,
.order-s3__guest-hint a:hover { text-decoration: underline; }

#order-vdc-create { background: var(--color-primary); border: none; border-radius: 12px; font-family: var(--font-sans); font-weight: 800; letter-spacing: 0.3px; transition: all var(--ease); }
#order-vdc-create:hover:not(:disabled), #order-vdc-create:focus:not(:disabled) { background: #0040cc; transform: translateY(-1px); }
#order-vdc-create:disabled { background: #a0b0cc; opacity: 1; box-shadow: none; transform: none; }

@media (max-width: 991px) {
  .order-vdc__order { max-width: none; margin-left: 0; }
}

/* ============================================================
   §20b Order API Tokens (flat product 900)
   Mirrors §20a Order VDC (header + sticky summary), minus the
   name field / numbered step (flat product, no config). Scoped
   .order-apitokens__* so a future restyle does not bleed.
   ============================================================ */
.order-apitokens { font-family: var(--font-sans); padding-bottom: 44px; }
.order-apitokens__header { padding: 28px 0 56px; }
.order-apitokens__hero-row { display: flex; align-items: center; gap: 1.25rem; }
.order-apitokens__title { font-family: var(--font-sans); font-weight: 800; font-size: 2rem; line-height: 1.15; letter-spacing: -0.75px; color: var(--color-text); margin: 0 0 0.25rem; }
.order-apitokens__title-accent { color: var(--color-primary); }
.order-apitokens__title-icon { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; margin: 0; }
/* max-width keeps the intro paragraph at a readable line length - it is several lines long,
   unlike the one-liner subtitles of the other order pages. */
.order-apitokens__subtitle { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--subtext); line-height: 1.6; margin: 0; max-width: 760px; }

.order-apitokens__order { max-width: 1230px; margin-left: 14px; margin-right: auto; }
@media (min-width: 992px) {
  .order-apitokens .row { margin-left: 0; margin-right: 0; gap: 40px; flex-wrap: nowrap; }
  .order-apitokens__main { flex: 1 1 auto; width: auto; max-width: none; padding-left: 0; padding-right: 0; }
  .order-apitokens__sidebar { flex: 0 0 360px; width: 360px; max-width: 360px; padding-left: 0; padding-right: 0; }
}

.order-apitokens__about-title { font-family: var(--font-sans); font-size: 18px; font-weight: 800; color: var(--color-text); margin: 0 0 1rem; }
.order-apitokens__about-desc { font-size: 13px; color: var(--subtext); line-height: 1.6; margin: 0; max-width: 560px; }

.order-apitokens__sidebar { font-family: var(--font-sans); color: var(--color-text); }
.order-apitokens__summary.card { border: none; border-radius: 20px; background: #fff; box-shadow: 0 2px 16px rgba(0,0,0,0.08); position: sticky; top: 80px; }
.order-apitokens__summary .card-body { padding: 1.75rem; }
.order-apitokens__summary-title { font-size: 17px; font-weight: 800; color: var(--color-text); margin: 0 0 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); }
.order-apitokens__summary-row { display: flex; justify-content: space-between; align-items: center; }
.order-apitokens__summary-row-label { font-size: 15px; font-weight: 700; color: var(--color-text); }
.order-apitokens__summary-row-val { font-size: 20px; font-weight: 800; color: var(--color-primary); }
.order-apitokens__summary-detail { font-size: 11px; color: var(--subtext); margin-top: 0.5rem; line-height: 1.5; }
.order-apitokens__summary-hint { font-size: 11px; color: var(--subtext); text-align: center; margin: 0.75rem 0 0; }
.order-apitokens__guest-hint { font-size: 12px; color: var(--subtext); text-align: center; margin: 0.75rem 0 0; }
.order-apitokens__guest-hint a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.order-apitokens__guest-hint a:hover { text-decoration: underline; }

#order-apitokens-create { background: var(--color-primary); border: none; border-radius: 12px; font-family: var(--font-sans); font-weight: 800; letter-spacing: 0.3px; transition: all var(--ease); }
#order-apitokens-create:hover:not(:disabled), #order-apitokens-create:focus:not(:disabled) { background: #0040cc; transform: translateY(-1px); }
#order-apitokens-create:disabled { background: #a0b0cc; opacity: 1; box-shadow: none; transform: none; }

@media (max-width: 991px) {
  .order-apitokens__order { max-width: none; margin-left: 0; }
  .order-apitokens__summary.card { position: static; }
}

/* Veeam page header (skeleton TBD) */
/* Veeam placeholder - header mirrors the other order pages (hero title only). */
.order-veeam__header { padding: 28px 0 40px; }
.order-veeam__hero-row { display: flex; align-items: center; gap: 1.25rem; }
.order-veeam__title-icon { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; margin: 0; display: block; }
.order-veeam__title { font-size: 2rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.75px; color: var(--color-text); margin: 0 0 0.25rem; }
.order-veeam__title-accent { color: var(--color-primary); }
.order-veeam__subtitle { font-size: 15px; font-weight: 500; color: var(--subtext); line-height: 1.6; margin: 0; }

/* "Coming soon" card - centered, polished (icon + badge + feature preview). */
.order-veeam__soon {
  max-width: 620px; margin: 1.5rem auto 3rem; text-align: center;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 16px; padding: 3rem 2.5rem;
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
}
.order-veeam__soon-icon {
  width: 72px; height: 72px; margin: 0 auto 1.25rem; border-radius: 20px;
  background: linear-gradient(160deg, #EBF4FF, #F5F9FF); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.order-veeam__soon-icon svg { width: 34px; height: 34px; }
.order-veeam__soon-badge {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--color-primary); background: #EEF3FF; border-radius: 999px; padding: 5px 14px; margin-bottom: 1rem;
}
.order-veeam__soon-title { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: var(--color-text); margin: 0 0 0.75rem; }
.order-veeam__soon-text { font-size: 15px; line-height: 1.6; color: var(--subtext); margin: 0 auto 1.75rem; max-width: 460px; }
.order-veeam__soon-feats { list-style: none; padding: 0; margin: 0 auto 2rem; max-width: 400px; text-align: left; display: flex; flex-direction: column; gap: 0.75rem; }
.order-veeam__soon-feats li { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 14px; color: var(--color-text); }
.order-veeam__soon-feats li svg { width: 17px; height: 17px; color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }
.order-veeam__soon-btn {
  display: inline-block; background: var(--color-primary); color: #fff; text-decoration: none;
  font-weight: 800; font-size: 14px; letter-spacing: 0.3px; border-radius: 12px; padding: 0.85rem 1.75rem;
  transition: all var(--ease);
}
.order-veeam__soon-btn:hover { background: #0040cc; transform: translateY(-1px); color: #fff; }
.homepage__hero-subtitle {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--subtext);
  margin: 0 0 14px;
}
@media (max-width: 640px) {
  .homepage__hero-subtitle { font-size: 15px; margin: 0 0 32px; }
}
.homepage__products {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem 4rem;
}

/* 3 + 2 layout: cards wrap 3 per row, the trailing 2 center under them.
   All cards share one width (no widened bottom row). */
.product-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.product-card {
  flex: 0 0 calc((100% - 40px) / 3);
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 28px 28px;
  background: var(--color-surface);
  border: 1px solid transparent;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  color: var(--color-text);
  text-decoration: none;
}
.product-card:hover {
  box-shadow: 0 12px 40px rgba(0, 80, 255, 0.14);
  border-color: var(--color-primary);
  background: var(--hover-bg);
  color: var(--color-text);
  text-decoration: none;
}
.product-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-color: var(--color-primary);
}
.product-card__illustration {
  display: block;
  width: 110px;
  height: 110px;
  object-fit: contain;
  margin: 0 auto 1.5rem;
}
.product-card__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--color-text);
}
.product-card__desc {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
  color: var(--color-muted);
}

@media (max-width: 1024px) {
  .product-card { flex: 0 0 calc((100% - 20px) / 2); }
}
@media (max-width: 640px) {
  /* Full-width blue band behind a single column of full-width cards. */
  .homepage__products {
    background: var(--color-primary);
    width: 100vw;
    max-width: none;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 36px 24px 48px;
  }
  .product-card {
    flex: 0 0 100%;
    max-width: none;
  }
}

/* ============================================================
   12. Services list (My services - dashboard card grid, fiberax_dashboard mockup)
   ============================================================ */

/* White card wrapper (mockup .block-card): the whole "My services" block
   sits in a card next to the sidebar card. */
.services-list__card {
  /* Manrope (like the mockup). Without this the <h1> "My services" falls back to
     Bootstrap's system-ui heading stack, where weight 800 renders heavier than
     Manrope. Set on the card so title + card text are all Manrope. */
  font-family: var(--font-sans);
  background: var(--color-surface);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 80, 255, 0.04);
}
.services-list__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}
/* Unified with .select-vdc__title (service-hub) - one heading standard across the
   Services sections (dashboard + category hubs). */
.services-list__title {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.25;
  color: var(--color-text);
  margin: 0;
}
/* Grid / List view toggle (right of the title). The list (table) view is
   desktop/tablet only - see the min-width:641 block at the end of this section;
   the toggle itself is hidden on phones (<=640). */
.services-list__toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--hover-bg);
  border-radius: 10px;
}
.services-list__toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--subtext);
  cursor: pointer;
  transition: background 0.22s cubic-bezier(.4, 0, .2, 1), color 0.22s cubic-bezier(.4, 0, .2, 1);
}
.services-list__toggle-btn:hover { color: var(--color-primary); }
.services-list__toggle-btn.is-active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.services-list__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
  margin: 0;
  padding: 0;
}
.services-card {
  display: block;
  padding: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-sans);
  transition: border-color 0.22s cubic-bezier(.4, 0, .2, 1);
}
.services-card:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
  text-decoration: none;
}
.services-card__iconwrap {
  display: block;
  margin-bottom: 1rem;
}
.services-card__icon {
  display: block;
  width: 60px;
  height: 54px;
  object-fit: contain;
}
.services-card__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 0.375rem;
}
.services-card__id {
  font-weight: 400;
  color: var(--subtext);
  font-size: 0.875em;
}
.services-card__category {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--subtext);
  margin-bottom: 0.75rem;
}
.services-card__status {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #EEF0F4;
  color: var(--color-muted);
}
.services-card__statusdot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.services-card__status--active { background: #DCFCE7; color: #15803D; }
.services-card__status--active .services-card__statusdot { background: #22C55E; }
.services-card__status--pending { background: #FEF9C3; color: #854D0E; }
.services-card__status--pending .services-card__statusdot { background: #94A3B8; }
.services-card__status--suspended { background: #FEF3C7; color: #92400E; }
.services-card__status--suspended .services-card__statusdot { background: #cc7700; }
.services-card__status--terminated { background: #FEE2E2; color: #991B1B; }
.services-card__status--terminated .services-card__statusdot { background: #cc0000; }

@media (max-width: 1024px) {
  .services-list__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .services-list__cards { grid-template-columns: 1fr; }
  /* Phones: tiles only. The list/table view is intentionally disabled here -
     the toggle is hidden, and the .services-list__cards--list rules below are
     gated to min-width:641, so a persisted "list" state degrades to the base
     1-column tile grid. No reset rules needed. */
  .services-list__toggle { display: none; }
}

/* List view - desktop / tablet only (>=641). On phones these rules do not apply,
   so .services-list__cards--list falls back to the tile grid above. Mockup
   fiberax_dashboard .services-grid--list: rows are SEPARATE bordered cards with
   a 0.5rem gap (not a merged table), flex layout, bare icon (no tile), status
   pushed right, no column header, no chevron. */
@media (min-width: 641px) {
  .services-list__cards--list {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .services-list__cards--list .services-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    transition: border-color 0.22s cubic-bezier(.4, 0, .2, 1);
  }
  .services-list__cards--list .services-card:hover {
    border-color: var(--color-primary);
  }
  .services-list__cards--list .services-card__iconwrap {
    width: 52px;
    margin-bottom: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .services-list__cards--list .services-card__icon {
    width: 48px;
    height: 44px;
  }
  .services-list__cards--list .services-card__title {
    margin-bottom: 0;
    flex-shrink: 0;
    min-width: 200px;
  }
  .services-list__cards--list .services-card__category {
    margin-bottom: 0;
  }
  .services-list__cards--list .services-card__status {
    margin: 0 0 0 auto;
    flex-shrink: 0;
  }
}

/* ============================================================
   13. Signup form - dynamic fields (Bootstrap form layout +
       our toggle for Private/Company)
   ============================================================ */

.signup-form__field {
  margin-bottom: 12px;
}
.signup-form__required-marker {
  color: #cc0000;
  margin-left: 2px;
}
.signup-form__captcha-image {
  display: block;
  max-width: 200px;
  margin-bottom: 6px;
  border: 1px solid #ccc;
}

/* Hide blocks when toggled - vanilla JS toggles .signup-form__field--hidden */
.signup-form__field--hidden {
  display: none;
}

/* ============================================================
   13a. Account details page (?action=details) - profile edit form.
        Design: temp/fiberax_profile.html (.profile-* mockup).
        CSS-grid 2-col, wide fields span full (.account-form__field--full).
        Field order is template-local (B2, see details.tpl), not core
        sort_order. Reuses .signup-form__field--hidden / --company /
        --private toggle classes for Private/Company conditional fields.
   ============================================================ */

.account-page {
  margin: 0;
  /* Manrope (like the mockup). Without this the <h1> falls back to Bootstrap's
     system-ui heading stack, where weight 800 renders heavier than Manrope. */
  font-family: var(--font-sans);
  background: var(--color-surface);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0, 80, 255, .04), 0 1px 3px rgba(0, 0, 0, .02);
}
.account-page__title {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -.5px;
  margin-bottom: 1.25rem;
}

/* form grid */
.account-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.account-form__field {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  margin-bottom: 0;
}
.account-form__field--full {
  grid-column: 1 / -1;
}
/* Private/Company toggle: --hidden (display:none) must beat the grid
   display:flex above. Scoped 2-class selector wins on specificity. */
.account-page .signup-form__field--hidden {
  display: none;
}
/* Account type tabs (Personal / Organization) - mirror .signup__type-* */
.account-form__type-wrap {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  margin-bottom: 1.25rem;
}
.account-form__type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .625rem;
}
.account-form__type-btn {
  padding: .875rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--subtext);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.account-form__type-btn.is-active {
  border-color: var(--color-primary);
  background: #EEF3FF;
  color: var(--color-primary);
}
.account-form__type-btn svg { display: block; }

/* Section headings (Contact person / Organization details) - Company-only.
   Full-width grid items. The --sep variant draws a top line and acts as the
   separator above the company fields. */
.account-form__section {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--subtext);
  margin-bottom: -.25rem;
}
.account-form__section--sep {
  border-top: 1px solid var(--color-border);
  padding-top: 1.25rem;
  margin-top: .25rem;
}

/* labels */
.account-page .form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0;
}
.account-page .signup-form__required-marker {
  color: #E53E3E;
  margin-left: 2px;
}
.account-page .form-text {
  font-weight: 400;
}

/* inputs + selects */
.account-page .form-control,
.account-page .form-select {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text);
  background-color: var(--color-surface);
  transition: border-color var(--ease), box-shadow var(--ease);
  box-sizing: border-box;
}
/* Focus: blue border + subtle glow ring (matches mockup + login/signup fields). */
.account-page .form-control:focus,
.account-page .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 80, 255, .08);
  outline: none;
}
/* Invalid (native HTML5, via CSS): red border, no shadow - same look as the
   Create VM field highlight (.tier1__field-flash: red border, box-shadow none). */
.account-page .form-control:user-invalid,
.account-page .form-select:user-invalid {
  border-color: #E53E3E;
  box-shadow: none;
}
/* JS-applied flash on the first invalid field after a blocked Save
   (mirror .tier1__field-flash: red border, no shadow). */
.account-page .account-form__field-flash {
  border-color: #E53E3E !important;
  box-shadow: none !important;
}
/* Blocked-save notice (fx-alert--error, shown above the footer when a required
   field is empty). Only the top margin is ours; fx-alert (§26) provides visuals.
   Scoped under .account-page to beat .fx-alert's own margin shorthand (defined
   later in §26, same specificity would otherwise win). */
.account-page .account-form__notice {
  margin-top: 1.25rem;
}

/* select chevron (matches mockup) */
.account-page .form-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  padding-right: 2.5rem;
}

/* readonly fields (plaintext + hidden input) styled as grey boxes */
.account-page .form-control-plaintext {
  width: 100%;
  padding: .75rem 1rem;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 14px;
  background: #F5F6FA;
  color: var(--subtext);
  box-sizing: border-box;
}

/* multi-check fields inside the grid */
.account-page .form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* privacy/consent block - lives in the footer bar, left of Save */
.account-form__privacy {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  flex: 1 1 auto;
  margin-right: auto;
}
.account-form__privacy input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
  cursor: pointer;
}
.account-form__privacy label {
  font-size: 13px;
  color: var(--subtext);
  line-height: 1.6;
  cursor: pointer;
}
.account-form__privacy label a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* footer bar: consent (left) + Save (right) on one row, single divider above */
.account-form__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.account-form__save {
  flex-shrink: 0;
  padding: .75rem 2rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--ease);
}
.account-form__save:hover {
  background: #0040cc;
  transform: translateY(-1px);
}

/* mobile: single column */
@media (max-width: 640px) {
  .account-page { padding: 1.25rem; }
  .account-form__grid { grid-template-columns: 1fr; }
  .account-form__footer { flex-direction: column; align-items: stretch; gap: 1rem; }
  .account-form__footer .account-form__save { width: 100%; }
  .account-form__privacy { margin-right: 0; }
}

/* ============================================================
   13b. Team page (/profiles/) - members list + Billing Contact.
        Design: temp/fiberax_team.html (.team-card / .team-table). Two white
        cards. Functionality (sort, action menu, billing form) preserved;
        mockup's add/invite modal + fictional Role dropdown NOT used -
        add/edit/invite + privileges matrix stay our pages (§13c).
   ============================================================ */

.team-page {
  margin: 0;
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.team-card {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0, 80, 255, .04), 0 1px 3px rgba(0, 0, 0, .02);
}
.team-card__title {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -.5px;
  margin-bottom: .375rem;
}
.team-card__sub {
  font-size: 14px;
  color: var(--subtext);
  margin-bottom: 1.25rem;
}
/* Team name (alias) - inline label + input + Save on the Team page */
.team-alias { margin: 0 0 1.5rem; max-width: 520px; }
.team-alias__label { display: block; font-size: 13px; font-weight: 700; color: var(--color-text); margin-bottom: .4rem; }
.team-alias__row { display: flex; gap: .5rem; align-items: stretch; }
.team-alias__input { flex: 1; min-width: 0; }
.team-alias__save { flex-shrink: 0; }
.team-alias__hint { display: block; font-size: 12px; color: var(--subtext); margin-top: .4rem; }
.team-alias__flash { margin-top: .6rem; }
@media (max-width: 575px) { .team-alias__row { flex-direction: column; } }
/* KB help link under the intro (renders only when lang key team_help_url set) */
.team-card__help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 1.5rem;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--ease);
}
.team-card__help:hover { color: #0040cc; text-decoration: underline; }
.team-card__help svg { width: 15px; height: 15px; flex: none; }

/* action tiles (Add member / Invite member) - title + helper subtitle */
.team-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .625rem;
  margin-bottom: 1.5rem;
}
.team-action-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.05rem;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
  transition: background var(--ease), color var(--ease);
}
.team-action-btn svg { flex-shrink: 0; }
.team-action-btn:hover { background: #0040cc; color: #fff; }
.team-action-btn--outline { background: #fff; color: var(--color-primary); }
.team-action-btn--outline:hover { background: var(--hover-bg); color: var(--color-primary); }
@media (max-width: 640px) { .team-actions { flex-direction: column; } .team-action-btn { justify-content: center; } }

/* Post-create "assign permissions" prompt + new-row highlight */
.team-created-prompt { margin-bottom: 1.25rem; }
.team-created-prompt__cta { font-weight: 700; color: inherit; text-decoration: underline; white-space: nowrap; }
.team-table__row--new { animation: teamRowNew 2.8s ease; }
@keyframes teamRowNew { 0%, 55% { background: #DCFCE7; } 100% { background: transparent; } }

/* Contact details as a plain block (no accordion) on member forms */
.team-plain-block { margin-bottom: 1.5rem; }
.team-plain-block__title { font-size: 16px; font-weight: 700; color: var(--color-text); margin: 0 0 1rem; }
/* Step badge next to a section heading (Step 1 / Step 2) - mirrors the Payment
   Method two-step flow. Sections are both visible at once, so these are labels. */
.team-step-head { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; }
.team-step-head .team-plain-block__title { margin: 0; }
.team-step-head__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
}
/* Invitation-sent confirmation: second line (hint) muted, on its own row */
.team-invite-sent__hint { margin-top: .35rem; opacity: .85; }

/* Copy permissions from another member */
.team-perm-copy { margin-bottom: 1.5rem; padding: 1rem 1.25rem; background: #F5F8FF; border: 1px solid var(--color-border); border-radius: 12px; }
.team-perm-copy__label { display: block; font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: .5rem; }
.team-perm-copy__select { max-width: 360px; }
.team-perm-copy__hint { display: block; margin-top: .5rem; font-size: 12px; color: var(--subtext); }
.btn-add,
.btn-invite {
  padding: .625rem 1.25rem;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: all var(--ease);
}
.btn-add {
  background: var(--color-primary);
  color: #fff;
  border: none;
}
.btn-add:hover { background: #0040cc; color: #fff; transform: translateY(-1px); }
.btn-invite {
  background: #fff;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.btn-invite:hover { background: #EEF3FF; color: var(--color-primary); }

/* members table */
.team-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.team-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--subtext);
  padding: 0 .75rem .75rem 0;
  border-bottom: 1px solid var(--color-border);
}
.team-table td {
  padding: 1rem .75rem 1rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  color: var(--color-text);
  vertical-align: middle;
}
/* every row keeps its bottom divider, including the last one (closes the table). */
/* Fixed column widths (table-layout: fixed): Status + Last login get room,
   stolen from Email; Name flexes; actions fixed. Sum = 100%.
   Headers are plain text (not sort links) - no interactive hover. */
.team-table th:nth-child(1), .team-table td:nth-child(1) { width: 24%; }   /* Name */
.team-table th:nth-child(2), .team-table td:nth-child(2) { width: 26%; }   /* Email */
.team-table th:nth-child(3), .team-table td:nth-child(3) { width: 16%; }   /* Status */
.team-table th:nth-child(4), .team-table td:nth-child(4) { width: 20%; white-space: nowrap; }  /* Last login */
.team-table td:nth-child(1),
.team-table td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-table__col-actions {
  width: 14%;
  text-align: right;
  padding-right: 0;
}

/* status badge */
.team-table__status {
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--color-surface-alt);
  color: var(--subtext);
}
.team-table__status--active { background: #DCFCE7; color: #15803D; }
.team-table__status--pending { background: #FEF9C3; color: #854D0E; }
.team-table__status--closed { background: #FEE2E2; color: #B91C1C; }

/* empty state */
.team-table__empty td {
  text-align: center;
  padding: 2.5rem 0;
  color: var(--subtext);
  font-size: 14px;
  line-height: 1.6;
  border-bottom: none;
}
.team-table__empty-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
}
.team-table__empty-link:hover { color: #0040cc; }

/* row action icons (inline) with hover tooltips - replaces the 3-dot menu */
.team-row-actions { display: flex; gap: .25rem; justify-content: flex-end; }
.team-icon-btn {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--subtext);
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
}
.team-icon-btn:hover { background: var(--hover-bg); color: var(--color-primary); }
.team-icon-btn--danger:hover { background: #FFF5F5; color: #E53E3E; }
/* hover tooltip (label) */
.team-icon-btn::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  padding: .25rem .5rem;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ease);
  z-index: 50;
}
.team-icon-btn:hover::after { opacity: 1; visibility: visible; }

/* section headings (Team members / Billing Contact) - same style for homogeneity */
.billing-title,
.team-section-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: .375rem;
}
.team-section-title { margin-bottom: 1rem; }
.billing-sub {
  font-size: 14px;
  color: var(--subtext);
  margin-bottom: 1.25rem;
}
.team-billing-form { margin: 0; }
.billing-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.billing-select {
  flex: 1;
  padding: .75rem 2.5rem .75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  transition: border-color var(--ease);
}
.billing-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 80, 255, .08); }

@media (max-width: 640px) {
  .team-card { padding: 1.25rem; }
  .billing-row { flex-direction: column; align-items: stretch; }
  .billing-row .btn-add { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------
   13c. Team member form (add / edit / invite / access) + permissions.
        Cards + profile-style inputs; permissions = preset chips +
        collapsible "fine-tune" with per-service/per-domain accordions.
        Functional ids/classes preserved (see contacts/privileges.tpl).
   ------------------------------------------------------------ */

.team-form-page { max-width: 920px; }

/* form inputs styled like the profile page */
.team-form .form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: .375rem;
}
.team-form .form-control,
.team-form .form-select {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text);
  background-color: var(--color-surface);
  box-sizing: border-box;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.team-form .form-control:focus,
.team-form .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: none;
  outline: none;
}
.team-form .form-text { font-weight: 400; font-size: 11px; }
/* checkbox-line text (consent "I declare...", "Notify contact?") - match the
   other body/label text (13px); Bootstrap default 16px was too large. */
.team-form .form-check-label { font-size: 13px; line-height: 1.5; }
/* "* indicates a required field" legend (top of Contact section) */
.team-form__required-hint { font-size: 11px; color: var(--subtext); margin-top: 1rem; }
.team-form__required-hint span { color: #E53E3E; font-weight: 700; }
.team-form__field { margin-bottom: 0; }

/* Member fields in a 2-col grid like the profile page (§13a). The shared
   ajax.signup.tpl emits .signup-form__field children; wide fields span full.
   Account-type tabs (.account-form__type-*, §13a) sit above the grid. */
.team-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: .25rem;
}
.team-form__grid .signup-form__field { margin-bottom: 0; }
.team-form__grid .signup-form__field--companyname,
.team-form__grid .signup-form__field--address1,
.team-form__grid .signup-form__field--address2,
.team-form__grid .signup-form__field--telegramnotifications,
.team-form__grid .signup-form__field--iagreewith,
.team-form__grid .signup-form__field--captcha { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .team-form__grid { grid-template-columns: 1fr; }
}

/* Collapsible top-level sections (Contact details / Permissions). Both collapsed
   on load so the whole structure fits one screen; account type stays a toggle
   above. Exclusive accordion via JS (.open). Blocked-save expands the section
   holding the first invalid field + flashes it (.team-form__field-flash). */
.team-form__head { margin-bottom: 2rem; }
/* Header row: title on the left, "Back to team list" pinned to the right edge
   of the container. align-items:start so a two-line title keeps the button top-aligned. */
.team-form__head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.team-form__head-row .team-card__title { margin-bottom: 0; }
.team-form__head-back { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 575px) {
  .team-form__head-row { flex-direction: column; }
  .team-form__head-back { align-self: flex-start; }
}
.team-form__notice { margin-bottom: 1rem; }
.team-form .form-control.is-invalid { border-color: #DC2626; }
.team-form .form-control.is-invalid:focus { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }
.team-section {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  margin-bottom: 1.5rem;
  overflow: hidden;
  transition: border-color var(--ease);
}
.team-section:hover { border-color: var(--color-primary); }
.team-section.open { border-color: var(--color-primary); }
.team-section__head {
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  transition: background var(--ease);
}
.team-section__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  transition: color var(--ease);
}
.team-section__head:hover { background: var(--hover-bg); }
.team-section__head:hover .team-section__title { color: var(--color-primary); }
.team-section.open .team-section__head { background: #EEF3FF; }
.team-section.open .team-section__title { color: var(--color-primary); }
.team-section__chevron {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--subtext);
  transition: transform var(--ease), color var(--ease);
}
.team-section.open .team-section__chevron { transform: rotate(180deg); color: var(--color-primary); }
/* Smooth open/close: animate grid-template-rows 0fr -> 1fr (auto-sizes to
   content height regardless of size). Inner wrapper clips overflow during the
   transition; padding + top divider live on the inner (clipped when collapsed). */
.team-section__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ease);
}
.team-section.open .team-section__body { grid-template-rows: 1fr; }
.team-section__inner { overflow: hidden; min-height: 0; }
.team-section__pad { border-top: 1px solid var(--color-border); padding: 1.25rem; }
.team-form__field-flash { border-color: #E53E3E !important; box-shadow: none !important; }

/* footer: back (left) + submit (right) */
.team-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.75rem;
}

/* ---- permissions card ---- */
.team-perm__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -.3px;
  margin-bottom: 1rem;
}

/* preset chips (quick access level) */
.team-perm__presets {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.team-perm__presets-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--subtext);
  margin-right: .25rem;
}
.team-perm__chip {
  padding: .4rem .875rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--ease);
}
.team-perm__chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.team-perm__chip--active { border-color: var(--color-primary); background: #EEF3FF; color: var(--color-primary); }

/* "fine-tune permissions" collapse */
.team-perm__details-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid #BFCFFF;
  border-radius: 10px;
  background: #EEF3FF;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}
.team-perm__details-toggle:hover { background: #E2EAFF; border-color: var(--color-primary); color: var(--color-primary); }
.team-perm__details-toggle:hover .team-perm__details-chevron { color: var(--color-primary); }
.team-perm__details-chevron { flex-shrink: 0; color: var(--subtext); transition: transform var(--ease); }
.team-perm__details-toggle.open .team-perm__details-chevron { transform: rotate(180deg); }
.team-perm__details { display: none; margin-top: 1.25rem; }
.team-perm__details.open { display: block; }

.team-perm__section { margin-bottom: 1.5rem; }
.team-perm__section:last-child { margin-bottom: 0; }
.team-perm__subhead {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--subtext);
  margin-bottom: .875rem;
}

/* general (account-wide) groups */
.team-perm__group { padding: .875rem 0; border-top: 1px solid var(--color-border); }
.team-perm__group:first-of-type { border-top: none; padding-top: 0; }
.team-perm__group-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  margin-bottom: .625rem;
}
.team-perm__group-head input { accent-color: var(--color-primary); }
.team-perm__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .5rem .875rem;
}
.team-perm__opt {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  line-height: 1.4;
}
.team-perm__opt input { margin-top: 1px; flex-shrink: 0; accent-color: var(--color-primary); }
.team-perm__opt--important span { color: #E53E3E; }

/* per-service / per-domain accordion */
.team-acc {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin-bottom: .625rem;
  overflow: hidden;
}
.team-acc__head { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; }
.team-acc__master {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}
.team-acc__master input { flex-shrink: 0; accent-color: var(--color-primary); }
.team-acc__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-acc__name em { color: var(--subtext); font-style: normal; }
.team-acc__tag {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  padding: .1rem .5rem;
  border-radius: 6px;
  background: #EEF3FF;
  color: var(--color-primary);
  margin-left: .375rem;
}
.team-acc__toggle {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--subtext);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  transition: transform var(--ease);
}
.team-acc__toggle:hover { color: var(--color-primary); }
.team-acc.open .team-acc__toggle { transform: rotate(180deg); }
.team-acc__body { display: none; padding: 0 1rem 1rem; border-top: 1px solid var(--color-border); }
.team-acc.open .team-acc__body { display: block; }
.team-acc__body .team-perm__grid { padding-top: .875rem; }

/* Permissions screen (edit?mode=permissions) - access summary + inline flash */
.team-perm-page .team-form__head { margin-bottom: 1.25rem; }
.team-perm__flash { margin-bottom: 1rem; }
.team-perm__summary-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  padding: .875rem 1rem;
  margin-bottom: 1.25rem;
  background: #EEF3FF;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.team-perm__summary-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--subtext);
}
.team-perm__summary { font-size: 14px; font-weight: 600; color: var(--color-primary); }

/* ============================================================
   13d. Team permissions redesign (.tp) - access level cards +
        per-service roles. Markup: contacts/privileges.tpl,
        engine JS: contacts/add_edit.tpl. Without JS the rows
        stay expanded flat checkbox grids (fully functional).
   ============================================================ */
.tp-level-inputs { display: none; }
.tp-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 24px; }
.tp-level {
  position: relative; border: 1.5px solid var(--color-border); border-radius: 12px;
  padding: 14px 16px; cursor: pointer; background: #fff;
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
.tp-level:hover { border-color: #B9CDFF; background: var(--hover-bg); }
.tp-level.active { border-color: var(--color-primary); background: #F5F9FF; box-shadow: 0 0 0 3px rgba(0, 80, 255, .08); }
.tp-level__check {
  position: absolute; top: 12px; right: 12px; width: 18px; height: 18px;
  border-radius: 50%; border: 1.5px solid var(--color-border); background: #fff;
}
.tp-level.active .tp-level__check { border-color: var(--color-primary); background: var(--color-primary); }
.tp-level.active .tp-level__check::after {
  content: ''; position: absolute; left: 4px; top: 4px; width: 7px; height: 4px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.tp-level__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; margin-bottom: 4px; color: var(--color-text); }
.tp-level__title svg { width: 17px; height: 17px; color: var(--color-primary); flex: none; }
.tp-level__desc { display: block; font-size: 12.5px; color: var(--subtext); line-height: 1.45; }

.tp-sec-title { font-size: 12px; font-weight: 800; letter-spacing: .8px; color: var(--color-muted); text-transform: uppercase; margin: 22px 0 4px; }
.tp-sec-note { font-size: 12.5px; color: var(--subtext); margin: 0 0 12px; }
.tp-sec-note b { color: var(--color-text); }

/* Service / domain rows */
.tp-svc { border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 10px; background: #fff; }
.tp-svc-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.tp-svc-ico {
  width: 34px; height: 34px; border-radius: 9px; background: var(--hover-bg); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.tp-svc-ico svg { width: 18px; height: 18px; }
.tp-svc-name { flex: 1; min-width: 150px; }
.tp-svc-n1 { display: block; font-size: 14.5px; font-weight: 800; color: var(--color-text); }
.tp-svc-id { color: var(--color-muted); font-weight: 600; font-size: 12px; margin-left: 6px; }
.tp-svc-tag {
  font-style: normal; font-size: 11px; font-weight: 700; color: var(--subtext);
  background: var(--color-surface-alt); border-radius: 999px; padding: 2px 8px; margin-left: 6px;
}
.tp-svc-n2 { display: block; font-size: 12px; color: var(--subtext); margin-top: 1px; }
.tp-seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: 999px; padding: 3px; background: #FAFBFC; gap: 2px; }
.tp-seg button {
  border: 0; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--subtext); padding: 6px 13px; border-radius: 999px; cursor: pointer;
  transition: background var(--ease), color var(--ease); white-space: nowrap;
}
.tp-seg button:hover { color: var(--color-primary); }
.tp-seg button.on { background: var(--color-primary); color: #fff; }
.tp-chip-custom {
  font-size: 11.5px; font-weight: 800; color: #7C3AED; background: #F5F0FF;
  border: 1px solid #E4D8FF; padding: 3px 10px; border-radius: 999px;
}
.tp-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--subtext); }
.tp-lock svg { width: 13px; height: 13px; color: var(--color-muted); }
.tp-svc-toggle {
  border: 0; background: none; cursor: pointer; color: var(--subtext); font-family: inherit;
  font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 8px; border-radius: 8px; transition: background var(--ease), color var(--ease);
}
.tp-svc-toggle:hover { background: var(--hover-bg); color: var(--color-primary); }
.tp-svc-toggle svg { width: 14px; height: 14px; transition: transform var(--ease); }
.tp-svc.open .tp-svc-toggle svg { transform: rotate(180deg); }
.tp-svc-body { border-top: 1px solid var(--color-border); padding: 4px 16px 16px; }
.tp-js .tp-svc-body { display: none; }
.tp-js .tp-svc.open .tp-svc-body { display: block; }

/* Locked levels: cosmetic only - inputs stay enabled (disabled inputs are
   stripped from POST, see privileges.tpl contract). */
.tp-locked .tp-chip-custom { display: none !important; }
.tp-level-full .tp-seg, .tp-level-full .tp-svc-toggle { display: none !important; }
.tp-level-full .tp-lock { display: inline-flex !important; }
.tp-level-view .tp-seg { opacity: .55; pointer-events: none; }
.tp-level-view .tp-svc-toggle { display: none !important; }

/* Flag grids + groups */
.tp-flags { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 7px 18px; }
.tp-flag { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text); cursor: pointer; margin: 0; }
.tp-flag input, .tp-pgroup-head input, .tp-acc-head input {
  width: 15px; height: 15px; accent-color: var(--color-primary); cursor: pointer; flex: none; margin: 0;
}
.tp-pgroup { margin-top: 14px; }
.tp-pgroup-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tp-pgroup-head label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; cursor: pointer; margin: 0; color: var(--color-text); }
.tp-pgroup-cnt { font-size: 11.5px; font-weight: 700; color: var(--color-muted); }
.tp-pgroup .tp-flags { padding-left: 23px; }

/* Account permission boxes */
.tp-acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tp-acc-box { border: 1px solid var(--color-border); border-radius: 12px; padding: 14px 16px; background: #fff; }
.tp-acc-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.tp-acc-head label, .tp-acc-title {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800;
  cursor: pointer; margin: 0; color: var(--color-text);
}
.tp-acc-desc { font-size: 12px; color: var(--subtext); font-weight: 500; }
.tp-acc-box .tp-flags { padding-left: 23px; }
.tp-acc-sensitive { grid-column: 1 / -1; background: #FFF8EB; border-color: #FDE6BB; }
.tp-acc-sensitive .tp-acc-title, .tp-acc-sensitive .tp-flag, .tp-acc-sensitive .tp-acc-desc { color: #B45309; }
.tp-acc-sensitive .tp-flag { font-weight: 600; }
.tp-acc-sensitive .tp-flag input { accent-color: #B45309; }
.tp-warn-ico { width: 16px; height: 16px; color: #B45309; flex: none; }
.tp-deny { margin-top: 14px; border-top: 1px dashed var(--color-border); padding-top: 12px; }
.tp-deny-head label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; margin: 0 0 8px; cursor: pointer; color: var(--color-text); }
.tp-deny-head input { width: 15px; height: 15px; accent-color: var(--color-primary); cursor: pointer; flex: none; margin: 0; }
.tp-deny .tp-flags { padding-left: 23px; }

@media (max-width: 760px) {
  .tp-levels { grid-template-columns: 1fr; }
  .tp-acc-grid { grid-template-columns: 1fr; }
  .tp-svc-head { align-items: flex-start; }
}

/* Card-nudge strip (header.tpl): "link a card" bar for a means-less logged client.
   Full-bleed background; the content aligns to the cabinet grid (same max-width and
   side padding as .page-content--clientarea) so the text starts above the sidebar.
   Colours mirror fx-alert--error (§26) - the bar is part of the alert system, it just
   spans the page instead of sitting in a card. The client-side fxCardBanner() fallbacks
   on the order pages still build a position:fixed strip of their own; this class styles
   only the server-rendered in-flow bar. */
.card-nudge {
  background: #FEE2E2;
  border-bottom: 1px solid #FCA5A5;
  color: #991B1B;
}
.card-nudge__inner {
  max-width: 1336px;
  margin: 0 auto;
  padding: .75rem 32px;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.card-nudge__icon { flex-shrink: 0; width: 18px; height: 18px; color: #DC2626; }
.card-nudge__text { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; }
.card-nudge__cta { flex-shrink: 0; }
/* Cabinet layout (sidebar + content column): start the message where the CONTENT column
   starts, clear of the sidebar. 32px container padding + 220px sidebar + 24px column gap.
   Pages rendered without the shell (tier-1/2/3) keep the plain container padding. */
.card-nudge--cabinet .card-nudge__inner { padding-left: 276px; }
@media (max-width: 767px) {
  /* The sidebar becomes an off-canvas drawer here - no column to clear. */
  .card-nudge__inner,
  .card-nudge--cabinet .card-nudge__inner { padding: .75rem 16px; }
}

/* Onboarding checklist variant (email before card, strict order). The plain nudge stretches
   the message (flex:1) to push its single CTA to the right; for the checklist that left a big
   empty gap in the middle, so group the message + steps as one centered cluster instead. */
.card-nudge--checklist .card-nudge__inner { justify-content: center; }
.card-nudge--checklist .card-nudge__text { flex: 0 0 auto; }
.card-nudge__steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.card-nudge__step { display: inline-flex; align-items: center; gap: .5rem; font-size: 14px; font-weight: 500; }
.card-nudge__num {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: #DC2626; color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.card-nudge__step--locked { opacity: .55; }
.card-nudge__step--locked .card-nudge__num { background: #B91C1C; opacity: .6; }
.card-nudge__after { font-size: 12px; font-style: italic; opacity: .8; }
.card-nudge__step--done .card-nudge__label { opacity: .8; }
.card-nudge__num--done { background: #16A34A; }

/* Impersonation bar (owner logged in AS a team member) */
/* Team-context bar: a centered UI-kit notification card (.fx-alert--warning on
   __inner) rather than a full-width strip. */
.impersonation-bar {
  display: flex;
  justify-content: center;
  padding: .85rem 1.5rem 0;
}
.impersonation-bar__inner {
  /* .fx-alert + .fx-alert--warning give bg/border/color/radius/padding/flex/gap */
  max-width: 720px;
  width: 100%;
  align-items: center;
  margin-bottom: 0;
  font-size: 14px;
}
.impersonation-bar__text { flex: 1; min-width: 0; font-weight: 500; }
.impersonation-bar__text strong { font-weight: 700; }
.impersonation-bar__exit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  background: #B7791F;
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--ease);
}
.impersonation-bar__exit:hover { background: #92400E; color: #fff; }
@media (max-width: 575px) {
  .impersonation-bar__inner { flex-wrap: wrap; }
  .impersonation-bar__exit { margin-left: auto; }
}

/* ============================================================
   14. Security page (IP Access / SSH Keys / 2FA / Change Password)
       Design: temp/fiberax_security.html (.sec-* / .ip-* / .ssh-* / .mfa-*)
       4 Bootstrap nav-tabs, card wrapper, password eye-toggle
   ============================================================ */

.security-page {
  font-family: var(--font-sans);
  color: var(--color-text);
}
.security-page__card {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0, 80, 255, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
}
.security-page__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--color-text);
  margin: 0 0 1.25rem;
}

.security-page__alert { margin-bottom: 1rem; }
.security-page__hint { display: block; font-size: 11px; line-height: 1.4; color: var(--color-muted); margin-top: 0.3rem; }

/* Tabs (underline) */
.security-page__tabs {
  display: flex;
  gap: 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.security-page__tabs .nav-link {
  padding: 0.625rem 1.25rem;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--subtext);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  transition: color var(--ease), border-color var(--ease);
}
.security-page__tabs .nav-link:hover { color: var(--color-text); }
.security-page__tabs .nav-link.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: transparent;
}

.security-page__content { padding: 0; }

.security-page__section-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 1.25rem;
}
.security-page__section-title--sub { margin-top: 1.5rem; }

/* Shared field / input / button */
.security-page__field { margin-bottom: 1rem; }
.security-page__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.375rem;
}
.security-page__input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.security-page__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 80, 255, 0.08);
}
.security-page__input--mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  resize: vertical;
}
.security-page__input::placeholder { color: var(--color-muted); }

.security-page__btn {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.security-page__btn:hover { background: #0040cc; border-color: #0040cc; color: #fff; transform: translateY(-1px); }
.security-page__btn--outline {
  background: #fff;
  color: var(--color-text);
  border-color: var(--color-border);
}
.security-page__btn--outline:hover { background: #fff; border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-1px); }
.security-page__btn--danger {
  background: #fff;
  color: #E53E3E;
  border-color: #FCA5A5;
}
/* hover по стандарту UI-кита btn-danger: фон #FEF2F2, рамка перекрашивается в #E53E3E */
.security-page__btn--danger:hover { background: #FEF2F2; border-color: #E53E3E; color: #E53E3E; transform: translateY(-1px); }
.security-page__btn--sm { padding: 0.45rem 1rem; font-size: 12px; }

/* IP Access tab */
/* Current IP - строка-подпись, не бокс: не конкурирует с правилами (главным контентом) */
.security-page__currentip {
  margin-bottom: 0.625rem;
  font-size: 13px;
  color: var(--subtext);
}
.security-page__currentip span {
  font-weight: 700;
  color: var(--color-text);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.security-page__useip {
  margin-left: 0.5rem;
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}
.security-page__useip:hover { text-decoration: underline; }
.security-page__addrow {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.25rem;
}
.security-page__addrow .security-page__input { flex: 1; margin: 0; }

/* Список правил - строки-карточки (зеркало .security-page__sshkey) */
.security-page__rules-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--subtext);
  margin: 1rem 0 0.625rem;
}
.security-page__rule {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin-bottom: 0.5rem;
}
.security-page__rule-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22C55E;
}
.security-page__rule-ip {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  word-break: break-all;
}
.security-page__rule-del { margin-left: auto; flex-shrink: 0; }
/* Пустые состояния табов Security - сквозной .fx-empty (§ после fx-alert), локального стиля нет */
/* MFA embed (таб хостит cmd=mfa флоу) */
.security-page__mfa-loading { color: var(--subtext); font-size: 14px; padding: 1.5rem 0; }
#mfa-embed .security-page__mfa-list { margin-top: 0; }

.security-page__ruleformat {
  margin-top: 1.25rem;
  padding: 0.875rem 1rem;
  background: var(--color-surface-alt);
  border-radius: 10px;
  font-size: 13px;
}
.security-page__ruleformat summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--subtext);
}
.security-page__ruleformat summary::-webkit-details-marker { display: none; }
.security-page__ruleformat summary::before {
  content: '\25B6';
  font-size: 10px;
  transition: transform 0.2s;
}
.security-page__ruleformat[open] summary::before { transform: rotate(90deg); }
.security-page__ruleformat ul {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}
.security-page__ruleformat li {
  margin-bottom: 0.375rem;
  font-size: 13px;
  color: var(--subtext);
}

/* SSH Keys tab */
.security-page__sshkeys { margin-bottom: 1.75rem; }
.security-page__sshkey {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin-bottom: 0.5rem;
}
.security-page__sshkey-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}
.security-page__sshkey-fingerprint {
  font-size: 11px;
  color: var(--subtext);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  margin-top: 2px;
  word-break: break-all;
}
.security-page__sshkey-del { margin: 0; flex-shrink: 0; }
.security-page__sshadd { max-width: 560px; }

/* Статус-сообщения табов Security (2FA enabled / IP restriction active) оформляются
   сквозным компонентом fx-alert (§26) - локальных notice-стилей у страницы нет. */
.security-page__mfa-info {
  font-size: 14px;
  color: var(--subtext);
  margin-bottom: 1.25rem;
}
/* Строки единого текстового блока (--lead) прижаты друг к другу; последняя строка
   держит базовый отступ 1.25rem перед карточками. ВАЖНО: правило обязано стоять
   ПОСЛЕ базового .security-page__mfa-info (равная специфичность - каскад по порядку). */
.security-page__mfa-info--lead { margin-bottom: 0.25rem; }
.security-page__mfa-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.security-page__mfa-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.security-page__mfa-card-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* Иконка метода - stroke-SVG без плитки-фона (правка пользователя) */
.security-page__mfa-card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  flex-shrink: 0;
}
.security-page__mfa-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}
.security-page__mfa-card-sub {
  font-size: 12px;
  color: var(--subtext);
  margin-top: 2px;
}
.security-page__mfa-card-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}
.security-page__mfa-disabled {
  color: var(--subtext);
  font-size: 13px;
  font-style: italic;
}

/* Change Password tab */
.security-page__passform { max-width: 480px; }
.security-page__pass-wrap { position: relative; }
.security-page__pass-wrap .security-page__input { padding-right: 2.75rem; }
.security-page__pass-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #94A3B8;
  display: flex;
  transition: color var(--ease);
}
.security-page__pass-toggle:hover { color: var(--color-primary); }
.security-page__pass-toggle.is-shown { color: var(--color-primary); }
.security-page__pass-toggle svg { display: block; }

/* Responsive */
@media (max-width: 640px) {
  .security-page__card { padding: 1.25rem; }
  .security-page__addrow { flex-direction: column; align-items: stretch; }
  .security-page__addrow .security-page__btn { width: 100%; }
  .security-page__mfa-card { flex-direction: column; align-items: flex-start; }
  .security-page__mfa-card-actions { width: 100%; }
}

/* ===========================================================
   MFA flow (cmd=mfa) - setup/enable/verify/disable forms
   Used by templates/fiberax-lite/mfa.tpl
   =========================================================== */

/* .security-page--mfa renders inside the clientarea layout (sidebar + main),
   so the card spans the main column like the Security page - no max-width.
   Inner forms keep their own .mfa-form max-width (480px). */

/* Дизайн-язык = Security page (label 13/600, input radius 10 + focus-ring,
   кнопки radius 8 13/700, danger = белый/красный по UI-киту btn-danger). */
.mfa-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
  margin-top: 12px;
}

.mfa-form__info {
  font-size: 14px;
  color: var(--subtext);
  line-height: 1.5;
}

.mfa-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mfa-form__field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.mfa-form__field input[type=password],
.mfa-form__field input[type=text],
.mfa-form__field input[type=number] {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text);
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.mfa-form__field input[type=password]:focus,
.mfa-form__field input[type=text]:focus,
.mfa-form__field input[type=number]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 80, 255, 0.08);
}

.mfa-form__otp {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.25em;
  text-align: center;
  padding: 12px 16px !important;
}

.mfa-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.mfa-form__btn-primary {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
}
.mfa-form__btn-primary:hover {
  background: #0040cc;
  border-color: #0040cc;
  transform: translateY(-1px);
}
/* Деструктив (Deactivate) - стандарт UI-кита btn-danger: белый фон, красный текст */
.mfa-form__btn-primary--danger {
  background: #fff;
  border-color: #FCA5A5;
  color: #E53E3E;
}
.mfa-form__btn-primary--danger:hover {
  background: #FEF2F2;
  border-color: #E53E3E;
  color: #E53E3E;
}

.mfa-form__btn-cancel {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color var(--ease), color var(--ease), transform var(--ease);
}
.mfa-form__btn-cancel:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
  transform: translateY(-1px);
}

.mfa-form__btn-send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  background: #fff;
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--ease), transform var(--ease);
}
.mfa-form__btn-send:hover {
  background: var(--hover-bg);
  transform: translateY(-1px);
}
.mfa-form__btn-send:disabled { opacity: 0.55; cursor: default; transform: none; }
.mfa-form__btn-send .btn-timer {
  font-size: 0.8125rem;
  opacity: 0.8;
}

.mfa-form__remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--subtext);
  cursor: pointer;
}
.mfa-form__remember input[type=checkbox] {
  margin: 0;
  accent-color: var(--color-primary);
  width: 15px;
  height: 15px;
}

/* Back button reuses the Team "Back to team list" style (.btn-invite);
   this class only adds top spacing on the MFA page. */
.security-page__back {
  margin-top: 1.5rem;
}
.security-page__back svg { display: block; }

/* Google Authenticator setup QR block */
.mfa-form__qr-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--color-surface-alt);
  border-radius: 10px;
}
.mfa-form__qr {
  width: 200px;
  height: 200px;
  background: #fff;
  padding: 8px;
  border-radius: 8px;
}
.mfa-form__qr img,
.mfa-form__qr canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.mfa-form__secret-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-muted);
  width: 100%;
}
.mfa-form__secret {
  width: 100%;
  max-width: 280px;
  padding: 8px 12px !important;
  background: #fff;
  border: 1px solid var(--color-border) !important;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.1em;
}
.mfa-form__regen {
  font-size: 0.8125rem;
  color: var(--color-primary);
  text-decoration: none;
}
.mfa-form__regen:hover {
  text-decoration: underline;
}

.mfa-form__instructions {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text);
}
.mfa-form__instructions p {
  margin: 0 0 8px;
}
.mfa-form__app-list {
  margin: 0;
  padding-left: 20px;
}
.mfa-form__app-list li {
  margin-bottom: 4px;
}
.mfa-form__app-list a {
  color: var(--color-primary);
  text-decoration: none;
}
.mfa-form__app-list a:hover {
  text-decoration: underline;
}

/* ============================================================
   14. Support Tickets (list / view thread / new ticket)
   ============================================================ */

/* Card wrapper: all ticket states sit in a white card like every other cabinet
   page (surface + radius 16 + shadow), full main-column width. font-family is
   required or the <h1> falls back to Bootstrap's system-ui stack (heavier than
   Manrope). */
.tickets,
.ticket-new,
.ticket-created,
.ticket-view {
  font-family: var(--font-sans);
  background: var(--color-surface);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0, 80, 255, .04), 0 1px 3px rgba(0, 0, 0, .02);
}

/* --- List --- */
.tickets__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.tickets__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--color-text);
  margin: 0;
}
.tickets__help {
  margin: 0 0 20px;
}
.tickets__new {
  flex: 0 0 auto;
  white-space: nowrap;
}
.tickets__table th {
  font-weight: 600;
  font-size: 13px;
  color: #555;
}
.tickets__row td {
  vertical-align: middle;
}
.tickets__link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.tickets__link:hover {
  text-decoration: underline;
}
.tickets__col-go {
  width: 40px;
  text-align: right;
}
.tickets__go {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 1.125rem;
}
.tickets__go:hover {
  color: var(--color-primary);
}
.tickets__empty {
  padding: 24px 0;
}

/* Status badges - base grey, modifiers for common statuses.
   Statuses with spaces ("In Progress", "On Hold") get '-' via Smarty replace. */
.tickets__badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  background: #eee;
  color: #555;
}
.tickets__badge--Open { background: #d4edda; color: #155724; }
.tickets__badge--Answered { background: #d6e4ff; color: #143d8c; }
.tickets__badge--Customer-Reply { background: #FEF3C7; color: #92400E; }
.tickets__badge--In-Progress { background: #d6e4ff; color: #143d8c; }
.tickets__badge--On-Hold { background: #FEF3C7; color: #92400E; }
.tickets__badge--Closed { background: #f1f1f1; color: #777; }

/* --- New ticket form --- */
.ticket-new__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--color-text);
  margin-bottom: 8px;
}
.ticket-new__intro {
  margin-bottom: 24px;
  color: var(--color-muted);
}
.ticket-new__deptdesc {
  margin-top: 6px;
}
.ticket-new__captcha-img img {
  border: 1px solid var(--color-border);
  border-radius: 6px;
}
.ticket-new__actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

/* --- Ticket created success --- */
.ticket-created__title {
  margin-bottom: 8px;
}
.ticket-created__info {
  margin-bottom: 20px;
  color: var(--color-muted);
}

/* --- View thread --- */
.ticket-view__head {
  margin-bottom: 8px;
}
.ticket-view__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--color-text);
  margin-bottom: 4px;
  word-break: break-word;
}
.ticket-view__back {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.875rem;
}
.ticket-view__back:hover {
  color: var(--color-primary);
}
.ticket-view__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
}
.ticket-view__metainfo {
  font-size: 0.8125rem;
  color: var(--color-muted);
}
.ticket-view__statusaction {
  margin-left: auto;
}
.ticket-view__statusform {
  margin: 0;
}

.ticket-thread {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}
.ticket-thread__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  padding: 16px;
  background: var(--color-surface);
}
.ticket-thread__item--staff {
  background: var(--color-surface-alt);
  border-color: #dfe6f5;
}
.ticket-thread__item--client {
  background: var(--color-surface);
}
.ticket-thread__sender {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.ticket-thread__name {
  font-weight: 600;
}
.ticket-thread__date {
  font-size: 0.8125rem;
  color: var(--color-muted);
}
.ticket-thread__body {
  line-height: 1.5;
  word-break: break-word;
}
.ticket-thread__body a {
  color: var(--color-primary);
}

/* --- Reply form --- */
.ticket-reply {
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
}
.ticket-reply__title {
  font-size: 1.125rem;
  margin-bottom: 12px;
}

/* --- Attachments (new ticket + reply) --- */
.ticket-attach {
  margin-bottom: 16px;
}
.ticket-attach__input {
  display: none;
}
.ticket-attach__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease), background var(--ease);
}
.ticket-attach__btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--hover-bg);
}
.ticket-attach__btn svg {
  width: 15px;
  height: 15px;
}
.ticket-attach__hint {
  display: block;
  margin-top: 6px;
  font-size: 0.6875rem;
  color: var(--color-muted);
}
.ticket-attach__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.ticket-attach__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  font-size: 0.8125rem;
}
.ticket-attach__item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticket-attach__item-size {
  color: var(--color-muted);
  font-size: 0.75rem;
  flex-shrink: 0;
}
.ticket-attach__remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--color-muted);
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: color var(--ease), background var(--ease);
}
.ticket-attach__remove:hover {
  color: #d23a3a;
  background: #fdecec;
}

/* --- Attachments shown inside thread bubbles --- */
.ticket-thread__files {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.ticket-thread__file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  max-width: 100%;
  padding: 4px 10px;
  font-size: 0.8125rem;
  color: var(--color-text);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.ticket-thread__file:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.ticket-thread__file:hover svg {
  color: var(--color-primary);
}
.ticket-thread__file svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-muted);
}
.ticket-thread__file span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticket-thread__img {
  display: inline-block;
  align-self: flex-start;
  max-width: 100%;
  line-height: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  overflow: hidden;
  transition: border-color .15s;
}
.ticket-thread__img:hover {
  border-color: var(--color-primary);
}
.ticket-thread__img img {
  display: block;
  max-width: 260px;
  max-height: 200px;
  width: auto;
  height: auto;
  object-fit: cover;
}

/* --- Design-system form controls (override raw Bootstrap) -------------------
   The ticket forms use Bootstrap .form-control/.form-select/.btn. Scope our
   field + button styling to the ticket containers (mirrors profile/signup
   scoping) so inputs match the rest of the cabinet (47px, blue focus glow,
   flat buttons) instead of Bootstrap defaults. */
.ticket-new .form-control,
.ticket-new .form-select,
.ticket-view .form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text);
  background-color: var(--color-surface);
  box-shadow: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.ticket-new .form-control:focus,
.ticket-new .form-select:focus,
.ticket-view .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 80, 255, .08);
  outline: none;
}
.ticket-new .form-label,
.ticket-view .form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.375rem;
}
/* select chevron (match profile/billing) */
.ticket-new .form-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.5rem;
}

/* Buttons: flat design-system style instead of Bootstrap defaults. */
.tickets .btn-primary,
.ticket-new .btn-primary,
.ticket-view .btn-primary,
.ticket-created .btn-primary {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: #fff;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  padding: 0.7rem 1.5rem;
  box-shadow: none;
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.tickets .btn-primary:hover,
.ticket-new .btn-primary:hover,
.ticket-view .btn-primary:hover,
.ticket-created .btn-primary:hover {
  background: #0040cc;
  border-color: #0040cc;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: none;
}
.ticket-new .btn-outline-secondary,
.ticket-view .btn-outline-secondary {
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 0.7rem 1.5rem;
  box-shadow: none;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.ticket-new .btn-outline-secondary:hover,
.ticket-view .btn-outline-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--hover-bg);
}
.ticket-view .btn-sm {
  padding: 0.45rem 1rem;
  font-size: 12px;
}

/* ============================================================
   15. Billing (balance summary + invoice list)
   ============================================================ */

.billing-page {
  font-family: var(--font-sans);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
/* Overview card: page title + balance sit inside one white card, matching the
   other cabinet pages (title inside the container). Mirrors fiberax_billing (5)
   mockup. */
.billing-overview {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0, 80, 255, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
}
.billing-page__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--color-text);
  margin: 0 0 1.25rem;
}

/* --- Balance summary (2 cards) --- */
.billing-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0;
}
.billing-summary__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
}
.billing-summary__value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}
.billing-summary__value--due { color: #b42318; }
.billing-summary__value--credit { color: #15803D; }
.billing-summary__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--subtext);
}

/* --- Invoice list (card) --- */
.billing-invoices {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0, 80, 255, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
}
.billing-invoices__head {
  margin-bottom: 1.25rem;
}
.billing-invoices__heading {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0;
}
.billing-invoices__table {
  width: 100%;
  border-collapse: collapse;
}
.billing-invoices__table th {
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: var(--subtext);
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
.billing-invoices__table td {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  font-size: 14px;
  color: var(--color-text);
}
.billing-invoices__table tbody tr:last-child td { border-bottom: none; }
.billing-invoices__row:hover td { background: var(--hover-bg); }
.billing-invoices__link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.billing-invoices__link:hover { text-decoration: underline; }
.billing-invoices__col-soft { color: var(--subtext); }
/* Invoice date: greyed like the other date columns (mockup de-emphasises all
   dates), but stays visible on mobile (unlike col-soft which hides). Scoped
   under the table td to beat `.billing-invoices__table td` color (0,1,1). */
.billing-invoices__table td.billing-invoices__col-date { color: var(--subtext); }
.billing-invoices__col-go {
  width: 40px;
  text-align: right;
}
.billing-invoices__go {
  color: var(--subtext);
  text-decoration: none;
  font-size: 16px;
  transition: color var(--ease);
}
.billing-invoices__go:hover { color: var(--color-primary); }
.billing-invoices__empty { padding: 24px 0; }

/* Status badges - pill, base grey, per-status modifiers (mockup Paid = green). */
.billing-invoices__badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #eee;
  color: #555;
}
.billing-invoices__badge--Paid { background: #DCFCE7; color: #15803D; }
.billing-invoices__badge--Unpaid { background: #FEF3C7; color: #92400E; }
.billing-invoices__badge--Cancelled { background: #f1f1f1; color: #777; }
.billing-invoices__badge--Refunded { background: #d6e4ff; color: #143d8c; }
.billing-invoices__badge--Collections { background: #FEE2E2; color: #842029; }
.billing-invoices__badge--Draft { background: #f1f1f1; color: #777; }
/* Service statuses (Overview services table) - same pill, service palette. */
.billing-invoices__badge--Active { background: #DCFCE7; color: #15803D; }
.billing-invoices__badge--Suspended { background: #FEF3C7; color: #92400E; }
.billing-invoices__badge--Pending { background: #f1f1f1; color: #777; }

/* --- Billing tabs (Overview | Invoices) - cross-URL links, one bar on both
   tabs of the account-wide Billing page. Visual mirror of the Security page
   tabs (.security-page__tabs). Last element of the title card - no bottom
   margin, the card padding provides the spacing. --- */
.billing-tabs {
  display: flex;
  gap: 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.billing-tabs .nav-link {
  padding: 0.625rem 1.25rem;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--subtext);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  transition: color var(--ease), border-color var(--ease);
}
.billing-tabs .nav-link:hover { color: var(--color-text); }
.billing-tabs .nav-link.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: transparent;
}
/* On the Overview tab the tab bar is followed by the balance cards. */
.billing-overview .billing-tabs { margin-bottom: 1.5rem; }
.billing-overview .billing-tabs:last-child { margin-bottom: 0; }

/* --- Overview extras --- */
.billing-summary__action {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.billing-summary__action:hover { text-decoration: underline; }

/* Payment method line under the balance cards. */
.billing-pm {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  font-size: 14px;
  color: var(--subtext);
}
.billing-pm__state { font-weight: 600; }
.billing-pm__state--ok { color: #15803D; }
.billing-pm__state--none { color: #92400E; }
/* Next invoice line sits right above Payment method - tighten the pair. */
.billing-pm--next .billing-pm__state { color: var(--color-text); }
.billing-pm + .billing-pm { margin-top: 0.375rem; }
.billing-pm__hint { font-size: 12.5px; }

/* Unpaid invoices block (Overview) - shown only when the client owes money. */
.billing-due { margin-top: 1.25rem; }
.billing-due__head {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}
.billing-due__table td { padding: 0.625rem 0; font-size: 13.5px; }
.billing-due__amount { font-weight: 700; white-space: nowrap; }
.billing-due__pay { text-align: right; white-space: nowrap; }
.billing-due__pay .billing-summary__action { margin-top: 0; }
.billing-pm__link {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.billing-pm__link:hover { text-decoration: underline; }

/* --- Services table (Overview): accrued column right-aligned; muted dash for
   products without metered accrual; total row set off like a table footer. --- */
.billing-services__table th.billing-services__col-accrued,
.billing-services__table td.billing-services__col-accrued { text-align: right; }
.billing-services__na { color: var(--subtext); }
.billing-services__total-row td {
  border-top: 1px solid var(--color-border);
  border-bottom: none;
  font-weight: 700;
  padding-top: 0.875rem;
}
.billing-services__note {
  margin: 1rem 0 0;
  font-size: 12.5px;
  color: var(--subtext);
}

@media (max-width: 640px) {
  .billing-summary { grid-template-columns: 1fr; }
  .billing-invoices { padding: 1.25rem; }
  .billing-invoices__col-soft { display: none; }
  .billing-pm__link { margin-left: 0; }
}

/* ============================================================
   16. Invoice document page (/clientarea/invoice/{id}/)
   ============================================================ */

/* Manrope on the root is mandatory: the invoice children set no font-family, so
   without it the page falls back to the Bootstrap system-ui stack and the title
   renders heavier/foreign (same gotcha as .account-page / .page-404 /
   .services-list__card). */
.invoice-page {
  max-width: 900px;
  font-family: var(--font-sans);
  color: var(--color-text);
}
/* Card container: header + status + actions + document live in one white card,
   like the other cabinet pages (title inside the container, see Billing §15). */
.invoice-page__card,
.invoice-page__notfound {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0, 80, 255, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
}
/* Back button reuses the Team "Back to team list" style (.btn-invite);
   sits below the card, this class only adds top spacing. */
.invoice-page__back {
  margin-top: 1.5rem;
}
.invoice-page__back svg { display: block; }
.invoice-page__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 1.25rem;
}
.invoice-page__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--color-text);
  margin: 0;
}
.invoice-page__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.invoice-page__date { font-size: 13px; color: var(--subtext); }
/* Status pill - same palette as the invoice list (§15), so a status reads the
   same in the list and on the document. */
.invoice-page__badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #eee;
  color: #555;
}
.invoice-page__badge--Paid { background: #DCFCE7; color: #15803D; }
.invoice-page__badge--Unpaid { background: #FEF3C7; color: #92400E; }
.invoice-page__badge--Cancelled { background: #f1f1f1; color: #777; }
.invoice-page__badge--Refunded { background: #d6e4ff; color: #143d8c; }
.invoice-page__badge--Collections { background: #FEE2E2; color: #842029; }
.invoice-page__badge--Chargeback { background: #FEE2E2; color: #842029; }
.invoice-page__badge--Recurring { background: #d6e4ff; color: #143d8c; }
.invoice-page__badge--Draft { background: #f1f1f1; color: #777; }

.invoice-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.5rem;
}

/* Buttons: the markup keeps the Bootstrap classes, we override them scoped to
   the page (same approach as Support Tickets §14) - flat CTA per §9.1. */
.invoice-page .btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: none;
  transition: background var(--ease), transform var(--ease);
}
.invoice-page .btn-primary:hover {
  background: #0040cc;
  border-color: #0040cc;
  transform: translateY(-1px);
}
.invoice-page .btn-outline-secondary {
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 10px;
  font-weight: 600;
  box-shadow: none;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.invoice-page .btn-outline-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--hover-bg);
}
.invoice-page .btn-outline-danger {
  background: #fff;
  border: 1px solid #E53E3E;
  color: #E53E3E;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: none;
  transition: background var(--ease);
}
.invoice-page .btn-outline-danger:hover {
  background: #FEF2F2;
  border-color: #E53E3E;
  color: #E53E3E;
}
.invoice-page .btn-sm {
  padding: 0.55rem 1.1rem;
  font-size: 13px;
}

/* The document inside the iframe is core-generated HTML with a fixed table
   layout: it does not reflow below ~560px. The iframe itself cannot scroll
   (scrolling="no", height is driven by scrollHeight), so a narrow screen used to
   CLIP it - the right-hand side (price column, bank details) was unreachable on
   a phone. Give the frame a min-width and let the wrapper scroll sideways. */
.invoice-page__doc {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  overflow-x: auto;
  overflow-y: hidden;
}
.invoice-page__frame {
  width: 100%;
  min-width: 560px;
  min-height: 400px;
  border: 0;
  display: block;
}

/* Payment block: its own card below the document (paying is a separate step). */
.invoice-pay {
  margin-top: 1.25rem;
  padding: 2rem;
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: 0 2px 12px rgba(0, 80, 255, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
}
.invoice-pay__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 1.25rem;
}
/* Blocks inside the payment card: credit, coupon, gateway. Separated by a rule so
   they read as three distinct ways to settle the invoice. */
.invoice-pay__block + .invoice-pay__block {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.invoice-pay__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}
.invoice-pay__row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  flex-wrap: wrap;
}
.invoice-pay__input {
  max-width: 220px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 14px;
}
.invoice-pay__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 80, 255, .08);
}
.invoice-pay__submit { white-space: nowrap; }
.invoice-pay__select {
  max-width: 320px;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 14px;
}
.invoice-pay__select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 80, 255, .08);
}
/* The gateway form is core-generated HTML: a bare <input type=submit> with no
   class. Style it by selector, otherwise the final "pay" button is the only
   system-looking control left on the page. */
.invoice-pay__gateway input[type="submit"],
.invoice-pay__gateway button[type="submit"] {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: #fff;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  transition: background var(--ease), transform var(--ease);
}
.invoice-pay__gateway input[type="submit"]:hover,
.invoice-pay__gateway button[type="submit"]:hover {
  background: #0040cc;
  border-color: #0040cc;
  transform: translateY(-1px);
}
.invoice-page__notfound { text-align: center; }

@media (max-width: 640px) {
  .invoice-page__card,
  .invoice-page__notfound,
  .invoice-pay { padding: 1.25rem; }
}

/* ============================================================
   17. Login page (mockup fiberax_login.html)
   Centered glass card with social login, divider, fields, captcha.
   Mockup's left split-screen panel (.login-left) was hidden via
   display:none !important -> not ported. Decorative orbs kept.
   Token map: --blue=color-primary, --black=color-text,
   --stroke=color-border, --font=font-sans (subtext/ease native).
   ============================================================ */

.login {
  position: relative;
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Full-bleed: escape the 1336px .page-main container so the gradient
     spans the full viewport width (mirrors hero §9.3 recipe). */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: -20px;
  padding: 3rem 1rem;
  background: linear-gradient(160deg, #F2F7FF 0%, #FBFCFF 41%, #FFFFFF 100%);
}

/* Decorative floating orbs */
.login__orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.login__orb { position: absolute; border-radius: 50%; filter: blur(70px); }
.login__orb--1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(147,197,253,0.5) 0%, transparent 70%);
  top: -120px; left: -120px;
  animation: loginOrb1 12s ease-in-out infinite alternate;
}
.login__orb--2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(196,181,253,0.4) 0%, transparent 70%);
  bottom: -100px; right: -100px;
  animation: loginOrb2 15s ease-in-out infinite alternate;
}
.login__orb--3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(110,231,183,0.3) 0%, transparent 70%);
  top: 40%; left: 5%;
  animation: loginOrb3 9s ease-in-out infinite alternate;
}
.login__orb--4 {
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(251,191,36,0.2) 0%, transparent 70%);
  top: 5%; right: 10%;
  animation: loginOrb4 11s ease-in-out infinite alternate;
}
@keyframes loginOrb1 { from { transform: translate(0,0) scale(1); } to { transform: translate(60px,40px) scale(1.12); } }
@keyframes loginOrb2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-50px,-50px) scale(1.1); } }
@keyframes loginOrb3 { from { transform: translate(0,0) scale(1); } to { transform: translate(30px,-25px) scale(1.15); } }
@keyframes loginOrb4 { from { transform: translate(0,0) scale(1); } to { transform: translate(-25px,30px) scale(1.08); } }

.login__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  display: flex;
  justify-content: center;
}
.login__form-wrap { width: 100%; }

.login__card {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.95);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 8px 40px rgba(100,140,255,0.08), 0 2px 12px rgba(0,0,0,0.04);
  margin-bottom: 0.75rem;
}

.login__heading {
  font-family: var(--font-sans);
  font-size: 26px; font-weight: 800;
  color: var(--color-text); letter-spacing: -0.5px;
  margin: 0 0 0.375rem;
}
.login__subheading {
  font-size: 14px; color: var(--subtext); margin: 0 0 2rem;
}
.login__subheading a {
  color: var(--color-primary); font-weight: 600; text-decoration: none;
}
.login__subheading a:hover { text-decoration: underline; }

/* Invitation accept notice (cmd=login, action=accept) */
/* Social login buttons */
.login__social { display: flex; flex-direction: column; gap: 0.625rem; }
.login__social-btn {
  width: 100%; padding: 0.75rem 1rem;
  display: flex; align-items: center; justify-content: center; gap: 0.625rem;
  border: 1px solid #D0D9EE; border-radius: 10px;
  background: #fff; font-family: var(--font-sans);
  font-size: 14px; font-weight: 600; color: var(--color-text);
  cursor: pointer; transition: all var(--ease);
  text-decoration: none;
}
.login__social-btn:hover {
  border-color: var(--color-primary); background: #F5F8FF;
  transform: translateY(-1px); box-shadow: 0 3px 12px rgba(0,80,255,0.08);
}

.login__divider {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.25rem 0;
}
.login__divider::before, .login__divider::after {
  content: ''; flex: 1; height: 1px; background: var(--color-border);
}
.login__divider span { font-size: 12px; color: var(--subtext); font-weight: 500; }

/* Form */
.login__form { margin: 0; }
.login__group { margin-bottom: 1rem; }
.login__label {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--color-text); margin-bottom: 0.375rem;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.login__field { position: relative; }
.login__input {
  width: 100%; padding: 0.8rem 1rem;
  border: 1px solid var(--color-border); border-radius: 10px;
  font-family: var(--font-sans); font-size: 14px; color: var(--color-text);
  background: #fff; transition: border-color var(--ease), box-shadow var(--ease);
  outline: none; box-sizing: border-box;
}
.login__input:focus {
  border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,80,255,0.08);
}
.login__input--pass { padding-right: 2.75rem; }

.login__pass-toggle {
  position: absolute; right: 0.875rem; top: 50%;
  transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--subtext); padding: 0; display: flex;
  transition: color var(--ease);
}
.login__pass-toggle:hover { color: var(--color-primary); }
.login__pass-toggle svg { display: block; }

.login__forgot { text-align: right; margin-top: 0.375rem; }
.login__forgot a {
  font-size: 12px; color: var(--color-primary); text-decoration: none; font-weight: 600;
}
.login__forgot a:hover { text-decoration: underline; }

.login__captcha { margin-bottom: 0.5rem; }

.login__submit {
  width: 100%; padding: 0.9rem;
  background: var(--color-primary); color: #fff;
  border: none; border-radius: 12px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 800;
  cursor: pointer; transition: all var(--ease);

  margin-top: 0.5rem; letter-spacing: 0.3px;
}
.login__submit:hover {
  background: #0040cc; transform: translateY(-1px);

}

/* MFA verify (login-style card, mfa.tpl): send-code, OTP input, remember-device */
.login__mfa-send {
  width: 100%; padding: 0.8rem;
  background: #fff; color: var(--color-primary);
  border: 1px solid var(--color-primary); border-radius: 12px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all var(--ease);
  margin-bottom: 1rem; letter-spacing: 0.3px;
}
.login__mfa-send:hover { background: var(--hover-bg); transform: translateY(-1px); }
.login__mfa-send:disabled { opacity: 0.55; cursor: default; transform: none; }
.login__input--otp { letter-spacing: 6px; font-weight: 700; text-align: center; }
.login__remember {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--subtext); margin: 0.25rem 0 0.5rem; cursor: pointer;
}
.login__remember input { accent-color: var(--color-primary); width: 15px; height: 15px; }
.login__mfa-hint { display: block; font-size: 11px; line-height: 1.4; color: var(--color-muted); margin-top: 0.3rem; }

.login__footer-note {
  text-align: center; font-size: 12px;
  color: var(--subtext); margin: 1.5rem 0 0; line-height: 1.6;
}
.login__footer-note a { color: var(--color-primary); text-decoration: none; }
.login__footer-note a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .login { padding: 2rem 1.5rem; }
  .login__card { padding: 2rem 1.5rem; }
}

/* ============================================================
   18. Checkout page (mockup fiberax_checkout.html)
   Two columns: order summary (JS-rendered from draft) + sticky
   confirm card. Success modal on completion (3a). Logged + guest
   branches. Token map as §17.
   ============================================================ */

.checkout {
  /* Full-bleed gradient surface (mirrors login §17 recipe). */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: -20px;
  min-height: calc(100vh - 72px);
  padding: 3rem 0 5rem;
  background: linear-gradient(180deg, #F8FBFF 0%, #FCFEFF 41%, #FFFFFF 100%);
}
.checkout__inner { max-width: 1000px; margin: 0 auto; padding: 0 2rem; }

.checkout__back {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 13px; color: var(--subtext); text-decoration: none;
  margin-bottom: 1.5rem; font-weight: 600;
  transition: color var(--ease);
}
.checkout__back:hover { color: var(--color-primary); }
.checkout__back svg { display: block; }

.checkout__header { margin-bottom: 2rem; }
.checkout__title {
  font-family: var(--font-sans);
  font-size: 32px; font-weight: 800;
  color: var(--color-text); letter-spacing: -0.75px;
  margin: 0 0 0.375rem;
}
.checkout__subtitle { font-size: 15px; color: var(--subtext); margin: 0; }

.checkout__grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.5rem;
  align-items: start;
}

/* Order summary card */
.checkout__order-card {
  background: #fff; border-radius: 20px; padding: 2rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.checkout__card-title {
  font-size: 17px; font-weight: 800;
  color: var(--color-text); margin-bottom: 1.5rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--color-border);
}
.checkout__loading { font-size: 13px; color: var(--subtext); margin: 0; }

.checkout__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.625rem 0; border-bottom: 1px solid var(--color-border);
}
.checkout__row:last-child { border-bottom: none; }
.checkout__row-label { font-size: 13px; color: var(--subtext); font-weight: 500; }
.checkout__row-val { font-size: 14px; font-weight: 700; color: var(--color-text); text-align: right; }
.checkout__row-val--blue { color: var(--color-primary); }

.checkout__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #EEF3FF; color: var(--color-primary);
  padding: 0.25rem 0.75rem; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}

.checkout__spec-row {
  display: flex; gap: 0.625rem; flex-wrap: wrap;
  padding: 1rem 0; border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.5rem;
}
.checkout__spec-pill {
  display: flex; align-items: center; gap: 0.375rem;
  background: var(--color-surface-alt); border-radius: 8px;
  padding: 0.375rem 0.75rem;
  font-size: 12px; font-weight: 600; color: var(--color-text);
}

/* Confirm card */
.checkout__confirm-card {
  background: #fff; border-radius: 20px; padding: 1.75rem;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  position: sticky; top: 88px;
}

/* Сообщения чекаута - сквозной .fx-alert (§26). Локального .checkout__alert нет. */

.checkout__logged-as {
  display: flex; align-items: center; gap: 0.625rem;
  background: var(--color-surface-alt); border-radius: 10px;
  padding: 0.75rem 1rem; margin-bottom: 1.25rem;
}
.checkout__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #EEF3FF; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--color-primary); flex-shrink: 0;
  text-transform: uppercase;
}
.checkout__logged-info { flex: 1; min-width: 0; }
.checkout__logged-label { font-size: 11px; color: var(--subtext); }
.checkout__logged-email {
  font-weight: 700; color: var(--color-text); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.checkout__price-row {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem;
}
.checkout__price-label { font-size: 14px; font-weight: 700; color: var(--color-text); }
.checkout__price-val { font-size: 28px; font-weight: 800; color: var(--color-primary); line-height: 1; }
.checkout__price-val span { font-size: 13px; font-weight: 500; color: var(--subtext); }

.checkout__billing-note {
  font-size: 11px; color: var(--subtext);
  text-align: center; margin-bottom: 1rem; line-height: 1.6;
}
.checkout__billing-note[hidden] { display: none; }

.checkout__place-btn {
  width: 100%; padding: 1rem;
  background: var(--color-primary); color: #fff;
  border: none; border-radius: 12px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 800;
  cursor: pointer; transition: all var(--ease);

  letter-spacing: 0.3px;
}
.checkout__place-btn:hover {
  background: #0040cc; transform: translateY(-1px);

}
.checkout__place-btn:disabled { background: #a0b0cc; cursor: not-allowed; transform: none; box-shadow: none; }
.checkout__place-btn--link {
  display: block; text-align: center; text-decoration: none;
}

.checkout__guest-msg { font-size: 13px; color: var(--subtext); margin: 0 0 1rem; line-height: 1.6; }
.checkout__guest-msg a { color: var(--color-primary); font-weight: 600; text-decoration: none; }

.checkout__terms-note {
  font-size: 11px; color: var(--subtext);
  text-align: center; margin: 0.875rem 0 0; line-height: 1.6;
}
.checkout__terms-note a { color: var(--color-primary); text-decoration: none; }

/* Success modal */
.checkout__success-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 1000;
  align-items: center; justify-content: center; padding: 1rem;
}
.checkout__success-overlay.is-open { display: flex; }
.checkout__success-modal {
  background: #fff; border-radius: 24px;
  padding: 3rem 2.5rem; text-align: center;
  max-width: 420px; width: 100%;
  animation: checkoutModalIn 0.3s ease;
}
@keyframes checkoutModalIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.checkout__success-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: #DCFCE7; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
}
.checkout__success-title {
  font-family: var(--font-sans);
  font-size: 24px; font-weight: 800; color: var(--color-text); margin: 0 0 0.75rem;
}
.checkout__success-msg { font-size: 14px; color: var(--subtext); line-height: 1.7; margin: 0 0 1.5rem; }
.checkout__success-btn {
  display: inline-block; padding: 0.875rem 2rem;
  background: var(--color-primary); color: #fff;
  border-radius: 12px; font-weight: 800; font-size: 14px;
  text-decoration: none; transition: background var(--ease);
}
.checkout__success-btn:hover { background: #0040cc; }

@media (max-width: 768px) {
  .checkout__grid { grid-template-columns: 1fr; }
  .checkout__confirm-card { position: static; }
  .checkout__title { font-size: 24px; }
  .checkout__inner { padding: 0 1.25rem; }
}

/* ============================================================
   19. Signup page (mockup fiberax_signup.html)
   Glass card with Personal/Organization tabs + dynamic $fields.
   3-step wizard from the mockup is NOT used - single form with a
   2-tab account-type switcher (per product decision). Fields are
   our dynamic set (ajax.signup.tpl). Token map as §17.
   ============================================================ */

.signup {
  position: relative;
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: -20px;
  padding: 3rem 1rem;
  background: linear-gradient(160deg, #F2F7FF 0%, #FBFCFF 41%, #FFFFFF 100%);
}

.signup__orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.signup__orb { position: absolute; border-radius: 50%; filter: blur(70px); }
.signup__orb--1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(147,197,253,0.5) 0%, transparent 70%);
  top: -120px; left: -120px; animation: loginOrb1 12s ease-in-out infinite alternate;
}
.signup__orb--2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(196,181,253,0.4) 0%, transparent 70%);
  bottom: -100px; right: -100px; animation: loginOrb2 15s ease-in-out infinite alternate;
}
.signup__orb--3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(110,231,183,0.3) 0%, transparent 70%);
  top: 40%; left: 5%; animation: loginOrb3 9s ease-in-out infinite alternate;
}

.signup__inner { position: relative; z-index: 1; width: 100%; max-width: 600px; }

.signup__card {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.95);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 8px 40px rgba(100,140,255,0.08), 0 2px 12px rgba(0,0,0,0.04);
}

.signup__heading {
  font-family: var(--font-sans);
  font-size: 24px; font-weight: 800;
  color: var(--color-text); letter-spacing: -0.5px; margin: 0 0 0.375rem;
}
.signup__subheading { font-size: 14px; color: var(--subtext); margin: 0 0 1.75rem; }
.signup__subheading a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.signup__subheading a:hover { text-decoration: underline; }

/* Server-side feedback ($error / $info) uses the shared fx-alert component (section 26). */

/* Account type tabs */
.signup__type-toggle {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.625rem; margin-bottom: 1.25rem;
}
.signup__type-btn {
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border); border-radius: 12px;
  background: #fff; font-family: var(--font-sans);
  font-size: 14px; font-weight: 600; color: var(--subtext);
  cursor: pointer; transition: all var(--ease);
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.signup__type-btn:hover:not(.is-active) { border-color: #BFCFFF; }
.signup__type-btn.is-active { border-color: var(--color-primary); background: #EEF3FF; color: var(--color-primary); }
.signup__type-btn svg { display: block; }

/* Dynamic field grid: default full-width, name/vat/regid paired side-by-side */
.signup__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
.signup__grid .signup-form__field { grid-column: 1 / -1; margin-bottom: 0; }
.signup__grid .signup-form__field--firstname,
.signup__grid .signup-form__field--lastname,
.signup__grid .signup-form__field--vat,
.signup__grid .signup-form__field--registrationid { grid-column: span 1; }
/* Hidden conditional fields keep collapsing (rule defined in §ajax block). */
.signup__grid .signup-form__field--hidden { display: none; }

/* Field styling inside the signup card (overrides Bootstrap form-control/select) */
.signup .form-label {
  font-size: 12px; font-weight: 700; color: var(--color-text);
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 0.375rem;
}
.signup .form-label .form-text { text-transform: none; letter-spacing: 0; font-weight: 500; }
.signup .signup-form__required-marker { color: #E53E3E; margin-left: 2px; }
.signup .form-control,
.signup .form-select {
  width: 100%; padding: 0.8rem 1rem;
  border: 1px solid var(--color-border); border-radius: 10px;
  font-family: var(--font-sans); font-size: 14px; color: var(--color-text);
  background-color: #fff; box-shadow: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.signup .form-control:focus,
.signup .form-select:focus {
  border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,80,255,0.08);
}

/* Password fields get a JS-injected eye toggle */
.signup-form__field--haspass { position: relative; }
.signup-form__field--haspass .form-control { padding-right: 2.75rem; }
.signup__pass-toggle {
  position: absolute; right: 0.875rem; bottom: 0.65rem;
  background: none; border: none; cursor: pointer;
  color: var(--subtext); padding: 0; display: flex;
  transition: color var(--ease);
}
.signup__pass-toggle:hover { color: var(--color-primary); }

/* Privacy / checkbox fields */
.signup .form-check { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; }
.signup .form-check-label { font-size: 12px; color: var(--subtext); line-height: 1.6; cursor: pointer; }
.signup .form-check-label a { color: var(--color-primary); text-decoration: underline; }
.signup .form-check-input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }

.signup__submit {
  width: 100%; padding: 0.875rem; margin-top: 1.25rem;
  background: var(--color-primary); color: #fff;
  border: none; border-radius: 12px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 800;
  cursor: pointer; transition: all var(--ease);
  letter-spacing: 0.3px;
}
.signup__submit:hover { background: #0040cc; transform: translateY(-1px); }

.signup__footer-note { text-align: center; font-size: 12px; color: var(--subtext); margin: 0.75rem 0 0; line-height: 1.6; }
.signup__footer-note a { color: var(--color-primary); text-decoration: none; }
.signup__footer-note a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .signup__grid { grid-template-columns: 1fr; }
  .signup__grid .signup-form__field--firstname,
  .signup__grid .signup-form__field--lastname,
  .signup__grid .signup-form__field--vat,
  .signup__grid .signup-form__field--registrationid { grid-column: 1 / -1; }
  .signup__card { padding: 1.75rem 1.25rem; }
  .signup { padding: 1.5rem 1rem; }
}

/* ============================================================
   §20 Session expired overlay
   Guest hitting a clientarea-family page (clientarea/services/
   profiles) after session expiry. Full-screen interstitial that
   covers the page while JS auto-redirects to /login.
   ============================================================ */
.fx-session-expired {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #fff);
}
.fx-session-expired__box { text-align: center; padding: 2rem; }
.fx-session-expired__msg {
  font-size: 16px;
  color: var(--color-text, #212126);
  margin-bottom: 1rem;
}

/* ============================================================
   §21 Error 404
   Mockup: temp/fiberax-404.html. Rendered inside <main class="page-main">
   (cmd=root middle), so .page-404 is a <section>, not a <main>.
   Responsive via clamp() + flex-wrap (no 404-specific media queries in
   mockup). Mockup classes .err-eyebrow/.err-divider/.err-status are NOT
   ported - absent from the markup.
   ============================================================ */
.page-404 {
  /* Mockup tints the whole 404 body #FAFBFD. Can't scope via body class:
     404 shares page--cmd-root + page--action-default with the homepage.
     So tint the section itself; -20px eats .page-main's top padding (hero
     §9.3 recipe) so the tint meets the header with no white strip. */
  background: #FAFBFD;
  /* Manrope must be set on the section: Bootstrap reboot puts system-ui on
     body, and the err-* children (title/desc/number/card) have no explicit
     font-family, so they'd fall back to system-ui (gotcha §2c). */
  font-family: var(--font-sans);
  margin-top: -20px;
  min-height: calc(100vh - 72px - 260px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 2rem;
}

.err-wrap {
  max-width: 680px;
  width: 100%;
  text-align: center;
}

/* Big 404 number */
.err-number {
  font-size: clamp(6rem, 18vw, 9rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  color: transparent;
  background: linear-gradient(135deg, #d8e3f5 0%, #b8cce8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  position: relative;
  user-select: none;
  margin-bottom: 0;
}

/* Floating card over the 404 number */
.err-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--color-border, #E2E4E9);
  border-radius: 20px;
  padding: 22px 36px;
  box-shadow: 0 8px 32px rgba(0, 80, 255, .10), 0 2px 8px rgba(0, 0, 0, .06);
  margin-top: -3.5rem;
  margin-bottom: 2rem;
  animation: err404Float 4s ease-in-out infinite;
}
@keyframes err404Float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.err-card__icon {
  width: 52px;
  height: 52px;
  background: #E8EEFF;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.err-card__icon svg { width: 26px; height: 26px; color: var(--color-primary, #0050FF); }
.err-card__title { font-size: 1rem; font-weight: 800; color: var(--color-text, #212126); }
.err-card__sub { font-size: 0.8rem; color: var(--subtext, #46516F); }

/* Text */
.err-title {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text, #212126);
  line-height: 1.25;
  margin-bottom: 0.875rem;
}
.err-desc {
  font-size: 0.95rem;
  color: var(--subtext, #46516F);
  line-height: 1.65;
  max-width: 460px;
  margin: 0 auto 2rem;
}

/* Action buttons */
.err-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.err-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.7rem 1.5rem;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--ease, 0.22s cubic-bezier(.4, 0, .2, 1));
  cursor: pointer;
  border: none;
}
.err-btn--primary {
  background: var(--color-primary, #0050FF);
  color: #fff;
}
.err-btn--primary:hover {
  background: #0040cc;
  transform: translateY(-2px);
}
.err-btn--secondary {
  background: #fff;
  color: var(--color-text, #212126);
  border: 1px solid var(--color-border, #E2E4E9);
}
.err-btn--secondary:hover {
  border-color: var(--color-primary, #0050FF);
  color: var(--color-primary, #0050FF);
  background: var(--hover-bg, #F3F8FE);
  transform: translateY(-1px);
}

/* Quick links */
.err-links-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--subtext, #46516F);
  margin-bottom: 0.875rem;
}
.err-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  margin-bottom: 2.5rem;
}
.err-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: #fff;
  border: 1px solid var(--color-border, #E2E4E9);
  border-radius: 10px;
  text-decoration: none;
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--color-text, #212126);
  transition: all var(--ease, 0.22s cubic-bezier(.4, 0, .2, 1));
}
.err-link svg { color: var(--color-primary, #0050FF); width: 16px; height: 16px; }
.err-link:hover {
  background: #E8EEFF;
  border-color: #b0c8ff;
  color: #0040cc;
  transform: translateY(-2px);
}

/* Dot grid decoration behind the number/card */
.err-dots {
  position: relative;
  overflow: visible;
}
.err-dots::before {
  content: '';
  position: absolute;
  inset: -20px;
  background-image: radial-gradient(circle, #d0d9ec 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.4;
  z-index: -1;
  border-radius: 24px;
}

/* ============================================================
   22. User select / switch account (cmd=login, action=select|accept)
   Standalone page (own <head>/<body>, NOT wrapped by core layout).
   ============================================================ */
.userselect {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.5rem; font-family: var(--font-sans);
  background:
    radial-gradient(circle at 15% 20%, rgba(96,140,255,0.18), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(251,191,36,0.12), transparent 38%),
    radial-gradient(circle at 75% 80%, rgba(139,123,255,0.14), transparent 42%),
    #F7FAFF;
}
.userselect__panel { width: 100%; max-width: 440px; }
.userselect__card {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.95); border-radius: 20px; padding: 2.5rem;
  box-shadow: 0 8px 40px rgba(100,140,255,0.10), 0 2px 12px rgba(0,0,0,0.04);
}
.userselect__brand { text-align: center; margin-bottom: 1.5rem; }
.userselect__brand img { height: 32px; width: auto; }
.userselect__heading {
  font-size: 22px; font-weight: 800; color: var(--color-text);
  letter-spacing: -0.5px; margin: 0 0 0.375rem; text-align: center;
}
.userselect__subheading {
  font-size: 14px; color: var(--subtext); margin: 0 0 1.5rem; text-align: center;
}
.userselect__search { position: relative; margin-bottom: 1rem; }
.userselect__search-input {
  width: 100%; padding: 0.7rem 1rem 0.7rem 2.4rem;
  border: 1px solid var(--color-border); border-radius: 10px;
  font-family: var(--font-sans); font-size: 14px; color: var(--color-text);
  background: #fff; outline: none; box-sizing: border-box;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.userselect__search-input:focus {
  border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,80,255,0.08);
}
.userselect__search svg {
  position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%);
  color: var(--subtext); pointer-events: none;
}
.userselect__list {
  display: flex; flex-direction: column; gap: 0.5rem;
  max-height: 340px; overflow-y: auto;
  /* Inner padding so a hovered item's lifted border/shadow isn't clipped
     by the overflow container at the first/last row. */
  padding: 4px; margin: -4px -4px 0;
}
.userselect__item {
  display: block; text-decoration: none; background: #fff;
  border: 1px solid var(--color-border); border-radius: 12px;
  padding: 0.75rem 0.875rem; transition: all var(--ease);
}
.userselect__item:hover {
  border-color: var(--color-primary); background: var(--hover-bg);
  transform: translateY(-1px); box-shadow: 0 3px 12px rgba(0,80,255,0.08);
}
.userselect__item-row { display: flex; align-items: center; justify-content: space-between; }
.userselect__item-name { font-size: 14px; font-weight: 700; color: var(--color-text); }
.userselect__item-row svg { color: var(--subtext); flex-shrink: 0; }
.userselect__item-id { display: block; font-size: 12px; color: var(--subtext); margin-top: 2px; }
/* Search "no results" state uses the shared .fx-empty component (§26); the
   .userselect__empty class stays in the markup only as the JS hook that shows and
   hides it, so it carries no styling of its own. The invitation notice moved to
   .fx-alert--info (same as the pre-auth step on login.tpl) - its local classes are
   gone. */
.userselect__empty { margin-top: 0.5rem; }
/* 0.5rem + the alert's own 0.75rem bottom margin = the 1.25rem gap the local
   notice used to have between the message and the Accept/Reject buttons. */
.userselect__accept-actions { display: flex; gap: 0.625rem; margin-top: 0.5rem; }
.userselect__btn {
  flex: 1; padding: 0.8rem; border-radius: 12px; border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 14px; font-weight: 800;
  cursor: pointer; transition: all var(--ease);
}
.userselect__btn--accept {
  background: var(--color-primary); color: #fff;
}
.userselect__btn--accept:hover { background: #0040cc; transform: translateY(-1px); }
.userselect__btn--reject { background: #fff; color: var(--color-text); border-color: var(--color-border); }
.userselect__btn--reject:hover { border-color: #d33; color: #d33; background: #fff5f5; }
.userselect__logout {
  display: block; text-align: center; margin-top: 1.5rem;
  font-size: 13px; color: var(--subtext); text-decoration: none; font-weight: 600;
}
.userselect__logout:hover { color: var(--color-primary); text-decoration: underline; }
@media (max-width: 640px) { .userselect__card { padding: 2rem 1.5rem; } }

/* ============================================================
   §23 Portal notifications (clientarea action=portal_notifications)
   List ($notifications) + single view ($notification). Style mirrors
   Billing/Security cards. rel_type 'ticket' -> link, 'none' -> dash.
   ============================================================ */
.notif-page { max-width: 920px; }
.notif-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 14px;
  box-shadow: 0 2px 12px rgba(20,30,60,0.05); padding: 1.75rem 2rem;
  font-family: var(--font-sans);
}
.notif-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem;
}
.notif-card__title {
  font-family: var(--font-sans); font-size: 22px; font-weight: 800;
  color: var(--color-text); margin: 0;
}
.notif-mark-read {
  flex: none; font-size: 13px; font-weight: 600; color: var(--color-primary);
  text-decoration: none; white-space: nowrap; transition: color var(--ease);
}
.notif-mark-read:hover { text-decoration: underline; }

.notif-table { display: flex; flex-direction: column; }
.notif-table__head,
.notif-row {
  display: grid;
  grid-template-columns: 180px 1fr 180px 32px;
  align-items: center; gap: 1rem;
}
.notif-table__head {
  padding: 0 0 0.6rem; border-bottom: 1px solid var(--color-border);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--subtext);
}
.notif-row {
  padding: 0.85rem 0; border-bottom: 1px solid var(--color-border);
  text-decoration: none; color: var(--color-text); transition: background var(--ease);
}
.notif-row:last-child { border-bottom: 0; }
.notif-row:hover { background: var(--hover-bg); }
.notif-table__col--date {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: 13px; color: var(--subtext);
}
.notif-table__col--subject { font-size: 14px; font-weight: 500; }
.notif-table__col--rel { font-size: 13px; color: var(--subtext); }
.notif-table__col--arrow { text-align: right; color: var(--subtext); font-size: 16px; }

.notif-row--unread .notif-table__col--subject { font-weight: 700; color: var(--color-text); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); flex: none; }
.notif-badge-new {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: #EEF3FF; color: var(--color-primary); font-size: 11px; font-weight: 700;
}
/* Пустое состояние списка - сквозной .fx-empty (§26). Локального .notif-empty нет. */

.notif-page--single .notif-card__title { margin-bottom: 1rem; }
.notif-card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.notif-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: #F3F4F8; color: var(--subtext); text-decoration: none;
}
.notif-badge--rel { background: #EEF3FF; color: var(--color-primary); }
.notif-badge--rel:hover { background: #e0e9ff; }
.notif-card__body { font-size: 14px; line-height: 1.6; color: var(--color-text); word-break: break-word; }
.notif-card__body a { color: var(--color-primary); }
.notif-card__email { display: block; width: 100%; border: 0; min-height: 240px; background: #fff; }
.notif-back {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 1.75rem;
  padding: 8px 16px; border: 1px solid var(--color-primary); border-radius: 10px;
  color: var(--color-primary); background: #fff; text-decoration: none;
  font-size: 13px; font-weight: 600; transition: all var(--ease);
}
/* Плоская кнопка (системная норма §9.1): hover = заливка, без тени. */
.notif-back:hover { background: var(--color-primary); color: #fff; }

@media (max-width: 640px) {
  .notif-card { padding: 1.25rem 1rem; }
  .notif-table__head { display: none; }
  .notif-row {
    grid-template-columns: 1fr 24px;
    grid-template-areas: "subject arrow" "date arrow" "rel arrow";
    gap: 0.35rem 0.75rem; padding: 1rem 0;
  }
  .notif-table__col--subject { grid-area: subject; }
  .notif-table__col--date { grid-area: date; }
  .notif-table__col--rel { grid-area: rel; }
  .notif-table__col--arrow { grid-area: arrow; align-self: center; }
}

/* ============================================================
   Payment card page (clientarea/creditcard.tpl, ?action=ccard)
   Reuses the .security-page__card / __title / __btn shell; only the
   card visual + amber "no card" notice are page-specific.
   ============================================================ */
.pcard__intro {
  font-size: 13px;
  color: var(--subtext);
  line-height: 1.6;
  margin: 0 0 1.5rem;
  max-width: 560px;
}
.pcard {
  max-width: 380px;
  background: linear-gradient(135deg, #0b1830 0%, #16325c 100%);
  color: #fff;
  border-radius: 14px;
  padding: 1.25rem 1.5rem 1.4rem;
  box-shadow: 0 8px 28px rgba(0, 80, 255, 0.18);
  margin-bottom: 1.25rem;
}
.pcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.pcard__brand {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.pcard__badge {
  font-size: 11px;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
}
.pcard__badge--ok { background: rgba(0, 200, 120, 0.18); color: #2be08a; }
.pcard__num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 0.75rem;
}
.pcard__hint { font-size: 11px; color: rgba(255, 255, 255, 0.6); }
.pcard__hint--muted { color: var(--color-muted); }
.pcard__action { margin-top: 0.25rem; }
/* Payment-card section notices use the shared fx-alert component (§26 / §2e):
   fx-alert--info (add billing details) + fx-alert--warning (no card linked).
   Only the width constraint is local, matching the 560px form width below. */
.pm-notice { max-width: 560px; margin-bottom: 1.25rem; }

/* Payment Method - "Add a card" step indicator (address = step 1, card = step 2). */
.pm-steps { display: flex; align-items: center; margin: 0 0 1.1rem; max-width: 560px; }
.pm-step { display: flex; align-items: center; gap: 0.55rem; font-size: 12.5px; font-weight: 700; color: var(--color-muted); white-space: nowrap; }
.pm-step__dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--color-surface-alt); color: var(--color-muted); border: 1.5px solid var(--color-border); }
.pm-step__dot svg { width: 13px; height: 13px; }
.pm-step--active { color: var(--color-text); }
.pm-step--active .pm-step__dot { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pm-step--done { color: var(--subtext); }
.pm-step--done .pm-step__dot { background: #DCFCE7; color: #15803D; border-color: #A7E0BC; }
.pm-step__line { flex: 1; height: 2px; background: var(--color-border); margin: 0 0.75rem; border-radius: 2px; min-width: 20px; max-width: 90px; }
.pm-step__line--done { background: #A7E0BC; }
.pm-step-caption { font-size: 12.5px; color: var(--color-muted); margin: -0.35rem 0 1rem; }
.pm-billing-micro { font-size: 12px; color: var(--color-muted); text-align: center; margin: 0.7rem 0 0; }
.security-page__btn svg { vertical-align: middle; }

/* ============================================================
   Payment Method page (clientarea/addfunds.tpl, /clientarea/addfunds/):
   balance + top-up blocks (the card block reuses the .pcard* rules above).
   Balance sits above the tab bar (Payment card | Top up) - the tab styles come from
   .security-page__tabs, this page needs no tab CSS of its own.
   ============================================================ */
.pm-balance-block { margin-bottom: 1.5rem; }
.pm-balance-block .pm-balance__due { margin-bottom: 0; }
.pm-balance {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  max-width: 380px;
  padding: 0.875rem 1.25rem;
  background: var(--hover-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin-bottom: 0.75rem;
}
.pm-balance__label { font-size: 13px; color: var(--subtext); }
.pm-balance__value { font-size: 22px; font-weight: 800; color: var(--color-text); }
.pm-balance__due { font-size: 13px; color: #cc7700; margin-bottom: 1.5rem; }
.pm-topup { margin-bottom: 1.75rem; max-width: 560px; }
.pm-topup__row { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.pm-topup__field { flex: 1 1 160px; }
.pm-topup__field .security-page__label { margin-bottom: 0.375rem; }
.pm-topup__action { flex: 0 0 auto; }
/* Match the input/select height (47px) so the Top up row (and the mini-form
   Save) line up cleanly - the button was 42px, 5px shorter than the fields. */
.pm-topup__action .security-page__btn {
  height: 47px;
  padding: 0 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pm-topup__limits { font-size: 12px; color: var(--color-muted); margin-top: 0.5rem; }
/* billing-details mini-form (no-card state): stack fields and detach Save button from Phone */
/* No-card billing-details mini-form: 2-col grid so short fields (city/postcode/
   phone) aren't stretched to the full 560px. Address+City on row 1,
   Postcode+Phone on row 2; the Save button and status message span both cols. */
#pm-billing-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
  max-width: none;            /* full content width (override .pm-topup 560px): 2 wide fields per row */
}
#pm-billing-form .pm-topup__field { margin-bottom: 0; }
#pm-billing-form .pm-topup__limits { grid-column: 1 / -1; margin-top: 0; }
/* Save spans the row and is centred under the two field columns. */
#pm-billing-form .pm-topup__action { grid-column: 1 / -1; margin-top: 0; justify-self: center; }
@media (max-width: 640px) {
  #pm-billing-form { grid-template-columns: 1fr; }
  #pm-billing-form .pm-topup__action { justify-self: stretch; }
}
/* Under-field format hints + invalid (red) state for the billing-details mini-form. */
.pm-topup__hint { display: block; font-size: 11px; line-height: 1.4; color: var(--color-muted); margin-top: 0.3rem; }
#pm-billing-form .security-page__input.is-invalid { border-color: #DC2626; }
#pm-billing-form .security-page__input.is-invalid:focus { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }
/* Signup: under-field hints + invalid state + client-side validation notice. */
.signup-form__hint { display: block; font-size: 11px; line-height: 1.4; color: var(--color-muted); margin-top: 0.3rem; }
.signup__form .form-control.is-invalid { border-color: #DC2626; }
.signup__form .form-control.is-invalid:focus { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }
.signup__client-error { margin: 0 0 1rem; }

/* ============================================================
   Order API Tokens - 3 service cards (order-apitokens.tpl, /?action=order-apitokens).
   Narrow, tall, centered cards (portrait), each opening the service console.
   ============================================================ */
/* Cards and the detail block below start at the page's left edge, on the same line as the
   heading icon - the page reads as one document instead of three blocks
   each aligned to its own axis (the cards used to be centred, the detail block centred on
   its own width, so neither lined up with the heading or with each other). */
.order-apitokens__grid {
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 24px; margin-top: 32px;
}
.order-apitokens__card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: 290px; padding: 36px 28px;
  background: #fff; border: 1px solid #e5e9ef; border-radius: 18px;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.order-apitokens__card:hover {
  box-shadow: 0 10px 28px rgba(20, 30, 50, .10); transform: translateY(-3px); border-color: #d0d5dd;
}
.order-apitokens__card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; margin-bottom: 22px; border-radius: 16px;
  background: #EEF3FF; color: #0050FF;
}
.order-apitokens__card-icon svg { width: 30px; height: 30px; }
.order-apitokens__card-title { font-size: 1.25rem; font-weight: 600; margin: 0 0 10px; }
.order-apitokens__card-desc {
  color: var(--color-muted, #6b7480); font-size: 0.9375rem; line-height: 1.55;
  margin: 0 0 28px; flex: 1 1 auto;
}
.order-apitokens__cta { width: 100%; padding: 10px 16px; }
@media (max-width: 640px) {
  .order-apitokens__card { width: 100%; max-width: 340px; }
}

/* Per-service detail below the cards: name + lead + the shared icon-tile feature grid
   (one component with the S3 About/Workloads blocks - see the grouped rule above). */
.order-apitokens__details { max-width: 918px; margin: 64px 0 0; display: grid; gap: 44px; }
.order-apitokens__svc-title { font-size: 18px; font-weight: 800; color: var(--color-text); margin: 0 0 0.75rem; }
.order-apitokens__svc-lead { font-size: 15px; line-height: 1.65; color: var(--subtext); margin: 0 0 1.25rem; }

/* ============================================================
   25. Header nav shifted right (site-wide) + cabinet Products dropdown under item
   The whole primary nav is shifted right EVERYWHERE - homepage, order pages, and
   the WP storefront which embeds this shared header (WP pulls it via the plugin).
   Desktop only; the nav collapses into the burger below 1025.
   In the cabinet the Products dropdown is kept exactly UNDER its (shifted) menu
   item - we override Bootstrap Popper so it doesn't drift. Scoped to OUR
   page--cmd-* classes (WP body has none).
   (Section 24 "Order more" removed with the sidebar button - numbering keeps
   the gap on purpose: knowledge files reference CSS sections by number.)
   ============================================================ */
@media (min-width: 1025px) {
  /* site-wide nav shift (incl. WP storefront via the shared header) */
  .top-nav__primary { margin-left: 65px; }

  /* cabinet: keep the Products dropdown right under its menu item */
  body.page--cmd-clientarea .top-nav__item--products .top-nav__dropdown--products,
  body.page--cmd-services   .top-nav__item--products .top-nav__dropdown--products,
  body.page--cmd-profiles   .top-nav__item--products .top-nav__dropdown--products,
  body.page--cmd-tickets    .top-nav__item--products .top-nav__dropdown--products,
  body.page--cmd-mfa        .top-nav__item--products .top-nav__dropdown--products {
    position: absolute !important;
    /* +24: the Products item is vertically centered in the header; a tiny offset
       would tuck the panel under the sticky header, so +24 drops it just clear.
       The hover bridge (.top-nav__dropdown--products::before, 24px) spans this
       gap so the cursor keeps :hover travelling from the toggle to the panel. */
    top: calc(100% + 24px) !important;
    left: -16px !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
}

/* ============================================================
   26. Alerts / messages (fx-alert) - shared component from the
   designer alerts_system mockup. Four semantic types
   (error/success/warning/info) + icon, optional title (--block),
   action button and dismiss (x). Palette 1:1 from the mockup.
   Prefix fx- avoids Bootstrap's own .alert. Dismiss JS is a
   delegated handler in footer.tpl (click .fx-alert__close).
   ============================================================ */
.fx-alert {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  border: 1px solid;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 0.75rem;
}
.fx-alert:last-child { margin-bottom: 0; }
/* Respect the [hidden] attribute for JS-toggled alerts - author display:flex
   above would otherwise beat the UA [hidden]{display:none} rule. */
.fx-alert[hidden] { display: none; }

.fx-alert--error   { background: #FEE2E2; border-color: #FCA5A5; color: #991B1B; }
.fx-alert--success { background: #DCFCE7; border-color: #86EFAC; color: #14532D; }
.fx-alert--warning { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.fx-alert--info    { background: #EBF4FF; border-color: #BFDBFE; color: #1E3A8A; }

.fx-alert__icon { flex-shrink: 0; width: 18px; height: 18px; }
.fx-alert--error   .fx-alert__icon { color: #DC2626; }
.fx-alert--success .fx-alert__icon { color: #15803D; }
.fx-alert--warning .fx-alert__icon { color: #D97706; }
.fx-alert--info    .fx-alert__icon { color: var(--color-primary); }

.fx-alert__body { flex: 1; min-width: 0; }
.fx-alert__body > div + div { margin-top: 0.25rem; }

.fx-alert__title {
  font-weight: 700; font-size: 13.5px;
  margin-bottom: 0.15rem; letter-spacing: -0.1px;
}

.fx-alert__link {
  font-weight: 700; text-decoration: underline;
  margin-left: 3px; white-space: nowrap; color: inherit;
}

.fx-alert__action {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 11.5px; font-weight: 700;
  padding: 0.35rem 0.75rem; border-radius: 7px;
  background: #fff; border: 1px solid currentColor; color: inherit;
  cursor: pointer; transition: background var(--ease);
}
.fx-alert__action:hover { background: rgba(255,255,255,0.6); }

.fx-alert__close {
  flex-shrink: 0;
  background: none; border: none; padding: 2px;
  cursor: pointer; color: currentColor; opacity: 0.5;
  display: flex; align-items: center;
  transition: opacity var(--ease);
}
.fx-alert__close:hover { opacity: 1; }

/* Block variant: bold title over multi-line body, icon aligns to top. */
.fx-alert--block { align-items: flex-start; }

/* Empty state - сквозной компонент (UI-кит `.empty-state`: uikit_infrastructure + team mockup).
   Центр, крупная полупрозрачная иконка, полужирный титул, приглушённая подпись. Без фона.
   Значения из CSS макета: padding 2.5rem 1.5rem, svg opacity .3 / margin-bottom .75rem,
   титул 14/700, подпись 12px. */
.fx-empty { text-align: center; padding: 2.5rem 1.5rem; color: var(--subtext); }
.fx-empty__icon { margin: 0 auto 0.75rem; display: block; opacity: 0.3; color: var(--color-text); }
.fx-empty__title { font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 0.375rem; }
.fx-empty__text { font-size: 12px; line-height: 1.6; }

/* ===== S3 AVAILABLE-SERVICES preview (/?action=s3-preview) ===== */
/* Cabinet cards are flush-left (see "Выравнивание контента"): no margin auto.
   No top padding: the page title must sit flush with the cabinet column top,
   like order-vdc / order-veeam (their .page-content wrapper has none and the
   compact-heading rule zeroes the header's top padding). 8px here pushed the
   S3 heading below the others. Bottom 44px is the page convention (+20px from
   .page-main = 64px gap before the footer), same as order-vdc / tier pages. */
.s3-preview { max-width: 1100px; margin: 0; padding: 0 0 44px; }
/* Same card as order-vdc__buy (the two order screens sit next to each other in
   the cabinet menu and must read as one component): flat white card with a
   1px border, no shadow. */
.s3-preview__buy {
  font-family: var(--font-sans);
  background: var(--color-surface);
  border: 1px solid #e6e9f2;
  border-radius: 16px;
  padding: 24px 26px;
  margin-bottom: 24px;
}
.s3-preview__buy-sub { font-size: 13.5px; line-height: 1.5; color: var(--subtext); margin: 4px 0 18px; }
.s3-preview__buy-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
.s3-preview__buy-config { min-width: 0; }
@media (max-width: 760px) { .s3-preview__buy-grid { grid-template-columns: 1fr; } }
/* Top padding trimmed so "Summary" sits on the same line as the step heading
   opposite it (the heading is centred against the 32px "+" badge) - mirrors
   .order-vdc__buy-summary.
   align-self:stretch keeps the panel's bottom edge on the card's bottom padding
   even though the left column is the taller one (its slider help line ends ~10px
   lower). Without it the card measures its bottom padding from the left column
   and the gap under the summary border reads as too deep. */
.s3-preview__buy-summary {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 0.5rem 1.25rem 1.25rem;
}
.s3-preview__buy-summary .order-s3__summary-title { margin-bottom: 1rem; padding-bottom: 1rem; }
/* Order button hugs the panel's bottom edge: `auto` swallows the free space when
   the left column is taller, the tax note's margin keeps the gap when it is not. */
.s3-preview__buy-summary .order-s3__summary-tax { margin-bottom: 1rem; }
.s3-preview__buy-summary #s3pv-submit { margin-top: auto; }
/* Order button - match the blue action buttons (login/checkout/tier Create). */
#s3pv-submit {
  background: var(--color-primary); border: none; border-radius: 12px;
  font-family: var(--font-sans); font-weight: 800; letter-spacing: 0.3px;
  transition: all var(--ease);
}
#s3pv-submit:hover:not(:disabled),
#s3pv-submit:focus:not(:disabled) { background: #0040cc; transform: translateY(-1px); }
#s3pv-submit:disabled { background: #a0b0cc; opacity: 1; box-shadow: none; transform: none; }
.s3-preview__alert { margin: 4px 0 14px; }
.s3-preview__panel { margin-top: 8px; }
/* Tab swap in flight (see s3-preview.tpl): dim, don't collapse - the height
   stays put, so the page never jumps under the cursor. */
.s3-preview__panel.is-loading { opacity: 0.55; pointer-events: none; transition: opacity 0.15s ease; }
/* Reserve one text line for both summary rows: they are empty until the catalog
   answers, and filling them used to push the whole panel down (CLS 0.018). */
.s3-preview__buy-summary .order-s3__summary-detail,
.s3-preview__buy-summary .order-s3__summary-tax { min-height: 1.5em; }
/* The preview banner is styled by the S3 plugin (.s3-card-gate--preview lives in
   its skeleton.css, fx-alert--info palette). Do not re-declare it here: two
   sources for one component drift apart. */


/* ===== VDC project picker (/?action=select-vdc) =====
   A narrow centered panel with a row list. Deliberately NOT the dashboard's wide
   three-column card grid: clients read the two pages as the same page otherwise. */
.select-vdc__crumbs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 640px;
  margin: 0 auto 0.75rem;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--subtext);
}
.select-vdc__crumbs a { color: var(--subtext); text-decoration: none; }
.select-vdc__crumbs a:hover { color: var(--color-primary); }
.select-vdc__crumbsep { color: var(--color-border); }
.select-vdc__crumbcur { color: var(--color-text); font-weight: 600; }

.select-vdc__panel {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 2rem;
}
.select-vdc__head { margin-bottom: 1.25rem; }
.select-vdc__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem 0.3rem 0.45rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
}
.select-vdc__badgeicon { width: 26px; height: 26px; object-fit: contain; }
.select-vdc__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.5px;
  line-height: 1.25;
  color: var(--color-text);
  margin: 0 0 0.35rem;
}
.select-vdc__sub {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--subtext);
  margin: 0;
}
.select-vdc__cancel {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--subtext);
  text-decoration: none;
}
.select-vdc__cancel:hover { color: var(--color-primary); }
/* Кнопка пустого состояния: наша плоская CTA (системная норма §9.1), не Bootstrap. */
.select-vdc__empty-btn {
  display: inline-block; margin-top: 1rem;
  padding: 0.75rem 1.5rem; border-radius: 12px;
  background: var(--color-primary); color: #fff;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700;
  text-decoration: none; transition: all var(--ease);
}
.select-vdc__empty-btn:hover { background: #0040cc; transform: translateY(-1px); color: #fff; }

.select-vdc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
.select-vdc__list li + li .select-vdc__row { border-top: 1px solid var(--color-border); }
.select-vdc__row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.9rem 1rem;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.18s cubic-bezier(.4, 0, .2, 1);
}
.select-vdc__row:hover {
  background: var(--color-bg, #f8fafc);
  color: var(--color-text);
  text-decoration: none;
}
.select-vdc__rowicon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--color-border);
  color: var(--subtext);
}
.select-vdc__rowicon svg { width: 18px; height: 18px; }
.select-vdc__row:hover .select-vdc__rowicon { color: var(--color-primary); border-color: var(--color-primary); }
/* Colour service illustration (same file the dashboard cards use): no frame, it
   carries its own shape. A project must read as the same object in both places. */
.select-vdc__rowicon--img { width: 48px; height: 43px; border: 0; border-radius: 0; }
.select-vdc__rowicon--img img { width: 48px; height: 43px; object-fit: contain; display: block; }
.select-vdc__row:hover .select-vdc__rowicon--img { border-color: transparent; }
.select-vdc__rowmain { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 auto; }
.select-vdc__rowname { font-family: var(--font-sans); font-weight: 700; font-size: 15px; line-height: 1.3; }
.select-vdc__rowmeta { font-family: var(--font-sans); font-size: 12px; color: var(--subtext); }
.select-vdc__rowarrow { flex: none; color: var(--color-border); }
.select-vdc__row:hover .select-vdc__rowarrow { color: var(--color-primary); }
.select-vdc__row--new .select-vdc__rowicon { border-style: dashed; }

@media (max-width: 575.98px) {
  .select-vdc__panel { padding: 1.15rem; }
  .select-vdc__cancel { top: 1.15rem; right: 1.15rem; }
}

/* ===== Service category hub (/?action=service-hub&type=vdc|s3|veeam) =====
   Sidebar SERVICES item (1+ services of the category) -> tiles: the client's
   services of one category plus an "order new" tile. The panel shell reuses
   .select-vdc__* (same intermediate-choice page family as the project picker);
   the tiles reuse the dashboard .services-card component verbatim (+ the
   .services-card--new modifier for the "order another" tile) - one card
   component, so a service reads the same on the hub and the dashboard. */
/* Hub pages take the full cabinet width, flush-left - same as every other
   cabinet card (Services / Security / Billing). Scoped to .service-hub so the
   project picker (select-vdc) keeps its deliberately narrow centered shell. */
.service-hub .select-vdc__panel { max-width: none; margin: 0; }
/* Under the heading: the category description (.select-vdc__sub, 14px subtext)
   over the shorter action hint (13px muted). Vertical rhythm groups title+desc
   together, then a wider gap to the action hint, then the widest gap to the
   cards - so the heading block reads as one unit. Scoped to .service-hub (the
   dead select-vdc picker keeps its tighter spacing). */
.service-hub .select-vdc__title { margin-bottom: 0.6rem; }
.service-hub .select-vdc__head { margin-bottom: 0.6rem; }
/* Cap the description width so the long VDC line wraps to two lines (short
   descriptions like S3 stay on one). */
.service-hub .select-vdc__sub { max-width: 56ch; }
.service-hub__hint {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-muted);
  margin: 1.75rem 0 0;
}
/* Back link mirrors the vdc-ui console "Back to server list" (.vdc-back-link):
   a light subtext text link with a left arrow, primary on hover - not a button.
   Sits where the old Cancel link did (top-right of the panel). */
.service-hub__back {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--subtext);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ease);
}
.service-hub__back:hover { color: var(--color-primary); }
.service-hub__back svg { width: 16px; height: 16px; }
/* Phones: the absolute top-right link overlaps the (now longer) breadcrumbs, so
   drop it into the flow above the title instead. In DOM it sits first in the
   head, so on desktop the absolute position is unchanged. */
@media (max-width: 640px) {
  .service-hub__back { position: static; margin: 0 0 0.75rem; }
}
/* Fixed 3-col grid mirrors the dashboard cards (.services-list__cards): a tile
   is always a third of the panel, whatever the count - same geometry and
   breakpoints as the dashboard, so a service reads the same in both places. */
.service-hub__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
}
@media (max-width: 1024px) {
  .service-hub__tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .service-hub__tiles { grid-template-columns: 1fr; }
}
/* "Order another" tile: the same .services-card (dashboard component), dashed,
   with a plus in the icon slot. Service tiles above reuse .services-card as-is,
   so the hub renders a service exactly like the dashboard. */
.services-card--new { border-style: dashed; }
.services-card--new:hover { background: #FBFCFF; }
.services-card__newplus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: #EEF3FF;
  color: var(--color-primary);
}
.services-card__newplus svg { width: 22px; height: 22px; }
/* Server-create mode (?create=solo|cluster|gpu): a CTA line at the bottom of each
   card. Cards become columns and the CTA is pushed down (margin-top:auto) so every
   card's CTA lines up regardless of the content above (the + card has no status
   pill, so it is shorter). Scoped to .service-hub - the dashboard .services-card is
   untouched. */
.service-hub .services-card { display: flex; flex-direction: column; }
.services-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #EEF0F4;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
}
.services-card__cta svg { width: 15px; height: 15px; }

/* ============================================================
   §20c Order Veeam (3 product picker + dynamic sliders)
   Mirrors §order-s3 layout (header + step + sticky summary) and adds a
   product-selection grid (.order-veeam__cards). Scoped .order-veeam__*.
   ============================================================ */
.order-veeam { font-family: var(--font-sans); padding-bottom: 44px; }
.order-veeam__header { padding: 28px 0 40px; }
.order-veeam__hero-row { display: flex; align-items: center; gap: 1.25rem; }
.order-veeam__title { font-family: var(--font-sans); font-weight: 800; font-size: 2rem; line-height: 1.15; letter-spacing: -0.75px; color: var(--color-text); margin: 0 0 0.25rem; }
.order-veeam__title-accent { color: var(--color-primary); }
.order-veeam__title-icon { width: 72px; height: 64px; object-fit: contain; flex-shrink: 0; margin: 0; }
.order-veeam__subtitle { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--subtext); line-height: 1.6; margin: 0; }

.order-veeam__alert { max-width: 1230px; margin: 0 0 1.25rem; }

/* ----- State 1: product selection ----- */
/* No 14px inset here: the product cards sit right under the heading, so the step
   is jarring. S3/tier keep the inset because a slim slider under the heading hides it. */
.order-veeam__select { max-width: 1230px; margin-left: 0; margin-right: auto; }
.order-veeam__select-title { font-family: var(--font-sans); font-size: 18px; font-weight: 800; color: var(--color-text); margin: 0 0 14px; }
.order-veeam__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.order-veeam__card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  background: #fff; border: 1.5px solid var(--color-border); border-radius: 20px;
  padding: 28px 24px 24px; min-height: 260px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.order-veeam__card:hover,
.order-veeam__card:focus {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  outline: none;
}
.order-veeam__card-badge {
  position: absolute; top: 16px; right: 16px;
  background: var(--hover-bg); color: var(--color-primary);
  font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
  padding: 4px 10px; border-radius: 999px; text-transform: uppercase;
}
.order-veeam__card-icon { width: 56px; height: 56px; object-fit: contain; margin: 0 0 1rem; }
.order-veeam__card-title { font-size: 17px; font-weight: 800; color: var(--color-text); margin: 0 0 0.5rem; }
.order-veeam__card-desc { font-size: 13px; color: var(--subtext); line-height: 1.55; margin: 0 0 1rem; flex-grow: 1; }
.order-veeam__card-features { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.order-veeam__card-features li { position: relative; padding-left: 18px; font-size: 12px; color: var(--color-text); line-height: 1.4; }
.order-veeam__card-features li::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 8px; height: 4px; border-left: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary); transform: rotate(-45deg);
}
.order-veeam__card-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-size: 13px; font-weight: 700; margin-top: auto; }
.order-veeam__card-cta svg { width: 15px; height: 15px; }

/* ----- State 2: configuration ----- */
.order-veeam__configure { max-width: 1230px; margin-left: 0; margin-right: auto; }
.order-veeam__chip {
  display: inline-flex; align-items: center; gap: 0.75rem;
  background: var(--hover-bg); border-radius: 999px;
  padding: 6px 8px 6px 18px; margin-bottom: 1.5rem;
  font-size: 13px; font-weight: 700; color: var(--color-text);
}
.order-veeam__chip-change {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; color: var(--color-primary);
  border: 1px solid var(--color-border); border-radius: 999px;
  padding: 5px 14px; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: border-color var(--ease), background var(--ease);
}
.order-veeam__chip-change svg { width: 13px; height: 13px; }
.order-veeam__chip-change:hover { border-color: var(--color-primary); background: var(--hover-bg); }
.order-veeam__loading { font-size: 13px; color: var(--subtext); }

/* State-2 panel: slider column + Summary in one bordered white card
   (mirror order-vdc__buy). Own grid, NOT Bootstrap .row - avoids the
   .order-veeam .row override gotcha. */
.order-veeam__panel { padding: 24px 26px; background: #fff; border: 1px solid #e6e9f2; border-radius: 16px; }
.order-veeam__panel-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .order-veeam__panel-grid { grid-template-columns: 1fr; } }

.order-veeam__step { margin-bottom: 2.5rem; }
.order-veeam__step:last-child { margin-bottom: 0; }
.order-veeam__step-header { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.5rem; }
.order-veeam__step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; flex-shrink: 0;
}
.order-veeam__step-title { font-family: var(--font-sans); font-size: 18px; font-weight: 800; color: var(--color-text); margin: 0; }

/* Sliders (mirror order-s3 geometry) */
.order-veeam__sliders-wrap { display: flex; flex-direction: column; gap: 2rem; max-width: 860px; }
.order-veeam__slider-row { display: flex; flex-direction: column; gap: 0.625rem; }
.order-veeam__slider-label { display: flex; justify-content: space-between; align-items: center; }
.order-veeam__slider-label label { font-size: 14px; font-weight: 700; color: var(--color-text); margin: 0; }
.order-veeam__slider-val { font-size: 15px; font-weight: 600; color: var(--color-primary); }
.order-veeam__slider-val strong { font-weight: inherit; }
.order-veeam__slider-controls { display: flex; align-items: center; gap: 0.875rem; }
.order-veeam__slider {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 auto; width: 100%; height: 6px; border-radius: 999px;
  background: var(--color-border); outline: none; cursor: pointer;
  transition: background var(--ease);
}
.order-veeam__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-primary); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,80,255,0.3); border: 3px solid #fff;
  transition: transform var(--ease), box-shadow var(--ease);
}
.order-veeam__slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.order-veeam__slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-primary); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,80,255,0.3); border: 3px solid #fff;
}
.order-veeam__slider-num {
  flex: 0 0 84px; width: 84px; text-align: center;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-control);
  background: var(--color-surface); font-family: var(--font-sans);
  font-size: 14px; font-weight: 700; color: var(--color-text);
  padding: 0.5rem 0.5rem; transition: border-color var(--ease);
}
.order-veeam__slider-num:focus { border-color: var(--color-primary); box-shadow: none; outline: none; }
.order-veeam__slider-marks { position: relative; height: 16px; margin-right: calc(84px + 0.875rem); }
.order-veeam__slider-marks span {
  position: absolute; top: 0;
  left: calc(var(--f, 0) * (100% - 22px) + 11px);
  transform: translateX(-50%);
  font-size: 11px; line-height: 16px; color: var(--subtext); white-space: nowrap;
}
/* First/last marks pin to the track edges instead of centering, so the min label
   (e.g. "0 Workstation") does not spill left of the content and rag the edge. */
.order-veeam__slider-marks span:first-child { left: 0; transform: none; }
.order-veeam__slider-marks span:last-child { left: auto; right: 0; transform: none; }
.order-veeam__slider-help { font-size: 11px; color: var(--subtext); margin-top: 0.25rem; }

/* Sidebar Summary card */
.order-veeam__sidebar { font-family: var(--font-sans); color: var(--color-text); }
/* Summary keeps its own thin grey border inside the panel (like order-vdc / s3). */
.order-veeam__summary {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px; padding: 0.5rem 1.25rem 1.25rem;
}
.order-veeam__summary-title {
  font-size: 17px; font-weight: 800; color: var(--color-text);
  margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border);
}
.order-veeam__summary-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.order-veeam__summary-total-label { font-size: 15px; font-weight: 700; color: var(--color-text); }
.order-veeam__summary-total-price { font-size: 26px; font-weight: 800; color: var(--color-primary); }
.order-veeam__summary-detail { font-size: 11px; color: var(--subtext); margin-top: 0.25rem; min-height: 1em; }
.order-veeam__summary-tax { font-size: 11px; color: var(--subtext); margin-top: 0.5rem; }
.order-veeam__summary-hint { font-size: 11px; color: var(--subtext); text-align: center; margin: 0.75rem 0 0; }

#order-veeam-submit {
  background: var(--color-primary); border: none; border-radius: 12px;
  font-family: var(--font-sans); font-weight: 800; letter-spacing: 0.3px;
  transition: all var(--ease);
}
#order-veeam-submit:hover:not(:disabled),
#order-veeam-submit:focus:not(:disabled) {
  background: #0040cc; transform: translateY(-1px);
}
#order-veeam-submit:disabled { background: #a0b0cc; opacity: 1; box-shadow: none; transform: none; }

@media (max-width: 991px) {
  .order-veeam__cards { grid-template-columns: 1fr; }
  .order-veeam__select,
  .order-veeam__configure { max-width: none; margin-left: 0; }
}