.ps-service-types .tabs,
.ps-service-types .tabs > li,
.ps-service-types .servers-list,
.ps-service-types .servers-list > li,
.ps-service-types .onclick {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ps-service-types .tab-pane {
  display: none;
}
.ps-service-types .tab-pane.show {
  display: block;
}
.ps-service-types .onclick {
  display: none;
}
.ps-service-types .server-wrapper.active .onclick {
  display: block !important;
}
.ps-service-types .server-wrapper .btn-expand {
  cursor: pointer;
}
.ps-service-types .price-wrap {
  margin-top: .25rem;
}
.ps-service-types .price-label {
  font-size: .9rem;
  color: var(--bs-secondary, #6c757d);
}
.ps-service-types .price-value {
  margin-right: .25rem;
}
.ps-service-types .price-note {
  font-size: .85rem;
  color: var(--bs-secondary, #6c757d);
}
.ps-service-types .onclick li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.ps-service-types .onclick .val {
  min-width: 40%;
  text-align: left;
  direction: ltr;
  unicode-bidi: plaintext;
}

/* === PST Lite r3 overrides === */

/* Remove separators between list items */
.ps-service-types .onclick li {
  border-bottom: none !important;
}

/* Align feature list start with headings/price */
.ps-service-types .onclick {
  padding-inline-start: 0 !important;
  margin-inline-start: 0 !important;
}

/* Ensure item content lines up and no extra left/right padding */
.ps-service-types .onclick li {
  padding-inline-start: 0 !important;
  margin-inline-start: 0 !important;
}

/* Tidy toggle icon */
.ps-service-types .server-wrapper .btn-expand svg {
  width: 1.1rem;
  height: 1.1rem;
  vertical-align: middle;
  transition: transform .28s ease;
}
.ps-service-types .server-wrapper.active .btn-expand svg {
  transform: rotate(180deg);
}

/* === PST Lite r4 responsive & spacing fixes === */

.ps-service-types .tab-pane {
  margin-top: 1rem;
}
.ps-service-types .servers-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: .75rem;
}
.ps-service-types .servers-list > li {
  display: block;
}
.ps-service-types .server-wrapper {
  position: relative;
  height: auto;
}
@media (min-width: 768px) {
  .ps-service-types .servers-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .ps-service-types .servers-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* === PST Lite r5: overlap fix, arrow alignment, tighter spacing === */

.ps-service-types .servers-list {
  row-gap: 1.25rem;
  column-gap: 1rem;
}
.ps-service-types .servers-list > li {
  margin: 0;
  padding: 0;
  overflow: visible !important;
}
.ps-service-types .server-wrapper {
  overflow: visible !important;
}
.ps-service-types .server-wrapper .onclick {
  position: static !important;
}
.ps-service-types .tab-pane {
  margin-top: 1.25rem;
}

/* Arrow to far left on mobile/RTL */
.ps-service-types .server-wrapper .top {
  display: flex;
  align-items: center;
}
.ps-service-types .server-wrapper .btn-expand {
  margin-left: auto;
  margin-inline-start: auto;
}
@media (max-width: 576px) {
  .ps-service-types .server-wrapper .btn-expand svg {
    width: 1.2rem;
    height: 1.2rem;
  }
}

/* === PST Lite r6: strong overrides with !important and fallbacks === */

body .ps-service-types .tab-pane {
  margin-top: 1.25rem !important;
}
body .ps-service-types .servers-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  row-gap: 1.25rem !important;
  column-gap: 1rem !important;
  margin-top: .75rem !important;
}
@media (min-width: 768px) {
  body .ps-service-types .servers-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1200px) {
  body .ps-service-types .servers-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Fallback spacing even if grid is overridden somewhere */
body .ps-service-types .servers-list > li {
  margin-bottom: 1rem !important;
}
body .ps-service-types .server-wrapper {
  overflow: visible !important;
  height: auto !important;
  position: relative !important;
}
body .ps-service-types .server-wrapper .onclick {
  position: static !important;
}

/* Arrow alignment to far left in RTL */
body .ps-service-types .server-wrapper .top {
  justify-content: flex-start !important;
  align-items: center !important;
}
body .ps-service-types .server-wrapper .top > .flex-grow-1 {
  flex: 1 1 auto !important;
}
body .ps-service-types .server-wrapper .btn-expand {
  margin-inline-start: auto !important;
}

/* 1) Center cards and spacing (use flex on servers-list) */
body .ps-service-types .servers-list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 1.75rem 1.25rem !important;
  margin-top: .75rem !important;
  padding: 0 !important;
  list-style: none !important;
}
body .ps-service-types .servers-list > li {
  flex: 1 1 520px !important;
  max-width: 560px !important;
}

/* 2) Keep card compact & centered */
body .ps-service-types .server-wrapper {
  width: 100% !important;
  margin-inline: auto !important;
  height: auto !important;
  overflow: visible !important;
  position: relative !important;
}

/* 3) Center title + subtitle (control panel line) */
body .ps-service-types .server-wrapper .top > .flex-grow-1 {
  text-align: center !important;
}
body .ps-service-types small.subtitle {
  display: block !important;
  text-align: center !important;
  margin-top: .15rem !important;
}

/* 4) Price line tidy — bold value + single bullet between currency & period */
body .ps-service-types .price-wrap {
  margin-top: .5rem !important;
}
body .ps-service-types .price-value {
  font-weight: 900 !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
  margin-inline-end: .35rem !important;
}
body .ps-service-types .price-note {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: .35rem !important;
  opacity: .9;
}
body .ps-service-types .price-note::before,
body .ps-service-types .price-note::after,
body .ps-service-types .price-note .sep::before {
  content: none !important;
}

/* 5) Feature list paddings equal */
body .ps-service-types .onclick > li {
  padding-inline: 18px !important;
}
body .ps-service-types .onclick > li .label {
  padding-inline-start: 8px !important;
}
body .ps-service-types .onclick > li .val {
  padding-inline-end: 8px !important;
  font-weight: 600 !important;
}

@media (max-width: 575.98px) {
  body .ps-service-types .price-value {
    font-size: 1.2rem !important;
  }
}

/* smaller, tighter cards */
body .ps-service-types .servers-list > li {
  flex: 1 1 480px !important; /* slightly narrower basis to allow 3-up sooner */
  max-width: 520px !important;
}
body .ps-service-types .server-wrapper {
  padding: 18px 20px !important;
  border-radius: 16px !important;
}
body .ps-service-types .server-wrapper .top {
  margin-bottom: .35rem !important;
}
body .ps-service-types .server-wrapper .thumb {
  margin-bottom: .25rem !important;
}
body .ps-service-types .server-wrapper .thumb img {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* price spacing a bit tighter */
body .ps-service-types .price-wrap {
  margin-top: .35rem !important;
}

/* card width like VPS (more compact) */
body .ps-service-types .servers-list > li {
  flex: 1 1 440px !important;
  max-width: 500px !important;
}

/* tighter paddings & radius */
body .ps-service-types .server-wrapper {
  padding: 14px 16px !important;
  border-radius: 16px !important;
}

/* fix flag/icon: perfect circle, no crop, consistent size */
body .ps-service-types .server-wrapper .thumb {
  display: flex;
  align-items: center;
  justify-content: center;
}
body .ps-service-types .server-wrapper .thumb img {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important; /* don't crop flags */
  border-radius: 50% !important;
}

/* price spacing slightly tighter */
body .ps-service-types .price-wrap {
  margin-top: .25rem !important;
}

/* header spacing tighter */
body .ps-service-types .server-wrapper .top {
  margin-bottom: .25rem !important;
}