/* ═══════════════════════════════════════════════════════════
   custom.css — Personalizaciones propias del sitio Budapest
   (se carga DESPUÉS de style.css para poder sobreescribirlo)
   ═══════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'FontBigEpic';
    src: url('../fonts/FontBig_EPIC.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ── Fix: al llegar al tope de la página, el navbar cambiaba de layout
   "stuck" (con scroll) a "static" y el contenedor animaba su alto,
   haciendo que el menú se expandiera verticalmente y el botón de
   hamburguesa se desalineara. Se elimina la transición en los
   contenedores del navbar para que el cambio de layout sea instantáneo,
   sin animación visible. ── */
.rd-navbar-wrap,
.rd-navbar,
.rd-navbar-inner,
.rd-navbar-inner-outer,
.rd-navbar-panel,
.rd-navbar-project-hamburger {
    transition: none !important;
}

/* ── Logo de marca en texto (reemplaza la imagen del template) ── */
.brand-text {
    font-family: 'FontBigEpic', sans-serif;
    font-size: 34px;
    line-height: 1;
    letter-spacing: 1px;
    color: #151515;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
}

.brand-text:hover,
.brand-text:focus {
    color: #6046b6;
    text-decoration: none;
}

.brand-text-inverse {
    color: #ffffff;
}

.brand-text-inverse:hover,
.brand-text-inverse:focus {
    color: #ffe745;
}

@media (min-width: 768px) {
    .brand-text {
        font-size: 42px;
    }
}

@media (min-width: 992px) {
    .brand-text {
        font-size: 48px;
    }
}

/* ── Página de cuenta (email.html): tabs login / registro ── */
.account-tabs {
    display: flex;
    gap: 10px;
    margin: 0 auto 40px;
    max-width: 460px;
}

.account-tab-btn {
    flex: 1;
    padding: 14px 10px;
    background: transparent;
    border: 2px solid #e1e1e1;
    border-radius: 4px;
    color: #777777;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 13px;
    cursor: pointer;
    transition: all .3s ease;
}

.account-tab-btn.active,
.account-tab-btn:hover {
    background: #6046b6;
    border-color: #6046b6;
    color: #ffffff;
}

.account-panel {
    max-width: 460px;
    margin: 0 auto;
}

/* Los inputs/labels del formulario quedan alineados a la izquierda
   adentro del panel centrado: es lo legible, aunque el resto del
   texto de la página esté centrado. */
.account-panel .form-wrap,
.account-panel .form-input,
.account-panel .form-label {
    text-align: left;
}

.account-alert {
    margin-top: 20px;
    padding: 14px 20px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.6;
}

.account-alert-error {
    background: rgba(255, 68, 68, .08);
    border: 1px solid rgba(255, 68, 68, .3);
    color: #c0392b;
}

.account-alert-success {
    background: rgba(115, 204, 161, .12);
    border: 1px solid rgba(115, 204, 161, .4);
    color: #2f8a5b;
}

.account-status-list {
    max-width: 460px;
    margin: 10px auto 0;
}

.account-status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #e1e1e1;
    gap: 12px;
    flex-wrap: wrap;
}

.account-status-item:last-child {
    border-bottom: none;
}

.account-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.account-pill-ok {
    background: rgba(115, 204, 161, .15);
    color: #2f8a5b;
}

.account-pill-pending {
    background: rgba(255, 231, 69, .2);
    color: #a68b00;
}

.account-pill-bad {
    background: rgba(255, 68, 68, .12);
    color: #c0392b;
}

.account-tutorial {
    margin: 0 auto 40px;
    padding-top: 30px;
    border-top: 1px solid #e1e1e1;
    max-width: 900px;
}

.account-tutorial-top {
    border-top: none;
    padding-top: 0;
    margin-bottom: 40px;
}

.account-tutorial-video {
    width: 100%;
    min-height: 260px;
    border-radius: 4px;
    background: #000;
}

@media (min-width: 768px) {
    .account-tutorial-video {
        min-height: 420px;
    }
}

/* ── Perfil: secciones (datos de cuenta / torneo / estadísticas) ── */
.profile-section {
    margin: 0 auto 60px;
}

.profile-section:last-child {
    margin-bottom: 0;
}

.profile-field-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #e1e1e1;
    gap: 12px;
    text-align: left;
    flex-wrap: wrap;
}

.profile-field-row:last-child {
    border-bottom: none;
}

.profile-field-edit-form {
    text-align: left;
    padding: 15px 0;
    border-bottom: 1px solid #e1e1e1;
}

.profile-field-edit-form:last-child {
    border-bottom: none;
}

.profile-field-edit-form .form-wrap {
    margin-bottom: 12px;
}

.profile-chart {
    width: 100%;
    max-width: 100%;
    height: auto;
    background: #fafafa;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
}

/* ── Equipos: crear/administrar equipo (equipos.html) ──
   Reutiliza .account-panel (fondo/padding/borde) pero más ancho, porque acá
   adentro va un roster completo y no solo un par de campos de formulario. */
.team-manager-block {
    max-width: 700px;
    margin: 0 auto 40px;
    text-align: left;
}

.team-manager-block:last-child {
    margin-bottom: 0;
}

.team-manager-block h4,
.team-manager-block h6 {
    text-align: center;
}

.team-manager-block .account-status-item {
    text-align: left;
}

.team-logo-preview {
    display: block;
    max-width: 120px;
    max-height: 120px;
    margin: 0 auto;
    border-radius: 4px;
    object-fit: cover;
}

/* ── Perfil: tarjetas de "SOLICITUD DE TEAMS" ── */
.team-request-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #e1e1e1;
    text-align: left;
    flex-wrap: wrap;
}

.team-request-card:last-child {
    border-bottom: none;
}

.team-request-card-logo {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.team-request-card-info {
    flex: 1 1 auto;
    min-width: 160px;
}

/* ── Navbar: el vendor posiciona el icono de hamburguesa del menu con un
   "bottom: Npx" fijo por breakpoint (16px / 26px en xl), pensado para el
   estado "stuck" al hacer scroll que desactivamos (menu estatico). Sin ese
   estado dinamico, ese offset fijo queda corrido respecto al resto del menu.
   Centrarlo verticalmente contra el alto real de .rd-navbar-inner es mas
   robusto que perseguir el numero magico del vendor por breakpoint. ── */
.rd-navbar-modern.rd-navbar-static .rd-navbar-project-hamburger-open {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
}

/* ── Mercado: menu desplegable de categorias (Skins/Comandos/Cosmeticos/Rangos) ── */
.mercado-menu-item {
    cursor: pointer;
    outline: none;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: border-color .2s ease;
}

.mercado-menu-item:hover,
.mercado-menu-item:focus-visible {
    border-color: #6046b6;
}

.mercado-menu-item.active {
    border-color: #6046b6;
    background: #f9f8fd;
}

.mercado-menu-icon img {
    display: inline-block;
    vertical-align: middle;
}

.mercado-products {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #e1e1e1;
}

.mercado-products-status {
    text-align: center;
    padding: 30px 0;
    color: #777777;
}

.product-desc {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(21, 21, 21, 0.6);
    margin-top: 8px;
}

/* ── Mercado: panel de cuenta (Usuario / Monedas / Banco / Mover monedas) ── */
.mercado-account {
    text-align: left;
}

.mercado-account-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    text-align: left;
}

/* Estado invitado (sin sesion o sin Discord vinculado): todo centrado, a
   diferencia del panel logueado que va alineado a la izquierda. */
.mercado-account-row-center {
    justify-content: center;
    text-align: center;
}

.mercado-account-row-center .mercado-account-col,
.mercado-account-row-center .mercado-account-label {
    text-align: center;
}

.mercado-account-row + .mercado-account-row {
    margin-top: 25px;
}

.mercado-account-col {
    text-align: left;
}

.mercado-account-col-full {
    flex: 1 1 100%;
}

.mercado-account-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(21, 21, 21, 0.5);
    text-align: left;
    margin-bottom: 8px;
}

.mercado-account-value {
    font-size: 18px;
    text-align: left;
}

.mercado-account-coins {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
}

.mercado-transfer-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
}

.mercado-transfer-form .form-input {
    width: auto;
    min-width: 140px;
}

.mercado-transfer-msg {
    margin-top: 10px;
    font-size: 13px;
    text-align: left;
}

.team-request-card-actions {
    flex-shrink: 0;
}