/**
 * GCP Slider - Cards & Content
 * Estilos dos cards, conteúdo, texto, preços, CTAs, badges
 */

/* Card base styles */
.gcp-card {
    position: relative;
    border-radius: 18px;
    overflow: visible; /* ✅ Permite tags saírem */
    aspect-ratio: 16 / 9; /* ✅ Mantém proporcional 16:9 */
    background: transparent;
    border: 2px solid #E5E5E5 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 300ms ease, box-shadow 300ms ease;
}

/* ✅ HERO: overflow hidden só para zoom da imagem */
.gcp-hero {
    overflow: hidden;
    min-height: 0;
    aspect-ratio: 16 / 9;
}

.gcp-card:hover {
    transform: translateY(-2px);
    border: 2px solid #E5E5E5 !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* ✅ HERO: overflow hidden no hover (para zoom da imagem) */
.gcp-hero:hover {
    overflow: hidden; /* Garante que o zoom da imagem não afete a borda */
}

/* Remove bordas de elementos internos para garantir apenas a borda do card */
.gcp-slider .gcp-card *:not(.gcp-card),
.gcp-slider .gcp-card img,
.gcp-slider .gcp-card .gcp-bg {
    border: none !important;
    outline: none !important;
}

/* Image container */
.gcp-image-container {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    border-radius: 16px; /* Garante que não vaze da borda do card */
}

.gcp-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 300ms ease;
    /* ✅ Zoom mínimo padrão para garantir preenchimento total do slide */
    transform: scale(1.08);
    border: none !important; /* Remove qualquer borda das imagens */
}

.gcp-card:hover .gcp-bg {
    /* ✅ Mantém leve zoom adicional no hover */
    transform: scale(1.09);
    transform-origin: center center;
}

/* Overlay */
.gcp-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 16, 40, 0.15) 0%, rgba(3, 16, 40, 0.65) 70%);
    z-index: 2;
    transition: opacity 300ms ease;
}

.gcp-overlay[data-gradient="dark-bottom"] {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.gcp-overlay[data-gradient="dark-top"] {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.gcp-overlay[data-gradient="dark-center"] {
    background: radial-gradient(circle, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.8) 100%);
}

/* Overlay gradients - duplicados para compatibilidade */
.gcp-overlay[data-gradient="dark-bottom"] {
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.8) 100%);
}

.gcp-overlay[data-gradient="dark-top"] {
    background: linear-gradient(to top, transparent 0%, rgba(0,0,0,0.8) 100%);
}

.gcp-overlay[data-gradient="dark-center"] {
    background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.6) 100%);
}

/* Content */
.gcp-content {
    position: absolute;
    inset: auto 24px 24px 24px;
    color: #ffffff;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
}

/* ✅ HERO: conteúdo mais espaçado */
.gcp-hero .gcp-content {
    gap: 8px;
    justify-content: flex-end;
}

/* ✅ LATERAIS: conteúdo compacto */
.gcp-card:not(.gcp-hero) .gcp-content {
    gap: 6px;
    justify-content: flex-end;
}

.gcp-theme-dark .gcp-content {
    color: #ffffff;
}

.gcp-theme-light .gcp-content {
    color: #1a1a1a;
}

/* Text alignment */
.gcp-text-left .gcp-content { text-align: left; }
.gcp-text-center .gcp-content { text-align: center; }
.gcp-text-right .gcp-content { text-align: right; }

/* ✅ KICKER/TAG REPOSICIONADO */
.gcp-kicker-container {
    display: flex;
    align-items: center;
    gap: 6px; /* ✅ Gap padrão */
    margin-bottom: 8px;
}

/* ✅ HERO: tag inline acima do título */
.gcp-kicker-hero-inline {
    position: relative;
    z-index: 3;
    margin-bottom: 12px; /* ✅ Espaço normal com o título */
}

/* ✅ LATERAIS: tag posição absoluta com sobreposição */
.gcp-kicker-side-top,
.gcp-kicker-side-bottom {
    position: absolute;
    z-index: 10; /* ✅ Z-index mais alto */
    top: -16px; /* ✅ Mais para fora */
    left: 16px;
    transform: none;
    gap: 4px; /* ✅ Gap menor para tags menores */
}

.gcp-kicker {
    display: inline-flex;
    align-items: center;
    font-size: 8px; /* ✅ Menor ainda */
    font-weight: 600; /* ✅ Peso reduzido */
    padding: 3px 8px; /* ✅ Padding menor */
    background: linear-gradient(135deg, #d6952d 0%, #F3AA32 100%);
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3); /* ✅ Borda mais fina */
    border-radius: 8px !important; /* ✅ Menos arredondado */
    backdrop-filter: blur(12px);
    letter-spacing: 0.3px; /* ✅ Letter-spacing reduzido */
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); /* ✅ Sombra mais sutil */
}

/* ✅ HERO: kicker inline tamanho normal */
.gcp-kicker-hero-inline .gcp-kicker {
    font-size: 11px;
    font-weight: 800;
    font-family: 'Arial', sans-serif;
    padding: 5px 10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    letter-spacing: 1px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

/* ✅ LATERAIS: kicker com melhor sobreposição */
.gcp-kicker-side-top .gcp-kicker,
.gcp-kicker-side-bottom .gcp-kicker {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); /* ✅ Sombra reduzida */
    border: 1.5px solid rgba(255, 255, 255, 0.4); /* ✅ Borda mais fina */
}

.gcp-kicker-icon {
    width: 12px; /* ✅ Ícone menor (laterais) */
    height: 12px; /* ✅ Ícone menor (laterais) */
    opacity: 0.8;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* ✅ HERO: ícone tamanho normal */
.gcp-kicker-hero-inline .gcp-kicker-icon {
    width: 16px; /* ✅ Tamanho original para hero */
    height: 16px; /* ✅ Tamanho original para hero */
}

.gcp-kicker-icon[data-icon="steam"]::before {
    content: "🎮";
}

.gcp-kicker-icon[data-icon="epic"]::before {
    content: "🎯";
}

.gcp-kicker-icon[data-icon="xbox"]::before {
    content: "🎮";
}

.gcp-kicker-icon[data-icon="steam"] {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0ZGRiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnoiLz4KICA8dGV4dCB4PSIxMiIgeT0iMTYiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMCIgZmlsbD0iIzAwMCIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UzwvdGV4dD4KPC9zdmc+');
}

.gcp-kicker-icon[data-icon="epic"] {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0ZGRiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnoiLz4KICA8dGV4dCB4PSIxMiIgeT0iMTYiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSI5IiBmaWxsPSIjMDAwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5FPC90ZXh0Pgo8L3N2Zz4=');
}

.gcp-kicker-icon[data-icon="xbox"] {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzEwN0MxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIgZmlsbD0iIzEwN0MxMCIvPgogIDx0ZXh0IHg9IjEyIiB5PSIxNiIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEwIiBmaWxsPSIjRkZGIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5YPC90ZXh0Pgo8L3N2Zz4=');
}

.gcp-kicker {
    color: inherit;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Arial', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* ✅ TÍTULOS E SUBTÍTULOS CORRIGIDOS */
.gcp-text-content {
    margin-bottom: 5px;
}

/* ✅ HERO: texto mais compacto */
.gcp-hero .gcp-text-content {
    margin-bottom: -15px;
}

/* ✅ LATERAIS: título próximo do botão */
.gcp-side-text {
    margin-bottom: -15px !important;
    margin-top: auto; /* Empurra para baixo */
}

.gcp-title {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 600;
    color: #ffffff !important;
    line-height: 1.1;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ✅ HERO: Títulos maiores */
.gcp-hero .gcp-title {
    font-size: clamp(28px, 5vw, 42px);
    color: #ffffff !important;
    margin-bottom: 6px; /* Menos espaço */
}

/* ✅ LATERAIS: Títulos menores */
.gcp-title-side {
    font-size: clamp(16px, 3vw, 22px) !important;
    margin-bottom: 6px !important;
}

.gcp-subtitle {
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    opacity: 0.95;
    max-width: 480px;
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* ✅ HERO: subtítulo mais próximo do botão */
.gcp-subtitle-hero {
    font-size: 18px;
    max-width: 600px;
    color: #ffffff !important;
    margin-bottom: 4px; /* Mais próximo do botão */
}

/* ✅ SEÇÃO INFERIOR REORGANIZADA */
.gcp-bottom-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

/* ✅ HERO: CTA e preços lado a lado */
.gcp-hero-bottom {
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* ✅ LATERAIS: CTA e preços lado a lado */
.gcp-side-bottom {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

/* ✅ PREÇOS REPOSICIONADOS */
.gcp-price-section {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    flex-wrap: wrap;
}

/* ✅ PREÇOS EM LATERAIS: mais compactos */
.gcp-price-side {
    gap: 6px;
}

.gcp-price-original {
    font-size: 14px;
    opacity: 0.8;
    text-decoration: line-through;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.gcp-price-sale {
    font-size: 18px;
    font-weight: 700;
    color: #F3AA32;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ✅ PREÇOS EM LATERAIS: menores */
.gcp-price-side .gcp-price-original {
    font-size: 12px;
}

.gcp-price-side .gcp-price-sale {
    font-size: 16px;
}

/* Legacy support for old price structure */
.gcp-price-from {
    font-size: 14px;
    opacity: 0.7;
    text-decoration: line-through;
}

.gcp-price-to {
    font-size: 18px;
    font-weight: 700;
    color: #F3AA32;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Badge de desconto */
.gcp-discount-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    background: linear-gradient(135deg, #ff9800, #ff5722, #e91e63) !important; /* ✅ Degradê laranja → rosa → vermelho */
    color: #ffffff;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: none;
    box-shadow: 0 2px 4px rgba(255, 87, 34, 0.4); /* ✅ Sombra laranja combinando */
    margin-left: 8px;
    animation: pulse-discount 2s infinite;
}

@keyframes pulse-discount {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ✅ BADGES REPOSICIONADOS */
.gcp-badge-container {
    margin-top: 8px;
}

.gcp-badge {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gcp-badge-default {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    backdrop-filter: blur(10px);
}

.gcp-badge-danger {
    background: linear-gradient(135deg, #ff4757, #ff3838);
    color: white;
}

.gcp-badge-warning {
    background: linear-gradient(135deg, #ffa726, #ff9800);
    color: white;
}

.gcp-badge-success {
    background: linear-gradient(135deg, #66bb6a, #4caf50);
    color: white;
}

/* ✅ CUPOM REPOSICIONADO */
.gcp-coupon {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    position: absolute;
    z-index: 5;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    backdrop-filter: blur(10px);
}

/* ✅ HERO: cupom canto superior ESQUERDO */
.gcp-coupon-hero {
    top: 20px;
    left: 20px; /* Agora no canto superior esquerdo */
}

/* ✅ LATERAIS: cupom na área de conteúdo */
.gcp-coupon-side {
    position: relative;
    margin-top: 8px;
}

.gcp-coupon-label {
    opacity: 0.8;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    font-family: 'Arial', sans-serif;
    color: currentColor;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gcp-coupon-code {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    color: #ffffff;
    backdrop-filter: blur(8px);
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.95);
    color: #2c3e50;
    padding: 3px 7px;
    border-radius: 5px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ✅ CTA REPOSICIONADO - SEMPRE VERDE COM ÍCONE CARRINHO */
.gcp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background: linear-gradient(135deg, #dd9a2e, #F3AA32) !important; /* ✅ Verde fixo */
    color: #ffffff !important; /* ✅ Texto branco */
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 300ms ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 120px;
    box-shadow: 0 4px 12px rgba(212, 155, 0, 0.4);
    margin-right: 12px;
    position: relative;
    gap: 8px; /* ✅ Espaço entre ícone e texto */
}

/* ✅ ÍCONE DE CARRINHO VETORIAL SÓLIDO NO CTA */
.gcp-cta::before {
    content: "";
    width: 18px;
    height: 18px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12L8.1 13h7.45c.75 0 1.41-.41 1.75-1.03L21.7 4H5.21l-.94-2H1zm16 16c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.95;
    flex-shrink: 0;
}

/* ✅ CTA EM LATERAIS: mais compacto com ícone */
.gcp-cta-side {
    padding: 10px 16px;
    font-size: 12px;
    min-width: 100px;
    margin-right: 8px;
}

/* ✅ ÍCONE MENOR PARA CTA LATERAL */
.gcp-cta-side::before {
    width: 16px; /* ✅ Ícone menor nos cards laterais */
    height: 16px;
}

.gcp-cta:hover {
    background: linear-gradient(135deg, #e79f2c, #F3AA32) !important; /* ✅ Verde mais claro no hover */
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 212, 170, 0.5);
    color: #ffffff !important; /* ✅ Texto branco no hover */
    text-decoration: none;
}

.gcp-cta:focus {
    outline: 2px solid #F3AA32;
    outline-offset: 2px;
}

/* ✅ SLIDE INTEIRO CLICÁVEL: CTA apenas visual */
.gcp-slide-link .gcp-cta {
    pointer-events: none !important; /* Não interfere no clique do slide */
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gcp-content > * {
    animation: fadeInUp 600ms ease-out;
}

.gcp-content > *:nth-child(1) { animation-delay: 100ms; }
.gcp-content > *:nth-child(2) { animation-delay: 200ms; }
.gcp-content > *:nth-child(3) { animation-delay: 300ms; }
.gcp-content > *:nth-child(4) { animation-delay: 400ms; }