/* =====================================================================
   PALETA – personalize aqui
   ===================================================================*/
:root{
  --brand-color:#05376E;
  --navbar-bg:#05376E;
  --discount-bg:#05376E;
  --discount-text:#ffffff;
  --bg-page:#f3f5f7;
  --radius:1rem;
  font-family:'Nunito',sans-serif;
}

body {
  background:var(--bg-page);
  padding-top: 56px;
}

/* Esconde o body até o JS remover 'js-loading' */
body.js-loading > :not(.loader-overlay) { visibility: hidden; }
.loader-overlay {
  position: fixed; top: 0; left: 0; width:100%; height:100%;
  background:#fff; display:flex; align-items:center; justify-content:center;
  z-index:2000;
}
body:not(.js-loading) .loader-overlay { display:none; }

/* CABEÇALHO -------------------------------------------------------*/
.app-header{
  background:var(--navbar-bg);
  padding:.75rem 0;
  color:#fff;
}
.app-header .nav-link{color:#fff;font-weight:600;}
.app-header .nav-link:hover{opacity:.8;}
.text-brand{color:var(--brand-color);}

/* título maior e não clicável -----------------------------------*/
.site-title{
  font-size:1.35rem;
  cursor:default;
  white-space:nowrap;
}
@media (max-width: 576px){
  .site-title{font-size:1.1rem;}
}

/* BOTÕES ----------------------------------------------------------*/
.btn-brand{
  background:var(--brand-color)!important;
  color:#fff!important;
  border:none;
  transition:all .25s;
}
.btn-brand:hover{transform:translateY(-1px);filter:brightness(1.05);}

.btn-outline-brand{
  border:1px solid var(--brand-color)!important;
  color:var(--brand-color)!important;
  background:transparent!important;
  transition:all .25s;
}
.btn-outline-brand:hover{
  background:var(--brand-color)!important;
  color:#fff!important;
}

/* FILTRO DE LOJAS -------------------------------------------------*/
#filters .store-pill{
  background:#fff; border:1px solid #e5e5e5; border-radius:3rem;
  padding:.6rem 1.1rem; display:flex; align-items:center; gap:.4rem;
  font-weight:600; cursor:pointer; transition:all .25s;
}
#filters .store-pill.active,
#filters .store-pill:hover{
  background:var(--brand-color); color:#fff; border-color:var(--brand-color);
}
#filters img{height:24px;width:24px;}

/* SIDEBAR (WhatsApp) ---------------------------------------------*/
.promo-sidebar{
  position:fixed; bottom:2rem; right:2rem; width:260px; background:#fff;
  border-radius:var(--radius); padding:1.5rem; box-shadow:0 4px 12px rgba(0,0,0,.15);
  z-index:1050;
}

/* CARD DE OFERTA --------------------------------------------------*/
.card-oferta{
  background:#fff; border:none; border-radius:var(--radius);
  box-shadow:0 6px 16px rgba(0,0,0,.05); transition:transform .3s; height:100%;
}
.card-oferta:hover{transform:translateY(-6px);}
.card-oferta .img-wrapper{position:relative;}

.product-image{
  border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);
  height:220px; object-fit:contain;
}

/* badge % desconto ------------------------------------------------*/
.badge-desconto{
  position:absolute; top:.6rem; right:.6rem;
  background:var(--discount-bg); color:var(--discount-text);
  font-size:.8rem; font-weight:700; padding:.35rem .7rem; border-radius:2rem;
}

/* badge CUPOM -----------------------------------------------------*/
.cupom-badge{
  background:#fff5fa; color:var(--brand-color);
  font-size:.95rem; font-weight:700;
  border:1px dashed var(--brand-color);
  padding:.35rem .7rem; border-radius:.4rem;
  display:inline-block; cursor:pointer; user-select:none;
}

/* linha de cupom: altura fixa p/ alinhamento de todos os cards ----*/
.coupon-line{min-height:1.9rem/*~28-30px*/;}
.cupom-badge.copied{background:#e7f9e9;border-color:#54b168;color:#54b168;}

/* badge tempo -----------------------------------------------------*/
.timer-badge{
  position:absolute; bottom:.6rem; left:.6rem;
  font-size:.75rem; background:rgba(0,0,0,.7); color:#fff;
  padding:.25rem .6rem; border-radius:.4rem; pointer-events:none; z-index:2;
}

/* logo loja -------------------------------------------------------*/
.store-logo{
  position:absolute; top:.6rem; left:.6rem;
  width:38px; height:38px; border-radius:50%;
  background:#fff; padding:3px; box-shadow:0 2px 6px rgba(0,0,0,.1);
}

.preco-original{text-decoration:line-through;opacity:.7;font-size:.95rem;}
.preco-original-related{text-decoration:line-through;opacity:.7;font-size:.85rem;}

.cupom-badge{
  background:#fff5fa; color:var(--brand-color);
  font-size:.75rem; border:1px dashed var(--brand-color);
}

/* nome do produto – 2 linhas -------------------------------------*/
.product-name{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:3rem;
}

/* PÁGINA PRODUTO --------------------------------------------------*/
.image-wrapper{
  background:#fff; border-radius:var(--radius); padding:1rem;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
}
.main-image{object-fit:contain;border-radius:var(--radius);}
.highlight-box{
  background:#fff; border-radius:var(--radius); padding:2rem;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
}

/* ================================================================
   MOBILE SEARCH – full-width, sem laterais e sem cantos
   ================================================================*/
@media (max-width: 767.98px){
  .mobile-search{width:100%;padding:0;margin-top:1rem;}
  .mobile-search .input-group{box-shadow:none;border-radius:0;width:100%;}
  .mobile-search .input-group-text{border:none!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important;background:#fff;}
  .mobile-search .form-control{border:none!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important;box-shadow:none!important;}
  .card-oferta .text-brand{font-size:1.3rem;}
  .card-oferta .text-brand-related{font-size:1.1rem;}
  .card-oferta .preco-original{font-size:1.1rem;}
  .cupom-badge{font-size:1.05rem;}

  /* NOVAS REGRAS PARA PÁGINA DE PRODUTO */
  .highlight-box .h3.text-brand {
    font-size: 2rem; line-height: 1.2;
  }
  .highlight-box .cupom-badge {
    font-size: 1.1rem; padding: .5rem .9rem;
  }
}

/* aumenta font-size do cupom */
.highlight-box .cupom-badge {
  font-size: 1.1rem; padding: .4rem .8rem;
}

/* aside WhatsApp */
.promo-sidebar {
  position: fixed; bottom: 2rem; right: 2rem; width: 260px; background: #fff;
  border-radius: var(--radius); padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.15); z-index: 1050;
}
.promo-sidebar .sidebar-close { position: absolute; top: .5rem; right: .5rem; }
.promo-sidebar .promo-logo { font-size: 2rem; color: #25D366; display: block; margin-bottom: 1rem; }
.promo-sidebar.collapsed .promo-content,
.promo-sidebar.collapsed .sidebar-close { display: none; }

/* ============================== */
/* Loja (página de produto)       */
/* ============================== */
.store-info{
  display:flex; align-items:center; gap:.6rem; margin-bottom:.25rem;
}
.store-info .store-chip-logo{
  width:32px;height:32px;border-radius:50%;
  background:#fff;padding:3px; box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.store-info .store-name{ font-weight:700; text-transform:capitalize; }

.coupon-hint{
  font-size:.9rem; color:#6c757d;
  display:flex; align-items:flex-start; gap:.5rem;
}
.coupon-hint i{ margin-top:.15rem; }