/*
 * Estilos principais do site da floricultura.
 * Utiliza uma paleta suave e quente inspirada em flores. Os componentes
 * foram pensados para serem intuitivos tanto para usuários quanto
 * para administradores.
 */

/* Reset básico */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    background-color: #fff8f3;
    color: #4a3c2f;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
}

/* Topbar */
.topbar {
    background-color: #fff5eb;
    border-bottom: 1px solid #f0e1d6;
}

.topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #d38a6b;
}

.nav {
    display: flex;
    gap: 10px;
    align-items: center;
}

.nav-btn {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s;
}

.nav-btn.btn-outline {
    background-color: #fff;
    border: 2px solid #d38a6b;
    color: #d38a6b;
}

.nav-btn.btn-outline:hover {
    background-color: #d38a6b;
    color: #fff;
}

.nav-btn.btn-filled {
    background-color: #f2a66f;
    color: #fff;
}

.nav-btn.btn-filled:hover {
    background-color: #d38a6b;
}

.welcome {
    margin-right: 10px;
    font-size: 0.9rem;
}

/* Hero */
.hero {
    text-align: center;
    margin: 40px 0;
}

.hero h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: #b05447;
}

.hero p {
    font-size: 1rem;
    margin-bottom: 20px;
}

.cta-whatsapp {
    display: inline-block;
    padding: 10px 20px;
    background-color: #61b15a;
    color: #fff;
    border-radius: 25px;
    font-weight: bold;
    transition: background-color 0.2s;
}

.cta-whatsapp:hover {
    background-color: #4a944d;
}

/* Catálogo */
.catalog {
    margin-bottom: 60px;
}

.catalog h3 {
    font-size: 1.4rem;
    margin-bottom: 20px;
    color: #b05447;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.card {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.2s;
    cursor: pointer;
}

.card:hover {
    transform: translateY(-4px);
}

.card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.card-body {
    padding: 15px;
}

.card-body h4 {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.price {
    display: block;
    font-weight: bold;
    color: #d38a6b;
    margin-bottom: 10px;
}

.card-link {
    background-color: #f2a66f;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.card-link:hover {
    background-color: #d38a6b;
}

/* Card da categoria */
.category-card {
    text-decoration: none;
    color: inherit;
}

/* Esconde preço nos cards de categoria */
.category-card .price {
    display: none;
}

/* Modais */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    width: 100%;
    max-width: 400px;
    position: relative;
}

.modal-content h3 {
    margin-bottom: 20px;
    color: #b05447;
}

.modal-content .form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.modal-content .form input {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.btn-submit {
    width: 100%;
    background-color: #61b15a;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

.btn-submit:hover {
    background-color: #4a944d;
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: #888;
}

/* Modal de produto (detalhes) */
.product-modal {
    max-width: 600px;
}

#productContent img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

#productContent .title {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: #b05447;
}

#productContent .description {
    margin-bottom: 10px;
}

#productContent .price {
    font-weight: bold;
    color: #d38a6b;
    margin-bottom: 10px;
}

#productContent .cta-whatsapp {
    display: block;
    text-align: center;
    margin-top: 20px;
}

/* Admin Table */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.admin-table th,
.admin-table td {
    border: 1px solid #f0e1d6;
    padding: 8px;
    text-align: left;
}

.admin-table th {
    background-color: #fff5eb;
    color: #b05447;
}

.admin-link {
    margin-right: 10px;
    color: #61b15a;
    text-decoration: underline;
    cursor: pointer;
}

.admin-link:hover {
    text-decoration: none;
}

.admin-link.danger {
    color: #d9534f;
}

/* Formulário admin */
.form-admin {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 500px;
}

.form-admin input[type="text"],
.form-admin textarea,
.form-admin input[type="file"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.form-admin textarea {
    resize: vertical;
}

/* Footer */
.footer {
    background-color: #fff5eb;
    border-top: 1px solid #f0e1d6;
    padding: 30px 0;
    font-size: 0.9rem;
    color: #4a3c2f;
}
.footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.footer-map,
.footer-info {
    flex: 1;
    min-width: 250px;
}
.footer-map h4,
.footer-info h4 {
    margin-bottom: 10px;
    color: #b05447;
}
.footer-info p {
    margin-bottom: 8px;
}
.btn-whatsapp {
    display: inline-block;
    padding: 8px 16px;
    background-color: #61b15a;
    color: #fff;
    border-radius: 20px;
    font-weight: bold;
    transition: background-color 0.2s;
}
.btn-whatsapp:hover {
    background-color: #4a944d;
}
.footer-legal {
    margin-top: 20px;
    text-align: center;
    color: #888;
    font-size: 0.8rem;
}

/* Logo e faixa superior */
.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo-img {
    height: 40px;
    width: auto;
}
.logo-text {
    font-size: 1.5rem;
    font-weight: bold;
    color: #d38a6b;
}
.top-banner img {
    width: 100%;
    display: block;
}

/* Animação de pétalas caindo */
#petal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.petal {
    position: absolute;
    top: -10vh;
    background-image: url('img/petal.png'); /* caminho relativo ao style.css */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.8;
    animation-name: fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes fall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}
/* Camadas (stack) para pétalas aparecerem no desktop */
main { position: relative; z-index: 1; }  /* conteúdo */
#petal-container { position: fixed; z-index: 2; pointer-events: none; }
.topbar { position: sticky; top: 0; z-index: 3; } /* header acima das pétalas */
.modal { z-index: 4; }                              /* modais no topo */
.petal { will-change: transform; }                  /* desempenho */

/* Garante que logo e menu fiquem lado a lado e alinhados */
.topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto;  /* empurra a navegação para a direita */
}

/* Faixa decorativa acima do rodapé */
.footer-border {
    background-image: url('img/flores.png');
    background-repeat: repeat-x;   /* repete a imagem horizontalmente */
    background-position: center;
    height: 40px;                 /* ajuste conforme a altura do seu flores.png */
    opacity: 0.8;                 /* deixa a faixa mais sutil; diminua ou aumente conforme preferir */
    margin-top: -10px;            /* opcional: aproxima a faixa do rodapé, caso haja espaço extra */
}
/* HERO com fundo e animações */
.hero-landing{
  position: relative;
  min-height: clamp(420px, 70vh, 760px);
  background: url('img/painel.jpg') center/cover no-repeat;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-veil{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.35));
}

.hero-overlay{
  position: relative;
  text-align: center;
  color: #fff;
  padding: 0 20px;
  opacity: 0;
  animation: fadeInUp .9s ease-out .15s forwards;
}

.hero-overlay h1{
  font-size: clamp(28px, 6vw, 64px);
  line-height: 1.1;
  font-weight: 800;
  text-shadow: 0 8px 22px rgba(0,0,0,.45);
  margin-bottom: 22px;
}

.btn-hero{
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background: #f2a66f;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  opacity: 0;
  animation: fadeIn .8s ease-out .35s forwards;
}
.btn-hero:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.2);
  background: #d38a6b;
}

.hero-deco{
  position: absolute;
  bottom: clamp(40px, 9vh, 120px);
  width: clamp(160px, 20vw, 320px);
  opacity: 0;
  pointer-events: none;
}
.hero-deco-left{
  left: clamp(12px, 6vw, 120px);
  transform: translateX(-30px) rotate(-4deg);
  animation: slideInLeft .9s ease-out .25s forwards;
}
.hero-deco-right{
  right: clamp(12px, 6vw, 120px);
  transform: translateX(30px) rotate(4deg);
  animation: slideInRight .9s ease-out .25s forwards;
}

/* Keyframes */
@keyframes fadeInUp{
  from{opacity:0; transform: translateY(16px) scale(.98)}
  to{opacity:1; transform: translateY(0) scale(1)}
}
@keyframes fadeIn{
  from{opacity:0} to{opacity:1}
}
@keyframes slideInLeft{
  from{opacity:0; transform: translateX(-30px) rotate(-4deg)}
  to{opacity:1; transform: translateX(0) rotate(0)}
}
@keyframes slideInRight{
  from{opacity:0; transform: translateX(30px) rotate(4deg)}
  to{opacity:1; transform: translateX(0) rotate(0)}
}

html { scroll-behavior: smooth; }

/* =========================
   Modal (overlay suave)
   ========================= */
.modal{
  /* o JS já controla display: none/flex */
  position: fixed;
  inset: 0;                 /* top/right/bottom/left = 0 */
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  display: none;            /* mostrado pelo JS -> flex */
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
  animation: modalFade .18s ease-out;
}

.modal-content{
  width: min(720px, 92vw);
  max-height: 85vh;
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 18px 18px 22px;
  animation: modalPop .22s ease-out;
}

.product-modal img{
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin-bottom: 12px;
}

.close-modal{
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #9b6b5a;
}

/* Título/infos dentro do modal de produto */
#productContent .title{
  font-size: 1.1rem;
  font-weight: 700;
  color: #b05447;
  margin: 4px 0 6px;
}
#productContent .description{
  color: #6b5b4f;
  font-size: .95rem;
  margin-bottom: 10px;
}
#productContent .price{
  color: #4a3c2f;
  font-weight: 700;
  margin-bottom: 12px;
}
#productContent .cta-whatsapp{
  display: block;
  text-align: center;
  padding: 12px 16px;
  border-radius: 999px;
  background: #61b15a;
  color: #fff;
  font-weight: 700;
  transition: transform .12s ease, background .2s ease;
}
#productContent .cta-whatsapp:hover{
  transform: translateY(-1px);
  background: #4a944d;
}

/* Animações suaves */
@keyframes modalFade{
  from{opacity: 0} to{opacity: 1}
}
@keyframes modalPop{
  from{opacity: 0; transform: translateY(8px) scale(.98)}
  to{opacity: 1; transform: translateY(0) scale(1)}
}

/* ========= Ajustes base ========= */
html { scroll-behavior: smooth; }
body { margin: 0; }
.container { padding: 0 18px; }

/* Tipografia mais fluida */
h1, h2, h3 { line-height: 1.15; }
h1 { font-size: clamp(24px, 6vw, 48px); }
h2 { font-size: clamp(20px, 4.8vw, 32px); }
h3 { font-size: clamp(18px, 3.8vw, 24px); }

/* Header */
.topbar { position: sticky; top: 0; z-index: 50; }
.topbar-inner { padding: 10px 0; }
.logo-img { height: clamp(28px, 6vw, 40px); }
.logo-text { font-size: clamp(18px, 5vw, 24px); }

/* Navegação */
.nav { gap: 8px; flex-wrap: wrap; }
.nav-btn, .btn-filled, .btn-outline {
  padding: 8px 12px;
  font-size: clamp(12px, 3.5vw, 14px);
}
.welcome { display: none; } /* economiza espaço no mobile */

/* Banner topo e faixa de flores */
.top-banner img { height: auto; }
.footer-border { height: 28px; opacity: .85; }

/* Hero landing */
.hero-landing {
  min-height: clamp(360px, 64vh, 760px);
}
.hero-overlay { padding: 0 8px; }
.btn-hero {
  padding: 12px 20px;
  font-size: clamp(14px, 3.8vw, 16px);
}

/* Grid de cards mais fluido */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(12px, 3vw, 20px);
}

/* Card */
.card { border-radius: 14px; }
.card img { width: 100%; height: auto; }

/* Modal no mobile */
.modal-content {
  width: min(720px, 92vw);
  max-height: 85vh;
  padding: 14px;
}
#productContent .title { font-size: clamp(16px, 4.2vw, 18px); }
#productContent .description { font-size: clamp(13px, 3.6vw, 15px); }
#productContent .price { font-size: clamp(14px, 3.8vw, 16px); }

/* Footer responsivo */
.footer-content { gap: 16px; }
.footer-map iframe { height: 220px; }
.btn-whatsapp { padding: 10px 16px; font-size: clamp(13px, 3.8vw, 15px); }

/* ============ Breakpoints extras ============ */
@media (max-width: 900px) {
  .hero-deco { width: clamp(120px, 26vw, 220px); bottom: 8vh; }
}

@media (max-width: 768px) {
  .footer-content { flex-direction: column; }
  .footer-info { text-align: center; }
  .footer-map, .footer-info { min-width: 100%; }
}

@media (max-width: 480px) {
  .card-grid { grid-template-columns: 1fr; }
  .footer-border { height: 22px; }
  .nav { gap: 6px; }
  .nav-btn, .btn-filled, .btn-outline { padding: 7px 10px; }
}

/* ===== Desktop: volta ao tamanho “normal” ===== */
@media (min-width: 992px) {
  /* Cards com largura fixa confortável */
  .card-grid{
    /* cada coluna terá 260px; cabem várias por linha */
    grid-template-columns: repeat(auto-fit, minmax(260px, 260px));
    justify-content: start;      /* use 'center' se quiser centralizar */
    gap: 20px;
  }
  .card{
    width: 260px;
    border-radius: 12px;
  }
  .card .card-body h4{ font-size: 16px; }
  .card .price{ font-size: 14px; }

  /* Limita a altura da imagem do card no desktop */
  .card img{
    width: 100%;
    height: 180px;               /* ajuste fino aqui, ex.: 160–220px */
    object-fit: cover;           /* troque para 'contain' se não quiser corte */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
}

/* (opcional) garante largura máxima do conteúdo no desktop */
.container{
  max-width: 1120px;
  margin: 0 auto;
}

/* --- FIX: pétalas visíveis no desktop (pétalas acima do conteúdo) --- */
#petal-container{
  z-index: 900;          /* acima do conteúdo */
  pointer-events: none;  /* não bloqueia cliques */
}
.petal{ will-change: transform; }

.topbar{ z-index: 950; } /* header acima das pétalas */
.modal{ z-index: 1000; } /* modais sempre no topo */

/* Botões do topo – aparência consistente para <a> e <button> */
.nav-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.92rem;
  line-height: 1;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease,
              transform .08s ease;
  background: #fff;
  color: #6b4d41;
}
.nav-btn:hover{ transform: translateY(-1px); }

/* Variantes */
.nav-btn.btn-outline{
  background: #fff;
  color: #d38a6b;
  border-color: #d38a6b;
}
.nav-btn.btn-outline:hover{
  background: #d38a6b;
  color: #fff;
}

.nav-btn.btn-filled{
  background: #f2a66f;
  color: #fff;
  border-color: #f2a66f;
}
.nav-btn.btn-filled:hover{
  background: #d38a6b;
  border-color: #d38a6b;
}

/* Sair com cor de alerta suave (opcional) */
.nav-btn.btn-danger{
  background: #ffe9e6;
  color: #b9483f;
  border-color: #efb2ab;
}
.nav-btn.btn-danger:hover{
  background: #b9483f;
  color: #fff;
  border-color: #b9483f;
}