@import "tailwindcss";
@import "../themes/default/theme.css";
@import "../themes/vitrine/theme.css";
@import "../themes/vendor/theme.css";
@import "../themes/boutique/theme.css"; /* 4º template (Boutique). Mexeu no theme.css e o dev não pegou? Salve este arquivo com alguma mudança (ex.: este comentário). */

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-plus-jakarta), "Plus Jakarta Sans", sans-serif;
  --font-display: var(--font-plus-jakarta), "Plus Jakarta Sans", sans-serif;
  --font-serif: var(--font-cinzel), "Cinzel", serif;
  --color-brand-dark: #f8fafc;
  --color-brand-purple: #5f31d6;
  --color-brand-purpleLight: #f4f0fe;
  --color-brand-glow: #7346e8;
  --color-brand-cyan: #15c5c5;
  --color-brand-cyanLight: #e0f8f8;
  --color-brand-surface: #ffffff;
}

:root {
  --background: #f8fafc;
  --foreground: #0f172a;
  --ks-color-bg-body: #F8F5FE;
  --ks-color-bg-elevated: #ffffff;
  --ks-color-bg-soft: #F8F5FE;
  --ks-color-border-subtle: #E0E5F2;
  --ks-color-border-strong: #A3AED0;
  --ks-color-text-primary: #4425A7;
  --ks-color-text-muted: #A3AED0;
  --ks-color-text-soft: #A3AED0;
  --ks-color-primary: #0AC0D6;
  --ks-color-primary-soft: rgba(10, 192, 214, 0.1);
  --ks-color-primary-strong: #089BAB;
  --ks-color-primary-soft-strong: rgba(10, 192, 214, 0.2);
  --ks-color-brand-dark: #4425A7;
  --ks-color-success: #01B574;
  --ks-color-success-light: rgba(1, 181, 116, 0.12);
  --ks-color-success-border: rgba(1, 181, 116, 0.25);
  --ks-color-success-lighter: rgba(1, 181, 116, 0.18);
  --ks-color-status-danger: #EE5D50;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #ffffff;
    --foreground: #171717;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.catalog-theme-shell {
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

.hide-arrows::-webkit-outer-spin-button,
.hide-arrows::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.hide-arrows {
  -moz-appearance: textfield;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

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

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.bg-mesh {
  background-color: #f8f5fe;
  background-image:
    radial-gradient(at 0% 0%, rgba(124, 58, 237, 0.15) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(6, 182, 212, 0.15) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.1) 0px, transparent 50%);
}

.fill-mode-forwards {
  animation-fill-mode: forwards;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zoom-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes scroll-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes button-glow {
  0%,
  100% {
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 35px rgba(124, 58, 237, 0.5);
    transform: scale(1.02);
  }
}

.animate-fade-up {
  animation: fade-up 0.8s ease-out forwards;
}

.animate-fade-in-left {
  animation: fade-in-left 0.8s ease-out forwards;
}

.animate-fade-in-right {
  animation: fade-in-right 0.8s ease-out forwards;
}

.animate-zoom-in {
  animation: zoom-in 0.6s ease-out forwards;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-scroll {
  animation: scroll-marquee 40s linear infinite;
}

.animate-pulse-slow {
  animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-button-glow {
  animation: button-glow 3s ease-in-out infinite;
}

.shadow-soft {
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
}

.shadow-glow {
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
}

.glass-morphism {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #fff;
}

::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #cbd5e1;
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.story-ring-animated {
  position: relative;
  border-radius: 50%;
  padding: 1.5px;
  background: white;
  z-index: 1;
}

.story-ring-animated::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888, #8a3ab9, #f09433);
  z-index: -1;
  animation: spin-slow 4s linear infinite;
}

/* Rolagem suave da landing.
   Os CTAs "Criar conta" levam para a ancora #preco. Sem isso o navegador da um
   salto seco e a pessoa nao percebe que desceu ate os planos — parece que a
   pagina piscou. Fica escopado em :has(.font-landing) para nao mudar a rolagem
   das paginas de catalogo, e desliga para quem pediu menos animacao. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.lp) {
    scroll-behavior: smooth;
  }
}

/* A barra do topo e sticky: sem essa folga o titulo da secao para atras dela. */
.lp section[id] {
  scroll-margin-top: 5rem;
}


/* ---------------------------------------------------------------------------
   Rodape das paginas de produto.
   A pagina de produto tem uma barra de compra fixa no rodape (e, no celular,
   o menu inferior logo abaixo dela). Juntas elas cobrem os ultimos ~146px da
   tela no celular e ~81px no desktop, e a ultima linha do rodape ficava
   escondida atras delas.
   A folga fica aqui, e nao num espacador no meio da pagina — era assim antes,
   e o espacador abria um vao de 112px entre o frete e o prazo de producao.
   --------------------------------------------------------------------------- */
.catalog-shell:has(.catalog-product-page) .catalog-footer {
  padding-bottom: 10.5rem;
}

@media (min-width: 768px) {
  .catalog-shell:has(.catalog-product-page) .catalog-footer {
    padding-bottom: 6.5rem;
  }
}


/* ---------------------------------------------------------------------------
   Barra de tempo dos avisos da loja (o mesmo cartao usado na agenda do admin).
   Encolhe da esquerda para a direita ao longo da duracao, entao o aviso nao
   some de surpresa no meio da leitura.
   --------------------------------------------------------------------------- */
@keyframes ks-aviso-tempo {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [style*="ks-aviso-tempo"] {
    animation: none !important;
  }
}

/* A loja aberta por trás da live (components/live/MarcaDentroDaLive.tsx):
   os botões flutuantes somem, o canto é da janelinha da live. */
html[data-dentro-da-live] [data-flutuante-da-loja] { display: none !important; }

/* Seção com fundo escuro (editor da loja, "Fundo da seção", migration 199):
   os textos ficam brancos. O que está dentro de um cartão ou botão (algo com
   fundo próprio) continua com a cor dele. components/home/CaixaDaSecao.tsx */
[data-ks-texto-claro] :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, label, small, strong, em, b, span, a, summary):not([data-ks-texto-claro] :is([class*="bg-"], [style*="background"]) *):not([class*="bg-"]):not([style*="background"]) {
  color: #fff !important;
}