/**
 * Glass Components - Subtle Glass Morphism Styles
 * Минималистичные glass-эффекты для современного UI
 */

/* ============================================
   CSS VARIABLES - Glass Morphism (Subtle)
   ============================================ */
:root {
  /* Glass morphism - мягкие значения */
  --glass-bg: rgba(255, 255, 255, 0.02);
  --glass-bg-hover: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.04);
  --glass-blur: 4px;
  --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);

  /* Accent colors with transparency */
  --glass-primary: rgba(77, 171, 247, 0.015);
  --glass-primary-border: rgba(77, 171, 247, 0.06);
  --glass-success: rgba(40, 167, 69, 0.06);
  --glass-success-border: rgba(40, 167, 69, 0.1);
}

/* Light theme adjustments */
html[data-bs-theme="light"] {
  --glass-bg: rgba(0, 0, 0, 0.01);
  --glass-bg-hover: rgba(0, 0, 0, 0.02);
  --glass-border: rgba(0, 0, 0, 0.04);
  --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  --glass-primary: rgba(77, 171, 247, 0.03);
  --glass-primary-border: rgba(77, 171, 247, 0.08);
}

/* ============================================
   BASE GLASS CLASS
   ============================================ */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* Backdrop filter with graceful degradation */
@supports (backdrop-filter: blur(4px)) {
  .glass {
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }
}

.glass:hover {
  background: var(--glass-bg-hover);
}

/* ============================================
   GLOBAL CARD GLASS EFFECT
   Автоматический glass-эффект для всех Bootstrap .card
   ============================================ */
.card {
  background: rgba(43, 44, 64, 0.3);
  border: 1px solid rgba(77, 171, 247, 0.04);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
}

@supports (backdrop-filter: blur(4px)) {
  .card {
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }
}

.card:hover {
  border-color: rgba(77, 171, 247, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Light theme */
html[data-bs-theme="light"] .card {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.05);
}

html[data-bs-theme="light"] .card:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(77, 171, 247, 0.1);
}

/* ============================================
   PLATFORM STATISTICS CARD
   ============================================ */
.platform-stats-card {
  background: var(--glass-primary);
  border: 1px solid var(--glass-primary-border);
  box-shadow: var(--glass-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@supports (backdrop-filter: blur(4px)) {
  .platform-stats-card {
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }
}

.platform-stats-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* Разделители между статистиками */
@media (min-width: 768px) {
  .platform-stats-card .col-md:not(:last-child) {
    border-right: 1px solid rgba(77, 171, 247, 0.05);
  }
}

/* ============================================
   EVENT/CHAMPIONSHIP CARDS
   ============================================ */
.event-item-card {
  background: rgba(43, 44, 64, 0.4);
  border: 1px solid rgba(77, 171, 247, 0.04);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.25s ease;
}

@supports (backdrop-filter: blur(4px)) {
  .event-item-card {
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }
}

.event-item-card:hover {
  background: rgba(43, 44, 64, 0.55);
  border-color: rgba(77, 171, 247, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

/* Gradient overlay на изображениях */
.event-media {
  position: relative;
}

.event-media::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
  pointer-events: none;
}

/* Light theme */
html[data-bs-theme="light"] .event-item-card {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 0, 0, 0.06);
}

html[data-bs-theme="light"] .event-item-card:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(77, 171, 247, 0.15);
}

/* ============================================
   SERVER CARDS
   ============================================ */
.server-card {
  background: rgba(43, 44, 64, 0.35);
  border: 1px solid rgba(77, 171, 247, 0.04);
  transition: all 0.25s ease;
}

@supports (backdrop-filter: blur(4px)) {
  .server-card {
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }
}

.server-card:hover {
  border-color: rgba(77, 171, 247, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

/* Light theme */
html[data-bs-theme="light"] .server-card {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.05);
}

html[data-bs-theme="light"] .server-card:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(77, 171, 247, 0.12);
}

/* ============================================
   BOOKING PROMO CARD
   ============================================ */
.booking-promo-card {
  background: linear-gradient(135deg,
    rgba(40, 167, 69, 0.06) 0%,
    rgba(40, 167, 69, 0.02) 100%);
  border: 1px solid var(--glass-success-border);
  box-shadow: var(--glass-shadow);
  transition: all 0.25s ease;
}

@supports (backdrop-filter: blur(4px)) {
  .booking-promo-card {
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }
}

.booking-promo-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* Light theme */
html[data-bs-theme="light"] .booking-promo-card {
  background: linear-gradient(135deg,
    rgba(40, 167, 69, 0.08) 0%,
    rgba(40, 167, 69, 0.03) 100%);
}

/* ============================================
   CONTACT CARD
   ============================================ */
.contact-card {
  background: rgba(43, 44, 64, 0.25);
}

@supports (backdrop-filter: blur(4px)) {
  .contact-card {
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }
}

.contact-card .avatar {
  transition: transform 0.2s ease;
}

.contact-card .avatar:hover {
  transform: scale(1.05);
}

/* Light theme */
html[data-bs-theme="light"] .contact-card {
  background: rgba(255, 255, 255, 0.4);
}

/* ============================================
   EVENTS CARD (wrapper)
   ============================================ */
.events-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

@supports (backdrop-filter: blur(4px)) {
  .events-card {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
}