/*  
    ====================================
     STYLES FOR donate-nexus.tpl
    ==================================== 
*/


/* === PAGE LAYOUT === */
.donate-page {
  padding: 2rem 0;
  min-height: calc(100vh - 160px);
}

/* === HEADER === */
.donate-header {
  padding: 6rem 0 0rem;
  text-align: center;
}

.donate-header-content {
  margin-bottom: 3rem;
}

.donate-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.donate-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--muted-foreground);
  margin: 0;
}

/* === PRIVILEGE CARDS === */
.privilege-cards-section {
  padding: 2rem 0 4rem;
}

.privilege-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}

.privilege-card {
  padding: 1.5rem;
  border-radius: var(--radius);
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.privilege-card:hover {
  transform: translateY(-4px);
  border-color: rgba(226, 1, 205, 0.3);
}

.privilege-card-popular {
  border: 2px solid var(--primary);
  box-shadow: 0 0 30px rgba(226, 1, 205, 0.2);
}

.privilege-popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.75rem;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Icon */
.privilege-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 1rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.privilege-icon-vip {
  background: linear-gradient(135deg, #B0B030 0%, #b3b32aff 100%);
  box-shadow: 0 4px 20px rgba(220, 220, 64, 0.3);
}

.privilege-icon-premium {
  background: linear-gradient(135deg, #009999 0%, #00d0a6 100%);
  box-shadow: 0 4px 20px rgba(0, 255, 204, 0.3);
}

.privilege-icon-grand {
  background: linear-gradient(135deg, #973296 0%, #804dc7ff 100%);
  box-shadow: 0 4px 20px rgba(153, 93, 239, 0.3);
}

.privilege-icon-sponsor {
  background: linear-gradient(135deg, #FF0099 0%, #FF6666 100%);
  box-shadow: 0 4px 20px rgba(255, 102, 102, 0.3);
}

.privilege-icon svg {
  color: white;
}

/* Info */
.privilege-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: var(--foreground);
}

.privilege-description {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin: 0 0 1rem 0;
  line-height: 1.4;
}

/* Price */
.privilege-price {
  margin-bottom: 1.5rem;
}

.price-amount {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--foreground);
}

.price-period {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* Features */
.privilege-features {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  list-style: none;
  padding: 0;
}

.privilege-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted-foreground);
  font-size: 0.875rem;
}

.feature-icon {
  color: var(--primary);
  flex-shrink: 0;
}

/* Button */
.privilege-btn {
  width: 100%;
  padding: 0.75rem 1.5rem;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.3s ease;
  display: inline-block;
}

/* === COMPARISON SECTION === */
/* .comparison-section {
  padding: 4rem 0;
  border-top: 1px solid var(--border);
} */

.comparison-header {
  text-align: center;
  margin-bottom: 3rem;
}

.comparison-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--foreground);
}

.comparison-subtitle {
  font-size: 1rem;
  color: var(--muted-foreground);
  margin: 0;
}

/* === ОБНОВЛЕНИЯ ДИЗАЙНА === */
/* Уменьшение ширины таблицы до 80% и центрирование */
.comparison-table-container {
  max-width: 80%;
  margin: 0 auto;
}

/* === SERVER TABS === */
.server-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.server-tab {
  padding: 0.75rem 1.5rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
}

.server-tab:hover {
  background: rgba(226, 1, 205, 0.1);
  border-color: var(--primary);
}

.server-tab.active {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

/* === COMPARISON TABLE === */
.comparison-table-container {
  padding: 0;
  overflow: hidden;
}

.comparison-table-wrapper {
  display: none;
}

.comparison-table-wrapper.active {
  display: block;
}

/* Hytale Table Wrapper - всегда видимая */
.hytale-table-wrapper {
  display: block;
}

.table-scroll {
  width: 100%;
  overflow: visible;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.comparison-table thead {
  background: rgba(255, 255, 255, 0.02);
  position: sticky;
  top: 0;
  z-index: 10;
}

.comparison-table th {
  padding: 1rem;
  text-align: center;
  font-weight: 600;
  border-bottom: 2px solid var(--border);
}

.comparison-table th.feature-column {
  text-align: left;
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  color: var(--foreground);
}

.comparison-table th.rank-column {
  width: 140px;
  min-width: 140px;
  max-width: 140px;
}

/* Цвет SVG и текста "Игрок" */
.comparison-table thead tr th:nth-child(2) {
  color: var(--foreground);
}

.comparison-table thead tr th:nth-child(2) svg {
  color: var(--foreground);
}

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

.rank-header svg {
  opacity: 0.8;
}

.rank-vip {
  color: #b3b32aff;
}

.rank-premium {
  color: #00d0a6;
}

.rank-grand {
  color: #804dc7ff;
}

.rank-sponsor {
  color: #FF6666;
}

/* Hytale Ranks */
.rank-traveler {
  color: #8B7355;
}

.rank-guardian {
  color: #4A90E2;
}

.rank-ancient {
  color: #D4AF37;
}

.rank-hero {
  color: #FF6B35;
}

.rank-apostle {
  color: #9B59B6;
}

.rank-pulsar {
  color: #E74C3C;
}

.comparison-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: all 0.3s ease;
  position: relative;
}

/* Чередующиеся цвета строк */
.comparison-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.comparison-table tbody tr:nth-child(odd) {
  background: transparent;
}

/* Улучшенный эффект наведения */
.comparison-table tbody tr:hover {
  background: rgba(226, 1, 205, 0.08) !important;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(226, 1, 205, 0.15);
  position: relative;
  z-index: 1;
}

.comparison-table td {
  padding: 1rem;
  text-align: center;
  color: var(--foreground);
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  vertical-align: middle;
}

.comparison-table td.feature-name {
  text-align: left;
  font-weight: 500;
  color: var(--muted-foreground);
  position: relative;
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  padding-right: 1rem;
}

/* Тултипы для привилегий - Улучшенная версия */
.feature-tooltip {
  position: relative;
  cursor: help;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.feature-tooltip:hover {
  color: var(--primary);
}

/* Индикатор подсказки - иконка вопроса */
/* .feature-tooltip::before {
  content: '';
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 0.1rem;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0871 19.4557C14.0871 20.0922 13.8343 20.7026 13.3842 21.1527C12.9341 21.6028 12.3236 21.8557 11.6871 21.8557C11.0506 21.8557 10.4401 21.6028 9.99005 21.1527C9.53997 20.7026 9.28711 20.0922 9.28711 19.4557C9.28711 18.8191 9.53997 18.2087 9.99005 17.7586C10.4401 17.3085 11.0506 17.0557 11.6871 17.0557C12.3236 17.0557 12.9341 17.3085 13.3842 17.7586C13.8343 18.2087 14.0871 18.8191 14.0871 19.4557Z' fill='%23e201cd'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.6522 5.71828C10.8482 5.71828 10.1582 5.95828 9.67221 6.30148C9.20421 6.63268 8.9726 7.01788 8.9054 7.35028C8.80611 7.7946 8.53662 8.1823 8.15476 8.43021C7.7729 8.67812 7.30908 8.76648 6.86282 8.67635C6.41655 8.58622 6.02339 8.32477 5.76768 7.94809C5.51196 7.57141 5.41407 7.10951 5.495 6.66148C5.7674 5.31028 6.605 4.20748 7.6658 3.45748C8.7698 2.67748 10.169 2.23828 11.6522 2.23828C14.7206 2.23828 17.9018 4.29028 17.9018 7.58548C17.9018 9.49348 16.7678 11.0367 15.299 11.9367C14.9053 12.1776 14.432 12.2523 13.9833 12.1442C13.5346 12.0362 13.1471 11.7544 12.9062 11.3607C12.6653 10.967 12.5906 10.4937 12.6986 10.045C12.8067 9.59625 13.0885 9.2088 13.4822 8.96788C14.1662 8.54908 14.4218 8.01508 14.4218 7.58548C14.4218 6.89668 13.5638 5.71828 11.6522 5.71828Z' fill='%23e201cd'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.6521 10.3564C12.6121 10.3564 13.3921 11.134 13.3921 12.0964V13.8988C13.3921 14.3603 13.2088 14.8029 12.8825 15.1292C12.5562 15.4555 12.1136 15.6388 11.6521 15.6388C11.1906 15.6388 10.7481 15.4555 10.4217 15.1292C10.0954 14.8029 9.91211 14.3603 9.91211 13.8988V12.0964C9.91211 11.1364 10.6909 10.3564 11.6521 10.3564Z' fill='%23e201cd'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.8869 9.55959C16.0045 9.75574 16.0822 9.97315 16.1157 10.1994C16.1491 10.4256 16.1377 10.6562 16.0819 10.878C16.0262 11.0997 15.9273 11.3084 15.7909 11.4919C15.6545 11.6754 15.4832 11.8303 15.2869 11.9476L12.5461 13.588C12.1502 13.8251 11.6763 13.8952 11.2287 13.7829C10.7811 13.6706 10.3964 13.3851 10.1593 12.9892C9.92224 12.5933 9.85212 12.1194 9.96442 11.6718C10.0767 11.2242 10.3622 10.8395 10.7581 10.6024L13.5001 8.96079C13.6962 8.84343 13.9136 8.76586 14.1396 8.7325C14.3657 8.69914 14.5962 8.71065 14.8178 8.76637C15.0395 8.82209 15.248 8.92092 15.4314 9.05723C15.6148 9.19354 15.7696 9.36345 15.8869 9.55959Z' fill='%23e201cd'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.7;
  transition: all 0.2s ease;
  filter: drop-shadow(0 2px 4px rgba(226, 1, 205, 0.3));
  vertical-align: middle;
  flex-shrink: 0;
} */

.feature-tooltip::before {
  content: '';
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 0.1rem;
  background-color: var(--secondary);
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0871 19.4557C14.0871 20.0922 13.8343 20.7026 13.3842 21.1527C12.9341 21.6028 12.3236 21.8557 11.6871 21.8557C11.0506 21.8557 10.4401 21.6028 9.99005 21.1527C9.53997 20.7026 9.28711 20.0922 9.28711 19.4557C9.28711 18.8191 9.53997 18.2087 9.99005 17.7586C10.4401 17.3085 11.0506 17.0557 11.6871 17.0557C12.3236 17.0557 12.9341 17.3085 13.3842 17.7586C13.8343 18.2087 14.0871 18.8191 14.0871 19.4557Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.6522 5.71828C10.8482 5.71828 10.1582 5.95828 9.67221 6.30148C9.20421 6.63268 8.9726 7.01788 8.9054 7.35028C8.80611 7.7946 8.53662 8.1823 8.15476 8.43021C7.7729 8.67812 7.30908 8.76648 6.86282 8.67635C6.41655 8.58622 6.02339 8.32477 5.76768 7.94809C5.51196 7.57141 5.41407 7.10951 5.495 6.66148C5.7674 5.31028 6.605 4.20748 7.6658 3.45748C8.7698 2.67748 10.169 2.23828 11.6522 2.23828C14.7206 2.23828 17.9018 4.29028 17.9018 7.58548C17.9018 9.49348 16.7678 11.0367 15.299 11.9367C14.9053 12.1776 14.432 12.2523 13.9833 12.1442C13.5346 12.0362 13.1471 11.7544 12.9062 11.3607C12.6653 10.967 12.5906 10.4937 12.6986 10.045C12.8067 9.59625 13.0885 9.2088 13.4822 8.96788C14.1662 8.54908 14.4218 8.01508 14.4218 7.58548C14.4218 6.89668 13.5638 5.71828 11.6522 5.71828Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.6521 10.3564C12.6121 10.3564 13.3921 11.134 13.3921 12.0964V13.8988C13.3921 14.3603 13.2088 14.8029 12.8825 15.1292C12.5562 15.4555 12.1136 15.6388 11.6521 15.6388C11.1906 15.6388 10.7481 15.4555 10.4217 15.1292C10.0954 14.8029 9.91211 14.3603 9.91211 13.8988V12.0964C9.91211 11.1364 10.6909 10.3564 11.6521 10.3564Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.8869 9.55959C16.0045 9.75574 16.0822 9.97315 16.1157 10.1994C16.1491 10.4256 16.1377 10.6562 16.0819 10.878C16.0262 11.0997 15.9273 11.3084 15.7909 11.4919C15.6545 11.6754 15.4832 11.8303 15.2869 11.9476L12.5461 13.588C12.1502 13.8251 11.6763 13.8952 11.2287 13.7829C10.7811 13.6706 10.3964 13.3851 10.1593 12.9892C9.92224 12.5933 9.85212 12.1194 9.96442 11.6718C10.0767 11.2242 10.3622 10.8395 10.7581 10.6024L13.5001 8.96079C13.6962 8.84343 13.9136 8.76586 14.1396 8.7325C14.3657 8.69914 14.5962 8.71065 14.8178 8.76637C15.0395 8.82209 15.248 8.92092 15.4314 9.05723C15.6148 9.19354 15.7696 9.36345 15.8869 9.55959Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0871 19.4557C14.0871 20.0922 13.8343 20.7026 13.3842 21.1527C12.9341 21.6028 12.3236 21.8557 11.6871 21.8557C11.0506 21.8557 10.4401 21.6028 9.99005 21.1527C9.53997 20.7026 9.28711 20.0922 9.28711 19.4557C9.28711 18.8191 9.53997 18.2087 9.99005 17.7586C10.4401 17.3085 11.0506 17.0557 11.6871 17.0557C12.3236 17.0557 12.9341 17.3085 13.3842 17.7586C13.8343 18.2087 14.0871 18.8191 14.0871 19.4557Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.6522 5.71828C10.8482 5.71828 10.1582 5.95828 9.67221 6.30148C9.20421 6.63268 8.9726 7.01788 8.9054 7.35028C8.80611 7.7946 8.53662 8.1823 8.15476 8.43021C7.7729 8.67812 7.30908 8.76648 6.86282 8.67635C6.41655 8.58622 6.02339 8.32477 5.76768 7.94809C5.51196 7.57141 5.41407 7.10951 5.495 6.66148C5.7674 5.31028 6.605 4.20748 7.6658 3.45748C8.7698 2.67748 10.169 2.23828 11.6522 2.23828C14.7206 2.23828 17.9018 4.29028 17.9018 7.58548C17.9018 9.49348 16.7678 11.0367 15.299 11.9367C14.9053 12.1776 14.432 12.2523 13.9833 12.1442C13.5346 12.0362 13.1471 11.7544 12.9062 11.3607C12.6653 10.967 12.5906 10.4937 12.6986 10.045C12.8067 9.59625 13.0885 9.2088 13.4822 8.96788C14.1662 8.54908 14.4218 8.01508 14.4218 7.58548C14.4218 6.89668 13.5638 5.71828 11.6522 5.71828Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.6521 10.3564C12.6121 10.3564 13.3921 11.134 13.3921 12.0964V13.8988C13.3921 14.3603 13.2088 14.8029 12.8825 15.1292C12.5562 15.4555 12.1136 15.6388 11.6521 15.6388C11.1906 15.6388 10.7481 15.4555 10.4217 15.1292C10.0954 14.8029 9.91211 14.3603 9.91211 13.8988V12.0964C9.91211 11.1364 10.6909 10.3564 11.6521 10.3564Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.8869 9.55959C16.0045 9.75574 16.0822 9.97315 16.1157 10.1994C16.1491 10.4256 16.1377 10.6562 16.0819 10.878C16.0262 11.0997 15.9273 11.3084 15.7909 11.4919C15.6545 11.6754 15.4832 11.8303 15.2869 11.9476L12.5461 13.588C12.1502 13.8251 11.6763 13.8952 11.2287 13.7829C10.7811 13.6706 10.3964 13.3851 10.1593 12.9892C9.92224 12.5933 9.85212 12.1194 9.96442 11.6718C10.0767 11.2242 10.3622 10.8395 10.7581 10.6024L13.5001 8.96079C13.6962 8.84343 13.9136 8.76586 14.1396 8.7325C14.3657 8.69914 14.5962 8.71065 14.8178 8.76637C15.0395 8.82209 15.248 8.92092 15.4314 9.05723C15.6148 9.19354 15.7696 9.36345 15.8869 9.55959Z' fill='white'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  opacity: 0.7;
  transition: all 0.2s ease;
  filter: drop-shadow(0 2px 4px rgba(226, 1, 205, 0.3));
  vertical-align: middle;
  flex-shrink: 0;
}

.feature-tooltip:hover::before {
  opacity: 1;
  transform: scale(1.1);
  filter: drop-shadow(0 3px 6px rgba(226, 1, 205, 0.5));
}

/* Сам тултип */
.feature-tooltip::after {
  content: attr(data-tooltip);
  position: fixed;
  left: 20%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.875rem 1.125rem;
  background: var(--glass-bg);
  border: 1px solid rgba(226, 1, 205, 0.3);
  border-radius: 0.625rem;
  color: var(--foreground);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 99999;
  pointer-events: none;
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.3),
    0 10px 10px -5px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(226, 1, 205, 0.1),
    0 0 20px rgba(226, 1, 205, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  max-width: 400px;
  width: max-content;
}

.feature-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Современные иконки - Галочка */
.icon-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  position: relative;
  vertical-align: middle;
}

.icon-check::before {
  content: '';
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 2px 4px rgba(34, 197, 94, 0.3));
  transition: all 0.2s ease;
}

.comparison-table tbody tr:hover .icon-check::before {
  transform: scale(1.15);
  filter: drop-shadow(0 4px 8px rgba(34, 197, 94, 0.5));
}

/* Современные иконки - Крестик */
.icon-cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  position: relative;
  vertical-align: middle;
}

.icon-cross::before {
  content: '';
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.3));
  transition: all 0.2s ease;
}

.comparison-table tbody tr:hover .icon-cross::before {
  transform: scale(1.15);
  filter: drop-shadow(0 4px 8px rgba(239, 68, 68, 0.5));
}

/* Альтернативный стиль - круглые иконки с фоном */
.icon-check-alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.25));
  border-radius: 50%;
  border: 1.5px solid rgba(34, 197, 94, 0.4);
  transition: all 0.3s ease;
}

.icon-check-alt::before {
  content: '';
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.comparison-table tbody tr:hover .icon-check-alt {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.35));
  border-color: rgba(34, 197, 94, 0.6);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.icon-cross-alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.25));
  border-radius: 50%;
  border: 1.5px solid rgba(239, 68, 68, 0.4);
  transition: all 0.3s ease;
}

.icon-cross-alt::before {
  content: '';
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.comparison-table tbody tr:hover .icon-cross-alt {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.35));
  border-color: rgba(239, 68, 68, 0.6);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* === ANIMATIONS === */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slide-up 0.8s ease-out forwards;
  opacity: 0;
}

/* === RESPONSIVE === */
@media (max-width: 1023px) {
  .donate-header {
    padding: 2rem 0 0rem;
  }
  
  .privilege-cards-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .server-tabs {
    flex-direction: column;
  }
  
  .server-tab {
    width: 100%;
  }
  
  /* Адаптация тултипов для мобильных */
  .feature-tooltip::after {
    white-space: normal;
    max-width: 280px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    font-size: 0.75rem;
    padding: 0.75rem 1rem;
  }
  
  .feature-tooltip:hover::after {
    transform: translateX(-50%) translateY(0);
  }
  
  .feature-tooltip::before {
    right: -16px;
    width: 12px;
    height: 12px;
  }
  
  /* Touch-friendly тултипы */
  .feature-tooltip:active::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 768px) {
  .comparison-table th.feature-column {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
  }
  
  .comparison-table td.feature-name {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
  }
  
  .comparison-table th.rank-column {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
  }
  
  .comparison-table td {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
  }
  
  .comparison-table {
    font-size: 0.8125rem;
  }
  
  /* Увеличение ширины таблицы на мобильных */
  .comparison-table-container {
    max-width: 95%;
  }
  
  /* Упрощенные тултипы для маленьких экранов */
  .feature-tooltip::after {
    max-width: 240px;
    font-size: 0.7rem;
    padding: 0.625rem 0.875rem;
  }
}

@media (max-width: 1920px) {
  .donate-header {
    padding: 4rem 0 0rem;
  }
}

/* Дополнительные улучшения для больших экранов */
@media (min-width: 1920px) {
  .feature-tooltip::after {
    max-width: 400px;
    font-size: 0.875rem;
    padding: 1rem 1.25rem;
  }
}

/* ============================================
   Floating Purchase Button
   ============================================ */

.floating-purchase-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  
  display: flex;
  align-items: center;
  gap: 0.75rem;
  
  padding: 1rem 1.75rem;
  
  background: var(--main-gr);
  color: var(--foreground);
  
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
  
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  cursor: pointer;
  overflow: hidden;
}

.floating-purchase-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.floating-purchase-btn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 20px 60px rgba(102, 126, 234, 0.6),
              0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.floating-purchase-btn:hover::before {
  opacity: 1;
}

.floating-purchase-btn:active {
  transform: translateY(-2px) scale(1.02);
}

.floating-purchase-btn svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  animation: bounce 2s infinite;
}

.floating-purchase-btn span {
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

/* Анимация иконки */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* Пульсирующий эффект */
.floating-purchase-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  pointer-events: none;
}

.floating-purchase-btn:hover::after {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* Адаптивность */
@media (max-width: 768px) {
  .floating-purchase-btn {
    bottom: 1.5rem;
    right: 1.5rem;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }
  
  .floating-purchase-btn svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  .floating-purchase-btn {
    bottom: 1rem;
    right: 1rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    gap: 0.5rem;
  }
  
  .floating-purchase-btn span {
    display: none;
  }
  
  .floating-purchase-btn {
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  
  .floating-purchase-btn svg {
    width: 24px;
    height: 24px;
  }
}

/* Скрытие кнопки при скролле вверх (опционально) */
.floating-purchase-btn.hidden {
  transform: translateY(150%);
  opacity: 0;
  pointer-events: none;
}


/* Ripple эффект при клике */
.floating-purchase-btn .ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple-animation 0.6s ease-out;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(2);
    opacity: 0;
  }
}

/* Плавное появление кнопки при загрузке */
.floating-purchase-btn {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.5s ease,
              transform 0.5s ease;
}


/* ============================================
   Альтернативный стиль (закомментирован)
   Раскомментируйте, если хотите более яркий вариант
   ============================================ */

/*
.floating-purchase-btn {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  box-shadow: 0 10px 40px rgba(245, 87, 108, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.floating-purchase-btn::before {
  background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
}

.floating-purchase-btn:hover {
  box-shadow: 0 20px 60px rgba(245, 87, 108, 0.6),
              0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}
*/

/* ============================================
   Зеленый вариант для "Купить"
   ============================================ */

/*
.floating-purchase-btn {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  box-shadow: 0 10px 40px rgba(56, 239, 125, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.floating-purchase-btn::before {
  background: linear-gradient(135deg, #38ef7d 0%, #11998e 100%);
}

.floating-purchase-btn:hover {
  box-shadow: 0 20px 60px rgba(56, 239, 125, 0.6),
              0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}
*/