/* ── MM Template Selector (afgestemd op editor / minimomenten.nl) ─────────── */

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

:root {
  --mm-theme:       #f5bc3a;
  --mm-theme-soft:  #fff8e8;
  --mm-green:       #719378;
  --mm-green-dark:  #5a7760;
  --mm-orange:      #f06543;
  --mm-text:        #222222;
  --mm-muted:       #666666;
  --mm-border:      #e9e9e9;
  --mm-white:       #ffffff;
  --mm-bg:          #fafafa;
  --mm-radius:      16px;
  --mm-shadow:      0 8px 28px rgba(20, 30, 40, 0.10);
  --font-heading:   'Preahvihear', 'Nunito', sans-serif;
  --font-body:      'Nunito', 'Lato', system-ui, sans-serif;
}

body.mm-selector-page {
  font-family: var(--font-body);
  background: var(--mm-bg);
  color: var(--mm-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.mm-sel-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--mm-white);
  border-bottom: 1px solid var(--mm-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.mm-sel-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.mm-sel-header__logo-img {
  height: 38px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

.mm-sel-header__title {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 1px;
}

.mm-sel-header__title span {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 400;
  color: var(--mm-text);
}

.mm-sel-header__title small {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mm-muted);
}

.mm-sel-header__back {
  font-size: 13px;
  font-weight: 700;
  color: var(--mm-text);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--mm-border);
  border-radius: 8px;
  background: var(--mm-white);
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.mm-sel-header__back:hover {
  border-color: var(--mm-green);
  background: #edf5ef;
}

/* ── Main ─────────────────────────────────────────────────────────────────── */

.mm-sel-main {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 64px;
  width: 100%;
}

.mm-sel-intro {
  text-align: center;
  margin-bottom: 40px;
}

.mm-sel-intro h1 {
  font-family: var(--font-heading);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 400;
  color: var(--mm-text);
  margin-bottom: 10px;
}

.mm-sel-intro p {
  font-size: 16px;
  color: var(--mm-muted);
  line-height: 1.55;
  max-width: 520px;
  margin: 0 auto;
}

.mm-sel-intro__note {
  margin-top: 14px !important;
  padding: 10px 14px;
  background: #fff8e6;
  border-radius: 8px;
  color: #7a5b00 !important;
  font-size: 14px !important;
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */

.mm-sel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */

.mm-sel-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--mm-text);
  background: var(--mm-white);
  border-radius: var(--mm-radius);
  box-shadow: var(--mm-shadow);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
  border: 2px solid transparent;
}

.mm-sel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(20, 30, 40, 0.12);
  border-color: var(--mm-green);
}

.mm-sel-card__img {
  position: relative;
  aspect-ratio: 16/9;
  background: #eef1f4;
  overflow: hidden;
}

.mm-sel-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  /* Vangnet tegen lazyload-CSS van thema/optimalisatieplugins. Die zetten vaak
     `img { opacity: 0 }` en maken de afbeelding pas zichtbaar zodra hún script er een
     klasse op zet. Deze kaartjes kennen ze niet, dus dan blijft de preview onzichtbaar
     (wit) terwijl hij wél geladen is. Specifieker dan hun `img`-regel, dus dit wint. */
  opacity: 1 !important;
  visibility: visible !important;
}

.mm-sel-card:hover .mm-sel-card__img img {
  transform: scale(1.03);
}

.mm-sel-card__hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(113, 147, 120, 0.72);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mm-sel-card:hover .mm-sel-card__hover {
  opacity: 1;
}

.mm-sel-card__hover span {
  background: var(--mm-white);
  color: var(--mm-green-dark);
  font-weight: 800;
  font-size: 14px;
  padding: 10px 22px;
  border-radius: 99px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.mm-sel-card__info {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--mm-border);
}

.mm-sel-card__info h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
}

.mm-sel-card__dim {
  font-size: 11px;
  font-weight: 700;
  color: var(--mm-muted);
  white-space: nowrap;
  padding: 4px 8px;
  background: var(--mm-bg);
  border-radius: 99px;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.mm-sel-footer {
  text-align: center;
  padding: 20px;
  font-size: 13px;
  color: var(--mm-muted);
  border-top: 1px solid var(--mm-border);
  background: var(--mm-white);
}

.mm-sel-footer a { color: var(--mm-green-dark); text-decoration: none; font-weight: 600; }
.mm-sel-footer a:hover { text-decoration: underline; }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .mm-sel-header { padding: 10px 16px; }
  .mm-sel-header__logo-img { height: 32px; max-width: 140px; }
  .mm-sel-main   { padding: 24px 16px 48px; }
  .mm-sel-grid   { grid-template-columns: 1fr 1fr; gap: 14px; }
  .mm-sel-card__info h3 { font-size: 13px; }
}

@media (max-width: 400px) {
  .mm-sel-grid { grid-template-columns: 1fr; }
}