/* ============================================================================
   Lodging picker modal — scoped .hg-lp-*
   Matches the surf/open-now/nearby modal vocabulary. px font sizes per site
   convention. No Foundation grid — pure flex + grid.
   ============================================================================ */

.hg-lp-modal {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  /* Max signed 32-bit int — has to beat Raptive / AdThrive sticky ad
     elements (floating video, sticky sidebar, sticky footer). 999999
     wasn't high enough on the Nearby modal and the same bug would hit
     this one. */
  z-index:2147483647; align-items:flex-start; justify-content:center;
  padding:15px; overflow-y:auto;
}
.hg-lp-modal.is-open { display:flex; }
.hg-lp-modal-bg {
  position:fixed; inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.hg-lp-modal-card {
  position:relative; background:#fff; border-radius:12px;
  width:100%; max-width:560px;
  margin:4vh auto;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  z-index:1;
  animation:hgLpIn .25s ease-out;
}
@keyframes hgLpIn {
  from { opacity:0; transform:scale(.96) translateY(8px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.hg-lp-modal-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid #e8e8e8;
  position:sticky; top:0; background:#fff; z-index:2;
  border-radius:12px 12px 0 0;
}
.hg-lp-modal-head h3 {
  margin:0; font-size:19px; font-weight:700; color:#222; line-height:1.3;
}
.hg-lp-modal-close {
  background:none; border:none; font-size:26px; color:#999;
  cursor:pointer; padding:0 6px; line-height:1;
}
.hg-lp-modal-close:hover { color:#333; }
.hg-lp-modal-body { padding:14px 18px 18px; }

/* ---- Island tabs ---- */
.hg-lp-tabs {
  display:flex; gap:6px; flex-wrap:wrap;
  padding:2px 2px 12px;
  border-bottom:1px solid #eee;
  margin-bottom:12px;
}
.hg-lp-tab {
  flex:1 0 auto; min-width:70px;
  background:#f4f5f7; border:1.5px solid #e1e3e8;
  color:#444;
  font-family:inherit; font-size:13px; font-weight:700;
  padding:8px 12px; border-radius:999px;
  cursor:pointer;
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; gap:6px;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.hg-lp-tab-icon { font-size:14px; line-height:1; opacity:.85; }
.hg-lp-tab-label { line-height:1.1; }

/* Per-island idle state: subtle brand-colored border + tinted icon so
   readers can recognize the island at a glance even before clicking.
   Brand colors match Island Brand Colors in CLAUDE.md:
     Oahu #F27A24  Maui #1866B4  Big Island #C3232F  Kauai #1D9771
*/
.hg-lp-tab-oahu       { border-color:#F27A24; }
.hg-lp-tab-oahu       .hg-lp-tab-icon { color:#F27A24; }
.hg-lp-tab-maui       { border-color:#1866B4; }
.hg-lp-tab-maui       .hg-lp-tab-icon { color:#1866B4; }
.hg-lp-tab-big-island { border-color:#C3232F; }
.hg-lp-tab-big-island .hg-lp-tab-icon { color:#C3232F; }
.hg-lp-tab-kauai      { border-color:#1D9771; }
.hg-lp-tab-kauai      .hg-lp-tab-icon { color:#1D9771; }

.hg-lp-tab:hover { filter:brightness(0.98); }

/* Active state: fill the tab with the island's brand color. Icon flips
   white so it reads against the colored fill. */
.hg-lp-tab.is-active .hg-lp-tab-icon { color:#fff; opacity:1; }
.hg-lp-tab-oahu.is-active       { background:#F27A24; color:#fff; border-color:#F27A24; }
.hg-lp-tab-maui.is-active       { background:#1866B4; color:#fff; border-color:#1866B4; }
.hg-lp-tab-big-island.is-active { background:#C3232F; color:#fff; border-color:#C3232F; }
.hg-lp-tab-kauai.is-active      { background:#1D9771; color:#fff; border-color:#1D9771; }

/* ---- Hint callout (from drive-time event) ---- */
.hg-lp-hint {
  margin:0 0 12px; padding:10px 12px;
  background:#eef6fb; border-left:3px solid #3a8bbf;
  border-radius:4px;
  font-size:13px; color:#2c4c5e; line-height:1.5;
}

/* ---- Currently-saved row ---- */
.hg-lp-current {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px; margin-bottom:12px;
  background:#eef2f6; border-left:3px solid #2c3e50;
  border-radius:4px;
  font-size:13px;
}
.hg-lp-current-label {
  font-size:11px; text-transform:uppercase; letter-spacing:.5px;
  color:#555; font-weight:600;
}
.hg-lp-current-name {
  font-weight:700; color:#222; font-size:14px; flex:1 1 auto;
}
.hg-lp-current-clear {
  background:none; border:none; color:#c3232f;
  font-family:inherit; font-size:12px; cursor:pointer;
  text-decoration:underline; padding:2px 4px;
}
.hg-lp-current-clear:hover { color:#8a161f; }

/* ---- Search input ---- */
.hg-lp-search-row { margin-bottom:10px; }
.hg-lp-search {
  width:100%; box-sizing:border-box;
  padding:10px 14px; border:1.5px solid #d0d4db;
  border-radius:8px;
  font-family:inherit; font-size:15px;
  -webkit-appearance:none; appearance:none;
}
.hg-lp-search:focus { outline:none; border-color:#2c3e50; }

/* ---- Hotel list ---- */
.hg-lp-list {
  display:flex; flex-direction:column; gap:6px;
  max-height:44vh; overflow-y:auto;
  padding-right:2px;
}
.hg-lp-loading, .hg-lp-empty {
  padding:18px 6px; color:#777; font-size:14px; text-align:center;
  font-style:italic;
}
.hg-lp-hotel {
  display:flex; flex-direction:column; align-items:flex-start;
  gap:3px;
  background:#fff; border:1.5px solid #e1e3e8;
  padding:10px 12px; border-radius:8px;
  text-align:left; cursor:pointer;
  font-family:inherit;
  -webkit-appearance:none; appearance:none;
  transition:border-color .12s ease, background .12s ease;
}
.hg-lp-hotel:hover { border-color:#2c3e50; background:#f9fafb; }
.hg-lp-hotel.is-picked {
  border-color:#2c3e50; background:#eef2f6;
  box-shadow:inset 3px 0 0 #2c3e50;
}
.hg-lp-hotel-name {
  font-size:15px; font-weight:700; color:#222; line-height:1.3;
}
.hg-lp-hotel-meta {
  font-size:12px; color:#666; line-height:1.4;
}
.hg-lp-hotel-drive {
  font-size:12px; color:#2c3e50; font-weight:600;
  margin-top:2px;
}

/* ---- Custom lodging fallback ---- */
.hg-lp-custom { margin-top:14px; padding-top:14px; border-top:1px solid #eee; }
.hg-lp-custom-toggle {
  background:none; border:none;
  font-family:inherit; font-size:14px; font-weight:600; color:#2c3e50;
  cursor:pointer; padding:4px 0;
  text-decoration:underline;
}
.hg-lp-custom-toggle:hover { color:#1a2836; }
.hg-lp-custom-form {
  display:flex; flex-direction:column; gap:10px;
  padding-top:10px;
}
.hg-lp-label {
  display:flex; flex-direction:column; gap:4px;
  font-size:12px; color:#555; font-weight:600;
  text-transform:uppercase; letter-spacing:.3px;
}
.hg-lp-input {
  padding:9px 12px; border:1.5px solid #d0d4db; border-radius:6px;
  font-family:inherit; font-size:14px;
  -webkit-appearance:none; appearance:none;
  font-weight:normal; text-transform:none; letter-spacing:0; color:#222;
  background:#fff;
  line-height:1.4; min-height:40px;
  box-sizing:border-box;
}
/* <select> with appearance:none strips iOS's native vertical centering
   AND the chevron — without these, option text clips at the bottom of
   the box and there's no dropdown indicator. */
select.hg-lp-input {
  padding-right:34px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235a6b60' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:12px 8px;
}
select.hg-lp-input::-ms-expand { display:none; }
.hg-lp-input:focus { outline:none; border-color:#2c3e50; }
.hg-lp-custom-note {
  margin:0; font-size:12px; color:#777; line-height:1.5; font-style:italic;
}
.hg-lp-btn {
  display:inline-block;
  padding:11px 16px; border-radius:8px;
  font-family:inherit; font-size:14px; font-weight:700;
  text-align:center; cursor:pointer;
  text-decoration:none; line-height:1.3;
  border:1.5px solid transparent;
  -webkit-appearance:none; appearance:none;
}
.hg-lp-btn-primary {
  background:#2c3e50; color:#fff;
}
.hg-lp-btn-primary:hover { background:#1a2836; color:#fff; }

/* ---- /my-trip "Where you're staying" sub-section ----
   Now nested inside the master Trip Details container on /my-trip, so
   the wrapper drops its own card framing (border + border-radius +
   margin) and instead hangs off the master via a top-border + indented
   toggle, mirroring the dates sub above it and the My Trip drawer
   pattern (.hg-td-lodging there). */
.hg-lp-trip-section {
  background: #fff;
  border-top: 1px solid #e2e8f0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.hg-lp-trip-toggle {
  width: 100%;
  background: transparent;
  border: none;
  padding: 12px 18px 12px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  text-align: left;
  transition: background 0.15s;
}
.hg-lp-trip-toggle:hover { background: #f1f5f9; }
.hg-lp-trip-toggle:active { background: #e2e8f0; }
.hg-lp-trip-toggle-icon { color: #3b82f6; margin-right: 4px; font-size: 13px; }
.hg-lp-trip-toggle-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hg-lp-trip-toggle-arrow { color: #64748b; font-size: 12px; }
.hg-lp-trip-inner {
  padding: 4px 18px 16px 30px;
}
.hg-lp-trip-intro {
  margin:0 0 12px; font-size:14px; color:#555; line-height:1.5;
}
.hg-lp-trip-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px;
}
.hg-lp-trip-card {
  background:#fff;
  border:1px solid #e5e7ec;
  border-left:4px solid #c9ccd2;     /* idle accent — replaced per island below */
  border-radius:10px;
  padding:14px 16px 14px 14px;
  cursor:pointer;
  font-family:inherit; text-align:left;
  -webkit-appearance:none; appearance:none;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
  display:flex; flex-direction:column; gap:6px;
  position:relative; overflow:hidden;
}
.hg-lp-trip-card:hover { transform:translateY(-1px); }
.hg-lp-trip-card-island {
  font-size:12px; color:#5b6473;
  text-transform:uppercase; letter-spacing:.6px; font-weight:700;
}
.hg-lp-trip-card-region {
  font-size:16px; font-weight:700; color:#1f2530; line-height:1.3;
}
.hg-lp-trip-card-empty {
  font-size:14px; color:#3f4756; font-weight:600; line-height:1.4;
}

/* Per-island accents — left-edge stripe in the canonical brand color
   (CLAUDE.md → Island Brand Colors) plus a faint radial wash anchored to
   the bottom-right corner so the card carries a hint of place without
   shouting. Hover and is-set lean a touch deeper in the same hue. */
.hg-lp-trip-card--oahu {
  border-left-color:#F27A24;
  background:radial-gradient(circle at 100% 100%, rgba(242,122,36,0.08) 0%, transparent 60%), #fff;
}
.hg-lp-trip-card--oahu:hover { border-color:rgba(242,122,36,0.45); background:radial-gradient(circle at 100% 100%, rgba(242,122,36,0.14) 0%, transparent 60%), #fff; }
.hg-lp-trip-card--oahu.is-set { border-color:rgba(242,122,36,0.45); background:rgba(242,122,36,0.05); }

.hg-lp-trip-card--maui {
  border-left-color:#1866B4;
  background:radial-gradient(circle at 100% 100%, rgba(24,102,180,0.08) 0%, transparent 60%), #fff;
}
.hg-lp-trip-card--maui:hover { border-color:rgba(24,102,180,0.45); background:radial-gradient(circle at 100% 100%, rgba(24,102,180,0.14) 0%, transparent 60%), #fff; }
.hg-lp-trip-card--maui.is-set { border-color:rgba(24,102,180,0.45); background:rgba(24,102,180,0.05); }

.hg-lp-trip-card--big-island {
  border-left-color:#C3232F;
  background:radial-gradient(circle at 100% 100%, rgba(195,35,47,0.08) 0%, transparent 60%), #fff;
}
.hg-lp-trip-card--big-island:hover { border-color:rgba(195,35,47,0.45); background:radial-gradient(circle at 100% 100%, rgba(195,35,47,0.14) 0%, transparent 60%), #fff; }
.hg-lp-trip-card--big-island.is-set { border-color:rgba(195,35,47,0.45); background:rgba(195,35,47,0.05); }

.hg-lp-trip-card--kauai {
  border-left-color:#1D9771;
  background:radial-gradient(circle at 100% 100%, rgba(29,151,113,0.08) 0%, transparent 60%), #fff;
}
.hg-lp-trip-card--kauai:hover { border-color:rgba(29,151,113,0.45); background:radial-gradient(circle at 100% 100%, rgba(29,151,113,0.14) 0%, transparent 60%), #fff; }
.hg-lp-trip-card--kauai.is-set { border-color:rgba(29,151,113,0.45); background:rgba(29,151,113,0.05); }

/* ---- "Sync across devices" section (trip-sync Worker) ---- */
.hg-ts-section {
  background:#fff; border:1px solid #e1e3e8; border-radius:12px;
  padding:18px 20px; margin:22px 0;
  transition: padding 0.2s ease;
}
/* Compact paired state — once a device is paired, the long
   "Pair each device with your email…" intro and email form become
   noise. The paired view is a single-line confirmation + small
   action links. Click "Pair another device" to un-collapse. */
.hg-ts-section.is-paired-collapsed {
  padding: 12px 18px;
}
.hg-ts-section.is-paired-collapsed h2 {
  font-size: 16px;
  margin: 0;
}
.hg-ts-paired-line {
  margin: 6px 0 10px;
  font-size: 14px;
  color: #4a5a51;
  line-height: 1.5;
}
.hg-ts-paired-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.hg-ts-paired-link {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #1a6b4a;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-decoration-color: rgba(26, 107, 74, 0.35);
  text-underline-offset: 2px;
}
.hg-ts-paired-link:hover {
  text-decoration-color: #1a6b4a;
}
.hg-ts-paired-link-danger {
  color: #8a9690;
  font-weight: 500;
  text-decoration-color: rgba(138, 150, 144, 0.35);
}
.hg-ts-paired-link-danger:hover {
  color: #c3232f;
  text-decoration-color: rgba(195, 35, 47, 0.5);
}
.hg-ts-section-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
}
.hg-ts-section h2 {
  margin:0 0 4px; font-size:22px; font-weight:700; color:#222;
}
.hg-ts-status {
  font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.4px;
  background:#eef2f6; color:#556; /* neutral while checking */
}
.hg-ts-status[data-state="signed-in"] { background:#e8f4ee; color:#1a6b4a; }
.hg-ts-status[data-state="signed-out"] { background:#fdf1e3; color:#a05e12; }
.hg-ts-status[data-state="error"]      { background:#fbeaea; color:#8a161f; }
.hg-ts-intro {
  margin:6px 0 14px; font-size:14px; color:#555; line-height:1.55;
}
.hg-ts-form {
  display:flex; gap:8px; flex-wrap:wrap;
}
.hg-ts-input {
  flex:1 1 220px;
  padding:11px 14px; border:1.5px solid #d0d4db; border-radius:8px;
  font-family:inherit; font-size:15px;
  -webkit-appearance:none; appearance:none;
}
.hg-ts-input:focus { outline:none; border-color:#1a6b4a; }
.hg-ts-btn {
  padding:11px 18px; border-radius:8px;
  font-family:inherit; font-size:14px; font-weight:700;
  cursor:pointer; line-height:1.3; text-align:center;
  border:1.5px solid transparent;
  -webkit-appearance:none; appearance:none;
  white-space:nowrap;
}
.hg-ts-btn-primary { background:#1a6b4a; color:#fff; }
.hg-ts-btn-primary:hover { background:#124d35; }
.hg-ts-btn-primary:disabled { background:#9aaea3; cursor:wait; }
.hg-ts-btn-secondary {
  background:#fff; color:#c3232f; border-color:#c3232f;
  margin-top:10px;
}
.hg-ts-btn-secondary:hover { background:#fbeaea; }
.hg-ts-signed-in p {
  margin:0 0 10px; font-size:14px; color:#333; line-height:1.5;
}
.hg-ts-feedback {
  margin:10px 0 0; font-size:13px; line-height:1.5; color:#555;
  min-height:1.5em;
}
.hg-ts-feedback[data-tone="ok"]    { color:#1a6b4a; font-weight:600; }
.hg-ts-feedback[data-tone="error"] { color:#8a161f; font-weight:600; }

/* ---- Print: never show in printed output ---- */
@media print {
  .hg-lp-modal, .hg-lp-trip-section, .hg-ts-section { display:none !important; }
}

/* ---- Mobile ---- */
@media (max-width:600px) {
  .hg-lp-modal-card { margin:2vh auto; max-width:100%; }
  .hg-lp-modal-head h3 { font-size:17px; }
  .hg-lp-hotel-name { font-size:14px; }
  .hg-lp-list { max-height:40vh; }
}