/* ============================================================================
   Rating pill + modal — scoped to .hg-rt-* classes
   Mirrors the pill / modal vocabulary used by surf, volcano, open-now etc.
   so readers see one consistent system. Uses px font sizes per CLAUDE.md.
   ============================================================================ */

/* ---- Pill (hero status row) ---- */
.hg-rt-wrap { display:inline-block; vertical-align:middle; margin:0 6px; }
.hg-rt-btn {
  display:inline-flex; align-items:center; gap:6px;
  border:none; cursor:pointer;
  padding:8px 14px; border-radius:999px;
  font-family:inherit;
  font-size:13px; font-weight:700;
  color:#222;
  background:#fffbeb;
  border:1px solid #fde68a;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  line-height:1.2;
  -webkit-appearance:none; appearance:none;
}
.hg-rt-btn:hover { background:#fef3c7; }
.hg-rt-btn:focus { outline:2px solid #f59e0b; outline-offset:2px; }
.hg-rt-btn-icon { color:#f59e0b; font-size:14px; line-height:1; }
.hg-rt-btn-value { font-variant-numeric:tabular-nums; }

@media (max-width:600px) {
  .hg-rt-wrap { margin:4px 3px; }
  .hg-rt-btn  { font-size:11px; padding:6px 10px; gap:5px; }
  .hg-rt-btn-icon { font-size:13px; }
}
@media (max-width:380px) {
  .hg-rt-btn { font-size:10px; padding:5px 8px; }
}

/* ---- Modal shell ----
   z-index: 2147483647 (max signed 32-bit int) — same value other site
   modals use to beat Raptive sticky elements. */
.hg-rt-modal {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  z-index:2147483647; align-items:center; justify-content:center; padding:15px;
}
.hg-rt-modal.is-open { display:flex; }
.hg-rt-modal-bg {
  position:absolute; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.hg-rt-modal-card {
  position:relative; background:#fff; border-radius:12px;
  width:100%; max-width:460px;
  max-height:88vh;
  display:flex; flex-direction:column;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  z-index:1;
  animation:hgRtIn .25s ease-out;
}
@keyframes hgRtIn {
  from { opacity:0; transform:scale(.96) translateY(8px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

/* ---- Modal head ---- */
.hg-rt-modal-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid #e8e8e8;
}
.hg-rt-modal-head h3 { margin:0; font-size:18px; font-weight:700; color:#222; line-height:1.3; }
.hg-rt-modal-close {
  background:none; border:none; font-size:28px; color:#999;
  cursor:pointer; padding:0 6px; line-height:1;
}
.hg-rt-modal-close:hover { color:#333; }

/* ---- Modal body ---- */
.hg-rt-modal-body {
  padding:24px 22px 18px;
  text-align:center;
  overflow-y:auto;
}
.hg-rt-name {
  margin:0 0 14px;
  font-size:15px; line-height:1.4; color:#444;
  font-weight:500;
}
.hg-rt-display {
  display:inline-flex; align-items:baseline; gap:8px;
  margin:0 auto 10px;
}
.hg-rt-shaka {
  color:#f59e0b;
  font-size:38px;
  line-height:1;
  align-self:center;
}
.hg-rt-value {
  font-size:48px; font-weight:800; color:#222;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.hg-rt-out-of { font-size:20px; color:#888; font-weight:500; }
.hg-rt-reviews {
  margin:0 0 18px;
  font-size:13px; color:#666;
}
.hg-rt-cta {
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 18px;
  border-radius:999px;
  background:#1866B4;
  color:#fff !important;
  font-size:13px; font-weight:700;
  text-decoration:none;
  transition:background .12s ease;
}
.hg-rt-cta:hover { background:#0f4a85; }
.hg-rt-cta .fa-external-link { font-size:11px; }

/* ---- Modal foot ---- */
.hg-rt-modal-foot {
  padding:10px 18px;
  border-top:1px solid #e8e8e8;
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; flex-wrap:wrap;
  font-size:11px; color:#888;
  background:#fafafa;
}
.hg-rt-attribution { display:inline-flex; align-items:center; gap:5px; }
.hg-rt-attribution .fa-shaka { color:#f59e0b; font-size:12px; }
.hg-rt-verified { color:#999; font-style:italic; }

/* ---- Loading state ---- */
.hg-rt-loading {
  margin:30px 0;
  text-align:center;
  color:#888;
  font-size:13px;
}