/*
Theme Name: JOOG-theme
Theme URI: https://joog.com.br
Author: JOOG
Author URI: https://joog.com.br
Description: Tema estilo Link-in-Bio Ultra Dark oficial JOOG.
Version: 2.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: joog-theme
*/

:root {
    --bg-dark: #020617;
    --bg-light: #f0f4f8;
    --text-dark: #ffffff;
    --text-light: #1f2937;
    
    /* Layout Variables */
    --card-bg-dark: #0f172a;
    --card-bg-light: #ffffff;
    --border-dark: #1e293b;
    --border-light: #f3f4f6;

    /* Fallbacks */
    --joog-title: #ffffff;
    --joog-price-new: #22c55e;
    --joog-price-old: #9ca3af;
    --joog-btn-bg: #006FEE;
    --joog-btn-text: #ffffff;
    --joog-badge-bg: #006FEE;
    --joog-badge-text: #ffffff;
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    transition: background-color 0.5s ease;
}

/* Base Theme Backgrounds */
body.theme-dark {
    background-color: var(--bg-dark);
    color: var(--text-dark);
}

body.theme-light {
    background-color: var(--bg-light);
    color: var(--text-light);
}

/* Background Gradients */
.bg-gradient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.theme-dark .bg-gradient {
    background: linear-gradient(to bottom, #0f172a, #020617, #000000);
}

.theme-light .bg-gradient {
    background: linear-gradient(to bottom right, #ffffff, #e6f0ff, #cfe4ff);
}

/* Container */
.container {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Profile Header */
.profile-header {
    text-align: center;
    margin-bottom: 24px;
    padding-top: 32px;
}

.avatar-wrapper {
    width: 96px;
    height: 96px;
    margin: 0 auto 12px;
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(to top right, #006FEE, #38bdf8, #006FEE);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid;
}

.theme-dark .avatar { border-color: var(--bg-dark); }
.theme-light .avatar { border-color: #ffffff; }

.profile-name { font-size: 1.25rem; font-weight: 700; margin: 0; }
.theme-dark .profile-name { color: #ffffff; }
.theme-light .profile-name { color: #006FEE; }

.profile-handle { font-size: 0.75rem; font-weight: 600; margin-top: 4px; }
.theme-dark .profile-handle { color: #38bdf8; }
.theme-light .profile-handle { color: #6b7280; }

/* --- CARDS GLOBAL STRUCTURE --- */
.link-card {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid;
    transition: transform 0.3s, box-shadow 0.3s;
    margin-bottom: 1rem;
    display: block;
    text-decoration: none;
}

.link-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

/* Card Backgrounds based on Theme */
.theme-dark .link-card { 
    background-color: var(--card-bg-dark); 
    border-color: var(--border-dark); 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); 
}
.theme-light .link-card { 
    background-color: var(--card-bg-light); 
    border-color: var(--border-light); 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); 
}

/* Image Containers */
.img-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.theme-dark .img-container { background-color: rgba(2, 6, 23, 0.5); }
.theme-light .img-container { background-color: #fff; }

.img-container img { 
    object-fit: contain; 
}

/* Main Card Specifics */
.main-card .img-container { 
    height: auto;
    width: 100%;
    /* Mobile: Quadrado para garantir visibilidade e espaço */
    aspect-ratio: 1/1; 
    /* Remove padding do container para a etiqueta colar na borda */
    padding: 0; 
}

/* Tablet/Desktop: Fixed Height for consistency */
@media (min-width: 640px) {
    .main-card .img-container { 
        height: 18rem; 
        aspect-ratio: auto;
    }
}

.main-card img { 
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Aplica padding na imagem para ela não colar na borda, mantendo a etiqueta no topo */
    padding: 1rem;
    box-sizing: border-box; 
    filter: drop-shadow(0 10px 8px rgba(0,0,0,0.2)); 
}

.main-card .card-content { 
    padding: 1.5rem; 
    text-align: center;
    /* FIX: Flexbox para permitir align-self no botão */
    display: flex;
    flex-direction: column; 
    /* align-items padrão é stretch, o que é bom para textos, mas o botão controlará sua própria largura */
}
.main-card .card-desc { font-size: 0.875rem; margin-bottom: 1rem; opacity: 0.8; color: inherit; }

/* Small Card Specifics */
.small-card { display: flex; flex-direction: column; height: 100%; }
.small-card .img-container { height: 8rem; padding: 0.5rem; }
.small-card img { width: 100%; height: 100%; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1)); }

/* Card Content Fix for Alignment */
.small-card .card-content { 
    padding: 1rem; 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; /* Agrupa Titulo e Preco no topo */
    gap: 0.5rem; /* Espaço entre os elementos */
    text-align: center; 
}

/* --- GRID LAYOUT (DYNAMIC COLUMNS) --- */
.links-grid {
    display: grid;
    /* Usa a variável definida no Customizer, fallback para 2 */
    grid-template-columns: repeat(var(--grid-cols, 2), 1fr); 
    gap: 0.75rem;
    width: 100%;
}

/* --- UNIVERSAL COLOR RULES (Controlled by Customizer) --- */

/* Title */
.card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    line-height: 1.2;
    color: var(--joog-title) !important;
}
.small-card .card-title {
    font-size: 0.75rem;
    margin-bottom: 0; /* Removido para controlar via gap no container */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Prices */
.price-container { display: flex; flex-direction: column; align-items: center; margin: 0; }
.new-price-row { display: flex; align-items: center; gap: 0.5rem; }

.old-price {
    font-size: 0.875rem;
    text-decoration: line-through;
    color: var(--joog-price-old) !important;
}
.small-card .old-price { font-size: 10px; }

.price {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--joog-price-new) !important;
}
.small-card .price { font-size: 14px; }

/* Badge (Etiqueta) */
.corner-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--joog-badge-bg) !important;
    color: var(--joog-badge-text) !important;
    font-size: 1.25rem; /* Aumentado Significativamente */
    font-weight: 900;
    padding: 8px 20px; /* Mais preenchimento */
    border-radius: 0 0 0 16px;
    z-index: 10;
    box-shadow: -2px 2px 4px rgba(0,0,0,0.2);
    /* Garante que o texto não corte */
    white-space: nowrap;
}

/* Badge Ajuste para Small Card (AUMENTADO) */
.small-card .corner-badge {
    font-size: 14px !important; /* Força 14px (maior que antes) */
    padding: 6px 14px !important; /* Mais padding */
    font-weight: 800;
}


/* Button */
.btn-buy {
    background-color: var(--joog-btn-bg) !important;
    color: var(--joog-btn-text) !important;
    
    /* Centralização Perfeita Flex */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1; /* Garante que o texto não desloque verticalmente */

    width: 100%;
    padding: 1rem;
    border-radius: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
    text-decoration: none;
    transition: filter 0.2s;
}

/* Small Card Button Specific - Force to bottom */
.small-card .btn-buy { 
    padding: 0.75rem 0.5rem; 
    font-size: 0.75rem; 
    border-radius: 0.5rem;
    margin-top: auto; /* EMPURRA O BOTÃO PARA BAIXO */
}

.btn-buy:hover { filter: brightness(1.1); }


/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 50;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    padding: 0.5rem;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.theme-toggle:hover { background: rgba(255,255,255,0.1); }

/* Footer */
footer { margin-top: 2rem; text-align: center; padding-bottom: 2rem; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; }