/**
 * D.E.P.K01.07 - CSS/lp-legacy.css
 * DEP-ID: LP-099FCB18F6
 * Classes ANTIGAS do sistema, agora ligadas aos tokens do gestor de aparência (CSS/aparencia).
 *
 * Substitui:  CSS/styles.css  (base, grids, carrossel, toggle, cabeçalho, modal)  e  o bloco <style> de CSS/styles.php
 *             (.glass .border .radius .input .button .buttonSecundario .btn .closeBtn .voltarBtn .ativo ...).
 * Os NOMES das classes e dos grupos de PHP ($btnComum, $cardForm, $input...) não mudaram: HTML e JS continuam iguais.
 * O que mudou: cor, borda, raio, sombra e fonte saem de var(--lp-*) (painel "Aparência do sistema"), não de $loja_cor*.
 *
 * Mapa  classe antiga  →  token
 *   .glass .cardContorno ...... card (fundo, borda, raio, sombra)        .input .input_negativa ... campo
 *   .button .buttonColor ...... botão primário                          .buttonSecundario ........ botão CTA
 *   .btn ...................... botão fantasma                          .closeBtn .closeColor ..... botão fechar
 *   .voltarBtn ................ botão voltar                            .ativo .btn-tab.active .... chip marcado
 *   .border ................... espessura + borda do componente         .radius ................... raio do componente
 *   .gap / .padding ........... --lp-gap / --lp-pad                     .disabled-btn ............. --lp-dis-op
 * Carregue DEPOIS de lp-ui.css e ANTES de qualquer CSS da página (use CSS/aparencia/head.php).
 */

/* ===== BASE (vinha do styles.css) ===== */
* {margin: 0; padding: 0; box-sizing: border-box; font-family: var(--lp-font); font-weight: 600; font-style: normal;}
body, html {margin: 0; padding: 0; min-height: 100vh; display: flex; flex-direction: column;}
/* o reset acima zera a margem automática do <dialog>; sem isto os modais lp-modal ficam no canto da tela */
dialog.lp-modal {margin: auto;}

/* ===== GLOBAL (vinha do styles.css) ===== */
.overflow {overflow: hidden;}
.inline {display: inline-block;}
.space {justify-content: space-between;}
.border_none {border: none;}
.box-sizing {box-sizing: border-box;}
.cursor-not-allowed {cursor: not-allowed;}

/* CARD PRODUTOS INDEX */
.nomeprodutoo, .nomeproduto {word-wrap: break-word; overflow-wrap: break-word; white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.grid-item {box-sizing: border-box; align-items: stretch; display: flex; flex-wrap: wrap;}
.tabelaprod2 {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

/* CAROUSEL PRODUTOS RELACIONADOS E DEMAIS */
.carousel-inner {display: flex; transition: transform 0.5s ease;}

/* TOGGLE DARK/LIGHT (continua trocando body.light-mode / body.dark-mode; o data-tema acompanha pela ponte do head.php) */
#toggle-theme, #increase-font, #decrease-font {font-size: 16px; cursor: pointer;}
.toggle-container {border-radius: 25px; cursor: pointer; overflow: hidden; transition: background 0.5s; width: 40px; height: 23px; margin: 0px -10px 5px 5px; position: absolute;}
body.light-mode .toggle-container {background: url('../../uploads/sistema/menu/toggle_light.webp') no-repeat center center; background-size: cover; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2), inset -1px -1px 2px rgba(229, 244, 255, 0.8), inset 1px 1px 2px rgba(28, 60, 87, 0.8);}
body.dark-mode .toggle-container {background: url('../../uploads/sistema/menu/toggle_dark.webp') no-repeat center center; background-size: cover; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2), inset -1px -1px 2px rgba(255, 255, 255, 0.8), inset 1px 1px 2px rgba(0, 0, 0, 0.8);}
.toggle {width: 100%; height: 100%; position: relative; display: flex; justify-content: space-between;}
.sun, .moon {width: 20px; height: 20px; border-radius: 50%; position: absolute; transition: all 0.5s ease; top: 50%; transform: translateY(-50%) scale(1);}
.sun {left: 1px; transform: translateY(-50%) scale(1); background: rgba(255, 200, 0); box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.8), inset -2px -2px 2px rgba(119, 98, 58, 0.58);}
.moon {right: 2px; transform: translateY(-50%) scale(0); background: lightgray; box-shadow: 0px 0px 1px rgba(255, 255, 255, 0.2), inset -2px -2px 1px rgba(105, 105, 105, 0.58);}
body.dark-mode .sun {transform: translateY(-50%) scale(0);}
body.dark-mode .moon {transform: translateY(-50%) scale(1);}

/* APARENCIA CABEÇALHO */
.product-image {width: 100px; height: auto; aspect-ratio: 1 / 1; object-fit: cover;}
.search-link {justify-content: left; text-align: left; align-items: center; display: flex; border: var(--lp-bw) solid var(--lp-campo-bd); width: 100%;}
.product-info {display: flex; margin-bottom: 10px; justify-content: center; align-items: center;}
.product-details {flex-grow: 1;}
.search-results {position: relative;}
.search-results li {cursor: pointer; width: 100%; list-style: none; padding: 5px; box-sizing: border-box;}

/* APARENCIA MODAL */
.fundo-blur {background: color-mix(in srgb, var(--lp-surface) 50%, transparent); backdrop-filter: blur(10px); z-index: 1;}
.transparent-background {background: transparent; display: flex; align-items: center; color: inherit; cursor: pointer; margin: 0; padding: 0; transition: color var(--lp-dur), transform var(--lp-dur);}
.transparent-background:hover {transform: scale(1.05); color: var(--lp-muted);}

@media (max-width: 1100px) {
    .hiddenmovel {display: none;}
    .margina {margin: 15px 0px 15px 0px;}
    .text-with-stars {align-items: center; justify-content: space-between; margin-left: 10px; margin-right: 10px;}
    .carousel {position: relative; width: 100%; display: flex; overflow: hidden;}
    .carousel .main-image {position: relative; display: flex; justify-content: center; align-items: center;}
    .thumbnail {width: 13vw; height: auto; object-fit: cover; aspect-ratio: 1 / 1; margin: 5px; padding: 0px;}
    .search-results {position: absolute; top: 60px; z-index: 5; display: none; width: calc(100% - 20px); justify-content: center;}
    .grid-container {display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
    .grids, .grid-item {flex: 0 0 42vw; margin: 5px 0px 5px 0px;}
    .nomeproduto {font-size: 1.2rem;}
}
@media (min-width: 1101px) {
    .flexpc {display: flex;}
    .text-with-stars {display: flex; align-items: center; justify-content: space-between; margin-left: 20px; margin-right: 20px;}
    .carousel {display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex: 1;}
    .carousel .main-image {position: relative;}
    .thumbnail {width: 100px; height: 100px; object-fit: cover; margin: 10px 0; cursor: pointer;}
    .fotoswithpreco {display: flex; align-items: center; justify-content: space-between;}
    .search-results {position: absolute; top: 80px; z-index: 5; display: none; width: calc(100% - 20px); justify-content: center;}
    .grids, .grid-item {flex: 0 0 12.6vw; margin: 5px 0px 5px 0px;}
    .nomeproduto {font-size: 1.2rem;}
}

/* ===== APARÊNCIA (vinha do bloco <style> de styles.php) — agora por tokens ===== */
/* sombra única do sistema (item "Cartão" do painel: nenhuma / leve / média / forte) */
:root {--lp-legacy-sombra: 0 var(--lp-shadow-y) var(--lp-shadow-blur) rgba(var(--lp-shadow-rgb), var(--lp-shadow-a));}

.borderNo {border: none;}
.padding {padding: var(--lp-pad);}
.gap {gap: var(--lp-gap);}

/* borda: padrão do sistema; cada componente abaixo troca só a COR da sua borda (mais específico que .border) */
.border {border: var(--lp-bw) solid var(--lp-card-bd) !important;}
/* raio: padrão + um raio por tipo de componente */
.radius {border-radius: var(--lp-r-item);}

/* cartão (glass) */
.glass {background: var(--lp-card-bg); color: var(--lp-ink); box-shadow: var(--lp-legacy-sombra);}
.glass.radius, .cardContorno.radius {border-radius: var(--lp-r-card);}
.cardContorno {background: var(--lp-card-bg); color: var(--lp-ink); box-shadow: var(--lp-legacy-sombra);}
.cardContorno.border {border: var(--lp-bw) solid var(--lp-ink) !important;}

/* campos */
.input_negativa, .input {background: var(--lp-campo-bg); color: var(--lp-campo-fg); padding: 5px; width: 100%; transition: all var(--lp-dur) ease; box-shadow: var(--lp-legacy-sombra);}
.input.border, .input_negativa.border {border: var(--lp-bw) solid var(--lp-campo-bd) !important;}
.input.radius, .input_negativa.radius {border-radius: var(--lp-r-input);}
.input::placeholder {color: var(--lp-campo-ph);}
.input:focus-visible, .input_negativa:focus-visible {outline: var(--lp-ring-w) solid var(--lp-ring); outline-offset: 1px;}

/* botão comum (.button): primário */
.button {text-decoration: none; background: var(--lp-btn-primario-bg); color: var(--lp-btn-primario-fg); text-align: center; cursor: pointer; transition: all var(--lp-dur) ease; box-shadow: var(--lp-legacy-sombra);}
body.light-mode .button, body.light-mode .buttonSecundario {text-transform: capitalize;}
body.dark-mode .button {text-transform: uppercase;}
.button:hover {filter: brightness(calc(var(--lp-hover-b) / 100)); transform: translateY(calc(var(--lp-hover-y) * -1px));}
.button.border {border: var(--lp-bw) solid var(--lp-btn-primario-bd) !important;}
.button.radius, .buttonSecundario.radius, .btn.radius {border-radius: var(--lp-r-btn);}
.buttonColor {background: var(--lp-btn-primario-bg); color: var(--lp-btn-primario-fg);}
.buttonColor:hover {filter: brightness(calc(var(--lp-hover-b) / 100));}

/* botão secundário: CTA */
.buttonSecundario {text-decoration: none; background: var(--lp-btn-cta-bg); color: var(--lp-btn-cta-fg); text-align: center; cursor: pointer; transition: all var(--lp-dur) ease; box-shadow: var(--lp-legacy-sombra);}
.buttonSecundario:hover {filter: brightness(calc(var(--lp-hover-b) / 100)); transform: translateY(calc(var(--lp-hover-y) * -1px));}
.buttonSecundario.border {border: var(--lp-bw) solid var(--lp-btn-cta-bd) !important;}

/* botão contorno (.btn): fantasma */
.btn {background: var(--lp-btn-fantasma-bg); color: var(--lp-btn-fantasma-fg); border: var(--lp-bw) solid var(--lp-btn-fantasma-bd); box-shadow: var(--lp-legacy-sombra);}
.btn.border {border: var(--lp-bw) solid var(--lp-btn-fantasma-bd) !important;}

/* botão fechar (×) */
.closeBtn {background: var(--lp-btn-fechar-bg); color: var(--lp-btn-fechar-fg); width: var(--lp-btn-fechar-size); height: var(--lp-btn-fechar-size); box-shadow: var(--lp-legacy-sombra); font-size: calc(var(--lp-btn-fechar-size) * .5); padding: 9px 9px;}
.closeBtn.border, .closeColor.border {border: var(--lp-bw) solid var(--lp-btn-fechar-bd) !important;}
.closeBtn.radius50, .closeColor.radius50 {border-radius: var(--lp-r-close);}
.closeColor {color: var(--lp-btn-fechar-fg); background: var(--lp-btn-fechar-bg) !important;}

/* botão voltar */
.voltarBtn {background: var(--lp-btn-voltar-bg); color: var(--lp-btn-voltar-fg); width: var(--lp-btn-fechar-size); height: var(--lp-btn-fechar-size); box-shadow: var(--lp-legacy-sombra); font-size: calc(var(--lp-btn-fechar-size) * .5); padding: 9px 9px;}
.voltarBtn.border, .voltarBtnNotAllowed.border {border: var(--lp-bw) solid var(--lp-btn-voltar-bd) !important;}
.voltarBtn.radius50, .voltarBtnNotAllowed.radius50 {border-radius: var(--lp-btn-voltar-r);}
.voltarBtnNotAllowed {background: var(--lp-muted); color: var(--lp-bg); padding: 9px; width: var(--lp-btn-fechar-size); height: var(--lp-btn-fechar-size); opacity: var(--lp-dis-op); cursor: not-allowed !important; font-size: calc(var(--lp-btn-fechar-size) * .5); box-shadow: var(--lp-legacy-sombra);}

/* estados */
.disabled-btn {opacity: var(--lp-dis-op); cursor: not-allowed !important; background: var(--lp-muted) !important; color: var(--lp-bg) !important;}
.noShadow {box-shadow: none !important;}
.ativo {background: var(--lp-chip-on-bg) !important; color: var(--lp-chip-on-fg) !important;}
.btn-tab.active {background: var(--lp-chip-on-bg) !important; color: var(--lp-chip-on-fg); font-weight: bold;}
.star-display {color: lightgray;}
.star-display.filled {color: var(--lp-accent);}

@keyframes pulsar-contorno {
    0%   {box-shadow: 0 0 0 0 var(--lp-accent);}
    100% {box-shadow: 0 0 0 15px transparent;}
}
.pulsando {animation: pulsar-contorno 2s infinite; transition: transform var(--lp-dur) ease; position: relative; z-index: 1;}

/* campo com rótulo em cima da borda (select / text) */
.field {position: relative; width: 100%;}
.field.small {max-width: 70px;}
.field input, .field select {width: 100%; padding-top: 10px;}
.field label {position: absolute; top: -6px; left: 5px; font-size: 0.65rem; background: var(--lp-campo-bg); color: var(--lp-campo-lb); border-radius: var(--lp-r-input); padding: 1px; opacity: 0.8;}

/* preços */
.produtoPrecos {display: flex; flex-direction: column; align-items: flex-start; white-space: nowrap; line-height: 0.8em;}
.produtoPrecos .produtoPreco {font-size: 22px; font-weight: 700; color: var(--lp-heading);}
.produtoPrecos .produtoParcelas {font-size: 15px;}
.produtoPix {display: flex; align-items: center; gap: 4px; color: var(--lp-ok); font-weight: 600;}
.pixIcon {width: 14px; height: 14px; flex-shrink: 0;}

/* ===== ganchos semânticos usados pelo HTML/JS e que nunca tiveram regra no styles.css/styles.php =====
   (modal do chat, cabeçalho e títulos do modal). Se a página definir a sua própria regra, a da página vale. */
.Corfundo2 {background: var(--lp-modal-bg); color: var(--lp-modal-fg);}
.Corfonte1 {color: var(--lp-heading);}