/* floor-type picker (js/floortype.js), same look on the home page forms and /book */
.ftype { display: grid; gap: 10px; }
.ft-tabs { display: inline-flex; justify-self: start; max-width: 100%; background: #E2DFD6; border-radius: 999px; padding: 4px; gap: 2px; }
.ft-tab { border: 0; background: transparent; border-radius: 999px; padding: 0 16px; min-height: 40px; font-size: .84rem; font-weight: 800; color: #3E4644; cursor: pointer; transition: background-color .2s, color .2s; white-space: nowrap; }
.ft-tab:hover:not(.on) { color: #0E6660; }
.ft-tab.on { background: #101A19; color: #EAE4D8; }
.ft-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-extra { padding-top: 2px; }
.ft-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 15px; border: 0; border-radius: 999px; background: #F8F5EF; box-shadow: inset 0 0 0 1px #E2DFD6;
  font-weight: 700; font-size: .88rem; color: #101A19; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s, transform .2s; }
.ft-pill:hover { box-shadow: inset 0 0 0 1.5px #0E6660; transform: translateY(-1px); }
.ft-pill i { width: 8px; height: 8px; border-radius: 50%; background: #C9C5BB; transition: background-color .2s; flex: none; }
.ft-pill.on { background: #101A19; color: #EAE4D8; box-shadow: none; }
.ft-pill.on i { background: #7FD8C6; }
.ft-extra .ft-pill { box-shadow: none; outline: 1.5px dashed #C9C5BB; outline-offset: -1.5px; }
.ft-extra .ft-pill:hover { outline-color: #0E6660; }
.ft-extra .ft-pill.on { background: #101A19; outline: 0; }
.ft-tab:focus-visible, .ft-pill:focus-visible { outline: 2px solid #17A08F; outline-offset: 3px; }
.ft-other-in { width: 100%; background: #F8F5EF; border: 1px solid #E2DFD6; border-radius: 14px; padding: 13px 16px; font-size: 1rem; color: #101A19; }
.ft-other-in:focus { outline: none; border-color: #17A08F; box-shadow: 0 0 0 4px rgba(23,160,143,.15); }
@media (max-width: 400px) { .ft-tab { padding: 0 11px; font-size: .78rem; } .ft-pill { padding: 0 13px; font-size: .84rem; } }