/* =========================================================================
   custom.css — camada de tema MU Honor (steel/prata + dourado).
   Carregado DEPOIS do style.min.css, então sobrescreve sem editar o original.
   Pass 1: tema + polimento de componentes + responsivo básico.
   ========================================================================= */

:root{
  --gold:#d9b65c;
  --gold-2:#f0c878;
  --steel:#aeb6c2;
  --ink:#1b1e24;
  --panel:#ffffff;
  --panel-border:#e3e6ec;
  --dark-1:#171a21;
  --dark-2:#0f1218;
}

/* ----------------------------- NAVBAR ---------------------------------- */
.mw-navbar{
  background:linear-gradient(180deg,#15171d,#0c0e13)!important;
  border-bottom:1px solid #2a2e38;
  box-shadow:0 2px 14px rgba(0,0,0,.4);
}
.mw-navbar .nav-link{
  color:#d7dbe2!important;
  position:relative;
  transition:color .15s;
}
.mw-navbar .nav-link:hover{ color:var(--gold-2)!important; }
.mw-navbar .nav-link::after{
  content:"";position:absolute;left:50%;bottom:6px;width:0;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transition:width .2s ease,left .2s ease;
}
.mw-navbar .nav-link:hover::after{ left:15%;width:70%; }

/* ----------------------------- DOWNLOAD -------------------------------- */
.mw-header .download{
  border:1px solid #3a3d46;
  box-shadow:inset 0 0 40px rgba(0,0,0,.4);
  transition:box-shadow .18s, transform .05s;
}
.mw-header .download:hover{
  box-shadow:inset 0 0 0 1px var(--gold), inset 0 0 40px rgba(0,0,0,.4);
}

/* ------------------- TÍTULOS (acento dourado) -------------------------- */
.mw-content .title,
.box-info-home .title,
h1.title, h2.title, .page-title h1, .page-container .title{
  position:relative;
  padding-left:14px;
  border-left:none;
}
.mw-content .title::before,
.box-info-home .title::before,
h1.title::before, h2.title::before, .page-container .title::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:1.05em;border-radius:3px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
}

/* --------------------- CARDS CLAROS (conteúdo) ------------------------- */
.mw-content{
  border:1px solid var(--panel-border)!important;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.box-info-home{
  background:#fbfbfd;
  border:1px solid var(--panel-border);
  border-radius:12px;
  padding:14px 16px!important;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}

/* SERVER INFO: valores em dourado escuro, linhas suaves */
.server-info li{
  border-bottom:1px solid #eef0f4;
  padding:7px 2px;
}
.server-info li .text{
  color:#9a7b22!important;
  font-weight:700;
}

/* -------------------------- SIDEBAR (clara) ---------------------------- */
.mw-sidebar .title,
.team .title, .partial-login .title, .castle-siege .title{
  color:#23262d;
}
.team, .servers, .partial-login, .castle-siege{
  background:#fff;border:1px solid var(--panel-border);border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.progress{ background:#e9ecf1;border-radius:20px;overflow:hidden;height:10px; }
.progress-bar.bg-success{
  background:linear-gradient(90deg,#2ea05a,#39c46f)!important;
}

/* badges do painel de controle: dourado */
.badge-secondary{
  background:linear-gradient(180deg,#2a2e38,#1d2129)!important;
  color:var(--gold-2)!important;border:1px solid #3a3f4b;
}

/* --------------------- BOTÕES (laranja -> dourado) --------------------- */
.bg-orange, .btn.bg-orange{
  background:linear-gradient(180deg,var(--gold-2),var(--gold))!important;
  color:#241c05!important;border:none!important;font-weight:700;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.bg-orange:hover, .btn.bg-orange:hover{ filter:brightness(1.08); }

/* slider pager ativo -> dourado */
.banners .sy-pager li.sy-active a{ background:var(--gold)!important; }

/* ------------------------------ FOOTER --------------------------------- */
footer{
  background:linear-gradient(180deg,#12141a,#0b0d11)!important;
  border-top:1px solid #2a2e38;
}

/* ---------------------- SLIDER (Slippry) ------------------------------ */
/* O Slippry já é responsivo; aqui só garantimos fluidez e que a imagem
   nunca estoure o container (especialmente no mobile). */
.banners .slider-container{ width:100%; }
.banners .sy-box{ width:100%!important; max-width:100%; }
.banners .sy-box img,
.banners #slider img{ width:100%!important; height:auto!important; display:block; }
/* Setas e pager um pouco mais visíveis */
.banners .sy-controls .sy-prev,
.banners .sy-controls .sy-next{ opacity:.85; }
.banners .sy-controls .sy-prev:hover,
.banners .sy-controls .sy-next:hover{ opacity:1; }

@media (max-width:992px){
  .banners, .banners .slider-container, .banners #slider, .banners .sy-box{
    width:100%!important; max-width:100%;
  }
}

/* ============================ RESPONSIVO =============================== */

/* Telas grandes: aproveitar um pouco mais de largura */
@media (min-width:1500px){
  .container{ max-width:1240px; }
}

/* Tablet/celular: mostrar de novo o bloco de links (estava escondido) e
   empilhar tudo em largura total, de forma fluida. */
@media (max-width:992px){
  .mw-header{ padding:14px; }
  .mw-header .links{ display:block!important; float:none; width:100%; margin-top:12px; }
  .mw-header .banners{ width:100%; margin-right:0; min-height:auto; }
  .mw-header .download{ width:100%; height:120px; background-size:cover; }
  .mw-header .block-links{ width:100%; display:flex; flex-wrap:wrap; }
  .mw-header .block-links a{
    flex:1 1 45%; height:62px; line-height:62px; width:auto;
  }
}

/* Celular pequeno: navbar e fontes mais compactas */
@media (max-width:576px){
  .mw-navbar .navbar-brand{ width:150px; }
  .mw-header .block-links a{ flex-basis:100%; }
  .mw-content{ border-radius:10px; }
}

/* Ícones flutuantes (Whats/Discord/Fórum/YouTube): no mobile, viram uma
   barrinha horizontal no rodapé pra não tapar o conteúdo. */
/* Ícones flutuantes: mantidos onde estavam (lado direito), porém menores. */
.image-container .floating-image{
  width:42px!important; height:42px!important; margin-bottom:12px!important;
}
@media (max-width:992px){
  .image-container .floating-image{
    width:36px!important; height:36px!important; margin-bottom:10px!important;
  }
}

/* ----- Botões do Daily (Calendário/Recuperar): mais compactos ----- */
/* Antes ficavam gigantes pq o texto quebrava em 2 linhas com line-height:78px. */
.mw-header .block-links a[href*="calendario"],
.mw-header .block-links a[href*="recuperar_daily"]{
  line-height:1.15!important;
  vertical-align:middle!important;
  font-size:12.5px!important;
  height:58px!important;
  padding:0 6px!important;
}