/* Seat maps: the cabin drawn from the front (top) to the tail, seats coloured by category. */
.sm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 10px; }
.sm-plane { display: inline-flex; flex-direction: column; align-items: center; min-width: max-content; margin: 0 auto; background: #f4f6fb; border: 2px solid #d6dbe6;
  border-radius: 120px 120px 40px 40px; padding: 18px 16px 22px; position: relative; }
.sm-wrap .sm-scroll, .sp-map .sm-scroll { text-align: center; }
.sm-nose { width: 46%; height: 26px; border-radius: 50% 50% 0 0; background: #e3e8f2; margin-bottom: 8px; }
.sm-tail { width: 30%; height: 14px; border-radius: 0 0 50% 50%; background: #e3e8f2; margin-top: 8px; }
.sm-cabin { font: 600 11px/1.2 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #5b6475; margin: 10px 0 6px; padding: 3px 10px; border-radius: 99px; background: #fff; border: 1px solid #d6dbe6; }
.sm-row { display: flex; align-items: center; gap: 3px; margin: 2px 0; position: relative; }
.sm-row.exit { margin-top: 10px; }
.sm-row.exit::before { content: "EXIT"; position: absolute; top: -10px; left: 0; right: 0; text-align: center; font: 700 8px/1 system-ui; color: #c0392b; letter-spacing: .2em; }
.sm-ex { font-style: normal; color: #c0392b; font-size: 12px; width: 12px; }
.sm-n { width: 20px; text-align: center; font: 600 10px/1 system-ui, sans-serif; color: #8a93a5; cursor: default; }
[data-sm-editor] .sm-n { cursor: pointer; }
.sm-g { display: flex; gap: 3px; }
.sm-aisle { width: 16px; text-align: center; font: 9px/1 system-ui; color: transparent; }
.sm-s { --c: #9aa3b2; width: 28px; height: 30px; border: 0; border-radius: 7px 7px 4px 4px; background: var(--c); color: #fff; font: 700 10px/1 system-ui, sans-serif; cursor: pointer;
  padding: 0; position: relative; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); transition: transform .08s; }
.sm-s:hover:not(:disabled) { transform: translateY(-1px) scale(1.06); box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.2); }
.sm-s.taken, .sm-s:disabled { background: #d3d8e2 !important; color: #9aa3b2; cursor: not-allowed; box-shadow: none; }
.sm-s.taken::after { content: "✕"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #8a93a5; font-size: 12px; }
.sm-s.block { background: repeating-linear-gradient(45deg, #c9ced8, #c9ced8 4px, #e3e6ec 4px, #e3e6ec 8px) !important; color: transparent; }
.sm-s.none { visibility: hidden; }
[data-sm-editor] .sm-s.none { visibility: visible; background: transparent !important; border: 1px dashed #b7bfcc; color: #b7bfcc; box-shadow: none; }
.sm-s.mine, .sm-s.pick { background: #111 !important; color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.sm-s.pick::before { content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; }
.sm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 10px; font: 12px/1.3 system-ui, sans-serif; }
.sm-leg-i { display: inline-flex; align-items: center; gap: 6px; }
.sm-leg-i i, .sm-dot { --c: #9aa3b2; display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--c); vertical-align: -2px; }
.sm-leg-i i.taken { background: #d3d8e2; }
/* the picker of a booking form */
.sp-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.sp-tab { border: 1px solid #d6dbe6; background: #fff; border-radius: 10px; padding: 8px 12px; font: 600 13px/1.2 system-ui, sans-serif; cursor: pointer; color: #1b2230; }
.sp-tab.on { background: #111; color: #fff; border-color: #111; }
.sp-tab small { font-weight: 500; opacity: .8; }
.sp-paxes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.sp-pax { border: 1px solid #d6dbe6; background: #fff; border-radius: 99px; padding: 6px 12px; font: 13px/1.2 system-ui, sans-serif; cursor: pointer; color: #1b2230; }
.sp-pax b { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: #eef1f7; align-items: center; justify-content: center; font-size: 11px; }
.sp-pax.on { border-color: #111; box-shadow: 0 0 0 2px #111 inset; }
.sp-pax em { font-style: normal; font-weight: 700; color: #0a7d2c; }
.sp-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.sp-tools .btn-ghost { border: 1px solid #d6dbe6; background: #fff; border-radius: 8px; padding: 6px 10px; cursor: pointer; font: 13px system-ui, sans-serif; }
.sp-msg { color: #c0392b; font: 13px system-ui, sans-serif; }
.sp-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; font: 14px system-ui, sans-serif; }
@media (max-width: 520px) { .sm-s { width: 24px; height: 26px; font-size: 9px; } .sm-aisle { width: 10px; } .sm-plane { padding: 14px 8px; border-radius: 80px 80px 30px 30px; } }
/* in a booking form the cabin scrolls inside its own box */
.sp-map .sm-scroll { max-height: 560px; overflow: auto; border: 1px solid #e3e8f2; border-radius: 12px; padding: 10px 4px; background: #fbfcfe; overscroll-behavior: contain; }
.sp { max-width: 100%; min-width: 0; }
.sp-tab { max-width: 100%; white-space: normal; text-align: left; }
.book-grid > * { min-width: 0; }