/* ══════════════════════════════════════════════════════════
   Curo Pharmacy — triage UI (browse-by-body-system + triage panels)
   Namespaced .ct-* to avoid collisions with page styles.
   ══════════════════════════════════════════════════════════ */
.ct-wrap { max-width: 1100px; margin: 0 auto 2.5rem; padding: 0 1.25rem; }

/* Emergency banner */
.ct-emergency-banner {
  display: flex; align-items: center; gap: .6rem;
  background: #E53935; color: #fff; font-weight: 600;
  border-radius: 12px; padding: .8rem 1.1rem; margin: 0 0 1.5rem;
  font-size: .95rem; line-height: 1.35;
}
.ct-emergency-banner strong { font-weight: 800; }

/* Section intro */
.ct-browse-head { margin: 0 0 1rem; }
.ct-browse-head h2 { color: #fff; font-size: 1.4rem; margin: 0 0 .35rem; }
.ct-browse-head p { color: rgba(255,255,255,.7); font-size: .95rem; margin: 0; max-width: 60ch; }

/* Category tiles */
.ct-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; }
.ct-cat {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: #fff; border-radius: 12px; padding: .85rem 1rem; cursor: pointer;
  font-size: .95rem; font-weight: 600; text-align: left; transition: all .15s;
  font-family: inherit;
}
.ct-cat:hover { background: rgba(255,193,7,.14); border-color: var(--gold, #FFC107); }
.ct-cat[aria-expanded="true"] { background: rgba(255,193,7,.18); border-color: var(--gold, #FFC107); }
.ct-cat .ct-count { font-size: .78rem; font-weight: 600; color: var(--gold, #FFC107);
  background: rgba(0,0,0,.25); border-radius: 20px; padding: .12rem .55rem; white-space: nowrap; }
.ct-cat .ct-chev { transition: transform .2s; flex-shrink: 0; }
.ct-cat[aria-expanded="true"] .ct-chev { transform: rotate(90deg); }

/* Condition chips revealed under a category */
.ct-panel { display: none; grid-column: 1 / -1; margin: -.1rem 0 .4rem; }
.ct-panel.open { display: block; }
.ct-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: .9rem 0 .3rem; }
.ct-chip {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: #fff; border-radius: 20px; padding: .45rem .9rem; cursor: pointer;
  font-size: .88rem; font-family: inherit; transition: all .15s;
}
.ct-chip:hover { background: var(--gold, #FFC107); color: #2D0744; border-color: var(--gold, #FFC107); }
.ct-chip.ct-pf::after { content: "✓ Pharmacy First"; margin-left: .45rem; font-size: .7rem;
  font-weight: 700; color: #1a7a3c; background: #d7f5e0; border-radius: 12px; padding: .05rem .4rem; }
.ct-chip:hover.ct-pf::after { background: #2D0744; color: #d7f5e0; }

/* Marker on existing A–Z cards that have a triage panel */
.item-card.ct-has-triage { position: relative; }
.item-card.ct-has-triage .arrow.ext-icon { display: none; }
.item-card.ct-has-triage::after {
  content: "Guidance"; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  color: #2D0744; background: var(--gold, #FFC107); border-radius: 12px; padding: .1rem .5rem;
}

/* ── Modal ── */
.ct-modal-overlay {
  position: fixed; inset: 0; background: rgba(20,4,32,.72); backdrop-filter: blur(3px);
  display: none; align-items: flex-start; justify-content: center; z-index: 9999;
  padding: 4vh 1rem; overflow-y: auto;
}
.ct-modal-overlay.open { display: flex; }
.ct-modal {
  background: #fff; color: #241030; border-radius: 16px; max-width: 640px; width: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,.4); overflow: hidden; animation: ctIn .18s ease;
}
@keyframes ctIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ct-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.3rem 1.5rem 1rem; border-bottom: 1px solid #eee;
}
.ct-modal-head h3 { margin: 0; font-size: 1.35rem; color: #2D0744; line-height: 1.2; }
.ct-modal-head .ct-sub { font-size: .8rem; color: #7a6a86; margin-top: .25rem; }
.ct-close { background: #f0ecf3; border: none; border-radius: 50%; width: 34px; height: 34px;
  font-size: 1.2rem; cursor: pointer; color: #2D0744; flex-shrink: 0; line-height: 1; }
.ct-close:hover { background: #e2d8ea; }
.ct-modal-body { padding: 1.1rem 1.5rem 1.5rem; }

/* Triage blocks */
.ct-block { border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: .9rem; }
.ct-block h4 { margin: 0 0 .5rem; font-size: 1rem; display: flex; align-items: center; gap: .5rem; }
.ct-block ul { margin: 0; padding-left: 1.2rem; }
.ct-block li { margin: .25rem 0; font-size: .92rem; line-height: 1.4; }
.ct-emergency { background: #fdecea; border: 1px solid #f4c7c3; }
.ct-emergency h4 { color: #c62828; }
.ct-urgent { background: #fff4e5; border: 1px solid #ffd9a8; }
.ct-urgent h4 { color: #b3600a; }
.ct-selfcare { background: #eef7ee; border: 1px solid #cfe8cf; }
.ct-selfcare h4 { color: #2e7d32; }
.ct-selfcare .ct-dont li { color: #7a2f2f; }

/* Pharmacist / Pharmacy First CTA box */
.ct-pharm { background: linear-gradient(135deg,#F08C18,#F5A100); color: #fff; }
.ct-pharm.ct-pharm-first { background: linear-gradient(135deg,#2e9e52,#1f7a3c); }
.ct-pharm h4 { color: #fff; }
.ct-pharm p { margin: 0 0 .7rem; font-size: .95rem; line-height: 1.45; }
.ct-pharm ul { margin: 0 0 .8rem; }
.ct-pharm li { color: rgba(255,255,255,.95); }
.ct-cta-btn {
  display: inline-flex; align-items: center; gap: .4rem; background: #fff; color: #2D0744;
  font-weight: 700; font-size: .95rem; text-decoration: none; border-radius: 10px;
  padding: .6rem 1.1rem; transition: transform .12s;
}
.ct-cta-btn:hover { transform: translateY(-1px); }

/* Footer / attribution */
.ct-modal-foot { border-top: 1px solid #eee; padding: .9rem 1.5rem 1.2rem; font-size: .8rem; color: #6b5c78; }
.ct-modal-foot a { color: #6B1F8E; font-weight: 600; }
.ct-nhs-link { display: inline-block; margin-top: .3rem; }
.ct-disclaimer { margin-top: .5rem; font-style: italic; }

@media (max-width: 560px) {
  .ct-cats { grid-template-columns: 1fr 1fr; }
  .ct-modal-head h3 { font-size: 1.15rem; }
}