/* =========================================
   1. IMPORTAÇÃO DE FONTES & RESET
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: #0b1c2d;
  color: #ffffff;
  text-align: center;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.hidden {
  display: none !important;
}

/* =========================================
   2. POPUP EMOCIONAL & BARRA
   ========================================= */
.emotion-popup {
  position: fixed; inset: 0; background: rgba(11, 28, 45, 0.98);
  justify-content: center; align-items: center; z-index: 2000; display: none;
}
.emotion-popup.show { display: flex; }
.popup-content {
  background: #132f4c; padding: 30px 25px; border-radius: 20px;
  font-size: 18px; font-weight: bold; color: #00c48c;
  animation: fadeIn 0.4s ease; box-shadow: 0 10px 40px rgba(0,0,0,0.6); border: 1px solid #1a3c5e;
}

.emotion-bar {
  position: fixed; top: 0; left: 0; width: 100%; height: 38px;
  background: #132f4c; z-index: 1500; display: flex; align-items: center;
  border-bottom: 1px solid #1a3c5e; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.emotion-fill {
  height: 100%; width: 0%; background: linear-gradient(90deg, #00c48c, #00e0a1);
  transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 0 10px rgba(0, 196, 140, 0.5);
}
.emotion-bar span {
  position: absolute; width: 100%; font-size: 11px; font-weight: bold;
  text-transform: uppercase; letter-spacing: 0.5px; text-shadow: 0 1px 2px rgba(0,0,0,0.8); pointer-events: none;
}

/* =========================================
   3. INTRODUÇÃO
   ========================================= */
.intro {
  min-height: 100vh; padding: 24px; display: flex; flex-direction: column;
  justify-content: center; align-items: center; animation: fadeIn 1s ease;
}
.logo {
  width: 240px; margin-bottom: 25px; filter: drop-shadow(0 0 15px rgba(0,196,140,0.15));
}
.tagline {
  font-size: 15px; opacity: 0.8; margin-bottom: 40px; line-height: 1.6; max-width: 320px;
}
.intro button {
  padding: 16px 45px; border: none; border-radius: 50px; background: #00c48c;
  color: #0b1c2d; font-size: 16px; font-weight: 800; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 20px rgba(0, 196, 140, 0.3);
}
.intro button:active { transform: scale(0.96); }

/* =========================================
   4. SELEÇÃO DE CESTA
   ========================================= */
.basket-select { padding: 80px 20px 40px; animation: fadeIn 0.6s ease; }
.basket-select h2 { font-size: 22px; margin-bottom: 30px; color: #fff; }

.basket-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 15px; max-width: 600px; margin: auto;
}
.basket-card {
  background: #132f4c; border-radius: 16px; padding: 12px; cursor: pointer;
  border: 1px solid transparent; transition: all 0.3s ease;
  display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden;
}
.basket-card:hover {
  transform: translateY(-5px); border-color: #00c48c; background: #1a3c5e;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.basket-card:active { transform: scale(0.98); }
.basket-card img {
  width: 100%; border-radius: 12px; margin-bottom: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.card-name { display: block; font-size: 15px; font-weight: bold; margin-bottom: 6px; color: #fff; }
.card-phrase { display: block; font-size: 13px; color: #00c48c; font-weight: bold; font-style: italic; }

/* =========================================
   5. MONTAGEM (VISUAL + PREÇO)
   ========================================= */
.basket-visual { padding: 60px 20px 100px; animation: fadeIn 0.5s ease; }
.visual-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #1a3c5e;
  max-width: 400px; margin-left: auto; margin-right: auto;
}
.visual-header h2 { font-size: 18px; margin: 0; }
.delete-btn {
  background: rgba(255, 71, 87, 0.1); color: #ff4757; border: 1px solid rgba(255, 71, 87, 0.3);
  padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: bold; cursor: pointer; transition: all 0.2s;
}
.price-display {
  background: #1a3c5e; border: 1px solid #00c48c; padding: 15px 20px;
  border-radius: 12px; margin-bottom: 25px; display: flex; justify-content: space-between;
  align-items: center; max-width: 380px; margin-left: auto; margin-right: auto;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.price-label { font-size: 14px; color: #a0b3c6; text-transform: uppercase; font-weight: bold; }
.price-value { font-size: 24px; font-weight: 800; color: #00c48c; }
.instruction-text { font-size: 14px; color: #a0b3c6; margin-bottom: 25px; }

.slots {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  max-width: 380px; margin: 0 auto 40px;
}
.slot {
  aspect-ratio: 1 / 1; border: 2px dashed #00c48c; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #00c48c; opacity: 0.7; background: rgba(19, 47, 76, 0.4);
  cursor: pointer; position: relative; overflow: hidden;
}
.slot:hover { background: rgba(0, 196, 140, 0.15); transform: scale(1.02); opacity: 1; }
.slot.filled {
  border: 2px solid #00c48c; background: #132f4c; flex-direction: column; opacity: 1; padding: 5px;
}
.slot.filled img { width: 90%; height: 70%; object-fit: contain; margin-bottom: 4px; }
.slot.filled span { font-size: 9px; color: #fff; white-space: nowrap; overflow: hidden; width: 100%; text-overflow: ellipsis; }

/* =========================================
   6. TELA: MENSAGEM (CARTÃO)
   ========================================= */
.message-section {
  padding: 80px 20px 40px; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; animation: fadeIn 0.6s ease;
}
.message-header h2 { font-size: 24px; margin-bottom: 10px; color: #fff; }
.message-header p { color: #a0b3c6; font-size: 14px; margin-bottom: 30px; }

.card-preview {
  background: #fffdf5; color: #333; width: 100%; max-width: 400px; padding: 25px;
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); margin-bottom: 30px;
  border-top: 5px solid #00c48c;
}
.input-group { margin-bottom: 15px; text-align: left; }
.input-group label {
  font-size: 11px; font-weight: bold; color: #999; text-transform: uppercase; display: block; margin-bottom: 4px;
}
.input-group input {
  width: 100%; border: none; border-bottom: 1px dashed #ccc; background: transparent;
  font-family: 'Caveat', cursive; font-size: 24px; color: #2c3e50; outline: none; padding: 2px 0;
}
.textarea-container textarea {
  width: 100%; height: 140px; border: none; background: transparent;
  font-family: 'Caveat', cursive; font-size: 26px; line-height: 1.4;
  color: #2c3e50; outline: none; resize: none;
  background-image: linear-gradient(transparent, transparent 29px, #e5e5e5 30px);
  background-size: 100% 30px;
}

.inspiration-container { max-width: 400px; width: 100%; margin-bottom: 40px; }
.inspiration-container p { font-size: 13px; color: #a0b3c6; margin-bottom: 10px; }
.tags-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tags-wrapper button {
  background: #132f4c; border: 1px solid #00c48c; color: #fff; padding: 8px 14px;
  border-radius: 20px; font-size: 13px; cursor: pointer; transition: all 0.2s;
}
.tags-wrapper button:hover { background: #00c48c; color: #0b1c2d; }

/* =========================================
   7. ANIMAÇÃO MÁGICA (CORRIGIDA E OTIMIZADA)
   ========================================= */
.magic-overlay {
  position: fixed; inset: 0; background: #0b1c2d; z-index: 5000;
  display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 20px;
}

.magic-title {
  color: #00c48c; margin-bottom: 20px; font-size: 22px; text-align: center;
  animation: pulse 1.5s infinite;
}

.magic-stage {
  position: relative; width: 100%; max-width: 400px; height: 500px;
  display: flex; justify-content: center; align-items: flex-end;
}

.magic-basket-container {
  position: relative; width: 300px; height: 160px;
  display: flex; justify-content: center; z-index: 1; /* Atrás da carta */
}

/* Área onde os itens caem */
.magic-items-area {
  position: absolute; bottom: 80px; width: 280px; height: 350px;
  display: flex; justify-content: center; align-items: flex-end;
  z-index: 2; overflow: hidden; /* Corta o item quando ele entra */
}

/* O Item Animado (MAIOR) */
.magic-item {
  width: 90px; height: 90px; object-fit: contain; margin: -10px; opacity: 0;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
}

/* Efeito cair e sumir */
.drop-in { animation: dropAndVanish 0.8s forwards; }

@keyframes dropAndVanish {
  0% { transform: translateY(-400px) scale(0.8); opacity: 0; }
  30% { opacity: 1; }
  80% { transform: translateY(20px) scale(1); opacity: 1; }
  100% { transform: translateY(80px) scale(0.5); opacity: 0; }
}

/* Base da Cesta */
.basket-base-img { width: 100%; position: absolute; bottom: 0; z-index: 1; }
.basket-front {
  position: absolute; bottom: 0; width: 300px; height: 80px;
  background: linear-gradient(to bottom, #d4a373, #a98467);
  border-radius: 0 0 50px 50px; z-index: 3; /* Frente dos itens */
  border: 5px solid #5e4033; box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

/* A CARTA (Envelope na frente) */
.magic-card {
  position: absolute; bottom: 20px; background: #fffdf5; width: 260px; padding: 20px;
  border-radius: 8px; z-index: 10; /* Bem na frente */
  box-shadow: 0 20px 60px rgba(0,0,0,0.8); border-top: 4px solid #00c48c;
  transform: translateY(300px); /* Escondido */
  transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
}
.magic-card.show-card { transform: translateY(-10px) rotate(-2deg); }

.card-seal { font-size: 28px; margin-bottom: 5px; }
.card-preview-text {
  font-family: 'Caveat', cursive; font-size: 22px; color: #333; line-height: 1.2;
  margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.card-signature { font-family: 'Arial', sans-serif; font-size: 11px; color: #aaa; text-transform: uppercase; letter-spacing: 1px; }

@keyframes pulse { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } }

/* =========================================
   8. TELA: CHECKOUT (ENTREGA)
   ========================================= */
.checkout-section {
  padding: 80px 20px 40px; animation: fadeIn 0.6s ease; max-width: 450px; margin: auto;
}
.checkout-header h2 { font-size: 24px; margin-bottom: 10px; }
.checkout-header p { color: #a0b3c6; font-size: 14px; margin-bottom: 30px; }

.form-group { text-align: left; margin-bottom: 20px; }
.form-group label {
  display: block; color: #00c48c; font-size: 12px; font-weight: bold; margin-bottom: 8px; text-transform: uppercase;
}
.form-group input, .form-group select {
  width: 100%; padding: 14px; background: #132f4c; border: 1px solid #1a3c5e;
  border-radius: 12px; color: #fff; font-size: 16px; outline: none; transition: border 0.3s;
}
.form-group input:focus, .form-group select:focus { border-color: #00c48c; }

.final-summary {
  background: rgba(0, 196, 140, 0.1); padding: 20px; border-radius: 12px;
  margin-top: 20px; margin-bottom: 30px; border: 1px solid rgba(0, 196, 140, 0.3);
}
.final-summary p { font-size: 18px; color: #fff; }
.final-summary strong { color: #00c48c; font-size: 22px; }

.whatsapp-btn {
  background: #25D366; color: #fff; border: none; padding: 16px 30px;
  border-radius: 30px; font-size: 16px; font-weight: bold; display: flex;
  align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4); transition: transform 0.2s; width: 100%;
}
.whatsapp-btn:hover { transform: scale(1.02); background: #1ebc57; }

.finish-btn {
  background: #00c48c; color: #0b1c2d; border: none; padding: 16px 32px;
  border-radius: 30px; font-weight: 800; font-size: 16px; cursor: pointer;
  width: 100%; max-width: 300px; box-shadow: 0 4px 20px rgba(0, 196, 140, 0.4);
}
.back-link {
  background: transparent; border: none; color: #a0b3c6; margin-top: 20px;
  text-decoration: underline; cursor: pointer; font-size: 14px;
}

/* =========================================
   9. MODALS
   ========================================= */
.modal {
  position: fixed; inset: 0; background: rgba(11, 28, 45, 0.95);
  display: none; justify-content: center; align-items: center; z-index: 3000; backdrop-filter: blur(8px);
}
.modal:not(.hidden) { display: flex; }

.interactive-modal {
  background: #132f4c; padding: 30px 20px; border-radius: 24px;
  max-width: 360px; width: 90%; text-align: center; border: 1px solid #1a3c5e;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6); animation: zoomIn 0.3s;
}
.interactive-modal h2 { font-size: 20px; margin-bottom: 8px; }
.modal-subtitle { font-size: 13px; color: #a0b3c6; margin-bottom: 25px; }

.quantity-options-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 25px; }
.quantity-card {
  background: #0b1c2d; padding: 15px 5px; border-radius: 14px; cursor: pointer;
  border: 2px solid transparent; transition: all 0.2s; display: flex; flex-direction: column; align-items: center;
}
.quantity-card:hover { border-color: #00c48c; transform: translateY(-4px); background: #1a3c5e; }
.icon-wrapper { font-size: 22px; margin-bottom: 6px; position: relative; }
.small-badge, .medium-badge, .large-badge {
  position: absolute; bottom: -3px; right: -5px; font-size: 8px; font-weight: bold;
  background: #132f4c; color: #00c48c; padding: 2px 4px; border-radius: 4px; border: 1px solid #00c48c;
}
.qty-number { font-size: 18px; font-weight: bold; display: block; }
.qty-label { font-size: 9px; color: #a0b3c6; text-transform: uppercase; margin-top: 2px; }
.secondary-action { background: transparent; border: none; color: #ff4757; font-weight: bold; font-size: 14px; cursor: pointer; padding: 10px; }

.product-content {
  background: #132f4c; border-radius: 20px; padding: 20px;
  max-width: 400px; width: 95%; height: 85vh; display: flex; flex-direction: column;
  border: 1px solid #1a3c5e; animation: zoomIn 0.3s ease;
}
.product-content h3 { font-size: 18px; margin-bottom: 15px; color: #fff; }

.category-tabs {
  display: flex; gap: 10px; margin-bottom: 15px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none;
}
.category-tabs::-webkit-scrollbar { display: none; }
.tab {
  background: transparent; border: 1px solid #2d557a; color: #a0b3c6;
  padding: 8px 18px; border-radius: 20px; cursor: pointer; white-space: nowrap; font-size: 13px;
}
.tab.active { background: #00c48c; color: #0b1c2d; border-color: #00c48c; font-weight: bold; }

.product-list { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 4px; }
.product-item {
  background: #0b1c2d; padding: 12px; border-radius: 12px; border: 1px solid #1a3c5e;
  cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.product-item:hover { border-color: #00c48c; transform: scale(1.03); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.product-item img { width: 100%; height: 80px; object-fit: contain; margin-bottom: 8px; }
.product-item p { font-size: 12px; font-weight: bold; line-height: 1.2; }
.product-price-tag {
  font-size: 11px; color: #00c48c; margin-top: 5px; font-weight: 800;
  background: rgba(0, 196, 140, 0.1); padding: 2px 6px; border-radius: 4px;
}
.close-modal {
  margin-top: 15px; background: transparent; border: 1px solid #2d557a; color: #fff;
  padding: 10px; border-radius: 12px; font-weight: bold; cursor: pointer;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }