/* ═══════════════════════════════════════
   LEVI BLOG — Shared Styles
═══════════════════════════════════════ */

:root {
  --peach:    #ffcba4;
  --blush:    #fde8e0;
  --mint:     #c8ead8;
  --sky:      #bde3f5;
  --lavender: #ddd0f0;
  --butter:   #fef3c0;
  --cream:    #fdf8f3;
  --warm:     #f9efe6;
  --ink:      #3b2f2f;
  --mid:      #7a6360;
  --light:    #c4b0ac;
  --white:    #fffcf9;
  --accent:   #e07b54;
  --accent2:  #f09070;
  --shadow:   0 4px 24px rgba(59,47,47,.10);
  --shadow-lg:0 8px 40px rgba(59,47,47,.14);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito', sans-serif;
  background: var(--cream);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── HEADER ── */
.site-header {
  background: var(--white);
  border-bottom: 2px solid var(--blush);
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 16px rgba(59,47,47,.07);
}
.hdr-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
}
.hdr-logo {
  font-family: 'Fraunces', serif;
  font-size: 1.45rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.hdr-logo em { color: var(--accent); font-style: normal; }
.hdr-right { display: flex; align-items: center; gap: 10px; }

/* ── BUTTONS ── */
.btn {
  padding: 8px 18px;
  border-radius: 50px;
  font-family: 'Nunito', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  color: white;
  box-shadow: 0 4px 14px rgba(224,123,84,.26);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(224,123,84,.34); }
.btn-ghost {
  background: none;
  border-color: var(--blush);
  color: var(--mid);
}
.btn-ghost:hover { border-color: var(--peach); color: var(--ink); }
.btn-whatsapp {
  background: none;
  border-color: #25d366;
  color: #25d366;
}
.btn-whatsapp:hover { background: #25d366; color: white; }
.btn-purple {
  background: linear-gradient(135deg, #c89ee8, #a86dd8);
  color: white;
  border: none;
  box-shadow: 0 4px 16px rgba(168,109,216,.28);
}
.btn-purple:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(168,109,216,.38); }
.btn-purple:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-teal {
  background: linear-gradient(135deg, #7ec8e3, #4aabcc);
  color: white;
  border: none;
  box-shadow: 0 6px 20px rgba(74,171,204,.28);
}
.btn-teal:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(74,171,204,.36); }
.btn-teal:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-danger { background: none; border-color: var(--blush); color: var(--light); }
.btn-danger:hover { border-color: #d45; color: #d45; }

/* ── SECTION CARD ── */
.section-card {
  background: var(--white);
  border-radius: 24px;
  padding: 36px;
  margin-bottom: 28px;
  box-shadow: var(--shadow);
  border: 1.5px solid var(--blush);
}
.section-title {
  font-family: 'Fraunces', serif;
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── FORM FIELDS ── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.field-group { display: flex; flex-direction: column; gap: 7px; }
.field-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mid);
}
.field-input, .field-textarea {
  background: var(--warm);
  border: 2px solid var(--blush);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: 'Nunito', sans-serif;
  font-size: .94rem;
  color: var(--ink);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.field-input:focus, .field-textarea:focus {
  border-color: var(--peach);
  box-shadow: 0 0 0 3px rgba(255,203,164,.2);
}
.field-textarea { min-height: 96px; resize: vertical; }
.field-hint { font-size: .71rem; color: var(--light); margin-top: 3px; }

/* ── IMAGE UPLOAD ── */
.upload-zone {
  border: 2.5px dashed var(--peach);
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: var(--warm);
}
.upload-zone:hover { border-color: var(--accent); background: var(--blush); }
.upload-zone-icon { font-size: 2.2rem; margin-bottom: 6px; }
.upload-zone-text { font-size: .83rem; color: var(--mid); font-weight: 600; }
.upload-zone-sub { font-size: .72rem; color: var(--light); margin-top: 3px; }

.img-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.img-preview-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--blush);
}
.img-preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-preview-del {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(255,255,255,.92);
  border: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: .65rem;
  cursor: pointer;
  color: #d45;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── MODAL ── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(59,47,47,.42);
  backdrop-filter: blur(5px);
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--white);
  border-radius: 28px;
  padding: 44px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modalPop .3s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
@keyframes modalPop { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }
.modal h2 { font-family:'Fraunces',serif; font-size:1.6rem; font-weight:600; margin-bottom:8px; }
.modal p { font-size:.88rem; color:var(--mid); margin-bottom:22px; line-height:1.6; }
.modal-close {
  position: absolute;
  top: 18px; right: 20px;
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--light);
  cursor: pointer;
}
.modal-close:hover { color: var(--ink); }
.modal-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.share-url-box {
  background: var(--warm);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: .8rem;
  color: var(--mid);
  word-break: break-all;
  margin-bottom: 10px;
  border: 1.5px solid var(--blush);
}
.share-pwd-box {
  background: var(--butter);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: .9rem;
  font-weight: 700;
  color: #7a5020;
  margin-bottom: 24px;
  border: 1.5px solid #f5d88a;
  letter-spacing: .08em;
}

/* ── LIGHTBOX ── */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.86);
  z-index: 500;
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
}
.lightbox-close {
  position: absolute;
  top: 18px; right: 22px;
  background: rgba(255,255,255,.15);
  border: none;
  color: white;
  font-size: 1.5rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── PDF PROGRESS ── */
.pdf-progress {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(59,47,47,.5);
  backdrop-filter: blur(6px);
  z-index: 600;
  align-items: center;
  justify-content: center;
}
.pdf-progress.open { display: flex; }
.pdf-progress-box {
  background: var(--white);
  border-radius: 24px;
  padding: 44px 48px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  max-width: 340px;
  width: 90%;
}
.pdf-progress-icon { font-size: 3rem; margin-bottom: 14px; display: block; animation: spin 1.8s linear infinite; }
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.pdf-progress-title { font-family:'Fraunces',serif; font-size:1.3rem; font-weight:600; color:var(--ink); margin-bottom:8px; }
.pdf-progress-sub { font-size:.84rem; color:var(--mid); }

/* ── POST CARD ── */
.post-card {
  background: var(--white);
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 32px;
  box-shadow: var(--shadow);
  border: 1.5px solid var(--blush);
  transition: transform .3s, box-shadow .3s;
  animation: cardIn .5s ease both;
}
@keyframes cardIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.post-images { width: 100%; position: relative; background: var(--warm); overflow: hidden; }
.post-images.single { height: 340px; }
.post-images.single img { width:100%; height:100%; object-fit:cover; display:block; }
.post-images.duo { display:grid; grid-template-columns:1fr 1fr; gap:2px; height:260px; }
.post-images.duo img { width:100%; height:100%; object-fit:cover; display:block; }
.post-images.trio { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:2px; height:280px; }
.post-images.trio img { width:100%; height:100%; object-fit:cover; display:block; }
.post-images.trio img:first-child { grid-row:1/3; }
.post-images.many { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; height:210px; }
.post-images.many img { width:100%; height:100%; object-fit:cover; display:block; }
.post-images-placeholder {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, var(--blush), var(--butter));
}

.post-body { padding: 28px 32px; }
.post-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.tag { padding:4px 14px; border-radius:50px; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.tag-week { background:var(--peach); color:#7a3a20; }
.tag-year { background:var(--mint); color:#2a6040; }

.post-title { font-family:'Fraunces',serif; font-size:1.7rem; font-weight:600; line-height:1.25; margin-bottom:12px; color:var(--ink); }
.post-text { font-size:.94rem; line-height:1.85; color:var(--mid); white-space:pre-wrap; }

.post-footer {
  padding: 14px 32px 22px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 2px solid var(--blush);
}
.post-date { font-size:.74rem; color:var(--light); font-weight:600; }
.post-views-badge {
  font-size:.72rem; font-weight:700;
  color:#5aafcc;
  background:rgba(189,227,245,.2);
  border:1.5px solid var(--sky);
  padding:3px 12px;
  border-radius:50px;
}

/* ── WA BUTTON ── */
.wa-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #25d366;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 10px 20px;
  font-family: 'Nunito', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(37,211,102,.28);
  transition: transform .15s;
}
.wa-btn:hover { transform: translateY(-1px); }
.wa-icon { width:14px; height:14px; fill:white; flex-shrink:0; }

/* ── STATS GRID ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 16px;
  margin-bottom: 44px;
}
.stat-card {
  background: var(--white);
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: var(--shadow);
  border: 1.5px solid var(--blush);
}
.stat-num { font-family:'Fraunces',serif; font-size:2.4rem; color:var(--accent); font-weight:600; line-height:1; }
.stat-label { font-size:.67rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--light); margin-top:5px; }

/* ── EMPTY STATE ── */
.empty-state { text-align:center; padding:80px 32px; font-size:.95rem; color:var(--light); line-height:1.7; }
.empty-state-icon { font-size:3.5rem; margin-bottom:16px; display:block; }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .section-card { padding: 20px; }
  .post-body { padding: 20px; }
  .post-footer { padding: 12px 20px 18px; }
  .modal { padding: 32px 24px; }
  .hdr-right .btn:not(:last-child) { display: none; }
}