@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css");

:root {
  
  --primary-color: #e4bc4c;
  --primary-hover-color: #ebc048;
  --secondary-color: #35a9ff;
  --secondary-hover-color: #4fb3fd;

  
  --icon-primary: #ffffff;
  --icon-secondary: #ffffff;

  
  --text-primary: #ffffff;
  --text-secondary: #d3d3d3;

  
  --sale-tag: #e4bc4c;
  --sale-tag-text: #ffffff;
  --positive: #8aef5b;
  --positive-hover-color: #8cff56;
  --positive-text: #19781f;
  --negative: #ef5b5b;
  --negative-hover-color: #ee6969;
  --negative-text: #781919;

  
  --background: #1a1a1a;

  
  --background-glow:
    radial-gradient(90% 520px at 50% -60px,
        color-mix(in srgb, var(--primary-color) 26%, transparent) 0%,
        color-mix(in srgb, var(--primary-color) 10%, transparent) 38%,
        transparent 72%),
    linear-gradient(to bottom,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0) 100%);
  --background-glow-height: 700px;

  
  --background-img: none;

  --block-color: #232323;
  --block-light: #2c2c2c;
  --block-dark: #1e1e1e;
  --block-border: #2b2b2b;
  --block-border-width: 4px;

  
  --footer-bg: #141414;
  --footer-dark: #0f0f0f;
  --footer-stroke: #0b0b0b;
  --footer-description: #bcc0c0;

  
  --category-block: #e4bc4c;
  --category-border: #ffce5d;
  --category-light: #ebc048;

  
  --giftcard-primary: #db64f9;
  --giftcard-primary-hover: #e57dff;
  --giftcard-text: #59106b;

  
  --vote-button: #e4bc4c;
  --vote-button-border: #ffce5d;
  --vote-eclipse: #ebc048;

  --box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);
  --border-radius: 10px;

  
  --tebex-legal-footer-background-color: #141414;
  --tebex-legal-footer-border-color: #141414;
}

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: var(--text-primary);
  overflow-x: hidden;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  
  background-color: var(--background);
  background-image: var(--background-glow);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% var(--background-glow-height);
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 700px;
  background-image: var(--background-img);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  opacity: 0.25;
  z-index: -1;
  pointer-events: none;
  mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.4) 400px,
      rgba(0, 0, 0, 0) 700px);
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.4) 400px,
      rgba(0, 0, 0, 0) 700px);
}

#root {
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
  padding: 0 clamp(15px, 4vw, 40px);
  min-height: 100%;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.text-header {
  font-size: 2.2rem;
  font-weight: 800;
  text-transform: uppercase;
}

.text-title {
  font-size: 1.5rem;
  font-weight: 700;
}

.text-subtitle {
  font-size: 1.2rem;
  font-weight: 600;
}

.text-desc {
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 2;
}

.text-navigation {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 2;
}

.text-notice {
  font-size: 0.9rem;
}

.grid-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; height: 100%; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

.category-grid,
.notice-grid,
.packages-section {
  margin-top: 2rem;
}

.module-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: start;
}

.mobile-only {
  display: none !important;
  margin-top: 1rem;
}

@media (max-width: 991px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }
}

@media (max-width: 768px) {
  .col-3,
  .col-4,
  .col-6 {
    grid-column: span 12;
  }
}

.primary-button,
.secondary-button,
.positive-button,
.negative-button {
  border: none;
  border-radius: var(--border-radius);
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.primary-button { background: var(--primary-color); }
.primary-button:hover { background: var(--primary-hover-color); transform: translateY(-1px); }
.primary-button i { color: var(--icon-primary); font-size: 1.2rem; }
.primary-button .button-text { color: var(--icon-primary); font-weight: 600; }

.secondary-button { background: var(--secondary-color); }
.secondary-button:hover { background: var(--secondary-hover-color); transform: translateY(-1px); }
.secondary-button i { color: var(--icon-secondary); font-size: 1.2rem; }
.secondary-button .button-text { color: var(--icon-secondary); font-weight: 600; }

.positive-button { background: var(--positive); }
.positive-button:hover { background: var(--positive-hover-color); transform: translateY(-1px); }
.positive-button i { color: var(--positive-text); font-size: 1.2rem; }
.positive-button .button-text { color: var(--positive-text); font-weight: 600; }

.negative-button { background: var(--negative); }
.negative-button:hover { background: var(--negative-hover-color); transform: translateY(-1px); }
.negative-button i { color: var(--negative-text); font-size: 1.2rem; }
.negative-button .button-text { color: var(--negative-text); font-weight: 600; }

.primary-button.disabled,
.secondary-button.disabled,
.positive-button.disabled,
.negative-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.cart-badge { position: relative; }

.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--negative);
  color: var(--negative-text);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}

.copy-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: var(--positive);
  border-color: var(--positive);
  color: var(--positive-text);
  font-family: "Poppins", sans-serif;
  border-radius: var(--border-radius);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.copy-toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.copy-toast.toast-error {
  background: var(--negative);
  border-color: var(--negative);
  color: var(--negative-text);
}

.copy-toast i {
  color: var(--text-primary);
  font-size: 1.2rem;
}

.navigation-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  gap: 2rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  padding: 1rem 0;
}

.navigation-link {
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.navigation-link:nth-child(1):hover { color: #f10e42; }
.navigation-link:nth-child(2):hover { color: #ef5e10; }
.navigation-link:nth-child(3):hover { color: #e99816; }
.navigation-link:nth-child(4):hover { color: #44bb61; }
.navigation-link:nth-child(5):hover { color: #3299cd; }
.navigation-link:nth-child(6):hover { color: #9400d3; }

.header-center-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7rem;
}

.header-icon-wrapper {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  cursor: pointer;
  min-width: 238px;
  text-decoration: none;
}

.header-icon-sphere {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-color) 40%, transparent);
  border: 1px solid var(--primary-hover-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s ease;
}

.header-icon-wrapper:hover .header-icon-sphere {
  background: color-mix(in srgb, var(--primary-color) 70%, transparent);
}

.header-icon-sphere i {
  color: var(--icon-primary);
  font-size: 24px;
}

.header-icon-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.header-icon-text.text-right {
  text-align: right;
}

.header-icon-title {
  color: var(--text-primary);
  text-transform: uppercase;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
}

.header-icon-subtitle {
  color: var(--primary-color);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
}

.header-center-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0 2rem 0;
  position: relative;
  z-index: 10;
}

.logo-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.logo-btn:hover {
  transform: scale(1.05);
}

.store-logo {
  width: 400px;
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.header-block {
  background: var(--block-color);
  border-radius: var(--border-radius);
  padding: 2rem;
  padding-right: 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  position: relative;
  margin-bottom: 22px;
  box-shadow: var(--box-shadow);
  min-height: 100px;
  overflow: hidden;
}

.header-left {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  z-index: 2;
}

.server-favicon {
  width: 60px;
  height: 60px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease;
}

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

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

.store-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.store-title {
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.store-subtitle {
  color: var(--primary-color);
  margin: 0;
  line-height: 1.3;
}

.header-right {
  display: flex;
  align-items: stretch;
  z-index: 2;
  position: relative;
  margin: -2rem 0;
}

.header-block-subtitle {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.header-block-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  text-transform: uppercase;
  line-height: 1.3;
}

.header-block-icon {
  display: none;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.header-cart-block {
  background: linear-gradient(to top right, var(--secondary-color), var(--secondary-hover-color));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4rem 0 3rem;
  text-decoration: none;
  position: relative;
  clip-path: polygon(50px 0, 100% 0, 100% 100%, 0 100%);
  min-width: 240px;
  margin-right: -50px;
  z-index: 0;
  cursor: pointer;
  transition: filter 0.3s ease, min-width 0.3s ease, padding 0.3s ease;
}

.header-cart-block:hover {
  filter: brightness(1.05);
  min-width: 270px;
  padding-left: 3.5rem;
}

.header-cart-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding-left: 10px;
}

.header-login-block {
  background: linear-gradient(to top right, var(--primary-color), var(--primary-hover-color));
  display: flex;
  align-items: center;
  padding: 0 1.5rem 0 3.5rem;
  text-decoration: none;
  position: relative;
  clip-path: polygon(50px 0, 100% 0, 100% 100%, 0 100%);
  min-width: 280px;
  z-index: 1;
  cursor: pointer;
  transition: filter 0.3s ease, min-width 0.3s ease, padding 0.3s ease;
}

.header-login-block:hover {
  filter: brightness(1.05);
  min-width: 310px;
  padding-left: 4rem;
}

.header-login-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
  padding-right: 90px;
  padding-left: 10px;
  text-align: right;
}

.header-login-player {
  position: absolute;
  right: 30px;
  bottom: 0;
  height: 140%;
  z-index: 2;
  pointer-events: none;
  transform: translateY(33%);
}

.header-login-player img {
  height: 100%;
  width: auto;
  object-fit: contain;
  transform: scaleX(-1);
}

@media (max-width: 768px) {
  .navigation-row,
  .header-center-row {
    display: none;
  }

  .header-block {
    padding: 1rem;
    padding-right: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 1.5rem;
    min-height: 60px;
    overflow: hidden;
  }

  .header-left {
    flex-direction: row;
    gap: 0.75rem;
    align-items: center;
    text-align: left;
  }

  .server-favicon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
  }

  .store-info {
    gap: 0;
    text-align: left;
  }

  .store-title {
    font-size: 1.2rem;
  }

  .store-subtitle {
    display: none;
  }

  .header-right {
    flex-shrink: 0;
    margin: -1rem 0;
  }

  .header-login-block {
    min-width: 50px;
    padding: 0 1rem 0 2rem;
    clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%);
    justify-content: center;
  }

  .header-login-content,
  .header-login-player {
    display: none;
  }

  .header-cart-block {
    min-width: 50px;
    padding: 0 1.25rem 0 1.5rem;
    clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%);
    margin-right: -20px;
  }

  .header-cart-content {
    display: none;
  }

  .header-block-icon {
    display: block;
  }

  .header-login-block:hover,
  .header-cart-block:hover {
    min-width: 50px;
    filter: brightness(1.1);
  }
}

.sale-banner {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 2rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  position: relative;
  overflow: visible;
}

.sale-tag {
  background: var(--sale-tag);
  border-radius: 4px;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sale-tag span {
  color: var(--sale-tag-text);
  margin: 0;
  line-height: 1;
}

.sale-info {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.sale-name {
  color: var(--text-primary);
  margin: 0;
  text-align: center;
  line-height: 1.2;
}

.sale-accent-block {
  width: 80px;
  height: 10px;
  background: var(--sale-tag);
  border-radius: 6px 6px 0 0;
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.sale-countdown {
  background: var(--block-light);
  border-radius: var(--border-radius);
  padding: 1rem 1.25rem;
  flex-shrink: 0;
  min-width: 280px;
}

.countdown-grid {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 45px;
}

.countdown-unit strong {
  color: var(--text-primary);
  margin: 0;
  line-height: 1;
}

.countdown-unit small {
  color: var(--text-primary);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

@media (max-width: 768px) {
  .sale-banner {
    flex-direction: column;
    padding: 1.5rem;
    gap: 1.5rem;
  }

  .sale-tag,
  .sale-accent-block {
    display: none;
  }

  .sale-info {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    order: 2;
    gap: 0;
    pointer-events: auto;
  }

  .sale-name {
    font-size: 1.5rem;
    margin-top: 1rem;
  }

  .sale-countdown {
    width: 100%;
    padding: 1rem;
    order: 3;
    min-width: auto;
  }

  .countdown-grid {
    justify-content: space-around;
    gap: 0.75rem;
  }

  .countdown-unit { min-width: 40px; }
  .countdown-unit strong { font-size: 1.5rem; }
  .countdown-unit small { font-size: 0.65rem; }
}

.category-button {
  background: var(--category-block);
  border: var(--block-border-width) solid var(--category-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-decoration: none;
  height: 100%;
  min-height: 200px;
  overflow: hidden;
  padding: 2rem;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-button:hover {
  transform: translateY(-3px);
  box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.4);
}

.category-eclipse {
  position: absolute;
  left: -50px;
  top: 50%;
  transform: translateY(-50%);
  width: 350px;
  height: 350px;
  background: var(--category-light);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.category-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  z-index: 2;
  position: relative;
}

.category-content h2 {
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.category-content p {
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
  opacity: 0.9;
}

.category-image-container {
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 2;
  position: relative;
}

.category-image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease;
}

.category-button:hover .category-image-container img {
  transform: scale(1.1) rotate(1.1deg);
}

@media (max-width: 768px) {
  .category-button {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
    min-height: 250px;
    gap: 1rem;
  }

  .category-eclipse {
    width: 200px;
    height: 200px;
    left: 50%;
    top: -50px;
    transform: translateX(-50%);
  }

  .category-content {
    align-items: center;
    order: 2;
  }

  .category-content p { font-size: 1.2rem; }

  .category-image-container {
    width: 140px;
    height: 140px;
    order: 1;
  }
}

.textbox-block {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: relative;
  margin-bottom: 2rem;
  overflow: visible;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.textbox-accent-block {
  width: 80px;
  height: 10px;
  background: var(--primary-color);
  border-radius: 0 0 6px 6px;
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.textbox-content {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  padding: 3rem 2rem 2rem 2rem;
}

.textbox-icon-bg {
  position: absolute;
  left: -120px;
  top: -250px;
  transform: rotate(-15deg);
  font-size: 25rem;
  font-weight: 700;
  color: var(--block-dark);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
  -webkit-text-stroke: 2px var(--block-dark);
}

.textbox-header {
  text-align: center;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.textbox-title {
  color: var(--text-primary);
  margin: 0;
}

.textbox-description {
  color: var(--text-secondary);
  text-align: center;
  position: relative;
  font-weight: 500;
  z-index: 2;
  margin: 0;
}

@media (max-width: 768px) {
  .textbox-content { padding: 2.5rem 1.5rem 1.5rem 1.5rem; }
  .textbox-accent-block { display: none; }
  .textbox-icon-bg { font-size: 15rem; top: -120px; left: -60px; opacity: 0.4; }
}

.announcement-block {
  background-color: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 40px;
  overflow: hidden;
  min-height: 300px;
  position: relative;
  margin-top: 2rem;
}

.announcement-image-wrapper {
  flex: 0 0 45%;
  height: 100%;
  min-height: 300px;
  position: relative;
  overflow: hidden;
  border-right: var(--block-border-width) solid var(--block-border);
}

.announcement-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.announcement-image-wrapper:empty {
  display: none;
}

.announcement-image-wrapper:empty + .announcement-content {
  padding-left: 40px;
}

.announcement-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 40px 40px 0;
}

.announcement-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.announcement-subtitle {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.announcement-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  text-transform: uppercase;
}

.announcement-text {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 600px;
}

.announcement-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--primary-color);
  color: var(--icon-primary);
  padding: 14px 28px;
  border-radius: var(--border-radius);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}

.announcement-button:hover {
  background: var(--primary-hover-color);
  transform: translateY(-1px);
}

.announcement-button i {
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.announcement-button:hover i {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .announcement-block {
    flex-direction: column;
    gap: 0;
    min-height: 0;
  }

  .announcement-image-wrapper {
    flex: none;
    width: 100%;
    min-height: 200px;
    border-right: none;
    border-bottom: var(--block-border-width) solid var(--block-border);
  }

  .announcement-content,
  .announcement-image-wrapper:empty + .announcement-content {
    padding: 1.5rem;
  }

  .announcement-title { font-size: 1.6rem; }
}

.packages-grid-container {
  width: 100%;
}

.grid-package-block {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  height: 100%;
  margin-bottom: 2rem;
  min-height: 250px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-package-block:hover {
  transform: translateY(-3px);
  box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.4);
}

.grid-eclipse {
  position: absolute;
  left: -50px;
  top: 50%;
  transform: translateY(-50%);
  width: 400px;
  height: 400px;
  background: var(--block-dark);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.grid-image-container {
  background: var(--block-light);
  border-radius: var(--border-radius);
  width: 180px;
  height: 180px;
  min-width: 150px;
  padding: 1rem;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.grid-image {
  max-width: 150px;
  max-height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.grid-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.grid-header {
  text-align: left;
  margin: 0;
}

.grid-title {
  color: var(--text-primary);
  margin: 0;
}

.grid-price-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.grid-price,
.grid-price-sale {
  color: var(--primary-color);
  font-weight: 700;
  margin: 0;
}

.grid-price-old {
  color: var(--negative);
  font-weight: 600;
  text-decoration: line-through;
  margin: 0;
}

.grid-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.grid-buttons .primary-button,
.grid-buttons .secondary-button,
.grid-buttons .negative-button {
  flex: 1;
  min-width: 45px;
  justify-content: center;
}

@media (max-width: 768px) {
  .grid-package-block {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
    gap: 1.25rem;
  }

  .grid-eclipse {
    width: 260px;
    height: 260px;
    left: 50%;
    top: -60px;
    transform: translateX(-50%);
  }

  .grid-image-container {
    width: 150px;
    height: 150px;
  }

  .grid-content { align-items: center; }
  .grid-header { text-align: center; }
  .grid-price-container { justify-content: center; }
  .grid-buttons { width: 100%; }
}

.packages-list-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.package-list-item {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  box-shadow: var(--box-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.package-list-item:hover {
  transform: translateY(-2px);
  box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.4);
}

.package-list-info {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex: 1;
}

.package-list-info .text-title {
  min-width: 200px;
}

.package-list-price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  text-align: right;
  order: 5;
}

.package-list-price .package-price-row {
  margin-bottom: 0;
  justify-content: flex-end;
}

.package-price-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.package-price {
  color: var(--primary-color);
  font-weight: 700;
  font-size: 1.2rem;
}

.package-price-old {
  color: var(--negative);
  text-decoration: line-through;
  font-weight: 600;
}

.package-countdown {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--negative);
  font-weight: 600;
  font-size: 0.9rem;
}

.package-list-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.package-list-actions .primary-button,
.package-list-actions .secondary-button,
.package-list-actions .negative-button {
  padding: 0.75rem;
  min-width: 45px;
  justify-content: center;
}

@media (max-width: 768px) {
  .package-list-item {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1.25rem;
    text-align: center;
  }

  .package-list-info {
    flex-direction: column;
    gap: 0.75rem;
  }

  .package-list-info .text-title { min-width: 0; }

  .package-list-price {
    justify-content: center;
    text-align: center;
  }

  .package-list-actions { justify-content: center; }
}

.featured-package-block {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-package-block:hover {
  transform: translateY(-3px);
  box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.4);
}

.featured-eclipse {
  position: absolute;
  left: -50px;
  top: 50%;
  transform: translateY(-50%);
  width: 400px;
  height: 400px;
  background: var(--block-dark);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.featured-image-container {
  background: var(--block-light);
  border-radius: var(--border-radius);
  width: 180px;
  height: 180px;
  padding: 1rem;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.featured-image {
  max-width: 150px;
  max-height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.featured-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.featured-header { text-align: left; }

.featured-title {
  color: var(--text-primary);
  margin: 0;
}

.featured-price-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.featured-price,
.featured-price-sale {
  color: var(--primary-color);
  font-weight: 700;
}

.featured-price-old {
  color: var(--negative);
  font-weight: 600;
  text-decoration: line-through;
}

.featured-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .featured-package-block {
    flex-direction: column;
    text-align: center;
  }

  .featured-header { text-align: center; }
  .featured-price-container { justify-content: center; }
}

.package-gift-section-list,
.package-gift-section-grid {
  margin-top: 1rem;
  width: 100%;
}

.package-gift-section-list {
  background: var(--block-dark);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  padding: 1rem;
  margin-top: -0.5rem;
  margin-bottom: 1rem;
}

.gift-toggle-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  transition: color 0.3s ease;
}

.gift-toggle-btn:hover {
  color: var(--primary-color);
}

.gift-form-container-list,
.gift-form-container-grid {
  display: none;
  margin-top: 1rem;
}

.gift-form-container-list.show,
.gift-form-container-grid.show {
  display: block;
}

.gift-input-group {
  display: flex;
  gap: 0.5rem;
}

.package-gift-section-list .gift-toggle-btn,
.package-gift-section-list .gift-input-group {
  margin: 0 auto;
}

.gift-input {
  flex: 1;
  width: 100%;
  background: var(--block-light);
  border: none;
  border-radius: var(--border-radius);
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  outline: none;
}

.gift-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

.gift-submit-btn {
  background: var(--primary-color);
  border: none;
  color: var(--icon-primary);
  border-radius: var(--border-radius);
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.gift-submit-btn:hover { opacity: 0.9; }

.category-page-block {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: relative;
  overflow: visible;
  padding: 3rem 2rem 2rem 2rem;
  margin-bottom: 2rem;
}

.category-page-accent-block {
  width: 80px;
  height: 10px;
  background: var(--secondary-color);
  border-radius: 0 0 6px 6px;
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.category-page-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.category-page-header h1 {
  color: var(--text-primary);
  margin: 0 0 1rem 0;
}

.category-page-header p,
.category-page-description p {
  color: var(--text-secondary);
  margin: 0;
}

.category-page-content {
  color: var(--text-secondary);
  line-height: 1.8;
}

.category-page-content h1,
.category-page-content h2,
.category-page-content h3,
.category-page-content h4,
.category-page-content h5,
.category-page-content h6 {
  color: var(--text-primary);
  margin: 1.5rem 0 0.75rem;
}

.category-page-content p { margin: 0 0 1rem; }

.category-page-content a {
  color: var(--primary-color);
  text-decoration: none;
}

.category-page-content a:hover { text-decoration: underline; }

.category-page-content ul,
.category-page-content ol { padding-left: 1.5rem; margin: 0 0 1rem; }

.category-page-content li { margin-bottom: 0.5rem; }

.category-page-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}

.category-page-content code {
  background: var(--block-dark);
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  font-size: 0.9em;
}

.category-page-content pre {
  background: var(--block-dark);
  border-radius: var(--border-radius);
  padding: 1rem;
  overflow-x: auto;
}

.category-page-content pre code {
  background: none;
  padding: 0;
}

@media (max-width: 768px) {
  .category-page-block { padding: 2.5rem 1.5rem 1.5rem 1.5rem; }
  .category-page-accent-block { display: none; }
}

.package-page-block {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: relative;
  margin-bottom: 2rem;
  overflow: visible;
}

.package-page-accent-block {
  width: 80px;
  height: 10px;
  background: var(--secondary-color);
  border-radius: 0 0 6px 6px;
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.package-page-content {
  padding: 3rem 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.package-page-header { text-align: left; }

.package-page-title {
  color: var(--text-primary);
  margin: 0 0 1rem 0;
}

.package-page-description {
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.8;
}

.package-page-description img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}

.package-page-description a {
  color: var(--primary-color);
  text-decoration: none;
}

.package-page-divider {
  border: none;
  border-top: var(--block-border-width) solid var(--block-border);
  margin: 0;
  width: 100%;
}

.package-page-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.package-page-pricing {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.package-page-pricing .package-price {
  color: var(--primary-color);
  font-size: 1.8rem;
  font-weight: 700;
}

.package-original-price {
  color: var(--negative);
  font-size: 1.8rem;
  font-weight: 700;
  text-decoration: line-through;
}

.package-page-actions {
  display: flex;
  gap: 1rem;
  flex-direction: row;
}

.package-action-btn {
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 600;
}

.package-page-image-block {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  padding: 2rem;
}

.package-page-image {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
}

@media (max-width: 768px) {
  .package-page-content {
    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    gap: 1.5rem;
  }

  .package-page-accent-block { display: none; }
  .package-page-title { font-size: 1.8rem; }
  .package-page-description { font-size: 0.95rem; }

  .package-page-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .package-page-actions {
    width: 100%;
    flex-direction: row;
  }

  .package-action-btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .package-page-pricing .package-price { font-size: 1.5rem; }
  .package-original-price { font-size: 1rem; }

  .package-page-image-block {
    min-height: 300px;
    padding: 1.5rem;
  }
}

.checkout-page-block {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: relative;
  overflow: visible;
}

.checkout-page-accent-block {
  width: 80px;
  height: 10px;
  background: var(--secondary-color);
  border-radius: 0 0 6px 6px;
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.checkout-page-content {
  padding: 40px 30px;
}

.checkout-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.checkout-header-flex .text-title {
  margin: 0;
}

.checkout-total-price {
  color: var(--positive);
}

.checkout-divider {
  border: 0;
  border-top: var(--block-border-width) solid var(--block-border);
  margin: 20px 0;
  width: 100%;
}

.checkout-package-header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  width: 100%;
}

.checkout-package-label {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
}

.checkout-label-package {
  text-align: left;
}

.checkout-package-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  width: 100%;
  background-color: var(--block-dark);
  padding: 20px;
  border-radius: 6px;
  align-items: center;
  margin-bottom: 10px;
}

.checkout-package-price {
  color: var(--primary-color);
  text-align: center;
}

.checkout-quantity-form {
  display: flex;
  justify-content: center;
  align-items: center;
}

.quantity-field {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--footer-bg);
  border-radius: 4px;
  padding: 4px;
}

.quantity-field .quantity {
  background-color: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  text-align: center;
  width: 50px;
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}

.quantity-field .quantity::-webkit-outer-spin-button,
.quantity-field .quantity::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-field .btn-tertiary {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color 0.2s;
}

.quantity-field .btn-tertiary:hover:not(:disabled) {
  color: var(--primary-color);
}

.quantity-field .btn-tertiary:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.checkout-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.checkout-btn-info,
.checkout-btn-remove {
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s;
}

.checkout-btn-info {
  background-color: var(--primary-color);
  color: var(--icon-primary);
}

.checkout-btn-info:hover {
  background-color: var(--primary-hover-color);
}

.checkout-btn-remove {
  background-color: var(--negative);
  color: var(--negative-text);
}

.checkout-btn-remove:hover {
  background-color: var(--negative-hover-color);
}

.checkout-footer {
  margin-top: 30px;
  padding-top: 20px;
}

.checkout-agreements {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.checkout-agreement-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.checkout-agreement-item .checkout-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkout-checkmark {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.checkout-checkmark::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  color: var(--icon-primary);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.checkout-agreement-item .checkout-checkbox:checked ~ .checkout-checkmark {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.checkout-agreement-item .checkout-checkbox:checked ~ .checkout-checkmark::after {
  opacity: 1;
}

.checkout-agreement-item:hover .checkout-checkmark {
  border-color: var(--primary-color);
}

.checkout-agreement-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.checkout-agreement-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.checkout-agreement-link:hover {
  color: var(--primary-hover-color);
  text-decoration: underline;
}

.checkout-agreement-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  padding: 10px 15px;
  background: rgba(231, 76, 60, 0.15);
  border: 1px solid rgba(231, 76, 60, 0.3);
  border-radius: var(--border-radius);
  color: #e74c3c;
  font-size: 0.85rem;
  font-weight: 600;
}

.checkout-agreement-error i {
  font-size: 0.9rem;
}

.checkout-footer-buttons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.checkout-btn-continue,
.checkout-btn-checkout {
  padding: 12px 24px;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.checkout-btn-continue {
  background: var(--secondary-color);
  color: var(--icon-secondary);
}

.checkout-btn-continue:hover {
  background: var(--secondary-hover-color);
  transform: translateY(-2px);
}

.checkout-btn-checkout {
  background-color: var(--primary-color);
  color: var(--icon-primary);
}

.checkout-btn-checkout:hover {
  background-color: var(--primary-hover-color);
  transform: translateY(-2px);
}

.checkout-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 3rem 1rem;
}

.checkout-empty i {
  font-size: 3rem;
  color: var(--block-light);
  margin-bottom: 1rem;
  display: block;
}

@media (max-width: 991px) {
  .checkout-header-flex .text-title,
  .text-title {
    font-size: 1.5rem;
  }

  .checkout-package-label {
    font-size: 0.85rem;
  }
}

@media (max-width: 767px) {
  .checkout-package-header {
    display: none;
  }

  .checkout-package-row {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 20px 15px;
    text-align: center;
  }

  .checkout-package-row .col-3,
  .checkout-package-row .col-6 {
    grid-column: span 12;
  }

  .checkout-package-row .text-desc,
  .checkout-package-price {
    text-align: center;
  }

  .checkout-quantity-form,
  .checkout-actions {
    justify-content: center;
  }

  .text-title { font-size: 1.3rem; }
  .checkout-footer .text-title { font-size: 1.1rem; }

  .checkout-footer-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .checkout-page-content { padding: 30px 20px; }
  .checkout-page-accent-block { display: none; }

  .checkout-btn-continue,
  .checkout-btn-checkout {
    width: 100%;
    justify-content: center;
  }
}

.login-page-block {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: relative;
  margin-bottom: 2rem;
  overflow: visible;
}

.login-page-accent-block {
  width: 80px;
  height: 10px;
  background: var(--secondary-color);
  border-radius: 0 0 6px 6px;
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.login-page-content {
  padding: 3rem 2rem 5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.login-page-header {
  text-align: center;
  width: 100%;
  max-width: 600px;
}

.login-page-title {
  color: var(--text-primary);
  margin: 0 0 1rem 0;
}

.login-page-description {
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.8;
}

.login-platform-toggle {
  display: flex;
  gap: 1rem;
  width: 100%;
  max-width: 600px;
}

.login-platform-btn {
  flex: 1;
  background: var(--block-dark);
  border-radius: var(--border-radius);
  border: none;
  padding: 2rem;
  color: var(--text-secondary);
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
}

.login-platform-btn.mode-active,
.login-platform-btn:hover {
  background: var(--block-light);
  color: var(--text-primary);
}

.login-form {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
  max-width: 600px;
  align-items: center;
}

.login-form:focus-within {
  outline: none;
}

.login-input {
  flex: 1;
  background: var(--block-dark);
  border: none;
  border-radius: var(--border-radius);
  padding: 1rem 1.5rem;
  color: var(--text-primary);
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  transition: border-color 0.3s ease;
}

.login-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

.login-input:focus {
  outline: none;
}

.login-submit-btn {
  flex-shrink: 0;
  font-size: 1rem;
  align-self: stretch;
  font-weight: 600;
}

@media (max-width: 768px) {
  .login-page-content {
    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    gap: 1.5rem;
  }

  .login-page-accent-block { display: none; }
  .login-page-title { font-size: 1.8rem; }
  .login-page-description { font-size: 0.95rem; }

  .login-platform-toggle {
    flex-direction: column;
    gap: 0.75rem;
  }

  .login-platform-btn { padding: 1.5rem; }

  .login-form {
    flex-direction: column;
    gap: 1rem;
    max-width: none;
  }

  .login-submit-btn {
    width: 100%;
    align-self: stretch;
    justify-content: center;
  }
}

.cms-page-block {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: relative;
  overflow: visible;
  padding: 3rem 2rem 2rem 2rem;
}

.cms-page-accent-block {
  width: 80px;
  height: 10px;
  background: var(--secondary-color);
  border-radius: 0 0 6px 6px;
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.cms-page-header {
  text-align: center;
  margin-bottom: 2rem;
}

.cms-page-title {
  color: var(--text-primary);
  margin: 0 0 1rem 0;
}

.cms-page-description {
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.8;
}

.cms-page-description a {
  color: var(--primary-color);
  text-decoration: none;
}

.cms-page-description a:hover { text-decoration: underline; }

.cms-page-description img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}

@media (max-width: 768px) {
  .cms-page-block { padding: 2.5rem 1.5rem 1.5rem 1.5rem; }
  .cms-page-accent-block { display: none; }
  .cms-page-header { margin-bottom: 1.5rem; }
  .cms-page-title { font-size: 1.8rem; }
  .cms-page-description { font-size: 0.95rem; }
}

.serverstatus-block,
.topdonator-block,
.giftcard-block {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: relative;
  margin-bottom: 2rem;
  overflow: visible;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.serverstatus-content,
.topdonator-content,
.giftcard-content {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  padding: 3rem 2rem 2rem 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.serverstatus-accent-block,
.topdonator-accent-block,
.giftcard-accent-block,
.payments-accent-block,
.community-goal-accent-block {
  width: 80px;
  height: 10px;
  border-radius: 0 0 6px 6px;
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.serverstatus-accent-block,
.payments-accent-block { background: var(--primary-color); }
.topdonator-accent-block { background: var(--positive); }
.giftcard-accent-block { background: var(--giftcard-primary); }
.community-goal-accent-block { background: var(--secondary-color); }

.serverstatus-header,
.topdonator-header,
.giftcard-header,
.payment-goal-header {
  text-align: center;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.serverstatus-title,
.topdonator-title,
.giftcard-title,
.payment-goal-title,
.payments-title {
  color: var(--text-primary);
  margin: 0;
}

.serverstatus-icon-bg {
  position: absolute;
  left: -120px;
  top: -350px;
  transform: rotate(-15deg);
  font-size: 45rem;
  font-weight: 700;
  color: var(--block-dark);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
  -webkit-text-stroke: 2px var(--block-dark);
}

.serverstatus-description {
  color: var(--text-secondary);
  text-align: center;
  position: relative;
  font-weight: 500;
  z-index: 2;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.serverstatus-description i {
  font-size: 1.2rem;
}

.topdonator-content { min-height: 250px; }

.topdonator-icon-bg {
  position: absolute;
  left: -70px;
  top: -210px;
  transform: rotate(-15deg);
  font-size: 25rem;
  font-weight: 700;
  color: var(--block-dark);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
  -webkit-text-stroke: 2px var(--block-dark);
}

.topdonator-description {
  color: var(--text-secondary);
  text-align: center;
  position: relative;
  font-weight: 500;
  z-index: 2;
  margin: 0;
}

.topdonator-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.topdonator-username {
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: 600;
}

.topdonator-amount {
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
}

.topdonator-amount strong {
  color: var(--positive);
  font-weight: 700;
}

.topdonator-skin-container {
  position: absolute;
  bottom: -60px;
  right: 20px;
  width: 120px;
  height: 230px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}

.topdonator-skin {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

.topdonator-skin-placeholder {
  width: 80px;
  height: 80px;
  background: var(--block-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.topdonator-skin-placeholder i {
  font-size: 2.5rem;
  color: var(--text-secondary);
  opacity: 0.5;
}

.topdonator-empty,
.payments-empty {
  text-align: center;
  color: var(--text-secondary);
  font-weight: 500;
  padding: 2rem 0;
  position: relative;
  z-index: 2;
}

.payment-goal-block {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: relative;
  overflow: visible;
}

.payment-goal-content {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  padding: 3rem 2rem 2rem 2rem;
}

.payment-goal-icon-bg {
  position: absolute;
  left: 33%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%) rotate(-15deg);
  font-size: 35rem;
  font-weight: 700;
  color: var(--block-dark);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
  -webkit-text-stroke: 2px var(--block-dark);
}

.payment-goal-amount {
  text-align: right;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 2;
}

.payment-goal-amount span {
  color: var(--text-primary);
  opacity: 0.8;
}

.payment-goal-progress-container {
  position: relative;
  z-index: 2;
  margin-bottom: 1.5rem;
}

.payment-goal-progress-bar {
  width: 100%;
  height: 50px;
  background: var(--block-dark);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
}

.payment-goal-progress-fill {
  height: 100%;
  background: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 1rem;
  position: relative;
  transition: width 0.6s ease;
}

.payment-goal-percentage {
  color: var(--icon-secondary);
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap;
}

.payment-goal-repeatable {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  z-index: 2;
}

.payment-goal-repeatable i {
  color: var(--secondary-color);
  font-size: 1rem;
}

.payments-block {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: relative;
  overflow: visible;
}

.payments-content {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  padding: 3rem 2rem 2rem 2rem;
}

.payments-icon-bg {
  position: absolute;
  right: 33%;
  top: 50%;
  transform: translateY(-50%) translateX(50%) rotate(-15deg);
  font-size: 35rem;
  font-weight: 700;
  color: var(--block-dark);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
  -webkit-text-stroke: 2px var(--block-dark);
}

.payments-header {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

.payment-avatars-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: flex-start;
  gap: 1.5rem;
  position: relative;
  z-index: 2;
}

.payment-avatar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

.payment-avatar-container {
  background: var(--block-light);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  padding: 1rem;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.payment-avatar-img {
  width: 120%;
  height: auto;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  image-rendering: pixelated;
}

.payment-avatar-placeholder {
  font-size: 3rem;
  color: var(--text-secondary);
  opacity: 0.5;
}

.payment-name {
  color: var(--text-secondary);
  text-align: center;
  font-weight: 500;
  font-size: 0.9rem;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.giftcard-icon-bg {
  position: absolute;
  left: -120px;
  top: -350px;
  transform: rotate(-15deg);
  font-size: 45rem;
  font-weight: 700;
  color: var(--block-dark);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
  -webkit-text-stroke: 2px var(--block-dark);
}

.giftcard-form {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

.giftcard-input {
  flex: 1;
  background: var(--block-dark);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  padding: 0.875rem 1.25rem;
  color: var(--text-primary);
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  transition: border-color 0.3s ease;
}

.giftcard-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

.giftcard-input:focus { outline: none; }

.giftcard-btn {
  background: var(--giftcard-primary);
  border: none;
  border-radius: var(--border-radius);
  padding: 0.875rem 1.5rem;
  color: var(--giftcard-text);
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.giftcard-btn:hover {
  background: var(--giftcard-primary-hover);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .serverstatus-content,
  .topdonator-content,
  .giftcard-content,
  .payment-goal-content,
  .payments-content {
    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
  }

  .serverstatus-accent-block,
  .topdonator-accent-block,
  .giftcard-accent-block,
  .payments-accent-block,
  .community-goal-accent-block {
    display: none;
  }

  .serverstatus-icon-bg,
  .giftcard-icon-bg { font-size: 40rem; left: -90px; top: -300px; opacity: 0.4; }
  .topdonator-icon-bg { font-size: 20rem; opacity: 0.4; }
  .payment-goal-icon-bg,
  .payments-icon-bg { font-size: 15rem; opacity: 0.4; }

  .topdonator-content { min-height: 220px; }

  .payment-goal-header { margin-bottom: 1rem; }
  .payment-goal-title { font-size: 1.3rem; }
  .payment-goal-amount span { font-size: 1rem; }
  .payment-goal-progress-bar { height: 40px; }
  .payment-goal-percentage { font-size: 0.95rem; padding-right: 0.5rem; }
  .payment-goal-repeatable { font-size: 0.85rem; }

  .payments-header { margin-bottom: 1.5rem; }
  .payment-avatars-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }

  .giftcard-form { flex-direction: column; align-items: stretch; }
  .giftcard-btn { width: 100%; }
}

.options-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.options-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.options-label {
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 500;
}

.options-input {
  background: var(--block-dark);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  padding: 0.875rem 1.25rem;
  color: var(--text-primary);
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  width: 100%;
  transition: border-color 0.3s ease;
}

.options-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

.options-input:focus { outline: none; }

.options-input-group {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.options-input-group .options-input { flex: 1; }

.options-input-append {
  background: var(--block-dark);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  padding: 0.875rem 1.25rem;
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
}

.options-discord-btn {
  background: #5865f2;
  border: none;
  border-radius: var(--border-radius);
  padding: 0.875rem 1.5rem;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.options-discord-btn:hover {
  background: #4752c4;
  transform: translateY(-1px);
}

.options-form-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
}

.options-back-btn {
  background: var(--block-dark);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  padding: 0.875rem 1.5rem;
  color: var(--text-primary);
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: border-color 0.3s ease, transform 0.2s ease;
}

.options-back-btn:hover {
  border-color: var(--text-secondary);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .options-form-actions { flex-direction: column; }

  .options-back-btn,
  .options-form-actions .checkout-btn-checkout {
    width: 100%;
    justify-content: center;
  }
}

.rules-block,
.faq-block {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: relative;
  overflow: visible;
  margin-bottom: 2rem;
  width: 100%;
}

.rules-accent-block,
.faq-accent-block {
  width: 80px;
  height: 10px;
  border-radius: 0 0 6px 6px;
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.rules-accent-block { background: var(--negative); }
.faq-accent-block { background: var(--secondary-color); }

.rules-content,
.faq-content {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  padding: 3rem 2rem 2rem 2rem;
}

.rules-icon-bg,
.faq-icon-bg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  font-size: 35rem;
  font-weight: 700;
  color: var(--block-dark);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
  -webkit-text-stroke: 2px var(--block-dark);
}

.rules-header,
.faq-header {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

.rules-title,
.faq-title {
  color: var(--text-primary);
  margin: 0 0 1rem 0;
}

.rules-description,
.faq-description {
  color: var(--text-secondary);
  margin: 0 auto;
  max-width: 800px;
}

.rules-container,
.faq-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.rule-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--block-light);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  align-items: flex-start;
  transition: all 0.3s ease;
}

.rule-item:hover {
  background: var(--block-dark);
  border-color: var(--negative);
}

.rule-number {
  background: var(--negative);
  color: var(--negative-text);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.rule-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.rule-title {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.3;
}

.rule-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

.faq-item {
  background: var(--block-light);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-question {
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.faq-question:hover {
  background: var(--block-dark);
}

.faq-text {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
}

.faq-arrow {
  font-size: 0.9rem;
  color: var(--text-secondary);
  transition: transform 0.3s ease, color 0.3s ease;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  background: var(--block-dark);
  transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
}

.faq-answer p {
  padding: 1.5rem;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
}

.faq-item.active .faq-answer {
  max-height: 1000px;
  transition: max-height 0.4s cubic-bezier(1, 0, 1, 0);
}

.faq-item.active .faq-arrow {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .rules-content,
  .faq-content { padding: 2.5rem 1.5rem 1.5rem 1.5rem; }

  .rules-accent-block,
  .faq-accent-block { display: none; }

  .rules-icon-bg,
  .faq-icon-bg { font-size: 20rem; opacity: 0.3; }

  .rules-header,
  .faq-header { margin-bottom: 1.5rem; }

  .rules-title,
  .faq-title { font-size: 1.8rem; }
}

.staff-card {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  height: 100%;
}

.staff-image {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 0;
}

.staff-image img {
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

.staff-image-placeholder {
  font-size: 80px;
  color: var(--text-primary);
  opacity: 0.1;
}

.staff-details {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.staff-player-name {
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.staff-tier-bar,
.patron-tier-bar {
  border: var(--block-border-width) solid rgba(255, 255, 255, 0.3);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 16px 24px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-top: 1rem;
}

.staff-tier-owner,
.staff-tier-administrator { background: #d50000; }
.staff-tier-moderator { background: #fc3850; }
.staff-tier-helper { background: #6ed1fc; }
.staff-tier-media { background: #73fc99; }

@media (max-width: 768px) {
  .staff-card { padding: 1rem; }
  .staff-image { height: 100px; }
  .staff-image img { width: 100px; height: 100px; }
  .staff-player-name { font-size: 1.1rem; }
}

.patron-card {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 320px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.patron-card:hover {
  transform: translateY(-3px);
  box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.4);
  border-color: var(--primary-color);
}

.patron-accent-block {
  width: 80px;
  height: 10px;
  background: var(--primary-color);
  border-radius: 0 0 6px 6px;
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.patron-eclipse {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: var(--block-light);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

.patron-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.patron-header { margin-top: 1rem; }

.patron-icon {
  font-size: 1.5rem;
  color: var(--primary-color);
}

.patron-image {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 0;
}

.patron-image img {
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s ease;
}

.patron-card:hover .patron-image img {
  transform: scale(1.05);
}

.patron-image-placeholder {
  font-size: 80px;
  color: var(--text-primary);
  opacity: 0.1;
}

.patron-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.patron-player-name {
  color: var(--primary-color);
  margin: 0;
  line-height: 1.2;
}

.patron-subtitle {
  color: var(--text-secondary);
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

.patron-tier-diamond { background: #20c0e6; }
.patron-tier-emerald { background: #20e650; }
.patron-tier-netherite { background: #e4274a; }

@media (max-width: 768px) {
  .patron-card { min-height: 280px; padding: 1.5rem; }
  .patron-accent-block { display: none; }
  .patron-subtitle { font-size: 0.85rem; }
}

.ranktable-block {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 2rem;
  margin-bottom: 2rem;
  overflow-x: auto;
}

.rank-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.rank-table thead th {
  padding: 1rem;
  vertical-align: bottom;
  text-align: center;
}

.rank-table tbody tr:nth-child(odd) td,
.rank-table tbody tr:nth-child(odd) th {
  background: var(--block-dark);
}

.rank-table tbody tr:nth-child(odd) th:first-child,
.rank-table tbody tr:nth-child(odd) td:first-child {
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.rank-table tbody tr:nth-child(odd) th:last-child,
.rank-table tbody tr:nth-child(odd) td:last-child {
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.rank-table tbody tr:nth-child(even) td,
.rank-table tbody tr:nth-child(even) th {
  background: transparent;
}

.rank-table tbody td,
.rank-table tbody th {
  padding: 0.9rem 1rem;
  text-align: center;
  color: var(--text-secondary);
  font-weight: 500;
}

.rank-table tbody th:first-child {
  text-align: left;
  color: var(--text-primary);
  font-weight: 600;
}

.rank-table .feature-yes { color: var(--positive); }
.rank-table .feature-no { color: var(--negative); opacity: 0.6; }

.rank-table-header-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.package-img-block {
  background: var(--block-light);
  border-radius: var(--border-radius);
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

.package-img-src {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.rank-table thead th:hover .package-img-src {
  transform: scale(1.08);
}

.legend-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  padding: 20px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.legend-modal.show {
  opacity: 1;
  visibility: visible;
  display: flex !important;
}

.legend-modal-content {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  max-width: 500px;
  width: 100%;
  transform: scale(0.9);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  transition: transform 0.3s ease;
}

.legend-modal.show .legend-modal-content {
  transform: scale(1);
}

.legend-modal-accent-block {
  width: 80px;
  height: 10px;
  background: var(--secondary-color);
  border-radius: 0 0 6px 6px;
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.legend-modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.legend-modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  text-align: center;
}

.legend-modal-body {
  padding: 0 2rem 2rem 2rem;
}

.legend-modal .gift-input-group {
  display: flex;
  background-color: var(--block-dark);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-bottom: 1rem;
  width: 100%;
}

.legend-modal .gift-input-group form {
  width: 100%;
  display: flex;
  margin: 0;
}

.legend-modal .gift-input {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 1rem;
}

.gift-input-icon {
  padding: 1rem 1.25rem;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.legend-modal-actions {
  display: flex;
  gap: 1rem;
}

.legend-modal-actions .gift-submit-btn,
.legend-modal-actions .gift-modal-close {
  flex: 1;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto;
}

.legend-modal-actions .gift-submit-btn i,
.legend-modal-actions .gift-submit-btn .button-text {
  color: var(--icon-primary);
  font-weight: 700;
}

.legend-modal-actions .gift-modal-close i,
.legend-modal-actions .gift-modal-close .button-text {
  color: var(--negative-text);
  font-weight: 700;
}

@media (max-width: 768px) {
  .legend-modal { padding: 15px; }
  .legend-modal-content { max-width: none; }
  .legend-modal-header { padding: 1.5rem; }
  .legend-modal-body { padding: 0 1.5rem 1.5rem 1.5rem; }
}

.legend-package-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  padding: 20px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.legend-package-modal.show {
  opacity: 1;
  visibility: visible;
  display: flex !important;
}

.legend-package-modal-content {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  transform: scale(0.9);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.legend-package-modal.show .legend-package-modal-content {
  transform: scale(1);
}

.legend-package-modal-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: var(--negative);
  color: var(--negative-text);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  font-size: 0.85rem;
  z-index: 2;
  transition: opacity 0.2s, background-color 0.2s;
}

.legend-package-modal-close-btn:hover {
  background-color: var(--negative-hover-color);
}

.legend-package-modal-close-btn i {
  color: var(--negative-text);
}

.legend-package-modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 3rem;
}

.legend-package-modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  text-align: center;
}

.legend-package-modal-body {
  padding: 0 2rem 2rem 2rem;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.legend-package-modal-description {
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.6;
  max-height: 40vh;
  overflow-y: auto;
  word-wrap: break-word;
}

.legend-package-modal-description p,
.legend-package-modal-description h1,
.legend-package-modal-description h2,
.legend-package-modal-description h3,
.legend-package-modal-description h4,
.legend-package-modal-description h5,
.legend-package-modal-description h6,
.legend-package-modal-description ul,
.legend-package-modal-description ol,
.legend-package-modal-description blockquote {
  margin: 0 0 0.75rem;
}

.legend-package-modal-description h1,
.legend-package-modal-description h2,
.legend-package-modal-description h3,
.legend-package-modal-description h4,
.legend-package-modal-description h5,
.legend-package-modal-description h6 {
  color: var(--text-primary);
  font-size: 1.1rem;
}

.legend-package-modal-description a {
  color: var(--primary-color);
  text-decoration: none;
}

.legend-package-modal-description img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}

.legend-package-modal-description ul,
.legend-package-modal-description ol {
  padding-left: 1.25rem;
}

.legend-package-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: var(--block-border-width) solid var(--block-border);
  padding-top: 1.25rem;
  margin-top: auto;
}

.legend-package-modal-pricing {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.legend-package-modal-pricing .package-price {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
}

.legend-package-modal-pricing .package-original-price {
  font-size: 1rem;
  color: var(--text-secondary);
  text-decoration: line-through;
  opacity: 0.7;
}

.legend-package-modal-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.legend-package-modal-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 1rem;
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-size: 1rem;
  transition: background-color 0.2s, opacity 0.2s;
}

.legend-package-modal-btn-cart,
.legend-package-modal-btn-gift {
  background-color: var(--primary-color);
  color: var(--icon-primary);
}

.legend-package-modal-btn-cart:hover,
.legend-package-modal-btn-gift:hover {
  background-color: var(--primary-hover-color);
}

.legend-package-modal-btn-subscribe {
  background-color: var(--secondary-color);
  color: var(--text-primary);
}

.legend-package-modal-btn-subscribe:hover { opacity: 0.85; }

.legend-package-modal-btn-remove {
  background-color: var(--negative);
  color: var(--negative-text);
}

.legend-package-modal-btn-remove:hover {
  background-color: var(--negative-hover-color);
}

.legend-package-modal-action-btn i {
  color: inherit;
}

@media (max-width: 768px) {
  .legend-package-modal { padding: 15px; }

  .legend-package-modal-content {
    max-width: none;
    max-height: 92vh;
  }

  .legend-package-modal-header { padding: 1.5rem 3rem; }
  .legend-package-modal-title { font-size: 1.25rem; }
  .legend-package-modal-body { padding: 0 1.5rem 1.5rem 1.5rem; }

  .legend-package-modal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .legend-package-modal-actions .legend-package-modal-action-btn {
    flex: 1;
  }
}

.footer {
  width: 100%;
  margin-top: 10rem;
  font-family: "Poppins", sans-serif;
}

.footer-top {
  background: var(--footer-bg);
  border-top: 10px solid var(--footer-stroke);
  padding: 2.5rem 0;
  position: relative;
}

.footer-top-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 clamp(15px, 4vw, 40px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-copyright {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer-copyright p {
  color: var(--footer-description);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.5;
}

.footer-disclaimer {
  opacity: 0.7;
  font-size: 0.85rem !important;
}

.footer-pages {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-page-link {
  color: var(--footer-description);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-pages > :nth-child(1) .footer-page-link:hover { color: #f10e42; }
.footer-pages > :nth-child(2) .footer-page-link:hover { color: #ef5e10; }
.footer-pages > :nth-child(3) .footer-page-link:hover { color: #e99816; }
.footer-pages > :nth-child(4) .footer-page-link:hover { color: #44bb61; }
.footer-pages > :nth-child(5) .footer-page-link:hover { color: #3299cd; }
.footer-pages > :nth-child(6) .footer-page-link:hover { color: #9400d3; }

.footer-center {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.footer-logo-wrapper {
  position: relative;
  margin-top: -150px;
}

.footer-logo {
  width: auto;
  max-height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  transition: transform 0.3s ease;
}

.footer-logo:hover { transform: scale(1.05); }

.footer-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.footer-socials {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.footer-bottom {
  background: var(--footer-dark);
  padding: 1.5rem 0;
}

.footer-bottom-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 clamp(15px, 4vw, 40px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-credits {
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0;
  text-align: center;
}

.footer-credits a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-credits a:hover { color: var(--primary-color); }

.social-cube-btn {
  position: relative;
  width: 50px;
  height: 50px;
  text-decoration: none;
  display: block;
}

.social-cube-face {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  z-index: 2;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.social-cube-face i { font-size: 20px; }

.social-cube-shadow {
  position: absolute;
  bottom: -4px;
  left: 4px;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  z-index: 1;
  opacity: 0.7;
}

.social-cube-btn:hover .social-cube-face { transform: translateY(-3px); }
.social-cube-btn:active .social-cube-face { transform: translateY(2px); }

.social-discord .social-cube-face { background-color: #5865f2; }
.social-discord .social-cube-shadow { background-color: #4752c4; }
.social-youtube .social-cube-face { background-color: #f10e42; }
.social-youtube .social-cube-shadow { background-color: #c00b35; }
.social-instagram .social-cube-face { background-color: #ef5e10; }
.social-instagram .social-cube-shadow { background-color: #bf4b0d; }
.social-x .social-cube-face { background-color: #e99816; }
.social-x .social-cube-shadow { background-color: #ba7a12; }
.social-facebook .social-cube-face { background-color: #44bb61; }
.social-facebook .social-cube-shadow { background-color: #36964e; }
.social-tiktok .social-cube-face { background-color: #3299cd; }
.social-tiktok .social-cube-shadow { background-color: #287aa4; }
.social-bluesky .social-cube-face { background-color: #9400d3; }
.social-bluesky .social-cube-shadow { background-color: #7600a9; }

@media (max-width: 768px) {
  .footer { margin-top: 2rem; }
  .footer-top { padding: 2rem 0; }

  .footer-top-container {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }

  .footer-left { order: 2; align-items: center; }
  .footer-copyright { align-items: center; }
  .footer-pages { justify-content: center; }
  .footer-center { order: 1; }
  .footer-logo-wrapper { margin-top: -60px; }
  .footer-logo { max-height: 100px; }
  .footer-right { order: 3; justify-content: center; }
  .footer-socials { justify-content: center; }
  .footer-bottom { padding: 1.25rem 0; }
  .footer-credits { font-size: 0.85rem; }

  .social-cube-btn,
  .social-cube-face,
  .social-cube-shadow {
    width: 44px;
    height: 44px;
  }
}

/* ==========================================================================
   Store 2.0 bridge
   --------------------------------------------------------------------------
   These components are wired to Tebex's main.js through data attributes and
   class hooks (the slide-out basket, the add / subscribe buttons, the price
   partials). Their markup is deliberately left untouched so the store keeps
   working; they are restyled here instead.
   ========================================================================== */

/* Layout wrappers the platform always renders */
.site { width: 100%; }

.site-content,
.site-content-widgets {
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
}

/* -- package-actions.twig, rendered inside .grid-buttons -- */

.grid-buttons .price {
  color: var(--primary-color);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.grid-buttons .price del,
.grid-buttons .price .discount {
  color: var(--negative);
  font-weight: 600;
  text-decoration: line-through;
  font-size: 1rem;
}

/* The platform's own buttons, restyled to match the theme */
.btn-primary,
.btn-secondary,
.btn-tertiary {
  border: none;
  border-radius: var(--border-radius);
  padding: 0.75rem 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-primary {
  background: var(--primary-color);
  color: var(--icon-primary);
}

.btn-primary:hover {
  background: var(--primary-hover-color);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--secondary-color);
  color: var(--icon-secondary);
}

.btn-secondary:hover {
  background: var(--secondary-hover-color);
  transform: translateY(-1px);
}

.btn-tertiary {
  background: var(--block-light);
  color: var(--text-primary);
}

.btn-tertiary:hover { background: var(--block-dark); }

[hidden] { display: none !important; }

.grid-buttons .half { flex: 1 1 45%; }
.grid-buttons .wide { flex: 1 1 100%; }

/* Package artwork placeholder when a package has no media */
.image-default {
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  background: var(--block-dark);
}

.grid-title a {
  color: inherit;
  text-decoration: none;
}

.grid-title a:hover { color: var(--primary-color); }

/* -- Sidebar widgets, if the store turns them on -- */

/* -- Login page (username.html) -- */

.store-form .field {
  display: flex;
  gap: 1rem;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.store-form input[type="text"] {
  flex: 1;
  background: var(--block-dark);
  border: none;
  border-radius: var(--border-radius);
  padding: 1rem 1.5rem;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
}

.store-form input[type="text"]::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

.store-form input[type="text"]:focus { outline: none; }

/* -- Generic prose blocks the platform renders -- */

.text-content a { color: var(--primary-color); }
.text-content img { max-width: 100%; height: auto; border-radius: var(--border-radius); }

/* Logo fallback when the store has not uploaded one */
.store-logo-text {
  color: var(--primary-color);
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Platform machinery
   --------------------------------------------------------------------------
   main.js BUILDS these elements at runtime - they exist in no template, so
   they were lost when this stylesheet replaced the stock one. Without them
   the basket, login and add-to-basket popups are created in the DOM but have
   no styling at all, which is why they appeared to do nothing.

   Every class below is one main.js actually adds or queries. Styled to match
   the theme rather than restoring the stock look.
   ========================================================================== */

/* Popup shell -------------------------------------------------------------- */

html.no-scroll,
html.no-scroll body {
  overflow: hidden;
}

.popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  animation: popup-fade 0.2s ease;
}

@keyframes popup-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Full-bleed scroll area; clicking it directly closes the popup, so it must
   fill the overlay and the panel must sit inside it. */
.popup-scroll-cont {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 20px;
}

.popup-content {
  position: relative;
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  color: var(--text-primary);
  width: 100%;
  max-width: 820px;
  margin: auto;
  padding: 3rem 2rem 2rem;
  animation: popup-rise 0.25s ease;
}

@keyframes popup-rise {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.popup-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: auto;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.9rem;
  border: none;
  border-radius: 6px;
  background: var(--negative);
  color: var(--negative-text);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.popup-close:hover {
  background: var(--negative-hover-color);
}

/* While the content is still being fetched the panel is empty - give it a
   spinner so the popup does not look broken. */
.popup-loading .popup-content {
  min-height: 220px;
}

.popup-loading .popup-content::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 4px solid var(--block-light);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: popup-spin 0.7s linear infinite;
}

@keyframes popup-spin {
  to { transform: rotate(360deg); }
}

/* Variants ---------------------------------------------------------------- */

.product-options-popup .popup-content,
.gift-form-popup .popup-content { max-width: 560px; }
.popup-media-slider .popup-content { max-width: 1100px; }

/* The basket renders both as a page and inside a popup; neutralise the
   page-level framing when it is in a popup. */
.popup .basket {
  margin: 0;
  max-width: none;
  border: none;
  box-shadow: none;
  padding: 0;
  background: transparent;
}

iframe.slide-frame { opacity: 0; transition: opacity 0.3s ease; }
iframe.slide-frame.iframe-loaded { opacity: 1; }

/* Toasts ------------------------------------------------------------------- */

.toaster {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 260px;
  max-width: 420px;
  padding: 14px 18px;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  font-weight: 600;
  font-size: 0.95rem;
  background: var(--block-light);
  color: var(--text-primary);
  animation: popup-rise 0.25s ease;
}

.toast p { margin: 0; flex: 1; }

.toast-info { background: var(--secondary-color); color: var(--icon-secondary); }
.toast-success { background: var(--positive); color: var(--positive-text); }
.toast-error { background: var(--negative); color: var(--negative-text); }

.toast-close {
  border: none;
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.35rem 0.7rem;
  border-radius: 5px;
  cursor: pointer;
}

.toast-close:hover { background: rgba(0, 0, 0, 0.35); }

/* Busy state on package actions ------------------------------------------- */

.updating {
  position: relative;
  opacity: 0.6;
  pointer-events: none;
}

/* Quantity stepper injected into package actions --------------------------- */

.quantity-field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--block-dark);
  border-radius: 6px;
  padding: 4px;
}

.quantity-field input.quantity {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  text-align: center;
  width: 52px;
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}

.quantity-field input.quantity::-webkit-outer-spin-button,
.quantity-field input.quantity::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-field button {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1;
  padding: 4px 10px;
  cursor: pointer;
}

.quantity-field button:hover { color: var(--primary-color); }

.open-basket-cta { width: 100%; }

/* Mobile navigation drawer ------------------------------------------------- */

.toggle-navigation,
.close-navigation {
  background: var(--block-light);
  border: none;
  border-radius: var(--border-radius);
  color: var(--text-primary);
  font-family: inherit;
  padding: 0.6rem 1rem;
  cursor: pointer;
}

.site-navigation.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 86vw);
  z-index: 9998;
  background: var(--block-color);
  border-right: var(--block-border-width) solid var(--block-border);
  padding: 1.5rem;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

body.show-navigation .site-navigation.drawer { transform: none; }

.site-navigation .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-navigation .menu a {
  display: block;
  padding: 0.6rem 0.25rem;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 6px;
}

.site-navigation .menu a:hover,
.site-navigation .menu .link-active { color: var(--primary-color); }

.site-navigation .menu ul {
  list-style: none;
  padding-left: 1rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.site-navigation .menu li.active > ul,
.site-navigation .menu li.expanded > ul { max-height: 800px; }

@media (max-width: 768px) {
  .popup-scroll-cont { padding: 0; }

  .popup-content {
    max-width: none;
    min-height: 100%;
    border-radius: 0;
    border: none;
    margin: 0;
  }

  .toaster {
    left: 15px;
    right: 15px;
    bottom: 15px;
  }

  .toast { min-width: 0; max-width: none; }
}

/* ==========================================================================
   Popup content: typography, forms, swipe-to-close
   --------------------------------------------------------------------------
   The login / quote / options popups pull a server-rendered fragment into
   .popup-content and give it `store-form text-content`. Those fragments are
   stock Tebex markup (plain h2 / form / input / button), so they need real
   styling here rather than in a template.

   main.js also wraps popups in a Drawer, which toggles `drawer`,
   `drawer-<dir>`, `touching` and `may-close` and animates the content with
   style.translate. The transition rules below make that drag feel right.
   ========================================================================== */

.login-popup-content { max-width: 520px; }
.store-quote-popup .popup-content { max-width: 640px; }

/* -- Prose inside a popup or a plain store page -- */

.popup-content > .site,
.popup-content > .site > .site-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.store-text h2,
.popup-content h2 {
  margin: 0 0 1.5rem;
  color: var(--text-primary);
  font-size: 1.8rem;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
}

.store-text h3,
.popup-content h3 {
  color: var(--text-primary);
  margin: 1.5rem 0 0.75rem;
}

.text-content p {
  color: var(--text-secondary);
  line-height: 1.8;
}

/* -- Login / username form -------------------------------------------------
   Stock markup is: <form class="field"><input name="ign"><button></form>
   ------------------------------------------------------------------------- */

.store-form .field {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  align-items: stretch;
}

.store-form .field + .field { margin-top: 1rem; }

.store-form input[type="text"],
.store-form input[type="number"],
.store-form input[type="email"],
.store-form select {
  flex: 1;
  min-width: 0;
  background: var(--block-dark);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  padding: 0.9rem 1.25rem;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  transition: border-color 0.2s ease;
}

.store-form input::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

.store-form input:focus,
.store-form select:focus {
  outline: none;
  border-color: var(--primary-color);
}

.store-form .field .btn-primary,
.store-form .field button[type="submit"] {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.9rem 1.75rem;
}

/* The login popup is a single centred form - give it room to breathe. */
.login-popup-content .store-form,
.login-popup-content .site-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Full-page /login (not the popup) sits on a block like the rest of the theme */
#root .site-content > .store-form {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 3rem 2rem;
  margin: 2rem auto;
  max-width: 760px;
}

/* -- Swipe to close -------------------------------------------------------- */

.popup .popup-content { transition: translate 0.25s ease, transform 0.25s ease; }

/* While a finger is down the element must track it with no easing, or the
   drag lags behind the touch. */
.popup.touching .popup-content {
  transition: none;
  user-select: none;
}

/* Past the close threshold - hint that letting go will dismiss. */
.popup.may-close { background: rgba(0, 0, 0, 0.6); }
.popup.may-close .popup-content { opacity: 0.85; }

/* Grab handle on swipeable popups, mobile only. */
@media (max-width: 768px) {
  .popup.drawer-down .popup-content {
    padding-top: 3.25rem;
  }

  .popup.drawer-down .popup-content::before {
    content: "";
    position: absolute;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: var(--block-light);
  }

  .store-form .field {
    flex-direction: column;
  }

  .store-form .field .btn-primary,
  .store-form .field button[type="submit"] {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Package actions: info button, add to basket, quantity, details popup
   --------------------------------------------------------------------------
   Card layout produced here:

       [image]   Package name
                 4.99 EUR
                 [ i ]  [ Add to Basket ]

   .price sits on its own row; the info button is pinned to the bottom of the
   row so it lines up with the add button beside it.
   ========================================================================== */

.grid-buttons {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
}

.grid-buttons .actions,
.grid-buttons .product-actions {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* -- Info button ----------------------------------------------------------- */

.package-info-btn {
  flex: 0 0 auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3rem;
  border-radius: var(--border-radius);
  background: var(--primary-color);
  color: var(--icon-primary);
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.package-info-btn:hover {
  background: var(--primary-hover-color);
  transform: translateY(-1px);
}

.package-info-btn i {
  font-size: 1.1rem;
  color: var(--icon-primary);
}

/* -- Add / subscribe ------------------------------------------------------- */

.grid-buttons .add,
.grid-buttons .subscribe {
  width: 100%;
  height: 3rem;
  justify-content: center;
  background: var(--secondary-color);
  color: var(--icon-secondary);
}

.grid-buttons .add:hover,
.grid-buttons .subscribe:hover {
  background: var(--secondary-hover-color);
}

/* Font Awesome is loaded at the top of this file, so the glyph can be added
   without touching the template. */
.grid-buttons .add::before,
.grid-buttons .subscribe::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 0.6rem;
}

.grid-buttons .add::before { content: "\f07a"; }      /* cart */
.grid-buttons .subscribe::before { content: "\f2f1"; } /* rotate */

/* --------------------------------------------------------------------------
   `disabled` on the add / subscribe links
   --------------------------------------------------------------------------
   Tebex sets package.purchasable = false whenever a package cannot be bought
   *yet*. By far the commonest cause is that the store asks for an in-game
   name and nobody is logged in (loginRequired && !isLoggedIn).

   main.js never looks at the disabled attribute - it binds a click to those
   links anyway and uses it to open the login popup, remember the package and
   add it once the name has been entered:

       if (loginRequired && !isLoggedIn) { ...; openLoginPopup(); return }

   So the link has to stay clickable. pointer-events:none silently breaks the
   whole login-then-buy flow, which is what made the button look dead.

   .product-actions carries title="<reason>" when there is a genuine reason
   and title="" when it is only the login gate, so only the former is dimmed.
   -------------------------------------------------------------------------- */

a[disabled] {
  pointer-events: auto;
  cursor: pointer;
}

.product-actions[title] a[disabled] {
  opacity: 0.6;
}

.product-actions[title=""] a[disabled] {
  opacity: 1;
}

/* A real <button disabled> is genuinely inert. */
button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* -- Quantity stepper (replaces the add button once in the basket) ---------- */

.quantity-field {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 3rem;
  background: var(--block-dark);
  border-radius: var(--border-radius);
  padding: 0.25rem;
  width: 100%;
}

.quantity-field .open-basket {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  border-radius: 6px;
  background: var(--positive);
  color: var(--positive-text);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.2s ease;
}

.quantity-field .open-basket:hover {
  background: var(--positive-hover-color);
}

.quantity-field .adjust {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 100%;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}

.quantity-field .adjust:hover {
  background: var(--block-light);
  color: var(--primary-color);
}

.quantity-field input.quantity {
  flex: 0 0 3rem;
  width: 3rem;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}

.quantity-field input.quantity::-webkit-outer-spin-button,
.quantity-field input.quantity::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* -- Package details popup (opened from the info button) ------------------- */


.store-product-full {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.store-product-full .image,
.store-product-full img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  align-self: center;
}

.store-product-full .product-title,
.store-product-full h1,
.store-product-full h2 {
  color: var(--text-primary);
  text-align: center;
  margin: 0;
}

.store-product-full .product-title a {
  color: inherit;
  text-decoration: none;
}

.store-product-full .description {
  color: var(--text-secondary);
  line-height: 1.8;
}

.store-product-full .product-actions,
.store-product-full .actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-top: var(--block-border-width) solid var(--block-border);
  padding-top: 1.25rem;
}

@media (max-width: 768px) {
  .grid-buttons {
    flex-direction: row;
    align-items: flex-end;
  }

  .package-info-btn {
    width: 3rem;
    height: 2.85rem;
  }

  .grid-buttons .add,
  .grid-buttons .subscribe {
    height: 2.85rem;
  }
}

/* Section heading used when the home page lists more than one category. */
.home-section-header {
  margin: 2rem 0 0.5rem;
  text-align: center;
}

.home-section-header h2 {
  color: var(--text-primary);
  margin: 0;
}

/* ==========================================================================
   Basket popup and package details popup
   --------------------------------------------------------------------------
   Both are server-rendered fragments pulled into .popup-content by main.js,
   so their markup is stock Tebex and cannot be changed from a template. Every
   selector below is one that actually exists in those fragments (verified
   against main.js and the rendered output).

   Basket structure:
     form.basket
       header.basket-header[data-ident] > h3.basket-title
       .basket-second-header          > .count | .total
       .basket-content > .basket-items > .basket-item[data-package]
                                            > .info > h4.title > a
                                            > .price
                                            > .quantity-field
                                            > a.remove
       .basket-checkout > .total | button.checkout
       .basket-redeem   > .redeemed
   ========================================================================== */

/* -- Shared popup panel polish -------------------------------------------- */

.basket-popup-content,
.store-product-popup-content {
  padding: 2.5rem 2rem 2rem;
}

/* -- Basket ---------------------------------------------------------------- */

.basket {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  max-width: none;
  color: var(--text-primary);
}

.basket-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-right: 3rem;   /* clear of the close button */
  margin: 0 0 0.85rem;
}

.basket-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-primary);
}

.basket-second-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  margin-bottom: 0.85rem;
  background: var(--block-dark);
  border-radius: var(--border-radius);
}

.basket-second-header .count {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.basket-second-header .total {
  color: var(--positive);
  font-weight: 800;
  font-size: 1.05rem;
}

.basket-content { margin: 0; }

.basket-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* One row per package: name+price on the left, stepper and remove on the right. */
.basket-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 0.7rem 0.85rem;
  background: var(--block-dark);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  transition: border-color 0.2s ease;
}

.basket-item:hover { border-color: var(--block-light); }

.basket-item .info {
  flex: 1 1 55%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.basket-item .title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.basket-item .title a {
  color: var(--text-primary);
  text-decoration: none;
}

.basket-item .title a:hover { color: var(--primary-color); }

.basket-item .price {
  margin: 0;
  color: var(--primary-color);
  font-weight: 700;
  font-size: 1rem;
}

.basket-item .quantity-field {
  flex: 0 0 auto;
  width: auto;
  height: 2.15rem;
}

.basket-item .quantity-field input.quantity {
  flex: 0 0 2.5rem;
  width: 2.5rem;
}

/* Remove is an <a> with no text in some renders - give it a real hit area. */
.basket-item a.remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 6px;
  background: var(--negative);
  color: var(--negative-text);
  font-size: 0;               /* hide any stock label */
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.basket-item a.remove::before {
  content: "\f1f8";           /* trash */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.95rem;
}

.basket-item a.remove:hover { background: var(--negative-hover-color); }

/* -- Coupon / gift card redeem row ---------------------------------------- */

.basket-redeem {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: var(--block-border-width) solid var(--block-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.basket-redeem input[type="text"] {
  flex: 1;
  min-width: 0;
  background: var(--block-dark);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  padding: 0.8rem 1.1rem;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.95rem;
}

.basket-redeem input[type="text"]:focus {
  outline: none;
  border-color: var(--primary-color);
}

.basket-redeem .redeemed {
  flex: 1 1 100%;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* -- Checkout footer ------------------------------------------------------- */

.basket-checkout {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: var(--block-border-width) solid var(--block-border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.basket-checkout .total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  color: var(--positive);
  font-weight: 800;
  font-size: 1.2rem;
}

.basket-checkout button.checkout,
.basket button.checkout {
  width: 100%;
  height: 2.9rem;
  border: none;
  border-radius: var(--border-radius);
  background: var(--primary-color);
  color: var(--icon-primary);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.basket button.checkout:hover:not([disabled]) {
  background: var(--primary-hover-color);
  transform: translateY(-1px);
}

/* -- Package details popup -------------------------------------------------
   Rendered markup:
     main.store-product.store-product-full
       h2.product-title
       img.image
       .actions.product-actions  (price, add, quantity-field, gift)
       .descr.text-content
   ------------------------------------------------------------------------- */

.store-product-full {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-align: center;
}

.store-product-full .product-title {
  order: 1;
  margin: 0;
  padding-right: 2.5rem;   /* clear of the close button */
  font-size: 1.6rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-primary);
}

.store-product-full > .image,
.store-product-full > img.image {
  order: 2;
  align-self: center;
  width: auto;
  max-width: 220px;
  max-height: 200px;
  object-fit: contain;
  background: var(--block-light);
  border-radius: var(--border-radius);
  padding: 1rem;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.store-product-full .product-actions,
.store-product-full .actions {
  order: 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  border: none;
  padding: 0;
  margin: 0;
}

.store-product-full .price {
  margin: 0 0 0.25rem;
  color: var(--primary-color);
  font-size: 1.6rem;
  font-weight: 800;
}

.store-product-full .price del,
.store-product-full .price .discount {
  color: var(--negative);
  font-size: 1.1rem;
  font-weight: 600;
  margin-right: 0.6rem;
}

.store-product-full .add,
.store-product-full .subscribe,
.store-product-full .gift {
  width: 100%;
  height: 3rem;
  justify-content: center;
}

.store-product-full .add { background: var(--secondary-color); color: var(--icon-secondary); }
.store-product-full .add:hover { background: var(--secondary-hover-color); }

.store-product-full .gift {
  background: var(--giftcard-primary);
  color: var(--giftcard-text);
  font-weight: 700;
}

.store-product-full .gift:hover { background: var(--giftcard-primary-hover); }

/* Description sits last, left-aligned, separated from the buttons. */
.store-product-full .descr,
.store-product-full .description {
  order: 4;
  text-align: left;
  color: var(--text-secondary);
  line-height: 1.8;
  border-top: var(--block-border-width) solid var(--block-border);
  padding-top: 1.25rem;
  margin: 0;
}

.store-product-full .descr p:first-child { margin-top: 0; }
.store-product-full .descr p:last-child { margin-bottom: 0; }
.store-product-full .descr strong { color: var(--text-primary); }

.store-product-full .descr a { color: var(--primary-color); }

.store-product-full .descr img,
.store-product-full .description img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}

@media (max-width: 768px) {
  .basket-popup-content,
  .store-product-popup-content {
    padding: 2.5rem 1.25rem 1.5rem;
  }

  .basket-item {
    align-items: flex-start;
  }

  .basket-item .info { flex: 1 1 100%; }

  .store-product-full > .image,
  .store-product-full > img.image {
    max-width: 170px;
    max-height: 160px;
  }
}

/* Home page: tiles fade while their packages are fetched, so the swap does
   not look like a glitch. If the fetch fails the class is removed and the
   tiles simply stay. */
.home-packages-loading {
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ==========================================================================
   generic.css compatibility
   --------------------------------------------------------------------------
   head.twig loads generic.css AFTER shared.css whenever the store has no
   custom CSS saved:

                    <link href="/template-assets/generic.css?updated=ee8e68699abefeaeb4ff5dfd346c1d1bf5fcf2cfc52aa33f1c4c36b3ef8e76b3">
     
   generic.css is Tebex's stock skin. Loading later means it wins every tie on
   specificity, and it is written against custom properties that lived in the
   stock shared.css this file replaced (--color-brighter-bg, --widget-padding,
   --content-padding). Those now resolve to nothing, so its rules paint
   transparent - which is exactly why the package details modal had no
   background:

     .store-product-full { background: var(--color-brighter-bg); }

   Two-part fix. First map the legacy names onto this theme's tokens so any of
   its rules still in play resolve on-brand. Then override the handful that
   still conflict, using doubled class selectors (.x.x) which outrank its
   single-class rules without resorting to !important.

   Saving anything into Webstore -> Appearance -> CSS stops generic.css from
   loading at all, which makes this whole section redundant but harmless.
   ========================================================================== */

:root {
  --color-brighter-bg: var(--block-color);
  --color-bg: var(--background);
  --color-text: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --btn-color-bg-hover: var(--primary-hover-color);
  --widget-padding: 1.25rem;
  --content-padding: 1.5rem;
  --content-inner-width: 1300px;
}

/* generic.css forces Lato onto body. */
html body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ...and paints its own stock photo across the top, over the hero glow.
   --background-img is `none` unless a background image is configured. */
html body::before {
  background: none;
  background-image: var(--background-img);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  height: 700px;
  max-height: none;
  opacity: 0.25;
}

/* generic.css squares everything off to 2-5px. */
.btn-primary.btn-primary,
.btn-secondary.btn-secondary,
.btn-tertiary.btn-tertiary,
.popup-content.popup-content,
.basket-popup-content.basket-popup-content,
.basket-item.basket-item,
.quantity-field.quantity-field,
.toast.toast,
.store-text.store-text {
  border-radius: var(--border-radius);
}

.popup-close.popup-close {
  border-radius: 6px;
}

/* THE INVISIBLE MODAL.
   main.js puts `store-product-full` on the popup panel itself and the fetched
   fragment carries it too, so generic.css blanked both. The panel keeps the
   solid background; the fragment inside it goes transparent so they do not
   stack into a double-drawn box. */
.popup-content.popup-content {
  background: var(--block-color);
}

.popup-content .store-product-full,
.popup-content .store-text,
.popup-content .widget,
.popup-content .basket,
.popup-content .site,
.popup-content .site-content {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Standalone /package/{id} page (not the popup) still needs its own panel. */
#root .store-product-full {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 2rem;
  margin: 2rem auto;
  max-width: 820px;
}

#root .store-text {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 2.5rem 2rem;
  margin: 2rem auto;
}

/* generic.css blanks the stepper background via the dead variable. */
.store-product .quantity-field.quantity-field,
.basket-item .quantity-field.quantity-field {
  background: var(--block-dark);
}

/* Its padding here is calc() over two dead variables, so it computes to
   nothing useful. */
.basket-items.basket-items {
  padding: 0;
}

/* generic.css centres every heading inside .store-text. Keep that for the
   login panel, but descriptions read better left-aligned. */
.store-product-full .descr,
.store-product-full .descr h1,
.store-product-full .descr h2,
.store-product-full .descr h3 {
  text-align: left;
}

/* ==========================================================================
   Home page package skeleton
   --------------------------------------------------------------------------
   The category tiles are hidden synchronously (before first paint) and these
   stand in until the real cards arrive, so the swap is not a visible flash.
   ========================================================================== */

.home-packages-skeleton .skeleton-card {
  position: relative;
  overflow: hidden;
  min-height: 284px;
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.home-packages-skeleton .skeleton-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.04) 50%,
      transparent 100%);
  animation: skeleton-sweep 1.2s ease-in-out infinite;
}

@keyframes skeleton-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .home-packages-skeleton .skeleton-card::after { animation: none; }
}

/* ==========================================================================
   Gift form popup
   --------------------------------------------------------------------------
   main.js builds this one entirely in JS, and the input is a bare
   `input.form-control` with no wrapper:

     form.popup-content.text-content.store-form
       h2
       input[name=username].form-control
       .actions > button.btn-primary
       button.popup-close

   The generic `.store-form input` rule sets flex:1, which does nothing inside
   a plain block <form> - that is why the field came out tiny. It needs an
   explicit full width.
   ========================================================================== */

.gift-form-popup .popup-content,
.product-options-popup .popup-content {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 480px;
  padding: 2.5rem 2rem 2rem;
}

.gift-form-popup h2,
.product-options-popup h2 {
  margin: 0;
  padding-right: 2.5rem;
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-primary);
}

/* The gift username field, and any other bare input in a store form. */
.store-form input.form-control,
.gift-form-popup input[type="text"],
.product-options-popup input[type="text"],
.product-options-popup input[type="number"],
.product-options-popup select,
.store-product-options input[type="text"],
.store-product-options input[type="number"] {
  display: block;
  width: 100%;
  flex: none;
  box-sizing: border-box;
  height: 3.1rem;
  background: var(--block-dark);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  padding: 0 1.25rem;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  transition: border-color 0.2s ease;
}

.store-form input.form-control::placeholder,
.gift-form-popup input::placeholder,
.product-options-popup input::placeholder {
  color: var(--text-secondary);
  opacity: 0.65;
}

.store-form input.form-control:focus,
.gift-form-popup input:focus,
.product-options-popup input:focus,
.product-options-popup select:focus {
  outline: none;
  border-color: var(--primary-color);
}

.gift-form-popup .actions,
.product-options-popup .actions {
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  border: none;
}

.gift-form-popup .actions .btn-primary,
.gift-form-popup .actions button,
.product-options-popup .actions .btn-primary,
.product-options-popup .actions button {
  flex: 1;
  width: 100%;
  height: 3.1rem;
  justify-content: center;
  font-weight: 700;
}

/* main.js appends .updating to .actions while the request is in flight. */
.gift-form-popup .actions.updating,
.product-options-popup .actions.updating {
  opacity: 0.6;
  pointer-events: none;
}

/* ==========================================================================
   Basket - additional hardening
   --------------------------------------------------------------------------
   The basket fragment is only rendered for a logged-in session, so these
   cover the variations its markup can take (with or without a thumbnail,
   price inside .info or as a sibling) rather than assuming one shape.
   ========================================================================== */

.popup-content.basket-popup-content {
  display: block;
  padding: 2rem 1.25rem 1.25rem;
}

.basket .site-content,
.basket-content > .site-content {
  padding: 0;
  margin: 0;
  max-width: none;
}

/* Item thumbnail, when the fragment includes one. */
.basket-item .image,
.basket-item img {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  object-fit: contain;
  background: var(--block-light);
  border-radius: 8px;
  padding: 0.35rem;
}

/* Price can render inside .info or as a direct child of the row. */
.basket-item .price,
.basket-item .info .price,
.basket-item > .total {
  color: var(--primary-color);
  font-weight: 700;
  font-size: 1rem;
  margin: 0;
  white-space: nowrap;
}

.basket-item del,
.basket-item .discount {
  color: var(--negative);
  text-decoration: line-through;
  font-weight: 600;
  font-size: 0.9rem;
  margin-right: 0.4rem;
}

/* Expiry / subscription note that some rows carry. */
.basket-item .expiry,
.basket-item .type,
.basket-item small {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
}

/* Keep the controls together on the right on wide rows. */
.basket-item .actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: none;
}

.basket .updating,
.basket.updating {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Anything the basket renders as a plain link row (continue shopping, etc.) */
.basket a:not(.remove):not(.btn-primary):not(.btn-secondary) {
  color: var(--primary-color);
}

@media (max-width: 768px) {
  .popup-content.basket-popup-content {
    padding: 2.5rem 1rem 1.25rem;
  }

  .basket-item {
    gap: 0.6rem;
  }

  .basket-item .actions {
    width: 100%;
    justify-content: space-between;
  }

  .gift-form-popup .popup-content,
  .product-options-popup .popup-content {
    padding: 2.5rem 1.25rem 1.5rem;
  }
}

.home-packages-mount:not(:empty) { margin-top: 2rem; }

/* ==========================================================================
   Popup scale
   --------------------------------------------------------------------------
   Each popup had grown its own sizing, so the login panel came out oversized
   and the basket's controls did not match the ones in the package details
   popup. Everything below is driven from two tokens, so every popup shares
   one rhythm: same panel padding, same heading size, same control height.
   ========================================================================== */

:root {
  --popup-control-h: 2.75rem;   /* every input and action button */
  --popup-pad: 2rem 1.5rem 1.5rem;
}

/* -- Panels ---------------------------------------------------------------- */

.popup-content {
  padding: var(--popup-pad);
}

.login-popup-content { max-width: 430px; }
.gift-form-popup .popup-content { max-width: 430px; }
.product-options-popup .popup-content { max-width: 460px; }

.popup-content.basket-popup-content,
.gift-form-popup .popup-content,
.product-options-popup .popup-content {
  padding: var(--popup-pad);
}

/* -- Headings -------------------------------------------------------------- */

.popup-content h2,
.store-product-full .product-title,
.basket-title,
.gift-form-popup h2,
.product-options-popup h2 {
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 1.1rem;
  padding-right: 2.5rem;   /* clear of the close button */
  color: var(--text-primary);
}

.basket-title { margin-bottom: 0; }

/* -- One control height everywhere ---------------------------------------- */

.store-form input[type="text"],
.store-form input.form-control,
.gift-form-popup input[type="text"],
.product-options-popup input[type="text"],
.product-options-popup input[type="number"],
.product-options-popup select,
.basket-redeem input[type="text"] {
  height: var(--popup-control-h);
  padding: 0 1.1rem;
  font-size: 0.95rem;
}

.store-form .field .btn-primary,
.store-form .field button[type="submit"],
.gift-form-popup .actions .btn-primary,
.gift-form-popup .actions button,
.product-options-popup .actions .btn-primary,
.product-options-popup .actions button,
.store-product-full .add,
.store-product-full .subscribe,
.store-product-full .gift,
.basket button.checkout,
.basket-checkout button.checkout {
  height: var(--popup-control-h);
  padding: 0 1.25rem;
  font-size: 0.95rem;
  justify-content: center;
}

/* -- Login panel: stack the field so it is readable at 430px --------------- */

.login-popup-content .store-form .field,
.login-popup-content .field {
  flex-direction: column;
  gap: 0.7rem;
  max-width: none;
  width: 100%;
}

.login-popup-content .field .btn-primary,
.login-popup-content .field button[type="submit"] {
  width: 100%;
}

.login-popup-content .login-page-description,
.login-popup-content p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 1.1rem;
  text-align: center;
  color: var(--text-secondary);
}

/* -- Details popup: keep the artwork proportional to the smaller panel ----- */

.store-product-full { gap: 1rem; }

.store-product-full > .image,
.store-product-full > img.image {
  max-width: 150px;
  max-height: 150px;
  padding: 0.75rem;
}

.store-product-full .price {
  font-size: 1.35rem;
  margin: 0 0 0.15rem;
}

.store-product-full .descr,
.store-product-full .description {
  font-size: 0.92rem;
  line-height: 1.7;
  padding-top: 1rem;
}

/* -- Basket: match that rhythm -------------------------------------------- */

.basket-second-header {
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.75rem;
}

.basket-item {
  padding: 0.6rem 0.75rem;
  gap: 0.5rem 0.65rem;
}

.basket-item .title { font-size: 0.95rem; }
.basket-item .price { font-size: 0.95rem; }

.basket-item .quantity-field,
.basket-item a.remove {
  height: 2rem;
}

.basket-item a.remove { width: 2rem; }

.basket-item .quantity-field .adjust { width: 1.8rem; }

.basket-item .quantity-field input.quantity {
  flex: 0 0 2.2rem;
  width: 2.2rem;
  font-size: 0.9rem;
}

.basket-checkout .total { font-size: 1.1rem; }

@media (max-width: 768px) {
  :root { --popup-pad: 2rem 1.1rem 1.25rem; }

  .popup-content,
  .popup-content.basket-popup-content,
  .gift-form-popup .popup-content,
  .product-options-popup .popup-content {
    max-width: none;
  }
}

/* ==========================================================================
   One width for the basket and the package details popup
   --------------------------------------------------------------------------
   These two are the panels people compare side by side, so they are pinned to
   a single token rather than two numbers that drift apart. Earlier duplicate
   declarations were deleted so this is the only place either width is set.
   ========================================================================== */

:root {
  --popup-width: 560px;
}

.basket-popup-content,
.store-product-popup-content {
  max-width: var(--popup-width);
}

/* Empty basket: no reason for a tall, mostly blank panel. */
.basket-empty {
  text-align: center;
  color: var(--text-secondary);
  font-weight: 500;
  padding: 1.5rem 1rem;
  margin: 0;
}

.basket-empty::before {
  content: "\f291";           /* basket glyph */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: block;
  font-size: 2rem;
  color: var(--block-light);
  margin-bottom: 0.6rem;
}

/* With nothing in it the panel should shrink to the message, not hold the
   height of a full basket. */
.basket-popup-content .basket:has(.basket-empty) .basket-content,
.basket-popup-content .basket:has(.basket-empty) .basket-second-header {
  margin-bottom: 0;
}

/* ==========================================================================
   Sidebar and modules
   --------------------------------------------------------------------------
   sidebar.twig renders whatever modules the store has enabled - recent
   payments, gift card balance, server status, top donator, goals, featured
   package. Each module.*.html wraps its output in a .widget with a
   .widget-title, and gets a modifier class of its own (.widget-payments,
   .widget-gift-card, and so on - the names generic.css targets).

   The layout comes from .site-content-widgets: main column plus a fixed
   sidebar, flipping to a single column on narrow screens. layout.html adds
   `is-sidebar-right` to <body> when the store sets the sidebar to the right.
   ========================================================================== */

.site-content-widgets {
  display: block;   /* main first, modules in a row underneath */
}

.site-content-widgets > main {
  min-width: 0;
}

/* Default sidebar is on the left in Tebex's markup order; the body class
   decides which side it actually sits on. */
/* Modules sit below the packages, side by side, filling the width. */
.site-sidebar,
.site-content-widgets > aside {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Modules hidden by choice
   --------------------------------------------------------------------------
   sidebar.twig renders every module the store has enabled, so these two are
   switched off here rather than in its markup:

     .site-navigation  the Home / <category> list. This theme navigates from
                       the logo and the package grid, so the duplicate list is
                       noise. (Setting nav-style away from "Vertical Nav in
                       Sidebar" in the dashboard also removes it, since this
                       header deliberately does not include navigation.twig.)
     .widget-gift-card the gift card BALANCE checker - not a redeem form, and
                       not wanted on the storefront.

   Disabling them under Webstore -> Modules stops them rendering at all, which
   is tidier; this just makes sure they are gone either way.
   -------------------------------------------------------------------------- */

.site-navigation.widget,
.widget.site-navigation,
.widget-gift-card,
.widget-giftcard,
.widget-gift-card-balance {
  display: none !important;
}

/* -- The block every module renders into ---------------------------------- */

.widget {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  color: var(--text-primary);
}

.widget-title {
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: var(--block-border-width) solid var(--block-border);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  text-align: center;
}

.widget p { margin: 0 0 0.6rem; color: var(--text-secondary); }
.widget p:last-child { margin-bottom: 0; }
.widget a { color: var(--primary-color); }

.widget ul,
.widget ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* -- Recent payments ------------------------------------------------------- */

.widget-payments li,
.widget-recent-payments li,
.widget-top-donator li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.65rem;
  background: var(--block-dark);
  border-radius: 8px;
  font-size: 0.9rem;
}

.widget .avatar,
.widget-payments img,
.widget-top-donator img {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--block-light);
  image-rendering: pixelated;
}

.widget-top-donator .avatar { border-radius: 50%; }

.widget .ign,
.widget .name {
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget .price,
.widget .amount {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--primary-color);
  font-weight: 700;
  white-space: nowrap;
}

.widget .time,
.widget small {
  color: var(--text-secondary);
  font-size: 0.78rem;
}

/* -- Gift card balance ----------------------------------------------------- */

.widget-gift-card form,
.widget-giftcard form,
.widget form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
}

.widget input[type="text"],
.widget input[type="number"],
.widget input[type="email"],
.widget .gift-card-input {
  width: 100%;
  box-sizing: border-box;
  height: var(--popup-control-h);
  background: var(--block-dark);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  padding: 0 1rem;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.92rem;
}

.widget input::placeholder {
  color: var(--text-secondary);
  opacity: 0.65;
}

.widget input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.widget button,
.widget .btn-primary,
.widget .btn-secondary {
  width: 100%;
  height: var(--popup-control-h);
  justify-content: center;
  font-size: 0.92rem;
  font-weight: 700;
}

/* Balance result line. */
.widget .balance,
.widget .remaining-balance {
  text-align: center;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--positive);
}

.widget .void,
.widget .error {
  color: var(--negative);
  font-weight: 600;
  text-align: center;
}

/* -- Goals / community goals ---------------------------------------------- */

.widget .progress {
  width: 100%;
  height: 1.6rem;
  background: var(--block-dark);
  border-radius: var(--border-radius);
  overflow: hidden;
  margin: 0.35rem 0 0.6rem;
}

.widget .progress-bar {
  height: 100%;
  background: var(--secondary-color);
  color: var(--icon-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.5rem;
  transition: width 0.5s ease;
}

/* -- Server status --------------------------------------------------------- */

.widget-server-status .status,
.widget .online,
.widget .players {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
}

.widget .online::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--positive);
}

/* -- Featured package in the sidebar -------------------------------------- */

.widget .store-product {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  text-align: center;
  background: transparent;
  border: none;
  padding: 0;
  min-height: 0;
}

.widget .store-product .image,
.widget .store-product img {
  max-width: 110px;
  max-height: 110px;
  margin: 0 auto;
  object-fit: contain;
  background: var(--block-light);
  border-radius: var(--border-radius);
  padding: 0.5rem;
}

.widget .store-product .product-title,
.widget .store-product h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.widget .store-product .product-title a { color: var(--text-primary); text-decoration: none; }

.widget .product-actions,
.widget .actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.widget .product-actions .price {
  justify-content: center;
  font-size: 1.05rem;
  margin: 0;
}

/* Sidebar is narrow: never let a package card try to sit side by side. */
.widget .grid-package-block {
  flex-direction: column;
  text-align: center;
  min-height: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}

.widget .grid-eclipse { display: none; }

/* Empty state any module may render. */
.widget .empty,
.widget .no-payments {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding: 0.5rem 0;
}

/* ==========================================================================
   Recent purchases module
   --------------------------------------------------------------------------
   module.payments.html now renders the theme's own .payments-block. If
   sidebar.twig wraps each module in a .widget, that wrapper has to stop
   drawing a second panel around this one - otherwise it reads as a box inside
   a box. Neutralise the wrapper and let the block provide the surface.

   The module sits below the packages at full width, so the avatar grid gets
   more columns than it had in the narrow sidebar.
   ========================================================================== */

.widget:has(.payments-block) {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  grid-column: 1 / -1;
}

.widget:has(.payments-block) .widget-title {
  display: none;   /* the block draws its own heading */
}

/* The block spans the full module row rather than one column of it. */
.site-sidebar > .payments-block,
.site-content-widgets > aside > .payments-block {
  grid-column: 1 / -1;
}

.payments-block {
  margin: 0;
}

/* Extra per-player detail this module can show. */
.payment-package {
  color: var(--text-secondary);
  font-size: 0.78rem;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-price {
  color: var(--primary-color);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}

.payment-avatar-placeholder {
  font-size: 2.5rem;
  color: var(--text-secondary);
  opacity: 0.5;
}

/* Full width means room for more players per row than the sidebar allowed. */
@media (min-width: 992px) {
  .payment-avatars-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  }
}

@media (max-width: 991px) {
  .payment-avatars-grid {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 1rem;
  }
}

/* ==========================================================================
   Payment avatars: heads, not legs
   --------------------------------------------------------------------------
   The original rule positioned a full-body render absolutely, oversized and
   pushed down, so a tall container showed the torso and a short one showed
   only the legs. The module now requests a head render, which needs plain
   centred sizing instead.
   ========================================================================== */

.payment-avatar-container {
  width: 84px;
  height: 84px;
  padding: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.payment-avatar-img {
  position: static;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  transform: none;
  bottom: auto;
  left: auto;
  object-fit: contain;
  image-rendering: pixelated;
}

/* ==========================================================================
   Basket, matched to the package details popup
   --------------------------------------------------------------------------
   Both panels are the same width (--popup-width). These rules make the inside
   read the same too: one column, same gaps, same control heights, so the two
   popups feel like one component rather than two.
   ========================================================================== */

.popup-content.basket-popup-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.basket {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.basket-header { margin: 0; }

.basket-second-header { margin: 0; }

.basket-content { margin: 0; }

/* One row per item: title and price stacked on the left, controls on the
   right, wrapping to their own line only when there is genuinely no room. */
.basket-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
}

.basket-item .info {
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.15rem;
}

.basket-item .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.basket-item .trial {
  color: var(--positive);
  font-size: 0.75rem;
  font-weight: 600;
}

/* The stock markup renders "Remove" as text; the theme shows a trash glyph,
   so the label is hidden but kept in the DOM for screen readers. */
.basket-item a.remove.btn-secondary {
  background: var(--negative);
  color: transparent;
  font-size: 0;
  padding: 0;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  min-width: 0;
  border-radius: 6px;
}

.basket-item a.remove.btn-secondary:hover {
  background: var(--negative-hover-color);
}

.basket-item a.remove.btn-secondary::before {
  content: "\f1f8";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.85rem;
  color: var(--negative-text);
}

/* Totals row and checkout. */
.basket-checkout {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding-top: 0.85rem;
}

.basket-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}

.basket-total-row .total {
  color: var(--positive);
  font-size: 1.2rem;
  font-weight: 800;
}

.basket-note {
  margin: 0;
  text-align: center;
  color: var(--text-secondary);
  opacity: 0.75;
  font-size: 0.78rem;
}

@media (max-width: 520px) {
  .basket-item {
    flex-wrap: wrap;
  }

  .basket-item .info {
    flex: 1 1 100%;
  }
}