/* Paw Patch Quilt – Frontend styles (stronger specificity, TT4 friendly) */

/* Root + typography */
.ppq-wrap {
  --ppq-bg:#f7f4f2;
  --ppq-text:#1f2328;
  --ppq-muted:#6b7280;
  --ppq-accent:#6f5ef7;
  --ppq-border:#e5e7eb;
  --ppq-card:#ffffff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ppq-text);
}

/* Buttons */
.ppq-btn {
  appearance:none; -webkit-appearance:none;
  border:1px solid transparent;
  padding:12px 16px;
  border-radius: 10px;
  cursor:pointer;
  font-weight: 600;
  line-height: 1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.ppq-btn.primary { background: var(--ppq-accent); color:#fff; box-shadow: 0 2px 6px rgba(111,94,247,.25); }
.ppq-btn.primary:hover { filter: brightness(.95); }
.ppq-btn.secondary { background: #eee; color:#111; border-color:#ddd; }
.ppq-btn.secondary:hover { background:#e5e5e5; }
.ppq-close { background: transparent; border:0; font-size: 1.2rem; float:right; cursor:pointer; color: var(--ppq-muted); }
.ppq-close:hover { color:#000; }

/* MODAL (true overlay + blur) */
.ppq-modal-backdrop {
  position: fixed;
  inset: 0;
  display: none;

  /* Flexbox centering */
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  overflow-y: auto; /* allow scrolling if modal taller than viewport */
  padding: 20px;    /* small breathing room on small screens */
}
.ppq-modal {
  background: var(--ppq-card);
  max-width: 720px;
  width: min(720px, 92%);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  position: relative;
}
.ppq-modal h2 { margin: 0 0 8px; font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.ppq-modal p { margin: 0 0 16px; color: var(--ppq-muted); }
.ppq-modal .ppq-cta { display:flex; gap:12px; flex-wrap:wrap; }

/* Quilt grid */
.ppq-quilt { background: var(--ppq-bg); padding: 12px; border-radius: 16px; }
.ppq-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:12px;
}
@media (max-width: 680px){
  .ppq-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
.ppq-patch {
  background: var(--ppq-card);
  border-radius: 12px;
  overflow:hidden; position:relative;
  border:2px dashed var(--ppq-border);
  transition: transform .12s ease, box-shadow .12s ease;
}
.ppq-patch:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.ppq-patch .ppq-thumb { aspect-ratio: 1 / 1; width:100%; object-fit: cover; display:block; background:#f3f4f6; }
.ppq-patch .ppq-meta { padding:10px; font-size:.92rem; }
.ppq-patch .ppq-name { font-weight:700; }
.ppq-patch .ppq-sub { color:var(--ppq-muted); font-size:.84rem; }

/* Filters */
.ppq-filters { display:flex; gap:8px; flex-wrap:wrap; margin: 10px 0 16px; }
.ppq-chip {
  padding:8px 12px;
  background:#eef2ff; color:#3730a3;
  border:1px solid #c7d2fe;
  border-radius: 999px; cursor:pointer; font-size:.88rem;
}
.ppq-chip.active { background: var(--ppq-accent); color:#fff; border-color: var(--ppq-accent); }

/* Form card */
.ppq-form {
  background: var(--ppq-card);
  border-radius:14px;
  padding:18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border:1px solid var(--ppq-border);
}
.ppq-form h3 { margin-top:0; }
.ppq-field { margin-bottom:14px; }
.ppq-field label { display:block; font-weight:600; margin-bottom:6px; }
.ppq-field input[type="text"],
.ppq-field input[type="url"],
.ppq-field input[type="date"],
.ppq-field input[type="email"],
.ppq-field textarea,
.ppq-field select {
  width:100%; padding:10px 12px;
  border:1px solid var(--ppq-border);
  border-radius:10px; font-size: .95rem; background:#fff;
}
.ppq-field textarea { resize: vertical; }
.ppq-help { font-size:.82rem; color:var(--ppq-muted); }
.ppq-form .ppq-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* Single memorial */
.ppq-single { max-width: 960px; margin: 24px auto; padding: 0 16px; }
.ppq-single-hero { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.ppq-single-hero img { width: 260px; height: 260px; object-fit: cover; border-radius: 12px; background:#f3f4f6; }
.ppq-single h1 { margin:0 0 6px; }
.ppq-single .ppq-stitches { display:flex; gap:8px; align-items:center; margin: 10px 0 20px; flex-wrap:wrap; }
.ppq-stitch-btn {
  padding:8px 12px; border-radius: 10px;
  border: 1px solid var(--ppq-border); background:#fff; cursor:pointer;
}
.ppq-stitch-btn.active { background:#fef3c7; border-color:#f59e0b; }

/* Premium badge */
.ppq-badge { display:inline-block; padding:4px 8px; border-radius:999px; font-size:.78rem; font-weight:700; background:#ffe9a8; color:#7a5200; border:1px solid #f0d27a; }
.ppq-badge.inline { margin-left:8px; }
.ppq-patch .ppq-badge { position:absolute; top:8px; left:8px; }

/* Utility (TT4 spacing quirks) */
.ppq-wrap .wp-block-shortcode { margin:0; }
.ppq-wrap p:empty { display:none; }