/*
 * Additions layer for the exported Mallorca app.
 * Only adds visual polish on top of the original build — nothing is removed.
 *
 * 1. Frosted, semi-transparent glass for every bottom button:
 *    - the home screen action row (Map / Photo / Radio / AI guide)
 *    - the "Start Exploring" button
 *    - the bottom tab bar
 * 2. Styling for the floating "home" button injected by additions.js.
 */

/* Bottom action buttons + primary CTA on the landing screen — matte glass, half-transparent */
.border-sky-300 {
  background-color: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(10px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 8px 24px rgba(4, 30, 45, 0.14);
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.border-sky-300:hover {
  background-color: rgba(255, 255, 255, 0.28) !important;
}


/* Bottom tab bar (Map / Routes / Photo / Radio / Guide) — half-transparent glass */
div:has(> [role="tablist"]) {
  background-color: rgba(246, 252, 252, 0.22) !important;
  backdrop-filter: blur(14px) saturate(150%);
  border-top-color: rgba(255, 255, 255, 0.5) !important;
}


/* Floating home button (added by additions.js) — draggable, half-transparent glass */
.app-home-fab {
  position: fixed;
  right: 14px;
  bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 24px rgba(4, 30, 45, 0.22);
  color: #0f3f52;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.app-home-fab:hover {
  background-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}


.app-home-fab[hidden] {
  display: none;
}

/* Draggable home button */
.app-home-fab {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.app-home-fab.is-dragging {
  cursor: grabbing;
  transform: scale(1.06);
}

/* Assistant mode switch (guide / general) */
.app-mode-switch {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 24px rgba(4, 30, 45, 0.14);
}

.app-mode-switch[hidden] {
  display: none;
}

.app-mode-switch button {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 6px 16px;
  border-radius: 999px;
  font: 600 13px/1.2 Inter, system-ui, sans-serif;
  color: #0f3f52;
  background: transparent;
}

.app-mode-switch button[aria-pressed="true"] {
  background-color: rgba(255, 255, 255, 0.7);
}



/* "AI" text badge replacing the sparkles icon */
.ai-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}


/* ---- TOP launcher (best routes / sights / restaurants) ---- */
.app-top-fab {
  position: fixed;
  left: 14px;
  bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 24px rgba(4, 30, 45, 0.22);
  color: #0f3f52;
  text-decoration: none;
  font: 800 13px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.6px;
}

.app-top-fab:hover {
  background-color: rgba(255, 255, 255, 0.34);
}

.app-top-fab[hidden] {
  display: none;
}

/* ---- Instagram / YouTube chips injected next to place names ---- */
.app-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.app-social-row a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #0f3f52;
  text-decoration: none;
  font: 700 11px/1.2 Inter, system-ui, sans-serif;
  white-space: nowrap;
}

.app-social-row a:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.app-social-row svg {
  width: 12px;
  height: 12px;
}