\nhtml {\n\tscroll-behavior: smooth;\n}\n\n#vps-create {\n\tscroll-margin-top: 120px;\n}\n
/* NoUiSlider */
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

#vps-create {
  scroll-margin-top: 120px;
}

#vpsPlansTabs {
  scroll-margin-top: 120px;
}

.noUi-target {
  position: relative;
}

.noUi-base,
.noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.noUi-connects {
  overflow: hidden;
  z-index: 0;
}

.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-origin: 0 0;
  transform-style: flat;
}

.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
  left: 0;
  right: auto;
}

.noUi-vertical .noUi-origin {
  top: -100%;
  width: 0;
}

.noUi-horizontal .noUi-origin {
  height: 0;
}

.noUi-handle {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}

.noUi-touch-area {
  height: 100%;
  width: 100%;
}

.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
}

.noUi-state-drag * {
  cursor: inherit !important;
}

.noUi-horizontal {
  height: 18px;
}

.noUi-horizontal .noUi-handle {
  width: 34px;
  height: 28px;
  right: -17px;
  top: -6px;
}

.noUi-vertical {
  width: 18px;
}

.noUi-vertical .noUi-handle {
  width: 28px;
  height: 34px;
  right: -6px;
  bottom: -17px;
}

.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
  left: -17px;
  right: auto;
}

.noUi-target {
  background: #fafafa;
  border-radius: 4px;
  border: 1px solid #d3d3d3;
  box-shadow: inset 0 1px 1px #f0f0f0, 0 3px 6px -5px #bbb;
}

.noUi-connects {
  border-radius: 3px;
}

.noUi-connect {
  background: #3fb8af;
}

.noUi-draggable {
  cursor: ew-resize;
}

.noUi-vertical .noUi-draggable {
  cursor: ns-resize;
}

.noUi-handle {
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  background: #fff;
  cursor: default;
  box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ebebeb, 0 3px 6px -3px #bbb;
}

.noUi-active {
  box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ddd, 0 3px 6px -3px #bbb;
}

.noUi-handle:after,
.noUi-handle:before {
  content: "";
  display: block;
  position: absolute;
  height: 14px;
  width: 1px;
  background: #e8e7e6;
  left: 14px;
  top: 6px;
}

.noUi-handle:after {
  left: 17px;
}

.noUi-vertical .noUi-handle:after,
.noUi-vertical .noUi-handle:before {
  width: 14px;
  height: 1px;
  left: 6px;
  top: 14px;
}

.noUi-vertical .noUi-handle:after {
  top: 17px;
}

[disabled] .noUi-connect {
  background: #b8b8b8;
}

[disabled] .noUi-handle,
[disabled].noUi-handle,
[disabled].noUi-target {
  cursor: not-allowed;
}

.noUi-pips,
.noUi-pips * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.noUi-pips {
  position: absolute;
  color: #999;
}

.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
}

.noUi-value-sub {
  color: #ccc;
  font-size: 10px;
}

.noUi-marker {
  position: absolute;
  background: #ccc;
}

.noUi-marker-sub {
  background: #aaa;
}

.noUi-marker-large {
  background: #aaa;
}

.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%;
}

.noUi-value-horizontal {
  -webkit-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
}

.noUi-rtl .noUi-value-horizontal {
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}

.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
}

.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px;
}

.noUi-marker-horizontal.noUi-marker-large {
  height: 15px;
}

.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}

.noUi-value-vertical {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding-left: 25px;
}

.noUi-rtl .noUi-value-vertical {
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
}

.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px;
}

.noUi-marker-vertical.noUi-marker-sub {
  width: 10px;
}

.noUi-marker-vertical.noUi-marker-large {
  width: 15px;
}

.noUi-tooltip {
  display: block;
  position: absolute;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  background: #fff;
  color: #000;
  padding: 5px;
  text-align: center;
  white-space: nowrap;
}

.noUi-horizontal .noUi-tooltip {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 120%;
}

.noUi-vertical .noUi-tooltip {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  right: 120%;
}

.noUi-horizontal .noUi-origin > .noUi-tooltip {
  -webkit-transform: translate(50%, 0);
  transform: translate(50%, 0);
  left: auto;
  bottom: 10px;
}

.noUi-vertical .noUi-origin > .noUi-tooltip {
  -webkit-transform: translate(0, -18px);
  transform: translate(0, -18px);
  top: auto;
  right: 28px;
}

/* NoUiSlider */

.marquee-wrapper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  gap: 10px;
  padding: 20px 0;
  margin: -20px -16px;
}

.marquee-container {
  overflow: hidden;
  position: relative;
  padding: 20px;
  margin: -20px;

  &:hover {
    /* pointer-events: none; */
    .marquee-inner {
      /* animation-play-state: paused; */
    }
  }
}

.marquee-track {
  display: flex;
  gap: 16px;
}

.marquee-inner {
  display: flex;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-play-state: running;
  will-change: transform;
  gap: 16px;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes scroll-right {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

.glass {
  --light-angle: -45deg;
  --light-intensity: 35%;
  --refraction: 80;
  /* фейковый, для справки */
  --depth: 20;
  /* имитация с тенями */
  --dispersion: 20;
  /* имитация градиентом */
  --frost: 4px;

  position: relative;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(var(--frost)) saturate(1.8);
  -webkit-backdrop-filter: blur(var(--frost)) saturate(1.8);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px calc(var(--depth) * 1px) rgba(0, 0, 0, 0.15),
    inset 0 0 20px rgba(255, 255, 255, 0.1);

  overflow: hidden;
}

/* Световой градиент */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--light-angle),
    rgba(255, 255, 255, 0.25) var(--light-intensity),
    rgba(255, 255, 255, 0) 100%
  );
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Дисперсия (цветовой край) */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ff8a00, #e52e71);
  mix-blend-mode: color-dodge;
  opacity: calc(var(--dispersion) / 100);
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .marquee-track,
  .marquee-inner {
    gap: 24px;
  }
}

/* About page */
.about-hero__head {
  display: flex;
  padding-top: 96px;
  flex-direction: column;
  text-align: center;
  gap: 16px;
  margin-bottom: 32px;
}

.about-hero-banner {
  padding: 24px;
  background: linear-gradient(180deg, #353535 0%, #1e1e1e 100%);
  box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 25px;
  position: relative;
  z-index: 1;

  &::before {
    background: linear-gradient(
      76deg,
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0)
    );

    position: absolute;
    inset: 0;
    content: "";
    z-index: -1;

    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    padding: 3px;
  }
}

.about-hero-banner__icon {
  margin-bottom: 16px;
  aspect-ratio: 1;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  background: rgba(0, 0, 0, 0.001);
  box-shadow: 0px 4px 14.3px rgba(0, 0, 0, 0.15);
  border-radius: 18px;
  position: relative;

  &::before {
    position: absolute;
    border-radius: inherit;
    z-index: -1;
    inset: 0;
    content: "";
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-image: linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.15) 0%,
      transparent 100%
    );
  }

  &::after {
    position: absolute;
    inset: 0;
    content: "";
    z-index: -1;
    background: linear-gradient(
      45deg,
      #fff 0%,
      transparent 50%,
      #fff 75%,
      transparent 100%
    );
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    padding: 1px;
  }
}

.about-hero-banner__title {
  display: inline-block;
  font-weight: 500;
  font-size: 32px;
  margin-bottom: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #d7d7d7 116.3%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.about-hero-banner__text {
  font-size: 18px;
  color: #fff;

  p {
    color: inherit;
    font: inherit;
    margin: 0;
    line-height: 1.22;
  }
}

.about-tech {
  margin: 88px 0;
}

.about-tech__inner {
  display: flex;
  gap: 24px;
  /* align-items: center; */
}

.about-tech__img {
  aspect-ratio: 546/471;
  /* min-height: 100%; */
  width: 100%;
  flex: 1;

  img {
    border-radius: 25px;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.about-tech__block {
  margin: 24px 0 48px;
}

.about-tech__block-title {
  font-weight: 500;
  font-size: 20px;

  color: #353535;
}

.text-line {
  display: flex;
  align-items: center;
  gap: 10px;

  color: var(--color-neutral-black);

  .description {
    max-width: 505px;
  }

  &::before {
    flex: 0 0 auto;
    width: 30px;
    height: 1px;
    background: var(--color-neutral-black);
    content: "";
  }
}

.about-tech__block-text {
  display: flex;
  align-items: center;
  gap: 10px;

  color: var(--color-neutral-black);

  p {
    color: inherit;
    font: inherit;
  }

  b {
    color: var(--color-primary-blue);
  }

  &::before {
    flex: 0 0 auto;
    width: 30px;
    height: 1px;
    background: var(--color-neutral-black);
    content: "";
  }
}

.about-tech__content {
  padding: 16px 0;
  flex: 1;
}

.about-tech__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 35px;
}

.about-tech-item {
  display: flex;
  align-items: center;
  gap: 16px;
  align-items: center;
  grid-template-rows: auto auto;
}

.about-tech-item__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  flex: 0 0 auto;
  box-sizing: border-box;
  background: #353535;
  border-radius: 50%;
}

.about-tech-item__icon img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.about-tech-item__title {
  font-weight: 500;
  font-size: 18px;
  color: var(--color-neutral-black);
  margin-bottom: 8px;
}

.about-tech-item__text {
  font-size: 15px;
  color: var(--color-neutral-black);

  p {
    color: inherit;
    font: inherit;
  }
}

.about-centers {
  margin: 146px 0 0;
  padding-bottom: 88px;
}

.about-center__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.about-center__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  aspect-ratio: 1;
  background: rgba(0, 0, 0, 0.001);
  box-shadow: 0px 4px 14.3px rgba(0, 0, 0, 0.15);
  border-radius: 13px;

  img {
    height: 21px;
    border-radius: 4px;
    aspect-ratio: 32/21;
  }
}

.about-centers__title {
  font-size: 48px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 8px;
}

.about-center__title {
  font-weight: 500;
  font-size: 32px;
  color: var(--color-neutral-black);
  margin-bottom: 2px;
  line-height: 1;
}

.about-center__text {
  line-height: 1;
  font-size: 15px;
  color: var(--color-primary-blue);
}

.about-centers__head {
  margin-bottom: 40px;
}

.about-centers__text {
  font-size: 24px;
  text-align: center;

  p {
    color: inherit;
    font: inherit;
  }
}

.about-center__body {
  position: relative;
  margin-top: auto;
}

.about-center__slider:not(.slick-initialized) .about-center__slide + .about-center__slide {
  display: none;
}

.about-center__slide {
  aspect-ratio: 498/257;

  img {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.about-center__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: absolute;
  left: 50%;
  bottom: 16px;
  translate: -50% 0;

  .slick-arrow {
    outline: none;
    border: none;
    width: 24px;
    aspect-ratio: 1;
    flex: 0 0 auto;
    background: #ffffff;
    border-radius: 50%;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      mask: url(../img/icons/arrow.svg) center / 16px no-repeat;
      -webkit-mask: url(../img/icons/arrow.svg) center / 16px no-repeat;
      background-color: var(--color-neutral-black);
    }
  }

  .slick-prev {
    scale: -1 1;
  }

  .slick-next {
    order: 1;
  }

  .slick-dots {
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    gap: 8px;
    background: #ffffff;
    border-radius: 36px;

    li {
      width: 8px;
      height: 8px;
      flex: 0 0 auto;
      position: relative;

      &:hover,
      &.slick-active {
        button {
          opacity: 1;
        }
      }
    }

    button {
      position: absolute;
      inset: 0;
      padding: 0;
      border: none;
      outline: none;
      border-radius: 50%;
      background: #353535;
      opacity: 0.3;
      transition: 0.2s ease-in-out;
      font-size: 0;
    }
  }
}

.about-center__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 0;
  margin-bottom: 25px;

  li {
    position: relative;
    padding-left: 24px;
    font-weight: 500;
    font-size: 14px;
    color: var(--color-neutral-black);
    list-style: none;

    &::before {
      content: "";
      width: 16px;
      height: 16px;
      position: absolute;
      left: 0;
      top: 50%;
      translate: 0 -50%;
      mask: url("../img/icons/check.svg") center/12px no-repeat;
      background: #66b92e;
    }
  }
}

.about-centers__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.about-center {
  min-width: 0;
  padding: 24px;
  background: #ffffff;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06);
  border-radius: 21px;
  display: flex;
  flex-direction: column;
}

.about-team__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;

  .title-md {
    margin-bottom: 16px;
  }
}

.about-team__text {
  font-size: 16px;
  color: var(--color-neutral-black);

  p {
    color: inherit;
    font: inherit;
  }
}

.about-team__items {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 35px;
}

.about-team__decor {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 8px 0;
}

.about-team__decor-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  padding: 12px;
  background: rgba(0, 0, 0, 0.001);
  box-shadow: 0px 4px 14.3px rgba(0, 0, 0, 0.15);
  border-radius: 18px;
  z-index: 1;
  transition: transform 0.3s ease;
  background: rgba(0, 0, 0, 0.001);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
  position: absolute;
  left: 24px;
  top: 24px;

  &::before {
    position: absolute;
    border-radius: inherit;
    z-index: -1;
    inset: 0;
    content: "";
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-image: linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.15) 0%,
      transparent 100%
    );
  }

  &::after {
    position: absolute;
    inset: 0;
    content: "";
    z-index: -1;
    background: linear-gradient(
      45deg,
      #fff 0%,
      transparent 50%,
      #fff 75%,
      transparent 100%
    );
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    padding: 1px;
  }
}

.about-team__decor-top {
  width: 100%;
  position: relative;
  border-radius: 25px;
  overflow: hidden;
  aspect-ratio: 546/252;

  & > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.about-team-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.about-team-item__icon {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  flex: 0 0 auto;
  background: #353535;
  border-radius: 50%;
  height: 40px;
}

.about-team-item__icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.about-team-item__title {
  font-weight: 500;
  font-size: 18px;
  color: var(--color-neutral-black);
  margin-bottom: 8px;
  line-height: 1.33;
}

.about-team-item__text {
  font-size: 15px;
  color: var(--color-neutral-black);
}

.about-team__block {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 4px 14.3px rgba(0, 0, 0, 0.15);
  border-radius: 25px;
  width: 240px;
  padding: 16px;
  display: flex;
  flex-direction: column;

  .button {
    padding-inline: 8px;
    margin-top: auto;

    &::after {
      display: inline-block;
      width: 32px;
      aspect-ratio: 1;
      flex: 0 0 auto;
      content: "";
      border-radius: 50%;
      background: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5.83331 14.1667L14.1666 5.83337' stroke='%230066F7' stroke-width='2.08' stroke-linecap='round' stroke-linejoin='round'/><path d='M5.83331 5.83337H14.1666V14.1667' stroke='%230066F7' stroke-width='2.08' stroke-linecap='round' stroke-linejoin='round'/></svg>")
          center / 20px no-repeat,
        var(--color-neutral-white);
    }
  }
}

.about-team__decor-end {
  flex: 1;
  border-radius: 25px;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.about-team__block-title {
  font-weight: 500;
  font-size: 20px;

  background: linear-gradient(180deg, #898989 0%, #000000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  margin-bottom: 8px;
}

.about-team__block-text {
  font-size: 15px;
  line-height: 18px;
  color: var(--color-neutral-grey);
  margin-bottom: 20px;
}

.about-offer {
  margin: 136px 0 155px;
}

.about-offer__head {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 8px;
  margin-bottom: 48px;
}

.about-offer__center {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;

  .case-card {
    flex: 1;
    min-height: 261px;
  }

  .case-card--nowrap .case-card__text p {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
}

.about-offer__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.case-card__icon {
  z-index: 1;
}

.about-offer-card {
  background: #ffffff;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06);
  border-radius: 21px;
  min-height: 238px;
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease;

  .button {
    margin-top: auto;
    max-width: 257px;
    width: 100%;
  }

  &:hover {
    scale: 1.05;
  }
}

.about-offer-card__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  margin-bottom: 12px;
  height: 48px;
  background: var(--color-neutral-black);
  border-radius: 50%;

  img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }
}

.about-offer-card__title {
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
  color: var(--color-neutral-black);
}

.about-offer-card__text {
  font-size: 15px;
  line-height: 1.2;
  color: var(--color-neutral-black);

  p {
    color: inherit;
    font: inherit;
    margin: 0;
  }
}

.about-banner {
  padding: 96px 0;
}

.about-banner__inner {
  min-height: 250px;
  padding: 40px 16px;
  background: linear-gradient(0deg, #5446ef 0%, #302889 100%);
  box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 25px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;

  &::before {
    background: linear-gradient(
      76deg,
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0)
    );

    position: absolute;
    inset: 0;
    content: "";
    z-index: -1;

    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    padding: 3px;
  }

  &:hover {
    .about-banner__lamp,
    .about-banner__disk {
      scale: 1.1;
    }

    .about-banner__decors {
      &::before,
      &::after {
        scale: 1.1;
        rotate: 0deg;
      }
    }
  }
}

.about-banner__content {
  max-width: 650px;
  margin-inline: auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.about-banner__decors {
  position: absolute;
  inset: 0;

  &::before,
  &::after {
    position: absolute;
    content: "";
    transition: 0.5s ease;
    aspect-ratio: 1;
    transition-delay: 0.1s;
    background: center / contain no-repeat
      image-set(
        url("../img/setting-wheel.webp") 1x,
        url("../img/setting-wheel@2x.webp") 2x
      );
  }

  &::before {
    transition-delay: 0.08s;
    width: 69px;
    top: 0;
    left: 18px;
    rotate: 62.92deg;
  }

  &::after {
    rotate: 15deg;
    top: 32px;
    left: 90px;
    width: 36px;
  }
}

.about-banner__lamp {
  position: absolute;
  aspect-ratio: 1;
  max-width: 208px;
  width: 100%;
  rotate: -7.91deg;
  right: 50%;
  bottom: 0;
  translate: -24% 35%;
  transition: 0.3s ease;
  transition-delay: 0.01s;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.about-banner__disk {
  position: absolute;
  aspect-ratio: 1;
  max-width: 226px;
  width: 100%;
  bottom: 0;
  right: 0;
  translate: 40px 40px;
  transition: 0.3s ease;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.about-banner__title {
  font-weight: 500;
  font-size: 32px;
  margin-bottom: 8px;

  background: linear-gradient(180deg, #ffffff 0%, #d7d7d7 116.3%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.about-banner__text {
  color: var(--color-neutral-white);
  margin-bottom: 32px;

  p {
    color: inherit;
    font: inherit;
  }
}

/* Partnership Program page — aligned with cart-ui-style-guide */
#partnership-program-body {
  background: var(--background-2);
}

#partnership-program-body .partner-hero {
  padding-top: 96px;
}

#partnership-program-body .partner-hero__inner {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 32px;
}

#partnership-program-body .partner-hero__eyebrow {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-blue);
}

#partnership-program-body .partner-hero__title {
  margin: 0 0 16px;
}

#partnership-program-body .partner-hero__subtitle {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  color: #6b7280;
}

#partnership-program-body .partner-hero-banner {
  padding: 32px 28px;
  background: linear-gradient(180deg, #353535 0%, #1e1e1e 100%);
  box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

#partnership-program-body .partner-hero-banner__icon {
  margin-bottom: 16px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-neutral-black);
  border-radius: 50%;

  img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }
}

#partnership-program-body .partner-hero-banner__text {
  font-size: 18px;
  color: #fff;
  margin-bottom: 24px;

  p {
    color: inherit;
    font: inherit;
    margin: 0;
    line-height: 1.4;
  }
}

#partnership-program-body .partner-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;

  .button {
    flex: 1 1 200px;
  }
}

/* Contacts page — aligned with cart-ui-style-guide */
#contacts-body {
  background: var(--background-2);
}

#contacts-body .contacts-page {
  padding: 96px 0 88px;
}

#contacts-body .contacts-view-page {
  background: #fff;
  box-shadow: -5px 10px 73.9px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 25px;
  overflow: hidden;
}

#contacts-body .contacts-hero {
  padding: 64px 24px 32px;
  text-align: center;
}

#contacts-body .contacts-hero__inner {
  max-width: 720px;
  margin-inline: auto;
}

#contacts-body .contacts-hero__eyebrow {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-blue);
}

#contacts-body .contacts-hero__title {
  margin: 0;
}

#contacts-body .contacts-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 0 32px 48px;
}

#contacts-body .contacts-card {
  background: #fff;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
  padding: 28px 32px;
}

#contacts-body .contacts-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

#contacts-body .contacts-card__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 102, 247, 0.08);
  border-radius: 50%;

  img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }
}

#contacts-body .contacts-card__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-neutral-black);
}

#contacts-body .contacts-address {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #374151;
}

#contacts-body .contacts-address__city {
  color: var(--color-primary-blue);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

#contacts-body .contacts-address__city:hover {
  color: #003c91;
  text-decoration: underline;
}

#contacts-body .contacts-email-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#contacts-body .contacts-email-list__row {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  gap: 12px 24px;
  align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 102, 247, 0.08);
}

#contacts-body .contacts-email-list__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

#contacts-body .contacts-email-list__row::before {
  content: none;
}

#contacts-body .contacts-email-list__email {
  color: var(--color-primary-blue);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  word-break: break-word;
  transition: color 0.2s ease;
}

#contacts-body .contacts-email-list__email:hover {
  color: #003c91;
  text-decoration: underline;
}

#contacts-body .contacts-email-list__desc {
  font-size: 15px;
  line-height: 1.4;
  color: #6b7280;
}

#contacts-body .about-centers {
  margin-top: 0;
}

#partnership-program-body .partner-for-whom {
  margin: 88px 0;
}

#partnership-program-body .partner-for-whom__head {
  text-align: center;
  margin-bottom: 48px;
}

#partnership-program-body .partner-for-whom__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

#partnership-program-body .partner-for-whom-card {
  min-height: auto;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
}

#partnership-program-body .partner-how {
  margin: 88px 0;
}

#partnership-program-body .partner-how__head {
  text-align: center;
  margin-bottom: 32px;
}

#partnership-program-body .partner-how__steps.cart-steps {
  max-width: 720px;
  margin-inline: auto;
  background: #fff;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
  padding: 32px 40px;
}

#partnership-program-body .cart-steps__list {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#partnership-program-body .cart-steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 260px;
}

#partnership-program-body .cart-steps__marker {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  background: #eef2f6;
  color: #8b9295;
  border: 2px solid #e2e8f0;
}

#partnership-program-body .cart-steps__marker .feather {
  font-size: 18px;
  line-height: 1;
}

#partnership-program-body .cart-steps__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

#partnership-program-body .cart-steps__step {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #8b9295;
}

#partnership-program-body .cart-steps__title {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.3;
}

#partnership-program-body .cart-steps__desc {
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-neutral-black);
}

#partnership-program-body .cart-steps__divider {
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
  height: 2px;
  margin: 20px 0 0;
  background: #e2e8f0;
  border-radius: 2px;
  list-style: none;
  align-self: flex-start;
  flex-shrink: 0;
}

#partnership-program-body .cart-steps__divider.is-complete {
  background: var(--color-primary-blue);
}

#partnership-program-body .cart-steps__item.is-complete .cart-steps__marker {
  background: var(--color-primary-blue);
  border-color: var(--color-primary-blue);
  color: #fff;
  box-shadow: 0px 4px 12px rgba(0, 102, 247, 0.25);
}

#partnership-program-body .cart-steps__item.is-complete .cart-steps__step {
  color: var(--color-primary-blue);
}

#partnership-program-body .cart-steps__item.is-complete .cart-steps__title {
  color: var(--color-neutral-black);
}

#partnership-program-body .cart-steps__item.is-current .cart-steps__marker {
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0px 4px 16px rgba(0, 102, 247, 0.35);
}

#partnership-program-body .cart-steps__item.is-current .cart-steps__step {
  color: var(--color-primary-blue);
  font-weight: 600;
}

#partnership-program-body .cart-steps__item.is-current .cart-steps__title {
  color: var(--color-neutral-black);
  font-weight: 700;
}

#partnership-program-body .partner-benefits {
  margin: 88px 0;
}

#partnership-program-body .partner-benefits__head {
  text-align: center;
  margin-bottom: 48px;
}

#partnership-program-body .partner-benefits__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin-inline: auto;
}

#partnership-program-body .partner-benefit-item {
  padding: 24px;
  background: #fff;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  border: 1px solid rgba(0, 102, 247, 0.08);
  align-items: flex-start;
}

#partnership-program-body .partner-rewards {
  margin: 88px 0;
}

#partnership-program-body .partner-rewards__head {
  text-align: center;
  margin-bottom: 32px;
}

#partnership-program-body .partner-rewards-table-wrap {
  max-width: 640px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
}

#partnership-program-body .partner-rewards-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;

  th,
  td {
    padding: 20px 24px;
    text-align: left;
    font-size: 16px;
    color: var(--color-neutral-black);
  }

  thead th {
    font-weight: 500;
    background: rgba(0, 102, 247, 0.06);
    border-bottom: 1px solid rgba(0, 102, 247, 0.1);
  }

  tbody tr:not(:last-child) td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  tbody td:last-child {
    font-weight: 600;
    color: var(--color-primary-blue);
    text-align: right;
  }

  thead th:last-child {
    text-align: right;
  }
}

#partnership-program-body .partner-faq {
  padding-top: 64px;
  padding-bottom: 0;
  margin-bottom: 0;
}

#partnership-program-body .partner-banner {
  padding: 48px 0 80px;
}

#partnership-program-body .partner-banner__inner {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  padding: 40px 32px;
  background: linear-gradient(180deg, #353535 0%, #1e1e1e 100%);
  box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
}

#partnership-program-body .partner-banner__title {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 12px;
  color: #fff;
}

#partnership-program-body .partner-banner__text {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 28px;
  max-width: 520px;
  margin-inline: auto;

  p {
    color: inherit;
    font: inherit;
    margin: 0;
    line-height: 1.5;
  }
}

#partnership-program-body .partner-banner__actions {
  display: flex;
  justify-content: center;
}

#partnership-program-body .partner-banner__actions .button {
  min-width: 220px;
}

#dedicated-servers-body {
  background-color: #fff;

  .faq {
    padding-top: 64px;
  }

  .vps-nd-promo {
    margin: -72px 0 96px;
  }

  .servers-for__cards {
    &::after {
      display: none;
    }
  }
}

.main-hero {
  padding-top: 96px;
  margin-bottom: 96px;
}

.main-hero__inner {
  max-width: 650px;
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  text-align: center;

  .title-lg {
    margin-bottom: 16px;
  }
}

.main-hero__actions {
  display: flex;
  width: 100%;
  margin-top: 24px;
  align-items: center;
  gap: 24px;

  .button {
    flex: 1;
  }
}

.main-hero__items {
  margin-top: 24px;
  display: flex;
  max-width: 444px;
  justify-content: space-between;
  gap: 16px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
  background: #ffffff;
  box-shadow: -5px 10px 73.9px rgba(0, 0, 0, 0.1);
  border-radius: 25px;
  padding: 24px 30px;
  width: 100%;
  overflow: hidden;
}

.main-hero__items-decor {
  position: absolute;
  bottom: -3px;
  left: 0;
  aspect-ratio: 731/131;
  height: calc(100% + 31px);
  opacity: 0.15;
  filter: blur(50.95px);

  &::before,
  &::after {
    content: "";
  }

  &::before,
  &::after,
  span {
    aspect-ratio: 322/67;
    position: absolute;
    height: 50%;
  }

  span {
    background: #fce803;
    opacity: 0.5;
    top: 0;
    right: 0;
  }

  &::before {
    left: 0;
    top: 0;
    background: #5fa1ff;
  }

  &::after {
    background: #ba9df0;
    bottom: 0;
    left: 43px;
  }
}

.main-hero__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  color: var(--color-neutral-grey);

  span {
    font-size: 20px;
    color: var(--color-primary-blue);
  }
}

/* Servers */

.servers-for__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.servers-for__text {
  display: flex;
  align-items: center;
  gap: 10px;

  &::before {
    content: "";
    flex: 0 0 auto;
    width: 30px;
    height: 1px;
    display: block;
    background: var(--color-neutral-black);
  }

  .description {
    max-width: 620px;
  }
}

.servers-for {
  margin: 186px 0;
  position: relative;
  z-index: 2;
}

.servers-for--decor {
  position: relative;
  z-index: 1;

  .servers-for__inner {
    position: relative;

    &::after {
      position: absolute;
      top: 0;
      right: 0;
      translate: 50% -57%;
      content: "";
      z-index: -1;
      aspect-ratio: 1;
      rotate: 48.97deg;
      width: 652px;
      background: image-set(url(../img/faq.webp) 1x, url(../img/faq@2x.webp) 2x)
        center / contain no-repeat;
    }
  }
}

#vps-body,
#about-body,
#server-body {
  background-color: #fff;
}

#vps-body {
  .servers-for {
    margin: 162px 0 148px;
  }

  .vps-nd-promo {
    margin: -72px 0 96px;
  }
}

.vps-nd-promo__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background: #fff;
  box-shadow: -5px 10px 73.9px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 25px;
}

.vps-nd-promo__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(0, 102, 247, 0.08);

  img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }
}

.vps-nd-promo__content {
  flex: 1 1 auto;
  min-width: 0;
}

.vps-nd-promo__title {
  margin: 0 0 4px;
  font-weight: 500;
  font-size: 18px;
  color: var(--color-neutral-black, #353535);
}

.vps-nd-promo__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-neutral-black, #353535);
}

.vps-nd-promo__btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  #vps-body .vps-nd-promo,
  #dedicated-servers-body .vps-nd-promo {
    margin: -32px 0 64px;
  }

  .vps-nd-promo__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  .vps-nd-promo__btn {
    width: 100%;
    justify-content: center;
  }
}

.servers-for__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;

  &::after {
    position: absolute;
    right: 0;
    top: 0;
    aspect-ratio: 1;
    z-index: -1;
    content: "";
    translate: 20% -64%;
    width: 216px;
    background: image-set(
        url(../img/balls.webp) 1x,
        url(../img/balls@2x.webp) 2x
      )
      center / contain no-repeat;
  }
}

.server-card {
  background: linear-gradient(180deg, #ffffff 0%, #bebebe 116.3%);
  border-radius: 32px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  &:hover {
    transform: scale(1.05);
    box-shadow: -5px 15px 25px rgba(0, 0, 0, 0.2);

    .server-card__icon {
      transform: scale(1.1);
    }

    .server-card__decor {
      transform: scale(1.1);
    }
  }
}

.server-card__decor {
  position: absolute;
  aspect-ratio: 1;
  transition: transform 0.3s ease;
}

.server-card__label {
  margin: -9px -24px 20px 0;
  display: flex;
  align-items: center;
  padding: 8px 12px 8px 34px;
  min-height: 76px;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 4px 14.3px rgba(0, 0, 0, 0.15);
  border-radius: 66px 0 0 66px;
  max-width: 252px;
  justify-content: space-between;
  gap: 16px;
  margin-left: auto;
}

.ssd-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  background: linear-gradient(180deg, #ffffff 0%, #bebebe 116.3%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.ssd-text__top {
  font-size: 15px;
  opacity: 0.5;
  background: linear-gradient(180deg, #ffffff 0%, #bebebe 116.3%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.ssd-text__bottom {
  font-weight: 500;
  font-size: 20px;
}

.speed-text {
  display: flex;
  align-items: center;
  gap: 6px;

  background: linear-gradient(180deg, #e52f2f 0%, #7f1a1a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  line-height: 1;
}

.speed-text__text {
  font-size: 15px;
  background: linear-gradient(180deg, #e52f2f 0%, #7f1a1a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  translate: 0 3px;
}

.speed-text__x {
  font-size: 48px;
}

.server-card__icon {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  padding: 12px;
  background: rgba(0, 0, 0, 0.001);
  box-shadow: 0px 4px 14.3px rgba(0, 0, 0, 0.15);
  border-radius: 18px;
  transition: transform 0.3s ease;
  position: relative;
  background: rgba(0, 0, 0, 0.001);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
  z-index: 1;
  transition: transform 0.3s ease;

  &::before {
    position: absolute;
    border-radius: inherit;
    z-index: -1;
    inset: 0;
    content: "";
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-image: linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.15) 0%,
      transparent 100%
    );
  }

  &::after {
    position: absolute;
    inset: 0;
    content: "";
    z-index: -1;
    background: linear-gradient(
      45deg,
      #fff 0%,
      transparent 50%,
      #fff 75%,
      transparent 100%
    );
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    padding: 1px;
  }
}

.server-card__title {
  display: inline-block;
  margin-bottom: 16px;
  font-weight: 500;
  font-size: 32px;
  line-height: 105%;
  letter-spacing: 0.56px;
  background: linear-gradient(180deg, #5b5b5b 0%, #070707 116.3%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  position: relative;
  z-index: 1;
}

.server-card__text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-neutral-black);
  position: relative;
  z-index: 1;

  p {
    color: inherit;
    font: inherit;
  }
}

.server-card--accent {
  background: linear-gradient(180deg, #353535 0%, #1e1e1e 100%);

  .server-card__title {
    background: linear-gradient(180deg, #ffffff 0%, #bebebe 116.3%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }

  .server-card__text {
    color: var(--color-neutral-white);
  }

  .server-card__icon {
  }
}

.server-card--secondary {
  background: linear-gradient(0deg, #5446ef 0%, #302889 100%);

  .server-card__title {
    background: linear-gradient(180deg, #ffffff 0%, #bebebe 116.3%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }

  .server-card__text {
    color: var(--color-neutral-white);
  }
}

/* Servers */

/* Create */

.vps-create-total {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06);
  border-radius: 30px;
  padding: 24px;
  width: 356px;
  display: flex;
  flex-direction: column;
  gap: 16px;

  .divider {
    width: 100%;
    height: 1px;
    opacity: 0.3;
    border-bottom: 1px solid #808080;
  }

  .button {
    width: 100%;
  }
}

.vps-create-total__title {
  font-weight: 500;
  font-size: 24px;
  line-height: 121%;
  display: flex;
  align-items: center;
  color: #142149;
}

.vps-create-total__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 0;
  margin: 0;

  li {
    justify-content: space-between;
    gap: 16px;
    font-weight: 500;
    font-size: 16px;
    line-height: 119%;
    display: flex;
    align-items: center;
    color: var(--color-neutral-grey);
    list-style: none;

    span {
      color: var(--color-neutral-black);
    }
  }
}

.vps-create__body {
  display: flex;
  gap: 24px;
}

.vps-create__form {
  display: flex;
  gap: 24px;
  width: 100%;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.vps-create-total__bottom {
  margin-top: auto;
}

.vps-create-calculator {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 21px;
  gap: 24px;

  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06);
  border-radius: 30px;
}

.vps-create-calculator__item {
  display: grid;
  align-items: center;
  grid-template-columns: 90px minmax(0, 1fr) 142px;
  gap: 8px 16px;

  .vps-filter__radio-btns {
    width: fit-content;
  }

  .nice-select {
    height: 36px;
    line-height: 36;
    padding-inline: 16px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
      0px 4px 10px rgba(15, 15, 15, 0.06);
    border-radius: 29px;
    border: none;
    padding-right: 32px;
    min-width: 86px;

    &::after {
      transform: none;
      translate: 0 -50%;
      margin-top: 0;
      right: 8px;
      border: none;
      width: 24px;
      flex: 0 0 auto;
      height: 24px;
      mask: url("../img/select-chevron.svg") center/10px no-repeat;
      background: var(--color-neutral-black);
    }

    .current {
      font-weight: 500;
      font-size: 16px;
      line-height: 119%;
      color: var(--color-neutral-black);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      display: block;
    }

    .list {
      background: #fff;
      box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
        0px 4px 10px rgba(15, 15, 15, 0.06);
      border-radius: 12px;
    }
  }
}

.vps-create-calculator__select {
  min-width: 0;
  
  .nice-select {
    width: 100%;
    max-width: 100%;
    
    .current {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .list {
      width: max-content;
      min-width: 100%;
      max-width: 500px;
    }
  }
}

.vps-create-calculator__item--col {
  display: flex;
  flex-direction: column;
  align-items: baseline;
}

.vps-create-calculator__item-badge,
.vps-create-calculator__item-title {
  font-weight: 500;
  font-size: 16px;
  line-height: 119%;
}

.vps-create-calculator__item-title {
  color: var(--color-neutral-black);
}

.vps-create-calculator__item-badge {
  color: rgba(53, 53, 53, 0.5);
}

.vps-create-calculator__item-subtitle {
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  line-height: 119%;
  color: var(--color-neutral-black);
  flex: 0 0 70px;
  width: 70px;
}

.vps-create-calculator__item-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;

  .vps-create-calculator__item-line {
    width: 100%;
    max-width: 100%;

    &:nth-child(even) {
      margin-left: auto;
    }
  }

  .vps-create-calculator__item-subtitle {
    &:nth-child(even) {
      text-align: right;
    }
  }
}

.vps-create-calculator__item-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vps-create-calculator__item-block {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;

  .nice-select {
    flex: 1;
    min-width: 0;
    max-width: 140px;
  }

  .create-field--counter-small {
    flex: 0 0 auto;
    width: 100px;
  }
}

.switcher {
  display: flex;
  align-items: center;
  gap: 8px;

  &:has(input:checked) {
    .switcher__range {
      background: #30d158;

      &::before {
        translate: 21px 0;
      }
    }
  }
}

.switcher__wrapper {
  position: relative;
  flex: 0 0 auto;
  margin-bottom: 0;
}

.switcher__range {
  width: 64px;
  height: 28px;
  background: var(--color-primary-blue);
  border-radius: 100px;
  position: relative;
  cursor: pointer;
  display: block;

  &::before {
    position: absolute;
    content: "";
    left: 2px;
    top: 2px;
    bottom: 2px;
    width: 39px;
    transition: 0.3s ease;
    background-color: #fff;
    border-radius: 100px;
  }
}

.switcher__label {
  font-weight: 500;
  font-size: 13px;
  display: flex;
  align-items: center;
  color: var(--color-neutral-grey);
  margin: 0;

  p {
    font: inherit;
    margin: 0;
    color: inherit;
  }
}

.vps-create-calculator__text {
  font-size: 13px;
  color: var(--color-neutral-grey);
  padding: 10px 0;

  p {
    font: inherit;
    color: inherit;
    margin: 0;
  }
}

.create-field {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.5);
  /* block */
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06);
  border-radius: 29px;
  padding: 8px 16px;

  input {
    width: 100%;
    outline: none;
    border: none;
    padding: 0;
    font-weight: 500;
    font-size: 16px;
    color: var(--color-neutral-black);
  }
}

.vps-create-calculator__block,
.vps-create-calculator__switch {
  display: flex;
  align-items: center;
  gap: 24px;
}

.create-field__label {
  white-space: nowrap;
  font-size: 14px;
  color: var(--color-neutral-grey);
}

.create-field__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  outline: none;
  border: none;
  background-color: #fff;
  flex: 0 0 auto;
  padding: 0;
  height: 24px;

  .create-field__btn--minus {
  }
}

.create-field--counter {
  padding-inline: 8px;

  input {
    text-align: center;
  }
}

.vps-create {
  margin: 162px 0;
}

.vps-create-calculator__range {
  flex: 1;
}

.vps-create-calculator__scale {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.create-field {
  display: flex;
  align-items: center;
  gap: 4px;
}

.servers-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  position: relative;
}

.price-item--highlighted {
  display: grid;
  grid-template-columns:
    minmax(0, 1.5fr) minmax(0, 1.7fr) minmax(140px, auto) minmax(150px, auto) minmax(150px, auto);
  grid-template-areas: "info specs sum extras cta";
  gap: 12px 16px;
  align-items: center;
  position: relative;
}

/* Named grid areas keep their slot across every breakpoint;
   only the container's template changes responsively. */
.servers-cards .price-item__info {
  grid-area: info;
  min-width: 0;
}

.servers-cards .price-item__size {
  grid-area: specs;
}

.servers-cards .price-item__sum {
  grid-area: sum;
}

.servers-cards .price-item__extras {
  grid-area: extras;
}

.servers-cards .price-item--highlighted > .button {
  grid-area: cta;
}

.price-item--highlighted .price-item__sum {
  justify-self: center;
  margin-inline: 0;
  padding-inline: 4px;
  min-width: 0;
}

/* Card surface in site tokens */
.servers-cards .price-item--highlighted {
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.06);
  padding: 16px 20px;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.servers-cards .price-item--highlighted:hover {
  box-shadow: 0px 10px 32px rgba(0, 51, 153, 0.12);
  border-color: rgba(0, 102, 247, 0.18);
  transform: translateY(-2px);
}

/* Info column: title + CPU/cores tagline */
.servers-cards .price-item__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.servers-cards .price-item__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-primary-blue);
}

.servers-cards .price-item__text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-neutral-grey);
}

.servers-cards .price-item__text::before {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: var(--color-neutral-grey);
  -webkit-mask: url("../img/icons/spu.svg") center / contain no-repeat;
  mask: url("../img/icons/spu.svg") center / contain no-repeat;
}

.servers-cards .price-item__text p {
  margin: 0;
  font: inherit;
  color: inherit;
}

/* Spec chips (RAM / disk / generic) */
.servers-cards .price-item__size {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}

.servers-cards .price-item__size span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--color-neutral-milk, #f4f6fa);
  border-radius: 30px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-neutral-black);
  white-space: nowrap;
}

.servers-cards .price-item__size span::before {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: var(--color-primary-blue);
  -webkit-mask: var(--spec-icon, url("../img/icons/speed.svg")) center / contain no-repeat;
  mask: var(--spec-icon, url("../img/icons/speed.svg")) center / contain no-repeat;
}

.servers-cards .price-item__size span.price-item__spec--ram {
  --spec-icon: url("../img/icons/speed.svg");
  background: rgba(0, 102, 247, 0.08);
}

.servers-cards .price-item__size span.price-item__spec--ram::before {
  background: var(--color-primary-blue);
}

.servers-cards .price-item__size span.price-item__spec--disk {
  --spec-icon: url("../img/icons/drive-green.svg");
  background: rgba(18, 179, 0, 0.08);
}

.servers-cards .price-item__size span.price-item__spec--disk::before {
  background: var(--color-status-green);
}

.servers-cards .price-item__size span.price-item__spec--spec {
  --spec-icon: url("../img/icons/spu.svg");
}

/* Price accent: big sum + small period below */
.servers-cards .price-item__sum {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  color: var(--color-primary-blue);
  text-align: center;
  white-space: nowrap;
}

.servers-cards .price-item__sum span {
  font-weight: 500;
  font-size: 13px;
  color: var(--color-neutral-grey);
}

@keyframes forcevpsPriceValueChange {
  0% {
    opacity: 0.35;
    transform: translateY(6px) scale(0.98);
    filter: blur(1px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
}

.price-item__sum.price-value--changed,
.vps-card__price.price-value--changed {
  animation: forcevpsPriceValueChange 0.34s ease both;
  will-change: opacity, transform, filter;
}

.price-item-wrapper {
  position: relative; /* anchor tooltip */
}

.vps-plans {
  margin: 60px 0 152px;

  .nav-tabs {
    width: fit-content;
    display: flex;
    position: relative;
    z-index: 2;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin-inline: auto;
    gap: 16px;
    background: var(--color-neutral-white);
    box-shadow: 0px 4px 17.6px rgba(0, 0, 0, 0.1);
    border-radius: 42px;
    border-bottom: none;
    margin-bottom: 16px;

    .nav-link {
      text-align: left;
    }

    .nav-item {
      margin-bottom: 0;
      padding: 10px;
      margin: -10px;
      overflow: visible;

      &:last-child {
        .nav-link {
          &:hover,
          &:active {
            svg {
              color: var(--color-second-pink);
            }
          }
        }
      }
    }

    .nav-link {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 12px 16px;
      gap: 8px;
      height: 40px;

      .vps-plans-tab__icon {
        flex-shrink: 0;
        width: 17px;
        height: 16px;
        object-fit: contain;

        &--16 {
          width: 16px;
          height: 16px;
        }
      }
      border-radius: 30px;
      border: none;
      background: transparent;
      font-weight: 500;
      font-size: 14px;
      color: var(--color-neutral-grey);
      position: relative;
      z-index: 1;
      transition: 0.2s ease-in-out;

      &::after {
        position: absolute;
        inset: 0;
        content: "";
        opacity: 0;
        background: rgba(0, 0, 0, 0.001);
        box-shadow: 0px 4px 14.3px rgba(0, 0, 0, 0.15);
        border-radius: 30px;
        transition: 0.2s ease-in-out;
        pointer-events: none;
      }

      &:hover,
      &.active {
        color: var(--color-neutral-black);

        svg {
          color: var(--color-status-green);
        }

        &::after {
          opacity: 1;
          scale: 1;
        }
      }

    }

    .nav-item--featured {
      z-index: 2;
      overflow: visible;
    }
  }
}

/* Force VPS — постоянное свечение и shimmer (палитра сайта: --color-primary-blue) */
@keyframes forcevps-featured-glow {
  0%,
  100% {
    box-shadow:
      0 4px 16px rgba(0, 102, 247, 0.35),
      0 0 0 0 rgba(0, 60, 145, 0);
  }

  50% {
    box-shadow:
      0 8px 28px rgba(0, 102, 247, 0.55),
      0 0 24px 4px rgba(0, 60, 145, 0.28);
  }
}

@keyframes forcevps-featured-shimmer {
  0% {
    transform: translateX(-140%) skewX(-14deg);
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  40% {
    transform: translateX(140%) skewX(-14deg);
    opacity: 1;
  }

  48%,
  100% {
    transform: translateX(140%) skewX(-14deg);
    opacity: 0;
  }
}

@keyframes forcevps-featured-ring {
  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 1;
  }
}

/* Force VPS — выделенная вкладка (#vpsPlansTabs) */
#vpsPlansTabs .nav-item--featured .nav-link--featured {
  font-weight: 700;
}

#vpsPlansTabs .nav-item--featured .nav-link--featured::after {
  display: none;
}

#vpsPlansTabs .nav-item--featured .nav-link--featured-force {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #003c91;
  background: linear-gradient(135deg, #f0f6ff 0%, #d9e8fc 100%);
  border: 1px solid rgba(0, 102, 247, 0.45);
  box-shadow: 0 4px 16px rgba(0, 102, 247, 0.35);
  transition: color 0.2s ease-in-out, background 0.2s ease-in-out, border-color 0.2s ease-in-out;
  animation: forcevps-featured-glow 2.4s ease-in-out infinite;
}

#vpsPlansTabs .nav-item--featured .nav-link--featured-force::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.75) 50%,
    transparent 70%
  );
  pointer-events: none;
  will-change: transform, opacity;
  animation: forcevps-featured-shimmer 3.6s ease-in-out infinite;
}

#vpsPlansTabs .nav-item--featured .nav-link--featured-force::after {
  display: block;
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(
    120deg,
    #5fa1ff,
    #003c91,
    #c8dafb,
    #5fa1ff
  );
  background-size: 300% 300%;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
  opacity: 0.65;
  animation: forcevps-featured-ring 2.4s ease-in-out infinite;
}

#vpsPlansTabs .nav-item--featured .nav-link--featured-force .vps-plans-tab__icon,
#vpsPlansTabs .nav-item--featured .nav-link--featured-force span {
  position: relative;
  z-index: 1;
}

#vpsPlansTabs .nav-item--featured .nav-link--featured-force:hover,
#vpsPlansTabs .nav-item--featured .nav-link--featured-force.active {
  color: var(--color-neutral-black);
  background: linear-gradient(135deg, #e4efff 0%, #c8dafb 100%);
  border-color: rgba(0, 102, 247, 0.65);
}

/* Force VPS — выделенный пункт VPS-меню */
.sub-item.sub-item--featured {
  font-weight: 700;
}

.sub-item.sub-item--featured-force {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #f0f6ff 0%, #d9e8fc 100%);
  border: 1px solid rgba(0, 102, 247, 0.45);
  box-shadow: 0 4px 16px rgba(0, 102, 247, 0.35);
  animation: forcevps-featured-glow 2.4s ease-in-out infinite;
}

.sub-item.sub-item--featured-force::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.7) 50%,
    transparent 70%
  );
  pointer-events: none;
  will-change: transform, opacity;
  animation: forcevps-featured-shimmer 3.6s ease-in-out infinite;
}

.sub-item.sub-item--featured-force img,
.sub-item.sub-item--featured-force strong,
.sub-item.sub-item--featured-force p {
  position: relative;
  z-index: 1;
}

.sub-item.sub-item--featured-force strong {
  font-weight: 700;
  color: #003c91;
}

.sub-item.sub-item--featured-force p {
  color: #003c91;
}

.sub-item.sub-item--featured-force:hover {
  background: linear-gradient(135deg, #e4efff 0%, #c8dafb 100%);
  border-color: rgba(0, 102, 247, 0.65);
}

.vps-plans__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  max-width: 500px;
  margin: 40px auto;

  .button {
    min-width: 260px;
    gap: 4px;
    justify-content: flex-start;

    padding-inline: 42px;

    &::after {
      position: absolute;
      right: 8px;
      top: 50%;
      translate: 0 -50%;
    }
  }
}

.vps-plans__block-title {
  font-weight: 500;
  font-size: 24px;

  color: #353535;
}

.vps-plans__block-text {
  font-size: 14px;
  color: var(--color-neutral-black);

  p {
    color: inherit;
    font: inherit;
  }
}

/* Create */
/* Кастомизация NoUiSlider */

.noUi-marker {
  display: none;
}

.noUi-value {
  font-weight: 500;
  font-size: 13px;
  color: var(--color-neutral-grey);
}

.noUi-target {
  /* background: var(--color-neutral-grey) !important; */
  background: rgba(128, 128, 128, 0.5) !important;
  box-shadow: none !important;
  /* opacity: 0.5 !important; */
  border-radius: 23px !important;
  border: none !important;
}

.noUi-horizontal {
  height: 2px !important;
}

.noUi-handle {
  width: 20px !important;
  height: 20px !important;
  background: rgba(0, 0, 0, 0.001) !important;
  box-shadow: 0px 4px 14.3px rgba(0, 0, 0, 0.15) !important;
  border-radius: 32px !important;

  &::before {
    position: absolute;
    border-radius: inherit;
    z-index: -1;
    inset: 0 !important;
    content: "";
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-image: linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.15) 0%,
      transparent 100%
    );
    width: 100% !important;
    height: 100% !important;
    background-color: transparent !important;
  }

  &::after {
    width: 100% !important;
    height: 100% !important;
    background-color: transparent !important;
    position: absolute;
    inset: 0 !important;
    content: "";
    z-index: -1;
    background: linear-gradient(
      45deg,
      #fff 0%,
      transparent 50%,
      #fff 75%,
      transparent 100%
    );
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    padding: 1px;
  }
}

.noUi-horizontal .noUi-origin {
}

.noUi-connect {
  background: var(--color-primary-blue) !important;
  top: calc(50% - 3px) !important;
  height: 6px !important;
  border-radius: 24px !important;
}

.noUi-horizontal .noUi-handle {
  right: -10px;
  top: -9px;
}

/* Кастомизация NoUiSlider */

/* VPS Tabs */

.vps-tab-content {
  margin-top: 35px;
}

/* Плавное переключение вкладок VPS / Dedicated */
@keyframes vpsTabIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#vpsPlansTabsContent > .tab-pane.active,
#dedicatedServersTabsContent > .tab-pane.active,
#myTabContent > .tab-pane.active {
  animation: vpsTabIn 0.35s ease;
}

.vps-tab-content__title {
  font-weight: 500;
  font-size: 32px;
  color: var(--color-neutral-black);
  margin-bottom: 16px;
}

.vps-group-benefits {
  margin-bottom: 24px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(0, 102, 247, 0.14);
  background: linear-gradient(
    180deg,
    rgba(0, 102, 247, 0.09) 0%,
    rgba(0, 102, 247, 0.03) 100%
  );
  box-shadow: 0px 6px 24px rgba(0, 51, 153, 0.08);
}

.vps-group-benefits__heading {
  margin: 0 0 12px;
  text-align: left;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: var(--color-neutral-black);
}

.vps-group-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.vps-group-benefits__item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  min-height: 68px;
  padding: 10px 12px;
  background: var(--color-neutral-white);
  border: 1px solid rgba(0, 102, 247, 0.14);
  box-shadow: 0px 4px 18px rgba(0, 51, 153, 0.1),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  border-radius: 14px;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.vps-group-benefits__item:hover {
  border-color: rgba(0, 102, 247, 0.28);
  box-shadow: 0px 8px 28px rgba(0, 51, 153, 0.14),
    0px 4px 12px rgba(15, 15, 15, 0.08);
  transform: translateY(-2px);
}

.vps-group-benefits__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(
    145deg,
    rgba(0, 102, 247, 0.22) 0%,
    rgba(0, 102, 247, 0.1) 100%
  );
  border: 1px solid rgba(0, 102, 247, 0.2);
  box-shadow: 0px 4px 12px rgba(0, 102, 247, 0.18);
}

.vps-group-benefits__icon-glyph {
  display: block;
  width: 18px;
  height: 18px;
  background: var(--color-primary-blue);
  -webkit-mask: var(--benefit-icon) center / contain no-repeat;
  mask: var(--benefit-icon) center / contain no-repeat;
}

.vps-group-benefits__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.vps-group-benefits__title {
  margin: 0;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  color: var(--color-neutral-black);
}

.vps-group-benefits__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #5c6578;
}

.vps-group-benefits--standard .vps-group-benefits__item {
  border-color: rgba(0, 102, 247, 0.16);
}

.vps-group-benefits--5ghz {
  border-color: rgba(255, 154, 3, 0.28);
  background: linear-gradient(
    180deg,
    rgba(255, 154, 3, 0.14) 0%,
    rgba(255, 154, 3, 0.04) 100%
  );
  box-shadow: 0px 6px 24px rgba(255, 154, 3, 0.12);
}

.vps-group-benefits--5ghz .vps-group-benefits__item {
  border-color: rgba(255, 154, 3, 0.22);
}

.vps-group-benefits--5ghz .vps-group-benefits__item:hover {
  border-color: rgba(255, 154, 3, 0.4);
  box-shadow: 0px 8px 28px rgba(255, 154, 3, 0.16),
    0px 4px 12px rgba(15, 15, 15, 0.08);
}

.vps-group-benefits--5ghz .vps-group-benefits__icon {
  background: linear-gradient(
    145deg,
    rgba(255, 154, 3, 0.35) 0%,
    rgba(255, 154, 3, 0.16) 100%
  );
  border-color: rgba(255, 154, 3, 0.35);
  box-shadow: 0px 4px 12px rgba(255, 154, 3, 0.22);
}

.vps-group-benefits--force {
  border-color: rgba(0, 102, 247, 0.28);
  background: linear-gradient(
    180deg,
    rgba(0, 102, 247, 0.12) 0%,
    rgba(0, 102, 247, 0.04) 100%
  );
  box-shadow: 0px 6px 24px rgba(0, 102, 247, 0.12);
}

.vps-group-benefits--force .vps-group-benefits__item {
  border-color: rgba(0, 102, 247, 0.22);
}

.vps-group-benefits--force .vps-group-benefits__item:hover {
  border-color: rgba(0, 102, 247, 0.38);
  box-shadow: 0px 8px 28px rgba(0, 102, 247, 0.16),
    0px 4px 12px rgba(15, 15, 15, 0.08);
}

.vps-group-benefits--force .vps-group-benefits__icon {
  background: linear-gradient(
    145deg,
    rgba(0, 102, 247, 0.35) 0%,
    rgba(0, 102, 247, 0.14) 100%
  );
  border-color: rgba(0, 102, 247, 0.32);
  box-shadow: 0px 4px 12px rgba(0, 102, 247, 0.2);
}

@media (max-width: 575.98px) {
  .vps-group-benefits {
    padding: 12px 10px;
  }

  .vps-group-benefits__grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .vps-group-benefits__item {
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
  }

  .vps-group-benefits__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .vps-group-benefits__icon-glyph {
    width: 18px;
    height: 18px;
  }

  .vps-group-benefits__title {
    font-size: 13px;
    line-height: 1.3;
  }

  .vps-group-benefits__text {
    font-size: 12px;
    line-height: 1.45;
  }
}

.vps-tab-content__body {
  display: flex;
  gap: 24px;
}

.vps-filter {
  flex: 0 0 auto;
  width: 324px;

  padding: 16px;
  background: #ffffff;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06);
  border-radius: 32px;

  position: sticky;
  top: 90px;
  align-self: flex-start;
}

.vps-filter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  margin-bottom: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.vps-filter__head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.vps-filter__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-neutral-black);
  cursor: pointer;
  transition: background 0.2s ease;
}

.vps-filter__close:hover {
  background: rgba(0, 0, 0, 0.1);
}

.vps-filter__close:active {
  transform: scale(0.96);
}

.vps-filter__count {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-neutral-black);
}

.vps-filter__reset {
  border: none;
  background: none;
  padding: 4px 8px;
  font-weight: 500;
  font-size: 13px;
  color: var(--color-primary-blue);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.vps-filter__reset:hover {
  background: rgba(0, 102, 247, 0.08);
}

.vps-filter__reset[hidden],
.vps-filter__actions [data-filter-reset][hidden] {
  display: none !important;
}

/* Keep reset button space in the filter head to prevent layout shift on cycle change */
.vps-filter__head-actions .vps-filter__reset[hidden] {
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}

.servers-cards__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 24px;
  text-align: center;
  background: #fff;
  border: 1px dashed rgba(0, 102, 247, 0.2);
  border-radius: 20px;
  color: var(--color-neutral-grey);
}

.servers-cards__empty[hidden] {
  display: none;
}

.servers-cards__empty p {
  margin: 0;
  font-size: 16px;
}

.vps-filter__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vps-filter__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vps-filter__radio-btns {
  background: #ffffff;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06);
  border-radius: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  padding: 10px 12px;
  gap: 8px;
}

/* CPU: three options in one row */
.vps-filter__item:has(input[name="cpu-type"]) .vps-filter__radio-btns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Disk type: four options in one row */
.vps-filter__item:has(input[name="disk-type"]) .vps-filter__radio-btns {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 8px 10px;
  gap: 6px;
}

.vps-filter__item:has(input[name="disk-type"]) .vps-filter__radio-btns .radio-btn {
  min-height: 32px;
  font-size: 13px;
  padding-inline: 4px;
}

.vps-filter__radio-btns .radio-btn {
  justify-content: center;
  width: 100%;
  min-height: 36px;
  font-size: 14px;
  padding-inline: 6px;
  text-align: center;
}

.radio-btn {
  border-radius: 29px;
  font-weight: 400;
  font-size: 15px;
  line-height: 160%;
  letter-spacing: 0.32px;
  color: #78819d;
  display: inline-flex;
  align-items: center;
  padding-inline: 8px;
  transition: 0.2s ease;
  cursor: pointer;
  margin: 0;

  &:hover,
  &:has(input:checked) {
    background: var(--color-primary-blue);
    color: #fff;
  }
}

/* Fallback for browsers without :has() support */
.radio-btn.is-checked {
  background: var(--color-primary-blue);
  color: #fff;
}

.vps-filter__slider {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;

  .noUi-pips {
    display: none !important;
  }
}

.vps-filter__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 171%;
  letter-spacing: 0.32px;
  color: var(--color-neutral-grey);
}

.vps-filter__title-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(0, 102, 247, 0.08);
}

.vps-filter__title-icon img {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
}

.vps-filter__title-icon--price {
  background: rgba(18, 179, 0, 0.1);
}

.vps-filter__title-icon--ram {
  background: rgba(0, 102, 247, 0.1);
}

.vps-filter__title-icon--disk {
  background: rgba(18, 179, 0, 0.1);
}

.vps-filter__title-icon--cpu {
  background: rgba(153, 195, 255, 0.25);
}

.vps-filter__title-icon--disk-type {
  background: rgba(95, 161, 255, 0.15);
}

.vps-filter__title-icon--balance {
  background: rgba(53, 53, 53, 0.08);
}

.vps-filter__radios {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vps-filter__radios .radio-input {
  padding: 8px 12px 8px 38px;
  border-radius: 14px;
  background: rgba(0, 102, 247, 0.04);
  transition: background 0.2s ease;
  margin-bottom: 2px;
}

.vps-filter__radios .radio-input:hover {
  background: rgba(0, 102, 247, 0.07);
}

.vps-filter__radios .radio-input:has(input:checked),
.vps-filter__radios .radio-input.is-checked {
  background: rgba(0, 102, 247, 0.1);
}

.vps-filter__radios .radio-input::before {
  top: 50%;
  translate: 0 -50%;
  width: 20px;
  left: 11px;
}

.vps-filter__radios .radio-input::after {
  width: 10px;
  left: 16px;
}

.vps-filter__radios .radio-input__label {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  line-height: 1.3;
  font-size: 13px;
  white-space: nowrap;
}

.vps-filter__radios .radio-input__label > span {
  font-size: 14px;
  line-height: 1.3;
  flex-shrink: 0;
}

.radio-input {
  display: block;
  position: relative;
  padding-left: 36px;
  cursor: pointer;

  &::before,
  &::after {
    position: absolute;
    aspect-ratio: 1;
    content: "";
    border-radius: 50%;
    top: 50%;
    translate: 0 -50%;
    transition: 0.2s ease;
  }

  &::before {
    width: 24px;
    border: 2px solid var(--color-neutral-grey);
    background: #ffffff;
    left: 0;
  }

  &::after {
    width: 12px;
    background: var(--color-status-green);
    left: 6px;
    opacity: 0;
    scale: 0.8;
  }

  &:has(input:checked) {
    &::before {
      border-color: var(--color-status-green);
    }

    &::after {
      scale: 1;
      opacity: 1;
    }
  }
}

/* Fallback for browsers without :has() support */
.radio-input.is-checked::before {
  border-color: var(--color-status-green);
}

/* Fallback for browsers without :has() support */
.radio-input.is-checked::after {
  scale: 1;
  opacity: 1;
}

.radio-input--secondary {
  .radio-input__label {
    color: var(--color-neutral-grey);
  }
}

.radio-input__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 171%;
  letter-spacing: 0.32px;
  color: var(--color-neutral-black);

  img {
    width: 20px;
    height: 15px;
  }

  span {
    font-weight: 500;
    color: var(--color-primary-blue);
  }
}

.vps-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: min-content;
  gap: 24px;
  flex: 1;
  position: relative;

  &::after {
    width: 197px;
    top: 200px;
    content: "";
    position: absolute;
    aspect-ratio: 1;
    pointer-events: none;
    right: 0;

    background: image-set(
        url(../img/price-decor.webp) 1x,
        url(../img/price-decor@2x.webp) 2x
      )
      center / contain no-repeat;
    transition: inherit;
    translate: 70% 0;
  }
}

#pricing .vps-cards {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1023.98px) {
  #pricing .vps-cards {
    grid-template-columns: auto;
  }
}

.vps-create__head {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vps-card,
.price-item-wrapper[data-card-tlp],
.price-item[data-card-tlp] {
  position: relative;
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: none;
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.vps-card--showing,
.vps-card--hiding,
.price-item-wrapper.vps-card--showing,
.price-item-wrapper.vps-card--hiding,
.price-item.vps-card--showing,
.price-item.vps-card--hiding {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
}

.vps-card--hidden {
  display: none !important;
}

.price-item.vps-card--hidden {
  display: none !important;
}

.price-item-wrapper.vps-card--hidden {
  display: none !important;
}

.vps-card__inner {
  display: flex;
  flex-direction: column;
  overflow: visible; /* allow tooltip to overflow card */
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.08);
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.15);
  border-radius: 20px;

  &::after {
    content: "";
    z-index: -1;
    position: absolute;
    right: 0;
    bottom: 0;
    translate: 11px -59px;
    width: 78px;
    height: 78px;

    background: #5fa1ff;
    filter: blur(75.75px);
  }
}

.vps-card__head {
  padding: 16px;
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  display: flex;
  align-items: center;
  border-radius: 20px 20px 0 0;
  justify-content: space-between;
  gap: 16px;
}

.vps-card__head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 6px;
}

.vps-card__head-left {
}

.vps-card__line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;

  .vps-card__more {
    margin: 0;
  }
}

.vps-cards:has(.vps-card__label) {
  padding-top: 14px;
}

.vps-card__label {
  position: absolute;
  top: -12px;
  left: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #14c700 0%, #0a9e00 100%);
  border: 2px solid #ffffff;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  color: #ffffff;
  padding: 6px 14px 6px 12px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(18, 179, 0, 0.28);

  img {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
  }
}

.vps-card__title {
  font-weight: 500;
  font-size: 24px;
  color: #ffffff;
  margin-bottom: 1px;
  line-height: 1.2;
}

.vps-card__text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.2;
}

.price-item__sum {
  white-space: nowrap;
  
  span {
    display: inline !important;
  }
}

.vps-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
}

.vps-card__price {
  font-weight: 500;
  font-size: 19px;
  color: #ffffff;
  display: flex;
  align-items: center;
  white-space: nowrap;

  span {
    font-size: 15px;
  }
}

.vps-card__price-note {
  font-size: 12px;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.7);
}

.vps-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.vps-card__description {
  font-size: 14px;
  color: var(--color-neutral-black);
  margin-bottom: 16px;

  p {
    margin-bottom: 8px;
  }

  ul {
    margin: 8px 0 0;
    padding-left: 18px;
  }
}

.vps-card__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  margin: 0 0 22px;
}

.vps-card__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 500;
  font-size: 14px;
  color: var(--color-neutral-grey);

  .vps-card__item-label {
    flex-shrink: 0;
  }

  .vps-card__item-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
    text-align: right;
    color: var(--color-neutral-black);
  }

  .vps-card__item-text {
    color: var(--color-neutral-black);
  }

  .product-desc__hint {
    margin-left: 0;
    flex-shrink: 0;
  }

  .product-desc__hint-tip {
    left: auto;
    right: 0;
    z-index: 40;
  }

  .product-desc__hint-tip::after {
    left: auto;
    right: 8px;
  }
}

.vps-card__info {
  padding: 0;
  margin: 0 auto 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 300px;
  list-style: none;
  gap: 16px 8px;

  li {
    position: relative;
    padding-left: 24px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.35;
    color: var(--color-neutral-black);

    &::before {
      width: 16px;
      height: 16px;
      content: "";
      position: absolute;
      left: 0;
      top: 0.12em;
      mask: url("../img/icons/check.svg") center/contain no-repeat;
      background: var(--color-status-green);
    }
  }

  .vps-card__info-text {
    display: inline;
  }

  .product-desc__hint {
    margin-left: 4px;
    flex-shrink: 0;
  }

  .product-desc__hint-tip {
    left: 0;
    right: auto;
    z-index: 40;
  }

  .product-desc__hint-tip::after {
    left: 8px;
    right: auto;
  }
}

.vps-card__more {
  background: rgba(128, 128, 128, 0.1);
  border-radius: 24px;
  padding: 6px 8px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
  font-size: 13px;
  white-space: nowrap;
  color: var(--color-neutral-black);
  cursor: pointer;
  width: fit-content;
  margin-inline: auto;
  text-align: center;
}

.vps-card__bottom {
  padding: 0 24px 16px;
  margin-top: auto;

  .button {
    border: 1px solid var(--color-status-green);
    width: 100%;
  }
}

.vps-card__locations-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 10px 0 8px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(0, 102, 247, 0.04);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: visible;
}

.vps-card__locations-label {
  font-size: 12px;
  line-height: 1.3;
  font-weight: 500;
  text-align: center;
  color: var(--color-neutral-grey, #808080);
  letter-spacing: 0.01em;
}

.vps-card__locations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
}

.vps-card__location {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 8px;
}

.vps-card__locations .vps-card__location {
  margin: 0;
  cursor: help;
}

.vps-card__location-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 60;
  translate: -50% 0;
  display: block;
  width: max-content;
  max-width: 220px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #353535;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.vps-card__location-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  border: 5px solid transparent;
  border-top-color: #353535;
}

.vps-card__location:hover .vps-card__location-tooltip,
.vps-card__location:focus-within .vps-card__location-tooltip {
  opacity: 1;
  visibility: visible;
}

.vps-card__locations .vps-card__location img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: 0 0 22px;
}

/* Dedicated servers: horizontal price-item row */
.price-item--highlighted .price-item__extras {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  align-self: center;
}

.price-item--highlighted .price-item__extras .vps-card__more {
  margin: 0 !important;
  white-space: nowrap;
}

.price-item--highlighted .price-item__extras .vps-card__locations-block {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 4px 8px;
  gap: 4px 6px;
  box-shadow: none;
  border-radius: 10px;
  width: 100%;
  max-width: 200px;
}

.price-item--highlighted .price-item__extras .vps-card__locations-label {
  flex: 1 1 72px;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: left;
  margin: 0;
}

.price-item--highlighted .price-item__extras .vps-card__locations {
  flex: 0 0 auto;
  gap: 4px;
  margin: 0;
}

.price-item--highlighted .price-item__extras .vps-card__locations .vps-card__location img {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.vps-card__location img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: 0 0 18px;
}

.vps-card__setup {
  margin-top: 8px;
  font-size: 12px;
  text-align: center;
  color: var(--color-neutral-grey);
}

.button {
}

.button--grey {
}

.price-card,
.price-item {
  position: relative;
}

.price-card {
  position: relative;
  z-index: 50 !important; /* lift card/tooltip above tabs */
}

.price-card__inner {
  position: relative;
  z-index: 50 !important;
  overflow: visible !important; /* allow tooltip to overflow card */
  padding-top: 38px;
}

.vps-card-tooltip {
  position: absolute;
  top: 50%;
  z-index: 9999; /* keep above tabs and neighbour cards */
  left: 50%;
  translate: -50% -50%;
  display: none;
  flex-direction: column;
  padding: 14px 10px 10px;
  gap: 8px;
  width: min(480px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: #ffffff;
  box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 16px;
}

.vps-card-tooltip.active {
  display: flex;
  pointer-events: all;
}

/* Lift the whole card above neighbours while tooltip is open */
.vps-card--tooltip-open,
.vps-card:has(> .vps-card-tooltip.active),
.price-card:has(> .vps-card-tooltip.active),
.price-item-wrapper:has(> .vps-card-tooltip.active),
.price-item:has(> .vps-card-tooltip.active) {
  z-index: 100 !important;
}

/* Tab navigation must stay below an open tooltip */
#pricing:has(.vps-card-tooltip.active) #myTabContent,
.vps-plans:has(.vps-card-tooltip.active) #vpsPlansTabsContent,
.vps-plans:has(.vps-card-tooltip.active) #dedicatedServersTabsContent {
  position: relative;
  z-index: 10;
}

#pricing:has(.vps-card-tooltip.active) #myTab,
.vps-plans:has(.vps-card-tooltip.active) .nav-tabs {
  z-index: 1;
}

body.has-vps-card-tooltip {
  overflow: hidden;
}

/* Mobile: tooltip becomes a bottom-sheet with backdrop */
@media (max-width: 767.98px) {
  .vps-card-tooltip.active {
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    left: 0;
    translate: none;
    width: 100%;
    max-width: 100%;
    max-height: 85vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 20px 20px 0 0;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
    /* Dim page behind sheet — avoid ::before + z-index:-1 (paints over scrolled content) */
    box-shadow:
      0 -8px 30px rgba(0, 0, 0, 0.25),
      0 0 0 100vmax rgba(0, 0, 0, 0.45);
    z-index: 1000000;
    isolation: isolate;
    animation: vps-tooltip-sheet-up 0.25s ease;
  }

  .vps-card-tooltip.active::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    translate: -50% 0;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    z-index: 2;
    pointer-events: none;
  }

  .vps-card-tooltip.active > * {
    position: relative;
    z-index: 1;
  }

  .vps-card-tooltip__title {
    margin-top: 0;
    font-size: 14px;
    line-height: 1.35;
  }

  .vps-card-tooltip__table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: -2px;
    scrollbar-width: thin;
  }

  .vps-card-tooltip .thead {
    padding: 8px 12px;
    min-width: 392px;
  }

  .vps-card-tooltip .tbody .tr {
    padding: 8px 12px;
    min-width: 392px;
  }

  .vps-card-tooltip__table .td:first-child,
  .vps-card-tooltip__table .th:first-child {
    white-space: nowrap;
  }

  .vps-card-tooltip .tr {
    grid-template-columns: minmax(88px, 1.4fr) minmax(76px, 1fr) minmax(88px, 1fr) minmax(40px, 0.55fr);
    gap: 8px;
  }

  .vps-card-tooltip .th {
    font-size: 9px;
    letter-spacing: 0;
    line-height: 1.2;
    white-space: normal;
  }

  .vps-card-tooltip .td {
    font-size: 12px;
    line-height: 1.25;
  }

  .vps-card-tooltip__table .td:nth-child(2),
  .vps-card-tooltip__table .th:nth-child(2),
  .vps-card-tooltip__table .td:nth-child(3),
  .vps-card-tooltip__table .th:nth-child(3),
  .vps-card-tooltip__table .td:nth-child(4),
  .vps-card-tooltip__table .th:nth-child(4) {
    white-space: normal;
  }

  .vps-card-tooltip__text {
    margin-top: 4px;
    line-height: 1.5;
  }

  .vps-card-tooltip__text .product-desc br {
    display: block;
    content: "";
    margin-bottom: 4px;
  }

  .vps-card-tooltip__text .server-features {
    margin-top: 10px;
  }

  .vps-card-tooltip__text .server-features ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0;
  }

  .vps-card-tooltip__text .server-features li {
    padding: 10px 0 !important;
    border-bottom: 1px solid #eee !important;
    font-size: 13px;
    line-height: 1.45;
    color: #353535;
  }

  .vps-card-tooltip__text .server-features li:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  .vps-card-tooltip__close {
    margin-top: 12px;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: #f3f4f6;
    z-index: 2;
  }
}

@keyframes vps-tooltip-sheet-up {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

/* Small phones: tighten the card */
@media (max-width: 479.98px) {
  #dedicated-servers-body .price-item--highlighted {
    padding: 14px;
  }

  .servers-cards .price-item__title {
    font-size: 16px;
  }

  .servers-cards .price-item__size span {
    font-size: 13px;
    padding: 5px 10px;
  }

  .servers-cards .price-item__sum {
    font-size: 20px;
  }
}

.vps-card-tooltip__title {
  font-weight: 500;
  font-size: 13px;
  color: var(--color-neutral-black);
}

.vps-card-tooltip__table {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.vps-card-tooltip__table .thead {
  padding: 8px 10px;
  background: linear-gradient(90deg, #eef2ff 0%, #f4f6fb 100%);
}

.vps-card-tooltip__table .tr {
  display: grid;
  grid-template-columns: minmax(88px, 1.35fr) minmax(82px, 1fr) minmax(96px, 1.15fr) minmax(40px, 0.65fr);
  column-gap: 8px;
  align-items: center;
}

.vps-card-tooltip__table .th {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(53, 53, 53, 0.65);
}

.vps-card-tooltip__table .tbody {
  display: flex;
  flex-direction: column;
}

.vps-card-tooltip__table .td {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-neutral-black);
}

.vps-card-tooltip__table .tbody .tr {
  padding: 8px 10px;
  background: #ffffff;
  border-top: 1px solid #eef0f3;
}

.vps-card-tooltip__table .tbody .tr:first-child {
  border-top: none;
}

.vps-card-tooltip__table .tbody .tr:nth-child(odd) {
  background: #f8fafc;
}

.vps-card-tooltip__table .tbody .tr:hover {
  background: #eef6ff;
}

.vps-card-tooltip__table .td:first-child,
.vps-card-tooltip__table .th:first-child {
  text-align: left;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.vps-card-tooltip__table .td:nth-child(2),
.vps-card-tooltip__table .th:nth-child(2),
.vps-card-tooltip__table .td:nth-child(3),
.vps-card-tooltip__table .th:nth-child(3) {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.vps-card-tooltip__table .td:nth-child(4),
.vps-card-tooltip__table .th:nth-child(4) {
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.vps-card-tooltip__text {
  font-size: 13px;
  color: rgba(53, 53, 53, 0.5);

  p {
    color: inherit;
    font: inherit;
  }
}

.vps-card-tooltip__list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 3px;
}

.vps-card-tooltip__text--dark {
  color: var(--color-neutral-black);
}

.vps-card-tooltip__item {
  font-size: 13px;
  color: rgba(53, 53, 53, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  span {
    color: var(--color-neutral-black);
    text-align: right;
  }
}

.vps-card-tooltip__close {
  margin-top: 8px;
  padding: 8px 16px;
  border: none;
  background: #f3f4f6;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-neutral-black);
  transition: all 0.2s ease;
  width: 100%;

  &:hover {
    background: #e5e7eb;
  }

  &:active {
    transform: scale(0.98);
  }

  svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
  }
}

.vps-card--accent {
  .vps-card__head {
    background: linear-gradient(180deg, #12b300 0%, #084d00 100%);
  }

  &::after {
    background: var(--color-status-green);
  }
}

/* VPS Tabs */
.about-hero__text,
.about-offer__text,
.about-tech__text {
  p {
    font: inherit;
    color: inherit;
  }
}

.vps-filter__toggle {
  display: none;
  outline: none !important;
}

.vps-filter__actions {
  display: flex;
  gap: 16px;

  .button {
    flex: 1;
  }
}

/* Breadcrumbs — ForceVPS UI (cart-ui-style tokens) */
.breadcrumb-container {
  padding: 16px 0 8px;
}

.breadcrumb-container + .clientarea-features-panel {
  padding-top: 0 !important;
}

.breadcrumb-container .container {
  max-width: 1320px;
}

.forcevps-breadcrumb-nav {
  display: block;
}

.forcevps-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.forcevps-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  line-height: 1.4;
  color: #6b7280;
}

.forcevps-breadcrumb__item:not(:last-child)::after {
  content: "/";
  margin: 0 10px;
  color: rgba(0, 102, 247, 0.28);
  font-weight: 400;
  pointer-events: none;
}

.forcevps-breadcrumb__link {
  color: var(--color-primary-blue, #0066f7);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.forcevps-breadcrumb__link:hover {
  color: #003c91;
  text-decoration: none;
}

.forcevps-breadcrumb__item--active,
.forcevps-breadcrumb__current {
  color: var(--color-neutral-black, #1e1e1e);
  font-weight: 600;
}

@media (max-width: 767.98px) {
  .breadcrumb-container {
    padding: 12px 0 6px;
  }

  .forcevps-breadcrumb__item {
    font-size: 12px;
  }

  .forcevps-breadcrumb__item:not(:last-child)::after {
    margin: 0 8px;
  }
}

@media (min-width: 768px) {
  .mobile {
    display: none !important;
  }
}

/* ~1440px desktops: nudge a bit more width to the title column (before 1920 layout) */
@media (min-width: 1320px) and (max-width: 1919.98px) {
  #dedicated-servers-body .price-item--highlighted {
    grid-template-columns:
      minmax(0, 1.7fr) minmax(0, 1.5fr) minmax(140px, auto) minmax(150px, auto) minmax(150px, auto);
  }

  #dedicated-servers-body .servers-cards .price-item__info {
    min-width: min-content;
  }
}

/* Large desktops (> Full HD): filter + product cards */
@media (min-width: 1920px) {
  #vps-body .vps-plans > .container {
    max-width: 1680px;
  }

  #dedicated-servers-body .vps-plans > .container {
    max-width: 1680px;
  }

  #dedicated-servers-body .vps-plans > .container-fluid {
    padding-left: clamp(32px, 4vw, 96px);
    padding-right: clamp(32px, 4vw, 96px);
  }

  .vps-tab-content__body {
    gap: 32px;
  }

  #dedicated-servers-body .vps-tab-content__body {
    max-width: 2280px;
    margin-inline: auto;
  }

  .vps-filter {
    width: 360px;
    padding: 20px;
    border-radius: 36px;
    top: 100px;
  }

  .vps-filter__count {
    font-size: 15px;
  }

  .vps-filter__title {
    font-size: 15px;
  }

  .vps-filter__radios .radio-input__label {
    font-size: 14px;
  }

  .servers-cards {
    gap: 20px;
  }

  #dedicated-servers-body .price-item--highlighted {
    grid-template-columns:
      minmax(200px, 1.35fr)
      minmax(260px, 1.75fr)
      minmax(150px, 200px)
      minmax(170px, 220px)
      minmax(150px, 180px);
    gap: 16px 28px;
    padding: 20px 28px;
  }

  .servers-cards .price-item__title {
    font-size: 20px;
  }

  .servers-cards .price-item__text {
    font-size: 15px;
  }

  .servers-cards .price-item__size span {
    font-size: 15px;
    padding: 7px 14px;
  }

  .servers-cards .price-item__sum {
    font-size: 24px;
  }

  .servers-cards .price-item__sum span {
    font-size: 14px;
  }

  .servers-cards .price-item--highlighted > .button {
    min-width: 160px;
    padding-inline: 24px;
  }

  .price-item--highlighted .price-item__extras .vps-card__locations-block {
    max-width: 240px;
  }

  #vps-body .vps-cards {
    gap: 28px;
  }
}

@media (min-width: 2560px) {
  #vps-body .vps-plans > .container,
  #dedicated-servers-body .vps-plans > .container {
    max-width: 1920px;
  }

  #dedicated-servers-body .vps-plans > .container-fluid {
    padding-left: clamp(48px, 5vw, 128px);
    padding-right: clamp(48px, 5vw, 128px);
  }

  .vps-tab-content__body {
    gap: 40px;
  }

  #dedicated-servers-body .vps-tab-content__body {
    max-width: 2520px;
  }

  .vps-filter {
    width: 400px;
    padding: 24px;
  }

  #dedicated-servers-body .price-item--highlighted {
    grid-template-columns:
      minmax(220px, 1.4fr)
      minmax(300px, 1.85fr)
      minmax(170px, 220px)
      minmax(190px, 240px)
      minmax(170px, 200px);
    gap: 18px 36px;
    padding: 22px 36px;
  }

  .servers-cards .price-item__title {
    font-size: 22px;
  }

  .servers-cards .price-item__sum {
    font-size: 26px;
  }

  .vps-tab-content__title {
    font-size: 36px;
  }
}

/* Tablet: two rows (info+specs on top, sum/extras/cta below) */
@media (max-width: 1199.98px) {
  #dedicated-servers-body .price-item--highlighted {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "info info"
      "specs specs"
      "sum extras"
      "cta cta";
    align-items: center;
    gap: 14px 16px;
  }

  #dedicated-servers-body .price-item--highlighted .price-item__sum {
    align-items: flex-start;
    justify-self: start;
    text-align: left;
  }

  #dedicated-servers-body .price-item--highlighted > .button {
    width: 100%;
  }

  #dedicated-servers-body .price-item--highlighted .price-item__extras {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px 12px;
  }

  #dedicated-servers-body .price-item--highlighted .price-item__extras .vps-card__locations-block {
    max-width: none;
    flex: 0 1 auto;
  }
}

@media (max-width: 1023.98px) {
  .title-lg {
    font-size: 40px;
  }

  .vps-cards,
  .servers-for__cards,
  .partner-for-whom__cards,
  .about-tech__items,
  .about-team__items {
    grid-template-columns: auto;
  }

  #partnership-program-body .partner-benefits__items {
    grid-template-columns: auto;
  }

  .about-team__block {
    width: 100%;
  }

  .vps-create__body {
    flex-direction: column;
  }

  .vps-create__form {
    flex-direction: column;
  }

  .server-card__decor {
    right: 10%;
  }

  .vps-create,
  .servers-for {
    margin: 150px 0;
  }

  .vps-create-total {
    width: 100%;
  }

  .vps-filter {
    width: 250px;
  }

  .vps-tab-content {
    margin-top: 40px;
  }
}

@media (max-width: 767.98px) {
  .about-banner__title,
  .about-centers__title,
  .title-md,
  .title-lg {
    font-size: 24px;
  }

  .vps-create-calculator {
    overflow: hidden;
  }

  .about-banner__text,
  .about-offer__text,
  .about-team__text,
  .about-centers__text,
  .about-tech__text,
  .description {
    font-size: 14px;
  }

  .main-hero__actions {
    flex-direction: column;
    gap: 12px;

    .button {
      width: 100%;
      flex: none;
    }
  }

  .main-hero__item {
    flex: 1;
  }

  .vps-tab-content__body {
    flex-direction: column;
  }

  .vps-group-benefits {
    margin-bottom: 20px;
    padding: 12px;
    border-radius: 14px;
  }

  .vps-group-benefits__heading {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.4;
  }

  .vps-group-benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .vps-group-benefits__item {
    align-items: flex-start;
    gap: 8px;
    min-height: 0;
    padding: 10px;
    border-radius: 12px;
  }

  .vps-group-benefits__item:hover {
    transform: none;
  }

  .vps-group-benefits__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .vps-group-benefits__icon-glyph {
    width: 16px;
    height: 16px;
  }

  .vps-group-benefits__content {
    gap: 3px;
  }

  .vps-group-benefits__title {
    font-size: 12px;
    line-height: 1.35;
  }

  .vps-group-benefits__text {
    font-size: 11px;
    line-height: 1.45;
  }

  .vps-create-calculator__item-grid,
  .about-team__inner,
  .about-centers__items,
  .vps-create-calculator__item {
    grid-template-columns: auto;
  }

  .vps-create-calculator__item-grid {
    & .vps-create-calculator__item-line {
      &:nth-child(even) {
        margin-left: 0;
      }
    }

    .vps-create-calculator__item-line {
      width: 100%;
      max-width: none;
    }
  }

  .vps-create-calculator__item-block {
    width: 100%;

    .nice-select {
      flex: 1;
      max-width: none;
    }

  }

  .vps-create-calculator__range {
    order: 1;
    margin-bottom: 20px;
    width: 100%;
  }

  .vps-create-calculator__block {
    flex-direction: column;
    align-items: flex-start;

    .vps-create-calculator__range {
      order: 0;
    }
  }

  .servers-for__head {
    margin-bottom: 80px;
  }

  .servers-for__cards {
    &::after {
      width: 150px;
    }
  }

  .about-tech-item__text,
  .about-tech__block-text,
  .about-hero__text {
    font-size: 14px;
  }

  .about-hero-banner__title {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .about-hero-banner__text {
    font-size: 16px;
  }

  .about-hero-banner {
    padding: 16px;
  }

  #partnership-program-body .partner-hero__subtitle,
  #partnership-program-body .partner-hero-banner__text {
    font-size: 14px;
  }

  #partnership-program-body .partner-hero-banner {
    padding: 16px;
  }

  #partnership-program-body .partner-hero__actions {
    flex-direction: column;

    .button {
      flex: 1 1 auto;
      width: 100%;
    }
  }

  #contacts-body .contacts-page {
    padding: 64px 0 48px;
  }

  #contacts-body .contacts-hero {
    padding: 40px 16px 24px;
  }

  #contacts-body .contacts-content {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 16px 32px;
  }

  #contacts-body .contacts-card {
    padding: 20px;
  }

  #contacts-body .contacts-email-list__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  #partnership-program-body .partner-for-whom,
  #partnership-program-body .partner-how,
  #partnership-program-body .partner-benefits,
  #partnership-program-body .partner-rewards {
    margin: 64px 0;
  }

  #partnership-program-body .partner-how__steps.cart-steps {
    padding: 24px 20px;
    border-radius: 16px;
  }

  #partnership-program-body .cart-steps__list {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  #partnership-program-body .cart-steps__item {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  #partnership-program-body .cart-steps__divider {
    flex: 0 0 auto;
    width: 2px;
    min-width: 2px;
    height: 24px;
    margin: 0;
    align-self: center;
  }

  #partnership-program-body .partner-banner {
    padding: 32px 0 64px;
  }

  #partnership-program-body .partner-banner__inner {
    padding: 32px 24px;
    border-radius: 20px;
  }

  #partnership-program-body .partner-banner__title {
    font-size: 24px;
  }

  .about-tech__inner {
    flex-direction: column-reverse;
  }

  .about-tech__content {
    padding: 0;
  }

  .about-tech__block-title {
    font-size: 18px;
  }

  .about-tech__block {
    margin: 24px 0;
  }

  .about-tech-item__title {
    font-size: 16px;
    margin-bottom: 4px;
  }

  .about-center__title {
    font-size: 18px;
  }

  .about-offer__center {
    flex-direction: column;
  }

  .about-offer__cards {
    grid-template-columns: auto;
    gap: 16px;
  }

  #dedicated-servers-body .price-item--highlighted {
    grid-template-columns: 1fr;
    grid-template-areas:
      "info"
      "specs"
      "sum"
      "extras"
      "cta";
    align-items: stretch;
    gap: 14px;
    padding: 16px;
  }

  #dedicated-servers-body .price-item--highlighted .price-item__sum {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 6px;
    align-self: flex-start;
  }

  #dedicated-servers-body .price-item--highlighted .price-item__extras {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px 12px;
  }

  #dedicated-servers-body .price-item--highlighted .price-item__extras .vps-card__locations-block {
    max-width: none;
  }

  #dedicated-servers-body .price-item--highlighted > .button {
    width: 100%;
  }

  .server-card__title {
    font-size: 20px;
  }

  .server-card__text {
    font-size: 14px;
  }

  .vps-filter-wrapper {
    margin-left: auto;
  }

  .vps-filter__toggle {
    border: none;
    outline: none;
    background-color: transparent;
    color: var(--color-neutral-black);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    aspect-ratio: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    background: rgba(0, 0, 0, 0.001);
    box-shadow: 0px 4px 14.3px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 8px;
    position: relative;

    &::before {
      position: absolute;
      border-radius: inherit;
      z-index: -1;
      inset: 0;
      content: "";
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      background-image: linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 100%
      );
    }

    &::after {
      position: absolute;
      inset: 0;
      content: "";
      z-index: -1;
      background: linear-gradient(
        45deg,
        #fff 0%,
        transparent 50%,
        #fff 75%,
        transparent 100%
      );
      border-radius: inherit;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      mask-composite: exclude;
      -webkit-mask-composite: xor;
      padding: 1px;
    }
  }

  .vps-filter {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-bottom: 0;
    gap: 0;
    align-self: auto;
    opacity: 0;
    translate: 0 16px;
    transition: opacity 0.3s ease, translate 0.3s ease, visibility 0.3s ease;
    visibility: hidden;
    pointer-events: none;

    &.is-open {
      opacity: 1;
      translate: 0 0;
      visibility: visible;
      pointer-events: auto;
    }
  }

  .vps-filter__head {
    margin-bottom: 0;
    padding-bottom: 12px;
    flex-shrink: 0;
  }

  .vps-filter__head .vps-filter__reset {
    display: none;
  }

  .vps-filter__inner {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 16px;
    padding-right: 0;
    margin-right: 0;
  }

  .vps-filter__item {
    gap: 10px;
  }

  .vps-filter__radios {
    gap: 6px;
  }

  .vps-filter__radios .radio-input {
    padding: 7px 10px 7px 34px;
  }

  .vps-filter__radios .radio-input::before {
    width: 18px;
    left: 9px;
  }

  .vps-filter__radios .radio-input::after {
    width: 9px;
    left: 13.5px;
  }

  .vps-filter .mobile {
    flex-shrink: 0;
    margin-top: auto;
    padding: 12px 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: #ffffff;
  }

  .vps-filter__actions {
    padding-top: 0;
  }

  .vps-create-calculator__select {
    overflow: hidden;
    padding: 10px;
    margin: -10px;
  }

  .vps-create-calculator__item {
    & .nice-select {
      .current {
        font-size: 14px;
      }
    }
  }
}

.main-page-contents.white-bg.rounded-25 {
  --clientarea-feature-surface: #fff;
  --clientarea-feature-border: rgba(0, 102, 247, 0.08);
  background: var(--clientarea-feature-surface);
  border-radius: 25px;
  box-shadow: -5px 10px 73.9px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--clientarea-feature-border);
  overflow: visible;
}

.nav-scroller-subpages.bg-default.shadow-2.px-8.mb-4 {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
  overflow: hidden;
}

.table-container {
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.72));
  padding: 24px;
  overflow: hidden;
  box-shadow: -8px 25px 65px rgba(13, 17, 38, 0.12);
}

.table-container::after {
  content: "";
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 16px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 0, rgba(0, 0, 0, 0.08), transparent 60%);
  opacity: 0.35;
}

.table-container__scroller {
  overflow-x: auto;
  margin: 0 -8px;
  padding: 0 8px 12px;
}

.table-container__scroller::-webkit-scrollbar {
  height: 8px;
}

.table-container__scroller::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 999px;
}

.table-container__scroller::-webkit-scrollbar-thumb {
  background: rgba(0, 102, 247, 0.35);
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Client area — unified list tables (DataTables + table.table-list)
   -------------------------------------------------------------------------- */

/* Reset legacy whmcs.theme / styles.table-list inside client area */
.main-page-contents .dataTables_wrapper table.table-list {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: none;
  scale: none;
}

.main-page-contents .dataTables_wrapper table.table-list thead th {
  border-bottom: 0 !important;
  box-shadow: none !important;
  border-top: 0;
}

.main-page-contents .dataTables_wrapper table.table-list thead th:nth-child(even) {
  border-bottom-color: transparent !important;
}

.main-page-contents .table-container table.table-list {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.85));
  border: 1px solid var(--clientarea-feature-border, rgba(0, 102, 247, 0.08));
  border-radius: 24px;
  box-shadow: none !important;
  overflow: hidden;
}

.main-page-contents .table-container table.table-list thead.ca-table__head,
.main-page-contents .table-container table.table-list thead {
  background: linear-gradient(
    180deg,
    rgba(0, 102, 247, 0.08) 0%,
    rgba(0, 102, 247, 0.03) 55%,
    rgba(255, 255, 255, 0.95) 100%
  );
}

.main-page-contents .table-container table.table-list thead.ca-table__head tr,
.main-page-contents .table-container table.table-list thead tr {
  border-bottom: 1px solid rgba(0, 102, 247, 0.14);
}

.main-page-contents .table-container table.table-list thead th {
  padding: 15px 20px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: rgba(31, 36, 48, 0.66);
  background: transparent;
  border-bottom: 0;
  white-space: nowrap;
  vertical-align: middle;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.main-page-contents .table-container table.table-list thead th:first-child {
  border-top-left-radius: 24px;
}

.main-page-contents .table-container table.table-list thead th:last-child {
  border-top-right-radius: 24px;
}

.main-page-contents .table-container table.table-list tbody td {
  padding: 18px 20px;
  font-size: 14px;
  color: rgba(31, 36, 48, 0.85);
  background: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(0, 102, 247, 0.06);
  vertical-align: middle;
}

.main-page-contents .table-container table.table-list tbody tr:last-child td {
  border-bottom: 0;
}

.main-page-contents .table-container table.table-list tbody tr:last-child td:first-child {
  border-bottom-left-radius: 24px;
}

.main-page-contents .table-container table.table-list tbody tr:last-child td:last-child {
  border-bottom-right-radius: 24px;
}

.main-page-contents .table-container table.table-list tbody tr:hover td {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 0 0 100vw rgba(0, 102, 247, 0.04);
}

/* Services list — separate row click (manage) from domain link (visit site) */
.main-page-contents #tableServicesList tbody tr {
  cursor: pointer;
}

.main-page-contents #tableServicesList .ca-service-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.main-page-contents #tableServicesList .ca-service-cell__manage {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.main-page-contents #tableServicesList .ca-service-cell__name {
  font-weight: 600;
  color: rgba(31, 36, 48, 0.92);
}

.main-page-contents #tableServicesList .ca-service-cell__hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(31, 36, 48, 0.45);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.main-page-contents #tableServicesList tbody tr:hover .ca-service-cell__hint {
  opacity: 1;
  transform: translateX(0);
  color: var(--color-primary-blue, #0066f7);
}

.main-page-contents #tableServicesList .ca-service-cell__hint .feather {
  font-size: 14px;
  line-height: 1;
}

.main-page-contents #tableServicesList .ca-service-cell__site {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 102, 247, 0.06);
  border: 1px solid rgba(0, 102, 247, 0.14);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-primary-blue, #0066f7);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.main-page-contents #tableServicesList .ca-service-cell__site:hover,
.main-page-contents #tableServicesList .ca-service-cell__site:focus {
  background: rgba(0, 102, 247, 0.12);
  border-color: rgba(0, 102, 247, 0.28);
  box-shadow: 0 4px 12px rgba(0, 102, 247, 0.12);
  color: var(--color-primary-blue, #0066f7);
  text-decoration: none;
}

.main-page-contents #tableServicesList .ca-service-cell__site .feather {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1;
  opacity: 0.85;
}

.main-page-contents #tableServicesList .ca-service-cell__site-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(100%, 240px);
}

.main-page-contents #tableServicesList .ca-service-cell__no-site {
  font-size: 13px;
  color: rgba(31, 36, 48, 0.45);
}

.main-page-contents .table-container table.table-list tbody .dataTables_empty {
  text-align: center;
  font-size: 15px;
  color: rgba(31, 36, 48, 0.6);
  padding: 32px 12px;
}

/* Column alignment utilities */
.main-page-contents .table-container table.table-list th.ca-table__col--left,
.main-page-contents .table-container table.table-list td.ca-table__col--left {
  text-align: left;
}

.main-page-contents .table-container table.table-list th.ca-table__col--center,
.main-page-contents .table-container table.table-list td.ca-table__col--center {
  text-align: center;
}

.main-page-contents .table-container table.table-list th.ca-table__col--icon,
.main-page-contents .table-container table.table-list td.ca-table__col--icon {
  text-align: center;
  width: 64px;
}

.main-page-contents .table-container table.table-list td.ca-table__col--icon img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.main-page-contents .table-container table.table-list th.ca-table__col--checkbox,
.main-page-contents .table-container table.table-list td.ca-table__col--checkbox {
  text-align: center;
  width: 48px;
}

.main-page-contents .table-container table.table-list thead th.sorting,
.main-page-contents .table-container table.table-list thead th.sorting_asc,
.main-page-contents .table-container table.table-list thead th.sorting_desc {
  padding-right: 34px !important;
  cursor: pointer;
  user-select: none;
}

.main-page-contents .table-container table.table-list thead th.sorting:hover,
.main-page-contents .table-container table.table-list thead th.sorting_asc:hover,
.main-page-contents .table-container table.table-list thead th.sorting_desc:hover {
  color: var(--color-primary-blue, #0066f7);
  background: rgba(0, 102, 247, 0.06);
}

.main-page-contents .table-container table.table-list thead th.sorting_asc,
.main-page-contents .table-container table.table-list thead th.sorting_desc {
  color: var(--color-primary-blue, #0066f7);
  background: rgba(0, 102, 247, 0.07);
  box-shadow: inset 0 -2px 0 var(--color-primary-blue, #0066f7);
}

.main-page-contents .table-container table.table-list thead th.sorting_disabled,
.main-page-contents .table-container table.table-list thead th.ca-table__col--icon,
.main-page-contents .table-container table.table-list thead th.ca-table__col--checkbox {
  cursor: default;
  letter-spacing: 0;
  text-transform: none;
}

.main-page-contents .table-container table.table-list thead th.sorting_disabled {
  padding-left: 14px !important;
  padding-right: 14px !important;
  width: 1%;
}

.main-page-contents .table-container table.table-list thead th.ca-table__col--icon,
.main-page-contents .table-container table.table-list thead th.ca-table__col--checkbox {
  padding-left: 12px;
  padding-right: 12px;
}

/* DataTables sort arrows — symmetric triangles on one vertical axis */
.main-page-contents .table-container table.table-list thead th.sorting:before,
.main-page-contents .table-container table.table-list thead th.sorting:after,
.main-page-contents .table-container table.table-list thead th.sorting_asc:before,
.main-page-contents .table-container table.table-list thead th.sorting_asc:after,
.main-page-contents .table-container table.table-list thead th.sorting_desc:before,
.main-page-contents .table-container table.table-list thead th.sorting_desc:after,
.main-page-contents .dataTables_wrapper table.table-list thead th.sorting:before,
.main-page-contents .dataTables_wrapper table.table-list thead th.sorting:after,
.main-page-contents .dataTables_wrapper table.table-list thead th.sorting_asc:before,
.main-page-contents .dataTables_wrapper table.table-list thead th.sorting_asc:after,
.main-page-contents .dataTables_wrapper table.table-list thead th.sorting_desc:before,
.main-page-contents .dataTables_wrapper table.table-list thead th.sorting_desc:after {
  content: "" !important;
  display: block;
  position: absolute;
  right: 15px;
  left: auto;
  bottom: auto;
  width: 0;
  height: 0;
  margin: 0;
  font-size: 0;
  line-height: 0;
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: 1;
  transform: none;
  transition: border-color 0.2s ease;
}

.main-page-contents .table-container table.table-list thead th.sorting:before,
.main-page-contents .table-container table.table-list thead th.sorting_asc:before,
.main-page-contents .table-container table.table-list thead th.sorting_desc:before,
.main-page-contents .dataTables_wrapper table.table-list thead th.sorting:before,
.main-page-contents .dataTables_wrapper table.table-list thead th.sorting_asc:before,
.main-page-contents .dataTables_wrapper table.table-list thead th.sorting_desc:before {
  top: calc(50% - 8px);
  border-top: none;
  border-bottom: 5px solid rgba(0, 102, 247, 0.22);
}

.main-page-contents .table-container table.table-list thead th.sorting:after,
.main-page-contents .table-container table.table-list thead th.sorting_asc:after,
.main-page-contents .table-container table.table-list thead th.sorting_desc:after,
.main-page-contents .dataTables_wrapper table.table-list thead th.sorting:after,
.main-page-contents .dataTables_wrapper table.table-list thead th.sorting_asc:after,
.main-page-contents .dataTables_wrapper table.table-list thead th.sorting_desc:after {
  top: calc(50% + 3px);
  border-bottom: none;
  border-top: 5px solid rgba(0, 102, 247, 0.22);
}

.main-page-contents .table-container table.table-list thead th.sorting_asc:before,
.main-page-contents .dataTables_wrapper table.table-list thead th.sorting_asc:before {
  border-bottom-color: var(--color-primary-blue, #0066f7);
}

.main-page-contents .table-container table.table-list thead th.sorting_desc:after,
.main-page-contents .dataTables_wrapper table.table-list thead th.sorting_desc:after {
  border-top-color: var(--color-primary-blue, #0066f7);
}

.main-page-contents .table-container table.table-list thead th.sorting_asc:after,
.main-page-contents .dataTables_wrapper table.table-list thead th.sorting_asc:after {
  border-top-color: rgba(0, 102, 247, 0.16);
}

.main-page-contents .table-container table.table-list thead th.sorting_desc:before,
.main-page-contents .dataTables_wrapper table.table-list thead th.sorting_desc:before {
  border-bottom-color: rgba(0, 102, 247, 0.16);
}

.main-page-contents .table-container table.table-list thead th.sorting:hover:before,
.main-page-contents .table-container table.table-list thead th.sorting:hover:after,
.main-page-contents .table-container table.table-list thead th.sorting_asc:hover:after,
.main-page-contents .table-container table.table-list thead th.sorting_desc:hover:before,
.main-page-contents .dataTables_wrapper table.table-list thead th.sorting:hover:before,
.main-page-contents .dataTables_wrapper table.table-list thead th.sorting:hover:after,
.main-page-contents .dataTables_wrapper table.table-list thead th.sorting_asc:hover:after,
.main-page-contents .dataTables_wrapper table.table-list thead th.sorting_desc:hover:before {
  border-bottom-color: rgba(0, 102, 247, 0.42);
  border-top-color: rgba(0, 102, 247, 0.42);
}

.main-page-contents .table-container table.table-list thead th.ca-table__col--center.sorting:before,
.main-page-contents .table-container table.table-list thead th.ca-table__col--center.sorting:after,
.main-page-contents .table-container table.table-list thead th.ca-table__col--center.sorting_asc:before,
.main-page-contents .table-container table.table-list thead th.ca-table__col--center.sorting_asc:after,
.main-page-contents .table-container table.table-list thead th.ca-table__col--center.sorting_desc:before,
.main-page-contents .table-container table.table-list thead th.ca-table__col--center.sorting_desc:after,
.main-page-contents .dataTables_wrapper table.table-list thead th.ca-table__col--center.sorting:before,
.main-page-contents .dataTables_wrapper table.table-list thead th.ca-table__col--center.sorting:after,
.main-page-contents .dataTables_wrapper table.table-list thead th.ca-table__col--center.sorting_asc:before,
.main-page-contents .dataTables_wrapper table.table-list thead th.ca-table__col--center.sorting_asc:after,
.main-page-contents .dataTables_wrapper table.table-list thead th.ca-table__col--center.sorting_desc:before,
.main-page-contents .dataTables_wrapper table.table-list thead th.ca-table__col--center.sorting_desc:after {
  right: 13px;
}

/* DataTables controls inside client area list tables (cart UI tokens) */
.main-page-contents .table-container .dataTables_wrapper .dataTables_length select,
.main-page-contents .table-container .dataTables_wrapper .dataTables_length label select.form-control,
.main-page-contents .table-container .dataTables_wrapper .dataTables_length label select.custom-select,
.main-page-contents .table-container .dataTables_wrapper .dataTables_length label select.custom-select-sm,
.main-page-contents .table-container .dataTables_wrapper .dataTables_length label select.form-control-sm {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  min-width: 72px;
  max-width: 88px;
  width: auto;
  height: 36px !important;
  padding: 8px 30px 8px 16px !important;
  border: 1px solid rgba(0, 102, 247, 0.18) !important;
  border-radius: 29px;
  background-color: #fff;
  background-image: url("../img/select-chevron.svg");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px auto;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08), 0px 2px 8px rgba(15, 15, 15, 0.06);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: center !important;
  text-align-last: center !important;
}

.main-page-contents .table-container .dataTables_wrapper .dataTables_length label,
.main-page-contents .table-container .dataTables_wrapper .dataTables_filter label {
  font-size: 14px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.main-page-contents .dataTables_wrapper .dataTables_filter input[type="search"].form-control,
.main-page-contents .table-container .dataTables_wrapper .dataTables_filter input {
  width: auto;
  min-width: 180px;
  max-width: 280px;
  height: 36px;
  border: 1px solid rgba(0, 102, 247, 0.18);
  border-radius: 29px;
  padding: 8px 16px 8px 40px;
  font-size: 14px;
  background-color: #fff;
  background-image: url("../img/icons/search.svg");
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 16px 16px;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08), 0px 2px 8px rgba(15, 15, 15, 0.06);
}

.main-page-contents .table-container .dataTables_wrapper .dataTables_info {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 12px;
}

.main-page-contents .table-container .dataTables_wrapper .dataTables_paginate {
  margin-top: 12px;
}

.main-page-contents .table-container .dataTables_wrapper .dataTables_paginate ul.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.main-page-contents .table-container .dataTables_wrapper .dataTables_paginate .page-item {
  margin: 0;
  list-style: none;
}

.main-page-contents .table-container .dataTables_wrapper .dataTables_paginate .page-item.paginate_button {
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.main-page-contents .table-container .dataTables_wrapper .dataTables_paginate .page-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 6px 14px !important;
  margin: 0 !important;
  border-radius: 20px !important;
  border: 1px solid rgba(0, 102, 247, 0.12) !important;
  color: var(--color-primary-blue, #0066f7) !important;
  background: #fff !important;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  box-shadow: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.main-page-contents .table-container .dataTables_wrapper .dataTables_paginate .page-item:first-child .page-link,
.main-page-contents .table-container .dataTables_wrapper .dataTables_paginate .page-item:last-child .page-link {
  border-radius: 20px !important;
  margin-left: 0 !important;
}

.main-page-contents .table-container .dataTables_wrapper .dataTables_paginate .page-link:hover,
.main-page-contents .table-container .dataTables_wrapper .dataTables_paginate .page-link:focus {
  border-color: rgba(0, 102, 247, 0.35) !important;
  color: var(--color-primary-blue, #0066f7) !important;
  background: rgba(0, 102, 247, 0.06) !important;
  box-shadow: none !important;
}

.main-page-contents .table-container .dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
.main-page-contents .table-container .dataTables_wrapper .dataTables_paginate .page-item.active .page-link:hover,
.main-page-contents .table-container .dataTables_wrapper .dataTables_paginate .page-item.active .page-link:focus {
  background: var(--color-primary-blue, #0066f7) !important;
  border-color: var(--color-primary-blue, #0066f7) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.main-page-contents .table-container .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link,
.main-page-contents .table-container .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link:hover,
.main-page-contents .table-container .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link:focus {
  color: #9ca3af !important;
  background: #f3f4f6 !important;
  border-color: rgba(0, 102, 247, 0.08) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* Tickets: subject link without heavy border-left */
.main-page-contents .table-container #tableTicketsList .border-left {
  border-left: 0;
  padding-left: 0;
}

@media (max-width: 1200px) {
  .main-page-contents .table-container {
    padding: 20px;
  }

  .main-page-contents .table-container table.table-list thead th,
  .main-page-contents .table-container table.table-list tbody td {
    padding: 16px;
  }

  .main-page-contents .table-container table.table-list {
    min-width: 620px;
  }

  .main-page-contents .table-container .dataTables_wrapper .dataTables_filter label,
  .main-page-contents .table-container .dataTables_wrapper .dataTables_length label {
    flex-wrap: wrap;
    gap: 6px;
  }
}

@media (max-width: 992px) {
  .main-page-contents .table-container .dataTables_wrapper .row {
    flex-direction: column;
    gap: 16px;
  }

  .main-page-contents .table-container .dataTables_wrapper .dataTables_length,
  .main-page-contents .table-container .dataTables_wrapper .dataTables_filter,
  .main-page-contents .table-container .dataTables_wrapper .dataTables_paginate {
    text-align: left;
    width: 100%;
  }

  .main-page-contents .table-container .dataTables_wrapper .dataTables_paginate {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .main-page-contents .table-container .dataTables_wrapper .dataTables_paginate .page-item {
    flex: 1 1 auto;
  }

  .main-page-contents .table-container .dataTables_wrapper .dataTables_paginate .page-link {
    width: 100%;
    justify-content: center;
  }
}

/* DataTables Responsive artifacts (dtr-control column, child rows) must never
   render inside client area list tables — stacked cards handle mobile. */
:is(.main-page-contents, .network-status-page) .table-container table.table-list td.dtr-control,
:is(.main-page-contents, .network-status-page) .table-container table.table-list th.dtr-control,
:is(.main-page-contents, .network-status-page) .table-container table.table-list tr.child {
  display: none !important;
}

@media (max-width: 768px) {
  .main-page-contents .table-container,
  .network-status-page .table-container {
    padding: 18px 16px;
  }

  .main-page-contents .table-container::after {
    margin-top: 10px;
  }

  :is(.main-page-contents, .network-status-page) .table-container__scroller {
    overflow-x: visible;
    margin: 0;
    padding: 0;
  }

  :is(.main-page-contents, .network-status-page) .table-container table.table-list {
    min-width: unset;
    border: none;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  :is(.main-page-contents, .network-status-page) .table-container table.table-list,
  :is(.main-page-contents, .network-status-page) .table-container table.table-list thead,
  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody,
  :is(.main-page-contents, .network-status-page) .table-container table.table-list th,
  :is(.main-page-contents, .network-status-page) .table-container table.table-list td,
  :is(.main-page-contents, .network-status-page) .table-container table.table-list tr {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  :is(.main-page-contents, .network-status-page) .table-container table.table-list thead {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  /* Each row becomes a card */
  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody tr {
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid rgba(0, 102, 247, 0.08);
    border-radius: 20px;
    margin-bottom: 16px;
    padding: 0;
    box-shadow: 0 14px 30px rgba(13, 17, 38, 0.08);
    background: rgba(255, 255, 255, 0.95);
    overflow: hidden;
  }

  /* Detail rows: label on the left, value on the right */
  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    position: static;
    border-bottom: 0;
    border-radius: 0 !important;
    padding: 11px 16px;
    background: transparent;
    min-height: 0;
    text-align: right;
  }

  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody td::before {
    content: attr(data-label);
    position: static;
    flex: 0 1 46%;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -0.01em;
    color: rgba(31, 36, 48, 0.65);
    text-transform: none;
  }

  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody td[data-label=""]::before,
  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody td:not([data-label])::before {
    content: none;
  }

  /* First left-aligned cell is the card header */
  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody td.ca-table__col--left {
    display: block;
    order: -1;
    padding: 14px 48px 12px 16px;
    border-bottom: 1px solid rgba(0, 102, 247, 0.08);
    text-align: left;
    font-size: 15px;
  }

  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody td.ca-table__col--left::before {
    content: none;
  }

  /* Subsequent left cells (e.g. SSL product column) fall back to detail rows */
  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody td.ca-table__col--left ~ td.ca-table__col--left {
    display: flex;
    order: 0;
    padding: 11px 16px;
    border-bottom: 0;
    text-align: right;
    font-size: 14px;
  }

  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody td.ca-table__col--left ~ td.ca-table__col--left::before {
    content: attr(data-label);
  }

  /* Icon / checkbox cells live in the card corners instead of own rows */
  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody td.ca-table__col--icon,
  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody td.ca-table__col--checkbox {
    display: block;
    position: absolute;
    top: 13px;
    width: auto;
    min-height: 0;
    padding: 0;
    border: none;
    background: transparent;
    z-index: 1;
  }

  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody td.ca-table__col--icon {
    right: 16px;
  }

  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody td.ca-table__col--checkbox {
    left: 16px;
  }

  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody td.ca-table__col--icon::before,
  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody td.ca-table__col--checkbox::before {
    content: none;
  }

  /* Domains: checkbox sits top-left, indent the card header so they don't overlap */
  .main-page-contents #tableDomainsList tbody td.ca-table__col--left {
    padding-left: 48px;
  }

  /* Unlabeled action cells (pay / download / view buttons) become a card footer */
  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody td[data-label=""]:not(.ca-table__col--icon):not(.ca-table__col--checkbox) {
    justify-content: center;
    border-top: 1px solid rgba(0, 102, 247, 0.06);
    padding-top: 13px;
    padding-bottom: 13px;
  }

  /* Collapse empty action cells (e.g. paid invoices have no Pay button) */
  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody td[data-label=""]:not(.ca-table__col--icon):not(.ca-table__col--checkbox):not(:has(*)) {
    display: none;
  }

  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody td.dataTables_empty {
    justify-content: center;
    text-align: center;
  }

  .main-page-contents #tableServicesList .ca-service-cell {
    width: 100%;
  }

  .main-page-contents #tableServicesList .ca-service-cell__hint {
    opacity: 1;
    transform: none;
  }

  .main-page-contents #tableServicesList .ca-service-cell__site-text {
    white-space: normal;
    word-break: break-all;
    max-width: 100%;
  }

  .main-page-contents .table-container .dataTables_wrapper .dataTables_length label,
  .main-page-contents .table-container .dataTables_wrapper .dataTables_filter label {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .main-page-contents .table-container,
  .network-status-page .table-container {
    padding: 14px;
  }

  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody td {
    padding: 10px 14px;
  }

  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody td.ca-table__col--left {
    padding: 13px 44px 11px 14px;
  }

  .main-page-contents #tableDomainsList tbody td.ca-table__col--left {
    padding-left: 44px;
  }

  :is(.main-page-contents, .network-status-page) .table-container table.table-list tbody td::before {
    font-size: 12px;
  }

  .main-page-contents .table-container .dataTables_wrapper .dataTables_paginate {
    flex-direction: column;
  }

  .main-page-contents .table-container .dataTables_wrapper .dataTables_paginate ul.pagination {
    flex-direction: column;
    width: 100%;
  }

  .main-page-contents .table-container .dataTables_wrapper .dataTables_paginate .page-item {
    width: 100%;
  }

  .main-page-contents .table-container .dataTables_wrapper .dataTables_paginate .page-link {
    width: 100%;
  }
}

.coodiv-menu-dropdown.dropdown-menu {
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 32px;
  box-shadow: -5px 20px 65px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
  border: 1px solid var(--clientarea-feature-border) !important;
  overflow: visible;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: absolute;
}

.coodiv-menu-dropdown.dropdown-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 32px;
  z-index: -1;
}

.coodiv-menu-dropdown.dropdown-menu .drop-menu-item > a {
  color: #19191b !important;
  font-weight: 600;
}

.coodiv-menu-dropdown.dropdown-menu .drop-menu-item:hover > a {
  color: var(--color-primary-blue, #473bf0) !important;
}

.user-dropdown-header .coodiv-menu-dropdown.dropdown-menu .drop-menu-item > a {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent !important;
}

.user-dropdown-header .coodiv-menu-dropdown.dropdown-menu .drop-menu-item > a:hover,
.user-dropdown-header .coodiv-menu-dropdown.dropdown-menu .drop-menu-item > a:focus,
.user-dropdown-header .coodiv-menu-dropdown.dropdown-menu .drop-menu-item > a:active {
  background: transparent !important;
}

.user-dropdown-header .coodiv-menu-dropdown.dropdown-menu .drop-menu-item > a .menu-item-icon {
  flex: 0 0 16px;
  width: 16px;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  color: inherit;
  opacity: 0.72;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.user-dropdown-header .coodiv-menu-dropdown.dropdown-menu .drop-menu-item:hover > a .menu-item-icon {
  color: var(--color-primary-blue, #473bf0);
  opacity: 1;
}

@media (min-width: 992px) {
  .user-dropdown-header .nav-item.dropdown:hover > .coodiv-menu-dropdown,
  .user-dropdown-header .nav-item.dropdown > .coodiv-menu-dropdown:hover,
  .user-dropdown-header .nav-item.dropdown > .coodiv-menu-dropdown.show {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    z-index: 9999;
    display: block;
  }

  .user-dropdown-header .nav-item.dropdown > .coodiv-menu-dropdown::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
  }
}

.servers-cards .price-item {
  display: grid;
}

#summary-cpu {
  text-align: right;
}

#summary-storage {
  text-align: right;
}

body > div.site-wrapper.overflow-hidden > header > div > div:nth-child(1) > div > div > div.header__actions > div:nth-child(2) > ul > li:nth-child(2) > a {
  border-radius:0px 0px 15px 15px;
}

.btn-default {
  border-radius: 44px;
}

header.header .navbar a:hover {
  text-decoration: none;
}

.servers-cards .price-item__title {
  color: var(--color-primary-blue);
}

/* Cart inputs styled like servers configurator */
#order-standard_cart input.form-control,
#order-standard_cart select.form-control,
#order-standard_cart .aply-promo-code input[type="text"],
#order-standard_cart input[type="number"] {
  height: 36px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06);
  border-radius: 29px;
  border: none;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 16px;
  color: var(--color-neutral-black);
}

#order-standard_cart input.form-control:focus,
#order-standard_cart select.form-control:focus,
#order-standard_cart .aply-promo-code input[type="text"]:focus,
#order-standard_cart input[type="number"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 102, 247, 0.2);
}

#order-standard_cart input.form-control.text-center {
  text-align: center;
}

#order-standard_cart select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  background-image: url("../img/select-chevron.svg");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px auto;
}

/* Nice-select inside cart (match vps-create look) */
#order-standard_cart .nice-select.form-control.select-inline.custom-select {
  height: 36px;
  line-height: 36px;
  padding: 0 38px 0 16px;
  background: #fff;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  border-radius: 29px;
  border: 1px solid rgba(0, 102, 247, 0.14) !important;
  display: inline-flex;
  align-items: center;
  min-width: 120px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#order-standard_cart .nice-select.form-control.select-inline.custom-select:hover {
  border-color: rgba(0, 102, 247, 0.28) !important;
}

#order-standard_cart .nice-select.form-control.select-inline.custom-select.open,
#order-standard_cart .nice-select.form-control.select-inline.custom-select:focus {
  border-color: rgba(0, 102, 247, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.12),
    0px 6px 20px rgba(0, 102, 247, 0.12);
}

#order-standard_cart .form-control:not(.cart-item-qty__input) {
  height: 36px;
  line-height: 36px;
  padding: 0 38px 0 16px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04), 0px 4px 10px rgba(15, 15, 15, 0.06);
  border-radius: 29px !important;
  border: none !important;
  display: inline-flex;
  align-items: center;
  min-width: 120px;
}

#order-standard_cart .nice-select.form-control.select-inline.custom-select .current {
  font-weight: 500;
  font-size: 16px;
  color: var(--color-neutral-black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#order-standard_cart .nice-select.form-control.select-inline.custom-select:after {
  border: none;
  width: 24px;
  height: 24px;
  right: 8px;
  top: 50%;
  background: var(--color-neutral-black);
  mask: url("../img/select-chevron.svg") center/10px no-repeat;
  -webkit-mask: url("../img/select-chevron.svg") center/10px no-repeat;
  transform: translateY(-50%);
  margin-top: 0;
}

#order-standard_cart .nice-select.form-control.select-inline.custom-select.open:after {
  transform: translateY(-50%);
}

#order-standard_cart .nice-select.form-control.select-inline.custom-select .list {
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.12);
  box-shadow: 0px 8px 28px rgba(0, 51, 153, 0.12),
    0px 4px 16px rgba(15, 15, 15, 0.08);
  border-radius: 12px;
  width: max-content;
  min-width: 100%;
  max-width: 500px;
}

/* Ion range slider (numeric sliders) inside cart) */
#order-standard_cart .irs,
#order-standard_cart .irs--modern,
#order-standard_cart .irs--flat,
#order-standard_cart .irs--round {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  user-select: none;
}

#order-standard_cart .irs-line,
#order-standard_cart .irs--modern .irs-line,
#order-standard_cart .irs--flat .irs-line,
#order-standard_cart .irs--round .irs-line {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  width: 100% !important;
  top: 26px !important;
  height: 4px !important;
  border-radius: 24px !important;
  background: #d6d6d6 !important;
  box-shadow: none !important;
}

#order-standard_cart .irs-bar,
#order-standard_cart .irs--modern .irs-bar,
#order-standard_cart .irs--flat .irs-bar,
#order-standard_cart .irs--round .irs-bar {
  position: absolute !important;
  display: block !important;
  top: 26px !important;
  height: 4px !important;
  border-radius: 24px !important;
  background: var(--color-primary-blue) !important;
  box-shadow: none !important;
}

#order-standard_cart .irs-handle,
#order-standard_cart .irs-slider,
#order-standard_cart .irs--modern .irs-handle,
#order-standard_cart .irs--flat .irs-handle,
#order-standard_cart .irs--round .irs-handle {
  position: absolute !important;
  display: block !important;
  top: 16px !important;
  width: 20px !important;
  height: 20px !important;
  background: #fff !important;
  border: 2px solid var(--color-primary-blue) !important;
  box-shadow: 0px 4px 14.3px rgba(0, 0, 0, 0.15) !important;
  border-radius: 50% !important;
}

#order-standard_cart .irs-handle > i:first-child {
  display: none !important;
}

#order-standard_cart .irs-grid-text,
#order-standard_cart .irs--modern .irs-grid-text,
#order-standard_cart .irs--flat .irs-grid-text,
#order-standard_cart .irs--round .irs-grid-text {
  font-weight: 500;
  font-size: 13px;
  color: #8a8a8a;
}

#order-standard_cart .irs-single,
#order-standard_cart .irs-from,
#order-standard_cart .irs-to,
#order-standard_cart .irs--modern .irs-single,
#order-standard_cart .irs--modern .irs-from,
#order-standard_cart .irs--modern .irs-to,
#order-standard_cart .irs--flat .irs-single,
#order-standard_cart .irs--flat .irs-from,
#order-standard_cart .irs--flat .irs-to,
#order-standard_cart .irs--round .irs-single,
#order-standard_cart .irs--round .irs-from,
#order-standard_cart .irs--round .irs-to {
  background: var(--color-primary-blue) !important;
  border-radius: 12px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
}

#order-standard_cart .irs-single:before,
#order-standard_cart .irs-from:before,
#order-standard_cart .irs-to:before {
  display: none !important;
}

#order-standard_cart .irs-min,
#order-standard_cart .irs-max,
#order-standard_cart .irs-bar-edge,
#order-standard_cart .irs-shadow {
  display: none !important;
}

#order-standard_cart .irs-grid,
#order-standard_cart .irs--modern .irs-grid,
#order-standard_cart .irs--flat .irs-grid,
#order-standard_cart .irs--round .irs-grid {
  position: absolute !important;
  display: block !important;
  top: 36px !important;
  bottom: auto !important;
  height: 34px !important;
}

#order-standard_cart .irs-grid-pol {
  position: absolute !important;
  background: #c6c6c6 !important;
  height: 6px !important;
  width: 1px !important;
}

#order-standard_cart .irs-grid-pol.small {
  height: 4px !important;
}

#order-standard_cart .irs-grid-text {
  position: absolute !important;
  bottom: 12px !important;
  white-space: nowrap !important;
  text-align: center !important;
  line-height: 13px !important;
}

/* --------------------------------------------------------------------------
   Header language/currency dropdown: hover shape fix
   -------------------------------------------------------------------------- */
.header-dropdown .dropdown-menu {
  padding: 4px !important;
  overflow: hidden;
}

.header-dropdown .dropdown-menu > li {
  width: 100%;
}

.header-dropdown .dropdown-item {
  width: 100%;
  box-sizing: border-box;
  border-radius: 6px;
}

.header-dropdown .dropdown-menu > li:first-child .dropdown-item {
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
}

.header-dropdown .dropdown-menu > li:last-child .dropdown-item {
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
}

.header-dropdown .dropdown-menu > li:only-child .dropdown-item {
  border-radius: 22px;
}

.header-dropdown .dropdown-item.active {
  background-color: transparent;
  color: var(--color-primary-blue);
  font-weight: 600;
}

.header-dropdown .dropdown-item.active:hover,
.header-dropdown .dropdown-item.active:focus {
  background-color: rgba(0, 102, 247, 0.08);
  color: var(--color-primary-blue);
}

/* --------------------------------------------------------------------------
   Header top: logged-in layout (currency dropdown hidden)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .header--logged-in .header-top .header__right {
    display: contents;
  }

  .header--logged-in .header-top .header__actions {
    margin-left: 0 !important;
    display: flex;
    flex-wrap: nowrap;
  }

  .header--logged-in .header-top .header__actions > * {
    flex: 0 0 auto;
  }

  .header:not(.header--logged-in) .header-top .header__right {
    margin-left: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
  }

  .header:not(.header--logged-in) .header-top .header__right .header__actions {
    margin-left: 0;
  }
}

@media (max-width: 991.98px) {
  .header--logged-in .header__actions {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Header: wider container + no-wrap nav labels (desktop)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  header.header > .container {
    max-width: 1320px !important;
  }

  .header-top {
    justify-content: center;
  }

  .header-top .header__actions {
    margin-left: 0 !important;
  }

  .header-bottom .navbar {
    justify-content: center;
  }

  .header-bottom .navbar-collapse {
    justify-content: center;
    flex-grow: 0;
  }

  #navbarSupportedContent .navbar-nav {
    flex-wrap: nowrap;
    justify-content: center;
  }

  #navbarSupportedContent .navbar-nav .nav-item {
    flex-shrink: 0;
  }

  #navbarSupportedContent .navbar-nav .nav-item .nav-link:not(.dropdown-toggle) {
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   Header: notifications dropdown
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  /* Keep top-row dropdowns (notifications, user menu) above bottom navigation */
  .header-top {
    position: relative;
    z-index: 20;
  }

  .header-bottom {
    position: relative;
    z-index: 10;
  }

  .header-auth-block .notifications-dropdown {
    position: relative;
  }

  .notifications-dropdown .notifications-panel.coodiv-menu-dropdown.dropdown-menu.left-dropdown,
  .notifications-dropdown .coodiv-menu-dropdown.dropdown-menu.left-dropdown {
    min-width: 380px !important;
    max-width: 420px !important;
    width: auto !important;
    top: 100% !important;
    margin-top: 8px;
  }

  .header-auth-block .notifications-dropdown > .coodiv-menu-dropdown.dropdown-menu::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -6px;
    right: -6px;
    height: 10px;
    background: transparent;
  }

  .header-auth-block .notifications-dropdown:hover > .coodiv-menu-dropdown,
  .header-auth-block .notifications-dropdown > .coodiv-menu-dropdown:hover,
  .header-auth-block .notifications-dropdown.show > .coodiv-menu-dropdown {
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 1050 !important;
    transform: none !important;
    display: block !important;
  }
}

.notifications-dropdown .notifications-panel.coodiv-menu-dropdown.dropdown-menu,
.notifications-dropdown .coodiv-menu-dropdown.dropdown-menu {
  padding: 0 !important;
  overflow: hidden;
  border-radius: 24px !important;
}

.notifications-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(0, 102, 247, 0.08);
  background: linear-gradient(180deg, rgba(0, 102, 247, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
}

.notifications-panel__title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.notifications-panel__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(0, 102, 247, 0.1);
  color: var(--color-primary-blue, #0066f7);
  font-size: 14px;
  flex-shrink: 0;
}

.notifications-panel__title-text {
  font-size: 15px;
  font-weight: 600;
  color: #19191b;
  letter-spacing: -0.02em;
}

.notifications-dropdown .notifications-count-badge {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  background: rgba(0, 102, 247, 0.12) !important;
  color: var(--color-primary-blue, #0066f7) !important;
}

.notifications-panel__body {
  max-height: min(360px, 55vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 102, 247, 0.35) transparent;
}

.notifications-panel__body::-webkit-scrollbar {
  width: 5px;
}

.notifications-panel__body::-webkit-scrollbar-thumb {
  background: rgba(0, 102, 247, 0.25);
  border-radius: 999px;
}

.notifications-dropdown .notifications-list.client-alerts {
  list-style: none;
  margin: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notifications-list__item {
  margin: 0;
  padding: 0;
}

.notifications-list__link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 12px 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: #fff;
  text-decoration: none;
  color: #19191b;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  position: relative;
}

.notifications-list__link--static {
  cursor: default;
}

.notifications-list__item.alert-severity-danger .notifications-list__link {
  background: rgba(229, 72, 77, 0.06);
  border-color: rgba(229, 72, 77, 0.14);
}

.notifications-list__item.alert-severity-warning .notifications-list__link {
  background: rgba(245, 166, 35, 0.08);
  border-color: rgba(245, 166, 35, 0.18);
}

.notifications-list__item.alert-severity-info .notifications-list__link {
  background: rgba(0, 102, 247, 0.06);
  border-color: rgba(0, 102, 247, 0.14);
}

.notifications-list__item.alert-severity-success .notifications-list__link,
.notifications-list__item:not([class*="alert-severity-"]) .notifications-list__link {
  background: rgba(18, 179, 0, 0.06);
  border-color: rgba(18, 179, 0, 0.14);
}

.notifications-list__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  font-size: 14px;
}

.notifications-list__item.alert-severity-danger .notifications-list__icon {
  background: rgba(229, 72, 77, 0.1);
  color: #e5484d;
}

.notifications-list__item.alert-severity-warning .notifications-list__icon {
  background: rgba(245, 166, 35, 0.12);
  color: #c27803;
}

.notifications-list__item.alert-severity-info .notifications-list__icon {
  background: rgba(0, 102, 247, 0.1);
  color: var(--color-primary-blue, #0066f7);
}

.notifications-list__item.alert-severity-success .notifications-list__icon,
.notifications-list__item:not([class*="alert-severity-"]) .notifications-list__icon {
  background: rgba(18, 179, 0, 0.1);
  color: var(--color-status-green, #12b300);
}

.notifications-list__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notifications-list__label {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.notifications-list__item.alert-severity-danger .notifications-list__label {
  background: rgba(229, 72, 77, 0.14);
  color: #c62828;
}

.notifications-list__item.alert-severity-warning .notifications-list__label {
  background: rgba(245, 166, 35, 0.16);
  color: #a16207;
}

.notifications-list__item.alert-severity-info .notifications-list__label {
  background: rgba(0, 102, 247, 0.12);
  color: var(--color-primary-blue, #0066f7);
}

.notifications-list__item.alert-severity-success .notifications-list__label,
.notifications-list__item:not([class*="alert-severity-"]) .notifications-list__label {
  background: rgba(18, 179, 0, 0.12);
  color: #0d8a00;
}

.notifications-list__message {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  color: #2b2b2f;
  word-break: break-word;
}

.notifications-list__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  color: rgba(0, 102, 247, 0.45);
  font-size: 11px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

a.notifications-list__link:hover,
a.notifications-list__link:focus {
  text-decoration: none;
  color: #19191b;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.notifications-list__item.alert-severity-danger a.notifications-list__link:hover,
.notifications-list__item.alert-severity-danger a.notifications-list__link:focus {
  background: rgba(229, 72, 77, 0.1);
  border-color: rgba(229, 72, 77, 0.22);
}

.notifications-list__item.alert-severity-warning a.notifications-list__link:hover,
.notifications-list__item.alert-severity-warning a.notifications-list__link:focus {
  background: rgba(245, 166, 35, 0.12);
  border-color: rgba(245, 166, 35, 0.26);
}

.notifications-list__item.alert-severity-info a.notifications-list__link:hover,
.notifications-list__item.alert-severity-info a.notifications-list__link:focus {
  background: rgba(0, 102, 247, 0.1);
  border-color: rgba(0, 102, 247, 0.22);
}

.notifications-list__item.alert-severity-success a.notifications-list__link:hover,
.notifications-list__item.alert-severity-success a.notifications-list__link:focus,
.notifications-list__item:not([class*="alert-severity-"]) a.notifications-list__link:hover,
.notifications-list__item:not([class*="alert-severity-"]) a.notifications-list__link:focus {
  background: rgba(18, 179, 0, 0.1);
  border-color: rgba(18, 179, 0, 0.22);
}

a.notifications-list__link:hover .notifications-list__message,
a.notifications-list__link:focus .notifications-list__message {
  color: #19191b;
}

a.notifications-list__link:hover .notifications-list__arrow,
a.notifications-list__link:focus .notifications-list__arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--color-primary-blue, #0066f7);
}

.notifications-list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 20px 32px;
  text-align: center;
}

.notifications-list__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  color: #8b8b95;
  font-size: 18px;
}

.notifications-list__empty-text {
  font-size: 13px;
  line-height: 1.45;
  color: #6b6b75;
  max-width: 240px;
}

.notifications-panel__footer {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(0, 102, 247, 0.08);
  background: rgba(0, 102, 247, 0.03);
}

.notifications-panel__footer-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #0066f7 0%, #0052c4 100%);
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.notifications-panel__footer-link:hover,
.notifications-panel__footer-link:focus {
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 102, 247, 0.28);
}

.notifications-panel__footer-link i {
  font-size: 11px;
  transition: transform 0.2s ease;
}

.notifications-panel__footer-link:hover i,
.notifications-panel__footer-link:focus i {
  transform: translateX(3px);
}

@media (max-width: 991.98px) {
  .notifications-dropdown .notifications-panel.coodiv-menu-dropdown.dropdown-menu,
  .notifications-dropdown .coodiv-menu-dropdown.dropdown-menu {
    min-width: min(92vw, 380px) !important;
    max-width: 92vw !important;
  }
}


/* Hover effects for VPS and Dedicated Servers buttons */
#order-standard_cart .d-flex.flex-column.flex-md-row.justify-content-center.align-items-center.gap-4 .button {
  transition: all 0.3s ease;
}

#order-standard_cart .d-flex.flex-column.flex-md-row.justify-content-center.align-items-center.gap-4 .button--green:hover {
  background: #0FA000 !important;
  transform: translateY(-2px);
  box-shadow: 0px 6px 12px rgba(18, 179, 0, 0.3) !important;
}

#order-standard_cart .d-flex.flex-column.flex-md-row.justify-content-center.align-items-center.gap-4 .button--grey:hover {
  background: #1a1a1a !important;
  transform: translateY(-2px);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Hover effects for specific header navigation links (text items after divider) */
#navbarSupportedContent .navbar-nav .nav-item:nth-child(5) .nav-link,
#navbarSupportedContent .navbar-nav .nav-item:nth-child(6) .nav-link,
#navbarSupportedContent .navbar-nav .nav-item:nth-child(7) .nav-link,
#navbarSupportedContent .navbar-nav .nav-item:nth-child(8) .nav-link {
  transition: all 0.3s ease;
  position: relative;
}

#navbarSupportedContent .navbar-nav .nav-item:nth-child(5) .nav-link:hover,
#navbarSupportedContent .navbar-nav .nav-item:nth-child(6) .nav-link:hover,
#navbarSupportedContent .navbar-nav .nav-item:nth-child(7) .nav-link:hover,
#navbarSupportedContent .navbar-nav .nav-item:nth-child(8) .nav-link:hover {
  color: var(--color-primary-blue) !important;
  transform: translateY(-2px);
}

#navbarSupportedContent .navbar-nav .nav-item:nth-child(5) .nav-link::after,
#navbarSupportedContent .navbar-nav .nav-item:nth-child(6) .nav-link::after,
#navbarSupportedContent .navbar-nav .nav-item:nth-child(7) .nav-link::after,
#navbarSupportedContent .navbar-nav .nav-item:nth-child(8) .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  height: 2px;
  background: var(--color-primary-blue);
  transition: transform 0.3s ease;
}

#navbarSupportedContent .navbar-nav .nav-item:nth-child(5) .nav-link:hover::after,
#navbarSupportedContent .navbar-nav .nav-item:nth-child(6) .nav-link:hover::after,
#navbarSupportedContent .navbar-nav .nav-item:nth-child(7) .nav-link:hover::after,
#navbarSupportedContent .navbar-nav .nav-item:nth-child(8) .nav-link:hover::after {
  transform: translateX(-50%) scaleX(1);
}

/* Beautiful hover effects for buttons (без ripple) */
.button,
.hero-banner__btn {
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.button:hover,
.hero-banner__btn:hover {
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-2px);
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15), 0px 4px 12px rgba(0, 0, 0, 0.1);
}

/* Specific hover effects for different button variants */
.button:hover {
  background: linear-gradient(135deg, #0052cc 0%, #0066f7 100%);
  box-shadow: 0px 8px 24px rgba(0, 102, 247, 0.3), 0px 4px 12px rgba(0, 102, 247, 0.2);
}

.button.button--light:hover {
  background: var(--color-neutral-white);
  border-color: var(--color-primary-blue);
  box-shadow: 0px 8px 24px rgba(0, 102, 247, 0.2), 0px 4px 12px rgba(0, 102, 247, 0.15);
  color: var(--color-primary-blue) !important;
}

.button.button--grey:hover,
.button.button--icon.button--grey:hover {
  background: #0a0a0a;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.3), 0px 4px 12px rgba(0, 0, 0, 0.2);
}

.button.button--green:hover {
  background: #0FA000;
  box-shadow: 0px 8px 24px rgba(18, 179, 0, 0.3), 0px 4px 12px rgba(18, 179, 0, 0.2);
}

.hero-banner__btn:hover {
  background: #0FA000;
  border-color: #0FA000;
  box-shadow: 0px 8px 24px rgba(18, 179, 0, 0.3), 0px 4px 12px rgba(18, 179, 0, 0.2);
}

/* Active state for better feedback */
.button:active,
.hero-banner__btn:active {
  transform: translateY(0);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
}

/* Email verification banner (client area) */
.email-verification-bar {
  padding: 16px 0 0;
  --clientarea-feature-surface: rgba(255, 255, 255, 0.95);
  --clientarea-feature-border: rgba(0, 60, 145, 0.08);
}

.verification-banner.email-verification {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 20px 52px 20px 20px;
  background: var(--clientarea-feature-surface);
  border: 1px solid var(--clientarea-feature-border);
  border-radius: 20px;
  box-shadow: -5px 20px 65px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-neutral-black, #13151c);
  overflow: hidden;
}

.verification-banner.email-verification::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #f7e36d 0%, #fcad38 100%);
  border-radius: 20px 0 0 20px;
}

.verification-banner.email-verification .verification-banner__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  box-shadow: 0 8px 20px rgba(0, 102, 247, 0.28);
  color: #fff;
  font-size: 20px;
}

.verification-banner.email-verification .verification-banner__icon .fas,
.verification-banner.email-verification .verification-banner__icon .far,
.verification-banner.email-verification .verification-banner__icon .fal {
  float: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.verification-banner.email-verification .verification-banner__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.verification-banner.email-verification .verification-banner__text {
  flex: 1 1 220px;
  margin: 0;
  min-width: 0;
  font-weight: 400;
  line-height: 1.5;
}

.verification-banner.email-verification .verification-banner__text strong {
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
  margin-right: 0.25em;
}

.verification-banner.email-verification .btn-resend-verify-email {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 22px;
  min-height: 40px;
  font-weight: 600;
  white-space: nowrap;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.verification-banner.email-verification .btn-resend-verify-email:disabled {
  opacity: 0.75;
}

.verification-banner.email-verification .btn-resend-verify-email .loader {
  display: inline-flex;
  align-items: center;
}

.verification-banner.email-verification .verification-banner__close {
  position: absolute;
  top: 14px;
  right: 14px;
  margin: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(19, 21, 28, 0.06);
  color: rgba(19, 21, 28, 0.45);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.verification-banner.email-verification .verification-banner__close:hover,
.verification-banner.email-verification .verification-banner__close:focus {
  background: rgba(19, 21, 28, 0.1);
  color: rgba(19, 21, 28, 0.75);
  outline: none;
}

.verification-banner.email-verification .verification-banner__close .feather {
  width: 18px;
  height: 18px;
}

@media (min-width: 768px) {
  .email-verification-bar {
    padding-top: 20px;
  }

  .verification-banner.email-verification {
    align-items: center;
    padding: 22px 56px 22px 24px;
  }

  .verification-banner.email-verification .verification-banner__content {
    flex-wrap: nowrap;
  }

  .verification-banner.email-verification .verification-banner__text {
    padding: 0;
  }
}

@media (max-width: 575.98px) {
  .verification-banner.email-verification {
    flex-direction: column;
    padding: 18px 48px 18px 18px;
    gap: 14px;
  }

  .verification-banner.email-verification .verification-banner__content {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .verification-banner.email-verification .btn-resend-verify-email {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Cart view page (cart.php?a=view) — aligned with VPS / About / home design
   -------------------------------------------------------------------------- */
#order-standard_cart .cart-view-page {
  background: #fff;
  box-shadow: -5px 10px 73.9px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 25px;
  margin-bottom: 48px;
  overflow: hidden;
}

/* Cart modals — mount on body, above sticky header (z-index up to 9999) */
#modalRemoveItem.modal,
#modalEmptyCart.modal,
#recommendationsModal.modal {
  z-index: 10050 !important;
}

body.modal-open .modal-backdrop {
  z-index: 10040 !important;
}

#modalRemoveItem.modal-remove-item .modal-header,
#modalRemoveItem.modal-remove-item .modal-body,
#modalRemoveItem.modal-remove-item .modal-footer,
#modalEmptyCart.modal-remove-item .modal-header,
#modalEmptyCart.modal-remove-item .modal-body,
#modalEmptyCart.modal-remove-item .modal-footer {
  text-align: center !important;
  border: 0;
}

#modalRemoveItem.modal-remove-item .modal-footer,
#modalEmptyCart.modal-remove-item .modal-footer {
  padding-bottom: 45px;
}

#modalRemoveItem.modal-remove-item .modal-title i {
  display: block;
  padding-top: 25px;
}

#order-standard_cart .cart-hero {
  padding: 64px 0 32px;
  text-align: center;
}

#order-standard_cart .cart-hero__inner {
  max-width: 720px;
  margin-inline: auto;
}

#order-standard_cart .cart-hero__eyebrow {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-blue);
}

#order-standard_cart .cart-hero__title {
  margin: 0;
}

/* Order steps wizard (replaces legacy chevron wizard) */
#order-standard_cart .cart-steps-row {
  margin: 24px 0 32px;
  padding: 0 12px;
}

#order-standard_cart .cart-steps {
  background: #fff;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
  padding: 20px 28px;
}

#order-standard_cart .cart-steps__list {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#order-standard_cart .cart-steps__item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 0;
  min-width: 0;
}

#order-standard_cart .cart-steps__marker {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  background: #eef2f6;
  color: #8b9295;
  border: 2px solid #e2e8f0;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#order-standard_cart .cart-steps__marker .feather {
  font-size: 18px;
  line-height: 1;
}

#order-standard_cart .cart-steps__marker span {
  line-height: 1;
}

#order-standard_cart .cart-steps__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#order-standard_cart .cart-steps__step {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #8b9295;
}

#order-standard_cart .cart-steps__title {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.3;
}

#order-standard_cart .cart-steps__divider {
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
  height: 2px;
  margin: 0;
  background: #e2e8f0;
  border-radius: 2px;
  list-style: none;
  align-self: center;
  flex-shrink: 0;
}

#order-standard_cart .cart-steps__divider.is-complete {
  background: var(--color-primary-blue);
}

#order-standard_cart .cart-steps__item.is-complete .cart-steps__marker {
  background: var(--color-primary-blue);
  border-color: var(--color-primary-blue);
  color: #fff;
  box-shadow: 0px 4px 12px rgba(0, 102, 247, 0.25);
}

#order-standard_cart .cart-steps__item.is-complete .cart-steps__step {
  color: var(--color-primary-blue);
}

#order-standard_cart .cart-steps__item.is-complete .cart-steps__title {
  color: var(--color-neutral-black);
}

#order-standard_cart .cart-steps__item.is-current .cart-steps__marker {
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0px 4px 16px rgba(0, 102, 247, 0.35);
}

#order-standard_cart .cart-steps__item.is-current .cart-steps__step {
  color: var(--color-primary-blue);
  font-weight: 600;
}

#order-standard_cart .cart-steps__item.is-current .cart-steps__title {
  color: var(--color-neutral-black);
  font-weight: 700;
}

#order-standard_cart .secondary-cart-body {
  padding: 0 8px 24px;
}

#order-standard_cart .secondary-cart-sidebar {
  padding: 0 8px 24px;
}

#order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart {
  background: #fff;
  border: none;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  padding: 24px;
  margin-bottom: 20px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

#order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart:hover {
  box-shadow: 0px 8px 28px rgba(0, 102, 247, 0.12);
}

#order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart .product-header {
  gap: 8px;
  margin-bottom: 2px;
}

#order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart .product-header h5,
#order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart > .row > div > h5 {
  font-weight: 600;
  font-size: 20px;
  color: var(--color-neutral-black);
}

#order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart .item-group {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #6b7280;
}

#order-standard_cart .cart-item-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  max-width: 100%;
}

#order-standard_cart .cart-item-domain {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 10px 18px;
  background: rgba(0, 102, 247, 0.08);
  border: 1px solid rgba(0, 102, 247, 0.12);
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-primary-blue);
  box-shadow: 0px 4px 12px rgba(0, 102, 247, 0.08);
}

#order-standard_cart .cart-item-domain__icon {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  opacity: 0.9;
}

#order-standard_cart .cart-item-domain__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#order-standard_cart .cart-item-config-wrap {
  width: 100%;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 102, 247, 0.08);
}

#order-standard_cart .cart-item-config {
  list-style: none;
  margin: 0;
  padding: 16px 18px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06);
  border-radius: 16px;
  border: 1px solid rgba(0, 102, 247, 0.06);
  box-sizing: border-box;
}

#order-standard_cart .cart-item-config__row {
  display: grid;
  grid-template-columns: minmax(130px, 220px) minmax(0, 1fr);
  align-items: start;
  gap: 12px 24px;
  padding-left: 22px;
  position: relative;
  font-size: 13px;
  line-height: 1.45;
}

#order-standard_cart .cart-item-config__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: var(--color-status-green, #12b300);
  mask: url("../img/icons/check.svg") center / contain no-repeat;
  -webkit-mask: url("../img/icons/check.svg") center / contain no-repeat;
}

#order-standard_cart .cart-item-config__label {
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
}

#order-standard_cart .cart-item-config__value {
  max-width: none;
  text-align: left;
  font-weight: 600;
  color: var(--color-neutral-black);
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

#order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart .item-domain.badge-success,
#order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart .badge-success.item-domain {
  background: rgba(0, 102, 247, 0.08) !important;
  color: var(--color-primary-blue) !important;
  border: 1px solid rgba(0, 102, 247, 0.12);
}

#order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart .item-price {
  text-align: right;
}

#order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart .item-price .coodiv-text-8 {
  display: block;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-primary-blue);
}

#order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart .item-price .coodiv-text-12 {
  font-size: 14px;
  color: #6b7280;
}

#order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart > .row {
  align-items: flex-start;
}

#order-standard_cart .cart-item-qty {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 14px;
  padding: 10px 14px;
  max-width: 100%;
  background: rgba(0, 102, 247, 0.04);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 16px;
}

#order-standard_cart .cart-item-qty__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: #6b7280;
  white-space: nowrap;
}

#order-standard_cart .cart-item-qty__label .feather {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--color-primary-blue);
}

#order-standard_cart .cart-item-qty__controls {
  display: inline-flex;
  align-items: center;
}

#order-standard_cart .cart-item-qty__stepper {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  background: #fff;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06);
  border-radius: 29px;
}

#order-standard_cart .cart-item-qty__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-primary-blue);
  cursor: pointer;
  transition: background 0.15s ease;
}

#order-standard_cart .cart-item-qty__btn .feather {
  font-size: 18px;
  line-height: 1;
}

#order-standard_cart .cart-item-qty__btn:hover:not(:disabled) {
  background: rgba(0, 102, 247, 0.08);
}

#order-standard_cart .cart-item-qty__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

#order-standard_cart .cart-item-qty__stepper-default {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

#order-standard_cart .cart-item-qty__stepper-loading {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 124px;
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-blue);
  white-space: nowrap;
}

#order-standard_cart .cart-item-qty__stepper.is-updating {
  cursor: progress;
}

#order-standard_cart .cart-item-qty__stepper.is-updating .cart-item-qty__stepper-default {
  display: none;
}

#order-standard_cart .cart-item-qty__stepper.is-updating .cart-item-qty__stepper-loading {
  display: inline-flex;
}

#order-standard_cart .cart-item-qty .cart-item-qty__input.form-control {
  display: block;
  flex: 1 1 auto;
  width: 52px;
  min-width: 52px;
  max-width: 72px;
  height: 36px;
  line-height: 36px;
  padding: 0 6px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none;
  border-left: 1px solid rgba(0, 102, 247, 0.08);
  border-right: 1px solid rgba(0, 102, 247, 0.08);
}

#order-standard_cart .cart-item-qty__stepper:focus-within {
  box-shadow: 0 0 0 2px rgba(0, 102, 247, 0.2);
}

#order-standard_cart .cart-item-qty__input:focus {
  outline: none;
}

#order-standard_cart .cart-item-qty input[type="number"]::-webkit-outer-spin-button,
#order-standard_cart .cart-item-qty input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#order-standard_cart .cart-item-qty input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

#order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart .btn-remove-from-cart:not(.btn-link) {
  top: auto;
  transform: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(246, 75, 75, 0.12);
  color: #f64b4b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}

#order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart .btn-remove-from-cart:not(.btn-link):hover {
  background: #f64b4b;
  color: #fff;
}

#order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart .btn-remove-from-cart.btn-link {
  position: static;
  top: auto;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: auto;
  height: 36px;
  padding: 6px 18px;
  border-radius: 44px;
  background: rgba(246, 75, 75, 0.1);
  color: #f64b4b;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid rgba(246, 75, 75, 0.18);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart .btn-remove-from-cart.btn-link:hover,
#order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart .btn-remove-from-cart.btn-link:focus {
  background: #f64b4b;
  border-color: #f64b4b;
  color: #fff;
  text-decoration: none;
}

#order-standard_cart .button--sm {
  min-width: auto;
  height: 36px;
  padding: 6px 18px;
  font-size: 13px;
  border-radius: 44px;
}

#order-standard_cart .minimal-button-cart.button--light {
  flex-shrink: 0;
}

#order-standard_cart .empty-cart-btn {
  margin-top: 0;
  margin-bottom: 24px;
  padding: 0;
}

#order-standard_cart .empty-cart-btn button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  transition: color 0.2s ease;
}

#order-standard_cart .empty-cart-btn button:hover {
  color: #f64b4b;
}

#order-standard_cart .empty-cart-btn button span {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

#order-standard_cart .cart-section-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-neutral-black);
  padding: 0;
}

#order-standard_cart .aply-promo-code {
  margin-top: 32px !important;
  padding: 24px;
  background: rgba(0, 102, 247, 0.04);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
}

#order-standard_cart .cart-promo-form__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

#order-standard_cart .cart-promo-form__input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

#order-standard_cart .cart-promo-form__submit {
  flex: 0 0 auto;
  white-space: nowrap;
}

#order-standard_cart .aply-promo-code .cart-promo-form__submit.orderpromovalidatebutton,
#order-standard_cart .aply-promo-code .orderpromovalidatebutton {
  position: static;
  transform: none;
  top: auto;
  right: auto;
  left: auto;
}

#order-standard_cart .view-cart-promotion-code.cart-promo-applied {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding: 14px 52px 14px 18px;
  background: rgba(18, 179, 0, 0.1);
  border: 1px solid rgba(18, 179, 0, 0.18);
  border-radius: 20px;
  font-weight: 500;
  color: var(--color-neutral-black);
}

#order-standard_cart .cart-promo-applied__icon {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--color-status-green, #12b300);
}

#order-standard_cart .cart-promo-applied__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  min-width: 0;
}

#order-standard_cart .cart-promo-applied__code {
  font-weight: 600;
  color: var(--color-neutral-black);
}

#order-standard_cart .cart-promo-applied__desc {
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
}

#order-standard_cart .cart-promo-applied__remove {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(246, 75, 75, 0.12);
  color: #f64b4b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

#order-standard_cart .cart-promo-applied__remove:hover {
  background: #f64b4b;
  color: #fff;
  text-decoration: none;
}

#order-standard_cart .cart-promo-applied__remove i {
  font-size: 16px;
  line-height: 1;
}

#order-standard_cart .ordersummary-coodiv-box.cart-order-summary,
#order-standard_cart .cart-order-summary {
  background: linear-gradient(180deg, #353535 0%, #1e1e1e 100%);
  box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 25px;
  padding: 32px 28px 28px;
  color: #fff;
}

#order-standard_cart .cart-order-summary::before,
#order-standard_cart .cart-order-summary::after {
  display: none !important;
}

#order-standard_cart .cart-order-summary h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #fff;
}

#order-standard_cart .cart-order-summary .clearfix .pull-left,
#order-standard_cart .cart-order-summary .clearfix .float-left {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
}

#order-standard_cart .cart-order-summary .clearfix .pull-right,
#order-standard_cart .cart-order-summary .clearfix .float-right,
#order-standard_cart .cart-order-summary .recurring-charges .cost {
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}

#order-standard_cart .cart-order-summary .subtotal,
#order-standard_cart .cart-order-summary .recurring-totals {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

#order-standard_cart .cart-order-summary .total-due-today {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px 16px;
  margin-top: 20px;
  text-align: center;
}

#order-standard_cart .cart-order-summary .total-due-today .amt {
  display: block;
  font-size: 36px;
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
  background: linear-gradient(180deg, #ffffff 0%, #d7d7d7 116.3%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#order-standard_cart .cart-order-summary .total-due-today span:last-child {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 6px;
}

#order-standard_cart .cart-order-summary .btn-checkout {
  margin-top: 8px;
  width: 100%;
  min-width: 0;
  height: 48px;
  border-radius: 44px;
}

#order-standard_cart .cart-order-summary .btn-checkout.disabled {
  opacity: 0.5;
  pointer-events: none;
}

#order-standard_cart .cart-continue-link {
  display: block;
  margin-top: 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}

#order-standard_cart .cart-continue-link:hover {
  color: #fff;
  text-decoration: none;
}

#order-standard_cart .cart-continue-link__or {
  display: block;
  margin-bottom: 4px;
  font-weight: 300;
  font-size: 12px;
  text-transform: lowercase;
}

#order-standard_cart .taxenabled-view-cart {
  border: none;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.06);
  border-radius: 20px;
  padding: 28px 24px 24px;
  background: #fff;
}

#order-standard_cart .alert-warning.rounded-10 {
  border-radius: 20px;
  border: none;
  background: rgba(252, 173, 56, 0.15);
  color: var(--color-neutral-black);
  padding: 24px;
}

@media (max-width: 991.98px) {
  #order-standard_cart .cart-steps {
    padding: 16px 20px;
  }

  #order-standard_cart .cart-steps__title {
    font-size: 13px;
  }

  #order-standard_cart .cart-steps__list {
    gap: 16px;
  }

  #order-standard_cart .cart-steps__divider {
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
  }

  #order-standard_cart .cart-hero {
    padding: 40px 0 24px;
  }

  #order-standard_cart .secondary-cart-sidebar {
    max-width: 480px;
    margin-inline: auto;
  }

  #order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart .item-price {
    text-align: left;
    margin-top: 16px;
  }
}

@media (max-width: 767.98px) {
  #order-standard_cart .cart-steps-row {
    margin: 16px 0 24px;
    padding: 0 8px;
  }

  #order-standard_cart .cart-steps {
    padding: 16px;
    border-radius: 16px;
  }

  #order-standard_cart .cart-steps__list {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  #order-standard_cart .cart-steps__item {
    flex: none;
    width: 100%;
    padding: 4px 0;
  }

  #order-standard_cart .cart-steps__divider {
    flex: 0 0 auto;
    width: 2px;
    min-width: 2px;
    height: 20px;
    align-self: center;
  }

  #order-standard_cart .cart-steps__marker {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  #order-standard_cart .cart-steps__title {
    font-size: 14px;
  }

  #order-standard_cart .cart-view-page {
    border-radius: 20px;
    margin-bottom: 32px;
  }

  #order-standard_cart .cart-hero {
    padding: 32px 16px 20px;
  }

  #order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart {
    padding: 18px;
  }

  #order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart .product-header {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  #order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart .product-header h5 {
    flex: 1 1 100%;
    font-size: 18px;
  }

  #order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart .product-header .minimal-button-cart.button--light,
  #order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart .product-header .btn-remove-from-cart.minimal-button-cart {
    margin-left: 0 !important;
  }

  #order-standard_cart .view-cart-items-coodiv-cart-group .item-in-cart .item-price {
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid rgba(0, 102, 247, 0.08);
  }

  #order-standard_cart .cart-item-domain {
    width: 100%;
    box-sizing: border-box;
  }

  #order-standard_cart .cart-item-qty {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
    margin-top: 12px;
  }

  #order-standard_cart .cart-item-qty__controls {
    display: flex;
    width: 100%;
  }

  #order-standard_cart .cart-item-qty__stepper {
    display: flex;
    width: 100%;
    max-width: none;
  }

  #order-standard_cart .cart-item-qty .cart-item-qty__input.form-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 48px;
    max-width: none;
  }

  #order-standard_cart .cart-item-config__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding-left: 20px;
  }

  #order-standard_cart .cart-item-config__label {
    white-space: normal;
  }

  #order-standard_cart .cart-item-domain__text {
    white-space: normal;
    word-break: break-all;
  }

  #order-standard_cart .cart-promo-form__row {
    flex-direction: column;
    align-items: stretch;
  }

  #order-standard_cart .cart-promo-form__submit {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Configure product page (cart.php?a=confproduct)
   -------------------------------------------------------------------------- */
#order-standard_cart .cart-view-page .cart-form-col {
  flex: 0 0 95%;
  max-width: 95%;
  width: 95%;
  padding-left: 15px;
  padding-right: 15px;
}

#order-standard_cart .cart-hero__subtitle {
  margin: 12px auto 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.5;
  color: #6b7280;
}

#order-standard_cart .cart-product-info {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  padding: 24px;
  margin-bottom: 24px;
}

#order-standard_cart .cart-product-info__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-neutral-black);
}

#order-standard_cart .cart-product-info__desc {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

.product-desc {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: #353535;
}

.product-desc,
.product-desc * {
  font-family: "Inter", sans-serif !important;
}

.product-desc > p:first-child {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 102, 247, 0.12);
  font-size: 15px;
  font-weight: 600;
  color: #0066f7;
}

.product-desc > p:first-child strong {
  font-weight: 600;
  color: inherit;
}

.product-desc table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  margin: 0 0 14px;
}

.product-desc table td {
  padding: 6px 10px;
  background: rgba(0, 102, 247, 0.04);
  border-radius: 8px;
  vertical-align: middle;
}

.product-desc table td:first-child {
  width: 35%;
  color: rgba(53, 53, 53, 0.6);
}

.product-desc table td:last-child {
  font-weight: 600;
  color: #353535;
  text-align: right;
}

.product-desc__hint {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
}

.product-desc__hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: #0066f7;
  background: rgba(0, 102, 247, 0.1);
  cursor: help;
}

.product-desc__hint-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: max-content;
  max-width: 240px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #353535;
  color: #fff;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.product-desc__hint-tip-line {
  display: block;
  font-weight: 400 !important;
}

.product-desc__hint-tip br {
  display: block;
  margin-bottom: 4px;
  content: "";
}

.product-desc__hint-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 8px;
  border: 5px solid transparent;
  border-top-color: #353535;
}

.product-desc__hint:hover .product-desc__hint-tip,
.product-desc__hint:focus-within .product-desc__hint-tip {
  opacity: 1;
  visibility: visible;
}

.services__slider.slick-initialized .slick-track {
  display: flex !important;
  align-items: stretch;
}

.services__slider.slick-initialized .service-card.slick-slide {
  display: flex !important;
  height: auto;
  width: 100%;
}

.service-card {
  height: 100%;
}

.service-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
}

.service-card__bottom {
  margin-top: auto;
  width: 100%;
}

.service-card__price {
  display: block;
  text-align: center;
  white-space: nowrap;
}

.service-card__price-suffix {
  white-space: nowrap;
}

.service-card__price .product-desc__hint {
  display: inline-flex;
  margin-left: 4px;
  vertical-align: middle;
}

.service-card__price .product-desc__hint-tip {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.service-card__price .product-desc__hint-tip::after {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.product-desc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-desc ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 7px;
}

.product-desc ul li:last-child {
  margin-bottom: 0;
}

.product-desc ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #12b300;
}

.product-desc ul li strong {
  font-weight: 600;
  color: #353535;
}

.product-desc .product-desc__highlight {
  color: #12b300;
  font-weight: 600;
}

#order-standard_cart .cart-product-info__desc br,
.vps-card-tooltip__text .product-desc br {
  display: none;
}

#order-standard_cart .cart-product-info__desc p:empty,
.vps-card-tooltip__text .product-desc p:empty {
  display: none;
  margin: 0;
  padding: 0;
}

#order-standard_cart .cart-config-panel {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  padding: 24px;
  margin-bottom: 24px;
}

#order-standard_cart .cart-section-note {
  margin: -8px 0 16px;
  font-size: 13px;
  color: #6b7280;
}

#order-standard_cart .cart-metrics-explanation {
  margin-bottom: 16px;
  font-size: 14px;
  color: #6b7280;
}

/* Billing cycle cards (confproduct) */
#order-standard_cart .cart-billing-cycle {
  margin-bottom: 24px;
}

#order-standard_cart .cart-billing-cycle__desc {
  margin: -8px 0 20px;
  max-width: 560px;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

#order-standard_cart .cart-billing-cycle__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

#order-standard_cart .cart-billing-cycle .iradio_square-blue {
  display: none !important;
}

#order-standard_cart .cart-billing-cycle__card {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  min-height: 0;
  box-sizing: border-box;
  background: #fff;
  border: 2px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  box-shadow: 0px 2px 10px rgba(0, 51, 153, 0.04),
    0px 1px 4px rgba(15, 15, 15, 0.04);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#order-standard_cart .cart-billing-cycle__card:hover {
  border-color: rgba(0, 102, 247, 0.28);
}

#order-standard_cart .cart-billing-cycle__card.is-selected,
#order-standard_cart .cart-billing-cycle__card:has(.cart-billing-cycle__input:checked) {
  border: 2px solid var(--color-primary-blue, #0066f7);
  background: rgba(0, 102, 247, 0.04);
  box-shadow: 0px 4px 16px rgba(0, 102, 247, 0.1),
    0px 2px 8px rgba(15, 15, 15, 0.04);
}

#order-standard_cart .cart-billing-cycle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#order-standard_cart .cart-billing-cycle__radio {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid #c5cad6;
  border-radius: 50%;
  background: #fff;
  position: relative;
  transition: border-color 0.2s ease;
}

#order-standard_cart .cart-billing-cycle__card.is-selected .cart-billing-cycle__radio,
#order-standard_cart .cart-billing-cycle__card:has(.cart-billing-cycle__input:checked) .cart-billing-cycle__radio {
  border-color: var(--color-primary-blue, #0066f7);
}

#order-standard_cart .cart-billing-cycle__card.is-selected .cart-billing-cycle__radio::after,
#order-standard_cart .cart-billing-cycle__card:has(.cart-billing-cycle__input:checked) .cart-billing-cycle__radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary-blue, #0066f7);
  transform: translate(-50%, -50%);
}

#order-standard_cart .cart-billing-cycle__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 8px;
  min-width: 0;
  flex: 1;
}

#order-standard_cart .cart-billing-cycle__title {
  grid-column: 1;
  grid-row: 1;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-neutral-black);
}

#order-standard_cart .cart-billing-cycle__price {
  grid-column: 2;
  grid-row: 1;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #4b5563;
  white-space: nowrap;
}

#order-standard_cart .cart-billing-cycle__price-suffix {
  margin-left: 2px;
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
}

#order-standard_cart .cart-config-radio__body--flag .cart-billing-cycle__price {
  margin-left: auto;
  flex-shrink: 0;
}

#order-standard_cart .cart-billing-cycle__price--free {
  color: var(--color-status-green, #12b300);
}

#order-standard_cart .cart-config-option__price {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #4b5563;
  white-space: nowrap;
}

#order-standard_cart .cart-config-checkbox__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

#order-standard_cart .cart-config-quantity__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

#order-standard_cart .cart-billing-cycle__save {
  grid-column: 1 / -1;
  grid-row: 2;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  max-width: 100%;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: #8b2942;
  white-space: nowrap;
}

#order-standard_cart .cart-billing-cycle__save-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#order-standard_cart .cart-billing-cycle__save-icon {
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1;
}

@media (max-width: 991px) {
  #order-standard_cart .cart-billing-cycle__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #order-standard_cart .cart-billing-cycle__cards {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  #order-standard_cart .cart-billing-cycle__card {
    flex: 0 0 min(180px, 72vw);
    scroll-snap-align: start;
  }
}

/* Config option radio cards (e.g. Location) — same look as billing cycle */
#order-standard_cart .cart-config-radio {
  margin-bottom: 8px;
}

#order-standard_cart .cart-config-radio__label {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-black);
}

#order-standard_cart .cart-config-radio .cart-billing-cycle__cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#order-standard_cart .cart-config-radio .iradio_square-blue {
  display: none !important;
}

#order-standard_cart .cart-config-radio__body--flag {
  display: flex;
  align-items: center;
  gap: 10px;
  grid-template-columns: none;
}

#order-standard_cart .cart-config-radio__body--flag .cart-billing-cycle__title {
  grid-column: auto;
  grid-row: auto;
}

#order-standard_cart .cart-config-radio__flag-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

#order-standard_cart .cart-config-radio__flag {
  display: block;
  width: auto;
  height: 18px;
  max-width: none;
  border-radius: 3px;
}

@media (max-width: 640px) {
  #order-standard_cart .cart-config-radio .cart-billing-cycle__cards {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  #order-standard_cart .cart-config-radio .cart-billing-cycle__card {
    flex: 0 0 min(160px, 72vw);
    scroll-snap-align: start;
  }
}

#order-standard_cart .product-configurable-options .form-group {
  margin-bottom: 20px;
}

#order-standard_cart .product-configurable-options .form-group > label:first-child {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-black);
}

#order-standard_cart select.form-control:has(+ .nice-select) {
  display: none !important;
}

#order-standard_cart .product-configurable-options .nice-select.form-control {
  width: 100%;
  display: flex !important;
  align-items: center;
  float: none;
  clear: both;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 36px;
  line-height: 1.35;
  padding: 8px 38px 8px 16px;
  white-space: normal;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.14) !important;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#order-standard_cart .product-configurable-options .nice-select.form-control:hover {
  border-color: rgba(0, 102, 247, 0.28) !important;
  box-shadow: 0px 6px 20px rgba(0, 102, 247, 0.1),
    0px 2px 8px rgba(15, 15, 15, 0.06);
}

#order-standard_cart .product-configurable-options .nice-select.form-control.open,
#order-standard_cart .product-configurable-options .nice-select.form-control:focus {
  border-color: rgba(0, 102, 247, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.12),
    0px 6px 20px rgba(0, 102, 247, 0.12);
}

#order-standard_cart .product-configurable-options .nice-select.form-control::after {
  border: none;
  width: 24px;
  height: 24px;
  right: 8px;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
  background: var(--color-neutral-black);
  mask: url("../img/select-chevron.svg") center/10px no-repeat;
  -webkit-mask: url("../img/select-chevron.svg") center/10px no-repeat;
}

#order-standard_cart .product-configurable-options .nice-select.form-control.open::after {
  transform: translateY(-50%);
}

#order-standard_cart .product-configurable-options .nice-select.form-control .current {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
  font-weight: 500;
  font-size: 16px;
  color: var(--color-neutral-black);
  padding-right: 4px;
}

#order-standard_cart .product-configurable-options .nice-select.form-control .list {
  width: max-content;
  min-width: 100%;
  max-width: min(560px, calc(100vw - 48px));
  white-space: normal;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.12);
  box-shadow: 0px 8px 28px rgba(0, 51, 153, 0.12),
    0px 4px 16px rgba(15, 15, 15, 0.08);
}

#order-standard_cart .product-configurable-options .nice-select.form-control .option:hover,
#order-standard_cart .product-configurable-options .nice-select.form-control .option.focus,
#order-standard_cart .product-configurable-options .nice-select.form-control .option.selected.focus {
  background: rgba(0, 102, 247, 0.06);
}

#order-standard_cart .product-configurable-options .nice-select.form-control .option.selected {
  font-weight: 600;
  color: var(--color-primary-blue);
}

#order-standard_cart .product-configurable-options .nice-select.form-control .option {
  white-space: normal;
  line-height: 1.35;
  padding: 10px 16px;
}

#order-standard_cart .product-configurable-options .col-sm-12 .form-group .irs {
  margin-top: 8px;
}

/* Configurable option: OS image card picker (option type 1, auto-detected) */
#order-standard_cart .cart-os-picker {
  margin-bottom: 24px;
  overflow: visible;
}

#order-standard_cart .cart-os-picker__title {
  display: block;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-blue, #0066f7);
}

/* Master select must stay in DOM for WHMCS; hide native + nice-select clone (wins over .product-configurable-options .nice-select) */
#order-standard_cart .product-configurable-options .cart-os-picker select.cart-os-picker__master,
#order-standard_cart .product-configurable-options .cart-os-picker .nice-select.cart-os-picker__master {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  pointer-events: none !important;
}

#order-standard_cart .cart-os-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  overflow: visible;
}

#order-standard_cart .cart-os-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  overflow: visible;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#order-standard_cart .cart-os-card:has(.nice-select.open) {
  z-index: 12;
}

#order-standard_cart .cart-os-card:hover {
  border-color: rgba(0, 102, 247, 0.22);
  box-shadow: 0px 6px 24px rgba(0, 102, 247, 0.1),
    0px 4px 16px rgba(0, 0, 0, 0.06);
}

#order-standard_cart .cart-os-card.is-selected {
  border: 2px solid var(--color-primary-blue, #0066f7);
  background: rgba(0, 102, 247, 0.02);
  box-shadow: 0px 6px 24px rgba(0, 102, 247, 0.14),
    0px 4px 22.9px rgba(0, 0, 0, 0.08);
}

#order-standard_cart .cart-os-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  cursor: pointer;
  border-radius: 19px 19px 0 0;
  transition: background 0.2s ease, color 0.2s ease;
}

#order-standard_cart .cart-os-card.is-selected .cart-os-card__head {
  padding: 13px 15px;
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  border-radius: 18px 18px 0 0;
}

#order-standard_cart .cart-os-card__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#order-standard_cart .cart-os-card__radio-dot {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #c5cad6;
  background: #fff;
  position: relative;
  transition: border-color 0.2s ease, background 0.2s ease;
}

#order-standard_cart .cart-os-card:hover .cart-os-card__radio-dot {
  border-color: rgba(0, 102, 247, 0.45);
}

#order-standard_cart .cart-os-card.is-selected .cart-os-card__radio-dot {
  border-color: rgba(255, 255, 255, 0.85);
  background: transparent;
}

#order-standard_cart .cart-os-card.is-selected .cart-os-card__radio-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

#order-standard_cart .cart-os-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-neutral-black);
}

#order-standard_cart .cart-os-card.is-selected .cart-os-card__title {
  color: #fff;
}

#order-standard_cart .cart-os-card__version {
  padding: 12px 16px 14px;
  overflow: visible;
  position: relative;
  z-index: 2;
}

#order-standard_cart .cart-os-card__version select.cart-os-card__version-select {
  display: none !important;
}

#order-standard_cart .cart-os-card__version .nice-select.form-control.cart-os-card__version-select {
  width: 100%;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  line-height: 36px;
  padding: 0 38px 0 16px;
  display: flex !important;
  align-items: center;
  float: none;
  border-radius: 29px !important;
  border: none !important;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  transition: box-shadow 0.2s ease;
}

#order-standard_cart .cart-os-card__version .nice-select.form-control.cart-os-card__version-select:hover {
  box-shadow: 0px 6px 20px rgba(0, 102, 247, 0.1),
    0px 2px 8px rgba(15, 15, 15, 0.06);
}

#order-standard_cart .cart-os-card__version .nice-select.form-control.cart-os-card__version-select.open,
#order-standard_cart .cart-os-card__version .nice-select.form-control.cart-os-card__version-select:focus {
  box-shadow: 0 0 0 2px rgba(0, 102, 247, 0.2),
    0px 6px 20px rgba(0, 102, 247, 0.12);
}

#order-standard_cart .cart-os-card__version .nice-select.form-control.cart-os-card__version-select .current {
  font-weight: 500;
  font-size: 15px;
  color: var(--color-neutral-black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#order-standard_cart .cart-os-card__version .nice-select.form-control.cart-os-card__version-select::after {
  border: none;
  width: 24px;
  height: 24px;
  right: 8px;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
  background: var(--color-neutral-black);
  mask: url("../img/select-chevron.svg") center/10px no-repeat;
  -webkit-mask: url("../img/select-chevron.svg") center/10px no-repeat;
}

#order-standard_cart .cart-os-card__version .nice-select.form-control.cart-os-card__version-select.open::after {
  transform: translateY(-50%);
}

/* Hide stray duplicate nice-select clones (second init without cleanup) */
#order-standard_cart .cart-os-card__version .nice-select + .nice-select {
  display: none !important;
}

#order-standard_cart .cart-os-card__version .nice-select.form-control.open {
  z-index: 15;
}

#order-standard_cart .cart-os-card__version .nice-select.form-control .list {
  z-index: 20;
  max-height: min(240px, 50vh);
  border-radius: 12px;
  border: 1px solid rgba(0, 102, 247, 0.12);
  box-shadow: 0px 8px 28px rgba(0, 51, 153, 0.12),
    0px 4px 16px rgba(15, 15, 15, 0.08);
}

#order-standard_cart .cart-os-card__version .nice-select.form-control .option:hover,
#order-standard_cart .cart-os-card__version .nice-select.form-control .option.focus,
#order-standard_cart .cart-os-card__version .nice-select.form-control .option.selected.focus {
  background: rgba(0, 102, 247, 0.06);
}

#order-standard_cart .cart-os-card__version .nice-select.form-control .option.selected {
  font-weight: 600;
  color: var(--color-primary-blue, #0066f7);
}

#order-standard_cart .cart-os-card__footer {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 12px 16px;
  background: rgba(0, 102, 247, 0.04);
  border-top: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 0 0 18px 18px;
}

#order-standard_cart .cart-os-card.is-selected .cart-os-card__footer {
  background: rgba(0, 102, 247, 0.06);
  border-radius: 0 0 17px 17px;
}

#order-standard_cart .cart-os-card__price {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

#order-standard_cart .cart-os-card__price--free {
  color: var(--color-status-green, #12b300);
}

#order-standard_cart .cart-os-card__price--paid {
  color: var(--color-primary-blue, #0066f7);
}

#order-standard_cart .cart-os-card__price-suffix {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
}

@media (max-width: 992px) {
  #order-standard_cart .cart-os-picker__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 576px) {
  #order-standard_cart .cart-os-picker__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  #order-standard_cart .cart-os-card__head {
    padding: 12px 14px;
  }

  #order-standard_cart .cart-os-card.is-selected .cart-os-card__head {
    padding: 11px 13px;
  }

  #order-standard_cart .cart-os-card__version {
    padding: 10px 14px 12px;
  }

  #order-standard_cart .cart-os-card__footer {
    padding: 10px 14px;
  }
}

/* Configurable option: yes/no checkbox (option type 3) */
#order-standard_cart .cart-config-checkbox {
  margin-bottom: 20px;
}

#order-standard_cart .cart-config-checkbox__title {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-black);
}

#order-standard_cart .cart-config-checkbox__card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 16px;
  background: #fff;
  border: 2px solid rgba(15, 23, 42, 0.12);
  border-radius: 16px;
  box-shadow: 0px 2px 10px rgba(0, 51, 153, 0.04),
    0px 1px 4px rgba(15, 15, 15, 0.04);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#order-standard_cart .cart-config-checkbox__card:hover {
  border-color: rgba(0, 102, 247, 0.28);
}

#order-standard_cart .cart-config-checkbox__card.is-selected,
#order-standard_cart .cart-config-checkbox__card:has(.cart-config-checkbox__input:checked) {
  border: 2px solid var(--color-primary-blue, #0066f7);
  background: rgba(0, 102, 247, 0.04);
  box-shadow: 0px 4px 16px rgba(0, 102, 247, 0.1),
    0px 2px 8px rgba(15, 15, 15, 0.04);
}

#order-standard_cart .cart-config-checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#order-standard_cart .cart-config-checkbox__box {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid #c5cad6;
  border-radius: 6px;
  background: #fff;
  position: relative;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

#order-standard_cart .cart-config-checkbox__card.is-selected .cart-config-checkbox__box,
#order-standard_cart .cart-config-checkbox__card:has(.cart-config-checkbox__input:checked) .cart-config-checkbox__box {
  border-color: var(--color-primary-blue, #0066f7);
  background: var(--color-primary-blue, #0066f7);
  box-shadow: 0px 2px 8px rgba(0, 102, 247, 0.25);
}

#order-standard_cart .cart-config-checkbox__card.is-selected .cart-config-checkbox__box::after,
#order-standard_cart .cart-config-checkbox__card:has(.cart-config-checkbox__input:checked) .cart-config-checkbox__box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -60%) rotate(-45deg);
}

#order-standard_cart .cart-config-checkbox__text {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-neutral-black);
}

#order-standard_cart .cart-config-checkbox .icheckbox_square-blue {
  display: none !important;
}

#order-standard_cart .addon-products .form-group > label:first-child {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-black);
}

#order-standard_cart .addon-products .nice-select.form-control {
  width: 100%;
  max-width: 360px;
  display: flex;
}

#order-standard_cart .cart-help-notice {
  margin-top: 24px;
  padding: 16px 20px;
  background: rgba(0, 102, 247, 0.04);
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-neutral-black);
}

#order-standard_cart .cart-help-notice .feather {
  margin-right: 8px;
  color: var(--color-primary-blue);
  vertical-align: -2px;
}

#order-standard_cart .cart-help-notice a {
  color: var(--color-primary-blue);
  font-weight: 600;
  text-decoration: none;
}

#order-standard_cart .cart-help-notice a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Checkout page (cart.php?a=checkout)
   -------------------------------------------------------------------------- */
#order-standard_cart .cart-checkout-auth-toggle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

#order-standard_cart .cart-checkout-panel {
  position: relative;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
  padding: 24px;
  margin-bottom: 24px;
}

#order-standard_cart .cart-checkout-panel__title {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  width: auto;
  height: auto;
  margin: 0 0 20px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  line-height: 1.3;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-neutral-black);
  text-transform: none;
  letter-spacing: normal;
}

#order-standard_cart .cart-checkout-panel .sub-heading,
#order-standard_cart .cart-checkout-panel .sub-heading span {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  width: auto;
  height: auto;
  margin: 0 0 20px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  line-height: 1.3;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-neutral-black);
  text-transform: none;
}

#order-standard_cart .cart-checkout-panel .form-group {
  margin-bottom: 16px;
}

#order-standard_cart .cart-checkout-panel textarea.field.form-control,
#order-standard_cart .cart-checkout-notes {
  min-height: 120px;
  height: auto;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: 20px;
  display: block;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06);
  border: none !important;
}

#order-standard_cart .cart-checkout-panel textarea.field.form-control:focus,
#order-standard_cart .cart-checkout-notes:focus {
  outline: none;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06),
    0 0 0 2px rgba(0, 102, 247, 0.2);
}

#order-standard_cart .cart-checkout-notes-panel {
  padding: 16px 20px;
  margin-bottom: 16px;
}

#order-standard_cart .cart-checkout-notes-panel__title {
  margin-bottom: 10px;
  font-size: 16px;
}

#order-standard_cart .cart-checkout-notes-field {
  margin-bottom: 6px;
}

#order-standard_cart .cart-checkout-notes-field .field-icon {
  height: 32px;
  padding-top: 0;
}

#order-standard_cart .cart-checkout-notes {
  min-height: 0;
  height: 64px;
  max-height: 64px;
  line-height: 1.4;
  padding: 8px 14px 8px 42px;
  font-size: 14px;
  resize: none;
  overflow-y: auto;
}

#order-standard_cart .cart-checkout-notes-counter {
  text-align: right;
  font-size: 12px;
  color: #9ca3af;
  line-height: 1;
}

#order-standard_cart .cart-checkout-panel select.form-control:has(+ .nice-select) {
  display: none !important;
}

#order-standard_cart .cart-checkout-panel .nice-select.form-control {
  width: 100%;
  display: flex !important;
  align-items: center;
  float: none;
  clear: both;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 36px;
  line-height: 1.35;
  padding: 8px 38px 8px 16px;
  white-space: normal;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.14) !important;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
}

#order-standard_cart .cart-checkout-panel .nice-select.form-control::after {
  border: none;
  width: 24px;
  height: 24px;
  right: 8px;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
  background: var(--color-neutral-black);
  mask: url("../img/select-chevron.svg") center/10px no-repeat;
  -webkit-mask: url("../img/select-chevron.svg") center/10px no-repeat;
}

#order-standard_cart .cart-checkout-panel .nice-select.form-control .current {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  font-weight: 500;
  font-size: 16px;
  color: var(--color-neutral-black);
}

#order-standard_cart .cart-checkout-panel .nice-select.form-control .list {
  width: max-content;
  min-width: 100%;
  max-width: min(560px, calc(100vw - 48px));
  white-space: normal;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.12);
  box-shadow: 0px 8px 28px rgba(0, 51, 153, 0.12),
    0px 4px 16px rgba(15, 15, 15, 0.08);
}

#order-standard_cart .cart-checkout-panel .account-select-container {
  margin: 0;
  border: none !important;
}

#order-standard_cart .cart-checkout-panel .account-select-container > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

#order-standard_cart .cart-checkout-panel .account-select-container .account {
  border: 1px solid rgba(0, 102, 247, 0.12) !important;
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 12px;
  background: #fff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#order-standard_cart .cart-checkout-panel .account-select-container .account.border-bottom {
  border: 1px solid rgba(0, 102, 247, 0.12) !important;
}

#order-standard_cart .cart-checkout-panel .account-select-container .account.active {
  border-color: var(--color-primary-blue) !important;
  background: rgba(0, 102, 247, 0.04) !important;
  box-shadow: 0px 4px 16px rgba(0, 102, 247, 0.1);
}

#order-standard_cart .cart-checkout-panel .account-select-container .account label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  cursor: pointer;
  font-weight: 500;
  color: var(--color-neutral-black);
}

#order-standard_cart .cart-checkout-panel .account-select-container .account label .address {
  flex: 1 1 auto;
  min-width: 0;
}

#order-standard_cart .cart-checkout-panel .account-select-container .account .address strong {
  display: inline;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-neutral-black);
  margin-bottom: 0;
}

#order-standard_cart .cart-checkout-panel .account-select-container .account .address .small {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
}

#order-standard_cart .cart-checkout-panel .account-select-container .account .label-info {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  background: rgba(0, 102, 247, 0.08);
  color: var(--color-primary-blue);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: none;
}

#order-standard_cart .cart-checkout-panel .account-select-container .iradio_square-blue,
#order-standard_cart .apply-credit-container .iradio_square-blue,
#order-standard_cart .cart-checkout-panel .payment-gateways-container .iradio_square-blue {
  flex-shrink: 0;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  margin: 0 !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  background: #fff !important;
  background-image: none !important;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

#order-standard_cart .cart-checkout-panel .account-select-container .iradio_square-blue.checked,
#order-standard_cart .apply-credit-container .iradio_square-blue.checked,
#order-standard_cart .cart-checkout-panel .payment-gateways-container .iradio_square-blue.checked {
  border-color: var(--color-primary-blue);
  background: var(--color-primary-blue) !important;
  box-shadow: 0px 2px 8px rgba(0, 102, 247, 0.25);
}

#order-standard_cart .cart-checkout-panel .account-select-container .iradio_square-blue.checked::after,
#order-standard_cart .apply-credit-container .iradio_square-blue.checked::after,
#order-standard_cart .cart-checkout-panel .payment-gateways-container .iradio_square-blue.checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -60%) rotate(-45deg);
}

#order-standard_cart .cart-checkout-panel .account-select-container .iradio_square-blue input,
#order-standard_cart .apply-credit-container .iradio_square-blue input,
#order-standard_cart .cart-checkout-panel .payment-gateways-container .iradio_square-blue input,
#order-standard_cart .cart-checkout-panel .account-select-container .iradio_square-blue .iCheck-helper,
#order-standard_cart .apply-credit-container .iradio_square-blue .iCheck-helper {
  opacity: 0 !important;
}

#order-standard_cart .cart-checkout-total {
  background: linear-gradient(180deg, #353535 0%, #1e1e1e 100%);
  box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 24px;
  text-align: center;
  color: #fff;
}

#order-standard_cart .cart-checkout-total__label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 8px;
}

#order-standard_cart .cart-checkout-total__amount {
  display: block;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.1;
  background: linear-gradient(180deg, #ffffff 0%, #d7d7d7 116.3%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#order-standard_cart .apply-credit-container {
  padding: 16px 20px;
  background: rgba(0, 102, 247, 0.04);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 16px;
  margin-bottom: 20px;
}

#order-standard_cart .apply-credit-container p {
  margin: 0 0 12px;
  font-size: 14px;
  color: #6b7280;
}

#order-standard_cart .apply-credit-container label.radio {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 12px;
  padding: 0 !important;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-neutral-black);
  cursor: pointer;
}

#order-standard_cart .apply-credit-container label.radio > span {
  flex: 1 1 auto;
  min-width: 0;
}

#order-standard_cart .apply-credit-container label.radio:last-child {
  margin-bottom: 0;
}

#order-standard_cart .payment-gateways-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
}

#order-standard_cart .payment-gateways-container label.radio-inline {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 12px 8px;
  border: 1px solid rgba(0, 102, 247, 0.12);
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: var(--color-neutral-black);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#order-standard_cart .payment-gateways-container label.radio-inline:has(input:checked) {
  border-color: var(--color-primary-blue);
  background: rgba(0, 102, 247, 0.04);
  box-shadow: 0px 2px 10px rgba(0, 102, 247, 0.1);
}

@media (max-width: 767px) {
  #order-standard_cart .payment-gateways-container {
    flex-wrap: wrap;
  }

  #order-standard_cart .payment-gateways-container label.radio-inline {
    flex: 1 1 calc(50% - 4px);
    min-width: calc(50% - 4px);
    font-size: 12px;
    padding: 10px 6px;
  }
}

@media (max-width: 479px) {
  #order-standard_cart .payment-gateways-container label.radio-inline {
    flex: 1 1 100%;
    min-width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 10px 12px;
  }
}

#order-standard_cart #creditCardInputFields,
#order-standard_cart .cart-checkout-panel #creditCardInputFields {
  display: block;
  padding: 0 !important;
  margin: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none;
}

#order-standard_cart .cart-checkout-panel .cc-input-container {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

#order-standard_cart .cart-checkout-panel .cc-input-container .field-error-msg {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #cc0000;
}

#order-standard_cart .cart-checkout-panel .cc-input-container .form-group.has-error .field-error-msg {
  display: block;
}

#order-standard_cart .cart-checkout-login-btn {
  min-width: 0;
  height: 36px;
}

#order-standard_cart .cart-checkout-actions {
  margin-top: 8px;
  padding-top: 8px;
}

#order-standard_cart .cart-checkout-tos {
  max-width: 400px;
  margin: 0 auto 16px;
}

#order-standard_cart .cart-checkout-tos__label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  background: rgba(0, 102, 247, 0.04);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
}

#order-standard_cart .cart-checkout-tos__input {
  position: static;
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--color-primary-blue);
}

#order-standard_cart .cart-checkout-tos__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-neutral-black);
}

#order-standard_cart .cart-checkout-tos__text a {
  color: var(--color-primary-blue);
  font-weight: 600;
  text-decoration: none;
}

#order-standard_cart .cart-checkout-tos__text a:hover {
  text-decoration: underline;
}

#order-standard_cart .cart-checkout-submit {
  max-width: 400px;
  margin: 24px auto 0;
  min-height: 48px;
  height: 48px;
}

#order-standard_cart .cart-checkout-submit.disabled,
#order-standard_cart .cart-checkout-submit:disabled {
  opacity: 0.5;
  pointer-events: none;
}

#order-standard_cart .checkout-security-msg {
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid rgba(0, 102, 247, 0.12);
  background: rgba(0, 102, 247, 0.04);
  font-size: 14px;
  color: #6b7280;
  text-align: center;
}

#order-standard_cart .checkout-security-msg .fas {
  color: var(--color-primary-blue);
  margin-right: 6px;
}

#order-standard_cart .checkout-error-feedback {
  border-radius: 16px;
  margin-bottom: 24px;
}

#order-standard_cart .cart-checkout-marketing__text,
#order-standard_cart .marketing-email-optin p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

#order-standard_cart .cart-checkout-marketing--compact {
  padding: 14px 20px;
  margin-bottom: 16px;
}

#order-standard_cart .cart-checkout-marketing__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#order-standard_cart .cart-checkout-marketing__label {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-neutral-black);
}

#order-standard_cart .cart-checkout-marketing--compact .cart-checkout-marketing-switch {
  flex: 0 0 auto;
}

/* Account security — password fields */
#order-standard_cart .cart-checkout-security__fields {
  margin-left: -8px;
  margin-right: -8px;
}

#order-standard_cart .cart-checkout-security__fields > [class*="col-"] {
  padding-left: 8px;
  padding-right: 8px;
}

#order-standard_cart .cart-checkout-password-input {
  padding-right: 48px !important;
}

#order-standard_cart .cart-checkout-generate-password {
  border: none;
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  color: #fff;
  width: 32px;
  height: 32px;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 1;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  z-index: 23;
}

#order-standard_cart .cart-checkout-generate-password:hover,
#order-standard_cart .cart-checkout-generate-password:focus {
  box-shadow: 0px 4px 12px rgba(0, 102, 247, 0.35);
  outline: none;
}

#order-standard_cart .cart-checkout-generate-password i {
  font-size: 14px;
  line-height: 1;
}

#order-standard_cart .cart-checkout-password-alert {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(0, 102, 247, 0.08);
  background: rgba(0, 102, 247, 0.04);
  color: #6b7280;
  font-size: 13px;
  line-height: 1.55;
}

#order-standard_cart .cart-checkout-password-alert strong {
  color: var(--color-neutral-black);
}

#order-standard_cart .cart-checkout-password-alert code {
  color: var(--color-primary-blue);
  background: rgba(0, 102, 247, 0.08);
  border-radius: 4px;
  padding: 0 4px;
}

#order-standard_cart .cart-checkout-password-feedback {
  margin-top: 4px;
  margin-bottom: 0;
  padding: 14px 16px;
  background: rgba(0, 102, 247, 0.04);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 16px;
}

#order-standard_cart .cart-checkout-password-feedback .password-strength-meter {
  margin-top: 0;
}

#order-standard_cart .cart-checkout-password-feedback .password-strength-meter .progress {
  height: 8px;
  margin-bottom: 0;
  border-radius: 20px;
  background: rgba(0, 102, 247, 0.08);
  overflow: hidden;
  box-shadow: none;
}

#order-standard_cart .cart-checkout-password-feedback .password-strength-meter .progress-bar {
  border-radius: 20px;
  transition: width 0.2s ease, background-color 0.2s ease;
}

#order-standard_cart .cart-checkout-password-feedback .password-strength-meter .progress-bar.progress-bar-success {
  background-color: var(--color-status-green, #12b300) !important;
}

#order-standard_cart .cart-checkout-password-feedback .password-strength-meter .progress-bar.progress-bar-warning {
  background-color: #f59e0b !important;
}

#order-standard_cart .cart-checkout-password-feedback .password-strength-meter .progress-bar.progress-bar-danger {
  background-color: #e52e2e !important;
}

#order-standard_cart .cart-checkout-password-feedback__label {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
}

/* Checkout bootstrap-switch (marketing + company toggles) */
#order-standard_cart .cart-checkout-marketing .bootstrap-switch.bootstrap-switch-wrapper,
#order-standard_cart .cart-checkout-company .bootstrap-switch.bootstrap-switch-wrapper {
  display: inline-block;
  width: 100px !important;
  min-width: 100px;
  border-radius: 20px;
  border: 1px solid rgba(0, 102, 247, 0.2);
  overflow: hidden;
  vertical-align: middle;
  line-height: 1;
  background: #e2e8f0;
}

#order-standard_cart .cart-checkout-marketing .bootstrap-switch.bootstrap-switch-on.bootstrap-switch-wrapper,
#order-standard_cart .cart-checkout-company .bootstrap-switch.bootstrap-switch-on.bootstrap-switch-wrapper {
  border-color: var(--color-primary-blue);
  background: var(--color-primary-blue);
}

#order-standard_cart .cart-checkout-marketing .bootstrap-switch .bootstrap-switch-container,
#order-standard_cart .cart-checkout-company .bootstrap-switch .bootstrap-switch-container {
  width: 150px !important;
  border-radius: 20px;
}

#order-standard_cart .cart-checkout-marketing .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container,
#order-standard_cart .cart-checkout-company .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container {
  margin-left: 0 !important;
}

#order-standard_cart .cart-checkout-marketing .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container,
#order-standard_cart .cart-checkout-company .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container {
  margin-left: -50px !important;
}

#order-standard_cart .cart-checkout-marketing .bootstrap-switch .bootstrap-switch-handle-on,
#order-standard_cart .cart-checkout-marketing .bootstrap-switch .bootstrap-switch-handle-off,
#order-standard_cart .cart-checkout-marketing .bootstrap-switch .bootstrap-switch-label,
#order-standard_cart .cart-checkout-company .bootstrap-switch .bootstrap-switch-handle-on,
#order-standard_cart .cart-checkout-company .bootstrap-switch .bootstrap-switch-handle-off,
#order-standard_cart .cart-checkout-company .bootstrap-switch .bootstrap-switch-label {
  display: inline-block !important;
  width: 50px !important;
  padding: 5px 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  vertical-align: top;
}

#order-standard_cart .cart-checkout-marketing .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
#order-standard_cart .cart-checkout-company .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
  color: #fff;
  background: var(--color-primary-blue);
  border-color: var(--color-primary-blue);
}

#order-standard_cart .cart-checkout-marketing .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary,
#order-standard_cart .cart-checkout-company .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary {
  background: #e2e8f0;
  border-color: #e2e8f0;
  color: #6b7280;
}

#order-standard_cart .cart-checkout-marketing .bootstrap-switch .bootstrap-switch-label,
#order-standard_cart .cart-checkout-company .bootstrap-switch .bootstrap-switch-label {
  background: #fff;
  border-left: 1px solid rgba(0, 102, 247, 0.14);
  border-right: 1px solid rgba(0, 102, 247, 0.14);
  margin-top: 0;
  margin-bottom: 0;
}

#order-standard_cart .cart-checkout-marketing .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
#order-standard_cart .cart-checkout-company .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label {
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
}

#order-standard_cart .cart-checkout-marketing .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
#order-standard_cart .cart-checkout-company .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label {
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
}

#order-standard_cart .cart-checkout-marketing .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-on,
#order-standard_cart .cart-checkout-company .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-on {
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
}

#order-standard_cart .cart-checkout-marketing .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-off,
#order-standard_cart .cart-checkout-company .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-off {
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
}

/* Company details (optional billing block) */
#order-standard_cart .cart-checkout-company__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

#order-standard_cart .cart-checkout-company__title {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}

#order-standard_cart .cart-checkout-company__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

#order-standard_cart .cart-checkout-company__toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-neutral-black);
  white-space: nowrap;
}

#order-standard_cart .cart-checkout-company__hint {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

#order-standard_cart .cart-checkout-company__fields.is-collapsed {
  display: none;
}

@media (max-width: 575.98px) {
  #order-standard_cart .cart-checkout-company__header {
    flex-direction: column;
    align-items: flex-start;
  }

  #order-standard_cart .cart-checkout-company__toggle {
    width: 100%;
    justify-content: space-between;
  }
}

#order-standard_cart .cart-checkout-panel .intl-tel-input {
  display: block;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06);
  border-radius: 29px;
}

#order-standard_cart .cart-checkout-panel .intl-tel-input .form-control {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

#order-standard_cart .cart-checkout-panel .intl-tel-input:focus-within {
  box-shadow: 0 0 0 2px rgba(0, 102, 247, 0.2);
}

#order-standard_cart .cart-checkout-panel .intl-tel-input .flag-container {
  left: 0;
  right: auto;
}

#order-standard_cart .cart-checkout-panel .intl-tel-input.separate-dial-code .selected-flag {
  height: 100%;
  display: table;
  padding-right: 18px;
  box-sizing: border-box;
  background-color: rgba(0, 102, 247, 0.06);
  border-radius: 29px 0 0 29px;
}

#order-standard_cart .cart-checkout-panel .intl-tel-input.separate-dial-code .selected-dial-code {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-neutral-black);
  padding-left: 28px;
  padding-right: 2px;
  white-space: nowrap;
}

#order-standard_cart .cart-checkout-panel .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 .selected-flag {
  width: 74px;
}

#order-standard_cart .cart-checkout-panel .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 .selected-flag {
  width: 82px;
}

#order-standard_cart .cart-checkout-panel .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 .selected-flag {
  width: 92px;
}

#order-standard_cart .cart-checkout-panel .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 .selected-flag {
  width: 100px;
}

#order-standard_cart .cart-checkout-panel .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input {
  padding-left: 80px !important;
}

#order-standard_cart .cart-checkout-panel .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input {
  padding-left: 88px !important;
}

#order-standard_cart .cart-checkout-panel .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input {
  padding-left: 98px !important;
}

#order-standard_cart .cart-checkout-panel .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input {
  padding-left: 106px !important;
}

#order-standard_cart .cart-checkout-panel .intl-tel-input .selected-flag .iti-flag {
  left: 8px;
}

@media (max-width: 767px) {
  #order-standard_cart .cart-checkout-panel {
    padding: 20px 16px;
  }

  #order-standard_cart .cart-checkout-total__amount {
    font-size: 28px;
  }

  #order-standard_cart .cart-checkout-submit {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   Configure product domain page (cart.php?a=confproduct&domain)
   -------------------------------------------------------------------------- */
#order-standard_cart .cart-domain-page .cart-domain-body,
#order-standard_cart .cart-domain-page .cart-form-col {
  padding: 0 32px 32px;
}

#order-standard_cart .cart-domain-page #frmProductDomain,
#order-standard_cart .cart-domain-page #frmProductDomainSelections {
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

#order-standard_cart .cart-domain-page .domain-productconfigiration-options-group.row {
  display: grid;
  margin-left: 0;
  margin-right: 0;
}

#order-standard_cart .cart-domain-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: none;
  margin: 0 0 20px;
  padding: 0;
}

#order-standard_cart .cart-domain-options:has(.cart-domain-option:nth-child(4):last-child) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#order-standard_cart .cart-domain-options:has(.cart-domain-option:nth-child(5)) {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

#order-standard_cart .cart-domain-page .cart-domain-option.domain-productconfigiration-options-item {
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  float: none !important;
}

#order-standard_cart .cart-domain-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 8px;
  height: 100%;
  min-height: 148px;
  margin: 0 !important;
  padding: 20px 12px !important;
  background: #fff;
  border: 2px solid rgba(15, 23, 42, 0.12);
  border-radius: 20px;
  box-shadow: 0px 2px 10px rgba(0, 51, 153, 0.04),
    0px 1px 4px rgba(15, 15, 15, 0.04);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#order-standard_cart .cart-domain-option:hover {
  border-color: rgba(0, 102, 247, 0.28);
}

#order-standard_cart .cart-domain-option.option-selected,
#order-standard_cart .cart-domain-option:has(input:checked) {
  border: 2px solid var(--color-primary-blue, #0066f7);
  background: rgba(0, 102, 247, 0.04);
  box-shadow: 0px 4px 16px rgba(0, 102, 247, 0.1),
    0px 2px 6px rgba(0, 51, 153, 0.06);
}

#order-standard_cart .cart-domain-option .iradio_square-blue,
#order-standard_cart .cart-domain-option .activation-box,
#order-standard_cart .cart-domain-option .activation-icon {
  display: none !important;
}

#order-standard_cart .cart-domain-option > input[type="radio"].no-icheck {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

#order-standard_cart .cart-domain-option > input[type="radio"]:not(.no-icheck) {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

#order-standard_cart .cart-domain-option__radio {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #fff;
  position: relative;
  transition: border-color 0.2s ease;
}

#order-standard_cart .cart-domain-option.option-selected .cart-domain-option__radio,
#order-standard_cart .cart-domain-option:has(input:checked) .cart-domain-option__radio {
  border-color: var(--color-primary-blue, #0066f7);
}

#order-standard_cart .cart-domain-option.option-selected .cart-domain-option__radio::after,
#order-standard_cart .cart-domain-option:has(input:checked) .cart-domain-option__radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary-blue, #0066f7);
}

#order-standard_cart .cart-domain-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 102, 247, 0.08);
  color: var(--color-primary-blue);
  font-size: 22px;
  transition: background 0.2s ease, color 0.2s ease;
}

#order-standard_cart .cart-domain-option.option-selected .cart-domain-option__icon,
#order-standard_cart .cart-domain-option:has(input:checked) .cart-domain-option__icon {
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  color: #fff;
}

#order-standard_cart .cart-domain-option__title {
  display: block;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-neutral-black);
}

#order-standard_cart .cart-domain-option__subtitle {
  display: block;
  width: 100%;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: #6b7280;
}

#order-standard_cart .cart-domain-page .cart-domain-inputs.domain-slector-inputs {
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 16px 20px !important;
  border-top: none;
  background: rgba(0, 102, 247, 0.04);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
  box-sizing: border-box;
  overflow: visible;
}

#order-standard_cart .cart-domain-page .cart-domain-inputs .option {
  display: none;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

#order-standard_cart .cart-domain-page .cart-domain-inputs .option:has(.cart-domain-panel--active) {
  display: block;
}

#order-standard_cart .cart-domain-page .domain-input-group .cart-domain-search__title {
  text-align: center;
  margin: 0 0 12px;
}

#order-standard_cart .cart-domain-page .cart-domain-search.domain-header-search-form {
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-shadow: none;
  position: static;
}

#order-standard_cart .cart-domain-page .cart-domain-search .domain-search {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  position: static;
}

#order-standard_cart .cart-domain-page .cart-domain-search-field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 20px;
  background: #fff;
  border-radius: 29px;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06);
  overflow: visible;
  position: relative;
}

#order-standard_cart .cart-domain-page .cart-domain-search-field .domain-search-input-header,
#order-standard_cart .cart-domain-page .cart-domain-search-field .inputdomainsearch {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  text-align: left;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 15px;
}

#order-standard_cart .cart-domain-page .cart-domain-search .inputdomainselect {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
  flex: 0 0 104px;
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: auto !important;
  margin: 0 !important;
  z-index: 2;
}

#order-standard_cart .cart-domain-page .cart-domain-search .inputdomainselect select.cart-domain-tld-select {
  display: none !important;
}

#order-standard_cart .cart-domain-page .cart-domain-search .inputdomainselect .nice-select.form-control {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 36px !important;
  line-height: 34px !important;
  padding: 0 26px 0 10px !important;
  margin: 0 !important;
  float: none !important;
  display: block !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 102, 247, 0.14) !important;
  background: rgba(0, 102, 247, 0.06) !important;
  box-shadow: none !important;
}

#order-standard_cart .cart-domain-page .cart-domain-search .inputdomainselect .nice-select.form-control .current {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 34px;
  color: var(--color-neutral-black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#order-standard_cart .cart-domain-page .cart-domain-search .inputdomainselect .nice-select.form-control::after {
  right: 8px;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
}

#order-standard_cart .cart-domain-page .cart-domain-search .inputdomainselect .nice-select.form-control.open::after {
  transform: translateY(-50%);
}

#order-standard_cart .cart-domain-page .cart-domain-search .inputdomainselect .nice-select.form-control .list {
  left: 0;
  right: 0;
  width: 100%;
  min-width: 120px;
  z-index: 30;
  border-radius: 12px;
}

#order-standard_cart .cart-domain-page .domain-header-search-form .domain-search-button-header,
#order-standard_cart .cart-domain-page .domain-header-search-form .search-btn {
  flex: 0 0 auto !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 120px;
  min-height: 48px;
  height: auto !important;
  padding: 0 28px;
  white-space: nowrap;
  margin: 0 !important;
}

#order-standard_cart .cart-domain-page .cart-domain-search--owndomain {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  position: static;
}

#order-standard_cart .cart-domain-page .cart-domain-search--owndomain .search-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 120px;
}

#order-standard_cart .cart-domain-page .cart-domain-owndomain-fields {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 12px 6px 20px;
  background: #fff;
  border-radius: 29px;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06);
}

#order-standard_cart .cart-domain-page .cart-domain-owndomain-fields .inputdomainsearch,
#order-standard_cart .cart-domain-page .cart-domain-owndomain-fields .form-control {
  flex: 1 1 0;
  min-width: 0;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 15px;
}

#order-standard_cart .cart-domain-owndomain-dot {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary-blue);
  flex-shrink: 0;
}

#order-standard_cart .cart-domain-owndomain-tld {
  flex: 0 0 80px;
  max-width: 100px;
}

#order-standard_cart .cart-domain-incart .form-control {
  height: 48px;
  border-radius: 29px;
  border: none;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06);
}

#order-standard_cart .cart-domain-free-note {
  width: 100%;
  max-width: none;
  margin: 16px 0 0;
  padding: 0;
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}

#order-standard_cart .cart-domain-results {
  width: 100%;
  max-width: none;
  margin: 24px 0 0;
  padding: 0;
}

#order-standard_cart .cart-domain-result-price {
  text-align: center;
  margin: 16px 0;
  font-size: 15px;
  color: #6b7280;
}

#order-standard_cart .cart-domain-result-price .domain-result-card__price {
  display: inline;
  margin: 0 0 0 4px;
  font-size: 24px;
}

#order-standard_cart .cart-domain-continue {
  max-width: 400px;
  margin: 24px auto 0;
  padding: 0;
}

#order-standard_cart .cart-domain-continue .button {
  width: 100%;
  min-height: 48px;
}

#order-standard_cart .cart-domain-page .domain-selection-options .option {
  background: transparent !important;
}

#order-standard_cart .cart-domain-page .domain-input-group {
  display: none;
  margin: 0;
}

#order-standard_cart .cart-domain-page .domain-input-group.cart-domain-panel--active {
  display: block;
}

@media (max-width: 991.98px) {
  #order-standard_cart .cart-domain-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #order-standard_cart .cart-domain-options:has(.cart-domain-option:nth-child(4):last-child),
  #order-standard_cart .cart-domain-options:has(.cart-domain-option:nth-child(5)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  #order-standard_cart .cart-domain-page .cart-form-col {
    padding: 0 20px 24px;
  }

  #order-standard_cart .cart-domain-page #frmProductDomain,
  #order-standard_cart .cart-domain-page #frmProductDomainSelections {
    padding-left: 0;
    padding-right: 0;
  }

  #order-standard_cart .cart-domain-options,
  #order-standard_cart .cart-domain-options:has(.cart-domain-option:nth-child(4):last-child),
  #order-standard_cart .cart-domain-options:has(.cart-domain-option:nth-child(5)) {
    grid-template-columns: 1fr;
    padding: 0;
  }

  #order-standard_cart .cart-domain-option {
    min-height: 0;
  }

  #order-standard_cart .cart-domain-page .cart-domain-search .domain-search {
    flex-direction: column;
  }

  #order-standard_cart .cart-domain-page .cart-domain-search-field {
    flex-wrap: wrap;
    padding: 12px 12px 12px 16px;
  }

  #order-standard_cart .cart-domain-page .cart-domain-search-field .inputdomainsearch {
    flex: 1 1 100%;
    min-width: 100%;
  }

  #order-standard_cart .cart-domain-page .cart-domain-search .inputdomainselect {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  #order-standard_cart .cart-domain-page .domain-header-search-form .domain-search-button-header,
  #order-standard_cart .cart-domain-page .domain-header-search-form .search-btn {
    width: 100% !important;
    min-width: 0;
  }

  #order-standard_cart .cart-domain-page .cart-domain-search--owndomain {
    flex-direction: column;
    align-items: stretch;
  }

  #order-standard_cart .cart-domain-page .cart-domain-search--owndomain .search-btn {
    width: 100% !important;
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   Domain register page (cart.php?a=add&domain=register)
   -------------------------------------------------------------------------- */
#order-standard_cart .domain-register-page .cart-quick-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 24px 32px 0;
}

#order-standard_cart .cart-quick-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 120px;
  padding: 24px 16px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

#order-standard_cart .cart-quick-link:hover {
  box-shadow: 0px 8px 28px rgba(0, 102, 247, 0.12);
  transform: translateY(-2px);
  text-decoration: none;
}

#order-standard_cart .cart-quick-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 102, 247, 0.08);
  color: var(--color-primary-blue);
  font-size: 20px;
}

#order-standard_cart .cart-quick-link__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: var(--color-neutral-black);
}

#order-standard_cart .domain-register-body {
  padding: 0 32px 32px;
}

#order-standard_cart .domain-register-search-wrap {
  max-width: 720px;
  margin: 0 auto 32px;
}

#order-standard_cart .domain-register-search .domain-search-input-header {
  height: 48px;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06);
  border-radius: 29px;
  border: none;
  padding: 8px 140px 8px 24px;
  font-weight: 500;
  font-size: 16px;
  color: var(--color-neutral-black);
}

#order-standard_cart .domain-register-search .domain-search-input-header:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 102, 247, 0.2);
}

#order-standard_cart .domain-register-search .domain-search-button-header {
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  min-width: 120px;
  min-height: 36px;
  padding: 8px 24px;
  border-radius: 44px;
}

#order-standard_cart .domain-register-captcha {
  max-width: 480px;
  margin: 24px auto 0;
  padding: 24px;
  background: rgba(0, 102, 247, 0.04);
  border-radius: 20px;
  text-align: center;
}

#order-standard_cart .domain-register-results {
  max-width: 720px;
  margin: 0 auto 32px;
}

#order-standard_cart .domain-lookup-loader {
  text-align: center;
  padding: 24px;
  font-size: 15px;
  color: #6b7280;
}

#order-standard_cart .domain-result-card {
  margin-bottom: 16px;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid rgba(0, 102, 247, 0.08);
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  background: #fff;
}

#order-standard_cart .domain-result-card--available {
  text-align: center;
  border-color: rgba(18, 179, 0, 0.2);
  background: rgba(18, 179, 0, 0.04);
}

#order-standard_cart .domain-result-card--unavailable,
#order-standard_cart .domain-result-card--invalid {
  border-color: rgba(245, 158, 11, 0.25);
  background: rgba(245, 158, 11, 0.06);
}

#order-standard_cart .domain-result-card__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-neutral-black);
}

#order-standard_cart .domain-result-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
}

#order-standard_cart .domain-result-card__price {
  display: block;
  margin: 16px 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary-blue);
}

#order-standard_cart .domain-result-card__action {
  width: 100%;
}

#order-standard_cart .domain-result-card .idn-language-selector {
  margin: 16px 0;
  text-align: left;
}

#order-standard_cart .domain-result-card .field-error-msg {
  margin-top: 8px;
  font-size: 13px;
  color: #dc2626;
}

#order-standard_cart .domain-register-results > .domain-contact-support {
  margin-top: 8px;
}

#order-standard_cart .domain-register-results .domain-error {
  margin-top: 12px;
  font-size: 14px;
  color: #dc2626;
}

#order-standard_cart .domain-suggestions-panel {
  max-width: 900px;
  margin: 32px auto 0;
  padding: 32px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
}

#order-standard_cart .domain-suggestions-panel__header {
  text-align: center;
  margin-bottom: 24px;
}

#order-standard_cart .domain-suggestions-panel__header .cart-section-title {
  margin-bottom: 0;
}

#order-standard_cart .domain-suggestions-panel__note {
  margin: 24px 0 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
}

#order-standard_cart .spotlight-tlds-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

#order-standard_cart .spotlight-tld {
  padding: 20px 16px;
  text-align: center;
  background: rgba(0, 102, 247, 0.04);
  border-radius: 16px;
  border: 1px solid rgba(0, 102, 247, 0.08);
}

#order-standard_cart .spotlight-tld-name {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-neutral-black);
}

#order-standard_cart #domainSuggestions .domain-suggestion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 20px 24px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 16px;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04);
  transition: box-shadow 0.2s ease;
}

#order-standard_cart #domainSuggestions .domain-suggestion:hover {
  box-shadow: 0px 6px 20px rgba(0, 102, 247, 0.1);
}

#order-standard_cart #domainSuggestions .domain-suggestion .domain,
#order-standard_cart #domainSuggestions .domain-suggestion .extension {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-neutral-black);
}

#order-standard_cart .domain-suggestion__promo,
#order-standard_cart .domain-suggestion span.promo.hot,
#order-standard_cart .domain-suggestion span.promo.new,
#order-standard_cart .domain-suggestion span.promo.sale {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  background: rgba(0, 102, 247, 0.08);
  color: var(--color-primary-blue);
}

#order-standard_cart #domainSuggestions .domain-suggestion .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

#order-standard_cart .domain-suggestion__price,
#order-standard_cart #domainSuggestions .domain-suggestion .price {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary-blue);
}

#order-standard_cart .more-suggestions {
  margin-top: 16px;
}

#order-standard_cart .more-suggestions .no-more {
  display: block;
  font-size: 13px;
  color: #6b7280;
}

#order-standard_cart .domain-pricing {
  max-width: 960px;
  margin: 48px auto 0;
}

#order-standard_cart .featured-tlds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

#order-standard_cart .featured-tld-card {
  padding: 20px 16px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
}

#order-standard_cart .featured-tld__logo img {
  max-height: 40px;
  margin-bottom: 12px;
}

#order-standard_cart .featured-tld__price {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-blue);
}

#order-standard_cart .domain-pricing-panel {
  padding: 32px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
}

#order-standard_cart .domain-pricing-panel__header {
  text-align: center;
  margin-bottom: 24px;
}

#order-standard_cart .domain-pricing-panel__subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: #6b7280;
}

#order-standard_cart .tld-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
}

#order-standard_cart .tld-filter-btn__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 102, 247, 0.12);
  font-size: 12px;
  font-weight: 700;
}

#order-standard_cart .tld-filters a.badge-success,
#order-standard_cart .tld-filters a.tld-filter-btn.badge-success {
  background: var(--color-primary-blue) !important;
  border-color: var(--color-primary-blue) !important;
  color: #fff !important;
}

#order-standard_cart .tld-filters a.badge-success .tld-filter-btn__count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

#order-standard_cart .domain-tld-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

#order-standard_cart .tld-box {
  height: 100%;
  padding: 24px 20px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04);
}

#order-standard_cart .domain-tld-name {
  display: block;
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: var(--color-primary-blue);
}

#order-standard_cart .domain-tld-sale {
  display: inline-block;
  margin-bottom: 12px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(0, 102, 247, 0.08);
  color: var(--color-primary-blue);
}

#order-standard_cart .domain-tld-prices {
  list-style: none;
  margin: 0;
  padding: 0;
}

#order-standard_cart .domain-tld-prices__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 102, 247, 0.06);
  font-size: 13px;
}

#order-standard_cart .domain-tld-prices__row:last-child {
  border-bottom: none;
}

#order-standard_cart .domain-tld-prices__label {
  color: #6b7280;
}

#order-standard_cart .domain-tld-price {
  font-weight: 600;
  color: var(--color-neutral-black);
  text-align: right;
}

#order-standard_cart .domain-tld-price--register {
  color: var(--color-primary-blue);
}

#order-standard_cart .cart-domain-cta-section {
  margin-top: 48px;
}

#order-standard_cart .cart-domain-cta-section__header {
  text-align: center;
  margin-bottom: 24px;
}

#order-standard_cart .cart-domain-cta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

#order-standard_cart .cart-domain-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
}

#order-standard_cart .cart-domain-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: rgba(0, 102, 247, 0.08);
  color: var(--color-primary-blue);
  font-size: 24px;
}

#order-standard_cart .cart-domain-cta__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-neutral-black);
}

#order-standard_cart .cart-domain-cta__text {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
}

/* Dev license banner on cart pages */
.row.justify-content-center.px-lg-0 > .col-12 > div[style*="background-color:#ffffd2"],
.row.justify-content-center.px-lg-0 > .col-12 > div[style*="background-color: #ffffd2"] {
  margin: 0 0 16px !important;
  padding: 14px 20px !important;
  background: rgba(0, 102, 247, 0.04) !important;
  border: 1px solid rgba(0, 102, 247, 0.12) !important;
  border-radius: 20px !important;
  color: #6b7280 !important;
  font-size: 14px !important;
  text-align: center !important;
}

@media (max-width: 991.98px) {
  #order-standard_cart .domain-register-body {
    padding: 0 20px 24px;
  }

  #order-standard_cart .cart-quick-links {
    padding: 20px 20px 0;
    grid-template-columns: 1fr;
  }

  #order-standard_cart .cart-domain-cta-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  #order-standard_cart .domain-register-search .domain-search-input-header {
    padding-right: 24px;
    margin-bottom: 12px;
  }

  #order-standard_cart .domain-register-search .domain-search-button-header {
    position: static !important;
    transform: none;
    width: 100%;
  }

  #order-standard_cart #domainSuggestions .domain-suggestion {
    flex-direction: column;
    align-items: stretch;
  }

  #order-standard_cart #domainSuggestions .domain-suggestion .actions {
    margin-left: 0;
    width: 100%;
  }

  #order-standard_cart #domainSuggestions .domain-suggestion .actions .button {
    flex: 1;
  }
}

/* Product addons page (cart.php?gid=addons) */
#order-standard_cart .cart-addons-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

#order-standard_cart .cart-addon-product-card {
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  padding: 28px 24px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#order-standard_cart .cart-addon-product-card:hover {
  border-color: rgba(0, 102, 247, 0.2);
  box-shadow: 0px 6px 28px rgba(0, 102, 247, 0.1);
}

#order-standard_cart .cart-addon-product-card__form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  height: 100%;
}

#order-standard_cart .cart-addon-product-card__title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-neutral-black);
}

#order-standard_cart .cart-addon-product-card__price {
  display: inline-block;
  align-self: center;
  margin: 0 0 16px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(0, 102, 247, 0.08);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-primary-blue, #0066f7);
}

#order-standard_cart .cart-addon-product-card__price.is-free {
  background: rgba(18, 179, 0, 0.1);
  color: var(--color-status-green, #12b300);
}

#order-standard_cart .cart-addon-product-card__desc {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

#order-standard_cart .cart-addon-product-card__desc p:last-child {
  margin-bottom: 0;
}

#order-standard_cart .cart-addon-product-card__field {
  width: 100%;
  margin: auto 0 20px;
  text-align: left;
}

#order-standard_cart .cart-addon-product-card__label {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-neutral-black);
}

#order-standard_cart .cart-addon-product-card__field .form-control,
#order-standard_cart .cart-addon-product-card__field .nice-select.form-control {
  width: 100%;
}

#order-standard_cart .cart-addon-product-card__submit {
  width: 100%;
  margin-top: auto;
}

#order-standard_cart .cart-addons-empty {
  border: none;
  border-radius: 20px;
  background: rgba(252, 173, 56, 0.15);
  color: var(--color-neutral-black);
  padding: 24px;
  margin-bottom: 20px;
}

#order-standard_cart .cart-addons-empty__action {
  margin-bottom: 32px;
}

@media (max-width: 767.98px) {
  #order-standard_cart .cart-addons-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #order-standard_cart .cart-addon-product-card {
    padding: 24px 20px;
  }
}

/* Available addons / domain extras (configure product & domains) */
#order-standard_cart .domains-addons-products-group-box {
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 24px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  position: static;
}

#order-standard_cart .domains-addons-products-group-box .domains-addons-products-title {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  width: auto;
  height: auto;
  line-height: inherit;
  padding: 0;
  margin: 0 0 16px;
  background: none !important;
  background-color: transparent !important;
  border-radius: 0;
  letter-spacing: normal;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-neutral-black);
  display: block;
}

#order-standard_cart .domains-addons-products-group-box .cart-addon-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

#order-standard_cart .domains-addons-products-group-box .cart-addon-cards > [class*="col-"] {
  margin-bottom: 0 !important;
  padding-left: 15px;
  padding-right: 15px;
}

#order-standard_cart .domains-addons-products-group-box .domains-addons-products-box {
  position: relative;
  border-radius: 16px;
  border: 2px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0px 2px 10px rgba(0, 51, 153, 0.04),
    0px 1px 4px rgba(15, 15, 15, 0.04);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  overflow: hidden;
}

#order-standard_cart .domains-addons-products-group-box .panel-addon {
  font-size: inherit;
  text-align: left;
  cursor: pointer;
}

#order-standard_cart .domains-addons-products-group-box .panel-addon:hover {
  border-color: rgba(0, 102, 247, 0.28);
}

#order-standard_cart .domains-addons-products-group-box .panel-addon-selected,
#order-standard_cart .domains-addons-products-group-box .domains-addons-products-box.panel-addon-selected {
  border: 2px solid var(--color-primary-blue, #0066f7) !important;
  background: rgba(0, 102, 247, 0.04);
  box-shadow: 0px 4px 16px rgba(0, 102, 247, 0.1),
    0px 2px 8px rgba(15, 15, 15, 0.04);
}

#order-standard_cart .domains-addons-products-group-box .panel-body {
  padding: 0;
  border: none;
  background: transparent;
}

#order-standard_cart .domains-addons-products-group-box .cart-addon-card__label,
#order-standard_cart .domains-addons-products-group-box .panel-body label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  padding: 16px 48px 16px 16px !important;
  cursor: pointer;
  font-weight: normal;
  color: inherit;
}

#order-standard_cart .domains-addons-products-group-box .cart-addon-card__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#order-standard_cart .domains-addons-products-group-box .cart-addon-card__radio {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid #c5cad6;
  border-radius: 50%;
  background: #fff;
  position: relative;
  transition: border-color 0.2s ease;
}

#order-standard_cart .domains-addons-products-group-box .panel-addon-selected .cart-addon-card__radio,
#order-standard_cart .domains-addons-products-group-box .cart-addon-card:has(.cart-addon-card__input:checked) .cart-addon-card__radio {
  border-color: var(--color-primary-blue, #0066f7);
}

#order-standard_cart .domains-addons-products-group-box .panel-addon-selected .cart-addon-card__radio::after,
#order-standard_cart .domains-addons-products-group-box .cart-addon-card:has(.cart-addon-card__input:checked) .cart-addon-card__radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary-blue, #0066f7);
  transform: translate(-50%, -50%);
}

#order-standard_cart .domains-addons-products-group-box .icheckbox_square-blue,
#order-standard_cart .domains-addons-products-group-box .iradio_square-blue {
  display: none !important;
}

#order-standard_cart .domains-addons-products-group-box .cart-addon-card__body,
#order-standard_cart .domains-addons-products-group-box .ml-5 {
  margin-left: 0 !important;
  flex: 1;
  min-width: 0;
}

#order-standard_cart .domains-addons-products-group-box .cart-addon-card__name,
#order-standard_cart .domains-addons-products-group-box h5 {
  display: block;
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-neutral-black);
  line-height: 1.3;
}

#order-standard_cart .domains-addons-products-group-box .cart-addon-card__price,
#order-standard_cart .domains-addons-products-group-box .coodiv-text-12 {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-primary-blue);
}

#order-standard_cart .domains-addons-products-group-box .cart-addon-card__price strong,
#order-standard_cart .domains-addons-products-group-box .coodiv-text-12 strong {
  font-weight: 600;
  color: inherit;
}

#order-standard_cart .domains-addons-products-group-box .cart-addon-card__info,
#order-standard_cart .domains-addons-products-group-box i.icon-alert-circle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--color-primary-blue);
  opacity: 0.55;
  cursor: help;
  transition: opacity 0.2s ease;
}

#order-standard_cart .domains-addons-products-group-box .cart-addon-card__info:hover,
#order-standard_cart .domains-addons-products-group-box i.icon-alert-circle:hover {
  opacity: 1;
}

#order-standard_cart .domains-addons-products-group-box i.icon-alert-circle[title=""] {
  display: none;
}

#order-standard_cart .cart-order-summary .cart-order-summary__product-name {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

#order-standard_cart .cart-order-summary .cart-order-summary__product-group {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

#order-standard_cart .cart-order-summary .cart-order-summary-config {
  margin: 12px 0 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
  width: 100%;
  box-sizing: border-box;
}

#order-standard_cart .cart-order-summary .cart-order-summary-config .cart-item-config__row {
  display: block;
  padding-left: 22px;
}

#order-standard_cart .cart-order-summary .cart-order-summary-config .cart-item-config__label {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.65);
  white-space: normal;
  font-size: 12px;
  font-weight: 500;
}

#order-standard_cart .cart-order-summary .cart-order-summary-config .cart-item-config__value {
  display: block;
  width: 100%;
  min-width: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: break-word;
  word-break: normal;
}

#order-standard_cart .cart-order-summary .summary-totals {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 12px;
  padding-top: 12px;
}

/* Configure product + view cart — animated order summary updates */
#order-standard_cart #producttotal > .cart-summary-block,
#order-standard_cart #producttotal > .cart-order-summary__product-name,
#order-standard_cart #producttotal > .cart-order-summary__product-group,
#order-standard_cart #producttotal > .clearfix,
#order-standard_cart #producttotal > .cart-item-config,
#order-standard_cart #producttotal > .cart-order-summary-config,
#order-standard_cart #producttotal > .summary-totals,
#order-standard_cart #producttotal > .total-due-today,
#order-standard_cart #orderSummary .position-relative > .subtotal,
#order-standard_cart #orderSummary .position-relative > .bordered-totals,
#order-standard_cart #orderSummary .position-relative > .recurring-totals,
#order-standard_cart #orderSummary .position-relative > .total-due-today,
#order-standard_cart #orderSummary .position-relative > .express-checkout-buttons {
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    max-height 0.28s ease,
    margin 0.28s ease,
    padding 0.28s ease;
}

#order-standard_cart #producttotal .cart-summary-row {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    max-height 0.24s ease,
    padding 0.24s ease;
}

#order-standard_cart #producttotal .cart-summary-block--enter,
#order-standard_cart #producttotal .cart-summary-row--enter,
#order-standard_cart #orderSummary .position-relative > .cart-summary-block--enter {
  opacity: 0;
  transform: translateY(8px);
}

#order-standard_cart #producttotal .cart-summary-block--exit,
#order-standard_cart #producttotal .cart-summary-row--exit,
#order-standard_cart #orderSummary .position-relative > .cart-summary-block--exit {
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  pointer-events: none;
}

#order-standard_cart #producttotal .cart-summary-block--changed .cart-item-config__value,
#order-standard_cart #producttotal .cart-summary-row--changed .cart-item-config__value,
#order-standard_cart #producttotal .cart-summary-block--changed .pull-right,
#order-standard_cart #producttotal .cart-summary-block--changed .float-right,
#order-standard_cart #producttotal .cart-summary-row--changed .pull-right,
#order-standard_cart #producttotal .cart-summary-row--changed .float-right,
#order-standard_cart #producttotal .total-due-today.cart-summary-block--changed .amt,
#order-standard_cart #orderSummary .cart-summary-block--changed .pull-right,
#order-standard_cart #orderSummary .cart-summary-block--changed .float-right,
#order-standard_cart #orderSummary .cart-summary-block--changed .amt,
#order-standard_cart #orderSummary #subtotal.cart-summary-block--changed,
#order-standard_cart #orderSummary #totalDueToday.cart-summary-block--changed,
#order-standard_cart #orderSummary #discount.cart-summary-block--changed,
#order-standard_cart #orderSummary #taxTotal1.cart-summary-block--changed,
#order-standard_cart #orderSummary #taxTotal2.cart-summary-block--changed,
#order-standard_cart #orderSummary .recurring-charges .cost.cart-summary-block--changed {
  animation: cartSummaryValuePulse 0.45s ease;
}

@keyframes cartSummaryValuePulse {
  0% {
    color: #fff;
    transform: scale(1);
  }

  35% {
    color: #7eb8ff;
    transform: scale(1.04);
  }

  100% {
    color: inherit;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #order-standard_cart #producttotal > .cart-summary-block,
  #order-standard_cart #producttotal > .cart-order-summary__product-name,
  #order-standard_cart #producttotal > .cart-order-summary__product-group,
  #order-standard_cart #producttotal > .clearfix,
  #order-standard_cart #producttotal > .cart-item-config,
  #order-standard_cart #producttotal > .cart-order-summary-config,
  #order-standard_cart #producttotal > .summary-totals,
  #order-standard_cart #producttotal > .total-due-today,
  #order-standard_cart #producttotal .cart-summary-row,
  #order-standard_cart #orderSummary .position-relative > .subtotal,
  #order-standard_cart #orderSummary .position-relative > .bordered-totals,
  #order-standard_cart #orderSummary .position-relative > .recurring-totals,
  #order-standard_cart #orderSummary .position-relative > .total-due-today,
  #order-standard_cart #orderSummary .position-relative > .express-checkout-buttons {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

#order-standard_cart .cart-order-summary #btnCompleteProductConfig,
#order-standard_cart .cart-order-summary #checkout.btn-checkout {
  margin-top: 8px;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border-radius: 44px;
}

#order-standard_cart .btn-complete-product-config,
#order-standard_cart #checkout.btn-complete-product-config {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#order-standard_cart .btn-complete-product-config__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

#order-standard_cart .btn-complete-product-config__loading {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

#order-standard_cart .btn-complete-product-config__spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnCompleteProductConfigSpin 0.7s linear infinite;
}

#order-standard_cart .btn-complete-product-config__loading-text {
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.01em;
}

#order-standard_cart .btn-complete-product-config.is-recalculating::after,
#order-standard_cart .btn-complete-product-config.is-submitting::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 62%
  );
  background-size: 220% 100%;
  animation: btnCompleteProductConfigShimmer 1.35s ease-in-out infinite;
  pointer-events: none;
}

@keyframes btnCompleteProductConfigSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes btnCompleteProductConfigShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

#order-standard_cart .btn-complete-product-config.is-recalculating,
#order-standard_cart .btn-complete-product-config.is-submitting,
#order-standard_cart #checkout.btn-complete-product-config.is-recalculating {
  cursor: progress;
}

#order-standard_cart .btn-complete-product-config.is-recalculating .btn-complete-product-config__label,
#order-standard_cart .btn-complete-product-config.is-submitting .btn-complete-product-config__label,
#order-standard_cart #checkout.btn-complete-product-config.is-recalculating .btn-complete-product-config__label {
  opacity: 0;
  transform: translateY(-6px);
}

#order-standard_cart .btn-complete-product-config.is-recalculating .btn-complete-product-config__loading,
#order-standard_cart .btn-complete-product-config.is-submitting .btn-complete-product-config__loading,
#order-standard_cart #checkout.btn-complete-product-config.is-recalculating .btn-complete-product-config__loading {
  opacity: 1;
  transform: translateY(0);
}

#order-standard_cart .btn-complete-product-config:disabled,
#order-standard_cart #checkout.btn-complete-product-config.disabled.is-recalculating,
#order-standard_cart #checkout.btn-complete-product-config.is-recalculating {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #order-standard_cart .btn-complete-product-config__label,
  #order-standard_cart .btn-complete-product-config__loading {
    transition: none;
  }

  #order-standard_cart .btn-complete-product-config__spinner {
    animation: none;
    border-top-color: rgba(255, 255, 255, 0.65);
  }

  #order-standard_cart .btn-complete-product-config.is-recalculating::after,
  #order-standard_cart .btn-complete-product-config.is-submitting::after {
    animation: none;
    display: none;
  }
}

@media (max-width: 767.98px) {
  #order-standard_cart .cart-view-page .cart-form-col {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  #order-standard_cart .cart-product-info,
  #order-standard_cart .cart-config-panel,
  #order-standard_cart .domains-addons-products-group-box {
    padding: 18px;
    border-radius: 16px;
  }

  #order-standard_cart .domains-addons-products-group-box .cart-addon-card__label,
  #order-standard_cart .domains-addons-products-group-box .panel-body label {
    padding: 14px 40px 14px 14px !important;
  }

  #order-standard_cart .domains-addons-products-group-box .cart-addon-card__info,
  #order-standard_cart .domains-addons-products-group-box i.icon-alert-circle {
    right: 12px;
    font-size: 16px;
  }

  #order-standard_cart .cart-config-checkbox__card {
    padding: 14px;
    border-radius: 14px;
  }

  #order-standard_cart .cart-hero__subtitle {
    font-size: 14px;
    padding: 0 8px;
  }
}

/* --------------------------------------------------------------------------
   Client area home — ForceVPS UI (aligned with cart-ui-style-guide)
   -------------------------------------------------------------------------- */

/* Nav scroller (secondary sidebar in client area pages) */
.main-page-contents .nav-scroller-subpages {
  margin-bottom: 24px;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.main-page-contents .nav-scroller-subpages .nav .nav-link {
  color: #6b7280 !important;
  font-size: 13px;
  font-weight: 500;
  opacity: 1;
  border-bottom: 3px solid transparent !important;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.main-page-contents .nav-scroller-subpages .nav .nav-link:hover,
.main-page-contents .nav-scroller-subpages .nav .nav-link.active {
  color: var(--color-neutral-black, #13151c) !important;
  border-bottom-color: var(--color-primary-blue) !important;
}

.main-page-contents .nav-scroller-subpages .nav .html-box-headernav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 10px;
  padding: 8px 18px;
  background: rgba(0, 102, 247, 0.08);
  border: 1px solid rgba(0, 102, 247, 0.12);
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-blue);
}

.main-page-contents .nav-scroller-subpages .nav .panel-footer {
  margin-right: 0 !important;
}

/* Nav scroller CTA — Open Ticket, Pay all, Add funds */
.main-page-contents .nav-scroller-subpages .nav a#Secondary_Sidebar-Support-Open_Ticket,
.main-page-contents .nav-scroller-subpages .nav a[menuitemname="Open Ticket"],
.main-page-contents .nav-scroller-subpages .nav .panel-footer .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: auto;
  width: auto !important;
  height: auto !important;
  min-height: 36px;
  padding: 8px 20px !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  background-color: var(--color-primary-blue, #0066f7) !important;
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%) !important;
  border: none !important;
  border-bottom: none !important;
  border-color: transparent !important;
  border-radius: 44px !important;
  box-shadow: none !important;
  transition: transform 0.2s ease;
  transform: none;
  opacity: 1;
  white-space: nowrap;
}

.main-page-contents .nav-scroller-subpages .nav a#Secondary_Sidebar-Support-Open_Ticket:hover,
.main-page-contents .nav-scroller-subpages .nav a#Secondary_Sidebar-Support-Open_Ticket.active,
.main-page-contents .nav-scroller-subpages .nav a[menuitemname="Open Ticket"]:hover,
.main-page-contents .nav-scroller-subpages .nav a[menuitemname="Open Ticket"].active,
.main-page-contents .nav-scroller-subpages .nav .panel-footer .btn:hover,
.main-page-contents .nav-scroller-subpages .nav .panel-footer .btn:focus,
.main-page-contents .nav-scroller-subpages .nav .panel-footer .btn:active {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  background-color: var(--color-primary-blue, #0066f7) !important;
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%) !important;
  border-bottom-color: transparent !important;
  border-radius: 44px !important;
  transform: translateY(-1px);
  box-shadow: none !important;
}

.main-page-contents .nav-scroller-subpages .nav a#Secondary_Sidebar-Support-Open_Ticket i,
.main-page-contents .nav-scroller-subpages .nav a[menuitemname="Open Ticket"] i {
  display: inline-block !important;
  margin-right: 6px;
  font-size: 12px;
  color: #fff;
}

.main-page-contents .nav-scroller-subpages .nav .panel-footer .btn i {
  display: inline-block !important;
  margin-right: 6px;
  font-size: 14px !important;
  color: #fff;
}

.main-page-contents .nav-scroller-subpages-arrow-left,
.main-page-contents .nav-scroller-subpages-arrow-right {
  color: var(--color-primary-blue);
}

/* Scroll arrows — reserve gutters so controls never cover menu items */
.nav-scroller-subpages {
  --nav-scroller-arrow-size: 32px;
  --nav-scroller-arrow-inset: 6px;
  --nav-scroller-arrow-gutter: calc(var(--nav-scroller-arrow-inset) + var(--nav-scroller-arrow-size) + 6px);
}

.nav-scroller-subpages-arrow-left,
.nav-scroller-subpages-arrow-right {
  z-index: 3;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.92);
}

.nav-scroller-subpages-arrow-left {
  left: var(--nav-scroller-arrow-inset) !important;
}

.nav-scroller-subpages-arrow-right {
  right: var(--nav-scroller-arrow-inset) !important;
}

.nav-scroller-subpages.has-scroll-left .nav,
.nav-scroller-subpages.has-scroll-left .nav.flickity-enabled .flickity-viewport {
  padding-left: var(--nav-scroller-arrow-gutter) !important;
}

.nav-scroller-subpages.has-scroll-right .nav,
.nav-scroller-subpages.has-scroll-right .nav.flickity-enabled .flickity-viewport {
  padding-right: var(--nav-scroller-arrow-gutter) !important;
}

.nav-scroller-subpages.has-scroll-left .nav:not(.flickity-enabled) {
  scroll-padding-left: var(--nav-scroller-arrow-gutter);
}

.nav-scroller-subpages.has-scroll-right .nav:not(.flickity-enabled) {
  scroll-padding-right: var(--nav-scroller-arrow-gutter);
}

@media (max-width: 767px) {
  .nav-scroller-subpages {
    --nav-scroller-arrow-size: 26px;
    --nav-scroller-arrow-inset: 4px;
  }
}

.main-page-contents .nav-scroller-subpages .nav::-webkit-scrollbar {
  height: 4px;
}

.main-page-contents .nav-scroller-subpages .nav::-webkit-scrollbar-track {
  background: rgba(0, 102, 247, 0.06);
  border-radius: 10px;
}

.main-page-contents .nav-scroller-subpages .nav::-webkit-scrollbar-thumb {
  background: rgba(0, 102, 247, 0.25);
  border-radius: 10px;
}

.main-page-contents .nav-scroller-subpages .nav::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 102, 247, 0.4);
}

/* Nav scroller — sidebar panels as horizontal tabs (fixes broken Flickity layout) */
.nav-scroller-subpages .nav .nav-elements-box {
  display: flex !important;
  align-items: center !important;
}

.nav-scroller-subpages .nav .nav-elements-box .list-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  border: none;
  margin: 0;
  padding: 0;
}

.nav-scroller-subpages .nav .nav-elements-box .list-group .list-group-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0;
  padding: 0.75rem 0.7rem;
  min-height: 36px;
}

/* Tabs without count badge — show WHMCS sidebar icons (overrides whmcs.theme.css display:none) */
.main-page-contents .nav-scroller-subpages .nav .list-group-item:not(:has(.badge)) > i,
.nav-scroller-subpages .nav .list-group-item:not(:has(.badge)) > i,
.main-page-contents .nav-scroller-subpages .nav .html-box-headernav:not(:has(.badge)) > i,
.nav-scroller-subpages .nav .html-box-headernav:not(:has(.badge)) > i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--color-primary-blue, #0066f7);
  opacity: 0.9;
}

.main-page-contents .nav-scroller-subpages .nav .list-group-item.active:not(:has(.badge)) > i,
.nav-scroller-subpages .nav .list-group-item.active:not(:has(.badge)) > i {
  opacity: 1;
}

/* Status filters use badge counts — keep generic circle icons hidden */
.nav-scroller-subpages .nav .view-filter-btns .list-group-item > i,
.nav-scroller-subpages .nav .panel-actions.view-filter-btns .list-group-item > i {
  display: none !important;
}

/* Billing tabs — icons when WHMCS omits <i> (fallback if hook not loaded yet) */
.nav-scroller-subpages a[menuitemname="Invoices"]:not(:has(> i))::before,
.nav-scroller-subpages a[menuitemname="Quotes"]:not(:has(> i))::before,
.nav-scroller-subpages a[menuitemname="Mass Payment"]:not(:has(> i))::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1em;
  margin-right: 0;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  color: var(--color-primary-blue, #0066f7);
  opacity: 0.9;
}

.nav-scroller-subpages a[menuitemname="Invoices"]:not(:has(> i))::before {
  content: "\f570";
}

.nav-scroller-subpages a[menuitemname="Quotes"]:not(:has(> i))::before {
  content: "\f15c";
}

.nav-scroller-subpages a[menuitemname="Mass Payment"]:not(:has(> i))::before {
  content: "\f53d";
}

/* Add Funds duplicates panel-footer «Поповнити» button */
.nav-scroller-subpages a#Secondary_Sidebar-Billing-Add_Funds,
.nav-scroller-subpages a[menuitemname="Add Funds"][id="Secondary_Sidebar-Billing-Add_Funds"] {
  display: none !important;
}

.nav-scroller-subpages .nav .nav-elements-box.panel-actions .list-group .list-group-item .badge {
  float: none;
  margin: 0 8px 0 0;
}

/* Panel footer action buttons (Pay all, Add funds, etc.) */
.nav-scroller-subpages .nav .nav-elements-box .panel-footer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
  float: none;
  clear: none;
}

.nav-scroller-subpages .nav .nav-elements-box .panel-footer .col-xs-6 {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto;
  padding: 0 !important;
}

/* Flickity positions cells with absolute + left px — flex on slider breaks that */
.nav-scroller-subpages .nav.flickity-enabled .flickity-slider {
  display: block;
}

.nav-scroller-subpages .nav.flickity-enabled .nav-elements-box {
  margin-left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.nav-scroller-subpages .nav.flickity-enabled {
  padding: 12px 0;
}

/* Nav scroller — intentional two-row layout (primary tabs + secondary filters/shortcuts) */
.nav-scroller-subpages.nav-scroller-two-row {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.nav-scroller-subpages.nav-scroller-two-row::before,
.nav-scroller-subpages.nav-scroller-two-row::after {
  display: none !important;
}

.nav-scroller-subpages .nav.nav-scroller-has-rows {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  overflow: visible;
  white-space: normal;
  cursor: default;
  padding: 0;
}

.nav-scroller-subpages .nav-scroller-rows {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.nav-scroller-subpages .nav-scroller-row {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
}

.nav-scroller-subpages .nav-scroller-row-primary {
  padding: 10px 0 8px;
}

.nav-scroller-subpages .nav-scroller-row-secondary {
  padding: 8px 0 10px;
  border-top: 1px solid rgba(0, 102, 247, 0.08);
}

.nav-scroller-subpages .nav-scroller-row-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-scroller-subpages .nav-scroller-row-track::-webkit-scrollbar {
  display: none;
}

.nav-scroller-subpages .nav-scroller-row-primary .nav-scroller-row-track {
  padding-right: 4px;
}

.nav-scroller-subpages .nav-scroller-row-secondary .nav-scroller-row-track {
  padding-left: 0;
  padding-right: 0;
}

.nav-scroller-subpages .nav-scroller-row .nav-elements-box {
  margin-right: 0 !important;
  margin-left: 0 !important;
  flex: 0 0 auto;
}

.nav-scroller-subpages .nav-scroller-row-primary .nav-elements-box {
  gap: 10px;
}

.nav-scroller-subpages .nav-scroller-row-secondary .nav-elements-box .list-group {
  gap: 4px;
}

.nav-scroller-subpages .nav-scroller-row-secondary .nav-elements-box .list-group-item {
  padding: 0.55rem 0.75rem;
  min-height: 34px;
  border-radius: 8px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-scroller-subpages
  .nav-scroller-row-secondary
  .nav-elements-box
  .list-group-item:hover {
  background: rgba(0, 102, 247, 0.04);
}

.nav-scroller-subpages .nav-scroller-row .nav-scroller-subpages-arrow-left,
.nav-scroller-subpages .nav-scroller-row .nav-scroller-subpages-arrow-right {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  flex: 0 0 0;
  width: 0;
  height: var(--nav-scroller-arrow-size, 32px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  animation: none;
  box-shadow: none;
  transition: opacity 0.2s ease, flex-basis 0.2s ease, width 0.2s ease;
}

.nav-scroller-subpages
  .nav-scroller-row.has-scroll-left
  .nav-scroller-subpages-arrow-left {
  flex: 0 0 var(--nav-scroller-arrow-size, 32px);
  width: var(--nav-scroller-arrow-size, 32px);
  margin-right: 2px;
  overflow: visible;
  opacity: 0.75;
  pointer-events: auto;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.92);
}

.nav-scroller-subpages
  .nav-scroller-row.has-scroll-right
  .nav-scroller-subpages-arrow-right {
  flex: 0 0 var(--nav-scroller-arrow-size, 32px);
  width: var(--nav-scroller-arrow-size, 32px);
  margin-left: 2px;
  overflow: visible;
  opacity: 0.75;
  pointer-events: auto;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.92);
}

.nav-scroller-subpages
  .nav-scroller-row
  .nav-scroller-subpages-arrow-left:hover,
.nav-scroller-subpages
  .nav-scroller-row
  .nav-scroller-subpages-arrow-right:hover {
  opacity: 1 !important;
  transform: scale(1.06);
}

.nav-scroller-subpages .nav-scroller-row.has-scroll-left .nav-scroller-row-track {
  padding-left: 4px;
}

.nav-scroller-subpages .nav-scroller-row.has-scroll-right .nav-scroller-row-track {
  padding-right: 4px;
}

.nav-scroller-subpages .nav-scroller-row-secondary.scroll-hint .nav-scroller-row-track {
  animation: navScrollerRowHint 2s ease-in-out 0.5s;
}

@keyframes navScrollerRowHint {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-10px);
  }
}

@media (max-width: 767px) {
  .nav-scroller-subpages .nav-scroller-row-primary {
    padding: 8px 0 6px;
  }

  .nav-scroller-subpages .nav-scroller-row-secondary {
    padding: 6px 0 8px;
  }

  .nav-scroller-subpages
    .nav-scroller-row-secondary
    .nav-elements-box
    .list-group-item {
    padding: 0.5rem 0.55rem;
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   ForceVPS count / meta badges (.badge-warning, .badge-info, etc.)
   -------------------------------------------------------------------------- */

.badge.badge-warning,
.badge-warning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 8px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  background: rgba(0, 102, 247, 0.1) !important;
  color: var(--color-primary-blue, #0066f7) !important;
  border: none;
  box-shadow: none;
}

.badge.badge-info,
.badge-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 8px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  background: rgba(0, 102, 247, 0.1) !important;
  color: var(--color-primary-blue, #0066f7) !important;
  border: none;
  box-shadow: none;
}

.badge.badge-secondary,
.badge-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  background: rgba(0, 102, 247, 0.08) !important;
  color: var(--color-primary-blue, #0066f7) !important;
  border: 1px solid rgba(0, 102, 247, 0.14) !important;
  box-shadow: none;
}

.badge.badge-pill.badge-warning,
.badge.badge-pill.badge-info {
  padding: 4px 12px;
  font-size: 12px;
}

/* Nav scroller — count badges beside tab labels */
.main-page-contents .nav-scroller-subpages .nav .list-group-item .badge,
.nav-scroller-subpages .nav .list-group-item .badge {
  margin-right: 8px !important;
}

.main-page-contents .nav-scroller-subpages .nav .list-group-item.active,
.nav-scroller-subpages .nav .list-group-item.active {
  color: var(--color-primary-blue, #0066f7) !important;
  border-bottom-color: transparent !important;
  background: rgba(0, 102, 247, 0.08);
  border-radius: 12px;
}

.main-page-contents .nav-scroller-subpages .nav .list-group-item.active .badge,
.nav-scroller-subpages .nav .list-group-item.active .badge {
  background: var(--color-primary-blue, #0066f7) !important;
  color: #fff !important;
}

.main-page-contents .nav-scroller-subpages .nav .html-box-headernav .badge,
.nav-scroller-subpages .nav .html-box-headernav .badge.float-right {
  float: none !important;
  margin-left: 8px;
}

/* Plain .badge (no variant class) — WHMCS menu / home panel counts */
.main-page-contents .badge:not([class*="badge-"]),
.nav-scroller-subpages .badge:not([class*="badge-"]),
.header-user .badge,
.coodiv-menu-dropdown .badge:not([class*="badge-"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 2px 8px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  background: rgba(0, 102, 247, 0.1) !important;
  color: var(--color-primary-blue, #0066f7) !important;
}

/* Client home panels, dropdown menu items */
.main-page-contents .client-home-cards .badge,
.main-page-contents .client-home-cards .list-group-item .badge,
.coodiv-menu-dropdown .drop-menu-item .badge,
.coodiv-menu-dropdown > .drop-menu-item > a > .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 2px 8px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  background: rgba(0, 102, 247, 0.1) !important;
  color: var(--color-primary-blue, #0066f7) !important;
}

/* Header notifications counter */
.notifications-count-badge.badge-warning,
.notifications-count-badge.badge {
  min-width: 20px;
  padding: 2px 7px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(0, 102, 247, 0.15) !important;
  color: var(--color-primary-blue, #0066f7) !important;
}

/* Content lists — dates, category counts (announcements, KB, downloads) */
.main-page-contents .announcements-group .badge-warning,
.main-page-contents .announcements-group .badge.badge-warning,
.main-page-contents .badge.coodiv-text-12.badge-warning,
.main-page-contents .badge.rounded-20.badge-warning {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
}

/* Hero welcome banner */
.main-page-contents .clientarea-hero {
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  box-shadow: 0px 4px 22.9px rgba(0, 102, 247, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  animation: none;
}

.main-page-contents .clientarea-hero .white-text,
.main-page-contents .clientarea-hero .header-accout-details,
.main-page-contents .clientarea-hero .balance-section {
  color: #fff;
}

.main-page-contents .clientarea-hero__welcome {
  font-weight: 600;
  opacity: 0.9;
}

.main-page-contents .clientarea-hero .username {
  font-weight: 700;
}

.main-page-contents .clientarea-hero .profile-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.main-page-contents .clientarea-hero .profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-page-contents .clientarea-hero .balance-amount-wrapper {
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 44px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.main-page-contents .clientarea-hero .balance-amount {
  color: #fff;
}

.main-page-contents .clientarea-hero .button--light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  height: 36px;
  padding: 6px 18px;
  font-size: 13px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  box-shadow: none;
}

.main-page-contents .clientarea-hero .button--light:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
  transform: none;
}

.main-page-contents .clientarea-hero .balance-section .button.btn-block {
  display: flex;
  width: 100%;
  min-width: 0;
}

/* Panel cards (services, invoices, tickets, news) */
.main-page-contents .client-home-cards > .row {
  row-gap: 0;
}

.main-page-contents .client-home-cards > .row > .col-md-12 {
  margin-bottom: 0;
}

.main-page-contents .client-home-cards .clientarea-panel {
  margin-bottom: 24px !important;
}

.main-page-contents .clientarea-panel,
.main-page-contents .client-home-cards .coodiv-clientarea-boxes {
  background: #fff;
  border: none !important;
  border-radius: 16px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.25s ease;
}

.main-page-contents .clientarea-panel:hover,
.main-page-contents .client-home-cards .coodiv-clientarea-boxes:hover {
  box-shadow: 0px 8px 28px rgba(0, 102, 247, 0.12);
}

.main-page-contents .clientarea-panel__header,
.main-page-contents .client-home-cards .coodiv-clientarea-box-header {
  border-bottom: 1px solid rgba(0, 102, 247, 0.08) !important;
  background: #fff;
}

.main-page-contents .clientarea-panel__title,
.main-page-contents .client-home-cards .coodiv-clientarea-box-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .client-home-cards .coodiv-clientarea-boxes-body {
  padding: 10px 16px 12px !important;
}

.main-page-contents .client-home-cards .coodiv-clientarea-boxes-body p {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(0, 102, 247, 0.1);
  border-radius: 10px;
  background: rgba(0, 102, 247, 0.04);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .client-home-cards .coodiv-clientarea-boxes-body p + p {
  margin-top: 6px;
}

.main-page-contents .client-home-cards .coodiv-clientarea-boxes-body p a {
  color: var(--color-primary-blue);
  font-weight: 600;
}

.main-page-contents .client-home-cards .coodiv-clientarea-boxes-body p a:hover {
  text-decoration: underline !important;
}

/* Overdue invoices — warning accent */
.main-page-contents .client-home-cards #overdueInvoicesPanel .coodiv-clientarea-boxes-body p {
  border-color: rgba(229, 46, 46, 0.15);
  background: rgba(229, 46, 46, 0.04);
}

.main-page-contents .client-home-cards .list-group {
  border: none !important;
  padding: 10px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.main-page-contents .client-home-cards .list-group .list-group-item {
  padding: 10px 14px;
  border: 1px solid rgba(0, 102, 247, 0.1) !important;
  border-radius: 10px;
  background: rgba(0, 102, 247, 0.04);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-neutral-black, #13151c);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.main-page-contents .client-home-cards .list-group .list-group-item:last-child {
  border-bottom: 1px solid rgba(0, 102, 247, 0.1) !important;
}

.main-page-contents .client-home-cards .list-group .list-group-item:hover,
.main-page-contents .client-home-cards .list-group .list-group-item.active {
  background: rgba(0, 102, 247, 0.08);
  border-color: rgba(0, 102, 247, 0.2) !important;
  color: var(--color-primary-blue);
  box-shadow: 0 2px 8px rgba(0, 102, 247, 0.08);
}

.main-page-contents .client-home-cards .list-group .list-group-item .text-last-updated,
.main-page-contents .client-home-cards .list-group .list-group-item small {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 10px;
  background: rgba(0, 102, 247, 0.08);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary-blue);
}

/* Active Products/Services — WHMCS placeholder + layout (styles.css not loaded) */
.main-page-contents div[menuitemname="Active Products/Services"] .list-group {
  overflow: visible !important;
  max-height: none !important;
  border-bottom: 0 !important;
}

.main-page-contents div[menuitemname="Active Products/Services"] .list-group .div-service-item:nth-child(n + 5),
.main-page-contents div[menuitemname="Active Products/Services"] .list-group .list-group-item:nth-child(n + 5) {
  display: none !important;
}

.main-page-contents .client-home-cards .div-service-status .label-placeholder {
  position: absolute !important;
  visibility: hidden !important;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

.main-page-contents .client-home-cards .div-service-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.main-page-contents .client-home-cards .div-service-status {
  position: relative;
  text-align: center;
  flex-shrink: 0;
  width: auto !important;
  min-width: max-content;
}

.main-page-contents .client-home-cards .div-service-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  margin-right: 10px;
}

.main-page-contents .client-home-cards .div-service-name > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-page-contents .client-home-cards .div-service-buttons {
  margin-left: auto;
  flex-shrink: 0;
}

/* Client area — status badges (tickets home panel, tickets list, etc.) */
.main-page-contents .client-home-cards .list-group .list-group-item .label:not(.label-placeholder),
.main-page-contents .table-container .label.status {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  margin-left: 6px;
  padding: 4px 12px !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  vertical-align: middle;
  background: rgba(0, 102, 247, 0.1) !important;
  color: var(--color-primary-blue, #0066f7) !important;
}

/* Green — open, active, paid, completed */
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#779500"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#3fad46"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#5cb85c"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#498302"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#12b300"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#12B300"],
.main-page-contents .table-container .label.status-open,
.main-page-contents .table-container .label.status-active,
.main-page-contents .table-container .label.status-completed,
.main-page-contents .table-container .label.status-paid,
.main-page-contents .table-container .label.status-accepted,
.main-page-contents .table-container .label.status[style*="#779500"],
.main-page-contents .table-container .label.status[style*="#3fad46"],
.main-page-contents .table-container .label.status[style*="#5cb85c"],
.main-page-contents .table-container .label.status[style*="#498302"] {
  background: rgba(18, 179, 0, 0.12) !important;
  color: #0a8f00 !important;
}

/* Blue — answered, on hold, delivered */
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#256aa2"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#256AA2"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#336699"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#224488"],
.main-page-contents .table-container .label.status-answered,
.main-page-contents .table-container .label.status-onhold,
.main-page-contents .table-container .label.status-delivered,
.main-page-contents .table-container .label.status-payment-pending,
.main-page-contents .table-container .label.status[style*="#256aa2"],
.main-page-contents .table-container .label.status[style*="#256AA2"],
.main-page-contents .table-container .label.status[style*="#336699"],
.main-page-contents .table-container .label.status[style*="#224488"] {
  background: rgba(0, 102, 247, 0.12) !important;
  color: #0066f7 !important;
}

/* Purple — answered (alt WHMCS color) */
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#7b4f9d"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#7B4F9D"],
.main-page-contents .table-container .label.status[style*="#7b4f9d"],
.main-page-contents .table-container .label.status[style*="#7B4F9D"] {
  background: rgba(107, 66, 160, 0.12) !important;
  color: #6b42a0 !important;
}

/* Orange / amber — customer reply, pending, warning */
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#ff6600"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#FF6600"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#ffb800"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#FFB800"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#f0ad4e"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#f89406"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#fd7e14"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#a68500"],
.main-page-contents .table-container .label.status-customer-reply,
.main-page-contents .table-container .label.status-pending-transfer,
.main-page-contents .table-container .label.status-suspended,
.main-page-contents .table-container .label.status-pending-registration,
.main-page-contents .table-container .label.status-redemption,
.main-page-contents .table-container .label.status-grace,
.main-page-contents .table-container .label.status-refunded,
.main-page-contents .table-container .label.status-inprogress,
.main-page-contents .table-container .label.status[style*="#ff6600"],
.main-page-contents .table-container .label.status[style*="#ffb800"],
.main-page-contents .table-container .label.status[style*="#f0ad4e"],
.main-page-contents .table-container .label.status[style*="#fd7e14"] {
  background: rgba(253, 126, 20, 0.12) !important;
  color: #d97706 !important;
}

/* Red — pending, unpaid, in progress */
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#c0392b"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#cc0000"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#d9534f"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#ed3e48"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#e52e2e"],
.main-page-contents .table-container .label.status-pending,
.main-page-contents .table-container .label.status-unpaid,
.main-page-contents .table-container .label.status-collections,
.main-page-contents .table-container .label.status[style*="#c0392b"],
.main-page-contents .table-container .label.status[style*="#cc0000"],
.main-page-contents .table-container .label.status[style*="#d9534f"] {
  background: rgba(229, 46, 46, 0.12) !important;
  color: #dc2626 !important;
}

/* Gray — closed, cancelled, terminated */
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#87939f"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#888888"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#999999"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#666666"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#666"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#9fa29a"],
.main-page-contents .table-container .label.status-closed,
.main-page-contents .table-container .label.status-cancelled,
.main-page-contents .table-container .label.status-terminated,
.main-page-contents .table-container .label.status-expired,
.main-page-contents .table-container .label.status-transferred-away,
.main-page-contents .table-container .label.status[style*="#87939f"],
.main-page-contents .table-container .label.status[style*="#888"],
.main-page-contents .table-container .label.status[style*="#999"] {
  background: rgba(107, 114, 128, 0.12) !important;
  color: #6b7280 !important;
}

/* Dark — fraud, lost */
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#000000"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#000"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#2c3e50"],
.main-page-contents .client-home-cards .list-group .list-group-item .label[style*="#004258"],
.main-page-contents .table-container .label.status-fraud,
.main-page-contents .table-container .label.status-lost,
.main-page-contents .table-container .label.status-dead,
.main-page-contents .table-container .label.status[style*="#000"],
.main-page-contents .table-container .label.status[style*="#2c3e50"] {
  background: rgba(19, 21, 28, 0.08) !important;
  color: #374151 !important;
}

.main-page-contents .client-home-cards .coodiv-clientarea-boxes-footer {
  border-top: 1px solid rgba(0, 102, 247, 0.08);
  padding: 10px 16px;
}

.main-page-contents .client-home-cards .coodiv-clientarea-boxes-footer .btn-view-more,
.main-page-contents .client-home-cards .coodiv-clientarea-boxes-footer .clientarea-panel__more {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

.main-page-contents .client-home-cards .coodiv-clientarea-boxes-footer .btn-view-more:hover:not(.disabled),
.main-page-contents .client-home-cards .coodiv-clientarea-boxes-footer .clientarea-panel__more:hover {
  color: #003c91;
  text-decoration: underline !important;
}

.main-page-contents .client-home-cards .coodiv-clientarea-boxes-footer .btn-view-more.disabled {
  color: #9ca3af;
  pointer-events: none;
}

/* Domain registration form inside panel */
.main-page-contents .client-home-cards .coodiv-clientarea-boxes-body .form-control {
  height: 36px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06);
  border-radius: 29px;
  border: none;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 14px;
  color: var(--color-neutral-black);
}

.main-page-contents .client-home-cards .coodiv-clientarea-boxes-body .form-control:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 102, 247, 0.2);
}

.main-page-contents .client-home-cards .coodiv-clientarea-boxes-body .btn-success,
.main-page-contents .client-home-cards .coodiv-clientarea-boxes-body .btn-default {
  min-height: 36px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 44px;
  border: none;
}

.main-page-contents .client-home-cards .coodiv-clientarea-boxes-body .btn-success {
  background: var(--color-primary-blue);
  color: #fff;
}

.main-page-contents .client-home-cards .coodiv-clientarea-boxes-body .btn-default {
  background: rgba(0, 102, 247, 0.08);
  color: var(--color-primary-blue);
}

.main-page-contents .client-home-cards .coodiv-clientarea-boxes-body .btn-success:hover {
  background: #0052cc;
  color: #fff;
}

.main-page-contents .client-home-cards .coodiv-clientarea-boxes-body .btn-default:hover {
  background: rgba(0, 102, 247, 0.15);
  color: var(--color-primary-blue);
}

/* Bottom domain search section */
.main-page-contents .clientarea-domain-search__inner {
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 25px;
  box-shadow: -5px 10px 73.9px rgba(0, 0, 0, 0.08);
}

.main-page-contents .clientarea-domain-search__title {
  margin: 0;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .clientarea-domain-search__subtitle {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #6b7280;
}

.main-page-contents .clientarea-domain-search .domain-search-input-header {
  height: 48px;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06);
  border-radius: 29px;
  border: none;
  padding: 8px 140px 8px 24px;
  font-weight: 500;
  font-size: 16px;
  color: var(--color-neutral-black);
}

.main-page-contents .clientarea-domain-search .domain-search-input-header:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 102, 247, 0.2);
}

.main-page-contents .clientarea-domain-search .domain-search-button-header {
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  min-width: 120px;
  min-height: 36px;
  padding: 8px 24px;
  border-radius: 44px;
}

/* Dev license banner + WHMCS footer */
.main-page-contents > div[style*="background-color:#ffffd2"],
.main-page-contents > div[style*="background-color: #ffffd2"] {
  margin: 0 0 16px !important;
  padding: 14px 20px !important;
  background: rgba(0, 102, 247, 0.04) !important;
  border: 1px solid rgba(0, 102, 247, 0.12) !important;
  border-radius: 20px !important;
  color: #6b7280 !important;
  font-size: 14px !important;
  text-align: center !important;
}

.main-page-contents > div[style*="background-color:#ffffd2"] strong,
.main-page-contents > div[style*="background-color: #ffffd2"] strong {
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents > p[style*="text-align:center"] {
  margin-top: 24px;
  font-size: 12px;
  color: rgba(107, 114, 128, 0.7);
}

.main-page-contents > p[style*="text-align:center"] a {
  color: #9ca3af;
}

.main-page-contents > p[style*="text-align:center"] a:hover {
  color: var(--color-primary-blue);
}

@media (max-width: 991.98px) {
  .main-page-contents .clientarea-hero .clientarea-new-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .main-page-contents .clientarea-hero .clientarea-new-header > .d-flex {
    align-items: flex-start;
  }

  .main-page-contents .clientarea-hero .profile-photo {
    flex: 0 0 auto !important;
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    align-self: flex-start;
    margin-top: 0;
  }

  .main-page-contents .clientarea-hero .profile-photo img,
  .main-page-contents .clientarea-hero .profile-photo .gravatar {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1;
    border-radius: 50%;
  }

  .main-page-contents .clientarea-hero .header-accout-details {
    flex: 1;
    min-width: 0;
  }

  .main-page-contents .clientarea-hero .header-accout-details > .mb-2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .main-page-contents .clientarea-hero .username {
    margin-right: 0 !important;
  }

  .main-page-contents .clientarea-hero .balance-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-align: left !important;
    width: 100%;
  }

  .main-page-contents .clientarea-hero .balance-section .balance-label,
  .main-page-contents .clientarea-hero .balance-section .balance-amount-wrapper {
    text-align: left !important;
  }

  .main-page-contents .clientarea-hero .balance-amount-wrapper {
    display: inline-block;
  }

  .main-page-contents .clientarea-panel__header,
  .main-page-contents .client-home-cards .coodiv-clientarea-box-header {
    flex-wrap: wrap;
    gap: 12px;
  }
}

@media (max-width: 575.98px) {
  .main-page-contents .clientarea-hero {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .main-page-contents .clientarea-hero .profile-photo {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    margin-right: 12px !important;
  }

  .main-page-contents .clientarea-hero .header-accout-details > .mb-2 {
    flex-direction: column;
    align-items: flex-start;
  }

  .main-page-contents .clientarea-domain-search .domain-search-input-header {
    padding-right: 24px;
    margin-bottom: 12px;
  }

  .main-page-contents .clientarea-domain-search .domain-search-button-header {
    position: static !important;
    transform: none;
    width: 100%;
  }

  .main-page-contents .nav-scroller-subpages {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   Client area details (clientarea.php?action=details)
   -------------------------------------------------------------------------- */

/* ==========================================================================
   ForceVPS — prepend-icon fields (site-wide)
   ========================================================================== */

.register-page .prepend-icon,
.login-page .prepend-icon,
.main-signup-block .prepend-icon,
.main-page-contents .prepend-icon,
.content-container .prepend-icon,
#order-standard_cart .prepend-icon {
  position: relative;
  display: block;
  width: 100%;
}

.register-page .prepend-icon .field-icon,
.login-page .prepend-icon .field-icon,
.main-signup-block .prepend-icon .field-icon,
.main-page-contents .prepend-icon .field-icon,
.content-container .prepend-icon .field-icon,
#order-standard_cart .prepend-icon .field-icon {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 22;
  width: 42px;
  height: 36px;
  margin: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  line-height: 1;
}

.register-page .prepend-icon .field-icon i,
.login-page .prepend-icon .field-icon i,
.main-signup-block .prepend-icon .field-icon i,
.main-page-contents .prepend-icon .field-icon i,
.content-container .prepend-icon .field-icon i,
#order-standard_cart .prepend-icon .field-icon i {
  font-size: 15px;
  line-height: 1;
  color: var(--color-primary-blue);
  opacity: 0.85;
}

.register-page .prepend-icon .field,
.register-page .prepend-icon input.form-control,
.register-page .prepend-icon select.form-control,
.register-page .prepend-icon textarea.form-control,
.register-page .prepend-icon #stateselect,
.register-page .prepend-icon .nice-select.form-control,
.login-page .prepend-icon .field,
.login-page .prepend-icon input.form-control,
.login-page .prepend-icon select.form-control,
.login-page .prepend-icon textarea.form-control,
.login-page .prepend-icon #stateselect,
.login-page .prepend-icon .nice-select.form-control,
.main-signup-block .prepend-icon .field,
.main-signup-block .prepend-icon input.form-control,
.main-signup-block .prepend-icon select.form-control,
.main-signup-block .prepend-icon textarea.form-control,
.main-signup-block .prepend-icon #stateselect,
.main-signup-block .prepend-icon .nice-select.form-control,
.main-page-contents .prepend-icon .field,
.main-page-contents .prepend-icon input.form-control,
.main-page-contents .prepend-icon select.form-control,
.main-page-contents .prepend-icon textarea.form-control,
.main-page-contents .prepend-icon #stateselect,
.main-page-contents .prepend-icon .nice-select.form-control,
.main-page-contents .prepend-icon .nice-select.custom-select,
.content-container .prepend-icon .field,
.content-container .prepend-icon input.form-control,
.content-container .prepend-icon select.form-control,
.content-container .prepend-icon textarea.form-control,
.content-container .prepend-icon #stateselect,
.content-container .prepend-icon .nice-select.form-control,
#order-standard_cart .prepend-icon .field,
#order-standard_cart .prepend-icon input.form-control,
#order-standard_cart .prepend-icon select.form-control,
#order-standard_cart .prepend-icon textarea.form-control,
#order-standard_cart .prepend-icon #stateselect,
#order-standard_cart .prepend-icon .nice-select.form-control {
  display: block;
  width: 100%;
  padding-left: 42px !important;
}

.register-page .prepend-icon:has(.intl-tel-input) > .field-icon,
.login-page .prepend-icon:has(.intl-tel-input) > .field-icon,
.main-signup-block .prepend-icon:has(.intl-tel-input) > .field-icon,
.main-page-contents .prepend-icon:has(.intl-tel-input) > .field-icon,
.content-container .prepend-icon:has(.intl-tel-input) > .field-icon,
#order-standard_cart .prepend-icon:has(.intl-tel-input) > .field-icon {
  display: none !important;
}

.register-page .prepend-icon:has(textarea) .field-icon,
.login-page .prepend-icon:has(textarea) .field-icon,
.main-signup-block .prepend-icon:has(textarea) .field-icon,
.main-page-contents .prepend-icon:has(textarea) .field-icon,
.content-container .prepend-icon:has(textarea) .field-icon,
#order-standard_cart .prepend-icon:has(textarea) .field-icon {
  align-items: flex-start;
  padding-top: 10px;
  height: auto;
}

.register-page .prepend-icon textarea.form-control,
.login-page .prepend-icon textarea.form-control,
.main-signup-block .prepend-icon textarea.form-control,
.main-page-contents .prepend-icon textarea.form-control,
.content-container .prepend-icon textarea.form-control,
#order-standard_cart .prepend-icon textarea.form-control {
  padding-top: 12px;
}

.main-page-contents .client-details-page .form-group > .prepend-icon {
  margin-bottom: 0;
}

.main-page-contents .client-details-page {
  max-width: 100%;
  overflow: visible;
}

.main-page-contents .client-details-page .client-details-card,
.main-page-contents .client-details-page .client-details-card__body,
.main-page-contents .client-details-page .client-details-fields-row,
.main-page-contents .client-details-page .client-details-settings-row,
.main-page-contents .client-details-page .form-group {
  overflow: visible;
}

.main-page-contents .client-details-page .client-details-fields-row {
  align-items: flex-start;
}

.main-page-contents .client-details-page .nice-select.form-control {
  position: relative;
  z-index: 1;
}

.main-page-contents .client-details-page .nice-select.form-control.open {
  z-index: 20;
}

.main-page-contents .client-details-card__body .form-group {
  margin-bottom: 20px;
}

.main-page-contents .client-details-settings-row {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 102, 247, 0.08);
}

.main-page-contents .client-details-card__body .form-group > label.col-form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .client-details-page input.form-control,
.main-page-contents .client-details-page select.form-control {
  width: 100%;
  height: 36px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.18);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  border-radius: 29px;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 16px;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .client-details-page input.form-control:hover,
.main-page-contents .client-details-page select.form-control:hover {
  border-color: rgba(0, 102, 247, 0.28);
}

.main-page-contents .client-details-page input.form-control:focus,
.main-page-contents .client-details-page select.form-control:focus {
  outline: none;
  border-color: rgba(0, 102, 247, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.12),
    0px 4px 16px rgba(0, 51, 153, 0.08);
}

.main-page-contents .client-details-page select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  background-image: url("../img/select-chevron.svg");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px auto;
}

.main-page-contents .client-details-page input.form-control:disabled,
.main-page-contents .client-details-page select.form-control:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.main-page-contents .client-details-page .control .form-control {
  width: 100%;
}

.main-page-contents .client-details-page select.form-control:has(+ .nice-select) {
  display: none !important;
}

.main-page-contents .client-details-page .nice-select.form-control {
  width: 100%;
  display: flex !important;
  align-items: center;
  float: none;
  clear: both;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 36px;
  line-height: 1.35;
  padding: 8px 38px 8px 16px;
  white-space: normal;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.14) !important;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  border-radius: 29px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.main-page-contents .client-details-page .nice-select.form-control:hover {
  border-color: rgba(0, 102, 247, 0.28) !important;
  box-shadow: 0px 6px 20px rgba(0, 102, 247, 0.1),
    0px 2px 8px rgba(15, 15, 15, 0.06);
}

.main-page-contents .client-details-page .nice-select.form-control.open,
.main-page-contents .client-details-page .nice-select.form-control:focus {
  border-color: rgba(0, 102, 247, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.12),
    0px 6px 20px rgba(0, 102, 247, 0.12);
}

.main-page-contents .client-details-page .nice-select.form-control::after {
  border: none;
  width: 24px;
  height: 24px;
  right: 8px;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
  background: var(--color-neutral-black, #13151c);
  mask: url("../img/select-chevron.svg") center/10px no-repeat;
  -webkit-mask: url("../img/select-chevron.svg") center/10px no-repeat;
}

.main-page-contents .client-details-page .nice-select.form-control.open::after {
  transform: translateY(-50%);
}

.main-page-contents .client-details-page .nice-select.form-control .current {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
  font-weight: 500;
  font-size: 16px;
  color: var(--color-neutral-black, #13151c);
  padding-right: 4px;
}

.main-page-contents .client-details-page .nice-select.form-control .list {
  width: max-content;
  min-width: 100%;
  max-width: min(560px, calc(100vw - 48px));
  white-space: normal;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.12);
  box-shadow: 0px 8px 28px rgba(0, 51, 153, 0.12),
    0px 4px 16px rgba(15, 15, 15, 0.08);
  border-radius: 12px;
  z-index: 30;
}

.main-page-contents .client-details-page .nice-select.form-control .option:hover,
.main-page-contents .client-details-page .nice-select.form-control .option.focus,
.main-page-contents .client-details-page .nice-select.form-control .option.selected.focus {
  background: rgba(0, 102, 247, 0.06);
}

.main-page-contents .client-details-page .nice-select.form-control .option.selected {
  font-weight: 600;
  color: var(--color-primary-blue);
}

.main-page-contents .client-details-page .intl-tel-input {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.18);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  border-radius: 29px;
}

.main-page-contents .client-details-page .intl-tel-input:hover {
  border-color: rgba(0, 102, 247, 0.28);
}

.main-page-contents .client-details-page .intl-tel-input .form-control {
  width: 100%;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.main-page-contents .client-details-page .intl-tel-input .form-control:focus {
  box-shadow: none !important;
}

.main-page-contents .client-details-page .intl-tel-input:focus-within {
  border-color: rgba(0, 102, 247, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.12),
    0px 4px 16px rgba(0, 51, 153, 0.08);
}

.main-page-contents .client-details-page .intl-tel-input .flag-container {
  left: 0;
  right: auto;
}

.main-page-contents .client-details-page .intl-tel-input.separate-dial-code .selected-flag {
  height: 100%;
  display: table;
  padding-right: 18px;
  box-sizing: border-box;
  background-color: rgba(0, 102, 247, 0.06);
  border-radius: 29px 0 0 29px;
}

.main-page-contents .client-details-page .intl-tel-input.separate-dial-code .selected-dial-code {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-neutral-black, #13151c);
  padding-left: 28px;
  padding-right: 2px;
  white-space: nowrap;
}

.main-page-contents .client-details-page .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 .selected-flag {
  width: 74px;
}

.main-page-contents .client-details-page .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 .selected-flag {
  width: 82px;
}

.main-page-contents .client-details-page .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 .selected-flag {
  width: 92px;
}

.main-page-contents .client-details-page .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 .selected-flag {
  width: 100px;
}

.main-page-contents .client-details-page .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input {
  padding-left: 80px !important;
}

.main-page-contents .client-details-page .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input {
  padding-left: 88px !important;
}

.main-page-contents .client-details-page .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input {
  padding-left: 98px !important;
}

.main-page-contents .client-details-page .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input {
  padding-left: 106px !important;
}

.main-page-contents .client-details-page .intl-tel-input .selected-flag .iti-flag {
  left: 8px;
}

.main-page-contents .client-details-page .intl-tel-input .iti-arrow {
  right: 10px;
  border-top-color: var(--color-neutral-black, #13151c);
  opacity: 0.6;
}

.main-page-contents .client-details-page .client-details-marketing__text {
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: #6b7280;
}

.main-page-contents .client-details-page .client-details-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.main-page-contents .client-details-page .client-details-checklist__item {
  margin: 0;
}

.main-page-contents .client-details-page .client-details-checklist__label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 16px 14px 14px;
  background: rgba(0, 102, 247, 0.04);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.main-page-contents .client-details-page .client-details-checklist__label input[type="hidden"] {
  display: none;
}

.main-page-contents .client-details-page .client-details-checklist__label:hover {
  background: rgba(0, 102, 247, 0.08);
}

.main-page-contents .client-details-page .client-details-checklist__input {
  position: static;
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 3px 0 0;
  float: none;
  accent-color: var(--color-primary-blue);
  cursor: pointer;
}

.main-page-contents .client-details-page .client-details-checklist__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .client-details-page .bootstrap-switch.bootstrap-switch-wrapper {
  display: inline-block;
  border-radius: 20px;
  border: 1px solid rgba(0, 102, 247, 0.2);
  overflow: hidden;
  vertical-align: middle;
  line-height: 1;
  background: #e2e8f0;
}

.main-page-contents .client-details-page .bootstrap-switch.bootstrap-switch-on.bootstrap-switch-wrapper {
  border-color: var(--color-primary-blue);
  background: var(--color-primary-blue);
}

.main-page-contents .client-details-page .bootstrap-switch .bootstrap-switch-container {
  border-radius: 20px;
}

.main-page-contents .client-details-page .bootstrap-switch .bootstrap-switch-handle-on,
.main-page-contents .client-details-page .bootstrap-switch .bootstrap-switch-handle-off,
.main-page-contents .client-details-page .bootstrap-switch .bootstrap-switch-label {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
}

.main-page-contents .client-details-page .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
  color: #fff;
  background: var(--color-primary-blue);
  border-color: var(--color-primary-blue);
}

.main-page-contents .client-details-page .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary {
  background: #e2e8f0;
  border-color: #e2e8f0;
  color: #6b7280;
}

.main-page-contents .client-details-page .bootstrap-switch .bootstrap-switch-label {
  background: #fff;
  border-left: 1px solid rgba(0, 102, 247, 0.14);
  border-right: 1px solid rgba(0, 102, 247, 0.14);
  margin-top: 0;
  margin-bottom: 0;
}

.main-page-contents .client-details-page .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label {
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
}

.main-page-contents .client-details-page .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label {
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
}

.main-page-contents .client-details-page .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-on {
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
}

.main-page-contents .client-details-page .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-off {
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
}

.main-page-contents .client-details-page .bootstrap-switch input[type="checkbox"] {
  position: absolute !important;
  opacity: 0;
  pointer-events: none;
}

.main-page-contents .client-details-page .client-details-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  padding-bottom: 16px;
}

.main-page-contents .client-details-page .client-details-actions .button {
  min-width: 160px;
}

@media (max-width: 575.98px) {
  .main-page-contents .client-details-page .client-details-actions {
    flex-direction: column;
  }

  .main-page-contents .client-details-page .client-details-actions .button {
    width: 100%;
    min-width: 0;
  }
}

/* Client account subpages: users, contacts, email history */
.main-page-contents .client-details-page .client-details-page__meta,
.main-page-contents .client-details-page .client-details-page__note {
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

.main-page-contents .client-details-page .client-details-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-blue);
  background: rgba(0, 102, 247, 0.1);
}

.main-page-contents .client-details-page .client-details-user__email {
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .client-details-page .client-details-user__meta {
  margin-top: 6px;
  font-size: 13px;
  color: #6b7280;
}

.main-page-contents .client-details-page .client-details-table-wrap {
  margin-bottom: 16px;
  overflow: visible;
}

.main-page-contents .client-details-page .client-details-table {
  border-collapse: separate;
  border-spacing: 0;
}

.main-page-contents .client-details-page .client-details-table thead th {
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid rgba(0, 102, 247, 0.12);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6b7280;
  background: rgba(0, 102, 247, 0.03);
}

.main-page-contents .client-details-page .client-details-table tbody td {
  padding: 16px;
  border: none;
  border-bottom: 1px solid rgba(0, 102, 247, 0.08);
  vertical-align: middle;
  font-size: 15px;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .client-details-page .client-details-table tbody tr:last-child td {
  border-bottom: none;
}

.main-page-contents .client-details-page .client-details-table__section-row td {
  padding-top: 20px;
  background: rgba(0, 102, 247, 0.03);
}

.main-page-contents .client-details-page .client-details-table__actions {
  white-space: nowrap;
}

.main-page-contents .client-details-page .client-details-table__actions-col {
  width: 280px;
}

.main-page-contents .client-details-page .client-details-table__actions .button,
.main-page-contents .client-details-page .client-details-inline-form .button {
  margin: 0 6px 6px 0;
}

.main-page-contents .client-details-page .client-details-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.main-page-contents .client-details-page .button--sm {
  min-width: auto;
  min-height: 34px;
  padding: 6px 14px;
  font-size: 13px;
}

.main-page-contents .client-details-page .button--danger {
  color: #dc3545;
  border-color: rgba(220, 53, 69, 0.25);
}

.main-page-contents .client-details-page .button--danger:hover {
  color: #fff;
  background: #dc3545;
  border-color: #dc3545;
}

.main-page-contents .client-details-page .button.disabled,
.main-page-contents .client-details-page .button[disabled],
.main-page-contents .client-details-page a.button.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.main-page-contents .client-details-page .client-details-actions--left {
  justify-content: flex-start;
}

.main-page-contents .client-details-page .client-details-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.main-page-contents .client-details-page .client-details-radio-group__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 16px;
  background: rgba(0, 102, 247, 0.04);
  border-radius: 12px;
  cursor: pointer;
}

.main-page-contents .client-details-page .client-details-radio-group__item .form-check-input {
  position: static;
  margin: 0;
  accent-color: var(--color-primary-blue);
}

.main-page-contents .client-details-page .client-details-permissions {
  margin-top: 8px;
  padding: 16px;
  background: rgba(0, 102, 247, 0.03);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 16px;
}

.main-page-contents .client-details-page .client-details-checklist__hint {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
}

.main-page-contents .client-details-page select.custom-select:has(+ .nice-select) {
  display: none !important;
}

.main-page-contents .client-details-page .nice-select.custom-select,
.main-page-contents .client-details-page .nice-select.form-control.custom-select {
  width: 100%;
  display: flex !important;
  align-items: center;
  float: none;
  clear: both;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 36px;
  line-height: 1.35;
  padding: 8px 38px 8px 16px;
  white-space: normal;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.18) !important;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  border-radius: 29px !important;
  position: relative;
  z-index: 1;
}

.main-page-contents .client-details-page .nice-select.custom-select.open,
.main-page-contents .client-details-page .nice-select.form-control.custom-select.open {
  z-index: 20;
}

.main-page-contents .client-details-page .nice-select.custom-select::after,
.main-page-contents .client-details-page .nice-select.form-control.custom-select::after {
  border: none;
  width: 24px;
  height: 24px;
  right: 8px;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
  background: var(--color-neutral-black, #13151c);
  mask: url("../img/select-chevron.svg") center/10px no-repeat;
  -webkit-mask: url("../img/select-chevron.svg") center/10px no-repeat;
}

.main-page-contents .client-details-page .nice-select.custom-select .list,
.main-page-contents .client-details-page .nice-select.form-control.custom-select .list {
  z-index: 30;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.12);
  box-shadow: 0px 8px 28px rgba(0, 51, 153, 0.12),
    0px 4px 16px rgba(15, 15, 15, 0.08);
  border-radius: 12px;
}

.main-page-contents .client-details-page .client-details-datatable .dataTables_wrapper {
  overflow: visible;
}

.main-page-contents .client-details-page .client-details-datatable .dataTables_length {
  background: transparent;
}

@media (max-width: 767.98px) {
  .main-page-contents .client-details-page .client-details-table__actions-col {
    width: auto;
  }

  .main-page-contents .client-details-page .client-details-table__actions .button {
    width: 100%;
    margin-right: 0;
  }
}

/* --------------------------------------------------------------------------
   User account — profile (user/profile)
   -------------------------------------------------------------------------- */

.main-page-contents .user-profile-page .client-details-email-status {
  margin: 0 0 4px;
}

.main-page-contents .client-details-page .client-details-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.main-page-contents .client-details-page .client-details-status--success {
  background: rgba(18, 179, 0, 0.12);
  color: #0a8f00;
}

.main-page-contents .client-details-page .client-details-status--muted {
  background: rgba(0, 102, 247, 0.08);
  color: #6b7280;
}

.main-page-contents .client-details-page .label.label-success {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  background: rgba(18, 179, 0, 0.12) !important;
  color: #0a8f00 !important;
}

.main-page-contents .client-details-page .label.label-default {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  background: rgba(0, 102, 247, 0.08) !important;
  color: #6b7280 !important;
}

.main-page-contents .user-profile-page .client-details-actions {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 102, 247, 0.08);
}

/* --------------------------------------------------------------------------
   User account — change password (user/password)
   -------------------------------------------------------------------------- */

.main-page-contents .user-password-page .client-details-password-form .col-form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
}

@media (min-width: 1200px) {
  .main-page-contents .user-password-page .client-details-password-form .col-form-label {
    padding-top: 8px;
  }
}

.main-page-contents .user-password-page .client-details-password-form .generate-password {
  width: 100%;
  margin-top: 0;
}

.main-page-contents .user-password-page .client-details-password-strength {
  margin-top: 12px;
}

.main-page-contents .user-password-page .client-details-password-strength > br {
  display: none;
}

.main-page-contents .user-password-page #passwordStrengthBar {
  height: 8px;
  margin-bottom: 0;
  background: rgba(0, 102, 247, 0.08);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: none;
}

.main-page-contents .user-password-page #passwordStrengthBar .progress-bar {
  border-radius: 999px;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.main-page-contents .user-password-page #passwordStrengthBar .progress-bar.bg-danger {
  background-color: #e52e2e !important;
}

.main-page-contents .user-password-page #passwordStrengthBar .progress-bar.bg-warning {
  background-color: #f59e0b !important;
}

.main-page-contents .user-password-page #passwordStrengthBar .progress-bar.bg-success {
  background-color: var(--color-status-green, #12b300) !important;
}

.main-page-contents .user-password-page .client-details-password-strength .alert-info {
  margin: 16px 0 0;
  padding: 14px 16px;
  background: rgba(0, 102, 247, 0.04);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 12px;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.55;
}

.main-page-contents .user-password-page .client-details-password-strength .alert-info strong {
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .user-password-page .client-details-password-strength .alert-info code {
  color: var(--color-primary-blue);
  background: rgba(0, 102, 247, 0.08);
  border-radius: 4px;
  padding: 0 4px;
}

.main-page-contents .user-password-page #inputNewPassword2Msg .form-text {
  margin: 8px 0 0;
  font-size: 13px;
  color: #e52e2e;
}

.main-page-contents .user-password-page .client-details-password-form__actions {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 102, 247, 0.08);
}

@media (max-width: 1199.98px) {
  .main-page-contents .user-password-page .client-details-password-form .form-group.row > [class*="col-xl-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .main-page-contents .user-password-page .client-details-password-form .col-form-label {
    margin-bottom: 8px;
    padding-top: 0;
  }

  .main-page-contents .user-password-page .client-details-password-form .generate-password {
    margin-top: 4px;
  }
}

/* --------------------------------------------------------------------------
   Generate password modal (#modalGeneratePassword)
   -------------------------------------------------------------------------- */

#modalGeneratePassword .modal-dialog {
  max-width: min(560px, calc(100vw - 32px));
}

#modalGeneratePassword .modal-content {
  border: 1px solid rgba(0, 102, 247, 0.12);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0, 51, 153, 0.18), 0 8px 24px rgba(15, 15, 15, 0.08);
  overflow: hidden;
}

#modalGeneratePassword .modal-header {
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 102, 247, 0.08);
  background: linear-gradient(180deg, rgba(0, 102, 247, 0.06) 0%, #fff 100%);
}

#modalGeneratePassword .modal-header.bg-primary {
  background: linear-gradient(180deg, rgba(0, 102, 247, 0.06) 0%, #fff 100%);
}

#modalGeneratePassword .modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-neutral-black, #13151c);
}

#modalGeneratePassword .modal-header .close {
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(0, 102, 247, 0.14);
  background: #fff;
  opacity: 1;
  color: var(--color-neutral-black, #13151c);
  text-shadow: none;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

#modalGeneratePassword .modal-header .close:hover {
  border-color: rgba(0, 102, 247, 0.35);
  background: rgba(0, 102, 247, 0.06);
  color: var(--color-primary-blue, #0066f7);
}

#modalGeneratePassword .modal-body {
  padding: 20px 24px 8px;
}

#modalGeneratePassword .modal-body .alert-danger {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(229, 46, 46, 0.2);
  background: rgba(229, 46, 46, 0.06);
  color: #b91c1c;
  font-size: 14px;
}

#modalGeneratePassword .modal-body .form-group {
  margin-bottom: 18px;
}

#modalGeneratePassword .modal-body .col-form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
}

@media (min-width: 576px) {
  #modalGeneratePassword .modal-body .col-form-label {
    padding-top: 8px;
  }
}

#modalGeneratePassword .modal-body input.form-control {
  width: 100%;
  height: 36px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.18);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  border-radius: 29px;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 16px;
  color: var(--color-neutral-black, #13151c);
}

#modalGeneratePassword .modal-body input.form-control:focus {
  outline: none;
  border-color: rgba(0, 102, 247, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.12),
    0px 4px 16px rgba(0, 51, 153, 0.08);
}

#modalGeneratePassword .modal-body #inputGeneratePasswordOutput {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  letter-spacing: 0.02em;
}

#modalGeneratePassword .modal-generate-password__toolbar .col-sm-8 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#modalGeneratePassword .modal-generate-password__toolbar .button {
  min-width: auto;
}

#modalGeneratePassword .button.is-copy-done,
.main-page-contents .copy-to-clipboard.button.is-copy-done {
  border-color: rgba(18, 179, 0, 0.35);
  background: rgba(18, 179, 0, 0.08);
  color: var(--color-status-green, #12b300);
}

#modalGeneratePassword .modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px 24px;
  border-top: 1px solid rgba(0, 102, 247, 0.08);
  background: #fff;
}

#modalGeneratePassword .modal-footer .button {
  min-width: 140px;
}

#modalGeneratePassword .modal-footer .button[disabled],
#modalGeneratePassword .modal-footer .button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 575.98px) {
  #modalGeneratePassword .modal-body .form-group.row > [class*="col-sm-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  #modalGeneratePassword .modal-body .col-form-label {
    margin-bottom: 8px;
    padding-top: 0;
  }

  #modalGeneratePassword .modal-generate-password__toolbar .offset-sm-4 {
    margin-left: 0;
  }

  #modalGeneratePassword .modal-generate-password__toolbar .button {
    flex: 1 1 auto;
    width: 100%;
  }

  #modalGeneratePassword .modal-footer {
    flex-direction: column;
  }

  #modalGeneratePassword .modal-footer .button {
    width: 100%;
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   Register page (register.php) — ForceVPS cart UI
   -------------------------------------------------------------------------- */

.register-page.form-holder {
  background: #fff;
  box-shadow: -5px 10px 73.9px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 25px;
  padding: 40px 36px;
  overflow: visible;
}

.register-page .register-hero {
  margin-bottom: 28px;
}

.register-page .register-hero__eyebrow {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-blue);
}

.register-page .register-hero__title {
  margin: 0 0 12px;
}

.register-page .register-hero__subtitle {
  margin: 0;
  color: #6b7280;
  line-height: 1.6;
}

.register-page .form-group,
.register-page .prepend-icon {
  margin-bottom: 16px;
  overflow: visible;
}

.register-page .form-group label:not(.register-tos__label) {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
}

.register-page input.form-control,
.register-page select.form-control,
.register-page .field.form-control,
.register-page #default-captcha-domainchecker input.form-control {
  width: 100%;
  height: 36px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.18) !important;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  border-radius: 29px !important;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 16px;
  color: var(--color-neutral-black, #13151c);
}

.register-page input.form-control:hover,
.register-page select.form-control:hover,
.register-page .field.form-control:hover {
  border-color: rgba(0, 102, 247, 0.28) !important;
}

.register-page input.form-control:focus,
.register-page select.form-control:focus,
.register-page .field.form-control:focus {
  outline: none;
  border-color: rgba(0, 102, 247, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.12),
    0px 4px 16px rgba(0, 51, 153, 0.08);
}

.register-page select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  background-image: url("../img/select-chevron.svg");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px auto;
}

.register-page select.form-control:has(+ .nice-select),
.register-page select.field.form-control:has(+ .nice-select) {
  display: none !important;
}

.register-page .nice-select.form-control,
.register-page .nice-select.field.form-control {
  width: 100%;
  display: flex !important;
  align-items: center;
  float: none;
  clear: both;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 36px;
  line-height: 1.35;
  padding: 8px 38px 8px 16px;
  white-space: normal;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.18) !important;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  border-radius: 29px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  z-index: 1;
}

.register-page .nice-select.form-control.open,
.register-page .nice-select.field.form-control.open {
  z-index: 20;
}

.register-page .nice-select.form-control::after,
.register-page .nice-select.field.form-control::after {
  border: none;
  width: 24px;
  height: 24px;
  right: 8px;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
  background: var(--color-neutral-black, #13151c);
  mask: url("../img/select-chevron.svg") center/10px no-repeat;
  -webkit-mask: url("../img/select-chevron.svg") center/10px no-repeat;
}

.register-page .nice-select.form-control .list,
.register-page .nice-select.field.form-control .list {
  z-index: 30;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.12);
  box-shadow: 0px 8px 28px rgba(0, 51, 153, 0.12),
    0px 4px 16px rgba(15, 15, 15, 0.08);
  border-radius: 12px;
}

.register-page .intl-tel-input {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.18);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  border-radius: 29px;
}

.register-page .intl-tel-input .form-control {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.register-page .intl-tel-input:focus-within {
  border-color: rgba(0, 102, 247, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.12),
    0px 4px 16px rgba(0, 51, 153, 0.08);
}

.register-page .intl-tel-input .flag-container {
  left: 0;
  right: auto;
}

.register-page .intl-tel-input.separate-dial-code .selected-flag {
  height: 100%;
  display: table;
  padding-right: 18px;
  box-sizing: border-box;
  background-color: rgba(0, 102, 247, 0.06);
  border-radius: 29px 0 0 29px;
}

.register-page .intl-tel-input.separate-dial-code .selected-dial-code {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-neutral-black, #13151c);
  padding-left: 28px;
  padding-right: 2px;
  white-space: nowrap;
}

.register-page .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 .selected-flag {
  width: 74px;
}

.register-page .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 .selected-flag {
  width: 82px;
}

.register-page .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 .selected-flag {
  width: 92px;
}

.register-page .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 .selected-flag {
  width: 100px;
}

.register-page .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input {
  padding-left: 80px !important;
}

.register-page .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input {
  padding-left: 88px !important;
}

.register-page .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input {
  padding-left: 98px !important;
}

.register-page .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input {
  padding-left: 106px !important;
}

.register-page .intl-tel-input .selected-flag .iti-flag {
  left: 8px;
}

.register-page .intl-tel-input .iti-arrow {
  right: 10px;
  border-top-color: var(--color-neutral-black, #13151c);
  opacity: 0.6;
}

.register-page .register-password-feedback {
  margin-top: 4px;
  margin-bottom: 8px;
  padding: 14px 16px;
  background: rgba(0, 102, 247, 0.04);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 16px;
}

.register-page .register-password-feedback__label {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
}

.register-page .register-password-feedback .password-strength-meter {
  margin-top: 0;
}

.register-page .register-password-feedback .password-strength-meter .progress {
  height: 8px;
  border-radius: 20px;
  background: rgba(0, 102, 247, 0.08);
  overflow: hidden;
}

.register-page .register-password-feedback .password-strength-meter .progress-bar {
  border-radius: 20px;
}

.register-page .separte-or {
  margin: 24px 0 20px;
}

.register-page .separte-or::before {
  background: rgba(0, 102, 247, 0.12);
}

.register-page .separte-or span {
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary-blue);
  background: #fff;
}

.register-page .register-panel {
  background: rgba(0, 102, 247, 0.04);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
  padding: 20px 22px;
  margin-top: 24px;
}

.register-page .register-panel__title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
}

.register-page .register-marketing-card__text {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

.register-page .register-tos {
  margin: 20px 0 8px;
}

.register-page .register-tos__label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  background: rgba(0, 102, 247, 0.04);
  border-radius: 12px;
  cursor: pointer;
}

.register-page .register-tos__input {
  position: static;
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--color-primary-blue);
}

.register-page .register-tos__text {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-neutral-black, #13151c);
}

.register-page .register-tos__text a {
  color: var(--color-primary-blue);
  font-weight: 600;
}

.register-page .register-page__actions {
  margin-top: 24px;
}

.register-page .register-page__submit {
  min-height: 44px;
}

.register-page .form-bottom .sign-up-text a {
  color: var(--color-primary-blue);
  font-weight: 600;
}

.register-page #default-captcha-domainchecker {
  margin-top: 16px;
}

.register-page #default-captcha-domainchecker p {
  font-size: 14px;
  color: #6b7280;
}

.register-page .bootstrap-switch.bootstrap-switch-wrapper {
  display: inline-block;
  border-radius: 20px;
  border: 1px solid rgba(0, 102, 247, 0.2);
  overflow: hidden;
  vertical-align: middle;
  line-height: 1;
  background: #e2e8f0;
}

.register-page .bootstrap-switch.bootstrap-switch-on.bootstrap-switch-wrapper {
  border-color: var(--color-primary-blue);
  background: var(--color-primary-blue);
}

.register-page .bootstrap-switch .bootstrap-switch-handle-on,
.register-page .bootstrap-switch .bootstrap-switch-handle-off,
.register-page .bootstrap-switch .bootstrap-switch-label {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
}

.register-page .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
  color: #fff;
  background: var(--color-primary-blue);
  border-color: var(--color-primary-blue);
}

.register-page .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary {
  background: #e2e8f0;
  border-color: #e2e8f0;
  color: #6b7280;
}

.register-page .bootstrap-switch .bootstrap-switch-label {
  background: #fff;
  border-left: 1px solid rgba(0, 102, 247, 0.14);
  border-right: 1px solid rgba(0, 102, 247, 0.14);
  margin-top: 0;
  margin-bottom: 0;
}

.register-page .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label {
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
}

.register-page .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label {
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
}

.register-page .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-on {
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
}

.register-page .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-off {
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
}

@media (max-width: 575.98px) {
  .register-page.form-holder {
    padding: 28px 20px;
  }
}

/* --------------------------------------------------------------------------
   Login page (login.php) — ForceVPS cart UI
   -------------------------------------------------------------------------- */

.login-page.form-holder {
  background: #fff;
  box-shadow: -5px 10px 73.9px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 25px;
  padding: 40px 36px;
  overflow: visible;
}

.login-page .login-hero {
  margin-bottom: 28px;
}

.login-page .login-hero__eyebrow {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-blue);
}

.login-page .login-hero__title {
  margin: 0 0 12px;
}

.login-page .login-hero__subtitle {
  margin: 0;
  color: #6b7280;
  line-height: 1.6;
}

.login-page .form-group,
.login-page .prepend-icon {
  margin-bottom: 16px;
  overflow: visible;
}

.login-page input.form-control {
  width: 100%;
  height: 36px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.18) !important;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  border-radius: 29px !important;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 16px;
  color: var(--color-neutral-black, #13151c);
}

.login-page input.form-control:hover {
  border-color: rgba(0, 102, 247, 0.28) !important;
}

.login-page input.form-control:focus {
  outline: none;
  border-color: rgba(0, 102, 247, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.12),
    0px 4px 16px rgba(0, 51, 153, 0.08);
}

.login-page .login-field {
  margin-bottom: 16px;
}

.login-page .login-field__head {
  margin-bottom: 8px;
  gap: 12px;
}

.login-page .login-field__label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
}

.login-page .login-forget-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-blue);
  text-decoration: none;
  white-space: nowrap;
}

.login-page .login-forget-link:hover {
  text-decoration: underline;
}

.login-page .login-remember {
  margin: 8px 0 20px;
}

.login-page .login-remember__label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  background: rgba(0, 102, 247, 0.04);
  border-radius: 12px;
  cursor: pointer;
}

.login-page .login-remember__input {
  position: static;
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--color-primary-blue);
}

.login-page .login-remember__text {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-neutral-black, #13151c);
}

.login-page .separte-or {
  margin: 24px 0 20px;
}

.login-page .separte-or::before {
  background: rgba(0, 102, 247, 0.12);
}

.login-page .separte-or span {
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary-blue);
  background: #fff;
}

.login-page .login-page__actions {
  margin-top: 8px;
}

.login-page .login-page__submit {
  min-height: 44px;
}

.login-page .form-bottom .sign-up-text {
  margin: 20px 0 0;
  font-size: 14px;
  color: #6b7280;
}

.login-page .form-bottom .sign-up-text a {
  color: var(--color-primary-blue);
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .login-page.form-holder {
    padding: 28px 20px;
  }
}

/* --------------------------------------------------------------------------
   Password reset (password-reset-container) — extends login-page
   -------------------------------------------------------------------------- */

.login-page .password-reset-form {
  margin-top: 4px;
}

.login-page .password-reset-strength {
  margin: 8px 0 20px;
}

.login-page .password-reset-strength > .login-field__label {
  display: block;
  margin-bottom: 10px;
}

.login-page #passwordStrengthBar {
  height: 8px;
  background: rgba(0, 102, 247, 0.08);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: none;
}

.login-page #passwordStrengthBar .progress-bar {
  border-radius: 999px;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.login-page #passwordStrengthBar .progress-bar.bg-danger {
  background-color: #e52e2e !important;
}

.login-page #passwordStrengthBar .progress-bar.bg-warning {
  background-color: #f59e0b !important;
}

.login-page #passwordStrengthBar .progress-bar.bg-success {
  background-color: var(--color-status-green, #12b300) !important;
}

.login-page .password-reset-strength .alert-info {
  margin: 16px 0 0;
  padding: 14px 16px;
  background: rgba(0, 102, 247, 0.04);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 12px;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.55;
}

.login-page .password-reset-strength .alert-info strong {
  color: var(--color-neutral-black, #13151c);
}

.login-page .password-reset-strength .alert-info code {
  color: var(--color-primary-blue);
  background: rgba(0, 102, 247, 0.08);
  border-radius: 4px;
  padding: 0 4px;
}

.login-page #inputNewPassword2Msg .form-text {
  margin: 8px 0 0;
  font-size: 13px;
  color: #e52e2e;
}

.login-page .password-reset-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.login-page .password-reset-actions .button[disabled],
.login-page .password-reset-actions .button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.login-page .login-hero .alert {
  margin-top: 16px;
  text-align: left;
}

/* WHMCS utility: styles.css is not loaded in head.tpl (only inline sort dates, not tables) */
span.w-hidden,
td span.w-hidden {
  display: none !important;
}

/* Hide list tables until DataTables init reveals them via table.show() (prevents FOUC) */
table.clientarea-list-table.w-hidden {
  display: none;
}

/* Client area — invoices list status badges (override global .status from all.min.css) */
.main-page-contents .table-container #tableInvoicesList .invoice-status {
  display: inline-block !important;
  padding: 0.25em 0.65em;
  border: none !important;
  border-radius: 4px;
  background-color: #87939f;
  color: #fff !important;
  font-weight: 500;
  font-size: 0.85em;
  line-height: 1.4;
}

.main-page-contents .table-container #tableInvoicesList .invoice-status--unpaid {
  background-color: var(--color-status-red, #e52e2e) !important;
}

.main-page-contents .table-container #tableInvoicesList .invoice-status--paid {
  background-color: var(--color-status-green, #12b300) !important;
}

.main-page-contents .table-container #tableInvoicesList .invoice-status--payment-pending,
.main-page-contents .table-container #tableInvoicesList .invoice-status--draft,
.main-page-contents .table-container #tableInvoicesList .invoice-status--collections {
  background-color: #fd7e14 !important;
}

.main-page-contents .table-container #tableInvoicesList .invoice-status--cancelled,
.main-page-contents .table-container #tableInvoicesList .invoice-status--refunded {
  background-color: #87939f !important;
}

#tableInvoicesList td.invoice-list-actions {
  padding: 8px 12px;
  vertical-align: middle;
  white-space: nowrap;
  width: 1%;
}

.main-page-contents #tableInvoicesList .invoice-list-pay-btn.button {
  min-width: auto;
  min-height: 32px;
  height: auto;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  gap: 0;
  border: none;
  border-radius: 44px;
  background: var(--color-primary-blue, #0066f7);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 102, 247, 0.2);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
}

.main-page-contents #tableInvoicesList .invoice-list-pay-btn.button:hover,
.main-page-contents #tableInvoicesList .invoice-list-pay-btn.button:focus {
  color: #fff;
  background: linear-gradient(135deg, #0052cc 0%, #0066f7 100%);
  box-shadow: 0 6px 16px rgba(0, 102, 247, 0.28);
  transform: none;
}

/* --------------------------------------------------------------------------
   Invoice view page (viewinvoice / viewquote / viewbillingnote)
   -------------------------------------------------------------------------- */
body.invoice-view-body {
  background: #f5f7fa;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.invoice-view-page.invoice-container {
  margin: 24px auto 48px;
  padding: 40px 48px 48px;
  max-width: 900px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 25px;
  box-shadow: -5px 10px 73.9px rgba(0, 0, 0, 0.08);
}

@media (max-width: 767px) {
  .invoice-view-page.invoice-container {
    margin: 16px;
    padding: 28px 24px 36px;
  }
}

.invoice-view-page .invoice-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 8px;
}

.invoice-view-page .invoice-hero__main {
  flex: 1 1 280px;
  min-width: 0;
}

.invoice-view-page .invoice-hero__aside {
  flex: 0 1 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.invoice-view-page .invoice-hero__aside .payment-btn-container {
  width: 100%;
  text-align: center;
}

.invoice-view-page .invoice-hero__aside .payment-btn-container p {
  margin-bottom: 0;
}

.invoice-view-page .invoice-hero__eyebrow {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-blue, #0066f7);
}

.invoice-view-page .invoice-hero__title {
  margin: 0;
}

.invoice-view-page .invoice-hero__logo img {
  max-width: 180px;
  height: auto;
  margin-bottom: 12px;
}

.invoice-view-page .invoice-status {
  margin: 0 0 12px;
}

.invoice-view-page .invoice-status-badge {
  display: inline-block;
  padding: 0.35em 0.85em;
  border-radius: 44px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.4;
}

.invoice-view-page .invoice-status-badge--unpaid {
  background-color: var(--color-status-red, #e52e2e);
}

.invoice-view-page .invoice-status-badge--paid {
  background-color: var(--color-status-green, #12b300);
}

.invoice-view-page .invoice-status-badge--draft,
.invoice-view-page .invoice-status-badge--payment-pending,
.invoice-view-page .invoice-status-badge--collections {
  background-color: #fd7e14;
}

.invoice-view-page .invoice-status-badge--cancelled,
.invoice-view-page .invoice-status-badge--refunded {
  background-color: #87939f;
}

.invoice-view-page .invoice-hero__meta {
  margin-bottom: 12px;
  color: #6b7280;
  font-size: 14px;
}

.invoice-view-page .invoice-divider {
  height: 1px;
  margin: 28px 0;
  background: rgba(0, 102, 247, 0.08);
  border: none;
}

.invoice-view-page .invoice-meta-grid {
  margin-bottom: 8px;
}

.invoice-view-page .invoice-meta-grid .invoice-meta__label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
}

.invoice-view-page .invoice-meta-grid .small-text {
  margin-bottom: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.6;
}

.invoice-view-page .payment-btn-container {
  margin-top: 12px;
}

.invoice-view-page .payment-btn-container .btn,
.invoice-view-page .payment-btn-container input[type="submit"],
.invoice-view-page .payment-btn-container button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 167px;
  min-height: 48px;
  padding: 8px 22px;
  border: none;
  border-radius: 44px;
  background: var(--color-primary-blue, #0066f7);
  box-shadow: 0 4px 12px rgba(0, 102, 247, 0.2);
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.invoice-view-page .payment-btn-container .btn:hover,
.invoice-view-page .payment-btn-container input[type="submit"]:hover,
.invoice-view-page .payment-btn-container button:hover {
  color: #fff;
  background: linear-gradient(135deg, #0052cc 0%, #0066f7 100%);
  box-shadow: 0 6px 16px rgba(0, 102, 247, 0.28);
}

.invoice-view-page .payment-btn-container p {
  margin-bottom: 12px;
  color: #6b7280;
  font-size: 14px;
}

.invoice-view-page select.custom-select,
.invoice-view-page .invoice-gateway-select {
  height: 44px;
  min-width: 220px;
  max-width: 100%;
  padding: 10px 42px 10px 18px;
  background-color: rgba(0, 102, 247, 0.06);
  border: 2px solid rgba(0, 102, 247, 0.35);
  box-shadow: 0px 4px 16px rgba(0, 102, 247, 0.12);
  border-radius: 29px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary-blue, #0066f7);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("../img/select-chevron.svg");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}

.invoice-view-page select.custom-select:focus,
.invoice-view-page .invoice-gateway-select:focus {
  outline: none;
  border-color: var(--color-primary-blue, #0066f7);
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.18), 0px 4px 16px rgba(0, 102, 247, 0.12);
}

.invoice-view-page .invoice-meta-grid [data-role="paymethod-info"] form {
  margin-top: 4px;
}

.invoice-view-page .invoice-gateway-wrap {
  display: inline-block;
  min-width: 240px;
  max-width: 100%;
}

.invoice-view-page .nice-select.invoice-gateway-select {
  float: none;
  height: 44px;
  line-height: 44px;
  min-width: 240px;
  max-width: 100%;
  padding: 0 42px 0 18px;
  background: #fff;
  border: 2px solid rgba(0, 102, 247, 0.35) !important;
  box-shadow: 0px 4px 16px rgba(0, 102, 247, 0.12);
  border-radius: 29px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.invoice-view-page .nice-select.invoice-gateway-select:hover {
  border-color: rgba(0, 102, 247, 0.55) !important;
}

.invoice-view-page .nice-select.invoice-gateway-select.open,
.invoice-view-page .nice-select.invoice-gateway-select:focus {
  border-color: var(--color-primary-blue, #0066f7) !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.18), 0px 6px 20px rgba(0, 102, 247, 0.14);
}

.invoice-view-page .nice-select.invoice-gateway-select .current {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary-blue, #0066f7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-view-page .nice-select.invoice-gateway-select:after {
  border: none;
  width: 24px;
  height: 24px;
  right: 12px;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
  background: var(--color-primary-blue, #0066f7);
  mask: url("../img/select-chevron.svg") center/12px no-repeat;
  -webkit-mask: url("../img/select-chevron.svg") center/12px no-repeat;
}

.invoice-view-page .nice-select.invoice-gateway-select.open:after {
  transform: translateY(-50%) rotate(180deg);
}

.invoice-view-page .nice-select.invoice-gateway-select .list {
  margin-top: 8px;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.12);
  box-shadow: 0px 12px 32px rgba(0, 51, 153, 0.14), 0px 4px 16px rgba(15, 15, 15, 0.08);
  border-radius: 16px;
  width: max-content;
  min-width: 100%;
  max-width: 360px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 100;
}

.invoice-view-page .nice-select.invoice-gateway-select .list .option {
  min-height: 40px;
  line-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-neutral-black, #13151c);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.invoice-view-page .nice-select.invoice-gateway-select .list .option:hover,
.invoice-view-page .nice-select.invoice-gateway-select .list .option.focus {
  background: rgba(0, 102, 247, 0.08);
  color: var(--color-primary-blue, #0066f7);
}

.invoice-view-page .nice-select.invoice-gateway-select .list .option.selected {
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  color: #fff;
  font-weight: 600;
}

.invoice-view-page .nice-select.invoice-gateway-select .list .option.selected.focus,
.invoice-view-page .nice-select.invoice-gateway-select .list .option.selected:hover {
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  color: #fff;
}

.invoice-view-page .invoice-line-items {
  margin-bottom: 24px;
  background: #fff;
  border: none;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.invoice-view-page .invoice-credit-card {
  margin-bottom: 24px;
  background: rgba(0, 102, 247, 0.04);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.06);
  overflow: visible;
}

.invoice-view-page .invoice-line-items .card-header {
  padding: 20px 24px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 102, 247, 0.08);
}

.invoice-view-page .invoice-line-items .card-title,
.invoice-view-page .invoice-credit-card .card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
}

.invoice-view-page .invoice-line-items .table,
.invoice-view-page .invoice-transactions .table {
  margin-bottom: 0;
}

.invoice-view-page .invoice-line-items .table thead td,
.invoice-view-page .invoice-transactions .table thead td {
  padding: 12px 24px;
  border-bottom: 1px solid rgba(0, 102, 247, 0.08);
  font-size: 13px;
  color: #6b7280;
}

.invoice-view-page .invoice-line-items .table tbody td,
.invoice-view-page .invoice-transactions .table tbody td {
  padding: 12px 24px;
  border-top: none;
  border-bottom: 1px solid rgba(0, 102, 247, 0.06);
  font-size: 14px;
  vertical-align: middle;
}

.invoice-view-page .invoice-line-items td.total-row {
  background: rgba(0, 102, 247, 0.04);
}

.invoice-view-page .invoice-line-items tr.invoice-total-due td {
  background: linear-gradient(180deg, #353535 0%, #1e1e1e 100%);
  border-bottom: none;
  color: #fff;
  font-weight: 600;
  padding: 16px 24px;
}

.invoice-view-page .invoice-line-items tr.invoice-total-due td:last-child {
  font-size: 22px;
  font-weight: 700;
}

.invoice-view-page .invoice-transactions {
  margin-bottom: 24px;
  padding: 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.invoice-view-page .invoice-transactions__title {
  margin: 0;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
  border-bottom: 1px solid rgba(0, 102, 247, 0.08);
}

.invoice-view-page .invoice-ledger {
  margin-bottom: 24px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.invoice-view-page .invoice-ledger__title {
  margin: 0;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
}

.invoice-view-page .invoice-ledger .table thead td,
.invoice-view-page .invoice-ledger .table tbody td {
  padding: 12px 24px;
  border-bottom: 1px solid rgba(0, 102, 247, 0.06);
  font-size: 14px;
  vertical-align: middle;
}

.invoice-view-page .invoice-ledger .table thead td {
  border-bottom: 1px solid rgba(0, 102, 247, 0.08);
  font-size: 13px;
  color: #6b7280;
}

.invoice-view-page .invoice-ledger td.total-row {
  background: rgba(0, 102, 247, 0.04);
}

.invoice-view-page .invoice-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.invoice-view-page .invoice-actions .button {
  min-width: auto;
  min-height: 36px;
  height: 36px;
  padding: 6px 18px;
  font-size: 14px;
  gap: 8px;
}

.invoice-view-page .invoice-actions .button .fas,
.invoice-view-page .invoice-actions .button .feather {
  font-size: 16px;
  color: var(--color-primary-blue, #0066f7);
  line-height: 1;
}

body.invoice-view-body .invoice-back-wrap {
  margin: 24px auto 48px;
  padding: 0 16px;
}

body.invoice-view-body .invoice-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: auto;
  min-height: 36px;
  height: 36px;
  padding: 6px 18px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 10px;
}

body.invoice-view-body .invoice-back-link .feather {
  font-size: 16px;
  color: var(--color-primary-blue, #0066f7);
  line-height: 1;
}

.invoice-view-page .invoice-credit-card .card-header {
  padding: 20px 24px;
  background: transparent;
  border-bottom: 1px solid rgba(0, 102, 247, 0.08);
}

.invoice-view-page .invoice-credit-card .card-body {
  padding: 20px 24px 24px;
}

.invoice-view-page .invoice-credit-form__desc {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

.invoice-view-page .invoice-credit-form__balance {
  color: var(--color-primary-blue, #0066f7);
  font-weight: 600;
}

.invoice-view-page .invoice-credit-form__row {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
}

.invoice-view-page .invoice-credit-form__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 8px 16px;
  border: none;
  border-radius: 29px;
  background: #fff;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04), 0px 4px 10px rgba(15, 15, 15, 0.06);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-neutral-black, #13151c);
}

.invoice-view-page .invoice-credit-form__input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.18), 0px 4px 16px rgba(0, 51, 153, 0.08);
}

.invoice-view-page .invoice-credit-form__submit {
  flex: 0 0 auto;
  min-width: auto;
  height: 44px;
  padding: 8px 20px;
  white-space: nowrap;
}

@media (max-width: 575px) {
  .invoice-view-page .invoice-credit-form__row {
    flex-direction: column;
    align-items: stretch;
  }

  .invoice-view-page .invoice-credit-form__submit {
    width: 100%;
  }
}

@media print {
  body.invoice-view-body {
    background: #fff;
  }

  .invoice-view-page.invoice-container {
    margin: 0;
    padding: 0;
    max-width: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .invoice-view-page .invoice-line-items,
  .invoice-view-page .invoice-transactions,
  .invoice-view-page .invoice-ledger {
    box-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   Mass payment page (clientarea.php?action=masspay) — ForceVPS cart UI
   -------------------------------------------------------------------------- */

.main-page-contents .masspay-page,
.main-page-contents .addfunds-page {
  margin-top: 8px;
}

.main-page-contents .masspay-hero,
.main-page-contents .addfunds-page .masspay-hero {
  padding: 8px 0 28px;
  text-align: center;
}

.main-page-contents .masspay-hero__inner {
  max-width: 720px;
  margin-inline: auto;
}

.main-page-contents .masspay-hero__eyebrow {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-blue);
}

.main-page-contents .masspay-hero__title {
  margin: 0 0 16px;
}

.main-page-contents .masspay-hero__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #6b7280;
  max-width: 640px;
  margin-inline: auto;
}

.main-page-contents .masspay-layout {
  margin-bottom: 28px;
}

.main-page-contents .masspay-invoices-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.main-page-contents .masspay-invoice-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}

.main-page-contents .masspay-invoice-card:hover {
  box-shadow: 0px 8px 28px rgba(0, 102, 247, 0.12);
}

.main-page-contents .masspay-invoice-card__head {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  color: #fff;
}

.main-page-contents .masspay-invoice-card__badge {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.main-page-contents .masspay-invoice-card__body {
  padding: 8px 0;
}

.main-page-contents .masspay-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px 24px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(0, 102, 247, 0.08);
}

.main-page-contents .masspay-line:last-child {
  border-bottom: none;
}

.main-page-contents .masspay-line__desc {
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
  overflow-wrap: break-word;
  word-break: normal;
}

.main-page-contents .masspay-line__amount {
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary-blue);
  text-align: right;
  white-space: nowrap;
}

.main-page-contents .masspay-empty {
  padding: 48px 24px;
  text-align: center;
  font-size: 15px;
  color: #6b7280;
  background: rgba(0, 102, 247, 0.04);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
}

.main-page-contents .masspay-summary {
  background: linear-gradient(180deg, #353535 0%, #1e1e1e 100%);
  box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 25px;
  padding: 28px 24px 24px;
  color: #fff;
  position: sticky;
  top: 24px;
}

.main-page-contents .masspay-summary__title {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}

.main-page-contents .masspay-summary__rows {
  margin: 0 0 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.main-page-contents .masspay-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 14px;
}

.main-page-contents .masspay-summary__row:last-child {
  margin-bottom: 0;
}

.main-page-contents .masspay-summary__row dt {
  margin: 0;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
}

.main-page-contents .masspay-summary__row dd {
  margin: 0;
  font-weight: 600;
  color: #fff;
  text-align: right;
}

.main-page-contents .masspay-summary__due {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
}

.main-page-contents .masspay-summary__due-label {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 8px;
}

.main-page-contents .masspay-summary__due-amt {
  display: block;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.main-page-contents .masspay-summary .masspay-payment__inner {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.main-page-contents .masspay-summary .masspay-payment__title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  text-align: left;
}

.main-page-contents .masspay-payment__field {
  margin-bottom: 0;
}

.main-page-contents .masspay-summary .masspay-payment__label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
}

.main-page-contents .masspay-gateway-wrap {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.main-page-contents .masspay-summary select.custom-select.invoice-gateway-select {
  width: 100%;
  height: 44px;
  min-width: 0;
  max-width: 100%;
  padding: 10px 42px 10px 18px;
  background-color: rgba(0, 102, 247, 0.06);
  border: 2px solid rgba(0, 102, 247, 0.35);
  box-shadow: 0px 4px 16px rgba(0, 102, 247, 0.12);
  border-radius: 29px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary-blue, #0066f7);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("../img/select-chevron.svg");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}

.main-page-contents .masspay-summary select.custom-select.invoice-gateway-select:focus {
  outline: none;
  border-color: var(--color-primary-blue, #0066f7);
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.18), 0px 4px 16px rgba(0, 102, 247, 0.12);
}

.main-page-contents .masspay-summary .nice-select.invoice-gateway-select {
  float: none;
  display: block;
  width: 100%;
  height: 44px;
  line-height: 44px;
  min-width: 0;
  max-width: 100%;
  padding: 0 42px 0 18px;
  background: #fff;
  border: 2px solid rgba(0, 102, 247, 0.35) !important;
  box-shadow: 0px 4px 16px rgba(0, 102, 247, 0.12);
  border-radius: 29px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.main-page-contents .masspay-summary .nice-select.invoice-gateway-select:hover {
  border-color: rgba(0, 102, 247, 0.55) !important;
}

.main-page-contents .masspay-summary .nice-select.invoice-gateway-select.open,
.main-page-contents .masspay-summary .nice-select.invoice-gateway-select:focus {
  border-color: var(--color-primary-blue, #0066f7) !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.18), 0px 6px 20px rgba(0, 102, 247, 0.14);
}

.main-page-contents .masspay-summary .nice-select.invoice-gateway-select .current {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary-blue, #0066f7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-page-contents .masspay-summary .nice-select.invoice-gateway-select:after {
  border: none;
  width: 24px;
  height: 24px;
  right: 12px;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
  background: var(--color-primary-blue, #0066f7);
  mask: url("../img/select-chevron.svg") center/12px no-repeat;
  -webkit-mask: url("../img/select-chevron.svg") center/12px no-repeat;
}

.main-page-contents .masspay-summary .nice-select.invoice-gateway-select.open:after {
  transform: translateY(-50%) rotate(180deg);
}

.main-page-contents .masspay-summary .nice-select.invoice-gateway-select .list {
  margin-top: 8px;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.12);
  box-shadow: 0px 12px 32px rgba(0, 51, 153, 0.14), 0px 4px 16px rgba(15, 15, 15, 0.08);
  border-radius: 16px;
  width: max-content;
  min-width: 100%;
  max-width: 360px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 100;
}

.main-page-contents .masspay-summary .nice-select.invoice-gateway-select .list .option {
  min-height: 40px;
  line-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-neutral-black, #13151c);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.main-page-contents .masspay-summary .nice-select.invoice-gateway-select .list .option:hover,
.main-page-contents .masspay-summary .nice-select.invoice-gateway-select .list .option.focus {
  background: rgba(0, 102, 247, 0.08);
  color: var(--color-primary-blue, #0066f7);
}

.main-page-contents .masspay-summary .nice-select.invoice-gateway-select .list .option.selected {
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  color: #fff;
  font-weight: 600;
}

.main-page-contents .masspay-summary .nice-select.invoice-gateway-select .list .option.selected.focus,
.main-page-contents .masspay-summary .nice-select.invoice-gateway-select .list .option.selected:hover {
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  color: #fff;
}

.main-page-contents .masspay-summary .masspay-payment__submit.button {
  width: 100%;
  min-width: 0;
  margin-top: 24px;
}

@media (max-width: 991.98px) {
  .main-page-contents .masspay-summary {
    position: static;
    margin-top: 8px;
  }

  .main-page-contents .masspay-sidebar {
    order: 2;
  }

  .main-page-contents .masspay-invoices-col {
    order: 1;
  }
}

@media (max-width: 575.98px) {
  .main-page-contents .masspay-hero,
  .main-page-contents .addfunds-page .masspay-hero {
    padding-bottom: 20px;
  }

  .main-page-contents .masspay-line {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .main-page-contents .masspay-line__amount {
    text-align: left;
    font-size: 16px;
  }

  .main-page-contents .masspay-invoice-card__head,
  .main-page-contents .masspay-line {
    padding-left: 18px;
    padding-right: 18px;
  }

  .main-page-contents .masspay-summary__due-amt {
    font-size: 28px;
  }
}

/* --------------------------------------------------------------------------
   Add funds page (clientarea.php?action=addfunds) — shared masspay billing UI
   -------------------------------------------------------------------------- */

.main-page-contents .addfunds-page .addfunds-alert {
  margin-bottom: 24px;
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid rgba(246, 75, 75, 0.2);
  background: rgba(246, 75, 75, 0.08);
  color: var(--color-neutral-black, #13151c);
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0px 4px 16px rgba(246, 75, 75, 0.08);
}

.main-page-contents .addfunds-page .addfunds-alert ul {
  margin: 8px 0 0;
  padding-left: 1.2rem;
  text-align: left;
}

.main-page-contents .addfunds-main-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.main-page-contents .addfunds-limits-card__body {
  padding: 8px 24px 20px;
}

.main-page-contents .addfunds-limits__rows {
  margin: 0;
  padding: 0;
}

.main-page-contents .addfunds-limits__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 102, 247, 0.08);
  font-size: 14px;
}

.main-page-contents .addfunds-limits__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.main-page-contents .addfunds-limits__row dt {
  margin: 0;
  font-weight: 500;
  color: #6b7280;
}

.main-page-contents .addfunds-limits__row dd {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary-blue);
  text-align: right;
}

.main-page-contents .addfunds-page .masspay-summary .masspay-summary__title {
  margin-bottom: 0;
}

.main-page-contents .addfunds-page .masspay-summary .addfunds-form__inner.masspay-payment__inner {
  margin-top: 16px;
  padding-top: 0;
  border-top: none;
}

.main-page-contents .addfunds-page .addfunds-amount-input.form-control {
  width: 100%;
  height: 44px;
  padding: 10px 18px;
  background: #fff;
  border: 2px solid rgba(0, 102, 247, 0.35);
  box-shadow: 0px 4px 16px rgba(0, 102, 247, 0.12);
  border-radius: 29px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary-blue, #0066f7);
}

.main-page-contents .addfunds-page .addfunds-amount-input.form-control:focus {
  outline: none;
  border-color: var(--color-primary-blue, #0066f7);
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.18), 0px 4px 16px rgba(0, 102, 247, 0.12);
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .addfunds-page .masspay-payment__field + .masspay-payment__field {
  margin-top: 16px;
}

.main-page-contents .addfunds-page .addfunds-form__note {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

@media (max-width: 991.98px) {
  .main-page-contents .addfunds-page .masspay-sidebar {
    order: 2;
  }

  .main-page-contents .addfunds-page .addfunds-main-col {
    order: 1;
  }
}

@media (max-width: 575.98px) {
  .main-page-contents .addfunds-limits-card__body {
    padding-left: 18px;
    padding-right: 18px;
  }

  .main-page-contents .addfunds-limits__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .main-page-contents .addfunds-limits__row dd {
    text-align: left;
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   Service details (clientarea.php?action=productdetails) — ForceVPS cart UI
   -------------------------------------------------------------------------- */

.main-page-contents .service-details-page {
  margin-top: 8px;
}

.main-page-contents .service-details-alert {
  margin-bottom: 20px;
  border-radius: 16px;
  border: 1px solid rgba(0, 102, 247, 0.12);
}

.main-page-contents .service-details-hero {
  padding: 8px 0 28px;
  text-align: center;
}

.main-page-contents .service-details-hero__inner {
  max-width: 720px;
  margin-inline: auto;
}

.main-page-contents .service-details-hero__eyebrow {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-blue);
}

.main-page-contents .service-details-hero__title {
  margin: 0;
}

.main-page-contents .service-details-overview {
  margin-bottom: 28px;
}

.main-page-contents .service-details-overview__row {
  align-items: flex-start;
}

.main-page-contents .service-details-overview__col {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.main-page-contents .service-details-product-card {
  width: 100%;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
  overflow: hidden;
}

.main-page-contents .service-details-product-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  color: #fff;
}

.main-page-contents .service-details-product-card__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.main-page-contents .service-details-product-card__icon .fa-stack {
  width: 2em;
  height: 2em;
  line-height: 2em;
  font-size: 1.25rem;
  position: relative;
  display: inline-block;
}

.main-page-contents .service-details-product-card__icon .fa-stack-2x {
  font-size: 2em;
  line-height: inherit;
}

.main-page-contents .service-details-product-card__icon .fa-stack-1x {
  line-height: inherit;
}

.main-page-contents .service-details-product-card__icon .fa-circle {
  color: rgba(255, 255, 255, 0.35);
}

.main-page-contents .service-details-product-card__icon .fa-inverse {
  color: #fff;
}

.main-page-contents .service-details-product-card__titles {
  flex: 1;
  min-width: 0;
}

.main-page-contents .service-details-product-card__name {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

.main-page-contents .service-details-product-card__group {
  margin: 0 0 10px;
  font-size: 13px;
  opacity: 0.85;
  color: #fff;
}

.main-page-contents .service-details-product-card__head .service-details-status {
  margin-top: 2px;
}

.main-page-contents .service-details-product-card__head .service-details-status--pending {
  background: rgba(255, 255, 255, 0.18);
  color: #ffe8b8;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.main-page-contents .service-details-product-card__head .service-details-status--active {
  background: rgba(255, 255, 255, 0.18);
  color: #c8ffb8;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.main-page-contents .service-details-product-card__head .service-details-status--suspended,
.main-page-contents .service-details-product-card__head .service-details-status--terminated,
.main-page-contents .service-details-product-card__head .service-details-status--cancelled,
.main-page-contents .service-details-product-card__head .service-details-status--fraud {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.main-page-contents .service-details-product-card__body {
  padding: 16px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.main-page-contents .service-details-product-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.main-page-contents .service-details-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 44px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.main-page-contents .service-details-status--active {
  background: rgba(18, 179, 0, 0.12);
  color: var(--color-status-green, #12b300);
}

.main-page-contents .service-details-status--pending {
  background: rgba(248, 148, 6, 0.15);
  color: #c97706;
}

.main-page-contents .service-details-status--suspended {
  background: rgba(0, 102, 247, 0.12);
  color: var(--color-primary-blue);
}

.main-page-contents .service-details-status--terminated,
.main-page-contents .service-details-status--cancelled {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}

.main-page-contents .service-details-status--fraud {
  background: rgba(246, 75, 75, 0.12);
  color: #d63b3b;
}

.main-page-contents .service-details-billing {
  flex: 1;
  background: linear-gradient(180deg, #353535 0%, #1e1e1e 100%);
  box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 25px;
  padding: 28px 24px 24px;
  color: #fff;
}

.main-page-contents .service-details-billing__title {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}

.main-page-contents .service-details-billing__rows {
  margin: 0;
  padding: 0;
}

.main-page-contents .service-details-billing__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
}

.main-page-contents .service-details-billing__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.main-page-contents .service-details-billing__row dt {
  margin: 0;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
}

.main-page-contents .service-details-billing__row dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  color: #fff;
}

.main-page-contents .service-details-billing__row--highlight dd {
  font-size: 20px;
  background: linear-gradient(180deg, #fff 0%, #b8d4ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.main-page-contents .service-details-hook {
  margin-bottom: 20px;
}

.main-page-contents .service-details-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 0;
  padding: 0;
  list-style: none;
  border: none;
}

.main-page-contents .service-details-tabs .nav-item {
  margin: 0;
}

.main-page-contents .service-details-tabs__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 44px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  background: rgba(0, 102, 247, 0.04);
  border: 1px solid rgba(0, 102, 247, 0.08);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.main-page-contents .service-details-tabs__link:hover {
  color: var(--color-primary-blue);
  border-color: rgba(0, 102, 247, 0.2);
  background: rgba(0, 102, 247, 0.08);
  text-decoration: none;
}

.main-page-contents .service-details-tabs__link.active {
  color: #fff;
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  border-color: transparent;
  box-shadow: 0px 4px 12px rgba(0, 102, 247, 0.25);
}

.main-page-contents .service-details-tabs__link .feather {
  font-size: 16px;
  line-height: 1;
}

.main-page-contents .service-details-panel {
  margin-top: 20px;
  padding: 24px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
}

.main-page-contents .service-details-panel .tab-pane {
  text-align: left;
}

.main-page-contents .service-details-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.main-page-contents .service-details-page .cart-item-domain {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 8px 14px;
  border-radius: 44px;
  background: rgba(0, 102, 247, 0.08);
  border: 1px solid rgba(0, 102, 247, 0.12);
  color: var(--color-primary-blue);
  font-size: 14px;
  font-weight: 500;
}

.main-page-contents .service-details-page .cart-item-config-wrap {
  width: 100%;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.main-page-contents .service-details-page .cart-item-config {
  list-style: none;
  margin: 0;
  padding: 16px 18px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06);
  border-radius: 16px;
  border: 1px solid rgba(0, 102, 247, 0.06);
  box-sizing: border-box;
}

.main-page-contents .service-details-page .cart-item-config__row {
  display: grid;
  grid-template-columns: minmax(130px, 220px) minmax(0, 1fr);
  align-items: start;
  gap: 12px 24px;
  padding-left: 22px;
  position: relative;
  font-size: 13px;
  line-height: 1.45;
}

.main-page-contents .service-details-page .cart-item-config__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 14px;
  height: 14px;
  background: var(--color-status-green, #12b300);
  mask: url("../img/icons/check.svg") center / contain no-repeat;
  -webkit-mask: url("../img/icons/check.svg") center / contain no-repeat;
}

.main-page-contents .service-details-page .cart-item-config__label {
  font-weight: 500;
  color: #6b7280;
}

.main-page-contents .service-details-page .cart-item-config__value {
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
  overflow-wrap: break-word;
  word-break: normal;
}

.main-page-contents .service-details-page .product-details,
.main-page-contents .service-details-page .product-status,
.main-page-contents .service-details-page .responsive-tabs-sm,
.main-page-contents .service-details-page .responsive-tabs-sm-connector,
.main-page-contents .service-details-page .product-details-tab-container.bg-white {
  display: none !important;
}

.main-page-contents .service-details-section-head {
  padding: 8px 0 24px;
  text-align: center;
}

.main-page-contents .service-details-section-head__title {
  margin: 0;
}

.main-page-contents .service-details-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
  overflow: hidden;
}

.main-page-contents .service-details-card__body {
  padding: 28px 24px;
}

.main-page-contents .service-details-card__title {
  margin: 0 0 24px;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .service-details-password-form .col-form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .service-details-password-form input.form-control {
  height: 36px;
  border-radius: 29px;
  border: 1px solid rgba(0, 102, 247, 0.18);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  font-weight: 500;
}

.main-page-contents .service-details-password-form input.form-control:focus {
  outline: none;
  border-color: rgba(0, 102, 247, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.12),
    0px 4px 16px rgba(0, 51, 153, 0.08);
}

.main-page-contents .service-details-password-form__actions {
  margin-top: 8px;
}

.main-page-contents .service-details-download-card,
.main-page-contents .service-details-addon-card {
  margin-bottom: 20px;
  padding: 24px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
}

.main-page-contents .service-details-addon-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 102, 247, 0.08);
}

.main-page-contents .service-details-addon-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.main-page-contents .service-details-addon-card__body p {
  margin: 0 0 8px;
  font-size: 14px;
  color: #6b7280;
}

.main-page-contents .service-details-addon-card__footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 102, 247, 0.08);
}

.main-page-contents .service-details-page .button--danger {
  border-color: rgba(246, 75, 75, 0.35);
  color: #d63b3b;
}

.main-page-contents .service-details-page .button--danger:hover {
  background: rgba(246, 75, 75, 0.08);
  border-color: rgba(246, 75, 75, 0.5);
  color: #d63b3b;
}

@media (max-width: 991.98px) {
  .main-page-contents .service-details-overview__col {
    margin-bottom: 16px;
  }
}

@media (max-width: 575.98px) {
  .main-page-contents .service-details-billing {
    padding: 22px 18px;
  }

  .main-page-contents .service-details-billing__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .main-page-contents .service-details-billing__row dd {
    text-align: left;
    font-size: 16px;
  }

  .main-page-contents .service-details-panel {
    padding: 18px 16px;
  }

  .main-page-contents .service-details-page .cart-item-config__row {
    grid-template-columns: 1fr;
    padding-left: 22px;
  }

  .main-page-contents .service-details-tabs__link {
    font-size: 13px;
    padding: 8px 14px;
  }
}

/* --------------------------------------------------------------------------
   Support ticket — department selection (submitticket.php step 1)
   -------------------------------------------------------------------------- */

.main-page-contents .support-ticket-page {
  margin-top: 8px;
}

.main-page-contents .support-ticket-hero {
  padding: 8px 0 32px;
  text-align: center;
}

.main-page-contents .support-ticket-hero__inner {
  max-width: 720px;
  margin-inline: auto;
}

.main-page-contents .support-ticket-hero__eyebrow {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-blue);
}

.main-page-contents .support-ticket-hero__title {
  margin: 0 0 16px;
}

.main-page-contents .support-ticket-hero__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #6b7280;
  max-width: 640px;
  margin-inline: auto;
}

.main-page-contents .support-dept-grid {
  margin: 0 -10px 8px;
  row-gap: 20px;
}

.main-page-contents .support-dept-grid > [class*="col-"] {
  padding-left: 10px;
  padding-right: 10px;
}

.main-page-contents .support-dept-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  min-height: 100%;
  padding: 24px 26px 22px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.main-page-contents .support-dept-card:hover,
.main-page-contents .support-dept-card:focus {
  color: inherit;
  text-decoration: none;
  border-color: rgba(0, 102, 247, 0.22);
  box-shadow: 0px 8px 28px rgba(0, 102, 247, 0.14);
  transform: translateY(-2px);
}

.main-page-contents .support-dept-card:focus-visible {
  outline: 2px solid var(--color-primary-blue);
  outline-offset: 3px;
}

.main-page-contents .support-dept-card__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: rgba(0, 102, 247, 0.08);
  color: var(--color-primary-blue);
}

.main-page-contents .support-dept-card__icon .feather {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 22px;
  line-height: 1;
}

.main-page-contents .support-dept-card__icon .feather::before {
  display: block;
  line-height: 1;
}

.main-page-contents .support-dept-card__title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-neutral-black, #1e1e1e);
}

.main-page-contents .support-dept-card__desc {
  margin: 0 0 20px;
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.55;
  color: #6b7280;
  overflow-wrap: break-word;
  word-break: normal;
}

.main-page-contents .support-dept-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-blue);
}

.main-page-contents .support-dept-card__cta::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask: url("../img/icons/arrow.svg") center / contain no-repeat;
  -webkit-mask: url("../img/icons/arrow.svg") center / contain no-repeat;
  transition: transform 0.2s ease;
}

.main-page-contents .support-dept-card:hover .support-dept-card__cta::after {
  transform: translateX(3px);
}

@media (max-width: 767.98px) {
  .main-page-contents .support-dept-grid > [class*="col-"] + [class*="col-"] {
    margin-top: 4px;
  }
}

/* Support ticket — submit form (submitticket.php step 2) */

.main-page-contents .support-ticket-page--form .support-ticket-hero {
  padding-bottom: 24px;
}

.main-page-contents .support-ticket-alert {
  margin-bottom: 20px;
}

.main-page-contents .support-ticket-form-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
  overflow: visible;
}

.main-page-contents .support-ticket-form-card__body {
  padding: 28px 28px 8px;
}

.main-page-contents .support-ticket-form__row {
  margin-bottom: 0;
}

.main-page-contents .support-ticket-page--form .form-group {
  margin-bottom: 20px;
  overflow: visible;
}

.main-page-contents .support-ticket-form__label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .support-ticket-page--form input.form-control,
.main-page-contents .support-ticket-page--form select.form-control {
  width: 100%;
  height: 36px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.18);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  border-radius: 29px;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 16px;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .support-ticket-page--form input.form-control:hover,
.main-page-contents .support-ticket-page--form select.form-control:hover {
  border-color: rgba(0, 102, 247, 0.28);
}

.main-page-contents .support-ticket-page--form input.form-control:focus,
.main-page-contents .support-ticket-page--form select.form-control:focus {
  outline: none;
  border-color: rgba(0, 102, 247, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.12),
    0px 4px 16px rgba(0, 51, 153, 0.08);
}

.main-page-contents .support-ticket-page--form input.form-control:disabled,
.main-page-contents .support-ticket-page--form select.form-control:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.main-page-contents .support-ticket-page--form select.form-control:has(+ .nice-select) {
  display: none !important;
}

.main-page-contents .support-ticket-page--form .nice-select.form-control {
  float: none;
  width: 100%;
  height: 36px;
  line-height: 34px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.18);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  border-radius: 29px;
  padding-left: 42px;
  padding-right: 36px;
  position: relative;
  z-index: 1;
}

.main-page-contents .support-ticket-page--form .nice-select.form-control.open {
  z-index: 20;
}

.main-page-contents .support-ticket-page--form .nice-select.form-control:hover {
  border-color: rgba(0, 102, 247, 0.28);
}

.main-page-contents .support-ticket-page--form .nice-select.form-control.open,
.main-page-contents .support-ticket-page--form .nice-select.form-control:focus {
  border-color: rgba(0, 102, 247, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.12),
    0px 4px 16px rgba(0, 51, 153, 0.08);
}

.main-page-contents .support-ticket-page--form .nice-select.form-control::after {
  right: 8px;
  width: 24px;
  height: 24px;
  top: 50%;
  margin-top: 0;
  border: none;
  background: var(--color-primary-blue);
  mask: url("../img/select-chevron.svg") center/10px no-repeat;
  -webkit-mask: url("../img/select-chevron.svg") center/10px no-repeat;
  transform: translateY(-50%) rotate(0deg);
}

.main-page-contents .support-ticket-page--form .nice-select.form-control.open::after {
  transform: translateY(-50%) rotate(180deg);
}

.main-page-contents .support-ticket-page--form .nice-select.form-control .current {
  display: block;
  line-height: 34px;
  font-weight: 500;
  font-size: 16px;
  color: var(--color-neutral-black, #13151c);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-page-contents .support-ticket-page--form .nice-select.form-control .list {
  width: max-content;
  min-width: 100%;
  max-width: min(560px, calc(100vw - 48px));
  white-space: normal;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: min(320px, 50vh);
  margin-top: 6px;
  border-radius: 16px;
  border: 1px solid rgba(0, 102, 247, 0.12);
  box-shadow: 0px 8px 28px rgba(0, 102, 247, 0.14);
  z-index: 30;
}

.main-page-contents .support-ticket-page--form .nice-select.form-control .option {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.4;
  min-height: 40px;
  height: auto;
  padding: 10px 36px 10px 18px;
}

.main-page-contents .support-ticket-page--form .nice-select.form-control .option:hover,
.main-page-contents .support-ticket-page--form .nice-select.form-control .option.focus,
.main-page-contents .support-ticket-page--form .nice-select.form-control .option.selected.focus {
  background: rgba(0, 102, 247, 0.08);
}

.main-page-contents .support-ticket-page--form .nice-select.form-control .option.selected {
  font-weight: 600;
  color: var(--color-primary-blue);
}

/* Markdown editor (support tickets, ticket reply) */
.main-page-contents .md-editor {
  border-radius: 20px;
  border: 1px solid rgba(0, 102, 247, 0.18) !important;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  overflow: hidden;
  background: #fff;
}

.main-page-contents .md-editor.active {
  border-color: rgba(0, 102, 247, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.12),
    0px 4px 16px rgba(0, 51, 153, 0.08);
}

.main-page-contents .md-editor > .md-header,
.main-page-contents .md-editor .md-header.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  float: none;
  margin: 0;
  padding: 12px 14px;
  background: linear-gradient(
    180deg,
    rgba(0, 102, 247, 0.07) 0%,
    rgba(0, 102, 247, 0.02) 100%
  );
  border-bottom: 1px solid rgba(0, 102, 247, 0.1);
}

.main-page-contents .md-editor .md-header .btn-toolbar {
  display: contents;
}

.main-page-contents .md-editor .md-header .btn-group {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  vertical-align: middle;
}

.main-page-contents .md-editor .md-header .btn-group + .btn-group::before {
  content: "";
  display: block;
  width: 1px;
  height: 22px;
  margin: 0 2px;
  background: rgba(0, 102, 247, 0.14);
  flex-shrink: 0;
}

.main-page-contents .md-editor .md-header .btn-group .btn {
  float: none;
  margin: 0 !important;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 102, 247, 0.14) !important;
  background: #fff !important;
  color: var(--color-neutral-black, #13151c) !important;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 102, 247, 0.06);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease,
    box-shadow 0.2s ease, transform 0.15s ease;
}

.main-page-contents .md-editor .md-header .btn-group .btn span {
  font-size: 14px;
  line-height: 1;
}

.main-page-contents .md-editor .md-header .btn-group .btn:hover,
.main-page-contents .md-editor .md-header .btn-group .btn:focus {
  border-color: rgba(0, 102, 247, 0.35) !important;
  background: rgba(0, 102, 247, 0.06) !important;
  color: var(--color-primary-blue) !important;
  box-shadow: 0 4px 12px rgba(0, 102, 247, 0.12);
  transform: translateY(-1px);
}

.main-page-contents .md-editor .md-header .btn-group .btn.active,
.main-page-contents .md-editor .md-header .btn-group .btn:active {
  border-color: var(--color-primary-blue) !important;
  background: rgba(0, 102, 247, 0.12) !important;
  color: var(--color-primary-blue) !important;
  box-shadow: inset 0 1px 2px rgba(0, 102, 247, 0.1);
  transform: none;
}

.main-page-contents .md-editor .md-header .btn-group .btn.btn-primary {
  width: auto;
  min-width: auto;
  height: 36px;
  padding: 0 16px;
  gap: 8px;
  border-radius: 44px !important;
  border: none !important;
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(0, 102, 247, 0.28);
}

.main-page-contents .md-editor .md-header .btn-group .btn.btn-primary:hover,
.main-page-contents .md-editor .md-header .btn-group .btn.btn-primary:focus,
.main-page-contents .md-editor .md-header .btn-group .btn.btn-primary.active {
  color: #fff !important;
  background: linear-gradient(180deg, #1a75f8 0%, #0049a8 100%) !important;
  box-shadow: 0 6px 18px rgba(0, 102, 247, 0.35);
  transform: translateY(-1px);
}

.main-page-contents .md-editor .md-controls {
  float: none;
  order: 10;
  margin-left: auto;
  padding: 0;
  display: flex;
  align-items: center;
}

.main-page-contents .md-editor .md-controls .md-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(0, 102, 247, 0.14);
  background: #fff;
  color: #6b7280;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 102, 247, 0.06);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.main-page-contents .md-editor .md-controls .md-control:hover {
  border-color: rgba(0, 102, 247, 0.35);
  background: rgba(0, 102, 247, 0.06);
  color: var(--color-primary-blue);
  text-decoration: none;
}

.main-page-contents .md-editor .md-controls .md-control span {
  font-size: 14px;
  line-height: 1;
}

.main-page-contents .md-editor textarea.form-control,
.main-page-contents .md-editor > textarea {
  height: auto;
  min-height: 220px;
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
  background: #fff !important;
  padding: 16px 18px;
  resize: vertical;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .md-editor textarea.form-control:focus,
.main-page-contents .md-editor > textarea:focus {
  box-shadow: none !important;
  border: none !important;
  background: #fff !important;
}

.main-page-contents .md-editor > .md-preview {
  border-top: 1px solid rgba(0, 102, 247, 0.08);
  border-bottom: 1px solid rgba(0, 102, 247, 0.08);
  padding: 16px 18px;
  background: rgba(0, 102, 247, 0.02);
}

.main-page-contents .md-editor .md-footer {
  padding: 10px 14px 12px;
  background: rgba(0, 102, 247, 0.03);
  border-top: 1px solid rgba(0, 102, 247, 0.08);
}

.main-page-contents .md-editor .markdown-editor-status,
.main-page-contents .md-editor .markdown-editor-status .small-font {
  color: #6b7280;
  font-size: 12px;
}

@media (max-width: 575.98px) {
  .main-page-contents .md-editor > .md-header,
  .main-page-contents .md-editor .md-header.btn-toolbar {
    padding: 10px;
    gap: 6px 8px;
  }

  .main-page-contents .md-editor .md-header .btn-group + .btn-group::before {
    display: none;
  }

  .main-page-contents .md-editor .md-controls {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }
}

.main-page-contents .support-ticket-form__attachments {
  padding: 20px 24px 32px;
  border-radius: 20px;
  background: rgba(0, 102, 247, 0.04);
  border: 1px solid rgba(0, 102, 247, 0.08);
}

.main-page-contents .support-ticket-form__attachments-list {
  display: flex;
  flex-direction: column;
}

.main-page-contents #fileUploadsContainer:not(:empty) {
  display: flex;
  flex-direction: column;
}

.main-page-contents .support-ticket-attachment__row,
.main-page-contents #fileUploadsContainer .support-ticket-attachment__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 8px;
}

.main-page-contents .support-ticket-attachment__file.custom-file {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  display: block;
}

.main-page-contents .support-ticket-attachment__file .custom-file-input {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.main-page-contents .support-ticket-attachment__label.custom-file-label {
  position: relative;
  inset: auto;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 4px 4px 4px 14px;
  border-radius: 29px;
  border: 1px solid rgba(0, 102, 247, 0.18);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  background: #fff;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.main-page-contents .support-ticket-attachment__label.custom-file-label::after {
  display: none !important;
  content: none !important;
}

.main-page-contents .support-ticket-attachment__file .custom-file-input:focus ~ .custom-file-label,
.main-page-contents .support-ticket-attachment__label:hover {
  border-color: rgba(0, 102, 247, 0.35);
  box-shadow: 0 4px 12px rgba(0, 102, 247, 0.12);
}

.main-page-contents .support-ticket-attachment__file .custom-file-input:focus ~ .custom-file-label {
  border-color: rgba(0, 102, 247, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.12),
    0px 4px 16px rgba(0, 51, 153, 0.08);
}

.main-page-contents .support-ticket-attachment__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 102, 247, 0.08);
  color: var(--color-primary-blue);
}

.main-page-contents .support-ticket-attachment__icon .feather {
  width: 16px;
  height: 16px;
}

.main-page-contents .support-ticket-attachment__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1.3;
  color: #6b7280;
}

.main-page-contents .support-ticket-attachment__label.has-file .support-ticket-attachment__name {
  color: var(--color-neutral-black, #13151c);
  font-weight: 500;
}

.main-page-contents .support-ticket-attachment__browse {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 18px;
  border-radius: 44px;
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 102, 247, 0.22);
  pointer-events: none;
}

.main-page-contents .support-ticket-attachment__add.button {
  flex-shrink: 0;
  align-self: center;
  white-space: nowrap;
  min-width: auto;
  height: 44px;
  padding: 0 14px;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  border-radius: 29px;
  box-shadow: 0 2px 8px rgba(0, 102, 247, 0.08);
}

.main-page-contents .support-ticket-attachment__add.button i {
  font-size: 12px;
}

.main-page-contents .support-ticket-form__hint {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #6b7280;
}

.main-page-contents .support-ticket-form__attachments .support-ticket-form__hint {
  margin-bottom: 4px;
}

.main-page-contents .support-ticket-form__hint small {
  font-size: inherit;
}

.main-page-contents .support-ticket-form__custom {
  margin-top: 4px;
}

.main-page-contents .support-ticket-form__custom .form-control {
  width: 100%;
  height: 36px;
  border-radius: 29px;
  border: 1px solid rgba(0, 102, 247, 0.18);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08);
}

.main-page-contents .support-ticket-form__captcha {
  margin: 8px 0 4px;
}

.main-page-contents .support-ticket-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  padding: 24px 28px 32px;
  border-top: 1px solid rgba(0, 102, 247, 0.08);
}

.main-page-contents .support-ticket-form__actions .button {
  min-width: 180px;
}

@media (max-width: 767.98px) {
  .main-page-contents .support-ticket-form-card__body {
    padding-left: 18px;
    padding-right: 18px;
  }

  .main-page-contents .support-ticket-form__actions {
    flex-direction: column;
    padding-left: 18px;
    padding-right: 18px;
  }

  .main-page-contents .support-ticket-form__actions .button {
    width: 100%;
    min-width: 0;
  }

  .main-page-contents .support-ticket-attachment__row {
    flex-wrap: wrap;
  }

  .main-page-contents .support-ticket-attachment__add {
    width: 100%;
    justify-content: center;
  }
}

/* Support ticket — confirmation (submitticket.php success) */

.main-page-contents .support-ticket-page--confirm .support-ticket-hero {
  padding-bottom: 24px;
}

.main-page-contents .support-ticket-confirm-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
  overflow: visible;
}

.main-page-contents .support-ticket-confirm-card__body {
  padding: 32px 28px;
  text-align: center;
}

.main-page-contents .support-ticket-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 24px 20px;
  border-radius: 16px;
  background: rgba(18, 179, 0, 0.06);
  border: 1px solid rgba(18, 179, 0, 0.15);
}

.main-page-contents .support-ticket-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-status-green, #12b300);
}

.main-page-contents .support-ticket-success__icon::before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  background: #fff;
  mask: url("../img/icons/check.svg") center / contain no-repeat;
  -webkit-mask: url("../img/icons/check.svg") center / contain no-repeat;
}

.main-page-contents .support-ticket-success__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-neutral-black, #1e1e1e);
}

.main-page-contents .support-ticket-success__ticket {
  color: var(--color-primary-blue);
  text-decoration: none;
  font-weight: 700;
}

.main-page-contents .support-ticket-success__ticket:hover {
  text-decoration: underline;
}

.main-page-contents .support-ticket-confirm-card__desc {
  margin: 0 auto 28px;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.55;
  color: #6b7280;
}

.main-page-contents .support-ticket-confirm-card__actions {
  display: flex;
  justify-content: center;
}

.main-page-contents .support-ticket-confirm-card__actions .button {
  min-width: 200px;
}

@media (max-width: 575.98px) {
  .main-page-contents .support-ticket-confirm-card__body {
    padding: 24px 20px;
  }

  .main-page-contents .support-ticket-confirm-card__actions .button {
    width: 100%;
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   View ticket page (viewticket.php)
   -------------------------------------------------------------------------- */

.main-page-contents .view-ticket-page {
  margin-top: 8px;
}

.main-page-contents .view-ticket-alert {
  margin-bottom: 20px;
}

.main-page-contents .view-ticket-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-bottom: 28px;
}

.main-page-contents .view-ticket-hero__subject {
  margin-bottom: 0;
}

.main-page-contents .view-ticket-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
}

.main-page-contents .view-ticket-hero__close {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.2);
}

.main-page-contents .view-ticket-hero__close:hover {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.06);
}

.main-page-contents .view-ticket-thread {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.main-page-contents .view-ticket-reply {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
  overflow: hidden;
}

.main-page-contents .view-ticket-reply--staff {
  border-color: rgba(0, 102, 247, 0.18);
}

.main-page-contents .view-ticket-reply__meta {
  margin: 0;
  padding: 16px 20px;
  background: rgba(0, 102, 247, 0.04);
  border-bottom: 1px solid rgba(0, 102, 247, 0.08);
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
}

.main-page-contents .view-ticket-reply--staff .view-ticket-reply__meta {
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  border-bottom: none;
  color: rgba(255, 255, 255, 0.88);
}

.main-page-contents .view-ticket-reply__meta .posted-by-name {
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .view-ticket-reply--staff .view-ticket-reply__meta .posted-by-name,
.main-page-contents .view-ticket-reply--staff .view-ticket-reply__meta .posted-on {
  color: #fff;
}

.main-page-contents .view-ticket-reply__badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 102, 247, 0.1);
  color: var(--color-primary-blue);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  vertical-align: middle;
}

.main-page-contents .view-ticket-reply--staff .view-ticket-reply__badge {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.main-page-contents .view-ticket-reply__message {
  padding: 20px !important;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .view-ticket-reply__message p:last-child {
  margin-bottom: 0;
}

.main-page-contents .view-ticket-reply__divider {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid rgba(0, 102, 247, 0.1);
}

.main-page-contents .view-ticket-reply__ip {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

.main-page-contents .view-ticket-reply__rating {
  margin-top: 16px;
}

.main-page-contents .view-ticket-reply__attachments {
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(0, 102, 247, 0.08);
  background: rgba(0, 102, 247, 0.02);
}

.main-page-contents .view-ticket-reply__attachments-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .view-ticket-reply__attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-page-contents .view-ticket-reply__attachment-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 102, 247, 0.14);
  background: #fff;
  color: var(--color-neutral-black, #13151c);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.main-page-contents .view-ticket-reply__attachment-item:hover {
  color: var(--color-primary-blue);
  border-color: rgba(0, 102, 247, 0.35);
  box-shadow: 0 4px 12px rgba(0, 102, 247, 0.12);
  text-decoration: none;
  transform: translateY(-1px);
}

.main-page-contents .view-ticket-reply__attachment-item--removed {
  opacity: 0.65;
}

.main-page-contents .view-ticket-reply__attachment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 102, 247, 0.08);
  color: var(--color-primary-blue);
}

.main-page-contents .view-ticket-reply__attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
}

.main-page-contents .view-ticket-reply-card {
  margin-bottom: 8px;
}

.main-page-contents .view-ticket-reply-form__title {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .view-ticket-reply-form.support-ticket-page--form {
  margin: 0;
}

/* View ticket sidebar */
.viewticket-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 !important;
}

.viewticket-sidebar > div + div {
  padding-top: 20px;
  border-top: 1px solid rgba(0, 102, 247, 0.08);
}

.viewticket-sidebar .viewticket-sidebar__section {
  padding-bottom: 4px;
}

.viewticket-sidebar .viewticket-sidebar__section + .viewticket-sidebar__section {
  padding-top: 20px;
  border-top: 1px solid rgba(0, 102, 247, 0.08);
}

.viewticket-sidebar .viewticket-sidebar__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-neutral-black, #13151c);
}

.viewticket-sidebar .viewticket-sidebar__title i {
  color: var(--color-primary-blue);
  font-size: 15px;
}

.viewticket-sidebar .viewticket-sidebar__badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 102, 247, 0.1);
  color: var(--color-primary-blue);
  font-size: 11px;
  font-weight: 600;
}

.viewticket-sidebar .nav-link.list-group-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 10px 14px;
  border: 1px solid rgba(0, 102, 247, 0.1);
  border-radius: 14px;
  background: rgba(0, 102, 247, 0.04);
  color: var(--color-neutral-black, #13151c);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.viewticket-sidebar .nav-link.list-group-item:hover {
  background: rgba(0, 102, 247, 0.08);
  border-color: rgba(0, 102, 247, 0.22);
  color: var(--color-primary-blue);
  text-decoration: none;
}

.viewticket-sidebar .nav-link.list-group-item i {
  width: 18px;
  color: var(--color-primary-blue);
  text-align: center;
}

.viewticket-sidebar .nav-link.list-group-item:last-child {
  margin-bottom: 0;
}

.viewticket-sidebar .ticket-details-children {
  display: block;
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 102, 247, 0.1);
  border-radius: 14px;
  background: rgba(0, 102, 247, 0.03);
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-neutral-black, #13151c);
}

.viewticket-sidebar .ticket-details-children .title {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

.viewticket-sidebar .ticket-details-children .title + br {
  display: none;
}

.viewticket-sidebar .ticket-details-children .ticket-requestor-name {
  font-weight: 600;
}

.viewticket-sidebar .ticket-details-children .label,
.viewticket-sidebar .ticket-details-children .requestor-type-owner {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  margin-right: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 102, 247, 0.1) !important;
  color: var(--color-primary-blue) !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.viewticket-sidebar .ticket-cc-item:not(.w-hidden):not(.hidden) {
  display: block;
  margin: 0 0 8px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0, 102, 247, 0.1);
  background: rgba(0, 102, 247, 0.04);
  font-size: 14px;
}

.viewticket-sidebar .w-hidden,
.viewticket-sidebar .hidden {
  display: none !important;
}

.viewticket-sidebar .ticket-cc-email {
  display: flex;
  align-items: center;
  gap: 8px;
}

.viewticket-sidebar .ticket-cc-email .email {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: var(--color-neutral-black, #13151c);
}

.viewticket-sidebar .ticket-cc-email .delete-cc-email {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #dc2626;
  text-decoration: none;
  transition: background 0.2s ease;
}

.viewticket-sidebar .ticket-cc-email .delete-cc-email:hover {
  background: rgba(220, 38, 38, 0.08);
}

.viewticket-sidebar #frmAddCcEmail {
  position: relative;
  width: 100%;
  margin: 8px 0 0;
}

.viewticket-sidebar #frmAddCcEmail #inputAddCcEmail,
.viewticket-sidebar #frmAddCcEmail .input-email {
  width: 100%;
  height: 40px;
  padding: 8px 88px 8px 16px;
  border: 1px solid rgba(0, 102, 247, 0.18);
  border-radius: 29px;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-neutral-black, #13151c);
}

.viewticket-sidebar #frmAddCcEmail #inputAddCcEmail:focus {
  border-color: rgba(0, 102, 247, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.12),
    0px 4px 16px rgba(0, 51, 153, 0.08);
  outline: none;
}

.viewticket-sidebar #frmAddCcEmail .input-group-btn.input-group-append,
.viewticket-sidebar #frmAddCcEmail .input-group-append {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  z-index: 3;
}

.viewticket-sidebar #frmAddCcEmail .input-group-btn.input-group-append button.btn,
.viewticket-sidebar #frmAddCcEmail .input-group-append button.btn {
  min-width: auto;
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 29px;
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 102, 247, 0.24);
}

.viewticket-sidebar #frmAddCcEmail .input-group-btn.input-group-append button.btn:hover {
  background: linear-gradient(180deg, #1a75f8 0%, #0049a8 100%);
}

.viewticket-sidebar #divCcEmailFeedback:not(.hidden):not(.w-hidden):not(:empty) {
  display: block;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 12px;
}

.viewticket-sidebar #divCcEmailFeedback:empty,
.viewticket-sidebar #divCcEmailFeedback.hidden,
.viewticket-sidebar #divCcEmailFeedback.w-hidden {
  display: none !important;
  margin: 0;
  padding: 0;
  border: none;
}

.viewticket-sidebar .viewticket-sidebar__footer {
  margin: 14px 0 0 !important;
  padding: 0 !important;
}

.viewticket-sidebar .viewticket-sidebar__footer .row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.viewticket-sidebar .viewticket-sidebar__footer .col-6,
.viewticket-sidebar .viewticket-sidebar__footer .col-xs-6 {
  flex: 1 1 calc(50% - 5px);
  max-width: calc(50% - 5px);
  padding: 0;
}

.viewticket-sidebar .viewticket-sidebar__footer .btn {
  width: 100%;
  min-width: 0 !important;
  height: 40px;
  padding: 0 12px;
  border: none;
  border-radius: 29px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.viewticket-sidebar .viewticket-sidebar__footer .btn i {
  margin-right: 6px;
}

.viewticket-sidebar .viewticket-sidebar__footer .btn-success {
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 102, 247, 0.24);
}

.viewticket-sidebar .viewticket-sidebar__footer .btn-success:hover {
  background: linear-gradient(180deg, #1a75f8 0%, #0049a8 100%);
  color: #fff;
}

.viewticket-sidebar .viewticket-sidebar__footer .btn-danger {
  background: #fff;
  border: 1px solid rgba(220, 38, 38, 0.25) !important;
  color: #dc2626;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.08);
}

.viewticket-sidebar .viewticket-sidebar__footer .btn-danger:hover {
  background: rgba(220, 38, 38, 0.06);
  color: #dc2626;
}

.viewticket-sidebar .list-group-item.hidden {
  display: none !important;
}

@media (max-width: 767.98px) {
  .main-page-contents .view-ticket-hero__actions {
    width: 100%;
  }

  .main-page-contents .view-ticket-hero__actions .button {
    flex: 1 1 auto;
    min-width: 0;
  }

  .viewticket-sidebar .viewticket-sidebar__footer .col-6,
  .viewticket-sidebar .viewticket-sidebar__footer .col-xs-6 {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* ==========================================================================
   ForceVPS — nice-select: chevron + left icon when open (site-wide)
   Overrides nice-select.min.css .open:after { rotate(-135deg) } on mask chevrons
   ========================================================================== */

.nice-select.form-control:not(.arrow-2):not(.arrow-3):not(.invoice-gateway-select):after,
.nice-select.custom-select:not(.arrow-2):not(.arrow-3):not(.invoice-gateway-select):after,
.nice-select.field:not(.arrow-2):not(.arrow-3):after,
.prepend-icon > .nice-select:not(.arrow-2):not(.arrow-3):after,
.vps-filter .nice-select:not(.arrow-2):not(.arrow-3):after,
.vps-create-calculator__select .nice-select:not(.arrow-2):not(.arrow-3):after {
  border: none !important;
  border-bottom: 0 !important;
  border-right: 0 !important;
  content: "" !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  right: 8px !important;
  left: auto !important;
  top: 50% !important;
  margin-top: 0 !important;
  transform: translateY(-50%) rotate(0deg) !important;
  transform-origin: center center !important;
  -webkit-transform-origin: center center !important;
  background: var(--color-neutral-black, #13151c) !important;
  background-color: var(--color-neutral-black, #13151c) !important;
  mask: url("../img/select-chevron.svg") center/10px no-repeat !important;
  -webkit-mask: url("../img/select-chevron.svg") center/10px no-repeat !important;
}

.nice-select.form-control:not(.arrow-2):not(.arrow-3):not(.invoice-gateway-select).open:after,
.nice-select.form-control:not(.arrow-2):not(.arrow-3):not(.invoice-gateway-select):active:after,
.nice-select.form-control:not(.arrow-2):not(.arrow-3):not(.invoice-gateway-select):focus:after,
.nice-select.custom-select:not(.arrow-2):not(.arrow-3):not(.invoice-gateway-select).open:after,
.nice-select.custom-select:not(.arrow-2):not(.arrow-3):not(.invoice-gateway-select):active:after,
.nice-select.custom-select:not(.arrow-2):not(.arrow-3):not(.invoice-gateway-select):focus:after,
.nice-select.field:not(.arrow-2):not(.arrow-3).open:after,
.nice-select.field:not(.arrow-2):not(.arrow-3):active:after,
.nice-select.field:not(.arrow-2):not(.arrow-3):focus:after,
.prepend-icon > .nice-select:not(.arrow-2):not(.arrow-3).open:after,
.prepend-icon > .nice-select:not(.arrow-2):not(.arrow-3):active:after,
.prepend-icon > .nice-select:not(.arrow-2):not(.arrow-3):focus:after,
.vps-filter .nice-select:not(.arrow-2):not(.arrow-3).open:after,
.vps-filter .nice-select:not(.arrow-2):not(.arrow-3):active:after,
.vps-filter .nice-select:not(.arrow-2):not(.arrow-3):focus:after,
.vps-create-calculator__select .nice-select:not(.arrow-2):not(.arrow-3).open:after,
.vps-create-calculator__select .nice-select:not(.arrow-2):not(.arrow-3):active:after,
.vps-create-calculator__select .nice-select:not(.arrow-2):not(.arrow-3):focus:after {
  transform: translateY(-50%) rotate(180deg) !important;
  border: none !important;
  border-bottom: 0 !important;
  border-right: 0 !important;
}

/* Long dropdown labels: list wider than trigger, multiline options */
.nice-select.form-control .list,
.nice-select.custom-select .list,
.nice-select.field .list,
.prepend-icon > .nice-select .list,
.register-page .nice-select.form-control .list,
.register-page .nice-select.field.form-control .list,
#order-standard_cart .cart-checkout-panel .nice-select.form-control .list {
  width: max-content !important;
  min-width: 100%;
  max-width: min(560px, calc(100vw - 48px));
  white-space: normal;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: min(320px, 50vh);
  z-index: 30;
}

.nice-select.form-control .option,
.nice-select.custom-select .option,
.nice-select.field .option,
.prepend-icon > .nice-select .option,
.register-page .nice-select.form-control .option,
.register-page .nice-select.field.form-control .option,
#order-standard_cart .cart-checkout-panel .nice-select.form-control .option {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.4;
  min-height: 40px;
  height: auto;
  padding: 10px 36px 10px 18px;
}

/* Markdown guide modal (submitticket.php, viewticket.php) */
#modalAjax.modal-markdown-guide .modal-dialog {
  max-width: min(920px, calc(100vw - 32px));
}

#modalAjax.modal-markdown-guide .modal-content {
  border: 1px solid rgba(0, 102, 247, 0.12);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0, 51, 153, 0.18), 0 8px 24px rgba(15, 15, 15, 0.08);
  overflow: hidden;
}

#modalAjax.modal-markdown-guide .modal-header {
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 102, 247, 0.08);
  background: linear-gradient(180deg, rgba(0, 102, 247, 0.06) 0%, #fff 100%);
}

#modalAjax.modal-markdown-guide .modal-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-neutral-black, #13151c);
}

#modalAjax.modal-markdown-guide .modal-header .close {
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(0, 102, 247, 0.14);
  background: #fff;
  opacity: 1;
  color: var(--color-neutral-black, #13151c);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

#modalAjax.modal-markdown-guide .modal-header .close:hover {
  border-color: rgba(0, 102, 247, 0.35);
  background: rgba(0, 102, 247, 0.06);
  color: var(--color-primary-blue, #0066f7);
}

#modalAjax.modal-markdown-guide .modal-body {
  padding: 20px 24px 8px;
  max-height: min(70vh, 720px);
  overflow-y: auto;
}

#modalAjax.modal-markdown-guide .modal-footer {
  justify-content: center;
  padding: 16px 24px 24px;
  border-top: 1px solid rgba(0, 102, 247, 0.08);
  background: #fff;
}

#modalAjax.modal-markdown-guide .modal-footer .loader {
  display: none !important;
}

#modalAjax.modal-markdown-guide .modal-footer .btn-default {
  min-width: 160px;
  height: 44px;
  padding: 0 24px;
  border-radius: 29px;
  border: 1px solid rgba(0, 102, 247, 0.18);
  background: #fff;
  color: var(--color-neutral-black, #13151c);
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 102, 247, 0.08);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease,
    box-shadow 0.2s ease;
}

#modalAjax.modal-markdown-guide .modal-footer .btn-default:hover {
  border-color: rgba(0, 102, 247, 0.35);
  background: rgba(0, 102, 247, 0.06);
  color: var(--color-primary-blue, #0066f7);
}

.markdown-guide__lead {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0, 102, 247, 0.12);
  background: rgba(0, 102, 247, 0.04);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(19, 21, 28, 0.82);
}

.markdown-guide__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.markdown-guide__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(0, 102, 247, 0.1);
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 102, 247, 0.05);
}

.markdown-guide__card--wide {
  grid-column: 1 / -1;
}

.markdown-guide__card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.markdown-guide__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(0, 102, 247, 0.1);
  color: var(--color-primary-blue, #0066f7);
  font-size: 14px;
}

.markdown-guide__card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-neutral-black, #13151c);
}

.markdown-guide__code {
  border-radius: 12px;
  border: 1px solid rgba(0, 102, 247, 0.1);
  background: rgba(0, 102, 247, 0.03);
  overflow: auto;
}

.markdown-guide__code pre {
  margin: 0;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: #1f2937;
  white-space: pre-wrap;
  word-break: break-word;
}

.markdown-guide__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(19, 21, 28, 0.65);
}

@media (max-width: 767.98px) {
  #modalAjax.modal-markdown-guide .modal-header,
  #modalAjax.modal-markdown-guide .modal-body,
  #modalAjax.modal-markdown-guide .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  #modalAjax.modal-markdown-guide .modal-title {
    font-size: 18px;
  }

  .markdown-guide__grid {
    grid-template-columns: 1fr;
  }

  .markdown-guide__card--wide {
    grid-column: auto;
  }
}

/* --------------------------------------------------------------------------
   User security page — ForceVPS UI (cart-ui-style-guide)
   -------------------------------------------------------------------------- */

.main-page-contents .user-security-page .user-security-2fa-status {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .user-security-page .user-security-status {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
}

.main-page-contents .user-security-page .user-security-status--enabled {
  background: rgba(18, 179, 0, 0.12);
  color: #0a8f00;
}

.main-page-contents .user-security-page .user-security-status--disabled {
  background: rgba(229, 46, 46, 0.1);
  color: #dc2626;
}

/* Disable 2FA — outline danger, clean hover (no button--light + button--danger clash) */
.main-page-contents .user-security-page .user-security-2fa-btn--disable {
  min-width: auto;
  min-height: 36px;
  padding: 6px 20px;
  color: #dc2626 !important;
  background: #fff !important;
  border: 1px solid rgba(220, 53, 69, 0.35) !important;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.08) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    box-shadow 0.2s ease;
}

.main-page-contents .user-security-page .user-security-2fa-btn--disable:hover,
.main-page-contents .user-security-page .user-security-2fa-btn--disable:focus {
  color: #fff !important;
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  box-shadow: 0 4px 14px rgba(220, 53, 69, 0.28) !important;
  transform: none;
}

.main-page-contents .user-security-page .user-security-2fa-actions .button.button--sm:not(.user-security-2fa-btn--disable):hover,
.main-page-contents .user-security-page .user-security-2fa-actions .button.button--sm:not(.user-security-2fa-btn--disable):focus {
  transform: none;
  box-shadow: 0 4px 14px rgba(0, 102, 247, 0.28);
}

.main-page-contents .user-security-page .user-security-alert.alert {
  margin-top: 0;
  margin-bottom: 24px;
  padding: 14px 18px;
  border: 1px solid rgba(253, 126, 20, 0.22);
  border-radius: 12px;
  background: rgba(253, 126, 20, 0.08);
  color: #92400e;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.main-page-contents .user-security-page .user-security-2fa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.main-page-contents .user-security-page .social-signin-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.main-page-contents .user-security-page .providerPreLinking p {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

.main-page-contents .user-security-page .user-security-linked-table {
  margin-top: 24px;
}

.main-page-contents .user-security-page #tableLinkedAccounts {
  min-width: 560px;
}

/* --------------------------------------------------------------------------
   Network status page (serverstatus.php) — ForceVPS cart-ui tokens
   -------------------------------------------------------------------------- */

.main-page-contents .network-status-page {
  margin-top: 8px;
}

.main-page-contents .network-status-hero {
  padding: 8px 0 28px;
  text-align: center;
}

.main-page-contents .network-status-hero__inner {
  max-width: 720px;
  margin-inline: auto;
}

.main-page-contents .network-status-hero__eyebrow {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-blue);
}

.main-page-contents .network-status-hero__title {
  margin: 0 0 12px;
}

.main-page-contents .network-status-hero__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #6b7280;
  max-width: 640px;
  margin-inline: auto;
}

.main-page-contents .network-status-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  margin: 0 0 20px;
  padding: 16px 20px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  border: none;
}

.main-page-contents .network-status-notice--success {
  border: 1px solid rgba(18, 179, 0, 0.22);
  background: rgba(18, 179, 0, 0.08);
  color: #0d5c00;
}

.main-page-contents .network-status-notice--success .fa-check {
  color: var(--color-status-green, #12b300);
}

.main-page-contents .network-status-notice--info {
  border: 1px solid rgba(0, 102, 247, 0.18);
  background: rgba(0, 102, 247, 0.06);
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .network-status-notice--warning {
  margin: 16px 0;
  border: 1px solid rgba(253, 126, 20, 0.22);
  background: rgba(253, 126, 20, 0.08);
  color: #92400e;
}

.main-page-contents .network-status-notice__link {
  color: var(--color-primary-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.main-page-contents .network-status-notice__link:hover {
  color: #003c91;
}

.main-page-contents .network-status-servers {
  margin-bottom: 28px;
}

.main-page-contents .network-status-servers__card {
  padding: 24px 28px 28px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
}

.main-page-contents .network-status-servers__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
  text-align: center;
}

.main-page-contents .network-status-servers__desc {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: #6b7280;
  text-align: center;
}

.main-page-contents .network-status-servers__table-wrap.table-container {
  padding: 20px;
  margin-bottom: 0;
}

.main-page-contents .network-status-servers__table-wrap.table-container::after {
  display: none;
}

.main-page-contents .network-status-servers__link {
  color: var(--color-primary-blue);
  font-weight: 600;
  text-decoration: none;
}

.main-page-contents .network-status-servers__link:hover {
  text-decoration: underline;
}

.main-page-contents .network-status-issues {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}

.main-page-contents .network-status-issue {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
  overflow: hidden;
}

.main-page-contents .network-status-issue__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 20px 24px;
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  color: #fff;
}

.main-page-contents .network-status-issue__heading {
  flex: 1 1 200px;
  min-width: 0;
}

.main-page-contents .network-status-issue__title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
}

.main-page-contents .network-status-issue__status {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}

.main-page-contents .network-status-issue__priority {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}

.main-page-contents .network-status-issue__priority--critical {
  background: rgba(246, 75, 75, 0.35);
  border-color: rgba(255, 200, 200, 0.45);
}

.main-page-contents .network-status-issue__priority--high {
  background: rgba(253, 126, 20, 0.35);
  border-color: rgba(255, 220, 180, 0.45);
}

.main-page-contents .network-status-issue__priority--low {
  background: rgba(18, 179, 0, 0.35);
  border-color: rgba(200, 255, 200, 0.4);
}

.main-page-contents .network-status-issue__body {
  padding: 24px 28px 28px;
}

.main-page-contents .network-status-issue__affecting {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-neutral-black, #13151c);
  text-align: center;
}

.main-page-contents .network-status-issue__dates {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
  text-align: center;
}

.main-page-contents .network-status-issue__dates-updated {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

.main-page-contents .network-status-issue__description {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-neutral-black, #13151c);
  text-align: center;
}

.main-page-contents .network-status-issue__description p:last-child {
  margin-bottom: 0;
}

.main-page-contents .network-status-empty {
  margin: 0;
  padding: 32px 24px;
  text-align: center;
  font-size: 15px;
  line-height: 1.55;
  color: #6b7280;
  background: rgba(0, 102, 247, 0.04);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
}

.main-page-contents .network-status-pagination {
  margin-top: 8px;
  padding-top: 8px;
}

.main-page-contents .network-status-pagination ul.pagination {
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
}

.main-page-contents .network-status-pagination .page-item {
  margin: 0;
}

.main-page-contents .network-status-pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 44px;
  border: 1px solid rgba(0, 102, 247, 0.18);
  background: #fff;
  color: var(--color-primary-blue);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.06);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.main-page-contents .network-status-pagination .page-link:hover,
.main-page-contents .network-status-pagination .page-link:focus {
  background: rgba(0, 102, 247, 0.06);
  border-color: rgba(0, 102, 247, 0.35);
  color: #003c91;
}

.main-page-contents .network-status-pagination .page-item.disabled .page-link,
.main-page-contents .network-status-pagination .page-item.disabled .page-link:hover {
  opacity: 0.45;
  pointer-events: none;
  background: #f3f4f6;
  border-color: rgba(0, 0, 0, 0.06);
  color: #9ca3af;
  box-shadow: none;
}

@media (max-width: 575.98px) {
  .main-page-contents .network-status-hero {
    padding-bottom: 20px;
  }

  .main-page-contents .network-status-servers__card,
  .main-page-contents .network-status-issue__body {
    padding-left: 18px;
    padding-right: 18px;
  }

  .main-page-contents .network-status-issue__header {
    padding: 16px 18px;
  }

  .main-page-contents .network-status-pagination .page-link {
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* --------------------------------------------------------------------------
   Knowledge base (knowledgebase.php) — ForceVPS cart / client-area tokens
   -------------------------------------------------------------------------- */
.main-page-contents .kb-page {
  margin-top: 0;
}

.main-page-contents .kb-hero {
  padding: 8px 0 28px;
  text-align: center;
}

.main-page-contents .kb-hero__inner {
  max-width: 720px;
  margin-inline: auto;
}

.main-page-contents .kb-hero__eyebrow {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-blue);
}

.main-page-contents .kb-hero__title {
  margin: 0 0 12px;
}

.main-page-contents .kb-hero__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #6b7280;
  max-width: 640px;
  margin-inline: auto;
}

.main-page-contents .kb-search-form {
  margin: 0 0 32px;
  padding: 24px;
  background: rgba(0, 102, 247, 0.04);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
}

.main-page-contents .kb-search-form__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.main-page-contents .kb-search-form__input.form-control {
  flex: 1 1 auto;
  min-width: min(100%, 220px);
  height: 36px;
  margin: 0;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.04),
    0px 4px 10px rgba(15, 15, 15, 0.06);
  border-radius: 29px;
  border: none;
  padding: 8px 20px;
  font-weight: 500;
  font-size: 16px;
  color: var(--color-neutral-black);
}

.main-page-contents .kb-search-form__input.form-control:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 102, 247, 0.2);
}

.main-page-contents .kb-search-form__submit {
  flex: 0 0 auto;
  white-space: nowrap;
}

.main-page-contents .kb-categories {
  margin: 0 -12px 8px;
}

.main-page-contents .kb-categories > [class*="col-"] {
  padding: 0 12px 24px;
}

.main-page-contents .kb-category-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 24px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.main-page-contents .kb-category-card:hover {
  border-color: rgba(0, 102, 247, 0.18);
  box-shadow: 0px 8px 28px rgba(0, 102, 247, 0.12);
}

.main-page-contents .kb-category-card__head {
  margin-bottom: 12px;
}

.main-page-contents .kb-category-card__title-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.main-page-contents .kb-category-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
  line-height: 1.3;
}

.main-page-contents .kb-category-card__count {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 44px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-blue);
  background: rgba(0, 102, 247, 0.08);
}

.main-page-contents .kb-category-card__desc {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: #6b7280;
  text-align: center;
  flex: 1 1 auto;
}

.main-page-contents .kb-category-card__edit {
  align-self: center;
}

.main-page-contents .kb-articles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.main-page-contents .kb-article-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 102, 247, 0.08);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.main-page-contents .kb-article-card:hover {
  border-color: rgba(0, 102, 247, 0.2);
  box-shadow: 0px 8px 28px rgba(0, 102, 247, 0.1);
  text-decoration: none;
  color: inherit;
}

.main-page-contents .kb-article-card__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  color: #fff;
  font-size: 18px;
}

.main-page-contents .kb-article-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.main-page-contents .kb-article-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
  line-height: 1.35;
}

.main-page-contents .kb-article-card__excerpt {
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
  overflow-wrap: break-word;
}

.main-page-contents .kb-article-card__edit {
  flex-shrink: 0;
  align-self: center;
}

.main-page-contents .kb-empty__notice,
.main-page-contents .kb-notice__alert.alert {
  margin: 0;
  padding: 16px 20px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  border: 1px solid rgba(0, 102, 247, 0.18);
  background: rgba(0, 102, 247, 0.06);
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .kb-notice--success .kb-notice__alert.alert-success {
  border-color: rgba(18, 179, 0, 0.22);
  background: rgba(18, 179, 0, 0.08);
  color: #0d5c00;
}

.main-page-contents .kb-article-view {
  padding: 28px;
  margin-bottom: 28px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
}

.main-page-contents .kb-article-view__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.main-page-contents .kb-article-view__heading .kb-hero__eyebrow {
  text-align: left;
}

.main-page-contents .kb-article-view__title {
  margin: 0;
  text-align: left;
}

.main-page-contents .kb-article-view__meta {
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.main-page-contents .kb-article-view__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 44px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-blue);
  background: rgba(0, 102, 247, 0.08);
}

.main-page-contents .kb-article-view__useful {
  font-size: 13px;
  color: #6b7280;
}

.main-page-contents .kb-article-view__content {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .kb-article-view__vote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 16px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 102, 247, 0.08);
}

.main-page-contents .kb-article-view__vote-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
}

.main-page-contents .kb-article-view__vote-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.main-page-contents .kb-related {
  margin-bottom: 24px;
}

.main-page-contents .kb-related__title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
  text-align: center;
}

.main-page-contents .kb-page-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
}

@media (max-width: 575.98px) {
  .main-page-contents .kb-hero {
    padding-bottom: 20px;
  }

  .main-page-contents .kb-search-form {
    padding: 18px;
  }

  .main-page-contents .kb-search-form__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .main-page-contents .kb-search-form__submit {
    width: 100%;
  }

  .main-page-contents .kb-article-card {
    flex-wrap: wrap;
  }

  .main-page-contents .kb-article-card__edit {
    width: 100%;
  }

  .main-page-contents .kb-article-view {
    padding: 20px 18px;
  }

  .main-page-contents .kb-article-view__vote {
    flex-direction: column;
    align-items: stretch;
  }

  .main-page-contents .kb-article-view__vote-form {
    justify-content: stretch;
  }

  .main-page-contents .kb-article-view__vote-form .button {
    flex: 1 1 auto;
  }
}

/* WHMCS dev license notice + footer branding inside client area card */
.main-page-contents > div[style*="ffffd2"],
.main-page-contents > div[style*="FFFFD2"] {
  margin: 0 0 16px !important;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(253, 126, 20, 0.22) !important;
  background: rgba(253, 126, 20, 0.08) !important;
  color: #92400e !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

.main-page-contents > p:has(a[href*="whmcs.com"]) {
  display: none !important;
}

/* Custom VPS hub (/store/custom-vps) */
#order-standard_cart .cart-hub {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px 24px;
}

#order-standard_cart .cart-hub__hero {
  padding: 48px 0 28px;
}

#order-standard_cart .cart-hub-section--configurators {
  margin-bottom: 48px;
}

#order-standard_cart .cart-hub-configurators {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

#order-standard_cart .cart-hub-config-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 180px;
  padding: 20px;
  text-decoration: none;
  background: linear-gradient(180deg, #ffffff 0%, #d5d5d5 100%);
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 21px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#order-standard_cart .cart-hub-config-card::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5.83325 14.1667L14.1666 5.83337' stroke='%230066F7' stroke-width='2.08' stroke-linecap='round' stroke-linejoin='round'/><path d='M5.83325 5.83337H14.1666V14.1667' stroke='%230066F7' stroke-width='2.08' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  transition: transform 0.3s ease;
}

#order-standard_cart .cart-hub-config-card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 12px 34px rgba(0, 0, 0, 0.14);
}

#order-standard_cart .cart-hub-config-card:hover::after,
#order-standard_cart .cart-hub-config-card:hover .cart-hub-config-card__decor,
#order-standard_cart .cart-hub-config-card:hover .cart-hub-config-card__icon {
  transform: scale(1.08);
}

#order-standard_cart .cart-hub-config-card__icon {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.001);
  box-shadow: 0px 4px 14.3px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

#order-standard_cart .cart-hub-config-card__icon img {
  width: 24px;
  height: 24px;
}

#order-standard_cart .cart-hub-config-card__title {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  max-width: 75%;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  background: linear-gradient(180deg, #5b5b5b 0%, #070707 116.3%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#order-standard_cart .cart-hub-config-card__text {
  position: relative;
  z-index: 1;
  max-width: 75%;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-neutral-black, #11142d);
}

#order-standard_cart .cart-hub-config-card__text p {
  margin: 0;
  font: inherit;
  color: inherit;
}

#order-standard_cart .cart-hub-config-card__decor {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  height: 100%;
  aspect-ratio: 267 / 249;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  transition: transform 0.3s ease;
}

#order-standard_cart .cart-hub-config-card__decor img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: right center;
}

#order-standard_cart .cart-hub-paths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

#order-standard_cart .cart-hub-path-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#order-standard_cart .cart-hub-path-card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 12px 34px rgba(0, 0, 0, 0.14);
  border-color: rgba(0, 102, 247, 0.25);
}

#order-standard_cart .cart-hub-path-card--primary {
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  border-color: transparent;
}

#order-standard_cart .cart-hub-path-card__icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(0, 102, 247, 0.08);
}

#order-standard_cart .cart-hub-path-card--primary .cart-hub-path-card__icon {
  background: rgba(255, 255, 255, 0.15);
}

#order-standard_cart .cart-hub-path-card__icon img {
  width: 28px;
  height: 28px;
}

#order-standard_cart .cart-hub-path-card--primary .cart-hub-path-card__icon img {
  filter: brightness(0) invert(1);
}

#order-standard_cart .cart-hub-path-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#order-standard_cart .cart-hub-path-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-neutral-black, #11142d);
}

#order-standard_cart .cart-hub-path-card__text {
  font-size: 14px;
  color: #6b7280;
}

#order-standard_cart .cart-hub-path-card--primary .cart-hub-path-card__title,
#order-standard_cart .cart-hub-path-card--primary .cart-hub-path-card__text {
  color: #fff;
}

#order-standard_cart .cart-hub-path-card--primary .cart-hub-path-card__text {
  opacity: 0.85;
}

#order-standard_cart .cart-hub-path-card__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

#order-standard_cart .cart-hub-path-card__arrow img {
  width: 20px;
  height: 20px;
}

#order-standard_cart .cart-hub-path-card--primary .cart-hub-path-card__arrow img {
  filter: brightness(0) invert(1);
}

#order-standard_cart .cart-hub-path-card:hover .cart-hub-path-card__arrow {
  transform: translateX(4px);
}

#order-standard_cart .cart-hub-section {
  margin-bottom: 40px;
}

#order-standard_cart .cart-hub-section__title {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-neutral-black, #11142d);
}

#order-standard_cart .cart-hub-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

#order-standard_cart .cart-hub-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 16px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#order-standard_cart .cart-hub-card:hover {
  transform: translateY(-3px);
  box-shadow: 0px 10px 28px rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 102, 247, 0.25);
}

#order-standard_cart .cart-hub-card__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0, 102, 247, 0.06);
}

#order-standard_cart .cart-hub-card__icon img {
  width: 24px;
  height: 24px;
}

#order-standard_cart .cart-hub-card__name {
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-neutral-black, #11142d);
}

#order-standard_cart .cart-hub-card__arrow {
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#order-standard_cart .cart-hub-card__arrow img {
  width: 16px;
  height: 16px;
}

#order-standard_cart .cart-hub-card:hover .cart-hub-card__arrow {
  opacity: 1;
  transform: translateX(3px);
}


/* Force VPS — как .sub-item--featured-force на vps.php */
#order-standard_cart .cart-hub-card.cart-hub-card--featured-force {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #f0f6ff 0%, #d9e8fc 100%);
  border: 1px solid rgba(0, 102, 247, 0.45);
  box-shadow: 0 4px 16px rgba(0, 102, 247, 0.35);
  animation: forcevps-featured-glow 2.4s ease-in-out infinite;
}

#order-standard_cart .cart-hub-card.cart-hub-card--featured-force::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.7) 50%,
    transparent 70%
  );
  pointer-events: none;
  will-change: transform, opacity;
  animation: forcevps-featured-shimmer 3.6s ease-in-out infinite;
}

#order-standard_cart .cart-hub-card.cart-hub-card--featured-force .cart-hub-card__icon,
#order-standard_cart .cart-hub-card.cart-hub-card--featured-force .cart-hub-card__name,
#order-standard_cart .cart-hub-card.cart-hub-card--featured-force .cart-hub-card__arrow {
  position: relative;
  z-index: 1;
}

#order-standard_cart .cart-hub-card.cart-hub-card--featured-force .cart-hub-card__icon {
  background: rgba(0, 102, 247, 0.12);
}

#order-standard_cart .cart-hub-card.cart-hub-card--featured-force .cart-hub-card__name {
  font-weight: 700;
  color: #003c91;
}

#order-standard_cart .cart-hub-card.cart-hub-card--featured-force:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, #e4efff 0%, #c8dafb 100%);
  border-color: rgba(0, 102, 247, 0.65);
  box-shadow: 0 8px 28px rgba(0, 102, 247, 0.55);
}

#order-standard_cart .cart-hub-card.cart-hub-card--featured-force:hover .cart-hub-card__arrow {
  opacity: 1;
}

@media (max-width: 767px) {
  #order-standard_cart .cart-hub-paths,
  #order-standard_cart .cart-hub-configurators {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #order-standard_cart .cart-hub-config-card {
    min-height: 160px;
  }

  #order-standard_cart .cart-hub-config-card__title,
  #order-standard_cart .cart-hub-config-card__text {
    max-width: 100%;
  }

  #order-standard_cart .cart-hub__hero {
    padding: 32px 0 20px;
  }
}

.footer-block__list--contacts a {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-block__list--contacts strong {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.footer-block__list--contacts span {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.45);
}

/* Footer legal links */
footer.footer .footer__links--legal {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px 24px;
  margin-bottom: 24px;
}

/* Lighthouse: reviews inline link underline */
.reviews__text .reviews__inline-link {
  text-decoration: underline !important;
  text-underline-offset: 2px;
  border-bottom: none !important;
}

/* Lighthouse: reserve slider height before Slick init (CLS) */
.reviews__slider {
  min-height: 220px;
}

.reviews__slider.slick-initialized {
  min-height: 0;
}

/* Homepage hero — HTML content over clean background (1024×411) */
.hero-card {
  aspect-ratio: 1024 / 411;
  background: #05050c;
  --hero-accent: #a855f7;
}

.hero-card--dedicated {
  --hero-accent: #22c55e;
}

.hero-card--force {
  --hero-accent: #34d399;
}

.hero-card--5ghz {
  --hero-accent: #38bdf8;
}

.hero-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero .hero-card__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-height: 0;
  padding: clamp(24px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
}

/* Readability gradient on the left, instead of the old bottom fade */
.hero .hero-card__inner::after {
  inset: 0;
  height: auto;
  background: linear-gradient(90deg,
      rgba(5, 5, 12, 0.88) 0%,
      rgba(5, 5, 12, 0.6) 42%,
      rgba(5, 5, 12, 0.05) 68%,
      rgba(5, 5, 12, 0) 100%);
}

.hero-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 44px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hero-card__eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hero-accent);
  box-shadow: 0 0 8px var(--hero-accent);
}

.hero .hero-card__title {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(26px, 4.2vw, 44px);
  font-weight: 600;
  line-height: 1.12;
}

.hero-card__subtitle {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(14px, 1.7vw, 18px);
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.hero-card__features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.hero-card__features li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.hero-card__features li::before {
  content: '';
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background-color: var(--hero-accent);
  mask: url("../img/icons/check.svg") center / contain no-repeat;
  -webkit-mask: url("../img/icons/check.svg") center / contain no-repeat;
}

.hero-card__actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.hero-card__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 11px 28px;
  border-radius: 44px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: #fff !important;
  text-decoration: none !important;
  background: var(--color-status-green);
  border: 1px solid var(--color-status-green);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-card__cta:hover {
  background: #0FA000;
  border-color: #0FA000;
  transform: translateY(-2px);
  box-shadow: 0px 8px 24px rgba(18, 179, 0, 0.3), 0px 4px 12px rgba(18, 179, 0, 0.2);
}

.hero-card__cta:active {
  transform: translateY(0);
  box-shadow: none;
}

.hero-card__cta--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.hero-card__cta--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.25);
}

.hero-card__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Slick dots */
.hero-slider .slick-dots {
  position: absolute;
  /* .slick-list/.slick-track carry 30px padding/-30px margin, so the slider
     box extends 30px below the card — offset accordingly to sit inside it */
  bottom: 44px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-slider .slick-dots li {
  line-height: 0;
}

.hero-slider .slick-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  font-size: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.35);
  transition: all 0.25s ease;
}

.hero-slider .slick-dots li.slick-active button {
  width: 22px;
  border-radius: 44px;
  background: #fff;
}

.hero-slider .slick-dots button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.hero-slider .slick-prev {
  left: 10px;
}

.hero-slider .slick-next {
  right: 10px;
}

.hero-slider:not(.slick-initialized) .hero-card + .hero-card {
  display: none;
}

.hero-slider {
  min-height: 0;
}

.hero-slider.slick-initialized {
  min-height: 0;
}

/* Hero responsive */
@media (max-width: 991px) {
  .hero .hero-card__inner::after {
    background: linear-gradient(90deg,
        rgba(5, 5, 12, 0.9) 0%,
        rgba(5, 5, 12, 0.72) 55%,
        rgba(5, 5, 12, 0.35) 100%);
  }
}

@media (max-width: 767px) {
  .hero-card {
    aspect-ratio: auto;
  }

  .hero .hero-card__inner {
    position: relative;
    inset: auto;
    padding: 28px 20px 32px;
    gap: 12px;
  }

  .hero .hero-card__title {
    max-width: none;
  }

  .hero-card__actions {
    width: 100%;
  }

  .hero-card__cta {
    flex: 1 1 auto;
  }

  .hero-slider .slick-arrow {
    display: none !important;
  }
}

/* Homepage hero banner — horizontal trust strip under the slider */
.hero-banner {
  width: 100%;
  max-width: 100%;
  margin: 24px auto 0;
  padding: 24px 28px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px 32px;
  text-align: left;
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 25px;
  box-shadow: -5px 10px 73.9px rgba(0, 0, 0, 0.08);
}

.hero-banner__content {
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.hero-banner h4 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: var(--color-neutral-black);
}

.hero-banner h4 b {
  font-weight: 600;
}

.hero-banner p {
  margin: 0;
  max-width: 62ch;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(30, 30, 30, 0.72);
}

.hero-banner__stats {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.hero-banner__stats li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 44px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-neutral-black);
  background: rgba(0, 102, 247, 0.06);
  border: 1px solid rgba(0, 102, 247, 0.1);
}

.hero-banner__stats li::before {
  content: '';
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background-color: var(--color-status-green);
  mask: url("../img/icons/check.svg") center / contain no-repeat;
  -webkit-mask: url("../img/icons/check.svg") center / contain no-repeat;
}

.hero-banner__btn {
  flex: 0 0 auto;
  padding: 12px 32px;
  height: auto;
  min-height: 44px;
}

.hero-banner__btn:focus-visible {
  outline: 2px solid var(--color-status-green);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .hero-banner {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    gap: 16px;
    text-align: center;
  }

  .hero-banner__content {
    align-items: center;
    text-align: center;
  }

  .hero-banner h4 {
    font-size: 16px;
  }

  .hero-banner p {
    text-align: center;
    font-size: 13px;
  }

  .hero-banner__stats li {
    font-size: 12px;
    padding: 5px 12px;
  }

  .hero-banner__stats {
    justify-content: center;
  }

  .hero-banner__btn {
    width: 100%;
  }
}

#pricing .tab-content {
  min-height: 520px;
}

/* Mobile: font fallback while Google Fonts load */
body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Mobile CLS: reserve height before Slick/AOS init */
@media (max-width: 991px) {
  .services__slider {
    min-height: 280px;
  }

  .services__slider.slick-initialized {
    min-height: 0;
  }

  .marquee-wrapper {
    min-height: 160px;
  }

  .hero-banner {
    min-height: 200px;
  }
}

/* --------------------------------------------------------------------------
   Server management panel mockup (clientarea.php?action=productdetails)
   -------------------------------------------------------------------------- */

.main-page-contents .service-details-server {
  margin-bottom: 32px;
}

.main-page-contents .service-details-server__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 18px;
}

.main-page-contents .service-details-server__title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-neutral-black, #1e1e1e);
}

.main-page-contents .service-details-server__demo-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 44px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(248, 148, 6, 0.12);
  color: #c97706;
  border: 1px solid rgba(248, 148, 6, 0.2);
}

/* ---- Status card ---- */

.main-page-contents .service-details-server-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
  padding: 20px 24px;
  margin-bottom: 16px;
}

.main-page-contents .service-details-server-status__state {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 200px;
}

.main-page-contents .service-details-server-status__dot {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: relative;
}

.main-page-contents .service-details-server-status__dot--online {
  background: var(--color-status-green, #12b300);
}

.main-page-contents .service-details-server-status__dot--online::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(18, 179, 0, 0.4);
  animation: srv-status-pulse 1.8s ease-out infinite;
}

.main-page-contents .service-details-server-status__dot--offline {
  background: #d63b3b;
}

@keyframes srv-status-pulse {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }

  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

.main-page-contents .service-details-server-status__state-text {
  display: flex;
  flex-direction: column;
}

.main-page-contents .service-details-server-status__label {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-neutral-black, #1e1e1e);
  line-height: 1.25;
}

.main-page-contents .service-details-server-status__uptime {
  font-size: 12px;
  color: #6b7280;
}

.main-page-contents .service-details-server-status__meta {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-page-contents .service-details-server-status__meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.main-page-contents .service-details-server-status__meta-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9aa3af;
}

.main-page-contents .service-details-server-status__meta-label .feather {
  font-size: 13px;
  color: var(--color-primary-blue, #0066f7);
}

.main-page-contents .service-details-server-status__meta-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-neutral-black, #1e1e1e);
  overflow-wrap: break-word;
}

/* ---- Power toolbar ---- */

.main-page-contents .service-details-server-power {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.main-page-contents .service-details-server-power__btn .feather {
  margin-right: 4px;
}

.main-page-contents .service-details-server-power__btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.main-page-contents .service-details-server-power__notice {
  font-size: 13px;
  color: var(--color-primary-blue, #0066f7);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.main-page-contents .service-details-server-power__notice.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Stats ---- */

.main-page-contents .service-details-server-stats {
  margin-bottom: 24px;
}

.main-page-contents .service-details-server-stats__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.main-page-contents .service-details-server-stats__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-neutral-black, #1e1e1e);
}

.main-page-contents .service-details-server-stats__periods {
  display: inline-flex;
  gap: 4px;
  background: rgba(0, 102, 247, 0.06);
  border-radius: 44px;
  padding: 4px;
}

.main-page-contents .service-details-server-stats__period {
  border: 0;
  background: transparent;
  border-radius: 44px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.main-page-contents .service-details-server-stats__period:hover {
  color: var(--color-primary-blue, #0066f7);
}

.main-page-contents .service-details-server-stats__period.is-active {
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  color: #fff;
}

.main-page-contents .service-details-server-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.main-page-contents .service-details-server-stat-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
  padding: 18px 20px;
  min-width: 0;
}

.main-page-contents .service-details-server-stat-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.main-page-contents .service-details-server-stat-card__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-black, #1e1e1e);
}

.main-page-contents .service-details-server-stat-card__title .feather {
  color: var(--color-primary-blue, #0066f7);
}

.main-page-contents .service-details-server-stat-card__value {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-blue, #0066f7);
  white-space: nowrap;
}

.main-page-contents .service-details-server-stat-card__chart {
  position: relative;
  height: 180px;
}

.main-page-contents .service-details-server-stat-card__chart--doughnut {
  display: flex;
  justify-content: center;
}

.main-page-contents .service-details-server-stats__grid > .service-details-server-stat-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* ---- Extras tabs (Backups / ISO / rDNS) ---- */

.main-page-contents .service-details-server-extras__panel {
  margin-bottom: 0;
}

.main-page-contents .service-details-server-extras__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.main-page-contents .service-details-server-table-wrap {
  overflow-x: auto;
}

.main-page-contents .service-details-server-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.main-page-contents .service-details-server-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9aa3af;
  border-bottom: 1px solid rgba(0, 102, 247, 0.1);
  white-space: nowrap;
}

.main-page-contents .service-details-server-table td {
  padding: 12px 14px;
  color: var(--color-neutral-black, #1e1e1e);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  vertical-align: middle;
}

.main-page-contents .service-details-server-table tbody tr:last-child td {
  border-bottom: 0;
}

.main-page-contents .service-details-server-table tbody tr:hover td {
  background: rgba(0, 102, 247, 0.03);
}

.main-page-contents .service-details-server-table__actions-col {
  text-align: right;
  white-space: nowrap;
}

.main-page-contents .service-details-server-table__actions-col .button + .button {
  margin-left: 6px;
}

/* ---- Networking / SSH ---- */

.main-page-contents .service-details-server-code {
  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace;
  font-size: 13px;
  background: rgba(0, 102, 247, 0.06);
  border-radius: 8px;
  padding: 3px 8px;
  color: var(--color-neutral-black, #1e1e1e);
  word-break: break-all;
}

.main-page-contents .service-details-server-ssh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(0, 102, 247, 0.04);
  border: 1px solid rgba(0, 102, 247, 0.1);
}

.main-page-contents .service-details-server-ssh__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.main-page-contents .service-details-server-ssh__cmd {
  font-size: 14px;
  padding: 6px 10px;
}

/* ---- Reinstall modal ---- */

.main-page-contents .service-details-server-modal {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.main-page-contents .service-details-server-modal[hidden] {
  display: none;
}

.main-page-contents .service-details-server-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 30, 30, 0.55);
}

.main-page-contents .service-details-server-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.2);
}

.main-page-contents .service-details-server-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(0, 102, 247, 0.08);
}

.main-page-contents .service-details-server-modal__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-neutral-black, #1e1e1e);
}

.main-page-contents .service-details-server-modal__close {
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #9aa3af;
  cursor: pointer;
  padding: 0 4px;
}

.main-page-contents .service-details-server-modal__close:hover {
  color: var(--color-neutral-black, #1e1e1e);
}

.main-page-contents .service-details-server-modal__body {
  padding: 18px 22px;
}

.main-page-contents .service-details-server-modal__warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13px;
  background: rgba(246, 75, 75, 0.08);
  color: #d63b3b;
  border: 1px solid rgba(246, 75, 75, 0.16);
}

.main-page-contents .service-details-server-os-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.main-page-contents .service-details-server-os-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0, 102, 247, 0.1);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-neutral-black, #1e1e1e);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.main-page-contents .service-details-server-os-list__item:hover {
  border-color: var(--color-primary-blue, #0066f7);
  background: rgba(0, 102, 247, 0.04);
}

.main-page-contents .service-details-server-os-list__item input[type="radio"] {
  accent-color: var(--color-primary-blue, #0066f7);
}

.main-page-contents .service-details-server-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid rgba(0, 102, 247, 0.08);
}

body.service-details-server-modal-open {
  overflow: hidden;
}

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

@media (max-width: 991px) {
  .main-page-contents .service-details-server-stats__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .main-page-contents .service-details-server-status {
    flex-direction: column;
    align-items: stretch;
  }

  .main-page-contents .service-details-server-status__meta {
    grid-template-columns: 1fr;
  }

  .main-page-contents .service-details-server-power {
    gap: 8px;
  }

  .main-page-contents .service-details-server-power__btn {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Service cancellation (clientarea.php?action=cancel) — ForceVPS cart UI
   -------------------------------------------------------------------------- */

.main-page-contents .service-cancel-page {
  margin-top: 8px;
}

.main-page-contents .service-cancel-hero {
  padding: 8px 0 28px;
  text-align: center;
}

.main-page-contents .service-cancel-hero__inner {
  max-width: 720px;
  margin-inline: auto;
}

.main-page-contents .service-cancel-hero__eyebrow {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-blue);
}

.main-page-contents .service-cancel-hero__title {
  margin: 0;
}

.main-page-contents .service-cancel-alert {
  margin-bottom: 20px;
  border-radius: 16px;
  border: 1px solid rgba(220, 53, 69, 0.2);
}

.main-page-contents .service-cancel-product {
  margin-bottom: 24px;
  padding: 20px 24px;
  border-radius: 20px;
  background: rgba(0, 102, 247, 0.04);
  border: 1px solid rgba(0, 102, 247, 0.08);
}

.main-page-contents .service-cancel-product__label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

.main-page-contents .service-cancel-product__name {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .service-cancel-product__domain,
.main-page-contents .service-cancel-page .cart-item-domain {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 12px 0 0;
  padding: 8px 14px;
  border-radius: 44px;
  background: rgba(0, 102, 247, 0.08);
  border: 1px solid rgba(0, 102, 247, 0.12);
  color: var(--color-primary-blue);
  font-size: 14px;
  font-weight: 500;
}

.main-page-contents .service-cancel-form-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
  overflow: visible;
}

.main-page-contents .service-cancel-form-card__body {
  padding: 28px 28px 8px;
}

.main-page-contents .service-cancel-form .form-group {
  margin-bottom: 20px;
  overflow: visible;
}

.main-page-contents .service-cancel-form__label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .service-cancel-form textarea.form-control {
  width: 100%;
  min-height: 140px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.18);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  border-radius: 20px;
  padding: 14px 18px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-black, #13151c);
  resize: vertical;
}

.main-page-contents .service-cancel-form textarea.form-control:hover {
  border-color: rgba(0, 102, 247, 0.28);
}

.main-page-contents .service-cancel-form textarea.form-control:focus {
  outline: none;
  border-color: rgba(0, 102, 247, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.12),
    0px 4px 16px rgba(0, 51, 153, 0.08);
}

.main-page-contents .service-cancel-form__type {
  text-align: center;
}

.main-page-contents .service-cancel-form__type-select {
  max-width: 360px;
  margin-inline: auto;
}

.main-page-contents .service-cancel-form select.form-control {
  width: 100%;
  height: 36px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.18);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  border-radius: 29px;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 16px;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .service-cancel-form select.form-control:hover {
  border-color: rgba(0, 102, 247, 0.28);
}

.main-page-contents .service-cancel-form select.form-control:focus {
  outline: none;
  border-color: rgba(0, 102, 247, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.12),
    0px 4px 16px rgba(0, 51, 153, 0.08);
}

.main-page-contents .service-cancel-form select.form-control:has(+ .nice-select) {
  display: none !important;
}

.main-page-contents .service-cancel-form .nice-select.form-control {
  float: none;
  width: 100%;
  height: 36px;
  line-height: 34px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.18);
  box-shadow: 0px 4px 16px rgba(0, 51, 153, 0.08),
    0px 2px 8px rgba(15, 15, 15, 0.06);
  border-radius: 29px;
  padding-left: 18px;
  padding-right: 36px;
  position: relative;
  z-index: 1;
}

.main-page-contents .service-cancel-form .nice-select.form-control.open {
  z-index: 20;
}

.main-page-contents .service-cancel-form .nice-select.form-control:hover {
  border-color: rgba(0, 102, 247, 0.28);
}

.main-page-contents .service-cancel-form .nice-select.form-control.open,
.main-page-contents .service-cancel-form .nice-select.form-control:focus {
  border-color: rgba(0, 102, 247, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 102, 247, 0.12),
    0px 4px 16px rgba(0, 51, 153, 0.08);
}

.main-page-contents .service-cancel-form .nice-select.form-control::after {
  right: 8px;
  width: 24px;
  height: 24px;
  top: 50%;
  margin-top: 0;
  border: none;
  background: var(--color-primary-blue);
  mask: url("../img/select-chevron.svg") center/10px no-repeat;
  -webkit-mask: url("../img/select-chevron.svg") center/10px no-repeat;
  transform: translateY(-50%) rotate(0deg);
}

.main-page-contents .service-cancel-form .nice-select.form-control.open::after {
  transform: translateY(-50%) rotate(180deg);
}

.main-page-contents .service-cancel-form .nice-select.form-control .current {
  display: block;
  line-height: 34px;
  font-weight: 500;
  font-size: 16px;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .service-cancel-form .nice-select.form-control .list {
  width: max-content;
  min-width: 100%;
  max-width: min(560px, calc(100vw - 48px));
  white-space: normal;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: min(320px, 50vh);
  margin-top: 6px;
  border-radius: 16px;
  border: 1px solid rgba(0, 102, 247, 0.12);
  box-shadow: 0px 8px 28px rgba(0, 102, 247, 0.14);
  z-index: 30;
}

.main-page-contents .service-cancel-form .nice-select.form-control .option {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.4;
  min-height: 40px;
  height: auto;
  padding: 10px 36px 10px 18px;
}

.main-page-contents .service-cancel-form .nice-select.form-control .option:hover,
.main-page-contents .service-cancel-form .nice-select.form-control .option.focus,
.main-page-contents .service-cancel-form .nice-select.form-control .option.selected.focus {
  background: rgba(0, 102, 247, 0.08);
}

.main-page-contents .service-cancel-form .nice-select.form-control .option.selected {
  font-weight: 600;
  color: var(--color-primary-blue);
}

.main-page-contents .service-cancel-domain-notice {
  margin-bottom: 20px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(248, 148, 6, 0.08);
  border: 1px solid rgba(248, 148, 6, 0.22);
}

.main-page-contents .service-cancel-domain-notice__title {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .service-cancel-domain-notice__desc {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
}

.main-page-contents .service-cancel-domain-notice__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-neutral-black, #13151c);
  text-align: left;
}

.main-page-contents .service-cancel-domain-notice__check .form-check-input {
  margin-top: 3px;
  accent-color: var(--color-primary-blue);
}

.main-page-contents .service-cancel-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  padding: 24px 28px 32px;
  border-top: 1px solid rgba(0, 102, 247, 0.08);
}

.main-page-contents .service-cancel-form__actions .button {
  min-width: 180px;
}

.main-page-contents .service-cancel-page .button--danger {
  background: #dc3545;
  color: #fff;
  border: none;
  box-shadow: 0px 6px 24px rgba(220, 53, 69, 0.25);
}

.main-page-contents .service-cancel-page .button--danger:hover {
  background: #c82333;
  color: #fff;
}

.main-page-contents .service-cancel-confirm-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 22.9px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 102, 247, 0.08);
  overflow: visible;
}

.main-page-contents .service-cancel-confirm-card__body {
  padding: 32px 28px;
  text-align: center;
}

.main-page-contents .service-cancel-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 24px 20px;
  border-radius: 16px;
}

.main-page-contents .service-cancel-notice--success {
  background: rgba(18, 179, 0, 0.06);
  border: 1px solid rgba(18, 179, 0, 0.15);
}

.main-page-contents .service-cancel-notice--error {
  background: rgba(220, 53, 69, 0.06);
  border: 1px solid rgba(220, 53, 69, 0.15);
}

.main-page-contents .service-cancel-notice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 22px;
  color: #fff;
}

.main-page-contents .service-cancel-notice--success .service-cancel-notice__icon {
  background: var(--color-status-green, #12b300);
}

.main-page-contents .service-cancel-notice--error .service-cancel-notice__icon {
  background: #dc3545;
}

.main-page-contents .service-cancel-notice__text {
  margin: 0;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-black, #13151c);
}

.main-page-contents .service-cancel-confirm-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
}

.main-page-contents .service-cancel-confirm-card__actions .button {
  min-width: 180px;
}

@media (max-width: 767.98px) {
  .main-page-contents .service-cancel-form-card__body,
  .main-page-contents .service-cancel-confirm-card__body {
    padding-left: 18px;
    padding-right: 18px;
  }

  .main-page-contents .service-cancel-form__actions,
  .main-page-contents .service-cancel-confirm-card__actions {
    flex-direction: column;
    padding-left: 18px;
    padding-right: 18px;
  }

  .main-page-contents .service-cancel-form__actions .button,
  .main-page-contents .service-cancel-confirm-card__actions .button {
    width: 100%;
    min-width: 0;
  }

  .main-page-contents .service-cancel-product {
    padding: 18px 16px;
  }
}

/* --------------------------------------------------------------------------
   Order form secondary nav (cart / store pages)
   -------------------------------------------------------------------------- */

.order-form-menu-scroller {
  position: relative;
  padding: 10px 12px;
  margin-bottom: 28px;
  background: #fff;
  border: 1px solid rgba(0, 102, 247, 0.08);
  border-radius: 20px;
  box-shadow: 0 4px 22.9px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.order-form-menu-scroller .nav {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start !important;
  gap: 6px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.order-form-menu-scroller .nav::-webkit-scrollbar {
  display: none;
}

.order-form-menu-scroller .nav .order-form-nav__link,
.order-form-menu-scroller .nav .nav-link {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: 40px;
  padding: 8px 16px !important;
  border: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-radius: 30px;
  background: transparent;
  color: #6b7280 !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  opacity: 1;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.order-form-menu-scroller .nav .order-form-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 15px;
  line-height: 1;
  color: currentColor;
  flex-shrink: 0;
}

.order-form-menu-scroller .nav .order-form-nav__label {
  white-space: nowrap;
}

.order-form-menu-scroller .nav .order-form-nav__badge {
  margin-left: 2px;
}

.order-form-menu-scroller .nav .order-form-nav__link:hover,
.order-form-menu-scroller .nav .nav-link:hover {
  background: rgba(0, 102, 247, 0.08);
  color: var(--color-primary-blue, #0066f7) !important;
}

.order-form-menu-scroller .nav .order-form-nav__link.active,
.order-form-menu-scroller .nav .nav-link.active {
  background: linear-gradient(180deg, #0066f7 0%, #003c91 100%);
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0, 102, 247, 0.24);
}

.order-form-menu-scroller .nav .order-form-nav__link.active .order-form-nav__icon,
.order-form-menu-scroller .nav .nav-link.active .order-form-nav__icon {
  color: #fff;
}

.order-form-menu-scroller .nav .order-form-nav__link.disabled,
.order-form-menu-scroller .nav .nav-link.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.order-form-menu-scroller.has-scroll-left::before,
.order-form-menu-scroller.has-scroll-right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  pointer-events: none;
  z-index: 1;
}

.order-form-menu-scroller.has-scroll-left::before {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.98), transparent);
}

.order-form-menu-scroller.has-scroll-right::after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.98), transparent);
}

.order-form-menu-scroller .nav-scroller-subpages-arrow-left,
.order-form-menu-scroller .nav-scroller-subpages-arrow-right {
  z-index: 2;
}

@media (max-width: 767px) {
  .order-form-menu-scroller {
    padding: 8px 10px;
  }

  .order-form-menu-scroller .nav .order-form-nav__link,
  .order-form-menu-scroller .nav .nav-link {
    padding: 8px 14px !important;
    font-size: 12px;
  }
}