@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Rajdhani:wght@600;700&display=swap");

:root {
  --pm-bg-0: #040914;
  --pm-bg-1: #071529;
  --pm-bg-2: #0a1b33;
  --pm-surface: #0c1b30;
  --pm-surface-soft: #132640;
  --pm-border: rgba(66, 102, 140, 0.58);
  --pm-text: #eaf2ff;
  --pm-muted: #9db2cb;
  --pm-accent: #ff6a2a;
  --pm-accent-2: #ff9f2e;
  --pm-success: #25d366;
  --pm-radius-md: 12px;
  --pm-radius-lg: 18px;
  --pm-shadow-soft: 0 16px 34px rgba(3, 11, 25, 0.38);
}

html,
body {
  color-scheme: dark;
}

body {
  color: var(--pm-text);
  font-family: "Manrope", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 8% -12%, rgba(255, 106, 42, 0.16), transparent 34%),
    radial-gradient(circle at 92% 3%, rgba(74, 222, 255, 0.1), transparent 28%),
    linear-gradient(160deg, var(--pm-bg-0), var(--pm-bg-1) 52%, var(--pm-bg-2));
}

h1,
h2,
h3,
h4,
h5,
h6,
.logo,
.section-header h2,
.page-hero-content h1,
.footer-brand h3 {
  font-family: "Rajdhani", "Manrope", sans-serif;
  letter-spacing: 0.01em;
}

a {
  color: #ffc4a2;
}

a:hover {
  color: #ffd6bc;
}

/* ========= Estrutura principal ========= */
.navbar {
  background:
    radial-gradient(circle at 10% -40%, rgba(255, 106, 42, 0.3), transparent 42%),
    linear-gradient(180deg, rgba(6, 14, 28, 0.97), rgba(7, 14, 27, 0.97));
  border-bottom: 1px solid rgba(88, 123, 160, 0.44);
  box-shadow: 0 10px 24px rgba(1, 5, 13, 0.42);
  backdrop-filter: blur(10px);
}

.navbar-top {
  max-width: 1320px;
  margin: 0 auto;
}

.logo {
  color: #ff8f5d;
  text-shadow: 0 0 22px rgba(255, 106, 42, 0.28);
}

.logo i {
  color: #ff702f;
  animation: logoFloat 4.6s ease-in-out infinite;
}

@keyframes logoFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

.search-box {
  border-radius: var(--pm-radius-md);
  border: 1px solid var(--pm-border);
  background: linear-gradient(160deg, rgba(10, 24, 43, 0.94), rgba(8, 18, 33, 0.95));
  box-shadow: 0 8px 20px rgba(3, 9, 22, 0.34);
  overflow: hidden;
}

.search-box input {
  color: var(--pm-text);
  border-color: transparent;
  background: transparent;
}

.search-box input::placeholder {
  color: #9bb3cf;
}

.search-box button {
  border-left: 1px solid rgba(78, 113, 151, 0.54);
  background: linear-gradient(135deg, var(--pm-accent), var(--pm-accent-2));
}

.search-box button:hover {
  background: linear-gradient(135deg, #ff7437, #ffad46);
}

.menu a {
  border: 1px solid rgba(61, 89, 118, 0.62);
  background: linear-gradient(155deg, rgba(12, 23, 38, 0.95), rgba(10, 19, 31, 0.96));
  color: #cfe0f6;
}

.menu a:hover {
  border-color: rgba(255, 130, 86, 0.72);
  background: linear-gradient(150deg, rgba(255, 106, 42, 0.22), rgba(255, 106, 42, 0.08));
  color: #fff;
}

.menu a i {
  color: #9ab4d1;
}

.menu a:hover i {
  color: #ffe0cf;
}

.cart {
  border: 1px solid rgba(255, 145, 101, 0.75) !important;
  background: linear-gradient(135deg, #ff6a2a, #ff9d2f) !important;
}

.navbar-categories {
  background: linear-gradient(180deg, #081425, #09172a);
  border-top: 1px solid rgba(255, 119, 76, 0.32);
  border-bottom: 1px solid rgba(84, 119, 155, 0.45);
}

.navbar-categories a {
  color: #c0d3eb;
}

.navbar-categories a:hover {
  color: #fff;
  background: rgba(255, 122, 74, 0.14);
  border-bottom-color: rgba(255, 122, 74, 0.86);
}

.page-hero {
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 122, 70, 0.18), transparent 36%),
    linear-gradient(145deg, rgba(9, 18, 32, 0.96), rgba(7, 14, 25, 0.97));
  border-bottom: 1px solid rgba(61, 91, 122, 0.55);
}

.page-hero-content p {
  color: var(--pm-muted);
}

/* ========= Cards e superfícies ========= */
:is(
  .checkout-itens,
  .checkout-resumo,
  .carrinho-itens,
  .carrinho-resumo,
  .perfil-card-foto,
  .perfil-card-dados,
  .form-card,
  .produto-card,
  .relacionados-aside,
  .filtro-pesquisa-wrap,
  .filtro-ordenacao-wrap,
  .filtro-bloco,
  .enderecos-salvos,
  .endereco-card,
  .contato-card,
  .sobre-pillar-card,
  .valores-card,
  .credencial-container,
  .cadastro-card,
  .card,
  .novo-anuncio-panel,
  .chat-box,
  .home-metric-card,
  .diferencial-card,
  .fluxo-item,
  .cat-card
) {
  background: linear-gradient(160deg, rgba(10, 21, 37, 0.94), rgba(8, 16, 29, 0.95));
  border-color: var(--pm-border) !important;
  box-shadow: var(--pm-shadow-soft);
}

:is(
  .checkout-itens,
  .checkout-resumo,
  .carrinho-itens,
  .carrinho-resumo,
  .perfil-card-foto,
  .perfil-card-dados,
  .form-card,
  .produto-card,
  .relacionados-aside,
  .cadastro-card,
  .card,
  .contato-card
):hover {
  border-color: rgba(255, 146, 102, 0.76) !important;
}

.produto-page,
.checkout-main,
.carrinho-main,
.perfil-main,
.form-main,
.contato-section,
.sobre-section {
  background: transparent;
}

.produto-imagem-principal,
.produto-thumb,
.produto-thumb img {
  background: rgba(8, 18, 32, 0.94);
  border-color: rgba(73, 105, 139, 0.62);
}

.produto-info h1,
.produto-breadcrumb strong,
.checkout-resumo h3,
.carrinho-resumo h3,
.perfil-card-foto h2 {
  color: #f2f7ff;
}

/* ========= Inputs e controles ========= */
:is(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="month"],
  textarea,
  select
) {
  border-color: rgba(66, 99, 132, 0.7) !important;
  background: rgba(8, 19, 34, 0.9) !important;
  color: var(--pm-text) !important;
}

:is(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="month"],
  textarea,
  select
):focus {
  border-color: rgba(255, 128, 83, 0.92) !important;
  box-shadow: 0 0 0 3px rgba(255, 106, 42, 0.16);
}

::placeholder {
  color: #8da7c4;
}

/* ========= Botões ========= */
:is(
  .btn-primary,
  .btn-add-cart,
  .btn-cadastrar,
  .btn-finalizar,
  .btn-confirmar,
  .btn-salvar,
  .btn-loja,
  .btn-ver-categoria,
  .btn-chat-login,
  .btn-anunciar-toggle,
  .btn-cep,
  .btn-upload-inline
) {
  background: linear-gradient(135deg, var(--pm-accent), var(--pm-accent-2)) !important;
  border: 1px solid rgba(255, 158, 118, 0.6) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(255, 106, 42, 0.2);
}

:is(
  .btn-primary,
  .btn-add-cart,
  .btn-cadastrar,
  .btn-finalizar,
  .btn-confirmar,
  .btn-salvar,
  .btn-loja,
  .btn-ver-categoria,
  .btn-chat-login,
  .btn-anunciar-toggle,
  .btn-cep,
  .btn-upload-inline
):hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}

.btn-anunciar-toggle i {
  width: 18px;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
}

.btn-anunciar-toggle.is-open {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border-color: rgba(252, 165, 165, 0.62) !important;
  box-shadow: 0 12px 24px rgba(220, 38, 38, 0.28) !important;
}

:is(.btn-secondary, .btn-voltar-checkout, .btn-continuar, .btn-novo-anuncio-cancelar) {
  border: 1px solid rgba(80, 111, 145, 0.74) !important;
  background: linear-gradient(155deg, rgba(11, 21, 35, 0.95), rgba(9, 17, 28, 0.95)) !important;
  color: #d0e0f4 !important;
  border-radius: 12px !important;
}

:is(.btn-secondary, .btn-voltar-checkout, .btn-continuar, .btn-novo-anuncio-cancelar):hover {
  border-color: rgba(255, 142, 98, 0.78) !important;
  color: #fff !important;
}

/* ========= Home ========= */
.hero {
  background:
    radial-gradient(circle at 18% -18%, rgba(255, 109, 55, 0.3), transparent 36%),
    linear-gradient(180deg, #070f1c, #070d18);
}

.hero-slider-scrim {
  background:
    linear-gradient(100deg, rgba(5, 8, 14, 0.9), rgba(5, 8, 14, 0.3)),
    linear-gradient(180deg, rgba(255, 122, 74, 0.14), transparent 80%);
}

.hero-content {
  border: 1px solid rgba(255, 135, 94, 0.32);
  box-shadow: 0 24px 44px rgba(4, 11, 20, 0.45);
}

.hero-badges span,
.promo-badge,
.produto-badge,
.produto-categoria-tag {
  border-color: rgba(255, 156, 116, 0.62) !important;
}

/* ========= Footer ========= */
.footer {
  border-top: 1px solid rgba(255, 130, 88, 0.5);
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 111, 65, 0.15), transparent 26%),
    radial-gradient(circle at 92% 14%, rgba(56, 189, 248, 0.09), transparent 26%),
    linear-gradient(180deg, #040914, #050a13);
}

.footer-top-bar {
  background: linear-gradient(135deg, #ff6d2f, #ff9f31);
}

.footer-col,
.footer-col:last-child {
  border-color: rgba(63, 92, 122, 0.62);
}

.footer-col > p,
.footer-col ul li a,
.footer-contact li,
.footer-contact li a,
.footer-bottom p,
.footer-detran span {
  color: #a9bed8;
}

.footer-col ul li a:hover,
.footer-contact li a:hover,
.footer-col ul li a:hover i {
  color: #ffb796;
}

.footer-social a {
  background: rgba(10, 20, 35, 0.9);
}

/* ========= Login / Cadastro / Recuperação ========= */
.bg-decoration .circle {
  opacity: 0.2;
}

.cadastro-card {
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(11, 21, 36, 0.93), rgba(8, 15, 27, 0.95));
}

.card-icon {
  background: linear-gradient(135deg, #ff6a2a, #ff9f2e) !important;
  box-shadow: 0 10px 24px rgba(255, 106, 42, 0.28);
}

.subtitle,
.login-status,
.auth-divider span {
  color: var(--pm-muted) !important;
}

.auth-highlights span {
  border: 1px solid rgba(77, 111, 145, 0.62);
  background: rgba(9, 18, 32, 0.75);
  color: #c8d8ee;
}

/* ========= Admin ========= */
.sidebar {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 108, 53, 0.17), transparent 42%),
    linear-gradient(180deg, #0b1627, #0a1220);
  border-right: 1px solid rgba(72, 104, 138, 0.64);
}

.sidebar-brand {
  border-bottom-color: rgba(72, 104, 138, 0.56);
}

.sidebar-nav a,
.sidebar-footer a {
  border: 1px solid transparent;
}

.sidebar-nav a:hover {
  border-color: rgba(255, 136, 95, 0.44);
  background: rgba(255, 106, 42, 0.12);
}

.sidebar-nav a.active {
  border-color: rgba(255, 143, 102, 0.62);
  background: linear-gradient(135deg, #ff6a2a, #ff9f2e);
}

.content {
  background:
    radial-gradient(circle at 90% -8%, rgba(56, 189, 248, 0.08), transparent 30%),
    linear-gradient(160deg, #050b15, #071120);
}

.card {
  border-radius: 18px;
}

/* ========= Ajustes responsivos ========= */
@media (max-width: 1100px) {
  .navbar-top {
    padding-left: 16px;
    padding-right: 16px;
  }

  .menu a {
    padding: 9px 10px;
  }
}

@media (max-width: 780px) {
  .menu a {
    justify-content: center;
  }

  .checkout-main,
  .carrinho-main,
  .perfil-main,
  .form-main,
  .produto-page {
    padding-left: 14px;
    padding-right: 14px;
  }
}