/* =========================================================================
   CSS NORMAL PARA LAYOUT DAS COLUNAS, FEED E LOJA (SUBSTITUINDO TAILWIND)
   ========================================================================= */
   
/* Classes Utilitárias Globais */
.ead-invisible-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.ead-invisible-scrollbar::-webkit-scrollbar { display: none; }

/* Main Container */
.ead-layout-main {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    margin-top: 0.75rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    position: relative !important;
    z-index: 20 !important;
}
@media (min-width: 768px) {
    .ead-layout-main { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
}
@media (min-width: 1024px) {
    .ead-layout-main { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
}
@media (min-width: 1280px) {
    .ead-layout-main { 
        max-width: 100% !important; /* Expande para ocupar o espaço total na horizontal em telas grandes */
        padding-left: 1.5rem !important; 
        padding-right: 1.5rem !important; 
    }
}

/* Wrap flex md:flex-row */
.ead-layout-wrapper {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: flex-start !important;
    margin-top: 0 !important;
}
@media (min-width: 768px) {
    .ead-layout-wrapper { flex-direction: row !important; }
}

/* ===============================
   COLUNA DA ESQUERDA
   =============================== */
.ead-col-left {
    height: 100%;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    flex-shrink: 0;
    background-color: #ffffff;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    z-index: 9995 !important;
    transition: transform 0.3s ease;
    /* Por padrão (mobile e tablet), ela fica ESCONDIDA */
    transform: translateX(-100%);
    display: flex;
    flex-direction: column;
    padding-bottom: 6rem;
    border-right: 1px solid #e5e7eb;
}
.dark .ead-col-left { background-color: #111827; border-color: #1f2937; }

@media (min-width: 640px) { .ead-col-left { width: 320px; } }

/* Apenas a partir de 1024px a coluna gruda no layout e SEMPRE fica visível */
@media (min-width: 1024px) { 
    .ead-col-left { 
        position: sticky; 
        top: 8px; 
        width: 280px; 
        max-height: calc(100vh - 16px) !important; /* Limita a altura para rolar de forma independente */
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); 
        z-index: 10 !important; 
        transform: translateX(0) !important; /* Força ficar visível */
        border-radius: 0.75rem; /* Mantido original */
        border: 1px solid #e5e7eb; 
        padding-bottom: 1rem; 
    }
    .dark .ead-col-left { border-color: #1f2937; }
}
@media (min-width: 1280px) { .ead-col-left { width: 320px; } }

/* Toggle visibility (quando aperta no botão menu no mobile) */
.ead-col-left.open { transform: translateX(0); }

.ead-col-left-close { width: 100%; display: flex; justify-content: flex-end; padding: 1rem 1rem 0 1rem; }
@media (min-width: 1024px) { .ead-col-left-close { display: none; } }
.ead-col-left-close-btn { color: #6b7280; background-color: #f3f4f6; width: 2rem; height: 2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; }

/* Bloco do Perfil */
.ead-profile-block { display: flex; flex-direction: column; align-items: center; padding: 1.5rem; padding-top: 0.5rem; text-align: center; position: relative; border-bottom: 1px solid #f3f4f6; background-color: #ffffff; }
.dark .ead-profile-block { background-color: transparent; border-bottom-color: #1f2937; }
.ead-profile-img-wrap { position: relative; margin-bottom: 0.75rem; display: flex; justify-content: center; margin-top: 1.5rem; }
.ead-profile-img-wrap { 
    position: relative; 
    margin-bottom: 0.75rem; 
    display: flex; 
    justify-content: center; 
    align-items: center; /* Garante alinhamento vertical ao centro */
    margin-top: 1.5rem; 
    z-index: 10;
}

.ead-profile-img-border { 
    padding: 4px; /* Espessura uniforme da borda gradiente */
    background: linear-gradient(to top right, #fb923c, #ef4444); 
    border-radius: 9999px; 
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); 
    display: flex;        /* Transforma em flex para centralizar o conteúdo interno perfeitamente */
    align-items: center; 
    justify-content: center;
    line-height: 0;      /* Mata qualquer espaçamento fantasma de linha */
}

.ead-profile-img { 
    width: 8rem; 
    height: 8rem; 
    border-radius: 9999px; 
    object-fit: cover; 
    border: 4px solid #ffffff; 
    cursor: pointer; 
    display: block;      /* Remove o comportamento de texto inline que joga a imagem para baixo */
    margin: 0;
}

.dark .ead-profile-img { 
    border-color: #111827; 
}
.ead-profile-title { font-size: 1.25rem; font-weight: 900; color: #111827; letter-spacing: -0.025em; line-height: 1.25; margin: 0; }
.dark .ead-profile-title { color: #ffffff; }
.ead-profile-desc { font-size: 13px; color: #6b7280; margin-top: 0.25rem; font-weight: 500; width: 100%; padding: 0 0.5rem; line-height: 1.25; margin-bottom: 0; }
.dark .ead-profile-desc { color: #9ca3af; }

.ead-profile-divider { width: 100%; height: 1px; background-color: #e5e7eb; margin: 1rem 0; }
.dark .ead-profile-divider { background-color: #374151; }

.ead-profile-info { display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem; width: 100%; text-align: left; }
.ead-profile-info-row { width: 100%; }
.ead-profile-info-lbl { font-size: 11px; font-weight: 700; color: #111827; text-transform: uppercase; letter-spacing: 0.1em; margin: 0; display: flex; align-items: center; gap: 0.25rem; }
.dark .ead-profile-info-lbl { color: #ffffff; }
.ead-profile-info-val { font-size: 12px; color: #374151; margin-top: 0.125rem; margin-bottom: 0; display: block; }
.dark .ead-profile-info-val { color: #d1d5db; }
.ead-profile-info-link { font-size: 12px; color: #374151; margin-top: 0.125rem; text-decoration: none; display: block; }
.dark .ead-profile-info-link { color: #d1d5db; }
.ead-profile-info-link:hover { text-decoration: underline; }

/* Resumo Desempenho */
.ead-stats-block { padding: 1rem; border-bottom: 1px solid #f3f4f6; background-color: #ffffff; }
.dark .ead-stats-block { background-color: transparent; border-bottom-color: #1f2937; }
.ead-stats-title { font-size: 12px; font-weight: 900; color: #1f2937; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem; margin-top: 0; text-align: center; }
.dark .ead-stats-title { color: #e5e7eb; }
.ead-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.ead-stat-card { background-color: #f9fafb; border-radius: 0.5rem; padding: 0.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); transition: box-shadow 0.2s; }
.dark .ead-stat-card { background-color: #1f2937; border-color: #374151; }
.ead-stat-card:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.ead-stat-icon { font-size: 15px; margin-bottom: 0.25rem; }
.ead-stat-val { font-weight: 900; font-size: 13px; color: #111827; }
.dark .ead-stat-val { color: #ffffff; }
.ead-stat-lbl { font-size: 9px; font-weight: 700; color: #6b7280; text-transform: uppercase; margin-top: 0.125rem; text-align: center; line-height: 1.25; }

/* Galeria / Feed Fotos */
.ead-gal-block { padding: 1rem; border-bottom: 1px solid #f3f4f6; background-color: #ffffff; }
.dark .ead-gal-block { background-color: transparent; border-bottom-color: #1f2937; }
.ead-feed-block { padding: 1rem; background-color: #ffffff; }
.dark .ead-feed-block { background-color: #111827; }

.ead-gal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.875rem; }
.ead-gal-title { font-size: 12px; font-weight: 900; color: #1f2937; text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.dark .ead-gal-title { color: #e5e7eb; }
.ead-gal-link { font-size: 10px; color: #3b82f6; font-weight: 700; background: none; border: none; cursor: pointer; padding: 0; }
.ead-gal-link:hover { text-decoration: underline; }

.ead-gal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; width: 100%; }
.ead-gal-loading { grid-column: span 2 / span 2; text-align: center; font-size: 11px; color: #9ca3af; padding: 1rem 0; }
.ead-gal-empty { grid-column: span 2 / span 2; text-align: center; font-size: 11px; color: #9ca3af; padding: 1rem 0; border: 1px dashed #d1d5db; border-radius: 0.5rem; }
.dark .ead-gal-empty { border-color: #374151; }

/* Cards JS (Galeria e Feed) */
.ead-gal-card { position: relative; border-radius: 0.75rem; overflow: hidden; cursor: pointer; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); border: 1px solid #e5e7eb; height: 10rem; }
.dark .ead-gal-card { border-color: #374151; }
@media (min-width: 640px) { .ead-gal-card { height: 12rem; } }
@media (min-width: 768px) { .ead-gal-card { height: 10rem; } }
@media (min-width: 1280px) { .ead-gal-card { height: 12rem; } }

.ead-feed-card { position: relative; border-radius: 0.75rem; overflow: hidden; cursor: pointer; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); border: 1px solid #e5e7eb; height: 8rem; display: flex; align-items: center; justify-content: center; background-color: #000000; }
.dark .ead-feed-card { border-color: #374151; }
@media (min-width: 640px) { .ead-feed-card { height: 10rem; } }

.ead-badge-icon { position: absolute; top: 0.375rem; left: 0.375rem; z-index: 10; background-color: rgba(0,0,0,0.6); color: #ffffff; border-radius: 9999px; width: 1.25rem; height: 1.25rem; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.2); }
.ead-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.ead-gal-card:hover .ead-card-img, .ead-feed-card:hover .ead-card-img { transform: scale(1.05); }

.ead-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent, transparent); transition: opacity 0.3s; opacity: 0.8; }
.ead-overlay-feed { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent, transparent); transition: opacity 0.3s; opacity: 1; }
@media (min-width: 768px) { 
    .ead-overlay { opacity: 0; } 
    .ead-overlay-feed { opacity: 0; }
}
.ead-gal-card:hover .ead-overlay { opacity: 1; }
.ead-feed-card:hover .ead-overlay-feed { opacity: 1; }

.ead-date-wrap { position: absolute; bottom: 0.375rem; left: 0.375rem; right: 0.375rem; text-align: center; display: flex; justify-content: center; transition: opacity 0.3s; opacity: 1; }
.ead-date-wrap-feed { position: absolute; bottom: 0.5rem; left: 0; right: 0; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.3s; opacity: 1; }
@media (min-width: 768px) { 
    .ead-date-wrap { opacity: 0; }
    .ead-date-wrap-feed { opacity: 0; }
}
.ead-gal-card:hover .ead-date-wrap { opacity: 1; }
.ead-feed-card:hover .ead-date-wrap-feed { opacity: 1; }

.ead-date-badge { font-size: 8px; font-weight: 700; color: #ffffff; background-color: rgba(0,0,0,0.7); padding: 0.25rem 0.5rem; border-radius: 0.25rem; backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; gap: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid rgba(255,255,255,0.1); }
.ead-date-badge-feed { font-size: 8px; font-weight: 700; color: #e5e7eb; background-color: rgba(0,0,0,0.6); padding: 0.125rem 0.5rem; border-radius: 0.375rem; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; gap: 0.25rem; white-space: nowrap; }

/* ===============================
   COLUNA DA DIREITA (LOJA)
   =============================== */
.ead-col-right {
    display: flex;
    flex-direction: column;
    width: 250px;
    flex-shrink: 0;
    position: sticky;
    top: 8px;
    height: calc(100vh - 16px); /* Limita a altura proporcional ao viewport */
    max-height: calc(100vh - 16px);
    overflow-y: auto; /* Rolagem independente */
    overscroll-behavior: contain;
    order: 3;
    margin-top: 0;
}
@media (max-width: 767px) { .ead-col-right { display: none !important; } }
@media (min-width: 1024px) { .ead-col-right { width: 300px; } }
@media (min-width: 1280px) { .ead-col-right { width: 320px; } }

.ead-col-right-box { background-color: #ffffff; border-radius: 0.75rem; /* Mantido original */ box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); border: 1px solid #e5e7eb; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.dark .ead-col-right-box { background-color: #111827; border-color: #1f2937; }

.ead-store-header { padding: 1rem; border-bottom: 1px solid #f3f4f6; background-color: #ffffff; flex-shrink: 0; }
.dark .ead-store-header { background-color: #111827; border-bottom-color: #374151; }

.ead-store-btn-main { background: #0f172a; border-radius: 12px; padding: 12px; margin-bottom: 12px; border: 1px solid rgba(255, 69, 0, 0.1); cursor: pointer; transition: transform 0.2s; }
.ead-store-btn-main:hover { transform: scale(1.02); }
.ead-store-btn-text { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0; font-weight: 900; color: #ffffff; font-size: 0.875rem; text-transform: uppercase; }

.ead-search-wrap { position: relative; width: 100%; }
.ead-search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 0.75rem; }
.ead-search-input { width: 100%; padding: 0.5rem 0.75rem 0.5rem 2.25rem; border-radius: 9999px; border: 1px solid #e5e7eb; background-color: #f9fafb; font-size: 0.75rem; outline: none; transition: border-color 0.2s; color: #111827; box-sizing: border-box; }
.ead-search-input:focus { border-color: #f97316; }

.ead-store-list { display: flex; flex-direction: column; gap: 1rem; flex-grow: 1; overflow-y: auto; padding: 1rem; }

/* JS Loja Cards */
.ead-store-item-wrap { width: 100% !important; flex-shrink: 0 !important; margin-bottom: 1rem !important; }
.ead-store-item { position: relative !important; background-color: #ffffff !important; border-radius: 0.75rem !important; border: 1px solid #e5e7eb !important; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05) !important; transition: box-shadow 0.2s !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; }
.dark .ead-store-item { background-color: #1f2937 !important; border-color: #374151 !important; }
.ead-store-item:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1) !important; }

.ead-store-cover-wrap { width: 100% !important; height: 5rem !important; position: relative !important; overflow: hidden !important; background-color: #f3f4f6 !important; }
.dark .ead-store-cover-wrap { background-color: #111827 !important; }
@media (min-width: 768px) { .ead-store-cover-wrap { height: 6rem !important; } }
.ead-store-cover { width: 100% !important; height: 100% !important; object-fit: cover !important; position: absolute !important; inset: 0 !important; }
.ead-store-cover-overlay { position: absolute !important; inset: 0 !important; background-color: rgba(0,0,0,0.2) !important; }

.ead-store-content { padding: 0 1rem 1rem 1rem !important; position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; }
.ead-store-avatar { width: 3.5rem !important; height: 3.5rem !important; border-radius: 9999px !important; object-fit: cover !important; border: 2px solid #ffffff !important; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05) !important; margin-top: -1.75rem !important; margin-bottom: 0.5rem !important; background-color: #ffffff !important; z-index: 10 !important; position: relative !important; }
.dark .ead-store-avatar { border-color: #1f2937 !important; }
@media (min-width: 768px) { .ead-store-avatar { width: 4rem !important; height: 4rem !important; margin-top: -2rem !important; } }

.ead-store-title { font-size: 14px !important; font-weight: 900 !important; color: #1f2937 !important; line-height: 1.25 !important; margin-bottom: 0.75rem !important; width: 100% !important; margin-top: 0 !important; }
.dark .ead-store-title { color: #f3f4f6 !important; }
@media (min-width: 768px) { .ead-store-title { font-size: 15px !important; } }

.ead-store-details { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 0.375rem !important; }
.ead-store-row { display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 10px !important; background-color: #f9fafb !important; padding: 0.375rem 0.625rem !important; border-radius: 0.25rem !important; }
.dark .ead-store-row { background-color: rgba(55, 65, 81, 0.5) !important; }

.ead-store-lbl { color: #6b7280 !important; font-weight: 600 !important; }
.ead-store-val { font-weight: 700 !important; color: #374151 !important; }
.dark .ead-store-val { color: #e5e7eb !important; }

.ead-store-action-btn { width: 100% !important; margin-top: 0.75rem !important; background: linear-gradient(to right, #2563eb, #1d4ed8) !important; color: #ffffff !important; font-size: 11px !important; font-weight: 700 !important; padding: 0.5rem !important; border-radius: 0.5rem !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 0.25rem !important; transition: all 0.2s !important; border: none !important; cursor: pointer !important; }
.ead-store-action-btn:hover { background: linear-gradient(to right, #1d4ed8, #1e40af) !important; }

/* =========================================================================
   BOTÃO MOBILE (MENU ESQUERDO)
   ========================================================================= */
.ead-mobile-menu-btn {
    display: flex !important;
    position: fixed !important;
    bottom: 6rem !important;
    right: 1rem !important;
    z-index: 990 !important;
    background: linear-gradient(to right, #f97316, #dc2626) !important;
    color: #ffffff !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(239,68,68,0.5) !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s !important;
    border: 1px solid #ffffff !important;
    cursor: pointer !important;
}
.ead-mobile-menu-btn:active { transform: scale(0.95) !important; }
@media (min-width: 1024px) {
    .ead-mobile-menu-btn { display: none !important; }
}