/* RestaurantOS hero brightening + 60-sec tour (2026-11-04). No build step needed. */

/* ---- 1. Lighten the hero background so the dining-room photo shows through ---- */
[data-testid="home-page"] > section:first-of-type > img[src="/media/skyline_dining.jpg"] {
  opacity: 0.8 !important;
  filter: saturate(1.18) contrast(1.06);
}
[data-testid="home-page"] > section:first-of-type > .bg-gradient-to-r {
  opacity: 0.55 !important;
}
[data-testid="home-page"] > section:first-of-type > .bg-gradient-to-t {
  opacity: 0.45 !important;
}

/* ---- 2. Floating tour button ---- */
#ros-tour-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9000;
  display: none;
  align-items: center;
  gap: 8px;
  background: #dfa362;
  color: #1a1206;
  font: 600 13px/1 Plus Jakarta Sans, system-ui, sans-serif;
  padding: 13px 18px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(223, 163, 98, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#ros-tour-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(223, 163, 98, 0.45); }
#ros-tour-fab:active { transform: scale(0.97); }

/* ---- 3. Tour spotlight ring ---- */
#ros-tour-ring {
  position: fixed;
  z-index: 9500;
  border: 2px solid #dfa362;
  border-radius: 14px;
  box-shadow: 0 0 0 4000px rgba(4, 5, 8, 0.55), 0 0 24px rgba(223, 163, 98, 0.6);
  pointer-events: none;
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}

/* ---- 4. Tour card ---- */
#ros-tour-root {
  position: fixed;
  z-index: 9600;
  left: 50%;
  transform: translateX(-50%);
  bottom: 76px;
  width: min(420px, calc(100vw - 32px));
}
#ros-tour-card {
  background: #0d0e12;
  border: 1px solid #2a2e3d;
  border-radius: 16px;
  padding: 20px 20px 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  font-family: Plus Jakarta Sans, system-ui, sans-serif;
}
#ros-tour-card h3 { margin: 0 0 6px; font-size: 16px; color: #fff; font-weight: 700; }
#ros-tour-card h3 .ros-step { color: #dfa362; }
#ros-tour-card p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: #b9bcc7; }
#ros-tour-dots { display: flex; gap: 6px; margin-bottom: 14px; }
#ros-tour-dots span { height: 6px; width: 22px; border-radius: 99px; background: #2a2e3d; }
#ros-tour-dots span.on { background: #dfa362; }
#ros-tour-row { display: flex; gap: 8px; align-items: center; }
#ros-tour-row .spacer { flex: 1; }
.ros-btn {
  font: 600 13px/1 Plus Jakarta Sans, system-ui, sans-serif;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid #2a2e3d;
  background: transparent;
  color: #cfd2dc;
}
.ros-btn.primary { background: #dfa362; border-color: #dfa362; color: #1a1206; }
.ros-btn:hover { filter: brightness(1.1); }