/* ==========================================================================
   RG ARTES — STYLE.CSS V2 ORGANIZADO
   ==========================================================================
   Estrutura:
   01. Fundação
   02. Navegação
   03. Vitrine
   04. Produtos
   05. Modais da vitrine
   06. Componentes gerais
   07. Seleção e compartilhamento
   08. Painel administrativo
   09. Animações e notificações
   10. Categorias premium
   11. Modais claros e indicação
   12. Cadastro de produtos

   A ordem original da cascata foi preservada para não alterar o visual.
   As declarações foram reformatadas de maneira compacta e os comentários
   provisórios foram substituídos por títulos estáveis de manutenção.
   ========================================================================== */


/* ==========================================================================
   BLOCO 01 — FUNDAÇÃO: VARIÁVEIS, RESET E COMPORTAMENTO GLOBAL
   ========================================================================== */

:root {
    --primary: #0ea5e9; --primary-dark: #0284c7; --whats: #25D366; --accent: #f472b6; --bg: #ffffff; --card-bg: #f8fafc; --text: #1e293b;
    --text-muted: #64748b; --border: #e2e8f0; --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --cart-glass-bg: rgba(30, 41, 59, 0.6);
    --cart-text-color: #ffffff;
}

[x-cloak] { display: none !important; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    font-family: "Segoe UI", sans-serif; background-color: var(--bg); color: var(--text); margin: 0; padding-bottom: 40px;
    transition: background-color 0.3s, color 0.3s; scroll-behavior: smooth;
}

#products-container { transition: opacity 0.3s ease-in-out; opacity: 1; }


/* ==========================================================================
   BLOCO 02 — NAVEGAÇÃO: MENU LATERAL, CABEÇALHO E BARRA MOBILE
   ========================================================================== */

.header-actions { display: flex; gap: 10px; align-items: center; }

.mobile-header { display: none; }

.sidebar {
    position: fixed; top: 0; left: 0; width: 260px; height: 100vh; height: 100dvh; background: var(--card-bg); border-right: 1px solid var(--border);
    z-index: 2000; display: flex; flex-direction: column; box-shadow: 4px 0 24px rgba(0,0,0,0.04);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; scrollbar-width: none;
}

.sidebar::-webkit-scrollbar { display: none; }

.sidebar-header { padding: 25px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }

.btn-close-sidebar { background: none; border: none; font-size: 1.5rem; color: var(--text-muted); cursor: pointer; display: none; }

.sidebar-nav { flex-grow: 1; padding: 20px 15px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; scrollbar-width: none; }

.sidebar-nav::-webkit-scrollbar { display: none; }

.nav-item {
    display: flex; align-items: center; gap: 15px; padding: 14px 18px; border-radius: 12px; color: var(--text-muted); text-decoration: none;
    font-weight: 600; transition: all 0.2s ease;
}

.nav-item:hover { background: rgba(14, 165, 233, 0.1); color: var(--primary); }

.nav-icon { width: 24px; display: flex; justify-content: center; font-size: 1.2rem; }

.destak-ia { background: rgba(244, 114, 182, 0.08); color: var(--accent); }

.destak-ia:hover { background: var(--accent); color: white; }

.premium-btn { margin-top: auto; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white !important; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); }

.premium-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); filter: brightness(1.1); }

.sidebar-footer { padding: 20px; border-top: 1px solid var(--border); background: var(--bg); }

.user-profile-btn {
    display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); cursor: pointer; transition: 0.2s;
    background: var(--card-bg);
}

.user-profile-btn:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15); }

.user-avatar {
    width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}

.user-info { display: flex; flex-direction: column; }

.user-name { font-weight: 700; font-size: 0.9rem; color: var(--text); }

.user-status { font-size: 0.75rem; color: var(--warning); font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; }

@media (min-width: 1025px) {
    body { padding-left: 260px !important; }

    #main-content-wrapper { margin-left: 0 !important; padding: 20px 3% !important; }

    #sidebar-overlay { display: none !important; }

    .mobile-bottom-bar { display: none !important; }
}

@media (max-width: 1024px) {
    .mobile-bottom-bar { display: none; }

    .sidebar { transform: translateX(-100%); width: 280px; }

    .sidebar.open { transform: translateX(0) !important; box-shadow: 15px 0 30px rgba(0,0,0,0.5); }

    .btn-close-sidebar { display: block; }

    #main-content-wrapper { margin-left: 0; padding-top: 0; }

    .mobile-header {
        display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border);
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }

    .btn-menu-mobile { background: none; border: none; font-size: 1.5rem; color: var(--text); cursor: pointer; padding: 5px; }

    .mobile-brand { flex-grow: 1; justify-content: center; margin-left: -20px; }

    #sidebar-overlay {
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(30, 41, 59, 0.6); backdrop-filter: blur(3px); z-index: 1999;
        opacity: 0; pointer-events: none; transition: opacity 0.3s;
    }

    #sidebar-overlay.active { opacity: 1; pointer-events: auto; }
}

.brand { font-size: 1.4rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }

.brand-logo-img { height: 35px; width: auto; object-fit: contain; display: none; border-radius: 6px; }

.brand i { color: var(--primary); }

.brand span { color: var(--primary); }

.btn-faq-anim {
    height: 42px; border-radius: 21px; display: flex; align-items: center; justify-content: flex-start; cursor: pointer; overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); white-space: nowrap; background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; padding: 0; width: 42px;
    animation: morphFaq 6s ease-in-out 2 forwards;
}

.btn-faq-anim:hover { animation: none; width: 140px; background: #15803d; color: white; border-color: #15803d; }

.btn-faq-anim:hover .btn-faq-text { opacity: 1 !important; animation: none !important; }

.btn-faq-content { display: flex; align-items: center; padding: 0 13px; gap: 8px; }

.btn-faq-text { font-weight: 600; font-size: 0.85rem; opacity: 0; transition: opacity 0.3s; }

@keyframes morphFaq {
    0%, 10% { width: 42px; background: #f0fdf4; color: #15803d; }

    20%, 80% { width: 140px; background: #15803d; color: white; }

    90%, 100% { width: 42px; background: #f0fdf4; color: #15803d; }
}

@keyframes fadeText {
    0%, 10% { opacity: 0; }

    25%, 75% { opacity: 1; }

    90%, 100% { opacity: 0; }
}

.btn-faq-anim .btn-faq-text { animation: fadeText 6s ease-in-out 2 forwards; }

.admin-icon-wrap {
    position: relative; cursor: pointer; font-size: 1.2rem; color: var(--text); transition: transform 0.2s; background: var(--card-bg); width: 42px;
    height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: 1px solid var(--border);
}

.admin-icon-wrap:hover { transform: scale(1.1); filter: brightness(0.95); background: var(--primary); color: white; }


/* ==========================================================================
   BLOCO 03 — VITRINE: BANNERS, BUSCA E CATEGORIAS
   ========================================================================== */

.banner-container { width: 100%; max-width: 1200px; margin: 15px auto 0; padding: 0 15px; display: none; }

.banner-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; scrollbar-width: none; border-radius: 15px; }

.banner-scroll::-webkit-scrollbar { display: none; }

.banner-item { min-width: 100%; scroll-snap-align: center; position: relative; display: block; }

.banner-img {
    width: 100%; height: auto; max-height: 300px; object-fit: cover; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid var(--border); display: block;
}

.hero { text-align: center; padding: 25px 15px; margin-bottom: 5px; }

.hero h1 { margin: 0 0 8px 0; font-size: 1.8rem; letter-spacing: -1px; color: var(--text); }

.hero p { color: var(--text-muted); margin: 0; font-size: 0.95rem; max-width: 600px; margin: 0 auto; font-weight: 500; line-height: 1.4; }

.mobile-header { display: none !important; }

.mobile-bottom-bar {
    display: flex; justify-content: space-around; align-items: center; position: fixed; bottom: 0; left: 0; width: 100%;
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); border-top: 1px solid var(--border); z-index: 2000; padding: 10px 5px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -5px 25px rgba(0,0,0,0.05);
}

.bottom-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--text-muted); text-decoration: none;
    font-size: 0.65rem; font-weight: 700; flex: 1; transition: all 0.2s;
}

.bottom-tab i { font-size: 1.2rem; }

.bottom-tab:hover, .bottom-tab:active { color: var(--primary); }

.center-tab {
    flex: 0 0 auto; width: 55px; height: 55px; background: linear-gradient(135deg, var(--primary) 0%, #0284c7 100%); color: white !important;
    border-radius: 50%; transform: translateY(-20px); box-shadow: 0 8px 20px rgba(14, 165, 233, 0.4); border: 4px solid var(--bg);
}

.center-tab i { font-size: 1.4rem; }

.center-tab:active { transform: translateY(-20px) scale(0.95); }

body { padding-bottom: 90px !important; }

.search-sidebar-wrapper { position: relative; width: 100%; }

.search-input-sidebar {
    width: 100%; padding: 12px 15px 12px 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text);
    font-size: 0.9rem; font-weight: 600; transition: all 0.3s ease; outline: none; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); box-sizing: border-box;
}

.search-input-sidebar:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15); background: #ffffff; }

.search-icon-sidebar { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 1rem; pointer-events: none; }

.category-menu { display: none !important; }

.category-menu::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
    .category-menu { display: flex; flex-wrap: wrap; overflow-x: visible; justify-content: center; padding: 5px 0; }
}

.cat-btn {
    background: var(--card-bg); color: var(--text-muted); border: 1px solid var(--border); width: 150px; height: 48px; border-radius: 12px;
    padding: 0 10px; cursor: pointer; font-weight: 600; transition: 0.3s; font-size: 0.8rem; display: flex; align-items: center; justify-content: center;
    gap: 6px; white-space: normal; text-align: center; line-height: 1.1; box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.cat-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }

.cat-btn.active { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }

.smart-filter-btn.active { background: var(--accent) !important; color: white !important; border-color: var(--accent) !important; }

.btn-special {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; border: 1px solid transparent;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2); font-weight: 700;
}

.btn-special:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4); filter: brightness(1.1); color: white; border-color: transparent; }

.btn-special.active { border: 1px solid #78350f !important; filter: brightness(1.1); }

.cat-dropdown-content {
    display: none; position: fixed; background-color: var(--bg); min-width: 220px; box-shadow: 0 10px 40px rgba(0,0,0,0.25); border-radius: 16px;
    padding: 8px 0; z-index: 9999; border: 1px solid var(--border); animation: fadeInMenu 0.2s; max-height: 60vh; overflow-y: auto; scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--card-bg);
}

@keyframes fadeInMenu {
    from { opacity: 0; transform: translateY(-10px); }

    to { opacity: 1; transform: translateY(0); }
}

.cat-dropdown-content.show { display: block; }

.cat-dropdown-item {
    display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; color: var(--text); text-decoration: none; font-size: 0.95rem;
    cursor: pointer; transition: 0.2s; border-bottom: 1px solid rgba(0,0,0,0.03);
}

.cat-dropdown-item:hover { background-color: #fef3c7; color: #d97706; padding-left: 25px; font-weight: bold; }

.cat-dropdown-item.active { color: #d97706; font-weight: bold; background: #fffbeb; }


/* ==========================================================================
   BLOCO 04 — PRODUTOS: GRADE, CARTÕES, BOTÕES E AÇÕES FLUTUANTES
   ========================================================================== */

.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

.products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 40px; }

@media (min-width: 600px) {
    .products-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

@media (min-width: 1024px) {
    .products-grid { grid-template-columns: repeat(4, 1fr); gap: 25px; }
}

.product-card {
    background: var(--card-bg); border-radius: 15px; overflow: hidden; border: 1px solid var(--border); transition: all 0.3s ease; display: flex;
    flex-direction: column; position: relative; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.product-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); border-color: var(--primary); }

.card-img-top { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; cursor: pointer; transition: opacity 0.5s; background: #f1f5f9; }

.card-img-top:hover { filter: brightness(1.05); }

.lazy-blur { filter: blur(10px); opacity: 0.6; transition: filter 0.3s, opacity 0.3s; }

.img-placeholder-spin { background-image: url("data:image/svg+xml,..."); background-repeat: no-repeat; background-position: center; background-size: 30px; }

.card-body { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }

.card-title {
    font-size: 1rem; font-weight: 700; margin: 0 0 8px 0; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.4em;
}

.card-desc {
    font-size: 0.8rem; color: var(--text-muted); margin-bottom: 12px; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

.btn-buy {
    background: var(--whats); color: white; border: none; padding: 10px; border-radius: 8px; font-weight: bold; cursor: pointer; width: 100%;
    transition: 0.2s; display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.2); position: relative; overflow: hidden; text-decoration: none !important;
}

.btn-buy:hover { filter: brightness(0.95); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(37, 211, 102, 0.3); }

.btn-add { background: var(--primary); color: white; border: none; padding: 10px 15px; border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.2s; }

.btn-add:hover { filter: brightness(0.9); }

.floating-actions-container { position: fixed; bottom: 15px; right: 15px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

.btn-back-to-top {
    width: 40px; height: 40px; background: rgba(30, 41, 59, 0.8); color: white; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transition: all 0.3s; backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.btn-back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

.floating-actions-container {
    position: fixed; bottom: 5px; right: 5px; z-index: 900; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px;
    pointer-events: none;
}

.floating-actions-container > * { pointer-events: auto; }

#btn-smart-filter { position: relative; overflow: hidden; }

#btn-smart-filter::after {
    content: ""; position: absolute; top: 0; left: -150%; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%); transform: skewX(-25deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { left: -150%; }

    20% { left: 150%; }

    100% { left: 150%; }
}

.btn-back-to-top { position: static; margin-bottom: 5px; transform: translateY(0); transition: opacity 0.3s; opacity: 0; pointer-events: none; }

.btn-back-to-top.visible { opacity: 1; pointer-events: auto; }

.btn-back-to-top:hover { background: var(--primary); transform: translateY(-3px); }


/* ==========================================================================
   BLOCO 05 — MODAIS DA VITRINE: DETALHES, CARROSSEL E FORMULÁRIOS
   ========================================================================== */

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center;
    z-index: 2000; backdrop-filter: blur(5px); opacity: 0; transition: opacity 0.3s;
}

.modal-overlay.active { opacity: 1; }

.modal-content {
    background: var(--bg); padding: 0; border-radius: 24px; width: 95%; max-width: 900px; position: relative; max-height: 90vh; overflow-y: auto;
    border: 1px solid var(--border); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column;
}

@media (min-width: 768px) {
    #modal-details .modal-content { flex-direction: row; overflow: hidden; }

    .modal-media { width: 65%; background: #f1f5f9; position: relative; height: 600px; display: flex; align-items: center; justify-content: center; }

    .modal-info { width: 35%; padding: 40px; overflow-y: auto; }
}

@media (max-width: 767px) {
    .modal-media { width: 100%; aspect-ratio: 1/1; background: #f1f5f9; position: relative; }

    .modal-info { padding: 25px; }
}

.close-modal {
    position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.1); border: none; color: #64748b; width: 35px; height: 35px; border-radius: 50%;
    cursor: pointer; z-index: 50; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; transition: 0.2s;
}

.close-modal:hover { background: var(--danger); color: white; }

.carousel-scroll-area {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}

.carousel-scroll-area::-webkit-scrollbar { display: none; }

.carousel-img-snap { flex: 0 0 100%; min-width: 100%; max-width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; user-select: none; display: block; }

.carousel-btn {
    position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: white !important; border: none; width: 45px;
    height: 45px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; z-index: 20; backdrop-filter: blur(4px); display: flex; align-items: center;
    justify-content: center; transition: 0.3s;
}

.carousel-btn:hover { background: rgba(0,0,0,0.8); }

.prev-btn { left: 15px; }

.next-btn { right: 15px; }

.carousel-dots { position: absolute; bottom: 15px; left: 0; width: 100%; text-align: center; z-index: 10; pointer-events: none; }

.dot {
    width: 8px; height: 8px; background: rgba(255,255,255,0.5); border-radius: 50%; display: inline-block; margin: 0 4px; transition: 0.3s;
    cursor: pointer; pointer-events: auto;
}

.dot.active { background: var(--primary) !important; opacity: 1 !important; transform: scale(1.3); }

.cat-grid-modal { display: grid; gap: 10px; padding: 10px 0; background: transparent; grid-template-columns: repeat(2, 1fr); max-height: 60vh; overflow-y: auto; }

@media (min-width: 768px) {
    .cat-grid-modal { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .cat-grid-modal { grid-template-columns: repeat(4, 1fr); }
}

.cat-card-modal {
    background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2); text-align: center;
    cursor: pointer; transition: 0.2s; color: inherit; font-weight: bold; font-size: 0.9rem;
}

.cat-card-modal:hover { border-color: var(--primary); background: var(--primary); color: white; }

.cat-card-modal.special { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; border: none; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); }

.cat-card-modal.special:hover { transform: translateY(-2px); filter: brightness(1.1); }

.glass-modal-container {
    padding: 30px; max-width: 500px; margin: auto; background: var(--cart-glass-bg); backdrop-filter: blur(16px); color: var(--cart-text-color);
    border-radius: 24px; height: auto; max-height: 85vh; position: relative; border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); overflow-y: auto;
}

.glass-input {
    width: 100%; padding: 12px; margin-bottom: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.15);
    color: inherit; outline: none; font-size: 0.95rem;
}

.glass-input::placeholder { color: inherit; opacity: 0.7; }

.glass-modal-container h2,
.glass-modal-container h3,
.glass-modal-container p,
.glass-modal-container small,
.glass-modal-container i:not(.btn-buy i),
.glass-modal-container .item-list-row,
.glass-modal-container .item-list-row div {
    color: inherit !important;
}

.glass-modal-container .item-list-row { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.2) !important; }

.faq-glass-list { margin-top: 20px; }

.faq-glass-item { border-bottom: 1px solid rgba(255,255,255,0.2); padding: 15px 0; }

.faq-glass-item:last-child { border-bottom: none; }

.faq-glass-q { font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1rem; color: inherit; }

.faq-glass-q i { transition: transform 0.3s; font-size: 0.8rem; opacity: 0.7; }

.faq-glass-a {
    max-height: 0; overflow: hidden; color: inherit; opacity: 0; line-height: 1.5; font-size: 0.9rem; margin-top: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-glass-a.open { max-height: 500px; margin-top: 10px; opacity: 0.85; }


/* ==========================================================================
   BLOCO 06 — RODAPÉ, FEEDBACK, LOGIN E COMPONENTES GERAIS
   ========================================================================== */

.footer-socials { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; }

.social-link {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--card-bg);
    color: var(--text-muted); border: 1px solid var(--border); font-size: 1.2rem; transition: 0.3s;
}

.social-link:hover { background: var(--primary); color: white; transform: translateY(-3px); border-color: var(--primary); }

#admin-panel { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0f172a; z-index: 5000; overflow-y: auto; color: #f8fafc; }

.admin-container { max-width: 1200px; margin: 0 auto; padding: 20px; }

.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #334155; }

.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 30px; }

.admin-card-btn {
    background: #1e293b; padding: 25px; border-radius: 16px; border: 1px solid #334155; cursor: pointer; transition: 0.3s; display: flex;
    flex-direction: column; align-items: flex-start; gap: 10px;
}

.admin-card-btn:hover { transform: translateY(-5px); border-color: var(--primary); }

.admin-card-btn i { font-size: 2rem; color: var(--primary); }

.admin-card-btn h3 { margin: 0; font-size: 1.1rem; color: white; }

.admin-section { display: none; animation: fadeIn 0.3s; }

.admin-section.active { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }

    to { opacity: 1; transform: translateY(0); }
}

.item-list-row {
    display: flex; justify-content: space-between; align-items: center; background: #1e293b; padding: 15px; border-radius: 10px; margin-bottom: 10px;
    border: 1px solid #334155;
}

.form-input { width: 100%; padding: 14px; background: #334155; border: 1px solid #475569; color: white; border-radius: 10px; margin-bottom: 15px; font-size: 1rem; }

.login-modal-box { background: #1e293b; padding: 30px; border-radius: 20px; text-align: center; border: 1px solid #475569; width: 90%; max-width: 350px; }

#modal-login .form-input { background: #334155 !important; color: white !important; border: 1px solid #475569 !important; }

.admin-category-card { background: #1e293b; border-radius: 12px; border: 1px solid #334155; margin-bottom: 15px; overflow: hidden; }

.admin-card-header {
    display: flex; justify-content: space-between; align-items: center; padding: 15px; cursor: pointer; background: #1e293b;
    border-bottom: 1px solid transparent;
}

.admin-card-header.open { border-bottom: 1px solid #334155; }

.admin-card-header h3 { margin: 0; color: white; font-size: 1.1rem; }

.admin-card-header i { transition: transform 0.3s; }

.admin-card-content { max-height: 0; overflow: hidden; transition: all 0.4s ease-in-out; padding: 0 15px; }

.admin-card-content.open { max-height: 2000px; padding: 15px; }

.loading-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); display: none; justify-content: center;
    align-items: center; border-radius: 8px; z-index: 10000; flex-direction: column; color: white; gap: 10px; text-align: center;
}

.loading-overlay.active { display: flex; }

.progress-bar { width: 80%; height: 10px; background: #334155; border-radius: 5px; overflow: hidden; margin-top: 10px; }

.progress-fill { height: 100%; background: var(--primary); width: 0%; transition: width 0.3s; }

.toast {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: #10b981; color: white; padding: 12px 30px; border-radius: 50px;
    font-weight: 600; opacity: 0; pointer-events: none; transition: 0.3s; z-index: 6000;
}

.toast.show { opacity: 1; bottom: 50px; }

.banner-admin-item { position: relative; display: inline-block; margin: 5px; }

.banner-admin-item img { height: 80px; border-radius: 5px; border: 1px solid #64748b; }

.banner-admin-del {
    position: absolute; top: -5px; right: -5px; background: red; color: white; border-radius: 50%; width: 20px; height: 20px; text-align: center;
    line-height: 20px; cursor: pointer; font-size: 0.8rem;
}

.banner-link-tag { position: absolute; bottom: 2px; right: 2px; background: rgba(0,0,0,0.7); color: white; font-size: 0.6rem; padding: 2px 5px; border-radius: 3px; }

.order-btn {
    background: #334155; border: 1px solid #475569; color: white; width: 25px; height: 25px; border-radius: 5px; cursor: pointer; margin-left: 2px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem;
}

.admin-lock-footer { position: absolute; bottom: 20px; right: 20px; color: var(--text-muted); cursor: pointer; font-size: 1.5rem; padding: 10px; opacity: 0.05; }

.admin-lock-footer:hover { color: var(--primary); opacity: 1; }

#modal-nova-categoria { z-index: 6000; }

.admin-list-header {
    color: var(--text-muted); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; margin: 20px 0 10px 0; padding-bottom: 5px;
    border-bottom: 1px solid #334155;
}

.admin-list-empty { color: #64748b; text-align: center; padding: 20px; font-style: italic; background: rgba(0,0,0,0.1); border-radius: 8px; }


/* ==========================================================================
   BLOCO 07 — SELEÇÃO, COMPARTILHAMENTO E EFEITOS DOS PRODUTOS
   ========================================================================== */

@keyframes pulseBtn {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7); }

    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(14, 165, 233, 0); }

    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
}

.admin-card-content.open { max-height: 20000px !important; overflow: visible !important; }

.admin-link-input { color: #fff !important; background: rgba(0,0,0,0.3) !important; border: 1px solid #475569 !important; font-family: monospace; }

.btn-reload-cache {
    background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.2); color: var(--text-muted); font-size: 0.7rem; padding: 5px 10px;
    border-radius: 20px; cursor: pointer; margin-left: 10px; display: inline-flex; align-items: center; gap: 5px; transition: 0.3s;
}

.btn-reload-cache:hover { background: var(--primary); color: white; border-color: var(--primary); }

.product-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 2px solid transparent; position: relative; overflow: hidden; }

.shine-effect::before {
    content: ""; position: absolute; top: 0; left: -150%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%); transform: skewX(-25deg); transition: none;
    pointer-events: none; z-index: 10;
}

.product-card:active .shine-effect::before, .product-card:focus .shine-effect::before { animation: shineAnim 0.6s; }

.product-card.auto-shine .shine-effect::before { animation: shineAnim 2s infinite; opacity: 0.5; }

@keyframes shineAnim {
    0% { left: -150%; }

    100% { left: 150%; }
}

.select-indicator {
    position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,0.3); border: 2px solid white;
    z-index: 20; display: none; align-items: center; justify-content: center; color: white; font-size: 14px; box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

body.selection-active .select-indicator { display: flex; }

.product-card.selected { border-color: var(--whats); transform: scale(0.96); background-color: #f0fdf4; box-shadow: 0 10px 25px rgba(37, 211, 102, 0.2); }

.product-card.selected .select-indicator { background: var(--whats); border-color: var(--whats); transform: scale(1.1); }


/* ==========================================================================
   BLOCO 08 — PAINEL ADMINISTRATIVO: JANELAS, LISTAS E FORMULÁRIOS
   ========================================================================== */

#admin-panel { display: none; }

.admin-section { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #0f1218; z-index: 6000; overflow-y: auto; display: none; padding: 0; }

.admin-section.active { display: block; animation: fadeUp 0.2s ease-out; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }

    to { opacity: 1; transform: translateY(0); }
}

.admin-win-header {
    background: #181b21; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #2d3748;
    position: sticky; top: 0; z-index: 50; height: 60px;
}

.admin-win-title { font-size: 1.1rem; font-weight: 700; color: #e2e8f0; display: flex; align-items: center; gap: 10px; }

.btn-voltar-topo {
    background: #2d3748; color: white; border: 1px solid #4a5568; padding: 6px 15px; border-radius: 6px; cursor: pointer; font-weight: 600;
    font-size: 0.9rem;
}

.admin-content-wrapper { padding: 15px; width: 100%; box-sizing: border-box; }

.form-input, .admin-search-box {
    background: #181b21; border: 1px solid #2d3748; color: #e2e8f0; padding: 12px; border-radius: 8px; width: 100%; font-size: 1rem; margin-bottom: 15px;
}

.form-input:focus, .admin-search-box:focus { border-color: var(--primary); outline: none; }

label { color: white; font-size: 0.85rem; margin-bottom: 5px; display: block; }

.admin-cat-scroll-container {
    display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 10px; overflow-x: scroll; overflow-y: hidden;
    padding: 5px 5px 15px 5px; margin-bottom: 15px; width: 100%; scrollbar-width: thin; scrollbar-color: #475569 #0f1218;
}

.admin-cat-scroll-container::-webkit-scrollbar { height: 12px; display: block !important; }

.admin-cat-scroll-container::-webkit-scrollbar-track { background: #0f1218; }

.admin-cat-scroll-container::-webkit-scrollbar-thumb { background-color: #475569; border-radius: 6px; border: 3px solid #0f1218; }

.admin-cat-scroll-container::-webkit-scrollbar-thumb:hover { background-color: white; }

.admin-cat-pill {
    width: 140px; height: 45px; background: #1e293b; color: white; border: 1px solid #334155; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; text-transform: uppercase; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; padding: 0 5px;
}

.admin-cat-pill.active { background: #f97316; color: white; border-color: #f97316; font-weight: 800; }

.admin-prod-row {
    background: #181b21; border: 1px solid #2d3748; border-radius: 8px; padding: 10px; margin-bottom: 8px; display: flex; align-items: center;
    justify-content: space-between;
}

.admin-prod-info { display: flex; align-items: center; gap: 12px; flex-grow: 1; overflow: hidden; }

.admin-prod-thumb { width: 45px; height: 45px; border-radius: 6px; object-fit: cover; background: #000; border: 1px solid #334155; flex-shrink: 0; }

.admin-prod-details { overflow: hidden; }

.admin-prod-details h4 { margin: 0; color: #e2e8f0; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.admin-prod-details span { color: #64748b; font-size: 0.75rem; }

.admin-prod-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.btn-action-icon { width: 30px; height: 30px; border-radius: 4px; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; }

.btn-edit { background: #f59e0b; }

.btn-del { background: #ef4444; }

.btn-add { background: var(--primary); color: white; border: none; padding: 10px 15px; border-radius: 8px; font-weight: bold; cursor: pointer; width: 100%; }

.admin-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 20px; width: 100%; box-sizing: border-box; }

@media (min-width: 768px) {
    .admin-menu-grid { grid-template-columns: repeat(4, 1fr); }
}

.admin-menu-card {
    background: #1e293b; border: 1px solid #334155; border-radius: 16px; padding: 30px 15px; text-align: center; cursor: pointer; color: white;
    display: flex; flex-direction: column; align-items: center; gap: 15px; transition: 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.admin-menu-card i { font-size: 2.5rem; color: var(--primary); margin-bottom: 5px; }

.admin-menu-card h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }

.loading-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); display: none; justify-content: center; align-items: center;
    z-index: 9999; color: white; flex-direction: column;
}

.glass-modal-container { width: 95% !important; max-width: 900px !important; }

@media (max-width: 600px) {
    .glass-modal-container {
        width: 100% !important; height: 100% !important; max-height: 100vh !important; border-radius: 0 !important; padding: 20px !important;
        margin: 0 !important;
    }
}


/* ==========================================================================
   BLOCO 09 — ANIMAÇÕES DE DESTAQUE E NOTIFICAÇÕES
   ========================================================================== */

.btn-indique-delayed {
    opacity: 0; max-width: 0; padding: 0 !important; margin: 0 !important; border: none; overflow: hidden; white-space: nowrap;
    animation: revealIndique 0.5s ease forwards 12.5s,
                bounceInIndique 0.6s ease-out forwards 12.9s,
                glowPulseIndique 1.5s ease-out 2 13.5s;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

@keyframes revealIndique {
    to { opacity: 1; max-width: 150px; padding: 0 12px !important; margin-right: 5px !important; }
}

@keyframes bounceInIndique {
    0% { transform: scale(0.3); opacity: 0; }

    50% { transform: scale(1.05); }

    70% { transform: scale(0.9); }

    100% { transform: scale(1); opacity: 1; }
}

@keyframes glowPulseIndique {
    0% { box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3); border-color: transparent; }

    50% { box-shadow: 0 0 20px 5px rgba(20, 253, 114, 0.8), 0 0 10px rgba(255, 255, 255, 0.5); border-color: rgba(255,255,255,0.5); }

    100% { box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3); border-color: transparent; }
}

#toast-premium-container { position: fixed; top: 20px; right: 20px; z-index: 999999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }

.toast-msg {
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border-left: 5px solid; border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15); padding: 16px 20px; display: flex; align-items: center; gap: 15px; transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); min-width: 280px; font-weight: 600; color: #1e293b; font-size: 0.95rem;
}

.toast-msg.show { transform: translateX(0); }

.toast-icon { font-size: 1.5rem; }

.toast-success { border-color: #10b981; }

.toast-success .toast-icon { color: #10b981; }

.toast-danger { border-color: #ef4444; }

.toast-danger .toast-icon { color: #ef4444; }

.toast-warning { border-color: #f59e0b; }

.toast-warning .toast-icon { color: #f59e0b; }

.admin-icon-wrap.logado-verde {
    background: #10b981 !important; color: white !important; border-color: #059669 !important; box-shadow: 0 0 15px rgba(16, 185, 129, 0.4) !important;
}

.pix-notification-dot {
    position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; background-color: #ef4444; border-radius: 50%; border: 2px solid white;
    z-index: 10; animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }

    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }

    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}


/* ==========================================================================
   BLOCO 10 — CATEGORIAS PREMIUM, ACESSO RÁPIDO E BOTTOM SHEETS
   ========================================================================== */

.sidebar-divider { height: 1px; background: var(--border); margin: 15px 20px; }

.sidebar-title { font-size: 0.7rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin: 0 20px 10px 20px; }

.nav-item-small {
    display: flex; align-items: center; gap: 12px; padding: 10px 20px; color: var(--text); text-decoration: none; font-size: 0.85rem; font-weight: 600;
    transition: 0.2s; border-radius: 8px; margin: 0 10px;
}

.nav-item-small:hover { background: rgba(14, 165, 233, 0.05); color: var(--primary); transform: translateX(5px); }

.nav-icon-small { font-size: 1.1rem; }

.glass-modal-container {
    background: rgba(15, 23, 42, 0.85) !important; backdrop-filter: blur(20px) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5) !important;
}

.cat-grid-modal {
    display: grid; gap: 14px !important; padding: 10px 0; background: transparent; grid-template-columns: repeat(2, 1fr); max-height: 60vh;
    overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent;
}

.cat-grid-modal::-webkit-scrollbar { width: 6px; }

.cat-grid-modal::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }

.cat-card-modal {
    background: rgba(255, 255, 255, 0.05) !important; padding: 18px 10px !important; border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important; text-align: center; cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; color: #cbd5e1 !important; font-weight: 700 !important; font-size: 0.85rem !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; display: flex; align-items: center; justify-content: center;
}

.cat-card-modal:hover {
    border-color: rgba(14, 165, 233, 0.5) !important; background: rgba(14, 165, 233, 0.15) !important; color: white !important;
    transform: translateY(-4px) scale(1.02) !important; box-shadow: 0 10px 20px rgba(14, 165, 233, 0.2) !important;
}

.cat-card-modal.special {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; color: white !important; border: none !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3) !important;
}

.cat-card-modal.special:hover {
    transform: translateY(-4px) scale(1.02) !important; box-shadow: 0 10px 25px rgba(245, 158, 11, 0.5) !important; filter: brightness(1.1) !important;
}

#modal-cats { align-items: flex-end !important; padding: 0; }

.premium-bottom-sheet {
    width: 100%; background: #ffffff; border-radius: 32px 32px 0 0; padding: 15px 20px 30px 20px; box-shadow: 0 -10px 40px rgba(0,0,0,0.1);
    transform: translateY(100%); animation: slideUpSheet 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; display: flex; flex-direction: column;
    max-height: 85vh; box-sizing: border-box;
}

@keyframes slideUpSheet {
    to { transform: translateY(0); }
}

.bottom-sheet-handle { width: 48px; height: 5px; background: #e2e8f0; border-radius: 10px; margin: 0 auto 20px auto; }

.bottom-sheet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

.bottom-sheet-header h3 { margin: 0; font-size: 1.4rem; font-weight: 800; color: #000000; }

.btn-close-sheet {
    background: #f8fafc; border: 1px solid #e2e8f0; width: 38px; height: 38px; border-radius: 50%; color: #000000; display: flex; align-items: center;
    justify-content: center; cursor: pointer; transition: 0.2s ease;
}

.btn-close-sheet:hover { background: #e2e8f0; color: #000000; }

.cat-grid-bento { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; overflow-y: auto; padding-bottom: 10px; scrollbar-width: none; }

.cat-grid-bento::-webkit-scrollbar { display: none; }

.cat-grid-bento > * {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 20px; aspect-ratio: 1 / 1; height: auto; padding: 10px; display: flex;
    flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #000000 !important; font-weight: 800; font-size: 0.75rem;
    text-align: center; cursor: pointer; transition: all 0.2s ease; user-select: none; text-decoration: none; overflow: hidden;
}

.cat-grid-bento > *:hover, .cat-grid-bento > *:active {
    transform: scale(0.95); background: #ffffff; border-color: var(--primary); color: var(--primary) !important;
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.15);
}

.cat-grid-bento > .special, .cat-grid-bento > [onclick*="datas"] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; color: white !important; border: none !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3) !important;
}

.bottom-sheet-footer { margin-top: 15px; padding-top: 15px; border-top: 1px solid #e2e8f0; }

.btn-ver-tudo {
    width: 100%; background: var(--primary); color: white; border: none; padding: 16px; border-radius: 16px; font-size: 1rem; font-weight: 800;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3); cursor: pointer; transition: 0.2s;
}

.btn-ver-tudo:active { transform: scale(0.98); }

@media (min-width: 1025px) {
    #modal-cats { align-items: flex-start !important; justify-content: flex-start !important; padding-left: 260px; background: rgba(0,0,0,0.4); }

    .premium-bottom-sheet {
        width: 420px; height: 100vh; max-height: 100vh; border-radius: 0 32px 32px 0; padding: 30px; margin: 0; transform: translateX(-100%); opacity: 1;
        animation: slidePanelRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .bottom-sheet-handle { display: none; }

    .cat-grid-bento { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); max-height: calc(100vh - 200px); }

    @keyframes slidePanelRight {
        to { transform: translateX(0); }
    }
}

.cat-grid-bento > * > * { pointer-events: none !important; }

.cat-grid-bento > * > div:empty, .cat-grid-bento > * > span:empty, .cat-grid-bento > * > i:empty { display: none !important; }

.cat-grid-bento .cat-card-modal {
    background: #f8fafc !important; color: #000000 !important; border: 1px solid #e2e8f0 !important; box-shadow: none !important;
    aspect-ratio: 1 / 1 !important; border-radius: 20px !important; flex-direction: column !important;
}

.cat-grid-bento .cat-card-modal:hover, .cat-grid-bento .cat-card-modal:active {
    background: #ffffff !important; border-color: var(--primary) !important; color: var(--primary) !important;
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.15) !important; transform: scale(0.95) !important;
}

.cat-grid-bento { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; padding: 15px 5px !important; }

.cat-grid-bento > *, .cat-grid-bento .cat-card-modal {
    aspect-ratio: auto !important; min-height: 85px !important; padding: 10px 8px !important; background: #ffffff !important; border: none !important;
    border-radius: 18px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important; display: flex !important;
    align-items: center !important; justify-content: center !important; text-align: center !important; color: #1d1d1f !important;
    font-weight: 600 !important; font-size: 0.75rem !important; letter-spacing: -0.2px !important; line-height: 1.2 !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.cat-grid-bento > *:hover, .cat-grid-bento > *:active, .cat-grid-bento .cat-card-modal:hover, .cat-grid-bento .cat-card-modal:active {
    transform: scale(0.95) !important; background: #f5f5f7 !important; color: var(--primary) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

.cat-grid-bento > .special, .cat-grid-bento > [onclick*="datas"] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; color: white !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

.cat-grid-bento > .special:hover,
.cat-grid-bento > [onclick*="datas"]:hover,
.cat-grid-bento > .special:active,
.cat-grid-bento > [onclick*="datas"]:active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; transform: scale(0.95) !important;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2) !important; color: white !important; filter: brightness(1.1) !important;
}


/* ==========================================================================
   BLOCO 11 — MODAIS CLAROS, INDICAÇÃO E ASSISTENTE INTELIGENTE
   ========================================================================== */

.sidebar-nav .nav-item.premium-btn { transition: all 0.3s ease !important; }

.sidebar-nav .nav-item.premium-btn:hover { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; transform: scale(0.95) !important; }

.sidebar-nav .nav-item.premium-btn:hover span, .sidebar-nav .nav-item.premium-btn:hover .nav-icon i { color: white !important; }

.glass-modal-container {
    background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(20px) !important; border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15) !important; color: #1d1d1f !important;
}

.glass-modal-container h2, .glass-modal-container h3, .glass-modal-container p, .glass-modal-container small, .glass-modal-container label { color: #1d1d1f !important; }

#daily-content {
    background: #f5f5f7 !important; border: 1px solid #e2e8f0 !important; border-radius: 16px !important; padding: 20px !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
}

#daily-verse, #daily-ref, #daily-reflection { color: #1d1d1f !important; text-shadow: none !important; }

#modal-palavra-dia button {
    background: #10b981 !important; color: white !important; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important; font-weight: 700 !important;
    transition: all 0.3s ease !important; width: 100% !important; border-radius: 14px !important; padding: 14px !important; font-size: 1rem !important;
    border: none !important;
}

#modal-palavra-dia button:hover { transform: scale(0.97) !important; }

.glass-modal-container button[onclick*="fechar"],
.glass-modal-container button[onclick*="fecharModalIndique"],
.glass-modal-container button[onclick*="classList.remove"] {
    color: #64748b !important; background: #f1f5f9 !important; width: 34px !important; height: 34px !important; border-radius: 50% !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 1.2rem !important;
    padding: 0 !important; box-shadow: none !important; border: none !important; transition: 0.2s !important; margin: 0 !important;
}

.glass-modal-container button[onclick*="fechar"]:hover,
.glass-modal-container button[onclick*="fecharModalIndique"]:hover,
.glass-modal-container button[onclick*="classList.remove"]:hover {
    background: #e2e8f0 !important; color: #ef4444 !important; transform: scale(0.95) !important;
}

#smart-chat-window { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; }

#smart-chat-input.glass-input { background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; color: #1d1d1f !important; }

#smart-chat-input.glass-input::placeholder { color: #94a3b8 !important; }

#modal-indique .glass-modal-container { background: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; }

#modal-indique .glass-modal-container h3,
#modal-indique .glass-modal-container p,
#modal-indique .glass-modal-container label,
#modal-indique .glass-modal-container b {
    color: #14532d !important;
}

#modal-indique .glass-modal-container h3 i { color: #10b981 !important; }

#indique-nome { background: #ffffff !important; border: 1px solid #86efac !important; color: #14532d !important; }

#indique-nome:focus { border-color: #10b981 !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important; outline: none !important; }

#modal-indique .glass-modal-container button[onclick*="fecharModalIndique"] { background: transparent !important; color: #166534 !important; font-size: 1.5rem !important; }

#modal-indique .glass-modal-container button[onclick*="fecharModalIndique"]:hover { background: #dcfce7 !important; color: #14532d !important; }


/* ==========================================================================
   BLOCO 12 — CADASTRO E EDIÇÃO DE PRODUTOS
   ========================================================================== */

#modal-form-produto { padding: 20px; background: rgba(2,6,23,.86) !important; }

#modal-form-produto .glass-modal-container {
    width: min(960px,96vw) !important; max-width: 960px !important; max-height: 92vh !important; padding: 24px !important; background: #f8fafc !important;
    color: #0f172a !important; border: 1px solid #cbd5e1 !important; border-radius: 20px !important; backdrop-filter: none !important;
    box-shadow: 0 25px 70px rgba(0,0,0,.45) !important; scrollbar-width: thin; scrollbar-color: #94a3b8 #e2e8f0;
}

#modal-form-produto .glass-modal-container::-webkit-scrollbar { width: 9px; }

#modal-form-produto .glass-modal-container::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 10px; }

#modal-form-produto .glass-modal-container::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 10px; border: 2px solid #e2e8f0; }

#modal-form-produto .glass-modal-container > div:first-child {
    position: sticky; top: -24px; z-index: 20; margin: -24px -24px 22px !important; padding: 18px 24px; background: #ffffff;
    border-bottom: 1px solid #e2e8f0; align-items: center;
}

#modal-form-produto .glass-modal-container > div:first-child h3 { color: #0f172a !important; font-size: 1.25rem !important; font-weight: 800 !important; }

#modal-form-produto .glass-modal-container > div:first-child button {
    width: 38px !important; height: 38px !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center;
    justify-content: center; background: #e2e8f0 !important; color: #475569 !important; border: none !important; border-radius: 50% !important;
    font-size: 1.35rem !important; cursor: pointer;
}

#modal-form-produto .glass-modal-container > div:first-child button:hover { background: #fee2e2 !important; color: #dc2626 !important; }

#modal-form-produto .glass-modal-container > label {
    color: #334155 !important; font-size: .82rem !important; font-weight: 800 !important; margin: 0 0 6px !important; letter-spacing: .1px;
}

#modal-form-produto .form-input {
    min-height: 46px; margin-bottom: 14px !important; padding: 11px 13px !important; background: #ffffff !important; color: #0f172a !important;
    border: 1px solid #cbd5e1 !important; border-radius: 10px !important; box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

#modal-form-produto .form-input::placeholder { color: #94a3b8 !important; opacity: 1; }

#modal-form-produto .form-input:focus { border-color: #0ea5e9 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(14,165,233,.14) !important; }

#modal-form-produto select.form-input option { background: #ffffff; color: #0f172a; }

#modal-form-produto #adm-plano-req { background: #fffbeb !important; color: #92400e !important; border: 1px solid #fbbf24 !important; font-weight: 700; }

#modal-form-produto #adm-categoria { margin-bottom: 0 !important; }

#modal-form-produto #adm-categoria ~ button {
    min-width: 46px; height: 46px; padding: 0 !important; border-radius: 10px !important; background: #0ea5e9 !important; font-size: 1.1rem;
}

#modal-form-produto input[type="checkbox"] { width: 19px !important; height: 19px !important; flex-shrink: 0; cursor: pointer; }

#modal-form-produto label[for="adm-is-canva"] { color: #0891b2 !important; }

#modal-form-produto label[for="adm-is-new"] { color: #c2410c !important; }

#modal-form-produto #container-links-individuais {
    background: #eff6ff !important; border: 1px dashed #38bdf8 !important; border-radius: 12px !important; padding: 16px !important;
}

#modal-form-produto #adm-url-list { min-height: 72px; padding: 10px; background: #ffffff; border: 1px dashed #cbd5e1; border-radius: 10px; }

#modal-form-produto button[onclick*="file-input"] { min-height: 46px; background: #475569 !important; border: 1px dashed #94a3b8 !important; }

#modal-form-produto .glass-modal-container > button.btn-add:last-child {
    position: sticky; bottom: -24px; z-index: 20; min-height: 52px; margin: 20px -24px -24px !important; width: calc(100% + 48px) !important;
    border-radius: 0 0 20px 20px !important; background: #10b981 !important; box-shadow: 0 -8px 25px rgba(15,23,42,.12); font-size: 1rem !important;
}

@media (max-width:600px) {
    #modal-form-produto { padding: 0; }

    #modal-form-produto .glass-modal-container {
        width: 100% !important; height: 100% !important; max-height: 100dvh !important; padding: 16px !important; border: none !important;
        border-radius: 0 !important;
    }

    #modal-form-produto .glass-modal-container > div:first-child { top: -16px; margin: -16px -16px 18px !important; padding: 14px 16px; }

    #modal-form-produto .glass-modal-container > button.btn-add:last-child {
        bottom: -16px; margin: 18px -16px -16px !important; width: calc(100% + 32px) !important; border-radius: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   BLOCO 12.1 — LINKS INDIVIDUAIS DAS ARTES
   -------------------------------------------------------------------------- */
#modal-form-produto #container-links-individuais {
    padding: 18px !important; background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; border-radius: 14px !important;
}
#modal-form-produto #lista-inputs-links { gap: 14px !important; }
.links-vazio {
    min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #64748b;
    background: #fff; border: 1px dashed #cbd5e1; border-radius: 12px;
}
.links-vazio i { font-size: 1.5rem; color: #94a3b8; }
.link-arte-card { padding: 16px; background: #fff; border: 1px solid #dbe3ed; border-radius: 14px; box-shadow: 0 3px 10px rgba(15,23,42,.05); }
.link-card-capa { border-color: #c4b5fd; background: #faf9ff; }
.link-arte-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #e2e8f0; }
.link-arte-thumb { width: 68px; height: 68px; flex-shrink: 0; object-fit: cover; background: #e2e8f0; border: 1px solid #cbd5e1; border-radius: 10px; }
.link-arte-identificacao { display: flex; flex-direction: column; gap: 3px; }
.link-arte-identificacao strong { color: #0f172a; font-size: .9rem; font-weight: 800; letter-spacing: .3px; }
.link-arte-identificacao span { color: #64748b; font-size: .76rem; }
.link-arte-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
#modal-form-produto .link-campo { min-width: 0; margin: 0 !important; display: flex; flex-direction: column; gap: 6px; }
#modal-form-produto .link-campo > span { display: flex; align-items: center; gap: 6px; color: #475569 !important; font-size: .75rem; font-weight: 800; }
#modal-form-produto .link-campo > span i { width: 15px; color: var(--link-cor); text-align: center; }
#modal-form-produto .link-campo .form-input {
    width: 100%; min-width: 0; min-height: 43px; margin: 0 !important; padding: 10px 12px !important; background: #fff !important;
    color: #0f172a !important; border: 1px solid #cbd5e1 !important; border-left: 4px solid var(--link-cor) !important; border-radius: 9px !important;
    font-size: .8rem !important; font-family: "Segoe UI", sans-serif !important;
}
#modal-form-produto .link-campo .form-input:focus { border-color: var(--link-cor) !important; box-shadow: 0 0 0 3px color-mix(in srgb,var(--link-cor) 15%,transparent) !important; }
#modal-form-produto .link-campo .form-input::placeholder { color: #94a3b8 !important; }
@media (max-width: 650px) {
    #modal-form-produto #container-links-individuais { padding: 12px !important; }
    .link-arte-card { padding: 12px; }
    .link-arte-grid { grid-template-columns: 1fr; gap: 10px; }
    .link-arte-thumb { width: 58px; height: 58px; }
}
/* =========================================================
   COMPARTILHAMENTO DA LOJA — CARDS BENTO
   ========================================================= */
#modal-share-select .glass-modal-container {
    width:min(760px,94vw) !important; max-width:760px !important;
    padding:26px 30px 30px !important; background:#f5f5f7 !important;
    color:#1d1d1f !important; border:1px solid #e5e7eb !important;
}

#modal-share-select .glass-modal-container > div:first-child {
    align-items:center; border-bottom:1px solid #e5e7eb !important;
}

#modal-share-select .glass-modal-container h3,
#modal-share-select .glass-modal-container > p { color:#1d1d1f !important; }

#modal-share-select .glass-modal-container > div:first-child button {
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    padding:0; background:#e8edf3 !important; color:#ef4444 !important;
    border:none; border-radius:50%; font-weight:800;
}

#share-buttons-grid {
    display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:12px !important; max-height:50vh !important; padding:5px 5px 12px !important;
    margin-bottom:16px !important; overflow-y:auto !important;
    scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent;
}

#share-buttons-grid::-webkit-scrollbar { width:7px; }
#share-buttons-grid::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:10px; }

.share-bento-card {
    min-height:112px; padding:14px 8px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:7px; background:#fff;
    color:#1d1d1f; border:none; border-radius:18px; cursor:pointer;
    box-shadow:0 4px 12px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.03);
    transition:all .25s ease;
}

.share-bento-card i { font-size:1.45rem; color:var(--primary); }
.share-bento-card strong { font-size:.78rem; line-height:1.15; text-align:center; }
.share-bento-card small { color:#94a3b8; font-size:.68rem; font-weight:700; }

.share-bento-card:hover {
    transform:scale(.96); background:#f8fafc; color:var(--primary);
    box-shadow:0 2px 6px rgba(0,0,0,.05);
}

#modal-share-select .glass-modal-container > .btn-buy {
    min-height:48px; border-radius:15px !important;
}

@media(max-width:650px) {
    #modal-share-select .glass-modal-container {
        width:100% !important; height:auto !important; max-height:90dvh !important;
        padding:20px 16px !important; border-radius:26px 26px 0 0 !important;
        position:absolute; bottom:0;
    }

    #share-buttons-grid {
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        max-height:55vh !important; gap:10px !important;
    }

    .share-bento-card { min-height:92px; padding:10px 6px; border-radius:16px; }
    .share-bento-card i { font-size:1.25rem; }
    .share-bento-card strong { font-size:.7rem; }
}

/* COMPARTILHAMENTO — BENTO DELICADO SEM ÍCONES */
#share-buttons-grid {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:12px !important;
}

.share-bento-card {
    min-height:104px !important; padding:14px 10px !important; gap:6px !important;
    background:#fff !important; color:#292929 !important; border:1px solid rgba(15,23,42,.025) !important;
    border-radius:18px !important;
    box-shadow:0 1px 2px rgba(15,23,42,.025), 0 8px 24px rgba(15,23,42,.055) !important;
}

.share-bento-card strong {
    font-size:.78rem !important; line-height:1.2 !important; font-weight:500 !important;
    text-align:center; color:#292929 !important;
}

.share-bento-card small {
    font-size:.66rem !important; color:#64748b !important; font-weight:600 !important;
}

.share-bento-card:hover {
    transform:translateY(-2px) !important; background:#fff !important;
    border-color:rgba(15,23,42,.04) !important; color:#292929 !important;
    box-shadow:0 2px 5px rgba(15,23,42,.035), 0 12px 30px rgba(15,23,42,.075) !important;
}

@media(max-width:650px) {
    #share-buttons-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important; }
    .share-bento-card { min-height:90px !important; padding:10px 5px !important; border-radius:16px !important; }
    .share-bento-card strong { font-size:.68rem !important; }
    .share-bento-card small { font-size:.6rem !important; }
}

/* =========================================================
   AÇÕES EXTRAS DO MENU LATERAL
   ========================================================= */
.sidebar-feature-btn {
    padding:12px 14px !important; color:#fff !important;
    border:1px solid rgba(255,255,255,.2) !important;
    box-shadow:0 5px 15px rgba(15,23,42,.12);
}

.sidebar-feature-btn .nav-icon { color:#fff !important; }

.nav-feature-copy {
    min-width:0; display:flex; flex-direction:column; gap:2px;
}

.nav-feature-copy span {
    color:#fff !important; font-size:.88rem; font-weight:800;
}

.nav-feature-copy small {
    color:rgba(255,255,255,.78) !important;
    font-size:.67rem; font-weight:600; line-height:1.2;
}

.supplier-btn {
    background:linear-gradient(135deg,#7c3aed 0%,#5b21b6 100%) !important;
}

.supplier-btn:hover {
    background:linear-gradient(135deg,#6d28d9 0%,#4c1d95 100%) !important;
    color:#fff !important; transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(124,58,237,.28);
}

.remake-btn {
    background:linear-gradient(135deg,#0ea5e9 0%,#0284c7 100%) !important;
}

.remake-btn:hover {
    background:linear-gradient(135deg,#0284c7 0%,#0369a1 100%) !important;
    color:#fff !important; transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(14,165,233,.28);
}

/* =========================================================
   VOLTAR AO TOPO — PC E CELULAR
   ========================================================= */
.floating-actions-container {
    right:24px !important; bottom:24px !important; z-index:1900 !important;
}

.btn-back-to-top {
    width:46px !important; height:46px !important; padding:0 !important;
    background:rgba(15,23,42,.88) !important; color:#fff !important;
    border:1px solid rgba(255,255,255,.16) !important; border-radius:50% !important;
    display:flex !important; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(15,23,42,.22) !important;
    backdrop-filter:blur(12px); cursor:pointer;
}

.btn-back-to-top:hover {
    background:var(--primary) !important;
    transform:translateY(-3px) !important;
}

@media(max-width:1024px) {
    /* IA e Palavra já estão na barra inferior */
    .sidebar-desktop-only { display:none !important; }

    /* Acima da barra inferior do aplicativo */
    .floating-actions-container {
        right:14px !important;
        bottom:calc(88px + env(safe-area-inset-bottom)) !important;
    }

    .btn-back-to-top {
        width:44px !important; height:44px !important;
    }

    /* No catálogo compartilhado, o botão Conta já vira Topo */
    body.shared-catalog-mode .floating-actions-container {
        display:none !important;
    }
}