/* ==== Ali Widget — Warcraft skin + theme toggle ==== */

/* Правый сайдбар */
.aliw-sidebar{width:370px;max-width:100%;margin-left:auto;margin-bottom:24px;top:86px;z-index:2}
@media (max-width:992px){.aliw-sidebar{position:static;top:auto;margin:18px auto}}

/* БАЗА (нейтральные переменные, переопределяются темами ниже) */
.aliw-box{
  --ali-bg:#141920;
  --ali-bg-grad:radial-gradient(120% 120% at 12% -8%,rgba(255,208,120,.06) 0%,rgba(255,208,120,0) 52%);
  --ali-border:#2e3641;

  --ali-card:#0f141b82;
  --ali-card-border:#303a46;

  --ali-text:#e9eef6;
  --ali-muted:#aeb9c8;
  --ali-gold:#f4d4a6;

  /* акценты панели (не для кнопки Купить) */
  --ali-accent1:#2d6bff;
  --ali-accent2:#143fb5;

  background:var(--ali-bg-grad),var(--ali-bg);
  border:1px solid var(--ali-border);
  border-radius:14px;
  padding:14px;
  color:var(--ali-text);
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}

/* ---------- ТЕМЫ ---------- */
.aliw-alliance .aliw-box{
    --ali-bg-grad: radial-gradient(115% 120% at 12% -8%, rgb(130 81 1 / 56%) 0%, rgb(12 52 97 / 57%) 52%);
    --ali-border: #245dad;
    --ali-card-border: #1756aa;
    --ali-accent1: #0096ff;
    --ali-accent2: #0079ff;
}
.aliw-horde .aliw-box{
--ali-bg-grad: radial-gradient(115% 120% at 12% -8%, rgb(133 42 27 / 45%) 0%, rgb(97 34 23 / 28%) 52%);
    --ali-border: #7d1818;
    --ali-card-border: #7d2929;
    --ali-accent1: #ff1100;
    --ali-accent2: #ff0e00;
}

/* Заголовок панели */
.aliw-title{
  margin:0 0 12px 0;font-size:18px;line-height:1.1;font-weight:800;
  color:var(--ali-gold);
  font-family:Warcraft,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.2px;text-shadow:0 1px 0 rgba(0,0,0,.5),0 0 12px rgba(244,212,166,.08)
}
.aliw-title:after{content:"";display:block;height:1px;margin-top:8px;
  background:linear-gradient(90deg,rgba(244,212,166,.35),rgba(244,212,166,.05) 45%,rgba(244,212,166,0))}

/* Список карточек */
.aliw-list{display:grid;gap:10px;list-style:none;margin:0;padding:0}

/* Карточки */
.aliw-card{
  display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),var(--ali-card);
  border:1px solid var(--ali-card-border);
  border-radius:12px;padding:8px;text-decoration:none;color:inherit;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)
}
.aliw-card:hover{transform:translateY(-1px);border-color:#465466;box-shadow:0 8px 18px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.03) inset}

/* Изображения с ховером */
.aliw-imgwrap{position:relative;width:96px;height:96px;overflow:hidden;border-radius:10px;background:#0a0f15;border:1px solid #26313b}
.aliw-imgwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .18s ease}
.aliw-imgwrap img:nth-child(2){opacity:0}
.aliw-card:hover .aliw-imgwrap img:nth-child(1){opacity:0}
.aliw-card:hover .aliw-imgwrap img:nth-child(2){opacity:1}

/* Текст */
.aliw-info{display:grid;gap:6px;align-content:start}
.aliw-name{font-size:14px;line-height:1.25;font-weight:800;color:#f3f7ff}
.aliw-desc{font-size:12px;line-height:1.25;color:var(--ali-muted);max-height:32px;overflow:hidden}

/* Метаданные */
.aliw-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.aliw-prices{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.aliw-price-usd{font-weight:800;font-size:14px;color:#eaf2ff}
.aliw-price-uah{font-size:12px;color:#cfd9e7}

/* КНОПКА КУПИТЬ — варкрафт-золото, без синего */
.aliw-buybtn{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  padding:6px 10px;font-size:12px;font-weight:800;color:#2a1d07;
  background:linear-gradient(180deg,#f6d374 0%, #e7bd54 55%, #c89a3d 100%);
  border:1px solid #8c6d2b;border-bottom-color:#6e5320;border-radius:9px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px rgba(120,88,24,.35);
  text-shadow:0 1px 0 rgba(255,255,255,.35)
}
.aliw-card:hover .aliw-buybtn{filter:brightness(1.05)}
.aliw-card:active .aliw-buybtn{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 3px 8px rgba(120,88,24,.3)}

/* Низ панели */
.aliw-actions{display:grid;gap:10px;margin-top:12px}
.aliw-loadmore{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--ali-border);
  background:#0f161e;color:var(--ali-gold);cursor:pointer;font-weight:800;letter-spacing:.2px;
  transition:background .12s ease,border-color .12s ease,color .12s ease;text-shadow:0 1px 0 rgba(0,0,0,.45)
}
.aliw-loadmore:hover{background:#121b25;border-color:#404a58;color:#ffe0b2}
.aliw-note{margin-top:2px;font-size:11px;color:#93a2b4;opacity:.95}

/* Переключатель темы */
.aliw-theme{display:flex;gap:8px;align-items:center;justify-content:space-between}
.aliw-theme .aliw-pill{
  flex:1 1 auto;appearance:none;cursor:pointer;
  padding:8px 10px;border-radius:10px;border:1px solid var(--ali-border);
  background:#0f161e;color:#d6e4f7;font-weight:800;font-size:12px;letter-spacing:.2px
}
.aliw-theme .aliw-pill[aria-pressed="true"]{
  border-color:#6e5320;
  background:linear-gradient(180deg,#f6d374 0%, #e7bd54 55%, #c89a3d 100%);
  color:#2a1d07;text-shadow:0 1px 0 rgba(255,255,255,.35)
}


/* ====== SHOP PAGE (панель и элементы под темы Alliance/Horde) ====== */

/* ====== Глобальные переменные темы на body (чтобы тумблер работал и для Магазина) ====== */
body{
  --ali-bg:#141920;
  --ali-bg-grad: radial-gradient(120% 120% at 12% -8%, rgba(255,208,120,.06) 0%, rgba(255,208,120,0) 52%);
  --ali-border:#2e3641;
  --ali-card:#0f141b;
  --ali-card-border:#303a46;
  --ali-text:#e9eef6;
  --ali-muted:#aeb9c8;
  --ali-gold:#f4d4a6;
}
/* Alliance / Horde — цвета под твой стиль */
body.aliw-alliance{
  --ali-bg-grad: radial-gradient(115% 120% at 12% -8%, rgba(130,81,1,.56) 0%, rgba(12,52,97,.57) 52%);
  --ali-border:#245dad;
  --ali-card-border:#1756aa;
}
body.aliw-horde{
  --ali-bg-grad: radial-gradient(115% 120% at 12% -8%, rgba(133,42,27,.45) 0%, rgba(97,34,23,.28) 52%);
  --ali-border:#7d1818;
  --ali-card-border:#7d2929;
}

/* ====== SHOP PAGE: панель и элементы ====== */
.shop-panel{
  background: var(--ali-bg-grad), var(--ali-bg);
  border: 1px solid var(--ali-border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
  color: var(--ali-text);
}
.shop-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin: 0 0 8px 0;
}
.shop-head h1{
  margin:0; font-size:26px; line-height:1.2; font-weight:800;
  color: var(--ali-gold);
  font-family: Warcraft, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.shop-controls{ display:flex; gap:10px; align-items:center; margin:12px 0 16px; }
.shop-controls input[type="search"]{
  flex:1; padding:10px 12px; border-radius:10px;
  border:1px solid var(--ali-border); background:#0f1922; color:#cfe4ff;
}
.shop-grid{ display:grid; gap:14px; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width:1024px){ .shop-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .shop-grid{ grid-template-columns: 1fr; } }
.shop-card{ grid-template-columns:120px 1fr; }
.shop-imgwrap{ width:120px; height:120px; }

/* Тумблер темы (тот же стиль, что в виджете) */
.aliw-theme{ display:flex; gap:8px; align-items:center; }
.aliw-theme .aliw-pill{
  flex:0 0 auto; appearance:none; cursor:pointer;
  padding:8px 12px; border-radius:10px; border:1px solid var(--ali-border);
  background:#0f161e; color:#d6e4f7; font-weight:800; font-size:12px; letter-spacing:.2px;
}
.aliw-theme .aliw-pill[aria-pressed="true"]{
  border-color:#6e5320;
  background:linear-gradient(180deg,#f6d374 0%, #e7bd54 55%, #c89a3d 100%);
  color:#2a1d07; text-shadow:0 1px 0 rgba(255,255,255,.35);
}

/* Кнопка "Показати ще" — более контрастная и внизу */
.shop-more-wrap{ display:flex; justify-content:center; margin:18px 0 6px; }
.aliw-loadmore{
  padding:10px 16px; border-radius:12px; cursor:pointer; font-weight:800; letter-spacing:.2px;
  background:#0d141b; color:#f4d4a6;
  border:1px solid #6e5320; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 12px rgba(0,0,0,.25);
}
.aliw-loadmore:hover{ filter:brightness(1.08); }

/* ==== Mobile polish (<=1024 / <=640 / <=480) ==== */

/* G2G-страница и любые гриды с сайдбаром */
@media (max-width: 1024px){
  .wow-info { display:block !important; }                 /* если была сетка */
  .aliw-sidebar { width:100%; margin:18px 0 0 0; }        /* сайдбар под контент */
}
@media (max-width: 640px){
  .shop-head h1,
  .wow-info h1 { font-size: clamp(20px, 5vw, 28px); }
  .wow-info h2 { font-size: clamp(18px, 4.4vw, 24px); }
  .description { font-size: 14px; line-height: 1.5; }
}

/* Виджет товаров (в сайдбаре и в магазине) */
@media (max-width: 640px){
  .aliw-box { padding: 12px; border-radius: 12px; }
  .aliw-list { gap: 8px; }
  .aliw-card { grid-template-columns: 80px 1fr; padding: 8px; }
  .aliw-imgwrap { width: 80px; height: 80px; border-radius: 8px; }
  .aliw-name { font-size: 13px; }
  .aliw-desc { font-size: 12px; max-height: 50px; }
  .aliw-meta { gap: 6px; }
  .aliw-buybtn { padding: 8px 10px; font-size: 12px; border-radius: 8px; }
  .aliw-loadmore { width: 100%; padding: 12px 14px; }  /* «Показати ще» — полноширинная */
  .aliw-theme { gap: 6px; }
  .aliw-theme .aliw-pill { padding: 8px 10px; font-size: 12px; }
}

/* Магазин: карточная сетка */
@media (max-width: 1024px){ .shop-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px){  .shop-grid{ grid-template-columns: 1fr; } }
@media (max-width: 480px){
  .shop-card { grid-template-columns: 80px 1fr; }
  .shop-imgwrap{ width:80px; height:80px; }
  .shop-controls input[type="search"]{ font-size: 14px; padding: 10px; }
}

/* Увеличенные тапы и отступы */
@media (hover:none){
  .aliw-card { margin: 0; }
  .aliw-buybtn, .aliw-loadmore, .aliw-theme .aliw-pill { min-height: 40px; }
}


/* === G2G layout: грид только на десктопе, без переполнения === */
.g2g-grid{ display:grid; grid-template-columns: 1fr 360px; gap:24px; align-items:start; }
@media (max-width: 1024px){
  .g2g-grid{ display:block; }                 /* вместо inline grid из HTML */
  .aliw-sidebar{ width:100% !important; margin:18px 0 0 0 !important; }
}

/* Сайдбар по умолчанию на десктопе; не выпирает на телефонах */
.aliw-sidebar{ width:360px; max-width:100%; margin-left:auto; }
@media (max-width: 1024px){
  .aliw-sidebar{ width:100%; }
}

/* Золотая кнопка: не ломает вьюпорт на узких экранах */
.aliw-buybtn{ max-width:100%; }
@media (max-width: 480px){
  .aliw-buybtn{
    white-space: normal;          /* разрешаем перенос строки */
    line-height: 1.2;
    padding: 10px 12px;
    text-align: center;
  }
}

/* Подстрахуемся от любых горизонтальных прокруток */
img, video{ max-width:100%; height:auto; }
.wrapper, .container, .shop-panel, .aliw-box{ box-sizing: border-box; }
html, body{ overflow-x: hidden; }