/* =========================
   DESIGN TOKENS / VARIÁVEIS
   ========================= */
:root{
  /* Cores de marca */
  --brand-bg:        #EFE6DD;
  --brand-dark:      #333333;
  --brand-light:     #ffffff;
  --brand-accent:    #d35e8f; /* Rosa */
  --brand-accent-2:  #c80053; /* Terciária */
  --brand-card-bg:   #D4CCC5; /* Background dos cards de login/cadastro */
  --brand-text:      #474747; /* Cor dos textos em forms */

  /* Texto */
  --text-dark:  var(--brand-dark);
  --text-light: var(--brand-light);

  /* Layout / efeitos */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 13px;
  --shadow-sm: 0 4px 12px rgba(0,0,0,.1);
  --shadow-md: 0 5px 15px rgba(0,0,0,.08);
  --transition: .3s ease;
}

/* Paleta de referência:
   #FFFFFF branco / #000000 preto / #D35E8F rosa */

/* =============
   BASE GLOBAL
   ============= */
html, body{
  min-height:100%;
}
body{
  background: var(--brand-bg);
  color: var(--text-dark);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
main{ flex:1; }

/* Tipografia extra */
@font-face{
  font-family:'Vintage';
  font-display: swap;
  src:url('Fontes/Vintage.ttf') format('truetype');
  font-weight:900;
  font-style:normal;
}

/* Reduz animações para quem prefere */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* Ajustes para telas monocromáticas */
@media (monochrome:1){
  body{ filter: contrast(1.2) brightness(1.1); }
  .btn-primary, .btn-secondary{ filter: brightness(0.9); }
}

/* ======================
   BARRA DE NAVEGAÇÃO
   ====================== */
nav{
  background: var(--brand-dark);
  padding: 1vh 0;
  min-height: 15vh;
  margin-bottom:0;
}

.bg-alert{ background: var(--brand-dark) !important; }

.navbar-brand{
  /* Tipografia fluida com clamp em vez de vh */
  font-family: 'Vintage', sans-serif;
  font-weight:700;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  line-height:1;
  color: var(--text-light);
  margin-right:5vh;
  transition: color var(--transition);
}
.navbar-brand:hover{ color: var(--brand-accent); }

.navbar-toggler{ border:none; }
.navbar-collapse{ justify-content:flex-end; }

nav .nav-link{
  text-decoration: underline;
  color: var(--text-light);
  /* Tipografia fluida com clamp em vez de vh */
  font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.2rem);
  margin-right: 2.5vh;
  transition: color var(--transition), text-decoration var(--transition);
}
nav .nav-link:hover{
  text-decoration:none;
  color: var(--brand-accent);
}

/* ==============================
   CONTAINERS / LAYOUT GERAL
   ============================== */
.container-custom{
  display:flex;
  align-items:center;
  gap:5vh;
  margin:10vh auto;
  border-radius:9px;
  padding:2vh;
}

/* ===============================
   LOGO / TEXTO / LABELS / CAMPOS
   =============================== */
#logotext{
  font-family:'Vintage', sans-serif;
  /* Tipografia fluida com clamp em vez de vh */
  font-size: clamp(1rem, .7rem + .9vw, 1.4rem);
  color:var(--text-light);
  margin:0;
}
.logo-container{
  position:absolute; left:50%; transform:translateX(-50%);
}
#logo{ height:auto; max-height:80px; width:auto; }

#logo:hover,
#logotext:hover{
  transform: scale(1.05);
  transition: transform var(--transition);
}

label,
#preco{
  font-weight:700;
  color:var(--text-dark);
  margin-bottom:1vh;
  display:block;
}
label{ font-size:2vh; }
#preco{ font-size:2.5vh; }

/* Estados de input */
input:invalid{
  border:1px solid red;
  border-radius: var(--radius-sm);
  outline:0;
}
input[type="text"]:valid,
input[type="number"]:valid,
input[type="email"]:valid,
input[type="tel"]:valid{
  border:1px solid green;
  border-radius: var(--radius-sm);
  outline:0;
}

/* Utilidades */
.ms-custom{ margin-left:5rem; }
.mb-4{ color:var(--text-dark); }

/* Manter clique acima do overlay de imagem no card do produto */
.produto-card .btn,
.produto-card form{
  position:relative; z-index:2;
}

/* ===============================
   AVATAR / USUÁRIO
   =============================== */
.avatar-container .link{ text-decoration:none; }
.avatar-container .avatar{ position:relative; }

.avatar-container .user-name{
  opacity:0; visibility:hidden;
  font-size:1rem; color:var(--text-light);
  margin-right:.5vw; font-weight:600; text-transform:capitalize;
  transition: opacity var(--transition), visibility 0s .3s;
}
.avatar-container:hover .user-name{
  opacity:1; visibility:visible; transition: opacity var(--transition), visibility 0s 0s;
}

/* Dropdown */
.dropdown-toggle:focus{ box-shadow:none; outline:0; }
.dropdown-toggle::after{ border-top-color: transparent; }

/* ===============================
   SIDEBAR (Offcanvas)
   =============================== */
.offcanvas{
  background: var(--brand-dark);
  width:250px;
  /* Contraste ligeiramente melhor */
  border-right:4px solid var(--brand-accent);
}
.offcanvas-header{
  /* Contraste mais suave que o sólido escuro */
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:1rem 1.5rem;
}
.offcanvas-title{
  color:var(--text-light);
  font-family:'Vintage', sans-serif;
  font-size:1.5rem;
}
.offcanvas .nav-link{
  color:var(--text-light);
  font-size:1.1rem;
  padding:.75rem 1rem;
  margin:.25rem .75rem;
  border-radius: var(--radius-sm);
  transition: transform var(--transition), color var(--transition), background-color var(--transition);
  display:flex; align-items:center; text-decoration:none;
}
.offcanvas .nav-link:hover{
  background: var(--brand-accent);
  color: var(--brand-dark);
  transform: translateX(5px);
}
.offcanvas .nav-link.active{
  background: var(--brand-accent);
  color: var(--brand-dark);
  font-weight:600;
}
.offcanvas-body{ padding-top:1rem; }
.btn-close-white{ filter: invert(1) grayscale(100%) brightness(200%); }
.sidebar-icon{ width:20px; height:20px; margin-right:12px; display:inline-block; }

/* ===============================
   CARROSSEL
   =============================== */
.carousel{ margin: 0 0 2rem; }
.carousel-item{
  /* Menos vh pra evitar jumps */
  height: clamp(200px, 35vh, 520px);
  overflow:hidden;
}
.carousel-item img{ object-fit:cover; width:100%; height:100%; }

.carousel-caption{
  border-radius: var(--radius-md);
  padding:20px; bottom:30px;
  background: rgba(0,0,0,.3);
}
.carousel-caption h3,
.carousel-caption p{
  color: var(--text-light);
}
.carousel-caption h3{ font-size:2rem; font-weight:700; margin-bottom:10px; }
.carousel-caption p{ font-size:1.2rem; }

.carousel-control-prev,
.carousel-control-next{ width:5%; }
.carousel-indicators{ bottom:10px; }

@media (max-width:768px){
  .carousel-item{ height:200px; }
  .carousel-caption h3{ font-size:1.5rem; }
  .carousel-caption p{ font-size:1rem; }
}

/* ===============================
   CARDS / LISTA DE PRODUTOS
   =============================== */
#productsContainer{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  width:100%;
  margin:0 auto;
  max-width:1200px;
}

#productsContainer.single-card {
  display: flex;
  justify-content: center;
}

#productsContainer.single-card .produto-card {
  max-width: 350px;
}

.produto-card{
  display:flex; flex-direction:column;
  width:100%;
  height:100%;
  transition: transform var(--transition), border var(--transition), border-radius var(--transition);
}

.produto-card .card-body{
  flex:1 1 auto;
  display:flex; flex-direction:column; justify-content:space-between; align-items:stretch;
  padding:16px; min-height:0;
}

/* Texto do card */
.card-text{
  color: var(--text-dark);
  max-height: 4.5rem; /* ~3 linhas */
  overflow:hidden; text-overflow:ellipsis;
  margin-bottom:1rem;
}

.produto-card .card-body .d-flex{ margin-top:.5rem; gap:.75rem; }
.produto-card .btn{ width:auto; }

.card{
  border:none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), border var(--transition), border-radius var(--transition);
  background: var(--text-light);
  border-radius: var(--radius-md);
  overflow:hidden;
}
.card:hover{
  transform: translateY(-6px);
  border:2px solid var(--brand-accent);
  border-radius: var(--radius-lg);
}

.card-title{
  color: var(--brand-dark);
  font-weight:700;
  font-size:1.1rem;
  margin-bottom:.5rem;
}

.card-img-top{
  width:100%;
  aspect-ratio: 16 / 10; /* Evita pulo de layout */
  object-fit:cover; object-position:center;
  display:block; margin:0 auto;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Badge de preço sempre visível, consistente */
#preco{ margin:.25rem 0 .5rem; }

/* ===============================
   BOTÕES
   =============================== */
.btn-primary{
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--brand-dark);
  font-weight:700;
  padding:.5rem 1.5rem;
  border-radius:5px;
  transition: transform var(--transition), background-color var(--transition), color var(--transition), border-color var(--transition);
}
.btn-primary:hover,
.btn-primary:focus{
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: var(--brand-accent);
  transform: scale(1.05);
}

.btn-secondary{
  background: var(--brand-accent-2);
  border-color: var(--brand-accent-2);
  color: var(--text-light);
  padding:.5rem 1.5rem;
  border-radius:5px;
  transition: transform var(--transition), background-color var(--transition), color var(--transition), border-color var(--transition);
}
.btn-secondary:hover,
.btn-secondary:focus{
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: var(--brand-accent-2);
  transform: scale(1.05);
}

/* ===============================
   FORMULÁRIOS
   =============================== */
.form-control,
.form-select{
  border:1px solid var(--brand-accent-2);
  border-radius:6px;
  padding:.75rem 1rem;
  font-size:1rem;
  transition: border-color var(--transition), box-shadow var(--transition), background-position var(--transition);
}
.form-control:focus,
.form-select:focus{
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 .25rem rgba(212,170,125,.25);
}

.form-select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23D4AA7D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-label{
  color: var(--brand-dark);
  font-weight:600;
  margin-bottom:.5rem;
}

.form-check-input:checked{
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
}

.card.p-4{
  background: var(--text-light);
  border-radius:10px;
  box-shadow: var(--shadow-md);
  background-color: #D4CCC5;
}

/* Auth Cards e Formulários */
.auth-card {
  background-color: var(--brand-card-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 2rem;
  margin: 2rem auto;
  max-width: 500px;
}

.auth-card .form-label {
  color: var(--brand-text);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.auth-card .form-control {
  background-color: var(--brand-light);
  border: 1px solid var(--brand-accent-2);
}

.auth-card .form-control:focus {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 .25rem rgba(211, 94, 143, .25);
}

.auth-card .btn-success {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
  transition: var(--transition);
  font-weight: 600;
}

.auth-card .btn-success:hover {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  transform: translateY(-2px);
}

.auth-links {
  margin-top: 1.5rem;
  text-align: center;
}

.auth-links a {
  color: var(--brand-accent);
  text-decoration: none;
  transition: var(--transition);
  display: inline-block;
  margin: 0.5rem;
}

.auth-links a:hover {
  color: var(--brand-dark);
  text-decoration: underline;
}

.form-check-label {
  color: var(--brand-text);
}

.form-floating > label {
  color: var(--brand-text);
}

fieldset{
  border-color: var(--brand-accent-2);
  background: rgba(144,169,183,.1);
}
legend{
  font-weight:600;
  color: var(--brand-dark);
}

/* ===============================
   DROPDOWNS
   =============================== */
.dropdown-menu{
  background: var(--brand-dark);
  /* Contraste ligeiramente melhor */
  border:1px solid var(--brand-accent);
}
.dropdown-item{ color: var(--text-light); }
.dropdown-item:hover{
  background: var(--brand-accent);
  color: var(--brand-dark);
}

/* ===============================
   FOOTER
   =============================== */
.footer{
  background: var(--brand-dark);
  color: var(--text-light);
  padding:1rem 0;
  width:100%;
}
.footer h5{
  font-weight:600;
  margin-bottom:1rem;
  font-size:1.5rem;
}
.footer p{
  margin-bottom:.5rem;
  font-size:1rem;
}

/* ===============================
   BARRA DE PESQUISA
   =============================== */
.search-bar{
  height:30px;
  width:100%;
  max-width:400px;
  z-index:999;
}
.search-input{
  background:transparent;
  border:none; border-bottom:2px solid var(--text-light);
  color:var(--text-light);
  height:20px; padding:.3rem .5rem; font-size:1rem; border-radius:0;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-input::placeholder{ color: rgba(255,255,255,.6); }
.search-input:focus{
  border-bottom:2px solid var(--brand-accent);
  box-shadow:none; outline:0; z-index:1001;
}

.search-button{
  background:transparent; border:none; padding:.3rem; border-radius: var(--radius-md);
  transition: transform .2s ease;
}
.search-button img{ filter: invert(0); }
.search-button:hover{ transform: scale(1.1); cursor:not-allowed; }

/* Container da barra de pesquisa */
.container.my-3.d-flex.justify-content-center{
  background: var(--brand-dark);
  border-radius:0;
  margin-top:-2.5vh !important;
  margin-bottom:0 !important;
  padding-top:1vh; padding-bottom:20px;
  width:100%; max-width:100%;
  z-index:1000;
}