/* Printoy — identidade visual conforme Guia de Marca v1.0
   (Funcionalidades/Printoy-Guia-de-Marca-v1.pdf) */

:root {
  --pt-laranja: #F0813F;
  --pt-terracota: #903010;
  --pt-azul-lilas-start: #8FA0E0;
  --pt-azul-lilas-end: #A98FE0;
  --pt-marinho: #303070;
  --pt-grafite: #505050;
  --pt-ambar: #F9A03C;
  --pt-branco: #FFFFFF;
  --pt-cinza-claro: #F5F5F5;

  --pt-font-heading: 'Baloo 2', system-ui, sans-serif;
  --pt-font-subheading: 'Nunito', system-ui, sans-serif;
  --pt-font-body: 'Inter', system-ui, sans-serif;

  --pt-gradient-laranja: linear-gradient(135deg, var(--pt-laranja), var(--pt-ambar));
  --pt-gradient-lilas: linear-gradient(135deg, var(--pt-azul-lilas-start), var(--pt-azul-lilas-end));

  --pt-radius: 14px;
}

body {
  font-family: var(--pt-font-body);
  color: #262626;
  background-color: var(--pt-branco);
}

h1, h2, h3, h4, .pt-heading {
  font-family: var(--pt-font-heading);
  font-weight: 800;
  color: var(--pt-marinho);
}

.pt-subheading, .navbar, .btn, .badge, label, .form-label {
  font-family: var(--pt-font-subheading);
}

a {
  color: var(--pt-marinho);
}

/* ---------- Header (padrão Mercado Livre: busca central + faixa de categorias fixa) ---------- */
.pt-header {
  background: var(--pt-branco);
  border-bottom: 1px solid var(--pt-cinza-claro);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.pt-header-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.pt-logo {
  order: 1;
}

.pt-logo img {
  height: 48px;
  width: auto;
}

.pt-header-actions {
  order: 2;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.pt-search {
  order: 3;
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  border: 2px solid var(--pt-marinho);
  border-radius: 999px;
  overflow: hidden;
  background: var(--pt-branco);
}

@media (min-width: 992px) {
  .pt-search {
    order: 2;
    flex: 1 1 auto;
    max-width: 640px;
  }

  .pt-header-actions {
    order: 3;
    margin-left: 0;
  }
}

.pt-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 0.55rem 1rem;
  font-family: var(--pt-font-body);
  font-size: 0.95rem;
}

.pt-search-btn {
  flex-shrink: 0;
  width: 44px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--pt-marinho);
  color: var(--pt-branco);
  font-size: 1.05rem;
}

.pt-search-btn:hover {
  background: var(--pt-laranja);
}

.pt-header-action {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.3rem 0.6rem;
  border-radius: 10px;
  color: var(--pt-marinho);
  text-decoration: none;
  font-family: var(--pt-font-subheading);
  font-size: 0.72rem;
  font-weight: 700;
}

.pt-header-action i {
  font-size: 1.35rem;
}

.pt-header-action span {
  display: none;
}

@media (min-width: 768px) {
  .pt-header-action span {
    display: block;
  }
}

.pt-header-action:hover {
  background: var(--pt-cinza-claro);
  color: var(--pt-marinho);
}

/* O botão do menu mobile não fica dentro de um <nav class="navbar">, então não
   herda a variável CSS que o Bootstrap usa pra desenhar o ícone das 3 linhas
   (--bs-navbar-toggler-icon-bg, definida só em .navbar) — sem isso o botão
   renderiza sem borda e com o ícone invisível. Definindo aqui do zero. */
.pt-header-actions .navbar-toggler {
  border: none;
  padding: 0.3rem 0.5rem;
  box-shadow: none;
}

.pt-header-actions .navbar-toggler-icon {
  width: 1.3rem;
  height: 1.3rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23303070' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.pt-cart-badge {
  position: absolute;
  top: -2px;
  right: 2px;
  background: var(--pt-laranja);
  color: var(--pt-branco);
  font-family: var(--pt-font-subheading);
  font-weight: 800;
  font-size: 0.65rem;
  line-height: 1.3;
  border-radius: 999px;
  padding: 0.05rem 0.35rem;
}

/* Faixa de categorias sempre visível, como no Mercado Livre — fica dentro do
   próprio <header> (que já é sticky), então sobe/desce junto com ele em vez
   de precisar de sticky próprio. */
.pt-category-strip {
  border-top: 1px solid var(--pt-cinza-claro);
}

.pt-category-strip-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 0.55rem 0;
}

.pt-category-link {
  flex-shrink: 0;
  color: var(--pt-grafite);
  font-family: var(--pt-font-subheading);
  font-weight: 700;
  font-size: 0.83rem;
  text-decoration: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0 0 2px;
}

.pt-category-link:hover {
  color: var(--pt-marinho);
  border-color: var(--pt-laranja);
}

/* O dropdown de categorias (em vez de listar todas soltas na faixa) pode
   crescer bastante com o catálogo — trava a altura e rola por dentro em vez
   de estourar pra fora da tela numa loja com muitas categorias. */
.pt-category-strip .dropdown-menu {
  max-height: 60vh;
  overflow-y: auto;
}

/* O <div class="dropdown"> que envolve o trigger "Categorias" não tem a classe
   .pt-category-link (só o <a> interno tem) — sem isso ele herda o
   font-size/line-height padrão do documento (16px/24px) em vez de 0.83rem/~20px,
   ficando ~1px mais alto que os <a> vizinhos e desalinhando verticalmente o
   texto na faixa. display:flex remove o "strut" de altura de linha (que é
   calculado a partir da fonte do próprio elemento, não do filho) e faz a div
   assumir exatamente a altura do <a> interno. */
.pt-category-strip-inner .dropdown {
  display: flex;
  align-items: center;
}

.pt-mobile-menu a {
  display: block;
  padding: 0.55rem 0;
  color: var(--pt-marinho);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--pt-cinza-claro);
}

/* ---------- Botões ---------- */
.btn-pt-primary {
  background: var(--pt-gradient-laranja);
  border: none;
  color: var(--pt-branco);
  font-weight: 800;
  border-radius: 999px;
  padding: 0.65rem 1.6rem;
}

.btn-pt-primary:hover {
  filter: brightness(1.05);
  color: var(--pt-branco);
}

.btn-pt-secondary {
  background: var(--pt-branco);
  border: 2px solid var(--pt-marinho);
  color: var(--pt-marinho);
  font-weight: 800;
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
}

.btn-pt-secondary:hover {
  background: var(--pt-cinza-claro);
  color: var(--pt-marinho);
}

/* ---------- Hero (Home) ---------- */
.pt-hero {
  background: linear-gradient(180deg, #FFF8F0 0%, #FFFFFF 100%);
  padding: 2.5rem 0;
}

.pt-hero h1 {
  font-size: 2.6rem;
}

.pt-hero .pt-slogan {
  font-family: var(--pt-font-subheading);
  font-weight: 800;
  color: var(--pt-laranja);
  font-size: 1.2rem;
}

/* ---------- Breadcrumb e barra de filtros/ordenação do catálogo (padrão Mercado Livre) ---------- */
.pt-breadcrumb {
  font-size: 0.8rem;
  color: var(--pt-grafite);
  margin-bottom: 1rem;
}

.pt-breadcrumb a {
  color: var(--pt-grafite);
  text-decoration: none;
}

.pt-breadcrumb a:hover {
  color: var(--pt-marinho);
  text-decoration: underline;
}

.pt-breadcrumb .pt-breadcrumb-sep {
  margin: 0 0.35rem;
  opacity: 0.5;
}

.pt-catalog-toolbar {
  background: var(--pt-cinza-claro);
  border-radius: 10px;
  padding: 0.75rem 1rem;
}

.pt-filter-block {
  border: 1px solid var(--pt-cinza-claro);
  border-radius: 10px;
  padding: 1rem;
}

.pt-filter-block h6 {
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.pt-filter-block a {
  color: var(--pt-grafite);
  text-decoration: none;
  font-size: 0.9rem;
}

.pt-filter-block a:hover {
  color: var(--pt-marinho);
}

/* ---------- Cards de categoria ---------- */
.pt-category-card {
  border-radius: var(--pt-radius);
  overflow: hidden;
  text-decoration: none;
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--pt-gradient-lilas);
  border: 1px solid var(--pt-cinza-claro);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.pt-category-card:hover {
  box-shadow: 0 8px 24px rgba(48, 48, 112, 0.12);
  transform: translateY(-2px);
}

.pt-category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pt-category-card .pt-category-name {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(0deg, rgba(48, 48, 112, 0.85), transparent);
  color: var(--pt-branco);
  font-family: var(--pt-font-heading);
  font-weight: 800;
}

/* ---------- Cards de produto (grade densa, preço em destaque — padrão Mercado Livre) ---------- */
.pt-product-card {
  background: var(--pt-branco);
  border: 1px solid var(--pt-cinza-claro);
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.pt-product-card:hover {
  box-shadow: 0 8px 24px rgba(48, 48, 112, 0.12);
  transform: translateY(-2px);
}

.pt-card-media {
  position: relative;
  display: block;
}

.pt-card-media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--pt-cinza-claro);
}

.pt-card-flag {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  font-family: var(--pt-font-subheading);
  font-weight: 800;
  font-size: 0.68rem;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}

.pt-card-flag-destaque {
  background: var(--pt-ambar);
  color: var(--pt-branco);
}

.pt-card-flag-esgotado {
  background: var(--pt-branco);
  color: var(--pt-terracota);
  border: 1.5px solid var(--pt-terracota);
}

.pt-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 0.85rem 0.9rem;
}

.pt-card-title {
  font-family: var(--pt-font-body);
  font-weight: 500;
  font-size: 0.85rem;
  color: #262626;
  text-decoration: none;
  min-height: 2.3em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pt-card-title:hover {
  color: var(--pt-marinho);
}

.pt-card-price {
  font-family: var(--pt-font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  color: #262626;
  margin-top: 0.1rem;
}

.pt-card-rating {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  margin-top: auto;
  padding-top: 0.2rem;
}

.pt-card-stars {
  color: var(--pt-ambar);
  letter-spacing: 1px;
}

.pt-card-rating-count {
  color: var(--pt-grafite);
}

/* ---------- Badges ---------- */
.pt-badge-esgotado {
  color: var(--pt-terracota);
  border: 1.5px solid var(--pt-terracota);
  background: transparent;
  font-weight: 800;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
}

.pt-badge-destaque {
  color: var(--pt-branco);
  background: var(--pt-ambar);
  font-weight: 800;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
}

.pt-promo-carousel img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

@media (max-width: 576px) {
  .pt-promo-carousel img {
    height: 180px;
  }
}

.pt-label-pill {
  display: inline-block;
  background: var(--pt-cinza-claro);
  color: var(--pt-grafite);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.8rem;
}

.pt-status-badge {
  font-family: var(--pt-font-subheading);
  font-weight: 700;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  display: inline-block;
  white-space: nowrap;
}

.pt-status-aguardando_pagamento { background: #FDEBD8; color: var(--pt-terracota); }
.pt-status-pagamento_confirmado { background: #E7ECFB; color: var(--pt-marinho); }
.pt-status-em_producao { background: #FFF3D6; color: #8A5A00; }
.pt-status-pronto_para_envio { background: #E9E2FB; color: #5B3FA0; }
.pt-status-enviado { background: #E0ECFF; color: #1F4FA0; }
.pt-status-entregue { background: #E3F5E6; color: #1E7A34; }
.pt-status-cancelado { background: #F5D9D1; color: var(--pt-terracota); }

.pt-status-rascunho { background: var(--pt-cinza-claro); color: var(--pt-grafite); }
.pt-status-ativo { background: #E3F5E6; color: #1E7A34; }
.pt-status-inativo { background: #F5D9D1; color: var(--pt-terracota); }

.pt-status-novo { background: #FDEBD8; color: var(--pt-terracota); }
.pt-status-em_andamento { background: #FFF3D6; color: #8A5A00; }
.pt-status-proposta_enviada { background: #E7ECFB; color: var(--pt-marinho); }
.pt-status-convertido { background: #E3F5E6; color: #1E7A34; }
.pt-status-sem_interesse { background: var(--pt-cinza-claro); color: var(--pt-grafite); }
.pt-status-arquivado { background: var(--pt-cinza-claro); color: var(--pt-grafite); }

.pt-status-nao_lida { background: #FDEBD8; color: var(--pt-terracota); }
.pt-status-lida { background: #E7ECFB; color: var(--pt-marinho); }
.pt-status-respondida { background: #E3F5E6; color: #1E7A34; }

/* ---------- Rodapé ---------- */
.pt-footer {
  background: var(--pt-cinza-claro);
  padding: 3rem 0 1.5rem;
  margin-top: 4rem;
}

.pt-footer h6 {
  font-family: var(--pt-font-heading);
  color: var(--pt-marinho);
}

.pt-footer a {
  color: var(--pt-grafite);
  text-decoration: none;
}

.pt-footer a:hover {
  color: var(--pt-laranja);
}

.pt-footer .pt-footer-logo img {
  height: 72px;
}

/* ---------- Autopreenchimento de CEP ---------- */
.pt-cep-loading {
  cursor: progress;
  background-image: linear-gradient(90deg, transparent, rgba(48, 48, 112, 0.06), transparent);
  background-size: 200% 100%;
  animation: pt-cep-loading-sweep 1s linear infinite;
}

@keyframes pt-cep-loading-sweep {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ---------- Checkout steps ---------- */
.pt-checkout-steps {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.pt-checkout-step {
  flex: 1;
  text-align: center;
  padding-bottom: 0.5rem;
  border-bottom: 4px solid var(--pt-cinza-claro);
  color: var(--pt-grafite);
  font-weight: 700;
}

.pt-checkout-step.active {
  border-color: var(--pt-laranja);
  color: var(--pt-laranja);
}

.pt-checkout-step.done {
  border-color: var(--pt-grafite);
  color: var(--pt-grafite);
}

/* ---------- Utilidades ---------- */
.pt-empty-state {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--pt-grafite);
}

/* ---------- WhatsApp ---------- */
.pt-whatsapp-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1040;
  background: #25D366;
  color: white;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  font-size: 1.6rem;
  text-decoration: none;
}

.pt-whatsapp-float:hover {
  color: white;
  filter: brightness(1.05);
}

.pt-contact-banner {
  position: fixed;
  right: 1.25rem;
  bottom: 5.5rem;
  z-index: 1039;
  max-width: 280px;
  background: var(--pt-branco);
  border: 1px solid var(--pt-cinza-claro);
  border-radius: var(--pt-radius);
  box-shadow: 0 8px 24px rgba(48, 48, 112, 0.15);
  padding: 1rem;
}

.pt-contact-banner .btn-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

/* ---------- Editor rich text (admin) ---------- */
.pt-rich-editor {
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  overflow: hidden;
}

.pt-rich-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.5rem;
  background: var(--pt-cinza-claro);
  border-bottom: 1px solid #ced4da;
  flex-wrap: wrap;
}

.pt-rich-editor-btn {
  width: 2rem;
  height: 2rem;
  border: 1px solid transparent;
  border-radius: 0.3rem;
  background: transparent;
  color: var(--pt-marinho);
  line-height: 1;
}

.pt-rich-editor-btn:hover {
  background: var(--pt-branco);
  border-color: #ced4da;
}

.pt-rich-editor-size {
  height: 2rem;
  font-size: 0.85rem;
  border-radius: 0.3rem;
  border: 1px solid #ced4da;
  padding: 0 0.3rem;
}

.pt-rich-editor-color {
  width: 2rem;
  height: 2rem;
  padding: 0.15rem;
  border: 1px solid #ced4da;
  border-radius: 0.3rem;
  background: var(--pt-branco);
}

.pt-rich-editor-surface {
  min-height: 160px;
  /* Sem isso, o editor cresce sem limite conforme o admin digita — empurra o
     resto do formulário para baixo em vez de rolar internamente. */
  max-height: 420px;
  overflow-y: auto;
  padding: 0.6rem 0.75rem;
  border: none;
  border-radius: 0;
}

.pt-rich-editor-surface:focus {
  outline: none;
  box-shadow: none;
}

/* ---------- Conteúdo rich text (descrição de produto, páginas de serviço) ---------- */
.pt-rich-content p {
  margin-bottom: 0.75rem;
}

.pt-rich-content p:last-child {
  margin-bottom: 0;
}

.pt-rich-content ul,
.pt-rich-content ol {
  margin-bottom: 0.75rem;
  padding-left: 1.25rem;
}

/* ---------- Proteção contra cópia casual de mídia (fotos/vídeos do site) ----------
   Complementa initMediaProtection() em main.js (que bloqueia clique-direito e
   arrastar): aqui é o -webkit-touch-callout, que desliga o menu de "Salvar
   Imagem"/"Copiar" que aparece no toque longo em iOS/Safari mobile — não tem
   equivalente em JS. Escopado a <main> pelo mesmo motivo do JS: nunca afeta o
   painel admin. */
main img,
main video {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-drag: none;
}