/* ====== Base ====== */
:root{
  --primary:#3b82f6;
  --primary-700:#2563eb;
  --muted:#94a3b8;
  --ink:#1e293b;
  --panel:#ffffffee;
  --glass:#ffffffcc;
  --shadow:0 8px 18px rgba(0,0,0,0.12);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  font-family:'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  margin:0; color:#333;
  background: url('fundo.jpg') no-repeat center center fixed;
  background-size: cover;
  animation: fadeIn 0.6s ease-in;
  font-size:20px;  /* texto base maior */
}

@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes fadeUp { from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }

/* ====== Header / Nav ====== */
header{ text-align:center; padding:48px 20px 24px; }
header h1{ font-family:'Great Vibes', cursive; font-size:64px; color:#3740ff; margin:0; }
header p{ color:#4b5563; margin:10px 0 0; font-size:26px; }

nav{
  display:flex; justify-content:center; gap:40px; padding:20px 24px;
  background:rgba(255,255,255,0.9);
  border-top:10px solid #dbeafe; border-bottom:10px solid #dbeafe;
  position:sticky; top:0; z-index:5; backdrop-filter:saturate(160%) blur(6px);
}
nav a{
  color:#1e3a8a; text-decoration:none; font-weight:700; padding:12px 18px; border-radius:10px;
  font-size:22px;
}
nav a:hover{ background:#e0e7ff; }

footer{
  text-align:center; margin:60px 0 80px; color:#334155;
  background:rgba(255,255,255,0.9); padding:24px; width:min(1100px, 96%);
  border-radius:14px; box-shadow:var(--shadow); margin-inline:auto;
  font-size:22px;
}

/* ====== Pages / Sections ====== */
.page{ display:none; animation: fadeUp .6s ease both; }
.page.visible{ display:block; }

.section-title{ text-align:center; margin:40px 0 12px; font-size:40px; color:#1e3a8a; }
.subtitle{ text-align:center; color:#475569; margin-bottom:24px; font-size:24px; }

/* ====== Grid de Presentes ====== */
.grid{
  width:min(1200px, 96%); margin:0 auto; padding:20px;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:28px;
}
@media (max-width:1200px){ .grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:800px){ .grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .grid{ grid-template-columns:1fr;} }

.card, .gift{
  background:var(--glass); border:2px solid #e0e7ff; border-radius:18px; padding:22px;
  box-shadow:var(--shadow); text-align:center; backdrop-filter: blur(3px);
  font-size:20px;
}

.gift img{
  width:100%; height:220px; object-fit:cover; border-radius:14px;
  border:2px solid #e2e8f0;
}

.gift h3{ font-size:22px; margin:12px 0 10px; color:var(--ink); min-height:40px; }
.gift .price{ font-weight:700; color:#0f172a; margin-bottom:10px; font-size:20px; }

.progress-bar{ width:100%; height:14px; background:#f1f5f9; border-radius:10px; overflow:hidden; }
.progress{ height:100%; width:0%; background:#60a5fa; transition:width .3s ease; }

.btn{
  display:inline-block; width:100%; padding:14px 18px; margin-top:10px;
  border:none; border-radius:10px; cursor:pointer; font-weight:700;
  color:#fff; background:var(--primary); font-size:20px;
}
.btn:hover{ background:var(--primary-700); }
.btn[disabled]{ background:var(--muted); cursor:not-allowed; }

.btn.outline{
  background:transparent; color:var(--primary); border:3px solid var(--primary);
}
.btn.outline:hover{ color:#fff; background:var(--primary); }

.status{ color:#16a34a; font-size:16px; margin-top:10px; }

/* ====== RSVP ====== */
.rsvp-card{ width:min(600px, 96%); margin:20px auto; font-size:20px; }
.rsvp-card input, .rsvp-card select{
  width:100%; padding:14px; border:1px solid #d1d5db; border-radius:10px; margin-top:12px;
  font-size:18px;
}
.rsvp-actions{ display:flex; gap:14px; align-items:center; margin-top:14px; }

/* ====== Admin ====== */
.admin-panels{
  width:min(1200px, 96%); margin:20px auto; display:grid; gap:20px; grid-template-columns:repeat(3,1fr);
}
@media (max-width:960px){ .admin-panels{ grid-template-columns:1fr; } }
.admin-card{ background:var(--panel); border-radius:14px; padding:22px; box-shadow:var(--shadow); font-size:20px; }

/* ====== Pagination ====== */
.pagination{ text-align:center; margin:20px 0 30px; }
.pagination button{
  margin:0 6px; padding:12px 18px; border:none; border-radius:10px; background:var(--primary); color:#fff; cursor:pointer; font-size:18px;
}
.pagination button.disabled{ background:var(--muted); cursor:not-allowed; }

/* ====== Modais ====== */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.55); display:none;
  align-items:center; justify-content:center; z-index:50;
}
.modal .modal-content{
  width:min(500px, 92%); background:#fff; border-radius:14px; padding:24px; animation: fadeUp .35s ease both; font-size:20px;
}
.modal .modal-content input{
  width:100%; padding:14px; border:1px solid #d1d5db; border-radius:10px; margin-top:12px;
}
.modal .modal-actions{ display:flex; gap:14px; margin-top:16px; }
.modal.show{ display:flex; }
button {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

button:hover {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
  transform: scale(1.08);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

button:active {
  transform: scale(0.95);
  background: linear-gradient(135deg, #ff758c, #ff7eb3);
}
/* Botões padrão */
button {
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 4px;
}

/* Botão Levar */
.btn-levar {
  background: #4CAF50;
  color: white;
}
.btn-levar:hover {
  background: #45a049;
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(72, 239, 128, 0.6);
}

/* Botão PIX */
.btn-pix {
  background: #2196F3;
  color: white;
}
.btn-pix:hover {
  background: #1976D2;
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(33, 150, 243, 0.6);
}

/* Botão Cancelar */
.btn-cancel {
  background: #f44336;
  color: white;
}
.btn-cancel:hover {
  background: #d32f2f;
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(244, 67, 54, 0.6);
}
/* Seus estilos atuais */
.card, .gift {
  background: var(--glass);
  border: 2px solid #e0e7ff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow);
  text-align: center;
  backdrop-filter: blur(3px);
  font-size: 20px;
}

.gift img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
  border: 2px solid #e2e8f0;
}

.gift h3 {
  font-size: 22px;
  margin: 12px 0 10px;
  color: var(--ink);
  min-height: 40px;
}

.gift .price {
  font-weight: 700;
  color: #d0172a;
  margin-bottom: 10px;
  font-size: 20px;
}

/* ========================= */
/* Responsividade            */
/* ========================= */

/* Container dos presentes */
#gift-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

/* Cada presente ocupa espaço flexível */
.gift {
  flex: 1 1 220px;
  max-width: 250px;
}

/* Tablet: dois presentes por linha */
@media (max-width: 768px) {
  .gift {
    flex: 1 1 45%;
    max-width: 45%;
  }
}

/* Celular: um presente por linha */
@media (max-width: 480px) {
  .gift {
    flex: 1 1 90%;
    max-width: 90%;
  }
}
/* Ajusta container principal */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* Lista de presentes responsiva */
#gift-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  padding: 10px;
}

/* Card dos presentes */
.gift {
  flex: 1 1 220px;
  max-width: 250px;
  background: var(--glass, rgba(255,255,255,0.8));
  border: 2px solid #e0e7ff;
  border-radius: 18px;
  padding: 18px;
  text-align: center;
  box-shadow: var(--shadow, 0 2px 6px rgba(0,0,0,0.2));
}

/* Tablet */
@media (max-width: 768px) {
  .gift {
    flex: 1 1 45%;
    max-width: 45%;
  }
}

/* Celular */
@media (max-width: 480px) {
  header h1 {
    font-size: 1.8rem;
  }

  header p {
    font-size: 1rem;
  }

  .gift {
    flex: 1 1 90%;
    max-width: 90%;
    padding: 15px;
  }

  .gift img {
    height: 180px;
  }

  .gift h3 {
    font-size: 18px;
  }

  .gift .price {
    font-size: 18px;
  }

  /* Botões menores no mobile */
  .gift button {
    width: 100%;
    font-size: 14px;
    margin-top: 6px;
  }
}
/* ========================= */
/* Ajustes extras de responsividade */
/* ========================= */

/* Cabeçalho em telas pequenas */
@media (max-width: 768px) {
  header {
    padding: 30px 10px 15px;
  }
  header h1 {
    font-size: 2.2rem;
  }
  header p {
    font-size: 1.2rem;
  }

  nav {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
  }
  nav a {
    font-size: 1rem;
    padding: 8px 12px;
  }

  .section-title {
    font-size: 1.8rem;
  }
  .subtitle {
    font-size: 1rem;
    margin-bottom: 16px;
  }
}

/* Telas muito pequenas (celulares até 430px) */
@media (max-width: 430px) {
  body {
    font-size: 16px; /* texto menor */
  }
  header h1 {
    font-size: 1.8rem;
  }
  header p {
    font-size: 1rem;
  }

  .gift {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 14px;
  }
  .gift img {
    height: 160px;
  }
  .gift h3 {
    font-size: 16px;
    min-height: auto;
  }
  .gift .price {
    font-size: 16px;
  }

  /* Botões mais compactos */
  .btn, 
  .gift button {
    font-size: 14px;
    padding: 10px;
  }

  /* Painéis admin em coluna */
  .admin-panels {
    grid-template-columns: 1fr;
  }
}
#pixKey {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin: 12px 0;
  font-size: 18px;
  text-align: center;
}
.pix-info {
  background: rgba(255,255,255,0.9);
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 8px;
  font-size: 16px;
}
.pix-info img {
  display:block;
  margin:auto;
}
img[src*="qrcode"] {
  width: 150px;
  height: auto;
  border-radius: 8px;
}

.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.7);
  z-index: 1000;
}

.modal-content {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  width: 90%;
  max-width: 400px;
}
/* PAINEL DOS NOIVOS */
#admin-section {
  max-width: 800px;
  margin: 40px auto;
  padding: 24px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  backdrop-filter: blur(6px);
}

#admin-section h2 {
  font-size: 1.8rem;
  color: #003366;
  text-align: center;
  margin-bottom: 24px;
}

#admin-section h3 {
  font-size: 1.2rem;
  color: #003366;
  margin-top: 20px;
  margin-bottom: 8px;
}

#admin-section div {
  margin-bottom: 10px;
}

#admin-section .btn {
  background: #2563eb;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}

#admin-section .btn:hover {
  background: #1d4ed8;
}

#admin-section .btn-cancel {
  background: #dc2626;
  color: white;
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  margin-left: 6px;
  cursor: pointer;
}

#admin-section .btn-cancel:hover {
  background: #b91c1c;
}

#btnCloseAdmin {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 10px;
  background: #2563eb;
  border-radius: 6px;
  color: #fff;
  font-weight: bold;
}

#btnCloseAdmin:hover {
  background: #1e40af;
}


.valor-container {
  margin-top: 8px;
}

.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.45);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  animation: fadeIn 0.25s ease;
}
@keyframes fadeIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* ===== Ajustes visuais da seção de presentes ===== */
.gift {
  background: rgba(255,255,255,0.9);
  border-radius: 12px;
  padding: 15px;
  margin: 20px auto;
  max-width: 520px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-align: center;
}

.gift img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
}

.gift h3 {
  font-size: 18px;
  margin: 10px 0 5px;
  color: #222;
}

.gift .price {
  font-weight: bold;
  color: #555;
}

.progress-bar {
  width: 100%;
  height: 10px;
  border-radius: 6px;
  background: #ddd;
  accent-color: #007bff;
}

.progress-text {
  margin-top: 5px;
  font-size: 13px;
  color: #333;
}

.gift-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.gift-actions .btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
}

.btn-pix-top { background: #007bff; }
.btn-valor { background: #00b894; }
.btn-levar { background: #16a34a; }
.btn-cancel { background: #dc2626; }

.btn:hover {
  opacity: 0.9;
}

/* ===== Modal pequeno do valor ===== */
#miniValorModal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
}

#miniValorModal .modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  text-align: center;
}

#miniValorInput {
  width: 120px;
  margin: 10px 0;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid #ccc;
  text-align: center;
}

#miniValorConfirm, #miniValorCancel {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  margin: 0 5px;
  color: #fff;
  cursor: pointer;
}

#miniValorConfirm { background: #16a34a; }
#miniValorCancel { background: #dc2626; }