/* ===== Paleta ===== */
:root{
  --bg-black:#0B0B0C; --bg-onyx:#111214; --text:#F4F4F5; --muted:#BABABA;
  --white:#FFFFFF; --offwhite:#FAFAFA;
  --gold:#C9A227; --gold-2:#B9931A; --gold-3:#E0BE3A;
  --ring:rgba(201,162,39,0.45);
  --ink-1:#ffffff; --ink-2:#bbb;
  --bg-1:#000; --bg-2:#252424;
  --neon:#E0BE3A; --neon-2:#C9A227;
}

/* ===== Reset & util ===== */
*{ box-sizing:border-box }
html,body{ color:var(--bg-black) }
a, .btn, .nav-link{ transition: all .18s ease-out }
@media (prefers-reduced-motion: reduce){
  a, .btn, .nav-link, input, .card{ transition:none !important }
}
:focus-visible{ outline:2px solid var(--ring); outline-offset:2px }

/* ===== Cabeçalho ===== */
.header-premium{
  background: linear-gradient(180deg, var(--bg-black), var(--bg-onyx));
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: sticky; top: 0; z-index: 1030;
  box-shadow: 0 2px 20px rgba(0,0,0,.25);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.header-grid{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; padding-block:.75rem;
}
.brand-hero{
  height:96px; width:auto; max-width:80vw; object-fit:contain;
  filter: drop-shadow(0 0 10px rgba(212,175,55,.28)) drop-shadow(0 0 20px rgba(212,175,55,.18));
}
@media(min-width:768px){ .brand-hero{ height:120px } }
@media(min-width:992px){ .brand-hero{ height:140px } }
.brand-hero-link{ justify-self:center }
.top-nav{ justify-self:end; display:flex; align-items:center; gap:.75rem }
.header-premium .nav-link{ color: var(--muted); font-weight: 500 }
.header-premium .nav-link:hover,
.header-premium .nav-link.active,
.header-premium .nav-link:focus-visible{
  color: var(--text); outline: none
}

/* ===== Carrinho + Entrar + badge ===== */
.btn-login{
  --r:12px; border-radius:var(--r);
  padding:.45rem .85rem;
  border:1px solid rgba(22,22,22,.35);
  background: linear-gradient(180deg, rgba(212,175,55,.24), rgba(212,175,55,.10));
  color:#f2db86; text-decoration:none; font-weight:700;
  box-shadow: 0 0 .6rem rgba(212,175,55,.22), inset 0 0 .35rem rgba(212,175,55,.14);
}
.btn-login:hover,
.btn-login:focus-visible{
  border-color:var(--gold-3);
  box-shadow: 0 0 .9rem rgba(212,175,55,.28), inset 0 0 .45rem rgba(212,175,55,.18), 0 0 0 .2rem var(--ring);
  color:#fff7cf; outline: none
}
.btn-login-lg{ padding:.6rem 1.05rem; font-size:1.02rem; border-radius:14px }

.btn-cart{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:14px;
  border:1px solid rgba(22,22,22,.35);
  background:linear-gradient(180deg, rgba(212,175,55,.22), rgba(212,175,55,.08));
  box-shadow: inset 0 0 .25rem rgba(212,175,55,.28);
  color:#f2db86; text-decoration:none; position:relative;
}
.btn-cart:hover,
.btn-cart:focus-visible{
  border-color:var(--gold-3);
  box-shadow: 0 0 .6rem rgba(212,175,55,.22), inset 0 0 .35rem rgba(212,175,55,.14), 0 0 0 .2rem var(--ring);
  color:#fff7cf; outline: none
}
.btn-cart svg{ width:26px; height:26px }

/* Badge do carrinho */
.cart-badge{
  position:absolute; right:-6px; top:-6px;
  min-width: 22px; height:22px; padding:0 6px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, var(--gold-3), var(--gold));
  color:#0E0E0E; font-weight:800; font-size:.78rem;
  border:1px solid var(--gold-2);
  box-shadow: 0 0 0 3px rgba(201,162,39,.25), 0 6px 16px rgba(0,0,0,.18);
  transform: translateZ(0);
}

/* ===== Barra de Categorias ===== */
.categories-bar{
  background: var(--bg-2);
  border-top:1px solid #1e2026; border-bottom:1px solid #1e2026;
}
.cats-wrap{ display:flex; flex-wrap:wrap; gap:.5rem }
.cat-pill{
  color:#e6e0d0; text-decoration: none;
  border: 1px solid rgba(212,175,55,.28);
  border-radius: 12px;
  padding: .5rem .9rem;
  background: radial-gradient(120% 120% at 20% 10%, #1a1c21 0%, #14161b 60%, #111317 100%);
  transition: all .2s ease; font-weight: 700;
  box-shadow: 0 1px 10px rgba(0,0,0,.05);
}
.cat-pill:hover, .cat-pill.active,
.cat-pill:focus-visible{
  color:#fff7cf; border-color: rgba(212,175,55,.45);
  box-shadow: 0 0 0 3px rgba(201,162,39,.15), 0 6px 16px rgba(0,0,0,.08);
  outline: none
}

/* ===== Busca ===== */
.search-wrap{ display:flex; align-items:center; gap:.5rem }
.search-form{
  display:flex; align-items:center; gap:.5rem; padding:.35rem .6rem;
  background:#15161a; border:1px solid rgba(212,175,55,.18); border-radius:999px;
}
.search-form:focus-within{
  border-color:rgba(212,175,55,.48);
  box-shadow:0 0 .45rem rgba(212,175,55,.28), inset 0 0 .35rem rgba(212,175,55,.12);
}
.search-input{ background:transparent; border:0; outline:0; color:#eee; width:220px }
.search-input::placeholder{ color:#9a9a9a }
.search-btn{ border:0; background:transparent; color:#e9d9a0; display:inline-flex; align-items:center; justify-content:center }
.search-btn svg{ width:20px; height:20px }

/* ===== Promo ===== */
#promoSub, .promo-modal .promo-left #promoSub{ color:#ff3b30 !important }
.promo-modal.fullwidth{
  width:100%; padding:18px 0;
  background:linear-gradient(90deg,#111 0%, #222 100%); color:#fff; border-radius:0
}
.promo-modal .promo-left .fw-bold{ color:#E0BE3A }

/* ===== NEON ===== */
.neon-box{
  background:#fff; border-radius:14px; border:1px solid rgba(201,162,39,.35);
  box-shadow:
    0 0 0 1px rgba(201,162,39,.25),
    0 0 14px 2px rgba(224,190,58,.30),
    0 0 28px 6px rgba(201,162,39,.18);
}

/* ===== Filtro ===== */
.filter-panel{ width:100% }
.filter-panel.neon-box{ padding:16px }
input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%;
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-3), var(--gold));
  outline: none
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--gold-3), var(--gold));
  border: 1px solid var(--gold-2);
  box-shadow: 0 0 0 3px rgba(201,162,39,.25);
  cursor: pointer
}
input[type="range"]::-moz-range-thumb{
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--gold-3), var(--gold));
  border: 1px solid var(--gold-2);
  box-shadow: 0 0 0 3px rgba(201,162,39,.25);
  cursor: pointer
}
input[type="range"]::-moz-range-track{
  height:6px; border-radius:999px;
  background: linear-gradient(90deg, var(--gold-3), var(--gold))
}

/* ===== Cards & footer ===== */
.card{
  background: var(--white);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 18px rgba(0,0,0,.05);
  border-radius: 14px;
}
.badge-gold{
  background: linear-gradient(180deg, var(--gold-3), var(--gold));
  color: #0e0e0e; border: 1px solid var(--gold-2)
}
.hr-gold{ height:2px; border:0; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.7 }
a{ color: var(--gold-2) } a:hover{ color: var(--gold) }

/* ===== Formulários ===== */
.form-control:focus, .form-select:focus, .form-check-input:focus{
  border-color: var(--gold-2) !important;
  box-shadow: 0 0 0 .2rem var(--ring) !important;
  outline: 0
}
.form-check-input:checked{
  background-color: var(--gold-2);
  border-color: var(--gold-2)
}
.is-invalid, .form-control.is-invalid, .form-select.is-invalid{
  border-color:#dc3545 !important;
  box-shadow:0 0 0 .15rem rgba(220,53,69,.2) !important;
}

/* ===== Alertas ===== */
.alert-primary{ color:#5a4a08; background: #fff7cf; border-color: var(--gold-2) }
.alert-success{ color:#0f5132; background:#d1e7dd; border-color:#badbcc }

/* ===== Botões (dourado como padrão) ===== */
.btn-primary{
  --bs-btn-color:#0E0E0E;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--gold-2);
  --bs-btn-hover-border-color: var(--gold-3);
  --bs-btn-active-border-color: var(--gold-3);
  color:#0E0E0E;
  border:1px solid var(--gold-2);
  background: linear-gradient(180deg, var(--gold-3), var(--gold));
  box-shadow: 0 6px 14px rgba(201,162,39,.25), inset 0 0 .35rem rgba(212,175,55,.14)
}
.btn-primary:hover,
.btn-primary:focus-visible{
  color:#0B0B0C;
  background: linear-gradient(180deg, #F0D96A, var(--gold-3));
  border-color: var(--gold-3);
  box-shadow: 0 8px 18px rgba(201,162,39,.32), inset 0 0 .45rem rgba(212,175,55,.18), 0 0 0 .2rem var(--ring);
  outline: none
}
.btn-primary:active{
  color:#0B0B0C; background: linear-gradient(180deg, var(--gold-3), var(--gold));
  border-color: var(--gold-2)
}

.btn-outline-primary{
  color: var(--gold-2);
  border-color: var(--gold-2);
  background: transparent
}
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible{
  color:#0E0E0E;
  background: linear-gradient(180deg, var(--gold-3), var(--gold));
  border-color: var(--gold-2);
  box-shadow: 0 6px 16px rgba(201,162,39,.25);
  outline: none
}

.btn-secondary{
  color:#EADFA8;
  background: linear-gradient(180deg, #1b1c20, #14161b);
  border:1px solid rgba(212,175,55,.22)
}
.btn-secondary:hover,
.btn-secondary:focus-visible{
  color:#fff7cf;
  border-color: rgba(212,175,55,.45);
  box-shadow: 0 0 .6rem rgba(212,175,55,.22), inset 0 0 .35rem rgba(212,175,55,.14), 0 0 0 .2rem var(--ring);
  outline: none
}

/* ===== Botões de pagamento (mais destaque) ===== */
.btn-pay{
  border-radius: 12px;
  padding: .6rem .95rem;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
  line-height: 1.1;
}
.btn-pay-primary{
  background: linear-gradient(180deg,#EEDB77,#E0BE3A);
  color:#0b0b0b;
  border:1px solid #B9931A;
}
.btn-pay-primary:hover,
.btn-pay-primary:focus-visible{
  background: linear-gradient(180deg,#F5E693,#EEDB77);
  color:#0b0b0b;
  border-color:#E0BE3A;
  box-shadow: 0 10px 22px rgba(201,162,39,.28), 0 0 0 .2rem var(--ring);
}
.btn-pay-ghost{
  background:transparent;
  color:#EEDB77;
  border:1px solid rgba(224,190,58,.32);
}
.btn-pay-ghost:hover,
.btn-pay-ghost:focus-visible{
  color:#0E0E0E;
  background: linear-gradient(180deg,#F0D96A,#E0BE3A);
  border-color:#C9A227;
  box-shadow: 0 8px 18px rgba(201,162,39,.25);
}
.tab-pay .btn{ min-width:120px }

/* PIX / cartão painéis */
.pix-panel{ display:flex; gap:16px; align-items:flex-start }
.pix-qr{ max-width:260px; border-radius:12px; background:#fff; padding:6px; box-shadow:0 6px 16px rgba(0,0,0,.08) }
.form-text-gold{ color:#d9c88a }

/* ===== Layout util ===== */
.btn-block, .w-100-sm{ width:100% }
@media(min-width:576px){ .w-100-sm{ width:auto } }

/* ===== Footer etc ===== */
.text-gold{ color: var(--gold-3) !important }
.border-gold{ border-color: var(--gold-2) !important }
.bg-gold{ background: linear-gradient(180deg, var(--gold-3), var(--gold)) !important; color:#0E0E0E !important }

/* ===== Melhorias visuais extras ===== */
.table-hover>tbody>tr:hover{ background:#faf8ee }
.carousel .carousel-control-prev-icon,
.carousel .carousel-control-next-icon{ filter:drop-shadow(0 2px 2px rgba(0,0,0,.25)) }
.carousel-indicators [data-bs-target]{ background-color:#E0BE3A }
.product-title{ color:#111 }
.product-card:hover{ transform:translateY(-4px); box-shadow:0 16px 26px rgba(0,0,0,.10) }
