/* Enhancement info popup + Cupping cup-type variety. Isolated from styles.css so it never
   collides with the shared theme work. Loaded only on services.html. Uses the site palette vars
   (defined in styles.css :root); falls back to literals where a var may be absent. */

/* "Learn more" affordance under each enhancement card */
.addon-card { cursor: pointer; }
.addon-more {
  margin-top: 12px; background: none; border: 0; cursor: pointer;
  color: var(--rust, #9b440d); font: 700 13.5px/1 'DM Sans', sans-serif;
  letter-spacing: .2px; padding: 4px 2px; display: inline-flex; align-items: center; gap: 5px;
}
.addon-more:hover { text-decoration: underline; }

/* Cup-type mini row ON the cupping card */
.cup-variants {
  display: flex; justify-content: center; gap: 10px; margin: 14px 0 2px; flex-wrap: wrap;
}
.cup-variants figure { margin: 0; width: 62px; text-align: center; }
.cup-variants img {
  width: 58px; height: 58px; border-radius: 12px; background: #fff;
  border: 1px solid var(--cream-border, #f9d4bd); object-fit: contain; display: block; margin: 0 auto;
}
.cup-variants figcaption {
  font-size: 11.5px; font-weight: 700; color: var(--body-text, #50555C); margin-top: 5px; line-height: 1.2;
}

/* ---- Modal overlay (mirrors the site lightbox behavior) ---- */
.addon-modal {
  position: fixed; inset: 0; z-index: 2100; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(28, 30, 34, .62);
}
.addon-modal.open { display: flex; }
.addon-modal-panel {
  background: #fff; color: var(--body-text, #50555C);
  width: 100%; max-width: 540px; max-height: 88vh; overflow-y: auto;
  border-radius: 16px; padding: 28px 28px 24px; position: relative;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .32);
  animation: amx-pop .22s ease both;
}
@keyframes amx-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.addon-modal-close {
  position: absolute; top: 12px; right: 14px; background: none; border: 0;
  font-size: 28px; line-height: 1; color: #9a8f86; cursor: pointer; padding: 4px 8px; border-radius: 8px;
  z-index: 3;
}
.addon-modal-close:hover { color: var(--rust, #9b440d); background: var(--cream-fade, #fdf0e9); }
.addon-modal-icon { color: var(--rust, #9b440d); line-height: 0; margin-bottom: 8px; }
.addon-modal-icon svg { width: 40px; height: 40px; }
.addon-modal h3 {
  font-family: 'Playfair Display', serif; color: var(--title-text, #1D2023);
  font-size: 24px; margin: 0 0 10px;
}
.addon-modal p.amx-body { font-size: 15.5px; line-height: 1.6; margin: 0 0 16px; }
.amx-benefits { list-style: none; margin: 0 0 6px; padding: 0; }
.amx-benefits li {
  position: relative; padding: 4px 0 4px 26px; font-size: 14.5px; line-height: 1.5;
}
.amx-benefits li::before {
  content: "✓"; position: absolute; left: 4px; top: 4px; color: var(--sage, #8B9A7F); font-weight: 700;
}

/* In-modal cup gallery (one row per cup type: image + name + blurb) */
.variant-gallery { margin-top: 18px; border-top: 1px solid var(--cream-border, #f9d4bd); padding-top: 16px; }
.variant-gallery .vg-head { font-weight: 700; color: var(--title-text, #1D2023); font-size: 15px; margin-bottom: 10px; }
.variant-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.variant-row:last-child { margin-bottom: 0; }
.variant-row img {
  width: 76px; height: 76px; flex: none; border-radius: 12px; background: #fff;
  border: 1px solid var(--cream-border, #f9d4bd); object-fit: contain;
}
.variant-row .vr-name { font-weight: 700; color: var(--rust, #9b440d); font-size: 15px; margin-bottom: 2px; }
.variant-row .vr-desc { font-size: 13.5px; line-height: 1.5; }

@media (max-width: 680px) {
  .addon-modal-panel { padding: 24px 18px 20px; max-height: 90vh; }
  .addon-modal h3 { font-size: 21px; }
  .variant-row img { width: 60px; height: 60px; }
}

/* Dark mode parity */
[data-theme="dark"] .addon-modal-panel { background: #20242c; color: #c9cdd6; }
[data-theme="dark"] .addon-modal h3 { color: #f1ece3; }
[data-theme="dark"] .addon-modal-close:hover { background: rgba(255,255,255,.08); }
[data-theme="dark"] .cup-variants img,
[data-theme="dark"] .variant-row img { background: #f3ece2; border-color: #3a3f4a; }
[data-theme="dark"] .variant-gallery { border-top-color: #3a3f4a; }
[data-theme="dark"] .amx-benefits li::before { color: #a9b79c; }

/* ---- Phones: enhancements as a 2-up grid of smaller blocks. The enhancements menu is
   #addon-menu (.card-grid.card-grid-4); styles.css collapses it to ONE column at max-width:727px
   — re-assert two columns there. This file loads after styles.css and #id beats .class, so it
   wins (!important kept for robustness). Cards compacted so two fit cleanly per row. ---- */
@media (max-width: 727px) {
  #addon-menu { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  #addon-menu .addon-card { padding: 16px 12px; }
  #addon-menu .addon-card-icon { margin-bottom: 8px; }
  #addon-menu .addon-card-icon svg { width: 30px; height: 30px; }
  #addon-menu .addon-card h3 { margin-bottom: 6px; font-size: 16px; }
  #addon-menu .addon-card p { font-size: 12.5px; line-height: 1.45; }
  #addon-menu .addon-more { margin-top: 9px; font-size: 12.5px; }
  /* Cupping thumbnails shrink to fit the narrower 2-up card */
  #addon-menu .cup-variants { gap: 5px; margin: 10px 0 2px; }
  #addon-menu .cup-variants figure { width: 40px; }
  #addon-menu .cup-variants img { width: 36px; height: 36px; border-radius: 9px; }
  #addon-menu .cup-variants figcaption { font-size: 9px; margin-top: 3px; }
}

/* ===== Homepage hero info-popup (#info-modal): photo header + benefits ===== */
#info-modal .addon-modal-panel { text-align: left; }
#info-modal .im-media { position: relative; margin: -2px 0 14px; border-radius: 14px; overflow: hidden; line-height: 0; background: var(--cream-fade, #fdf0e9); }
#info-modal .im-img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; }
#info-modal .im-soon { position: absolute; top: 10px; left: 10px; background: var(--rust, #9b440d); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; line-height: 1.2; }
#info-modal h3 { margin: 0 0 8px; }
#info-modal .amx-body { font-size: 15.5px; line-height: 1.6; margin: 0 0 14px; }
#info-modal .amx-benefits { list-style: none; margin: 0; padding: 0; }
#info-modal .amx-benefits li { position: relative; padding-left: 22px; margin: 7px 0; font-size: 14.5px; line-height: 1.5; }
#info-modal .amx-benefits li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--rust, #9b440d); font-weight: 800; }
[data-theme="dark"] #info-modal .im-media { background: #2a2f38; }
[data-theme="dark"] #info-modal .amx-benefits li::before { color: #a9b79c; }