@import 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap';
@font-face {
  font-family: 'superchargestraight';
  src: url('../fonts/superchargestraight.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Friz Quadrata';
  src: url('../fonts/friz-quadrata-bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Valorant';
  src: url('../fonts/valorant.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Was: 0.8333vw (skaliert auf großen Screens extrem) */
  font-size: 16px;
  zoom: 1;
}

/* Desktop only: scale down slightly */
@media (min-width: 768px) {
  html { zoom: 0.88; }
}

/* Optional: etwas kleiner auf sehr großen Screens, ohne Mobile zu zerstören */
@media (min-width: 1400px) {
  html { font-size: 15px; }
}

/* Tooltip: position:fixed, top/left per JS gesetzt -> zoom-Kompensation noetig.
   Select2-Dropdown: Position wird per JS-Patch in main.js korrigiert,
   daher kein CSS-zoom-Fix mehr noetig. */
.tooltip {
  zoom: 1;
}

body {
  /* Quick fix: gesamtes UI etwas kompakter machen (entfernen, sobald vw->clamp/refactor abgeschlossen ist) */
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  color: #fff;
  background-color: #110f1f;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body main {
  flex-grow: 1;
}

body.overlay {
  overflow: hidden;
}

body.overlay::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 998;
}

img {
  max-height: auto;
  display: block;
  max-width: 100%;
}

::-webkit-scrollbar {
  width: 0.521vw;
  height: 0.521vw;
}

::-webkit-scrollbar-track {
  background: #18162b;
  border-radius: 0.521vw;
}

::-webkit-scrollbar-thumb {
  background: #6366f1;
  border-radius: 0.521vw;
  border: 0.104vw solid #18162b;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(136.44, 138.72, 244.36);
}

* {
  scrollbar-width: thin;
  scrollbar-color: #6366f1 #18162b;
}

button[disabled],
button.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn {
  display: inline-block;
  padding: 0.5208vw 1.7708vw;
  font-size: 1.0417vw;
  font-weight: 600;
  color: #fff;
  border: 0.0521vw solid #232040;
  background: rgba(0, 0, 0, 0);
  border-radius: 2.6042vw;
  text-decoration: none;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.btn i {
  font-size: 0.9375vw;
  margin-left: 0.8333vw;
}

.btn.primary {
  border: none;
  background-color: #6366f1;
}

.btn.primary:hover {
  background-color: rgb(52.2, 56.1, 236.8);
}

.btn.secondary {
  background-color: #18162b;
}

.btn.secondary:hover {
  background-color: #0d0c1d;
}

.btn.btn-icon {
  padding: 0.8854vw;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn.btn-icon i {
  font-size: 1.25vw;
  margin-left: 0;
}

.accordion .accordion-header {
  position: relative;
}

.accordion .accordion-header h5 {
  font-size: 1.3542vw;
  font-weight: 300;
  color: #726e8e;
  cursor: pointer;
  padding: 1.3021vw 0;
  transition: color 0.3s ease;
}

.accordion .accordion-header::after {
  content: '';
  font-family: 'FontAwesome';
  font-size: 0.9375vw;
  position: absolute;
  right: 0.5208vw;
  top: 50%;
  transform: translateY(-50%);
  color: #726e8e;
  transition: transform 0.3s ease;
}

.accordion .accordion-content {
  display: none;
  padding-bottom: 1.5625vw;
  color: #726e8e;
}

.accordion .accordion-content p {
  font-size: 0.8333vw;
  line-height: 1.875vw;
  color: #ffffff;
}

.accordion .accordion-content p * {
  color: #6366f1;
}

.accordion .accordion-content ul {
  padding-left: 1.0417vw;
  margin-top: 0.5208vw;
  list-style-type: disc;
}

.accordion .accordion-content ul li {
  font-size: 0.8333vw;
  color: #726e8e;
}

.accordion .accordion-content ul li:not(:last-child) {
  margin-bottom: 0.5208vw;
}

.accordion .accordion-item {
  border-bottom: 0.0521vw solid #232040;
}

.accordion .accordion-item.active .accordion-header h5 {
  color: #fff;
}

.accordion .accordion-item.active .accordion-header::after {
  color: #fff;
  transform: rotate(180deg) translateY(50%);
}

.accordion .accordion-item:last-child {
  border-bottom: none;
}

.badge {
  color: #ffffff;
  background: #121126;
  border: 1px solid #33347c;
  font-size: 0.625vw;
  border-radius: 1.042vw;
  padding: 0.156vw 0.781vw;
}

.badge.success {
  background-color: #1d333c;
  color: #22c55e;
  border: 1px solid #22c55e;
}

.toggle {
  position: relative;
}

.toggle input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.toggle input[type='checkbox']:checked + .slider {
  background-color: #6366f1;
}

.toggle .slider {
  position: relative;
  display: block;
  width: 3.125vw;
  height: 1.563vw;
  background-color: #121126;
  border-radius: 2.604vw;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.toggle .slider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.313vw;
  width: 1.146vw;
  height: 1.146vw;
  background-color: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

.toggle input[type='checkbox']:checked + .slider::before {
  transform: translate(1.458vw, -50%);
}

.select2-container {
  display: block;
  position: relative; /* Dropdown positioniert sich relativ zum Container, nicht zum naechsten positioned ancestor */
}

.select2-container .select2-selection--single {
  height: auto;
  padding: 1.354vw;
  font-size: 1.042vw;
  color: #fff;
  border: none;
  border-radius: 1.25vw;
  background-color: rgba(10, 10, 24, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  color: #fff !important;
  padding-left: 0 !important;
  font-size: 1.042vw;
  line-height: normal !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
  display: none;
}

.select2-container .select2-selection--single::after {
  content: '';
  background: url('../images/chevron-down.svg') no-repeat center;
  background-size: 0.573vw;
  width: 0.573vw;
  height: 0.573vw;
  margin-left: auto;
}

.select2-container .select2-selection--multiple {
  height: auto;
  padding: 1.354vw;
  font-size: 1.042vw;
  color: #fff;
  border: none;
  border-radius: 1.25vw;
  background-color: #0a0a18;
}

.select2-container .select2-selection--multiple .select2-selection__choice {
  background-color: rgba(99, 102, 241, 0.5);
  border: 0.104vw solid #6366f1;
  white-space: nowrap;
}

.select2-container .select2-selection--multiple .select2-selection__choice__remove {
  height: 100%;
  padding: 0 0.26vw;
  color: rgba(255,255,255,0.6);
  border-right-color: #6366f1;
  transition: color 0.15s ease, background 0.15s ease;
}
.select2-container .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #fff;
  background: rgba(255,255,255,0.15) !important;
}

.select2-container .select2-selection--multiple .select2-selection__choice__display {
  padding-left: 0.521vw;
  padding-right: 0.521vw;
  display: block;
}

.select2-container .select2-selection--multiple .select2-selection__choice__display > span {
  gap: 0.521vw;
  display: flex;
  align-items: center;
}

.select2-container .select2-selection--multiple .select2-selection__choice__display > span img {
  width: 1.667vw;
  height: auto;
}

.select2-container .select2-selection--multiple .select2-search.select2-search--inline textarea {
  margin: 0.365vw 0;
}

.select2-dropdown {
  background-color: #0a0a18;
  border: none;
  border-radius: 0.833vw;
  margin-top: 0.313vw;
  overflow: hidden;
  box-shadow: 0 0.208vw 0.625vw rgba(0, 0, 0, 0.5);
}

.select2-dropdown .select2-search--dropdown {
  padding: 0.521vw;
  background-color: #0e0d1a;
}

.select2-dropdown .select2-search--dropdown .select2-search__field {
  width: 100%;
  padding: 0.521vw 0.729vw;
  border-radius: 0.625vw;
  border: 0.052vw solid #232040;
  background-color: #18162b;
  color: #fff;
  font-size: 0.833vw;
}

.select2-container--default .select2-results__option--selected {
  background-color: #6366f1 !important;
  color: #fff !important;
}

.select2-container--default .select2-search--dropdown {
  display: block !important;
}

.select2-results__options {
  max-height: 13.021vw;
  overflow-y: auto;
}

.select2-results__options .select2-results__option {
  padding: 0.625vw 1.042vw;
  font-size: 0.938vw;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
}

.select2-results__options .select2-results__option--highlighted {
  background-color: #18162b !important;
  color: #6366f1 !important;
}

.select2-results__options .select2-results__option[aria-disabled='true'] {
  color: #726e8e;
  cursor: not-allowed;
}

.select2-results__options .select2-results__option > span {
  gap: 0.521vw;
  display: flex;
  align-items: center;
}

.select2-results__options .select2-results__option > span img {
  width: 1.667vw;
  height: auto;
}

.select2-results__options::-webkit-scrollbar {
  width: 0.417vw;
}

.select2-results__options::-webkit-scrollbar-track {
  background: #110f1f;
  border-radius: 0.417vw;
}

.select2-results__options::-webkit-scrollbar-thumb {
  background-color: #6366f1;
  border-radius: 0.417vw;
  border: 0.104vw solid #110f1f;
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
  background-color: #726e8e;
}

.modal {
  width: 46.875vw;
  height: auto;
  padding: 2.083vw;
  border-radius: 2.083vw;
  background-color: #110f1f;
  border: 0.13vw solid #232040;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999999;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

.modal.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
}

.modal .modal-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  border-bottom: 0.104vw solid rgba(114, 110, 142, 0.1);
}

.modal .modal-header h4 {
  font-size: 1.458vw;
  font-weight: 500;
  margin-bottom: 0.938vw;
}

.modal .modal-header .close-modal {
  width: 1.719vw;
  height: 1.719vw;
  border: none;
  color: #fff;
  font-size: 0.938vw;
  border-radius: 50%;
  background: #726e8e;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease;
}

.modal .modal-header .close-modal:hover {
  background: hsl(247.5, 12.6984126984%, 39.4117647059%);
}

.modal .modal-content {
  padding: 1.771vw 0;
}

.modal .modal-footer {
  text-align: right;
  border-top: 0.104vw solid rgba(114, 110, 142, 0.1);
}

.modal .modal-footer .btn {
  color: #fff;
  font-size: 1.042vw;
  font-weight: 600;
  line-height: 1.875vw;
  padding: 0.521vw 1.823vw;
  border-radius: 2.604vw;
  margin-top: 1.458vw;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 1.042vw;
}

.modal .modal-footer .btn.primary {
  background-color: #6366f1;
  border: none;
}

.modal .modal-footer .btn.primary:hover {
  background-color: rgb(52.2, 56.1, 236.8);
}

.modal .modal-footer .btn.secondary {
  background-color: #726e8e;
  border: none;
}

.modal .modal-footer .btn.secondary:hover {
  background-color: hsl(247.5, 12.6984126984%, 39.4117647059%);
}

.icon-checkboxes {
  gap: 1.042vw;
  display: flex;
  align-items: center;
}

.icon-checkboxes input[type='checkbox'] {
  display: none;
}

.icon-checkboxes input[type='checkbox']:checked + label {
  border: 0.104vw solid #6366f1;
  background-color: rgba(99, 102, 241, 0.1);
}

.icon-checkboxes .icon-checkbox {
  width: 3.125vw;
  height: 3.125vw;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.938vw;
  background-color: #0a0a18;
}

.icon-checkboxes .icon-checkbox img {
  width: 1.667vw;
  height: auto;
}

.tooltip {
  position: fixed;
  /* --- neues Look & Feel --- */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(15, 16, 38, 0.92); /* dunkles „Glas“ */
  color: #e7eaff;
  font-size: 0.729vw;
  padding: 0.625vw 0.781vw; /* etwas mehr Luft */
  border-radius: 0.521vw;
  border: 1px solid rgba(99, 102, 241, 0.45); /* indigo-border */
  box-shadow: 0 0.833vw 2.083vw rgba(0, 0, 0, 0.45), inset 0 0.052vw 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(0.625vw);
  backdrop-filter: blur(0.625vw);

  z-index: 9999999;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  max-width: 15.625vw;
  text-align: center;
  line-height: 1.3;
  /* position wird per JS via top/left gesetzt */
  top: 0;
  left: 0;
  /* Compensate for html zoom:0.88 */
  zoom: calc(1 / 0.88);
}

/* Pfeil */
.tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -0.417vw;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 0.417vw solid transparent;
  border-right: 0.417vw solid transparent;
  border-bottom: 0.417vw solid rgba(15, 16, 38, 0.92);
  filter: drop-shadow(0 -0.052vw 0 rgba(99, 102, 241, 0.45)); /* dünner Rahmen-Effekt */
}

/* Sichtbar wie gehabt */
.tooltip.show {
  opacity: 1;
  transform: scale(1);
}

.form-group {
  margin-bottom: 1.563vw;
}

.form-group label {
  display: block;
  font-size: 1.042vw;
  font-weight: 600;
  margin-bottom: 1.042vw;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 1.042vw;
  color: #fff;
  height: 3.646vw;
  background-color: #0a0a18;
  border-radius: 0.833vw;
  border: none;
  outline: none;
  font-size: 0.938vw;
  font-family: 'Roboto', sans-serif;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #6366f1;
}

.form-group input::-moz-placeholder,
.form-group textarea::-moz-placeholder {
  color: #726e8e;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #726e8e;
}

.form-group textarea {
  min-height: 8.333vw;
  resize: none;
}

.form-group .select2-container .select2-selection--multiple {
  padding: 0.99vw;
  border-radius: 0.833vw;
}

.form-group .select2-container .select2-selection--multiple textarea {
  height: 18px;
  min-height: auto;
  border-radius: 0;
  font-size: 0.938vw;
}

.loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite;
}

.loader::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 5px solid #6366f1;
  animation: prixClipFix 2s linear infinite;
}

.loader.block {
  display: block;
  margin: 0 auto;
}

.loader.secondary::before {
  border-color: #fff;
}

.loader.small {
  width: 24px;
  height: 24px;
}

.loader.small::before {
  border-width: 2.5px;
}

.loader.large {
  width: 72px;
  height: 72px;
}

.loader.large::before {
  border-width: 7.5px;
}

.cover-link {
  text-decoration: none;
  color: inherit;
}

.tab-pane {
  opacity: 0;
  transition: opacity 0.2s;
  display: none;
}

.tab-pane.active {
  display: block;
  opacity: 1;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes prixClipFix {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }

  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }

  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }

  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }

  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}

.navbar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  top: var(--lb-sale-h, 0px);
  left: 0;
  width: 100%;
  position: fixed;
  padding: 1.5625vw 4.1667vw;
  background-color: rgba(0, 0, 0, 0);
  z-index: 1000010;
  transition: background-color 0.3s ease, padding 0.3s ease, top 0.3s ease;
}

.navbar-top.scrolled {
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0.208vw 0.625vw rgba(0, 0, 0, 0.5);
  padding: 0.8vw 4.1667vw;
}

.navbar-top .left,
.navbar-top .right {
  display: flex;
  align-items: center;
}

.navbar-top .left {
  gap: 3.125vw;
}

.navbar-top .right {
  gap: 1.0417vw;
}

.navbar-top .right .btn {
  padding: 0.808vw 1.9792vw;
  gap: 0.5208vw;
  display: flex;
  align-items: center;
}

.navbar-top .right .btn img {
  width: 1.3021vw;
  height: auto;
  border-radius: 0.2604vw;
}

.navbar-top img {
  width: auto;
  height: 4.1667vw;
}

.navbar-top ul {
  gap: 3.125vw;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.navbar-top ul li a {
  color: #fff;
  font-size: 1.25vw;
  font-weight: 400;
  text-decoration: none;
}

.navbar-mobile {
  display: none;
}

/* =========================================
   Boosting Mega Dropdown – new.lolboost.gg
   ========================================= */

/* <li> mit Mega-Menü */
.navbar-top .nav-has-mega {
  position: relative;
}

/* Unsichtbare Brücke zwischen Link und Dropdown,
   damit Hover beim Runterfahren nicht abreißt */
.navbar-top .nav-has-mega::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 18px;
}

/* Link "Boosting" */
.navbar-top .nav-has-mega > a.mega-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.navbar-top .nav-has-mega > a.mega-link i {
  font-size: 0.9vw;
}

/* ---------------------------
   Mega-Dropdown Container
   --------------------------- */

.navbar-top .mega-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 18px); /* Abstand nach unten */
  background: #110f1f; /* einfarbiger Background */
  border-radius: 26px;
  border: 0.13vw solid #232040;
  min-width: 640px;
  max-width: 720px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, visibility 0.16s ease;
  z-index: 1000010;
  overflow: hidden;
}

/* Inhalt (falls du später Effekte hinzufügst) */
.navbar-top .mega-dropdown > * {
  position: relative;
  z-index: 1;
}

/* Öffnen auf Hover / Fokus – nur Desktop */
@media (min-width: 992px) {
  .navbar-top .nav-has-mega:hover .mega-dropdown,
  .navbar-top .nav-has-mega:focus-within .mega-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Mobile: kein Mega-Menü, da eigenes Mobile-Nav */


/* ====================================
   Services Grid (LoL only – mega-pill)
   ==================================== */

.navbar-top .mega-services-only {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin-top: 10px;
}

/* Grundzustand Pill – dunkel */
.navbar-top .mega-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background-color: #18162b;
  color: #e5e7ff;
  font-size: 0.86rem;
  font-weight: 500;
  border: 0.13vw solid #232040;
  box-shadow: none;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease;
  white-space: nowrap;
}

/* Icon-Kreis mit Abstand zur Border */
.navbar-top .mega-pill .icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.13vw solid #232040;
  box-sizing: border-box;
}

/* SVG-Icon: weiß */
.navbar-top .mega-pill .mega-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  filter: brightness(0) invert(1); /* weiß */
  transition: filter 0.3s ease;
}

/* Text direkt neben dem Icon */
.navbar-top .mega-pill .label {
  display: flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
}

/* Hover – rgb(99,102,241) + Icon-Kreis #110f1f */
.navbar-top .mega-pill:hover {
  background: rgb(99, 102, 241);
  border-color: #232040; /* gleiche Farbe, nur sauber gesetzt */
  color: #fdfdff;
  transform: translateY(-1px);
}

.navbar-top .mega-pill:hover .icon-circle {
  background: #110f1f; /* <--- wie gewünscht */
  border-color: #232040;
}

/* Icon bleibt weiß auf Hover */
.navbar-top .mega-pill:hover .mega-icon {
  filter: brightness(0) invert(1);
}

/* Navbar-Hover-Farbe für Hauptlinks */
.navbar-top .left ul li > a:hover,
.navbar-top .left ul li > a:focus-visible {
  color: rgb(99, 102, 241);
}

footer .content {
  padding: 3.125vw 7.8125vw 2.0833vw;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

footer .logo-footer {
  width: 26.3021vw;
  height: auto;
  margin-bottom: 1.0417vw;
}

footer p {
  font-size: 0.7292vw;
  line-height: 1.6667vw;
  color: #726e8e;
  width: 41.6667vw;
}

footer .right {
  gap: 10.4167vw;
  display: flex;
  align-items: flex-start;
}

footer .right h5 {
  font-size: 1.25vw;
  font-weight: 600;
  margin-bottom: 1.0938vw;
}

footer .right h5 i {
  font-size: 1.25vw;
  margin-right: 0.625vw;
}

footer .right ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

footer .right ul li {
  font-size: 0.8333vw;
  line-height: 1.875vw;
  color: #726e8e;
}

footer .right ul li a {
  color: #726e8e;
  text-decoration: none;
}

footer .right ul li a:hover {
  color: #6366f1;
}

footer .footer-bottom {
  padding: 1.5625vw 7.8125vw;
  border-top: 0.0521vw solid #232040;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

footer .footer-bottom p {
  font-size: 0.9375vw;
  color: #726e8e;
}

footer .footer-bottom .social-icons {
  gap: 1.0417vw;
  display: flex;
}

footer .footer-bottom .social-icons a {
  color: #fff;
  font-size: 1.0417vw;
  text-decoration: none;
}

footer .footer-bottom .social-icons a:hover {
  color: #6366f1;
}

.sec-get-started {
  padding: 8.4375vw 0;
  text-align: center;
}

.sec-get-started.one {
  background: url('../images/get-started-1.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.sec-get-started.two {
  background: url('../images/get-started-2.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.sec-get-started.three {
  background: url('../images/get-started-3.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.sec-get-started h2 {
  font-size: 3.125vw;
  font-weight: 500;
  line-height: 4.0625vw;
  margin-bottom: 1.0417vw;
}

.sec-get-started p {
  font-size: 0.9375vw;
  line-height: 2.0833vw;
  color: #726e8e;
  margin-bottom: 2.6042vw;
}

.sec-get-started .btn {
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.7812vw 1.8229vw;
}

.testimonials-sec {
  padding: 10.4167vw 6.5104vw;
  padding-right: 0;
}

.testimonials-sec .content {
  gap: 3.125vw;
  display: flex;
}

.testimonials-sec .left {
  width: 28.125vw;
}

.testimonials-sec .left h2 {
  font-size: 3.125vw;
  font-weight: 500;
  line-height: 4.0625vw;
  margin-bottom: 1.0417vw;
}

.testimonials-sec .left p {
  font-size: 1.4583vw;
  line-height: 2.6042vw;
  color: #726e8e;
  margin-bottom: 3.125vw;
}

.testimonials-sec .slider-nav {
  gap: 0.8333vw;
  display: flex;
}

.testimonials-sec .slider-nav button {
  background: rgba(0, 0, 0, 0);
  border: 0.0521vw solid #232040;
  border-radius: 2.6042vw;
  width: 3.9583vw;
  height: 3.9583vw;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.testimonials-sec .slider-nav button i {
  font-size: 1.1979vw;
  color: #726e8e;
}

.testimonials-sec .slider-nav button:hover {
  background-color: rgba(99, 102, 241, 0.1);
}

.testimonials-sec .testimonials {
  flex: 1;
  min-width: 0;
}

.testimonials-sec .testimonial {
  padding: 1.5625vw;
  margin-right: 3.125vw;
  border-radius: 3.125vw;
  border: 0.0521vw solid #232040;
  height: 100%;
  min-height: 27.2917vw;
  position: relative;
}

.testimonials-sec .testimonial::before {
  content: '';
  position: absolute;
  top: 7.5521vw;
  left: 1.5625vw;
  width: 4.1667vw;
  height: 2.6042vw;
  background: url('../images/landing/comma.svg');
  background-size: 4.1667vw;
  background-repeat: no-repeat;
  background-position: center;
}

.testimonials-sec .testimonial::after {
  content: '';
  position: absolute;
  bottom: 1.5625vw;
  right: 1.5625vw;
  width: 4.1667vw;
  height: 2.6042vw;
  background: url('../images/landing/comma-reverse.svg');
  background-size: 4.1667vw;
  background-repeat: no-repeat;
  background-position: center;
}

.testimonials-sec .testimonial .details {
  gap: 1.0417vw;
  display: flex;
  align-items: center;
}

.testimonials-sec .testimonial .details h5 {
  font-size: 1.1458vw;
  font-weight: 500;
  margin-bottom: 0.5208vw;
}

.testimonials-sec .testimonial .details .rank {
  display: block;
  font-size: 0.8333vw;
  font-weight: 300;
  color: #6366f1;
}

.testimonials-sec .testimonial .avatar {
  width: 5.2083vw;
  height: 5.2083vw;
  border-radius: 2.0833vw;
  -o-object-fit: cover;
  object-fit: cover;
}

.testimonials-sec .testimonial .review {
  padding: 4.1667vw 0;
  color: #726e8e;
}

/* =========================================================
   Testimonials – continuous 2-row marquee (website style)
   Replaces the old slick slider navigation.
   ========================================================= */

/* =========================================================
   Trust Section (Community Trust)
   Centered heading + rating badge + 2-row continuous marquee.
   ========================================================= */

.trust-sec{
  padding: 8.5vw 6.5104vw;
}

.trust-sec .trust-container{
  position: relative;
}

.trust-sec .trust-head{
  text-align: center;
  max-width: 62rem;
  margin: 0 auto 3.4vw;
}

.trust-sec .trust-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  border: 0.0521vw solid rgba(139,140,245,0.35);
  background: rgba(15, 23, 42, 0.35);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: #8b8cf5;
  margin-bottom: 1.15rem;
}

.trust-sec h2{
  font-size: 3.125vw;
  font-weight: 600;
  line-height: 4.0625vw;
  margin-bottom: 0.9rem;
}

.trust-sec p{
  font-size: 1.1458vw;
  line-height: 2.4vw;
  color: #726e8e;
  margin: 0 auto 2.2vw;
}

.trust-sec .trust-rating{
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 1.25rem 1.35rem;
  border-radius: 1.25rem;
  border: 0.0521vw solid #232040;
  background: rgba(10, 10, 24, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.trust-sec .trust-rating-title{
  font-size: 1.1458vw;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.trust-sec .trust-rating-title strong{
  color: #8b8cf5;
  font-weight: 600;
}

.trust-sec .trust-stars{
  display: flex;
  gap: 0.25rem;
  align-items: center;
  margin-bottom: 0.25rem;
}

.trust-sec .trust-stars i{
  color: #8b8cf5;
  font-size: 1.05rem;
}

.trust-sec .trust-count{
  font-size: 0.9rem;
  color: #726e8e;
}

.trust-sec .trust-score{
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 0.0521vw solid rgba(139,140,245,0.40);
  background: rgba(139,140,245,0.10);
  color: #8b8cf5;
  font-weight: 700;
  font-size: 1.35rem;
  white-space: nowrap;
}

.trust-sec .trust-score span{
  font-weight: 500;
  opacity: 0.9;
  margin-left: 0.1rem;
}

/* testimonial card style (same as old, but scoped to trust section) */
.trust-sec .testimonial{
  padding: 1.5625vw;
  border-radius: 3.125vw;
  border: 0.0521vw solid #232040;
  height: 100%;
  min-height: 27.2917vw;
  position: relative;
  background-color: rgba(10, 10, 24, 0.35);
}

.trust-sec .testimonial::before{
  position: absolute;
  top: 7.5521vw;
  left: 1.5625vw;
  width: 4.1667vw;
  height: 2.6042vw;
  background: url('../images/landing/comma.svg');
  background-size: 4.1667vw;
  background-repeat: no-repeat;
  background-position: center;
}

.trust-sec .testimonial::after{
  content: '';
  position: absolute;
  bottom: 1.5625vw;
  right: 1.5625vw;
  width: 4.1667vw;
  height: 2.6042vw;
  background: url('../images/landing/comma-reverse.svg');
  background-size: 4.1667vw;
  background-repeat: no-repeat;
  background-position: center;
}

.trust-sec .testimonial .details{
  gap: 1.0417vw;
  display: flex;
  align-items: center;
}

.trust-sec .testimonial .details h5{
  font-size: 1.1458vw;
  font-weight: 500;
  margin-bottom: 0.5208vw;
}

.trust-sec .testimonial .details .rank{
  display: block;
  font-size: 0.8333vw;
  font-weight: 300;
  color: #6366f1;
}

.trust-sec .testimonial .avatar{
  width: 5.2083vw;
  height: 5.2083vw;
  border-radius: 2.0833vw;
  object-fit: cover;
}

.trust-sec .testimonial .review{
  padding: 4.1667vw 0;
  color: #726e8e;
}

/* marquee wrapper for trust section */
.trust-sec .trust-marquee{
  position: relative;
  overflow: hidden;
}

.trust-sec .trust-marquee::before,
.trust-sec .trust-marquee::after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(64px, 10vw, 160px);
  pointer-events: none;
  z-index: 2;
}

.trust-sec .trust-marquee::before{
  left: 0;
  background: linear-gradient(90deg, #110f1f 0%, rgba(17,15,31,0) 100%);
}

.trust-sec .trust-marquee::after{
  right: 0;
  background: linear-gradient(270deg, #110f1f 0%, rgba(17,15,31,0) 100%);
}

.trust-sec .marquee-row{
  overflow: hidden;
  padding: 6px 0;
}

.trust-sec .marquee-track{
  display: flex;
  width: max-content;
  gap: clamp(14px, 1.6vw, 28px);
  animation-duration: var(--duration, 42s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.trust-sec .marquee-row[data-direction="left"] .marquee-track{ animation-name: testimonials-marquee-left; }
.trust-sec .marquee-row[data-direction="right"] .marquee-track{ animation-name: testimonials-marquee-right; }

.trust-sec .marquee-row:hover .marquee-track{ animation-play-state: paused; }

.trust-sec .trust-marquee .testimonial{
  flex: 0 0 auto;
  width: clamp(260px, 22vw, 420px);
  min-height: clamp(240px, 22vw, 320px);
}

.trust-sec .trust-marquee .testimonial .review{
  padding: clamp(22px, 2.4vw, 42px) 0;
}

@media (max-width: 900px){
  .trust-sec{ padding: 72px 22px; }
  .trust-sec h2{ font-size: 32px; line-height: 40px; }
  .trust-sec p{ font-size: 16px; line-height: 24px; }
  /* Mobile: center the rating card content */
  .trust-sec .trust-rating{ flex-direction: column; align-items: center; text-align: center; }
  .trust-sec .trust-rating-left{ width: 100%; display: flex; flex-direction: column; align-items: center; }
  .trust-sec .trust-stars{ justify-content: center; }
  .trust-sec .trust-score{ align-self: center; }
  .trust-sec .trust-rating-title{ font-size: 16px; }

  /* Mobile: make avatar + name + rank readable */
  .trust-sec .testimonial .details{ gap: 12px; }
  .trust-sec .testimonial .avatar{ width: 56px; height: 56px; border-radius: 18px; }
  .trust-sec .testimonial .details h5{ font-size: 17px; margin-bottom: 6px; }
  .trust-sec .testimonial .details .rank{ font-size: 14px; }
}

#login_modal,
#forgot_password_modal,
#guest_checkout_modal {
  width: 28.646vw !important;
}

#login_modal .modal-header,
#forgot_password_modal .modal-header,
#guest_checkout_modal .modal-header {
  justify-content: end;
  border-bottom: none;
}

#login_modal .modal-content,
#forgot_password_modal .modal-content,
#guest_checkout_modal .modal-content {
  padding-bottom: 0;
}

/* Nav-Tabs Container im Modal */
#login_modal .nav-tabs,
#forgot_password_modal .nav-tabs,
#guest_checkout_modal .nav-tabs {
  background: rgba(15, 23, 42, 0.95);
  border-radius: 999px;
  padding: 0.4rem;
  display: flex;
  gap: 0.35rem;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 0 0 1px rgba(148, 163, 253, 0.35);
  margin-bottom: 1.1rem;
}

/* Einzelner Tab */
#login_modal .nav-tabs a,
#forgot_password_modal .nav-tabs a,
#guest_checkout_modal .nav-tabs a {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 0.45rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.8);
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

/* Hover-State */
#login_modal .nav-tabs a:hover,
#forgot_password_modal .nav-tabs a:hover,
#guest_checkout_modal .nav-tabs a:hover {
  background: rgba(79, 70, 229, 0.22);
  color: #e5e7eb;
  transform: translateY(-1px);
}

/* Aktiver Tab (class="active") */
#login_modal .nav-tabs a.active,
#forgot_password_modal .nav-tabs a.active,
#guest_checkout_modal .nav-tabs a.active {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(99, 102, 241, 0.9);
}

/* Icon im aktiven Tab */
#login_modal .nav-tabs a.active i,
#forgot_password_modal .nav-tabs a.active i,
#guest_checkout_modal .nav-tabs a.active i {
  color: #ffffff;
}

/* Mobile Anpassung – Größe wie bei dir, Icons extra größer */


#login_modal form .form-group label,
#forgot_password_modal form .form-group label,
#guest_checkout_modal form .form-group label {
  margin-bottom: 0.417vw;
}

#login_modal form .remember-me,
#forgot_password_modal form .remember-me,
#guest_checkout_modal form .remember-me {
  gap: 0.521vw;
  display: flex;
  align-items: center;
}

/* Stylische Remember-Me Checkbox */
#login_modal form .remember-me input[type='checkbox'],
#forgot_password_modal form .remember-me input[type='checkbox'],
#guest_checkout_modal form .remember-me input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 0.9vw;
  height: 0.9vw;
  min-width: 14px;
  min-height: 14px;

  border-radius: 0.35vw;
  border: 1px solid rgba(148, 163, 253, 0.6);
  background: radial-gradient(circle at 30% 30%, #1f2937 0%, #020617 60%);
  cursor: pointer;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 0 0 1px rgba(15, 23, 42, 1), 0 0 10px rgba(79, 70, 229, 0);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease, border-color 0.2s ease;
}

/* Hover-Effekt */
#login_modal form .remember-me input[type='checkbox']:hover,
#forgot_password_modal form .remember-me input[type='checkbox']:hover,
#guest_checkout_modal form .remember-me input[type='checkbox']:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 1), 0 0 14px rgba(99, 102, 241, 0.9);
  border-color: rgba(191, 219, 254, 0.9);
}

/* Checkmark (Haken) */
#login_modal form .remember-me input[type='checkbox']::after,
#forgot_password_modal form .remember-me input[type='checkbox']::after,
#guest_checkout_modal form .remember-me input[type='checkbox']::after {
  content: '';
  position: absolute;
  width: 45%;
  height: 65%;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(45deg) scale(0);
  transform-origin: center;

  transition: transform 0.15s ease-out;
}

/* Checked-State */
#login_modal form .remember-me input[type='checkbox']:checked,
#forgot_password_modal form .remember-me input[type='checkbox']:checked,
#guest_checkout_modal form .remember-me input[type='checkbox']:checked {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 1), 0 0 16px rgba(99, 102, 241, 1);
}

/* Checkmark (kleiner & mittig) */
#login_modal form .remember-me input[type='checkbox']::after,
#forgot_password_modal form .remember-me input[type='checkbox']::after,
#guest_checkout_modal form .remember-me input[type='checkbox']::after {
  content: '';
  position: absolute;
  width: 35%; /* kleiner */
  height: 55%; /* schlanker Haken */
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%) rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 0.15s ease-out;
}

/* sichtbarer Haken im Checked-State */
#login_modal form .remember-me input[type='checkbox']:checked::after,
#forgot_password_modal form .remember-me input[type='checkbox']:checked::after,
#guest_checkout_modal form .remember-me input[type='checkbox']:checked::after {
  transform: translate(-50%, -52%) rotate(45deg) scale(1);
}

#login_modal form .remember-me label,
#forgot_password_modal form .remember-me label,
#guest_checkout_modal form .remember-me label {
  margin: 0;
  font-size: 0.729vw;
  font-weight: 400;
}

#login_modal form .remember-me a,
#forgot_password_modal form .remember-me a,
#guest_checkout_modal form .remember-me a {
  margin-left: auto;
  font-size: 0.729vw;
  color: #6366f1;
  text-decoration: none;
}

#login_modal form .remember-me a:hover,
#forgot_password_modal form .remember-me a:hover,
#guest_checkout_modal form .remember-me a:hover {
  text-decoration: underline;
}

#login_modal form .submit-btn,
#forgot_password_modal form .submit-btn,
#guest_checkout_modal form .submit-btn {
  width: 100%;
  margin-top: 1.042vw;
  padding: 0.625vw;
  font-size: 0.938vw;
  font-weight: 600;
  color: #fff;
  background-color: #6366f1;
  border: none;
  border-radius: 0.625vw;
  cursor: pointer;
  transition: background-color 0.3s ease;
  min-height: 2.813vw;
}

#login_modal form .submit-btn:hover,
#forgot_password_modal form .submit-btn:hover,
#guest_checkout_modal form .submit-btn:hover {
  background-color: rgb(52.2, 56.1, 236.8);
}

#login_modal hr,
#forgot_password_modal hr,
#guest_checkout_modal hr {
  border: none;
  border-top: 0.104vw solid rgba(114, 110, 142, 0.1);
  margin: 1.042vw 0;
}

#login_modal .social-login,
#forgot_password_modal .social-login,
#guest_checkout_modal .social-login {
  gap: 0.521vw;
  display: flex;
  justify-content: center;
}

#login_modal .social-login a,
#forgot_password_modal .social-login a,
#guest_checkout_modal .social-login a {
  width: 100%;
  padding: 0.625vw;
  font-size: 0.833vw;
  font-weight: 600;
  color: #fff;
  border: none;
  border-radius: 0.625vw;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#login_modal .social-login a i,
#forgot_password_modal .social-login a i,
#guest_checkout_modal .social-login a i {
  margin-right: 0.417vw;
}

#login_modal .social-login a.google-login,
#forgot_password_modal .social-login a.google-login,
#guest_checkout_modal .social-login a.google-login {
  background-color: #db4437;
}

#login_modal .social-login a.google-login:hover,
#forgot_password_modal .social-login a.google-login:hover,
#guest_checkout_modal .social-login a.google-login:hover {
  background-color: hsl(4.756097561, 69.4915254237%, 43.7254901961%);
}

#login_modal .social-login a.discord-login,
#forgot_password_modal .social-login a.discord-login,
#guest_checkout_modal .social-login a.discord-login {
  background-color: #5865f2;
}

#login_modal .social-login a.discord-login:hover,
#forgot_password_modal .social-login a.discord-login:hover,
#guest_checkout_modal .social-login a.discord-login:hover {
  background-color: rgb(40.6833333333, 57.3666666667, 238.3166666667);
}

/* Password-Wrapper im Login-Modal */
#login_modal .password-wrapper {
  position: relative;
}

/* Platz rechts für das Eye-Icon */
#login_modal .password-wrapper input[type='password'],
#login_modal .password-wrapper input[type='text'] {
  padding-right: 2.4rem;
}

/* Eye-Button */
#login_modal .password-toggle {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #6366f1;
  transition: color 0.15s ease, transform 0.12s ease;
}

#login_modal .password-toggle:hover {
  color: #18162b;
  transform: translateY(-50%) scale(1.05);
}

#login_modal .password-toggle:active {
  transform: translateY(-50%) scale(0.97);
}

#login_modal .password-toggle i {
  font-size: 1.2rem;
}

/* MOBILE: Icon & Klickfläche größer machen */


#forgot_password_modal .modal-header,
#guest_checkout_modal .modal-header {
  justify-content: space-between;
}

#forgot_password_modal form .submit-btn {
  margin-top: 0;
}

#toast-container {
  position: fixed;
  top: 1.042vw;
  right: 1.042vw;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  gap: 0.625vw;
}

.toast {
  min-width: 13.542vw;
  max-width: 18.75vw;
  padding: 0.729vw 0.938vw;
  border-radius: 0.521vw;
  color: #fff;
  font-family: system-ui, sans-serif;
  box-shadow: 0 0.208vw 0.781vw rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(-0.781vw);
  animation: fadeSlide 0.4s forwards;
  display: flex;
  flex-direction: column;
  border-left: 0.313vw solid;
}

.toast-title {
  font-weight: 600;
  font-size: 0.781vw;
  margin-bottom: 0.208vw;
}

.toast-message {
  font-size: 0.729vw;
  line-height: 1.35;
}

.toast.primary,
.toast.success {
  background: #1e8f3b;
  border-left-color: #0f5d22;
}

.toast.danger {
  background: #d0342c;
  border-left-color: #8c1e19;
}

.toast.warning {
  background: #f0a500;
  border-left-color: #b97a00;
}

.toast.info {
  background: #1976d2;
  border-left-color: #104a86;
}

@keyframes fadeSlide {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(-0.521vw);
  }
}

.indicator-progress {
  display: none;
}

[data-indicator='on'] > .indicator-progress {
  display: inline-block;
}

[data-indicator='on'] > .indicator-label {
  display: none;
}

.alert {
  padding: 0.938vw;
  border-radius: 0.625vw;
  font-size: 0.833vw;
  line-height: 1;
  margin: 0.781vw 0;
  border: 0.104vw solid;
  color: #fff;
  box-shadow: 0 0.104vw 0.521vw rgba(0, 0, 0, 0.08);
}

.alert.success {
  background: rgba(30, 143, 59, 0.1882352941);
  border-color: #0f5d22;
}

.alert.danger {
  background: rgba(208, 52, 44, 0.1882352941);
  border-color: #8c1e19;
}

.alert.info {
  background: rgba(25, 118, 210, 0.1882352941);
  border-color: #104a86;
}

.alert.warning {
  background: rgba(240, 165, 0, 0.1882352941);
  border-color: #b97a00;
  color: #fff;
}

.alert.primary {
  background: rgba(59, 130, 246, 0.1882352941);
  border-color: #1d4ed8;
}

.alert.secondary {
  background: rgba(107, 114, 128, 0.1882352941);
  border-color: #4b5563;
}

.alert.dark {
  background: rgba(31, 41, 55, 0.1882352941);
  border-color: #111827;
}

.alert.light {
  background: rgba(229, 231, 235, 0.1882352941);
  border-color: #9ca3af;
  color: #111;
  box-shadow: 0 0.052vw 0.26vw rgba(0, 0, 0, 0.06);
}

.sidenav-mob {
  display: none;
}

.dropdown-menu {
  position: relative;
}

.dropdown-menu .dropdown-list {
  width: 100%;
  position: absolute;
  top: 110%;
  right: 0;
  background-color: #110f1f;
  border: 0.13vw solid #232040;
  border-radius: 0.781vw;
  padding: 0.326vw;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.651vw);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.dropdown-menu .dropdown-list .dropdown-item {
  width: 100%;
  padding: 0.521vw;
  font-size: 0.911vw;
  line-height: 1.302vw;
  color: #fff;
  border: none;
  background: none;
  border-radius: 0.391vw;
  gap: 0.521vw;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.dropdown-menu .dropdown-list .dropdown-item:last-child {
  margin-bottom: 0;
}

.dropdown-menu .dropdown-list .dropdown-item:hover {
  background-color: rgba(99, 102, 241, 0.1);
}

.dropdown-menu .dropdown-list .dropdown-item img {
  width: auto;
  height: 1.563vw;
  border-radius: 0.391vw;
}

.dropdown-menu .dropdown-list h6 {
  font-size: 0.781vw;
  font-weight: 600;
  color: #726e8e;
  margin: 0.326vw;
}

.dropdown-menu .dropdown-list hr {
  width: 90%;
  border: none;
  margin: 0.391vw auto;
  border-top: 0.13vw solid hsla(0, 0%, 100%, 0.2);
}

.dropdown-menu:hover .dropdown-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#send_tip_modal .quick-btns {
  gap: 0.521vw;
  display: flex;
  align-items: center;
  margin-bottom: 1.5625vw;
}

#send_tip_modal .quick-btns .quick-tip-btn {
  padding: 0.938vw;
  font-size: 0.938vw;
  border-radius: 0.625vw;
  background-color: #18162b;
  width: 100%;
  color: #fff;
  border: none;
  cursor: pointer;
  border: 2px solid #232040;
  transition: background-color 0.3s ease;
}

#send_tip_modal .quick-btns .quick-tip-btn:hover {
  background-color: rgb(5.1692307692, 4.7384615385, 9.2615384615);
}

#send_tip_modal .btn-input {
  display: flex;
  align-items: center;
}

#send_tip_modal .btn-input button {
  background-color: #18162b;
  border: none;
  color: #fff;
  font-size: 0.9375vw;
  padding: 0.938vw;
  height: 100%;
  cursor: pointer;
  border-radius: 0.625vw;
  border: 2px solid #232040;
  transition: background-color 0.3s ease;
}

#send_tip_modal .btn-input button:hover {
  background-color: rgb(5.1692307692, 4.7384615385, 9.2615384615);
}

#send_tip_modal .btn-input input {
  flex-grow: 1;
  margin: 0 0.521vw;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  text-align: center;
}

#send_tip_modal .btn-input input::-webkit-outer-spin-button,
#send_tip_modal .btn-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#send_tip_modal .submit-btn {
  width: 100%;
  padding: 0.938vw;
  font-size: 0.9375vw;
  font-weight: 600;
  color: #fff;
  background-color: #6366f1;
  border: none;
  border-radius: 0.625vw;
  cursor: pointer;
  transition: background-color 0.3s ease;
  min-height: 2.813vw;
}

#send_tip_modal .submit-btn:hover {
  background-color: rgb(52.2, 56.1, 236.8);
}

.landing header {
  overflow: hidden;
  background-image: url('../images/landing/header-bg.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  /* Landing hero must NOT be compacted. Keep original proportions. */
  min-height: 56.25vw;
  height: auto;
  display: flex;
  align-items: center;
}

.landing header .content {
  padding: 0 4.1667vw;
}

.landing header .jinx {
  bottom: 0;
  left: 50%;
  width: 52.604vw;
  position: absolute;
  transform: translateX(-50%);
}

.landing header .jinx-mobile {
  display: none;
}

.landing header .big-heading {
    color: #fff;
    text-align: center;
    font-size: 6.9vw;
    line-height: 8.0729vw;
    text-transform: uppercase;
    font-family: 'superchargestraight', sans-serif;
}    

.landing header .bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.landing header .bottom-content .left p {
  width: 35vw;
  font-size: 1.0417vw;
  line-height: 1.7708vw;
  margin-bottom: 1.7708vw;
}

.landing header .bottom-content .left .actions {
  position: relative;
  z-index: 10;
}

.landing header .bottom-content .left .actions a:first-child {
  margin-right: 1.0417vw;
}

.landing header .rating-bar {
  padding: 1.0417vw 1.5625vw;
  border-radius: 2.6042vw;
  background-color: hsla(0, 0%, 100%, 0.06);
  box-shadow: 0 0 1.5625vw 0 rgba(0, 0, 0, 0.1), inset 0 0 1.25vw 0 #fff;
  -webkit-backdrop-filter: blur(1.5625vw);
  backdrop-filter: blur(1.5625vw);
}

.landing header .rating-bar img {
  width: 6.0417vw;
  height: auto;
  margin-right: 0.7292vw;
  display: inline-block;
}

.landing header .rating-bar .rating-text {
  font-size: 1.0417vw;
  line-height: 1.7708vw;
  display: inline-block;
}

.landing .sec-one {
  padding: 8.0729vw 14.5833vw;
  background-image: url('../images/landing/sec-one-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.landing .sec-one h2 {
  font-size: 3.125vw;
  font-weight: 500;
  line-height: 4.0625vw;
  text-align: center;
  margin-bottom: 1.0417vw;
}

.landing .sec-one p {
  font-size: 0.9375vw;
  line-height: 2.0833vw;
  color: #726e8e;
  text-align: center;
  margin-bottom: 3.125vw;
}

.landing .sec-one .cards {
  gap: 4.1667vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing .sec-one .card {
  padding: 0.0521vw;
  border-radius: 3.125vw;
  display: inline-block;
  background: linear-gradient(180deg, #6366f1 0%, #fff 100%);
}

.landing .sec-one .card .content {
  padding: 1.5625vw;
  background-color: #18162b;
  border-radius: 3.125vw;
  position: relative;
}

.landing .sec-one .card .card-title {
  font-family: 'Friz Quadrata', sans-serif;
  font-size: 1.3021vw;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  margin: 1.5625vw 0;
}

.landing .sec-one .card:nth-child(2) .card-title {
  font-family: 'valorant', sans-serif;
}

.landing .sec-one .card .card-actions {
  gap: 0.4167vw;
  display: flex;
  align-items: center;
}

.landing .sec-one .card .card-actions .btn {
  width: 100%;
  height: 3.4375vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing .sec-one .card .card-actions .btn-icon {
  width: 3.4375vw;
  height: 3.4375vw;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.landing .sec-one .card .card-actions .btn-icon i {
  color: #6366f1;
}

.landing .sec-one .card .discount-badge {
  top: 0;
  right: 3.125vw;
  position: absolute;
  width: 5.2083vw;
  height: auto;
}

.landing .sec-two {
  padding-top: 2.6042vw;
}

.landing .sec-two .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5.2083vw;
}

.landing .sec-two .top .btn {
  padding: 0.7812vw 1.9792vw;
}

.landing .sec-two h3 {
  font-size: 3.125vw;
  font-weight: 500;
  line-height: 4.0625vw;
  margin-bottom: 0.625vw;
}

.landing .sec-two p {
  font-size: 1.4583vw;
  line-height: 2.6042vw;
  color: #726e8e;
}

.landing .sec-two .bottom {
  display: flex;
  align-items: end;
  padding-top: 50px;
}

.landing .sec-two .bottom > img {
  width: 100%;
  height: auto;
  max-width: 46.1458vw;
}

.landing .sec-two .boosters {
  flex: 1;
  min-width: 0;
  position: relative;
}

.landing .sec-two .boosters::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 15.625vw;
  height: 100%;
  background: linear-gradient(90deg, #110f1f 0%, rgba(17, 15, 31, 0) 100%);
}

.landing .sec-two .boosters.slick-track {
  margin-right: -50vw;
}

.landing .sec-two .boosters .booster {
  height: 100%;
  min-height: 24.0625vw;
  padding: 1.5625vw;
  margin-right: 1.0417vw;
  border-radius: 3.125vw;
  background-color: #0e0d1a;
}

.landing .sec-two .boosters .booster .details {
  gap: 1.0417vw;
  display: flex;
  align-items: center;
}

.landing .sec-two .boosters .booster .details h5 {
  font-size: 1.1458vw;
  font-weight: 500;
  margin-bottom: 0.5208vw;
}

.landing .sec-two .boosters .booster .details .rank {
  display: block;
  font-size: 0.8333vw;
  color: #726e8e;
}

.landing .sec-two .boosters .booster .avatar {
  width: 5.2083vw;
  height: 5.2083vw;
  border-radius: 2.0833vw;
  -o-object-fit: cover;
  object-fit: cover;
}

.landing .sec-two .boosters .booster .rating-rank {
  padding: 0.625vw 1.0417vw;
  background-color: #110f1f;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 1.0417vw;
  border: 0.0521vw solid #232040;
  margin: 1.0417vw 0 1.5625vw;
}

.landing .sec-two .boosters .booster .rating-rank .rating {
  font-size: 0.8333vw;
  font-weight: 500;
}

.landing .sec-two .boosters .booster .rating-rank .rating img {
  width: auto;
  height: 0.5208vw;
  margin-top: 0.3125vw;
}

.landing .sec-two .boosters .booster .rating-rank .rank-symbol {
  width: auto;
  height: 2.3438vw;
}

.landing .sec-two .boosters .booster .roles {
  gap: 0.5208vw;
  display: flex;
}

.landing .sec-two .boosters .booster .roles .role {
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.7292vw;
  border-radius: 1.0417vw;
  background-color: rgba(255, 255, 255, 0.06);
}

.landing .sec-two .boosters .booster .roles .role img {
  width: 1.5625vw;
  height: 1.5625vw;
  -o-object-fit: contain;
  object-fit: contain;
}

.landing .sec-two .boosters .booster .champions {
  gap: 0.5208vw;
  display: flex;
  flex-wrap: wrap;
  margin-top: 1.5625vw;
}

.landing .sec-two .boosters .booster .champions .champion-icon {
  width: 1.9792vw;
  height: 1.9792vw;
  border-radius: 0.5208vw;
}

.landing .sec-three {
  padding: 10.4167vw 10vw;
  gap: 3.125vw;
  display: flex;
  align-items: stretch;
}

.landing .sec-three .card {
  padding: 2.6042vw;
  text-align: center;
  width: 100%;
  max-width: 43.2292vw;
  border-radius: 4.1667vw;
  background: url('../images/landing/sec-three-card-bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.landing .sec-three .card .actions {
  gap: 1.0417vw;
  display: flex;
  justify-content: center;
}

.landing .sec-three .card h5 {
  font-size: 1.6667vw;
  font-weight: 500;
  line-height: 2.2917vw;
  margin-bottom: 0.625vw;
}

.landing .sec-three .card p {
  font-size: 0.9375vw;
  line-height: 1.7708vw;
  color: #726e8e;
  margin-bottom: 2.0833vw;
}

.landing .sec-three .card .flags {
  margin-bottom: 1.0417vw;
}

.landing .sec-three .card img {
  margin: 0 auto;
}

.landing .sec-three .card.card-one > img {
  margin-bottom: 3.2292vw;
}

.landing .sec-three .card.card-two {
  background: url('../images/landing/sec-three-card-bg-reverse.webp');
  background-position: bottom center;
  background-size: cover;
  background-repeat: no-repeat;
}

.landing .sec-three .card.card-two > img {
  margin-top: 4.375vw;
}

.landing .sec-four {
  padding: 3.125vw 0;
  background-color: #0e0d1a;
}

.landing .sec-four h3 {
  font-size: 2.083vw;
  font-weight: 500;
  margin-bottom: 3.125vw;
  margin-left: 5.208vw;
}

.landing .sec-four h3 .badge {
  font-size: 1.563vw;
  font-weight: 500;
  color: #6366f1;
  margin-left: 1.25vw;
  padding: 0.521vw 1.302vw;
  border-radius: 10.417vw;
  background-color: #18162b;
  border: 0.052vw solid #232040;
}

.landing .sec-four .orders .order-card {
  padding: 1.042vw;
  max-width: 31.25vw;
  margin-right: 2.604vw;
  border-radius: 2.083vw;
  border: 0.052vw solid #232040;
}

.landing .sec-four .orders .order-card .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing .sec-four .orders .order-card .top .left {
  gap: 0.625vw;
  display: flex;
  align-items: center;
}

.landing .sec-four .orders .order-card .top .left img {
  width: 3.125vw;
  height: 3.125vw;
}

.landing .sec-four .orders .order-card .top .left h6 {
  font-size: 0.677vw;
  font-weight: 600;
  color: #726e8e;
}

.landing .sec-four .orders .order-card .top .left h5 {
  font-size: 1.042vw;
  font-weight: 300;
}

.landing .sec-four .orders .order-card .top .right p {
  font-size: 0.833vw;
  font-weight: 300;
  color: #726e8e;
  text-align: end;
  margin-bottom: 0.729vw;
}

.landing .sec-four .orders .order-card .top .right p span {
  font-weight: 600;
  color: #6366f1;
}

.landing .sec-four .orders .order-card .top .right .progress-container {
  width: 15.625vw;
  height: 0.26vw;
  border-radius: 2.083vw;
  background-color: #232040;
}

.landing .sec-four .orders .order-card .top .right .progress-container .progress-bar {
  height: 0.26vw;
  border-radius: 2.083vw;
  background-color: #6366f1;
}

.landing .sec-four .orders .order-card .middle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.781vw 0;
  margin: 1.042vw 0 1.563vw;
  border-top: 0.052vw solid #232040;
  border-bottom: 0.052vw solid #232040;
}

.landing .sec-four .orders .order-card .middle span {
  font-size: 0.938vw;
  color: #726e8e;
}

.landing .sec-four .orders .order-card .middle img {
  width: 0.833vw;
  height: auto;
}

.landing .sec-four .orders .order-card .bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing .sec-four .orders .order-card .bottom div:nth-child(2) span {
  text-align: center;
}

.landing .sec-four .orders .order-card .bottom div:nth-child(3) span {
  text-align: end;
}

.landing .sec-four .orders .order-card .bottom span {
  font-size: 0.677vw;
  font-weight: 600;
  color: #726e8e;
  margin-bottom: 0.313vw;
  width: 100%;
  display: block;
}

.landing .sec-four .orders .order-card .bottom p {
  display: flex;
  align-items: center;
  font-size: 0.938vw;
}

.landing .sec-four .orders .order-card .bottom p img {
  width: auto;
  height: 1.198vw;
  margin-right: 0.365vw;
}

.landing .sec-five {
  padding: 4.1667vw 5.2083vw;
  background: url('../images/landing/sec-five-bg.png');
  background-position: top right;
  background-size: contain;
  background-repeat: no-repeat;
}

.landing .sec-five h2 {
  font-size: 3.125vw;
  font-weight: 500;
  line-height: 4.0625vw;
  text-align: center;
  margin-bottom: 1.0417vw;
}

.landing .sec-five p {
  font-size: 0.9375vw;
  line-height: 2.0833vw;
  color: #726e8e;
  text-align: center;
  margin-bottom: 8.8542vw;
}

.landing .sec-five .method-cards .card {
  background-color: #110f1f;
  border-radius: 3.125vw;
  border: 0.0521vw solid #232040;
  padding: 1.5625vw;
  padding-left: 23.9583vw;
  max-width: 58.3333vw;
  position: relative;
}

.landing .sec-five .method-cards .card > img {
  left: 1.5625vw;
  bottom: 1.5625vw;
  position: absolute;
  width: 20.8333vw;
  height: auto;
}

.landing .sec-five .method-cards .card h5 {
  font-size: 0.9375vw;
  font-weight: 500;
  color: #6366f1;
  margin-bottom: 0.7292vw;
}

.landing .sec-five .method-cards .card h4 {
  font-size: 1.3542vw;
  font-weight: 500;
  margin-bottom: 0.5208vw;
}

.landing .sec-five .method-cards .card p {
  font-size: 0.8333vw;
  line-height: 1.5625vw;
  text-align: start;
  color: #726e8e;
  margin-bottom: 1.4583vw;
}

.landing .sec-five .method-cards .card:nth-child(2) {
  padding-left: 1.5625vw;
  padding-right: 23.9583vw;
  margin: 3.6458vw 0;
  margin-left: auto;
}

.landing .sec-five .method-cards .card:nth-child(2) > img {
  left: auto;
  right: 1.5625vw;
  bottom: 1.5625vw;
}

.landing .sec-six {
  padding: 5.2083vw;
  background-color: #0e0d1a;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background-image: url('../images/landing/sec-six-bg.webp');
  background-size: 47.3958vw;
  background-repeat: no-repeat;
  background-position: bottom left;
}

.landing .sec-six .left {
  max-width: 42.1875vw;
}

.landing .sec-six .left h2 {
  font-size: 2.9167vw;
  font-weight: 500;
  line-height: 4.0625vw;
  margin-bottom: 0.4167vw;
}

.landing .sec-six .left p {
  font-size: 1.0417vw;
  line-height: 1.875vw;
  color: #726e8e;
  margin-bottom: 2.6042vw;
}

.landing .sec-six .left .btn {
  padding: 0.7812vw 1.8229vw;
}

.landing .sec-six .right {
  gap: 1.0417vw;
  display: grid;
}

.landing .sec-six .feature-item {
  padding: 0.0521vw;
  border-radius: 2.0833vw;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #6366f1 100%);
  max-width: 37.5vw;
}

.landing .sec-six .feature-item:nth-child(even) .content {
  justify-self: end;
  width: 100%;
  text-align: end;
  flex-direction: row-reverse;
}

.landing .sec-six .feature-item .content {
  padding: 0.7812vw;
  background-color: #0e0d1a;
  border-radius: 2.0833vw;
  gap: 1.0417vw;
  display: flex;
  align-items: center;
  position: relative;
}

.landing .sec-six .feature-item .content h4 {
  font-size: 1.1458vw;
  font-weight: 500;
}

.landing .sec-six .feature-item .content h4 p {
  margin-top: 0.4167vw;
  color: #726e8e;
  font-weight: 400;
}

.landing .sec-six .feature-item .icon {
  width: 4.6875vw;
  height: 4.6875vw;
  border-radius: 1.1458vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #6366f1;
}

.landing .sec-six .feature-item .icon i {
  font-size: 1.5625vw;
}

.landing .sec-faqs {
  padding: 5.2083vw;
  background-color: #0e0d1a;
}

.landing .sec-faqs .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4.1667vw;
}

.landing .sec-faqs .top h4 {
  font-size: 2.6042vw;
  font-weight: 500;
  line-height: 4.0625vw;
  width: 39.5833vw;
}

.landing .sec-faqs .top p {
  font-size: 1.25vw;
  line-height: 2.7083vw;
  width: 29.4792vw;
  color: #726e8e;
}

.landing .sec-faqs .top p span {
  color: #6366f1;
}

.landing .payments-sec {
  padding: 2.8646vw 8.3333vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing .payments-sec img {
  width: auto;
  max-width: 100%;
  height: auto;
}

.landing .games-sec {
  padding: 2.8646vw 0;
  gap: 1.5625vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0e0d1a;
}

.landing .games-sec .btn {
  padding: 0.7812vw 1.8229vw;
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  font-weight: 400;
  border: none;
  background-color: #110f1f;
}

.landing .games-sec .btn i {
  font-size: 1.0417vw;
  margin-right: 0.5208vw;
  color: #6366f1;
}

.landing .games-sec .btn img {
  width: auto;
  height: 1.0417vw;
  margin-right: 0.5208vw;
}

.lol-boost header {
  height: auto;
  min-height: 0;
  background: none !important;
  display: block;
}

.lol-boost header .content {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 28px;
  text-align: center;
}

.lol-boost header h1 {
  font-size: 6.771vw;
  line-height: 8.333vw;
  margin-bottom: 1.563vw;
  text-transform: uppercase;
  font-family: 'superchargestraight', sans-serif;
}

.lol-boost header p {
  font-size: 1.042vw;
  line-height: 1.875vw;
}

.lol-boost header.one { background: none !important; }

.lol-boost header.two { background: none !important; }

.lol-boost header.three { background: none !important; }

.lol-boost header.four { background: none !important; }

.lol-boost #champions_roles_modal h4.heading {
  gap: 1.042vw;
  font-size: 1.458vw;
  display: flex;
  align-items: center;
}

.lol-boost #champions_roles_modal h4.heading .bullet {
  width: 2.188vw;
  height: 2.188vw;
  border-radius: 50%;
  background-color: rgba(10, 10, 24, 0.5);
  font-size: 0.833vw;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lol-boost #champions_roles_modal h4.heading .badge {
  border-radius: 0.521vw;
  font-size: 0.729vw;
  font-weight: 600;
}

.lol-boost #champions_roles_modal .icon-checkboxes {
  margin: 1.823vw 0;
}

.lol-boost #champions_roles_modal .icon-checkboxes img {
  filter: contrast(1) brightness(2);
}

.lol-boost #champions_roles_modal .select2 {
  margin: 1.823vw 0;
}

.lol-boost .rank-types-nav {
  margin: 6.25vw 4.167vw 4.167vw;
  gap: 1.042vw;
  display: flex;
  justify-content: center;
  zoom: 0.8;
}

.lol-boost .rank-types-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 1.563vw;
  text-decoration: none;
  background-color: rgba(99, 102, 241, 0.1);
  width: 8.229vw;
  height: 9.063vw;
}

.lol-boost .rank-types-nav .nav-item.active {
  z-index: 0;
  position: relative;
}

.lol-boost .rank-types-nav .nav-item.active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.104vw;
  background: linear-gradient(180deg, #6366f1 0%, #fff 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
}

.lol-boost .rank-types-nav .nav-item.active img {
  filter: brightness(0) invert(1);
}

.lol-boost .rank-types-nav .nav-item.active span {
  color: #fff;
}

.lol-boost .rank-types-nav .nav-item:hover img {
  filter: brightness(0) invert(1);
}

.lol-boost .rank-types-nav .nav-item:hover span {
  color: #fff;
}

.lol-boost .rank-types-nav .nav-item img {
  width: auto;
  height: auto;
  margin-bottom: 1.042vw;
  transition: filter 0.3s ease;
}

.lol-boost .rank-types-nav .nav-item span {
  font-size: 1.146vw;
  line-height: 1.563vw;
  text-align: center;
  color: #726e8e;
  transition: color 0.3s ease;
}

.lol-boost .form-content {
  padding: 0 4.167vw 6.771vw;
  gap: 1.042vw;
  display: grid;
  grid-template-columns: 60.677vw auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.lol-boost .form-content .boost-form {
  zoom: 0.8;
}

.lol-boost .form-content .boost-form .card {
  padding: 2.083vw;
  background-color: rgba(99, 102, 241, 0.1);
  border-radius: 2.604vw;
  border: 0.052vw solid #191735;
}

.lol-boost .form-content .boost-form .card .card-header {
  gap: 1.563vw;
  display: flex;
  align-items: start;
}

.lol-boost .form-content .boost-form .card .card-header img {
  width: 3.854vw;
  height: auto;
}

.lol-boost .form-content .boost-form .card .card-header h3 {
  font-size: 1.667vw;
  font-weight: 600;
}

.lol-boost .form-content .boost-form .card .card-header p {
  font-size: 0.833vw;
  font-weight: 600;
  color: #726e8e;
}

.lol-boost .form-content .boost-form .card.count-card .count {
  width: 4.375vw;
  height: 4.375vw;
  border-radius: 50%;
  background-color: rgba(10, 10, 24, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.188vw;
  font-weight: 500;
}

.lol-boost .form-content .boost-form .ranks,
.lol-boost .form-content .boost-form .divisions {
  gap: 1.042vw;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 1.563vw;
}

.lol-boost .form-content .boost-form .ranks input[type='radio'],
.lol-boost .form-content .boost-form .divisions input[type='radio'] {
  display: none;
}

.lol-boost .form-content .boost-form .ranks input[type='radio']:checked + .rank-btn,
.lol-boost .form-content .boost-form .ranks input[type='radio']:checked + .division-btn,
.lol-boost .form-content .boost-form .divisions input[type='radio']:checked + .rank-btn,
.lol-boost .form-content .boost-form .divisions input[type='radio']:checked + .division-btn {
  z-index: 0;
  position: relative;
}

.lol-boost .form-content .boost-form .ranks input[type='radio']:checked + .rank-btn::after,
.lol-boost .form-content .boost-form .ranks input[type='radio']:checked + .division-btn::after,
.lol-boost .form-content .boost-form .divisions input[type='radio']:checked + .rank-btn::after,
.lol-boost .form-content .boost-form .divisions input[type='radio']:checked + .division-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.104vw;
  background: linear-gradient(180deg, #6366f1 0%, #fff 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
}

.lol-boost .form-content .boost-form .divisions {
  gap: 0.938vw;
  margin: 0;
}

.lol-boost .form-content .boost-form .rank-btn,
.lol-boost .form-content .boost-form .division-btn {
  display: block;
  padding: 0.938vw;
  cursor: pointer;
  border-radius: 0.938vw;
  background-color: rgba(10, 10, 24, 0.5);
}

.lol-boost .form-content .boost-form .rank-btn img,
.lol-boost .form-content .boost-form .division-btn img {
  width: 2.083vw;
  height: auto;
}

.lol-boost .form-content .boost-form .rank-btn .tooltip,
.lol-boost .form-content .boost-form .division-btn .tooltip {
  display: none;
}

.lol-boost .form-content .boost-form .division-btn {
  color: #fff;
  font-size: 1.302vw;
  width: 3.906vw;
  height: 3.385vw;
  padding: 0;
  display: flex;
  align-items: center;
  place-content: center;
}

.lol-boost .form-content .boost-form .lp-selector h6 {
  font-size: 0.729vw;
  font-weight: 600;
  margin-bottom: 0.938vw;
}

.lol-boost .form-content .boost-form .lp-selector .input-container {
  width: 100%;
  border-radius: 0.833vw;
  background-color: rgba(10, 10, 24, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lol-boost .form-content .boost-form .lp-selector .input-container button {
  color: #fff;
  font-size: 0.938vw;
  padding: 0.885vw 1.146vw;
  background-color: #110f1f;
  cursor: pointer;
  border-radius: 0.833vw;
  border: 0.052vw solid #8f8f8f;
}

.lol-boost .form-content .boost-form .lp-selector .input-container input {
  color: #fff;
  font-size: 1.042vw;
  text-align: center;
  border: none;
  background-color: rgba(0, 0, 0, 0);
}

.lol-boost .form-content .boost-form .lp-selector .input-container input:focus {
  outline: none;
}

.lol-boost .form-content .boost-form .options {
  gap: 1.042vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2.604vw;
}

.lol-boost .form-content .boost-form .options .option {
  width: 100%;
}

.lol-boost .form-content .boost-form .options .option h6 {
  font-size: 0.729vw;
  font-weight: 600;
  margin-bottom: 0.521vw;
  margin-left: 1.042vw;
}

.lol-boost .form-content .boost-form .options-bar {
  gap: 1.042vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.083vw;
  margin-top: 1.042vw;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 2.604vw;
  border: 0.052vw solid #191735;
}

.lol-boost .form-content .boost-form .options-bar .option {
  width: 100%;
}

.lol-boost .form-content .boost-form .options-bar .option h6 {
  font-size: 0.929vw;
  font-weight: 600;
  margin-bottom: 0.833vw;
}

.lol-boost .form-content .boost-form .range-slider {
  margin: 10.417vw 0 5.208vw;
}

.lol-boost .form-content .boost-form .range-slider.noUi-target {
  border: none;
  background: none;
  box-shadow: none;
}

.lol-boost .form-content .boost-form .range-slider.noUi-target,
.lol-boost .form-content .boost-form .range-slider.noUi-target .noUi-base,
.lol-boost .form-content .boost-form .range-slider.noUi-target .noUi-connects {
  height: 1.042vw;
  border-radius: 5.208vw;
  background-color: rgba(10, 10, 24, 0.5);
}

.lol-boost .form-content .boost-form .range-slider .noUi-connect {
  background: #6366f1;
}

.lol-boost .form-content .boost-form .range-slider .noUi-handle {
  width: 2.5vw;
  height: 2.5vw;
  border-radius: 2.604vw;
  background-color: #fff;
  top: -0.729vw;
}

.lol-boost .form-content .boost-form .range-slider .noUi-handle::before,
.lol-boost .form-content .boost-form .range-slider .noUi-handle::after {
  content: none;
}

.lol-boost .form-content .boost-form .range-slider .noUi-tooltip {
  width: 2.604vw;
  height: 2.604vw;
  border-radius: 0.625vw;
  background-color: rgba(10, 10, 24, 0.5);
  color: #fff;
  font-size: 1.458vw;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  border: none;
  bottom: 140%;
  position: absolute;
}

.lol-boost .form-content .boost-form .range-slider .noUi-tooltip::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.104vw;
  background: linear-gradient(180deg, #6366f1 0%, #fff 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
}

.lol-boost .form-content .boost-form .rank-boost .rank-cards {
  gap: 1.042vw;
  display: flex;
  align-items: stretch;
}

.lol-boost .form-content .boost-form .rank-boost .ranks,
.lol-boost .form-content .boost-form .rank-boost .divisions {
  gap: 1.042vw;
  display: flex;
  flex-wrap: wrap;
  margin: 3.125vw 0 1.563vw;
}

.lol-boost .form-content .boost-form .rank-boost .ranks input[type='radio'],
.lol-boost .form-content .boost-form .rank-boost .divisions input[type='radio'] {
  display: none;
}

.lol-boost .form-content .boost-form .rank-boost .ranks input[type='radio']:checked + .rank-btn,
.lol-boost .form-content .boost-form .rank-boost .ranks input[type='radio']:checked + .division-btn,
.lol-boost .form-content .boost-form .rank-boost .divisions input[type='radio']:checked + .rank-btn,
.lol-boost .form-content .boost-form .rank-boost .divisions input[type='radio']:checked + .division-btn {
  z-index: 0;
  position: relative;
}

.lol-boost .form-content .boost-form .rank-boost .ranks input[type='radio']:checked + .rank-btn::after,
.lol-boost .form-content .boost-form .rank-boost .ranks input[type='radio']:checked + .division-btn::after,
.lol-boost .form-content .boost-form .rank-boost .divisions input[type='radio']:checked + .rank-btn::after,
.lol-boost .form-content .boost-form .rank-boost .divisions input[type='radio']:checked + .division-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.104vw;
  background: linear-gradient(180deg, #6366f1 0%, #fff 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
}

.lol-boost .form-content .boost-form .rank-boost .divisions {
  gap: 0.938vw;
  margin: 0;
}

.lol-boost .form-content .boost-form .rank-boost .rank-btn,
.lol-boost .form-content .boost-form .rank-boost .division-btn {
  display: block;
  padding: 1.146vw 1.615vw;
  cursor: pointer;
  border-radius: 1.042vw;
  background-color: rgba(10, 10, 24, 0.5);
}

.lol-boost .form-content .boost-form .rank-boost .rank-btn img,
.lol-boost .form-content .boost-form .rank-boost .division-btn img {
  width: 2.344vw;
  height: auto;
}

.lol-boost .form-content .boost-form .rank-boost .rank-btn .tooltip,
.lol-boost .form-content .boost-form .rank-boost .division-btn .tooltip {
  display: none;
}

.lol-boost .form-content .boost-form .rank-boost .division-btn {
  color: #fff;
  font-size: 1.458vw;
  width: 5.625vw;
  height: 4.635vw;
  display: flex;
  place-content: center;
}

.lol-boost .form-content .boost-form .boost {
  gap: 1.042vw;
  display: grid;
}

.lol-boost .form-content .boost-form .mastery-boost .ranks,
.lol-boost .form-content .boost-form .arena-boost .ranks {
  margin-bottom: 0;
}

.lol-boost .form-content .boost-form .mastery-boost .card-header,
.lol-boost .form-content .boost-form .arena-boost .card-header {
  align-items: center;
}

.lol-boost .form-content .boost-form .level-boost .levels {
  gap: 1.042vw;
  display: flex;
}

.lol-boost .form-content .boost-form .level-boost .lp-selector {
  width: 100%;
}

.lol-boost .form-content .boost-form .level-boost .lp-selector h6 {
  font-size: 1.042vw;
}

/* ═══════════════════════════════════════════════
   Order Summary — Compact Redesign
   ═══════════════════════════════════════════════ */

.lol-boost .form-content .summary-wrapper {
  position: sticky;
  top: 1.042vw;
}

.lol-boost .form-content .order-summary {
  padding: 1.25vw;
  background-color: rgba(99, 102, 241, 0.08);
  border-radius: 1.25rem;
  border: 1px solid rgba(99,102,241,0.18);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Header ── */
.lol-boost .form-content .order-summary h3 {
  display: none;
}

/* ── Rank box ── */
.lol-boost .form-content .order-summary .rank-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75vw 1vw;
  border-radius: 0.875rem;
  background: rgba(10,10,24,0.45);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 0.75vw;
}
.lol-boost .form-content .order-summary .rank-box .from,
.lol-boost .form-content .order-summary .rank-box .to {
  text-align: center;
}
.lol-boost .form-content .order-summary .rank-box .from img,
.lol-boost .form-content .order-summary .rank-box .to img {
  width: auto;
  height: 2.2vw;
  margin: 0 auto 0.2vw;
  display: block;
}
.lol-boost .form-content .order-summary .rank-box .from .title,
.lol-boost .form-content .order-summary .rank-box .to .title {
  font-size: 0.9vw;
  font-weight: 600;
  color: #fff;
}
.lol-boost .form-content .order-summary .rank-box .from small,
.lol-boost .form-content .order-summary .rank-box .to small {
  font-size: 0.7vw;
  color: rgba(255,255,255,0.45);
}
.lol-boost .form-content .order-summary .rank-box .from .game,
.lol-boost .form-content .order-summary .rank-box .to .count {
  font-size: 0.9vw;
  font-weight: 600;
  color: #fff;
}
.lol-boost .form-content .order-summary .rank-box > img {
  width: 1vw;
  opacity: 0.4;
}

/* ── Solo/Duo toggle ── */
.lol-boost .form-content .order-summary .toggle-group {
  display: flex;
  border-radius: 0.75rem;
  padding: 0.25vw;
  width: 100%;
  background: rgba(10,10,24,0.6);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 0.75vw;
  --accent-1: #6366f1;
  --tint: rgba(99,102,241,0.14);
  --ring: rgba(99,102,241,0.38);
}
.lol-boost .form-content .order-summary .toggle-group input { display: none; }
.lol-boost .form-content .order-summary .toggle-label {
  flex: 1;
  text-align: center;
  padding: 0.55vw;
  color: rgba(255,255,255,0.4);
  font-size: 0.9vw;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  border-radius: 0.5rem;
  position: relative;
}
.lol-boost .form-content .order-summary .toggle-label:hover {
  background: var(--tint);
  color: #fff;
}
.lol-boost .form-content .order-summary input:checked + .toggle-label {
  background: linear-gradient(180deg, #111026, var(--tint));
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--ring);
}
.lol-boost .form-content .order-summary .toggle-label:active { transform: scale(0.98); }
.lol-boost .form-content .order-summary .toggle-label:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--accent-1);
}

/* ── Extra options ── */
.lol-boost .form-content .extra-options {
  margin: 0 0 0.4vw;
}
.lol-boost .form-content .extra-options .option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4vw 0.5vw;
  border-radius: 0.5rem;
  transition: background 0.15s;
}
.lol-boost .form-content .extra-options .option:hover {
  background: rgba(255,255,255,0.04);
}
.lol-boost .form-content .extra-options .option.hidden {
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  margin: 0;
  padding: 0;
}
.lol-boost .form-content .extra-options .option .text {
  gap: 0.4vw;
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.85);
  font-size: 0.9vw;
  line-height: 1;
}
.lol-boost .form-content .extra-options .option .text img,
.lol-boost .form-content .extra-options .option .text i {
  width: 0.95vw;
  height: 0.95vw;
  font-size: 0.85vw;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Privacy section header */
.lol-boost .form-content .extra-options .privacy-settings-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4vw;
  font-size: 0.65vw;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0.5vw 0 0.25vw;
  padding: 0.35vw 0.5vw;
  border-radius: 0.375rem;
  background: linear-gradient(90deg, rgba(99,102,241,0.1) 0%, transparent 100%);
  border-left: 2px solid rgba(99,102,241,0.7);
  color: rgba(165,168,255,0.85);
}
.lol-boost .form-content .extra-options .privacy-settings-header::before {
  content: '\f023';
  font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free', 'FontAwesome';
  font-weight: 900;
  font-size: 0.65vw;
  color: rgba(99,102,241,0.9);
}
.lol-boost .form-content .extra-options .privacy-settings-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(99,102,241,0.25), transparent);
}

/* ── Completion box ── */
.lol-boost .form-content .completion-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4vw;
  padding: 0.5vw 0.75vw;
  border-radius: 0.625rem;
  background: rgba(10,10,24,0.4);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 0.6vw;
}
.lol-boost .form-content .completion-box img { width: 0.9vw; height: auto; opacity: 0.7; }
.lol-boost .form-content .completion-box .text { font-size: 0.85vw; color: rgba(255,255,255,0.7); }

/* ── Discount box ── */
.lol-boost .form-content .discount-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75vw 0.875vw;
  margin-bottom: 0.5vw;
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(10,10,24,0.4);
  position: relative;
}
.lol-boost .form-content .discount-box .remove-btn {
  position: absolute;
  top: -0.3vw;
  right: -0.3vw;
  width: 1.25vw;
  height: 1.25vw;
  border: 1px solid red;
  background: radial-gradient(circle, rgb(255,0,0) 0%, rgba(255,0,0,0.2) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.65vw;
  color: #fff;
  padding: 0;
}
.lol-boost .form-content .discount-box .left {
  display: flex;
  align-items: center;
  gap: 0.5vw;
}
.lol-boost .form-content .discount-box .left img { width: 1.5vw; height: auto; }
.lol-boost .form-content .discount-box .left .text h5 { font-size: 0.85vw; font-weight: 700; color: #fff; margin: 0 0 0.15vw; }
.lol-boost .form-content .discount-box .left .text p { font-size: 0.7vw; color: rgba(255,255,255,0.5); margin: 0; }
.lol-boost .form-content .discount-box .right { text-align: right; }
.lol-boost .form-content .discount-box .right h5 { font-size: 0.7vw; color: rgba(255,255,255,0.5); margin: 0 0 0.15vw; font-weight: 400; }
.lol-boost .form-content .discount-box .right .amounts { display: flex; align-items: center; gap: 0.4vw; justify-content: flex-end; }
.lol-boost .form-content .discount-box .right .old { font-size: 0.75vw; color: rgba(255,255,255,0.4); text-decoration: line-through; }
.lol-boost .form-content .discount-box .right .new { font-size: 1vw; font-weight: 700; color: #fff; }
.lol-boost .form-content .discount-box .right .saved { font-size: 0.7vw; color: #4ade80; margin: 0.1vw 0 0; font-weight: 600; }

/* ── Discount input ── */
.lol-boost .form-content .discount-input {
  display: flex;
  gap: 0.5vw;
  margin-bottom: 0.6vw;
}
.lol-boost .form-content .discount-input input {
  flex: 1;
  padding: 0.5vw 0.75vw;
  background: rgba(10,10,24,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.625rem;
  color: #fff;
  font-size: 0.85vw;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.lol-boost .form-content .discount-input input:focus { border-color: rgba(99,102,241,0.5); }
.lol-boost .form-content .discount-input input::placeholder { color: rgba(255,255,255,0.3); }
.lol-boost .form-content .discount-input button {
  padding: 0.5vw 0.875vw;
  background: #6366f1;
  border: none;
  border-radius: 0.625rem;
  color: #fff;
  font-size: 0.85vw;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.lol-boost .form-content .discount-input button:hover { background: #4f46e5; }

/* ── Divider ── */
.lol-boost .form-content .order-summary hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin: 0.4vw 0;
}

/* ── Totals ── */
.lol-boost .form-content .order-summary .totals {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3vw 0.25vw;
  margin-bottom: 0.6vw;
}
.lol-boost .form-content .order-summary .totals p {
  display: flex;
  align-items: center;
  gap: 0.4vw;
  color: rgba(255,255,255,0.7);
  font-size: 0.9vw;
  margin: 0;
}
.lol-boost .form-content .order-summary .totals p img { width: 1vw; height: auto; opacity: 0.6; }
.lol-boost .form-content .order-summary .totals .price {
  font-size: 1.5vw;
  font-weight: 700;
  color: #fff;
}

/* ── Buy Now ── */
.lol-boost .form-content .order-summary .buy-now {
  width: 100%;
  font-size: 1vw;
  font-weight: 700;
  padding: 0.7vw 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  margin-bottom: 0.6vw;
}
.lol-boost .form-content .payment-gateways {
  padding: 2.083vw;
  margin-top: 1.042vw;
  border-radius: 2.604vw;
  background-color: rgba(99, 102, 241, 0.1);
  border: 0.104vw solid rgba(114, 110, 142, 0.1);
}

.lol-boost .form-content .payment-gateways .top {
  gap: 0.938vw;
  display: flex;
  align-items: center;
  margin-bottom: 1.667vw;
}

.lol-boost .form-content .payment-gateways .top img {
  width: 2.448vw;
  height: auto;
}

.lol-boost .form-content .payment-gateways .top .text h5 {
  font-size: 1.042vw;
  font-weight: 600;
  margin-bottom: 0.313vw;
}

.lol-boost .form-content .payment-gateways .top .text p {
  font-size: 0.833vw;
  font-weight: 300;
  color: #726e8e;
}

.lol-boost .form-content .boost-faqs {
  padding: 2.083vw;
  margin-top: 1.042vw;
  padding-bottom: 0;
  background-color: rgba(10, 10, 24, 0.8);
  border-radius: 2.083vw;
  border: 0.104vw solid rgba(114, 110, 142, 0.1);
}

.lol-boost .form-content .boost-faqs h4 {
  font-size: 1.667vw;
  font-weight: 500;
}

.lol-boost .form-content hr {
  border: 0.104vw solid rgba(114, 110, 142, 0.1);
  margin: 1.563vw 0;
}

.lol-boost .boost-faqs-mobile {
  display: none;
}

.lol-boost .accordion .accordion-header h5 {
  font-size: 1.146vw;
}

.lol-boost .bottom-sec {
  padding: 0 10.906vw;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 0vw 2.552vw;
}

.lol-boost .choose-us h4 {
  font-size: 3.125vw;
  line-height: 4.063vw;
  font-weight: 500;
  text-align: center;
  margin-bottom: 3.125vw;
}

.lol-boost .choose-us .tiles {
  gap: 1.563vw;
  display: flex;
}

.lol-boost .choose-us .tiles .tile {
  width: 29.479vw;
  padding: 3.385vw 2.604vw;
  text-align: center;
  background-color: #110f1f;
  border-radius: 3.125vw;
  border: 0.104vw solid rgba(114, 110, 142, 0.1);
}

.lol-boost .choose-us .tiles .tile img {
  width: 5.208vw;
  height: auto;
  margin: 0 auto;
}

.lol-boost .choose-us .tiles .tile h5 {
  font-size: 1.354vw;
  font-weight: 500;
  margin: 1.458vw 0 1.042vw;
}

.lol-boost .choose-us .tiles .tile p {
  font-size: 0.938vw;
  line-height: 1.875vw;
  color: #726e8e;
  text-align: center;
}

.lol-boost .about-us {
  height: 36.458vw;
  margin: 6.771vw 0;
  background: url('../images/boost-forms/about-bg.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top left;
  padding: 5.208vw 4.167vw;
}

.lol-boost .about-us .content {
  max-width: 44.271vw;
}

.lol-boost .about-us .content h4 {
  font-size: 2.292vw;
  font-weight: 600;
  margin-bottom: 1.563vw;
}

.lol-boost .about-us .content p {
  font-size: 1.146vw;
  line-height: 2.188vw;
  color: #726e8e;
}

.lol-boost .sticky-overview {
  display: none;
}

.checkout {
  background-image: url('../images/checkout/bg.webp');
  background-size: auto;
  background-repeat: no-repeat;
  background-position: top right;
}

.checkout .header {
  text-align: center;
  margin: 12.5vw 0 6.25vw;
}

.checkout .header h1 {
  font-size: 3.125vw;
  font-weight: 400;
  line-height: 4.375vw;
  text-transform: uppercase;
  font-style: italic;
  font-family: 'superchargestraight', sans-serif;
}

.checkout .header h5 {
  font-size: 1.042vw;
  font-weight: 400;
  line-height: 2.083vw;
}

.checkout .card {
  padding: 2.083vw;
  border-radius: 2.083vw;
  background-color: #110f1f;
  border: 0.104vw solid rgba(114, 110, 142, 0.1);
}

.checkout .main-content {
  margin: 0 4.167vw;
  gap: 1.042vw;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.checkout .main-content .left,
.checkout .main-content .right {
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.checkout .main-content .right #lbbp-v5,
.checkout .main-content .right #lbbp-v5 .lbv5-viewport,
.checkout .main-content .right #lbbp-v5 .lbv5-search-wrap {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.checkout .main-content .left h3 {
  font-size: 1.458vw;
  font-weight: 600;
  margin-bottom: 2.344vw;
}

.checkout .main-content .left .buttons {
  gap: 1.042vw;
  display: flex;
  margin-bottom: 2.083vw;
}

.checkout .main-content .left .buttons .btn {
  width: 100%;
  padding: 0.938vw 0;
  font-size: 0.938vw;
  font-weight: 500;
  border-radius: 0.833vw;
  gap: 0.521vw;
  display: flex;
  place-content: center;
  z-index: 0;
  position: relative;
  background-color: #0a0a18;
}

.checkout .main-content .left .buttons .btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.052vw;
  background: linear-gradient(90deg, #6366f1 0%, #fff 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
}

.checkout .main-content .left .buttons .btn img {
  width: 0.729vw;
  height: auto;
}

.checkout .main-content .left .payment-methods {
  gap: 1.563vw;
  display: grid;
}

.checkout .main-content .left .payment-methods:first-of-type {
  margin-bottom: 2.083vw;
}

.checkout .main-content .left .payment-methods .custom-radio {
  display: none;
}

.checkout .main-content .left .payment-methods .custom-radio:checked + .method-btn {
  background-color: rgba(99, 102, 241, 0.1);
  border-color: #6366f1;
}

.checkout .main-content .left .payment-methods .custom-radio:checked + .method-btn .checkmark span {
  border: none;
  background-color: #6366f1;
  background-image: url('../images/checkout/checkmark.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.checkout .main-content .left .payment-methods .method-btn {
  width: 100%;
  padding: 1.042vw;
  border-radius: 0.833vw;
  background-color: #0a0a18;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkout .main-content .left .payment-methods .method-btn .checkmark {
  gap: 1.563vw;
  display: flex;
  align-items: center;
  font-size: 1.146vw;
}

.checkout .main-content .left .payment-methods .method-btn .checkmark span {
  width: 1.458vw;
  height: 1.458vw;
  border-radius: 2.604vw;
  border: 0.052vw solid #6366f1;
}

.checkout .main-content .left .payment-methods .method-btn img {
  width: auto;
  height: 1.563vw;
}

.checkout .main-content .left .payment-methods .method-btn .badge {
  padding: 0.417vw 0.938vw;
  border-radius: 0.313vw;
}

.checkout .main-content .left .payment-methods .method-btn.first .checkmark img,
.checkout .main-content .left .payment-methods .method-btn.third .checkmark img {
  filter: invert(1) brightness(2);
}

.checkout .main-content .right h3 {
  font-size: 1.458vw;
  font-weight: 600;
  margin-bottom: 2.344vw;
  gap: 0.521vw;
  display: flex;
  align-items: center;
}

.checkout .main-content .right h3 img {
  width: 1.771vw;
  height: auto;
}

.checkout .main-content .right .summary .rank-box {
  padding: 1.302vw 1.563vw;
  margin: 2.083vw 0 1.042vw;
  border-radius: 1.563vw;
  background-color: #0a0a18;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkout .main-content .right .summary .rank-box .to,
.checkout .main-content .right .summary .rank-box .from {
  text-align: center;
}

.checkout .main-content .right .summary .rank-box .to img,
.checkout .main-content .right .summary .rank-box .from img {
  width: auto;
  height: 2.083vw;
  margin: 0 auto;
}

.checkout .main-content .right .summary .rank-box .to .title,
.checkout .main-content .right .summary .rank-box .from .title {
  font-size: 0.938vw;
}

.checkout .main-content .right .summary .rank-box .from .game {
  font-size: 0.938vw;
  font-weight: 500;
}

.checkout .main-content .right .summary .rank-box .to .count {
  font-size: 0.938vw;
  font-weight: 500;
}

.checkout .main-content .right .summary .order-options {
  gap: 1.458vw;
  display: grid;
  margin-bottom: 2.083vw;
}

.checkout .main-content .right .summary .order-options .option {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkout .main-content .right .summary .order-options .option .title {
  gap: 0.521vw;
  display: flex;
  align-items: center;
  font-size: 1.042vw;
}

.checkout .main-content .right .summary .order-options .option .title img {
  width: auto;
  height: 0.938vw;
}

.checkout .main-content .right .summary .order-options .option .value {
  font-size: 1.042vw;
  color: #726e8e;
}

.checkout .main-content .right .summary .discount-input {
  width: 100%;
  border-radius: 0.833vw;
  background-color: #0a0a18;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.042vw;
}

.checkout .main-content .right .summary .discount-input input {
  color: #fff;
  font-size: 0.938vw;
  padding: 0.885vw 1.146vw;
  border: none;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0.833vw;
}

.checkout .main-content .right .summary .discount-input input:focus {
  outline: none;
}

.checkout .main-content .right .summary .discount-input button {
  color: #fff;
  font-size: 0.938vw;
  padding: 0.885vw 1.146vw;
  background-color: #6366f1;
  cursor: pointer;
  border-radius: 0.833vw;
  border: none;
  transition: background-color 0.3s ease;
}

.checkout .main-content .right .summary .discount-input button:hover {
  background-color: rgb(52.2, 56.1, 236.8);
}

.checkout .main-content .right .summary #discount_alert {
  margin-top: 0.521vw;
  font-size: 0.833vw;
}

.checkout .main-content .right .summary #discount_alert.error {
  color: #ff4d4d;
}

.checkout .main-content .right .summary #discount_alert.success {
  color: #4caf50;
}

.checkout .main-content .right .summary .discount-applied {
  width: 100%;
  padding: 1.302vw 0;
  font-size: 0.938vw;
  text-align: center;
  border-radius: 1.042vw;
  border: 0.052vw solid #6366f1;
  background-color: rgba(99, 102, 241, 0.1);
  margin: 2.083vw 0;
}

.checkout .main-content .right .summary .totals-section {
  border-top: 0.052vw solid rgba(114, 110, 142, 0.1);
  padding: 2.083vw 0;
}

.checkout .main-content .right .summary .totals-section .item {
  gap: 1.563vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkout .main-content .right .summary .totals-section .item div {
  gap: 0.521vw;
  display: flex;
  align-items: center;
}

.checkout .main-content .right .summary .totals-section .item .label {
  font-size: 1.042vw;
  font-weight: 600;
  color: #726e8e;
}

.checkout .main-content .right .summary .totals-section .item .value {
  font-size: 1.667vw;
  font-weight: 800;
}

.checkout .main-content .right .summary .totals-section .item img {
  width: auto;
  height: 1.51vw;
}

.checkout .main-content .right .summary #complete_payment {
  width: 100%;
  padding: 0.781vw 0;
  font-size: 1.042vw;
  font-weight: 600;
  line-height: 1.875vw;
  border-radius: 2.604vw;
  text-align: center;
  border: none;
  background-color: #6366f1;
}

/* ── Gamer Girls (egirls) Header ───────────────────────────────────────── */
.egirls-list header,
body.egirls-list header {
  height: clamp(220px, 35vh, 420px);
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(200,80,200,0.2) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 30%, rgba(99,102,241,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 30% 40% at 50% 100%, rgba(255,100,180,0.1) 0%, transparent 50%),
    linear-gradient(135deg, #0a0818 0%, #0e0c22 50%, #0a0818 100%) !important;
  background-image: none !important;
  display: flex;
  align-items: center;
  justify-content: start;
  position: relative;
  overflow: hidden;
}
.egirls-list header::before,
body.egirls-list header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(200,80,200,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,80,200,0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
  pointer-events: none;
}
.egirls-list header::after,
body.egirls-list header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}

.egirls-view header,
body.egirls-view header {
  height: clamp(220px, 35vh, 420px);
  background:
    radial-gradient(ellipse 55% 75% at 75% 45%, rgba(200,80,200,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 35% 55% at 15% 55%, rgba(99,102,241,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 50% 110%, rgba(255,100,180,0.1) 0%, transparent 50%),
    linear-gradient(135deg, #0a0818 0%, #0e0c22 50%, #0a0818 100%) !important;
  background-image: none !important;
  display: flex;
  align-items: center;
  justify-content: start;
  position: relative;
  overflow: hidden;
}
.egirls-view header::before,
body.egirls-view header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(200,80,200,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,80,200,0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
  pointer-events: none;
}
.egirls-view header::after,
body.egirls-view header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}


.boosters-list .main-content {
  margin: 0 4.167vw;
}

.boosters-list .filter-box .head {
  padding: 2.083vw 0;
  margin-top: 5vw;
  border-bottom: 0.156vw solid rgba(114, 110, 142, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.boosters-list .filter-box .head h2 {
  font-size: 1.667vw;
  font-weight: 500;
}

.boosters-list .filter-box .head button {
  padding: 0.521vw 1.563vw;
  font-size: 1.042vw;
  font-weight: 600;
  line-height: 1.875vw;
  border-radius: 2.604vw;
  background-color: #6366f1;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.boosters-list .filter-box .head button:hover {
  background-color: rgb(52.2, 56.1, 236.8);
}

.boosters-list .filter-box .bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1.042vw;
  margin: 2.083vw 0 4.167vw;
}

.boosters-list .filter-box .bottom .form-group {
  flex: 1 1 calc(33.333% - 1.042vw);
  min-width: 10.417vw;
  margin-bottom: 0;
}

.boosters-list .filter-box .bottom .form-group .select2-container {
  width: 100% !important;
}

.boosters-list .filter-box .bottom .form-group:nth-child(4),
.boosters-list .filter-box .bottom .form-group:nth-child(5) {
  flex: 1 1 calc(50% - 1.042vw);
}

.boosters-list .boosters {
  gap: 1.042vw;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.boosters-list .boosters .booster-card {
  border-radius: 2.604vw;
  border: 0.13vw solid #232040;
  background-color: #110f1f;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.boosters-list .boosters .booster-card:hover {
  transform: translateY(-0.521vw);
}

.boosters-list .boosters .booster-card .cover {
  height: 12vw;
  overflow: hidden;
  margin: -2.083vw -2.083vw 0 -2.083vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.boosters-list .boosters .booster-card .avatar {
  width: 8.333vw;
  height: 8.333vw;
  border-radius: 50%;
  border: 0.208vw solid #110f1f;
  overflow: hidden;
  position: absolute;
  top: 4.688vw;
  left: 2.083vw;
}

.boosters-list .boosters .booster-card .avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}


.boosters-list .boosters .booster-card .details .top {
  display: flex;
  align-items: flex-start;
}

.boosters-list .boosters .booster-card .details .top h5 {
  font-size: 1.25vw;
  font-weight: 500;
  margin-bottom: 0;
  gap: 0.4vw;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  color: #fff;
}

/* Gradient nur auf den Namen-Text */
.boosters-list .boosters .booster-card .details .top h5 .name-text {
  background: linear-gradient(to right, #6366f1, #8b5cf6, #d946ef);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Rating-Badge: weiss, direkt neben dem Namen */
.boosters-list .boosters .booster-card .details .top h5 .rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2vw;
  padding: 0.15vw 0.5vw 0.15vw 0.35vw;
  border-radius: 20px;
  background-color: rgba(10, 10, 24, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.7vw;
  font-weight: 700;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.boosters-list .boosters .booster-card .details .top h5 .rating-badge img {
  width: 0.65vw;
  height: 0.65vw;
}

.boosters-list .boosters .booster-card .details .top h5 img {
  width: 1.042vw;
}

.boosters-list .boosters .booster-card .details .top h6 {
  font-size: 0.833vw;
  color: #726e8e;
}

/* Rank-Box: absolut oben rechts, unterhalb des Cover-Bildes */
.boosters-list .boosters .booster-card .rank-box {
  position: absolute;
  top: calc(12vw - 1.8vw);
  right: 2.083vw;
  width: 5.5vw;
  height: 3.6vw;
  border-radius: 0.729vw;
  border: 0.052vw solid rgba(99, 102, 241, 0.1);
  background-color: rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  z-index: 2;
}

.boosters-list .boosters .booster-card .rank-box img {
  width: auto;
  height: 2.8vw;
}

.boosters-list .boosters .booster-card .details .mid {
  gap: 0.417vw;
  display: flex;
  margin-top: 1.563vw;
}

.boosters-list .boosters .booster-card .details .mid .role-icon {
  width: 2.344vw;
  height: 2.344vw;
  border-radius: 0.417vw;
  background-color: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.boosters-list .boosters .booster-card .details .mid .role-icon img {
  width: 1.25vw;
  height: 1.25vw;
  filter: contrast(1) brightness(2);
}

.boosters-list .boosters .booster-card .details .mid small {
  font-size: 0.729vw;
  color: #726e8e;
}

.boosters-list .boosters .booster-card .details .bottom {
  margin-top: 4.531vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.boosters-list .boosters .booster-card .details .bottom .champions {
  gap: 0.417vw;
  display: flex;
}

.boosters-list .boosters .booster-card .details .bottom .champions .champion-icon,
.boosters-list .boosters .booster-card .details .bottom .champions .more-champions-icon {
  width: 1.563vw;
  height: 1.563vw;
  border-radius: 0.417vw;
  font-size: 0.625vw;
  color: #ffffff;
  background-color: rgba(10, 10, 24, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}





.boosters-list #loading-spinner {
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  margin: 1.563vw auto;
}

.boosters-list .no-boosters {
  font-size: 1.25vw;
  color: #726e8e;
  margin-bottom: 4.167vw;
  text-indent: 1.042vw;
}

.boosters-view header {
  height: clamp(220px, 35vh, 420px);
  background:
    radial-gradient(ellipse 55% 70% at 75% 40%, rgba(99,102,241,0.2) 0%, transparent 60%),
    radial-gradient(ellipse 35% 50% at 15% 60%, rgba(255,74,59,0.1) 0%, transparent 55%),
    radial-gradient(ellipse 40% 60% at 50% 110%, rgba(59,184,255,0.1) 0%, transparent 50%),
    linear-gradient(135deg, #0a0818 0%, #0e0c22 50%, #0a0818 100%);
  display: flex;
  align-items: center;
  justify-content: start;
  position: relative;
  overflow: hidden;
}
.boosters-view header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
  pointer-events: none;
}
.boosters-view header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}

.boosters-list {
  background-size: contain;
  background-position: center;
}

.boosters-view {
  background-size: contain;
  background-position: center;
}

/* Override any external CSS that may still apply image backgrounds via .bv2 or other body classes */
body.boosters-view header,
body.bv2 header,
.bv2 header {
  background-image: none !important;
  background:
    radial-gradient(ellipse 55% 70% at 75% 40%, rgba(99,102,241,0.2) 0%, transparent 60%),
    radial-gradient(ellipse 35% 50% at 15% 60%, rgba(255,74,59,0.1) 0%, transparent 55%),
    radial-gradient(ellipse 40% 60% at 50% 110%, rgba(59,184,255,0.1) 0%, transparent 50%),
    linear-gradient(135deg, #0a0818 0%, #0e0c22 50%, #0a0818 100%) !important;
}

.boosters-view header .content {
  max-width: 42.917vw;
  margin-left: 4.167vw;
}

.boosters-view header h1 {
  font-size: 6.771vw;
  line-height: 8.333vw;
  margin-bottom: 1.563vw;
  text-transform: uppercase;
  font-family: 'superchargestraight', sans-serif;
}

.boosters-view header p {
  font-size: 1.042vw;
  line-height: 1.875vw;
}

.boosters-view .main-content {
  margin: 4.167vw 12.167vw;
  border-radius: 3.125vw;
  border: 0.104vw solid rgba(114, 110, 142, 0.1);
  background-color: rgba(10, 10, 24, 0.8);
  padding: 4.167vw;
  position: relative;
  zoom: 0.8;
}

.boosters-view .main-content .cover {
  height: 19vw;
  overflow: hidden;
  margin: -4.167vw -4.167vw 0 -4.167vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.boosters-view .main-content .avatar {
  width: 15.625vw;
  height: 15.625vw;
  border-radius: 50%;
  border: 0.313vw solid #110f1f;
  overflow: hidden;
  position: absolute;
  top: 7.083vw;
  left: 4.375vw;
}

.boosters-view .main-content .avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.boosters-view .main-content .details {
  margin-top: 10.208vw;
}

.boosters-view .main-content .details .top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 2.083vw;
  border-bottom: 0.104vw solid rgba(114, 110, 142, 0.1);
}

.boosters-view .main-content .details .top .info h5 {
  font-size: 2.5vw;
  font-weight: 500;
  gap: 0.521vw;
  display: flex;
  align-items: center;
}

/* Name im h5 mit Verlauf, Icon bleibt normal */
.boosters-view .main-content .details .top .info h5 {
  /* dein bestehendes Layout bleibt erhalten */
  background: linear-gradient(to right, #6366f1, #8b5cf6, #d946ef);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; /* nur Text wird „ausgestanzt“ */
  color: transparent; /* Fallback */
}

/* Verifizierungs-Icon sauber ausrichten */
.boosters-view .main-content .details .top .info h5 img {
  width: 1.05em;
  height: 1.05em;
  margin-left: 0.45rem;
  vertical-align: middle;
}

.boosters-view .main-content .details .top .info h5 img {
  width: 1.563vw;
}

.boosters-view .main-content .details .top .info h6 {
  font-size: 1.354vw;
  color: #726e8e;
  gap: 2.083vw;
  display: flex;
  align-items: baseline;
}

/* Rating-Badge: pill + dunkler, halbtransparenter Hintergrund */
.boosters-view .main-content .details .top .info .rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem; /* Abstand zwischen Icon und Zahl */
  margin-inline: 0.5rem; /* links & rechts */
  padding: 0.55rem 0.55rem; /* innenabstand – macht die „Pill“-Form */
  border-radius: 999px; /* immer komplett rund, egal wie lang der Text ist */
  background: rgba(10, 10, 24, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08); /* optional feiner Rand */
  box-shadow: inset 0 0 0.35rem rgba(0, 0, 0, 0.25); /* optional leichte Tiefe */
  color: #e7e9ff;
  font-weight: 700;
  line-height: 1;
}

.boosters-view .main-content .details .top .info h6 .rating-badge img {
  width: 1.042vw;
  height: auto;
  margin-right: 0.313vw;
}

.boosters-view .main-content .details .top .info h6 .rating-badge span {
  font-size: 1.5vw;
}

.boosters-view .main-content .details .top .buttons .btn:nth-child(1) {
  margin-right: 0; /* spacing handled by flex gap (see below) */
  font-size: inherit;
}

/* Booster view – button typography (requested) */
@media (min-width: 768px){
  /* Base size for the top action buttons */
  .boosters-view .main-content .details .top .buttons .btn{
    font-size: 26px;
  }

  /* “Play with Remmy” should be a bit larger */
  .boosters-view .main-content .details .top .buttons .btn.requestBoost{
    font-size: 30px;
    padding-left: 56px;
    padding-right: 56px;
  }
}

/* Booster view – normalize top buttons spacing + sizing */
.boosters-view .main-content .details .top .buttons{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  box-sizing: border-box;
}

/* Mobile: center the button group */
/* Base styling for the 3 top action buttons (kept fairly neutral)
   Desktop/mobile specifics are handled in the media queries below. */
.boosters-view .main-content .details .top .buttons .btn,
.boosters-view .main-content .details .top .buttons a.btn{
  margin: 0 !important;                 /* kill any leftover per-button margins */
  padding: 12px 28px;                   /* default inner space */
  line-height: 1.15;
  min-height: 44px;
  font-size: 16px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center !important;
  text-align: center !important;
  border-radius: 999px;
}

/* Mobile: smaller buttons + more space above the button group */
@media (max-width: 767px){
  .boosters-view .main-content .details .top .buttons{
    justify-content: center;
    gap: 10px;
    margin-top: 16px; /* more distance to the content above */
  }

  .boosters-view .main-content .details .top .buttons .btn,
  .boosters-view .main-content .details .top .buttons a.btn{
    padding: 10px 18px;
    min-height: 38px;
    font-size: 14px;
    min-width: 0;
    flex: 0 1 auto;
  }
}

/* Desktop: all three top buttons same width (prevents wrapping) */
@media (min-width: 768px){
  .boosters-view .main-content .details .top .buttons{
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  .boosters-view .main-content .details .top .buttons .btn{
    padding: 14px 40px;  /* more space on desktop */
    min-height: 52px;
    font-size: 26px;
    flex: 0 0 260px;
    width: 260px;
    min-width: 260px;
    max-width: 260px;
  }
}

.boosters-view .main-content .details .top .mobile-btn {
  display: none;
}

.boosters-view .main-content .details .bottom {
  margin-top: 2.083vw;
}

.boosters-view .main-content .details .bottom .nav-tabs {
  background-color: #110f1f;
  border-radius: 1.563vw;
  padding: 0.521vw;
  width: -moz-fit-content;
  width: fit-content;
}

.boosters-view .main-content .details .bottom .nav-tabs a {
  background: #110f1f;
  border: none;
  font-size: 1.4vw;
  font-weight: 600;
  padding: 0.938vw 4.167vw;
  border-radius: 1.042vw;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.boosters-view .main-content .details .bottom .nav-tabs a.active {
  background-color: rgba(255,255,255,0.06);
  color: #fff;
}

.boosters-view .main-content .details .bottom .nav-tabs a:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.boosters-view .main-content .details .bottom .description {
  margin: 2.604vw 0;
}

.boosters-view .main-content .details .bottom .description h4 {
  font-size: 1.667vw;
  font-weight: 500;
  margin-bottom: 0.729vw;
}

.boosters-view .main-content .details .bottom .description p {
  font-size: 1.146vw;
  font-weight: 300;
  line-height: 2.188vw;
  color: #ffffff;
}

.boosters-view .main-content .details .bottom .features {
  gap: 2.083vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.boosters-view .main-content .details .bottom .features .recent-orders {
  padding: 2.083vw;
  border-radius: 2.083vw;
  border: 0.104vw solid rgba(114, 110, 142, 0.1);
  background-color: #110f1f;
}

.boosters-view .main-content .details .bottom .features .recent-orders h4 {
  font-size: 1.667vw;
  font-weight: 500;
}

.boosters-view .main-content .details .bottom .features .recent-orders .order-item {
  margin-top: 2.083vw;
  padding-top: 2.083vw;
  border-top: 0.104vw solid rgba(114, 110, 142, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.boosters-view .main-content .details .bottom .features .recent-orders .order-item .title {
  gap: 1.146vw;
  display: flex;
  align-items: center;
}

.boosters-view .main-content .details .bottom .features .recent-orders .order-item .title .icon {
  /* padding: 1.146vw; */
  border-radius: 0.521vw;
  aspect-ratio: 1/1;
  background-color: rgba(255,255,255,0.06);
}

.boosters-view .main-content .details .bottom .features .recent-orders .order-item .title .icon i {
  font-size: 1.354vw;
  --fa-primary-color: #fff !important;
  --fa-secondary-color: $primary-color !important;
}

.boosters-view .main-content .details .bottom .features .recent-orders .order-item .title p {
  font-size: 1.146vw;
  font-weight: 500;
}

.boosters-view .main-content .details .bottom .features .recent-orders .order-item .title p small {
  font-size: 1.042vw;
  font-weight: 500;
  margin-top: 0.521vw;
  color: #726e8e;
}

.boosters-view .main-content .details .bottom .features .recent-orders .order-item .badge {
  font-size: 0.833vw;
  border-radius: 0.625vw;
  padding: 0.781vw 1.823vw;
  color: #6366f1;
  background-color: rgba(99, 102, 241, 0.1);
}

.boosters-view .main-content .details .bottom .features .tiles {
  gap: 2.083vw;
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.boosters-view .main-content .details .bottom .features .tiles .tile {
  padding: 2.083vw;
  border-radius: 2.083vw;
  background-color: #110f1f;
  border: 0.104vw solid rgba(114, 110, 142, 0.1);
}

.boosters-view .main-content .details .bottom .features .tiles .tile .head {
  padding-bottom: 1.354vw;
  border-bottom: 0.104vw solid rgba(114, 110, 142, 0.1);
}

.boosters-view .main-content .details .bottom .features .tiles .tile .head img {
  width: auto;
  height: 2.604vw;
}

.boosters-view .main-content .details .bottom .features .tiles .tile .body {
  margin-top: 1.563vw;
}

.boosters-view .main-content .details .bottom .features .tiles .tile .body h5 {
  font-size: 1.042vw;
  font-weight: 500;
  margin-bottom: 0.938vw;
}

.boosters-view .main-content .details .bottom .features .tiles .tile .body .rank-icon {
  width: auto;
  height: 3.125vw;
}

.boosters-view .main-content .details .bottom .features .tiles .tile .body .roles {
  gap: 0.521vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.boosters-view .main-content .details .bottom .features .tiles .tile .body .roles .role-icon {
  width: 2.604vw;
  height: 2.604vw;
  border-radius: 0.521vw;
  background-color: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.boosters-view .main-content .details .bottom .features .tiles .tile .body .roles .role-icon img {
  width: 1.563vw;
  height: 1.563vw;
  filter: brightness(1.15);
}

.boosters-view .main-content .details .bottom .features .tiles .tile .body .langs {
  gap: 0.781vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.boosters-view .main-content .details .bottom .features .tiles .tile .body .langs img {
  width: 2.604vw;
  height: auto;
}

.boosters-view .main-content .details .bottom .features .tiles .tile .body .champs {
  gap: 0.521vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.boosters-view .main-content .details .bottom .features .tiles .tile .body .champs img {
  width: 2.083vw;
  height: 2.083vw;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.boosters-view .booster-orders {
  display: grid;
  gap: 1.563vw;
  margin-top: 2.604vw;
}

.boosters-view .order-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.823vw 2.344vw;
  border-radius: 1.823vw;
  background: #110f1f;
  border: 0.104vw solid rgba(114, 110, 142, 0.12);
  backdrop-filter: blur(14px);
  transition: all 0.35s ease;
}

.boosters-view .order-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 35px rgba(99, 102, 241, 0.25);
}

/* LEFT SIDE */

.boosters-view .order-card .left {
  display: flex;
  align-items: center;
  gap: 1.563vw;
}

.boosters-view .order-card .icon {
    height: auto;
    width: 4.344vw;
    border-radius: 1.042vw;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.boosters-view .order-card .icon i {
  font-size: 1.667vw;
  --fa-primary-color: #fff;
  --fa-secondary-color: #6366f1;
}

.boosters-view .order-card h5 {
  font-size: 1.3vw;
  margin: 0;
}

.boosters-view .order-card small {
  display: block;
  margin-top: 0.25vw;
  color: #726e8e;
  font-size: 1.4vw;
}

/* BOOST ICONS */

.boosters-view .order-card .boost {
  display: flex;
  align-items: center;
  gap: 1.042vw;
}

.boosters-view .order-card .boost img {
  height: auto;
}

.boosters-view .order-card .boost .arrow {
  font-size: 1.354vw;
  color: #6366f1;
}

/* STATUS PILL */

.boosters-view .order-card .status {
  padding: 0.781vw 1.823vw;
  border-radius: 999px;
  font-size: 0.833vw;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* COLORS */

.boosters-view .order-card .status.completed {
  color: #7affb0;
  background: rgba(122, 255, 176, 0.12);
  border: 1px solid rgba(122, 255, 176, 0.25);
}

.boosters-view .order-card .status.progress {
  color: #7aa2ff;
  background: rgba(122, 162, 255, 0.12);
  border: 1px solid rgba(122, 162, 255, 0.25);
}

.boosters-view .booster-reviews {
  display: grid;
  gap: 2.083vw;
  margin-top: 2.604vw;
}

/* CARD */
.boosters-view .review-row {
  border-radius: 2.083vw;
  background: #110f1f;
  border: 0.104vw solid rgba(114, 110, 142, 0.12);
  padding: 2.083vw;
}

/* TOP */
.boosters-view .review-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.boosters-view .review-top h5 {
  font-size: 1.354vw;
  font-weight: 600;
}

.boosters-view .review-top h5 span {
  color: #726e8e;
  font-weight: 400;
  margin-left: 0.521vw;
}

.boosters-view .review-top small {
  display: block;
  margin-top: 0.313vw;
  font-size: 1.042vw;
  color: #726e8e;
}

/* STARS */
.boosters-view .review-top .stars {
  font-size: 1.354vw;
  letter-spacing: 0.156vw;
  color: #6366f1;
  text-align: right;
}

.boosters-view .review-top .label {
  display: block;
  font-size: 0.833vw;
  color: #726e8e;
  margin-bottom: 0.313vw;
  text-align: right;
}

/* PILLS */
.boosters-view .review-pills {
  margin-top: 1.302vw;
  display: flex;
  flex-wrap: wrap;
  gap: 0.833vw;
}

.boosters-view .review-pills span {
  padding: 0.521vw 1.302vw;
  border-radius: 999px;
  font-size: 0.938vw;
  background: rgba(255, 255, 255, 0.03);
  border: 0.104vw solid rgba(255, 255, 255, 0.08);
}

/* TAGS */
.boosters-view .review-tags {
  margin-top: 1.042vw;
  display: flex;
  gap: 0.833vw;
  flex-wrap: wrap;
}

.boosters-view .review-tags span {
  padding: 0.521vw 1.563vw;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.08);
  border: 0.104vw solid rgba(99, 102, 241, 0.25);
  font-size: 0.938vw;
  color: #a5b4fc;
}

/* TEXT */
.boosters-view .review-text {
  margin-top: 1.302vw;
  font-size: 1.042vw;
  color: #ffffff;
}

/* CARD UPGRADE */
.boosters-view .review-row {
  padding: 2.292vw; /* +10% */
  border-radius: 2.292vw;
  background: #110f1f;
  border: 0.104vw solid rgba(114, 110, 142, 0.12);
}

/* TYPOGRAPHY */
.boosters-view .review-top h5 {
  font-size: 1.49vw;
}
.boosters-view .review-top small {
  font-size: 1.146vw;
}
.boosters-view .review-text {
  font-size: 1.146vw;
}

/* STARS */
.boosters-view .review-top .stars {
  font-size: 1.49vw;
  color: #7aa2ff;
  text-shadow: 0 0 0.521vw rgba(122, 162, 255, 0.6);
}

/* PILLS */
.boosters-view .review-pills span {
  padding: 0.573vw 1.432vw;
  font-size: 1.042vw;
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.35);
}

/* TAGS */
.boosters-view .review-tags span {
  padding: 0.573vw 1.719vw;
  font-size: 1.042vw;
  background: linear-gradient(135deg, #1e293b, #020617);
  color: #93c5fd;
  box-shadow: inset 0 0 0.781vw rgba(99, 102, 241, 0.15);
}

.contact-page header {
  height: clamp(220px, 35vh, 420px);
  background:
    radial-gradient(ellipse 50% 70% at 70% 50%, rgba(99,102,241,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 40% 55% at 20% 40%, rgba(59,184,255,0.1) 0%, transparent 55%),
    radial-gradient(ellipse 30% 40% at 50% 110%, rgba(168,139,250,0.1) 0%, transparent 50%),
    linear-gradient(135deg, #0a0818 0%, #0e0c22 50%, #0a0818 100%);
  display: flex;
  align-items: center;
  justify-content: start;
  position: relative;
  overflow: hidden;
}
.contact-page header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
  pointer-events: none;
}
.contact-page header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}

.contact-page header .content {
  max-width: 42.917vw;
  margin-left: 4.167vw;
}

.contact-page header h1 {
  font-size: 5.208vw;
  line-height: 8.333vw;
  margin-bottom: 1.042vw;
  text-transform: uppercase;
  font-family: 'superchargestraight', sans-serif;
}

.contact-page header p {
  font-size: 1.042vw;
  line-height: 1.875vw;
}

.contact-page .cards {
  margin: 4.167vw;
  gap: 4.167vw;
  display: flex;
  align-items: stretch;
}

.contact-page .cards .card {
  padding: 3.125vw;
  border-radius: 3.125vw;
  border: 0.104vw solid rgba(114, 110, 142, 0.1);
}

.contact-page .cards .card .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.contact-page .cards .card .head .icon {
  width: 7.813vw;
  height: 7.813vw;
  border-radius: 2.083vw;
  border: 0.104vw solid rgba(114, 110, 142, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-page .cards .card .head .icon img {
  width: auto;
  height: 2.604vw;
}

.contact-page .cards .card .head h3 {
  font-size: 2.188vw;
  font-weight: 400;
}

.contact-page .cards .card .head h6 {
  font-size: 1.146vw;
  font-weight: 400;
  color: #6366f1;
}

.contact-page .cards .card .content {
  margin-top: 4.167vw;
}

.contact-page .cards .card .content p {
  font-size: 1.146vw;
  line-height: 2.188vw;
  color: #726e8e;
  margin-bottom: 1.563vw;
}

.contact-page .cards .card .content .btn {
  font-size: 1.042vw;
  padding: 0.521vw 3.906vw;
}

.contact-page .sec-faqs {
  padding: 5.2083vw;
  background-color: #0e0d1a;
}

.contact-page .sec-faqs .top {
  margin-bottom: 4.1667vw;
}

.contact-page .sec-faqs .top h4 {
  font-size: 2.6042vw;
  font-weight: 500;
  line-height: 4.0625vw;
  text-align: center;
}

/* ================================
   Contact Page FAQ: match Accounts/Ranked look
   - centered, not full width
   - tighter, cleaner accordion cards
   ================================ */

.contact-page .sec-faqs{
  /* override legacy section block */
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 110px;
  padding-bottom: 90px;
  background: transparent !important;
}

.contact-page .sec-faqs .top{
  max-width: 1180px;
  margin: 0 auto 34px;
  padding: 0 18px;
}

.contact-page .sec-faqs .top h4{
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.contact-page .sec-faqs .accordion{
  max-width: 1180px;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  box-shadow: 0 20px 70px rgba(0,0,0,0.35);
}

.contact-page .sec-faqs .accordion .accordion-item{
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.contact-page .sec-faqs .accordion .accordion-item:last-child{
  border-bottom: none;
}

.contact-page .sec-faqs .accordion-header{
  padding: 22px 24px;
  cursor: pointer;
}

.contact-page .sec-faqs .accordion-header h5{
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  color: rgba(255,255,255,0.88);
}

.contact-page .sec-faqs .accordion-content{
  padding: 0 24px 22px;
}

.contact-page .sec-faqs .accordion-content p,
.contact-page .sec-faqs .accordion-content li{
  font-size: 14px;
  line-height: 1.65;
  opacity: 0.82;
}

@media (max-width: 900px){
  .contact-page .sec-faqs{
    padding-top: 95px;
    padding-bottom: 75px;
  }
  .contact-page .sec-faqs .top{
    padding: 0 14px;
    margin-bottom: 18px;
  }
  .contact-page .sec-faqs .accordion{
    margin: 0 14px;
    border-radius: 18px;
  }
  .contact-page .sec-faqs .accordion-header{
    padding: 18px 16px;
  }
  .contact-page .sec-faqs .accordion-header h5{
    font-size: 15px;
  }
  .contact-page .sec-faqs .accordion-content{
    padding: 0 16px 18px;
  }
}

.jobs-page header {
  height: clamp(220px, 35vh, 420px);
  background:
    radial-gradient(ellipse 60% 80% at 80% 45%, rgba(99,102,241,0.2) 0%, transparent 60%),
    radial-gradient(ellipse 35% 50% at 10% 55%, rgba(245,193,76,0.1) 0%, transparent 55%),
    radial-gradient(ellipse 40% 55% at 50% 110%, rgba(59,184,255,0.08) 0%, transparent 50%),
    linear-gradient(135deg, #0a0818 0%, #0e0c22 50%, #0a0818 100%);
  display: flex;
  align-items: center;
  justify-content: start;
  position: relative;
  overflow: hidden;
}
.jobs-page header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
  pointer-events: none;
}
.jobs-page header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}

.jobs-page header .content {
  max-width: 44.917vw;
  margin-left: 4.167vw;
}

.jobs-page header h1 {
  font-size: 4.688vw;
  line-height: 5.729vw;
  margin-bottom: 1.563vw;
  text-transform: uppercase;
  font-family: 'superchargestraight', sans-serif;
}

.jobs-page header p {
  font-size: 1.042vw;
  line-height: 1.875vw;
  max-width: 32.813vw;
}

.jobs-page header .badges {
  margin: 2.083vw 0 4.167vw;
  gap: 2.083vw;
  display: flex;
  align-items: center;
}

.jobs-page header .badges .badge {
  padding: 1.042vw;
  color: #fff;
  font-size: 1.042vw;
  font-weight: 500;
  border-radius: 1.042vw;
  gap: 0.833vw;
  display: flex;
  align-items: center;
  border: 0.052vw solid #6366f1;
  background-color: rgba(99, 102, 241, 0.2);
}

.jobs-page header .badges .badge img {
  width: auto;
  height: 1.354vw;
}

.jobs-page header .btn {
  font-size: 1.042vw;
  line-height: 1.875vw;
  padding: 0.521vw 2.5vw;
}

.jobs-page .cards {
  margin: 4.167vw;
  gap: 4.167vw;
  display: flex;
  align-items: stretch;
}

.jobs-page .cards .card {
  padding: 3.125vw;
  border-radius: 3.125vw;
  border: 0.104vw solid rgba(114, 110, 142, 0.1);
}

.jobs-page .cards .card .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.jobs-page .cards .card .head .icon {
  width: 7.813vw;
  height: 7.813vw;
  border-radius: 2.083vw;
  border: 0.104vw solid rgba(114, 110, 142, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jobs-page .cards .card .head .icon img {
  width: auto;
  height: 2.604vw;
}

.jobs-page .cards .card .head h3 {
  font-size: 2.188vw;
  font-weight: 400;
}

.jobs-page .cards .card .head h6 {
  font-size: 1.146vw;
  font-weight: 400;
  color: #6366f1;
}

.jobs-page .cards .card .content {
  margin-top: 4.167vw;
}

.jobs-page .cards .card .content p {
  font-size: 1.146vw;
  line-height: 2.188vw;
  color: #726e8e;
  margin-bottom: 1.563vw;
}

.jobs-page .cards .card .content .btn {
  font-size: 1.042vw;
  padding: 0.521vw 3.906vw;
}

.jobs-page .cards .card.lol-card h6 {
  color: #e9a13b;
}

.jobs-page .cards .card.lol-card .btn {
  background-color: #e9a13b;
}

.jobs-page .cards .card.val-card h6 {
  color: #e82838;
}

.jobs-page .cards .card.val-card .btn {
  background-color: #e82838;
}

.jobs-page .sec-faqs {
  padding: 5.2083vw;
  background-color: #0e0d1a;
}

.jobs-page .sec-faqs .top {
  margin-bottom: 4.1667vw;
}

.jobs-page .sec-faqs .top h4 {
  font-size: 2.6042vw;
  font-weight: 500;
  line-height: 4.0625vw;
  text-align: center;
}

.jobs-page .features-sec {
  padding: 5.208vw 4.167vw;
  background-color: #0e0d1a;
}

.jobs-page .features-sec h2 {
  font-size: 3.125vw;
  font-weight: 500;
  line-height: 4.063vw;
  text-align: center;
}

.jobs-page .features-sec h6 {
  font-size: 1.042vw;
  font-weight: 400;
  line-height: 1.875vw;
  max-width: 44.01vw;
  text-align: center;
  margin: 1.042vw auto 3.125vw;
}

.jobs-page .features-sec .feature-tiles {
  gap: 2.083vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.jobs-page .features-sec .feature-tiles .tile {
  padding: 1.563vw;
  border-radius: 3.125vw;
  border: 0.104vw solid rgba(114, 110, 142, 0.1);
  background-color: #110f1f;
}

.jobs-page .features-sec .feature-tiles .tile img {
  width: 6.25vw;
  height: 6.25vw;
  margin-bottom: 4.792vw;
}

.jobs-page .features-sec .feature-tiles .tile h5 {
  font-size: 1.25vw;
  font-weight: 500;
  margin-bottom: 0.521vw;
}

.jobs-page .features-sec .feature-tiles .tile p {
  font-size: 0.938vw;
  font-weight: 300;
  line-height: 1.563vw;
  color: #726e8e;
}

.jobs-page .features-sec .btn {
  font-size: 1.042vw;
  line-height: 1.875vw;
  padding: 0.521vw 2.5vw;
  margin: 4.167vw auto 0;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
}

.jobs-page .requirements-sec {
  padding: 5.208vw 4.167vw;
  background: url('../images/boost-forms/second-sec-bg.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.jobs-page .requirements-sec h2 {
  font-size: 3.125vw;
  font-weight: 500;
  line-height: 4.063vw;
  text-align: center;
}

.jobs-page .requirements-sec h6 {
  font-size: 1.042vw;
  font-weight: 400;
  line-height: 1.875vw;
  max-width: 44.01vw;
  text-align: center;
  margin: 1.042vw auto 3.125vw;
}

.jobs-page .requirements-sec .requirement-cards {
  gap: 2.083vw;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.jobs-page .requirements-sec .requirement-cards .card {
  padding: 2.083vw;
  border-radius: 2.604vw;
  min-width: 29.167vw;
  background-color: #110f1f;
  z-index: 0;
  position: relative;
}

.jobs-page .requirements-sec .requirement-cards .card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.052vw;
  background: linear-gradient(180deg, #6366f1 0%, #fff 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
}

.jobs-page .requirements-sec .requirement-cards .card img {
  width: 5.208vw;
  height: 5.208vw;
  margin-bottom: 2.083vw;
}

.jobs-page .requirements-sec .requirement-cards .card h4 {
  font-size: 1.458vw;
  font-weight: 400;
  margin-bottom: 0.521vw;
}

.jobs-page .requirements-sec .requirement-cards .card p {
  font-size: 0.938vw;
  font-weight: 400;
  color: #6366f1;
  margin-bottom: 1.042vw;
}

.jobs-page .requirements-sec .requirement-cards .card .list-box p {
  font-size: 0.833vw;
  font-weight: 400;
  color: #fff;
  margin-bottom: 0;
}

.jobs-page .requirements-sec .requirement-cards .card .list-box ul {
  list-style: none;
  padding-left: 0;
  margin: 1.563vw 0;
}

.jobs-page .requirements-sec .requirement-cards .card .list-box ul li {
  font-size: 0.833vw;
  font-weight: 400;
  margin-bottom: 0.729vw;
  color: #726e8e;
  background: url('../images/jobs/check.svg') no-repeat left center;
  background-size: 0.833vw 0.833vw;
  padding-left: 1.354vw;
}

.jobs-page .requirements-sec .requirement-cards .card h5 {
  font-size: 1.042vw;
  font-weight: 500;
  margin-bottom: 1.042vw;
}

.jobs-page .requirements-sec .requirement-cards .card .earning-boxes {
  gap: 2.083vw;
  display: flex;
  align-items: center;
}

.jobs-page .requirements-sec .requirement-cards .card .earning-boxes .box {
  padding: 1.042vw;
  border-radius: 1.354vw;
  border: 0.052vw solid #6366f1;
  background-color: rgba(99, 102, 241, 0.1);
}

.jobs-page .requirements-sec .requirement-cards .card .earning-boxes .box h6 {
  font-size: 0.833vw;
  font-weight: 400;
  margin: 0 0 0.521vw;
  text-align: start;
}

.jobs-page .requirements-sec .requirement-cards .card .earning-boxes .box p {
  font-size: 0.729vw;
  margin-bottom: 0;
  color: #726e8e;
}

.blogs-page header {
  height: clamp(220px, 35vh, 420px);
  background:
    radial-gradient(ellipse 55% 75% at 75% 50%, rgba(99,102,241,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 35% 50% at 15% 45%, rgba(168,139,250,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 50% 110%, rgba(59,184,255,0.08) 0%, transparent 50%),
    linear-gradient(135deg, #0a0818 0%, #0e0c22 50%, #0a0818 100%);
  display: flex;
  align-items: center;
  justify-content: start;
  position: relative;
  overflow: hidden;
}
.blogs-page header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
  pointer-events: none;
}
.blogs-page header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}

.blogs-page header .content {
  max-width: 40.917vw;
  margin-left: 4.167vw;
}

.blogs-page header h1 {
  font-size: 7.208vw;
  line-height: 9.333vw;
  margin-bottom: 1.042vw;
  text-transform: uppercase;
  font-family: 'superchargestraight', sans-serif;
}

.blogs-page header p {
  font-size: 1.042vw;
  line-height: 1.875vw;
}

.blogs-page .container {
  margin: 2.604vw auto;
  max-width: 80%;
}

.blogs-page .container .blogs {
  gap: 1.563vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.blogs-page .container .blogs .blog {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  border-radius: 1.146vw;
  border: 0.104vw solid rgba(114, 110, 142, 0.1);
  overflow: hidden;
}

.blogs-page .container .blogs .blog .extended-link {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.blogs-page .container .blogs .blog img {
  width: 100%;
  height: auto;
  border-radius: 1.146vw;
}

.blogs-page .container .blogs .blog .body {
  padding: 1.563vw;
}

.blogs-page .container .blogs .blog .body h3 {
  font-size: 1.5vw;
  margin-bottom: 0.781vw;
}

.blogs-page .container .blogs .blog .body p {
  font-size: 1vw;
  color: #726e8e;
}

.blogs-page .container .blogs .blog .footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.563vw 1.563vw 1.563vw;
}

.blogs-page .container .blogs .blog .footer .flex {
  gap: 0.521vw;
  display: flex;
  align-items: center;
}

.blogs-page .container .blogs .blog .footer .flex i {
  color: #6366f1;
  font-size: 1.2vw;
}

.blogs-page .container .blogs .blog .footer .flex time {
  font-size: 0.9vw;
  color: #726e8e;
}

.blogs-page .container .blogs .blog .footer a {
  font-size: 0.9vw;
  color: #6366f1;
  text-decoration: none;
}

.blogs-page .container .pagination {
  margin-top: 2.083vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.521vw;
  flex-wrap: wrap;
}

.blogs-page .container .pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.604vw;
  height: 2.604vw;
  border: 0.104vw solid rgba(114, 110, 142, 0.2);
  border-radius: 0.625vw;
  color: #726e8e;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  padding: 0 0.781vw;
  font-size: 0.95vw;
}

.blogs-page .container .pagination a:hover {
  border-color: #6366f1;
  color: #6366f1;
  background-color: rgba(99, 102, 241, 0.1);
}

.blogs-page .container .pagination a.active {
  background-color: #6366f1;
  color: #fff;
  border-color: #6366f1;
  pointer-events: none;
}

.blogs-page .container .pagination a.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.blogs-page .container .pagination .prev,
.blogs-page .container .pagination .next {
  font-weight: 600;
  font-size: 0.9vw;
}

.article-page {
  background-image:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(99,102,241,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 10% 5%, rgba(59,184,255,0.08) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 90% 5%, rgba(168,139,250,0.08) 0%, transparent 50%);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: top center;
}

.article-page .header {
  text-align: center;
  margin: 12.5vw 0 6.25vw;
}

.article-page .header h1 {
  font-size: 4.125vw;
  font-weight: 400;
  line-height: 6.375vw;
  text-transform: uppercase;
  font-style: italic;
  font-family: 'superchargestraight', sans-serif;
}

.article-page .header h5 {
  font-size: 1.042vw;
  font-weight: 400;
  line-height: 2.083vw;
}

.article-page .container {
  max-width: 68.75vw;
  margin: 0 auto 6.25vw;
  padding: 0 2.083vw;
}

.article-page .container > div {
  margin-bottom: 1.6vw;
}

.article-page .container i {
  font-size: 1.042vw;
  color: #6366f1;
  margin-right: 0.521vw;
}

.article-page .container span {
  font-size: 0.938vw;
  color: #726e8e;
}

.article-page .container time {
  font-size: 0.938vw;
  color: #726e8e;
}

.article-page .container article h2 {
  font-size: 2.188vw;
  font-weight: 500;
  margin-bottom: 1.563vw;
}

.article-page .container article h3 {
  font-size: 1.625vw;
  font-weight: 500;
  margin-bottom: 1.563vw;
}

.article-page .container article p {
  font-size: 1.042vw;
  font-weight: 300;
  line-height: 2.188vw;
  color: #726e8e;
  margin-bottom: 1.563vw;
}

.article-page .container article img {
  width: 100%;
  height: auto;
  border-radius: 1.042vw;
  margin: 2.083vw 0;
}

.article-page .container article ul {
  list-style-type: disc;
  padding-left: 2.604vw;
  margin-bottom: 1.563vw;
}

.article-page .container article ul li {
  font-size: 1.042vw;
  font-weight: 300;
  line-height: 2.188vw;
  color: #726e8e;
  margin-bottom: 0.781vw;
}

.imprint-page {
  background-image:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(99,102,241,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 10% 5%, rgba(59,184,255,0.08) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 90% 5%, rgba(168,139,250,0.08) 0%, transparent 50%);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: top center;
}

.imprint-page .header {
  text-align: center;
  margin: 12.5vw 0 6.25vw;
}

.imprint-page .header h1 {
  font-size: 4.125vw;
  font-weight: 400;
  line-height: 6.375vw;
  text-transform: uppercase;
  font-style: italic;
  font-family: 'superchargestraight', sans-serif;
}

.imprint-page .container {
  max-width: 68.75vw;
  margin: 0 auto 6.25vw;
  padding: 0 2.083vw;
}

.imprint-page .container h2 {
  font-size: 1.789vw;
  font-weight: 500;
  margin-bottom: 0;
}

.imprint-page .container p {
  font-size: 1.042vw;
  font-weight: 300;
  line-height: 2.188vw;
  color: #726e8e;
  margin-bottom: 1.563vw;
}

.imprint-page .container p a {
  color: #6366f1;
  text-decoration: none;
}

.imprint-page .container p a:hover {
  text-decoration: underline;
}

.imprint-page.thankyou .container {
  text-align: center;
}

.imprint-page.thankyou .container p {
  font-size: 1.25vw;
  font-weight: 400;
  margin-top: 1.042vw;
}

.imprint-page.thankyou .thankyou-ready-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.2vw;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  background: rgba(74,222,128,.1);
  border: 1px solid rgba(74,222,128,.25);
  border-radius: 99px;
  padding: .45rem 1.1rem;
}

.imprint-page.thankyou .header {
  margin-bottom: 0;
}

.privacy-page {
  background-image:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(99,102,241,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 10% 5%, rgba(59,184,255,0.08) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 90% 5%, rgba(168,139,250,0.08) 0%, transparent 50%);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: top center;
}

.privacy-page .header {
  text-align: center;
  margin: 12.5vw 0 6.25vw;
}

.privacy-page .header h1 {
  font-size: 4.125vw;
  font-weight: 400;
  line-height: 6.375vw;
  text-transform: uppercase;
  font-style: italic;
  font-family: 'superchargestraight', sans-serif;
}

.privacy-page .container {
  max-width: 68.75vw;
  margin: 0 auto 6.25vw;
  padding: 0 2.083vw;
}

.privacy-page .container h2 {
  font-size: 1.771vw;
  font-weight: 600;
  margin: 1.042vw 0;
}

.privacy-page .container h5 {
  font-size: 1.25vw;
  font-weight: 500;
  margin-top: 1.042vw;
  margin-bottom: 0.625vw;
}

.privacy-page .container p {
  font-size: 1.042vw;
  font-weight: 300;
  line-height: 1.771vw;
  color: #726e8e;
  margin-bottom: 1.042vw;
}

.privacy-page .container a {
  color: #6366f1;
  text-decoration: none;
  font-weight: 400;
  font-size: 1.042vw;
  transition: color 0.2s ease;
}

.privacy-page .container a:hover {
  text-decoration: underline;
}

.privacy-page .container ul {
  list-style-type: disc;
  padding-left: 1.458vw;
  margin-bottom: 1.042vw;
}

.privacy-page .container ul li {
  font-size: 0.833vw;
  font-weight: 300;
  line-height: 1.458vw;
  color: #726e8e;
  margin-bottom: 0.521vw;
}

.premium-accounts-page header {
  height: auto;
  min-height: 0;
  background: none !important;
  display: block;
}

.premium-accounts-page header .content {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 28px;
  text-align: center;
}

.premium-accounts-page header h1 {
  font-size: 5.208vw;
  line-height: 7.333vw;
  margin-bottom: 1.042vw;
  text-transform: uppercase;
  font-family: 'superchargestraight', sans-serif;
}

.premium-accounts-page header p {
  font-size: 1.042vw;
  line-height: 1.875vw;
}

.premium-accounts-page .container {
  margin: 4.167vw auto;
  max-width: 80%;
}

.premium-accounts-page .container .account-switches {
  margin: 0 auto;
  text-align: center;
}

/* Account type feature cards (Smurf / Ranked) */
.account-type-cards{
  width: min(74vw, 1240px);
  margin: 0 auto 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.account-type-cards .type-card{
  display: flex;
  flex-direction: column;
  padding: 20px 22px 18px;
  border-radius: 16px;
  text-decoration: none;
  color: #fff;
  background: rgba(14, 12, 28, 0.92);
  border: 1px solid rgba(99,102,241,0.18);
  box-shadow: 0 4px 20px rgba(0,0,0,0.30);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  position: relative;
  overflow: hidden;
}
.account-type-cards .type-card::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(ellipse at 30% 0%, rgba(99,102,241,0.12), transparent 70%);
  transition: opacity 0.2s;
  pointer-events: none;
}
.account-type-cards .type-card:hover{
  border-color: rgba(99,102,241,0.45);
  box-shadow: 0 8px 32px rgba(99,102,241,0.18), 0 4px 12px rgba(0,0,0,0.35);
  transform: translateY(-2px);
}
.account-type-cards .type-card:hover::before{ opacity: 1; }
.account-type-cards .type-card.is-active{
  border-color: rgba(99,102,241,0.55);
  box-shadow: 0 8px 32px rgba(99,102,241,0.22), 0 4px 12px rgba(0,0,0,0.35);
  background: rgba(99,102,241,0.07);
}
.account-type-cards .type-card.is-active::before{ opacity: 1; }

.type-card__top{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.type-card__icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99,102,241,0.18);
  border: 1px solid rgba(99,102,241,0.28);
  flex-shrink: 0;
}
.type-card__icon::before{ display: none; }
.type-card__icon i{
  font-size: 16px;
  color: #818cf8;
}
.type-card__titles{
  flex: 1;
  min-width: 0;
}
.type-card__title{
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
.type-card__subtitle{
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.type-card__badge{
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.type-card__badge--fast{
  background: rgba(99,102,241,0.18);
  border: 1px solid rgba(99,102,241,0.35);
  color: #a5b4fc;
}
.type-card__badge--popular{
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.30);
  color: #fcd34d;
}
.type-card__pills{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.type-card__pills .type-pill{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.account-type-cards .type-card.is-active .type-pill{
  color: rgba(165,180,252,0.8);
  background: rgba(99,102,241,0.10);
  border-color: rgba(99,102,241,0.22);
}
.type-card__cta{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.40);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  transition: color 0.15s;
}
.account-type-cards .type-card:hover .type-card__cta,
.account-type-cards .type-card.is-active .type-card__cta{
  color: #818cf8;
}
.type-card__cta i{
  font-size: 12px;
  transition: transform 0.15s;
}
.account-type-cards .type-card:hover .type-card__cta i{ transform: translateX(3px); }

@media (max-width: 768px){
  .account-type-cards{ width: 92vw; grid-template-columns: 1fr; gap: 10px; }
  .type-card__top{ gap: 10px; }
  .type-card__icon{ width: 36px; height: 36px; }
  .type-card__icon i{ font-size: 14px; }
  .type-card__title{ font-size: 15px; }
  .type-card__subtitle{ font-size: 12px; }
  .type-card__badge{ font-size: 11px; padding: 3px 8px; }
  .type-card__pills{ margin-bottom: 12px; gap: 6px; }
  .type-card__pills .type-pill{ font-size: 11px; }
  .type-card__cta{ font-size: 12px; }
}

.premium-accounts-page .container .account-switches .btn:first-child {
  margin-right: 1.042vw;
}

.premium-accounts-page .container .account-switches .btn:last-child {
  background-color: #18162b;
}

.premium-accounts-page .container .account-switches .btn i {
  font-size: 1.042vw;
  margin-right: 0.521vw;
}

.premium-accounts-page .container .nav-tabs {
  gap: 0.781vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2.083vw 0;
}

.premium-accounts-page .container .nav-tabs a {
  font-size: 1.042vw;
  padding: 0.521vw 1.563vw;
  border-radius: 0.521vw;
  text-decoration: none;
  color: #fff;
  background-color: #18162b;
}

.premium-accounts-page .container .nav-tabs a.active {
  background-color: #6366f1;
}

.premium-accounts-page .container .accounts-grid,
.ranked-accounts-page .container .accounts-grid {
  gap: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}

.premium-accounts-page .container .accounts-grid .account,
.ranked-accounts-page .container .accounts-grid .account {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(14, 12, 28, 0.92);
  border: 1px solid rgba(99, 102, 241, 0.18);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  height: 100%;
}

.premium-accounts-page .container .accounts-grid .account:hover,
.ranked-accounts-page .container .accounts-grid .account:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.50);
  box-shadow: 0 12px 40px rgba(99, 102, 241, 0.20), 0 4px 12px rgba(0, 0, 0, 0.40);
}

.premium-accounts-page .container .accounts-grid .account::after,
.ranked-accounts-page .container .accounts-grid .account::after {
  display: none !important;
}

.premium-accounts-page .container .accounts-grid .account.is-sold-out,
.ranked-accounts-page .container .accounts-grid .account.is-sold-out {
  opacity: 0.55;
  filter: grayscale(0.4);
}

.premium-accounts-page .container .accounts-grid .account.is-sold-out:hover,
.ranked-accounts-page .container .accounts-grid .account.is-sold-out:hover {
  transform: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

/* Head */
.premium-accounts-page .container .accounts-grid .account .head,
.ranked-accounts-page .container .accounts-grid .account .head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 18px 16px 14px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.premium-accounts-page .container .accounts-grid .account .head .image-wrapper,
.ranked-accounts-page .container .accounts-grid .account .head .image-wrapper {
  display: none;
}

.premium-accounts-page .container .accounts-grid .account .head .corner-meta,
.ranked-accounts-page .container .accounts-grid .account .head .corner-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 12px;
}

.premium-accounts-page .container .accounts-grid .account .head .server-badge,
.ranked-accounts-page .container .accounts-grid .account .head .server-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.28);
}

.premium-accounts-page .container .accounts-grid .account .head .server-badge i,
.ranked-accounts-page .container .accounts-grid .account .head .server-badge i {
  font-size: 10px;
}

.premium-accounts-page .container .accounts-grid .account .head .rank-badge,
.ranked-accounts-page .container .accounts-grid .account .head .rank-badge {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 11, 26, 0.85);
  border: 1px solid rgba(99, 102, 241, 0.22);
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.18), 0 4px 10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  flex-shrink: 0;
}

.premium-accounts-page .container .accounts-grid .account .head .rank-badge img,
.ranked-accounts-page .container .accounts-grid .account .head .rank-badge img {
  width: 28px;
  height: auto;
}

.premium-accounts-page .container .accounts-grid .account .head h4,
.ranked-accounts-page .container .accounts-grid .account .head h4 {
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  margin: 0;
  line-height: 1.35;
  color: #fff;
}

/* Feature list */
.premium-accounts-page .container .accounts-grid .account ul,
.ranked-accounts-page .container .accounts-grid .account ul {
  list-style: none;
  padding: 14px 16px 0;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.premium-accounts-page .container .accounts-grid .account ul li,
.ranked-accounts-page .container .accounts-grid .account ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.60);
  background: none !important;
  padding-left: 0 !important;
  margin: 0;
  line-height: 1.3;
}

.premium-accounts-page .container .accounts-grid .account ul li::before,
.ranked-accounts-page .container .accounts-grid .account ul li::before {
  content: '';
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='rgba(99,102,241,0.15)' stroke='rgba(99,102,241,0.38)' stroke-width='1'/%3E%3Cpath d='M4.5 8l2.5 2.5 4.5-4.5' stroke='%236366f1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* Foot */
.premium-accounts-page .container .accounts-grid .account .foot,
.ranked-accounts-page .container .accounts-grid .account .foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  align-items: stretch;
  justify-content: flex-start;
}

.premium-accounts-page .container .accounts-grid .account .foot .price,
.ranked-accounts-page .container .accounts-grid .account .foot .price {
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0;
  color: #fff;
}

.premium-accounts-page .container .accounts-grid .account .foot .price .price__value,
.ranked-accounts-page .container .accounts-grid .account .foot .price .price__value {
  background: linear-gradient(135deg, #818cf8, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.premium-accounts-page .container .accounts-grid .account .foot .price--soldout .price__value,
.ranked-accounts-page .container .accounts-grid .account .foot .price--soldout .price__value {
  background: none;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.30);
  color: rgba(255, 255, 255, 0.30);
}

.premium-accounts-page .container .accounts-grid .account .foot .ajax-form,
.ranked-accounts-page .container .accounts-grid .account .foot .ajax-form {
  width: 100%;
}

.premium-accounts-page .container .accounts-grid .account .foot .buy-now,
.ranked-accounts-page .container .accounts-grid .account .foot .buy-now {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter 0.15s, transform 0.15s;
  box-shadow: 0 2px 14px rgba(99, 102, 241, 0.40);
}

.premium-accounts-page .container .accounts-grid .account .foot .buy-now:hover,
.ranked-accounts-page .container .accounts-grid .account .foot .buy-now:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  background-color: unset;
}

.premium-accounts-page .container .accounts-grid .account .foot .sold,
.premium-accounts-page .container .accounts-grid .account .foot .sold-cta,
.ranked-accounts-page .container .accounts-grid .account .foot .sold,
.ranked-accounts-page .container .accounts-grid .account .foot .sold-cta {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: not-allowed;
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.premium-accounts-page .container .accounts-grid .account .trust-row,
.ranked-accounts-page .container .accounts-grid .account .trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}

.premium-accounts-page .container .accounts-grid .account .trust-badge,
.ranked-accounts-page .container .accounts-grid .account .trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.40);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  white-space: nowrap;
}

.premium-accounts-page .container .accounts-grid .account .trust-badge i,
.ranked-accounts-page .container .accounts-grid .account .trust-badge i {
  font-size: 9px;
}

.premium-accounts-page .container .accounts-grid .account .trust-badge.is-accent,
.ranked-accounts-page .container .accounts-grid .account .trust-badge.is-accent {
  color: rgba(129, 140, 248, 0.85);
  background: rgba(99, 102, 241, 0.10);
  border-color: rgba(99, 102, 241, 0.22);
}

/* Responsive */
@media (max-width: 1280px) {
  .premium-accounts-page .container .accounts-grid,
  .ranked-accounts-page .container .accounts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .premium-accounts-page .container .accounts-grid,
  .ranked-accounts-page .container .accounts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 540px) {
  .premium-accounts-page .container .accounts-grid,
  .ranked-accounts-page .container .accounts-grid {
    grid-template-columns: 1fr;
  }
}

.premium-accounts-page .container .seo-content {
  gap: 3.125vw;
  display: grid;
}

.premium-accounts-page .container .seo-content h4 {
  font-size: 2.604vw;
  font-weight: 500;
  margin-bottom: 1.563vw;
  text-align: center;
}

.premium-accounts-page .container .seo-content p {
  font-size: 1.042vw;
  font-weight: 300;
  line-height: 2.188vw;
  color: #726e8e;
  margin-bottom: 1.042vw;
}

.premium-accounts-page .sec-faqs {
  padding: 5.2083vw;
  background-color: #0e0d1a;
}

.premium-accounts-page .sec-faqs .top {
  margin-bottom: 4.1667vw;
}

.premium-accounts-page .sec-faqs .top h4 {
  font-size: 2.6042vw;
  font-weight: 500;
  line-height: 4.0625vw;
  text-align: center;
}

.ranked-accounts-page header {
  height: auto;
  min-height: 0;
  background: none !important;
  display: block;
}

.ranked-accounts-page header .content {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 28px;
  text-align: center;
}

.ranked-accounts-page header h1 {
  font-size: 5.208vw;
  line-height: 7.333vw;
  margin-bottom: 1.042vw;
  text-transform: uppercase;
  font-family: 'superchargestraight', sans-serif;
}

.ranked-accounts-page header p {
  font-size: 1.042vw;
  line-height: 1.875vw;
}

.ranked-accounts-page .container {
  margin: 4.167vw auto;
  max-width: 80%;
}

.ranked-accounts-page .container .account-switches {
  margin: 0 auto;
  text-align: center;
}

.ranked-accounts-page .container .account-switches .btn:first-child {
  margin-right: 1.042vw;
  background-color: #18162b;
}

.ranked-accounts-page .container .account-switches .btn i {
  font-size: 1.042vw;
  margin-right: 0.521vw;
}

.ranked-accounts-page .container .filter-box .head {
  padding: 2.083vw 0;
  border-bottom: 0.156vw solid rgba(114, 110, 142, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ranked-accounts-page .container .filter-box .head h2 {
  font-size: 1.667vw;
  font-weight: 500;
}

.ranked-accounts-page .container .filter-box .head button {
  padding: 0.521vw 1.563vw;
  font-size: 1.042vw;
  font-weight: 600;
  line-height: 1.875vw;
  border-radius: 2.604vw;
  background-color: #6366f1;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.ranked-accounts-page .container .filter-box .head button:hover {
  background-color: rgb(52.2, 56.1, 236.8);
}

.ranked-accounts-page .container .filter-box .bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1.042vw;
  margin: 2.083vw 0 4.167vw;
}

.ranked-accounts-page .container .filter-box .bottom .form-group {
  flex: 1;
  min-width: 10.417vw;
  margin-bottom: 0;
}

.ranked-accounts-page .container .filter-box .bottom .form-group .select2-container {
  width: 100% !important;
}

.ranked-accounts-page .container .filter-box .bottom .form-group.filter {
  flex: 0 0 100%;
}

.ranked-accounts-page .container .filter-box .bottom .icon-group {
  position: relative;
}

.ranked-accounts-page .container .filter-box .bottom .icon-group i {
  font-size: 1.042vw;
  position: absolute;
  top: 50%;
  left: 1.042vw;
  transform: translateY(-50%);
  z-index: 1;
}

.ranked-accounts-page .container .filter-box .bottom .icon-group input {
  padding-left: 3.125vw;
}

.ranked-accounts-page .container .filter-box .bottom .icon-group .select2-selection {
  padding-left: 3.125vw;
}

.ranked-accounts-page .container .accounts-grid {
  gap: 1.563vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.ranked-accounts-page .container .accounts-grid .account-card {
  border-radius: 1.146vw;
  border: 0.156vw solid rgba(114, 110, 142, 0.1);
  overflow: visible;
  background-color: rgba(255,255,255,.06);
  padding: 1.563vw;
  position: relative;
  display: flex;
  flex-direction: column;
}

.ranked-accounts-page .container .accounts-grid .account-card .title {
  font-size: 0.938vw;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.521vw;
}

.ranked-accounts-page .container .accounts-grid .account-card .title img {
  width: auto;
  height: 2.083vw;
}

.ranked-accounts-page .container .accounts-grid .account-card .image-box {
  position: relative;
  margin: 1.042vw 0;
}

.ranked-accounts-page .container .accounts-grid .account-card .image-box img {
  max-height: 13.021vw;
  -o-object-fit: cover;
  object-fit: cover;
  margin: 0 auto;
}

.ranked-accounts-page .container .accounts-grid .account-card .image-box .badge {
  position: absolute;
  right: 0.781vw;
  bottom: 0.781vw;
  border-radius: 0.26vw;
  padding: 0.26vw 0.521vw;
  gap: 0.417vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ranked-accounts-page .container .accounts-grid .account-card .highlights {
  gap: 0.521vw;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.042vw;
}

.ranked-accounts-page .container .accounts-grid .account-card .highlights .badge {
  font-size: 0.729vw;
  background-color: rgba(99, 102, 241, 0.3);
  color: #fff;
  gap: 0.417vw;
  display: inline-flex;
  align-items: center;
  border-radius: 0.26vw;
  padding: 0.26vw 0.521vw;
}

.ranked-accounts-page .container .accounts-grid .account-card .totals {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ranked-accounts-page .container .accounts-grid .account-card .totals .price-eur {
  font-size: 1.458vw;
  font-weight: 800;
  color: #fff;
}

.ranked-accounts-page .container .accounts-grid .account-card .totals .btn {
  padding: 0.521vw 1.042vw;
  font-size: 0.833vw;
}

.ranked-accounts-page .container .accounts-grid .account-card .delivery-type {
  font-size: 1.042vw;
  position: absolute;
  top: 1.563vw;
  right: 1.563vw;
}

/* Shop pagination (Ranked Accounts) */
.ranked-accounts-page #shopPagination{
  display:flex;
  justify-content:center;
  margin-top: 2.083vw;
}

.ranked-accounts-page #shopPagination .page-bar{
  display:flex;
  gap: 0.781vw;
  flex-wrap: wrap;
}

.ranked-accounts-page #shopPagination .page-btn{
  min-width: 2.604vw;
  height: 2.604vw;
  padding: 0 0.833vw;
  border-radius: 0.729vw;
  font-size: 0.938vw;
  font-weight: 600;
  border: 0.156vw solid rgba(114, 110, 142, 0.25);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

.ranked-accounts-page #shopPagination .page-btn:hover{
  background-color: rgba(99, 102, 241, 0.25);
  border-color: rgba(99, 102, 241, 0.7);
}

.ranked-accounts-page #shopPagination .page-btn.active,
.ranked-accounts-page #shopPagination .page-btn.is-active{
  background-color: #6366f1;
  border-color: #6366f1;
  color: #fff;
  box-shadow: 0 0 0 0.156vw rgba(99, 102, 241, 0.3);
}

.ranked-accounts-page #shopPagination .page-btn.disabled,
.ranked-accounts-page #shopPagination .page-btn:disabled,
.ranked-accounts-page #shopPagination .page-btn.is-disabled{
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

.ranked-accounts-page #shopPagination .page-btn.is-nav{
  color: rgba(255,255,255,0.6);
  font-size: 0.833vw;
}

.ranked-accounts-page #shopPagination .page-ellipsis{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.604vw;
  height: 2.604vw;
  color: rgba(255,255,255,0.35);
  font-size: 0.938vw;
  font-weight: 600;
}

.view-account-page header {
  height: auto;
  min-height: 0;
  background: none !important;
  display: block;
}

.view-account-page header .content {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 28px;
  text-align: center;
}

.view-account-page header h1 {
  font-size: 4.208vw;
  line-height: 6.333vw;
  margin-bottom: 1.042vw;
  text-transform: uppercase;
  font-family: 'superchargestraight', sans-serif;
}

.view-account-page header p {
  font-size: 1.042vw;
  line-height: 1.875vw;
}

.view-account-page .container {
  margin: 4.167vw auto;
  max-width: 85%;
}

.view-account-page .title {
  gap: 1.042vw;
  display: flex;
  align-items: center;
  font-size: 1.3vw;
}

.view-account-page .title .rank-icon {
  background-color: #0a0a18;
  padding: 1.042vw;
  border-radius: 0.521vw;
}

.view-account-page .title .rank-icon img {
  width: auto;
  height: 2.604vw;
}

.view-account-page .highlights {
  gap: 0.729vw;
  display: flex;
  align-items: center;
  margin: 1.042vw 0 1.563vw;
}

.view-account-page .highlights .badge {
  font-size: 0.833vw;
  background-color: rgba(99, 102, 241, 0.3);
  border: 0.052vw solid #6366f1;
  color: #fff;
  gap: 0.417vw;
  display: inline-flex;
  align-items: center;
  border-radius: 2.604vw;
  padding: 0.521vw 1.302vw;
}

.view-account-page .layout {
  gap: 1.563vw;
  display: flex;
}

.view-account-page .layout .left {
  flex: 1;
}

.view-account-page .layout .right {
  max-width: 26.042vw;
}

.view-account-page .card {
  border-radius: 1.146vw;
  background-color: rgba(255,255,255,.06);
  border: 0.104vw solid rgba(114, 110, 142, 0.3);
  margin-bottom: 1.563vw;
}

.view-account-page .card .card-header {
  padding: 1.042vw;
  border-bottom: 0.104vw solid rgba(114, 110, 142, 0.3);
}

.view-account-page .card .card-header h4 {
  font-size: 1.25vw;
  font-weight: 500;
  padding: 0.521vw;
}

.view-account-page .card .card-header h4 i {
  color: #6366f1;
  margin-right: 0.521vw;
}

.view-account-page .card .card-header .nav-tabs {
  gap: 0.781vw;
  display: flex;
  align-items: center;
}

.view-account-page .card .card-header .nav-tabs a {
  font-size: 0.833vw;
  padding: 0.521vw 1.042vw;
  border-radius: 0.521vw;
  text-decoration: none;
  color: #fff;
  background-color: #121126;
}

.view-account-page .card .card-header .nav-tabs a.active {
  background-color: #2a295f;
}

.view-account-page .card .card-header .nav-tabs a i {
  margin-right: 0.417vw;
}

.view-account-page .card .card-header .nav-tabs .count-badge {
  font-size: 0.729vw;
  background-color: hsla(0, 0%, 100%, 0.2);
  border-radius: 0.417vw;
  padding: 0.26vw 0.625vw;
  margin-left: 0.26vw;
}

.view-account-page .card .card-header.gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.view-account-page .card .card-header.gallery-header .btn {
  padding: 0.781vw 1.042vw;
  font-size: 0.833vw;
  border-radius: 0.521vw;
  background-color: #6366f1;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-align: center;
}

.view-account-page .card .card-header.gallery-header .btn i {
  margin-left: 0;
}

.view-account-page .card .card-body {
  padding: 1.563vw;
}

.view-account-page .description {
  font-size: 0.833vw;
  line-height: 1.25vw;
  margin-bottom: 1.563vw;
}

.view-account-page .features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.view-account-page .features .feature {
  padding-top: 1.563vw;
  margin-bottom: 1.563vw;
  border-top: 0.052vw solid rgba(114, 110, 142, 0.4);
}

.view-account-page .features .feature:nth-last-child(-n + 3) {
  margin-bottom: 0;
}

.view-account-page .features .feature h6 {
  font-size: 0.938vw;
  font-weight: 700;
  margin-bottom: 0.521vw;
}

.view-account-page .features .feature span {
  gap: 0.521vw;
  display: flex;
  align-items: center;
  font-size: 0.938vw;
  color: #ffffff;
}

.view-account-page .features .feature span img {
  width: auto;
  height: 1.823vw;
}

.view-account-page .features .feature span i {
  font-size: 1.042vw;
  color: #6366f1;
}

.view-account-page .champs {
  gap: 1.042vw;
  display: flex;
  flex-wrap: wrap;
  max-height: 23.438vw;
  overflow-y: auto;
}

.view-account-page .champs img {
  width: auto;
  height: 6.51vw;
  aspect-ratio: 1/1;
}

.view-account-page .champs small {
  font-size: 0.729vw;
  margin-top: 0.521vw;
}

.view-account-page .skins,
.view-account-page .skins-list {
  gap: 1.042vw;
  display: flex;
  flex-wrap: wrap;
  max-height: 23.438vw;
  overflow-y: auto;
}

.view-account-page .skins img,
.view-account-page .skins-list img {
  width: 13.021vw;
  height: auto;
}

.view-account-page .roles {
  gap: 1.042vw;
  display: flex;
  flex-wrap: wrap;
}

.view-account-page .roles img {
  width: auto;
  height: 4vw;
}

.view-account-page .roles small {
  font-size: 0.729vw;
  margin-top: 0.521vw;
  text-align: center;
  width: 100%;
  display: block;
}

.view-account-page .tagline {
  font-size: 0.938vw;
  font-weight: 500;
  font-style: italic;
  margin-bottom: 1.563vw;
}

.view-account-page ul.checkout-features {
  list-style: none;
  padding-left: 0;
}

.view-account-page ul.checkout-features li {
  font-size: 0.833vw;
  line-height: 1.25vw;
  color: #726e8e;
  margin-bottom: 0.521vw;
}

.view-account-page ul.checkout-features li i {
  color: #6366f1;
  margin-right: 0.521vw;
  font-size: 0.938vw;
}

.view-account-page .totals {
  margin-top: 1.563vw;
}

.view-account-page .totals .price {
  font-size: 1.667vw;
  font-weight: 800;
  color: #fff;
}

.view-account-page .totals .btn {
  padding: 0.781vw 1.563vw;
  font-size: 0.938vw;
  border-radius: 2.604vw;
  background-color: #6366f1;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 100%;
  display: block;
  margin-top: 1.042vw;
}

.view-account-page .totals .btn i {
  font-size: 1.042vw;
  margin-right: 0.521vw;
}

.view-account-page .gallery img {
  width: auto;
  max-height: 15.625vw;
  border-radius: 0.521vw;
  margin: 0 auto;
}

/* Trusted badges under gallery */
.view-account-page .trusted-badges {
  margin-top: 0.9vw;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6vw;
}

.view-account-page .trusted-badge {
  display: flex;
  align-items: center;
  gap: 0.65vw;
  padding: 0.75vw 0.9vw;
  border-radius: 0.8vw;
  border: 1px solid rgba(114, 110, 142, 0.35);
  background: rgba(114, 110, 142, 0.12);
  color: #fff;
}

.view-account-page .trusted-badge i {
  font-size: 1.05vw;
  color: #6366f1;
}

.view-account-page .trusted-badge .text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.view-account-page .trusted-badge .label {
  font-weight: 700;
  font-size: 0.85vw;
}

.view-account-page .trusted-badge .sub {
  font-size: 0.75vw;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.15vw;
}

.view-account-page .trusted-badge .stars i {
  font-size: 0.75vw;
  color: #fbbf24;
  margin-right: 0.12vw;
}

.view-account-page .trusted-badge .rating {
  font-weight: 800;
  margin-left: 0.25vw;
  color: rgba(255, 255, 255, 0.9);
}

.view-account-page a.trusted-badge {
  text-decoration: none;
}

.view-account-page a.trusted-badge:hover {
  border-color: rgba(99, 102, 241, 0.7);
  background: rgba(99, 102, 241, 0.14);
}


/* Compact trusted pills (small, low-focus) under Buy button */
.view-account-page .totals .trusted-pills{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 10px;
  margin-top: 12px;
  opacity: 0.92;
}

.view-account-page .totals .trusted-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(114, 110, 142, 0.35);
  background: rgba(114, 110, 142, 0.10);
  color: rgba(255,255,255,0.82);
  font-weight: 700;
  font-size: clamp(11px, 0.68vw, 12px);
  line-height: 1;
  white-space: nowrap;
}

.view-account-page .totals .trusted-pill i{
  font-size: 12px;
  color: #6366f1;
  opacity: 0.95;
}

.view-account-page .totals .trusted-pill--tp{
  text-decoration:none;
}

.view-account-page .totals .trusted-pill--tp:hover{
  opacity: 1;
  border-color: rgba(99, 102, 241, 0.55);
  background: rgba(99, 102, 241, 0.10);
}

.view-account-page .totals .trusted-pill .tp-stars{
  display:inline-flex;
  align-items:center;
  gap: 2px;
}

.view-account-page .totals .trusted-pill .tp-stars i{
  font-size: 11px;
  color: #fbbf24;
  margin: 0;
}

.view-account-page .totals .trusted-pill .tp-rating{
  font-weight: 900;
  color: rgba(255,255,255,0.92);
  margin-left: 2px;
}

@media (max-width: 768px){
  .view-account-page .totals .trusted-pills{
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
  }
}

.view-account-page .gallery-mobile {
  display: none;
}

.view-account-page .sticky-button {
  display: none;
}

.loyalty-page header {
  height: clamp(220px, 35vh, 420px);
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(99,102,241,0.2) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 40%, rgba(59,184,255,0.1) 0%, transparent 55%),
    radial-gradient(ellipse 30% 40% at 50% 110%, rgba(245,193,76,0.08) 0%, transparent 50%),
    linear-gradient(135deg, #0a0818 0%, #0e0c22 50%, #0a0818 100%);
  display: flex;
  align-items: center;
  justify-content: start;
  position: relative;
  overflow: hidden;
}
.loyalty-page header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
  pointer-events: none;
}
.loyalty-page header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}

.loyalty-page header .content {
  max-width: 44.917vw;
  margin-left: 4.167vw;
}

.loyalty-page header h1 {
  font-size: 4.688vw;
  line-height: 6.729vw;
  margin-bottom: 1.563vw;
  text-transform: uppercase;
  font-family: 'superchargestraight', sans-serif;
}

.loyalty-page header p {
  font-size: 1.042vw;
  line-height: 1.875vw;
  max-width: 32.813vw;
}

.loyalty-page .loyalty-slider {
  margin: 4.167vw auto;
  gap: 0.521vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loyalty-page .loyalty-slider .loyalty-slide {
  position: relative;
}

.loyalty-page .loyalty-slider .loyalty-slide .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  gap: 1.042vw;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
}

.loyalty-page .loyalty-slider .loyalty-slide .overlay p {
  gap: 0.521vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.042vw;
}

.loyalty-page .loyalty-slider .loyalty-slide .overlay .spent {
  background-color: #7a959c;
  color: #fff;
  font-size: 0.833vw;
  padding: 0.7rem 1.7rem;
  border-radius: 1.042vw;
  font-weight: 600;
  margin-bottom: 2.5rem;
}

.loyalty-page .loyalty-slider .bg-image {
  width: auto;
  height: 26.042vw;
}

.loyalty-page .container {
  margin: 4.167vw auto;
  max-width: 80%;
}

.loyalty-page .container h1 {
  font-size: 3.125vw;
  line-height: 4.375vw;
  margin-bottom: 1.042vw;
  text-align: center;
  color: #6366f1;
}

.loyalty-page .container h4 {
  font-size: 1.562vw;
  margin-bottom: 1.042vw;
  text-align: center;
}

.loyalty-page .container h6 {
  font-size: 1.042vw;
  margin-bottom: 1.042vw;
  text-align: center;
}

.loyalty-page .table-responsive {
  overflow-x: auto;
}

.loyalty-page .loyalty-table {
  font-size: 0.781vw;
  background-color: #0a0a18;
  border-radius: 1.042vw;
  overflow: hidden;
  border: 0.052vw solid #18162b;
  margin: 2.083vw auto;
}

.loyalty-page .loyalty-table th,
.loyalty-page .loyalty-table td {
  border-bottom: 0.104vw solid rgba(114, 110, 142, 0.2);
}

.loyalty-page .loyalty-table th {
  font-weight: 600;
  padding: 0.938vw 1.458vw !important;
}

.loyalty-page .loyalty-table th div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loyalty-page .loyalty-table th div h5 {
  font-size: 0.885vw;
  margin: 0;
}

.loyalty-page .loyalty-table th div img {
  max-width: 100%;
  width: auto;
  height: 2.083vw;
}

.loyalty-page .loyalty-table th:nth-child(2) div img {
  width: 0.938vw;
}

.loyalty-page .loyalty-table th:nth-child(1) div {
  justify-content: flex-start;
  align-items: flex-start;
}

.loyalty-page .loyalty-table th div h5 {
  margin-top: 0.417vw;
}

.loyalty-page .loyalty-table tbody tr td {
  font-weight: 600;
  padding: 0.938vw 1.458vw !important;
  vertical-align: middle;
  text-align: center;
}

.loyalty-page .loyalty-table tbody tr td:nth-child(1) div {
  justify-content: flex-start;
}

.loyalty-page .loyalty-table tbody tr td:nth-child(1) div img {
  width: 1.875vw;
  display: block;
  margin-right: 0.417vw;
}

.loyalty-page .loyalty-table tbody tr td div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loyalty-page .loyalty-table tbody tr td h5 {
  margin: 0;
  font-size: 0.833vw;
  font-weight: 500;
  text-align: center;
}

.loyalty-page .loyalty-table tbody tr td:nth-child(1) div i {
  font-size: 1.146vw;
  width: 1.667vw;
  margin-right: 0.417vw;
}

.loyalty-page .loyalty-table .text-primary {
  color: #6366f1;
}

.loyalty-page .loyalty-table .text-danger {
  color: #ff4d4d;
}

.loyalty-page .sec-points-store {
  padding: 8.4375vw 0;
  text-align: center;
  background: url('../images/get-started-2.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.loyalty-page .sec-points-store h2 {
  font-size: 3.125vw;
  font-weight: 500;
  line-height: 4.0625vw;
  margin-bottom: 1.0417vw;
}

.loyalty-page .sec-points-store p {
  font-size: 0.9375vw;
  line-height: 2.0833vw;
  color: #726e8e;
  margin-bottom: 2.6042vw;
}

.loyalty-page .sec-points-store p small {
  font-size: 0.7917vw;
  color: #726e8e;
}

.loyalty-page .sec-points-store .btn {
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.7812vw 1.8229vw;
}

.loyalty-page .sec-faqs {
  padding: 5.2083vw;
  background-color: #0e0d1a;
}

.loyalty-page .sec-faqs .top {
  margin-bottom: 4.1667vw;
}

.loyalty-page .sec-faqs .top h4 {
  font-size: 2.6042vw;
  font-weight: 500;
  line-height: 4.0625vw;
  text-align: center;
}

.loyalty-page .sec-faqs .top .nav-tabs {
  gap: 0.781vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2.083vw;
}

.loyalty-page .sec-faqs .top .nav-tabs a {
  font-size: 1.042vw;
  padding: 0.521vw 1.563vw;
  border-radius: 0.521vw;
  text-decoration: none;
  color: #fff;
  background-color: #726e8e;
  gap: 0.521vw;
  display: flex;
  align-items: center;
}

.loyalty-page .sec-faqs .top .nav-tabs a.active {
  background-color: #6366f1;
}

.loyalty-page .sec-faqs .top .nav-tabs a img {
  width: auto;
  height: 1.563vw;
}

.points-store header {
  height: clamp(220px, 35vh, 420px);
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(245,193,76,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 40%, rgba(99,102,241,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 30% 40% at 50% 110%, rgba(255,154,59,0.1) 0%, transparent 50%),
    linear-gradient(135deg, #0a0818 0%, #0e0c22 50%, #0a0818 100%);
  display: flex;
  align-items: center;
  justify-content: start;
  position: relative;
  overflow: hidden;
}
.points-store header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
  pointer-events: none;
}
.points-store header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}

.points-store header .content {
  max-width: 44.917vw;
  margin-left: 4.167vw;
}

.points-store header h1 {
  font-size: 6.688vw;
  line-height: 8.729vw;
  margin-bottom: 1.563vw;
  text-transform: uppercase;
  font-family: 'superchargestraight', sans-serif;
}

.points-store header p {
  font-size: 1.042vw;
  line-height: 1.875vw;
  max-width: 32.813vw;
}

.points-store .container {
  margin: 4.167vw auto;
  max-width: 80%;
}

.points-store .items {
  gap: 1.563vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.points-store .items .item {
  background-color: #0a0a18;
  border-radius: 1.146vw;
  overflow: hidden;
  border: 0.104vw solid rgba(114, 110, 142, 0.2);
  padding: 1.042vw;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.points-store .items .item .prize-image {
  width: 100%;
  height: auto;
  margin-bottom: 1.042vw;
}

.points-store .items .item .title {
  font-size: 1.25vw;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.points-store .items .item .title .price {
  gap: 0.521vw;
  display: flex;
  align-items: center;
  font-size: 1.042vw;
}

.points-store .items .item .title .price img {
  width: auto;
  height: 1.458vw;
}

.points-store .items .item .description {
  font-size: 0.833vw;
  line-height: 1.5;
  color: #726e8e;
  margin: 1.042vw 0;
  flex-grow: 1;
}

.points-store .items .item button {
  padding: 0.781vw 1.563vw;
  font-size: 0.938vw;
  border-radius: 0.729vw;
  background-color: #6366f1;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 100%;
  display: block;
  text-align: center;
  margin-top: auto;
}

.points-store .items .item button:hover {
  background-color: rgb(52.2, 56.1, 236.8);
}



/* ✅ HOT badge on rank-type tiles (strong + override-safe) */
.rank-types-nav .nav-item {
  position: relative !important;
  overflow: visible !important;
}

.rank-types-nav .nav-item .lb-hot-badge {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 3px 9px !important;
  border-radius: 999px !important;

  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;

  color: #0b0b0f !important;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35), transparent 55%), linear-gradient(135deg, #ffb703, #ff006e) !important;

  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.2) inset !important;

  pointer-events: none !important;
  white-space: nowrap !important;
  z-index: 5 !important;
}



/* =========================================================
   BOOSTERS VIEW PAGE – OVERRIDES
   (Paste at the END of your main.css)
   ========================================================= */

/* ---------- Nav Tabs (Desktop) ---------- */
.boosters-view .main-content .details .bottom .nav-tabs {
  display: flex;
  gap: 12px;
}

/* ---------- Nav Tabs (Mobile: centered, one row) ---------- */


/* =========================================================
   ORDER ICONS (Recent Orders + Orders Tab)
   - Bigger + White + Mobile bigger
   - Avoid rem sizing issues
   ========================================================= */

/* Icon container */
.boosters-view .booster-orders .order-card .left .icon,
.boosters-view .main-content .details .bottom .features .recent-orders .order-item .title .icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 16px !important;

  display: grid !important;
  place-items: center !important;

  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(120, 140, 255, 0.12);
}

/* SVG/IMG inside icon */
.boosters-view .booster-orders .order-card .left .icon img,
.boosters-view .main-content .details .bottom .features .recent-orders .order-item .title .icon img {
  width: 22px !important;
  height: 22px !important;

  display: block !important;
  object-fit: contain !important;

  filter: brightness(0) invert(1) !important;
  opacity: 0.95 !important;
}

/* FontAwesome fallback */
.boosters-view .booster-orders .order-card .icon i,
.boosters-view .main-content .details .bottom .features .recent-orders .order-item .title .icon i {
  font-size: 22px !important;
  --fa-primary-color: #fff !important;
  --fa-secondary-color: #6366f1 !important; /* set your primary here */
}

/* Mobile boost */


/* =========================================================
   REVIEWS – TAGS (Redesign: clean, no pill)
   ========================================================= */
.boosters-view .review-tags {
  margin-top: 14px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.boosters-view .review-tags span {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  color: rgba(255, 255, 255, 0.72) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.2px !important;
}

.boosters-view .review-tags span::before {
  content: '' !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #6366f1 !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12) !important;
}



/* =========================================================
   REVIEWS – COMMENT (narrower + nicer)
   ========================================================= */
.boosters-view .review-comment {
  margin-top: 16px !important;
  width: min(720px, 100%) !important; /* less wide */
}

.boosters-view .review-comment-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
}

.boosters-view .review-comment-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  opacity: 0.75 !important;

  padding: 0 !important; /* no pill */
  border: 0 !important;
  background: transparent !important;
}

.boosters-view .review-comment-line {
  height: 1px !important;
  flex: 1 !important;
  background: rgba(120, 140, 255, 0.18) !important;
}

.boosters-view .review-comment-box {
  padding: 14px 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(120, 140, 255, 0.16) !important;
  background: #0a0a18;
}

.boosters-view .review-comment-box .review-text {
  margin: 0 !important;
  line-height: 1.6 !important;
}

/* =========================================================
   Champions Select2 (REM-based, minimal & safe)
   - Prevent selected chips from growing the modal too tall
   - Dark search field text/background
   Targets only #champions_select (does NOT alter modal layout)
   ========================================================= */

/* Selected chips area: cap height and scroll */
#champions_select + .select2 .select2-selection--multiple{
  max-height: 7.5rem;        /* ~120px at 16px root */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: .375rem;    /* space for scrollbar */
}

#champions_select + .select2 .select2-selection__rendered{
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}

/* Dark dropdown + search input */
.select2-container--open .select2-dropdown{
  background: rgba(10, 12, 24, 0.95);
  border: .0625rem solid rgba(255,255,255,0.08);
  border-radius: .75rem;
  overflow: hidden;
  z-index: 999999;
}

.select2-container--open .select2-search--dropdown{
  padding: .625rem;
  background: rgba(10, 12, 24, 0.95);
  border-bottom: .0625rem solid rgba(255,255,255,0.08);
}

.select2-container--open .select2-search--dropdown .select2-search__field{
  background: rgba(255,255,255,0.06);
  border: .0625rem solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  border-radius: .625rem;
  padding: .625rem .75rem;
  outline: none;
}

.select2-container--open .select2-search--dropdown .select2-search__field::placeholder{
  color: rgba(255,255,255,0.55);
}

/* Dropdown options text color */
.select2-results__option{
  color: rgba(255,255,255,0.90);
}

.select2-results__option--highlighted.select2-results__option--selectable{
  background: rgba(99, 102, 241, 0.35);
  color: #fff;
}

.select2-results__option--selected{
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.90);
}

/* Optional: if you use the custom img+text renderer */
.s2-champ{
  display:flex;
  align-items:center;
  gap:.625rem;
}
.s2-champ__img{
  width:1.375rem;  /* 22px */
  height:1.375rem;
  border-radius:.375rem;
  object-fit:cover;
}

/* Mobile tuning */


/* =========================================================
   Boosters List Filters: cap selected chips height (REM-based)
   Prevent filter boxes (Servers/Champions/Languages/Roles) from growing too tall.
   Scoped to bodyClass 'boosters-list'
   ========================================================= */

.boosters-list #filterServers + .select2 .select2-selection--multiple,
.boosters-list #filterChampions + .select2 .select2-selection--multiple,
.boosters-list #filterLanguages + .select2 .select2-selection--multiple,
.boosters-list .filterRole + .select2 .select2-selection--multiple{
  max-height: 8rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: .375rem;
  /* Scrollbar ausblenden – Chips-Bereich soll nicht scrollen */
  scrollbar-width: none;
}
.boosters-list #filterServers + .select2 .select2-selection--multiple::-webkit-scrollbar,
.boosters-list #filterChampions + .select2 .select2-selection--multiple::-webkit-scrollbar,
.boosters-list #filterLanguages + .select2 .select2-selection--multiple::-webkit-scrollbar,
.boosters-list .filterRole + .select2 .select2-selection--multiple::-webkit-scrollbar {
  display: none;
}

.boosters-list #filterServers + .select2 .select2-selection__rendered,
.boosters-list #filterChampions + .select2 .select2-selection__rendered,
.boosters-list #filterLanguages + .select2 .select2-selection__rendered,
.boosters-list .filterRole + .select2 .select2-selection__rendered{
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}

/* Slightly larger for champions (more chips, includes images) */
.boosters-list #filterChampions + .select2 .select2-selection--multiple{
  max-height: 10rem;
}






/* =========================================================
   HERO / HEADER (NON-LANDING)
   Fix: hero headings clipped or overscaled.
   Landing page (.landing) is excluded.
   ========================================================= */

body:not(.landing):not(.lol-boost):not(.game-hub):not(.game-service-page):not(.premium-accounts-page):not(.ranked-accounts-page):not(.view-account-page):not(.lol-items-page):not(.boosters-list) header {
  /* Ensure enough vertical room for multi-line titles */
  min-height: clamp(360px, 55vh, 640px);
  height: auto;

  /* Backgrounds are applied per page via existing rules */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;

  /* Navbar ist jetzt undurchsichtig — padding-top dynamisch via JS-Variable.
     Fallback 96px fuer den Fall dass --lb-content-top noch nicht gesetzt ist. */
  padding-top: var(--lb-content-top, 96px);
  padding-bottom: clamp(44px, 7vh, 96px);

  /* Keep original flex layout but prevent accidental clipping */
  overflow: hidden;
}

/* Game pages: no hero background, compact header with centered text.
   padding-top is set dynamically via --lb-content-top (see header.php). */
body.lol-boost header,
body.game-hub header,
body.game-service-page header,
body.premium-accounts-page header,
body.ranked-accounts-page header,
body.view-account-page header,
body.lol-items-page header {
  min-height: 0 !important;
  height: auto !important;
  background: none !important;
  background-image: none !important;
  padding-top: var(--lb-content-top, 0px) !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
  display: block !important;
}

body.lol-boost header .content,
body.game-hub header .content,
body.game-service-page header .content,
body.premium-accounts-page header .content,
body.ranked-accounts-page header .content,
body.view-account-page header .content,
body.lol-items-page header .content {
  max-width: 90% !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 48px 40px 28px !important;
  text-align: center !important;
}

/* Title + subtitle sizing for non-game pages */
body:not(.landing):not(.lol-boost):not(.game-hub):not(.game-service-page):not(.premium-accounts-page):not(.ranked-accounts-page):not(.view-account-page):not(.lol-items-page):not(.boosters-list) header h1 {
  font-size: clamp(40px, 3vw, 86px);
  line-height: 1.05;
  margin: 0 0 14px;
}

body:not(.landing):not(.lol-boost):not(.game-hub):not(.game-service-page):not(.premium-accounts-page):not(.ranked-accounts-page):not(.view-account-page):not(.lol-items-page):not(.boosters-list) header p {
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.55;
  max-width: 60ch;
  margin: 0;
  opacity: 0.92;
}

/* ── Header Eyebrow Label ───────────────────────────────────────────────── */
header .header-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(99, 102, 241, 0.45);
  background: rgba(99, 102, 241, 0.1);
  color: #a5b4fc;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
header .header-eyebrow i {
  font-size: 11px;
  color: #818cf8;
}

/* ── Header Badges Row ──────────────────────────────────────────────────── */
header .header-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
header .header-badges .hbadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(4px);
  transition: border-color 0.2s, background 0.2s;
}
header .header-badges .hbadge:hover {
  border-color: rgba(99, 102, 241, 0.5);
  background: rgba(99, 102, 241, 0.1);
}
header .header-badges .hbadge i {
  font-size: 13px;
  color: #818cf8;
}

/* Mobile: stack badges */
@media (max-width: 767px) {
  header .header-eyebrow {
    font-size: 9px;
    letter-spacing: 2px;
    padding: 4px 12px;
    margin-bottom: 12px;
  }
  header .header-badges {
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
  }
  header .header-badges .hbadge {
    font-size: 11px;
    padding: 6px 14px;
  }
}

/* Game page header typography */
body.lol-boost header h1,
body.game-hub header h1,
body.game-service-page header h1,
body.premium-accounts-page header h1,
body.ranked-accounts-page header h1,
body.view-account-page header h1,
body.lol-items-page header h1 {
  font-size: clamp(22px, 2.6vw, 48px);
  line-height: 1.15;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  margin: 0 0 0.6rem;
  text-transform: uppercase;
  font-family: 'superchargestraight', sans-serif;
  width: 100%;
  text-align: center;
}

body.lol-boost header p,
body.game-hub header p,
body.game-service-page header p,
body.premium-accounts-page header p,
body.ranked-accounts-page header p,
body.view-account-page header p,
body.lol-items-page header p {
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.65;
  max-width: 72ch;
  width: 100%;
  margin: 0 auto;
  opacity: 0.8;
  text-align: center;
  overflow: visible;
  display: block;
}

/* A couple of pages render very short headers via class rules. Normalize them. */
body:not(.landing).loyalty-page header,
body:not(.landing).blogs-page header,
body:not(.landing).contact-page header,
body:not(.landing).jobs-page header,
body:not(.landing).coaching-page header {
  min-height: clamp(360px, 55vh, 640px);
}

/* ── Navbar ist jetzt dauerhaft undurchsichtig.
   Alle non-landing, non-game-page Header brauchen padding-top
   mindestens in Hoehe der Navbar, damit Inhalt nicht dahinter verschwindet.
   --lb-content-top wird per JS dynamisch gesetzt (Fallback 96px).
   align-items: flex-start stellt sicher dass padding-top wirkt. ────────── */
body:not(.landing):not(.lol-boost):not(.game-hub):not(.game-service-page):not(.premium-accounts-page):not(.ranked-accounts-page):not(.view-account-page):not(.lol-items-page):not(.boosters-list) header,
body:not(.landing).egirls-list header,
body:not(.landing).loyalty-page header,
body:not(.landing).blogs-page header,
body:not(.landing).contact-page header,
body:not(.landing).jobs-page header,
body:not(.landing).coaching-page header {
  padding-top: var(--lb-content-top, 96px) !important;
  align-items: flex-start !important;
  justify-content: center !important;
  flex-direction: column !important;
}

/* ==========================================================================
   Landing page Jinx image: keep ORIGINAL desktop layout and avoid duplicates
   - Desktop: show .jinx only
   - Mobile: show .jinx-mob / .jinx-mobile only
   ========================================================================== */

body.landing header{
  position: relative; /* ensure absolute children stay inside header */
}

/* Desktop/default */
body.landing header .jinx {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    width: 60.604vw !important;
    max-width: 1000px !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

body.landing header .jinx-mob,
body.landing header .jinx-mobile{
  display: none !important;
}

/* Mobile */

/* === MOBILE (restored from original main.css) === */

@media (max-width: 991px) {
  .navbar-top .mega-dropdown {
    display: none !important;
  }
}

@media (max-width: 768px) {
  #login_modal .nav-tabs,
  #forgot_password_modal .nav-tabs,
  #guest_checkout_modal .nav-tabs {
    padding: 0.35rem;
  }

  #login_modal .nav-tabs a,
  #forgot_password_modal .nav-tabs a,
  #guest_checkout_modal .nav-tabs a {
    font-size: 0.85rem;
    padding: 0.5rem 0.7rem;
  }
}

@media (max-width: 768px) {
  #login_modal .password-wrapper input[type='password'],
  #login_modal .password-wrapper input[type='text'] {
    padding-right: 3rem; /* etwas mehr Platz rechts */
  }

  #login_modal .password-toggle {
    right: 0.8rem;
    width: 32px;
    height: 32px;
  }

  #login_modal .password-toggle i {
    font-size: 1.3rem; /* größeres Icon auf Mobile */
  }
}

@media only screen and (max-width: 767px) {
  .btn {
    padding: 2.727vw 6.364vw;
    font-size: 3.409vw;
    border-radius: 11.364vw;
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }

  .btn i {
    font-size: 4.091vw;
    margin-left: 1.818vw;
  }

  .btn.btn-icon {
    padding: 4.091vw;
  }

  .btn.btn-icon i {
    font-size: 5.455vw;
  }

  .accordion .accordion-header h5 {
    font-size: 4.091vw;
    padding: 5.455vw 0;
  }

  .accordion .accordion-header::after {
    font-size: 3.636vw;
    right: 1.136vw;
  }

  .accordion .accordion-content {
    padding-bottom: 5.455vw;
  }

  .accordion .accordion-content p {
    font-size: 3.727vw;
    line-height: 6.455vw;
  }

  .accordion .accordion-content ul {
    padding-left: 5.455vw;
    margin-top: 1.818vw;
  }

  .accordion .accordion-content ul li {
    font-size: 2.727vw;
  }

  .accordion .accordion-content ul li:not(:last-child) {
    margin-bottom: 1.818vw;
  }

  .accordion .accordion-item {
    border-bottom: 0.227vw solid #232040;
  }

  .badge {
    font-size: 2.326vw;
    border-radius: 4.651vw;
    padding: 0.698vw 2.326vw;
  }

  .toggle .slider {
    width: 11.628vw;
    height: 5.814vw;
    border-radius: 11.628vw;
  }

  .toggle .slider::before {
    left: 1.395vw;
    width: 3.721vw;
    height: 3.721vw;
  }

  .toggle input[type='checkbox']:checked + .slider::before {
    transform: translate(5.581vw, -50%);
  }

  .select2-container .select2-selection--single {
    padding: 4.651vw;
    font-size: 3.256vw;
    border-radius: 4.651vw;
  }

  .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 3.256vw;
  }

  .select2-container .select2-selection--single::after {
    background-size: 2.558vw;
    width: 2.558vw;
    height: 2.558vw;
  }

  .select2-container .select2-selection--multiple {
    padding: 4.651vw;
    font-size: 3.256vw;
    border-radius: 4.651vw;
  }

  .select2-container .select2-selection--multiple .select2-selection__choice {
    border: 0.465vw solid #6366f1;
  }

  .select2-container .select2-selection--multiple .select2-selection__choice__remove {
    padding: 0 1.163vw;
  }

  .select2-container .select2-selection--multiple .select2-selection__choice__display {
    padding-left: 2.326vw;
    padding-right: 2.326vw;
  }

  .select2-container .select2-selection--multiple .select2-selection__choice__display > span {
    gap: 2.326vw;
    display: flex;
    align-items: center;
  }

  .select2-container .select2-selection--multiple .select2-selection__choice__display > span img {
    width: 4.651vw;
    height: auto;
  }

  .select2-container .select2-selection--multiple .select2-search.select2-search--inline textarea {
    margin: 1.628vw 0;
  }

  .select2-dropdown {
    border-radius: 3.721vw;
    margin-top: 1.395vw;
    box-shadow: 0 0.93vw 2.791vw rgba(0, 0, 0, 0.5);
  }

  .select2-dropdown .select2-search--dropdown {
    padding: 2.326vw;
  }

  .select2-dropdown .select2-search--dropdown .select2-search__field {
    padding: 2.326vw 3.256vw;
    border-radius: 2.791vw;
    border: 0.233vw solid #232040;
    font-size: 3.256vw;
  }

  .select2-results__options {
    max-height: 58.14vw;
  }

  .select2-results__options .select2-results__option {
    padding: 2.791vw 4.651vw;
    font-size: 3.256vw;
  }

  .select2-results__options .select2-results__option > span {
    gap: 2.326vw;
    display: flex;
    align-items: center;
  }

  .select2-results__options .select2-results__option > span img {
    width: 4.651vw;
    height: auto;
  }

  .select2-results__options::-webkit-scrollbar {
    width: 1.86vw;
  }

  .select2-results__options::-webkit-scrollbar-track {
    border-radius: 1.86vw;
  }

  .select2-results__options::-webkit-scrollbar-thumb {
    border-radius: 1.86vw;
    border: 0.465vw solid #110f1f;
  }

  .modal {
    width: 89.535vw;
    padding: 4.651vw;
    border-radius: 8.14vw;
    background-color: #110f1f;
    border: 0.465vw solid #6366f1;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
  }

  .modal.show {
    display: block;
  }

  .modal .modal-header {
    border-bottom: 0.465vw solid rgba(114, 110, 142, 0.1);
  }

  .modal .modal-header h4 {
    font-size: 4.651vw;
    margin-bottom: 4.186vw;
  }

  .modal .modal-header .close-modal {
    width: 6.977vw;
    height: 6.977vw;
    font-size: 3.721vw;
  }

  .modal .modal-content {
    padding: 4.651vw 0;
  }

  .modal .modal-footer {
    border-top: 0.465vw solid rgba(114, 110, 142, 0.1);
  }

  .modal .modal-footer .btn {
    font-size: 3.721vw;
    line-height: 4.651vw;
    padding: 2.326vw 4.651vw;
    border-radius: 11.628vw;
    margin-top: 4.186vw;
    margin-left: 4.186vw;
  }

  .icon-checkboxes {
    gap: 2.326vw;
  }

  .icon-checkboxes input[type='checkbox']:checked + label {
    border: 0.465vw solid #6366f1;
  }

  .icon-checkboxes .icon-checkbox {
    width: 12.093vw;
    height: 12.093vw;
    border-radius: 2.791vw;
  }

  .icon-checkboxes .icon-checkbox img {
    width: 5.814vw;
  }

  .tooltip {
    font-size: 3.256vw;
    padding: 2.326vw;
    border-radius: 1.395vw;
    max-width: 69.767vw;
  }

  .form-group {
    margin-bottom: 3.256vw;
  }

  .form-group label {
    font-size: 3.256vw;
    margin-bottom: 4.186vw;
  }

  .form-group input,
  .form-group textarea {
    padding: 3.256vw;
    height: 9.977vw;
    border-radius: 2.651vw;
    font-size: 3.256vw;
  }

  .form-group textarea {
    min-height: 27.907vw;
    resize: none;
  }

  .form-group .select2-container .select2-selection--multiple {
    padding: 3.256vw;
    border-radius: 4.651vw;
  }

  .form-group .select2-container .select2-selection--multiple textarea {
    height: 18px;
    min-height: auto;
    border-radius: 0;
    font-size: 3.256vw;
  }

  .navbar-top {
    display: none;
  }

  .navbar-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4.545vw 6.818vw;
    top: var(--lb-sale-h, 0px);
    left: 0;
    width: 100%;
    position: fixed;
    z-index: 1000010;
    transition: background-color 0.3s ease, padding 0.3s ease, z-index 0s, top 0.3s ease;
  }


  .navbar-mobile.scrolled {
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 2.727vw 6.818vw;
    box-shadow: 0 0.93vw 2.791vw rgba(0, 0, 0, 0.5);
  }

  .navbar-mobile .logo img {
    width: 7.273vw;
    height: auto;
  }

  .navbar-mobile .right {
    gap: 20px;
    display: flex;
    align-items: center;
  }

  .navbar-mobile .right .btn.secondary {
    padding: 2.273vw 6.364vw;
    font-size: 3.409vw;
    gap: 1.818vw;
    display: flex;
    align-items: center;

    /* neuer Look */
    background-color: #110f1f; /* dunkler Hintergrund wie die Site */
    border: 0.227vw solid #232040; /* dezente dunkle Border statt heller */
    border-radius: 11.364vw; /* runde Pillenform, falls nicht schon von .btn */
    color: #ffffff;
  }

  .navbar-mobile .right .btn.secondary img {
    width: 4.091vw;
    height: auto;
  }

  .navbar-mobile .right .btn.secondary i {
    font-size: 4.091vw;
    margin-left: 1.818vw;
  }

  .navbar-mobile .menu-icon {
    cursor: pointer;
    padding: 2.326vw;

    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.227vw solid #232040; /* dezente dunkle Border */
    border-radius: 3vw; /* nur leicht abgerundet */
    background-color: #110f1f; /* gleicher Dark-Background wie Dropdown */
    color: #ffffff;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .navbar-mobile .menu-icon:hover {
    background-color: #18162b;
    border-color: rgb(99, 102, 241);
  }

  .navbar-mobile .menu-icon img {
    width: 4.909vw;
    height: auto;
  }

  footer .content {
    padding: 6.818vw;
    gap: 5.909vw;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-between;
  }

  footer .logo-footer {
    width: 70.455vw;
    margin-bottom: 2.273vw;
  }

  footer p {
    font-size: 2.727vw;
    line-height: 5.455vw;
    width: 100%;
  }

  footer .right {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  footer .right h5 {
    font-size: 5vw;
    margin-bottom: 4.545vw;
  }

  footer .right h5 i {
    font-size: 5vw;
    margin-right: 2.727vw;
  }

  footer .right ul li {
    font-size: 4.091vw;
    line-height: 9.091vw;
  }

  footer .footer-bottom {
    padding: 5.682vw 18.182vw;
    border-top: 0.227vw solid #232040;
    flex-direction: column-reverse;
  }

  footer .footer-bottom p {
    font-size: 2.727vw;
    color: #fff;
  }

  footer .footer-bottom .social-icons {
    gap: 5.682vw;
  }

  footer .footer-bottom .social-icons a {
    font-size: 7.727vw;
  }

  .sec-get-started {
    padding: 13.636vw;
    text-align: center;
  }

  .sec-get-started.one {
    background: url('../images/get-started-1-mobile.webp');
    background-size: cover;
    background-repeat: no-repeat;
  }

  .sec-get-started.two {
    background: url('../images/get-started-2-mobile.webp');
    background-size: cover;
    background-repeat: no-repeat;
  }

  .sec-get-started.three {
    background: url('../images/get-started-3-mobile.webp');
    background-size: cover;
    background-repeat: no-repeat;
  }

  .sec-get-started h2 {
    font-size: 7.273vw;
    line-height: 9.318vw;
    margin-bottom: 2.273vw;
  }

  .sec-get-started p {
    font-size: 3.182vw;
    line-height: 5.909vw;
    color: #fff;
    margin-bottom: 6.818vw;
  }

  .sec-get-started p br {
    display: none;
  }

  .sec-get-started .btn {
    padding: 2.273vw 6.364vw;
  }

  .testimonials-sec {
    padding: 0;
    margin: 14.545vw 0 0;
  }

  .testimonials-sec .content {
    display: block;
    position: relative;
    padding-bottom: 22.727vw;
  }

  .testimonials-sec .left {
    width: 100%;
    padding: 0 7.955vw;
    text-align: center;
  }

  .testimonials-sec .left h2 {
    font-size: 6.818vw;
    line-height: 9.091vw;
    margin-bottom: 2.273vw;
  }

  .testimonials-sec .left p {
    font-size: 3.182vw;
    line-height: 5.455vw;
    margin-bottom: 4.545vw;
  }

  .testimonials-sec .slider-nav {
    position: absolute;
    bottom: 4.545vw;
    left: 50%;
    transform: translateX(-50%);
    gap: 2.727vw;
  }

  .testimonials-sec .slider-nav button {
    border: 0.227vw solid #232040;
    border-radius: 11.364vw;
    width: 12.955vw;
    height: 12.955vw;
  }

  .testimonials-sec .slider-nav button i {
    font-size: 4.091vw;
  }

  .testimonials-sec .testimonial {
    padding: 5vw;
    margin-right: 3.182vw;
    border-radius: 10.455vw;
    border: 0.227vw solid #232040;
    min-height: 90.455vw;
  }

  .testimonials-sec .testimonial::before {
    top: 27.727vw;
    left: 5vw;
    width: 13.636vw;
    height: 8.636vw;
    background-size: 13.636vw;
  }

  .testimonials-sec .testimonial::after {
    bottom: 5vw;
    right: 5vw;
    width: 13.636vw;
    height: 8.636vw;
    background-size: 13.636vw;
  }

  .testimonials-sec .testimonial .details {
    gap: 3.409vw;
  }

  .testimonials-sec .testimonial .details h5 {
    font-size: 4.545vw;
    margin-bottom: 1.364vw;
  }

  .testimonials-sec .testimonial .details .rank {
    font-size: 3.182vw;
  }

  .testimonials-sec .testimonial .avatar {
    width: 17.045vw;
    height: 17.045vw;
    border-radius: 6.818vw;
  }

  .testimonials-sec .testimonial .review {
    padding: 18.636vw 0;
    font-size: 3.182vw;
  }

  #login_modal,
  #forgot_password_modal,
  #guest_checkout_modal {
    width: 93.023vw !important;
  }

  #login_modal .nav-tabs,
  #forgot_password_modal .nav-tabs,
  #guest_checkout_modal .nav-tabs {
    border-radius: 2.791vw;
    padding: 1.395vw;
    margin-bottom: 2.326vw;
  }

  #login_modal .nav-tabs a,
  #forgot_password_modal .nav-tabs a,
  #guest_checkout_modal .nav-tabs a {
    padding: 1.395vw;
    font-size: 18px;
    border-radius: 1.86vw;
  }

  #login_modal .nav-tabs a i,
  #forgot_password_modal .nav-tabs a i,
  #guest_checkout_modal .nav-tabs a i {
    margin-right: 1.86vw;
  }

  #login_modal form .form-group label,
  #forgot_password_modal form .form-group label,
  #guest_checkout_modal form .form-group label {
    margin-bottom: 1.395vw;
  }

  #login_modal form .remember-me,
  #forgot_password_modal form .remember-me,
  #guest_checkout_modal form .remember-me {
    gap: 1.86vw;
  }

  #login_modal form .remember-me input[type='checkbox'],
  #forgot_password_modal form .remember-me input[type='checkbox'],
  #guest_checkout_modal form .remember-me input[type='checkbox'] {
    width: 3.256vw;
    height: 3.256vw;
  }

  #login_modal form .remember-me label,
  #forgot_password_modal form .remember-me label,
  #guest_checkout_modal form .remember-me label {
    font-size: 3.256vw;
  }

  #login_modal form .remember-me a,
  #forgot_password_modal form .remember-me a,
  #guest_checkout_modal form .remember-me a {
    font-size: 3.256vw;
  }

  #login_modal form .submit-btn,
  #forgot_password_modal form .submit-btn,
  #guest_checkout_modal form .submit-btn {
    margin-top: 2.326vw;
    padding: 2.791vw;
    font-size: 3.256vw;
    border-radius: 1.86vw;
    min-height: auto;
  }

  #login_modal hr,
  #forgot_password_modal hr,
  #guest_checkout_modal hr {
    border-top: 0.465vw solid rgba(114, 110, 142, 0.1);
    margin: 4.651vw 0;
  }

  #login_modal .social-login,
  #forgot_password_modal .social-login,
  #guest_checkout_modal .social-login {
    gap: 2.326vw;
  }

  #login_modal .social-login a,
  #forgot_password_modal .social-login a,
  #guest_checkout_modal .social-login a {
    padding: 2.791vw;
    font-size: 3.256vw;
    border-radius: 1.86vw;
  }

  #login_modal .social-login a i,
  #forgot_password_modal .social-login a i,
  #guest_checkout_modal .social-login a i {
    margin-right: 1.86vw;
  }

  #send_tip_modal .quick-btns {
    gap: 2.326vw;
    display: flex;
    align-items: center;
    margin-bottom: 6.977vw;
  }

  #send_tip_modal .quick-btns .quick-tip-btn {
    padding: 2.326vw;
    font-size: 3.256vw;
    border-radius: 2.791vw;
    background-color: #18162b;
    width: 100%;
    color: #fff;
    border: none;
    cursor: pointer;
    border: 0.465vw solid #232040;
    transition: background-color 0.3s ease;
  }

  #send_tip_modal .quick-btns .quick-tip-btn:hover {
    background-color: rgb(5.1692307692, 4.7384615385, 9.2615384615);
  }

  #send_tip_modal .btn-input {
    display: flex;
    align-items: center;
  }

  #send_tip_modal .btn-input button {
    background-color: #18162b;
    border: none;
    color: #fff;
    font-size: 3.256vw;
    line-height: 2.791vw;
    padding: 2.326vw;
    height: 100%;
    cursor: pointer;
    border-radius: 1.86vw;
    border: 0.465vw solid #232040;
    transition: background-color 0.3s ease;
  }

  #send_tip_modal .btn-input button:hover {
    background-color: rgb(5.1692307692, 4.7384615385, 9.2615384615);
  }

  #send_tip_modal .btn-input input {
    flex-grow: 1;
    margin: 0 2.326vw;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    text-align: center;
  }

  #send_tip_modal .btn-input input::-webkit-outer-spin-button,
  #send_tip_modal .btn-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  #send_tip_modal .submit-btn {
    width: 100%;
    padding: 2.326vw;
    font-size: 3.256vw;
    font-weight: 600;
    color: #fff;
    background-color: #6366f1;
    border: none;
    border-radius: 2.791vw;
    cursor: pointer;
    transition: background-color 0.3s ease;
    min-height: 9.767vw;
  }

  #send_tip_modal .submit-btn:hover {
    background-color: rgb(52.2, 56.1, 236.8);
  }

  #toast-container {
    position: fixed;
    top: 4.651vw;
    right: 4.651vw;
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    gap: 2.791vw;
  }

  .toast {
    min-width: 60.465vw;
    max-width: 83.721vw;
    padding: 3.256vw 4.186vw;
    border-radius: 2.326vw;
    color: #fff;
    font-family: system-ui, sans-serif;
    box-shadow: 0 0.93vw 3.488vw rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(-3.488vw);
    animation: fadeSlide 0.4s forwards;
    display: flex;
    flex-direction: column;
    border-left: 1.395vw solid;
  }

  .toast-title {
    font-weight: 600;
    font-size: 3.488vw;
    margin-bottom: 0.93vw;
  }

  .toast-message {
    font-size: 3.256vw;
    line-height: 1.35;
  }

  .alert {
    padding: 3.256vw;
    border-radius: 1.86vw;
    font-size: 3.256vw;
    margin: 3.256vw 0;
    border: 0.465vw solid;
    box-shadow: 0 0.465vw 2.326vw rgba(0, 0, 0, 0.08);
  }

  .alert.light {
    box-shadow: 0 0.233vw 1.163vw rgba(0, 0, 0, 0.06);
  }

  .sidenav-mob {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: #110f1f;
    z-index: 99999999999; 
    isolation: isolate;
    transition: left 0.3s ease;
  }

  .sidenav-mob.show {
    left: 0;
  }

  .sidenav-mob .sidenav-header {
    padding: 4.651vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .sidenav-mob .sidenav-header .logo img {
    width: auto;
    height: 9.302vw;
  }

  .sidenav-mob .sidenav-header .close-sidenav {
    position: relative;
    z-index: 1;
    border: none;
    background: #726e8e;
    cursor: pointer;
    font-size: 3.721vw;
    color: #fff;
    width: 7.442vw;
    height: 7.442vw;
    aspect-ratio: 1/1;
    border-radius: 50%;
  }

  .sidenav-mob .sidenav-menu {
    padding: 4.651vw;
    flex: 1;
    overflow-y: auto;
  }

  /* Old style only applies to legacy ul — NOT to mob-main-list */
  .sidenav-mob .sidenav-menu ul:not(.mob-main-list):not(.mob-game-list) li {
    list-style: none;
    border: 0.465vw solid rgba(114, 110, 142, 0.2);
    background-color: #0a0a18;
    margin-bottom: 2.326vw;
    border-radius: 1.86vw;
  }

  .sidenav-mob .sidenav-menu ul:not(.mob-main-list):not(.mob-game-list) li:last-child {
    margin-bottom: 0;
  }

  .sidenav-mob .sidenav-menu ul:not(.mob-main-list):not(.mob-game-list) li a {
    display: block;
    padding: 3.488vw;
    font-size: 3.256vw;
    color: #fff;
    text-decoration: none;
  }

  .sidenav-mob .sidenav-menu ul:not(.mob-main-list):not(.mob-game-list) li a i {
    margin-right: 2.791vw;
    font-size: 4.651vw;
  }

  .sidenav-mob .sidenav-menu ul:not(.mob-main-list):not(.mob-game-list) li a:hover {
    background-color: rgba(99, 102, 241, 0.1);
  }

  .sidenav-mob .sidenav-footer {
    padding: 4.651vw;
  }

  .sidenav-mob .sidenav-footer button {
    width: 100%;
    padding: 2.791vw;
    font-size: 3.256vw;
    font-weight: 600;
    color: #fff;
    background-color: #6366f1;
    border: none;
    border-radius: 1.86vw;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .sidenav-mob .sidenav-footer button:hover {
    background-color: rgb(52.2, 56.1, 236.8);
  }

  .sidenav-mob .sidenav-footer button i {
    font-size: 3.256vw;
  }

  .sidenav-mob .sidenav-footer hr {
    border-color: #232040;
    margin: 3.651vw 0;
  }

  .sidenav-mob .sidenav-footer .social-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.326vw;
  }

  .sidenav-mob .sidenav-footer .social-links a {
    color: #fff;
    font-size: 4.651vw;
    transition: color 0.3s ease;
    background-color: rgba(99, 102, 241, 0.3);
    width: 8.837vw;
    height: 8.837vw;
    border-radius: 1.163vw;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  .dropdown-menu {
    position: relative;
  }

  .dropdown-menu .dropdown-list {
    width: 100%;
    position: absolute;
    top: 110%;
    right: 0;
    background-color: #110f1f;
    border: 0.465vw solid #232040;
    border-radius: 2.791vw;
    padding: 1.163vw;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2.326vw);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  }

  .dropdown-menu .dropdown-list .dropdown-item {
    width: 100%;
    padding: 1.86vw;
    font-size: 3.256vw;
    line-height: 4.651vw;
    color: #fff;
    border: none;
    background: none;
    border-radius: 1.395vw;
    gap: 1.86vw;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .dropdown-menu .dropdown-list .dropdown-item:last-child {
    margin-bottom: 0;
  }

  .dropdown-menu .dropdown-list .dropdown-item:hover {
    background-color: rgba(99, 102, 241, 0.1);
  }

  .dropdown-menu .dropdown-list .dropdown-item img {
    width: auto;
    height: 5.581vw;
    border-radius: 1.395vw;
  }

  .dropdown-menu .dropdown-list h6 {
    font-size: 2.791vw;
    font-weight: 600;
    color: #726e8e;
    margin: 1.163vw;
  }

  .dropdown-menu .dropdown-list hr {
    width: 90%;
    border: none;
    margin: 1.395vw auto;
    border-top: 0.465vw solid hsla(0, 0%, 100%, 0.2);
  }

  .dropdown-menu:hover .dropdown-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .landing header {
    background-image: url('../images/landing/header-bg-mobile.webp');
    min-height: 224.773vw;
    display: block;
  }

  .landing header .content {
    padding: 25vw 6.818vw 0;
  }

  .landing header .jinx {
    display: none;
  }

  .landing header .jinx-mobile {
    bottom: 0;
    left: 50%;
    position: absolute;
    width: 100%;
    display: block;
    transform: translateX(-50%);
  }

  .landing header .big-heading {
    font-size: 9.091vw;
    line-height: 10.227vw;
    text-align: center;
  }

  .landing header .bottom-content {
    flex-direction: column;
  }

  .landing header .bottom-content .left p {
    width: 100%;
    font-size: 2.727vw;
    line-height: 4.545vw;
    margin-top: 2.273vw;
    margin-bottom: 4.545vw;
    text-align: center;
  }

  .landing header .bottom-content .left .actions a:first-child {
    margin-right: 3.409vw;
  }

  .landing header .rating-bar {
    padding: 2.727vw 4.091vw;
    border-radius: 11.364vw;
    background-color: hsla(0, 0%, 100%, 0.06);
    box-shadow: 0 0 6.818vw 0 rgba(0, 0, 0, 0.1), inset 0 0 5.455vw 0 #fff;
    -webkit-backdrop-filter: blur(6.818vw);
    backdrop-filter: blur(6.818vw);
    position: absolute;
    bottom: 2.273vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 86.364vw;
  }

  .landing header .rating-bar img {
    width: 22.727vw;
    margin-right: 2.727vw;
  }

  .landing header .rating-bar .rating-text {
    font-size: 3.864vw;
    line-height: 6.818vw;
  }

  /* Layout im Balken */
  .landing header .rating-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
  }

  /* Sterne grün & etwas Glow – wie im Screenshot */
  .landing header .rating-bar .stars {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    font-size: 1.4vw;
    line-height: 1;
    color: #04da8d; /* Fallback falls einzelne <i> kein eigenes color haben */
  }

  .landing header .rating-bar .stars i {
    color: #04da8d;
    text-shadow: 0 0 0.25vw rgba(4, 218, 141, 0.55);
  }

  /* Optional: wenn du halbe/leere Sterne nutzen willst */
  .landing header .rating-bar .stars .star--half {
    color: #04da8d;
  } /* fa-star-half-stroke */
  .landing header .rating-bar .stars .star--empty {
    color: #2a2a4d;
    opacity: 0.45;
  } /* fa-regular fa-star */

  /* Text neben den Sternen */
  .landing header .rating-bar .rating-text {
    font-weight: 600;
    opacity: 0.9;
  }

  .landing .sec-one {
    padding: 6.818vw;
  }

  .landing .sec-one h2 {
    font-size: 6.818vw;
    line-height: 9.091vw;
    margin-bottom: 2.273vw;
  }

  .landing .sec-one p {
    font-size: 2.727vw;
    line-height: 5.455vw;
    margin-bottom: 9.091vw;
  }

  .landing .sec-one .cards {
    gap: 11.364vw;
    flex-direction: column;
  }

  .landing .sec-one .card {
    padding: 0.227vw;
    border-radius: 13.182vw;
  }

  .landing .sec-one .card .content {
    padding: 6.818vw;
    border-radius: 13.182vw;
  }

  .landing .sec-one .card .card-title {
    font-size: 5.455vw;
    margin: 6.818vw 0;
  }

  .landing .sec-one .card .card-actions {
    gap: 1.818vw;
    display: flex;
    align-items: center;
  }

  .landing .sec-one .card .card-actions .btn {
    width: 100%;
    height: 14.318vw;
  }

  .landing .sec-one .card .card-actions .btn-icon {
    width: 14.318vw;
    height: 14.318vw;
  }

  .landing .sec-one .card .discount-badge {
    right: 13.182vw;
    width: 21.591vw;
  }

  .landing .sec-two {
    padding-top: 11.591vw;
    background: url('../images/landing/sec-two-bg.webp');
    background-size: contain;
    background-position: bottom left;
    background-repeat: no-repeat;
  }

  .landing .sec-two .top {
    padding: 0;
    gap: 5.455vw;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 13.182vw;
  }

  .landing .sec-two .top .btn {
    padding: 2.727vw 6.364vw;
  }

  .landing .sec-two h3 {
    font-size: 6.818vw;
    line-height: 9.091vw;
    margin-bottom: 1.364vw;
  }

  .landing .sec-two p {
    font-size: 3.182vw;
    line-height: 5.455vw;
    width: 68.182vw;
  }

  .landing .sec-two .bottom {
    display: block;
  }

  .landing .sec-two .bottom > img {
    display: none;
  }

  .landing .sec-two .boosters::before {
    content: none;
    display: none;
  }

  .landing .sec-two .boosters.slick-track {
    margin-right: unset;
  }

  .landing .sec-two .boosters .booster {
    min-height: 74.545vw;
    padding: 5vw;
    margin-right: 3.636vw;
    border-radius: 9.545vw;
  }

  .landing .sec-two .boosters .booster .details {
    gap: 3.409vw;
  }

  .landing .sec-two .boosters .booster .details h5 {
    font-size: 3.636vw;
    margin-bottom: 1.818vw;
  }

  .landing .sec-two .boosters .booster .details .rank {
    font-size: 2.727vw;
  }

  .landing .sec-two .boosters .booster .avatar {
    width: 15.909vw;
    height: 15.909vw;
    border-radius: 6.364vw;
  }

  .landing .sec-two .boosters .booster .rating-rank {
    padding: 1.818vw 3.182vw;
    border-radius: 3.182vw;
    border: 0.227vw solid #232040;
    margin: 3.182vw 0 4.545vw;
  }

  .landing .sec-two .boosters .booster .rating-rank .rating {
    font-size: 2.727vw;
  }

  .landing .sec-two .boosters .booster .rating-rank .rating img {
    height: 1.591vw;
    margin-top: 1.136vw;
  }

  .landing .sec-two .boosters .booster .rating-rank .rank-symbol {
    height: 6.364vw;
  }

  .landing .sec-two .boosters .booster .roles {
    gap: 1.818vw;
  }

  .landing .sec-two .boosters .booster .roles .role {
    padding: 2.273vw;
    border-radius: 3.182vw;
  }

  .landing .sec-two .boosters .booster .roles .role img {
    width: 4.545vw;
    height: 4.545vw;
  }

  .landing .sec-two .boosters .booster .champions {
    gap: 1.818vw;
    margin-top: 5vw;
  }

  .landing .sec-two .boosters .booster .champions .champion-icon {
    width: 5.909vw;
    height: 5.909vw;
    border-radius: 1.818vw;
  }

  .landing .sec-three {
    padding: 18.182vw 6.818vw;
    gap: 11.364vw;
    flex-direction: column;
  }

  .landing .sec-three .card {
    padding: 4.545vw;
    max-width: 100%;
    border-radius: 8.182vw;
  }

  .landing .sec-three .card .actions {
    gap: 2.273vw;
  }

  .landing .sec-three .card .actions .btn {
    padding: 2.727vw 6.364vw;
  }

  .landing .sec-three .card .actions .btn i {
    font-size: 3.182vw;
    margin-left: 1.136vw;
  }

  .landing .sec-three .card h5 {
    font-size: 5.909vw;
    line-height: 6.818vw;
    margin-bottom: 2.273vw;
  }

  .landing .sec-three .card h5 br {
    display: none;
  }

  .landing .sec-three .card p {
    font-size: 2.727vw;
    line-height: 5.455vw;
    margin-bottom: 6.818vw;
  }

  .landing .sec-three .card p br {
    display: none;
  }

  .landing .sec-three .card .flags {
    margin-bottom: 4.545vw;
  }

  .landing .sec-three .card img {
    margin: 0 auto;
  }

  .landing .sec-three .card.card-one > img {
    margin-bottom: 6.818vw;
  }

  .landing .sec-three .card.card-two {
    background: url('../images/landing/sec-three-card-bg.png');
    display: flex;
    flex-direction: column-reverse;
    gap: 6.818vw;
  }

  .landing .sec-three .card.card-two > img {
    margin-top: 0;
  }

  .landing .sec-four {
    padding: 9.091vw 0;
  }

  .landing .sec-four h3 {
    font-size: 4.545vw;
    margin-bottom: 5.227vw;
    margin-left: 6.818vw;
  }

  .landing .sec-four h3 .badge {
    font-size: 3.636vw;
    margin-left: 4.545vw;
    padding: 1.136vw 2.955vw;
    border-radius: 45.455vw;
    border: 0.227vw solid #232040;
  }

  .landing .sec-four .orders .order-card {
    padding: 2.727vw;
    max-width: 86.364vw;
    margin-right: 2.273vw;
    border-radius: 5.682vw;
    border: 0.227vw solid #232040;
  }

  .landing .sec-four .orders .order-card .top .left {
    gap: 1.818vw;
  }

  .landing .sec-four .orders .order-card .top .left img {
    width: 8.636vw;
    height: 8.636vw;
  }

  .landing .sec-four .orders .order-card .top .left h6 {
    font-size: 1.818vw;
  }

  .landing .sec-four .orders .order-card .top .left h5 {
    font-size: 2.727vw;
  }

  .landing .sec-four .orders .order-card .top .right p {
    font-size: 2.273vw;
    margin-bottom: 2.045vw;
  }

  .landing .sec-four .orders .order-card .top .right .progress-container {
    width: 43.182vw;
    height: 1.136vw;
    border-radius: 9.091vw;
  }

  .landing .sec-four .orders .order-card .top .right .progress-container .progress-bar {
    height: 1.136vw;
    border-radius: 9.091vw;
  }

  .landing .sec-four .orders .order-card .middle {
    padding: 2.273vw 0;
    margin: 2.727vw 0 4.545vw;
    border-top: 0.227vw solid #232040;
    border-bottom: 0.227vw solid #232040;
  }

  .landing .sec-four .orders .order-card .middle span {
    font-size: 2.727vw;
  }

  .landing .sec-four .orders .order-card .middle img {
    width: 2.5vw;
  }

  .landing .sec-four .orders .order-card .bottom span {
    font-size: 2.045vw;
    margin-bottom: 0.682vw;
  }

  .landing .sec-four .orders .order-card .bottom p {
    font-size: 2.727vw;
  }

  .landing .sec-four .orders .order-card .bottom p img {
    width: auto;
    height: 3.409vw;
    margin-right: 0.682vw;
  }

  .landing .sec-five {
    padding: 0 6.818vw;
  }

  .landing .sec-five h2 {
    font-size: 6.818vw;
    line-height: 9.091vw;
    margin-bottom: 2.273vw;
  }

  .landing .sec-five p {
    font-size: 3.636vw;
    line-height: 6.364vw;
    margin-bottom: 36.364vw;
  }

  .landing .sec-five .method-cards .card {
    background-color: #110f1f;
    border-radius: 13.636vw;
    border: 0.227vw solid #232040;
    padding: 56.818vw 4.545vw 9.091vw;
    max-width: 100%;
    margin-bottom: 36.364vw !important;
    text-align: center;
  }

  .landing .sec-five .method-cards .card > img {
    left: 4.545vw;
    top: -50%;
    transform: translateY(50%);
    bottom: unset;
    width: 77.273vw;
    height: auto;
  }

  .landing .sec-five .method-cards .card h5 {
    font-size: 3.182vw;
    margin-bottom: 2.273vw;
  }

  .landing .sec-five .method-cards .card h4 {
    font-size: 4.545vw;
    margin-bottom: 2.273vw;
  }

  .landing .sec-five .method-cards .card p {
    font-size: 3.636vw;
    line-height: 6.364vw;
    text-align: center;
    margin-bottom: 6.818vw;
  }

  .landing .sec-five .method-cards .card p br {
    display: none;
  }

  .landing .sec-five .method-cards .card:nth-child(2) {
    padding-left: 4.545vw;
    padding-right: 4.545vw;
    margin: unset;
    margin-left: unset;
  }

  .landing .sec-five .method-cards .card:nth-child(2) > img {
    left: auto;
    right: unset;
    bottom: unset;
  }

  .landing .sec-five .method-cards .card:last-child {
    margin-bottom: 0 !important;
  }

  .landing .sec-six {
    padding: 25vw 6.818vw 12.273vw;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url('../images/landing/sec-six-bg-mobile.webp');
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100vw;
  }

  .landing .sec-six .left {
    max-width: 100%;
    text-align: center;
    margin-bottom: 11.364vw;
  }

  .landing .sec-six .left h2 {
    font-size: 6.818vw;
    line-height: 9.091vw;
    margin-bottom: 2.273vw;
  }

  .landing .sec-six .left p {
    font-size: 2.727vw;
    line-height: 5.455vw;
    margin-bottom: 6.818vw;
  }

  .landing .sec-six .left .btn {
    padding: 2.727vw 6.364vw;
  }

  .landing .sec-six .right {
    gap: 2.273vw;
    display: grid;
  }

  .landing .sec-six .feature-item {
    padding: 0.227vw;
    border-radius: 5vw;
    max-width: 100%;
  }

  .landing .sec-six .feature-item .content {
    padding: 1.818vw;
    border-radius: 5vw;
    gap: 2.273vw;
    position: relative;
  }

  .landing .sec-six .feature-item .content h4 {
    font-size: 2.727vw;
  }

  .landing .sec-six .feature-item .content h4 p {
    margin-top: 1.818vw;
  }

  .landing .sec-six .feature-item .icon {
    width: 10.682vw;
    height: 10.682vw;
    border-radius: 2.727vw;
  }

  .landing .sec-six .feature-item .icon i {
    font-size: 5vw;
  }

  .landing .sec-faqs {
    padding: 11.364vw 6.818vw 0;
  }

  .landing .sec-faqs .top {
    gap: 1.136vw;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-bottom: 9.091vw;
  }

  .landing .sec-faqs .top h4 {
    font-size: 5.909vw;
    line-height: 9.091vw;
    width: 100%;
  }

  .landing .sec-faqs .top h4 br {
    display: none;
  }

  .landing .sec-faqs .top p {
    font-size: 3.182vw;
    line-height: 5.455vw;
    width: 100%;
  }

  .landing .sec-faqs .top p br {
    display: none;
  }

  .landing .payments-sec {
    display: none;
    padding: 6.818vw;
    gap: 13.636vw;
    flex-wrap: wrap;
    justify-content: center;
  }

  .landing .payments-sec img {
    width: auto;
    max-width: 100%;
    height: auto;
  }

  .landing .games-sec {
    padding: 6.818vw 0;
    gap: 2.273vw;
    background-color: #0e0d1a;
  }

  .landing .games-sec .btn {
    padding: 2.727vw 3.182vw;
    font-size: 2.727vw;
  }

  .landing .games-sec .btn i {
    font-size: 3.182vw;
    margin-right: 1.136vw;
  }

  .landing .games-sec .btn img {
    height: 3.182vw;
    margin-right: 1.136vw;
  }

  .lol-boost header {
    display: block;
    min-height: 0;
    height: auto;
    background: none !important;
    text-align: left;
  }

  .lol-boost header .content {
    margin: 0;
    padding: 20px 16px 16px;
    max-width: 100%;
    text-align: center;
  }

  .lol-boost header h1 {
    font-size: clamp(20px, 6vw, 32px);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
  }

  .lol-boost header p {
    font-size: 3.256vw;
    line-height: 6.512vw;
  }

  .lol-boost header.one { background: none !important; }

  .lol-boost header.two { background: none !important; }

  .lol-boost header.three { background: none !important; }

  .lol-boost header.four { background: none !important; }

  .lol-boost #champions_roles_modal h4.heading {
    gap: 2.326vw;
    font-size: 4.186vw;
  }

  .lol-boost #champions_roles_modal h4.heading .bullet {
    width: 9.767vw;
    height: 9.767vw;
    border-radius: 50%;
    font-size: 3.721vw;
  }

  .lol-boost #champions_roles_modal h4.heading .badge {
    border-radius: 2.326vw;
    font-size: 2.326vw;
  }

  .lol-boost #champions_roles_modal .icon-checkboxes {
    margin: 4.651vw 0;
  }

  .lol-boost #champions_roles_modal .select2 {
    margin: 4.651vw 0;
  }

  .lol-boost .rank-types-nav {
    margin: 9.302vw 0;
    gap: 2.326vw;
    padding: 0 4.651vw;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Safari */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
  }

  .lol-boost .rank-types-nav .nav-item {
    min-width: 23.256vw;
    height: 30.233vw;
    border-radius: 6.977vw;
    margin-right: 0;
  }

  .lol-boost .rank-types-nav .nav-item.active::after {
    padding: 0.465vw;
  }

  .lol-boost .rank-types-nav .nav-item img {
    height: 6.977vw;
    margin-bottom: 4.651vw;
  }

  .lol-boost .rank-types-nav .nav-item span {
    font-size: 3.721vw;
    line-height: 5.116vw;
  }

  .lol-boost .form-content {
    padding: 0 4.651vw;
    gap: 4.651vw;
    grid-template-columns: 1fr;
  }

  .lol-boost .form-content .boost-form .card {
    padding: 4.651vw;
    border-radius: 8.14vw;
    border: 0.465vw solid rgba(114, 110, 142, 0.1);
  }

  .lol-boost .form-content .boost-form .card .card-header {
    gap: 4.651vw;
  }

  .lol-boost .form-content .boost-form .card .card-header img {
    width: 12.791vw;
  }

  .lol-boost .form-content .boost-form .card .card-header h3 {
    font-size: 5.116vw;
  }

  .lol-boost .form-content .boost-form .card .card-header p {
    font-size: 2.791vw;
  }

  .lol-boost .form-content .boost-form .card.count-card .count {
    width: 19.535vw;
    height: 19.535vw;
    font-size: 9.767vw;
  }

  .lol-boost .form-content .boost-form .ranks,
  .lol-boost .form-content .boost-form .divisions {
    gap: 3.256vw;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 6.977vw;
  }

  .lol-boost .form-content .boost-form .ranks input[type='radio']:checked + .rank-btn::after,
  .lol-boost .form-content .boost-form .ranks input[type='radio']:checked + .division-btn::after,
  .lol-boost .form-content .boost-form .divisions input[type='radio']:checked + .rank-btn::after,
  .lol-boost .form-content .boost-form .divisions input[type='radio']:checked + .division-btn::after {
    padding: 0.465vw;
  }

  .lol-boost .form-content .boost-form .divisions {
    gap: 3.488vw;
  }

  .lol-boost .form-content .boost-form .rank-btn,
  .lol-boost .form-content .boost-form .division-btn {
    padding: 4.186vw;
    border-radius: 4.186vw;
  }

  .lol-boost .form-content .boost-form .rank-btn img,
  .lol-boost .form-content .boost-form .division-btn img {
    width: 9.302vw;
  }

  .lol-boost .form-content .boost-form .rank-btn .tooltip,
  .lol-boost .form-content .boost-form .division-btn .tooltip {
    display: none;
  }

  .lol-boost .form-content .boost-form .division-btn {
    font-size: 5.814vw;
    width: 17.442vw;
    height: 15.116vw;
  }

  .lol-boost .form-content .boost-form .lp-selector h6 {
    font-size: 3.256vw;
    margin-bottom: 4.186vw;
  }

  .lol-boost .form-content .boost-form .lp-selector .input-container {
    width: 100%;
    border-radius: 3.721vw;
  }

  .lol-boost .form-content .boost-form .lp-selector .input-container button {
    font-size: 4.651vw;
    padding: 4.651vw;
    border-radius: 3.721vw;
    border: 0.233vw solid #8f8f8f;
  }

  .lol-boost .form-content .boost-form .lp-selector .input-container input {
    font-size: 4.186vw;
  }

  .lol-boost .form-content .boost-form .options {
    gap: 4.651vw;
    flex-direction: column;
    margin-top: 11.628vw;
  }

  .lol-boost .form-content .boost-form .options .option {
    width: 100%;
  }

  .lol-boost .form-content .boost-form .options .option h6 {
    font-size: 3.256vw;
    margin-bottom: 2.326vw;
    margin-left: 4.651vw;
  }

  .lol-boost .form-content .boost-form .options-bar {
    gap: 4.651vw;
    flex-direction: column;
    padding: 6.977vw 4.651vw;
    margin-top: 4.651vw;
    border-radius: 8.14vw;
    border: 0.465vw solid rgba(114, 110, 142, 0.1);
  }

  .lol-boost .form-content .boost-form .options-bar .option h6 {
    font-size: 3.256vw;
    margin-bottom: 3.721vw;
  }

  .lol-boost .form-content .boost-form .range-slider {
    margin: 34.884vw 0 23.256vw;
  }

  .lol-boost .form-content .boost-form .range-slider.noUi-target,
  .lol-boost .form-content .boost-form .range-slider.noUi-target .noUi-base,
  .lol-boost .form-content .boost-form .range-slider.noUi-target .noUi-connects {
    height: 4.651vw;
    border-radius: 23.256vw;
  }

  .lol-boost .form-content .boost-form .range-slider .noUi-handle {
    width: 9.163vw;
    height: 9.163vw;
    border-radius: 11.628vw;
    top: -2.256vw;
  }

  .lol-boost .form-content .boost-form .range-slider .noUi-tooltip {
    width: 11.628vw;
    height: 11.628vw;
    border-radius: 2.791vw;
    font-size: 6.512vw;
  }

  .lol-boost .form-content .boost-form .range-slider .noUi-tooltip::after {
    padding: 0.465vw;
  }

  .lol-boost .form-content .boost-form .rank-boost .rank-cards {
    gap: 4.651vw;
    flex-direction: column;
  }

  .lol-boost .form-content .boost-form .rank-boost .ranks,
  .lol-boost .form-content .boost-form .rank-boost .divisions {
    gap: 2.326vw;
    margin: 13.953vw 0 6.977vw;
  }

  .lol-boost .form-content .boost-form .rank-boost .ranks input[type='radio']:checked + .rank-btn::after,
  .lol-boost .form-content .boost-form .rank-boost .ranks input[type='radio']:checked + .division-btn::after,
  .lol-boost .form-content .boost-form .rank-boost .divisions input[type='radio']:checked + .rank-btn::after,
  .lol-boost .form-content .boost-form .rank-boost .divisions input[type='radio']:checked + .division-btn::after {
    padding: 0.465vw;
  }

  .lol-boost .form-content .boost-form .rank-boost .divisions {
    gap: 4.186vw;
  }

  .lol-boost .form-content .boost-form .rank-boost .rank-btn,
  .lol-boost .form-content .boost-form .rank-boost .division-btn {
    padding: 4.186vw 5.116vw;
    border-radius: 4.651vw;
  }

  .lol-boost .form-content .boost-form .rank-boost .rank-btn img,
  .lol-boost .form-content .boost-form .rank-boost .division-btn img {
    width: 8.14vw;
  }

  .lol-boost .form-content .boost-form .rank-boost .division-btn {
    font-size: 4.651vw;
    width: 16.977vw;
    height: 14.884vw;
  }

  .lol-boost .form-content .boost-form .boost {
    gap: 4.651vw;
  }

  .lol-boost .form-content .boost-form .level-boost .levels {
    gap: 4.651vw;
    flex-direction: column;
  }

  .lol-boost .form-content .boost-form .level-boost .lp-selector h6 {
    font-size: 4.651vw;
  }

  .lol-boost .form-content .summary-wrapper {
    position: static;
  }

  .lol-boost .form-content .order-summary {
    padding: 4.651vw;
    border-radius: 8.14vw;
    border: 0.465vw solid rgba(114, 110, 142, 0.1);
  }

  .lol-boost .form-content .order-summary h3 {
    gap: 2.326vw;
    font-size: 5.116vw;
  }

  .lol-boost .form-content .order-summary h3 img {
    width: 5.814vw;
  }

  .lol-boost .form-content .order-summary .rank-box {
    padding: 3.488vw 4.651vw;
    margin: 4.651vw 0;
    border-radius: 6.977vw;
  }

  .lol-boost .form-content .order-summary .rank-box .to img,
  .lol-boost .form-content .order-summary .rank-box .from img {
    height: 6.977vw;
  }

  .lol-boost .form-content .order-summary .rank-box .to .title,
  .lol-boost .form-content .order-summary .rank-box .from .title {
    font-size: 3.256vw;
  }

  .lol-boost .form-content .order-summary .rank-box .from .game {
    font-size: 3.256vw;
    font-weight: 500;
  }

  .lol-boost .form-content .order-summary .rank-box .from small {
    font-size: 2.791vw;
    color: #726e8e;
    display: block;
  }

  .lol-boost .form-content .order-summary .rank-box .to .count {
    font-size: 3.256vw;
  }

  .lol-boost .form-content .order-summary .toggle-group {
    border-radius: 6.977vw;
    padding: 2.326vw;
  }

  .lol-boost .form-content .order-summary .toggle-label {
    padding: 2.791vw;
    font-size: 3.256vw;
    border-radius: 4.651vw;
  }

  .lol-boost .form-content .order-summary .totals {
    padding: 0 2.326vw;
  }

  .lol-boost .form-content .order-summary .totals p {
    font-size: 4.651vw;
  }

  .lol-boost .form-content .order-summary .totals p img {
    width: 5.581vw;
    margin-right: 2.326vw;
  }

  .lol-boost .form-content .order-summary .totals .price {
    font-size: 4.651vw;
  }

  .lol-boost .form-content .order-summary .buy-now {
    width: 100%;
    font-size: 3.721vw;
    line-height: 4.651vw;
    padding: 3.256vw 0;
    margin-top: 6.977vw;
  }

  .lol-boost .form-content .extra-options {
    margin: 4.651vw 0;
    padding: 0;
  }

  .lol-boost .form-content .extra-options .option {
    margin-bottom: 4.186vw;
  }

  .lol-boost .form-content .extra-options .option .text {
    gap: 2.326vw;
    font-size: 3.256vw;
    line-height: 4.186vw;
  }

  .lol-boost .form-content .extra-options .option .text img {
    width: 3.721vw;
  }

  .lol-boost .form-content .extra-options .privacy-settings-header {
    font-size: 2.558vw;
    padding: 2.326vw 3.256vw;
    border-radius: 1.628vw;
    margin: 4.651vw 0 3.256vw 0;
    letter-spacing: 0.1em;
    gap: 2.093vw;
  }

  .lol-boost .form-content .extra-options .privacy-settings-header::before {
    font-size: 2.791vw;
  }

  .lol-boost .form-content .completion-box {
    background-color: #0a0a18;
    border-radius: 6.977vw;
    padding: 5.116vw 0;
    gap: 2.791vw;
  }

  .lol-boost .form-content .completion-box img {
    width: 5.116vw;
  }

  .lol-boost .form-content .completion-box .text {
    font-size: 3.256vw;
    line-height: 7.442vw;
  }

  .lol-boost .form-content .discount-box {
    padding: 4.651vw 3.488vw;
    margin: 4.651vw 0 6.977vw;
    border-radius: 4.651vw;
    border: 0.233vw solid #6366f1;
  }

  .lol-boost .form-content .discount-box .remove-btn {
    top: -2.163vw;
    right: -2.163vw;
    width: 5.651vw;
    height: 5.651vw;
    border: 0.465vw solid red;
    font-size: 4.651vw;
  }

  .lol-boost .form-content .discount-box .left {
    gap: 1.86vw;
  }

  .lol-boost .form-content .discount-box .left img {
    width: 6.977vw;
  }

  .lol-boost .form-content .discount-box .left h5 {
    font-size: 3.256vw;
    margin-bottom: 0vw;
  }

  .lol-boost .form-content .discount-box .left p {
    font-size: 2.791vw;
    color: grey;
  }

  .lol-boost .form-content .discount-box .right {
    text-align: right;
  }

  .lol-boost .form-content .discount-box .right h5 {
    font-size: 2.791vw;
  }

  .lol-boost .form-content .discount-box .right .amounts .old {
    font-size: 2.791vw;
  }

  .lol-boost .form-content .discount-box .right .amounts .new {
    font-size: 3.488vw;
    margin-left: 4.884vw;
  }

  .lol-boost .form-content .discount-input {
    border-radius: 3.721vw;
    margin-top: 4.651vw;
  }

  .lol-boost .form-content .discount-input input {
    font-size: 3.256vw;
    padding: 3.953vw 5.116vw;
    border-radius: 3.721vw;
  }

  .lol-boost .form-content .discount-input button {
    font-size: 4.186vw;
    padding: 3.953vw 5.116vw;
    border-radius: 3.721vw;
  }

  .lol-boost .form-content .payment-gateways {
    padding: 9.302vw;
    margin-top: 4.651vw;
    border-radius: 11.628vw;
    border: 0.465vw solid rgba(114, 110, 142, 0.1);
  }

  .lol-boost .form-content .payment-gateways .top {
    gap: 4.186vw;
    margin-bottom: 7.442vw;
  }

  .lol-boost .form-content .payment-gateways .top img {
    width: 10.93vw;
  }

  .lol-boost .form-content .payment-gateways .top .text h5 {
    font-size: 4.186vw;
    margin-bottom: 0vw;
  }

  .lol-boost .form-content .payment-gateways .top .text p {
    font-size: 3.256vw;
  }

  .lol-boost .form-content .boost-faqs {
    display: none;
  }

  .lol-boost .form-content hr {
    border: 0.465vw solid rgba(114, 110, 142, 0.1);
    margin: 6.977vw 0;
  }

  .lol-boost .boost-faqs-mobile {
    padding: 9.302vw;
    margin-top: 4.651vw;
    padding-bottom: 0;
    background-color: #110f1f;
    border-radius: 9.302vw;
    border: 0.465vw solid rgba(114, 110, 142, 0.1);
  }

  .lol-boost .boost-faqs-mobile h4 {
    font-size: 7.442vw;
    font-weight: 500;
  }

  .lol-boost .accordion .accordion-header h5 {
    font-size: 4.091vw;
    padding-right: 5.814vw;
  }

  .lol-boost .bottom-sec {
    padding: 9.302vw 4.651vw 4.651vw;
    background-position: 0vw 11.395vw;
  }

  .lol-boost .choose-us h4 {
    font-size: 9.302vw;
    line-height: 11.163vw;
    margin-bottom: 9.302vw;
  }

  .lol-boost .choose-us .tiles {
    gap: 6.977vw;
    flex-direction: column;
  }

  .lol-boost .choose-us .tiles .tile {
    width: 100%;
    padding: 5.814vw;
    border-radius: 13.953vw;
    border: 0.465vw solid rgba(114, 110, 142, 0.1);
  }

  .lol-boost .choose-us .tiles .tile img {
    width: 18.605vw;
  }

  .lol-boost .choose-us .tiles .tile h5 {
    font-size: 5.116vw;
    margin: 6.512vw 0 4.651vw;
  }

  .lol-boost .choose-us .tiles .tile p {
    font-size: 3.721vw;
    line-height: 8.372vw;
  }

  .lol-boost .about-us {
    height: auto;
    margin: 4.651vw 0;
    padding: 4.651vw;
  }

  .lol-boost .about-us .content {
    max-width: 100%;
  }

  .lol-boost .about-us .content h4 {
    font-size: 9.302vw;
    margin-bottom: 18.605vw;
  }

  .lol-boost .about-us .content p {
    font-size: 3.721vw;
    line-height: 6.977vw;
  }

  .lol-boost .sticky-overview {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    display: block;
    padding: 0 20px;
    background-color: #110f1f;
  }

  .lol-boost .sticky-overview .rank-box {
    padding: 2.488vw 4.651vw;
    margin: 2.977vw 0;
    border-radius: 6.977vw;
    background-color: #0a0a18;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .lol-boost .sticky-overview .rank-box .to,
  .lol-boost .sticky-overview .rank-box .from {
    text-align: center;
  }

  .lol-boost .sticky-overview .rank-box .to img,
  .lol-boost .sticky-overview .rank-box .from img {
    width: auto;
    height: 6.977vw;
    margin: 0 auto;
  }

  .lol-boost .sticky-overview .rank-box .to .title,
  .lol-boost .sticky-overview .rank-box .from .title {
    font-size: 3.256vw;
  }

  .lol-boost .sticky-overview .rank-box .from .game {
    font-size: 3.256vw;
    font-weight: 500;
  }

  .lol-boost .sticky-overview .rank-box .from small {
    font-size: 2.791vw;
    color: #726e8e;
    display: block;
  }

  .lol-boost .sticky-overview .rank-box .to .count {
    font-size: 3.256vw;
    font-weight: 500;
  }

  .lol-boost .sticky-overview .totals {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.326vw;
  }

  .lol-boost .sticky-overview .totals p {
    display: flex;
    align-items: center;
    color: #726e8e;
    font-size: 4.651vw;
  }

  .lol-boost .sticky-overview .totals p img {
    width: 5.581vw;
    height: auto;
    margin-right: 2.326vw;
  }

  .lol-boost .sticky-overview .totals .old-price {
    margin-right: 4.884vw;
    text-decoration: line-through;
    color: #726e8e;
  }

  .lol-boost .sticky-overview .totals .price {
    font-size: 4.651vw;
  }

  .lol-boost .sticky-overview .buy-now {
    width: 100%;
    font-size: 3.721vw;
    line-height: 4.651vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.256vw 0;
    margin: 2.977vw 0;
  }

  .checkout .header {
    text-align: center;
    margin: 30.233vw 0 9.302vw;
  }

  .checkout .header h1 {
    font-size: 6.977vw;
    line-height: 1.2;
    margin-bottom: 2.326vw;
  }

  .checkout .header h5 {
    font-size: 3.256vw;
    line-height: 1.2;
  }

  .checkout .card {
    padding: 4.651vw;
    border-radius: 4.186vw;
    border: 0.465vw solid rgba(114, 110, 142, 0.1);
  }

  .checkout .main-content {
    gap: 6.977vw;
    margin: 0 6.977vw;
    padding-bottom: 80px;
    grid-template-columns: 1fr;
  }

  .checkout .main-content .left h3 {
    font-size: 3.256vw;
    font-weight: 500;
    margin-bottom: 4.186vw;
  }

  .checkout .main-content .left .buttons {
    gap: 2.326vw;
    display: flex;
    margin-bottom: 4.186vw;
  }

  .checkout .main-content .left .buttons .btn {
    padding: 2.326vw 0;
    font-size: 2.791vw;
    border-radius: 2.326vw;
    gap: 1.395vw;
  }

  .checkout .main-content .left .buttons .btn::after {
    padding: 0.233vw;
  }

  .checkout .main-content .left .buttons .btn img {
    width: 2.326vw;
  }

  .checkout .main-content .left .payment-methods {
    gap: 5.581vw;
  }

  .checkout .main-content .left .payment-methods:first-of-type {
    margin-bottom: 6.977vw;
  }

  .checkout .main-content .left .payment-methods .method-btn {
    padding: 2.326vw;
    border-radius: 1.86vw;
  }

  .checkout .main-content .left .payment-methods .method-btn .checkmark {
    gap: 2.326vw;
    font-size: 3.256vw;
  }

  .checkout .main-content .left .payment-methods .method-btn .checkmark span {
    width: 4.651vw;
    height: 4.651vw;
  }

  .checkout .main-content .left .payment-methods .method-btn img {
    height: 3.721vw;
  }

  .checkout .main-content .left .payment-methods .method-btn .badge {
    padding: 0.698vw 1.395vw;
    border-radius: 1.395vw;
  }

  .checkout .main-content .right h3 {
    font-size: 3.256vw;
    margin-bottom: 4.186vw;
  }

  .checkout .main-content .right h3 img {
    width: 4.186vw;
  }

  .checkout .main-content .right .summary .rank-box {
    padding: 3.488vw 4.651vw;
    margin: 4.651vw 0;
    border-radius: 6.977vw;
  }

  .checkout .main-content .right .summary .rank-box .to img,
  .checkout .main-content .right .summary .rank-box .from img {
    height: 6.977vw;
  }

  .checkout .main-content .right .summary .rank-box .to .title,
  .checkout .main-content .right .summary .rank-box .from .title {
    font-size: 3.256vw;
  }

  .checkout .main-content .right .summary .rank-box .from .game {
    font-size: 3.256vw;
    font-weight: 500;
  }

  .checkout .main-content .right .summary .rank-box .from small {
    font-size: 2.791vw;
    color: #726e8e;
    display: block;
  }

  .checkout .main-content .right .summary .rank-box .to .count {
    font-size: 3.256vw;
  }

  .checkout .main-content .right .summary .order-options {
    gap: 4.186vw;
    margin-bottom: 4.651vw;
  }

  .checkout .main-content .right .summary .order-options .option .title {
    gap: 2.326vw;
    font-size: 3.721vw;
  }

  .checkout .main-content .right .summary .order-options .option .title img {
    height: 3.721vw;
  }

  .checkout .main-content .right .summary .order-options .option .value {
    font-size: 3.721vw;
  }

  .checkout .main-content .right .summary .discount-input {
    border-radius: 3.721vw;
    margin-top: 4.651vw;
  }

  .checkout .main-content .right .summary .discount-input input {
    font-size: 3.256vw;
    padding: 3.953vw 5.116vw;
    border-radius: 3.721vw;
  }

  .checkout .main-content .right .summary .discount-input input::-moz-placeholder {
    color: #726e8e;
  }

  .checkout .main-content .right .summary .discount-input input::placeholder {
    color: #726e8e;
  }

  .checkout .main-content .right .summary .discount-input button {
    font-size: 4.186vw;
    padding: 3.953vw 5.116vw;
    border-radius: 3.721vw;
  }

  .checkout .main-content .right .summary #discount_alert {
    margin-top: 2.326vw;
    font-size: 2.791vw;
  }

  .checkout .main-content .right .summary .discount-applied {
    padding: 3.256vw 0;
    font-size: 3.256vw;
    text-align: center;
    border-radius: 2.326vw;
    border: 0.233vw solid #6366f1;
    margin: 6.977vw 0;
  }

  .checkout .main-content .right .summary .totals-section {
    border-top: 0.698vw solid rgba(114, 110, 142, 0.1);
    padding: 5.116vw 0;
  }

  .checkout .main-content .right .summary .totals-section .item {
    gap: 4.651vw;
  }

  .checkout .main-content .right .summary .totals-section .item div {
    gap: 2.326vw;
  }

  .checkout .main-content .right .summary .totals-section .item .label {
    font-size: 3.721vw;
  }

  .checkout .main-content .right .summary .totals-section .item .value {
    font-size: 5.116vw;
  }

  .checkout .main-content .right .summary .totals-section .item img {
    height: 3.721vw;
  }

  .checkout .main-content .right .summary #complete_payment {
    padding: 2.326vw 0;
    font-size: 3.721vw;
    line-height: 5.581vw;
    border-radius: 11.628vw;
  }

  /* Gamer Girls mobile headers */
  .egirls-list header,
  body.egirls-list header,
  .egirls-view header,
  body.egirls-view header {
    display: block;
    min-height: clamp(320px, 75vw, 480px);
    text-align: center;
    background-image: none !important;
    position: relative;
    overflow: hidden;
  }
  .egirls-list header,
  body.egirls-list header {
    background:
      radial-gradient(ellipse 100% 40% at 50% 0%, rgba(200,80,200,0.22) 0%, transparent 60%),
      radial-gradient(ellipse 60% 30% at 10% 20%, rgba(99,102,241,0.1) 0%, transparent 50%),
      radial-gradient(ellipse 60% 30% at 90% 20%, rgba(255,100,180,0.1) 0%, transparent 50%),
      linear-gradient(180deg, #0e0c22 0%, #0a0818 100%) !important;
  }
  .egirls-view header,
  body.egirls-view header {
    background:
      radial-gradient(ellipse 100% 40% at 50% 0%, rgba(200,80,200,0.22) 0%, transparent 60%),
      radial-gradient(ellipse 60% 30% at 10% 20%, rgba(99,102,241,0.1) 0%, transparent 50%),
      radial-gradient(ellipse 60% 30% at 90% 20%, rgba(255,100,180,0.12) 0%, transparent 50%),
      linear-gradient(180deg, #0e0c22 0%, #0a0818 100%) !important;
  }
  .egirls-list header::before,
  body.egirls-list header::before,
  .egirls-view header::before,
  body.egirls-view header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(200,80,200,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(200,80,200,0.06) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
  }
  .egirls-list header::after,
  body.egirls-list header::after,
  .egirls-view header::after,
  body.egirls-view header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
  }
  .egirls-list header .content,
  .egirls-view header .content {
    margin: 0;
    padding: var(--lb-content-top, 80px) 5.814vw 0;
    max-width: 100%;
    position: relative;
    z-index: 2;
  }


  .boosters-list .main-content {
    margin: 0 6.977vw;
  }

  .boosters-list .filter-box {
    border: 0.465vw solid rgba(114, 110, 142, 0.1);
    border-radius: 5.116vw;
    padding: 4.651vw;
    margin-bottom: 6.977vw;
    background: #110f1f;
    margin-top: 10vw;
  }

  .boosters-list .filter-box .head {
    padding: 0 0 3.256vw;
    border-bottom: 0.698vw solid rgba(114, 110, 142, 0.1);
  }

  .boosters-list .filter-box .head h2 {
    font-size: 3.256vw;
    font-weight: 600;
  }

  .boosters-list .filter-box .head button {
    padding: 2.326vw 5.349vw;
    font-size: 2.326vw;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 11.628vw;
  }

  .boosters-list .filter-box .bottom {
    gap: 3.256vw;
    margin: 4.651vw 0 0;
  }

  .boosters-list .filter-box .bottom .form-group {
    min-width: 46.512vw;
  }

  .boosters-list .filter-box .bottom .form-group input {
    height: 13.953vw;
  }

  .boosters-list .filter-box .bottom .form-group .select2-container {
    width: 100% !important;
  }

  .boosters-list .filter-box .bottom .form-group:nth-child(4),
  .boosters-list .filter-box .bottom .form-group:nth-child(5) {
    flex: 1 1 calc(50% - 2.326vw);
  }

  .boosters-list .boosters {
    gap: 6.977vw;
    grid-template-columns: 1fr;
  }

  .boosters-list .boosters .booster-card {
    border-radius: 5.116vw;
    border: 0.13vw solid #232040;
    padding: 6.977vw;
  }

  .boosters-list .boosters .booster-card .cover {
    height: 27.907vw;
    border-radius: 5.116vw;
    margin: -6.977vw -6.977vw 0 -6.977vw;
  }

  .boosters-list .boosters .booster-card .avatar {
    width: 20.93vw;
    height: 20.93vw;
    border: 0.93vw solid #110f1f;
    top: 18.605vw;
    left: 4.651vw;
  }



  .boosters-list .boosters .booster-card .details .top h5 {
    font-size: 3.721vw;
    margin-bottom: 0vw;
    gap: 1.86vw;
  }

  .boosters-list .boosters .booster-card .details .top h5 img {
    width: 3.721vw;
  }

  .boosters-list .boosters .booster-card .details .top h6 {
    font-size: 2.791vw;
  }

  .boosters-list .boosters .booster-card .details .top .rank-box {
    width: 22.326vw;
    height: 7.907vw;
    border-radius: 2.326vw;
    border: 0.233vw solid #6366f1;
  }

  .boosters-list .boosters .booster-card .details .top .rank-box img {
    height: 4.651vw;
  }

  .boosters-list .boosters .booster-card .details .mid {
    gap: 1.86vw;
    margin-top: 3.256vw;
  }

  .boosters-list .boosters .booster-card .details .mid .role-icon {
    width: 8.372vw;
    height: 8.372vw;
    border-radius: 1.86vw;
  }

  .boosters-list .boosters .booster-card .details .mid .role-icon img {
    width: 4.651vw;
    height: 4.651vw;
  }

  .boosters-list .boosters .booster-card .details .mid small {
    font-size: 3.256vw;
  }

  .boosters-list .boosters .booster-card .details .bottom {
    margin-top: 11.628vw;
  }

  .boosters-list .boosters .booster-card .details .bottom .champions {
    gap: 1.86vw;
  }

  .boosters-list .boosters .booster-card .details .bottom .champions .champion-icon,
  .boosters-list .boosters .booster-card .details .bottom .champions .more-champions-icon {
    width: 6.977vw;
    height: 6.977vw;
    border-radius: 1.86vw;
    font-size: 2.791vw;
  }

  .boosters-list .boosters .booster-card .details .bottom .rating-badge {
    width: 13.953vw;
    height: 6.977vw;
    border-radius: 1.86vw;
    font-size: 2.791vw;
    line-height: 1;
    gap: 1.86vw;
  }

  .boosters-list .boosters .booster-card .details .bottom .rating-badge img {
    width: 3.256vw;
  }

  .boosters-list #loading-spinner {
    margin: 6.977vw auto;
  }

  .boosters-list .no-boosters {
    font-size: 5.581vw;
    margin-bottom: 18.605vw;
    text-indent: 4.651vw;
    text-align: center;
  }

  .boosters-view header {
    display: block;
    min-height: clamp(320px, 75vw, 480px);
    text-align: center;
    background:
      radial-gradient(ellipse 100% 40% at 50% 0%, rgba(99,102,241,0.2) 0%, transparent 60%),
      radial-gradient(ellipse 60% 30% at 10% 20%, rgba(255,74,59,0.08) 0%, transparent 50%),
      radial-gradient(ellipse 60% 30% at 90% 20%, rgba(59,184,255,0.1) 0%, transparent 50%),
      linear-gradient(180deg, #0e0c22 0%, #0a0818 100%);
    position: relative;
    overflow: hidden;
  }
  .boosters-view header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
  }
  .boosters-view header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
  }

  body.boosters-view header,
  body.bv2 header,
  .bv2 header {
    background-image: none !important;
    background:
      radial-gradient(ellipse 100% 40% at 50% 0%, rgba(99,102,241,0.2) 0%, transparent 60%),
      radial-gradient(ellipse 60% 30% at 10% 20%, rgba(255,74,59,0.08) 0%, transparent 50%),
      radial-gradient(ellipse 60% 30% at 90% 20%, rgba(59,184,255,0.1) 0%, transparent 50%),
      linear-gradient(180deg, #0e0c22 0%, #0a0818 100%) !important;
  }

  .boosters-view header .content {
    margin: 0;
    padding: var(--lb-content-top, 80px) 5.814vw 0;
    max-width: 100%;
  }

  .boosters-view header h1 {
    font-size: 13.953vw;
    line-height: 18.605vw;
    margin-bottom: 4.651vw;
  }

  .boosters-view header p {
    font-size: 3.256vw;
    line-height: 6.512vw;
  }

  .boosters-view .main-content {
    margin: 6.977vw;
    border-radius: 2.326vw;
    border: 0.465vw solid rgba(114, 110, 142, 0.1);
    padding: 6.977vw;
  }

  .boosters-view .main-content .cover {
    height: 27.907vw;
    border-radius: 2.326vw;
    margin: -6.977vw -6.977vw 0 -6.977vw;
  }

  .boosters-view .main-content .avatar {
    width: 20.93vw;
    height: 20.93vw;
    border: 1.163vw solid #110f1f;
    top: 13.953vw;
    left: 4.651vw;
  }

  .boosters-view .main-content .details {
    margin-top: 13.953vw;
  }

  .boosters-view .main-content .details .top {
    padding-bottom: 4.651vw;
    border-bottom: 0.465vw solid rgba(114, 110, 142, 0.1);
    flex-wrap: wrap;
    flex: 1 1 100%;
  }

  .boosters-view .main-content .details .top .info h5 {
    gap: 2.326vw;
    font-size: 3.721vw;
  }

  .boosters-view .main-content .details .top .info h5 img {
    width: 3.721vw;
  }

  .boosters-view .main-content .details .top .info h6 {
    gap: 4.651vw;
    font-size: 2.791vw;
  }

  .boosters-view .main-content .details .top .info h6 .rating-badge {
    gap: 1.163vw;
  }

  .boosters-view .main-content .details .top .info h6 .rating-badge img {
    width: 2.791vw;
    margin-right: 0;
  }

  .boosters-view .main-content .details .top .info h6 .rating-badge span {
    font-size: 2.791vw;
    line-height: 1;
    margin-top: 0.465vw;
  }

  .boosters-view .main-content .details .top .buttons .btn:not(.mobile-btn) {
    display: none;
  }


  .boosters-view .main-content .details .top .buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 18px; /* more space between header content and first button */
  }

  .boosters-view .main-content .details .top .buttons .btn {
    /* Mobile: keep the primary button look, just smaller */
    font-size: 13px;
    padding: 9px 16px;
    min-height: 36px;
    border: none;
  }

  .boosters-view .main-content .details .top .mobile-btn {
    display: block;
    width: auto;
    min-width: 160px;
    max-width: 220px;
    margin: 0 auto;
    padding: 9px 16px;
    text-align: center;
    font-size: 13px;
    min-height: 36px;
  }

  .boosters-view .main-content .details .bottom {
    margin-top: 4.651vw;
  }

  .boosters-view .main-content .details .bottom .nav-tabs {
    border-radius: 15.349vw;
    padding: 2.326vw;
    width: 100%;
  }

  .boosters-view .main-content .details .bottom .nav-tabs a {
    font-size: 2.791vw;
    padding: 2.326vw 5.116vw;
    border-radius: 15.349vw;
  }

  .boosters-view .main-content .details .bottom .description {
    margin: 4.651vw 0;
  }

  .boosters-view .main-content .details .bottom .description h4 {
    font-size: 3.721vw;
    margin-bottom: 2.326vw;
  }

  .boosters-view .main-content .details .bottom .description p {
    font-size: 2.791vw;
    line-height: 4.651vw;
  }

  .boosters-view .main-content .details .bottom .features {
    gap: 4.651vw;
    grid-template-columns: 1fr;
  }

  .boosters-view .main-content .details .bottom .features .recent-orders {
    order: 2;
    padding: 4.651vw;
    border-radius: 3.721vw;
    border: 0.465vw solid rgba(114, 110, 142, 0.1);
  }

  .boosters-view .main-content .details .bottom .features .recent-orders h4 {
    font-size: 3.721vw;
  }

  .boosters-view .main-content .details .bottom .features .recent-orders .order-item {
    margin-top: 4.651vw;
    padding-top: 4.651vw;
    border-top: 0.465vw solid rgba(114, 110, 142, 0.1);
  }

  .boosters-view .main-content .details .bottom .features .recent-orders .order-item .title {
    gap: 2.326vw;
  }

  .boosters-view .main-content .details .bottom .features .recent-orders .order-item .title .icon {
    padding: 2.326vw;
    border-radius: 1.86vw;
  }

  .boosters-view .main-content .details .bottom .features .recent-orders .order-item .title .icon i {
    font-size: 3.721vw;
    --fa-primary-color: #fff !important;
    --fa-secondary-color: $primary-color !important;
  }

  .boosters-view .main-content .details .bottom .features .recent-orders .order-item .title p {
    font-size: 2.326vw;
  }

  .boosters-view .main-content .details .bottom .features .recent-orders .order-item .title p small {
    font-size: 2.326vw;
    margin-top: 0.93vw;
  }

  .boosters-view .main-content .details .bottom .features .recent-orders .order-item .badge {
    font-size: 2.326vw;
    border-radius: 1.86vw;
    padding: 2.326vw;
  }

  .boosters-view .main-content .details .bottom .features .tiles {
    order: 1;
    gap: 4.651vw;
    grid-template-columns: 1fr;
  }

  .boosters-view .main-content .details .bottom .features .tiles .tile {
    padding: 4.651vw;
    border-radius: 3.721vw;
    border: 0.465vw solid rgba(114, 110, 142, 0.1);
  }

  .boosters-view .main-content .details .bottom .features .tiles .tile .head {
    padding-bottom: 2.326vw;
    border-bottom: 0.465vw solid rgba(114, 110, 142, 0.1);
  }

  .boosters-view .main-content .details .bottom .features .tiles .tile .head img {
    height: 6.047vw;
  }

  .boosters-view .main-content .details .bottom .features .tiles .tile .body {
    margin-top: 2.326vw;
  }

  .boosters-view .main-content .details .bottom .features .tiles .tile .body h5 {
    font-size: 2.791vw;
    margin-bottom: 1.395vw;
  }

  .boosters-view .main-content .details .bottom .features .tiles .tile .body .rank-icon {
    height: 6.977vw;
  }

  .boosters-view .main-content .details .bottom .features .tiles .tile .body .roles {
    gap: 2.326vw;
  }

  .boosters-view .main-content .details .bottom .features .tiles .tile .body .roles .role-icon {
    width: 6.977vw;
    height: 6.977vw;
    border-radius: 1.86vw;
  }

  .boosters-view .main-content .details .bottom .features .tiles .tile .body .roles .role-icon img {
    width: 4.651vw;
    height: 4.651vw;
  }

  .boosters-view .main-content .details .bottom .features .tiles .tile .body .langs {
    gap: 3.488vw;
  }

  .boosters-view .main-content .details .bottom .features .tiles .tile .body .langs img {
    width: 6.977vw;
  }

  .boosters-view .main-content .details .bottom .features .tiles .tile .body .champs {
    gap: 2.326vw;
  }

  .boosters-view .main-content .details .bottom .features .tiles .tile .body .champs img {
    width: 6.977vw;
    height: 6.977vw;
  }

  .boosters-view .booster-orders {
    gap: 3.721vw;
  }

  .boosters-view .order-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 4.186vw;
    border-radius: 4.186vw;
    gap: 3.256vw;
  }

  /* LEFT */

  .boosters-view .order-card .left {
    gap: 3.256vw;
  }

  .boosters-view .order-card .icon {
    width: 10.698vw;
    height: 10.698vw;
    border-radius: 2.791vw;
  }

  .boosters-view .order-card .icon i {
    font-size: 5.116vw;
  }

  .boosters-view .order-card h5 {
    font-size: 3.721vw;
  }

  .boosters-view .order-card small {
    font-size: 3.023vw;
  }

  /* BOOST */

  .boosters-view .order-card .boost {
    width: 100%;
    justify-content: center;
    gap: 2.791vw;
  }

  .boosters-view .order-card .boost img {
    height: 9.767vw;
  }

  .boosters-view .order-card .boost i {
    font-size: 3.851vw;
  }

  .boosters-view .order-card .boost p {
    font-size: 4.651vw;
  }

  /* STATUS */

  .boosters-view .order-card .status {
    width: 100%;
    text-align: center;
    padding: 2.326vw 0;
    font-size: 2.791vw;
  }

  .boosters-view .booster-reviews {
    display: grid;
    gap: 1.86vw; /* was 2.083vw */
    margin-top: 2.326vw; /* was 2.604vw */
  }

  /* CARD */
  .boosters-view .review-row {
    border-radius: 2.326vw; /* was 2.292vw */
    padding: 2.326vw; /* was 2.292vw */
    background: #0a0a18;
    border: 0.104vw solid rgba(114, 110, 142, 0.12);
  }

  /* TOP */
  .boosters-view .review-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .boosters-view .review-top h5 {
    font-size: 3.256vw; /* was 1.49vw */
  }

  .boosters-view .review-top h5 span {
    font-weight: 400;
    color: #726e8e;
    margin-left: 0.93vw; /* was 0.521vw */
  }

  .boosters-view .review-top small {
    margin-top: 0.465vw; /* was 0.313vw */
    font-size: 2.791vw; /* was 1.146vw */
    color: #726e8e;
  }

  /* STARS */
  .boosters-view .review-top .stars {
    font-size: 3.256vw; /* was 1.49vw */
    color: #7aa2ff;
    text-shadow: 0 0 0.465vw rgba(122, 162, 255, 0.6);
    text-align: left;
  }

  .boosters-view .review-top .label {
    font-size: 2.326vw; /* was 0.833vw */
    color: #726e8e;
    margin-bottom: 0.93vw;
    text-align: left;
  }

  /* PILLS */
  .boosters-view .review-pills {
    margin-top: 1.395vw; /* was 1.302vw */
    gap: 0.93vw; /* was 0.833vw */
    flex-wrap: wrap;
  }

  .boosters-view .review-pills span {
    padding: 0.93vw 1.86vw; /* was 0.573vw 1.432vw */
    font-size: 2.791vw; /* was 1.042vw */
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.35);
  }

  /* TAGS */
  .boosters-view .review-tags {
    margin-top: 0.93vw; /* was 1.042vw */
    gap: 0.93vw; /* was 0.833vw */
    flex-wrap: wrap;
  }

  .boosters-view .review-tags span {
    padding: 0.93vw 2.326vw; /* was 0.573vw 1.719vw */
    font-size: 2.791vw; /* was 1.042vw */
    background: linear-gradient(135deg, #1e293b, #020617);
    color: #93c5fd;
    box-shadow: inset 0 0 0.698vw rgba(99, 102, 241, 0.15);
  }

  /* TEXT */
  .boosters-view .review-text {
    margin-top: 1.395vw; /* was 1.302vw */
    font-size: 2.791vw; /* was 1.146vw */
    color: #fff;
  }

  .contact-page header {
    display: block;
    min-height: clamp(320px, 75vw, 480px);
    text-align: center;
    background:
      radial-gradient(ellipse 100% 40% at 50% 0%, rgba(59,184,255,0.16) 0%, transparent 60%),
      radial-gradient(ellipse 60% 30% at 10% 20%, rgba(99,102,241,0.1) 0%, transparent 50%),
      radial-gradient(ellipse 60% 30% at 90% 20%, rgba(168,139,250,0.1) 0%, transparent 50%),
      linear-gradient(180deg, #0e0c22 0%, #0a0818 100%);
    position: relative;
    overflow: hidden;
  }
  .contact-page header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
  }
  .contact-page header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
  }

  .contact-page header .content {
    margin: 0;
    padding: var(--lb-content-top, 80px) 5.814vw 0;
    max-width: 100%;
  }

  .contact-page header h1 {
    font-size: 13.953vw;
    line-height: 18.605vw;
    margin-bottom: 4.651vw;
  }

  .contact-page header p {
    font-size: 3.256vw;
    line-height: 6.512vw;
  }

  .contact-page .cards {
    gap: 6.977vw;
    margin: 6.977vw;
    flex-direction: column;
  }

  .contact-page .cards .card {
    padding: 6.977vw;
    border-radius: 5.116vw;
    border: 0.465vw solid rgba(114, 110, 142, 0.1);
  }

  .contact-page .cards .card .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .contact-page .cards .card .head .icon {
    width: 20.93vw;
    height: 20.93vw;
    border-radius: 4.651vw;
    border: 0.465vw solid rgba(114, 110, 142, 0.1);
  }

  .contact-page .cards .card .head .icon img {
    width: auto;
    height: 9.302vw;
  }

  .contact-page .cards .card .head h3 {
    font-size: 5.581vw;
  }

  .contact-page .cards .card .head h6 {
    font-size: 3.721vw;
  }

  .contact-page .cards .card .content {
    margin-top: 6.977vw;
  }

  .contact-page .cards .card .content p {
    font-size: 3.721vw;
    line-height: 6.977vw;
    margin-bottom: 6.977vw;
  }

  .contact-page .cards .card .content .btn {
    font-size: 3.256vw;
    padding: 2.326vw 9.302vw;
    margin: 0 auto;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
  }

  .contact-page .sec-faqs {
    padding: 11.364vw 6.818vw 0;
  }

  .contact-page .sec-faqs .top {
    gap: 1.136vw;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-bottom: 9.091vw;
  }

  .contact-page .sec-faqs .top h4 {
    font-size: 5.909vw;
    line-height: 9.091vw;
  }

  .jobs-page header {
    display: block;
    min-height: clamp(320px, 75vw, 480px);
    text-align: center;
    background:
      radial-gradient(ellipse 100% 40% at 50% 0%, rgba(99,102,241,0.2) 0%, transparent 60%),
      radial-gradient(ellipse 60% 30% at 10% 20%, rgba(245,193,76,0.08) 0%, transparent 50%),
      radial-gradient(ellipse 60% 30% at 90% 20%, rgba(59,184,255,0.1) 0%, transparent 50%),
      linear-gradient(180deg, #0e0c22 0%, #0a0818 100%);
    position: relative;
    overflow: hidden;
  }
  .jobs-page header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
  }
  .jobs-page header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
  }

  .jobs-page header .content {
    margin: 0;
    padding: var(--lb-content-top, 80px) 5.814vw 0;
    max-width: 100%;
  }

  .jobs-page header h1 {
    font-size: 10.233vw;
    line-height: 13.953vw;
    margin-bottom: 4.651vw;
  }

  .jobs-page header p {
    font-size: 3.256vw;
    line-height: 6.512vw;
    max-width: 100%;
  }

  .jobs-page header .badges {
    gap: 4.651vw;
    margin: 5.814vw 0;
  }

  .jobs-page header .badges .badge {
    padding: 3.488vw 5.581vw;
    font-size: 3.256vw;
    border-radius: 2.791vw;
    gap: 1.395vw;
    border: 0.233vw solid #6366f1;
  }

  .jobs-page header .badges .badge img {
    width: auto;
    height: 3.721vw;
  }

  .jobs-page header .btn {
    font-size: 3.488vw;
    line-height: 6.279vw;
    padding: 2.326vw 8.837vw;
  }

  .jobs-page .cards {
    gap: 6.977vw;
    margin: 6.977vw;
    flex-direction: column;
  }

  .jobs-page .cards .card {
    padding: 6.977vw;
    border-radius: 5.116vw;
    border: 0.465vw solid rgba(114, 110, 142, 0.1);
  }

  .jobs-page .cards .card .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .jobs-page .cards .card .head .icon {
    width: 20.93vw;
    height: 20.93vw;
    border-radius: 4.651vw;
    border: 0.465vw solid rgba(114, 110, 142, 0.1);
  }

  .jobs-page .cards .card .head .icon img {
    width: auto;
    height: 9.302vw;
  }

  .jobs-page .cards .card .head h3 {
    font-size: 5.581vw;
  }

  .jobs-page .cards .card .head h6 {
    font-size: 3.721vw;
  }

  .jobs-page .cards .card .content {
    margin-top: 6.977vw;
  }

  .jobs-page .cards .card .content p {
    font-size: 3.721vw;
    line-height: 6.977vw;
    margin-bottom: 6.977vw;
  }

  .jobs-page .cards .card .content .btn {
    font-size: 3.256vw;
    padding: 2.326vw 9.302vw;
    margin: 0 auto;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
  }

  .jobs-page .sec-faqs {
    padding: 11.364vw 6.818vw 0;
  }

  .jobs-page .sec-faqs .top {
    gap: 1.136vw;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-bottom: 9.091vw;
  }

  .jobs-page .sec-faqs .top h4 {
    font-size: 5.909vw;
    line-height: 9.091vw;
  }

  .jobs-page .features-sec {
    padding: 6.977vw;
  }

  .jobs-page .features-sec h2 {
    font-size: 5.116vw;
    line-height: 6.512vw;
  }

  .jobs-page .features-sec h6 {
    font-size: 3.256vw;
    line-height: 5.581vw;
    max-width: 100%;
    margin: 2.326vw auto 9.302vw;
  }

  .jobs-page .features-sec .feature-tiles {
    gap: 6.977vw;
    flex-direction: column;
  }

  .jobs-page .features-sec .feature-tiles .tile {
    padding: 6.977vw;
    border-radius: 5.116vw;
    border: 0.465vw solid rgba(114, 110, 142, 0.1);
  }

  .jobs-page .features-sec .feature-tiles .tile img {
    width: 25.581vw;
    height: 25.581vw;
    margin-bottom: 21.395vw;
  }

  .jobs-page .features-sec .feature-tiles .tile h5 {
    font-size: 4.651vw;
    margin-bottom: 2.326vw;
  }

  .jobs-page .features-sec .feature-tiles .tile p {
    font-size: 3.721vw;
    line-height: 6.977vw;
  }

  .jobs-page .features-sec .btn {
    font-size: 3.721vw;
    line-height: 1.2;
    padding: 3.256vw;
    margin: 6.977vw 0 0;
    display: block;
    width: 100%;
    text-align: center;
  }

  .jobs-page .requirements-sec {
    padding: 6.977vw;
    background: none;
  }

  .jobs-page .requirements-sec h2 {
    font-size: 5.116vw;
    line-height: 6.512vw;
  }

  .jobs-page .requirements-sec h6 {
    font-size: 3.256vw;
    line-height: 5.581vw;
    max-width: 100%;
    margin: 2.326vw auto 6.977vw;
  }

  .jobs-page .requirements-sec .requirement-cards {
    gap: 9.302vw;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
  }

  .jobs-page .requirements-sec .requirement-cards .card {
    padding: 6.977vw;
    border-radius: 5.116vw;
    min-width: 100%;
  }

  .jobs-page .requirements-sec .requirement-cards .card::after {
    padding: 0.233vw;
  }

  .jobs-page .requirements-sec .requirement-cards .card img {
    width: 23.256vw;
    height: 23.256vw;
    margin-bottom: 9.302vw;
  }

  .jobs-page .requirements-sec .requirement-cards .card h4 {
    font-size: 5.581vw;
    margin-bottom: 0vw;
  }

  .jobs-page .requirements-sec .requirement-cards .card p {
    font-size: 3.721vw;
    margin-bottom: 4.651vw;
  }

  .jobs-page .requirements-sec .requirement-cards .card .list-box p {
    font-size: 3.256vw;
  }

  .jobs-page .requirements-sec .requirement-cards .card .list-box ul {
    margin: 6.977vw 0;
  }

  .jobs-page .requirements-sec .requirement-cards .card .list-box ul li {
    font-size: 3.256vw;
    margin-bottom: 2.326vw;
    background: url('../images/jobs/check.svg') no-repeat left center;
    background-size: 3.721vw 3.721vw;
    padding-left: 6.047vw;
  }

  .jobs-page .requirements-sec .requirement-cards .card h5 {
    font-size: 4.186vw;
    margin-bottom: 4.651vw;
  }

  .jobs-page .requirements-sec .requirement-cards .card .earning-boxes {
    gap: 4.651vw;
    display: flex;
    align-items: center;
  }

  .jobs-page .requirements-sec .requirement-cards .card .earning-boxes .box {
    padding: 4.651vw;
    border-radius: 4.186vw;
    border: 0.233vw solid #6366f1;
  }

  .jobs-page .requirements-sec .requirement-cards .card .earning-boxes .box h6 {
    font-size: 3.256vw;
    margin: 0 0 2.326vw;
  }

  .jobs-page .requirements-sec .requirement-cards .card .earning-boxes .box p {
    font-size: 2.791vw;
  }

  .blogs-page header {
    display: block;
    min-height: clamp(320px, 75vw, 480px);
    text-align: center;
    background:
      radial-gradient(ellipse 100% 40% at 50% 0%, rgba(168,139,250,0.16) 0%, transparent 60%),
      radial-gradient(ellipse 60% 30% at 10% 20%, rgba(99,102,241,0.1) 0%, transparent 50%),
      radial-gradient(ellipse 60% 30% at 90% 20%, rgba(59,184,255,0.08) 0%, transparent 50%),
      linear-gradient(180deg, #0e0c22 0%, #0a0818 100%);
    position: relative;
    overflow: hidden;
  }
  .blogs-page header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
  }
  .blogs-page header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
  }

  .blogs-page header .content {
    margin: 0;
    padding: var(--lb-content-top, 80px) 5.814vw 0;
    max-width: 100%;
  }

  .blogs-page header h1 {
    font-size: 13.953vw;
    line-height: 18.605vw;
    margin-bottom: 4.651vw;
  }

  .blogs-page header p {
    font-size: 3.256vw;
    line-height: 6.512vw;
  }

  .blogs-page .container {
    margin: 2.326vw auto;
    max-width: 90%;
  }

  .blogs-page .container .blogs {
    gap: 4.651vw;
    grid-template-columns: repeat(1, 1fr);
  }

  .blogs-page .container .blogs .blog {
    border-radius: 5.116vw;
    border: 0.465vw solid rgba(114, 110, 142, 0.1);
  }

  .blogs-page .container .blogs .blog img {
    border-radius: 5.116vw;
  }

  .blogs-page .container .blogs .blog .body {
    padding: 3.488vw;
  }

  .blogs-page .container .blogs .blog .body h3 {
    font-size: 4.5vw;
    margin-bottom: 2.326vw;
  }

  .blogs-page .container .blogs .blog .body p {
    font-size: 3vw;
  }

  .blogs-page .container .blogs .blog .footer {
    padding: 0 3.488vw 3.488vw 3.488vw;
  }

  .blogs-page .container .blogs .blog .footer .flex {
    gap: 2.326vw;
  }

  .blogs-page .container .blogs .blog .footer .flex i {
    font-size: 3.5vw;
  }

  .blogs-page .container .blogs .blog .footer .flex time {
    font-size: 3.5vw;
  }

  .blogs-page .container .blogs .blog .footer a {
    font-size: 3.5vw;
  }

  .blogs-page .container .pagination {
    gap: 2.326vw;
    margin-top: 4.651vw;
  }

  .blogs-page .container .pagination a {
    min-width: 11.628vw;
    height: 11.628vw;
    border: 0.465vw solid rgba(114, 110, 142, 0.2);
    border-radius: 2.791vw;
    padding: 0 3.488vw;
    font-size: 4vw;
  }

  .blogs-page .container .pagination .prev,
  .blogs-page .container .pagination .next {
    font-size: 4vw;
  }

  .article-page .header {
    text-align: center;
    margin: 30.233vw 0 9.302vw;
  }

  .article-page .header h1 {
    font-size: 8.977vw;
    line-height: 1.2;
    margin-bottom: 4.326vw;
  }

  .article-page .header h5 {
    font-size: 3.256vw;
    line-height: 1.2;
    max-width: 80%;
    margin: 0 auto;
  }

  .article-page .container {
    margin: 14.326vw auto;
    max-width: 90%;
  }

  .article-page .container > div {
    margin-bottom: 4.651vw;
  }

  .article-page .container i {
    font-size: 3.256vw;
    margin-right: 1.163vw;
  }

  .article-page .container span {
    font-size: 3.256vw;
  }

  .article-page .container time {
    font-size: 3.256vw;
  }

  .article-page .container article h2 {
    font-size: 5.116vw;
    margin-bottom: 2.326vw;
  }

  .article-page .container article h3 {
    font-size: 4.186vw;
    margin-bottom: 2.326vw;
  }

  .article-page .container article p {
    font-size: 3.256vw;
    line-height: 6.512vw;
    margin-bottom: 4.651vw;
  }

  .article-page .container article img {
    border-radius: 2.326vw;
    margin: 4.651vw 0;
    max-width: 100%;
  }

  .article-page .container article ul {
    margin: 4.651vw 0 4.651vw 6.977vw;
  }

  .article-page .container article ul li {
    font-size: 3.256vw;
    line-height: 6.512vw;
    margin-bottom: 2.326vw;
  }

  .imprint-page .header {
    text-align: center;
    margin: 30.233vw 0 9.302vw;
  }

  .imprint-page .header h1 {
    font-size: 8.977vw;
    line-height: 1.2;
    margin-bottom: 4.326vw;
  }

  .imprint-page .container {
    margin: 14.326vw auto;
    max-width: 90%;
  }

  .imprint-page .container h2 {
    font-size: 5.116vw;
  }

  .imprint-page .container p {
    font-size: 3.256vw;
    line-height: 6.512vw;
    margin-bottom: 4.651vw;
  }

  .imprint-page.thankyou .container {
    margin: 4.326vw auto;
  }

  .imprint-page.thankyou .container p {
    font-size: 4.186vw;
    line-height: 6.977vw;
  }

  .privacy-page .header {
    text-align: center;
    margin: 30.233vw 0 9.302vw;
  }

  .privacy-page .header h1 {
    font-size: 8.977vw;
    line-height: 1.2;
    margin-bottom: 4.326vw;
  }

  .privacy-page .container {
    margin: 14.326vw auto;
    max-width: 90%;
  }

  .privacy-page .container h2 {
    font-size: 5.116vw;
    font-weight: 600;
    margin: 3.721vw 0;
  }

  .privacy-page .container h5 {
    font-size: 4.186vw;
    font-weight: 500;
    margin-top: 6.512vw;
    margin-bottom: 2.326vw;
  }

  .privacy-page .container p {
    font-size: 3.488vw;
    font-weight: 300;
    line-height: 6.047vw;
    color: #726e8e;
    margin-bottom: 3.721vw;
  }

  .privacy-page .container a {
    font-size: 3.488vw;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .privacy-page .container ul {
    padding-left: 4.651vw;
    margin-bottom: 3.721vw;
  }

  .privacy-page .container ul li {
    font-size: 3.488vw;
    line-height: 6.047vw;
    margin-bottom: 1.86vw;
  }

  .premium-accounts-page header {
    display: block;
    min-height: clamp(320px, 75vw, 480px);
    text-align: center;
    background:
      radial-gradient(ellipse 100% 40% at 50% 0%, rgba(99,102,241,0.2) 0%, transparent 60%),
      radial-gradient(ellipse 60% 30% at 10% 20%, rgba(59,184,255,0.1) 0%, transparent 50%),
      radial-gradient(ellipse 60% 30% at 90% 20%, rgba(168,139,250,0.1) 0%, transparent 50%),
      linear-gradient(180deg, #0e0c22 0%, #0a0818 100%);
    position: relative;
    overflow: hidden;
  }
  .premium-accounts-page header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
  }
  .premium-accounts-page header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
  }

  .premium-accounts-page header .content {
    margin: 0;
    padding: 23.256vw 5.814vw 0;
    max-width: 100%;
  }

  .premium-accounts-page header h1 {
    font-size: 6.953vw;
    line-height: 10.605vw;
    margin-bottom: 4.651vw;
  }

  .premium-accounts-page header p {
    font-size: 3.256vw;
    line-height: 6.512vw;
  }

  .premium-accounts-page .container {
    margin: 18.605vw auto;
    max-width: 90%;
  }

  .premium-accounts-page .container .account-switches {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .premium-accounts-page .container .account-switches .btn {
    padding: 2.326vw;
    border-radius: 1.86vw;
  }

  .premium-accounts-page .container .account-switches .btn:first-child {
    margin-right: 2.326vw;
  }

  .premium-accounts-page .container .account-switches .btn i {
    font-size: 3.256vw;
    margin-right: 1.395vw;
  }

  .premium-accounts-page .container .nav-tabs {
    gap: 3.488vw;
    margin: 9.302vw 0;
  }

  .premium-accounts-page .container .nav-tabs a {
    font-size: 4.651vw;
    padding: 2.326vw 6.977vw;
    border-radius: 2.326vw;
  }

  .premium-accounts-page .container .accounts-grid {
    gap: 4.651vw;
    grid-template-columns: repeat(1, 1fr);
  }

  .premium-accounts-page .container .accounts-grid .account {
    padding: 6.977vw;
    border-radius: 3.488vw;
  }

  .premium-accounts-page .container .accounts-grid .account::after {
    padding: 0.465vw;
  }

  .premium-accounts-page .container .accounts-grid .account .head .image-wrapper {
    margin: 0 auto 4.651vw;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
  }

  .premium-accounts-page .container .accounts-grid .account .head .image-wrapper img {
    width: 23.256vw;
    height: auto;
  }

  .premium-accounts-page .container .accounts-grid .account .head h4 {
    font-size: 6.047vw;
  }

  .premium-accounts-page .container .accounts-grid .account ul {
    margin: 4.651vw 0;
  }

  .premium-accounts-page .container .accounts-grid .account ul li {
    font-size: 4.186vw;
    margin-bottom: 2.326vw;
    background: url('../images/jobs/check.svg') no-repeat left center;
    background-size: 5.581vw 5.581vw;
    padding-left: 8.14vw;
  }

  .premium-accounts-page .container .accounts-grid .account .foot .price {
    font-size: 8.372vw;
  }

  .premium-accounts-page .container .accounts-grid .account .foot .sold {
    padding: 2.326vw 4.651vw;
    font-size: 4.186vw;
    border-radius: 2.326vw;
  }

  .premium-accounts-page .container .accounts-grid .account .foot .buy-now {
    padding: 2.326vw 4.651vw;
    font-size: 4.186vw;
    border-radius: 2.326vw;
  }

  .premium-accounts-page .container .seo-content {
    gap: 6.977vw;
  }

  .premium-accounts-page .container .seo-content h4 {
    font-size: 6.977vw;
    margin-bottom: 6.977vw;
  }

  .premium-accounts-page .container .seo-content p {
    font-size: 3.721vw;
    line-height: 6.977vw;
    margin-bottom: 2.326vw;
  }

  .premium-accounts-page .sec-faqs {
    padding: 11.364vw 6.818vw 0;
  }

  .premium-accounts-page .sec-faqs .top {
    gap: 1.136vw;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-bottom: 9.091vw;
  }

  .premium-accounts-page .sec-faqs .top h4 {
    font-size: 5.909vw;
    line-height: 9.091vw;
  }

  .ranked-accounts-page header {
    display: block;
    min-height: 0;
    height: auto;
    background: none !important;
    text-align: center;
  }

  .ranked-accounts-page header .content {
    margin: 0;
    padding: 20px 16px 16px;
    max-width: 100%;
    text-align: center;
  }

  .ranked-accounts-page header h1 {
    font-size: 6.953vw;
    line-height: 10.605vw;
    margin-bottom: 4.651vw;
  }

  .ranked-accounts-page header p {
    font-size: 3.256vw;
    line-height: 6.512vw;
  }

  .ranked-accounts-page .container {
    margin: 18.605vw auto;
    max-width: 90%;
  }

  .ranked-accounts-page .container .account-switches {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 9.302vw;
  }

  .ranked-accounts-page .container .account-switches .btn {
    padding: 2.326vw;
    border-radius: 1.86vw;
  }

  .ranked-accounts-page .container .account-switches .btn:first-child {
    margin-right: 2.326vw;
  }

  .ranked-accounts-page .container .account-switches .btn i {
    font-size: 3.256vw;
    margin-right: 1.395vw;
  }

  .ranked-accounts-page .container .nav-tabs {
    gap: 3.488vw;
    margin: 9.302vw 0;
  }

  .ranked-accounts-page .container .nav-tabs a {
    font-size: 4.651vw;
    padding: 2.326vw 6.977vw;
    border-radius: 2.326vw;
  }

  .ranked-accounts-page .container .filter-box {
    border: 0.465vw solid rgba(114, 110, 142, 0.1);
    border-radius: 5.116vw;
    padding: 4.651vw;
    margin-bottom: 6.977vw;
  }

  .ranked-accounts-page .container .filter-box .head {
    padding: 0 0 3.256vw;
    border-bottom: 0.698vw solid rgba(114, 110, 142, 0.1);
  }

  .ranked-accounts-page .container .filter-box .head h2 {
    font-size: 3.256vw;
    font-weight: 600;
  }

  .ranked-accounts-page .container .filter-box .head button {
    padding: 2.326vw 5.349vw;
    font-size: 2.326vw;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 11.628vw;
  }

  .ranked-accounts-page .container .filter-box .bottom {
    gap: 3.256vw;
    margin: 4.651vw 0 0;
  }

  .ranked-accounts-page .container .filter-box .bottom .form-group {
    min-width: 46.512vw;
  }

  .ranked-accounts-page .container .filter-box .bottom .form-group input {
    height: 13.953vw;
  }

  .ranked-accounts-page .container .filter-box .bottom .form-group .select2-container {
    width: 100% !important;
  }

  .ranked-accounts-page .container .filter-box .bottom .icon-group {
    position: relative;
  }

  .ranked-accounts-page .container .filter-box .bottom .icon-group i {
    font-size: 4.651vw;
    position: absolute;
    top: 50%;
    left: 4.651vw;
    transform: translateY(-50%);
    z-index: 1;
  }

  .ranked-accounts-page .container .filter-box .bottom .icon-group input {
    padding-left: 12.791vw;
  }

  .ranked-accounts-page .container .filter-box .bottom .icon-group .select2-selection {
    padding-left: 12.791vw;
  }

  .ranked-accounts-page .container .accounts-grid {
    gap: 4.651vw;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

  .ranked-accounts-page .container .accounts-grid .account-card {
    border-radius: 5.116vw;
    border: 0.698vw solid rgba(114, 110, 142, 0.1);
    overflow: hidden;
    background-color: #0a0a18;
    padding: 6.977vw;
    position: relative;
  }

  .ranked-accounts-page .container .accounts-grid .account-card .title {
    font-size: 4.186vw;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 2.326vw;
  }

  .ranked-accounts-page .container .accounts-grid .account-card .title img {
    width: auto;
    height: 9.302vw;
  }

  .ranked-accounts-page .container .accounts-grid .account-card .excerpt {
    margin: 3.488vw 0 2.326vw;
    font-size: 3.256vw;
    color: #726e8e;
  }

  .ranked-accounts-page .container .accounts-grid .account-card .image-box {
    position: relative;
    margin: 4.651vw 0;
  }

  .ranked-accounts-page .container .accounts-grid .account-card .image-box img {
    max-height: 58.14vw;
    -o-object-fit: cover;
    object-fit: cover;
    margin: 0 auto;
  }

  .ranked-accounts-page .container .accounts-grid .account-card .image-box .badge {
    position: absolute;
    right: 3.488vw;
    bottom: 3.488vw;
    border-radius: 1.163vw;
    padding: 1.163vw 2.326vw;
    gap: 1.86vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ranked-accounts-page .container .accounts-grid .account-card .highlights {
    gap: 2.326vw;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 4.651vw;
  }

  .ranked-accounts-page .container .accounts-grid .account-card .highlights .badge {
    font-size: 3.256vw;
    background-color: #6366f1;
    color: #fff;
    gap: 1.86vw;
    display: inline-flex;
    align-items: center;
    border-radius: 1.163vw;
    padding: 1.163vw 2.326vw;
  }

  .ranked-accounts-page .container .accounts-grid .account-card .totals {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .ranked-accounts-page .container .accounts-grid .account-card .totals .price-eur {
    font-size: 6.512vw;
    font-weight: 800;
    color: #fff;
  }

  .ranked-accounts-page .container .accounts-grid .account-card .totals .btn {
    padding: 2.326vw 4.651vw;
    font-size: 3.721vw;
  }

  .ranked-accounts-page .container .accounts-grid .account-card .delivery-type {
    font-size: 4.651vw;
    position: absolute;
    top: 6.977vw;
    right: 6.977vw;
  }

/* Shop pagination (Ranked Accounts) */
.ranked-accounts-page #shopPagination{
  display:flex;
  justify-content:center;
  margin-top: 6.977vw;
}

.ranked-accounts-page #shopPagination .page-bar{
  display:flex;
  gap: 2.326vw;
  flex-wrap: wrap;
  justify-content:center;
}

.ranked-accounts-page #shopPagination .page-btn{
  min-width: 11.628vw;
  height: 11.628vw;
  padding: 0 3.488vw;
  border-radius: 3.256vw;
  font-size: 4vw;
  font-weight: 600;
  border: 0.698vw solid rgba(114, 110, 142, 0.25);
  background: rgba(255,255,255,.06);
  color: #fff;
}

.ranked-accounts-page #shopPagination .page-btn.active,
.ranked-accounts-page #shopPagination .page-btn.is-active{
  background-color: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

.ranked-accounts-page #shopPagination .page-btn.disabled,
.ranked-accounts-page #shopPagination .page-btn:disabled,
.ranked-accounts-page #shopPagination .page-btn.is-disabled{
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

.ranked-accounts-page #shopPagination .page-btn.is-nav{
  color: rgba(255,255,255,0.6);
}

.ranked-accounts-page #shopPagination .page-ellipsis{
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.35);
}

  .view-account-page header {
    display: block;
    min-height: clamp(320px, 75vw, 480px);
    text-align: center;
    background:
      radial-gradient(ellipse 100% 40% at 50% 0%, rgba(99,102,241,0.2) 0%, transparent 60%),
      radial-gradient(ellipse 60% 30% at 10% 20%, rgba(59,184,255,0.1) 0%, transparent 50%),
      radial-gradient(ellipse 60% 30% at 90% 20%, rgba(168,139,250,0.1) 0%, transparent 50%),
      linear-gradient(180deg, #0e0c22 0%, #0a0818 100%);
    position: relative;
    overflow: hidden;
  }
  .view-account-page header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
  }
  .view-account-page header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
  }

  .view-account-page header .content {
    margin: 0;
    padding: 23.256vw 5.814vw 0;
    max-width: 100%;
  }

  .view-account-page header h1 {
    font-size: 6.953vw;
    line-height: 10.605vw;
    margin-bottom: 4.651vw;
  }

  .view-account-page header p {
    font-size: 3.256vw;
    line-height: 6.512vw;
  }

  .view-account-page .container {
    margin: 18.605vw auto 0;
    max-width: 90%;
  }

  .view-account-page .title {
    gap: 4.651vw;
    display: flex;
    align-items: flex-start;
    font-size: 4.651vw;
  }

  .view-account-page .title .rank-icon {
    background-color: #0a0a18;
    padding: 4.651vw;
    border-radius: 2.326vw;
    flex-shrink: 0;
  }

  .view-account-page .title .rank-icon img {
    width: auto;
    height: 11.628vw;
  }

  .view-account-page .highlights {
    gap: 3.256vw;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin: 4.651vw 0 6.977vw;
  }

  .view-account-page .highlights .badge {
    font-size: 3.256vw;
    background-color: rgba(99, 102, 241, 0.3);
    border: 0.233vw solid #6366f1;
    color: #fff;
    gap: 1.86vw;
    display: inline-flex;
    align-items: center;
    border-radius: 11.628vw;
    padding: 2.326vw 3.488vw;
  }

  .view-account-page .layout {
    gap: 0;
    display: flex;
    flex-direction: column;
  }

  .view-account-page .layout .right {
    max-width: 100%;
  }

  .view-account-page .card {
    border-radius: 5.116vw;
    background-color: rgba(255,255,255,.06);
    border: 0.465vw solid rgba(114, 110, 142, 0.3);
    margin-bottom: 6.977vw;
  }

  .view-account-page .card .card-header {
    padding: 4.651vw;
    border-bottom: 0.465vw solid rgba(114, 110, 142, 0.3);
  }

  .view-account-page .card .card-header h4 {
    font-size: 5.581vw;
    font-weight: 500;
    padding: 2.326vw;
  }

  .view-account-page .card .card-header h4 i {
    color: #6366f1;
    margin-right: 2.326vw;
  }

  .view-account-page .card .card-header .nav-tabs {
    gap: 3.488vw;
    display: flex;
    align-items: center;
  }

  .view-account-page .card .card-header .nav-tabs a {
    font-size: 3.721vw;
    padding: 2.326vw 4.651vw;
    border-radius: 2.326vw;
    text-decoration: none;
    color: #fff;
    background-color: rgba(114, 110, 142, 0.3);
    gap: 1.163vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .view-account-page .card .card-header .nav-tabs a.active {
    background-color: rgba(99, 102, 241, 0.3);
  }

  .view-account-page .card .card-header .nav-tabs a i {
    margin-right: 0;
  }

  .view-account-page .card .card-header .nav-tabs .count-badge {
    font-size: 3.256vw;
    background-color: hsla(0, 0%, 100%, 0.2);
    border-radius: 1.86vw;
    padding: 1.163vw 2.791vw;
    margin-left: 0;
  }

  .view-account-page .card .card-header.gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .view-account-page .card .card-header.gallery-header .btn {
    padding: 3.488vw 4.651vw;
    font-size: 3.721vw;
    border-radius: 2.326vw;
    background-color: #6366f1;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
  }

  .view-account-page .card .card-header.gallery-header .btn i {
    margin-left: 0;
  }

  .view-account-page .card .card-body {
    padding: 6.977vw;
  }

  .view-account-page .description {
    font-size: 3.721vw;
    line-height: 5.581vw;
    margin-bottom: 0;
  }

  .view-account-page .features {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

  .view-account-page .features .feature {
    padding-top: 6.977vw;
    margin-bottom: 0;
    border-top: none;
  }

  .view-account-page .features .feature:nth-child(3n + 1) {
    margin-top: 6.977vw;
    border-top: 0.233vw solid rgba(114, 110, 142, 0.4);
  }

  .view-account-page .features .feature:nth-last-child(-n + 3) {
    margin-bottom: 0;
  }

  .view-account-page .features .feature h6 {
    font-size: 4.186vw;
    font-weight: 700;
    margin-bottom: 2.326vw;
  }

  .view-account-page .features .feature span {
    gap: 2.326vw;
    display: flex;
    align-items: center;
    font-size: 4.186vw;
    color: #726e8e;
  }

  .view-account-page .features .feature span img {
    width: auto;
    height: 8.14vw;
  }

  .view-account-page .features .feature span i {
    font-size: 4.651vw;
    color: #6366f1;
  }

  .view-account-page .champs {
    gap: 4.651vw;
    display: flex;
    flex-wrap: wrap;
    max-height: 104.651vw;
    overflow-y: auto;
  }

  .view-account-page .champs img {
    width: auto;
    height: 10vw;
    aspect-ratio: 1/1;
  }

  .view-account-page .champs small {
    font-size: 3.256vw;
    margin-top: 2.326vw;
  }

  .view-account-page .skins {
    gap: 4.651vw;
    display: flex;
    flex-wrap: wrap;
    max-height: 104.651vw;
    overflow-y: auto;
  }

  .view-account-page .skins img {
    width: 20vw;
    height: auto;
  }

  .view-account-page .roles {
    gap: 4.651vw;
    display: flex;
    flex-wrap: wrap;
  }

  .view-account-page .roles img {
    width: auto;
    height: 10vw;
  }

  .view-account-page .roles small {
    font-size: 3.256vw;
    margin-top: 2.326vw;
    text-align: center;
    width: 100%;
    display: block;
  }

  .view-account-page .tagline {
    font-size: 4.186vw;
    font-weight: 500;
    font-style: italic;
    margin-bottom: 6.977vw;
  }

  .view-account-page ul.checkout-features {
    list-style: none;
    padding-left: 0;
  }

  .view-account-page ul.checkout-features li {
    font-size: 3.721vw;
    line-height: 5.581vw;
    color: #726e8e;
    margin-bottom: 2.326vw;
  }

  .view-account-page ul.checkout-features li i {
    color: #6366f1;
    margin-right: 2.326vw;
    font-size: 4.186vw;
  }

  .view-account-page .totals {
    margin-top: 6.977vw;
  }

  .view-account-page .totals .price {
    font-size: 7.442vw;
    font-weight: 800;
    color: #fff;
  }

  .view-account-page .totals .btn {
    padding: 3.488vw 6.977vw;
    font-size: 4.186vw;
    border-radius: 11.628vw;
    background-color: #6366f1;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    display: block;
    margin-top: 4.651vw;
  }

  .view-account-page .totals .btn i {
    font-size: 4.651vw;
    margin-right: 2.326vw;
  }

  .view-account-page .gallery img {
    width: auto;
    max-height: 69.767vw;
    border-radius: 2.326vw;
    margin: 0 auto;
  }

  .view-account-page .trusted-badges {
    margin-top: 4.651vw;
    gap: 3.488vw;
  }

  .view-account-page .trusted-badge {
    gap: 3.488vw;
    padding: 4.186vw 4.651vw;
    border-radius: 4.651vw;
  }

  .view-account-page .trusted-badge i {
    font-size: 5.116vw;
  }

  .view-account-page .trusted-badge .label {
    font-size: 3.721vw;
  }

  .view-account-page .trusted-badge .sub {
    font-size: 3.256vw;
  }

  .view-account-page .trusted-badge .stars i {
    font-size: 3.256vw;
    margin-right: 0.7vw;
  }

  .view-account-page .trusted-badge .rating {
    margin-left: 1.163vw;
  }

  .view-account-page .gallery-mobile {
    display: block;
  }

  .view-account-page .gallery-desktop {
    display: none;
  }

  .view-account-page .sticky-button {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999999999;
    display: block;
    padding: 10px;
    border-top: 0.465vw solid #6366f1;
    background-color: #110f1f;
  }

  .view-account-page .sticky-button .btn {
    padding: 3.488vw 6.977vw;
    font-size: 4.186vw;
    border-radius: 1.628vw;
    background-color: #6366f1;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    display: block;
    margin: 0;
    text-align: center;
  }

  .view-account-page .sticky-button .btn i {
    font-size: 4.651vw;
    margin-right: 2.326vw;
  }

  .loyalty-page header {
    display: block;
    min-height: clamp(320px, 75vw, 480px);
    text-align: center;
    background:
      radial-gradient(ellipse 100% 40% at 50% 0%, rgba(99,102,241,0.22) 0%, transparent 60%),
      radial-gradient(ellipse 60% 30% at 10% 20%, rgba(59,184,255,0.1) 0%, transparent 50%),
      radial-gradient(ellipse 60% 30% at 90% 20%, rgba(245,193,76,0.08) 0%, transparent 50%),
      linear-gradient(180deg, #0e0c22 0%, #0a0818 100%);
    position: relative;
    overflow: hidden;
  }
  .loyalty-page header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
  }
  .loyalty-page header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
  }

  .loyalty-page header .content {
    margin: 0;
    padding: var(--lb-content-top, 80px) 5.814vw 0;
    max-width: 100%;
  }

  .loyalty-page header h1 {
    font-size: 10.233vw;
    line-height: 13.953vw;
    margin-bottom: 4.651vw;
  }

  .loyalty-page header p {
    font-size: 3.256vw;
    line-height: 6.512vw;
    max-width: 100%;
  }

  .loyalty-page .loyalty-slider {
    margin: 9.302vw auto;
    gap: 2.326vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .loyalty-page .loyalty-slider .loyalty-slide {
    position: relative;
    margin-right: 3.488vw;
  }

  .loyalty-page .loyalty-slider .loyalty-slide .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    gap: 4.651vw;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
  }

  .loyalty-page .loyalty-slider .loyalty-slide .overlay p {
    gap: 2.326vw;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 4.651vw;
  }

  .loyalty-page .loyalty-slider .loyalty-slide .overlay .spent {
    background-color: #7a959c;
    color: #fff;
    font-size: 3.721vw;
    padding: 2.326vw 4.651vw;
    border-radius: 4.651vw;
    font-weight: 600;
    margin-bottom: 4.651vw;
  }

  .loyalty-page .loyalty-slider .bg-image {
    width: auto;
    height: 116.279vw;
  }

  .loyalty-page .container {
    margin: 14.326vw auto 0;
    max-width: 90%;
  }

  .loyalty-page .container h1 {
    font-size: 6.688vw;
    line-height: 8.25vw;
    margin-bottom: 3.604vw;
    text-align: center;
    color: #6366f1;
  }

  .loyalty-page .container h4 {
    font-size: 4.604vw;
    margin-bottom: 2.604vw;
    text-align: center;
  }

  .loyalty-page .container h6 {
    font-size: 3.562vw;
    margin-bottom: 2.604vw;
    text-align: center;
  }

  .loyalty-page .table-responsive {
    overflow-x: auto;
  }

  .loyalty-page .loyalty-table {
    font-size: 3.488vw;
    background-color: #0a0a18;
    border-radius: 4.651vw;
    overflow: hidden;
    border: 0.233vw solid #18162b;
    margin: 9.302vw auto;
  }

  .loyalty-page .loyalty-table th,
  .loyalty-page .loyalty-table td {
    border-bottom: 0.465vw solid rgba(114, 110, 142, 0.2);
  }

  .loyalty-page .loyalty-table th {
    font-weight: 600;
    padding: 4.186vw 6.512vw !important;
  }

  .loyalty-page .loyalty-table th div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .loyalty-page .loyalty-table th div h5 {
    font-size: 3.953vw;
    margin: 0;
  }

  .loyalty-page .loyalty-table th div img {
    max-width: 100%;
    width: auto;
    height: 9.302vw;
  }

  .loyalty-page .loyalty-table th:nth-child(2) div img {
    width: 4.186vw;
  }

  .loyalty-page .loyalty-table th:nth-child(1) div {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .loyalty-page .loyalty-table th div h5 {
    margin-top: 1.86vw;
  }

  .loyalty-page .loyalty-table tbody tr td {
    font-weight: 600;
    padding: 4.186vw 6.512vw !important;
    vertical-align: middle;
    text-align: center;
  }

  .loyalty-page .loyalty-table tbody tr td:nth-child(1) div {
    justify-content: flex-start;
  }

  .loyalty-page .loyalty-table tbody tr td:nth-child(1) div img {
    width: 8.372vw;
    display: block;
    margin-right: 1.86vw;
  }

  .loyalty-page .loyalty-table tbody tr td div {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .loyalty-page .loyalty-table tbody tr td h5 {
    margin: 0;
    font-size: 3.721vw;
    font-weight: 500;
    text-align: center;
  }

  .loyalty-page .loyalty-table tbody tr td:nth-child(1) div i {
    font-size: 5.116vw;
    width: 7.442vw;
    margin-right: 1.86vw;
  }

  .loyalty-page .loyalty-table .text-primary {
    color: #6366f1;
  }

  .loyalty-page .loyalty-table .text-danger {
    color: #ff4d4d;
  }

  .loyalty-page .sec-points-store {
    padding: 13.636vw;
    text-align: center;
    background: url('../images/get-started-2-mobile.webp');
    background-size: cover;
    background-repeat: no-repeat;
  }

  .loyalty-page .sec-points-store h2 {
    font-size: 7.273vw;
    line-height: 9.318vw;
    margin-bottom: 2.273vw;
  }

  .loyalty-page .sec-points-store p {
    font-size: 3.182vw;
    line-height: 5.909vw;
    color: #fff;
    margin-bottom: 6.818vw;
  }

  .loyalty-page .sec-points-store p br {
    display: none;
  }

  .loyalty-page .sec-points-store p small {
    display: block;
    margin-top: 2.273vw;
    font-size: 2.727vw;
  }

  .loyalty-page .sec-points-store .btn {
    padding: 2.273vw 6.364vw;
  }

  .loyalty-page .sec-faqs {
    padding: 11.364vw 6.818vw 0;
  }

  .loyalty-page .sec-faqs .top {
    gap: 1.136vw;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-bottom: 9.091vw;
  }

  .loyalty-page .sec-faqs .top h4 {
    font-size: 5.909vw;
    line-height: 9.091vw;
  }

  .loyalty-page .sec-faqs .top .nav-tabs {
    gap: 3.488vw;
    margin: 6.512vw 0 0;
    flex-wrap: wrap;
  }

  .loyalty-page .sec-faqs .top .nav-tabs a {
    font-size: 4.651vw;
    padding: 2.326vw 6.977vw;
    border-radius: 2.326vw;
  }

  .loyalty-page .sec-faqs .top .nav-tabs a i {
    font-size: 4.256vw;
    margin-right: 1.163vw;
  }

  .loyalty-page .sec-faqs .top .nav-tabs a img {
    width: auto;
    height: 6.512vw;
    margin-right: 1.163vw;
  }

  .points-store header {
    display: block;
    min-height: clamp(320px, 75vw, 480px);
    text-align: center;
    background:
      radial-gradient(ellipse 100% 40% at 50% 0%, rgba(245,193,76,0.18) 0%, transparent 60%),
      radial-gradient(ellipse 60% 30% at 10% 20%, rgba(99,102,241,0.1) 0%, transparent 50%),
      radial-gradient(ellipse 60% 30% at 90% 20%, rgba(255,154,59,0.1) 0%, transparent 50%),
      linear-gradient(180deg, #0e0c22 0%, #0a0818 100%);
    position: relative;
    overflow: hidden;
  }
  .points-store header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
  }
  .points-store header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
  }

  .points-store header .content {
    margin: 0;
    padding: 23.256vw 5.814vw 0;
    max-width: 100%;
  }

  .points-store header h1 {
    font-size: 10.233vw;
    line-height: 13.953vw;
    margin-bottom: 4.651vw;
  }

  .points-store header p {
    font-size: 3.256vw;
    line-height: 6.512vw;
    max-width: 100%;
  }

  .points-store .container {
    margin: 14.326vw auto;
    max-width: 90%;
  }

  .points-store .items {
    gap: 6.977vw;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

  .points-store .items .item {
    background-color: #0a0a18;
    border-radius: 5.116vw;
    overflow: hidden;
    border: 0.465vw solid rgba(114, 110, 142, 0.2);
    padding: 4.651vw;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .points-store .items .item .prize-image {
    width: 100%;
    height: auto;
    margin-bottom: 4.651vw;
  }

  .points-store .items .item .title {
    font-size: 4.186vw;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .points-store .items .item .title .price {
    gap: 2.326vw;
    display: flex;
    align-items: center;
    font-size: 3.721vw;
  }

  .points-store .items .item .title .price img {
    width: auto;
    height: 4.651vw;
  }

  .points-store .items .item .description {
    font-size: 3.721vw;
    line-height: 1.5;
    color: #726e8e;
    margin: 4.651vw 0;
    flex-grow: 1;
  }

  .points-store .items .item button {
    padding: 3.488vw 6.977vw;
    font-size: 4.186vw;
    border-radius: 3.256vw;
    background-color: #6366f1;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    display: block;
    text-align: center;
    margin-top: auto;
  }

  .points-store .items .item button:hover {
    background-color: rgb(52.2, 56.1, 236.8);
  }

  .lol-boost .rank-types-nav,
  .lol-boost .form-content .boost-form,
  .boosters-view .main-content {
    zoom: 1;
  }


/* Mobile: bigger Jinx */
body.landing header .jinx {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    width: 180vw !important;
    max-width: 1000px !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
}

@media (max-width: 420px) {
  .rank-types-nav .nav-item .lb-hot-badge {
    top: 8px !important;
    right: 10px !important;
    font-size: 9px !important;
    padding: 3px 7px !important;
  }
}

@media (max-width: 768px) {
  .boosters-view .main-content .details .bottom .nav-tabs {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    gap: 10px !important;

    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;

    padding: 10px 12px !important;
  }

  .boosters-view .main-content .details .bottom .nav-tabs::-webkit-scrollbar {
    height: 0 !important;
  }
  .boosters-view .main-content .details .bottom .nav-tabs {
    scrollbar-width: none !important;
  }

  .boosters-view .main-content .details .bottom .nav-tabs a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;

    padding: 10px 14px !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 768px) {
  .boosters-view .booster-orders .order-card .icon,
  .boosters-view .main-content .details .bottom .features .recent-orders .order-item .title .icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 18px !important;
  }

  .boosters-view .booster-orders .order-card .icon img,
  .boosters-view .main-content .details .bottom .features .recent-orders .order-item .title .icon img {
    width: 32px !important;
    height: 32px !important;
  }

  .boosters-view .booster-orders .order-card .icon i,
  .boosters-view .main-content .details .bottom .features .recent-orders .order-item .title .icon i {
    font-size: 44px !important;
  }
}

@media (max-width: 768px) {
  .boosters-view .review-tags span {
    font-size: 13px !important;
  }
}

@media (max-width: 991px){
  #champions_select + .select2 .select2-selection--multiple{
    max-height: 6rem; /* ~96px */
  }

  .select2-container--open .select2-search--dropdown .select2-search__field{
    font-size: 1rem; /* avoids iOS zoom */
  }
}

@media (max-width: 991px){
  .boosters-list #filterServers + .select2 .select2-selection--multiple,
  .boosters-list #filterChampions + .select2 .select2-selection--multiple,
  .boosters-list #filterLanguages + .select2 .select2-selection--multiple,
  .boosters-list .filterRole + .select2 .select2-selection--multiple{
    max-height: 6.5rem;
  }

  .boosters-list #filterChampions + .select2 .select2-selection--multiple{
    max-height: 8rem;
  }
}


/* --- Mobile: disable global zoom scaling (keep original mobile layout) --- */
@media (max-width: 768px){
  html, body { zoom: 1 !important; }
  body.landing { zoom: 1 !important; }
}


/* --- Mobile tweak: make Jinx bigger (desktop unchanged) --- */
@media only screen and (max-width: 767px) {
  .landing header .jinx {
    display: none !important;
  }
  .landing header .jinx-mobile {
    display: block !important;
    width: 120% !important;
    max-width: none !important;
    height: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: -4vw !important;
    pointer-events: none !important;
  }
}


/* =========================================================
   Booster Cards – UI Improvements (bigger elements + flags)
   (Overrides – appended so it wins)
   ========================================================= */

.boosters-list .boosters .booster-card{
  padding: 2.604vw;                 /* was 2.083vw */
  border-radius: 2.865vw;
}

/* Bigger cover + avatar */
.boosters-list .boosters .booster-card .cover{
  height: 14vw;                   /* was 12vw */
  margin: -2.604vw -2.604vw 0 -2.604vw;

}

.boosters-list .boosters .booster-card .avatar{
  width: 9.115vw;                   /* was 8.333vw */
  height: 9.115vw;
  top: 5.35vw;                      /* adjust for taller cover */
  left: 2.604vw;
  border-width: 0.234vw;
}


/* Name */
.boosters-list .boosters .booster-card .details .top h5{
  font-size: 1.6vw;
  margin-bottom: 0.417vw;
  margin-top: 1.5vw;
}

.boosters-list .boosters .booster-card .details .top h5 .name-text{
  font-size: inherit;
}

/* Role buttons a touch bigger */
.boosters-list .boosters .booster-card .details .middle .roles button,
.boosters-list .boosters .booster-card .details .middle .roles a{
  width: 2.95vw;
  height: 2.95vw;
  border-radius: 0.65vw;
}

.boosters-list .boosters .booster-card .details .middle .roles button svg,
.boosters-list .boosters .booster-card .details .middle .roles a svg{
  width: 1.46vw;
  height: 1.46vw;
}

/* Champions row slightly bigger */
.boosters-list .boosters .booster-card .details .bottom .champions img{
  width: 1.98vw;
  height: 1.98vw;
  border-radius: 0.52vw;
}

.boosters-list .boosters .booster-card .details .bottom .champions .more{
  width: 2.08vw;
  height: 2.08vw;
  font-size: 0.78vw;
  border-radius: 0.6vw;
}

/* Rating bigger & more like a premium pill */
.boosters-list .boosters .booster-card .details .bottom .rating-badge{
  width: auto;                      /* was fixed width */
  height: 2.08vw;                   /* was 1.563vw */
  padding: 0 0.78vw;
  border-radius: 0.78vw;
  font-size: 1.5vw;                /* was 0.625vw */
  font-weight: 700;
  gap: 0.42vw;
  box-shadow: 0 0.52vw 1.56vw rgba(0,0,0,0.25);
  border: 0.13vw solid rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
}

.boosters-list .boosters .booster-card .details .bottom .rating-badge i,
.boosters-list .boosters .booster-card .details .bottom .rating-badge svg{
  font-size: 0.94vw;
}

/* Language flags – look like champion pills with a border */
.boosters-list .boosters .booster-card .details .bottom .languages{
  display: inline-flex;
  align-items: center;
  gap: 0.42vw;
}

.boosters-list .boosters .booster-card .details .bottom .languages img,
.boosters-list .boosters .booster-card .details .bottom .languages .flag{
  width: 1.98vw;
  height: 1.98vw;
  border-radius: 0.52vw;
  border: 0.13vw solid rgba(255,255,255,0.10);
  background: rgba(10,10,24,0.45);
  box-shadow: 0 0.52vw 1.56vw rgba(0,0,0,0.22);
  object-fit: cover;
  display: inline-block;
}

/* If you render emoji flags as <span class="flag">🇬🇧</span> */
.boosters-list .boosters .booster-card .details .bottom .languages .flag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05vw;
  line-height: 1;
}

/* Slightly more spacing for the bottom row */
.boosters-list .boosters .booster-card .details .bottom{
  margin-top: 1.25vw;
}

/* =========================================================
   BOOSTER CARDS – Unified UI (clean + premium)
   ========================================================= */

/* Online dot + badge (moved from PHP inline styles) */
.booster-card .avatar{ position: relative; }
.booster-online-dot{
  position:absolute;
  right: 6px;
  bottom: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,.22); /* offline default */
  box-shadow:
    0 0 0 2px rgba(10,12,20,.85),
    0 0 0 0 rgba(53,208,127,.0);
}
.booster-online-dot.online{
  background: #35d07f;
  box-shadow:
    0 0 0 2px rgba(10,12,20,.85),
    0 0 0 0 rgba(53,208,127,.55);
  animation: boosterOnlinePulse 1.6s ease-out infinite;
}
@keyframes boosterOnlinePulse{
  0%   { box-shadow: 0 0 0 2px rgba(10,12,20,.85), 0 0 0 0 rgba(53,208,127,.55); }
  70%  { box-shadow: 0 0 0 2px rgba(10,12,20,.85), 0 0 0 10px rgba(53,208,127,0); }
  100% { box-shadow: 0 0 0 2px rgba(10,12,20,.85), 0 0 0 0 rgba(53,208,127,0); }
}
.booster-online-badge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 1vw;
  font-weight: 600;
  line-height: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(229,231,235,.92);
}
.booster-online-badge .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  box-shadow: 0 0 0 2px rgba(10,12,20,.65);
}
.booster-online-badge.online{
  background: rgba(53,208,127,.12);
  border-color: rgba(53,208,127,.22);
  color: rgba(205,255,226,.95);
}
.booster-online-badge.online .dot{ background:#35d07f; }

/* ================================
   ONLINE/OFFLINE DOT: FINAL OVERRIDE
   (ganz ans ENDE der CSS)
   ================================ */

/* 1) Card darf NICHT clippen (sonst wird Dot abgeschnitten) */
.boosters-list .boosters .booster-card{
  overflow: visible !important; /* schlägt alle overflow:hidden Blöcke */
  position: relative;
}

/* 2) Cover soll weiterhin clippen (runde Ecken fürs Banner) */
.boosters-list .boosters .booster-card .cover{
  overflow: hidden !important;
}

/* 3) Avatar darf NICHT clippen, sonst kann der Dot abgeschnitten werden */
.boosters-list .boosters .booster-card .avatar{
  overflow: visible !important;
  position: absolute; /* ist bei dir schon so */
  z-index: 1000 !important; /* über Cover/Content/Overlays */
}

/* Avatar-Bild bleibt trotzdem rund */
.boosters-list .boosters .booster-card .avatar img{
  border-radius: 50%;
  display: block;
}

/* 4) Dot immer ganz oben */
.boosters-list .boosters .booster-card .booster-online-dot{
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2000 !important;
  pointer-events: none;
}


/* Make the whole card clickable (your PHP wraps it in <a class="cover-link">) */
.boosters-list a.cover-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* Card base */
.boosters-list .boosters .booster-card{
  position: relative;
  overflow: hidden;

  border-radius: clamp(18px, 1.8vw, 28px);
  background: #110f1f;
  border: 1px solid rgba(255,255,255,.08);
  transform: translateZ(0);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.boosters-list .boosters .booster-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1100px 520px at 20% 0%, rgba(99,102,241,.16), transparent 60%),
    radial-gradient(900px 420px at 80% 70%, rgba(124,58,237,.14), transparent 55%);
  opacity:.95;
}

.boosters-list a.cover-link:hover .booster-card{
  transform: translateY(-2px);
  border-color: rgba(124,58,237,.22);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

/* Keyboard focus (accessibility) */
.boosters-list a.cover-link:focus-visible .booster-card{
  outline: 2px solid rgba(99,102,241,.55);
  outline-offset: 3px;
}

/* Cover */
.boosters-list .boosters .booster-card .cover{
  position: relative;
  height: clamp(120px, 12vw, 170px);
  background-size: cover;
  background-position: center;

}

.boosters-list .boosters .booster-card .cover::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(10,12,20,.88) 88%);
}

/* Avatar overlaps cover */
.boosters-list .boosters .booster-card .avatar{
  position:absolute;
  left: clamp(14px, 1.1vw, 18px);
  top: calc(clamp(120px, 12vw, 170px) - clamp(42px, 3.2vw, 50px));

  width: clamp(84px, 6.2vw, 96px);
  height: clamp(84px, 6.2vw, 96px);
  border-radius: 999px;

  border: 3px solid rgba(10,12,20,.95);
  box-shadow: 0 18px 45px rgba(0,0,0,.55);
  z-index: 2;
}
.boosters-list .boosters .booster-card .avatar img{
  width:100%;
  height:100%;
  border-radius:999px;
  object-fit:cover;
}

/* Content */
.boosters-list .boosters .booster-card .details{
  position: relative;
  z-index: 1;

  padding: clamp(16px, 1.3vw, 18px);
  padding-top: clamp(54px, 4.2vw, 62px); /* space for avatar overlap */

  display:flex;
  flex-direction:column;
  gap: clamp(10px, 1vw, 14px);
  height: 100%;
}

/* Top row: name + rank box */
.boosters-list .boosters .booster-card .top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}

.boosters-list .boosters .booster-card h5{
  margin:0;
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: -0.4px;
  line-height: 1.05;
}

.boosters-list .boosters .booster-card .verify-icon{
  font-size: 0.9em;
  margin-left: 8px;
  opacity: .95;
  background: linear-gradient(to right, #6366f1, #8b5cf6, #d946ef);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Rank box */
.boosters-list .boosters .booster-card .rank-box{
  display:flex;
  align-items:center;
  justify-content:center;

  width: clamp(92px, 7.2vw, 120px);
  height: clamp(46px, 3.6vw, 56px);
  border-radius: clamp(14px, 1.2vw, 18px);

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.boosters-list .boosters .booster-card .rank_icon{
  width: clamp(40px, 3.2vw, 48px);
  height: clamp(40px, 3.2vw, 48px);
  object-fit: contain;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.45));
}

/* Roles */
.boosters-list .boosters .booster-card .mid{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.boosters-list .boosters .booster-card .role-icon{
  width: clamp(38px, 2.9vw, 44px);
  height: clamp(38px, 2.9vw, 44px);
  border-radius: clamp(12px, 1vw, 14px);

  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.boosters-list .boosters .booster-card .role-icon img{
  width: clamp(18px, 1.5vw, 22px);
  height: clamp(18px, 1.5vw, 22px);
  opacity: .92;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

/* Bottom row: champs | langs | rating aligned */
.boosters-list .boosters .booster-card .bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-top: 8px;
}

/* Shared chip container */
.boosters-list .boosters .booster-card .champions,
.boosters-list .boosters .booster-card .languages{
  display:flex;
  align-items:center;
  gap: 8px;

  padding: 8px 10px;
  border-radius: 16px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);

  min-height: 44px;
}

/* Champ icons */
.boosters-list .boosters .booster-card .champion-icon{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
}

/* Language flags */
.boosters-list .boosters .booster-card .lang-icon{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
  display:inline-flex;
}
.boosters-list .boosters .booster-card .lang-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* +N chips for champs/langs */
.boosters-list .boosters .booster-card .more-champions-icon,
.boosters-list .boosters .booster-card .more-lang-icon{
  position:relative;
  height: 28px;
  padding: 0 10px;
  border-radius: 12px;
  background: rgba(10,12,20,.55);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
  font-size: 12px;
  font-weight: 800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}

/* Tooltip (shared styling) */
.boosters-list .boosters .booster-card .champs-tooltip,
.boosters-list .boosters .booster-card .langs-tooltip{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom: calc(100% + 10px);

  width: min(360px, 82vw);
  background: rgba(11,14,19,0.92);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 12px;

  box-shadow: 0 22px 70px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.boosters-list .boosters .booster-card .more-champions-icon:hover .champs-tooltip,
.boosters-list .boosters .booster-card .more-champions-icon:focus .champs-tooltip,
.boosters-list .boosters .booster-card .more-lang-icon:hover .langs-tooltip,
.boosters-list .boosters .booster-card .more-lang-icon:focus .langs-tooltip{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateX(-50%) translateY(-2px);
}

.boosters-list .boosters .booster-card .champs-tooltip .tt-title,
.boosters-list .boosters .booster-card .langs-tooltip .tt-title{
  display:block;
  font-size:12px;
  font-weight:900;
  color: rgba(229,231,235,0.96);
  letter-spacing:0.2px;
  margin: 0 0 10px 0;
  text-align:left;
}

.boosters-list .boosters .booster-card .champs-tooltip .tt-list,
.boosters-list .boosters .booster-card .langs-tooltip .tt-list{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  max-height: 180px;
  overflow:auto;
  padding-right: 4px;
}

.boosters-list .boosters .booster-card .champs-tooltip .tt-item,
.boosters-list .boosters .booster-card .langs-tooltip .tt-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.boosters-list .boosters .booster-card .champs-tooltip .tt-item img,
.boosters-list .boosters .booster-card .langs-tooltip .tt-item img{
  width: 26px;
  height: 26px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  flex: 0 0 auto;
}

.boosters-list .boosters .booster-card .champs-tooltip .tt-item span,
.boosters-list .boosters .booster-card .langs-tooltip .tt-item span{
  font-size:12px;
  font-weight:800;
  color: rgba(203,213,225,0.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width: 0;
}

/* Rating badge (compact, aligned) */
.boosters-list .boosters .booster-card .rating-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  min-width: 76px;
  height: 44px;
  padding: 10px 12px;
  border-radius: 16px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);

  color: rgba(255,255,255,.92);
  font-size: 14px;
  font-weight: 800;
}
.boosters-list .boosters .booster-card .rating-badge img{
  width: 16px;
  height: 16px;
  filter:
    brightness(0) saturate(100%) invert(78%) sepia(68%) saturate(403%) hue-rotate(2deg) brightness(103%) contrast(103%)
    drop-shadow(0 8px 16px rgba(0,0,0,.35));
}

/* Mobile tightening */
@media (max-width: 520px){
  .boosters-list .boosters .booster-card .bottom{ gap: 10px; }
  .boosters-list .boosters .booster-card .champions,
  .boosters-list .boosters .booster-card .languages{
    padding: 7px 9px;
    min-height: 42px;
  }
}



/* =========================================================
   Mobile booster-card scale patch (keep original layout/hover)
   ========================================================= */
@media (max-width: 768px){
  /* keep 1 card per row on mobile */
  .boosters-list .boosters{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* overall spacing */
  .boosters-list .main-content{
    margin: 0 14px !important;
  }

  /* card sizing — bigger & closer to desktop proportions */
  .boosters-list .boosters .booster-card{
    padding: 22px !important;
    border-radius: 26px !important;
  }
  .boosters-list .boosters .booster-card .cover{
    height: 180px !important;
    margin: -22px -22px 0 -22px !important;
    border-radius: 26px 26px 0 0 !important;
  }

  /* text sizing */
  .boosters-list .boosters .booster-card h3{
    font-size: 26px !important;
    line-height: 1.15 !important;
  }
  .boosters-list .boosters .booster-card p,
  .boosters-list .boosters .booster-card span{
    font-size: 14px;
  }

  /* badges / pills that often look tiny on mobile */
  .boosters-list .boosters .booster-card .status,
  .boosters-list .boosters .booster-card .rank-badge,
  .boosters-list .boosters .booster-card .rating-badge{
    height: 44px !important;
    border-radius: 18px !important;
  }

  /* tooltips: no scroll, readable size */
  .tooltip{
    font-size: 13px !important;
    line-height: 1.3 !important;
    max-width: min(320px, calc(100vw - 28px)) !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  .boosters-list .boosters .booster-card .langs-tooltip,
  .boosters-list .boosters .booster-card .champs-tooltip{
    /* Tooltip muss deutlich über der Card schweben */
    z-index: 9999;
    max-height: none !important;
    overflow: visible !important;

    /* Stärkerer Kontrast zur Booster-Card */
    background: linear-gradient(180deg, rgba(16,18,26,0.98) 0%, rgba(6,8,14,0.97) 100%) !important;
    border: 1px solid rgba(129,140,248,0.9) !important; /* indigo-300 */
    box-shadow:
      0 30px 90px rgba(0,0,0,0.78),
      0 0 0 1px rgba(129,140,248,0.45),
      0 0 24px rgba(99,102,241,0.35),
      inset 0 1px 0 rgba(255,255,255,0.10) !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-radius: 14px !important;
  }

  /* keep hover rules untouched; mobile doesn't rely on hover anyway */
}


/* ==========================================================================
   Overrides (Tooltip icons only, shrink-to-fit; Language flags; Booster hover)
   Added: 2026-02-14
   ========================================================================== */

/* Champs-Tooltip: nur Icons + eigener Header */
/* (Header per ::before, damit wir den Markup-Title nicht brauchen) */
.boosters-list .boosters .booster-card .champs-tooltip .tt-title{
  display: none;
}
.boosters-list .boosters .booster-card .champs-tooltip .tt-item span{
  display: none;
}

/* Tooltip soll nur so breit sein wie der Inhalt (Icons) */
.boosters-list .boosters .booster-card .champs-tooltip{
  width: max-content;      /* shrink-to-fit */
  max-width: none;
  min-width: 0;
  display: inline-block;
  /* eigener Background + Border nur für Champion-Tooltip */
    background: #0b0f1a;
  border-color: rgba(99,102,241,0.65);
  box-shadow:
    0 22px 70px rgba(0,0,0,0.55),
    0 0 0 1px rgba(99,102,241,0.35),
    inset 0 1px 0 rgba(255,255,255,0.06);
  padding-top: 10px; /* Platz für Header */

}

/* Header im Champion-Tooltip */
.boosters-list .boosters .booster-card .champs-tooltip::before{
  content: 'Champions:';
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: rgba(229,231,235,0.96);

  /* optische Leiste */
  padding: 7px 10px;
  margin: -10px -12px 10px -12px; /* über Tooltip-Padding ziehen */
    background: linear-gradient(180deg, rgba(99,102,241,0.72) 0%, rgba(99,102,241,0.32) 100%);
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
    border-bottom: 1px solid rgba(129,140,248,0.85);
  border-radius: 14px 14px 0 0;
}

/* Icons in einer Zeile, Breite = Summe der Icons */
.boosters-list .boosters .booster-card .champs-tooltip .tt-list{
  display: grid;
  /* bis zu 5 Icons pro Zeile, danach automatisch Umbruch in Zeile 2 */
  grid-template-columns: repeat(5, max-content);
  grid-auto-flow: row;
  grid-auto-rows: max-content;

  width: max-content;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

/* Falls irgendwo ein Scroll-Wrapper existiert */
.boosters-list .boosters .booster-card .champs-tooltip .tt-scroll{
  width: max-content;
  overflow: visible;
}

/* Flags: nicht croppen (war object-fit: cover) */
.boosters-list .boosters .booster-card .lang-icon img{
  object-fit: contain;
}

/* Booster-Card Hover: Farbe ändern */
.boosters-list .boosters .booster-card{
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.boosters-list .boosters .booster-card:hover{
  border-color: #6366f1;
  box-shadow: 0 0 0 0.13vw rgba(99, 102, 241, 0.22), 0 1.2vw 2.4vw rgba(0, 0, 0, 0.35);
}
/* =========================
   Booster Cards – Overrides
   ========================= */

/* Hover border color */
.boosters-list a.cover-link{
  position: relative;
}
.boosters-list a.cover-link:hover .booster-card{
  border-color: #6366f1 !important;
  z-index: 50;
}

/* Tooltips should overlay everything (no clipping + high z-index) */
.boosters-list .boosters .booster-card{
  overflow: visible !important; /* prevent tooltip clipping */
}

/* Keep cover clipping for rounded corners */
.boosters-list .boosters .booster-card .cover{
  overflow: hidden;
}

/* Tooltip stacking */
.boosters-list .boosters .booster-card .champs-tooltip,
.boosters-list .boosters .booster-card .langs-tooltip{
  z-index: 999999 !important;
}

/* Tooltip trigger stacking */
.boosters-list .boosters .booster-card .more-champions-icon,
.boosters-list .boosters .booster-card .more-lang-icon{
  z-index: 1000000;
}
/* =========================================================
   Booster Cards Overrides (Hover border + Tooltip layering + Cover rounding + Flags)
   ========================================================= */

/* Booster Card hover: border = #6366f1 */
.boosters-list a.cover-link{
  position: relative; /* z-index works reliably */
}
.boosters-list a.cover-link:hover .booster-card{
  border-color: #6366f1 !important;
  z-index: 50; /* hovered card above neighbors */
}

/* Tooltips: prevent cropping by card and always stay on top */
.boosters-list .boosters .booster-card{
  overflow: visible !important; /* allow tooltips to escape */
}
.boosters-list .boosters .booster-card .champs-tooltip,
.boosters-list .boosters .booster-card .langs-tooltip{
  z-index: 999999 !important;
}
.boosters-list .boosters .booster-card .more-champions-icon,
.boosters-list .boosters .booster-card .more-lang-icon{
  z-index: 1000000;
}

/* Cover (banner top) rounded + clipped even when card overflow is visible */
.boosters-list .boosters .booster-card .cover{
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  overflow: hidden; /* clip banner */
}
.boosters-list .boosters .booster-card .cover img{
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Flags: don't crop (cover) — use contain so the whole flag shows */
.boosters-list .boosters .booster-card .lang-icon img{
  object-fit: contain !important;
  background: #fff;
}

/* === FIX: Flags im Kreis mittig === */
.boosters-list .boosters .booster-card .lang-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  box-sizing: border-box;
}

.boosters-list .boosters .booster-card .lang-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* === FIX: Card border should sit above cover image (no overlap) === */
.boosters-list .boosters .booster-card{
  position: relative;
}

/* Draw border as overlay so the cover can't hide it */
.boosters-list a.cover-link .booster-card::before{
  content: "";
  position: absolute;
  inset: 0;
  border: 1.8px solid rgba(155, 89, 255, 0.35); /* default border color */
  border-radius: 22px;
  pointer-events: none;
  z-index: 20;
}

/* Hover border color */
.boosters-list a.cover-link:hover .booster-card::before{
  border-color: #6366f1 !important;
}

/* Keep cover below the border overlay */
.boosters-list .boosters .booster-card .cover{
  position: relative;
  z-index: 1;
}

/* Keep card content above cover but below border overlay if needed */
.boosters-list .boosters .booster-card .content,
.boosters-list .boosters .booster-card .booster-info,
.boosters-list .boosters .booster-card .rating,
.boosters-list .boosters .booster-card .mastery{
  position: relative;
  z-index: 2;
}

/* === MOBILE TUNING === */
@media (max-width: 768px){
  /* Bigger typography on cards */
  .boosters-list .boosters .booster-card .booster-info h5{
    font-size: 22px !important;
    line-height: 1.15 !important;
  }
  .boosters-list .boosters .booster-card .booster-info h6,
  .boosters-list .boosters .booster-card .details span,
  .boosters-list .boosters .booster-card .details p{
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  /* Icons + pills slightly larger */
  .boosters-list .boosters .booster-card .details .champions .icon,
  .boosters-list .boosters .booster-card .details .bottom .languages .lang-icon{
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
  }

  /* Rating pill */
  .boosters-list .boosters .booster-card .details .rating{
    font-size: 18px !important;
    padding: 10px 14px !important;
  }
  .boosters-list .boosters .booster-card .details .rating .star-icon{
    width: 22px !important;
    height: 22px !important;
  }

  /* Remove border color on mobile (keep layout without colored outline) */
  .boosters-list a.cover-link .booster-card::before{
    border-color: transparent !important;
    box-shadow: none !important;
  }
}

/* === MOBILE CLASS (manual toggle) ===
   Add class "mobile" to <body> (or any ancestor) to activate.
   IMPORTANT: your name is in .details .top h5 (not .booster-info), so we target both.
*/
body.mobile .boosters-list .boosters .booster-card .details .top h5,
body.mobile .boosters-list .boosters .booster-card .booster-info h5{
  font-size: 6vw !important;
  line-height: 1.1 !important;
}

body.mobile .boosters-list .boosters .booster-card .details .top h6,
body.mobile .boosters-list .boosters .booster-card .booster-info h6{
  font-size: 4.2vw !important;
  line-height: 1.2 !important;
}

body.mobile .boosters-list .boosters .booster-card .details span,
body.mobile .boosters-list .boosters .booster-card .details p{
  font-size: 3.8vw !important;
  line-height: 1.25 !important;
}

/* === MOBILE OVERRIDES (final) === */
@media (max-width: 767px){
  /* Remove any colored outlines on mobile */
  .boosters-list .boosters .booster-card{
    border: none !important;
  }
  .boosters-list a.cover-link .booster-card::before{
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* Bigger text */
  .boosters-list .boosters .booster-card .details .top h5{
    font-size: 6vw !important;
    line-height: 1.1 !important;
    margin-bottom: 1vw !important;
  }
  .boosters-list .boosters .booster-card .details .top h6{
    font-size: 4vw !important;
    line-height: 1.2 !important;
  }

  /* Rank box a bit bigger */
  .boosters-list .boosters .booster-card .details .top .rank-box{
    width: 28vw !important;
    height: 10vw !important;
    border: none !important; /* no border color */
  }
  .boosters-list .boosters .booster-card .details .top .rank-box img{
    height: 8vw !important;
  }

  /* Role icons bigger */
  .boosters-list .boosters .booster-card .details .mid .role-icon{
    width: 10vw !important;
    height: 10vw !important;
    border-radius: 2.5vw !important;
  }
  .boosters-list .boosters .booster-card .details .mid .role-icon img{
    width: 5.5vw !important;
    height: 5.5vw !important;
  }

  /* Champion icons bigger */
  .boosters-list .boosters .booster-card .details .bottom .champions .champion-icon,
  .boosters-list .boosters .booster-card .details .bottom .champions .more-champions-icon{
    width: 7vw !important;
    height: 7vw !important;
    border-radius: 2vw !important;
    font-size: 3.2vw !important;
  }

  /* Language flag holder bigger + centered */
  .boosters-list .boosters .booster-card .details .bottom .languages .lang-icon{
    width: 7vw !important;
    height: 7vw !important;
    padding: 0.5vw !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Rating bigger */
  .boosters-list .boosters .booster-card .details .bottom .rating-badge{
    width: auto !important;
    height: auto !important;
    padding: 2.2vw 3vw !important;
    border-radius: 3vw !important;
    font-size: 4.6vw !important;
  }
  .boosters-list .boosters .booster-card .details .bottom .rating-badge img{
    width: 4.6vw !important;
  }
}

@media (max-width: 767px){
  .boosters-list .boosters .booster-card .details .bottom .languages .lang-icon img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }
}

/* === TOUCH/FOCUS: make border #6366f1 on tap (mobile) === */
.boosters-list a.cover-link:active .booster-card::before,
.boosters-list a.cover-link:focus .booster-card::before,
.boosters-list a.cover-link:focus-visible .booster-card::before,
.boosters-list a.cover-link:focus-within .booster-card::before{
  border-color: #6366f1 !important;
}

/* Optional: if the tap state is on the card itself */
.boosters-list .boosters .booster-card:active::before,
.boosters-list .boosters .booster-card:focus::before,
.boosters-list .boosters .booster-card:focus-visible::before,
.boosters-list .boosters .booster-card:focus-within::before{
  border-color: #6366f1 !important;
}

/* =========================================================
   FIXES: make marquee truly continuous on all devices
   - add missing keyframes
   - force no-wrap flex track (protect against global overrides)
   - mobile sizing tweaks (more "trust slider" feel)
   ========================================================= */

/* Missing animations (track contains duplicated cards, so -50% loops seamlessly) */
@keyframes testimonials-marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes testimonials-marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Force horizontal track (prevents any accidental wrapping/grid overrides) */
.trust-sec .trust-marquee{ width: 100%; }
.trust-sec .marquee-track{
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
}
.trust-sec .trust-marquee .testimonial{ flex: 0 0 auto !important; }

/* Mobile polish */
@media (max-width: 768px){
  .trust-sec{ padding: 60px 18px 44px; }
  .trust-sec .trust-head{ margin-bottom: 22px; }
  .trust-sec h2{ font-size: 34px; line-height: 1.12; }
  .trust-sec p{ font-size: 15px; line-height: 23px; margin-bottom: 18px; }

  .trust-sec .trust-rating{
    padding: 18px;
    border-radius: 18px;
  }

  /* make the cards slightly smaller so it reads as a slider */
  .trust-sec .trust-marquee .testimonial{
    width: 260px;
    min-height: 240px;
    border-radius: 22px;
  }

  .trust-sec .trust-marquee::before,
  .trust-sec .trust-marquee::after{
    width: 38px;
  }

  /* slightly slower on mobile for smoothness */
  .trust-sec .marquee-row{ --duration: 55s; }
}

/* =========================================================
   Border fix (zoom-safe): gradient border via background-clip
   Applies to Landing -> Section One cards
   ========================================================= */

/* Build a real 1px border using layered backgrounds */
.landing .sec-one .card{
  border: 1px solid transparent;
  border-radius: 3.125vw;

  /* first layer = card fill, second layer = border gradient */
  background:
    linear-gradient(180deg, #18162b 0%, #18162b 100%) padding-box,
    linear-gradient(180deg, #6366f1 0%, #ffffff 100%) border-box;

  /* keep border thickness stable across zoom */
  padding: 1px;
}

/* Ensure inner content keeps the same rounding */
.landing .sec-one .card .content{
  border-radius: inherit;
}


/* === Trust Reviews Hover Glow === */
.trust-sec .testimonial{
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.trust-sec .testimonial:hover{
  border-color: #6366f1;
  box-shadow: 0 0 0 0.13vw rgba(99, 102, 241, 0.22), 0 1.2vw 2.4vw rgba(0, 0, 0, 0.35);
}


/* === FAQ Section v2 (Accordion Layout) === */
.sec-faqs {
  padding-top: 160px;
  padding-bottom: 120px;
}

.sec-faqs .top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 28px;
}

.sec-faqs .top .left h4 {
  margin: 0;
  line-height: 1.05;
}

.sec-faqs .top .left h4 .kicker {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  opacity: .7;
}

.sec-faqs .top .right {
  max-width: 520px;
}

.sec-faqs .top .right p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  opacity: .85;
}

.sec-faqs .top .right .faq-link {
  font-weight: 700;
  text-decoration: none;
}

.sec-faqs .top .right .faq-link:hover {
  text-decoration: underline;
}

.sec-faqs .accordion {
  border-top: 1px solid rgba(255,255,255,.12);
}

.sec-faqs .accordion .accordion-item {
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  transition: background .2s ease, border-color .2s ease;
}

.sec-faqs .accordion .accordion-item:hover {
  background: rgba(255,255,255,.035);
}

.sec-faqs .accordion .accordion-item.active {
  background: rgba(255,255,255,.04);
  border-bottom-color: rgba(255,255,255,.16);
}

.sec-faqs .accordion-header {
  padding: 22px 24px;
}

.sec-faqs .accordion-header h5 {
  font-size: 18px;
  line-height: 1.4;
}

.sec-faqs .accordion-content {
  padding: 0 24px 22px;
}

.sec-faqs .accordion-content p,
.sec-faqs .accordion-content li {
  font-size: 15px;
  line-height: 1.7;
  opacity: .85;
}

.sec-faqs .accordion-content ul {
  margin: 12px 0 0;
  padding-left: 18px;
}

@media (max-width: 900px) {
  .sec-faqs {
    padding-top: 120px;
    padding-bottom: 90px;
  }

  .sec-faqs .top {
    flex-direction: column;
    gap: 18px;
  }

  .sec-faqs .top .right {
    max-width: 100%;
  }
}



/* === FAQ Section v3 (Need help layout) === */
.sec-faqs.faq-v3 {
  padding-top: 140px;
  padding-bottom: 120px;
}

.sec-faqs.faq-v3 .faq-wrap {
  max-width: 1180px;
  margin: 0 auto;
}

.sec-faqs.faq-v3 .faq-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 32px;
  align-items: start;
}

.sec-faqs.faq-v3 .faq-left {
  padding-right: 8px;
}

.sec-faqs.faq-v3 .faq-title {
  margin: 0 0 8px;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.sec-faqs.faq-v3 .faq-subtitle {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.7;
  opacity: .8;
  max-width: 520px;
}

.sec-faqs.faq-v3 .help-card {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 18px 18px;
  margin: 16px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.sec-faqs.faq-v3 .help-card__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.sec-faqs.faq-v3 .help-ic {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 18px;
  flex: 0 0 44px;
}

.sec-faqs.faq-v3 .help-card__title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 4px;
}

.sec-faqs.faq-v3 .help-card__text {
  font-size: 14px;
  line-height: 1.6;
  opacity: .8;
}

.sec-faqs.faq-v3 .help-card__actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.sec-faqs.faq-v3 .faq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
  user-select: none;
}

.sec-faqs.faq-v3 .faq-btn:active {
  transform: translateY(1px);
}

.sec-faqs.faq-v3 .faq-btn--primary {
  background: rgba(86, 153, 255, .92);
  border-color: rgba(86, 153, 255, .55);
  color: #07101f;
}

.sec-faqs.faq-v3 .faq-btn--primary:hover {
  opacity: .95;
}

.sec-faqs.faq-v3 .faq-btn--ghost {
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
}

.sec-faqs.faq-v3 .faq-btn--ghost:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}

.sec-faqs.faq-v3 .faq-right {
  max-width: 520px; /* makes it not too wide */
  justify-self: end;
  width: 100%;
}

.sec-faqs.faq-v3 .faq-accordion {
  border-top: 0;
}

.sec-faqs.faq-v3 .faq-accordion .accordion-item {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  margin: 14px 0;
  overflow: hidden;
  background: rgba(0,0,0,.18);
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
}

.sec-faqs.faq-v3 .faq-accordion .accordion-header {
  padding: 18px 18px;
}

.sec-faqs.faq-v3 .faq-accordion .accordion-header h5 {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
}

.sec-faqs.faq-v3 .faq-accordion .accordion-item .accordion-header::after {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  display: grid;
  place-items: center;
  opacity: .95;
}

.sec-faqs.faq-v3 .faq-accordion .accordion-item.active .accordion-header::after {
  background: rgba(255,255,255,.07);
}

.sec-faqs.faq-v3 .faq-accordion .accordion-content {
  padding: 0 18px 18px;
}

.sec-faqs.faq-v3 .faq-accordion .accordion-content p {
  font-size: 14px;
  line-height: 1.65;
  opacity: .82;
}

@media (max-width: 980px) {
  .sec-faqs.faq-v3 {
    padding-top: 110px;
    padding-bottom: 90px;
  }

  .sec-faqs.faq-v3 .faq-grid {
    grid-template-columns: 1fr;
  }

  .sec-faqs.faq-v3 .faq-right {
    max-width: 100%;
    justify-self: start;
  }

  .sec-faqs.faq-v3 .faq-title {
    font-size: 40px;
  }
}

/* === FAQ Section v4 (Screenshot layout, keep site style) === */


/* === FAQ Section v4 (Screenshot layout, keep site style) === */
.sec-faqs.faq-v4 {
  padding-top: 140px;
  padding-bottom: 120px;
}

.sec-faqs.faq-v4 .faq-wrap {
  max-width: 1180px;
  margin: 0 auto;
}

.sec-faqs.faq-v4 .faq-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 34px;
  align-items: start;
}

.sec-faqs.faq-v4 .faq-title {
  margin: 0 0 8px;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.sec-faqs.faq-v4 .faq-subtitle {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.7;
  opacity: .8;
  max-width: 540px;
}

.sec-faqs.faq-v4 .help-card {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 18px;
  margin: 16px 0;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

.sec-faqs.faq-v4 .help-card__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.sec-faqs.faq-v4 .help-ic {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.9);
  flex: 0 0 44px;
}

.sec-faqs.faq-v4 .help-card__title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 4px;
}

.sec-faqs.faq-v4 .help-card__text {
  font-size: 14px;
  line-height: 1.6;
  opacity: .8;
}

.sec-faqs.faq-v4 .help-card__actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.sec-faqs.faq-v4 .faq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}

.sec-faqs.faq-v4 .faq-btn:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
}

.sec-faqs.faq-v4 .faq-btn:active {
  transform: translateY(1px);
}

.sec-faqs.faq-v4 .faq-btn--primary {
  background: rgba(255,255,255,.08);
}

.sec-faqs.faq-v4 .faq-btn--ghost {
  background: rgba(255,255,255,.04);
}

.sec-faqs.faq-v4 .faq-right {
  max-width: 520px; /* not too wide (like screenshot) */
  justify-self: end;
  width: 100%;
}

.sec-faqs.faq-v4 .faq-accordion {
  border-top: 0;
}

.sec-faqs.faq-v4 .faq-accordion .accordion-item {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  margin: 14px 0;
  overflow: hidden;
  background: rgba(255,255,255,.02);
  box-shadow: 0 12px 28px rgba(0,0,0,.20);
}

.sec-faqs.faq-v4 .faq-accordion .accordion-header {
  padding: 18px;
}

.sec-faqs.faq-v4 .faq-accordion .accordion-header h5 {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.sec-faqs.faq-v4 .faq-accordion .accordion-item .accordion-header::after {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  display: grid;
  place-items: center;
  opacity: .95;
}

.sec-faqs.faq-v4 .faq-accordion .accordion-content {
  padding: 0 18px 18px;
}

.sec-faqs.faq-v4 .faq-accordion .accordion-content p,
.sec-faqs.faq-v4 .faq-accordion .accordion-content li {
  font-size: 14px;
  line-height: 1.65;
  opacity: .82;
}

.sec-faqs.faq-v4 .faq-accordion .accordion-content ul {
  margin: 12px 0 0;
  padding-left: 18px;
}

@media (max-width: 980px) {
  .sec-faqs.faq-v4 {
    padding-top: 110px;
    padding-bottom: 90px;
  }

  .sec-faqs.faq-v4 .faq-grid {
    grid-template-columns: 1fr;
  }

  .sec-faqs.faq-v4 .faq-right {
    max-width: 100%;
    justify-self: start;
  }

  .sec-faqs.faq-v4 .faq-title {
    font-size: 42px;
  }
}


/* === FAQ Section v5 (FontAwesome icons + site-ish styling) === */
.sec-faqs.faq-v5 {
  padding-top: 140px;
  padding-bottom: 120px;
}

.sec-faqs.faq-v5 .faq-wrap {
  max-width: 1180px;
  margin: 0 auto;
}

.sec-faqs.faq-v5 .faq-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 34px;
  align-items: start;
}

.sec-faqs.faq-v5 .faq-title {
  margin: 0 0 8px;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.sec-faqs.faq-v5 .faq-subtitle {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.7;
  opacity: .8;
  max-width: 540px;
}

.sec-faqs.faq-v5 .help-card {
  border: 1px solid #232040;
  background: rgba(0,0,0,0);
  border-radius: 18px;
  padding: 18px;
  margin: 16px 0;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.sec-faqs.faq-v5 .help-card__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.sec-faqs.faq-v5 .help-ic {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(99,102,241,.10);
  border: 1px solid rgba(99,102,241,.22);
  color: #fff;
  flex: 0 0 44px;
}

.sec-faqs.faq-v5 .help-ic i {
  font-size: 18px;
  line-height: 1;
}

.sec-faqs.faq-v5 .help-card__title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 4px;
}

.sec-faqs.faq-v5 .help-card__text {
  font-size: 14px;
  line-height: 1.6;
  opacity: .8;
}

.sec-faqs.faq-v5 .help-card__actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.sec-faqs.faq-v5 .faq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 16px;
  border-radius: 2.6042vw; /* matches your .btn rounding */
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid #232040;
  background: rgba(0,0,0,0);
  color: #fff;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}

.sec-faqs.faq-v5 .faq-btn:hover {
  background: rgba(99,102,241,.14);
  border-color: rgba(99,102,241,.45);
}

.sec-faqs.faq-v5 .faq-btn:active {
  transform: translateY(1px);
}

.sec-faqs.faq-v5 .faq-btn--primary {
  background: rgba(99,102,241,.16);
  border-color: rgba(99,102,241,.45);
}

.sec-faqs.faq-v5 .faq-btn--primary:hover {
  background: rgba(99,102,241,.22);
}

.sec-faqs.faq-v5 .faq-btn--ghost {
  background: rgba(0,0,0,0);
}

.sec-faqs.faq-v5 .faq-right {
  max-width: 520px;
  justify-self: end;
  width: 100%;
}

.sec-faqs.faq-v5 .faq-accordion {
  border-top: 0;
}

.sec-faqs.faq-v5 .faq-accordion .accordion-item {
  border: 1px solid #232040;
  border-radius: 16px;
  margin: 14px 0;
  overflow: hidden;
  background: rgba(0,0,0,0);
}

.sec-faqs.faq-v5 .faq-accordion .accordion-header {
  padding: 18px;
}

.sec-faqs.faq-v5 .faq-accordion .accordion-header h5 {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.sec-faqs.faq-v5 .faq-accordion .accordion-item .accordion-header::after {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: rgba(0,0,0,0);
  border: 1px solid #232040;
  display: grid;
  place-items: center;
  opacity: .95;
}

.sec-faqs.faq-v5 .faq-accordion .accordion-item.active .accordion-header::after {
  background: rgba(99,102,241,.10);
  border-color: rgba(99,102,241,.35);
}

.sec-faqs.faq-v5 .faq-accordion .accordion-content {
  padding: 0 18px 18px;
}

.sec-faqs.faq-v5 .faq-accordion .accordion-content p,
.sec-faqs.faq-v5 .faq-accordion .accordion-content li {
  font-size: 14px;
  line-height: 1.65;
  opacity: .82;
}

.sec-faqs.faq-v5 .faq-accordion .accordion-content ul {
  margin: 12px 0 0;
  padding-left: 18px;
}

@media (max-width: 980px) {
  .sec-faqs.faq-v5 {
    padding-top: 110px;
    padding-bottom: 90px;
  }

  .sec-faqs.faq-v5 .faq-grid {
    grid-template-columns: 1fr;
  }

  .sec-faqs.faq-v5 .faq-right {
    max-width: 100%;
    justify-self: start;
  }

  .sec-faqs.faq-v5 .faq-title {
    font-size: 42px;
  }

  .sec-faqs.faq-v5 .faq-btn {
    border-radius: 40px;
  }
}


/* === FAQ Section v6 (wider + remove pills + active border) === */
.sec-faqs.faq-v6 {
  padding-top: 140px;
  padding-bottom: 120px;
}

.sec-faqs.faq-v6 .faq-wrap {
  max-width: 1320px; /* wider overall */
  margin: 0 auto;
}

.sec-faqs.faq-v6 .faq-grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 38px;
  align-items: start;
}

.sec-faqs.faq-v6 .faq-right {
  max-width: 600px; /* wider faq column */
  justify-self: end;
  width: 100%;
}

/* keep existing v5 look for cards/buttons but scoped */
.sec-faqs.faq-v6 .help-card {
  border: 1px solid #232040;
  background: rgba(0,0,0,0);
  border-radius: 18px;
  padding: 18px;
  margin: 16px 0;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.sec-faqs.faq-v6 .help-card__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.sec-faqs.faq-v6 .help-ic {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(99,102,241,.10);
  border: 1px solid rgba(99,102,241,.22);
  color: #fff;
  flex: 0 0 44px;
}

.sec-faqs.faq-v6 .help-ic i {
  font-size: 18px;
  line-height: 1;
}

.sec-faqs.faq-v6 .help-card__title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 4px;
}

.sec-faqs.faq-v6 .help-card__text {
  font-size: 14px;
  line-height: 1.6;
  opacity: .8;
}

.sec-faqs.faq-v6 .help-card__actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.sec-faqs.faq-v6 .faq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 16px;
  border-radius: 2.6042vw;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid #232040;
  background: rgba(0,0,0,0);
  color: #fff;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}

.sec-faqs.faq-v6 .faq-btn:hover {
  background: rgba(99,102,241,.14);
  border-color: rgba(99,102,241,.45);
}

.sec-faqs.faq-v6 .faq-btn:active {
  transform: translateY(1px);
}

.sec-faqs.faq-v6 .faq-btn--primary {
  background: rgba(99,102,241,.16);
  border-color: rgba(99,102,241,.45);
}

/* Accordion */
.sec-faqs.faq-v6 .faq-accordion {
  border-top: 0;
}

.sec-faqs.faq-v6 .faq-accordion .accordion-item {
  border: 1px solid #232040;
  border-radius: 16px;
  margin: 14px 0;
  overflow: hidden;
  background: rgba(0,0,0,0);
}

.sec-faqs.faq-v6 .faq-accordion .accordion-item.active {
  border-color: #6366f1; /* requested active border */
}

.sec-faqs.faq-v6 .faq-accordion .accordion-header {
  padding: 18px;
}

.sec-faqs.faq-v6 .faq-accordion .accordion-header h5 {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.sec-faqs.faq-v6 .faq-accordion .accordion-item .accordion-header::after {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: rgba(0,0,0,0);
  border: 1px solid #232040;
  display: grid;
  place-items: center;
  opacity: .95;
}

.sec-faqs.faq-v6 .faq-accordion .accordion-item.active .accordion-header::after {
  background: rgba(99,102,241,.10);
  border-color: rgba(99,102,241,.55);
}

.sec-faqs.faq-v6 .faq-accordion .accordion-content {
  padding: 0 18px 18px;
}

.sec-faqs.faq-v6 .faq-accordion .accordion-content p,
.sec-faqs.faq-v6 .faq-accordion .accordion-content li {
  font-size: 14px;
  line-height: 1.65;
  opacity: .82;
}

.sec-faqs.faq-v6 .faq-accordion .accordion-content ul {
  margin: 12px 0 0;
  padding-left: 18px;
}

@media (max-width: 980px) {
  .sec-faqs.faq-v6 {
    padding-top: 110px;
    padding-bottom: 90px;
  }

  .sec-faqs.faq-v6 .faq-grid {
    grid-template-columns: 1fr;
  }

  .sec-faqs.faq-v6 .faq-right {
    max-width: 100%;
    justify-self: start;
  }

  .sec-faqs.faq-v6 .faq-btn {
    border-radius: 40px;
  }
}


/* === FAQ Section v7 (font sizes tune) === */
/* Headings */
.sec-faqs.faq-v6.faq-v7 .faq-title {
  font-size: 56px;
  line-height: 1.02;
}

.sec-faqs.faq-v6.faq-v7 .faq-subtitle {
  font-size: 15px;
  line-height: 1.75;
}

/* Left cards */
.sec-faqs.faq-v6.faq-v7 .help-card__title {
  font-size: 17px;
}

.sec-faqs.faq-v6.faq-v7 .help-card__text {
  font-size: 13px;
  line-height: 1.7;
}

/* Buttons */
.sec-faqs.faq-v6.faq-v7 .faq-btn {
  font-size: 13px;
  height: 40px;
}

/* Accordion questions + content */
.sec-faqs.faq-v6.faq-v7 .faq-accordion .accordion-header h5 {
  font-size: 15px;
  font-weight: 800;
}

.sec-faqs.faq-v6.faq-v7 .faq-accordion .accordion-content p,
.sec-faqs.faq-v6.faq-v7 .faq-accordion .accordion-content li {
  font-size: 13px;
  line-height: 1.75;
}

@media (max-width: 980px) {
  .sec-faqs.faq-v6.faq-v7 .faq-title {
    font-size: 44px;
  }
}

/* === FAQ Desktop Scale (v11) – Desktop wesentlich größer (px), Mobile unverändert === */
@media (min-width: 1081px){
  .sec-faqs.faq-v6.faq-v7{
    padding-top: 185px;
    padding-bottom: 160px;
  }

  .sec-faqs.faq-v6.faq-v7 .faq-wrap{
    max-width: 1480px;
  }

  .sec-faqs.faq-v6.faq-v7 .faq-grid{
    gap: 88px;
  }

  /* Headline + Subtitle */
  .sec-faqs.faq-v6.faq-v7 .faq-title{
    font-size: 76px;
    line-height: 1.02;
    margin: 0 0 14px;
  }

  .sec-faqs.faq-v6.faq-v7 .faq-subtitle{
    font-size: 18px;
    line-height: 1.9;
    max-width: 820px;
  }

  /* Cards */
  .sec-faqs.faq-v6.faq-v7 .help-card{
    padding: 30px 30px;
    border-radius: 24px;
  }

  .sec-faqs.faq-v6.faq-v7 .help-ic{
    width: 56px;
    height: 56px;
    border-radius: 18px;
    font-size: 22px;
    flex: 0 0 56px;
  }

  .sec-faqs.faq-v6.faq-v7 .help-card__title{
    font-size: 20px;
  }

  .sec-faqs.faq-v6.faq-v7 .help-card__text{
    font-size: 15px;
    line-height: 1.8;
  }

  .sec-faqs.faq-v6.faq-v7 .faq-btn{
    height: 48px;
    font-size: 15px;
    padding: 0 20px;
  }

  .sec-faqs.faq-v6.faq-v7 .help-chip{
    height: 30px;
    padding: 0 14px;
    font-size: 13px;
  }

  /* Accordion */
  .sec-faqs.faq-v6.faq-v7 .faq-accordion .accordion-header{
    padding: 22px 22px;
  }

  .sec-faqs.faq-v6.faq-v7 .faq-accordion .accordion-header h5{
    font-size: 17px;
  }

  .sec-faqs.faq-v6.faq-v7 .faq-accordion .accordion-content{
    padding: 0 22px 22px;
  }

  .sec-faqs.faq-v6.faq-v7 .faq-accordion .accordion-content p,
  .sec-faqs.faq-v6.faq-v7 .faq-accordion .accordion-content li{
    font-size: 15px;
    line-height: 1.85;
  }

  .sec-faqs.faq-v6.faq-v7 .faq-accordion .accordion-item .accordion-header::after{
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }
}

@media (min-width: 1400px){
  .sec-faqs.faq-v6.faq-v7 .faq-wrap{ max-width: 1540px; }
  .sec-faqs.faq-v6.faq-v7 .faq-title{ font-size: 82px; }
  .sec-faqs.faq-v6.faq-v7 .faq-subtitle{ font-size: 19px; }
  .sec-faqs.faq-v6.faq-v7 .faq-grid{ gap: 96px; }
}


/* ─────────────────────────────────────────────────────────────
   FAQ Hub (v7) – matches LolBoost "glass" cards + indigo accent
   ───────────────────────────────────────────────────────────── */
.sec-faqs.faq-hub{
  padding: 8.5vw 6.5104vw;
  position: relative;
  overflow: hidden;
}
.sec-faqs.faq-hub::before{
  content:"";
  position:absolute;
  inset:-20%;
  background: radial-gradient(1200px 600px at 70% 10%, rgba(99,102,241,.18), transparent 60%);
  pointer-events:none;
  z-index:0;
}
.sec-faqs.faq-hub .faq-wrap{ position: relative; z-index:1; }

.sec-faqs.faq-hub .faq-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 2rem;
  margin-bottom: 3.2vw;
}
.sec-faqs.faq-hub .faq-head__copy{ max-width: 62ch; }

.sec-faqs.faq-hub .faq-pill{
  display:inline-flex;
  align-items:center;
  padding: .35rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(139,140,245,0.35);
  background: rgba(15,23,42,0.35);
  color: #8b8cf5;
  font-size: .75rem;
  letter-spacing: .06em;
  margin-bottom: .45rem;
}

.sec-faqs.faq-hub .faq-title{
  font-size: 3.125vw;
  line-height: 4.0625vw;
  font-weight: 600;
  margin: 0 0 .6rem 0;
}

.sec-faqs.faq-hub .faq-subtitle{
  color:#726e8e;
  font-size: 1.1458vw;
  line-height: 2.4vw;
  margin:0;
}

.sec-faqs.faq-hub .faq-actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}

.sec-faqs.faq-hub .faq-grid{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 1.2rem;
  align-items:start;
}

.sec-faqs.faq-hub .faq-card{
  border-radius: 26px;
  border: 1px solid #232040;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
}

.sec-faqs.faq-hub .faq-sidebar{ position: sticky; top: 110px; }
.sec-faqs.faq-hub .faq-sidebar .faq-card{ padding: 16px; }

.sec-faqs.faq-hub .faq-search{
  position:relative;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(99,102,241,.25);
  background: rgba(17,15,31,.65);
}
.sec-faqs.faq-hub .faq-search i{ color:#aab0d4; font-size:.95rem; }
.sec-faqs.faq-hub .faq-search input{
  width:100%;
  background:transparent;
  border:0;
  outline:0;
  color:#fff;
  font-size: .95rem;
}
.sec-faqs.faq-hub .faq-kbd{
  font-size: .75rem;
  color:#aab0d4;
  border: 1px solid rgba(114,110,142,.35);
  border-radius: 10px;
  padding: .15rem .4rem;
}

.sec-faqs.faq-hub .faq-cats{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top: 12px;
}

.sec-faqs.faq-hub .faq-cat{
  border: 1px solid #232040;
  background: rgba(24,22,43,.75);
  color: #e5e7ff;
  padding: .55rem .8rem;
  border-radius: 999px;
  cursor:pointer;
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease;
  font-weight: 500;
  font-size: .9rem;
}
.sec-faqs.faq-hub .faq-cat:hover{ transform: translateY(-1px); }
.sec-faqs.faq-hub .faq-cat.active{
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  box-shadow: 0 0 18px rgba(99,102,241,.55);
  border-color: transparent;
}

.sec-faqs.faq-hub .faq-meta{
  display:flex;
  gap:.5rem;
  margin-top: 12px;
}

/* FAQ list */
.sec-faqs.faq-hub .faq-list{ padding: 8px; }
.sec-faqs.faq-hub .faq-accordion{ overflow:hidden; border-radius: 22px; }

.sec-faqs.faq-hub .faq-item{
  border-bottom: 1px solid rgba(35,32,64,.9);
}
.sec-faqs.faq-hub .faq-item:last-child{ border-bottom: 0; }

.sec-faqs.faq-hub .faq-q{
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  color:#fff;
  cursor:pointer;
  font-size: 1.02rem;
}
.sec-faqs.faq-hub .faq-q span:first-child{ color: rgba(226,231,255,.92); }

.sec-faqs.faq-hub .faq-icon{
  width: 38px;
  height: 38px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  border: 1px solid #232040;
  background: rgba(24,22,43,.55);
  color:#aab0d4;
  transition: transform .18s ease, color .18s ease, background .18s ease;
}
.sec-faqs.faq-hub .faq-item.open .faq-icon{
  transform: rotate(180deg);
  color:#fff;
  background: rgba(99,102,241,.22);
}

.sec-faqs.faq-hub .faq-a{
  display:none;
  padding: 0 18px 16px;
}
.sec-faqs.faq-hub .faq-a p{
  color:#c7c9dd;
  line-height: 1.7;
  margin: 0;
}
.sec-faqs.faq-hub .faq-item.open .faq-a{ display:block; }

/* Responsive */
@media (max-width: 980px){
  .sec-faqs.faq-hub{ padding: 70px 20px; }
  .sec-faqs.faq-hub .faq-grid{ grid-template-columns: 1fr; }
  .sec-faqs.faq-hub .faq-sidebar{ position: static; }
  .sec-faqs.faq-hub .faq-head{ align-items:flex-start; flex-direction:column; }
  .sec-faqs.faq-hub .faq-title{ font-size: 32px; line-height: 40px; }
  .sec-faqs.faq-hub .faq-subtitle{ font-size: 16px; line-height: 24px; }
}

/* Buttons & badges inside FAQ Hub */
.sec-faqs.faq-hub .faq-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid rgba(99,102,241,.35);
  background: rgba(99,102,241,.16);
  color: #e5e7ff;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.sec-faqs.faq-hub .faq-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(99,102,241,.35);
  background: rgba(99,102,241,.22);
}
.sec-faqs.faq-hub .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(35,32,64,.9);
  background: rgba(24,22,43,.65);
  color: #d7d9ee;
}
.sec-faqs.faq-hub .badge.success{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
  color: rgba(134,239,172,1);
}

/* ─────────────────────────────────────────────────────────────
   FAQ Hub – Centered header + topic pills (no search sidebar)
   ───────────────────────────────────────────────────────────── */
.sec-faqs.faq-hub.faq-hub--center .faq-head--center{
  text-align: center;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 24px;
}
.sec-faqs.faq-hub.faq-hub--center .faq-head--center .faq-subtitle{
  max-width: 70ch;
}
.sec-faqs.faq-hub.faq-hub--center .faq-actions--center{
  justify-content: center;
}
.sec-faqs.faq-hub.faq-hub--center .faq-controls{
  display:flex;
  justify-content:center;
  margin: 18px 0 18px;
}
.sec-faqs.faq-hub.faq-hub--center .faq-cats--center{
  justify-content:center;
}
/* Ensure the list doesn't inherit old grid spacing */
.sec-faqs.faq-hub.faq-hub--center .faq-list{
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px;
}
@media (max-width: 980px){
  .sec-faqs.faq-hub.faq-hub--center .faq-list{ max-width: 100%; }
}

/* FAQ buttons: icon alignment */
.sec-faqs.faq-hub .faq-btn i{
  font-size: 14px;
  line-height: 1;
}

/* === Filterbar Addon v3 (generated) === */
/* lolboost.gg – Ranked Accounts Filterbar (v3)
   Load this AFTER your main.css
*/

.u-hidden{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important;}

/* Sticky bar (doesn't overlap cards) */
.ranked-accounts-page .shop-filterbar{position:relative;z-index:1000020;margin-top:22px;}
.ranked-accounts-page .shop-filterbar--sticky{position:sticky;top:88px;}
@media (max-width: 768px){
  .ranked-accounts-page .shop-filterbar--sticky{top:68px;}
}

.ranked-accounts-page .shop-filterbar__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* Search */
.ranked-accounts-page .shop-filterbar__search{flex:1 1 240px;min-width:220px;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:999px;background:rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.08);}
.ranked-accounts-page .shop-filterbar__search i{opacity:.85;}
.ranked-accounts-page .shop-filterbar__search input{width:100%;background:transparent;border:0;outline:0;color:rgba(255,255,255,0.92);}

/* Pills */
.ranked-accounts-page .shop-filterpill{position:relative;}
.ranked-accounts-page .shop-filterpill__btn{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:999px;background:rgba(0,0,0,0.18);border:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.92);}
.ranked-accounts-page .shop-filterpill__btn:hover{border-color:rgba(255,255,255,0.14);}
.ranked-accounts-page .shop-filterpill.is-open .shop-filterpill__btn{background:rgba(120,90,255,0.18);border-color:rgba(120,90,255,0.35);}
.ranked-accounts-page .shop-filterpill__label{font-weight:600;}
.ranked-accounts-page .shop-filterpill__value{opacity:.9;font-weight:700;}

/* Dropdown (anchored) */
.ranked-accounts-page .shop-dropdown{position:absolute;top:calc(100% + 10px);left:0;width:360px;max-width:calc(100vw - 24px);
  background:rgba(12,12,22,0.92);border:1px solid rgba(255,255,255,0.08);border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,0.55);
  display:none;overflow:hidden;z-index:1000020;}
.ranked-accounts-page .shop-filterpill.is-open .shop-dropdown{display:block;}

/* Right align helpers */
.ranked-accounts-page .shop-toolbar__right .shop-dropdown,
.ranked-accounts-page .shop-sort .shop-dropdown{left:auto;right:0;}

/* Dropdown head */
.ranked-accounts-page .shop-dropdown__head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.06);}
.ranked-accounts-page .shop-dropdown__head span{font-weight:800;letter-spacing:.2px;}
.ranked-accounts-page .shop-dropdown__close{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);color:rgba(255,255,255,0.9);border-radius:10px;width:34px;height:30px;display:inline-flex;align-items:center;justify-content:center;}

.ranked-accounts-page .shop-dropdown__body{padding:12px 14px;}
.ranked-accounts-page .shop-dropdown__grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width: 900px){
  .ranked-accounts-page #ddMore .shop-dropdown__grid{grid-template-columns:1fr 1fr;}
}

/* Search inside dropdown */
.ranked-accounts-page .facet-search{display:flex;align-items:center;gap:10px;margin-bottom:10px;background:rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:10px 12px;}
.ranked-accounts-page .facet-search input{width:100%;background:transparent;border:0;outline:0;color:rgba(255,255,255,0.92);}
.ranked-accounts-page .facet-search i{opacity:.85;}

/* Checkbox list */
.ranked-accounts-page .facet-items{max-height:340px;overflow:auto;padding-right:6px;}
.ranked-accounts-page .facet-items::-webkit-scrollbar{width:6px;}
.ranked-accounts-page .facet-items::-webkit-scrollbar-thumb{background:rgba(120,90,255,0.55);border-radius:999px;}

.ranked-accounts-page .facet-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px;border-radius:12px;cursor:pointer;user-select:none;}
.ranked-accounts-page .facet-item:hover{background:rgba(255,255,255,0.04);}
.ranked-accounts-page .facet-item__left{display:flex;align-items:center;gap:10px;min-width:0;}
.ranked-accounts-page .facet-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ranked-accounts-page .facet-check{width:18px;height:18px;accent-color:rgb(140,110,255);}

/* Price */
.ranked-accounts-page .shop-price__fields{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end;}
.ranked-accounts-page .shop-price__field label{display:block;font-size:12px;opacity:.8;margin-bottom:6px;}
.ranked-accounts-page .shop-price__input{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border-radius:12px;background:rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.08);}
.ranked-accounts-page .shop-price__input input{width:100%;background:transparent;border:0;outline:0;color:rgba(255,255,255,0.92);}
.ranked-accounts-page .shop-price__sep{opacity:.7;padding-bottom:8px;}

.ranked-accounts-page .shop-range{position:relative;margin:14px 2px 8px;height:28px;}
.ranked-accounts-page .shop-range input[type=range]{position:absolute;left:0;top:6px;width:100%;pointer-events:none;background:transparent;}
.ranked-accounts-page .shop-range input[type=range]::-webkit-slider-thumb{pointer-events:auto;}
.ranked-accounts-page .shop-range__track{position:absolute;left:0;right:0;top:13px;height:6px;border-radius:999px;background:rgba(255,255,255,0.12);}
.ranked-accounts-page .shop-range__fill{position:absolute;top:0;height:6px;border-radius:999px;background:rgba(140,110,255,0.95);}

.ranked-accounts-page .shop-price__labels{display:flex;justify-content:space-between;opacity:.85;font-weight:700;}
.ranked-accounts-page .shop-apply{margin-top:12px;width:100%;height:44px;border-radius:12px;background:rgba(140,110,255,0.95);border:0;color:white;font-weight:800;}

/* Active chips row */
.ranked-accounts-page .shop-filterbar__chips{margin-top:10px;display:flex;gap:8px;overflow:auto;padding-bottom:4px;max-height:44px;}
.ranked-accounts-page .shop-filterbar__chips::-webkit-scrollbar{height:6px;}
.ranked-accounts-page .shop-filterbar__chips::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18);border-radius:999px;}
.ranked-accounts-page .chip{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);color:rgba(255,255,255,0.92);white-space:nowrap;}
.ranked-accounts-page .chip:hover{border-color:rgba(140,110,255,0.35);}
.ranked-accounts-page .chip-x{opacity:.85;}

/* Toolbar */
.ranked-accounts-page .shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 10px;}
.ranked-accounts-page .shop-count{opacity:.85;font-weight:700;}

/* Sort: custom dark menu */
.ranked-accounts-page .shop-sort{position:relative;}
.ranked-accounts-page .shop-sort__btn{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:999px;background:rgba(0,0,0,0.18);border:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.92);}
.ranked-accounts-page .shop-sort.is-open #ddSort{display:block;}
.ranked-accounts-page #ddSort{width:260px;}
.ranked-accounts-page .shop-menuitem{width:100%;text-align:left;background:transparent;border:0;color:rgba(255,255,255,0.92);padding:10px 10px;border-radius:10px;}
.ranked-accounts-page .shop-menuitem:hover{background:rgba(255,255,255,0.06);}

/* Clear button */
.ranked-accounts-page .reset-filters--ghost{height:44px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);color:rgba(255,255,255,0.92);padding:0 14px;}

/* Compact density */
body.shop-density-compact .account-card .desc,
body.shop-density-compact .account-card .features,
body.shop-density-compact .account-card .extra{display:none !important;}


/* Eye-catchy badges */
.type-card__badge--fast{
  background: linear-gradient(90deg, rgba(132,113,255,0.35), rgba(132,113,255,0.08));
  border-color: rgba(132,113,255,0.55);
  color: rgba(255,255,255,0.95);
  box-shadow: 0 10px 26px rgba(132,113,255,0.22);
}

.type-card__badge--popular{
  background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(132,113,255,0.10));
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.96);
  box-shadow: 0 10px 26px rgba(255,255,255,0.10);
}

@media (prefers-reduced-motion: no-preference){
  .type-card__badge--fast, .type-card__badge--popular{
    animation: badgePulse 2.4s ease-in-out infinite;
  }
  @keyframes badgePulse{
    0%,100%{ transform: translateY(0); filter: brightness(1); }
    50%{ transform: translateY(-1px); filter: brightness(1.12); }
  }
}


/* --- FIX: remove underline inside account type cards (links/buttons) --- */
.account-type-cards .type-card,
.account-type-cards .type-card a,
.account-type-cards .type-card a:hover,
.account-type-cards .type-card a:focus,
.account-type-cards .type-card a:active,
.account-type-cards .type-card__cta,
.account-type-cards .type-card__cta *{
  text-decoration: none !important;
}
/* --------------------------------------------------------------------- */



/* === LOLBOOST – Indigo hover/focus borders (Ranked Accounts Shop) === */
:root{ --lb-accent:#6366f1; }

/* Search field */
.ranked-accounts-page .shop-filterbar__search:hover,
.ranked-accounts-page .shop-filterbar__search:focus-within{
  border-color: var(--lb-accent) !important;
  box-shadow: 0 0 0 1px var(--lb-accent), 0 0 0 6px rgba(99,102,241,.18);
}

/* Filter pill buttons + sort */
.ranked-accounts-page .shop-filterpill__btn:hover,
.ranked-accounts-page .shop-filterpill__btn:focus-visible,
.ranked-accounts-page .shop-sort__btn:hover,
.ranked-accounts-page .shop-sort__btn:focus-visible{
  border-color: var(--lb-accent) !important;
  box-shadow: 0 0 0 1px var(--lb-accent), 0 0 0 6px rgba(99,102,241,.18);
}

/* Dropdown search inputs (facet search, etc.) */
.ranked-accounts-page .shop-dropdown input[type="search"]:hover,
.ranked-accounts-page .shop-dropdown input[type="search"]:focus,
.ranked-accounts-page .shop-dropdown input[type="text"]:hover,
.ranked-accounts-page .shop-dropdown input[type="text"]:focus,
.ranked-accounts-page .shop-dropdown input[type="number"]:hover,
.ranked-accounts-page .shop-dropdown input[type="number"]:focus{
  border-color: var(--lb-accent) !important;
  box-shadow: 0 0 0 1px var(--lb-accent), 0 0 0 6px rgba(99,102,241,.18);
  outline: none !important;
}

/* Active filter chips */
.ranked-accounts-page .shop-activechip:hover,
.ranked-accounts-page .shop-activechip:focus-visible{
  border-color: var(--lb-accent) !important;
  box-shadow: 0 0 0 1px var(--lb-accent), 0 0 0 6px rgba(99,102,241,.14);
}

/* Account cards */
.ranked-accounts-page .account-card:hover,
.ranked-accounts-page .account-card:focus-within{
  border-color: var(--lb-accent) !important;
  box-shadow: 0 0 0 1px var(--lb-accent), 0 18px 60px rgba(0,0,0,.35);
  transform: translateY(-2px);
}

/* Make sure links inside pills/cards don't get underlined on hover */
.ranked-accounts-page .shop-filterbar a,
.ranked-accounts-page .shop-filterbar a:hover,
.ranked-accounts-page .account-card a,
.ranked-accounts-page .account-card a:hover{
  text-decoration: none !important;
}



/* =======================================================================
   Luxury Glass Redesign — Account Cards (Ranked Accounts Shop)
   Style C: luxury glass + inner glow + premium badges + refined hierarchy
   Scoped to ranked accounts page only
   ======================================================================= */

.ranked-accounts-page .container .accounts-grid .account-card{
  /* flat background (no gradients) */
  background: rgba(255,255,255,.06);
  border-color: rgba(99,102,241,.28);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 18px 60px rgba(0,0,0,.40);
}


.ranked-accounts-page .container .accounts-grid .account-card::after{
  /* subtle noise */
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  opacity: .04;
  border-radius: inherit;
}

.ranked-accounts-page .container .accounts-grid .account-card .cover-link{
  position:relative;
  z-index:1;
  display:block;
  height:100%;
  text-decoration:none;
}

.ranked-accounts-page .container .accounts-grid .account-card .title{
  font-weight: 650;
  letter-spacing: .2px;
}

.ranked-accounts-page .container .accounts-grid .account-card .title .rank-icon{
  padding: .25rem;
 
}

.ranked-accounts-page .container .accounts-grid .account-card .excerpt{
  color: rgba(255,255,255,.70);
  margin-top: .55rem;
  margin-bottom: .75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ranked-accounts-page .container .accounts-grid .account-card .image-box{
  border-radius: .9rem;
  overflow:hidden;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.ranked-accounts-page .container .accounts-grid .account-card .image-box img{
  width: 100%;
  aspect-ratio: 4 / 3; /* show more of the screenshot, less crop */
  object-fit: contain; /* prevent zoom/cropping */
  object-position: center;
  display: block;
  background: rgba(0,0,0,.18);
  padding: 0.52vw;
  border-radius: 0.78vw;
}

.ranked-accounts-page .container .accounts-grid .account-card .image-box::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%);
}

.ranked-accounts-page .container .accounts-grid .account-card .image-box .badge{
  z-index:2;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(10,10,24,.55);
  border: 1px solid rgba(99,102,241,.35);
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}

.ranked-accounts-page .container .accounts-grid .account-card .highlights{
  display:flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .9rem;
}

.ranked-accounts-page .container .accounts-grid .account-card .highlights .badge{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.88);
  border-radius: 999px;
  padding: .38rem .6rem;
  line-height: 1;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(0,0,0,.10) inset;
}

.ranked-accounts-page .container .accounts-grid .account-card .highlights .badge i{
  opacity:.9;
}

.ranked-accounts-page .container .accounts-grid .account-card .totals{
  margin-top: .95rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

.ranked-accounts-page .container .accounts-grid .account-card .totals .price-eur{
  text-shadow: 0 6px 20px rgba(0,0,0,.35);
}

.ranked-accounts-page .container .accounts-grid .account-card .totals .btn{
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(99,102,241,.95), rgba(99,102,241,.72));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 26px rgba(99,102,241,.25);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.ranked-accounts-page .container .accounts-grid .account-card:hover .totals .btn{
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 16px 34px rgba(99,102,241,.30);
}

/* Delivery icon becomes a premium chip */
.ranked-accounts-page .container .accounts-grid .account-card .delivery-type{
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: rgba(10,10,24,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 900px){
  .ranked-accounts-page .container .accounts-grid .account-card .image-box img{
    aspect-ratio: 4 / 3;
    padding: 1.86vw;
    border-radius: 2.33vw;
  }
}


.placement-guarantee-wrap{ margin-top:14px; }
.pg-head h5{ margin:0 0 10px 0; font-weight:700; color:rgba(255,255,255,0.92); }

.pg-box{
  border-radius:16px;
  padding:16px;
  background: rgba(10,12,24,0.45);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
  backdrop-filter: blur(8px);
}

.pg-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}

.pg-left{ display:flex; align-items:center; gap:12px; min-width:0; }

.pg-badge{
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  letter-spacing:.4px;
  color:rgba(255,255,255,0.95);
  background: rgba(120,100,255,0.18);
  border:1px solid rgba(120,100,255,0.35);
  white-space:nowrap;
}

.pg-icon{
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center;
  background: rgba(120,100,255,0.14);
  border:1px solid rgba(120,100,255,0.22);
  flex:0 0 auto;
}

.pg-icon i{ font-size:16px; color:rgba(255,255,255,0.92); }

.pg-title{ min-width:0; }
.pg-title .t1{ font-weight:800; color:rgba(255,255,255,0.92); line-height:1.1; }
.pg-title .t2{
  margin-top:2px; font-size:13px; color:rgba(255,255,255,0.68);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.pg-divider{ height:1px; background:rgba(255,255,255,0.08); margin:12px 0; }

.pg-list{ display:grid; gap:10px; }

.pg-item{
  display:flex; gap:10px;
  color:rgba(255,255,255,0.86);
  font-size:14px; line-height:1.35;
}
.pg-item i{ margin-top:2px; color: rgba(120,100,255,0.95); }
.pg-item strong{ font-weight:800; color:rgba(255,255,255,0.95); }


/* Desktop: Placement Guarantee EXTRA groß (Mobile bleibt unverändert) */
@media (min-width: 992px) {
  .placement-guarantee-wrap { margin-top: 26px; }

  .pg-head h5 {
    font-size: 22px;
    margin: 0 0 18px 0;
  }

  .pg-box {
    padding: 30px;
    border-radius: 22px;
  }

  .pg-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }

  .pg-icon i { font-size: 24px; }

  .pg-title .t1 {
    font-size: 22px;
    line-height: 1.15;
  }

  .pg-title .t2 {
    font-size: 17px;
    line-height: 1.25;
    margin-top: 2px;
  }

  .pg-badge {
    font-size: 16px;
    padding: 12px 18px;
    border-radius: 999px;
  }

  .pg-item {
    font-size: 18px;
    line-height: 1.55;
    gap: 14px;
  }

  .pg-item i {
    font-size: 16px;
    margin-top: 4px;
  }

  /* bisschen mehr Luft zwischen Head und Bullets */
  .pg-divider { margin: 18px 0; }
}

/* Ultra-wide: nochmal ein Tick größer */
@media (min-width: 1400px) {
  .pg-box { padding: 34px; }
  .pg-head h5 { font-size: 24px; }
  .pg-title .t1 { font-size: 24px; }
  .pg-title .t2 { font-size: 18px; }
  .pg-item { font-size: 19px; }
  .pg-badge { font-size: 17px; padding: 13px 20px; }
}

.booster-reviews .no-reviews {
  font-size: 18px;
}


/* Desktop: limit skins image width */
@media (min-width: 769px){
  .view-account-page .skins img{
    width: 10vw;
    height: auto;
  }
}

/* ==========================================================
   LOLBOOST-Style: Premium Account Cards (compact + clean)
   Paste AFTER main.css
   Uses existing markup:
   .premium-accounts-page .accounts-grid .account
   .head (h4 + .image-wrapper), ul/li, .foot (.price, .buy-now/.sold)
   ========================================================== */

:root{
  --lb-accent: #6366f1; /* already used elsewhere :contentReference[oaicite:1]{index=1} */
  --lb-card-bg: rgba(10,10,24,0.55);
  --lb-card-border: rgba(255,255,255,0.10);
  --lb-card-border-strong: rgba(99,102,241,0.28);
  --lb-text: rgba(255,255,255,0.92);
  --lb-muted: rgba(255,255,255,0.70);
}

.premium-accounts-page .container .accounts-grid .account{
  position: relative;
  background: var(--lb-card-bg);
  border: 1px solid var(--lb-card-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,0.40);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* subtle inner glow like lolboost ranked cards */
.premium-accounts-page .container .accounts-grid .account::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
}

.premium-accounts-page .container .accounts-grid .account::after{
  /* keep your existing after if you use it; we just refine border feel */
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  background: radial-gradient(800px 260px at 20% 0%,
    rgba(99,102,241,0.18),
    rgba(0,0,0,0) 55%);
  opacity: .9;
}

.premium-accounts-page .container .accounts-grid .account:hover{
  border-color: rgba(99,102,241,0.55);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.55);
  transform: translateY(-1px);
}

/* ---------- HEADER LAYOUT (icon top-right, title left) ---------- */
.premium-accounts-page .container .accounts-grid .account .head{
  position: relative;
  padding-right: 56px; /* space for icon on the right */
  margin-bottom: 10px;
}

/* Move existing image wrapper to top-right (rank icon) :contentReference[oaicite:2]{index=2} */
.premium-accounts-page .container .accounts-grid .account .head .image-wrapper{
  position: absolute;
  top: 14px;
  right: 14px;
  margin: 0 !important;
  width: 40px;
  height: 40px;
  display: grid !important;
  place-items: center;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  z-index: 2;
}

.premium-accounts-page .container .accounts-grid .account .head .image-wrapper img{
  width: 26px !important;
  height: 26px !important;
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.35));
}

/* Title compact + clamp */
.premium-accounts-page .container .accounts-grid .account .head h4{
  margin: 0;
  color: var(--lb-text);
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.15;
  font-size: 16px; /* keeps cards compact; mobile keeps your vw rules :contentReference[oaicite:3]{index=3} */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-top: 10px;
}

/* Optional: if you have a subtitle/excerpt element, this will style it nicely */
.premium-accounts-page .container .accounts-grid .account .excerpt,
.premium-accounts-page .container .accounts-grid .account .subline{
  margin-top: 6px;
  color: var(--lb-muted);
  font-size: 15px;
  line-height: 1.35;
}

/* ---------- FEATURES LIST (tighter + more overview) ---------- */
/* You already use check.svg as bullet :contentReference[oaicite:4]{index=4} */
.premium-accounts-page .container .accounts-grid .account ul{
  margin: 12px 0 14px;
  display: grid;
  gap: 8px;
}

.premium-accounts-page .container .accounts-grid .account ul li{
  margin: 0 !important;
  font-size: 15px;
  color: rgba(255,255,255,0.82);
  background-size: 16px 16px !important;
  padding-left: 26px !important;
  line-height: 1.25;
  opacity: .95;
}


/* ---------- TRUST BADGES (bottom row) ---------- */
.premium-accounts-page .container .accounts-grid .account .trust-row{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}

.premium-accounts-page .container .accounts-grid .account .trust-row .trust-badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  line-height: 1;
}

.premium-accounts-page .container .accounts-grid .account .trust-row .trust-badge i{
  font-size: 12px;
  opacity: .95;
}

.premium-accounts-page .container .accounts-grid .account .trust-row .trust-badge.is-accent{
  border-color: rgba(99,102,241,0.35);
  background: rgba(99,102,241,0.14);
}

/* ---------- FOOTER (price left, CTA right) ---------- */
.premium-accounts-page .container .accounts-grid .account .foot{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* price :contentReference[oaicite:5]{index=5} */
.premium-accounts-page .container .accounts-grid .account .foot .price{
  color: rgba(255,255,255,0.95);
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 18px;
  text-shadow: 0 10px 28px rgba(0,0,0,0.45);
}

/* CTA pill like lolboost ranked buttons */
.premium-accounts-page .container .accounts-grid .account .foot .buy-now{
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(99,102,241,0.95), rgba(99,102,241,0.72));
  box-shadow: 0 12px 26px rgba(99,102,241,0.25);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.premium-accounts-page .container .accounts-grid .account:hover .foot .buy-now{
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 0 0 1px rgba(99,102,241,0.55);
}


/* ---------- SOLD OUT (stronger) ---------- */
.premium-accounts-page .container .accounts-grid .account.is-sold-out{
  border-color: rgba(239,68,68,0.35);
}

.premium-accounts-page .container .accounts-grid .account.is-sold-out::after{
  background:
    radial-gradient(800px 260px at 20% 0%, rgba(239,68,68,0.14), rgba(0,0,0,0) 55%),
    radial-gradient(700px 260px at 80% 20%, rgba(99,102,241,0.12), rgba(0,0,0,0) 60%);
}

.premium-accounts-page .container .accounts-grid .account.is-sold-out:hover{
  border-color: rgba(239,68,68,0.55);
  box-shadow: 0 0 0 2px rgba(239,68,68,0.55);
}

.premium-accounts-page .container .accounts-grid .account .sold-ribbon{
  position:absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  background: linear-gradient(180deg, rgba(239,68,68,0.95), rgba(239,68,68,0.70));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 14px 34px rgba(239,68,68,0.18);
}

.premium-accounts-page .container .accounts-grid .account .foot .sold{
  background: linear-gradient(180deg, rgba(239,68,68,0.20), rgba(255,255,255,0.06));
  border: 1px solid rgba(239,68,68,0.35);
  color: rgba(255,255,255,0.80);
}

/* SOLD OUT look (keep your class, just style it tighter) :contentReference[oaicite:6]{index=6} */
.premium-accounts-page .container .accounts-grid .account .foot .sold{
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 800;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55);
}

/* ---------- density tweaks for better overview ---------- */
@media (min-width: 900px){
  .premium-accounts-page .container .accounts-grid .account{
    padding: 18px; /* overrides your current padding to be more compact */
  }

  .premium-accounts-page .container .accounts-grid .account .head{
    min-height: 62px; /* keeps title area consistent even with icon top-right */
  }
}

/* Mobile: keep icon top-right but scale a bit */
@media (max-width: 900px){
  .premium-accounts-page .container .accounts-grid .account .head{
    padding-right: 64px;
  }
  .premium-accounts-page .container .accounts-grid .account .head .image-wrapper{
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border-radius: 16px;
  }
  .premium-accounts-page .container .accounts-grid .account .head .image-wrapper img{
    width: 28px !important;
    height: 28px !important;
  }
}


/* --- Layout: price + CTA on first row, trust badges under them --- */
.premium-accounts-page .container .accounts-grid .account .foot{
  flex-wrap: wrap;
  gap: 0.9vw 1.1vw;
  align-items: center;
}

.premium-accounts-page .container .accounts-grid .account .foot .price{
  font-size: 2.15vw;
  font-weight: 900;
  order: 1;
}

.premium-accounts-page .container .accounts-grid .account .foot form,
.premium-accounts-page .container .accounts-grid .account .foot .sold{
  order: 2;
  margin-left: auto;
}

.premium-accounts-page .container .accounts-grid .account .foot .trust-row{
  width: 100%;
  order: 3;
  margin: 0.95vw 0 0;
}

/* Sold-out CTA: big, bold, red (replaces Buy Now spot) */
.premium-accounts-page .container .accounts-grid .account .foot .sold.sold-cta{
  padding: 0.75vw 1.4vw;
  border-radius: 999px;
  font-size: 1.05vw;
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.98);
  background: linear-gradient(180deg, rgba(239,68,68,0.98), rgba(239,68,68,0.74));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 44px rgba(239,68,68,0.25);
  cursor: not-allowed;
}


/* --- Card header: BIG server top-left + BIG rank top-right --- */
.premium-accounts-page .container .accounts-grid .account .head{
  position: relative;
  padding-top: 4.2vw; /* space for big corner badges */
}

.premium-accounts-page .container .accounts-grid .account .head .corner-meta{
  position: static; /* neutralize centered layout */
}

/* Server badge: top-left */
.premium-accounts-page .container .accounts-grid .account .head .server-badge{
  position: absolute;
  top: 1.0vw;
  left: 1.0vw;
  padding: 0.55vw 0.95vw;
  font-size: 0.92vw;
  border-radius: 999px;
}

/* Rank badge: top-right */
.premium-accounts-page .container .accounts-grid .account .head .rank-badge{
  position: absolute;
  top: 0.85vw;
  right: 0.95vw;
  width: 3.35vw;
  height: 3.35vw;
  border-radius: 999px;
}

.premium-accounts-page .container .accounts-grid .account .head .rank-badge img{
  width: 2.45vw;
}

/* Keep title centered under the badges */
.premium-accounts-page .container .accounts-grid .account .head h4{
  text-align: center;
  margin: 0;
}


/* ================================
   UI polish (scanability + conversion)
   ================================ */

/* Card hover: more premium lift */
.premium-accounts-page .container .accounts-grid .account{
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
}
.premium-accounts-page .container .accounts-grid .account:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
}

/* Title: clamp to 2 lines + better spacing */
.premium-accounts-page .container .accounts-grid .account .head h4{
  max-width: 92%;
  margin: 0 auto;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: balance;
}

/* Features: make first 2 feel more important */
.premium-accounts-page .container .accounts-grid .account ul li:nth-child(-n+2){
  font-weight: 700;
  color: rgba(255,255,255,0.95);
}
.premium-accounts-page .container .accounts-grid .account ul li:nth-child(n+3){
  color: rgba(255,255,255,0.78);
}

/* CTA: stronger, clearer hover */
.premium-accounts-page .container .accounts-grid .account .buy-now{
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.premium-accounts-page .container .accounts-grid .account .buy-now:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(99,102,241,0.30);
  filter: brightness(1.06);
}

/* Trust badges: hierarchy (Trusted strongest, others muted) */
.premium-accounts-page .container .accounts-grid .account .trust-row .trust-badge{
  opacity: 0.82;
}
.premium-accounts-page .container .accounts-grid .account .trust-row .trust-badge.is-accent{
  opacity: 1;
  box-shadow: 0 14px 34px rgba(99,102,241,0.18);
}

/* SOLD OUT: make card obviously unavailable + button eye-catchy */
.premium-accounts-page .container .accounts-grid .account.is-sold-out{
  filter: saturate(0.85);
}
.premium-accounts-page .container .accounts-grid .account.is-sold-out:hover{
  transform: translateY(-2px); /* less lift */
}

/* Sold-out CTA: bolder + more contrast */
.premium-accounts-page .container .accounts-grid .account .foot .sold.sold-cta{
  font-size: 1.12vw;
  box-shadow: 0 22px 60px rgba(239,68,68,0.28);
}
.premium-accounts-page .container .accounts-grid .account.is-sold-out .buy-now{
  pointer-events: none;
  opacity: 0.65;
}

/* Corner badges: slightly clearer separation from background */
.premium-accounts-page .container .accounts-grid .account .head .server-badge,
.premium-accounts-page .container .accounts-grid .account .head .rank-badge{
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
}


/* ================================
   MORE noticeable UI upgrade (stronger)
   ================================ */

/* Stronger card surface + glow border */
.premium-accounts-page .container .accounts-grid .account{
  background: radial-gradient(120% 140% at 20% 10%, rgba(99,102,241,0.10), rgba(0,0,0,0) 55%),
              rgba(16, 14, 33, 0.55);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 55px rgba(0,0,0,0.40);
}
.premium-accounts-page .container .accounts-grid .account::after{
  opacity: 0.75;
}
.premium-accounts-page .container .accounts-grid .account:hover{
  border-color: rgba(99,102,241,0.35);
  box-shadow: 0 26px 85px rgba(0,0,0,0.55);
}

/* Make the header area more distinct */
.premium-accounts-page .container .accounts-grid .account .head{
  padding-top: 4.6vw;
  padding-bottom: 0.7vw;
}
.premium-accounts-page .container .accounts-grid .account ul{
  margin-top: 0.9vw;
}

/* More premium separators */
.premium-accounts-page .container .accounts-grid .account hr,
.premium-accounts-page .container .accounts-grid .account .divider{
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.12), rgba(255,255,255,0));
  opacity: 1;
}

/* Price even more dominant */
.premium-accounts-page .container .accounts-grid .account .foot .price{
  font-size: 2.45vw;
  letter-spacing: -0.02em;
}

/* CTA: larger + more glow */
.premium-accounts-page .container .accounts-grid .account .buy-now{
  padding: 0.85vw 1.55vw;
  font-size: 1.02vw;
  border-radius: 999px;
  box-shadow: 0 18px 46px rgba(99,102,241,0.25);
}
.premium-accounts-page .container .accounts-grid .account .buy-now:hover{
  box-shadow: 0 26px 70px rgba(99,102,241,0.38);
}

/* Trust badges: smaller and cleaner, sit tighter */
.premium-accounts-page .container .accounts-grid .account .foot .trust-row{
  gap: 0.55vw;
}
.premium-accounts-page .container .accounts-grid .account .trust-row .trust-badge{
  padding: 0.32vw 0.65vw;
  font-size: 0.70vw;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
}

/* Corner badges: bolder */
.premium-accounts-page .container .accounts-grid .account .head .server-badge{
  padding: 0.62vw 1.05vw;
  font-size: 1.02vw;
  border: 1px solid rgba(255,255,255,0.14);
}
.premium-accounts-page .container .accounts-grid .account .head .rank-badge{
  width: 3.75vw;
  height: 3.75vw;
}
.premium-accounts-page .container .accounts-grid .account .head .rank-badge img{
  width: 2.7vw;
}

/* SOLD OUT: unmistakable */
.premium-accounts-page .container .accounts-grid .account.is-sold-out{
  filter: saturate(0.78) brightness(0.92);
}
.premium-accounts-page .container .accounts-grid .account .foot .sold.sold-cta{
  background: linear-gradient(180deg, rgba(255,60,60,0.98), rgba(190,30,30,0.78));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 26px 75px rgba(239,68,68,0.33);
}



/* Rank color tokens */
:root{
  --unranked-main: #4f4f4a;
  --iron-main: #605157;
  --bronze-main: #91553d;
  --silver-main: #7b989d;
  --gold-main: #d7893e;
  --platinum-main: #52a09b;
  --emerald-main: #3db666;
  --diamond-main: #5b77e0;
  --master-main: #a649e3;
  --grandmaster-main: #d8484b;
  --challenger-main: #facd7e;
}


/* Rank badge border + glow based on rank
   Usage option A (recommended): add data-rank="gold" on .account element
   Usage option B: add class "rank-gold" on .account element
*/
.premium-accounts-page .container .accounts-grid .account{
  --rank-color: rgba(255,255,255,0.14);
}

.premium-accounts-page .container .accounts-grid .account .head .rank-badge{
  border: 1px solid color-mix(in srgb, var(--rank-color) 55%, rgba(255,255,255,0.14));
  box-shadow:
    0 14px 40px rgba(0,0,0,0.35),
    0 0 0 2px color-mix(in srgb, var(--rank-color) 45%, transparent),
    0 0 28px color-mix(in srgb, var(--rank-color) 40%, transparent);
}

/* A) data-rank mapping */
.premium-accounts-page .container .accounts-grid .account[data-rank="unranked"]{ --rank-color: var(--unranked-main); }
.premium-accounts-page .container .accounts-grid .account[data-rank="iron"]{ --rank-color: var(--iron-main); }
.premium-accounts-page .container .accounts-grid .account[data-rank="bronze"]{ --rank-color: var(--bronze-main); }
.premium-accounts-page .container .accounts-grid .account[data-rank="silver"]{ --rank-color: var(--silver-main); }
.premium-accounts-page .container .accounts-grid .account[data-rank="gold"]{ --rank-color: var(--gold-main); }
.premium-accounts-page .container .accounts-grid .account[data-rank="platinum"]{ --rank-color: var(--platinum-main); }
.premium-accounts-page .container .accounts-grid .account[data-rank="emerald"]{ --rank-color: var(--emerald-main); }
.premium-accounts-page .container .accounts-grid .account[data-rank="diamond"]{ --rank-color: var(--diamond-main); }
.premium-accounts-page .container .accounts-grid .account[data-rank="master"]{ --rank-color: var(--master-main); }
.premium-accounts-page .container .accounts-grid .account[data-rank="grandmaster"]{ --rank-color: var(--grandmaster-main); }
.premium-accounts-page .container .accounts-grid .account[data-rank="challenger"]{ --rank-color: var(--challenger-main); }

/* B) class mapping (fallback) */
.premium-accounts-page .container .accounts-grid .account.rank-unranked{ --rank-color: var(--unranked-main); }
.premium-accounts-page .container .accounts-grid .account.rank-iron{ --rank-color: var(--iron-main); }
.premium-accounts-page .container .accounts-grid .account.rank-bronze{ --rank-color: var(--bronze-main); }
.premium-accounts-page .container .accounts-grid .account.rank-silver{ --rank-color: var(--silver-main); }
.premium-accounts-page .container .accounts-grid .account.rank-gold{ --rank-color: var(--gold-main); }
.premium-accounts-page .container .accounts-grid .account.rank-platinum{ --rank-color: var(--platinum-main); }
.premium-accounts-page .container .accounts-grid .account.rank-emerald{ --rank-color: var(--emerald-main); }
.premium-accounts-page .container .accounts-grid .account.rank-diamond{ --rank-color: var(--diamond-main); }
.premium-accounts-page .container .accounts-grid .account.rank-master{ --rank-color: var(--master-main); }
.premium-accounts-page .container .accounts-grid .account.rank-grandmaster{ --rank-color: var(--grandmaster-main); }
.premium-accounts-page .container .accounts-grid .account.rank-challenger{ --rank-color: var(--challenger-main); }




/* ================================
   FIX: Rank border/glow visibility (no color-mix dependency)
   ================================ */
.premium-accounts-page .container .accounts-grid .account{
  --rank-color: rgba(255,255,255,0.22);
}

/* Make rank badge border very obvious */
.premium-accounts-page .container .accounts-grid .account .head .rank-badge{
  border: 2px solid var(--rank-color) !important;
  box-shadow:
    0 14px 40px rgba(0,0,0,0.35),
    0 0 0 3px rgba(0,0,0,0.35),
    0 0 26px var(--rank-color) !important;
}

/* Ensure the rank icon itself pops */
.premium-accounts-page .container .accounts-grid .account .head .rank-badge{
  background: rgba(10, 9, 22, 0.78) !important;
}

/* Data-rank mapping (strong) */
.premium-accounts-page .container .accounts-grid .account[data-rank="unranked"]{ --rank-color: rgba(79,79,74,0.95); }
.premium-accounts-page .container .accounts-grid .account[data-rank="iron"]{ --rank-color: rgba(96,81,87,0.95); }
.premium-accounts-page .container .accounts-grid .account[data-rank="bronze"]{ --rank-color: rgba(145,85,61,0.95); }
.premium-accounts-page .container .accounts-grid .account[data-rank="silver"]{ --rank-color: rgba(123,152,157,0.95); }
.premium-accounts-page .container .accounts-grid .account[data-rank="gold"]{ --rank-color: rgba(215,137,62,0.98); }
.premium-accounts-page .container .accounts-grid .account[data-rank="platinum"]{ --rank-color: rgba(82,160,155,0.98); }
.premium-accounts-page .container .accounts-grid .account[data-rank="emerald"]{ --rank-color: rgba(61,182,102,0.98); }
.premium-accounts-page .container .accounts-grid .account[data-rank="diamond"]{ --rank-color: rgba(91,119,224,0.98); }
.premium-accounts-page .container .accounts-grid .account[data-rank="master"]{ --rank-color: rgba(166,73,227,0.98); }
.premium-accounts-page .container .accounts-grid .account[data-rank="grandmaster"]{ --rank-color: rgba(216,72,75,0.98); }
.premium-accounts-page .container .accounts-grid .account[data-rank="challenger"]{ --rank-color: rgba(250,205,126,0.98); }

/* Optional: subtle rank tint on card border */
.premium-accounts-page .container .accounts-grid .account::after{
  background: linear-gradient(200deg, var(--rank-color) 0%, rgba(99,102,241,0.55) 55%, rgba(255,255,255,0.35) 100%) !important;
  opacity: 0.65;
}

/* ================================
   NEW: Trust badges redesign (clean strip)
   ================================ */
.premium-accounts-page .container .accounts-grid .account .foot .trust-row{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6vw;
  width: 100%;
  margin-top: 0.95vw;
}

.premium-accounts-page .container .accounts-grid .account .trust-row .trust-badge{
  justify-content: center;
  padding: 0.55vw 0.7vw;
  font-size: 0.78vw;
  font-weight: 900;
  letter-spacing: 0.02em;
  border-radius: 0.85vw;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.premium-accounts-page .container .accounts-grid .account .trust-row .trust-badge i{
  opacity: 0.95;
}

/* Make "Trusted" pop as primary */
.premium-accounts-page .container .accounts-grid .account .trust-row .trust-badge.is-accent{
  background: linear-gradient(180deg, rgba(99,102,241,0.20), rgba(255,255,255,0.05));
  border-color: rgba(99,102,241,0.35);
  box-shadow: 0 14px 40px rgba(99,102,241,0.16);
}



/* ================================
   Requested tweaks: bigger H4 + server icon in badge
   ================================ */

/* Bigger title */
.premium-accounts-page .container .accounts-grid .account .head h4{
  font-size: clamp(15px, 1.1vw, 22px) !important;
  font-weight: 800 !important;
}

/* Server badge with icon */
.premium-accounts-page .container .accounts-grid .account .head .server-badge{
  display: inline-flex;
  align-items: center;
  gap: 0.45vw;
  padding: 0.62vw 1.05vw; /* keep it big */
}

.premium-accounts-page .container .accounts-grid .account .head .server-badge i{
  font-size: 1.05em;
  opacity: 0.95;
}



/* ================================
   Mobile readability overhaul
   ================================ */
@media (max-width: 768px){
  .premium-accounts-page .container{
    max-width: 94% !important;
    margin: 18px auto !important;
  }

  .premium-accounts-page .container .accounts-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .premium-accounts-page .container .accounts-grid .account{
    padding: 16px !important;
    border-radius: 16px !important;
  }

  /* Corner badges */
  .premium-accounts-page .container .accounts-grid .account .head{
    padding-top: 64px !important;
    padding-bottom: 8px !important;
  }

  .premium-accounts-page .container .accounts-grid .account .head .server-badge{
    top: 14px !important;
    left: 14px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    gap: 8px !important;
  }

  .premium-accounts-page .container .accounts-grid .account .head .rank-badge{
    top: 12px !important;
    right: 12px !important;
    width: 52px !important;
    height: 52px !important;
  }

  .premium-accounts-page .container .accounts-grid .account .head .rank-badge img{
    width: 38px !important;
  }

  /* Title */
  .premium-accounts-page .container .accounts-grid .account .head h4{
    font-size: 16px !important;
    line-height: 1.25 !important;
    max-width: 95% !important;
  }

  /* Features list */
  .premium-accounts-page .container .accounts-grid .account ul{
    margin: 12px 0 14px !important;
  }
  .premium-accounts-page .container .accounts-grid .account ul li{
    font-size: 13px !important;
    background-size: 16px 16px !important;
    padding-left: 24px !important;
    margin-bottom: 8px !important;
  }

  /* Footer: price + CTA */
  .premium-accounts-page .container .accounts-grid .account .foot{
    gap: 12px !important;
  }

  .premium-accounts-page .container .accounts-grid .account .foot .price{
    font-size: 28px !important;
  }

  .premium-accounts-page .container .accounts-grid .account .buy-now,
  .premium-accounts-page .container .accounts-grid .account .foot .sold.sold-cta{
    padding: 12px 18px !important;
    font-size: 14px !important;
  }

  /* Trust badges strip */
  .premium-accounts-page .container .accounts-grid .account .foot .trust-row{
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
  .premium-accounts-page .container .accounts-grid .account .trust-row .trust-badge{
    padding: 10px 8px !important;
    font-size: 11px !important;
    border-radius: 12px !important;
  }

  /* Reduce visual noise */
  .premium-accounts-page .container .accounts-grid .account:hover{
    transform: none !important;
  }
}

/* ================================
   Premium Accounts – SEO block (Rank-Boost style with image)
   ================================ */
.premium-accounts-page .container .seo-hero{
  margin: 6.2vw auto 4.2vw;
  padding: 5.2vw 4.2vw;
  border-radius: 3.25vw;
  border: 0.104vw solid rgba(114, 110, 142, 0.12);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(99,102,241,0.16) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(120% 120% at 100% 0%, rgba(99,102,241,0.10) 0%, rgba(0,0,0,0) 60%),
    url('../images/boost-forms/about-bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  position: relative;
  overflow: hidden;
}

.premium-accounts-page .container .seo-hero::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13,12,24,0.92) 0%, rgba(13,12,24,0.78) 46%, rgba(13,12,24,0.18) 100%);
  pointer-events: none;
}

.premium-accounts-page .container .seo-hero__content{
  position: relative;
  z-index: 1;
  max-width: 46vw;
}

.premium-accounts-page .container .seo-hero h2{
  font-size: 3.1vw;
  font-weight: 700;
  margin-bottom: 1.25vw;
}

.premium-accounts-page .container .seo-hero p{
  font-size: 1.05vw;
  line-height: 2.15vw;
  color: rgba(198, 194, 224, 0.84);
  font-weight: 300;
  margin-bottom: 1.05vw;
}

.premium-accounts-page .container .seo-below{
  margin: 0 auto 6vw;
  max-width: 78vw;
}

.premium-accounts-page .container .seo-question{
  text-align: center;
  font-size: 3.0vw;
  line-height: 3.7vw;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 5.4vw auto 2.2vw;
}

.premium-accounts-page .container .seo-block{
  max-width: 70vw;
  margin: 0 auto;
}

.premium-accounts-page .container .seo-block p{
  font-size: 1.05vw;
  line-height: 2.15vw;
  color: rgba(198, 194, 224, 0.78);
  font-weight: 300;
  margin-bottom: 1.05vw;
}

/* Mobile: make it readable + stack-friendly */
@media (max-width: 900px){
  .premium-accounts-page .container .seo-hero{
    margin: 44px auto 22px;
    padding: 34px 20px;
    border-radius: 26px;
    background-size: 240px auto;
    padding-right: 180px;
    background-position: right 16px bottom 14px;
  }

  .premium-accounts-page .container .seo-hero::after{
    background: linear-gradient(90deg, rgba(13,12,24,0.96) 0%, rgba(13,12,24,0.88) 58%, rgba(13,12,24,0.18) 100%);
  }

  .premium-accounts-page .container .seo-hero__content{
    max-width: 100%;
  }

  .premium-accounts-page .container .seo-hero h2{
    font-size: 30px;
    margin-bottom: 14px;
  }

  .premium-accounts-page .container .seo-hero p,
  .premium-accounts-page .container .seo-block p{
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 12px;
  }

  .premium-accounts-page .container .seo-below{
    max-width: 92vw;
    margin-bottom: 44px;
  }

  .premium-accounts-page .container .seo-question{
    font-size: 28px;
    line-height: 34px;
    margin: 34px auto 18px;
  }

  .premium-accounts-page .container .seo-block{
    max-width: 100%;
  }
}


@media (max-width: 480px){
  .premium-accounts-page .container .seo-hero{
    background-size: 190px auto;
    padding-right: 140px;
  }
}



/* ================================
   Premium Accounts FAQ: match Rank-Boost style (centered, not full width)
   ================================ */
.premium-accounts-page .sec-faqs{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.premium-accounts-page .sec-faqs .top{
  max-width: 1180px;
  margin: 0 auto 34px;
  padding: 0 18px;
}

.premium-accounts-page .sec-faqs .accordion{
  max-width: 1180px;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
  box-shadow: 0 20px 70px rgba(0,0,0,0.35);
}

.premium-accounts-page .sec-faqs .accordion{
  border-top: 1px solid rgba(255,255,255,.10); /* keep top line subtle inside container */
}

.premium-accounts-page .sec-faqs .accordion .accordion-item{
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.premium-accounts-page .sec-faqs .accordion .accordion-item:last-child{
  border-bottom: none;
}

.premium-accounts-page .sec-faqs .accordion-header{
  padding: 22px 24px;
}

.premium-accounts-page .sec-faqs .accordion-header h5{
  font-size: 17px;
  line-height: 1.35;
}

.premium-accounts-page .sec-faqs .accordion-content{
  padding: 0 24px 22px;
}

@media (max-width: 900px){
  .premium-accounts-page .sec-faqs .top{
    padding: 0 14px;
    margin-bottom: 18px;
  }
  .premium-accounts-page .sec-faqs .accordion{
    margin: 0 14px;
    border-radius: 18px;
  }
  .premium-accounts-page .sec-faqs .accordion-header{
    padding: 18px 16px;
  }
  .premium-accounts-page .sec-faqs .accordion-header h5{
    font-size: 15px;
  }
  .premium-accounts-page .sec-faqs .accordion-content{
    padding: 0 16px 18px;
  }
}


/* ================================
   How It Works (Premium Accounts)
   ================================ */
.premium-accounts-page .how-it-works{
  margin: 70px 0;
}

.premium-accounts-page .how-it-works .how-inner{
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.premium-accounts-page .how-it-works h2{
  font-size: clamp(26px, 2.6vw, 44px);
  font-weight: 900;
  margin: 0 0 10px;
}

.premium-accounts-page .how-it-works .how-sub{
  margin: 0 0 26px;
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.6;
  color: rgba(180, 176, 205, 0.85);
}

.premium-accounts-page .how-it-works .how-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.premium-accounts-page .how-it-works .how-card{
  text-align: left;
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: rgba(16, 14, 33, 0.55);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 55px rgba(0,0,0,0.35);
  position: relative;
  overflow: hidden;
}

.premium-accounts-page .how-it-works .how-card::before{
  content:"";
  position:absolute;
  inset:-40% -20% auto -20%;
  height: 220%;
  background: radial-gradient(circle at 30% 30%, rgba(99,102,241,.18), transparent 55%);
  pointer-events:none;
}

.premium-accounts-page .how-it-works .how-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.premium-accounts-page .how-it-works .how-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.25);
  box-shadow: 0 16px 40px rgba(99,102,241,0.12);
}

.premium-accounts-page .how-it-works .how-icon i{
  font-size: 18px;
  color: rgba(255,255,255,0.95);
}

.premium-accounts-page .how-it-works .how-step{
  min-width: 34px;
  height: 34px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(99,102,241,0.95);
  color: rgba(255,255,255,0.98);
  box-shadow: 0 18px 44px rgba(99,102,241,0.25);
}

.premium-accounts-page .how-it-works .how-card h3{
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 900;
}

.premium-accounts-page .how-it-works .how-card p{
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(180, 176, 205, 0.85);
}

.premium-accounts-page .how-it-works .how-bottom{
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(16, 14, 33, 0.40);
  border: 1px dashed rgba(255,255,255,0.12);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}

.premium-accounts-page .how-it-works .how-note{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(180, 176, 205, 0.85);
  font-size: 13.5px;
  text-align: left;
}

.premium-accounts-page .how-it-works .how-note i{
  color: rgba(99,102,241,0.95);
}

.premium-accounts-page .how-it-works .how-cta{
  border: none;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13.5px;
  color: rgba(255,255,255,0.98);
  background: linear-gradient(180deg, rgba(99,102,241,0.98), rgba(99,102,241,0.70));
  box-shadow: 0 18px 46px rgba(99,102,241,0.25);
  display:inline-flex;
  align-items:center;
  gap: 10px;
  white-space: nowrap;
}

.premium-accounts-page .how-it-works .how-cta:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}

@media (max-width: 1024px){
  .premium-accounts-page .how-it-works .how-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px){
  .premium-accounts-page .how-it-works{
    margin: 32px 0;
  }
  .premium-accounts-page .how-it-works .how-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .premium-accounts-page .how-it-works .how-bottom{
    flex-direction: column;
    align-items: stretch;
  }
  .premium-accounts-page .how-it-works .how-cta{
    width: 100%;
    justify-content: center;
  }
}



/* ================================
   FAQ background fix: match site cards (remove flat grey panel)
   ================================ */
.premium-accounts-page .sec-faqs .accordion{
  background: rgba(16, 14, 33, 0.55) !important;
}

.premium-accounts-page .sec-faqs .accordion::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(120% 140% at 20% 10%, rgba(99,102,241,0.12), rgba(0,0,0,0) 55%);
  opacity: 1;
}

.premium-accounts-page .sec-faqs .accordion{
  position: relative;
}

.premium-accounts-page .sec-faqs .accordion .accordion-item{
  background: transparent !important;
}

.premium-accounts-page .sec-faqs .accordion-header,
.premium-accounts-page .sec-faqs .accordion-content{
  position: relative;
  z-index: 1;
}

/* Make separators softer */
.premium-accounts-page .sec-faqs .accordion .accordion-item{
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}



/* ================================
   How It Works cards hover (accent border #6366f1)
   ================================ */
.premium-accounts-page .how-it-works .how-card{
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
}

.premium-accounts-page .how-it-works .how-card:hover{
  transform: translateY(-4px);
  border-color: rgba(99,102,241,0.55);
  box-shadow:
    0 26px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(99,102,241,0.25);
}

.premium-accounts-page .how-it-works .how-card:hover .how-icon{
  border-color: rgba(99,102,241,0.55);
  background: rgba(99,102,241,0.18);
  box-shadow: 0 18px 46px rgba(99,102,241,0.18);
}

.premium-accounts-page .how-it-works .how-card:hover .how-step{
  filter: brightness(1.04);
  box-shadow: 0 20px 52px rgba(99,102,241,0.30);
}

@media (max-width: 768px){
  .premium-accounts-page .how-it-works .how-card:hover{
    transform: none;
  }
}



/* ================================
   FAQ text color: white
   ================================ */
.premium-accounts-page .sec-faqs .accordion-header h5,
.premium-accounts-page .sec-faqs .accordion-header,
.premium-accounts-page .sec-faqs .accordion-content,
.premium-accounts-page .sec-faqs .accordion-content p{
  color: rgba(255,255,255,0.92) !important;
}

/* Keep secondary text slightly muted for readability */
.premium-accounts-page .sec-faqs .accordion-content{
  color: rgba(255,255,255,0.82) !important;
}



/* ================================
   FAQ background color: #0e0d1c
   ================================ */
.premium-accounts-page .sec-faqs .accordion{
  background: #0e0d1c !important;
}

/* keep subtle highlight but lower opacity so it doesn't change base color */
.premium-accounts-page .sec-faqs .accordion::before{
  opacity: 0.55 !important;
}

/* =====================================
   Small Trust Badges (Account Page)
   ===================================== */

.trust-badges {
  margin-top: 0.938vw;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.625vw;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.365vw 0.833vw;

  font-size: 0.729vw;
  font-weight: 500;
  color: #cfd3ff;

  background: rgba(15, 16, 38, 0.7);
  border: 0.052vw solid rgba(99, 102, 241, 0.35);
  border-radius: 2.604vw;

  backdrop-filter: blur(6px);
  transition: all 0.2s ease;
}

.trust-badge i {
  font-size: 0.729vw;
  color: #6366f1;
}

/* Hover-Effekt */
.trust-badge:hover {
  background: rgba(99, 102, 241, 0.12);
  border-color: #6366f1;
  color: #ffffff;
}

/* Mobile fix: vw wird zu klein -> override mit Grid */
@media (max-width: 900px) {
  .trust-badges{
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;  /* 2 gleich breite Badges */
    gap: 10px;
    justify-content: stretch;
  }

  .trust-badge{
    width: 100%;
    justify-content: center;
    padding: 10px 10px;

    font-size: 12px;
    line-height: 1;
    border-width: 1px;

    border-radius: 12px; /* weniger pillig = cleaner auf mobile */
  }

  .trust-badge i{
    font-size: 12px;
  }
}
.trust-badge{
    padding: 8px 12px;
    font-size: 12px;          /* oder: clamp(12px, 3.2vw, 14px) */
    border-width: 1px;
  }

  .trust-badge i{
    font-size: 12px;
  }


/* ==============================
   Blog + Article readability v5
   - no cards, keep original layout
   - more whitespace + better typography
   - back-to-top avoids Tawk widget
   ============================== */

/* Blog listing: slightly wider container + calmer spacing */
.blogs-page .container{
  max-width: min(1240px, 92vw);
}
.blogs-page .container .blogs{
  gap: clamp(14px, 1.6vw, 26px);
}
.blogs-page .container .blogs .blog{
  border-color: rgba(255,255,255,0.08);
}
.blogs-page .container .blogs .blog .body h3{
  line-height: 1.25;
}
.blogs-page .container .blogs .blog .body p{
  line-height: 1.65;
  opacity: 0.9;
}

/* Article: tighter hero spacing + better reading width */
.article-page .header{
  margin: clamp(72px, 10vw, 150px) 0 clamp(26px, 4vw, 64px);
}
.article-page .container{
  max-width: min(1100px, 94vw);
  padding: 0 clamp(16px, 2vw, 28px);
}

/* Keep article content in a readable column */
.article-page .container article.article-content{
  max-width: 860px;
  margin: 0 auto;
}

/* Typography */
.article-page .container article.article-content h2{
  font-size: clamp(22px, 1.8vw, 32px);
  line-height: 1.25;
  margin: clamp(26px, 3.2vw, 44px) 0 clamp(10px, 1.2vw, 16px);
}
.article-page .container article.article-content h3{
  font-size: clamp(18px, 1.4vw, 24px);
  line-height: 1.28;
  margin: clamp(18px, 2.4vw, 34px) 0 clamp(8px, 1vw, 14px);
}
.article-page .container article.article-content p,
.article-page .container article.article-content li{
  font-size: clamp(15.5px, 1.05vw, 18px);
  line-height: 1.9;
  color: rgba(205, 201, 226, 0.88);
}
.article-page .container article.article-content p{
  margin-bottom: clamp(14px, 1.6vw, 22px);
}

/* Images / embeds */
.article-page .container article.article-content img{
  width: 100%;
  height: auto;
  border-radius: 16px;
  margin: clamp(18px, 2.2vw, 32px) 0;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}
.article-page .container article.article-content iframe,
.article-page .container article.article-content video{
  max-width: 100%;
  width: 100%;
  border-radius: 16px;
}

/* Lists */
.article-page .container article.article-content ul,
.article-page .container article.article-content ol{
  padding-left: 1.25rem;
  margin: 0 0 clamp(14px, 1.6vw, 22px);
}
.article-page .container article.article-content li{
  margin-bottom: 0.55rem;
}

/* Quotes + code */
.article-page .container article.article-content blockquote{
  margin: clamp(18px, 2.2vw, 32px) 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(14px, 2.2vw, 22px);
  border-left: 3px solid rgba(99,102,241,0.9);
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
}
.article-page .container article.article-content code{
  background: rgba(255,255,255,0.06);
  padding: 0.15em 0.35em;
  border-radius: 8px;
}
.article-page .container article.article-content pre{
  background: rgba(0,0,0,0.35);
  padding: 16px;
  border-radius: 16px;
  overflow: auto;
}

/* Subtle section separation when authors paste long content */
.article-page .container article.article-content h2 + p{
  margin-top: 0;
}
.article-page .container article.article-content h2:not(:first-child){
  padding-top: 6px;
}

/* Back-to-top button: support multiple selectors (in case markup differs)
   - offset from bottom-right so Tawk doesn't cover it */
#backToTop,
.back-to-top,
.back-to-top-btn,
.scroll-to-top,
.scrollTop{
  position: fixed;
  right: 28px;
  bottom: 128px;
  z-index: 9998;
}
@media (max-width: 768px){
  #backToTop,
  .back-to-top,
  .back-to-top-btn,
  .scroll-to-top,
  .scrollTop{
    right: 18px;
    bottom: 148px;
  }
  .article-page .container article.article-content{
    max-width: 100%;
  }
}

/* ===== Article tables: visible borders + spacing ===== */
.article-page .container article table{
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  border: 1px solid rgba(114,110,142,0.18);
  border-radius: 14px;
  overflow: hidden;
}

.article-page .container article th,
.article-page .container article td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(114,110,142,0.14);
  border-right: 1px solid rgba(114,110,142,0.10);
  vertical-align: top;
}

.article-page .container article tr:last-child td,
.article-page .container article tr:last-child th{
  border-bottom: none;
}

.article-page .container article th{
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.03);
}

.article-page .container article tr:nth-child(even) td{
  background: rgba(255,255,255,0.015);
}

/* Nested lists (if present) */
.article-page .container article ul ul,
.article-page .container article ol ol{
  margin-top: 8px;
  margin-bottom: 8px;
}


/* =========================================================
   Article UI Upgrade (TOC + Progress + Meta + BackToTop)
   Scoped to .article-page so it won't affect other pages.
   ========================================================= */

.article-page .header{
  padding-top: 7.5vw; /* account for fixed navbar */
  text-align: center;
  max-width: 70rem;
  margin: 0 auto;
}

.article-page .container{
  width: min(1100px, calc(100% - 8vw));
  margin: 0 auto;
  padding: 2.4vw 0 5vw;
}

/* Layout: TOC + Content */
.article-page .article-layout{
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 34px);
  align-items: start;
  margin-top: clamp(14px, 2vw, 28px);
}

/* Small meta block (date + reading time + share) */
.article-page .article-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 0.13vw solid #232040;
  background: rgba(10, 10, 24, 0.55);
  backdrop-filter: blur(10px);
}

.article-page .article-topbar .meta-left{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  color: #726e8e;
  font-size: 0.95rem;
}

.article-page .article-topbar .meta-left i{ color: #6366f1; }

.article-page .article-topbar .meta-right{
  display: flex;
  align-items: center;
  gap: 10px;
}

.article-page .article-topbar .meta-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 0.13vw solid #232040;
  background: rgba(0,0,0,0);
  color: #fff;
  cursor: pointer;
  transition: background-color .18s ease, transform .12s ease, border-color .18s ease;
  font-size: 0.92rem;
  user-select: none;
}

.article-page .article-topbar .meta-btn:hover{
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.45);
  transform: translateY(-1px);
}

.article-page .article-topbar .meta-btn i{ color: #6366f1; }

/* TOC */
.article-page .article-toc{
  position: sticky;
  top: clamp(88px, 9vw, 120px);
  border-radius: 20px;
  border: 0.13vw solid #232040;
  background: rgba(10, 10, 24, 0.55);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.article-page .article-toc .toc-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 0.13vw solid rgba(114,110,142,0.12);
}

.article-page .article-toc .toc-head h4{
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
}

.article-page .article-toc .toc-toggle{
  display: none;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 10px;
}

.article-page .article-toc .toc-toggle:hover{
  background: rgba(99, 102, 241, 0.12);
}

.article-page .article-toc nav{
  padding: 12px 10px 14px;
  max-height: calc(100vh - 190px);
  overflow: auto;
}

.article-page .article-toc a{
  display: block;
  padding: 8px 10px;
  border-radius: 12px;
  color: #cfd1ff;
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.25;
  opacity: .9;
  transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}

.article-page .article-toc a.toc-h3{
  padding-left: 22px;
  font-size: 0.9rem;
  opacity: .85;
}

.article-page .article-toc a:hover{
  background: rgba(99, 102, 241, 0.12);
  color: #fff;
  opacity: 1;
}

.article-page .article-toc a.active{
  background: rgba(99, 102, 241, 0.18);
  color: #fff;
  opacity: 1;
  border: 1px solid rgba(99, 102, 241, 0.35);
}

/* Article content card */
.article-page .article-card{
  border-radius: 24px;
  border: 0.13vw solid #232040;
  background: rgba(10, 10, 24, 0.35);
  padding: clamp(18px, 2.2vw, 30px);
}

/* Make your existing scoped typography apply (your other file used article.article-content) */
.article-page article.article-content{
  width: 100%;
}

/* Progress bar */
#readingProgress{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 1200;
  background: rgba(0,0,0,0);
}

#readingProgress .bar{
  height: 100%;
  width: 0%;
  background: #6366f1;
}

/* Back to top (uses your existing vibe) */
#backToTop{
  position: fixed;
  /* keep clear of live chat bubbles (e.g. Tawk) */
  right: calc(clamp(14px, 2vw, 22px) + 72px);
  bottom: calc(clamp(14px, 2vw, 22px) + 72px);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0.13vw solid #232040;
  background: rgba(10,10,24,0.75);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1200;
  transition: transform .12s ease, background-color .18s ease, border-color .18s ease;
  backdrop-filter: blur(10px);
}

#backToTop:hover{
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.45);
  transform: translateY(-2px);
}

/* Responsive: stack TOC */
@media (max-width: 980px){
  .article-page .article-layout{
    grid-template-columns: 1fr;
  }

  .article-page .article-toc{
    position: relative;
    top: auto;
  }

  .article-page .article-toc .toc-toggle{
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .article-page .article-toc nav{
    display: none;
    max-height: 50vh;
  }

  .article-page .article-toc.open nav{
    display: block;
  }

  .article-page .article-topbar{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Article header mobile fix: keep it centered + pushed down below navbar */
@media (max-width: 767px) {
  body.article-page .header {
    text-align: center !important;
    margin: 30.233vw 0 9.302vw !important;
  }
}

/* === Icon style cleanup (Champions + Languages) === */
/* Make champion + language icons look like role icons: no background, no double border */
.booster-card .champions img,
.boosterCard .champions img,
.booster-card .champions .champion,
.boosterCard .champions .champion,
.booster-card .champions a,
.boosterCard .champions a,
.booster-card .champions span,
.boosterCard .champions span,
.booster-card .languages img,
.boosterCard .languages img,
.booster-card .languages a,
.boosterCard .languages a,
.booster-card .languages span,
.boosterCard .languages span,
.booster-card .languages .lang,
.boosterCard .languages .lang{
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Keep the icons crisp and aligned */
.booster-card .champions img,
.boosterCard .champions img,
.booster-card .languages img,
.boosterCard .languages img{
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 8px; /* slight rounding, similar to role icons */
  object-fit: cover;
}

/* Ensure wrappers don't reintroduce styling */
.booster-card .champions a,
.boosterCard .champions a,
.booster-card .champions span,
.boosterCard .champions span,
.booster-card .languages a,
.boosterCard .languages a,
.booster-card .languages span,
.boosterCard .languages span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   BOOSTERS VIEW – polish: rounded cover top + hover borders
   Requested: cover rounded at top, hover border color #6366f1
   ========================================================= */

/* 1) Cover: round ONLY the top corners (desktop + mobile) */
.boosters-view .main-content .cover{
  border-top-left-radius: 3.125vw !important;
  border-top-right-radius: 3.125vw !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  overflow: hidden; /* clip background/image to rounded corners */
}

/* Mobile size uses different radius in your mobile rules */
@media (max-width: 768px){
  .boosters-view .main-content .cover{
    border-top-left-radius: 2.326vw !important;
    border-top-right-radius: 2.326vw !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}

/* 2) Universal hover/focus: show indigo border glow */
.boosters-view .main-content .details .top .actions a,
.boosters-view .main-content .details .top .actions button,
.boosters-view .main-content .details .bottom .nav-tabs a,
.boosters-view .main-content .details .bottom .features .tiles .tile,
.boosters-view .main-content .details .bottom .features .recent-orders,
.boosters-view .order-card,
.boosters-view .review-row{
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

/* Cards / tiles / rows */
.boosters-view .main-content .details .bottom .features .tiles .tile:hover,
.boosters-view .main-content .details .bottom .features .recent-orders:hover,
.boosters-view .order-card:hover,
.boosters-view .review-row:hover{
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.7) !important;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35), 0 18px 55px rgba(0,0,0,0.35);
}

/* Tabs + buttons: no layout shift, just an outline glow */
.boosters-view .main-content .details .bottom .nav-tabs a:hover,
.boosters-view .main-content .details .top .actions a:hover,
.boosters-view .main-content .details .top .actions button:hover{
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.45);
}

/* Keyboard accessibility */
.boosters-view .main-content :is(a, button):focus-visible{
  outline: 2px solid rgba(99, 102, 241, 0.85);
  outline-offset: 3px;
}


/* =========================================================
   BOOSTERS VIEW – TOP 3 ACTION BUTTONS (UNIFIED LOOK)
   - same font-size + same height + same width
   - mobile: more space above (under "Offline")
   ========================================================= */
.boosters-view .main-content .details .top .buttons{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

/* Make all three buttons identical (remove per-button sizing differences) */
.boosters-view .main-content .details .top .buttons .btn,
.boosters-view .main-content .details .top .buttons a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
  line-height:1.1;
  border-radius:999px;
  font-weight:700;
}

/* Desktop/tablet: fixed equal width so they align perfectly */
@media (min-width: 768px){
  .boosters-view .main-content .details .top .buttons{
    justify-content:flex-end;
    flex-wrap:nowrap;
  }

  .boosters-view .main-content .details .top .buttons .btn,
  .boosters-view .main-content .details .top .buttons a.btn{
    width: 260px;
    min-width: 260px;
    max-width: 260px;
    min-height: 52px;
    padding: 14px 32px;
    font-size: 26px;
  }

  /* kill any old "requestBoost bigger" rules */
  .boosters-view .main-content .details .top .buttons .btn.requestBoost{
    font-size: 26px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* Mobile: stacked, same width, and more distance from the Online/Offline row */
@media (max-width: 767px){
  .boosters-view .main-content .details .top .buttons{
    flex-direction: column;
    justify-content:center;
    align-items:center;
    gap: 12px;
    margin-top: 28px; /* more space under the Offline badge */
  }

  .boosters-view .main-content .details .top .buttons .btn,
  .boosters-view .main-content .details .top .buttons a.btn{
    width: 100%;
    max-width: 280px;
    min-height: 44px;
    padding: 12px 18px;
    font-size: 15px;
  }
}


/* Mobile: more top/bottom padding inside the 3 buttons */
@media (max-width: 767px){
  .boosters-view .main-content .details .top .buttons .btn,
  .boosters-view .main-content .details .top .buttons a.btn{
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

/* =========================================================
   Contact Cards – smaller + highlighted (override)
   Added: 2026-02-21
   ========================================================= */

.contact-page .cards{
  width: min(1180px, calc(100% - 36px));
  margin: 64px auto;
  gap: 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.contact-page .cards .card{
  background: rgba(10, 10, 24, 0.55);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 20px 70px rgba(0,0,0,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  padding: 28px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}

.contact-page .cards .card::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(99,102,241,0.55) 0%,
    rgba(255,255,255,0.10) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.9;
}

.contact-page .cards .card .head .icon{
  width: clamp(56px, 4.8vw, 74px);
  height: clamp(56px, 4.8vw, 74px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

.contact-page .cards .card .head h3{
  font-size: clamp(24px, 1.8vw, 34px);
  font-weight: 600;
}

.contact-page .cards .card .head h6{
  font-size: 14px;
  opacity: 0.9;
}

.contact-page .cards .card .content{
  margin-top: 18px;
}

.contact-page .cards .card .content p{
  font-size: 15px;
  line-height: 1.7;
  color: rgba(205, 201, 226, 0.82);
  margin-bottom: 18px;
}

.contact-page .cards .card .content .btn{
  font-size: 14px;
  padding: 10px 26px;
  border-radius: 999px;
}

@media (hover:hover){
  .contact-page .cards .card{
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .contact-page .cards .card:hover{
    transform: translateY(-2px);
    border-color: rgba(99,102,241,0.35);
    box-shadow: 0 26px 90px rgba(0,0,0,0.55);
  }
}

@media (max-width: 900px){
  .contact-page .cards{
    grid-template-columns: 1fr;
    margin: 36px auto;
    gap: 18px;
  }
  .contact-page .cards .card{
    padding: 20px;
    border-radius: 18px;
  }
}

/* =========================================================
   Jobs Page – Compact + Highlighted Cards (LoL only)
   Added: 2026-02-21
   ========================================================= */

/* Keep page content centered and not ultra-wide */
.jobs-page .cards,
.jobs-page .requirements-sec .requirement-cards,
.jobs-page .features-sec .feature-tiles,
.jobs-page .sec-faqs .accordion,
.jobs-page .sec-faqs .top{
  width: min(1500px, calc(100% - 36px));
  margin-left: auto;
  margin-right: auto;
}

/* Hero CTA cards (LoL / Valorant) */
.jobs-page .cards{
  margin-top: clamp(26px, 3.2vw, 52px);
  margin-bottom: clamp(26px, 3.2vw, 52px);
  gap: clamp(14px, 1.6vw, 24px);
  align-items: stretch;
  justify-content: center;
}

/* Single card (since Valorant is hidden) should not span full width */
.jobs-page .cards .card{
  max-width: 780px;
  width: 100%;
  margin: 0 auto;

  padding: clamp(18px, 2.1vw, 30px);
  border-radius: clamp(18px, 2.4vw, 28px);

  background: linear-gradient(180deg, rgba(15, 16, 38, 0.72) 0%, rgba(10, 10, 24, 0.50) 100%);
  border: 1px solid rgba(99, 102, 241, 0.22);
  box-shadow:
    0 26px 90px rgba(0,0,0,0.55),
    0 0 0 1px rgba(99,102,241,0.12),
    inset 0 1px 0 rgba(255,255,255,0.06);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  position: relative;
  overflow: hidden;
}

.jobs-page .cards .card::before{
  content: '';
  position: absolute;
  inset: -2px;
  background: radial-gradient(600px 220px at 18% 15%, rgba(99,102,241,0.28), transparent 55%),
              radial-gradient(520px 220px at 85% 20%, rgba(233,161,59,0.20), transparent 58%);
  pointer-events: none;
  opacity: 0.95;
}

.jobs-page .cards .card .head{
  position: relative;
  gap: 14px;
}

.jobs-page .cards .card .head .icon{
  width: clamp(56px, 5.4vw, 82px);
  height: clamp(56px, 5.4vw, 82px);
  border-radius: clamp(16px, 1.6vw, 22px);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 18px 55px rgba(0,0,0,0.42);
}

.jobs-page .cards .card .head .icon img{
  height: clamp(20px, 2vw, 30px);
}

.jobs-page .cards .card .head h3{
  font-size: clamp(22px, 2.1vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.jobs-page .cards .card .head h6{
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 700;
  opacity: 0.95;
}

.jobs-page .cards .card .content{
  position: relative;
  margin-top: clamp(14px, 1.8vw, 22px);
}

.jobs-page .cards .card .content p{
  font-size: clamp(14px, 1.05vw, 16.5px);
  line-height: 1.75;
  color: rgba(205, 201, 226, 0.85);
  margin-bottom: clamp(14px, 1.6vw, 18px);
  max-width: 64ch;
}

.jobs-page .cards .card .content .btn{
  padding: 12px 26px;
  font-size: 14.5px;
  border-radius: 999px;
}

/* LoL accent */
.jobs-page .cards .card.lol-card h6{
  color: #e9a13b;
}
.jobs-page .cards .card.lol-card .btn{
  background-color: #e9a13b;
}
.jobs-page .cards .card.lol-card .btn:hover{
  background-color: rgb(212, 141, 34);
}

/* Requirements – switch to compact grid + remove huge min-width */
.jobs-page .requirements-sec{
  padding: clamp(56px, 6vw, 90px) 0;
}
.jobs-page .requirements-sec h2{
  font-size: clamp(26px, 2.6vw, 44px);
  line-height: 1.1;
}
.jobs-page .requirements-sec h6{
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.7;
  max-width: 62rem;
  margin: 12px auto 28px;
  padding: 0 18px;
}

.jobs-page .requirements-sec .requirement-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  align-items: stretch;
  justify-content: center;
}

.jobs-page .requirements-sec .requirement-cards .card{
  min-width: 0;
  padding: clamp(16px, 1.8vw, 22px);
  border-radius: clamp(18px, 2.2vw, 26px);
  background: rgba(15, 16, 38, 0.55);
  box-shadow: 0 18px 60px rgba(0,0,0,0.42);
}

.jobs-page .requirements-sec .requirement-cards .card img{
  width: clamp(44px, 3.8vw, 64px);
  height: clamp(44px, 3.8vw, 64px);
  margin-bottom: 14px;
}

.jobs-page .requirements-sec .requirement-cards .card h4{
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 800;
}

.jobs-page .requirements-sec .requirement-cards .card p{
  font-size: 13px;
}

.jobs-page .requirements-sec .requirement-cards .card .list-box p,
.jobs-page .requirements-sec .requirement-cards .card .list-box ul li{
  font-size: 13px;
  line-height: 1.55;
}

.jobs-page .requirements-sec .requirement-cards .card .list-box ul li{
  background-size: 16px 16px;
  padding-left: 22px;
}

.jobs-page .requirements-sec .requirement-cards .card h5{
  font-size: 14px;
  font-weight: 800;
  margin-top: 6px;
}

.jobs-page .requirements-sec .requirement-cards .card .earning-boxes{
  gap: 12px;
}
.jobs-page .requirements-sec .requirement-cards .card .earning-boxes .box{
  padding: 12px;
  border-radius: 14px;
}
.jobs-page .requirements-sec .requirement-cards .card .earning-boxes .box h6{
  font-size: 13px;
}
.jobs-page .requirements-sec .requirement-cards .card .earning-boxes .box p{
  font-size: 12.5px;
}

/* Features – compact grid and centered width */
.jobs-page .features-sec{
  padding: clamp(56px, 6vw, 90px) 0;
}
.jobs-page .features-sec h2{
  font-size: clamp(26px, 2.6vw, 44px);
  line-height: 1.1;
}
.jobs-page .features-sec h6{
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.7;
  max-width: 62rem;
  margin: 12px auto 28px;
  padding: 0 18px;
}

.jobs-page .features-sec .feature-tiles{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}

.jobs-page .features-sec .feature-tiles .tile{
  padding: clamp(16px, 1.8vw, 22px);
  border-radius: clamp(18px, 2.2vw, 26px);
  background: rgba(15, 16, 38, 0.55);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 60px rgba(0,0,0,0.42);
}

.jobs-page .features-sec .feature-tiles .tile img{
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
}

.jobs-page .features-sec .feature-tiles .tile h5{
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 6px;
}

.jobs-page .features-sec .feature-tiles .tile p{
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(205, 201, 226, 0.82);
}

.jobs-page .features-sec .btn{
  margin-top: 24px;
  padding: 12px 26px;
  font-size: 14.5px;
}

/* Responsive tweaks */
@media (max-width: 980px){
  .jobs-page .requirements-sec .requirement-cards{
    grid-template-columns: 1fr;
  }
  .jobs-page .features-sec .feature-tiles{
    grid-template-columns: 1fr;
  }
  .jobs-page .features-sec .feature-tiles .tile img{
    width: 48px; height: 48px;
  }
}


/* =========================================================
   CONTACT PAGE – Cards smaller + more contrast to background
   Scoped to bodyClass: .contact-page
   ========================================================= */

.contact-page .cards{
  width: min(1100px, 92%);
  margin: clamp(24px, 6vh, 56px) auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

/* Card surface: more visible than the page background */
.contact-page .cards .card{
  position: relative;
  padding: 34px 34px 30px;
  border-radius: 28px;
  border: 1px solid rgba(99,102,241,0.18);
  background: radial-gradient(1200px 600px at 20% 0%, rgba(99,102,241,0.14), rgba(0,0,0,0) 55%),
              rgba(255,255,255,0.035);
  box-shadow: 0 18px 46px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
}

/* Slight glow ring */
.contact-page .cards .card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 28px;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(99,102,241,0.35), rgba(255,255,255,0));
  opacity: .22;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  padding: 1px;
}

.contact-page .cards .card .head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.contact-page .cards .card .head h3{
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
}

.contact-page .cards .card .head h6{
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: rgba(99,102,241,0.95);
}

.contact-page .cards .card .icon{
  width: 88px;
  height: 88px;
  border-radius: 22px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
}

.contact-page .cards .card .icon img{
  width: 42px;
  height: 42px;
}

.contact-page .cards .card .content p{
  margin: 0 0 22px;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(205,203,226,0.78);
}

/* Buttons slightly smaller */
.contact-page .cards .card .btn{
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.contact-page .cards .card .btn.primary{
  background: rgba(99,102,241,0.92);
  border: 1px solid rgba(99,102,241,0.9);
}

.contact-page .cards .card .btn.primary:hover{
  background: rgba(99,102,241,1);
  transform: translateY(-1px);
}

/* Mobile: stack cards + reduce padding */
@media (max-width: 980px){
  .contact-page .cards{
    grid-template-columns: 1fr;
    width: min(720px, 92%);
    gap: 18px;
  }
  .contact-page .cards .card{
    padding: 26px 22px 22px;
    border-radius: 24px;
  }
  .contact-page .cards .card::after{
    border-radius: 24px;
  }
  .contact-page .cards .card .head h3{ font-size: 28px; }
  .contact-page .cards .card .icon{
    width: 76px;
    height: 76px;
    border-radius: 20px;
  }
}

/* =========================================================
   JOBS PAGE – keep all .box blocks aligned to the bottom
   ========================================================= */

.jobs-page .requirements-sec .requirement-cards .card{
  display:flex;
  flex-direction: column;
}

/* Push the last "box row" to the bottom of each card */
.jobs-page .requirements-sec .requirement-cards .card .earning-boxes{
  margin-top: auto;
}

/* Ensure box rows have consistent spacing */
.jobs-page .requirements-sec .requirement-cards .card .earning-boxes{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 980px){
  .jobs-page .requirements-sec .requirement-cards .card .earning-boxes{
    grid-template-columns: 1fr;
  }
}


/* ================================
   Jobs Page FAQ: match Contact rounded accordion
   - centered, not full width
   - rounded border container + clean items
   ================================ */

.jobs-page .sec-faqs{
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 110px;
  padding-bottom: 90px;
  background: transparent !important;
}

.jobs-page .sec-faqs .top{
  max-width: 1180px;
  margin: 0 auto 34px;
  padding: 0 18px;
}

.jobs-page .sec-faqs .top h4{
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.jobs-page .sec-faqs .accordion{
  max-width: 1180px;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  box-shadow: 0 20px 70px rgba(0,0,0,0.35);
}

.jobs-page .sec-faqs .accordion .accordion-item{
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.jobs-page .sec-faqs .accordion .accordion-item:last-child{
  border-bottom: none;
}

.jobs-page .sec-faqs .accordion-header{
  padding: 22px 24px;
  cursor: pointer;
}

.jobs-page .sec-faqs .accordion-header h5{
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  color: rgba(255,255,255,0.88);
}

.jobs-page .sec-faqs .accordion-content{
  padding: 0 24px 22px;
}

.jobs-page .sec-faqs .accordion-content p,
.jobs-page .sec-faqs .accordion-content li{
  font-size: 14px;
  line-height: 1.65;
  opacity: 0.82;
}

/* hover highlight like the rest of the site */
@media (hover:hover){
  .jobs-page .sec-faqs .accordion .accordion-item:hover{
    background: rgba(99, 102, 241, 0.06);
  }
  .jobs-page .sec-faqs .accordion .accordion-header:hover h5{
    color: rgba(255,255,255,0.95);
  }
}

/* mobile */
@media (max-width: 900px){
  .jobs-page .sec-faqs{
    padding-top: 95px;
    padding-bottom: 75px;
  }
  .jobs-page .sec-faqs .top{
    padding: 0 14px;
    margin-bottom: 18px;
  }
  .jobs-page .sec-faqs .accordion{
    margin: 0 14px;
    border-radius: 18px;
  }
  .jobs-page .sec-faqs .accordion-header{
    padding: 18px 16px;
  }
  .jobs-page .sec-faqs .accordion-header h5{
    font-size: 15px;
  }
  .jobs-page .sec-faqs .accordion-content{
    padding: 0 16px 18px;
  }
}

/* =========================================================
   Restored Hover Effects (Accent: #6366f1)
   ========================================================= */

/* Jobs page – all cards/boxes/tiles */
.jobs-page .cards .card,
.jobs-page .requirement-cards .card,
.jobs-page .requirements-sec .cards .card,
.jobs-page .features-sec .feature-tiles .tile,
.jobs-page .feature-tiles .tile,
.jobs-page .box,
.jobs-page .tile{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  will-change: transform;
}

@media (hover:hover){
  .jobs-page .cards .card:hover,
  .jobs-page .requirement-cards .card:hover,
  .jobs-page .requirements-sec .cards .card:hover,
  .jobs-page .features-sec .feature-tiles .tile:hover,
  .jobs-page .feature-tiles .tile:hover,
  .jobs-page .box:hover,
  .jobs-page .tile:hover{
    transform: translateY(-3px);
    border-color: rgba(99,102,241,0.55); /* #6366f1 */
    box-shadow:
      0 18px 60px rgba(0,0,0,0.55),
      0 0 0 1px rgba(99,102,241,0.25),
      0 0 30px rgba(99,102,241,0.20);
  }
}

/* focus states (keyboard) */
.jobs-page .cards .card:focus-within,
.jobs-page .requirement-cards .card:focus-within,
.jobs-page .requirements-sec .cards .card:focus-within,
.jobs-page .features-sec .feature-tiles .tile:focus-within,
.jobs-page .feature-tiles .tile:focus-within,
.jobs-page .box:focus-within,
.jobs-page .tile:focus-within{
  border-color: rgba(99,102,241,0.55);
  box-shadow:
    0 18px 60px rgba(0,0,0,0.55),
    0 0 0 1px rgba(99,102,241,0.25),
    0 0 30px rgba(99,102,241,0.20);
}

/* Contact page cards hover (keeps same accent) */
.contact-page .cards .card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (hover:hover){
  .contact-page .cards .card:hover{
    transform: translateY(-2px);
    border-color: rgba(99,102,241,0.35);
    box-shadow: 0 26px 90px rgba(0,0,0,0.55);
  }
}

/* FAQ items hover (jobs + contact) */
.jobs-page details.faq-item,
.contact-page details.faq-item,
.jobs-page .faq details,
.contact-page .faq details{
  transition: border-color .18s ease, box-shadow .18s ease;
}
@media (hover:hover){
  .jobs-page details.faq-item:hover,
  .contact-page details.faq-item:hover,
  .jobs-page .faq details:hover,
  .contact-page .faq details:hover{
    border-color: rgba(99,102,241,0.35);
    box-shadow: 0 10px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(99,102,241,0.18);
  }
}

/* ══════════════════════════════════════════════════════
   Custom Select – Ersatz fuer Select2 single selects
   Funktioniert korrekt unter html { zoom } + .boost-form { zoom: 0.8 }
   da das Dropdown position:absolute relativ zum cs-wrapper ist.
   ══════════════════════════════════════════════════════ */

.cs-wrapper {
  position: relative;
  display: block;
  width: 100%;
  z-index: 10;
}
.cs-wrapper.cs-open { z-index: 9999; }

/* Parent-Chain muss overflow:visible haben */
.cs-wrapper,
.cs-wrapper ~ *,
.option:has(.cs-wrapper),
.options-bar .option {
  overflow: visible !important;
}
/* Explizit fuer die boost-form option-divs */
.lol-boost .form-content .boost-form .options-bar .option,
.lol-boost .form-content .boost-form .options .option {
  overflow: visible !important;
  position: relative;
}

.cs-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2.6vw;
  padding: 0.625vw 0.938vw;
  background: #0d0d1e;
  border: 0.052vw solid #232040;
  border-radius: 0.625vw;
  color: #fff;
  font-family: inherit;
  font-size: 1.3vw;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
  gap: 0.5vw;
}
.cs-trigger:hover { border-color: #6366f1; background: #0f0f22; }
.cs-wrapper.cs-open .cs-trigger {
  border-color: #6366f1;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: #0f0f22;
}
.cs-trigger__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-trigger__arrow {
  flex: 0 0 auto; width: 0.625vw; height: 0.625vw;
  color: #726e8e; transition: transform 0.2s ease;
  display: flex; align-items: center;
}
.cs-trigger__arrow svg { width: 100%; height: 100%; }
.cs-wrapper.cs-open .cs-trigger__arrow { transform: rotate(180deg); color: #6366f1; }

.cs-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #0a0a18;
  border: 0.052vw solid #6366f1;
  border-top: none;
  border-bottom-left-radius: 0.625vw;
  border-bottom-right-radius: 0.625vw;
  box-shadow: 0 0.625vw 1.563vw rgba(0, 0, 0, 0.7);
  z-index: 99999;
  overflow: hidden;
  min-width: 100%;
}

.cs-search-wrap {
  display: flex; align-items: center; gap: 0.417vw;
  padding: 0.521vw 0.625vw;
  border-bottom: 0.052vw solid #1a1830;
  background: #0e0d1a;
}
.cs-search-icon { flex: 0 0 auto; width: 0.729vw; height: 0.729vw; color: #726e8e; }
.cs-search {
  flex: 1; background: transparent; border: none; outline: none;
  color: #fff; font-family: inherit; font-size: 0.729vw;
}
.cs-search::placeholder { color: #726e8e; }

.cs-list {
  max-height: 13vw; overflow-y: auto; padding: 0.208vw 0;
  scrollbar-width: thin; scrollbar-color: #6366f1 #18162b;
}
.cs-list::-webkit-scrollbar { width: 0.313vw; }
.cs-list::-webkit-scrollbar-track { background: #18162b; }
.cs-list::-webkit-scrollbar-thumb { background: #6366f1; border-radius: 999px; }

.cs-option {
  padding: 0.521vw 1.2vw;
  font-size: 1.2vw; color: #ccc; cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  user-select: none; outline: none;
}
.cs-option:hover, .cs-option:focus { background: #18162b; color: #fff; }
.cs-option--selected { color: #6366f1; font-weight: 600; }
.cs-option--selected:hover { background: #18162b; color: #7c7ef5; }
.cs-option--disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 768px) {
  .cs-trigger { font-size: 14px; min-height: 44px; padding: 10px 14px; border-radius: 10px; }
  .cs-trigger__arrow { width: 10px; height: 10px; }
  .cs-dropdown { border-radius: 0 0 10px 10px; }
  .cs-search-wrap { padding: 8px 10px; gap: 6px; }
  .cs-search-icon { width: 12px; height: 12px; }
  .cs-search { font-size: 13px; }
  .cs-list { max-height: 200px; padding: 2px 0; }
  .cs-option { padding: 10px 14px; font-size: 18px; }
}

/* Booster-Liste Filter-Box: Select2 Dropdown-Positionierung
   .select2-container hat jetzt position:relative (global), daher positioniert
   sich das Dropdown korrekt relativ zum Container.
   filter-box und form-groups muessen overflow:visible haben. */
.boosters-list .filter-box {
  overflow: visible !important;
}
.boosters-list .filter-box .form-group {
  overflow: visible !important;
  position: relative;
  z-index: 1;
}
.boosters-list .filter-box .form-group:has(.select2-container--open) {
  z-index: 1000020; /* ueber navbar-top (1000010) */
}/* ── Custom Multi-Select (filter-box) ──────────────────────────────────── */
.cs-multi .cs-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 12px;
  background: #0a0a18;
  border: 1px solid #232040;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s;
  position: relative;
}
.cs-multi .cs-chips:hover,
.cs-multi.cs-open .cs-chips {
  border-color: #6366f1;
}
.cs-multi.cs-open .cs-trigger__arrow {
  transform: rotate(180deg);
  color: #6366f1;
}
.cs-multi .cs-trigger__arrow {
  margin-left: auto;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  color: #726e8e;
  transition: transform 0.2s, color 0.2s;
  display: flex;
  align-items: center;
}
.cs-multi .cs-trigger__arrow svg { width: 100%; height: 100%; }
.cs-placeholder { color: #726e8e; font-size: 13px; }

.cs-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 8px;
  background: rgba(99,102,241,0.35);
  border: 1px solid #6366f1;
  border-radius: 6px;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
}
.cs-chip__img {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  object-fit: cover;
}
.cs-chip__x {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  padding: 0 0 0 4px;
  font-size: 14px;
  line-height: 1;
  transition: color 0.15s;
}
.cs-chip__x:hover { color: #fff; }

/* Checkbox-style options */
.cs-option--check {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cs-check-box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.cs-option--check.cs-option--selected .cs-check-box {
  background: #6366f1;
  border-color: #6366f1;
}
.cs-opt-img {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  object-fit: cover;
}

/* =========================================================
   Rating badge – typography + icon alignment (match .rank-box)
   ========================================================= */

/* List cards: rating badge next to booster name */
.boosters-list .boosters .booster-card .details .top h5 .rating-badge{
  background-color: rgba(255, 255, 255, 0.06);
  border: 0.052vw solid rgba(99, 102, 241, 0.10);
  border-radius: 0.729vw; /* same feel as .rank-box */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);

  /* nicer text rendering */
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;

  /* better spacing */
  gap: 0.35em;
  padding: 0.22em 0.65em;
}

/* Make icon sit perfectly centered with the text */
.boosters-list .boosters .booster-card .details .top h5 .rating-badge img,
.boosters-list .boosters .booster-card .details .top h5 .rating-badge svg,
.boosters-list .boosters .booster-card .details .top h5 .rating-badge i{
  width: 1em;
  height: 1em;
  display: block;
  line-height: 1;
  margin: 0;
  flex: 0 0 auto;
}

/* Booster detail view: same badge look + alignment */
.boosters-view .main-content .details .top .info .rating-badge{
  background-color: rgba(255, 255, 255, 0.06);
  border: 0.052vw solid rgba(99, 102, 241, 0.10);
  border-radius: 0.729vw;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);

  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;

  gap: 0.35em;
  padding: 0.35em 0.70em;
}

.boosters-view .main-content .details .top .info .rating-badge img,
.boosters-view .main-content .details .top .info .rating-badge svg,
.boosters-view .main-content .details .top .info .rating-badge i{
  width: 1em;
  height: 1em;
  display: block;
  line-height: 1;
  margin: 0;
  flex: 0 0 auto;
}

/* =========================================================
   Booster Cards – Mobile layout fix
   - cover used vw heights -> too small on phones
   - avatar + rank-box were positioned into the cover
   ========================================================= */
@media (max-width: 768px){
  /* make the cover a real, stable height on phones */
  .boosters-list .boosters .booster-card .cover{
    height: 160px !important;
    margin: -24px -24px 0 -24px !important;
    background-position: top center !important;
  }

  /* avatar should sit at the cover edge (half-overlap into the content) */
  .boosters-list .boosters .booster-card .avatar{
    width: 84px !important;
    height: 84px !important;
    top: 118px !important; /* 160 - 42 */
    left: 18px !important;
    border-width: 3px !important;
  }

  /* content padding: remove desktop avatar-overlap padding-top on mobile */
  .boosters-list .boosters .booster-card .details{
    padding: 16px !important;
    padding-top: 16px !important;
  }

  /* rank box must NOT float in the cover on mobile */
  .boosters-list .boosters .booster-card .rank-box{
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin-left: auto !important;
    width: 92px !important;
    height: 46px !important;
    border-radius: 14px !important;
  }
}

/* Mobile: rank icon larger (also when rank-box is outside .details .top) */
@media (max-width: 767px){
  .boosters-list .boosters .booster-card .rank-box img{
    height: 8vw !important;
    width: auto !important;
    min-height: 32px;
  }
}

/* =========================================================
   BOOSTERS VIEW – RECENT FEEDBACKS (DESKTOP BIGGER)
   - Force override against inline <style> in view page
   ========================================================= */

/* Headline bigger on desktop */
@media (min-width: 992px){
  .boosters-view .recent-feedbacks .rf-head h4{
    font-size: 1.667vw !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
  }
}

/* Headline size on mobile */
@media (max-width: 767px){
  .boosters-view .recent-feedbacks .rf-head h4{
    font-size: 3.721vw !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
  }
}

/* Bigger prev/next buttons (desktop) */
@media (min-width: 992px){
  .boosters-view .recent-feedbacks .rf-nav{ gap: 12px !important; }

  .boosters-view .recent-feedbacks .rf-btn{
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    background: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.82) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.25) !important;
  }

  .boosters-view .recent-feedbacks .rf-btn i{
    font-size: 16px !important;
    line-height: 1 !important;
  }

  .boosters-view .recent-feedbacks .rf-btn:hover{
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.24) !important;
    transform: translateY(-1px) !important;
  }
}

/* Make cards larger on desktop */
@media (min-width: 992px){
  .boosters-view .recent-feedbacks{ margin-top: 32px !important; }

  .boosters-view .recent-feedbacks .rf-track{
    gap: 22px !important;
    padding: 10px 2px 16px !important;
  }

  /* wider slides */
  .boosters-view .recent-feedbacks .rf-slide{
    flex: 0 0 clamp(560px, 38vw, 720px) !important;
    max-width: clamp(560px, 38vw, 720px) !important;
  }
}

/* =========================================================
   BOOSTERS VIEW – RECENT FEEDBACKS (LAYOUT)
   - Move Overall rating below the <small> line and above comment
   ========================================================= */

/* Desktop + mobile: stack header left then overall on its own row */
.boosters-view .recent-feedbacks .review-top{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap: 10px !important;
}

.boosters-view .recent-feedbacks .review-top .left{
  width:100% !important;
}

/* Keep overall aligned to the right, but on the second line */
.boosters-view .recent-feedbacks .review-top .right{
  align-self:flex-end !important;
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
}

/* Optional: tighten label a bit so it feels like a sub-row */
.boosters-view .recent-feedbacks .review-top .right .label{
  opacity: .75 !important;
}

/* =========================================================
   RECENT ORDERS – MOBILE LAYOUT FIX
   ========================================================= */
@media only screen and (max-width: 767px){
  /* Features grid: single column */
  .boosters-view .main-content .details .bottom .features{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Recent Orders card */
  .boosters-view .main-content .details .bottom .features .recent-orders{
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .boosters-view .main-content .details .bottom .features .recent-orders h4{
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  /* Each item: compact, readable */
  .boosters-view .main-content .details .bottom .features .recent-orders .order-item{
    margin-top: 14px !important;
    padding-top: 14px !important;

    gap: 12px !important;
    align-items: flex-start !important;
  }

  /* Title block takes remaining width */
  .boosters-view .main-content .details .bottom .features .recent-orders .order-item .title{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 12px !important;
  }

  .boosters-view .main-content .details .bottom .features .recent-orders .order-item .title p{
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  .boosters-view .main-content .details .bottom .features .recent-orders .order-item .title p small{
    display: block !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin-top: 4px !important;
  }

  /* Status badge: smaller + no giant padding */
  .boosters-view .main-content .details .bottom .features .recent-orders .order-item .badge{
    flex: 0 0 auto !important;
    align-self: center !important;

    font-size: 12px !important;
    padding: 7px 12px !important;
    border-radius: 14px !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }
}


/* =========================================================
   BOOSTERS VIEW – RECENT FEEDBACKS
   Overall label + stars (bigger + centered, ONE LINE)
   ========================================================= */

.boosters-view .recent-feedbacks .review-top .right{
  align-self: center !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.boosters-view .recent-feedbacks .review-top .right .label{
  font-size: clamp(14px, 1.25vw, 20px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  opacity: 0.9 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.boosters-view .recent-feedbacks .review-top .right .stars{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  line-height: 1 !important;
  margin: 0 !important;

  font-size: clamp(16px, 1.4vw, 24px) !important;}

.boosters-view .recent-feedbacks .review-top .right .stars i{
  font-size: inherit !important;
  line-height: 1 !important;
}

@media (max-width: 767px){
  .boosters-view .recent-feedbacks .review-top .right .label{
    font-size: 16px !important;
  }
  .boosters-view .recent-feedbacks .review-top .right .stars i{
  font-size: inherit !important;
  line-height: 1 !important;
}
}


/* =========================================================
   SELLER INFO STRIP — redesigned, more character
   ========================================================= */

.ranked-accounts-page .container .accounts-grid .account-card .cover-link {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ranked-accounts-page .container .accounts-grid .account-card .seller-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5vw;
  margin-top: 0.833vw;
  padding: 0.573vw 0.729vw;
  background: rgba(255, 255, 255, 0.04);
  border: 0.078vw solid rgba(255, 255, 255, 0.07);
  border-radius: 0.573vw;
}

.ranked-accounts-page .container .accounts-grid .account-card .seller-info__left {
  display: flex;
  align-items: center;
  gap: 0.469vw;
  min-width: 0;
}

.ranked-accounts-page .container .accounts-grid .account-card .seller-info__avatar {
  width: 1.667vw;
  height: 1.667vw;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 0.104vw solid rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 0 0.104vw rgba(99, 102, 241, 0.15);
}

.ranked-accounts-page .container .accounts-grid .account-card .seller-info__name {
  font-size: 0.729vw;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.26vw;
  letter-spacing: 0.01em;
}

.ranked-accounts-page .container .accounts-grid .account-card .seller-info__verified {
  color: #6366f1;
  font-size: 1.2vw;
  flex-shrink: 0;
}

.ranked-accounts-page .container .accounts-grid .account-card .seller-info__right {
  display: flex;
  align-items: center;
  gap: 0.417vw;
  flex-shrink: 0;
}

.ranked-accounts-page .container .accounts-grid .account-card .seller-info__sold {
  font-size: 1.2vw;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  padding: 0.156vw 0.417vw;
  background: rgba(255,255,255,0.05);
  border-radius: 0.26vw;
}

.ranked-accounts-page .container .accounts-grid .account-card .seller-info__rating {
  display: flex;
  align-items: center;
  gap: 0.208vw;
  font-size: 0.625vw;
  font-weight: 700;
  color: #4caf7d;
  white-space: nowrap;
  background: rgba(76, 175, 125, 0.12);
  border: 0.052vw solid rgba(76, 175, 125, 0.3);
  border-radius: 0.26vw;
  padding: 0.156vw 0.417vw;
}

.ranked-accounts-page .container .accounts-grid .account-card .seller-info__rating i {
  font-size: 0.573vw;
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .ranked-accounts-page .container .accounts-grid .account-card .seller-info {
    margin-top: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    gap: 6px;
  }

  .ranked-accounts-page .container .accounts-grid .account-card .seller-info__avatar {
    width: 24px;
    height: 24px;
    border-width: 1.5px;
  }

  .ranked-accounts-page .container .accounts-grid .account-card .seller-info__name {
    font-size: 11px;
  }

  .ranked-accounts-page .container .accounts-grid .account-card .seller-info__verified {
    font-size: 4vw;
  }

  .ranked-accounts-page .container .accounts-grid .account-card .seller-info__sold {
    font-size: 4vw;
    padding: 2px 5px;
    border-radius: 4px;
  }

  .ranked-accounts-page .container .accounts-grid .account-card .seller-info__rating {
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 4px;
  }

  .ranked-accounts-page .container .accounts-grid .account-card .seller-info__right {
    gap: 5px;
  }
}

/* =========================================================
   Fixed header/banner anchor offset
   Keeps direct URLs like /lol/rank-boost aligned below the
   active banner + navbar + game subnav stack.
   ========================================================= */
html {
  scroll-padding-top: var(--lb-content-top, 96px);
}

#lolPageTop,
#valPageTop,
#tftPageTop,
.lol-boost .rank-types-nav {
  scroll-margin-top: var(--lb-content-top, 96px);
}


/* Sticky overview nicht extrem hoch setzen */
.lol-boost .sticky-overview {
  z-index: 1000 !important;
}

/* Mobile sidebar immer darüber */
.sidenav-mob,
.sidenav-mob.show {
  z-index: 2147483647 !important;
}

/* ================================================================
   Champions & Roles Modal — New Design
   ================================================================ */

/* Altes Heading/Icon-Styling für dieses Modal deaktivieren */
.lol-boost #champions_roles_modal h4.heading,
.lol-boost #champions_roles_modal h4.heading .bullet,
.lol-boost #champions_roles_modal h4.heading .badge,
.lol-boost #champions_roles_modal .icon-checkboxes,
.lol-boost #champions_roles_modal .icon-checkboxes img,
.lol-boost #champions_roles_modal .select2 { all: unset; }

/* Modal-Shell */
#champions_roles_modal.lb-modal--champs-roles {
    width: min(860px, 90vw) !important;
    max-height: 90vh !important;
    padding: 0 !important;
    border-radius: 1.25rem !important;
    background: #13112a !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 999999 !important;
}
@media (max-width: 640px) {
    #champions_roles_modal.lb-modal--champs-roles {
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }
    #champions_roles_modal.lb-modal--champs-roles.show {
        transform: none !important;
    }
}

/* Header */
.lb-cr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.lb-cr-header__title h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.lb-cr-close {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}
.lb-cr-close:hover { background: rgba(255,255,255,0.15); }

/* Scrollable body */
.lb-cr-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.lb-modal--champs-roles,
.lb-cr-body,
.lb-cr-champ-grid {
    scrollbar-width: thin;
    scrollbar-color: rgba(99,102,241,0.45) rgba(255,255,255,0.04);
}
.lb-modal--champs-roles::-webkit-scrollbar,
.lb-cr-body::-webkit-scrollbar,
.lb-cr-champ-grid::-webkit-scrollbar { width: 5px; }
.lb-modal--champs-roles::-webkit-scrollbar-track,
.lb-cr-body::-webkit-scrollbar-track,
.lb-cr-champ-grid::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 99px; }
.lb-modal--champs-roles::-webkit-scrollbar-thumb,
.lb-cr-body::-webkit-scrollbar-thumb,
.lb-cr-champ-grid::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.45); border-radius: 99px; }
.lb-modal--champs-roles::-webkit-scrollbar-thumb:hover,
.lb-cr-body::-webkit-scrollbar-thumb:hover,
.lb-cr-champ-grid::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.7); }

/* Section */
.lb-cr-section__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.875rem;
}
.lb-cr-section__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.lb-cr-badge--free {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 99px;
    background: rgba(34,197,94,0.15);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.25);
    letter-spacing: 0.02em;
}

/* Role cards */
.lb-cr-roles {
    display: flex;
    gap: 10px;
}
.lb-cr-role-input { display: none; }
.lb-cr-role-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 10px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.875rem;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
    position: relative;
    min-width: 0;
}
.lb-cr-role-card:hover {
    background: rgba(99,102,241,0.1);
    border-color: rgba(99,102,241,0.35);
}
.lb-cr-role-input:checked + .lb-cr-role-card {
    background: rgba(99,102,241,0.15);
    border-color: #6366f1;
}
.lb-cr-role-card img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: brightness(0.7);
    transition: filter 0.18s;
}
.lb-cr-role-input:checked + .lb-cr-role-card img,
.lb-cr-role-card:hover img { filter: brightness(1.1); }
.lb-cr-role-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-align: center;
}
.lb-cr-role-input:checked + .lb-cr-role-card .lb-cr-role-name { color: #fff; }
.lb-cr-role-price {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(99,102,241,0.3);
    color: #a5b4fc;
    border-radius: 99px;
    padding: 1px 6px;
}

/* Champions section */
.lb-cr-section--champs { display: flex; flex-direction: column; gap: 0.75rem; }
.lb-cr-section--champs .lb-cr-section__head { margin-bottom: 0; }

/* Search */
.lb-cr-champ-search-wrap { position: relative; }
.lb-cr-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.3);
    font-size: 0.8rem;
    pointer-events: none;
}
.lb-cr-champ-search {
    width: 100%;
    padding: 9px 12px 9px 34px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 0.625rem;
    color: #fff;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
    box-sizing: border-box;
}
.lb-cr-champ-search::placeholder { color: rgba(255,255,255,0.3); }
.lb-cr-champ-search:focus { border-color: rgba(99,102,241,0.5); }

/* Champion grid */
.lb-cr-champ-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
}
.lb-cr-champ-grid::-webkit-scrollbar { width: 4px; }
.lb-cr-champ-grid::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.4); border-radius: 99px; }

/* ── Unified scrollbar for all modal scroll areas ── */
.lb-modal--champs-roles,
.lb-cr-body,
.lb-cr-champ-grid {
    scrollbar-width: thin;
    scrollbar-color: rgba(99,102,241,0.45) rgba(255,255,255,0.04);
}
.lb-modal--champs-roles::-webkit-scrollbar,
.lb-cr-body::-webkit-scrollbar,
.lb-cr-champ-grid::-webkit-scrollbar { width: 5px; }
.lb-modal--champs-roles::-webkit-scrollbar-track,
.lb-cr-body::-webkit-scrollbar-track,
.lb-cr-champ-grid::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 99px; }
.lb-modal--champs-roles::-webkit-scrollbar-thumb,
.lb-cr-body::-webkit-scrollbar-thumb,
.lb-cr-champ-grid::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.45); border-radius: 99px; }
.lb-modal--champs-roles::-webkit-scrollbar-thumb:hover,
.lb-cr-body::-webkit-scrollbar-thumb:hover,
.lb-cr-champ-grid::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.7); }

.lb-cr-champ-item { position: relative; cursor: pointer; }
.lb-cr-champ-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.lb-cr-champ-label img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid transparent;
    object-fit: cover;
    transition: border-color 0.15s, transform 0.15s;
    display: block;
}
.lb-cr-champ-name {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.55);
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.lb-cr-champ-item:hover .lb-cr-champ-label img {
    border-color: rgba(99,102,241,0.5);
    transform: scale(1.07);
}
.lb-cr-champ-item.selected .lb-cr-champ-label img { border-color: #6366f1; }
.lb-cr-champ-item.selected .lb-cr-champ-name { color: rgba(255,255,255,0.85); }
.lb-cr-champ-item.selected::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(99,102,241,0.25);
    pointer-events: none;
}

/* Footer */
.lb-cr-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.lb-cr-btn {
    flex: 1;
    padding: 10px 20px;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.2s, transform 0.1s;
    font-family: inherit;
}
.lb-cr-btn:active { transform: scale(0.97); }
.lb-cr-btn--reset { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7); }
.lb-cr-btn--reset:hover { background: rgba(255,255,255,0.12); }
.lb-cr-btn--save { background: #6366f1; color: #fff; }
.lb-cr-btn--save:hover { background: #4f46e5; }

/* Responsive */
@media (max-width: 768px) {
    /* Full screen modal on mobile — both modals */
    #champions_roles_modal.lb-modal--champs-roles,
    #agents_modal.lb-modal--champs-roles {
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        top: 0 !important;
        left: 0 !important;
        transform: translate(0, 0) scale(1) !important;
    }
    #champions_roles_modal.lb-modal--champs-roles.show,
    #agents_modal.lb-modal--champs-roles.show {
        transform: translate(0, 0) scale(1) !important;
    }

    /* Hide tawk when modal is open */
    body.lb-cr-modal-open #tawk-container,
    body.lb-cr-modal-open .tawk-min-container,
    body.lb-cr-modal-open iframe[src*="tawk.to"],
    body.lb-cr-modal-open iframe[title*="chat" i],
    body.lb-cr-modal-open [id*="tawk"],
    body.lb-cr-modal-open [class*="tawk"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Header — bigger tap target */
    .lb-cr-header {
        padding: 1rem 1.125rem 0.875rem;
    }
    .lb-cr-header__title h4 {
        font-size: 1.05rem;
    }
    .lb-cr-close {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    /* Body fills remaining height */
    .lb-cr-body {
        padding: 1rem 1.125rem;
        gap: 1.125rem;
        flex: 1;
        overflow-y: auto;
    }

    /* Roles: 3 per row */
    .lb-cr-roles {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .lb-cr-role-card {
        padding: 12px 8px 8px;
        border-radius: 0.75rem;
    }
    .lb-cr-role-card img {
        width: 32px;
        height: 32px;
    }
    .lb-cr-role-name {
        font-size: 0.7rem;
    }

    /* LoL champions grid */
    .lb-cr-champ-grid {
        grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
        gap: 10px;
        max-height: none;
    }

    /* Valorant agents grid — 4 columns, compact */
    #agents_modal .lb-cr-champ-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        max-height: none;
    }
    #agents_modal .lb-cr-champ-label img {
        border-radius: 50%;
    }
    #agents_modal .lb-cr-champ-name {
        font-size: 0.6rem;
    }

    .lb-cr-champ-name {
        font-size: 0.58rem;
    }

    /* Footer */
    .lb-cr-footer {
        padding: 0.875rem 1.125rem;
        gap: 8px;
    }
    .lb-cr-btn {
        padding: 12px 16px;
        font-size: 0.875rem;
        border-radius: 0.875rem;
    }



/* ── Valorant agents modal — desktop overrides ── */
#agents_modal.lb-modal--champs-roles {
    width: min(640px, 90vw) !important;
    z-index: 999999 !important;
}
#agents_modal .lb-cr-champ-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    max-height: 360px;
}
#agents_modal .lb-cr-champ-label img {
    border-radius: 50%;
}
#agents_modal .lb-cr-champ-name {
    font-size: 0.7rem;
}

/* ================================================================
   Mobile boost-form: hide gamebar + fix extra-options text sizes
   ================================================================ */

@media (max-width: 1024px) {

    /* Hide bottom gamebar on boost pages (body has class lol-boost) */
    body.lol-boost .lb-mobile-gamebar,
    body.lol-boost .lb-game-subnav,
    .lol-boost + .lb-mobile-gamebar,
    .lb-mobile-gamebar:has(~ .lol-boost),
    .lb-mobile-gamebar {
        /* Will be overridden only on lol-boost pages via JS body class */
    }
    body.lol-boost .lb-mobile-gamebar {
        display: none !important;
    }

    /* Extra options — bigger text + icons for mobile */
    .lol-boost .form-content .extra-options .option {
        padding: 2.5vw 2vw;
    }
    .lol-boost .form-content .extra-options .option .text {
        font-size: 3.5vw;
        gap: 2vw;
    }
    .lol-boost .form-content .extra-options .option .text img,
    .lol-boost .form-content .extra-options .option .text i {
        width: 3.5vw;
        height: 3.5vw;
        font-size: 3.5vw;
    }
    .lol-boost .form-content .extra-options .privacy-settings-header {
        font-size: 2.5vw;
        padding: 1.5vw 2vw;
        margin: 2vw 0 1vw;
    }
    .lol-boost .form-content .completion-box .text {
        font-size: 3vw;
    }
    .lol-boost .form-content .completion-box img {
        width: 3.5vw;
    }
    .lol-boost .form-content .completion-box {
        padding: 2vw 3vw;
    }

    /* Discount box mobile */
    .lol-boost .form-content .discount-box .left .text h5 {
        font-size: 3vw;
    }
    .lol-boost .form-content .discount-box .left .text p {
        font-size: 2.5vw;
    }
    .lol-boost .form-content .discount-box .right h5 {
        font-size: 2.5vw;
    }
    .lol-boost .form-content .discount-box .right .old {
        font-size: 2.8vw;
    }
    .lol-boost .form-content .discount-box .right .new {
        font-size: 4vw;
    }
    .lol-boost .form-content .discount-box .right .saved {
        font-size: 2.5vw;
    }
    .lol-boost .form-content .discount-box .left img {
        width: 6vw;
    }


/* =========================================================
   Loyalty page mobile fix
   - avoids double navbar/banner offset on the hero
   - prevents the Slick tier slider from being rendered as a flex row
   - gives each tier card a readable mobile width
   ========================================================= */
@media (max-width: 767px) {
  body.loyalty-page header,
  body:not(.landing).loyalty-page header {
    height: auto !important;
    min-height: 0 !important;
    padding-top: calc(var(--lb-content-top, 80px) + 22px) !important;
    padding-bottom: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
  }

  .loyalty-page header .content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 22px !important;
  }

  .loyalty-page header h1 {
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.08 !important;
    margin-bottom: 14px !important;
  }

  .loyalty-page header p {
    max-width: 34rem !important;
    margin: 0 auto !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .loyalty-page .loy-how {
    padding: 36px 18px 0 !important;
  }

  .loyalty-page .loy-how .loy-label {
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
  }

  .loyalty-page .loy-how .loy-title {
    font-size: clamp(26px, 7vw, 32px) !important;
    line-height: 1.12 !important;
    margin-bottom: 12px !important;
  }

  .loyalty-page .loy-how .loy-sub {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .loyalty-page .loyalty-slider {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 28px auto 44px !important;
    display: block !important;
    overflow: hidden !important;
  }

  .loyalty-page .loyalty-slider.slick-initialized {
    display: block !important;
  }

  .loyalty-page .loyalty-slider .slick-list {
    overflow: visible !important;
  }

  .loyalty-page .loyalty-slider .slick-track {
    display: flex !important;
    align-items: stretch !important;
  }

  .loyalty-page .loyalty-slider .loyalty-slide {
    width: clamp(128px, 38vw, 168px) !important;
    min-width: clamp(128px, 38vw, 168px) !important;
    margin: 0 7px !important;
    position: relative !important;
    flex: 0 0 auto !important;
  }

  .loyalty-page .loyalty-slider .bg-image {
    width: 100% !important;
    height: clamp(300px, 82vw, 370px) !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }

  .loyalty-page .loyalty-slider .loyalty-slide .overlay {
    gap: 10px !important;
    padding: 0 6px 14px !important;
  }

  .loyalty-page .loyalty-slider .loyalty-slide .overlay .rank-icon {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
  }

  .loyalty-page .loyalty-slider .loyalty-slide .overlay p {
    gap: 5px !important;
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.65) !important;
  }

  .loyalty-page .loyalty-slider .loyalty-slide .overlay p .dot,
  .loyalty-page .loyalty-slider .loyalty-slide .overlay p img {
    width: 6px !important;
    height: 6px !important;
    flex: 0 0 auto !important;
  }

  .loyalty-page .loyalty-slider .loyalty-slide .overlay .spent {
    margin-bottom: 0 !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
}

/* =========================================================
   GLOBAL HEADER CONTENT OFFSET
   Make all non-landing page hero/header content sit lower,
   matching the spacing used on the Boosters List page.
   ========================================================= */
:root {
  --lb-page-hero-extra-top: clamp(36px, 3.2vw, 64px);
}

body:not(.landing) header {
  box-sizing: border-box !important;
  padding-top: calc(var(--lb-content-top, 96px) + var(--lb-page-hero-extra-top)) !important;
}

body:not(.landing) header .content {
  position: relative;
  z-index: 2;
}

/* Pages that use the compact/game header override need the same lower offset too. */
body.lol-boost header,
body.game-hub header,
body.game-service-page header,
body.premium-accounts-page header,
body.ranked-accounts-page header,
body.view-account-page header,
body.lol-items-page header {
  padding-top: calc(var(--lb-content-top, 96px) + var(--lb-page-hero-extra-top)) !important;
}

/* Keep content padding from adding a second large top gap on compact headers. */
body.lol-boost header .content,
body.game-hub header .content,
body.game-service-page header .content,
body.premium-accounts-page header .content,
body.ranked-accounts-page header .content,
body.view-account-page header .content,
body.lol-items-page header .content {
  padding-top: 0 !important;
}

/* Boosters list already had the correct style; keep it aligned with the same global value. */
body.boosters-list header {
  padding-top: calc(var(--lb-content-top, 132px) + var(--lb-page-hero-extra-top)) !important;
}

/* Booster profile / seller profile headers should also start from the top and flow downward. */
body.boosters-view header,
body.bv2 header,
.bv2 header,
body.egirls-list header,
body.egirls-view header {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  flex-direction: column !important;
}

@media (max-width: 768px) {
  :root {
    --lb-page-hero-extra-top: 28px;
  }

  body:not(.landing) header {
    padding-top: calc(var(--lb-content-top, 96px) + var(--lb-page-hero-extra-top)) !important;
  }

  body.lol-boost header .content,
  body.game-hub header .content,
  body.game-service-page header .content,
  body.premium-accounts-page header .content,
  body.ranked-accounts-page header .content,
  body.view-account-page header .content,
  body.lol-items-page header .content {
    padding-top: 0 !important;
  }
}

/* =========================================================
   Checkout clarity redesign — cleaner sections, better spacing
   ========================================================= */
.checkout {
  background:
    radial-gradient(circle at 72% 10%, rgba(99,102,241,.16), transparent 34%),
    radial-gradient(circle at 20% 0%, rgba(99,102,241,.08), transparent 28%),
    #110f1f;
}

.checkout .header {
  width: min(92vw, 1180px);
  margin: clamp(150px, 11vw, 210px) auto clamp(44px, 4vw, 68px) !important;
  text-align: center;
}

.checkout .header h1 {
  font-size: clamp(42px, 3.3vw, 66px) !important;
  line-height: .95 !important;
  letter-spacing: .015em;
  margin-bottom: 18px;
}

.checkout .header h5 {
  font-size: clamp(14px, .95vw, 17px) !important;
  color: rgba(255,255,255,.76);
  line-height: 1.55 !important;
}

.checkout .checkout-steps {
  margin: 22px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.checkout .checkout-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(99,102,241,.10);
  border: 1px solid rgba(99,102,241,.24);
  color: rgba(226,232,255,.86);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.checkout .checkout-step i { color: #8b8cf5; font-size: 12px; }
.checkout .checkout-step.is-active {
  background: linear-gradient(135deg, rgba(99,102,241,.34), rgba(124,58,237,.22));
  border-color: rgba(154,150,255,.50);
  color: #fff;
  box-shadow: 0 12px 34px rgba(99,102,241,.18);
}

.checkout .main-content {
  width: min(92vw, 1320px);
  margin: 0 auto clamp(72px, 6vw, 110px) !important;
  padding-bottom: 0 !important;
  display: grid;
  grid-template-columns: minmax(360px, .92fr) minmax(420px, 1.08fr) !important;
  gap: clamp(22px, 2vw, 34px) !important;
  align-items: start;
}

.checkout .card {
  padding: clamp(24px, 1.8vw, 34px) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    rgba(13,12,29,.82) !important;
  border: 1px solid rgba(99,102,241,.16) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
}

.checkout .main-content .right .card {
  position: sticky;
  top: clamp(92px, 7vw, 132px);
}

.checkout .main-content .left h3,
.checkout .main-content .right h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px !important;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.96);
  font-size: clamp(18px, 1.1vw, 22px) !important;
  font-weight: 800 !important;
  line-height: 1.25;
}

.checkout .main-content .left h3:not(:first-child) {
  margin-top: 28px !important;
}

.checkout .main-content .left h3::before,
.checkout .main-content .right h3::before {
  content: '';
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #8b8cf5, #6366f1);
  box-shadow: 0 0 18px rgba(99,102,241,.75);
}

.checkout .main-content .right h3 img {
  width: 22px !important;
  height: auto;
  opacity: .9;
}
.checkout .main-content .right h3::before { content: none; }

.checkout .main-content .left .buttons {
  gap: 12px !important;
  margin-bottom: 28px !important;
}

.checkout .main-content .left .buttons .btn {
  min-height: 48px;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  background: rgba(10,10,24,.72) !important;
  border: 1px solid rgba(99,102,241,.22) !important;
  box-shadow: none;
  font-size: 14px !important;
}
.checkout .main-content .left .buttons .btn:hover {
  background: rgba(99,102,241,.16) !important;
  border-color: rgba(139,140,245,.45) !important;
}
.checkout .main-content .left .buttons .btn::after { content: none !important; }
.checkout .main-content .left .buttons .btn img { width: 15px !important; }

.checkout .main-content .left .payment-methods {
  gap: 12px !important;
  display: grid;
}

.checkout .main-content .left .payment-methods label { display: block; }
.checkout .main-content .left .payment-methods .method-btn {
  min-height: 64px;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  background: rgba(6,6,18,.72) !important;
  border: 1px solid rgba(255,255,255,.07);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.checkout .main-content .left .payment-methods .method-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(139,140,245,.32);
  background: rgba(99,102,241,.08) !important;
}
.checkout .main-content .left .payment-methods .custom-radio:checked + .method-btn {
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(99,102,241,.08)) !important;
  border-color: rgba(139,140,245,.55) !important;
  box-shadow: 0 16px 38px rgba(99,102,241,.12), inset 0 1px 0 rgba(255,255,255,.05);
}
.checkout .main-content .left .payment-methods .method-btn .checkmark {
  gap: 14px !important;
  font-size: 15px !important;
  font-weight: 800;
}
.checkout .main-content .left .payment-methods .method-btn .checkmark span {
  width: 20px !important;
  height: 20px !important;
  border-width: 1px !important;
  flex-shrink: 0;
}
.checkout .main-content .left .payment-methods .method-btn img {
  max-height: 24px !important;
  height: auto !important;
}
.checkout .main-content .left .payment-methods .method-btn > img {
  max-width: 210px;
  object-fit: contain;
}
.checkout .payment-method-unavailable-note {
  margin: 8px 4px 0 !important;
  color: rgba(255,255,255,.55) !important;
}

.checkout .summary .rank-box {
  margin: 0 0 18px !important;
  padding: 18px 20px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(99,102,241,.14), transparent 56%),
    rgba(6,6,18,.78) !important;
  border: 1px solid rgba(255,255,255,.07);
}
.checkout .summary .rank-box .from img,
.checkout .summary .rank-box .to img {
  height: 42px !important;
  margin-bottom: 6px !important;
}
.checkout .summary .rank-box .title,
.checkout .summary .rank-box .game,
.checkout .summary .rank-box .count {
  font-size: 14px !important;
  font-weight: 800 !important;
}
.checkout .summary .rank-box small { color: rgba(255,255,255,.58) !important; }
.checkout .summary .rank-box > img { width: 18px !important; opacity: .55; }

.checkout .summary .order-options {
  gap: 10px !important;
  margin: 18px 0 22px !important;
}
.checkout .summary .order-options .option {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.065);
}
.checkout .summary .order-options .option .title,
.checkout .summary .order-options .option .value {
  font-size: 14px !important;
  line-height: 1.35;
}
.checkout .summary .order-options .option .title {
  color: rgba(255,255,255,.82);
  font-weight: 700;
}
.checkout .summary .order-options .option .value {
  color: rgba(165,168,255,.95) !important;
  font-weight: 800;
  text-align: right;
}
.checkout .summary .order-options .option .title img {
  width: 16px !important;
  height: 16px !important;
}

.checkout .summary #lbbp-v5,
.checkout .summary textarea,
.checkout .summary .discount-input,
.checkout .summary .discount-applied {
  border-radius: 16px !important;
}
.checkout .summary textarea {
  background: rgba(6,6,18,.76) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}
.checkout .main-content .right .summary .discount-input {
  margin: 18px 0 14px !important;
  min-height: 54px;
  background: rgba(6,6,18,.76) !important;
  border: 1px solid rgba(255,255,255,.07);
}
.checkout .main-content .right .summary .discount-input input {
  width: 100%;
  font-size: 14px !important;
  padding: 14px 16px !important;
}
.checkout .main-content .right .summary .discount-input button {
  margin-right: 6px;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  font-weight: 800;
}
.checkout .main-content .right .summary .discount-applied {
  margin: 20px 0 !important;
  padding: 14px 16px !important;
  background: rgba(34,197,94,.08) !important;
  border-color: rgba(34,197,94,.25) !important;
  color: #86efac;
  font-weight: 800;
}

.checkout .main-content .right .summary .totals-section {
  margin-top: 18px;
  padding: 22px 0 18px !important;
  border-top: 1px solid rgba(255,255,255,.09) !important;
}
.checkout .main-content .right .summary .totals-section .item {
  padding: 6px 0;
}
.checkout .main-content .right .summary .totals-section .item .label {
  font-size: 15px !important;
  color: rgba(255,255,255,.64) !important;
}
.checkout .main-content .right .summary .totals-section .item .value,
.checkout .main-content .right .summary .totals-section .item #total-text {
  font-size: clamp(24px, 1.7vw, 32px) !important;
  color: #fff !important;
  font-weight: 900 !important;
}
.checkout .main-content .right .summary #complete_payment {
  min-height: 58px;
  padding: 15px 22px !important;
  border-radius: 18px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
  box-shadow: 0 18px 42px rgba(99,102,241,.24);
  transition: transform .16s ease, box-shadow .16s ease;
}
.checkout .main-content .right .summary #complete_payment:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 48px rgba(99,102,241,.32);
}

.checkout .trustpilot-banner--chip { margin-top: 18px !important; }
.checkout .tpBadge--summary {
  min-height: 42px !important;
  padding: 9px 14px !important;
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}

@media (max-width: 980px) {
  .checkout .header {
    margin: 116px auto 34px !important;
    padding: 0 20px;
  }
  .checkout .main-content {
    width: calc(100% - 32px);
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .checkout .main-content .right .card { position: static; }
  .checkout .card { border-radius: 22px !important; padding: 20px !important; }
  .checkout .main-content .left .buttons { flex-direction: column; }
  .checkout .main-content .left .payment-methods .method-btn > img { max-width: 160px; }
}

@media (max-width: 560px) {
  .checkout .header h1 { font-size: 34px !important; }
  .checkout .checkout-steps { justify-content: flex-start; }
  .checkout .checkout-step { font-size: 10px; padding: 7px 10px; }
  .checkout .main-content { width: calc(100% - 24px); }
  .checkout .summary .rank-box { padding: 14px !important; }
  .checkout .summary .order-options .option {
    align-items: flex-start !important;
    gap: 8px;
    flex-direction: column;
  }
  .checkout .summary .order-options .option .value { text-align: left; }
  .checkout .main-content .right .summary .discount-input { flex-direction: column; padding: 10px; }
  .checkout .main-content .right .summary .discount-input button { width: 100%; margin: 0; }
}

/* =========================================================
   Checkout mobile polish: no empty coin rows, better steps,
   cleaner disabled Coinbase method
   ========================================================= */
.checkout .summary .order-options .option:empty,
.checkout .summary .order-options .coins-list:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.checkout .main-content .left .payment-methods .method-btn.third {
  gap: 14px;
}

.checkout .main-content .left .payment-methods .method-btn.third > img {
  max-width: 170px;
  opacity: .58;
  filter: saturate(.75) brightness(.9);
}

.checkout .main-content .left .payment-methods label.payment-method-disabled .method-btn {
  background: rgba(6,6,18,.52) !important;
  border-color: rgba(255,255,255,.055) !important;
  box-shadow: none !important;
}

.checkout .main-content .left .payment-methods label.payment-method-disabled .method-btn .checkmark {
  min-width: 0;
}

.checkout .main-content .left .payment-methods label.payment-method-disabled .badge,
.checkout .main-content .left .payment-methods label.payment-method-disabled .badge-primary {
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.065) !important;
  color: rgba(255,255,255,.62) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  padding: 6px 9px !important;
  border-radius: 999px !important;
  white-space: nowrap;
}

.checkout .payment-method-unavailable-note {
  padding-left: 4px;
  line-height: 1.45 !important;
}

@media (max-width: 560px) {
  .checkout .header {
    margin: 90px auto 22px !important;
    padding: 0 16px !important;
  }

  .checkout .header h1 {
    font-size: clamp(30px, 8.8vw, 38px) !important;
    line-height: .92 !important;
    margin-bottom: 10px !important;
  }

  .checkout .header h5 {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
  }

  .checkout .checkout-steps {
    width: min(100%, 340px);
    margin: 16px auto 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px !important;
    justify-content: center !important;
    align-items: stretch !important;
  }

  .checkout .checkout-step {
    min-width: 0;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 5px !important;
    padding: 9px 5px !important;
    border-radius: 13px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    letter-spacing: .045em !important;
    white-space: normal !important;
  }

  .checkout .checkout-step i {
    font-size: 12px !important;
  }

  .checkout .main-content {
    width: calc(100% - 14px) !important;
    gap: 12px !important;
  }

  .checkout .card {
    padding: 16px 14px !important;
    border-radius: 18px !important;
  }

  .checkout .main-content .left h3,
  .checkout .main-content .right h3 {
    font-size: 14px !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    gap: 8px !important;
  }

  .checkout .main-content .left h3:not(:first-child) {
    margin-top: 20px !important;
  }

  .checkout .main-content .left .buttons {
    gap: 9px !important;
    margin-bottom: 18px !important;
  }

  .checkout .main-content .left .buttons .btn {
    min-height: 42px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
  }

  .checkout .main-content .left .payment-methods {
    gap: 9px !important;
  }

  .checkout .main-content .left .payment-methods .method-btn {
    min-height: 54px !important;
    padding: 11px 12px !important;
    border-radius: 14px !important;
  }

  .checkout .main-content .left .payment-methods .method-btn .checkmark {
    gap: 10px !important;
    font-size: 12px !important;
    min-width: 0;
  }

  .checkout .main-content .left .payment-methods .method-btn .checkmark span {
    width: 17px !important;
    height: 17px !important;
  }

  .checkout .main-content .left .payment-methods .method-btn img {
    max-height: 18px !important;
  }

  .checkout .main-content .left .payment-methods .method-btn > img {
    max-width: 104px !important;
  }

  .checkout .main-content .left .payment-methods .method-btn.third {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .checkout .main-content .left .payment-methods .method-btn.third > img[alt="crypto logos"] {
    display: none !important;
  }

  .checkout .main-content .left .payment-methods label.payment-method-disabled .badge,
  .checkout .main-content .left .payment-methods label.payment-method-disabled .badge-primary {
    margin-left: auto;
    font-size: 9px !important;
    padding: 5px 7px !important;
  }

  .checkout .payment-method-unavailable-note {
    margin: 7px 0 0 !important;
    padding: 0 2px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  .checkout .summary .rank-box {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .checkout .summary .rank-box .from img,
  .checkout .summary .rank-box .to img {
    height: 32px !important;
  }

  .checkout .summary .rank-box .title,
  .checkout .summary .rank-box .game,
  .checkout .summary .rank-box .count {
    font-size: 11px !important;
  }

  .checkout .summary .rank-box small {
    font-size: 9px !important;
  }

  .checkout .summary .order-options {
    gap: 8px !important;
    margin: 14px 0 16px !important;
  }

  .checkout .summary .order-options .option {
    padding: 11px 12px !important;
    border-radius: 13px !important;
  }

  .checkout .summary .order-options .option .title,
  .checkout .summary .order-options .option .value {
    font-size: 12px !important;
  }

  .checkout .summary .order-options .option .title img {
    width: 14px !important;
    height: 14px !important;
  }

  .checkout .main-content .right .summary #complete_payment {
    min-height: 52px !important;
    border-radius: 15px !important;
    font-size: 14px !important;
  }
}


/* =========================================================
   Checkout mobile: make Stripe payment method larger
   ========================================================= */
@media (max-width: 560px) {
  .checkout .main-content .left .payment-methods label:first-child .method-btn.first {
    min-height: 68px !important;
    padding: 15px 14px !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px rgba(99,102,241,.14), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  .checkout .main-content .left .payment-methods label:first-child .method-btn.first .checkmark {
    gap: 12px !important;
    font-size: 14px !important;
  }

  .checkout .main-content .left .payment-methods label:first-child .method-btn.first .checkmark span {
    width: 20px !important;
    height: 20px !important;
  }

  .checkout .main-content .left .payment-methods label:first-child .method-btn.first .checkmark img[alt="Stripe"] {
    max-height: 22px !important;
  }

  .checkout .main-content .left .payment-methods label:first-child .method-btn.first > img[alt="payment cards"] {
    max-width: 132px !important;
    max-height: 22px !important;
  }
}

@media (max-width: 380px) {
  .checkout .main-content .left .payment-methods label:first-child .method-btn.first > img[alt="payment cards"] {
    max-width: 112px !important;
  }
}




/* ===== Z-index hotfix: header dropdowns above filterbar/subnav ===== */
.navbar-top{ z-index: 1000010 !important; }
.lb-game-subnav{ z-index: 900 !important; }
.navbar-top .mega-dropdown,
nav.navbar-top .mega-dropdown,
nav.navbar-top .mega-dropdown.gmGamesV3,
nav.navbar-top .mega-dropdown.lbServicesMenu,
nav.navbar-top .mega-dropdown.gmBoostDropdownV2{
  z-index: 1000030 !important;
}
.ranked-accounts-page .shop-filterbar,
.ranked-accounts-page .shop-filterbar--sticky{
  z-index: 800 !important;
}
.ranked-accounts-page .shop-filterpill,
.ranked-accounts-page .shop-sort{
  z-index: 810 !important;
}
.ranked-accounts-page .shop-dropdown,
.ranked-accounts-page .shop-dropdown.is-open,
.ranked-accounts-page .shop-sort__menu{
  z-index: 820 !important;
}
@media (max-width: 768px){
  body.filter-dd-open::before{ z-index: 800 !important; }
  .ranked-accounts-page .shop-dropdown,
  .ranked-accounts-page .shop-dropdown.is-open,
  .ranked-accounts-page .shop-dropdown.is-portal{ z-index: 820 !important; }
  .ranked-accounts-page .shop-dropdown.is-open .shop-dropdown__close{ z-index: 821 !important; }
}