/* Modal base: hidden but mounted (so it can animate) */
#serviceModal{ opacity:0; visibility:hidden; pointer-events:none; }

/* Wrapper overlay */
.service-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1000;
  background: rgba(15,23,42,.55);   /* semi-dark backdrop */
  backdrop-filter: blur(6px);
  align-items: center;              /* ⬅ centers vertically */
  justify-content: center;          /* ⬅ centers horizontally */
  pointer-events: none;
}

/* When open */
.service-modal.is-open {
  display: flex;    /* use flex to center the panel */
  pointer-events: auto;
}
/* Backdrop */
.service-modal__backdrop {
  position: absolute;
  inset: 0;
  background: transparent; /* already blurred above */
  z-index: 1;
}
/* Panel */
.service-modal__panel {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 720px;      /* adjust to taste */
  max-height: 80vh;      /* keep it viewport-safe */
  overflow-y: auto;      /* scroll inside if needed */
  border-radius: 18px;
  padding: 24px;
  background: var(--surface, #fff);
  box-shadow: 0 18px 38px rgba(15,23,42,.25);
  animation: modalIn .25s ease;
}
/* Smooth animation */
@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.service-modal.is-open .service-modal__backdrop{ opacity: .95; }
.service-modal.is-open .service-modal__panel{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* On very small screens, anchor to top for better reachability */
@media (max-width: 560px){
  .service-modal__panel{
    left: 50%;
    top: 8vh;
    transform: translate(-50%, 0) scale(.98);
    max-height: calc(100vh - 16vh);
  }
  .service-modal.is-open .service-modal__panel{
    transform: translate(-50%, 0) scale(1);
  }
}
/* Open state */
.service-modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce){
  .service-modal,
  .service-modal__backdrop,
  .service-modal__panel{ transition: none !important; }
  .service-modal__panel{ transform:none !important; opacity:1 !important; }
}

/* header */
.service-modal__header{ display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.service-modal__title{ margin:0; font-size:1.125rem; color:var(--ink); font-weight:800; }
.service-modal__meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.875rem; color:var(--muted); }

/* meta/time */
.service-modal__updated time{ font-weight:600; color:var(--muted); }

/* body */
.service-modal__body{ padding-top:8px; color:var(--muted); line-height:1.6; font-size: .97rem; }
.service-modal__body ul{ margin:12px 0 0 1.15em; padding:0; }
.service-modal__body li{ margin:8px 0; }

/* footer */
.service-modal__footer{ display:flex; gap:12px; justify-content:flex-end; margin-top:14px; }

/* buttons */
.service-modal__close,
.service-modal__closeBtn,
.service-modal__more{ cursor:pointer; }

/* close icon */
.service-modal__close{
  position:absolute; right:8px; top:8px; background:transparent; border:0; font-size:18px; padding:8px; border-radius:8px;
  color:var(--muted); transition: background .12s ease;
}
.service-modal__close:hover{ background: rgba(14,107,168,.06); color:var(--ink); }

/* TTS buttons group */
.service-modal__tts button{ margin-left:6px; background:transparent; border:0; padding:6px; border-radius:8px; cursor:pointer; color:var(--muted); }
.service-modal__tts button:hover{ color:var(--brand); }

/* loading */
.service-loading{ color:var(--muted); opacity:.9; }

/* responsive: center on small screens */
@media (max-width: 720px){
  .service-modal__panel{
    left: 6vw; right: 6vw; top: 8vh; width: auto; max-width: none;
    border-radius: 12px;
  }
}


 #serviceModal.is-open{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 9999 !important;
  }
  #serviceModal.is-open .service-modal__backdrop{ opacity: .95 !important; }
  #serviceModal.is-open .service-modal__panel{
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }

/* Buttons at bottom stay visible */
.service-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.service-modal__footer {
  display: none !important;
}

.button {
  padding: 8px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: background .2s ease, box-shadow .2s ease, transform .1s ease;
}

.button.ghost {
  background: #f0f3f8;
  color: #2d3440;
}

.button.primary {
  background: #2d3440;
  color: #fff;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
}

.button:active {
  transform: translateY(0);
  box-shadow: none;
}
/* stacking order */
.service-modal__backdrop{ z-index: 1; }
.service-modal__panel{ z-index: 2; pointer-events: auto; }

/* also keep the container clickable when open */
.service-modal.is-open{ pointer-events: auto; }
/* ---------- Interaction + stacking FIX (put at end of modal.css) ---------- */

/* container: allow clicks only when open */

#serviceModal.is-open{ pointer-events: auto; }

/* backdrop under the panel */
#serviceModal .service-modal__backdrop{ z-index: 10; }

/* panel ABOVE backdrop and clickable */
#serviceModal .service-modal__panel{
  z-index: 20;
  pointer-events: auto;
}

/* buttons: make clearly interactive */
#serviceModal .button{
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, transform .1s ease;
}

/* stronger selector to beat other .button rules on the site */
#serviceModal .button:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15,23,42,.18);
  filter: brightness(1.03);
}

#serviceModal .button:active{
  transform: translateY(0);
  box-shadow: none;
}

/* ensure “X”, Close, Open full page are seen as clickable even if SVG/text only */
#serviceModal [data-close]{ cursor: pointer; }
#serviceModal .service-modal__panel { pointer-events: auto; }
/* ensure buttons are clickable + hover */
#serviceModal .tts-play,
#serviceModal .tts-stop {
  cursor: pointer;
}
#serviceModal .tts-play:hover,
#serviceModal .tts-stop:hover {
  background: #e2e7ef;
}