/* ============================================================
   WG Pay — стиль, вдохновлённый cml-tracker
   Тёмная тема + красно-золотые акценты + свечения
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800&family=Inter:wght@400;500;600&display=swap');

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: #060607;
  color: #e8e6e1;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* dot‑grid overlay (как в cml-tracker) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.5;
  z-index: 0;
}

/* цветные радиальные свечения */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 700px 400px at 15% -5%, rgba(200,20,20,0.20), transparent 60%),
    radial-gradient(ellipse 600px 400px at 95% 10%, rgba(120,10,180,0.10), transparent 60%),
    radial-gradient(ellipse 500px 350px at 100% 60%, rgba(234,179,8,0.07), transparent 60%);
  z-index: 0;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container, .container-fluid {
  position: relative;
  z-index: 1;
}

/* ============================================================
   HEADER / TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.display-4, .display-5, .display-6 {
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #e8e6e1;
}

.lead {
  font-family: 'Inter', sans-serif;
  color: #83807a;
}

.text-white { color: #e8e6e1 !important; }
.text-white-50 { color: #83807a !important; }
.text-muted { color: #55524c !important; }

/* ============================================================
   CARDS — тёмные с границей как в cml-tracker
   ============================================================ */
.card {
  background: #0c0c0e;
  border: 1px solid #212123;
  border-radius: 8px;
  box-shadow: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  color: #e8e6e1;
}

.card:hover {
  transform: translateY(-4px);
  border-color: #c81e1e;
  box-shadow: 0 0 18px -6px rgba(200,30,30,0.4);
}

.card-body { color: #e8e6e1; }

.card-title {
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  color: #e8e6e1;
}

/* ============================================================
   PLAN CARDS
   ============================================================ */
.plan-card { cursor: pointer; }

.plan-card.popular {
  border: 2px solid #d8b23c;
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(216,178,60,0.25);
}

.plan-card.popular:hover {
  transform: scale(1.04);
  border-color: #f0c94a;
  box-shadow: 0 0 30px rgba(240,201,74,0.35);
}

.plan-price {
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(1rem, 3.5vw, 2.2rem);
  font-weight: 700;
  color: #f0c94a;
  margin: 0.5rem 0;
  text-shadow: 0 0 14px rgba(240,201,74,0.4);
  white-space: nowrap;
}

.plan-features { text-align: left; padding: 0 1rem; }

.plan-features li {
  padding: 0.35rem 0;
  color: #a8a49a;
  font-size: 0.95rem;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}

.badge-info {
  background: #1a1a1c;
  color: #c81e1e;
  border: 1px solid rgba(200,30,30,0.3);
}

.badge-warning {
  background: #1a1a1c;
  color: #f0c94a;
  border: 1px solid rgba(240,201,74,0.3);
}

/* ============================================================
   BUTTONS
   ============================================================ */

/* Основная красная кнопка — как #add-btn из cml-tracker */
.btn-primary {
  background: #c81e1e;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.6rem 1.5rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 0 16px rgba(200,30,30,0.35);
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.btn-primary:hover {
  background: #e02525;
  box-shadow: 0 0 26px rgba(224,37,37,0.55);
}
.btn-primary:active { transform: scale(0.97); }

/* Жёлтая/золотая кнопка — как #order-add-btn из cml-tracker */
.btn-warning {
  background: #a8790b;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.6rem 1.5rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 0 14px rgba(168,121,11,0.35);
  transition: all 0.15s;
}
.btn-warning:hover {
  background: #c68f0d;
  box-shadow: 0 0 22px rgba(198,143,13,0.5);
  color: #fff;
}

/* Зелёная кнопка в том же стиле */
.btn-success {
  background: #0f7a3a;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.6rem 1.5rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 0 14px rgba(15,122,58,0.35);
  transition: all 0.15s;
}
.btn-success:hover {
  background: #14a84a;
  box-shadow: 0 0 22px rgba(20,168,74,0.5);
  color: #fff;
}

/* Outline-варианты (как прозрачные кнопки в cml-tracker) */
.btn-outline-warning {
  background: transparent;
  border: 1px solid #d8b23c;
  color: #f0c94a;
  border-radius: 4px;
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  transition: all 0.15s;
}
.btn-outline-warning:hover {
  background: rgba(240,201,74,0.1);
  box-shadow: 0 0 14px rgba(240,201,74,0.25);
  color: #f0c94a;
}

.btn-outline-info {
  background: transparent;
  border: 1px solid #c81e1e;
  color: #c81e1e;
  border-radius: 4px;
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  transition: all 0.15s;
}
.btn-outline-info:hover {
  background: rgba(200,30,30,0.1);
  box-shadow: 0 0 14px rgba(200,30,30,0.25);
  color: #c81e1e;
}

/* ============================================================
   FORM CONTROLS (тёмные как в cml-tracker)
   ============================================================ */
.form-control {
  background: #131315;
  border: 1px solid #2a2a2c;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  color: #e8e6e1;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus {
  border-color: #c81e1e;
  box-shadow: 0 0 0 3px rgba(200,30,30,0.18), 0 0 20px rgba(200,30,30,0.15);
  background: #131315;
  color: #e8e6e1;
}
.form-control::placeholder { color: #55524c; }

/* ============================================================
   ALERTS (в стилистике cml-tracker)
   ============================================================ */
.alert-info {
  background: #0c0c0e;
  border: 1px solid rgba(200,30,30,0.3);
  color: #e8e6e1;
  text-align: left;
  border-radius: 6px;
}

.alert-success {
  background: #0c0c0e;
  border: 1px solid rgba(15,122,58,0.3);
  color: #e8e6e1;
  border-radius: 6px;
}

.alert-danger {
  background: #0c0c0e;
  border: 1px solid rgba(200,30,30,0.4);
  color: #e8e6e1;
  border-radius: 6px;
}

/* ============================================================
   SPINNER / LOADING
   ============================================================ */
.spinner-border.text-warning {
  color: #f0c94a !important;
  filter: drop-shadow(0 0 8px rgba(240,201,74,0.5));
}

/* ============================================================
   LINKS
   ============================================================ */
a {
  color: #c81e1e;
  transition: color 0.15s;
}
a:hover {
  color: #e02525;
  text-shadow: 0 0 12px rgba(224,37,37,0.4);
}

a.text-muted {
  color: #55524c !important;
}
a.text-muted:hover {
  color: #e8e6e1 !important;
  text-shadow: 0 0 12px rgba(232,230,225,0.2);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  position: relative;
  z-index: 1;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
.success-icon, .pending-icon, .error-icon {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}