/* css/shop.css */

/* Largura máxima para a loja em telas grandes */
#shop-modal .modal-content {
    background-color: #f9fafb; /* bg-gray-50 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-2xl */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    width: 100%; /* Garante que seja responsivo */
    max-width: 1100px; /* Limita a largura em desktops */
}

/* ======================================================= */
/* =================== INÍCIO DA ALTERAÇÃO ================= */

/* Container para os elementos à direita do header do modal */
#shop-modal .shop-header-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem; /* Espaçamento entre as fichas e o botão 'X' */
}

/* =================== FIM DA ALTERAÇÃO ==================== */
/* ======================================================= */

/* Novo estilo para o contador de fichas, igual ao do header */
#shop-modal .shop-fichas-container {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
    background-color: #f3f4f6; /* bg-gray-100 (cor do site) */
    padding: 0.375rem 0.75rem; /* 6px 12px */
    border-radius: 9999px; /* rounded-full */
    border: 1px solid #e5e7eb;
}

/* --- Estilos para as NOVAS Abas de Jogo --- */
#shop-modal .game-tabs {
    display: flex;
    background-color: #ffffff;
    flex-shrink: 0;
}

#shop-modal .game-tab-btn {
    padding: 0.75rem 1.25rem;
    font-weight: 700; /* bold */
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
    background-color: transparent;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#shop-modal .game-tab-btn:hover {
    background-color: #f3f4f6; /* bg-gray-100 */
}

#shop-modal .game-tab-btn.active {
    color: #ef4444; /* text-red-500 */
    border-bottom-color: #ef4444; /* border-red-500 */
}

/* --- Estilos para as Abas de Tipo de Item (Ajustado) --- */
#shop-modal .shop-tabs {
    display: flex;
    background-color: #f9fafb; /* bg-gray-50 */
    flex-shrink: 0; 
}

#shop-modal .shop-tab-btn {
    padding: 1rem 1.5rem;
    font-weight: 600;
    color: #6b7280; /* text-gray-500 */
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
    background-color: transparent;
    cursor: pointer;
}

#shop-modal .shop-tab-btn:hover {
    color: #1f2937; /* text-gray-800 */
    background-color: #f3f4f6; /* bg-gray-100 */
}

#shop-modal .shop-tab-btn.active {
    color: #1d4ed8; /* text-blue-700 */
    border-bottom-color: #1d4ed8; /* border-blue-700 */
}

/* --- Grid de Itens --- */
#shop-modal .shop-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem; 
}

/* --- Card de Item Individual --- */
#shop-modal .item-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #e5e7eb; /* border-gray-200 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); /* shadow-md */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

#shop-modal .item-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
}

/* --- Visualização do Item (Imagem) --- */
#shop-modal .item-preview {
    width: 100%;
    height: 120px;
    background-color: #f3f4f6; /* bg-gray-100 */
    border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
    cursor: pointer;
    /* Estilos para o container de preview */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    perspective: 500px; /* Para o efeito 3D sutil */
}

/* Estilos específicos para as duas imagens do verso da carta */
#shop-modal .item-preview img {
    height: 100%;
    object-fit: contain; /* Para ver a carta inteira */
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

/* Estilos para a visualização única de mesas */
#shop-modal img.item-preview {
    height: 120px;
    object-fit: cover;
    padding: 0; /* Remove padding quando for uma imagem única */
    border-radius: 0;
    box-shadow: none;
}


/* Efeito 3D sutil nas pré-visualizações das cartas */
#shop-modal .item-preview .card-back-preview-1 {
    transform: rotateY(-8deg) scale(0.95);
}
#shop-modal .item-preview .card-back-preview-2 {
    transform: rotateY(8deg) scale(0.95);
}

#shop-modal .item-card:hover .item-preview .card-back-preview-1,
#shop-modal .item-card:hover .item-preview .card-back-preview-2 {
    transform: rotateY(0deg) scale(1);
}

/* --- Informações do Item (Nome, Preço) --- */
#shop-modal .item-info {
    padding: 0.75rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#shop-modal .item-name {
    font-weight: 600;
    color: #1f2937; /* text-gray-800 */
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

#shop-modal .item-price {
    display: flex;
    align-items: center;
    font-weight: 700;
    color: #4b5563; /* text-gray-600 */
}

#shop-modal .item-price .fa-coins {
    color: #f59e0b; /* text-yellow-500 */
    margin-right: 0.375rem;
}

/* --- Ações do Item (Botões) --- */
#shop-modal .item-actions {
    padding: 0.75rem;
    margin-top: auto;
    border-top: 1px solid #f3f4f6; /* border-gray-100 */
}

#shop-modal .item-btn {
    width: 100%;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem; /* rounded-md */
    font-weight: 700;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#shop-modal .item-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

#shop-modal .buy-btn {
    background-color: #10b981; /* bg-emerald-500 */
}
#shop-modal .buy-btn:not(:disabled):hover {
    background-color: #059669; /* hover:bg-emerald-600 */
}

#shop-modal .equip-btn {
    background-color: #3b82f6; /* bg-blue-500 */
}
#shop-modal .equip-btn:not(:disabled):hover {
    background-color: #2563eb; /* hover:bg-blue-600 */
}

#shop-modal .equipped-btn {
    background-color: #6b7280; /* bg-gray-500 */
    cursor: default;
}

/* --- Selos e Badges --- */
#shop-modal .owned-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background-color: rgba(16, 185, 129, 0.8); /* bg-emerald-500 com opacidade */
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px; /* rounded-full */
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    pointer-events: none;
    z-index: 2;
}

#shop-modal .game-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background-color: rgba(239, 68, 68, 0.85); /* bg-red-500 com opacidade */
    color: white;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 2;
}

/* --- Ícones nos botões --- */
#shop-modal .item-btn i {
    margin-right: 0.5rem;
}


/* 
=================================================================
// ESTILOS PARA O VISUALIZADOR DE CARTAS 3D E IMAGENS 2D
=================================================================
*/

@keyframes floatAnimation {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    25% { transform: rotateX(0deg) rotateY(-10deg); }
    50% { transform: rotateX(10deg) rotateY(0deg); }
    75% { transform: rotateX(0deg) rotateY(10deg); }
    100% { transform: rotateX(0deg) rotateY(0deg); }
}

#card-viewer-card.is-floating {
    animation: floatAnimation 10s ease-in-out infinite;
}

#card-viewer-card.is-paused {
    animation-play-state: paused;
}

#card-viewer-overlay {
    z-index: 2500;
    background-color: rgba(0, 0, 0, 0.85);
    cursor: grab;
}

#card-viewer-overlay:active {
    cursor: grabbing;
}

/* Estilo para o botão de fechar com fundo circular */
#card-viewer-close-btn,
#image-viewer-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2610; /* Aumentado para ficar sobre tudo */
    cursor: pointer;
    
    /* Círculo */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    
    /* Centralização do 'X' */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Estilo do 'X' */
    color: #334155; /* slate-700 */
    font-size: 24px;
    line-height: 1;
    font-weight: bold;
    
    transition: all 0.2s ease;
}

#card-viewer-close-btn:hover,
#image-viewer-close-btn:hover {
    background-color: #ffffff;
    transform: scale(1.1);
}

/* Ajuste específico para o image-viewer que tinha posicionamento inline */
#image-viewer-close-btn {
    top: -15px;
    right: -15px;
}

#card-viewer-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 2000px;
}

#card-viewer-card {
    position: relative;
    width: 57vh;
    height: 80vh;
    max-width: 80vw;
    max-height: 80vh;
    transform-style: preserve-3d;
    transition: transform 0.5s ease-out;
    pointer-events: none;
    transform-origin: center center;
}

#card-viewer-card .card-display {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background-color: #555;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

#image-viewer-overlay {
    z-index: 2600;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 20px;
}

#image-viewer-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

#image-viewer-img {
    display: block;
    max-width: 100%;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.7);
    border: 3px solid white;
}

/* Media queries para dispositivos móveis */
@media (max-width: 768px) and (orientation: portrait) {
    #card-viewer-card {
        width: 80vw;
        height: calc(80vw * 1.4);
        max-height: 75vh;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    #card-viewer-card {
        width: 50vh;
        height: 70vh;
        max-width: 70vw;
    }
}