/*
 * Client area UI 2 (docs/CLIENT-AREA-OVERHAUL-PLAN.md). Loaded only when the UI 2
 * flag is on (on for everyone since 2026-11-03; crs_ui=0 opts out) (header.shared-crservers.tpl), after the Theme Custom CSS. Every rule is
 * scoped to html.crs-ui-2 and uses --crs-* tokens (crs-tokens.<hash>.css).
 * Cloudflare ignores ?v=: bump blNNN in the filename and the <link> when this changes.
 *
 * Phase 2: shell + shared components only. Page layouts (dashboard cards, service
 * detail, cart PlanCards) come in Phase 3 with template changes.
 */

/* ---- Base ---------------------------------------------------------------- */

html.crs-ui-2 body {
  background: var(--crs-surface-page);
  color: var(--crs-text-strong);
  font-family: var(--crs-typography-font-family);
  -webkit-font-smoothing: antialiased;
}

html.crs-ui-2 a {
  color: var(--crs-action-interface-fill);
}

html.crs-ui-2 a:hover {
  color: var(--crs-action-interface-hover-fill);
}

html.crs-ui-2 h2,
html.crs-ui-2 .h2 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--crs-text-strong);
}

html.crs-ui-2 h3,
html.crs-ui-2 .h3 {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--crs-text-strong);
}

html.crs-ui-2 .text-secondary,
html.crs-ui-2 .text-muted {
  color: var(--crs-text-muted) !important;
}

html.crs-ui-2 :focus-visible {
  outline: var(--crs-fab-focus-width) solid var(--crs-fab-focus-color);
  outline-offset: var(--crs-fab-focus-offset);
}

/* ---- Shell: top bar ------------------------------------------------------
 * The bar keeps the website's footer gradient from the Theme Custom CSS (same as
 * crservers.com's header), so only its dropdowns are restyled here.
 */

html.crs-ui-2 nav.navbar .dropdown-menu {
  border: 1px solid var(--crs-border-muted);
  border-radius: var(--crs-radius-surface);
  box-shadow: var(--crs-shadow-card);
}

/* ---- Shell: sidebar ------------------------------------------------------ */

html.crs-ui-2 aside.sidebar {
  background: var(--crs-surface-card);
  border-right: 1px solid var(--crs-border-muted);
}

html.crs-ui-2 aside.sidebar .sidebar-wrap {
  padding: 16px 8px;
}

html.crs-ui-2 aside.sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--crs-radius-control);
  background: transparent;
  color: #3d4552;
  /* 14px, not 15px: "Servidores Dedicados" / "Tiquetes de Soporte" wrapped in the 250px sidebar. */
  font-size: 14px;
  transition: background-color var(--crs-motion-fast) var(--crs-motion-easing);
}

html.crs-ui-2 aside.sidebar .nav-link .material-icons {
  margin-right: 0;
  font-size: 20px;
  color: inherit;
}

html.crs-ui-2 aside.sidebar .nav-link:hover:not(.active, .disabled) {
  background: var(--crs-status-neutral-surface) !important;
  color: var(--crs-text-strong);
}

html.crs-ui-2 aside.sidebar .nav-link.active {
  background: var(--crs-status-info-surface);
  color: var(--crs-status-info);
  font-weight: 500;
}

/* "Your services" (components/crs/sidebar-services.tpl): count on the right of each link. */
html.crs-ui-2 aside.sidebar .crs-side-services .crs-side-count {
  min-width: 22px;
  margin-left: auto;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--crs-status-neutral-surface);
  color: var(--crs-text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
}

html.crs-ui-2 aside.sidebar .crs-side-services .nav-link.active .crs-side-count {
  background: var(--crs-surface-card);
  color: var(--crs-status-info);
}

/* The theme repeats the language picker at the bottom of the sidebar below 992px; UI 2 already has
   it in the header (globe), so the sidebar copy is a duplicate. */
html.crs-ui-2 aside.sidebar ul:has(> li > a[href="#menu-language"]) {
  display: none !important;
}

html.crs-ui-2 aside.sidebar .sidebar-heading {
  padding-top: 20px;
  padding-bottom: 6px;
  color: var(--crs-text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* ---- Cards / panels ------------------------------------------------------ */

html.crs-ui-2 .card,
html.crs-ui-2 .table-borders.table-radius {
  background: var(--crs-surface-card);
  border: 1px solid var(--crs-border-muted);
  border-radius: var(--crs-card-radius);
  box-shadow: none;
}

html.crs-ui-2 .card-header {
  background: transparent;
  border-bottom: 1px solid var(--crs-border-muted);
  padding: 16px var(--crs-card-padding);
  font-weight: 700;
}

html.crs-ui-2 .card-header:first-child {
  border-radius: var(--crs-card-radius) var(--crs-card-radius) 0 0;
}

html.crs-ui-2 .card-body {
  padding: var(--crs-card-padding);
}

html.crs-ui-2 .card-footer {
  background: transparent;
  border-top: 1px solid var(--crs-border-muted);
}

/* ---- Buttons ------------------------------------------------------------- */

/* Colour and state for every button (filled, outlined, danger, link, disabled; no faded hover)
   live in the global crs/crs-buttons.blNNN.css on the design tokens, for classic and UI 2 alike.
   UI 2 only adds sizing here. */
html.crs-ui-2 .btn {
  min-height: var(--crs-control-min-height-compact);
  font-size: 15px;
  /* <a>/<span> buttons do not center their label in min-height the way <button> does. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

html.crs-ui-2 .btn-block {
  display: flex;
  width: 100%;
}

html.crs-ui-2 .btn-sm {
  min-height: 36px;
  font-size: 14px;
}

html.crs-ui-2 .btn-lg {
  min-height: var(--crs-control-min-height-default);
  font-size: 16px;
}

/* Social sign-in buttons keep their brand colours; only shape changes. */
html.crs-ui-2 .btn-social {
  min-height: var(--crs-control-min-height-default);
}

/* ---- Forms --------------------------------------------------------------- */

html.crs-ui-2 .form-control,
html.crs-ui-2 .custom-select,
html.crs-ui-2 select.form-control {
  min-height: var(--crs-control-min-height-default);
  border: 1px solid var(--crs-border-control);
  border-radius: var(--crs-control-radius);
  color: var(--crs-text-strong);
  font-size: 16px; /* 16px stops iOS zooming on focus */
}

html.crs-ui-2 textarea.form-control {
  min-height: 120px;
}

html.crs-ui-2 .form-control:focus,
html.crs-ui-2 .custom-select:focus {
  border-color: var(--crs-action-interface-fill);
  box-shadow: 0 0 0 3px var(--crs-fab-focus-color);
}

html.crs-ui-2 .form-control.is-invalid,
html.crs-ui-2 .was-validated .form-control:invalid {
  border-color: var(--crs-status-error);
}

html.crs-ui-2 .invalid-feedback {
  color: var(--crs-status-error);
}

html.crs-ui-2 label,
html.crs-ui-2 .col-form-label {
  color: var(--crs-text-strong);
  font-weight: 500;
}

/* ---- Tables -------------------------------------------------------------- */

html.crs-ui-2 .table {
  color: var(--crs-text-strong);
}

html.crs-ui-2 .table thead th {
  border-top: 0;
  border-bottom: 1px solid var(--crs-border-muted);
  background: transparent;
  color: var(--crs-text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html.crs-ui-2 .table td,
html.crs-ui-2 .table th {
  padding: 14px 16px;
  border-top: 1px solid var(--crs-border-muted);
  vertical-align: middle;
}

html.crs-ui-2 .table tbody tr:hover {
  background: var(--crs-surface-page);
}

/* Stackable tables become one card per row on phones (the theme already adds
   data-label attributes for stackable tables). */
@media (max-width: 767.98px) {
  html.crs-ui-2 .table.stackable tbody tr {
    display: block;
    margin: 0 0 12px;
    padding: 8px 0;
    border: 1px solid var(--crs-border-muted);
    border-radius: var(--crs-radius-surface);
    background: var(--crs-surface-card);
  }

  html.crs-ui-2 .table.stackable tbody td {
    border-top: 0;
    padding: 8px 16px;
  }
}

/* ---- Status chips ---------------------------------------------------------
 * Same status classes as the theme's app.css, recoloured with the signed
 * status tokens (AA contrast on their surfaces). !important because the Theme
 * Custom CSS sets badge colours with !important; our extra html.crs-ui-2 wins.
 */

html.crs-ui-2 .badge {
  border: 0;
  border-radius: var(--crs-radius-pill) !important;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500 !important;
  line-height: 16px;
  text-transform: none !important;
  letter-spacing: 0;
}

html.crs-ui-2 .badge.badge-Active,
html.crs-ui-2 .badge.badge-Open,
html.crs-ui-2 .badge.badge-Opened,
html.crs-ui-2 .badge.badge-Paid,
html.crs-ui-2 .badge.badge-Receiptpaid,
html.crs-ui-2 .badge.badge-Accepted,
html.crs-ui-2 .badge.badge-success {
  background: var(--crs-status-success-surface) !important;
  color: var(--crs-status-success) !important;
}

html.crs-ui-2 .badge.badge-Pending,
html.crs-ui-2 .badge.badge-Suspended,
html.crs-ui-2 .badge.badge-Answered,
html.crs-ui-2 .badge.badge-warning {
  background: var(--crs-status-warning-surface) !important;
  color: var(--crs-status-warning) !important;
}

html.crs-ui-2 .badge.badge-Unpaid,
html.crs-ui-2 .badge.badge-Terminated,
html.crs-ui-2 .badge.badge-Chargeback,
html.crs-ui-2 .badge.badge-Collections,
html.crs-ui-2 .badge.badge-Receiptunpaid,
html.crs-ui-2 .badge.badge-Fraud,
html.crs-ui-2 .badge.badge-danger {
  background: var(--crs-status-error-surface) !important;
  color: var(--crs-status-error) !important;
}

html.crs-ui-2 .badge.badge-Sent,
html.crs-ui-2 .badge.badge-In-Progress,
html.crs-ui-2 .badge.badge-Client-Reply,
html.crs-ui-2 .badge.badge-info,
html.crs-ui-2 .badge.badge-primary {
  background: var(--crs-status-info-surface) !important;
  color: var(--crs-status-info) !important;
}

html.crs-ui-2 .badge.badge-Cancelled,
html.crs-ui-2 .badge.badge-Canceled,
html.crs-ui-2 .badge.badge-Close,
html.crs-ui-2 .badge.badge-Closed,
html.crs-ui-2 .badge.badge-Creditnote,
html.crs-ui-2 .badge.badge-Dead,
html.crs-ui-2 .badge.badge-Draft,
html.crs-ui-2 .badge.badge-Receiptcanceled,
html.crs-ui-2 .badge.badge-secondary,
html.crs-ui-2 .badge.badge-light {
  background: var(--crs-status-neutral-surface) !important;
  color: var(--crs-status-neutral) !important;
}

/* ---- Alerts -------------------------------------------------------------- */

/* Callout shape (crservers.com component.callout): straight 3px bar, square
   start corners, radius on the end corners only. Same as website quotes. */
html.crs-ui-2 .alert {
  border: 0;
  border-left: var(--crs-callout-bar-width) solid var(--crs-callout-bar, currentColor);
  border-radius: 0 var(--crs-callout-radius) var(--crs-callout-radius) 0;
  padding: var(--crs-callout-padding-block) var(--crs-callout-padding-inline);
}

html.crs-ui-2 .alert-success {
  --crs-callout-bar: var(--crs-callout-success-bar);
  background: var(--crs-callout-success-surface);
  color: var(--crs-callout-success-text);
}

html.crs-ui-2 .alert-warning {
  --crs-callout-bar: var(--crs-callout-warning-bar);
  background: var(--crs-callout-warning-surface);
  color: var(--crs-callout-warning-text);
}

html.crs-ui-2 .alert-danger {
  --crs-callout-bar: var(--crs-callout-error-bar);
  background: var(--crs-callout-error-surface);
  color: var(--crs-callout-error-text);
}

html.crs-ui-2 .alert-info,
html.crs-ui-2 .alert-primary {
  --crs-callout-bar: var(--crs-callout-info-bar);
  background: var(--crs-callout-info-surface);
  color: var(--crs-callout-info-text);
}

html.crs-ui-2 .alert a {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
}

/* ---- Pagination / tabs --------------------------------------------------- */

html.crs-ui-2 .page-link {
  border-color: var(--crs-border-muted);
  color: var(--crs-action-interface-fill);
}

html.crs-ui-2 .page-item.active .page-link {
  background: var(--crs-action-interface-fill);
  border-color: var(--crs-action-interface-fill);
}

html.crs-ui-2 .nav-tabs .nav-link.active {
  border-color: transparent transparent var(--crs-action-interface-fill);
  color: var(--crs-action-interface-fill);
  font-weight: 500;
}

/* ---- Modals -------------------------------------------------------------- */

html.crs-ui-2 .modal-content {
  border: 0;
  border-radius: var(--crs-card-radius);
  box-shadow: var(--crs-shadow-card-hover);
}

html.crs-ui-2 .modal-header,
html.crs-ui-2 .modal-footer {
  border-color: var(--crs-border-muted);
}

/* ---- Footer -------------------------------------------------------------- */

html.crs-ui-2 footer.footer-container {
  background: var(--crs-gradient-footer);
  color: var(--crs-text-inverse);
  /* Below the fixed sidebar (z-index 1000): the theme put the footer on top (9999), so scrolling
     to the bottom covered the last menu items. */
  z-index: 900 !important;
}

@media (min-width: 994px) {
  /* Same 250px offset as .body-content while the sidebar is open, so no footer content sits
     under the sidebar; none when it is collapsed (.sidenav-toggled). */
  html.crs-ui-2 footer.footer-container {
    padding-left: 250px;
  }

  html.crs-ui-2 .sidenav-toggled footer.footer-container {
    padding-left: 0;
  }

  /* The theme padded the menu by 450px so items stayed reachable under the footer; no longer needed. */
  html.crs-ui-2 .sidebar-wrap > ul.nav-pills:nth-last-of-type(2) {
    margin-bottom: 24px !important;
  }
}

html.crs-ui-2 footer.footer-container a,
html.crs-ui-2 footer.footer-container h3 {
  color: var(--crs-text-inverse);
}

/* ---- Page building blocks (Phase 3) -------------------------------------- */

html.crs-ui-2 .crs-card {
  background: var(--crs-surface-card);
  border: 1px solid var(--crs-border-muted);
  border-radius: var(--crs-card-radius);
  padding: 20px;
}

html.crs-ui-2 .crs-grid {
  display: grid;
  gap: 16px;
}

html.crs-ui-2 .crs-grid--2 {
  grid-template-columns: repeat(auto-fill, minmax(max(280px, calc((100% - 16px) / 2)), 1fr));
}

html.crs-ui-2 .crs-grid--3 {
  grid-template-columns: repeat(auto-fill, minmax(max(240px, calc((100% - 32px) / 3)), 1fr));
}

/* Even rows: thirds, centered, so a short last row (two cards) sits in the middle at the same
   card width as the rows above (catalog groups, portal home). */
html.crs-ui-2 .crs-even {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

html.crs-ui-2 .crs-even > * {
  flex: 0 0 calc((100% - 32px) / 3);
  min-width: 0;
}

@media (max-width: 991.98px) {
  html.crs-ui-2 .crs-even > * {
    flex-basis: calc((100% - 16px) / 2);
  }
}

@media (max-width: 575.98px) {
  html.crs-ui-2 .crs-even > * {
    flex-basis: 100%;
  }
}

/* Native radios and checkboxes in the brand blue. The Theme Custom CSS paints its own circle in
   ::after over the native control; at UI 2 sizes the two sit 2px apart and read as a crescent. */
html.crs-ui-2 input[type='radio']::after,
html.crs-ui-2 input[type='checkbox']::after {
  content: none !important;
  display: none !important;
}

html.crs-ui-2 input[type='radio'],
html.crs-ui-2 input[type='checkbox'] {
  accent-color: var(--crs-action-interface-fill);
}

html.crs-ui-2 .crs-link {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

html.crs-ui-2 .crs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 20px;
  text-align: center;
  color: var(--crs-text-muted);
}

html.crs-ui-2 .crs-empty .material-icons {
  font-size: 36px;
  color: var(--crs-action-interface-fill);
}

html.crs-ui-2 .crs-empty p {
  margin: 0;
}

html.crs-ui-2 .crs-empty--sm {
  padding: 20px;
}

html.crs-ui-2 .crs-list {
  margin: 0;
  padding: 4px 20px;
  list-style: none;
}

html.crs-ui-2 .crs-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  border-top: 1px solid var(--crs-border-muted);
}

html.crs-ui-2 .crs-list li:first-child {
  border-top: 0;
}

html.crs-ui-2 .crs-list li > a {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--crs-text-strong);
  font-weight: 500;
  text-decoration: none;
}

html.crs-ui-2 .crs-list li > a:hover {
  color: var(--crs-action-interface-fill);
}

html.crs-ui-2 .crs-list__meta {
  color: var(--crs-text-muted);
  font-size: 13px;
  white-space: nowrap;
}

/* ---- Dashboard (components/crs/pages/dashboard.tpl) ----------------------- */

html.crs-ui-2 .crs-dash {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1180px;
}

html.crs-ui-2 .crs-dash__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

html.crs-ui-2 .crs-dash__intro h1 {
  margin: 0 0 6px;
}

@media (max-width: 767.98px) {
  /* The Theme Custom CSS fixes portal h1s at 40px (!important); too big on phones. */
  html.crs-ui-2 .crs-dash__intro h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
}

html.crs-ui-2 .crs-dash__lead {
  margin: 0;
  color: var(--crs-text-muted);
  font-size: 16px;
}

html.crs-ui-2 .crs-dash__head .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

html.crs-ui-2 .crs-dash__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

html.crs-ui-2 .crs-dash__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

html.crs-ui-2 .crs-dash__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

html.crs-ui-2 .crs-dash__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

html.crs-ui-2 .crs-dash__main {
  flex: 999 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

html.crs-ui-2 .crs-dash__side {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

html.crs-ui-2 .crs-att {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

html.crs-ui-2 .crs-att__title {
  font-size: 16px;
  font-weight: 500;
}

html.crs-ui-2 .crs-att__meta {
  color: var(--crs-text-muted);
  font-size: 14px;
}

html.crs-ui-2 .crs-att__more {
  align-self: center;
}

html.crs-ui-2 .crs-att .btn {
  margin-top: auto;
}

html.crs-ui-2 .crs-svc {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

html.crs-ui-2 .crs-svc__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

html.crs-ui-2 .crs-svc__icon {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--crs-radius-control);
  background: var(--crs-status-info-surface);
  color: var(--crs-action-interface-fill);
}

html.crs-ui-2 .crs-svc__name {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

html.crs-ui-2 .crs-svc__name a {
  color: var(--crs-text-strong);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

html.crs-ui-2 .crs-svc__name a:hover {
  color: var(--crs-action-interface-fill);
}

html.crs-ui-2 .crs-svc__meta {
  color: var(--crs-text-muted);
  font-size: 14px;
}

html.crs-ui-2 .crs-svc__name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--crs-text-muted);
  font-size: 14px;
}

html.crs-ui-2 .crs-svc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* White like every other dashboard card (its title moved above the card; on the page grey it looked disabled). */
html.crs-ui-2 .crs-help {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

html.crs-ui-2 .crs-help p {
  margin: 0;
  color: var(--crs-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

html.crs-ui-2 .crs-help__line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

html.crs-ui-2 .crs-help__line .material-icons {
  font-size: 18px;
}

/* ---- Page header / toolbar (list pages) ---------------------------------- */

html.crs-ui-2 .crs-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1180px;
}

html.crs-ui-2 .crs-page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

html.crs-ui-2 .crs-page__intro h1 {
  margin: 0 0 6px;
}

html.crs-ui-2 .crs-page__lead,
html.crs-ui-2 .crs-page__foot {
  margin: 0;
  color: var(--crs-text-muted);
  font-size: 16px;
}

html.crs-ui-2 .crs-page__foot {
  font-size: 14px;
}

html.crs-ui-2 .crs-page__head .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

html.crs-ui-2 .crs-page__actions,
html.crs-ui-2 .crs-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

@media (max-width: 767.98px) {
  html.crs-ui-2 .crs-page__intro h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
}

html.crs-ui-2 .crs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

html.crs-ui-2 .crs-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html.crs-ui-2 .crs-pills a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--crs-border-control);
  border-radius: var(--crs-radius-pill);
  background: var(--crs-surface-card);
  color: #3d4552;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

html.crs-ui-2 .crs-pills a:hover {
  border-color: var(--crs-action-interface-fill);
  color: var(--crs-action-interface-fill);
}

html.crs-ui-2 .crs-pill-count {
  margin-left: 6px;
  color: var(--crs-text-muted);
  font-weight: 400;
}

html.crs-ui-2 .crs-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
}

html.crs-ui-2 .crs-pills li.active a {
  border-color: var(--crs-status-info-surface);
  background: var(--crs-status-info-surface);
  color: var(--crs-status-info);
}

/* Status filters on list pages (services, domains, tickets): quieter than buttons. Text only until
   hovered; the selected one keeps the tonal background. Dashboard link pills (--links) unchanged. */
html.crs-ui-2 .crs-pills:not(.crs-pills--links) {
  gap: 4px;
}

html.crs-ui-2 .crs-pills:not(.crs-pills--links) a {
  min-height: 30px;
  padding: 0 12px;
  border-color: transparent;
  background: transparent;
  color: var(--crs-text-muted);
  font-size: 13px;
}

html.crs-ui-2 .crs-pills:not(.crs-pills--links) a:hover {
  border-color: transparent;
  background: var(--crs-surface-card);
}

html.crs-ui-2 .crs-pills:not(.crs-pills--links) li.active a .crs-pill-count {
  color: inherit;
}

/* ---- List table (services) ----------------------------------------------- */

html.crs-ui-2 .crs-table-card {
  padding: 0;
  overflow: hidden;
}

html.crs-ui-2 .crs-table {
  margin: 0;
}

html.crs-ui-2 .crs-table thead th a {
  color: inherit;
  text-decoration: none;
}

html.crs-ui-2 .crs-table thead th:first-child,
html.crs-ui-2 .crs-table tbody td:first-child {
  padding-left: 20px;
}

html.crs-ui-2 .crs-table tr:first-child td {
  border-top: 0;
}

/* ---- Domains list (services/domains.tpl + ajax/ajax.domains.tpl, UI 2) ---- */

html.crs-ui-2 .crs-dom-list .crs-toolbar {
  margin: 20px 0 16px;
}

html.crs-ui-2 .crs-dom-list .filters-box {
  margin: 0 0 16px !important;
  border: 1px solid var(--crs-border-muted);
  border-radius: var(--crs-card-radius);
  background: var(--crs-surface-card);
}

html.crs-ui-2 .crs-dom-list .crs-dom-check {
  width: 44px;
  padding-right: 0;
}

/* Bulk bar for checked domains: a quiet strip at the top of the card. */
html.crs-ui-2 .crs-dom-list thead.crs-bulkbar th {
  padding: 10px 20px;
  border-bottom: 1px solid var(--crs-border-muted);
  background: var(--crs-surface-page);
  color: var(--crs-text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html.crs-ui-2 .crs-dom-list .selected-names {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 8px;
  text-transform: none;
  letter-spacing: normal;
}

html.crs-ui-2 .crs-dom-list .domain-widgets {
  white-space: nowrap;
}

html.crs-ui-2 .crs-dom-list .domain-widgets .btn {
  margin-left: 4px;
}

/* The cell stays a table cell (a flex <td> leaves the collapsed borders and broke the row line under it);
   the icon + name layout is on the inner div. */
html.crs-ui-2 .crs-svc-cell__in {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
}

html.crs-ui-2 .crs-svc-cell .crs-svc__name span .badge:empty {
  display: none;
}

html.crs-ui-2 .crs-muted,
html.crs-ui-2 .crs-row--muted td {
  color: var(--crs-text-muted);
}

html.crs-ui-2 .crs-row--muted .crs-svc__icon {
  background: var(--crs-status-neutral-surface);
  color: var(--crs-status-neutral);
}

html.crs-ui-2 .crs-row-actions {
  white-space: nowrap;
  text-align: right;
  padding-right: 12px;
}

html.crs-ui-2 .crs-row-actions .btn-group {
  vertical-align: middle;
}

html.crs-ui-2 .crs-kebab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--crs-radius-control);
  background: transparent;
  color: var(--crs-text-muted);
}

html.crs-ui-2 .crs-kebab:hover {
  background: var(--crs-status-neutral-surface);
  color: var(--crs-text-strong);
}

@media (max-width: 767.98px) {
  /* Rows are cards on phones (see .table.stackable above); sorting headers go. */
  /* Beats the theme's .table.stackable:not(.table-responsive) thead { display: block }. */
  html.crs-ui-2 .table.crs-table.stackable thead {
    display: none;
  }

  html.crs-ui-2 .table.crs-table.stackable td.crs-svc-cell {
    display: flex;
  }

  html.crs-ui-2 .crs-table-card {
    border: 0;
    background: transparent;
  }

  html.crs-ui-2 .crs-table .crs-svc-cell,
  html.crs-ui-2 .crs-table .crs-svc-cell__in {
    min-width: 0;
  }

  html.crs-ui-2 .crs-table tbody td:first-child {
    padding-left: 16px;
  }

  html.crs-ui-2 .crs-row-actions {
    text-align: left;
  }
}

/* ---- Service detail (components/crs/service-hero.tpl + theme body) ------- */

html.crs-ui-2 .crs-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--crs-text-muted);
  font-size: 14px;
}

/* The way back to the list: links in the interface blue, the current page in strong text. */
html.crs-ui-2 .crs-crumbs a {
  color: var(--crs-action-interface-fill);
  font-weight: 500;
  text-decoration: none;
}

html.crs-ui-2 .crs-crumbs a:hover,
html.crs-ui-2 .crs-crumbs a:focus-visible {
  text-decoration: underline;
}

html.crs-ui-2 .crs-crumbs [aria-current="page"] {
  color: var(--crs-text-strong);
}

html.crs-ui-2 .crs-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 24px;
}

html.crs-ui-2 .crs-hero__icon {
  flex-basis: 48px;
  width: 48px;
  height: 48px;
}

html.crs-ui-2 .crs-hero__body {
  flex: 1 1 320px;
  min-width: 0;
}

html.crs-ui-2 .crs-hero__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Not the 40px gradient portal heading: the hero carries a domain, often long. */
html.crs-ui-2 .crs-hero__title h1 {
  margin: 0;
  width: auto !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--crs-text-strong) !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere;
}

html.crs-ui-2 .crs-hero__meta {
  margin-top: 4px;
  color: var(--crs-text-muted);
  font-size: 14px;
}

html.crs-ui-2 .crs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

html.crs-ui-2 .crs-hero__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

html.crs-ui-2 .crs-hero__actions .material-icons {
  font-size: 18px;
}

/* Service sections menu → tab bar. The Theme Custom CSS styles this menu with !important
   (white text, pill boxes) with long selectors, so these need !important and the same reach. */
html.crs-ui-2 .crs-svc-detail {
  margin: 0 !important;
}

html.crs-ui-2 .section-account.crs-svc-detail .leftnavigation-box.nav.flex-column {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  border-bottom: 1px solid var(--crs-border-muted) !important;
}

html.crs-ui-2 .section-account.crs-svc-detail .leftnavigation-box.nav.flex-column > li > a.nav-link {
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #3d4552 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

html.crs-ui-2 .section-account.crs-svc-detail .leftnavigation-box.nav.flex-column > li > a.nav-link.active {
  border-bottom-color: var(--crs-action-interface-fill) !important;
  color: var(--crs-action-interface-fill) !important;
}

html.crs-ui-2 .section-account.crs-svc-detail .leftnavigation-box.nav.flex-column > li > a.nav-link.text-danger {
  color: var(--crs-status-error) !important;
}

html.crs-ui-2 .section-account.crs-svc-detail .leftnavigation-box.nav.flex-column > li > a.nav-link span {
  display: inline !important;
  color: inherit !important;
  text-transform: none !important;
}

html.crs-ui-2 .section-account.crs-svc-detail .leftnavigation-box.nav.flex-column > li > a.nav-link::after {
  content: none !important;
}

html.crs-ui-2 .section-account.crs-svc-detail .leftnavigation-box.nav.flex-column > li {
  flex: 0 0 auto !important;
  margin: 0 !important;
  background: transparent !important;
}

html.crs-ui-2 .section-account.crs-svc-detail .leftnavigation-box.nav.flex-column > li.last {
  order: 99 !important;
  margin-left: auto !important;
}

/* Below this width the row wraps; pushed right, Request Cancellation sat alone at the far edge of
   its own line. Let it follow the other tabs. */
@media (max-width: 1299.98px) {
  html.crs-ui-2 .section-account.crs-svc-detail .leftnavigation-box.nav.flex-column > li.last {
    margin-left: 0 !important;
  }
}

html.crs-ui-2 .section-account.crs-svc-detail .leftnavigation-box.nav.flex-column .widg-image {
  display: none !important;
}

/* Module menus (Proxmox VPS .cloud-nav) → same tab bar. */
html.crs-ui-2 .scroll-menu-wrapper .cloud-nav ul.level-1 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--crs-border-muted) !important;
  background: transparent !important;
  list-style: none !important;
}

html.crs-ui-2 .scroll-menu-wrapper .cloud-nav ul.level-1 > li.menu-item > a {
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color: #3d4552 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  text-transform: none !important;
}

html.crs-ui-2 .scroll-menu-wrapper .cloud-nav ul.level-1 > li.menu-item > a span {
  color: inherit !important;
  text-transform: none !important;
}

html.crs-ui-2 .scroll-menu-wrapper .cloud-nav ul.level-1 > li.current-menu-item > a {
  border-bottom-color: var(--crs-action-interface-fill) !important;
  color: var(--crs-action-interface-fill) !important;
}

html.crs-ui-2 .crs-svc-detail .col-md-9 {
  flex: 0 0 100%;
  max-width: 100%;
}

html.crs-ui-2 .crs-svc-detail h4 {
  margin: 8px 0 12px;
  font-size: 18px;
  font-weight: 700;
}

html.crs-ui-2 .crs-svc-detail .bordered-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  overflow: hidden;
  border: 1px solid var(--crs-border-muted);
  border-radius: var(--crs-card-radius);
  background: var(--crs-surface-card);
}

html.crs-ui-2 .crs-svc-detail .bordered-section > hr {
  display: none;
}

html.crs-ui-2 .crs-svc-detail .service-details-line {
  flex: none;
  max-width: none;
  margin: 0;
  padding: 16px 20px !important;
  border: 0;
  border-bottom: 1px solid var(--crs-border-muted);
}

html.crs-ui-2 .crs-svc-detail .service-details-line > small:first-child {
  color: var(--crs-text-muted);
  font-size: 12px;
  font-weight: 500 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html.crs-ui-2 .crs-svc-detail .service-details-line .text-small {
  color: var(--crs-text-strong);
  font-size: 15px;
}

html.crs-ui-2 .crs-svc-detail .service-details-line .text-danger {
  color: var(--crs-status-error) !important;
}

/* ---- Metered usage (eden·IA "Usage details": HostBill meteredwidget) -------
   The markup is HostBill's (widgets/meteredwidget/billinghistory.tpl + cloudhosting billing_metered.tpl
   and DataTables), not the theme's, so it is restyled here only. Its inline <style> borders every
   .ttable cell; the selectors below are more specific. */
html.crs-ui-2 .crs-svc-detail .widget-append .mseparator {
  height: 24px;
}

html.crs-ui-2 .crs-svc-detail .widget-append h3.summarize {
  margin: 0 0 12px;
  color: var(--crs-text-strong);
  font-size: 18px;
  font-weight: 700;
}

/* Credit / next invoice: one card, label above value. */
html.crs-ui-2 .crs-svc-detail .widget-append table.ttable {
  background: var(--crs-surface-card);
  border: 1px solid var(--crs-border-muted);
  border-radius: var(--crs-card-radius);
  border-collapse: separate;
}

html.crs-ui-2 .crs-svc-detail .widget-append table.ttable tr {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding: 16px 20px;
}

html.crs-ui-2 .crs-svc-detail .widget-append table.ttable tr td {
  display: block;
  padding: 0;
  border: 0;
  text-align: left;
  color: var(--crs-text-strong);
  font-size: 15px;
}

html.crs-ui-2 .crs-svc-detail .widget-append table.ttable tr td.title {
  color: var(--crs-text-muted);
}

html.crs-ui-2 .crs-svc-detail .widget-append table.ttable tr td.title b {
  font-weight: 500;
}

html.crs-ui-2 .crs-svc-detail .widget-append table.ttable .fs11 {
  color: var(--crs-text-muted);
  font-size: 13px;
}

/* Next invoice breakdown → stat cards. */
html.crs-ui-2 .crs-svc-detail .widget-append .metered-reports {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

html.crs-ui-2 .crs-svc-detail .widget-append .metered-reports .button {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  float: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 16px 20px;
  background: var(--crs-surface-card);
  border: 1px solid var(--crs-border-muted);
  border-radius: var(--crs-card-radius);
  box-shadow: none;
  text-align: left;
  text-shadow: none;
}

/* The Theme Custom CSS paints this card as a blue gradient with white text (!important); UI 2 uses
   the tonal highlight of the billing cards. */
html.crs-ui-2 .crs-svc-detail .widget-append .metered-reports .button.green {
  background: var(--crs-status-info-surface) !important;
  border-color: var(--crs-status-info-surface);
}

html.crs-ui-2 .crs-svc-detail .widget-append .metered-reports .button.green .value {
  color: var(--crs-text-strong) !important;
  -webkit-text-fill-color: currentColor !important;
}

html.crs-ui-2 .crs-svc-detail .widget-append .metered-reports .button.green .attr {
  color: var(--crs-text-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}

html.crs-ui-2 .crs-svc-detail .widget-append .metered-reports .value {
  color: var(--crs-text-strong);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

html.crs-ui-2 .crs-svc-detail .widget-append .metered-reports .attr {
  color: var(--crs-text-muted);
  font-size: 14px;
  font-weight: 500;
}

html.crs-ui-2 .crs-svc-detail .widget-append .metered-reports .discount {
  color: var(--crs-status-success);
  font-size: 13px;
}

/* "Usage details" heading with the month picker on the right. */
html.crs-ui-2 .crs-svc-detail .widget-append .metered-history {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}

html.crs-ui-2 .crs-svc-detail .widget-append .metered-history h3.summarize {
  order: -1;
  margin: 0;
}

html.crs-ui-2 .crs-svc-detail .widget-append .metered-history .right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  float: none;
}

html.crs-ui-2 .crs-svc-detail .widget-append .metered-history .clear {
  display: none;
}

html.crs-ui-2 .crs-svc-detail .widget-append .history-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--crs-text-muted);
  font-size: 14px;
}

html.crs-ui-2 .crs-svc-detail .widget-append .history-opt select {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--crs-border-muted);
  border-radius: 8px;
  background-color: var(--crs-surface-card);
  color: var(--crs-text-strong);
  font-size: 14px;
}

/* Usage table: the list-table card (header row, row lines, pager in the footer). */
html.crs-ui-2 .crs-svc-detail .widget-append .dataTables_wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  background: var(--crs-surface-card);
  border: 1px solid var(--crs-border-muted);
  border-radius: var(--crs-card-radius);
}

html.crs-ui-2 .crs-svc-detail .widget-append .whitetable {
  flex: 0 0 100%;
  border: 0;
  color: var(--crs-text-strong);
}

html.crs-ui-2 .crs-svc-detail .widget-append .whitetable thead {
  background: transparent;
  border: 0;
}

html.crs-ui-2 .crs-svc-detail .widget-append .whitetable thead th {
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--crs-border-muted);
  background-color: transparent;
  color: var(--crs-text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-shadow: none;
  text-transform: uppercase;
}

html.crs-ui-2 .crs-svc-detail .widget-append .whitetable thead th small {
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}

html.crs-ui-2 .crs-svc-detail .widget-append .whitetable td {
  padding: 14px 16px;
  border: 0;
  border-top: 1px solid var(--crs-border-muted);
  background: transparent !important;
  vertical-align: middle;
}

/* custom.min.css stripes tr.odd (!important). */
html.crs-ui-2 .crs-svc-detail .widget-append .whitetable tbody tr {
  background: transparent !important;
}

html.crs-ui-2 .crs-svc-detail .widget-append .whitetable tr:first-child td {
  border-top: 0;
}

html.crs-ui-2 .crs-svc-detail .widget-append .whitetable th:first-child,
html.crs-ui-2 .crs-svc-detail .widget-append .whitetable td:first-child {
  padding-left: 20px;
}

html.crs-ui-2 .crs-svc-detail .widget-append .whitetable td small {
  color: var(--crs-text-muted);
}

html.crs-ui-2 .crs-svc-detail .widget-append .whitetable .dataTables_empty {
  padding: 32px 20px;
  color: var(--crs-text-muted);
  text-align: center;
}

html.crs-ui-2 .crs-svc-detail .widget-append .dataTables_info,
html.crs-ui-2 .crs-svc-detail .widget-append .dataTables_paginate {
  float: none;
  padding: 12px 20px;
  color: var(--crs-text-muted);
  font-size: 14px;
}

html.crs-ui-2 .crs-svc-detail .widget-append .dataTables_info {
  flex: 1 1 auto;
  border-top: 1px solid var(--crs-border-muted);
}

html.crs-ui-2 .crs-svc-detail .widget-append .dataTables_paginate {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-top: 1px solid var(--crs-border-muted);
}

html.crs-ui-2 .crs-svc-detail .widget-append .paginate_button,
html.crs-ui-2 .crs-svc-detail .widget-append .paginate_active {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--crs-border-muted);
  border-radius: 8px;
  background: var(--crs-surface-card);
  color: var(--crs-action-interface-fill);
  font-size: 13px;
  cursor: pointer;
}

html.crs-ui-2 .crs-svc-detail .widget-append .paginate_active {
  background: var(--crs-action-interface-fill);
  border-color: var(--crs-action-interface-fill);
  color: var(--crs-text-inverse);
}

html.crs-ui-2 .crs-svc-detail .widget-append .paginate_button_disabled {
  color: var(--crs-text-muted);
  opacity: 0.6;
  cursor: default;
}

/* Cancel card (service_details-crservers.tpl): last on the page, quiet. A plain link, not a red
   button; the cancellation form keeps its clear confirm button. */
html.crs-ui-2 .crs-svc-detail .crs-cancel-card {
  margin-top: 40px;
}

html.crs-ui-2 .crs-svc-detail .crs-cancel-card__title {
  margin: 0 0 6px;
  color: var(--crs-text-strong);
  font-size: 16px;
  font-weight: 700;
}

html.crs-ui-2 .crs-svc-detail .crs-cancel-card__text {
  margin: 0 0 12px;
  color: var(--crs-text-muted);
  font-size: 14px;
}

html.crs-ui-2 .crs-svc-detail .crs-cancel-card__link {
  color: var(--crs-text-link);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
}

html.crs-ui-2 .crs-svc-detail .crs-cancel-card__link:hover,
html.crs-ui-2 .crs-svc-detail .crs-cancel-card__link:focus {
  color: var(--crs-status-error);
}

/* ---- Billing (clientarea/invoices-crservers.tpl) ------------------------- */

html.crs-ui-2 .crs-billing-head {
  margin-bottom: 24px;
}

html.crs-ui-2 .crs-billing-cards {
  margin-bottom: 24px;
}

html.crs-ui-2 .crs-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

html.crs-ui-2 .crs-stat__label {
  color: var(--crs-text-muted);
  font-size: 14px;
  font-weight: 500;
}

html.crs-ui-2 .crs-stat__value {
  color: var(--crs-text-strong);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

html.crs-ui-2 .crs-stat--due .crs-stat__value {
  color: var(--crs-status-error);
}

html.crs-ui-2 .crs-stat__note {
  color: var(--crs-text-muted);
  font-size: 14px;
}

html.crs-ui-2 .crs-stat .btn {
  margin-top: auto;
}

html.crs-ui-2 .crs-billing-actions {
  margin: 16px 0 !important;
}

html.crs-ui-2 .crs-billing-actions #invoice_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Account sub-navigation (clientarea/top_nav.tpl) → tab bar */
html.crs-ui-2 .section-main .nav-tabs-wrapper .nav-tabs {
  border-bottom: 1px solid var(--crs-border-muted);
}

/* The Theme Custom CSS paints these links as gradient text (.nav-tabs-wrapper … a.nav-link: transparent
   fill, !important); plain text here. */
html.crs-ui-2 .section-main .nav-tabs-wrapper .nav-tabs li.nav-item a.nav-link {
  background-image: none !important;
  -webkit-text-fill-color: #3d4552 !important;
}

html.crs-ui-2 .section-main .nav-tabs-wrapper .nav-tabs li.nav-item.active a.nav-link {
  -webkit-text-fill-color: var(--crs-action-interface-fill) !important;
}

html.crs-ui-2 .section-main .nav-tabs-wrapper.crs-subtabs .nav-tabs li.nav-item a.nav-link {
  -webkit-text-fill-color: var(--crs-text-strong) !important;
}

html.crs-ui-2 .section-main .nav-tabs-wrapper.crs-subtabs .nav-tabs li.nav-item.active a.nav-link {
  -webkit-text-fill-color: var(--crs-action-interface-fill) !important;
}

html.crs-ui-2 .section-main .nav-tabs-wrapper .nav-slider .nav-item .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #3d4552;
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
}

/* One underline: UI 2 draws the active tab's border, so the theme's animated .slider bar (and
   perfect-scrollbar rails) would add a second line under it on billing/history/account tabs. */
html.crs-ui-2 .section-main .nav-tabs-wrapper .nav-slider .slider,
html.crs-ui-2 .section-main .nav-tabs-wrapper .ps__rail-x,
html.crs-ui-2 .section-main .nav-tabs-wrapper .ps__rail-y {
  display: none !important;
}

html.crs-ui-2 .section-main .nav-tabs-wrapper .nav-slider .nav-item .nav-link,
html.crs-ui-2 .section-main .nav-tabs-wrapper .nav-slider .nav-item .nav-link:hover {
  text-decoration: none !important;
}

html.crs-ui-2 .section-main .nav-tabs-wrapper .nav-slider .nav-item.active .nav-link {
  border-bottom-color: var(--crs-action-interface-fill);
  color: var(--crs-action-interface-fill);
}

/* Second row inside an Account tab (Security: IP access / SSH keys / 2FA; Users: profiles / teams):
   small pills, so it reads as part of the tab above rather than a second tab bar. */
html.crs-ui-2 .section-main .nav-tabs-wrapper.crs-subtabs {
  margin: 20px 0 8px;
}

html.crs-ui-2 .section-main .nav-tabs-wrapper.crs-subtabs .nav-tabs {
  border-bottom: 0;
}

html.crs-ui-2 .section-main .nav-tabs-wrapper.crs-subtabs ul.nav ul.nav {
  gap: 8px;
}

/* The theme pads each tab item 30px on the right; the pills keep only the 8px gap. */
html.crs-ui-2 .section-main .nav-tabs-wrapper.crs-subtabs .nav-item {
  margin: 0;
  padding: 0;
}

html.crs-ui-2 .section-main .nav-tabs-wrapper.crs-subtabs .nav-item .nav-link {
  padding: 6px 14px;
  border: 1px solid var(--crs-border-muted);
  border-radius: 999px;
  background: var(--crs-surface-card) none;
  color: var(--crs-text-strong);
  font-size: 14px;
  font-weight: 500;
}

html.crs-ui-2 .section-main .nav-tabs-wrapper.crs-subtabs .nav-item.active .nav-link {
  border-color: var(--crs-status-info-surface);
  background: var(--crs-status-info-surface);
  color: var(--crs-action-interface-fill);
}

/* Staff Members / Teams (contacts/contacts.tpl): lead and actions under the pill row. */
html.crs-ui-2 .crs-contacts-head {
  align-items: center;
  margin: 8px 0 20px;
}

html.crs-ui-2 .crs-contacts-head .crs-page__lead {
  flex: 1 1 320px;
  font-size: 15px;
}

/* ---- Plan change review (overrides/order_upgrade.tpl, UI 2 summary) ------- */
html.crs-ui-2 .crs-upgrade {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 16px;
  padding: 24px;
}

html.crs-ui-2 .crs-upgrade__title {
  margin: 0;
  font-size: 22px !important;
  font-weight: 700;
  line-height: 1.3 !important;
  background: none !important;
  color: var(--crs-text-strong) !important;
  -webkit-text-fill-color: var(--crs-text-strong) !important;
}

html.crs-ui-2 .crs-upgrade__service {
  margin: -12px 0 0;
  color: var(--crs-text-muted);
  font-size: 15px;
}

html.crs-ui-2 .crs-upgrade__plans {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

html.crs-ui-2 .crs-upgrade__plan {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
}

html.crs-ui-2 .crs-upgrade__plan small,
html.crs-ui-2 .crs-upgrade__today small {
  color: var(--crs-text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html.crs-ui-2 .crs-upgrade__plan span {
  color: var(--crs-text-strong);
  font-size: 17px;
  font-weight: 700;
}

html.crs-ui-2 .crs-upgrade__plan em {
  color: var(--crs-text-muted);
  font-size: 14px;
  font-style: normal;
}

html.crs-ui-2 .crs-upgrade__plan:not(.crs-upgrade__plan--new) span {
  color: var(--crs-text-muted);
  font-weight: 500;
}

html.crs-ui-2 .crs-upgrade__arrow {
  color: var(--crs-action-interface-fill);
}

html.crs-ui-2 .crs-upgrade__today {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border-radius: var(--crs-card-radius);
  background: var(--crs-status-info-surface);
}

html.crs-ui-2 .crs-upgrade__today strong {
  color: var(--crs-text-strong);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

html.crs-ui-2 .crs-upgrade__today p {
  margin: 4px 0 0;
  color: var(--crs-text-strong);
  font-size: 14px;
}

/* Unprovisioned VPS (Proxmox module billing table): the module prints "Request Cancellation" as a red
   label next to the status. Same quiet treatment as the cancel card: a plain link. */
html.crs-ui-2 .cloud-billing a.delete[href*="&cancel"] {
  margin-left: 12px;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none;
  color: var(--crs-text-link) !important;
  font-size: 14px !important;
  font-weight: 500;
  text-decoration: underline;
  -webkit-text-fill-color: var(--crs-text-link) !important;
}

html.crs-ui-2 .cloud-billing a.delete[href*="&cancel"]:hover,
html.crs-ui-2 .cloud-billing a.delete[href*="&cancel"]:focus {
  color: var(--crs-status-error) !important;
  -webkit-text-fill-color: var(--crs-status-error) !important;
}

/* ---- Error page (404.tpl, UI 2) ------------------------------------------- */
html.crs-ui-2 .crs-error {
  display: flex;
  justify-content: center;
  padding: 48px 0;
}

html.crs-ui-2 .crs-error__card {
  max-width: 520px;
  padding: 40px 32px;
  text-align: center;
}

html.crs-ui-2 .crs-error__code {
  margin: 0;
  color: var(--crs-action-interface-fill);
  opacity: 0.25;
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
}

html.crs-ui-2 .crs-error__title {
  margin: 12px 0 8px;
  background: none !important;
  color: var(--crs-text-strong) !important;
  font-size: 24px !important;
  font-weight: 700;
  line-height: 1.3 !important;
  -webkit-text-fill-color: var(--crs-text-strong) !important;
}

html.crs-ui-2 .crs-error__text {
  margin: 0 0 24px;
  color: var(--crs-text-muted);
  font-size: 15px;
}

html.crs-ui-2 .crs-error__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

html.crs-ui-2 .crs-error__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---- Documents (downloads.tpl, UI 2 start page) --------------------------- */
html.crs-ui-2 .crs-docs__title {
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--crs-border-muted);
  color: var(--crs-text-strong);
  font-size: 16px;
  font-weight: 700;
}

html.crs-ui-2 .crs-docs__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

html.crs-ui-2 .crs-docs__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
}

html.crs-ui-2 .crs-docs__row + .crs-docs__row {
  border-top: 1px solid var(--crs-border-muted);
}

html.crs-ui-2 .crs-docs__icon {
  flex: none;
  color: var(--crs-action-interface-fill);
}

html.crs-ui-2 .crs-docs__name {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  color: var(--crs-text-strong);
  font-size: 15px;
}

html.crs-ui-2 a.crs-docs__name {
  text-decoration: none;
}

html.crs-ui-2 a.crs-docs__name:hover,
html.crs-ui-2 a.crs-docs__name:focus-visible {
  color: var(--crs-text-link);
  text-decoration: underline;
}

html.crs-ui-2 .crs-docs__desc {
  margin-top: 2px;
  color: var(--crs-text-muted);
  font-size: 13px;
}

html.crs-ui-2 .crs-docs__meta {
  color: var(--crs-text-muted);
  font-size: 13px;
}

html.crs-ui-2 .crs-docs__dl {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
}

html.crs-ui-2 .crs-docs__dl .material-icons {
  font-size: 18px;
}

html.crs-ui-2 .crs-docs__go {
  color: var(--crs-text-muted);
}

html.crs-ui-2 .crs-docs__all {
  display: block;
  padding: 12px 20px;
  border-top: 1px solid var(--crs-border-muted);
  color: var(--crs-text-link);
  font-size: 14px;
}

/* ---- Support (support/listtickets + addticket -crservers) ---------------- */

html.crs-ui-2 .crs-routes {
  margin-bottom: 8px;
}

/* Page head outside a .crs-page flex column (new ticket): give it the same spacing. */
html.crs-ui-2 :not(.crs-page) > .crs-page__head {
  margin-bottom: 24px;
}

html.crs-ui-2 .crs-route {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  color: var(--crs-text-strong);
  text-decoration: none;
  transition: border-color var(--crs-motion-fast) var(--crs-motion-easing);
}

html.crs-ui-2 a.crs-route:hover,
html.crs-ui-2 .crs-route--on {
  border-color: var(--crs-action-interface-fill);
  color: var(--crs-text-strong);
}

html.crs-ui-2 .crs-route--on {
  box-shadow: 0 0 0 1px var(--crs-action-interface-fill);
}

html.crs-ui-2 .crs-route__title {
  font-size: 16px;
  font-weight: 500;
}

html.crs-ui-2 .crs-route p {
  margin: 0;
  color: var(--crs-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

html.crs-ui-2 .crs-route__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

/* Compact so call + WhatsApp sit side by side in a narrow card (less empty space next door). */
html.crs-ui-2 .crs-route__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  font-size: 13.5px;
  white-space: nowrap;
}

html.crs-ui-2 .crs-route__actions .material-icons {
  font-size: 16px;
}

html.crs-ui-2 .crs-toolbar .crs-dash__title {
  margin-right: auto;
}

html.crs-ui-2 .crs-ticket-form {
  max-width: 820px;
  margin-top: 24px;
  padding: 24px;
}

html.crs-ui-2 .crs-ticket-form > .crs-dash__title {
  margin-bottom: 16px;
}

/* One rhythm for every field: label on top, 6px to the control, 20px between fields.
   The related-service widget prints an inline label + select; stack it like the rest. */
html.crs-ui-2 .crs-ticket-form .form-group,
html.crs-ui-2 .crs-ticket-form .ticketwidget_newticket {
  margin-bottom: 20px;
}

html.crs-ui-2 .crs-ticket-form label,
html.crs-ui-2 .crs-ticket-form .ticketwidget_newticket label {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--crs-text-strong);
}

html.crs-ui-2 .crs-ticket-form .form-group select,
html.crs-ui-2 .crs-ticket-form .ticketwidget_newticket select,
html.crs-ui-2 .crs-ticket-form .ticketwidget_newticket .form-control {
  display: block;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

html.crs-ui-2 .crs-ticket-form textarea {
  min-height: 180px;
}

html.crs-ui-2 .crs-ticket-form .form-text {
  margin-top: 6px;
}

html.crs-ui-2 .crs-ticket-form .fileupload {
  margin: 0 0 20px !important;
}

html.crs-ui-2 .crs-ticket-form .form-check label {
  display: inline;
  font-weight: 400;
}

html.crs-ui-2 .crs-ticket-form .fileinput-button {
  border: 1px dashed var(--crs-border-control);
  border-radius: var(--crs-radius-control);
  background: var(--crs-surface-page);
}

/* ---- Cart: plan cards (orderpages onestep *_sidesummary_2019) --------------
 * Same look as crservers.com PlanCard (design canvas "Cart"): white card, soft shadow,
 * blue border + lift when selected, big price, check-mark features, outlined CTA that turns
 * into the brand gradient. Markup + JS (whole-card click → changeProduct) unchanged. The
 * Theme Custom CSS styles these cards with !important; the #orderpage id wins specificity.
 */

html.crs-ui-2 #orderpage .cart-product {
  border: 2px solid var(--crs-surface-card) !important;
  border-radius: var(--crs-card-radius) !important;
  background: var(--crs-surface-card) !important;
  box-shadow: var(--crs-shadow-card) !important;
  transition:
    border-color var(--crs-motion-slow) ease,
    transform var(--crs-motion-slow) ease,
    box-shadow var(--crs-motion-slow) ease !important;
}

html.crs-ui-2 #orderpage .cart-product:not(.outofstock):hover,
html.crs-ui-2 #orderpage .cart-product.selected:not(.outofstock) {
  border-color: var(--crs-action-support-fill) !important;
  background: var(--crs-surface-card) !important;
  box-shadow: var(--crs-shadow-card-hover) !important;
  transform: translateY(-4px);
}

html.crs-ui-2 #orderpage .cart-product.selected:not(.outofstock) * {
  color: var(--crs-text-strong) !important;
}

html.crs-ui-2 #orderpage .cart-product-name {
  color: var(--crs-text-strong) !important;
  font-size: 20px;
  font-weight: 700;
}

html.crs-ui-2 #orderpage .cart-product .card-subtitle .h1 {
  color: var(--crs-text-strong) !important;
  font-size: 35px;
  font-weight: 700;
  line-height: 1.2;
}

html.crs-ui-2 #orderpage .cart-product .card-subtitle .h6 {
  color: var(--crs-text-muted) !important;
  font-size: 15px;
}

/* Features: "20GB  Disco Duro" with a check mark, left-aligned like the site. */
html.crs-ui-2 #orderpage .cart-product-spec-row {
  position: relative;
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin: 0 !important;
  padding: 4px 20px 4px 44px;
  font-size: 15px;
}

html.crs-ui-2 #orderpage .cart-product-spec-row::before {
  content: 'check';
  /* Pinned beside the first line, so a wrapped value or label stays aligned under the text. */
  position: absolute;
  top: 6px;
  left: 20px;
  font-family: 'Material Icons';
  font-size: 18px;
  line-height: 1;
  color: var(--crs-text-muted);
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}

html.crs-ui-2 #orderpage .cart-product-spec-row > div {
  max-width: 100% !important;
  /* Value and label share the row and wrap inside the card instead of running past its edge
     (long eden-IA labels: "Número telefónico de Costa Rica", "Prueba en el navegador…"). */
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  overflow-wrap: anywhere;
  font-size: 15px !important;
  padding: 0 !important;
  text-align: left !important;
}

/* The label keeps at least ~8em; a long value (eden-IA trial) pushes it onto its own line
   instead of squeezing it into a one-letter column. */
html.crs-ui-2 #orderpage .cart-product-spec-row > div:not(.cart-product-spec-value) {
  flex: 1 1 8em;
}

html.crs-ui-2 #orderpage .cart-product-spec-value {
  order: 1;
  color: var(--crs-text-strong) !important;
  font-weight: 700 !important;
}

html.crs-ui-2 #orderpage .cart-product-spec-label {
  order: 2;
  color: #3d4552 !important;
  font-weight: 400 !important;
}

/* CTA: outline (idle) → gradient (selected / hover). */
html.crs-ui-2 #orderpage .cart-product-select-label {
  min-height: var(--crs-control-min-height-default);
  padding: 10px 24px !important;
  border: 2px solid var(--crs-action-support-fill) !important;
  border-radius: var(--crs-radius-control) !important;
  background: transparent !important;
  color: var(--crs-action-support-fill) !important;
  -webkit-text-fill-color: var(--crs-action-support-fill) !important;
  font-size: 18px;
  font-weight: 700;
}

html.crs-ui-2 #orderpage .cart-product:not(.outofstock):hover .cart-product-select-label,
html.crs-ui-2 #orderpage .cart-product.selected:not(.outofstock) .cart-product-select-label {
  border-color: transparent !important;
  background: var(--crs-gradient-footer) !important;
  box-shadow: var(--crs-shadow-card-selected);
  color: var(--crs-text-inverse) !important;
  -webkit-text-fill-color: var(--crs-text-inverse) !important;
}

html.crs-ui-2 #orderpage .cart-product:not(.outofstock):hover .cart-product-select-label *,
html.crs-ui-2 #orderpage .cart-product.selected:not(.outofstock) .cart-product-select-label * {
  color: var(--crs-text-inverse) !important;
  -webkit-text-fill-color: var(--crs-text-inverse) !important;
}

/* Lift needs room inside the horizontal scroller. */
html.crs-ui-2 #orderpage .cart-carousel-scroll {
  padding-top: 12px;
  padding-bottom: 24px;
}

/* Center the plan cards when they all fit (auto margins collapse to 0 once the strip scrolls,
   so no card is ever cut off), like the plan cards on crservers.com. */
html.crs-ui-2 #orderpage .cart-carousel-scroll > li:first-child {
  margin-left: auto !important;
}

html.crs-ui-2 #orderpage .cart-carousel-scroll > li:last-child {
  margin-right: auto !important;
}

/* Whole cards only: fixed 260–320px cards left a half card at the strip's edge at most widths
   (1366px cut the third VPS card mid-price). The strip is a size container and the cards share
   its width: 2, 3 or 4 per view, never under 260px (gap 32px). Phones keep one card. */
html.crs-ui-2 #orderpage .cart-carousel-scroll {
  container-type: inline-size;
}

@container (min-width: 552px) {
  html.crs-ui-2 #orderpage .cart-carousel-scroll > li {
    flex: 0 0 calc((100cqw - 32px) / 2) !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@container (min-width: 844px) {
  html.crs-ui-2 #orderpage .cart-carousel-scroll > li {
    flex-basis: calc((100cqw - 64px) / 3) !important;
  }
}

@container (min-width: 1136px) {
  html.crs-ui-2 #orderpage .cart-carousel-scroll > li {
    flex-basis: calc((100cqw - 96px) / 4) !important;
  }
}

/* Carousel arrows: quiet white circles with a chevron instead of filled blue discs. Visibility
   stays with services_arrows.js (shown only when the strip can scroll that way). */
html.crs-ui-2 .scroll-arrow,
html.crs-ui-2 .cart-carousel-wrapper .scroll-arrow.left,
html.crs-ui-2 .cart-carousel-wrapper .scroll-arrow.right {
  background: var(--crs-surface-card) !important;
  border: 1px solid var(--crs-border-muted) !important;
  color: var(--crs-text-strong) !important;
  /* custom.css paints the glyph with -webkit-text-fill-color: #fff for the blue discs. */
  -webkit-text-fill-color: currentColor !important;
  box-shadow: var(--crs-shadow-card) !important;
  opacity: 1 !important;
}

html.crs-ui-2 .scroll-arrow:hover,
html.crs-ui-2 .scroll-arrow:focus-visible,
html.crs-ui-2 .cart-carousel-wrapper .scroll-arrow.left:hover,
html.crs-ui-2 .cart-carousel-wrapper .scroll-arrow.right:hover {
  border-color: var(--crs-palette-blue-brand) !important;
  color: var(--crs-text-link) !important;
  -webkit-text-fill-color: currentColor !important;
  background: var(--crs-surface-card) !important;
}

html.crs-ui-2 .scroll-arrow .material-icons {
  font-size: 22px;
  line-height: 1;
}

/* ---- Cart: configuration + summary --------------------------------------- */

html.crs-ui-2 #orderpage #orderpage-summary {
  border: 1px solid var(--crs-border-muted) !important;
  border-radius: var(--crs-card-radius) !important;
  background: var(--crs-surface-card) !important;
  box-shadow: var(--crs-shadow-card) !important;
}

html.crs-ui-2 #orderpage #orderpage-summary > h3 {
  color: var(--crs-text-strong) !important;
  font-size: 18px;
  font-weight: 700;
}

html.crs-ui-2 #orderpage .orderpage-configuration h3,
html.crs-ui-2 #orderpage .orderpage-configuration h4 {
  color: var(--crs-text-strong);
  font-weight: 700;
}

/* ---- Cart: hero + billing-cycle switch (crservers-onestep_sidesummary_2019) ---- */

html.crs-ui-2 .crs-cart-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  padding: 40px 32px;
  border-radius: var(--crs-card-radius);
  background: var(--crs-gradient-hero);
  color: var(--crs-text-inverse);
}

html.crs-ui-2 .crs-cart-hero__text {
  flex: 1 1 420px;
  min-width: 0;
}

/* Product icon as a watermark on the right: large, faint, partly cropped by the hero's edge.
   Absolute, so the hero keeps its height; the text stays above it. */
html.crs-ui-2 .crs-cart-hero {
  position: relative;
}

/* Only the watermark is clipped (its own wrapper), so focus rings, shadows and popovers of hero
   content are not cut off. */
html.crs-ui-2 .crs-cart-hero__markclip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

html.crs-ui-2 .crs-cart-hero__text {
  position: relative;
  z-index: 1;
}

html.crs-ui-2 .crs-cart-hero__mark {
  position: absolute;
  top: 50%;
  right: -24px;
  display: flex;
  color: var(--crs-text-inverse);
  opacity: 0.14;
  transform: translateY(-50%) rotate(-8deg);
  pointer-events: none;
}

html.crs-ui-2 .crs-cart-hero__mark svg {
  width: 220px;
  height: 220px;
}

@media (max-width: 767.98px) {
  html.crs-ui-2 .crs-cart-hero__mark {
    right: -36px;
    opacity: 0.1;
  }

  html.crs-ui-2 .crs-cart-hero__mark svg {
    width: 160px;
    height: 160px;
  }
}

/* Not the gradient-text portal heading: white on the hero. */
html.crs-ui-2 .crs-cart-hero h1 {
  width: auto !important;
  margin: 0 0 8px;
  background: none !important;
  -webkit-text-fill-color: var(--crs-text-inverse) !important;
  color: var(--crs-text-inverse) !important;
  font-size: var(--crs-typography-product-hero-title-font-size-md) !important;
  line-height: var(--crs-typography-product-hero-title-line-height) !important;
}

html.crs-ui-2 .crs-cart-hero p {
  max-width: 720px;
  margin: 0;
  color: var(--crs-text-inverse);
  font-size: var(--crs-typography-product-hero-body-font-size-md);
  line-height: var(--crs-typography-product-hero-body-line-height);
  opacity: 0.92;
}

html.crs-ui-2 .crs-cart-hero select,
html.crs-ui-2 .crs-cart-hero .form-control {
  min-height: 40px;
  border-color: transparent;
  background-color: var(--crs-surface-card);
}

html.crs-ui-2 .crs-cart-hero label,
html.crs-ui-2 .crs-cart-hero span {
  color: var(--crs-text-inverse);
}

@media (max-width: 767.98px) {
  html.crs-ui-2 .crs-cart-hero {
    padding: 28px 20px;
  }

  html.crs-ui-2 .crs-cart-hero h1 {
    font-size: var(--crs-typography-product-hero-title-font-size-xs) !important;
  }

  html.crs-ui-2 .crs-cart-hero p {
    font-size: var(--crs-typography-product-hero-body-font-size-xs);
  }
}

/* Monthly | annual switch. Same pattern as the USD | ₡ switch: a pill with a solid interface-blue
   selected option. Weights 400/700 only: the theme loads Roboto 300/400/700, so 500 fell back to 400
   and 600 rendered as 700, which made the labels look thin next to a heavy badge. */
html.crs-ui-2 .crs-cycle-switch {
  display: flex;
  width: fit-content;
  margin-right: auto !important;
  margin-left: auto !important;
  gap: 2px;
  margin: 0 0 8px;
  padding: 3px;
  border: 1px solid var(--crs-border-muted);
  border-radius: var(--crs-radius-pill);
  background: var(--crs-surface-card);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

html.crs-ui-2 .crs-cycle-switch__opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--crs-radius-pill);
  background: transparent;
  color: #3d4552;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color var(--crs-motion-fast) var(--crs-motion-easing),
    color var(--crs-motion-fast) var(--crs-motion-easing);
}

html.crs-ui-2 .crs-cycle-switch__opt:hover:not([aria-pressed='true']) {
  background: var(--crs-status-neutral-surface);
}

html.crs-ui-2 .crs-cycle-switch__opt[aria-pressed='true'] {
  background: var(--crs-action-interface-fill);
  color: var(--crs-text-inverse);
}

/* Pricing controls bar above the plans (crservers-onestep_sidesummary_2019.tpl): billing cycle and
   the USD | ₡ view side by side in the same pill style, the "billed in USD" note as a caption below.
   The note uses display: contents so its parts join the bar; its inline display:none (signed-in,
   rate not loaded yet) still hides all of it. */
html.crs-ui-2 .crs-price-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 12px;
  margin: 0 auto 20px;
}

html.crs-ui-2 .crs-price-controls .crs-cycle-switch {
  margin: 0 !important;
}

html.crs-ui-2 .crs-price-controls .crs-crc-note {
  display: contents;
}

html.crs-ui-2 .crs-price-controls .crs-crc-note > .material-icons {
  display: none;
}

html.crs-ui-2 .crs-price-controls .crs-crc-note > span:not(.crs-price-view) {
  order: 2;
  flex-basis: 100%;
  text-align: center;
  font-size: 13px;
  color: var(--crs-text-muted);
}

html.crs-ui-2 .crs-price-controls .crs-price-view,
html.crs-ui-2 .crs-plans-head .crs-price-view {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--crs-border-muted);
  background: var(--crs-surface-card);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

html.crs-ui-2 .crs-price-controls .crs-price-view button,
html.crs-ui-2 .crs-plans-head .crs-price-view button {
  min-height: 36px;
  padding: 0 16px;
  color: #3d4552;
  font-size: 14px;
  font-weight: 400;
  transition: background-color var(--crs-motion-fast) var(--crs-motion-easing),
    color var(--crs-motion-fast) var(--crs-motion-easing);
}

html.crs-ui-2 .crs-price-controls .crs-price-view button:hover:not([aria-pressed='true']),
html.crs-ui-2 .crs-plans-head .crs-price-view button:hover:not([aria-pressed='true']) {
  background: var(--crs-status-neutral-surface);
}

html.crs-ui-2 .crs-price-controls .crs-price-view button[aria-pressed='true'],
html.crs-ui-2 .crs-plans-head .crs-price-view button[aria-pressed='true'] {
  background: var(--crs-action-interface-fill);
  color: var(--crs-text-inverse);
}

html.crs-ui-2 #orderpage .crs-annual-note {
  display: none;
  margin-top: 6px;
  color: var(--crs-status-success) !important;
  font-size: 14px;
  font-weight: 500;
}

html.crs-ui-2 #orderpage.crs-cycle-a .crs-annual-note {
  display: block;
}

/* Tonal, so it reads as a note on the option, not a second button. */
html.crs-ui-2 .crs-cycle-switch__save {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--crs-radius-pill);
  background: var(--crs-status-success-surface);
  color: var(--crs-status-success);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

/* Savings badge on each plan card: only the selected cycle's badge shows. Tonal, like the switch's. */
html.crs-ui-2 #orderpage .crs-save {
  display: none;
  margin-top: 8px;
  padding: 1px 10px;
  border-radius: var(--crs-radius-pill);
  background: var(--crs-status-success-surface);
  color: var(--crs-status-success) !important;
  -webkit-text-fill-color: var(--crs-status-success) !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
}

html.crs-ui-2 #orderpage.crs-cycle-q .crs-save--q,
html.crs-ui-2 #orderpage.crs-cycle-s .crs-save--s,
html.crs-ui-2 #orderpage.crs-cycle-a .crs-save--a {
  display: inline-block;
}

/* The selected card forces strong text on every child (rule above); keep the savings colours. */
html.crs-ui-2 #orderpage .cart-product.selected:not(.outofstock) .crs-save {
  color: var(--crs-status-success) !important;
  -webkit-text-fill-color: var(--crs-status-success) !important;
}

html.crs-ui-2 #orderpage .cart-product.selected:not(.outofstock) .crs-annual-note {
  color: var(--crs-status-success) !important;
}

/* ---- Cart: checkout sections (domain, payment, contact, notes, terms) ------
   Classic markup from ajax.crservers-onestep_sidesummary_2019.tpl, restyled only. Long selectors
   beat the theme's Custom CSS (nav-slider colour, gateway pill gradient), which uses !important. */

html.crs-ui-2 #orderpage #cartforms > .row > .col-12,
html.crs-ui-2 #orderpage #cartdetails > .row > .col-12 {
  margin-bottom: 20px !important;
  padding: 24px;
  border: 1px solid var(--crs-border-muted);
  border-radius: var(--crs-card-radius);
  background: var(--crs-surface-card);
}

html.crs-ui-2 #orderpage #cartforms > .row > .col-12 > .d-flex h3,
html.crs-ui-2 #orderpage #cartdetails > .row > .col-12 > .d-flex h3 {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  margin: 0;
  color: var(--crs-text-strong) !important;
  font-size: 18px;
  font-weight: 700;
}

/* Domain: Register / Transfer / Already have as a segmented control, like the cycle switch. */
html.crs-ui-2 #orderpage #domain-config .nav-tabs-wrapper {
  margin-bottom: 16px;
  border: 0;
}

html.crs-ui-2 #orderpage #domain-config .nav-tabs-wrapper .nav-slider {
  display: inline-flex !important;
  gap: 4px;
  padding: 4px;
  overflow: visible;
  border: 1px solid var(--crs-border-muted) !important;
  border-radius: var(--crs-radius-pill);
  background: var(--crs-surface-card);
}

html.crs-ui-2 #orderpage #domain-config .nav-tabs-wrapper .nav-slider .nav-item {
  margin: 0;
  padding: 0 !important;
  border: 0;
}

html.crs-ui-2 #orderpage #domain-config .nav-tabs-wrapper .nav-slider .nav-item .nav-link {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 18px;
  border: 0 !important;
  border-radius: var(--crs-radius-pill);
  background: transparent;
  color: #3d4552 !important;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  /* Custom CSS paints nav text as gradient (transparent fill). */
  -webkit-text-fill-color: currentColor !important;
}

html.crs-ui-2 #orderpage #domain-config .nav-tabs-wrapper .nav-slider .nav-item.active .nav-link {
  background: var(--crs-gradient-footer) !important;
  color: var(--crs-text-inverse) !important;
}

/* The segmented control replaces the theme's sliding underline (and its scroll rail). */
html.crs-ui-2 #orderpage #domain-config .nav-slider .slider,
html.crs-ui-2 #orderpage #domain-config .nav-slider .ps__rail-x,
html.crs-ui-2 #orderpage #domain-config .nav-slider .ps__rail-y {
  display: none !important;
}

html.crs-ui-2 #orderpage #domain-config .tab-pane > .col-12 {
  max-width: 100%;
  flex: 0 0 100%;
  padding: 0;
}

html.crs-ui-2 #orderpage #domain-config .form-control,
html.crs-ui-2 #orderpage #domain-config .btn {
  min-height: 48px;
  font-size: 16px;
}

html.crs-ui-2 #orderpage #domain-config select.form-control {
  flex: 0 0 auto;
  width: auto;
  min-width: 120px;
}

html.crs-ui-2 #orderpage #domain-config .btn-primary {
  padding: 0 24px;
}

/* Payment methods: tiles instead of small pills; the radio still covers each tile. */
html.crs-ui-2 #orderpage .cart-gateway-list {
  gap: 10px;
}

html.crs-ui-2 #orderpage .cart-gateway-list span.mr-3 {
  margin: 0 !important;
}

html.crs-ui-2 #orderpage .cart-gateway-list span.mr-3 span {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border: 1px solid var(--crs-border-muted) !important;
  border-radius: 12px;
  background: var(--crs-surface-card);
  color: var(--crs-text-strong);
  font-size: 15px;
  font-weight: 500;
}

html.crs-ui-2 #orderpage .cart-gateway-list span.mr-3 span:hover {
  border-color: var(--crs-action-interface-fill) !important;
  background: var(--crs-surface-card);
}

html.crs-ui-2 #orderpage .cart-gateway-list span.mr-3 input[type='radio']:checked + span {
  border-color: var(--crs-action-interface-fill) !important;
  background: #eaf6fb !important;
  box-shadow: inset 0 0 0 1px var(--crs-action-interface-fill);
  color: var(--crs-action-interface-fill) !important;
  font-weight: 600;
}

html.crs-ui-2 #orderpage .cart-gateway-list span.mr-3 input[type='radio']:focus-visible + span {
  outline: 2px solid var(--crs-action-interface-fill);
  outline-offset: 2px;
}

html.crs-ui-2 #orderpage #gatewayform:not(:empty) {
  margin: -8px 0 20px !important;
}

/* Contact: "Already a client" / "New client" as selectable cards. */
html.crs-ui-2 #orderpage .toggle-forms .card {
  margin-bottom: 12px;
  border: 1px solid var(--crs-border-muted) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

html.crs-ui-2 #orderpage .toggle-forms .card:has(input[name='cust_method']:checked) {
  border-color: var(--crs-action-interface-fill) !important;
  box-shadow: inset 0 0 0 1px var(--crs-action-interface-fill) !important;
}

html.crs-ui-2 #orderpage .toggle-forms .form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 0;
}

html.crs-ui-2 #orderpage .toggle-forms .form-check input[type='radio'] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--crs-action-interface-fill);
}

html.crs-ui-2 #orderpage .toggle-forms .form-check-label {
  color: var(--crs-text-strong);
  font-size: 16px;
  font-weight: 600;
}

/* Terms: bigger tap targets. */
html.crs-ui-2 #orderpage .term-checkbox {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
  accent-color: var(--crs-action-interface-fill);
}

@media (max-width: 575.98px) {
  /* Same 12px side gutter as the cart hero instead of running edge to edge. */
  html.crs-ui-2 #orderpage #cartforms > .row > .col-12,
  html.crs-ui-2 #orderpage #cartdetails > .row > .col-12 {
    flex: 0 0 calc(100% - 24px);
    max-width: calc(100% - 24px);
    margin-right: 12px;
    margin-left: 12px;
    padding: 18px 16px;
  }

  /* All three domain options visible: equal columns, labels may wrap to two lines. */
  html.crs-ui-2 #orderpage #domain-config .nav-tabs-wrapper .nav-slider {
    display: flex !important;
    width: 100%;
    border-radius: 14px;
  }

  html.crs-ui-2 #orderpage #domain-config .nav-tabs-wrapper .nav-slider .nav-item {
    flex: 1 1 0;
    min-width: 0;
  }

  html.crs-ui-2 #orderpage #domain-config .nav-tabs-wrapper .nav-slider .nav-item .nav-link {
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }

  html.crs-ui-2 #orderpage .cart-gateway-list span.mr-3 {
    flex: 1 1 calc(50% - 10px);
  }
}

/* ---- Cart: order received / pay now (overrides/cart5.tpl) -----------------
   cart5 carries its own inline styles (.cr-*); these re-point them at the tokens. */

html.crs-ui-2 .cr-confirmation {
  max-width: 640px;
}

html.crs-ui-2 .cr-header .cr-check-icon {
  width: 64px;
  height: 64px;
  background-color: var(--crs-status-success-surface, #e7f6ee);
  color: var(--crs-status-success);
  font-size: 32px;
}

html.crs-ui-2 .cr-header .cr-order-num {
  color: var(--crs-text-muted);
}

html.crs-ui-2 .cr-header .cr-preparing,
html.crs-ui-2 .cr-meta-row .cr-badge-pending {
  border: 0;
  border-radius: var(--crs-radius-pill);
  background-color: var(--crs-status-warning-surface, #fff4dc);
  color: var(--crs-status-warning, #8a5a00);
  font-weight: 600;
}

html.crs-ui-2 .cr-details-card {
  border: 1px solid var(--crs-border-muted);
  border-radius: var(--crs-card-radius);
  box-shadow: var(--crs-shadow-card);
}

html.crs-ui-2 .cr-details-card .cr-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--crs-border-muted);
  background: var(--crs-surface-card);
  color: var(--crs-text-strong);
  font-size: 16px;
  font-weight: 700;
}

html.crs-ui-2 .cr-line-items td {
  border-bottom-color: var(--crs-border-muted);
  color: var(--crs-text-strong);
  font-size: 15px;
}

html.crs-ui-2 .cr-summary-row td.cr-summary-label,
html.crs-ui-2 .cr-meta-row {
  color: var(--crs-text-muted);
}

html.crs-ui-2 .cr-total-row td {
  border-top: 1px solid var(--crs-border-muted);
  color: var(--crs-text-strong);
  font-size: 20px;
}

html.crs-ui-2 .cr-meta-row {
  border-top-color: var(--crs-border-muted);
}

html.crs-ui-2 .cr-pay-btn {
  min-height: 56px;
  border-radius: var(--crs-radius-control);
  background: var(--crs-action-commercial-filled-fill) !important;
}

html.crs-ui-2 .cr-pay-subtitle,
html.crs-ui-2 .cr-countdown-text {
  color: var(--crs-text-muted);
}

html.crs-ui-2 .cr-progress-bar {
  background-color: var(--crs-action-interface-fill);
}

/* ---- Domain cart (orderpages/domain_2019) --------------------------------
   Inherits the UI 2 base (cards, buttons, tabs); only the search box and results need help. */

html.crs-ui-2 .domain-search .domain-textarea {
  min-height: 56px;
  font-size: 18px;
}

html.crs-ui-2 .domain-search-results .result-group {
  overflow: hidden;
  border: 1px solid var(--crs-border-muted);
  border-radius: var(--crs-card-radius);
  background: var(--crs-surface-card);
}

html.crs-ui-2 .domain-search-results .result-row {
  padding-right: 20px !important;
  padding-left: 20px !important;
  border-bottom-color: var(--crs-border-muted) !important;
}

html.crs-ui-2 .domain-search-results .result-row:last-child {
  border-bottom: 0 !important;
}

html.crs-ui-2 .domain-search-results .result-row:hover {
  background: #f5f9fc;
}

html.crs-ui-2 .domain-search-results .result-hostname {
  color: var(--crs-text-strong);
  font-size: 16px;
}

/* No display here: domains.css toggles Register vs Remove with display on .active rows. */
html.crs-ui-2 .domain-search-results .result-button,
html.crs-ui-2 .domain-search-results .result-remove {
  min-height: 40px;
  line-height: 40px;
  padding: 0 18px !important;
  border-radius: var(--crs-radius-control) !important;
}

/* ---- Domain detail (services/domain_details.tpl + components/crs/domain-hero.tpl) ----------
   The hero replaces the classic name row; the theme's "Domain details + link" block is redundant
   under it, so only its tab list stays. */

html.crs-ui-2 .crs-dom-detail .cloud > div:first-child {
  display: none !important;
}

/* Left/right layouts put the tabs in .leftnavigation-box (styled with the service-detail tab bar via
   .crs-svc-detail); the top layout keeps them in #vm-menu. Hide the row when it carries no tabs. */
html.crs-ui-2 .crs-dom-detail .cloud:not(:has(#vm-menu li)) {
  display: none !important;
}

html.crs-ui-2 .crs-dom-detail .cloud {
  margin: 0 0 20px !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--crs-border-muted);
}

/* The hero carries "Change nameservers"; drop the copy by the Nameservers heading. */
html.crs-ui-2 .section-account.crs-dom-detail a.btn.crs-change-ns {
  display: none !important;
}

html.crs-ui-2 .crs-dom-detail #vm-menu.service-header-menu {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px 24px;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

html.crs-ui-2 .crs-dom-detail #vm-menu.service-header-menu > li.nav-item {
  margin: 0 !important;
  padding: 0 !important;
}

html.crs-ui-2 .crs-dom-detail #vm-menu.service-header-menu > li.nav-item > a.nav-link {
  display: block;
  padding: 12px 0 !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--crs-text-muted) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html.crs-ui-2 .crs-dom-detail #vm-menu.service-header-menu > li.nav-item > a.nav-link:hover,
html.crs-ui-2 .crs-dom-detail #vm-menu.service-header-menu > li.nav-item > a.nav-link.active {
  border-bottom-color: var(--crs-action-interface-fill) !important;
  color: var(--crs-action-interface-fill) !important;
}

html.crs-ui-2 .crs-dom-detail #vm-menu.service-header-menu > li.nav-item > a.nav-link.text-danger {
  color: var(--crs-status-error) !important;
}

html.crs-ui-2 .crs-dom-detail #vm-menu .widg-image {
  display: none !important;
}

/* Facts: a two-column card instead of a bordered list. */
html.crs-ui-2 .crs-dom-detail .service-details.bordered-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--crs-border-muted) !important;
  border-radius: var(--crs-card-radius) !important;
  background: var(--crs-surface-card);
  box-shadow: var(--crs-shadow-card);
}

html.crs-ui-2 .crs-dom-detail .service-details .service-details-line {
  width: auto !important;
  max-width: none !important;
  padding: 18px 22px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--crs-border-muted) !important;
}

html.crs-ui-2 .crs-dom-detail .service-details .service-details-line small {
  color: var(--crs-text-muted);
  font-size: 13px;
  font-weight: 500 !important;
}

html.crs-ui-2 .crs-dom-detail .service-details .service-details-line > span {
  color: var(--crs-text-strong);
  font-size: 15px !important;
}

html.crs-ui-2 .crs-dom-detail h4 {
  color: var(--crs-text-strong);
  font-size: 18px;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  html.crs-ui-2 .crs-dom-detail .service-details.bordered-section {
    grid-template-columns: 1fr;
  }
}

/* ---- Sign in (login.tpl UI 2 branch) + password reminder/reset ------------------------------
   Focus page: no sidebar; card on the left, brand/help panel on the right (stacked on phones). */

html.crs-ui-2 body:has(.crs-auth, .section-passreminder) .sidebar {
  display: none !important;
}

html.crs-ui-2 body:has(.crs-auth, .section-passreminder) .body-content {
  margin-left: 0 !important;
}

html.crs-ui-2 .section-signin.crs-auth {
  max-width: 1040px;
  margin: 32px auto 48px !important;
  padding: 0 16px !important;
}

html.crs-ui-2 .crs-auth__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--crs-border-muted);
  border-radius: var(--crs-card-radius);
  background: var(--crs-surface-card);
  box-shadow: var(--crs-shadow-card);
}

html.crs-ui-2 .crs-auth__card {
  max-width: none !important;
  margin: 0 !important;
  padding: 40px 44px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html.crs-ui-2 .crs-auth__title {
  width: auto !important;
  margin: 0 0 6px !important;
  background: none !important;
  color: var(--crs-text-strong) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 28px !important;
  font-weight: 700;
  line-height: 1.2;
  text-align: left !important;
}

html.crs-ui-2 .crs-auth__lead {
  margin: 0 0 20px;
  color: var(--crs-text-muted);
  font-size: 15px;
}

html.crs-ui-2 .crs-auth .form-label-group {
  position: relative;
}

html.crs-ui-2 .crs-auth .form-control {
  min-height: 50px;
  font-size: 16px;
}

html.crs-ui-2 .crs-auth input[name="password"] {
  padding-right: 48px;
}

html.crs-ui-2 .crs-auth__reveal {
  position: absolute;
  top: 50%;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--crs-text-muted);
  transform: translateY(-50%);
  cursor: pointer;
}

html.crs-ui-2 .crs-auth__reveal:hover,
html.crs-ui-2 .crs-auth__reveal:focus-visible {
  background: #f1f5f9;
  color: var(--crs-text-strong);
}

html.crs-ui-2 .crs-auth .crs-login-submit {
  min-height: 50px;
  margin-top: 20px;
  border-radius: var(--crs-radius-control) !important;
  font-size: 16px !important;
}

html.crs-ui-2 .crs-auth .crs-login-secondary {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
}

html.crs-ui-2 .crs-auth__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
  color: var(--crs-text-muted);
  font-size: 13px;
}

html.crs-ui-2 .crs-auth__divider::before,
html.crs-ui-2 .crs-auth__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--crs-border-muted);
}

/* Social sign-in: neutral outline buttons with full-colour logos (module ships white logos on brand fills). */
html.crs-ui-2 .crs-auth__sso {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

html.crs-ui-2 .crs-auth__sso > link {
  display: none;
}

html.crs-ui-2 .crs-auth__sso a.btn.btn-social {
  position: relative !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  /* No gap: the hidden module text is still an (empty) flex item; spacing comes from the logo margin. */
  gap: 0;
  width: auto !important;
  height: auto !important;
  min-height: 48px;
  margin: 0 !important;
  padding: 0 8px !important;
  overflow: hidden;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  text-overflow: clip !important;
  -webkit-text-fill-color: currentColor !important;
  transition: background-color var(--crs-motion-fast, 0.15s) ease, border-color var(--crs-motion-fast, 0.15s) ease;
}

/* Brand tints, not fills: visible without competing with the primary "Iniciar sesión" button.
   Google stays white with the colour G (its sign-in branding rules). */
html.crs-ui-2 .crs-auth__sso a.btn.btn-google {
  border-color: #c6cbd3 !important;
  background: #fff !important;
  color: #1f1f1f !important;
}

html.crs-ui-2 .crs-auth__sso a.btn.btn-google:hover {
  border-color: #8e959f !important;
  background: #fff !important;
}

html.crs-ui-2 .crs-auth__sso a.btn.btn-github {
  border-color: #d4d7dc !important;
  background: #f3f4f6 !important;
  color: #181717 !important;
}

html.crs-ui-2 .crs-auth__sso a.btn.btn-github:hover {
  border-color: #9ca3af !important;
  background: #f3f4f6 !important;
}

html.crs-ui-2 .crs-auth__sso a.btn.btn-facebook {
  border-color: #b9d3fb !important;
  background: #ebf3fe !important;
  color: #0b5fcc !important;
}

html.crs-ui-2 .crs-auth__sso a.btn.btn-facebook:hover {
  border-color: #1877f2 !important;
  background: #ebf3fe !important;
}

html.crs-ui-2 .crs-auth__sso a.btn.btn-social:focus-visible {
  outline: 2px solid var(--crs-action-interface-fill);
  outline-offset: 2px;
}

/* Label = provider name only (the module text "Continue with X" is hidden with font-size 0). */
html.crs-ui-2 .crs-auth__sso a.btn.btn-social::after {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}

html.crs-ui-2 .crs-auth__sso a.btn-google::after { content: 'Google'; }
html.crs-ui-2 .crs-auth__sso a.btn-github::after { content: 'GitHub'; }
html.crs-ui-2 .crs-auth__sso a.btn-facebook::after { content: 'Facebook'; }

html.crs-ui-2 .crs-auth__sso a.btn.btn-social .social-logo {
  position: static !important;
  inset: auto !important;
  display: inline-block !important;
  flex: 0 0 22px;
  width: 22px !important;
  height: 22px !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 22px 22px !important;
  transform: none !important;
}

html.crs-ui-2 .crs-auth__sso .social-google { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C36.9 39.2 44 34 44 24c0-1.3-.1-2.4-.4-3.5z'/%3E%3C/svg%3E") !important; }
html.crs-ui-2 .crs-auth__sso .social-github { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23181717' d='M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.2-.4-.6-1.6 0-3.2 0 0 1-.3 3.4 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8 0 3.2.9.8 1.3 1.9 1.3 3.2 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1.1.9 2.2v3.3c0 .3.1.7.8.6A12 12 0 0 0 12 .3'/%3E%3C/svg%3E") !important; }
html.crs-ui-2 .crs-auth__sso .social-facebook { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231877F2' d='M24 12a12 12 0 1 0-13.9 11.9v-8.4h-3V12h3V9.4c0-3 1.8-4.7 4.5-4.7 1.3 0 2.7.2 2.7.2v3h-1.5c-1.5 0-2 .9-2 1.9V12h3.4l-.5 3.5h-2.9v8.4A12 12 0 0 0 24 12z'/%3E%3C/svg%3E") !important; }

html.crs-ui-2 .crs-auth__signup {
  margin: 24px 0 0;
  color: var(--crs-text-muted);
  font-size: 15px;
  text-align: center;
}

html.crs-ui-2 .crs-auth__signup a {
  font-weight: 600;
}

/* Brand / help panel */
html.crs-ui-2 .crs-auth__brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 44px;
  background: var(--crs-gradient-footer);
  color: var(--crs-text-inverse);
}

html.crs-ui-2 .crs-auth__brand h2 {
  margin: 0;
  max-width: 20ch;
  background: none !important;
  color: var(--crs-text-inverse) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

html.crs-ui-2 .crs-auth__tagline {
  margin: -12px 0 0;
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.92;
}

html.crs-ui-2 .crs-auth__points {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html.crs-ui-2 .crs-auth__points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
}

html.crs-ui-2 .crs-auth__points .material-icons {
  flex: 0 0 auto;
  padding: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 20px;
}

html.crs-ui-2 .crs-auth__help {
  margin-top: auto;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 14px;
}

html.crs-ui-2 .crs-auth__help p {
  margin: 4px 0 12px;
  opacity: 0.9;
}

html.crs-ui-2 .crs-auth__help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

html.crs-ui-2 .crs-auth__help-actions a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--crs-radius-pill);
  background: var(--crs-surface-card);
  color: var(--crs-action-interface-fill) !important;
  font-weight: 600;
  text-decoration: none;
}

html.crs-ui-2 .crs-auth__help-actions .material-icons {
  font-size: 18px;
}

/* Password reminder / reset: the same card, centred. */
html.crs-ui-2 .section-passreminder {
  margin: 0 !important;
  padding: 0 16px !important;
}

html.crs-ui-2 .section-passreminder .form-signin {
  box-sizing: border-box;
  width: auto !important;
  max-width: 480px !important;
  margin: 48px auto !important;
  padding: 36px 40px !important;
  align-items: stretch !important;
  border: 1px solid var(--crs-border-muted);
  border-radius: var(--crs-card-radius);
  background: var(--crs-surface-card);
  box-shadow: var(--crs-shadow-card);
}

html.crs-ui-2 .section-passreminder .form-signin h1 {
  width: auto !important;
  margin: 0 0 8px !important;
  background: none !important;
  color: var(--crs-text-strong) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  text-align: left !important;
}

html.crs-ui-2 .section-passreminder .form-signin > small {
  color: var(--crs-text-muted);
  font-size: 15px;
}

html.crs-ui-2 .section-passreminder .form-control {
  min-height: 50px;
  font-size: 16px;
}

@media (max-width: 899.98px) {
  html.crs-ui-2 .crs-auth__grid {
    grid-template-columns: 1fr;
  }

  html.crs-ui-2 .crs-auth__card,
  html.crs-ui-2 .crs-auth__brand {
    padding: 28px 22px !important;
  }

  html.crs-ui-2 .section-signin.crs-auth {
    margin-top: 16px !important;
  }
}

@media (max-width: 419.98px) {
  html.crs-ui-2 .crs-auth__sso {
    grid-template-columns: 1fr;
  }

  html.crs-ui-2 .section-passreminder .form-signin {
    margin: 16px auto !important;
    padding: 24px 20px !important;
  }
}

/* ---- Motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html.crs-ui-2 *,
  html.crs-ui-2 *::before,
  html.crs-ui-2 *::after {
    transition-duration: var(--crs-motion-reduced-motion-fallback-duration) !important;
    animation-duration: var(--crs-motion-reduced-motion-fallback-duration) !important;
  }
}

/* ---- Top services menu (Dedicated Servers, VPS, ...) ---------------------- */

/* Two-word labels wrapped onto two lines. Keep them on one line, and hide the menu below 1200px
   while the sidebar is open (the sidebar lists the same links): the Spanish labels plus
   "Iniciar sesión / Registrarse" overflow the header at the theme's 1085px cutoff. */
html.crs-ui-2 .navbar-services-menu .nav-link {
  white-space: nowrap;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Signed in, the bar lists every service category the client has (long ES names): keep it on one line
   and clip what does not fit; the sidebar lists the same links in full. */
html.crs-ui-2 .navbar-services-menu {
  flex-wrap: nowrap !important;
  min-width: 0;
  overflow: hidden;
}

/* Signed in, the links are the client's own service lists: mark the one the page belongs to. */
html.crs-ui-2 .navbar-services-menu .nav-link.active {
  color: #fff !important;
  font-weight: 500;
  box-shadow: inset 0 -2px 0 #fff;
}

@media (max-width: 1199.98px) {
  html.crs-ui-2 body:not(.sidenav-toggled) .navbar-services-menu {
    display: none !important;
  }
}

/* Signed in, the right side also holds cart, theme toggle, notifications and "Welcome <name>"
   (~80px+ more than a guest, plus the name), so the menu needs more room. */
@media (max-width: 1399.98px) {
  html.crs-ui-2 body:not(.sidenav-toggled):has(.navbar-menu-user) .navbar-services-menu {
    display: none !important;
  }
}

/* ---- Catalog (/products/, components/crs/pages/products.tpl) ------------- */

html.crs-ui-2 .crs-catalog__head,
html.crs-ui-2 .crs-home__head {
  margin-bottom: 28px;
}

html.crs-ui-2 .crs-catalog__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

html.crs-ui-2 .crs-catalog__head .crs-portal-heading,
html.crs-ui-2 .crs-home__head .crs-portal-heading {
  margin-bottom: 6px;
}

html.crs-ui-2 .crs-catalog__lead,
html.crs-ui-2 .crs-home__lead,
html.crs-ui-2 .crs-catalog__group-lead {
  margin: 0;
  color: var(--crs-text-muted);
}

html.crs-ui-2 .crs-catalog__group {
  margin-bottom: 32px;
}

html.crs-ui-2 .crs-catalog__group-head {
  margin-bottom: 14px;
}

html.crs-ui-2 .crs-catalog__group-lead {
  font-size: 14px;
  margin-top: 2px;
}

html.crs-ui-2 .crs-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--crs-text-strong);
  text-decoration: none;
  transition: border-color var(--crs-motion-fast) var(--crs-motion-easing),
    box-shadow var(--crs-motion-fast) var(--crs-motion-easing),
    transform var(--crs-motion-fast) var(--crs-motion-easing);
}

html.crs-ui-2 .crs-cat:hover,
html.crs-ui-2 .crs-cat:focus-visible {
  color: var(--crs-text-strong);
  text-decoration: none;
  border-color: var(--crs-palette-blue-brand);
  box-shadow: var(--crs-shadow-card-hover);
  transform: translateY(-2px);
}

html.crs-ui-2 .crs-cat--featured {
  border-color: var(--crs-palette-blue-brand);
  box-shadow: 0 0 0 1px var(--crs-palette-blue-brand) inset;
}

html.crs-ui-2 .crs-cat__flag {
  position: absolute;
  top: -10px;
  right: 16px;
  padding: 2px 10px;
  border-radius: var(--crs-radius-pill);
  background: var(--crs-gradient-commercial);
  color: var(--crs-text-inverse);
  font-size: 12px;
  font-weight: 700;
}

html.crs-ui-2 .crs-cat__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

html.crs-ui-2 .crs-cat__icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--crs-palette-blue-brand-tint06, color-mix(in srgb, var(--crs-palette-blue-brand) 8%, transparent));
}

html.crs-ui-2 .crs-cat__icon svg,
html.crs-ui-2 .crs-cat__icon img {
  width: 28px;
  height: 28px;
}

html.crs-ui-2 .crs-cat__name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

html.crs-ui-2 .crs-cat__desc {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.5;
  color: var(--crs-text-muted);
}

html.crs-ui-2 .crs-cat__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--crs-border-subtle);
}

html.crs-ui-2 .crs-cat__price {
  font-size: 14px;
  color: var(--crs-text-muted);
}

html.crs-ui-2 .crs-cat__price b {
  font-size: 18px;
  color: var(--crs-palette-blue-dark);
}

html.crs-ui-2 .crs-cat__cta {
  pointer-events: none; /* the card is the link */
  white-space: nowrap;
}

/* ---- Help strip (catalog, portal home) ----------------------------------- */

html.crs-ui-2 .crs-help-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 8px 0 24px;
  background: var(--crs-status-info-surface);
  border-color: transparent;
}

html.crs-ui-2 .crs-help-strip__icon {
  font-size: 32px;
  color: var(--crs-palette-blue-dark);
}

html.crs-ui-2 .crs-help-strip__text {
  flex: 1 1 320px;
}

html.crs-ui-2 .crs-help-strip__title {
  font-weight: 700;
}

html.crs-ui-2 .crs-help-strip__text p {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--crs-text-muted);
}

html.crs-ui-2 .crs-help-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

html.crs-ui-2 .crs-help-strip__actions .btn {
  background: var(--crs-surface-card);
}

/* ---- Portal home (cmd=root, components/crs/pages/root.tpl) --------------- */

html.crs-ui-2 .crs-home__head {
  text-align: center;
}

html.crs-ui-2 .crs-home__head .crs-portal-heading {
  margin-left: auto;
  margin-right: auto;
}

html.crs-ui-2 .crs-home__tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--crs-text-strong);
  text-decoration: none;
  transition: border-color var(--crs-motion-fast) var(--crs-motion-easing),
    box-shadow var(--crs-motion-fast) var(--crs-motion-easing),
    transform var(--crs-motion-fast) var(--crs-motion-easing);
}

html.crs-ui-2 .crs-home__tile:hover,
html.crs-ui-2 .crs-home__tile:focus-visible {
  color: var(--crs-text-strong);
  text-decoration: none;
  border-color: var(--crs-palette-blue-brand);
  box-shadow: var(--crs-shadow-card-hover);
  transform: translateY(-2px);
}

html.crs-ui-2 .crs-home__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--crs-gradient-commercial);
  color: var(--crs-text-inverse);
  font-size: 26px;
}

html.crs-ui-2 .crs-home__tile-title {
  font-size: 18px;
  font-weight: 700;
}

html.crs-ui-2 .crs-home__tile-desc {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.5;
  color: var(--crs-text-muted);
}

html.crs-ui-2 .crs-home__tile-go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--crs-text-link);
}

html.crs-ui-2 .crs-home__tile-go .material-icons {
  font-size: 18px;
  transition: transform var(--crs-motion-fast) var(--crs-motion-easing);
}

html.crs-ui-2 .crs-home__tile:hover .crs-home__tile-go .material-icons {
  transform: translateX(3px);
}

/* Phones: one card per row, so the stacked icon left each card tall and mostly empty. Icon on the
   left, title / description / link beside it (same reading order as the sidebar rows). */
@media (max-width: 575.98px) {
  html.crs-ui-2 .crs-home__tile {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 4px;
    align-items: start;
    padding: 16px;
  }

  html.crs-ui-2 .crs-home__icon {
    grid-row: 1 / span 3;
  }

  html.crs-ui-2 .crs-home__tile-title {
    font-size: 17px;
    line-height: 1.3;
  }

  html.crs-ui-2 .crs-home__tile-go {
    margin-top: 4px;
  }
}

html.crs-ui-2 .crs-home__new {
  margin: 16px 0 0;
  text-align: center;
  color: var(--crs-text-muted);
}

html.crs-ui-2 .crs-home__new a {
  font-weight: 700;
}

html.crs-ui-2 .crs-home__news {
  margin: 40px 0 24px;
}

html.crs-ui-2 .crs-home__news-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

html.crs-ui-2 .crs-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

html.crs-ui-2 .crs-news-list__item {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  border-top: 1px solid var(--crs-border-subtle);
}

html.crs-ui-2 .crs-news-list__item:first-child {
  border-top: 0;
}

html.crs-ui-2 .crs-news-list__date {
  flex: 0 0 96px;
  font-size: 13px;
  color: var(--crs-text-muted);
  padding-top: 2px;
}

html.crs-ui-2 .crs-news-list__body {
  min-width: 0;
}

html.crs-ui-2 .crs-news-list__tags .badge {
  margin-right: 4px;
}

html.crs-ui-2 .crs-news-list__title {
  display: block;
  font-weight: 700;
  color: var(--crs-text-strong);
}

html.crs-ui-2 .crs-news-list__title:hover {
  color: var(--crs-text-link);
}

html.crs-ui-2 .crs-news-list__excerpt {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--crs-text-muted);
}

@media (max-width: 575.98px) {
  html.crs-ui-2 .crs-news-list__item {
    flex-direction: column;
    gap: 4px;
  }

  html.crs-ui-2 .crs-news-list__date {
    flex-basis: auto;
  }
}

/* ---- Presencia Digital cart without a domain (ajax.onestep_pd_sidesummary_2019.tpl) ---------- */

html.crs-ui-2 .crs-pd-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 560px;
  padding: 28px;
}

html.crs-ui-2 .crs-pd-start__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--crs-gradient-commercial);
  color: var(--crs-text-inverse);
}

html.crs-ui-2 .crs-pd-start__title {
  margin: 0;
}

html.crs-ui-2 .crs-pd-start p {
  margin: 0;
  color: var(--crs-text-muted);
}

/* ---- Colones reference (components/cart/cart.currencies.tpl, crs-crc-ref.js) ------------------ */

html.crs-ui-2 .crs-crc-note {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--crs-text-muted);
}

html.crs-ui-2 .crs-crc-note .material-icons {
  font-size: 18px;
  color: var(--crs-palette-blue-interface);
}

/* ---- Module service pages (Proxmox VPS and other cloud modules: templates/common/cloudhosting) ---
 * The module draws its own page; UI 2 adds the service hero (cloudhosting/tpl/header.tpl) and
 * restyles the module's tab bar and content box to match the rest of the client area. */

html.crs-ui-2 .cloud .cloud-top {
  height: auto !important;
  margin: 20px 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--crs-border-muted) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.crs-ui-2 .cloud .cloud-header h1:empty {
  display: none;
}

/* A lone current tab is hidden by the theme (custom.css); then the bar has nothing to show. */
html.crs-ui-2 .cloud .cloud-top:has(ul.level-1 > li.current-menu-item:only-child) {
  display: none !important;
}

/* Active VPS pages (found on PROD 2026-11-02; UAT only saw pending VPSs, which have no tab bar):
   the theme makes .cloud a wrapping flex column, so the column took the width of its widest item,
   the tab list (min-width: max-content), and the service card, breadcrumb and tab bar stretched
   past the window (1536px in a 1505px column). One line, items no wider than the box (the tab bar
   wraps, see below); the module's hostname title repeats the service card, so it goes. */
html.crs-ui-2 .cloud {
  flex-wrap: nowrap !important;
}

html.crs-ui-2 .cloud > * {
  max-width: 100%;
  min-width: 0;
}

/* VPS tab bar (cloudhosting header.tpl). The theme Custom CSS ("FLECHAS" block) fixes
   .scroll-menu-wrapper at 36px with sideways scrolling and only lets content out while a dropdown
   is hovered, so UI 2's 44px tabs lost their active underline and the Usage menu was cut off.
   No scrolling here: the tabs wrap onto more lines on narrow screens and the dropdown can open. */
html.crs-ui-2 .cloud > .cloud-top {
  align-self: stretch !important;
  width: 100% !important;
  border-bottom: 0 !important;
}

/* Every UI 2 tab row sits in .scroll-menu-wrapper: the VPS bar above, and the service and domain
   detail tabs (ul.leftnavigation-box), where the 36px box cut 4px off the 44px tabs at desktop width
   (active underline hidden) and hid the names once the row wrapped. One override for all of them;
   the tab lists wrap instead of scrolling (rules here and in the service-detail tab bar). The cart
   carousel uses .cart-carousel-wrapper, not this class. */
html.crs-ui-2 .scroll-menu-wrapper {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

html.crs-ui-2 .scroll-menu-wrapper > ul.leftnavigation-box {
  flex-wrap: wrap !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html.crs-ui-2 .cloud .cloud-top .cloud-nav {
  max-width: 100% !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  white-space: normal !important;
}

html.crs-ui-2 .scroll-menu-wrapper .cloud-nav ul.level-1 {
  width: 100% !important;
  min-width: 0 !important;
}

html.crs-ui-2 .scroll-menu-wrapper .cloud-nav ul.level-1 > li.menu-item {
  margin: 0 !important;
  background: transparent !important;
}

html.crs-ui-2 .scroll-menu-wrapper .cloud-nav ul.level-1 > li.menu-item > a {
  padding-bottom: 0 !important;
  border-radius: 0 !important;
  letter-spacing: normal !important;
}

/* Custom CSS sets 16px on the span, so tabs with a span looked bigger than Usage (no span). */
html.crs-ui-2 .scroll-menu-wrapper .cloud-nav ul.level-1 > li.menu-item > a span {
  padding: 0 !important;
  border: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: normal !important;
}

html.crs-ui-2 .scroll-menu-wrapper .cloud-nav ul.level-1 > li.dropdown:has(> .dropdown-menu > li.active) > a {
  border-bottom-color: var(--crs-action-interface-fill) !important;
  color: var(--crs-action-interface-fill) !important;
}

html.crs-ui-2 .cloud .cloud-top .cloud-nav .level-1 > li.dropdown > .dropdown-menu {
  min-width: 180px !important;
  padding: 6px 0 !important;
  border: 1px solid var(--crs-border-muted) !important;
  border-radius: 8px !important;
  background: var(--crs-surface-card) !important;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12) !important;
}

html.crs-ui-2 .cloud .cloud-top .cloud-nav .level-1 > li.dropdown > .dropdown-menu > li > a {
  padding: 8px 14px !important;
  color: #3d4552 !important;
  font-size: 14px !important;
}

html.crs-ui-2 .cloud .cloud-top .cloud-nav .level-1 > li.dropdown > .dropdown-menu > li > a:hover,
html.crs-ui-2 .cloud .cloud-top .cloud-nav .level-1 > li.dropdown > .dropdown-menu > li.active > a {
  color: var(--crs-action-interface-fill) !important;
  background: var(--crs-status-info-surface) !important;
}

html.crs-ui-2 .cloud:has(> .crs-hero) .cloud-header h1 {
  display: none;
}

html.crs-ui-2 .cloud #content-cloud {
  padding: 24px;
  border: 1px solid var(--crs-border-muted);
  border-radius: var(--crs-card-radius);
  background: var(--crs-surface-card);
}

/* ---- Cart: plan section (UAT round 3 redesign, 2026-11-01) -----------------------------------
 * Plans on a pale brand-blue band so the white cards stand out; heading row with the USD | ₡
 * toggle; cycle switch centered above the cards; two-line price (per month, other currency below,
 * longer cycles anchored on the struck-through monthly price); icon features; trust row below.
 * Markup: crservers-onestep_sidesummary_2019.tpl + crs-plan-price.tpl. ".cart-product.cart-product"
 * outranks the selected card's blanket "* { color }" rule above.
 */
/* The order area itself was painted white: around the band's rounded corners and behind the
   white form cards. Transparent, so band and cards sit on the page background like the dashboard. */
html.crs-ui-2 body #orderpage {
  background: transparent !important;
}

html.crs-ui-2 #orderpage .cart-products {
  padding: 24px 20px 20px;
  border-radius: var(--crs-radius-card);
  background: var(--crs-status-info-surface);
}

@media (max-width: 575.98px) {
  html.crs-ui-2 #orderpage .cart-products {
    padding: 16px 8px 16px;
  }
}

html.crs-ui-2 .crs-plans-head {
  flex-wrap: wrap;
  gap: 8px 12px;
}

html.crs-ui-2 .crs-plans-head__currency {
  margin-left: auto;
}

html.crs-ui-2 .crs-plans-head .crs-crc-note {
  max-width: none;
  margin: 0 !important;
}

html.crs-ui-2 .crs-plans-head .crs-crc-note > .material-icons,
html.crs-ui-2 .crs-plans-head .crs-crc-note > span:not(.crs-price-view) {
  display: none;
}

html.crs-ui-2 .crs-plans-head .crs-price-view button {
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

/* Price: per-month amount first, the other currency on its own line (crs-crc-ref.js puts its
   tag next to the USD amount; the grid reorders both so the leading view is always on top). */
html.crs-ui-2 #orderpage .crs-has-plan-price .card-subtitle {
  display: none !important;
}

html.crs-ui-2 #orderpage .cart-product.cart-product .crs-plan-price {
  margin-top: 12px;
}

html.crs-ui-2 #orderpage .crs-plan-price__cycle {
  display: none;
}

html.crs-ui-2 #orderpage.crs-cycle-m .crs-plan-price--m,
html.crs-ui-2 #orderpage.crs-cycle-q .crs-plan-price--q,
html.crs-ui-2 #orderpage.crs-cycle-s .crs-plan-price--s,
html.crs-ui-2 #orderpage.crs-cycle-a .crs-plan-price--a,
html.crs-ui-2 #orderpage.crs-cycle-q .cart-product:not(.crs-pp-has-q) .crs-plan-price--m,
html.crs-ui-2 #orderpage.crs-cycle-s .cart-product:not(.crs-pp-has-s) .crs-plan-price--m,
html.crs-ui-2 #orderpage.crs-cycle-a .cart-product:not(.crs-pp-has-a) .crs-plan-price--m {
  display: block;
}

html.crs-ui-2 #orderpage .cart-product.cart-product .crs-plan-price__was {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  color: var(--crs-text-muted) !important;
}

html.crs-view-crc #orderpage .cart-product.cart-product .crs-plan-price__was {
  display: none;
}

html.crs-ui-2 #orderpage .cart-product.cart-product .crs-plan-price__main {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: baseline;
  column-gap: 4px;
  color: var(--crs-text-link) !important;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
}

html.crs-ui-2 #orderpage .cart-product.cart-product .crs-plan-price__amt {
  display: contents;
}

html.crs-ui-2 #orderpage .cart-product.cart-product .crs-plan-price__main .crs-usd,
html.crs-ui-2 #orderpage .cart-product.cart-product .crs-plan-price__main .crs-crc {
  margin: 0 !important;
  white-space: nowrap;
}

html.crs-ui-2 #orderpage .cart-product.cart-product .crs-plan-price__per {
  order: 1;
  color: var(--crs-text-muted) !important;
  font-size: 15px;
  font-weight: 400;
}

html.crs-ui-2 #orderpage .cart-product.cart-product .crs-plan-price__main .crs-usd {
  color: var(--crs-text-link) !important;
  -webkit-text-fill-color: var(--crs-text-link) !important;
}

/* Secondary amount: full row below, small and gray. */
html.crs-ui-2 #orderpage .cart-product.cart-product .crs-plan-price__main .crs-crc,
html.crs-view-crc #orderpage .cart-product.cart-product .crs-plan-price__main .crs-usd {
  order: 2;
  grid-column: 1 / -1;
  margin-top: 2px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--crs-text-muted) !important;
  -webkit-text-fill-color: var(--crs-text-muted) !important;
}

html.crs-view-crc #orderpage .cart-product.cart-product .crs-plan-price__main .crs-crc {
  order: 0;
  grid-column: auto;
  margin-top: 0 !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  color: var(--crs-text-link) !important;
  -webkit-text-fill-color: var(--crs-text-link) !important;
}

html.crs-ui-2 #orderpage .cart-product.cart-product .crs-plan-price__billed,
html.crs-ui-2 #orderpage .cart-product.cart-product .crs-plan-price__billed * {
  margin-top: 4px;
  color: var(--crs-status-success) !important;
  font-size: 13px;
  font-weight: 500;
}

/* Features: brand-blue icon per row (like the site), divider under the price. */
html.crs-ui-2 #orderpage .cart-product-specs {
  margin: 0 20px;
  border-top: 1px solid var(--crs-border-muted);
  padding-top: 4px;
}

/* Only rows that carry the icon (eden-IA's own template keeps its check marks). */
html.crs-ui-2 #orderpage .cart-product-spec-row:has(> .cart-product-spec-icon) {
  padding-left: 30px;
  padding-right: 0;
}

html.crs-ui-2 #orderpage .cart-product-spec-row:has(> .cart-product-spec-icon)::before {
  content: none;
}

/* Label follows the value on the same line when it fits (the 8em minimum above wrapped short
   labels like "Ancho de Banda" under their value). */
html.crs-ui-2 #orderpage .cart-product-spec-row > div:not(.cart-product-spec-value) {
  flex: 0 1 auto;
}

html.crs-ui-2 #orderpage .cart-product-spec-row,
html.crs-ui-2 #orderpage .cart-product-spec-row > div {
  font-size: 14px !important;
}

html.crs-ui-2 #orderpage .cart-product.cart-product .cart-product-spec-icon {
  position: absolute;
  top: 5px;
  left: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--crs-action-interface-fill) !important;
}

/* Recommended plan (order page config: ribbon + ribbon_text): a pill on the card's top edge,
   like the site's "Entry pack" badge, instead of the corner ribbon. */
html.crs-ui-2 #orderpage .cart-product .ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  right: auto;
  width: auto;
  height: auto;
  overflow: visible;
  transform: translateX(-50%);
  z-index: 2;
}

html.crs-ui-2 #orderpage .cart-product .ribbon::before,
html.crs-ui-2 #orderpage .cart-product .ribbon::after {
  display: none;
}

html.crs-ui-2 #orderpage .cart-product.cart-product .ribbon span {
  position: static;
  display: inline-block;
  width: auto;
  padding: 3px 12px;
  transform: none;
  border-radius: var(--crs-radius-pill);
  background: var(--crs-action-interface-fill) !important;
  box-shadow: none;
  color: var(--crs-text-inverse) !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-transform: none;
  white-space: nowrap;
}

/* Trust row under the cards. */
html.crs-ui-2 .crs-plan-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  color: #3d4552;
  font-size: 13px;
}

html.crs-ui-2 .crs-plan-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

html.crs-ui-2 .crs-plan-trust .material-icons {
  font-size: 18px;
  color: var(--crs-action-interface-fill);
}

/* ---- Domain order page (orderpages/domain_2019, UAT 2026-11-01) --------------------------------
 * Search hero with the USD | ₡ toggle; results as one list (typed name as a card, extensions,
 * up to 3 suggestions — crs-domains-ui2.js); compact trust row instead of the spotlight cards;
 * sticky mini-cart restyled. Classic is unchanged.
 */
html.crs-ui-2 .crs-domains .domain-search {
  position: relative;
}

html.crs-ui-2 .crs-domain-hero__currency {
  display: flex;
  justify-content: flex-end;
}

html.crs-ui-2 .crs-domain-hero__currency .crs-crc-note {
  max-width: none;
  margin: 0 !important;
}

html.crs-ui-2 .crs-domain-hero__currency .crs-crc-note > .material-icons,
html.crs-ui-2 .crs-domain-hero__currency .crs-crc-note > span:not(.crs-price-view) {
  display: none;
}

html.crs-ui-2 .crs-domain-hero__currency .crs-price-view {
  border-color: rgba(255, 255, 255, 0.6);
  background: transparent;
}

html.crs-ui-2 .crs-domain-hero__currency .crs-price-view button {
  min-height: 32px;
  padding: 0 12px;
  color: var(--crs-text-inverse);
  font-size: 13px;
}

html.crs-ui-2 .crs-domain-hero__currency .crs-price-view button[aria-pressed='true'] {
  background: var(--crs-surface-card);
  color: var(--crs-palette-blue-dark);
}

/* No empty band between the hero and the next section before a search. */
html.crs-ui-2 .crs-domains .domain-search-results:empty {
  display: none;
}

html.crs-ui-2 .crs-domains__trust {
  margin: 24px 0 32px;
}

/* Results: one white list; the typed name as a card on top. */
html.crs-ui-2 .crs-domains .result-group {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--crs-border-muted);
  border-radius: var(--crs-radius-card);
  background: var(--crs-surface-card);
}

html.crs-ui-2 .crs-domains .result-row {
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--crs-border-muted) !important;
  background: var(--crs-surface-card) !important;
  align-items: center !important;
}

html.crs-ui-2 .crs-domains .result-row.result-suggestion {
  background: var(--crs-surface-card) !important;
}

html.crs-ui-2 .crs-domains .result-row.crs-exact {
  padding: 22px 20px !important;
  border-bottom: 1px solid var(--crs-border-muted) !important;
  background: var(--crs-status-info-surface) !important;
  box-shadow: inset 4px 0 0 var(--crs-action-interface-fill);
}

html.crs-ui-2 .crs-domains .result-row.crs-exact .result-hostname {
  font-size: 22px;
  font-weight: 700;
}

html.crs-ui-2 .crs-domains .result-hostname {
  flex-wrap: wrap;
  row-gap: 4px;
  font-size: 16px;
}

html.crs-ui-2 .crs-domains .result-hostname > .crs-status-ok,
html.crs-ui-2 .crs-domains .result-hostname > .badge,
html.crs-ui-2 .crs-domains .result-hostname > .result-whois-link {
  margin-left: 8px !important;
}

html.crs-ui-2 .crs-domains .result-query {
  margin-top: 0;
}

html.crs-ui-2 .crs-domains .domain-search-results {
  padding-top: 0 !important;
}

html.crs-ui-2 .crs-domains .crs-status-ok {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--crs-radius-pill);
  background: var(--crs-status-success-surface);
  color: var(--crs-status-success);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

html.crs-ui-2 .crs-domains .result-row .badge.text-success {
  color: var(--crs-text-muted) !important;
  font-weight: 400;
}

/* Price: USD, then ≈ ₡ and the period on a second line. */
html.crs-ui-2 .crs-domains .result-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0 16px !important;
  line-height: 1.25;
}

html.crs-ui-2 .crs-domains .result-price .price-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--crs-text-link) !important;
  font-size: 17px;
  font-weight: 700;
}

html.crs-ui-2 .crs-domains .result-price .crs-crc,
html.crs-view-crc .crs-domains .result-price .crs-usd {
  order: 2;
  margin: 2px 0 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--crs-text-muted) !important;
  -webkit-text-fill-color: var(--crs-text-muted) !important;
}

html.crs-view-crc .crs-domains .result-price .crs-crc {
  order: 0;
  margin: 0 !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  color: var(--crs-text-link) !important;
  -webkit-text-fill-color: var(--crs-text-link) !important;
}

html.crs-ui-2 .crs-domains .result-price .price-period {
  font-size: 12px;
}

/* Buttons: text visible on phones too; taken names get a quiet transfer link. */
html.crs-ui-2 .crs-domains .result-button .d-none.d-md-inline-block {
  display: inline-flex !important;
  align-items: center;
}

html.crs-ui-2 .crs-domains .result-button > .d-inline-block.d-md-none {
  display: none !important;
}

html.crs-ui-2 .crs-domains .result-button {
  min-width: 112px;
  white-space: nowrap;
}

html.crs-ui-2 .crs-domains .result-button.crs-transfer-link {
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--crs-text-link) !important;
  -webkit-text-fill-color: var(--crs-text-link) !important;
  font-weight: 500;
  text-decoration: underline;
}

html.crs-ui-2 .crs-domains .result-button.crs-transfer-link .material-icons {
  display: none;
}

/* Taken + transferable: the price shown is the transfer price; keep it beside the quiet link. */
html.crs-ui-2 .crs-domains .crs-taken .result-price .price-amount {
  font-size: 15px;
}

html.crs-ui-2 .crs-domains .result-row.crs-sugg-hidden {
  display: none !important;
}

html.crs-ui-2 .crs-domains .crs-sugg-more {
  width: 100%;
  padding: 12px;
  border: 0;
  background: var(--crs-surface-card);
  color: var(--crs-text-link);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

html.crs-ui-2 .crs-domains .crs-sugg-more:hover {
  background: var(--crs-status-neutral-surface);
}

@media (max-width: 575.98px) {
  html.crs-ui-2 .crs-domains .result-row {
    flex-wrap: wrap !important;
    gap: 8px;
    padding: 12px 14px !important;
  }

  html.crs-ui-2 .crs-domains .result-data {
    flex: 1 1 100%;
  }

  html.crs-ui-2 .crs-domains .result-actions {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  html.crs-ui-2 .crs-domains .result-price {
    align-items: flex-start;
    margin: 0 !important;
  }

  html.crs-ui-2 .crs-domains .result-price .price-amount {
    align-items: flex-start;
  }

  html.crs-ui-2 .crs-domains .result-row.crs-exact .result-hostname {
    font-size: 19px;
  }
}

/* Sticky mini-cart: white bar, brand total, filled Continue. */
html.crs-ui-2 .crs-domains ~ .domain-search-summary > div,
html.crs-ui-2 #domain-search-summary > div {
  border: 1px solid var(--crs-border-muted) !important;
  border-radius: var(--crs-radius-card) var(--crs-radius-card) 0 0;
  box-shadow: 0 -6px 18px rgba(16, 24, 40, 0.08) !important;
}

html.crs-ui-2 #domain-search-summary .domain-search-summary-content-total {
  color: var(--crs-text-link) !important;
  font-weight: 700;
}

/* Checkout / summary: the currency switch on its own row under the heading. */
html.crs-ui-2 .cart-domain-summary__currency .crs-crc-note {
  justify-content: flex-end;
  max-width: none;
}

/* Step 2 Continue while the registrant form is incomplete: clickable, points to the gap. */
html.crs-ui-2 .crs-continue-incomplete {
  opacity: 1 !important;
  cursor: pointer !important;
}

/* Domain results while checking: the "1U" server loader (crs-loader-1u-*.svg — a logo server bar
   on its side, status and activity lights blinking, like the page loader). One beside "Results for"
   (crs-domains-ui2.js adds .crs-checking-note); one per row in place of the button while that name
   is checked, three blink timings so neighbouring rows are not in lockstep. */
html.crs-ui-2 .crs-domains .crs-checking-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  color: var(--crs-text-muted);
  font-size: 13px;
  font-weight: 400;
  vertical-align: middle;
}

html.crs-ui-2 .crs-domains .crs-checking-note::before {
  content: '';
  width: 48px;
  height: 12px;
  background: url(crs-loader-1u-a.bl001.svg) no-repeat center / contain;
}

html.crs-ui-2 .crs-domains .result-button.domain-loading {
  position: relative;
  width: 112px;
  height: 40px;
  border: 0 !important;
  background: url(crs-loader-1u-a.bl001.svg) no-repeat center / 56px 14px !important;
  box-shadow: none !important;
  opacity: 1 !important;
  pointer-events: none;
}

html.crs-ui-2 .crs-domains .result-row:nth-child(3n + 2) .result-button.domain-loading {
  background-image: url(crs-loader-1u-b.bl001.svg) !important;
}

html.crs-ui-2 .crs-domains .result-row:nth-child(3n) .result-button.domain-loading {
  background-image: url(crs-loader-1u-c.bl001.svg) !important;
}

html.crs-ui-2 .crs-domains .result-button.domain-loading .cart_preloader {
  display: none !important;
}

/* In the cart: green confirmation tag + quiet remove (red only on hover), not a solid red button. */
html.crs-ui-2 .crs-domains .result-incart {
  display: none;
  align-items: center;
  gap: 12px;
}

html.crs-ui-2 .crs-domains .result-row.active .result-incart {
  display: inline-flex;
}

html.crs-ui-2 .crs-domains .crs-incart {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--crs-radius-pill);
  background: var(--crs-status-success-surface);
  color: var(--crs-status-success);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

html.crs-ui-2 .crs-domains .crs-incart .material-icons {
  font-size: 16px;
}

html.crs-ui-2 .crs-domains .result-remove {
  display: inline-flex !important;
  align-items: center;
  height: auto !important;
  min-height: 32px;
  padding: 4px 10px !important;
  line-height: 1.3 !important;
  border: 1px solid var(--crs-border-muted) !important;
  border-radius: var(--crs-radius-control) !important;
  background: var(--crs-surface-card) !important;
  box-shadow: none !important;
  color: #3d4552 !important;
  -webkit-text-fill-color: #3d4552 !important;
  font-size: 13px;
  font-weight: 500;
}

html.crs-ui-2 .crs-domains .result-remove span {
  display: inline !important;
  margin-left: 4px !important;
}

html.crs-ui-2 .crs-domains .result-remove .material-icons {
  font-size: 16px;
}

/* Hover/focus/active: light red tint, dark red text. The stock .btn-danger hover paints a dark red
   background, so these selectors are kept above it (body + .btn-danger). */
html.crs-ui-2 body .crs-domains .result-row .result-remove.btn-danger:hover,
html.crs-ui-2 body .crs-domains .result-row .result-remove.btn-danger:focus,
html.crs-ui-2 body .crs-domains .result-row .result-remove.btn-danger:focus-visible,
html.crs-ui-2 body .crs-domains .result-row .result-remove.btn-danger:active {
  border-color: var(--crs-status-error, #b42318) !important;
  background: var(--crs-status-error-surface, #fdecea) !important;
  box-shadow: none !important;
  color: var(--crs-status-error, #b42318) !important;
  -webkit-text-fill-color: var(--crs-status-error, #b42318) !important;
}

html.crs-ui-2 body .crs-domains .result-row .result-remove.btn-danger:hover *,
html.crs-ui-2 body .crs-domains .result-row .result-remove.btn-danger:focus * {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* One remove style across the domain flow ("Eliminar" everywhere: results, step 2, checkout):
   quiet gray outline with an × icon, red tint on hover. Step 2 cards use the button; checkout
   rows the text link. */
html.crs-ui-2 body #orderpage .crs-remove.btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--crs-border-muted) !important;
  border-radius: var(--crs-radius-control) !important;
  background: var(--crs-surface-card) !important;
  box-shadow: none !important;
  color: #3d4552 !important;
  -webkit-text-fill-color: #3d4552 !important;
  font-size: 13px;
  font-weight: 500;
}

html.crs-ui-2 body #orderpage .crs-remove.btn:hover,
html.crs-ui-2 body #orderpage .crs-remove.btn:focus,
html.crs-ui-2 body #orderpage .crs-remove.btn:active {
  border-color: var(--crs-status-error) !important;
  background: var(--crs-status-error-surface) !important;
  color: var(--crs-status-error) !important;
  -webkit-text-fill-color: var(--crs-status-error) !important;
}

html.crs-ui-2 body #orderpage .crs-remove__icon {
  display: inline-block !important; /* d-none in the markup keeps classic as it was */
  font-size: 16px;
  color: inherit !important;
}

html.crs-ui-2 body #orderpage .crs-remove-link {
  color: #3d4552 !important;
  font-weight: 500;
  text-decoration: underline;
}

html.crs-ui-2 body #orderpage .crs-remove-link:hover,
html.crs-ui-2 body #orderpage .crs-remove-link:focus {
  color: var(--crs-status-error) !important;
}

/* Step 2 hosting upsell for a .com: Presencia Digital first (badge, title, one line), hosting
   plans as the quieter second button. */
html.crs-ui-2 .crs-pd-offer {
  align-items: center;
  border: 2px solid var(--crs-action-interface-fill) !important;
  background: var(--crs-status-info-surface) !important;
}

html.crs-ui-2 .crs-pd-offer__badge {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 10px;
  border-radius: var(--crs-radius-pill);
  background: var(--crs-action-interface-fill);
  color: var(--crs-text-inverse);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

html.crs-ui-2 .crs-pd-offer__title {
  margin: 0 0 4px;
  color: var(--crs-text-strong);
  font-size: 18px;
  font-weight: 700;
}

html.crs-ui-2 .crs-pd-offer__text {
  margin: 0;
  color: #3d4552;
}

html.crs-ui-2 .crs-pd-offer__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 220px;
}

html.crs-ui-2 .crs-pd-offer__plans {
  background: var(--crs-surface-card) !important;
}

@media (max-width: 575.98px) {
  html.crs-ui-2 .crs-pd-offer__actions {
    width: 100%;
    min-width: 0;
  }
}

/* Domains search banner (domain_2019/cart0.tpl): the domains icon as a watermark, smaller and fainter
   than the order-page hero's so it doesn't compete with the search box. Banner content stays above it. */
html.crs-ui-2 .crs-domain-hero {
  position: relative;
}

html.crs-ui-2 .crs-domain-hero > .p-2 {
  position: relative;
  z-index: 1;
}

/* The domain page CSS makes the banner's children position:relative; keep the clip covering it. */
html.crs-ui-2 #orderpage .crs-domain-hero > .crs-domain-hero__markclip {
  position: absolute !important;
  inset: 0;
  z-index: 0;
}

html.crs-ui-2 .crs-domain-hero__mark {
  right: -12px;
  opacity: 0.09;
}

html.crs-ui-2 .crs-domain-hero__mark svg {
  width: 160px;
  height: 160px;
}

@media (max-width: 767.98px) {
  /* The search box spans the width on phones; sit in the bottom-right corner, behind the tabs. */
  html.crs-ui-2 .crs-domain-hero__mark {
    top: auto;
    bottom: -28px;
    right: -20px;
    opacity: 0.1;
    transform: rotate(-8deg);
  }

  html.crs-ui-2 .crs-domain-hero__mark svg {
    width: 120px;
    height: 120px;
  }
}

/* Order hero (crs-cart-hero, e.g. Presencia Digital): the USD | ₡ switch first, the "billed in USD"
   note on one line below it (UAT 2026-11-01). */
html.crs-ui-2 .crs-cart-hero .crs-crc-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 6px;
  align-items: start;
  justify-items: start;
}

html.crs-ui-2 .crs-cart-hero .crs-crc-note > .crs-price-view {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
}

html.crs-ui-2 .crs-cart-hero .crs-crc-note > .material-icons {
  grid-row: 2;
  font-size: 16px;
  line-height: 1.4;
}

html.crs-ui-2 .crs-cart-hero .crs-crc-note > span:not(.crs-price-view) {
  grid-row: 2;
}

/* Top bar counters (notifications bell, cart): small solid counter, not the pale status chip above
   (UAT 2026-11-01: the chip was oversized next to the bell and blended with it). Bright brand cyan with
   deep navy digits (AA): distinct from the white icon without the alarm of red, which the portal keeps
   for errors and overdue invoices. The ring separates it from the blue bar. */
html.crs-ui-2 .navbar.fixed-top .badge.badge-pill {
  min-width: 18px;
  height: 18px;
  padding: 0 5px !important;
  font-size: 11px;
  font-weight: 700 !important;
  line-height: 18px;
  text-align: center;
  background: var(--crs-palette-blue-bright, #00b4e4) !important;
  color: var(--crs-palette-blue-deep, #003e57) !important;
  box-shadow: 0 0 0 2px var(--crs-palette-blue-dark, #006390);
}

/* ---- VPS overview (Proxmox module, vpsdo=vmdetails) ----------------------------------------------
   The stock theme's custom CSS sets #content-cloud { background: none !important } and a 70px top
   margin, so the card showed the page grey under a white action menu with a large gap below the tabs. */
html.crs-ui-2 .cloud #content-cloud {
  margin-top: 16px;
  background: var(--crs-surface-card) !important;
}

html.crs-ui-2 .cloud #vm-menu li,
html.crs-ui-2 .cloud #lockable-vm-menu #vm-menu li {
  background: transparent;
}

/* Root password: read-only, but it is the customer's value to read and copy, not a disabled field. */
html.crs-ui-2 .cloud .pw-input-group > .form-control[readonly] {
  background: var(--crs-surface-card);
}

/* The module's hostname Edit link carries an inline color:red; it is an edit action, not a danger. */
html.crs-ui-2 .cloud #server-name-btn {
  margin-left: 6px;
  color: var(--crs-action-interface-fill) !important;
}

/* Tags (templates/common/cloudhosting/tpl/details.tpl, UI 2 markup). */
html.crs-ui-2 .crs-vm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 8px;
  padding: 16px 25px 0; /* lines up with the labels inside the detail boxes (1px border + 24px) */
  border-top: 1px solid var(--crs-border-muted);
}

html.crs-ui-2 .crs-vm-tags__label {
  flex: 0 0 120px;
  padding-top: 6px;
  color: var(--crs-text-strong);
  font-weight: 500;
}

html.crs-ui-2 .crs-vm-tags__body {
  flex: 1 1 320px;
  min-width: 0;
}

html.crs-ui-2 .crs-vm-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

html.crs-ui-2 .crs-vm-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 32px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--crs-border-control);
  border-radius: var(--crs-radius-pill);
  background: var(--crs-surface-card);
  color: var(--crs-text-strong);
  font-size: 14px;
}

html.crs-ui-2 .crs-vm-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--crs-radius-round);
  color: var(--crs-text-muted);
  text-decoration: none;
}

html.crs-ui-2 .crs-vm-tag__remove:hover,
html.crs-ui-2 .crs-vm-tag__remove:focus-visible {
  background: var(--crs-status-neutral-surface);
  color: var(--crs-text-strong);
}

html.crs-ui-2 .crs-vm-tag__remove .material-icons {
  font-size: 16px;
}

html.crs-ui-2 .crs-vm-tags__empty {
  margin: 0 0 12px;
  padding-top: 6px;
  color: var(--crs-text-muted);
}

html.crs-ui-2 .crs-vm-tags__form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 420px;
  margin: 0;
}

html.crs-ui-2 .crs-vm-tags__form .form-control {
  flex: 1 1 200px;
  width: auto;
}

html.crs-ui-2 .crs-vm-tags__hint {
  margin: 8px 0 0;
  color: var(--crs-text-muted);
  font-size: 13px;
}