/*
 * Template "Neon" — escuro, contornos luminosos, tipografia geométrica.
 *
 * As páginas do construtor ficam com fundo escuro; nas restantes (loja) só
 * mudam a navbar, a toolbar, o rodapé, os popovers, os modais, os alertas e
 * os toasts. Ver base.css para as regras comuns e o que nunca se toca.
 */

body.tpl-neon {
    --tpl-accent: var(--tpl-glow);
    --tpl-accent-2: color-mix(in srgb, var(--tpl-glow) 45%, #7df9ff);
    --tpl-ink: #060910;
    --tpl-surface: #0c111d;
    --tpl-surface-2: #121a2b;
    --tpl-text: #e6ecf8;
    --tpl-muted: #8d99b3;
    --tpl-border: color-mix(in srgb, var(--tpl-accent) 28%, transparent);
    --tpl-card-radius: 14px;
    --tpl-shadow: 0 18px 50px -24px color-mix(in srgb, var(--tpl-accent) 70%, transparent);
    --tpl-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}

/* ── Fundo das páginas do construtor ───────────────────────────────── */
.tpl-neon .page[data-tpl-scope="page"] {
    background:
        radial-gradient(900px 520px at 8% -8%, color-mix(in srgb, var(--tpl-primary) 45%, transparent), transparent 62%),
        radial-gradient(760px 460px at 100% 4%, color-mix(in srgb, var(--tpl-accent) 16%, transparent), transparent 60%),
        linear-gradient(color-mix(in srgb, var(--tpl-accent) 6%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, color-mix(in srgb, var(--tpl-accent) 6%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
        var(--tpl-ink) !important;
    color: var(--tpl-text);
}

/* ── Texto e superfícies dentro dos blocos e dos modais ────────────────
   Classes Tailwind claras passam a escuras. Cores escolhidas no painel
   (style="color:…") continuam a ganhar. */
.tpl-neon .tpl-block,
.tpl-neon .tpl-modal {
    color: var(--tpl-text);
}
/* Cartões de produto e pesquisa (tpl-keep) não herdam o texto claro */
.tpl-neon:not(.theme-dark) .tpl-block .tpl-keep {
    color: #111827;
}
.tpl-neon :is(.tpl-block, .tpl-modal) :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-neutral-800, .text-black):not(.tpl-keep *) {
    color: var(--tpl-text);
}
.tpl-neon :is(.tpl-block, .tpl-modal) :is(.text-gray-600, .text-gray-500, .text-gray-400):not(.tpl-keep *) {
    color: var(--tpl-muted);
}
.tpl-neon :is(.tpl-block, .tpl-modal) :is(.bg-white, .bg-gray-50, .bg-gray-100):not(.tpl-keep *):not(.tpl-keep) {
    background-color: var(--tpl-surface) !important;
}
.tpl-neon :is(.tpl-block, .tpl-modal) :is(.border, .border-gray-200, .border-gray-300, .border-gray-400):not(.tpl-keep *):not(.tpl-keep) {
    border-color: var(--tpl-border) !important;
}

/* ── Títulos ───────────────────────────────────────────────────────── */
.tpl-neon :is(.tpl-title, .tpl-card-title, .tpl-cta-title, .tpl-hero-title) {
    font-family: var(--tpl-display);
    letter-spacing: .01em;
}
.tpl-neon .tpl-title {
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tpl-text);
}
.tpl-neon .tpl-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin-top: .6rem;
    background: linear-gradient(90deg, var(--tpl-accent), transparent);
    box-shadow: 0 0 12px var(--tpl-accent);
}
.tpl-neon .text-center > .tpl-title::after { margin-left: auto; margin-right: auto; }
.tpl-neon .text-right > .tpl-title::after { margin-left: auto; }
.tpl-neon .tpl-subtitle { color: var(--tpl-muted); }
.tpl-neon .tpl-link { color: var(--tpl-accent) !important; text-shadow: 0 0 10px color-mix(in srgb, var(--tpl-accent) 50%, transparent); }
.tpl-neon .tpl-hero-title { text-shadow: 0 0 28px color-mix(in srgb, var(--tpl-accent) 55%, transparent); }

/* ── Cartões: contorno em gradiente luminoso ───────────────────────── */
.tpl-neon .tpl-card:not(.tpl-promo-image) {
    border: 1px solid transparent !important;
    border-radius: var(--tpl-card-radius) !important;
    background:
        linear-gradient(var(--tpl-surface), var(--tpl-surface)) padding-box,
        linear-gradient(135deg, var(--tpl-accent), transparent 38%, transparent 62%, var(--tpl-accent-2)) border-box !important;
}
.tpl-neon .tpl-column-item { padding: 1rem; }
.tpl-neon .tpl-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--tpl-shadow), 0 0 0 1px var(--tpl-border);
}
/* Promoção com imagem de fundo (inline): só o contorno */
.tpl-neon .tpl-promo-image {
    border-color: var(--tpl-border) !important;
    border-radius: var(--tpl-card-radius) !important;
}

.tpl-neon .tpl-media {
    border-radius: calc(var(--tpl-card-radius) - 4px) !important;
    filter: saturate(1.1) contrast(1.05);
}
.tpl-neon .tpl-media-round { border-color: var(--tpl-border) !important; }
.tpl-neon .tpl-media-round:hover { box-shadow: 0 0 18px -2px var(--tpl-accent); }
.tpl-neon .tpl-icon { color: var(--tpl-accent); text-shadow: 0 0 16px var(--tpl-accent); }

/* ── CTA: painel escuro com brilho (um fundo escolhido no painel ganha) ─ */
.tpl-neon .tpl-cta {
    background-color: var(--tpl-surface);
    border: 1px solid var(--tpl-border);
    border-radius: calc(var(--tpl-card-radius) + 4px) !important;
    box-shadow: var(--tpl-shadow), inset 0 1px 0 color-mix(in srgb, var(--tpl-accent) 25%, transparent);
}

/* ── Slide principal: linhas de varrimento e fundo a fundir ────────── */
.tpl-neon .tpl-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--tpl-ink) 85%, transparent));
}
.tpl-neon .tpl-hero .relative { z-index: 2; }

/* ── Botões ────────────────────────────────────────────────────────── */
.tpl-neon :is(.tpl-block, .tpl-modal, .tpl-newsletter) .button-primary:not(.tpl-keep *) {
    border: 1px solid var(--tpl-accent) !important;
    box-shadow: 0 0 20px -6px var(--tpl-accent), inset 0 0 14px -8px var(--tpl-accent);
    font-family: var(--tpl-display);
    letter-spacing: .04em;
}
.tpl-neon :is(.tpl-block, .tpl-modal, .tpl-newsletter) .button-primary:not(.tpl-keep *):hover {
    background: color-mix(in srgb, var(--tpl-primary) 70%, var(--tpl-accent)) !important;
    box-shadow: 0 0 30px -4px var(--tpl-accent), inset 0 0 18px -8px var(--tpl-accent);
    transform: translateY(-1px);
}
.tpl-neon :is(.tpl-block, .tpl-modal) .button-secondary:not(.tpl-keep *) {
    background: color-mix(in srgb, var(--tpl-accent) 8%, transparent) !important;
    border: 1px solid var(--tpl-accent) !important;
    color: var(--tpl-accent) !important;
    font-family: var(--tpl-display);
    letter-spacing: .04em;
}
.tpl-neon :is(.tpl-block, .tpl-modal) .button-secondary:not(.tpl-keep *):hover {
    background: color-mix(in srgb, var(--tpl-accent) 18%, transparent) !important;
    box-shadow: 0 0 22px -6px var(--tpl-accent);
}

/* ── Setas e paginação dos carrosséis ──────────────────────────────── */
.tpl-neon .tpl-nav {
    background: var(--tpl-surface) !important;
    border: 1px solid var(--tpl-border);
    color: var(--tpl-accent);
    box-shadow: 0 0 22px -8px var(--tpl-accent) !important;
}
.tpl-neon .tpl-nav:hover { border-color: var(--tpl-accent); }
.tpl-neon .tpl-block .swiper-pagination-bullet { background: var(--tpl-muted); }
.tpl-neon .tpl-block .swiper-pagination-bullet-active {
    background: var(--tpl-accent);
    box-shadow: 0 0 10px var(--tpl-accent);
}

/* ── FAQ (lista acordeão do Framework7) ────────────────────────────── */
.tpl-neon .tpl-faq {
    --f7-list-bg-color: transparent;
    --f7-list-strong-bg-color: transparent;
    --f7-list-item-border-color: var(--tpl-border);
    --f7-list-outline-border-color: var(--tpl-border);
    --f7-list-chevron-icon-color: var(--tpl-accent);
    --f7-list-item-title-text-color: var(--tpl-text);
    --f7-list-link-pressed-bg-color: color-mix(in srgb, var(--tpl-accent) 10%, transparent);
}
.tpl-neon .tpl-faq ul {
    background: color-mix(in srgb, var(--tpl-surface) 80%, transparent) !important;
    border: 1px solid var(--tpl-border);
    border-radius: var(--tpl-card-radius);
    overflow: hidden;
}
.tpl-neon .tpl-faq .item-title { font-family: var(--tpl-display); color: var(--tpl-text); }
.tpl-neon .tpl-faq .accordion-item-opened { box-shadow: inset 3px 0 0 var(--tpl-accent); }
.tpl-neon .tpl-faq .accordion-item-opened .item-title { color: var(--tpl-accent); }
.tpl-neon .tpl-faq-answer { color: var(--tpl-muted); }

/* ── Notas, molduras (vídeo, mapas) ────────────────────────────────── */
.tpl-neon .tpl-note {
    background: var(--tpl-surface-2) !important;
    border-left: 2px solid var(--tpl-accent);
    border-radius: 0 10px 10px 0;
    color: var(--tpl-text);
}
.tpl-neon .tpl-frame {
    border: 1px solid var(--tpl-border) !important;
    border-radius: var(--tpl-card-radius) !important;
    box-shadow: var(--tpl-shadow);
}

/* ── Campos de formulário (construtor e modais) ────────────────────── */
.tpl-neon :is(.tpl-form, .tpl-modal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea, .select2-selection),
.tpl-neon .tpl-newsletter input[type="email"] {
    background: var(--tpl-ink) !important;
    color: var(--tpl-text) !important;
    border: 1px solid var(--tpl-border) !important;
    border-radius: 10px !important;
}
.tpl-neon :is(.tpl-form, .tpl-modal) :is(input, select, textarea):focus,
.tpl-neon .tpl-newsletter input[type="email"]:focus {
    outline: none;
    border-color: var(--tpl-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tpl-accent) 22%, transparent), 0 0 18px -6px var(--tpl-accent);
}
.tpl-neon :is(.tpl-form, .tpl-modal) ::placeholder { color: var(--tpl-muted); }
.tpl-neon .tpl-form label { color: var(--tpl-muted) !important; }

/* ── Navbar ────────────────────────────────────────────────────────── */
/* O desfoque vai num pseudo-elemento: um backdrop-filter no próprio div
   mudava o bloco de posicionamento dos popovers que vivem dentro dele. */
.tpl-neon .tpl-navbar > div:first-child {
    background-color: color-mix(in srgb, var(--tpl-navbar-bg) 86%, transparent) !important;
}
.tpl-neon .tpl-navbar > div:first-child::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
}
.tpl-neon .tpl-navbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    z-index: 600;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--tpl-accent), var(--tpl-accent-2), transparent) 0 0 / 200% 100%;
    box-shadow: 0 0 14px var(--tpl-accent);
    animation: tpl-neon-sweep 6s linear infinite;
}
@keyframes tpl-neon-sweep { to { background-position: -200% 0; } }

/* ── Popovers da navbar (menu, pontos, carrinho): só a moldura ─────── */
.tpl-neon .tpl-popover {
    border: 1px solid var(--tpl-border) !important;
    border-radius: var(--tpl-card-radius) !important;
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .55), 0 0 26px -10px var(--tpl-accent) !important;
}

/* ── Painel lateral "mais" ─────────────────────────────────────────── */
.tpl-neon .tpl-panel {
    border-left: 1px solid var(--tpl-accent) !important;
    box-shadow: -10px 0 40px -18px var(--tpl-accent);
}

/* ── Toolbar inferior (telemóvel): cápsula flutuante ───────────────── */
.tpl-neon .tpl-toolbar {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    border-radius: 20px;
    overflow: hidden;
    background: color-mix(in srgb, var(--tpl-ink) 88%, transparent) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--tpl-border);
    box-shadow: 0 0 26px -8px var(--tpl-accent), 0 18px 40px -18px rgba(0, 0, 0, .7);
    --f7-toolbar-bg-color: transparent;
    --f7-bars-bg-color: transparent;
}
.tpl-neon .tpl-toolbar::before { display: none !important; }
.tpl-neon .tpl-toolbar .toolbar-inner { background: transparent !important; }
.tpl-neon .tpl-toolbar i { color: var(--tpl-muted) !important; }
.tpl-neon .tpl-toolbar i[class*="-fill"] {
    color: var(--tpl-accent) !important;
    text-shadow: 0 0 12px var(--tpl-accent);
}
.tpl-neon .tpl-toolbar .hover\:bg-gray-100:hover { background: color-mix(in srgb, var(--tpl-accent) 10%, transparent) !important; }

/* ── Rodapé e newsletter ───────────────────────────────────────────── */
.tpl-neon .tpl-footer { position: relative; }
.tpl-neon .tpl-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tpl-accent), transparent);
    box-shadow: 0 0 16px var(--tpl-accent);
}
.tpl-neon .tpl-newsletter {
    position: relative;
    background:
        linear-gradient(color-mix(in srgb, var(--tpl-accent) 8%, transparent) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, color-mix(in srgb, var(--tpl-accent) 8%, transparent) 1px, transparent 1px) 0 0 / 32px 32px,
        var(--tpl-ink) !important;
}
.tpl-neon .tpl-newsletter h2 { font-family: var(--tpl-display); letter-spacing: .06em; text-transform: uppercase; }

/* ── Modais (login, loja fechada, maior idade, horário, cookies) ───── */
.tpl-neon .tpl-modal,
.tpl-neon .tpl-modal .bg-white {
    background-color: var(--tpl-surface) !important;
}
.tpl-neon .tpl-modal {
    border: 1px solid var(--tpl-border) !important;
    box-shadow: 0 0 50px -14px var(--tpl-accent), 0 30px 80px -30px #000 !important;
}
.tpl-neon .modal-content.tpl-modal,
.tpl-neon div.tpl-modal:not(.page) { border-radius: 18px !important; }
.tpl-neon .popup:has(> .tpl-modal) {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 0 50px -14px var(--tpl-accent);
}
.tpl-neon .tpl-modal h2 { font-family: var(--tpl-display); }
.tpl-neon .tpl-modal .hover\:bg-gray-100:hover { background-color: var(--tpl-surface-2) !important; }
.tpl-neon .tpl-modal .bi-x-lg { color: var(--tpl-text); }
.tpl-neon .tpl-modal button:is(.bg-primary, .bg-black, .bg-gray-600, .bg-gray-800, .bg-yellow-400) {
    border-radius: var(--tpl-radius);
    box-shadow: 0 0 18px -8px var(--tpl-accent);
}
/* Fundo escuro: usar o logótipo claro, se existir */
.tpl-neon .tpl-modal:has(img.logo-light:not([src=""])) img.logo-dark { display: none; }
.tpl-neon .tpl-modal img.logo-light:not([src=""]) { display: inline-block !important; }

.tpl-neon .tpl-cookie {
    background: color-mix(in srgb, var(--tpl-ink) 90%, transparent) !important;
    border-color: var(--tpl-border) !important;
    box-shadow: 0 0 30px -10px var(--tpl-accent);
}

/* ── Loader de página ──────────────────────────────────────────────── */
.tpl-neon .tpl-loader .modal-backdrop { background: color-mix(in srgb, var(--tpl-ink) 85%, transparent) !important; }
.tpl-neon .tpl-loader h1 { font-family: var(--tpl-display); letter-spacing: .1em; text-transform: uppercase; }
.tpl-neon .tpl-spinner::after { box-shadow: 0 0 18px -4px var(--tpl-accent); }

/* ── Alertas ───────────────────────────────────────────────────────── */
.tpl-neon .tpl-alert {
    background: var(--tpl-surface) !important;
    color: var(--tpl-text) !important;
    border: 1px solid var(--tpl-border);
    border-left: 3px solid var(--tpl-alert, var(--tpl-accent));
    box-shadow: 0 0 22px -12px var(--tpl-alert, var(--tpl-accent));
}
.tpl-neon .tpl-alert-red { --tpl-alert: #ff4d6d; }
.tpl-neon .tpl-alert-yellow { --tpl-alert: #ffd23f; }
.tpl-neon .tpl-alert-green { --tpl-alert: #3dffa2; }
.tpl-neon .tpl-alert-blue { --tpl-alert: #4dd8ff; }

/* ── Toasts ────────────────────────────────────────────────────────── */
.tpl-neon .toastify.custom-toast {
    --tpl-toast: var(--tpl-accent);
    background: color-mix(in srgb, var(--tpl-ink) 92%, transparent) !important;
    color: var(--tpl-text);
    border: 1px solid color-mix(in srgb, var(--tpl-toast) 45%, transparent);
    border-left: 3px solid var(--tpl-toast);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 0 26px -10px var(--tpl-toast);
    font-family: var(--tpl-display);
}
.tpl-neon .toastify.toast-success { --tpl-toast: #3dffa2; }
.tpl-neon .toastify.toast-error { --tpl-toast: #ff4d6d; }
.tpl-neon .toastify.toast-warning { --tpl-toast: #ffb03f; }
.tpl-neon .toastify.toast-info { --tpl-toast: #4dd8ff; }