/* ===========================
   CONTENEDOR GENERAL
   =========================== */
#homebanner {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.5) 40%,
        rgba(0, 0, 0, 0.15) 70%,
        rgba(0, 0, 0, 0) 90%
    ), var(--settings-background);
}

/* CAPA NEGRA SUAVE */
#homebanner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.15);
    backdrop-filter: blur(2px);
    z-index: 0;
}

/* ===========================
   CONTENIDO
   =========================== */
.homebanner-content {
    position: relative;
    z-index: 2;
    padding: 3rem 3rem !important;
}

/* TIPOGRAFÍA DEL TEMA (solo color) */
.title-mini,
.title,
.description {
    color: #fff;
}

/* ===========================
   VIDEO — FULL RESPONSIVE SIN BORDES
   =========================== */
.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 520px;
    height: 100%;
    min-height: 260px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    display: flex;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* ===========================
   CAJA ONLINE + CABEZAS
   =========================== */
.status-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(0,0,0,0.40);
    padding: 14px 20px;
    border-radius: 14px;
    backdrop-filter: blur(4px);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    color: #fff;
}

/* Badge */
.status-pill-wrapper {
    display: flex;
    align-items: center;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.2);
    gap: 6px;
    background: rgba(0,0,0,0.45);
    color: #ffffff !important; /* TEXTO SIEMPRE BLANCO */
}

/* Iconos wifi */
.status-pill-online i {
    color: #4cff4c !important; /* verde */
}

.status-pill-offline i {
    color: #ff4c4c !important; /* rojo */
}

/* Cabezas */
.status-heads img {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    margin-right: 6px; /* separación */
}

/* ============================================================
   BOTONES MINECRAFT.NET — SIN TIPOGRAFÍA (usa la del tema)
   ============================================================ */

/* ELIMINAR ICONOS */
.btn-mc-green i,
.btn-mc-yellow i,
.btn-mc-purple i {
    display: none !important;
}

/* ESTILO BASE DE BOTONES */
.btn-mc-green,
.btn-mc-yellow,
.btn-mc-purple {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 24px;
    height: 54px;
    min-width: 76px;
    max-width: fit-content;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff !important;
    border: 2px solid rgb(38, 36, 35);
    box-sizing: border-box;
    cursor: pointer;
}

/* BOTÓN VERDE (IP) */
.btn-mc-green {
    background-color: rgb(60, 133, 39);
    box-shadow:
        rgb(42, 100, 28) 0px -6px 0px inset,
        rgb(82, 165, 53) 0px 6px 0px inset;
    position: relative;
    overflow: hidden;
}

/* Texto normal */
.btn-mc-green .ip {
    opacity: 1;
    transform: translateY(0);
    transition: .25s;
}

/* Texto hover */
.btn-mc-green .after {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: .25s;
}

/* Hover */
.btn-mc-green:hover .ip {
    opacity: 0;
    transform: translateY(-20px);
}

.btn-mc-green:hover .after {
    opacity: 1;
    transform: translateY(0);
}

.btn-mc-green:hover {
    background-color: rgb(82, 165, 53);
}

/* BOTÓN AMARILLO (MAPA/WIKI) */
.btn-mc-yellow {
    background-color: rgb(255, 196, 43);
    box-shadow:
        rgb(219, 159, 33) 0px -6px 0px inset,
        rgb(255, 217, 83) 0px 6px 0px inset;
}

.btn-mc-yellow:hover {
    background-color: rgb(255, 217, 83);
}

/* BOTÓN MORADO (DISCORD) */
.btn-mc-purple {
    background-color: rgb(88, 101, 242);
    box-shadow:
        rgba(0,0,0,0.35) 0px -6px 0px inset,
        rgba(255,255,255,0.25) 0px 6px 0px inset;
}

.btn-mc-purple:hover {
    background-color: rgb(108, 121, 255);
}

/* ELIMINAR SUBRAYADO GLOBAL */
a, a:hover, a:focus {
    text-decoration: none !important;
}

/* ===========================
   RESPONSIVE — MÓVIL
   =========================== */
@media (max-width: 768px) {

    /* Contenedor de botones */
    .homebanner-content .d-flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: 0.75rem;
    }

    /* Verde: primera fila, ancho completo */
    .homebanner-content .d-flex > a.btn-mc-green {
        flex-basis: 100%;
        width: 100%;
    }

    /* Resto: segunda fila, centrados */
    .homebanner-content .d-flex > a.btn-mc-yellow,
    .homebanner-content .d-flex > a.btn-mc-purple {
        flex-basis: auto;
        width: auto;
    }
}