/* ============================================================================
   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; }

/* When the user's saved lodging has been resolved via the live routes
   worker, the pill text changes from "X min from HNL" to "X min from
   your hotel" but the BACKGROUND stays the same slate as the default.
   Earlier versions of this CSS tinted the lodging pill green to signal
   the upgrade — but in practice that just made the pill visually
   inconsistent with every other status pill on the page (open-now,
   weather, surf, volcano), pulling the eye to it for no actionable
   reason. The text change alone is enough — readers immediately
   understand "from your hotel" without color decoration. The
   `.is-lodging` class is still added by the JS in case future
   layouts want to hook it (e.g. an inline edit affordance). */

.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; } }