/* ============================================================================
   Drive-Time pill — "~47 min from HNL" on attraction / beach / trail / sight
   pages. Matches the open-now / surf / volcano visual vocabulary: colored
   pill in the hero status-pill row. Clickable variant (no-lodging state)
   gets a faint hover + cursor affordance so readers see it's actionable.
   ============================================================================ */

.hg-dt-wrap { display:inline-block; vertical-align:middle; margin:0 6px; }

.hg-dt-btn {
  display:inline-flex; align-items:center; gap:6px;
  border:none; padding:8px 14px; border-radius:999px;
  font-family:inherit; font-size:13px; font-weight:700;
  color:#fff;
  background:#475569; /* slate — informational, no urgency */
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  line-height:1.2;
  text-transform:uppercase; letter-spacing:.3px;
  -webkit-appearance:none; appearance:none;
  cursor:default;
}
.hg-dt-btn.is-clickable { cursor:pointer; }
.hg-dt-btn.is-clickable:hover { background:#334155; }
.hg-dt-btn.is-clickable:focus { outline:2px solid #fff; outline-offset:-2px; }

/* Upgraded pill — when the user's saved lodging has been resolved via the
   live routes worker — tips toward the island-brand green so readers see
   the upgrade happened. Still clickable so readers can change hotels. */
.hg-dt-btn.is-lodging {
  background:#1D9771;
}
.hg-dt-btn.is-lodging.is-clickable:hover {
  background:#157a5b;
}

.hg-dt-icon {
  display:inline-block;
  font-size:13px;
  font-weight:700;
  opacity:.85;
  flex:0 0 auto;
}

/* Cap the text width so a long hotel name can never blow out the status
   row. JS already short-forms the hotel name for the pill; this is the
   safety net for anything that slips through. */
.hg-dt-text {
  display:inline-block;
  max-width:26ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:middle;
}
@media (max-width:600px) {
  .hg-dt-text { max-width:22ch; }
}

@media (max-width:600px) {
  .hg-dt-wrap { display:inline-block; margin:4px 3px; }
  .hg-dt-btn  { font-size:11px; padding:6px 10px; letter-spacing:.1px; gap:5px; }
}
@media (max-width:380px) {
  .hg-dt-btn  { font-size:10px; padding:5px 8px; }
}

@media print { .hg-dt-wrap { display:none; } }