/* =====================================================================
   GUIDE ME — a lightweight guided-profile companion (design: Field Guide).
   Separate from the chat widget. Floating "Guide me" button sits ABOVE the
   "Ask the guide" chat button. Uses the site's existing warm-paper tokens
   and Playfair/Jakarta/JetBrains fonts — native to the current design.
   ===================================================================== */

/* Floating button (saffron), stacked above the ink chat button */
.gm-btn {
  position: fixed; right: 24px; bottom: 94px;
  height: 52px; min-width: 52px; padding: 0 6px;
  border-radius: 999px; border: none; cursor: pointer;
  background: var(--saffron, #bf5526); color: #fdf6ec;
  display: inline-flex; align-items: center; gap: 9px;
  box-shadow: 0 12px 30px -10px rgba(191,85,38,0.5);
  z-index: 90; font-family: "Plus Jakarta Sans", sans-serif;
  transition: transform .2s, box-shadow .2s;
}
.gm-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(191,85,38,0.6); }
.gm-btn:focus-visible { outline: 2px solid var(--saffron, #bf5526); outline-offset: 3px; }
.gm-btn-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.gm-btn-ic svg { width: 22px; height: 22px; }
.gm-btn-label { font-size: 14px; font-weight: 700; padding-right: 10px; white-space: nowrap; }
.gm-btn.compact { padding: 0; }
.gm-btn.compact .gm-btn-label { display: none; }
/* After completion the button carries a short summary chip */
.gm-btn.done .gm-btn-label { font-weight: 600; }
@media (max-width: 640px) { .gm-btn { right: 16px; bottom: 84px; } }
/* Pages with the mobile bottom tab bar: lift both floating buttons clear of it
   so the Guide-me + chat cluster never sits under the tabs. */
@media (max-width: 1000px) {
  body:has(.tabbar) .chat-btn { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
  body:has(.tabbar) .gm-btn { bottom: calc(4.6rem + 70px + env(safe-area-inset-bottom, 0px)); }
}

/* Backdrop + panel */
.gm-scrim { position: fixed; inset: 0; background: rgba(33,26,18,0.32); z-index: 94; opacity: 0; pointer-events: none; transition: opacity .22s; }
.gm-scrim.open { opacity: 1; pointer-events: auto; }
.gm-panel {
  position: fixed; right: 24px; bottom: 94px; width: 380px; max-width: calc(100vw - 32px);
  max-height: min(72vh, 640px); background: var(--card, #fcf8ef);
  border: 1px solid var(--rule, #dacfb8); border-radius: 20px;
  box-shadow: 0 24px 60px -20px rgba(33,26,18,0.45); z-index: 95;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(12px) scale(.98); opacity: 0; pointer-events: none;
  /* visibility:hidden removes it from the tab order and the a11y tree.
     opacity+pointer-events alone left #gm-skip and #gm-close permanently
     tabbable, and left an aria-modal node live on every page. It is
     delayed in the transition so the close animation still plays. */
  visibility: hidden;
  transition: transform .22s cubic-bezier(.22,.61,.36,1), opacity .22s,
              visibility 0s linear .22s;
  font-family: "Plus Jakarta Sans", -apple-system, sans-serif; color: var(--ink, #211a12);
}
.gm-panel.open {
  transform: none; opacity: 1; pointer-events: auto;
  visibility: visible;
  transition: transform .22s cubic-bezier(.22,.61,.36,1), opacity .22s, visibility 0s;
}
@media (max-width: 640px) {
  .gm-panel { right: 0; left: 0; bottom: 0; width: auto; max-width: none; max-height: 88vh;
    border-radius: 20px 20px 0 0; }
}

/* Header */
.gm-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 10px; }
.gm-step { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .1em; color: var(--saffron, #bf5526); font-weight: 600; }
.gm-skip { margin-left: auto; background: none; border: none; color: var(--ink-3, #706455); font-size: 13px; cursor: pointer; font-family: inherit; padding: 0 10px; min-height: 44px; display: inline-flex; align-items: center; }
.gm-skip:hover { color: var(--ink, #211a12); text-decoration: underline; }
.gm-close { background: none; border: none; color: var(--ink-3, #706455); font-size: 18px; line-height: 1; cursor: pointer; padding: 0; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.gm-close:hover { color: var(--ink, #211a12); }

/* Body (one card at a time) */
.gm-body { padding: 4px 18px 18px; overflow-y: auto; }
.gm-q { font-family: "Playfair Display", Georgia, serif; font-size: 23px; font-weight: 600; letter-spacing: -.01em; margin: 6px 0 4px; }
.gm-q em { font-style: italic; color: var(--saffron, #bf5526); }
.gm-sub { font-size: 13.5px; color: var(--ink-2, #574b3a); line-height: 1.5; margin: 0 0 16px; }

/* Option cards */
.gm-opts { display: grid; gap: 9px; }
.gm-opt { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: var(--card-2, #f7f0e2); border: 1.5px solid var(--rule, #dacfb8);
  border-radius: 13px; padding: 13px 14px; cursor: pointer; font-family: inherit;
  color: var(--ink, #211a12); transition: border-color .15s, background .15s, transform .1s; }
.gm-opt:hover { border-color: var(--saffron-soft, #e2a074); }
.gm-opt:active { transform: scale(.99); }
.gm-opt.sel { border-color: var(--saffron, #bf5526); box-shadow: 0 0 0 2px var(--saffron, #bf5526) inset; background: #f6e6d6; }
.gm-opt-badge { font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; color: var(--ink, #211a12);
  border: 1.5px solid var(--rule-2, #c8bb9f); border-radius: 7px; padding: 5px 8px; flex-shrink: 0; }
.gm-opt-txt { display: flex; flex-direction: column; gap: 1px; }
.gm-opt-t { font-size: 15px; font-weight: 700; }
.gm-opt-d { font-size: 12.5px; color: var(--ink-3, #897c68); }

/* City type-ahead */
.gm-search { display: flex; align-items: center; gap: 8px; background: var(--card-2, #f7f0e2);
  border: 1.5px solid var(--rule, #dacfb8); border-radius: 12px; padding: 11px 13px; }
.gm-search:focus-within { border-color: var(--saffron, #bf5526); }
.gm-search input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 15px; color: var(--ink, #211a12); }
.gm-city-list { display: grid; gap: 6px; margin-top: 10px; max-height: 220px; overflow-y: auto; }
.gm-city { text-align: left; background: none; border: 1px solid transparent; border-radius: 9px;
  padding: 9px 11px; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--ink, #211a12); }
.gm-city:hover, .gm-city.sel { background: var(--card-2, #f7f0e2); border-color: var(--rule, #dacfb8); }
.gm-city small { color: var(--ink-3, #897c68); }

/* Inline arrival date (for "landed") */
.gm-date { margin-top: 12px; display: none; }
.gm-date.show { display: block; }
.gm-date label { font-size: 12.5px; color: var(--ink-2, #574b3a); display: block; margin-bottom: 5px; font-weight: 600; }
.gm-date input { font-family: inherit; font-size: 14px; padding: 9px 11px; border: 1.5px solid var(--rule, #dacfb8);
  border-radius: 10px; background: var(--card-2, #f7f0e2); color: var(--ink, #211a12); }

/* Nav row */
.gm-nav { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.gm-back { background: none; border: none; color: var(--ink-2, #574b3a); font-family: inherit; font-size: 13px; cursor: pointer; padding: 8px 4px; }
.gm-back:hover { color: var(--ink, #211a12); }
.gm-next { margin-left: auto; background: var(--ink, #211a12); color: var(--paper, #f4ede0); border: none;
  border-radius: 999px; padding: 11px 20px; font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.gm-next:hover { background: #000; }
.gm-next[disabled] { opacity: .4; cursor: not-allowed; }

/* Closing card */
.gm-summary { font-family: "Playfair Display", Georgia, serif; font-size: 19px; line-height: 1.4;
  background: var(--card-2, #f7f0e2); border: 1px solid var(--rule, #dacfb8); border-radius: 13px;
  padding: 15px 16px; margin: 4px 0 16px; }
.gm-summary em { font-style: italic; color: var(--saffron, #bf5526); }
.gm-actions { display: grid; gap: 9px; }
.gm-action { display: block; width: 100%; text-align: left; border-radius: 12px; padding: 13px 15px;
  font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; text-decoration: none; border: 1.5px solid var(--rule, #dacfb8); }
.gm-action.primary { background: var(--saffron, #bf5526); color: #fdf6ec; border-color: var(--saffron, #bf5526); }
.gm-action.primary:hover { background: var(--brick, #97361f); }
.gm-action.ghost { background: var(--card-2, #f7f0e2); color: var(--ink, #211a12); }
.gm-action.ghost:hover { border-color: var(--saffron-soft, #e2a074); }
.gm-action small { display: block; font-weight: 500; font-size: 12.5px; color: var(--ink-3, #897c68); margin-top: 2px; }
.gm-keep { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--ink-2, #574b3a); }
.gm-keep input { width: 18px; height: 18px; accent-color: var(--saffron, #bf5526); }
.gm-forget { background: none; border: none; color: var(--ink-3, #897c68); font-size: 12.5px; cursor: pointer; font-family: inherit; text-decoration: underline; margin-top: 12px; padding: 4px; }
.gm-forget:hover { color: var(--brick, #97361f); }

/* A tiny "Continue as" ribbon injected atop the homepage hero when a profile exists */
.gm-continue { display: inline-flex; align-items: center; gap: 8px; background: #f6e6d6;
  border: 1px solid var(--saffron-soft, #e2a074); color: var(--ink, #211a12); border-radius: 999px;
  padding: 6px 14px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 13px; font-weight: 600; }
.gm-continue button { background: none; border: none; color: var(--saffron, #bf5526); font-weight: 700; cursor: pointer; font-family: inherit; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .gm-panel, .gm-scrim, .gm-btn { transition: none; }
}