/* ============================================================
   Sellup — Floating controls: guide + dark mode
   ============================================================ */

.su-float-cluster {
  position: fixed;
  right: clamp(.75rem, 2vw, 1.5rem);
  bottom: clamp(.75rem, 2vw, 1.5rem);
  z-index: 850;
  display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
}

/* Lift above mobile bottom bar + sticky ATC when present */
body.has-mobile-bar .su-float-cluster { bottom: calc(64px + env(safe-area-inset-bottom) + .6rem); }
@media (min-width: 1024px) { body.has-mobile-bar .su-float-cluster { bottom: clamp(.75rem, 2vw, 1.5rem); } }

.su-float-btn {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--su-surface);
  color: var(--su-heading);
  border: 1px solid var(--su-border);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--su-shadow-lift);
  font-size: 1.05rem;
  transition: background var(--su-t) var(--su-ease), color var(--su-t) var(--su-ease), transform var(--su-t) var(--su-ease);
}
.su-float-btn:hover { transform: translateY(-2px); background: var(--su-primary); color: #fff; }
.su-float-btn:active { transform: translateY(0); }

/* Dark-mode toggle icon swap */
.su-darkmode-btn .su-icon-light { display: none; }
[data-su-theme="dark"] .su-darkmode-btn .su-icon-dark { display: none; }
[data-su-theme="dark"] .su-darkmode-btn .su-icon-light { display: block; }

/* Guide card */
.su-guide { position: absolute; right: 0; bottom: calc(100% + .6rem); }
.su-guide[hidden] { display: none; }

.su-guide-card {
  width: min(320px, calc(100vw - 2rem));
  background: var(--su-surface);
  border: 1px solid var(--su-border);
  border-radius: var(--su-radius-lg);
  box-shadow: var(--su-shadow-lift);
  padding: 1.4rem 1.4rem 1.5rem;
  position: relative;
  animation: su-guide-in .25s var(--su-ease);
}
@keyframes su-guide-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

.su-guide-close {
  position: absolute; top: .75rem; right: .75rem;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--su-bg); border: none; border-radius: 50%;
  color: var(--su-muted); cursor: pointer;
}
.su-guide-close:hover { color: var(--su-heading); }

.su-guide-badge {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px;
  background: color-mix(in srgb, var(--su-accent) 22%, var(--su-surface));
  color: var(--su-accent);
  border-radius: 50%; font-size: 1.1rem; margin-bottom: .75rem;
}

.su-guide-title { font-size: var(--su-fs-md); margin: 0 0 .75rem; }

.su-guide-tips { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .6rem; }
.su-guide-tips li { display: flex; gap: .6rem; font-size: var(--su-fs-sm); color: var(--su-text); line-height: 1.5; }
.su-guide-tips i { color: var(--su-success); margin-top: .25rem; flex-shrink: 0; }

.su-guide-got { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .su-guide-card { animation: none; }
}