/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* =========================================
   Barra / Shortcode de CEP (estilo Artwalk)
   ========================================= */
.vapers-cep-bar {
    width: 100%;
    padding: 8px 15px 12px;
    background: transparent;
    border-bottom: none;
    display: flex;
    justify-content: center;
    z-index: 50;
}

/* “Botão” que fica sob o header */
.vapers-cep-trigger {
    max-width: 720px;
    border-radius: 999px;
    background: #ffffff00;
    padding: 7px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-family: 'Oxygen';
    line-height: 1.3;
    color: #171718;
}

.vapers-cep-trigger-icon {
    font-size: 16px;
}

.vapers-cep-trigger-text {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vapers-cep-trigger-arrow {
    font-size: 16px;
}

/* Mensagem de status (usada dentro do modal) */
.vapers-cep-status {
    font-size: 12px;
    margin-top: 6px;
    color: #000000;
    text-align: center;
}

.vapers-cep-status.is-error {
    color: #e60000;
}

/* -----------------------------------------
   Modal de CEP
   ----------------------------------------- */
.vapers-cep-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    z-index: 9998;
}
.vapers-cep-overlay.is-open {
    display: block;
}

.vapers-cep-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.vapers-cep-modal.is-open {
    display: flex;
}

.vapers-cep-modal-content {
    width: 90%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 22px 20px;
    position: relative;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}

.vapers-cep-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.vapers-cep-modal-close:hover {
    background: transparent;
}

.vapers-cep-modal-title {
    font-size: 35px;
    font-family: 'Oswald';
    font-weight: 700;
    margin-bottom: 6px;
    text-align: center;
    color: #000000;
}

.vapers-cep-modal-text {
    font-size: 14px;
    color: #555;
    text-align: center;
    margin-bottom: 18px;
}

.vapers-cep-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vapers-cep-form label span {
    font-size: 13px;
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
    text-align: center;
}

.vapers-cep-input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #000000;
    color: #000000;
    text-align: center;
    font-size: 15px;
}

.vapers-cep-button {
    margin-top: 4px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 999px;
    border: none;
    background: #000000;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vapers-cep-button:hover {
    opacity: 0.9;
    background: #272727;
    color: #fff;
}

/* =========================================
   Tag de entrega rápida (Lalamove)
   ========================================= */

/* Tarja padrão em produtos (home, loja, categorias de produtos)
   -> aparece como faixa ABAIXO da imagem, sem sobrepor */
.vapers-slot-tag,
.vapers-delivery-tag {
    position: static;
    display: block;
    width: 100%;
    background: #e60000;
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 6px 8px;
    line-height: 1.2;
    border-radius: 0;
    margin: 0;
    pointer-events: none;
}

/* NÃO mostrar tarja em blocos de categoria (carrossel da home, etc.) */
.product-category .vapers-slot-tag,
.product-category .vapers-delivery-tag,
.wrapp-category .vapers-slot-tag,
.wrapp-category .vapers-delivery-tag {
    display: none !important;
}

/* Não aplicar tarja em blocos de categoria (sem preço) */
.product-wrapper:not(:has(.price)) .vapers-slot-tag,
.product-wrapper:not(:has(.price)) .vapers-delivery-tag {
    display: none !important;
}

/* Ajustes responsivos das tarjas em lista */
@media (max-width: 480px) {
  .vapers-slot-tag,
  .vapers-delivery-tag {
      font-size: 10px;
      padding: 5px 6px;
  }
}

/* =========================================
   PÁGINA DE PRODUTO (SINGLE)
   ========================================= */

/* Esconde tarjas padrão coladas na imagem */
body.single-product .woocommerce-product-gallery .vapers-slot-tag,
body.single-product .woocommerce-product-gallery .vapers-delivery-tag,
body.single-product .wd-single-gallery .vapers-slot-tag,
body.single-product .wd-single-gallery .vapers-delivery-tag {
    display: none !important;
}

/* Garante que a galeria não corte nada */
body.single-product .woocommerce-product-gallery,
body.single-product .wd-single-gallery {
    overflow: visible;
}

/* Tarja única na página de produto
   -> aparece ACIMA da imagem, como um bloco normal,
   com bordas arredondadas (igual aos prints) */
.vapers-delivery-tag-single {
    position: static;
    display: block;
    width: 100%;
    background: #e60000;
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 15px 12px;
    line-height: 1.2;
    margin-bottom: 12px;
    border-radius: 8px;
    pointer-events: none;
}

@media (max-width: 480px) {
  .vapers-delivery-tag-single {
      font-size: 17px;
      padding: 15px 10px;
      border-radius: 8px;
  }
}

/* Remove qualquer cor de hover e aplica efeito sutil de zoom */
.vapers-cep-trigger.no-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: #fff !important;
}

.vapers-cep-trigger.no-hover:hover {
  background: #fff !important; /* mantém o fundo branco */
  transform: scale(1.02);       /* zoom leve */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* sombra sutil */
}

.vapers-cep-trigger.no-hover:active {
  transform: scale(0.99); /* leve compressão ao clicar */
  box-shadow: none;
}

/* =========================================
   Popup igual ao desktop em todos os formatos
   (colar após seu CSS atual)
   ========================================= */
:root{
  --cep-modal-w: 420px;           /* largura “desktop” */
  --cep-modal-pad-x: 22px;
  --cep-modal-pad-y: 24px;
  --cep-title-size: 35px;
  --cep-text-size: 14px;
  --cep-input-size: 15px;
  --cep-btn-size: 13px;
}

/* Garante que o modal fique acima de qualquer barra/aviso do tema */
.vapers-cep-overlay{ z-index: 99998 !important; }
.vapers-cep-modal  { z-index: 99999 !important; }

/* Evita herança do tema dentro do modal (bordas, fontes, etc.) */
.vapers-cep-modal *{ box-sizing: border-box; font-family: inherit; }
.vapers-cep-modal input,
.vapers-cep-modal button{
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

/* Mesma “caixa” em todas as telas; limita a 90% da viewport */
.vapers-cep-modal-content{
  width: min(90vw, var(--cep-modal-w));
  max-width: var(--cep-modal-w);
  padding: var(--cep-modal-pad-y) var(--cep-modal-pad-x) calc(var(--cep-modal-pad-y) - 4px);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

/* Tipografia fixa com leve adaptação (não encolhe demais) */
.vapers-cep-modal-title{
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, var(--cep-title-size));
  line-height: 1.05;
  margin-bottom: 6px;
  text-align: center;
  color: #000000;
}

.vapers-cep-modal-text{
  font-size: clamp(13px, 2.5vw, var(--cep-text-size));
  color: #555;
  text-align: center;
  margin-bottom: 18px;
}

/* Form idêntico ao desktop */
.vapers-cep-form{ display: flex; flex-direction: column; gap: 10px; }
.vapers-cep-form label span{
  font-size: clamp(12px, 2.4vw, 13px);
  font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
}

/* Campo: preserva mesmas medidas + centralizado */
.vapers-cep-input{
  width: 100%;
  height: auto;
  padding: 10px 12px;                          /* ligeiro ajuste p/ todos formatos */
  border-radius: 8px;
  border: 1px solid #000;
  color: #000;
  background: #fff;
  text-align: center;
  font-size: clamp(14px, 2.8vw, var(--cep-input-size));
  line-height: 1.2;
}

/* Botão: igual desktop; não deixa o tema alterar cores/hover */
.vapers-cep-button{
  width: 100%;
  padding: 12px 14px;
  border-radius: 999px;
  border: none !important;
  background: #000000 !important;
  color: #fff !important;
  font-weight: 700;
  font-size: clamp(12px, 2.6vw, var(--cep-btn-size));
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.vapers-cep-button:hover{
  opacity: .9;
  background: #212121 !important;
  color: #fff !important;
}

/* Ícone de fechar sempre no mesmo ponto */
.vapers-cep-modal-close{
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 20px;
}

/* Status centralizado e legível em qualquer tela */
.vapers-cep-status{
  font-size: clamp(12px, 2.6vw, 12px);
  margin-top: 6px; text-align: center;
}

/* Mantém overlay e modal centralizados em telas pequenas também */
.vapers-cep-overlay{ display: none; }
.vapers-cep-overlay.is-open{ display: block; }
.vapers-cep-modal{
  display: none; align-items: center; justify-content: center;
  inset: 0; position: fixed;
}
.vapers-cep-modal.is-open{ display: flex; }

/* Opcional: se quiser 100% idêntico mesmo em celulares muito estreitos,
   “escala” o conteúdo em vez de quebrar a linha. */
@media (max-width: 360px){
  .vapers-cep-modal-content{
    transform: scale(.94);
    transform-origin: center;
  }
}

/* Evita que estilos do Woodmart para inputs/form afetem o modal */
.vapers-cep-modal .input-text,
.vapers-cep-modal input[type="text"],
.vapers-cep-modal input[type="search"]{
  background: #fff !important;
  border: 1px solid #000 !important;
  box-shadow: none !important;
}

/* ===== Forçar input do CEP preto (texto + borda) em todos os formatos ===== */

/* evita que o tema/herança mude contraste dentro do modal */
.vapers-cep-modal{ color-scheme: light; }

/* base */
.vapers-cep-modal .vapers-cep-input,
.vapers-cep-form .vapers-cep-input,
.vapers-cep-modal input.vapers-cep-input{
  color:#000 !important;
  border:1px solid #000 !important;
  background:#fff !important;
  caret-color:#000 !important;
  -webkit-text-size-adjust:100%;
}

/* placeholder */
.vapers-cep-modal .vapers-cep-input::placeholder{
  color:#222 !important;
  opacity:1 !important;
}

/* foco/ativo/hover sempre com borda preta */
.vapers-cep-modal .vapers-cep-input:focus,
.vapers-cep-modal .vapers-cep-input:focus-visible,
.vapers-cep-modal .vapers-cep-input:hover{
  outline:none !important;
  border-color:#000 !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,.08) !important; /* brilho discreto opcional */
}

/* desabilitado ainda preto (texto e borda) */
.vapers-cep-modal .vapers-cep-input:disabled{
  color:#000 !important;
  border-color:#000 !important;
  background:#f7f7f7 !important;
  opacity:.75;
}

/* Safari/Chrome autofill: mantém texto preto e fundo branco */
.vapers-cep-modal .vapers-cep-input:-webkit-autofill{
  -webkit-text-fill-color:#000 !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  border:1px solid #000 !important;
}

/* tipos equivalentes que o tema possa aplicar */
.vapers-cep-modal input[type="text"].vapers-cep-input,
.vapers-cep-modal input[type="search"].vapers-cep-input,
.vapers-cep-modal input[type="tel"].vapers-cep-input{
  color:#000 !important;
  border-color:#000 !important;
}

/* garante contraste também no zoom extremo mobile */
@media (max-width: 360px){
  .vapers-cep-modal .vapers-cep-input{
    border-width:1.2px !important;
  }
}

/* =======================================================
   BLOCO 3/3 – Ajustes Dinâmicos JS (Banner, Single, Popup)
   ======================================================= */

/* Oculta blocos dinâmicos até existir CEP definido */
.vapers-banner-slot,
.vapers-single-slot,
.vapers-popup-block {
  display: none;
}
body.has-cep .vapers-banner-slot,
body.has-cep .vapers-single-slot,
body.has-cep .vapers-popup-block {
  display: block;
}

/* ---------------------------
   SINGLE PRODUCT
   --------------------------- */
.vapers-single-slot {
  margin-bottom: 14px;
}
body.single-product .vapers-single-slot {
  width: 100%;
  text-align: center;
}

/* ---------------------------
   POPUP (ajuste de largura)
   --------------------------- */
.vapers-popup-block {
  width: 100%;
  max-width: 420px;
  margin: 12px auto 0;
  padding: 0;
  box-sizing: border-box;
}
.vapers-cep-modal .vapers-popup-block {
  text-align: center;
}
.vapers-cep-status > .vapers-popup-block > * {
  max-width: 100%;
}

/* Animação leve de fade quando bloco for exibido */
.vapers-popup-block {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
body.has-cep .vapers-popup-block {
  opacity: 1;
  transform: none; 
  max-width: 100%;
}

/* Garante que textos longos não ultrapassem o container */
.vapers-popup-block * {
  word-break: break-word;
}

/* ---------------------------
   TAGS DE ENTREGA (ajuste fino)
   --------------------------- */
.vapers-delivery-tag-single {
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}

/* ---------------------------
   RESPONSIVIDADE GERAL
   --------------------------- */
@media (max-width: 480px) {
  .vapers-popup-block {
    max-width: 90%;
  }
}