/* ==========================================================
   CrakenWorld — голубая тема для EasyDonate (тема lullaby-dark)
   Вставь в: Панель EasyDonate → Магазин → Настройки → Свой CSS
   ========================================================== */

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

/* html:root перебивает встроенный :root с красным --accent-color */
html:root {
  --accent-color:   #3aa0ff;
  --accent-muted:   #3aa0ff75;
  --accent-neutral: #3aa0ff50;

  --cw-bg:        #07111f;   /* основной фон страницы */
  --cw-night:     #050d19;   /* самый тёмный: футер, заглушки */
  --cw-surface:   #10253f;   /* карточки, поля, модалки */
  --cw-surface-2: #153054;   /* hover */
  --cw-line:      #1d3b61;   /* границы */
  --cw-text:      #e6f1ff;
  --cw-muted:     #8fa9c7;
  --cw-blue:      #3aa0ff;
  --cw-bright:    #6cc4ff;
  --cw-deep:      #1668d9;
  --cw-glow:      rgba(58, 160, 255, .38);
}

/* ---------- База ---------- */
html, body {
  background: var(--cw-bg) !important;
  color: var(--cw-text);
  font-family: 'Manrope', 'Segoe UI', Arial, sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Manrope', 'Segoe UI', Arial, sans-serif !important;
  letter-spacing: -.01em;
}
a { color: var(--cw-bright); transition: color .2s; }
a:hover { color: #fff; }
::selection { background: var(--cw-blue); color: #fff; }

/* Фоны темы (bg-elegant*) */
.bg-elegant-dark  { background-color: var(--cw-bg) !important; }
.bg-elegant       { background-color: var(--cw-surface) !important; }
.bg-elegant-night { background-color: var(--cw-night) !important; }

/* Волна под шапкой должна совпадать с цветом страницы */
.fill-elegant-dark { fill: var(--cw-bg) !important; }

/* Мягкое голубое свечение на фоне основной части */
main.bg-elegant-dark {
  background-image:
    radial-gradient(800px 420px at 12% 0%, rgba(58,160,255,.14), transparent 65%),
    radial-gradient(700px 380px at 100% 40%, rgba(108,196,255,.08), transparent 65%) !important;
}

/* ---------- Верхняя навигация ---------- */
.navbar-main .nav-link,
.navbar-main .nav-link-inner-text { color: var(--cw-text) !important; font-weight: 600; }
.navbar-main .nav-link i { color: var(--cw-blue); }
.navbar-main .nav-link:hover,
.navbar-main .nav-link:hover i,
.navbar-main .nav-link:hover .nav-link-inner-text { color: var(--cw-bright) !important; }

/* Мобильное меню */
@media (max-width: 991.98px) {
  .navbar-main .navbar-collapse { background: var(--cw-surface) !important; border: 1px solid var(--cw-line); }
  .collapse-close i { color: var(--cw-bright); }
}

/* ---------- Главный экран ---------- */
#welcome-section { position: relative; }
#welcome-section::after {   /* голубая тонировка поверх картинки */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(22,104,217,.35) 0%, rgba(7,17,31,.45) 100%);
  pointer-events: none;
  z-index: 1;
}
#welcome-section .container { position: relative; z-index: 2; }

.shop-name {
  color: #fff;
  text-shadow: 0 0 40px var(--cw-glow);
}

/* ---------- Онлайн и серверы ---------- */
.general-online { color: var(--cw-bright); font-weight: 700; }

.progress { background: var(--cw-surface) !important; border-radius: 999px; height: .6rem; }
.progress-bar,
.progress-bar.bg-danger {
  background: linear-gradient(90deg, var(--cw-deep), var(--cw-bright)) !important;
  border-radius: 999px;
}
.progress-wrapper { transition: transform .2s; }

/* ---------- Поиск ---------- */
.form-control,
.input-group-text {
  background: var(--cw-surface) !important;
  color: var(--cw-text) !important;
  border: 1px solid var(--cw-line) !important;
  font-family: inherit;
}
.form-control::placeholder { color: var(--cw-muted); opacity: .8; }
.form-control:focus {
  background: var(--cw-surface) !important;
  border-color: var(--cw-blue) !important;
  box-shadow: 0 0 0 3px var(--cw-glow) !important;
  color: #fff !important;
}
.input-group-text { color: var(--cw-bright) !important; }

/* ---------- Карточки товаров ---------- */
.profile-card .card,
.card.bg-elegant {
  background: var(--cw-surface) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3) !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* Акцент темы: голубое свечение карточки при наведении */
.profile-card .card:hover {
  transform: translateY(-4px);
  border-color: var(--cw-blue) !important;
  box-shadow: 0 0 0 1px var(--cw-blue), 0 14px 38px var(--cw-glow) !important;
}
.card .card { box-shadow: none !important; transform: none !important; border: 0 !important; }  /* вложенная карточка без рамки */

.card-title, .card-header, .card-footer { color: #fff; }
.card-image.bg-elegant-night { background-color: var(--cw-night) !important; }

/* Цены и акценты */
.text-danger, .text-primary, .price { color: var(--cw-bright) !important; }
.text-muted { color: var(--cw-muted) !important; }

/* Заглушки загрузки */
.skeleton-box { background-color: var(--cw-surface-2) !important; }
.skeleton-box::after {
  background-image: linear-gradient(90deg, transparent, rgba(108,196,255,.18), transparent) !important;
}

/* ---------- Кнопки ---------- */
.btn { font-family: inherit; font-weight: 700; border-radius: 10px; transition: background .2s, box-shadow .2s, transform .1s; }

.btn-primary, .btn-danger, .btn-success {
  background: linear-gradient(135deg, var(--cw-blue), var(--cw-deep)) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 6px 18px var(--cw-glow);
}
.btn-primary:hover, .btn-danger:hover, .btn-success:hover,
.btn-primary:focus, .btn-danger:focus, .btn-success:focus {
  background: linear-gradient(135deg, var(--cw-bright), var(--cw-blue)) !important;
  box-shadow: 0 8px 26px rgba(108, 196, 255, .5);
}
.btn-outline-primary, .btn-outline-danger, .btn-secondary, .btn-light {
  background: transparent !important;
  border: 1px solid var(--cw-blue) !important;
  color: var(--cw-bright) !important;
}
.btn-outline-primary:hover, .btn-outline-danger:hover, .btn-secondary:hover, .btn-light:hover {
  background: rgba(58,160,255,.16) !important;
  color: #fff !important;
}
.btn:active { transform: translateY(1px); }

/* ---------- Плавающая корзина (перебиваем inline #fa5252) ---------- */
.basket-button {
  background: linear-gradient(135deg, var(--cw-blue), var(--cw-deep)) !important;
  box-shadow: 0 8px 24px var(--cw-glow);
  transition: transform .2s, box-shadow .2s;
}
.basket-button:hover { transform: scale(1.08); box-shadow: 0 10px 32px rgba(108,196,255,.55); }
.cart-counter, .badge-primary, .badge-danger {
  background: var(--cw-bright) !important;
  color: var(--cw-night) !important;
  font-weight: 800;
}

/* ---------- Модальные окна (корзина, сервер, оплата) ---------- */
.modal-content {
  background: var(--cw-surface) !important;
  color: var(--cw-text);
  border: 1px solid var(--cw-line) !important;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 44px rgba(58,160,255,.14);
}
.modal-header, .modal-footer { border-color: var(--cw-line) !important; }
.modal-backdrop.show { background: #030810; opacity: .8; }
.close { color: var(--cw-bright); text-shadow: none; opacity: 1; }

/* ---------- Таблицы и списки в корзине ---------- */
.table { color: var(--cw-text); }
.table td, .table th { border-color: var(--cw-line) !important; }
.list-group-item { background: var(--cw-surface) !important; border-color: var(--cw-line) !important; color: var(--cw-text); }

/* ---------- Инструкция ---------- */
#help h2 { color: #fff; }
#help .font-weight-bolder:not(h2) { color: var(--cw-bright); }

/* ---------- Футер ---------- */
.footer { border-top: 1px solid var(--cw-line); }
.footer a[href*="easydonate.ru"] { color: var(--cw-bright) !important; }   /* перебивает inline #fa5252 */
#footer-social-links a { color: var(--cw-muted); }
#footer-social-links a:hover { color: var(--cw-bright); }

/* ---------- Индикатор загрузки сверху ---------- */
.stripe-loading-indicator .stripe,
.stripe-loading-indicator .stripe-loaded { background: var(--cw-blue) !important; }

/* ---------- Скроллбар и фокус ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cw-bg); }
::-webkit-scrollbar-thumb { background: var(--cw-line); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--cw-blue); }
:focus-visible { outline: 2px solid var(--cw-bright); outline-offset: 2px; }

/* ---------- Мобильная версия ---------- */
@media (max-width: 768px) {
  .profile-card .card:hover { transform: none; }
  .shop-name { font-size: 3.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}