/* Styles for extras.js (quick help, Wi-Fi QR, troubleshooting, offline). Uses the same
   colors and card style as styles.css so it matches Cabin Mode. */

/* Quick-help buttons under the Wi-Fi / check-in cards */
.x-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 8px; }
.x-qa {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 72px; padding: 10px 4px; border-radius: var(--radius); background: var(--card);
  box-shadow: var(--shadow); text-decoration: none; color: var(--primary); font-size: 13px;
  font-weight: 600; text-align: center; line-height: 1.2;
}
.x-qa svg { width: 22px; height: 22px; }
.x-qa:active { transform: scale(.97); }

/* Wi-Fi QR */
.x-qr-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 12px; padding: 8px 12px; min-height: 40px; border: 1px dashed var(--line);
  border-radius: 10px; background: transparent; color: var(--primary); font-size: 14px; font-weight: 600; cursor: pointer;
}
.x-qr-btn svg { width: 18px; height: 18px; }
.x-sheet .sheet-body { padding-top: 22px; }
.x-qr { background: #fff; border-radius: var(--radius); padding: 14px; margin: 16px auto 12px; max-width: 280px; box-shadow: var(--shadow); }
.x-qr svg { display: block; width: 100%; height: auto; }
.x-wifi-text { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; text-align: center; }
.x-wifi-text .qi-value { word-break: break-all; }
.x-inset { justify-content: flex-start; text-align: left; background: var(--primary-soft); border-radius: 10px; padding: 10px 14px; margin: 0 0 10px; }

/* Save-to-phone tip */
.x-tip { position: relative; margin-top: 8px; }
.x-tip-row { display: flex; gap: 12px; align-items: flex-start; padding-right: 24px; }
.x-tip-close {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer;
}
.x-tip-close svg { width: 18px; height: 18px; }
.x-h3 { display: flex; align-items: center; gap: 8px; color: var(--primary); font-size: 16px; margin: 18px 0 6px; }
.x-h3 svg { width: 18px; height: 18px; }

/* Troubleshooting */
.x-emergency {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 0 0 16px;
  border-radius: var(--radius); background: #FBEDEC; color: #8E1E17; text-decoration: none; font-size: 15px;
}
.x-emergency span { flex: 1; }
.x-emergency svg { width: 20px; height: 20px; flex: none; }
.x-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin: 4px 0 6px; }
.x-steps { margin: 0 0 14px; padding-left: 22px; }
.x-steps li { margin: 0 0 6px; }
.x-steps svg { width: 16px; height: 16px; vertical-align: -3px; }
.x-from { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--primary); margin: 12px 0 4px; }
.x-from svg { width: 18px; height: 18px; }

/* No-signal banner */
.x-offline {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 70;
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: #3A3632; color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.2);
  white-space: nowrap;
}
.x-offline svg { width: 16px; height: 16px; }
.x-offline[hidden] { display: none; }

@media (max-width: 340px) { .x-quick { grid-template-columns: repeat(2, 1fr); } }

/* Always show "You are here" above the cabin's house pin on the Things to Do map.
   The label hangs off the marker wrapper (the pin itself is rotated). */
.leaflet-marker-icon:has(.pin.home) { overflow: visible; }
.leaflet-marker-icon:has(.pin.home)::after {
  content: "You are here"; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
  white-space: nowrap; padding: 3px 8px; border-radius: 999px; background: var(--primary, #2F4F3E); color: #fff;
  font: 700 11px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,.25);
  pointer-events: none;
}