/* Reconsites demo chrome shared by every sample site. Prefixed rs- so it never collides with a sample's own styles. */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@700&family=Figtree:wght@500;600&display=swap");

.rs-ribbon { position: relative; z-index: 60; background: #0e2a3b; color: #fbf3e4; font: 500 13px/1.3 "Figtree", system-ui, sans-serif; }
.rs-ribbon-in { max-width: 1240px; margin-inline: auto; padding: 8px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rs-home { display: inline-flex; align-items: center; gap: 8px; color: #fbf3e4; text-decoration: none; font: 700 12px/1 "Outfit", sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.rs-home svg { width: 24px; height: 24px; flex: none; }
.rs-home b { color: #f6ae2d; font-weight: 700; }
.rs-note { color: #a9c4cc; min-width: 0; }
.rs-note strong { color: #fbf3e4; font-weight: 600; }

.rs-pill { position: fixed; z-index: 70; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(14, 42, 59, .94);
  color: #fbf3e4; font: 500 13px/1 "Figtree", system-ui, sans-serif; box-shadow: 0 16px 40px -12px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(10px); max-width: calc(100vw - 24px); }
.rs-pill button, .rs-pill select { font: inherit; color: inherit; }
.rs-step { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.rs-step:hover { background: rgba(255,255,255,.18); }
.rs-step svg { width: 16px; height: 16px; }
.rs-pick { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0 22px 0 8px; height: 36px; max-width: 230px; min-width: 0; cursor: pointer; color-scheme: dark;
  background-image: linear-gradient(45deg, transparent 50%, #fbf3e4 50%), linear-gradient(135deg, #fbf3e4 50%, transparent 50%);
  background-position: calc(100% - 12px) 16px, calc(100% - 7px) 16px; background-size: 5px 5px; background-repeat: no-repeat; text-overflow: ellipsis; }
.rs-pick option, .rs-pick optgroup { background: #0e2a3b; color: #fbf3e4; }
.rs-cta { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; text-decoration: none; font-weight: 600;
  background: linear-gradient(135deg, #f6ae2d, #f0704c); color: #3b1408; white-space: nowrap; }
.rs-cta:hover { filter: brightness(1.06); }
.rs-spacer { height: 88px; }
.rs-pill :focus-visible, .rs-ribbon :focus-visible { outline: 2px solid #f6ae2d; outline-offset: 2px; }

@media (max-width: 560px) {
  .rs-note { display: none; }
  .rs-pick { max-width: 140px; }
  .rs-cta { padding: 0 12px; }
  .rs-cta span { display: none; }
}
@media (max-width: 380px) {
  .rs-pick { max-width: 104px; }
}