/* GBP PREMIUM BUTTON - BASEADO NO ACG PREMIUM */

/* Importar Bootstrap Icons */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css');

/* ==============================================
   BOTÃO NO MENU (hw-nav-menu)
   CSS específico para o botão dentro do menu
   ============================================== */

/* Reseta estilos do LI pai - IMPORTANTE para prevenir crescimento */
body ul.hw-nav-menu > li:has(a[href*="premium-access"]) {
    height: auto !important;
    line-height: normal !important;
    max-height: none !important;
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Botão GBP Pass no MENU */
body ul.hw-nav-menu li a[href*="premium-access"] {
    background: linear-gradient(45deg, #ffd700, #ffed4e) !important;
    color: #1a1a1a !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1) !important;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 10px 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    font-size: 14px !important;
    margin: 0 10px !important;
    height: auto !important;
    line-height: normal !important;
    /* FORÇA tamanho correto - previne tema sobrescrever */
    max-height: none !important;
    max-width: fit-content !important;
    min-height: auto !important;
    min-width: auto !important;
    width: auto !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* Diamante SVG no MENU - IGUALZINHO AO ACG */
body ul.hw-nav-menu li a[href*="premium-access"]::before {
    content: "" !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%231a1a1a' class='bi bi-gem' viewBox='0 0 16 16'%3E%3Cpath d='M3.1.7a.5.5 0 0 1 .4-.2h9a.5.5 0 0 1 .4.2l2.976 3.974c.149.185.156.45.01.644L8.4 15.3a.5.5 0 0 1-.8 0L.1 5.3a.5.5 0 0 1 0-.6L3.1.7zm11.386 3.785-1.806-2.41-.776 2.413 2.582-.003zm-3.633.004.961-2.989H4.186l.963 2.995 5.704-.006zM5.47 5.495 8 13.366l2.532-7.876-5.062.005zm-1.371-.999-.78-2.422-1.818 2.425 2.598-.003z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)) !important;
    flex-shrink: 0 !important;
    margin-right: 6px !important;
}

/* Hover do botão no MENU */
body ul.hw-nav-menu li a[href*="premium-access"]:hover {
    background: linear-gradient(45deg, #ffed4e, #ffd700) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 237, 78, 0.6) !important;
}

/* ==============================================
   BOTÃO GENÉRICO (.gbp-premium-link)
   Para uso em outras partes do site
   ============================================== */

/* Botão GBP Premium - Baseado no gamepass-btn do ACG */
body .gbp-premium-link {
    background: linear-gradient(45deg, #ffd700, #ffed4e) !important;
    color: #1a1a1a !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1) !important;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4) !important;
    animation: gbpPulse 2s ease-in-out infinite !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 8px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    font-size: 14px !important;
    margin: 0 10px !important;
    min-height: 40px !important;
}

/* Diamante antes do texto - SVG bi-gem */
body .gbp-premium-link::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%231a1a1a' class='bi bi-gem' viewBox='0 0 16 16'%3E%3Cpath d='M3.1.7a.5.5 0 0 1 .4-.2h9a.5.5 0 0 1 .4.2l2.976 3.974c.149.185.156.45.01.644L8.4 15.3a.5.5 0 0 1-.8 0L.1 5.3a.5.5 0 0 1 0-.6L3.1.7zm11.386 3.785-1.806-2.41-.776 2.413 2.582-.003zm-3.633.004.961-2.989H4.186l.963 2.995 5.704-.006zM5.47 5.495 8 13.366l2.532-7.876-5.062.005zm-1.371-.999-.78-2.422-1.818 2.425 2.598-.003z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)) !important;
    flex-shrink: 0 !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
}

/* Efeito de brilho */
body .gbp-premium-link::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent) !important;
    transform: rotate(45deg) !important;
    animation: gbpShine 3s ease-in-out infinite !important;
    pointer-events: none !important;
}

/* Animação de pulsação */
@keyframes gbpPulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4) !important;
    }
    50% {
        box-shadow: 0 4px 20px rgba(255, 237, 78, 0.6) !important;
    }
}

/* Animação de brilho */
@keyframes gbpShine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg) !important;
    }
    50% {
        transform: translateX(100%) translateY(100%) rotate(45deg) !important;
    }
    100% {
        transform: translateX(200%) translateY(200%) rotate(45deg) !important;
    }
}

/* Hover - Gradiente invertido */
body .gbp-premium-link:hover {
    background: linear-gradient(45deg, #ffed4e, #ffd700) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 237, 78, 0.6) !important;
    color: #1a1a1a !important;
}