/* hytale.css - Overrides para GamzyHost Hytale (Tema Azul Oficial) */

:root {
    /* Tu color exacto */
    --hytale-blue: #3e9abd;

    /* Variaciones generadas para hover y fondos */
    --hytale-blue-dark: #2c7a96;
    --hytale-blue-glow: rgba(62, 154, 189, 0.4);

    /* Color secundario (Dorado Hytale para contrastes) */
    --hytale-gold: #fccb5d;
}

/* === HERO OVERRIDES === */

/* Fondo: Radial azulado mágico en lugar del naranja */
.hytale-theme-hero {
    background: radial-gradient(circle at top, rgba(62, 154, 189, 0.15) 0%, rgba(0, 0, 0, 0) 65%) !important;
}

/* Kicker (Texto pequeño arriba del título) */
.hytale-kicker {
    color: var(--hytale-blue) !important;
    text-shadow: 0 0 10px rgba(62, 154, 189, 0.3);
}

/* Badges del hero (Pill tags) */
.hytale-badge {
    background-color: rgba(62, 154, 189, 0.15) !important;
    border-color: rgba(62, 154, 189, 0.3) !important;
    color: #8ed6f3 !important;
    /* Un tono más claro del azul para texto */
}

/* Botón principal del Hero */
.hytale-btn-hero {
    background-color: var(--hytale-blue) !important;
    border-bottom: 4px solid var(--hytale-blue-dark) !important;
    /* Efecto 3D sutil */
    box-shadow: 0 4px 15px rgba(62, 154, 189, 0.3) !important;
    transition: all 0.3s ease !important;
}

.hytale-btn-hero:hover {
    background-color: #55b3d6 !important;
    /* Un pelín más claro al hover */
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(62, 154, 189, 0.5) !important;
}

/* Glow de la imagen del Hero */
.hytale-glow {
    box-shadow: 0 0 50px var(--hytale-blue-glow) !important;
    border: 1px solid rgba(62, 154, 189, 0.3) !important;
}

/* Texto de acento en tarjetas flotantes */
.hytale-text-accent {
    color: var(--hytale-blue) !important;
}


.feature-box:hover {
    transform: translateY(-5px);
    background-color: rgba(29, 26, 21, 0.9);
    border-color: var(--hytale-blue);
    /* Borde dorado al pasar el mouse */
}

/* Contenedor del icono (estilo cuadrado suave) */
.feature-icon-wrapper {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--hytale-blue-glow);
    /* Fondo dorado muy suave */
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hytale-blue);
    /* Icono dorado */
}

.price-card-clean:hover {
    transform: translateY(-5px);
    border-color: var(--hytale-blue);
}











/* Seccion de region Custom hytale */
.sub-loc-btn.active {
  background: var(--hytale-blue-glow);
  border-color: var(--hytale-blue);
  color: #fff;
}






















/* === PRICING SECTION OVERRIDES === */

/* Título destacado "Hytale" */
.hytale-highlight {
    background-color: var(--hytale-blue) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(62, 154, 189, 0.3) !important;
}

/* Subtítulo de región */
.hytale-sub-header {
    background-color: #162029 !important;
    /* Fondo azul muy oscuro */
    color: var(--hytale-blue) !important;
    border: 1px solid rgba(62, 154, 189, 0.2) !important;
}

/* Botones estáticos del sidebar (Info i9) */
.hytale-static-btn {
    background: linear-gradient(90deg, rgba(62, 154, 189, 0.1) 0%, rgba(0, 0, 0, 0) 100%) !important;
    border-left: 3px solid var(--hytale-blue) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* === GRID FIX (Mantenemos el arreglo de 3 columnas) === */
@media (min-width: 1200px) {
    .hytale-grid-fix {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* === CARDS STYLING === */

/* Iconos de la lista de características */
.hytale-icon {
    color: var(--hytale-blue) !important;
    filter: drop-shadow(0 0 5px rgba(62, 154, 189, 0.5));
}

/* Tarjeta Destacada (Centro - Gaia) */
.hytale-featured {
    border: 1px solid var(--hytale-blue) !important;
    background: linear-gradient(180deg, rgba(62, 154, 189, 0.1) 0%, rgba(30, 30, 35, 1) 100%) !important;
    box-shadow: 0 0 30px rgba(62, 154, 189, 0.15) !important;
}

/* Etiqueta "Recomendado" */
.hytale-badge-pop {
    background: var(--hytale-blue) !important;
    color: #fff !important;
    font-weight: 800 !important;
}

/* Precio en la tarjeta destacada */
.hytale-text-gold {
    color: var(--hytale-blue) !important;
    text-shadow: 0 0 10px rgba(62, 154, 189, 0.4);
}

/* Botón sólido "Empezar Ahora" */
.hytale-btn-solid {
    background-color: var(--hytale-blue) !important;
    color: white !important;
    border: none !important;
    font-weight: 700 !important;
}

.hytale-btn-solid:hover {
    background-color: #55b3d6 !important;
    box-shadow: 0 0 20px var(--hytale-blue-glow) !important;
}

/* Botones Outline (Configurar) */
.hytale-btn-outline {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ccc !important;
}

.hytale-btn-outline:hover {
    border-color: var(--hytale-blue) !important;
    color: var(--hytale-blue) !important;
    background: rgba(62, 154, 189, 0.05) !important;
}


.highlight-bg-2 {
    background-color: #55b3d6 !important;
    color: #1d1a15 !important;
    padding: 0.25em 0.5em !important;
    border-radius: 4px !important;
    display: inline-block !important;
    font-weight: 900 !important;
    font-size: 1.1em !important;
    line-height: 1 !important;
    transform: skew(-15deg) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
}