/* SGS My List — brand: Jost, ink #1E2A26, ivory #FAF8F3, emerald #10A674, deep emerald #0B7A55, papaya #FF7A4D */

.sgsml-wrap { position: relative !important; }

.sgsml-heart {
  position: absolute; top: 10px; right: 10px; z-index: 30;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(250, 248, 243, 0.96);
  border: none; box-shadow: 0 2px 10px rgba(20, 40, 32, 0.25);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; transition: transform 0.15s ease;
}
.sgsml-heart:hover { transform: scale(1.08); }
.sgsml-heart svg path { fill: none; stroke: #1E2A26; stroke-width: 1.7; }
.sgsml-heart.is-on svg path { fill: #FF7A4D; stroke: #FF7A4D; }

/* Category filter notice on the Services page. */
.sgsml-catnote {
  font-family: 'Jost', sans-serif; font-size: 15px; color: #0B7A55;
  background: #E4F4EC; border-radius: 12px; padding: 12px 18px;
  margin: 18px auto; max-width: 1080px; width: 92%;
}
.sgsml-catnote a { color: #0B7A55; font-weight: 600; text-decoration: underline; }

/* Whole-card navigation affordance + a forgiving invisible halo around the
   heart, so a near-miss tap still lands on the heart, not the card link. */
.sgsml-cardlink { cursor: pointer; }
.sgsml-heart::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; }

/* One soft award badge: translucent beige pill, faint papaya outline, small
   star, wording inside — a single element, top-left in every context. */
.sgsml-ribbon {
  position: absolute; top: 12px; left: 12px; z-index: 30;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(250, 246, 238, 0.88);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border: 1.5px solid rgba(255, 122, 77, 0.55);
  border-radius: 999px; padding: 5px 10px 5px 9px;
  box-shadow: 0 2px 10px rgba(20, 40, 32, 0.16);
  pointer-events: none; white-space: nowrap;
}
.sgsml-star { color: #FF7A4D; font-size: 11px; line-height: 1; }
.sgsml-ribbon-text {
  color: #0B7A55; font-family: 'Jost', sans-serif; font-size: 12px;
  font-weight: 600; line-height: 1.2; letter-spacing: 0.01em;
}
.sgsml-ribbon.is-big { padding: 8px 16px 8px 13px; }
.sgsml-ribbon.is-big .sgsml-star { font-size: 14px; }
.sgsml-ribbon.is-big .sgsml-ribbon-text { font-size: 14.5px; }
.sgsml-ribbon-inline {
  position: static; pointer-events: auto; margin-bottom: 2px;
  background: rgba(250, 246, 238, 1); box-shadow: none; padding: 4px 10px 4px 8px;
}
.sgsml-ribbon-inline .sgsml-star { font-size: 11px; }
.sgsml-ribbon-inline .sgsml-ribbon-text { font-size: 11.5px; }

.sgsml-pill {
  position: fixed; right: 18px; bottom: 18px; z-index: 9990;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #15B57E, #0D9668); color: #fff !important;
  font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 600;
  padding: 11px 18px; border-radius: 999px; text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(13, 150, 104, 0.4);
}
.sgsml-pill-heart svg path { fill: #FF7A4D; stroke: #FF7A4D; }
.sgsml-bounce { animation: sgsml-bounce 0.45s ease; }
@keyframes sgsml-bounce {
  0% { transform: scale(1); } 35% { transform: scale(1.13); } 100% { transform: scale(1); }
}

.sgsml-confetti { position: fixed; inset: 0; z-index: 99999; pointer-events: none; }

/* ---------- List page ---------- */
#sgsml-app { max-width: 1160px; margin: 0 auto; padding: 34px 20px 70px; font-family: 'Jost', sans-serif; color: #1E2A26; }
#sgsml-app h1 { font-family: 'Jost', sans-serif; font-size: 38px; font-weight: 600; margin: 0 0 8px; }
#sgsml-app .sgsml-intro { font-size: 18px; color: #40524A; margin: 0 0 26px; max-width: 640px; }
.sgsml-group { margin: 0 0 34px; }
.sgsml-group h2 { font-family: 'Jost', sans-serif; font-size: 24px; font-weight: 600; color: #0B7A55; margin: 0 0 12px; }
.sgsml-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.sgsml-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 3px 14px rgba(20, 40, 32, 0.09); display: flex; flex-direction: column; position: relative; }
/* Whole-card navigation, CSS-only: the title link stretches over the card, so
   a click anywhere on the card is a click on a real link (no JS needed).
   The actions row (Book / Maps / Remove) is lifted above the stretch so its
   own links and buttons stay individually clickable. */
#sgsml-app .sgsml-card-body h3 a::after { content: ''; position: absolute; inset: 0; }
#sgsml-app .sgsml-actions { position: relative; z-index: 2; }
.sgsml-card-img img { display: block; width: 100%; height: 160px; object-fit: cover; }
/* The theme gives every <p> ~1em of bottom padding, which stretched the cards;
   inside a card body, spacing comes from the flex gap alone. */
#sgsml-app .sgsml-card-body > * { margin: 0; }
#sgsml-app .sgsml-card-body p { padding: 0; }
.sgsml-card-body { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
/* Identity block (title + location) reads as one unit; a clear breath before
   the ratings block that follows it. */
#sgsml-app .sgsml-loc + .sgsml-badge { margin-top: 8px; }
.sgsml-card-body h3 { font-family: 'Jost', sans-serif; font-size: 19px; font-weight: 600; margin: 0; line-height: 1.15; }
.sgsml-card-body h3 a { color: #0B7A55; text-decoration: none; }
/* Location hugs the title — Jost's line boxes leave more air than the eye wants. */
#sgsml-app .sgsml-card-body h3 + .sgsml-loc { margin-top: -4px; }
.sgsml-loc { margin: 0; color: #5A6B62; font-size: 14.5px; line-height: 1.35; }
.sgsml-badge { margin: 0; font-size: 13.5px; color: #1E2A26; line-height: 1.35; }
.sgsml-badge-booking { color: #003580; font-weight: 600; }
.sgsml-note { margin: 0; color: #7A6A5F; font-size: 14.5px; }
.sgsml-actions { margin: auto 0 0; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sgsml-btn {
  display: inline-block; background: linear-gradient(135deg, #15B57E, #0D9668); color: #fff !important;
  font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 600;
  padding: 10px 18px; border-radius: 999px; border: none; cursor: pointer; text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(13, 150, 104, 0.35);
}
.sgsml-btn-soft { background: #E4F4EC; color: #0B7A55 !important; box-shadow: none; }
.sgsml-btn-ig { background: #FF7A4D; box-shadow: 0 4px 14px rgba(255, 122, 77, 0.38); }
/* WhatsApp quick-contact pill on service cards (loop cards + list cards).
   WhatsApp green rather than the site emerald gradient, on purpose: the
   button's whole job is to be recognised as WhatsApp at a glance. The pill
   shape, Jost type and soft shadow keep it in the site's button family. */
.sgsml-wa {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #25D366, #128C7E); color: #fff !important;
  font-family: 'Jost', sans-serif; font-size: 13.5px; font-weight: 600; line-height: 1;
  padding: 7px 13px; border-radius: 999px; text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(18, 140, 126, 0.32);
  position: relative; z-index: 2; cursor: pointer; transition: transform 0.15s ease;
}
.sgsml-wa:hover { transform: scale(1.04); }
.sgsml-wa svg { display: block; flex: none; }
/* On a loop card the pill sits under the description, clear of the badges row. */
.sgsml-wa-card { margin: 10px 0 4px; }
.sgsml-link { color: #0B7A55; font-size: 14.5px; font-weight: 500; }
.sgsml-remove { background: none; border: none; color: #A0482F; font-size: 14px; cursor: pointer; text-decoration: underline; padding: 0; }
.sgsml-tools { margin: 6px 0 34px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sgsml-ig-note { flex-basis: 100%; margin: 4px 0 0; color: #40524A; font-size: 15.5px; }
.sgsml-copied { flex-basis: 100%; margin: 0; color: #0B7A55; font-weight: 600; }
.sgsml-empty { font-size: 17px; color: #40524A; }
.sgsml-route { margin: 16px 0 0; }
.sgsml-gone { opacity: 0.75; background: #F3EFE7; box-shadow: none; }

@media (max-width: 640px) {
  #sgsml-app h1 { font-size: 30px; }
  .sgsml-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sgsml-card-img img { height: 120px; }
  .sgsml-card-body h3 { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .sgsml-bounce { animation: none; }
  .sgsml-heart { transition: none; }
  .sgsml-wa { transition: none; }
}