/* ===== Общие стили CTAKAH — используются во всех шаблонах ===== */

:root{
  --bg-deep:#1A1614; --bg-paper:#2C241B; --bg-stone:#4A3F35;
  --text-main:#E8DCC6; --text-muted:#A59782; --text-bright:#D8C8A8;
  --accent-gold:#C89B3C; --accent-gold-light:#F4D69A;
  --accent-alliance-blue:#1e3a8a;
  --accent-red:#9B2C2C;

  --class-warrior:#C8A074; --class-paladin:#F48CBA; --class-hunter:#AAD372;
  --class-rogue:#FDDC4A; --class-priest:#FFFFFF; --class-shaman:#0070DD;
  --class-mage:#3FC7EB; --class-warlock:#8788DD; --class-druid:#FF7C33;

  --font-display:'Cinzel Decorative', serif;
  --font-nav:'Cinzel', serif;
  --font-body:'Roboto Slab', serif;

  --border-stone:#3E3328;
}

/* ===== БЕЙДЖИ РАНГА ===== */
.rank-badge{
  display:inline-block;
  font-family:var(--font-nav);
  font-size:10px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#9a8f7c;
  background:rgba(62,51,40,.5);
  border:1px solid #4a3f35;
  padding:2px 8px;
  border-radius:8px;
  vertical-align:middle;
  opacity:.85;
}
.rank-badge.raider{
  color:#1A1614;
  background:linear-gradient(180deg, #F4D69A 0%, #C89B3C 100%);
  border:1px solid #8a6a2b;
  font-weight:700;
  opacity:1;
  box-shadow:0 0 8px rgba(200,155,60,.4);
  text-shadow:0 1px 0 rgba(255,255,255,.2);
}

/* ===== КЛАССОВЫЕ ЦВЕТА ДЛЯ ИМЁН ===== */
[data-class="warrior"] .member-name,
[data-class="warrior"] .name{color:var(--class-warrior)}
[data-class="paladin"] .member-name,
[data-class="paladin"] .name{color:var(--class-paladin)}
[data-class="hunter"]  .member-name,
[data-class="hunter"]  .name{color:var(--class-hunter)}
[data-class="rogue"]   .member-name,
[data-class="rogue"]   .name{color:var(--class-rogue)}
[data-class="priest"]  .member-name,
[data-class="priest"]  .name{color:var(--class-priest)}
[data-class="shaman"]  .member-name,
[data-class="shaman"]  .name{color:var(--class-shaman)}
[data-class="mage"]    .member-name,
[data-class="mage"]    .name{color:var(--class-mage)}
[data-class="warlock"] .member-name,
[data-class="warlock"] .name{color:var(--class-warlock)}
[data-class="druid"]   .member-name,
[data-class="druid"]   .name{color:var(--class-druid)}

/* ===== КЛАССОВЫЕ ЦВЕТА ДЛЯ ПОЛУЧАТЕЛЕЙ ЛУТА ===== */
.recipient{color:var(--text-main)}
.recipient-warrior{color:var(--class-warrior)}
.recipient-paladin{color:var(--class-paladin)}
.recipient-hunter {color:var(--class-hunter)}
.recipient-rogue  {color:var(--class-rogue)}
.recipient-priest {color:var(--class-priest)}
.recipient-shaman {color:var(--class-shaman)}
.recipient-mage   {color:var(--class-mage)}
.recipient-warlock{color:var(--class-warlock)}
.recipient-druid  {color:var(--class-druid)}

/* ===== КАЧЕСТВО ПРЕДМЕТОВ (Wowhead standard) ===== */
.quality-0{color:#9d9d9d}  /* poor */
.quality-1{color:#ffffff}  /* common */
.quality-2{color:#1eff00}  /* uncommon */
.quality-3{color:#0070dd}  /* rare */
.quality-4{color:#a335ee}  /* epic */
.quality-5{color:#ff8000}  /* legendary */
.quality-6{color:#e6cc80}  /* artifact */


/* ============================================================
   TOAST — всплывающее уведомление (используется из common.js)
   ============================================================ */
.toast-wrap{
  position:fixed;
  top:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:400;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
  max-width:90vw;
  width:auto;
}
.toast{
  background:#2C241B;
  border:2px solid #9B2C2C;
  border-left:4px solid #9B2C2C;
  border-radius:4px;
  padding:14px 22px;
  font-family:'Cinzel', serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.03em;
  color:#ff8080;
  box-shadow:0 8px 30px rgba(0,0,0,.6), 0 0 20px rgba(155,44,44,.3);
  animation:toast-in .3s ease-out;
  pointer-events:auto;
  max-width:600px;
  word-break:break-word;
  text-align:center;
}
.toast.hide{
  animation:toast-out .3s ease-in forwards;
}
.toast.ok{
  border-color:#2d7d46;
  border-left-color:#2d7d46;
  color:#9ddb9d;
  box-shadow:0 8px 30px rgba(0,0,0,.6), 0 0 20px rgba(45,125,70,.3);
}
@keyframes toast-in{
  from{opacity:0; transform:translateY(-20px)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes toast-out{
  from{opacity:1; transform:translateY(0)}
  to{opacity:0; transform:translateY(-20px)}
}


/* ============================================================
   Переключатель языка RU/EN (используется во всех шаблонах)
   ============================================================ */
.lang-switch{
  display:flex;
  gap:2px;
  background:rgba(26,22,20,.7);
  border:1px solid var(--border-stone, #3E3328);
  border-radius:3px;
  padding:3px;
}
.lang-switch button{
  background:transparent;
  border:none;
  color:var(--text-muted, #A59782);
  padding:6px 12px;
  border-radius:2px;
  cursor:pointer;
  font-family:var(--font-nav, 'Cinzel', serif);
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:.2s;
}
.lang-switch button.active{
  background:linear-gradient(180deg,#C89B3C 0%,#8a6a2b 100%);
  color:#1A1614;
}
.lang-switch button:hover:not(.active){
  color:var(--accent-gold-light, #F4D69A);
}



/* ============================================================
   FOOTER — единый для всех шаблонов
   ============================================================ */
footer{
  border-top:2px solid var(--accent-gold, #C89B3C);
  background:linear-gradient(180deg,#1A1614 0%,#120F0D 100%);
  padding:36px 24px;
  text-align:center;
  color:var(--text-muted, #A59782);
  font-family:var(--font-nav, 'Cinzel', serif);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
footer .gold{
  color:var(--accent-gold, #C89B3C);
}



@media(max-width:700px){
  footer{
    padding:22px 16px;
    font-size:10px;
    letter-spacing:.06em;
    line-height:1.5;
  }
}