/* ============================
   shop.css — Full replacement
   ============================ */

/* ---------- Reset & base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  height: auto !important;             /* avoid a forced 100% height causing non-scroll */
  min-height: 100% !important;
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;       /* prevent horizontal scroll */
  overflow-y: auto !important;         /* force vertical scroll when needed */
  -webkit-overflow-scrolling: touch;
  background-color: inherit;           /* keep site's bg as-is */
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Make the page a vertical flex container so footer sits after content */
body {
  display: flex !important;
  flex-direction: column;
  min-height: 100vh;                   /* ensures footer at bottom when page short */
}

/* Ensure any root wrappers do not steal scroll */
#root, main, .page, .site-wrapper {
  min-height: 0;                       /* allow flex children to shrink properly */
}

/* ---------- Header ---------- */
header {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 1200;
  background: rgba(255,255,255,0.98);
  border-bottom: 1px solid #eee;
  padding: 0.9rem 1.6rem;
  backdrop-filter: blur(3px);
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: flex-start;
}

header nav ul {
  list-style: none;
  display: flex;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
}

header nav a {
  text-decoration: none;
  color: #222;
  font-weight: 600;
  transition: color .15s ease;
}
header nav a:hover { color: #007bff; }

/* ---------- Main (content area) ---------- */
main {
  flex: 1 0 auto;                /* takes remaining space and allows scroll if content grows */
  width: 100%;
  min-height: 0;                 /* important for flex children to allow internal scrolling */
  box-sizing: border-box;
}

/* Intro / hero */
.shop-intro {
  text-align: center;
  padding: 3rem 1rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
}
.shop-intro h1 {
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 700;
  margin: 0 0 0.6rem;
  color: #111;
}
.shop-intro p {
  margin: 0 auto;
  max-width: 760px;
  color: #555;
  font-size: 1.02rem;
}

/* ---------- Template Grid  (responsive and auto-fitting) ---------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.75rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  align-items: start;
  box-sizing: border-box;
  /* Ensure grid doesn't create an internal new stacking context that hides footer */
  min-height: 1px;
}

/* If external CSS set height on this element, ensure it can't block page scroll */
#shop-grid-container, .shop-grid {
  height: auto !important;
  overflow: visible !important;
}

/* ---------- Template card ---------- */
.template-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
  min-height: 420px;   /* consistent card height; adjust if you want taller/shorter */
}
.template-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

/* Preview area uses an aspect ratio */
.card-preview {
  position: relative;
  cursor: pointer;
  background-color: #f0f2f5;
  padding-top: 58%;
  overflow: hidden;
}
.card-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ====== Watermark: crisscrossing "Mistireselassie" for cards + preview ====== */
.watermark-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200' viewBox='0 0 320 200'%3E%3Cstyle%3E text%7Bfont-family:'Poppins',sans-serif;font-weight:700;font-size:18px;fill:rgba(0,0,0,0.06);%7D %3C/style%3E%3Ctext x='50%25' y='30%25' dominant-baseline='middle' text-anchor='middle' transform='rotate(-45 160 60)'%3EMW Dashboard%3C/text%3E%3Ctext x='50%25' y='70%25' dominant-baseline='middle' text-anchor='middle' transform='rotate(45 160 140)'%3EMW Dashboard%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 320px 200px;
  opacity: 1;
}



/* Card content */
.card-content {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1 1 auto;
}
.card-content h3 { margin:0; font-size:1.12rem; color:#111; line-height:1.18; }
.card-content p { margin:0; color:#666; font-size:0.95rem; line-height:1.45; flex: 1 0 auto; }

.card-actions {
  margin-top: .6rem;
  display:flex;
  gap:.75rem;
}
.card-actions .btn {
  border:none;
  padding:.72rem .9rem;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  text-align:center;
  flex:1;
}
.btn-buy {
  background: linear-gradient(180deg,#007bff 0%, #0066d6 100%);
  color: #fff;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-buy:hover, .btn-buy:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,123,255,0.14);
  outline: none;
}

/* ---------- Modal / preview ---------- */
/* Ensure preview modal does not stay visible unintentionally.
   Your index uses class "hidden" to hide the preview by default; keep that behavior. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content:center;
  align-items:center;
  background: rgba(0,0,0,0.75);
  z-index: 2200;
  padding: 1.2rem;
  box-sizing: border-box;
}
.modal-backdrop.hidden { display: none !important; } /* rely on existing html hidden class */

.modal-content {
  background: #fff;
  border-radius: 12px;
  padding: 1.2rem;
  max-width: 96vw;
  max-height: 92vh;
  overflow: auto;
  position: relative;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 1.8rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
}
.preview-container { line-height: 0; }
#modal-body img { max-width:100%; max-height:80vh; display:block; margin:0 auto; }

/* ---------- Chat & Feedback modals — safe defaults ---------- */
/* Some of your other stylesheets may leave these visible — force safe defaults so they
   don't block the page by default. If your chat code explicitly toggles .open or inline styles,
   those will show the modal. This rule simply prevents stray overlays from covering footer. */

#chat-modal, .chat-modal-backdrop{
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
  position: fixed;
  inset: auto; /* don't occupy full screen by default */
  z-index: 2100;
}

/* If your chat/feedback script adds an "open" class, the modal becomes visible.
   If your script uses a different class to show them, adjust the selector there. */
#chat-modal.open,
.chat-modal-backdrop.open,
#feedback-modal.open,
.feedback-modal.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Footer (sticky pattern) ---------- */
footer {
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid #eee;
  padding: 1.25rem 1rem;
  text-align: center;
  color: #555;
  font-size: 0.92rem;
  z-index: 50;
}
footer p { margin:0; display:inline-block; }
footer a { color:#007bff; text-decoration:none; font-weight:600; margin-left:.6rem; }
footer a:hover { text-decoration:underline; }

/* ---------- Accessibility & focus ---------- */
a:focus, button:focus, .card-preview:focus {
  outline: 3px solid rgba(0,123,255,0.14);
  outline-offset: 2px;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 1024px) {
  .shop-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    padding: 1.5rem;
  }
  .template-card { min-height: 420px; }
}

@media (max-width: 768px) {
  .shop-intro { padding: 2rem 0.75rem; }
  .shop-intro h1 { font-size: 1.9rem; }
  .shop-grid {
    grid-template-columns: 1fr;
    padding: 1rem;
    gap: 1rem;
  }
  .template-card { min-height: auto; }
  header .header-container { padding: .6rem .9rem; justify-content:center; }
}

/* --- End of shop.css --- */