/* Focus mode — plein écran sombre, une offre à la fois. */

.wg-fm-root {
  position: fixed; inset: 0;
  background: #0f0f14;
  color: #fff;
  z-index: var(--z-sheet);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.wg-fm-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px calc(14px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.wg-fm-close {
  background: rgba(255,255,255,0.08);
  border: none; color: #fff;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.wg-fm-stack {
  font-weight: 700; font-size: 13px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.wg-fm-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px 140px;
}

/* Dark-theme overrides for the OfferBlocks inside focus mode */
.wg-fm-scroll .wg-od-title { color: #fff; }
.wg-fm-scroll .wg-od-company { color: #fff; }
.wg-fm-scroll .wg-od-location { color: #a0a0ad; }
.wg-fm-scroll .wg-od-money {
  background: linear-gradient(135deg, rgba(106,62,235,0.22), rgba(106,62,235,0.08));
  border-color: rgba(106,62,235,0.35);
}
.wg-fm-scroll .wg-od-money-amt { color: #b9a2ff; }
.wg-fm-scroll .wg-od-money-lbl { color: #a0a0ad; }
.wg-fm-scroll .wg-od-money-hint { color: #a0a0ad; }
.wg-fm-scroll .wg-od-block {
  background: #1a1a22;
  border-color: rgba(255,255,255,0.06);
}
.wg-fm-scroll .wg-od-h2 { color: #fff; }
.wg-fm-scroll .wg-od-desc { color: #d3d3dc; }
.wg-fm-scroll .wg-od-chip {
  background: rgba(255,255,255,0.08); color: #fff;
}
.wg-fm-scroll .wg-od-lang { background: rgba(59,232,176,0.14); color: #6be5b6; }
.wg-fm-scroll .wg-od-when-item { color: #d3d3dc; }
.wg-fm-scroll .wg-od-fit.is-ok { background: rgba(59,232,176,0.16); color: #7cf1c1; }
.wg-fm-scroll .wg-od-fit.is-ko { background: rgba(255,176,32,0.16); color: #ffcf75; }
.wg-fm-scroll .wg-od-address, .wg-fm-scroll .wg-od-step-txt { color: #d3d3dc; }
.wg-fm-scroll .wg-od-distance { color: #a0a0ad; }
.wg-fm-scroll .wg-od-vibe { background: rgba(106,62,235,0.2); color: #d0bfff; }
.wg-fm-scroll .wg-od-rating-num { color: #fff; }

/* Bottom actions */
.wg-fm-actions {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(15,15,20,0), #0f0f14 40%);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.wg-fm-cta {
  width: 100%;
  padding: 15px 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #6A3EEB, #8557f5);
  color: #fff; font-weight: 700; font-size: 16px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(106,62,235,0.5);
}
.wg-fm-cta:active { transform: scale(0.98); }
.wg-fm-pass {
  background: transparent; border: none;
  color: #a0a0ad; font-size: 13px;
  padding: 6px 12px; cursor: pointer; text-decoration: underline;
}

/* Slide + fade transition */
.wg-fm-slide { animation: wgFmIn 0.32s ease-out both; }
.wg-fm-slide-left { animation: wgFmOutLeft 0.28s ease-in both; }
.wg-fm-slide-right { animation: wgFmOutRight 0.28s ease-in both; }
@keyframes wgFmIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes wgFmOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-24px); }
}
@keyframes wgFmOutRight {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(24px); }
}

@media (prefers-reduced-motion: reduce) {
  .wg-fm-slide,
  .wg-fm-slide-left,
  .wg-fm-slide-right { animation: none; }
}

/* Empty state */
.wg-fm-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 60vh; text-align: center; padding: 24px; gap: 12px;
}
.wg-fm-empty h3 { margin: 0; font-size: 22px; }
.wg-fm-empty p { margin: 0; color: #a0a0ad; }