:root {
  /* Identidade visual fixa */
  --cor-primaria: #0062A6;
  --cor-primaria-hover: #004b80;
  --cor-secundaria: #1A9ADD;

  --cor-sucesso: #00C48C;
  --cor-erro: #FF5252;
}

/* =============== TEMA LIGHT =============== */
:root[data-theme="light"] {
  --cor-fundo: #F5F8FA;
  --cor-fundo-elevado: #FFFFFF;

  --cor-neutro: #E2E8F0;
  --cor-texto-escuro: #1A202C;
  --cor-texto-claro: #ffffff;

  --cor-destaque-leve: #E9F3FB;
  --cor-destaque-leve-hover: #C8E4F8;

  --cor-borda-card: #CBD5E0;
  --cor-img-bg: #EDF2F7;

  --cor-card-sombra: rgba(0, 0, 0, 0.12);

  --cor-alert-sucesso-bg: #E6FFFA;
  --cor-alert-sucesso-texto: #03543F;

  --cor-carousel-btn-bg: rgba(15, 23, 42, 0.6);
  --cor-carousel-btn-bg-hover: rgba(15, 23, 42, 0.85);

  --navbar-bg: #ffffff;
  --navbar-border: #E2E8F0;
  --navbar-text: #1A202C;
  --navbar-brand: var(--cor-primaria);
  --navbar-link: #1A202C;
  --navbar-link-hover: var(--cor-primaria-hover);
  --navbar-link-active: var(--cor-primaria);
  --navbar-icon-color: #1A202C;

  --btn-logout-border: #CBD5E0;
  --btn-logout-text: #1A202C;
  --btn-logout-hover-bg: #E2E8F0;

  --theme-toggle-bg: #1A202C;
  --theme-toggle-border: #CBD5E0;
  --theme-toggle-icon: #1A202C;

  --text-muted: #393b3d;

  --footer-bg: #F8FAFC;
  --footer-text: #4A5568;
  --footer-border: #E2E8F0;
}

/* =============== TEMA DARK =============== */
:root[data-theme="dark"] {
  --cor-fundo: #020617;
  --cor-fundo-elevado: #0B1220;

  --cor-neutro: #1F2937;
  --cor-texto-escuro: #E5E7EB;
  /* texto padrão em dark */
  --cor-texto-claro: #F9FAFB;

  --cor-destaque-leve: #0B1924;
  --cor-destaque-leve-hover: #102437;

  --cor-borda-card: #1F2937;
  --cor-img-bg: #111827;

  --cor-card-sombra: rgba(0, 0, 0, 0.6);

  --cor-alert-sucesso-bg: #064E3B;
  --cor-alert-sucesso-texto: #D1FAE5;

  --cor-carousel-btn-bg: rgba(15, 23, 42, 0.8);
  --cor-carousel-btn-bg-hover: rgba(15, 23, 42, 0.95);

  --navbar-bg: #020617;
  --navbar-border: #1F2937;
  --navbar-text: #E5E7EB;
  --navbar-brand: var(--cor-secundaria);
  --navbar-link: #E5E7EB;
  --navbar-link-hover: var(--cor-secundaria);
  --navbar-link-active: var(--cor-secundaria);
  --navbar-icon-color: #E5E7EB;

  --btn-logout-border: #4B5563;
  --btn-logout-text: #E5E7EB;
  --btn-logout-hover-bg: #111827;

  --theme-toggle-bg: #E5E7EB;
  --theme-toggle-border: #4B5563;
  --theme-toggle-icon: #E5E7EB;

  --text-muted: #a6acb4;

  --footer-bg: #020617;
  --footer-text: #9CA3AF;
  --footer-border: #1F2937;
}

/* ================= BASE ================== */

body {
  font-family: 'Nunito', sans-serif;
  background-color: var(--cor-fundo);
  color: var(--cor-texto-escuro);
}

/* FOOTER VENDINOW */
.footer-vendinow {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  border-top: 1px solid var(--footer-border);
  font-size: 0.9rem;
}

.footer-vendinow a {
  color: inherit;
  text-decoration: none;
}

.footer-vendinow a:hover {
  text-decoration: underline;
}

/*TEXTO MUTED*/
.text-muted {
  --bs-text-opacity: 1;
  color: var(--text-muted) !important;
}


/* NAVBAR VENDINOW */
.navbar-vendinow {
  background-color: var(--navbar-bg);
  color: var(--navbar-text);
  border-bottom: 1px solid var(--navbar-border);
}

/* Marca, links, textos */
.navbar-vendinow .navbar-brand {
  color: var(--navbar-brand);
}

.navbar-vendinow .navbar-brand:hover {
  color: var(--cor-primaria-hover);
}

.navbar-vendinow .nav-link {
  color: var(--navbar-link);
}

.navbar-vendinow .nav-link:hover {
  color: var(--navbar-link-hover);
}

.navbar-vendinow .nav-link.active {
  color: var(--navbar-link-active);
  font-weight: 600;
}

.navbar-vendinow .navbar-text {
  color: var(--navbar-text);
}

/* Ícone do toggler (hambúrguer) usando currentColor */
.navbar-vendinow .navbar-toggler {
  border-color: transparent;
  color: var(--navbar-icon-color);
}

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

/* Link da foto de perfil (só pra garantir cor no hover se tiver texto junto no futuro) */
.navbar-vendinow .nav-profile-link {
  display: inline-flex;
  align-items: center;
}

/* Dropdowns respeitando o tema */
.navbar-vendinow .dropdown-menu {
  background-color: var(--navbar-bg);
  border-color: var(--navbar-border);
  color: var(--navbar-text);
}

.navbar-vendinow .dropdown-item {
  color: var(--navbar-link);
}

.navbar-vendinow .dropdown-item:hover,
.navbar-vendinow .dropdown-item:focus {
  background-color: var(--cor-destaque-leve-hover);
  color: var(--navbar-link-hover);
}


/* Botão de logout alinhado ao tema */
.btn-outline-logout {
  border: 1px solid var(--btn-logout-border);
  color: var(--btn-logout-text);
  background: transparent;
}

.btn-outline-logout:hover {
  background-color: var(--btn-logout-hover-bg);
  color: var(--btn-logout-text);
}

/* Botão de toggle de tema */
.btn-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--theme-toggle-border);
  background-color: var(--theme-toggle-bg);
  color: var(--theme-toggle-icon);
  width: 34px;
  height: 34px;
  padding: 0;
}

.btn-theme-toggle:hover {
  opacity: 0.85;
}

.btn-theme-toggle .bi {
  font-size: 1.1rem;
}

/* Botões principais */
.btn-vendinow {
  background-color: var(--cor-primaria);
  color: var(--cor-texto-claro);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.2s;
  text-align: center;
  text-decoration: none;
}

.btn-vendinow:hover {
  background-color: var(--cor-primaria-hover);
  color: var(--cor-destaque-leve);
  text-decoration: none;
}

/* Alertas */
.alert-vendinow {
  background-color: var(--cor-alert-sucesso-bg);
  color: var(--cor-alert-sucesso-texto);
  padding: 0.75rem;
  border-radius: 4px;
  margin-top: 1rem;
}

/* Imagens de cards */
.card-img-top {
  width: 100%;
  height: 200px;
  /* altura proporcional ao 800x600 */
  object-fit: cover;
  object-position: center;
  background-color: var(--cor-img-bg);
  border-radius: 0.5rem;
}

/* Imagem de capa na página de detalhes */
.produto-detalhe-capa {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

/* Card selecionado via btn-check */
.btn-check:checked+.card {
  border: 2px solid var(--cor-primaria);
  box-shadow: 0 0 8px var(--cor-primaria-hover);
}

/* Cards Vendinow - efeito saltar */
.card-vendinow {
  background-color: var(--cor-fundo-elevado);
  border: 1px solid var(--cor-borda-card);
  border-radius: 6px;
  padding: 1rem;
  color: var(--cor-texto-escuro);
  box-shadow: 0 0 8px var(--cor-card-sombra);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.card-vendinow:hover {
  transform: scale(1.05);
  z-index: 10;
  box-shadow: 0 6px 16px var(--cor-card-sombra);
  background-color: var(--cor-destaque-leve-hover);
}

/* Contêiner de carrossel */
.carousel-container {
  position: relative;
}

/* Botões de navegação */
.carousel-btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background: var(--cor-carousel-btn-bg);
  border: none;
  color: var(--cor-texto-claro);
  font-size: 1.5rem;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  z-index: 20;
  border-radius: 50%;
  transition: background 0.2s;
}

.carousel-btn:hover {
  background: var(--cor-carousel-btn-bg-hover);
}

.carousel-btn.left {
  left: 5px;
}

.carousel-btn.right {
  right: 5px;
}

/* Esconde a barra de rolagem horizontal */
.carousel-track {
  overflow-x: auto;
  scroll-behavior: smooth;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

/* Ícones padrão do Bootstrap no carrossel */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: var(--cor-primaria) !important;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 29px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}