/* v1.244 FLOOR-2 — the floor scale: a lift call panel on the right edge
   (desktop). Penthouse at the top, lobby at the bottom, as in a real lift;
   the orange car is where you are. Hover or keyboard focus opens the panel
   to show each floor's name; ↗ marks a floor that opens its own page.
   Markup: includes/marketing_header.php · behaviour: assets/js/marketing.js */
.fl { display: none; }
@media (min-width: 901px) and (min-height: 600px) {
  .fl {
    position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 90;
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 8px 10px 6px;
    background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--line-light, #e3e8ea); border-radius: 16px;
    box-shadow: 0 10px 30px -14px rgba(0, 56, 65, .35), 0 1px 2px rgba(0, 56, 65, .06);
    opacity: 0; transition: opacity .3s ease, box-shadow .25s ease;
  }
  .fl.is-ready { opacity: 1; }
  .fl:hover, .fl:focus-within { box-shadow: 0 18px 44px -16px rgba(0, 56, 65, .45), 0 1px 2px rgba(0, 56, 65, .06); }
}
.fl-head { display: grid; justify-items: center; gap: 2px; padding: 2px 0 6px 8px; border-bottom: 1px solid var(--line-light, #e3e8ea); }
.fl-head span { font: 600 .52rem/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft, #5b6b70); }
.fl-head b {
  min-width: 36px; padding: 4px 6px; border-radius: 7px; text-align: center;
  font: 700 .95rem/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .04em;
  color: #F69810; background: #0d2a30; box-shadow: inset 0 0 0 1px rgba(246, 152, 16, .25), inset 0 0 10px rgba(246, 152, 16, .15);
}
.fl-shaft { position: relative; padding-left: 8px; }
/* the shaft: a thin line through the floor buttons */
.fl-shaft::before { content: ""; position: absolute; left: 23px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--line-light, #e3e8ea), var(--line-light, #e3e8ea)); }
.fl-car {
  position: absolute; left: 0; top: 0; width: 4px; height: 20px; border-radius: 3px; background: #F69810;
  box-shadow: 0 0 10px rgba(246, 152, 16, .55); opacity: 0;
  transition: transform .55s cubic-bezier(.65, 0, .35, 1), opacity .3s ease;
}
.fl-car.is-on { opacity: 1; }
.fl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 2px; }
.fl-list li { margin: 0; }
.fl-btn {
  position: relative; display: flex; align-items: center; gap: 0; height: 22px; padding-right: 2px;
  border-radius: 7px; text-decoration: none; color: var(--ink-soft, #5b6b70);
  transition: background .2s ease, gap .25s ease, padding .25s ease;
}
.fl-btn b {
  position: relative; z-index: 1; flex: none; width: 30px; height: 18px; display: grid; place-items: center;
  font: 600 .58rem/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .04em;
  color: var(--ink-soft, #5b6b70); background: #fff; border: 1px solid var(--line-light, #e3e8ea); border-radius: 5px;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
/* a floor with its own page: a small orange dot on the button */
.fl-btn.has-page b::after { content: ""; position: absolute; top: -2px; right: -2px; width: 5px; height: 5px; border-radius: 50%; background: #F69810; box-shadow: 0 0 0 1.5px #fff; }
.fl-name {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  font: 500 .78rem/1 var(--font-body, system-ui, sans-serif); color: var(--ink, #14242a);
  transition: max-width .3s cubic-bezier(.16, .84, .3, 1), opacity .2s ease;
}
.fl-btn i { font-style: normal; font-size: .72rem; color: #c46f00; max-width: 0; opacity: 0; overflow: hidden; transition: max-width .3s ease, opacity .2s ease; }
.fl:hover .fl-btn, .fl:focus-within .fl-btn { gap: 9px; padding-right: 10px; }
.fl:hover .fl-name, .fl:focus-within .fl-name { max-width: 210px; opacity: 1; }
.fl:hover .fl-btn i, .fl:focus-within .fl-btn i { max-width: 14px; opacity: 1; margin-left: -4px; }
.fl-btn:hover { background: var(--paper, #f5f7f8); }
.fl-btn:hover b { border-color: #F69810; color: #c46f00; transform: translateX(-1px); }
.fl-btn:focus-visible { outline: 2px solid #F69810; outline-offset: 1px; }
.fl-btn.is-current b { background: var(--teal, #003841); border-color: var(--teal, #003841); color: #fff; }
.fl-btn.is-current .fl-name { font-weight: 700; color: var(--teal, #003841); }
.fl-btn:active b { transform: scale(.92); }
/* shorter screens: a tighter panel */
@media (min-width: 901px) and (max-height: 780px) {
  .fl { gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .fl-head b { font-size: .8rem; padding: 3px 5px; }
  .fl-btn { height: 18px; }
  .fl-btn b { height: 15px; font-size: .52rem; }
  .fl-car { height: 16px; }
  .fl-list { gap: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .fl, .fl-car, .fl-btn, .fl-btn b, .fl-name, .fl-btn i { transition: none !important; }
}
@media print { .fl { display: none !important; } }