/* The Brand Build Up: interaction moments (pairs with assets/js/moments.js).
   1. take the empty seat  2. your logo here (partner shelf)  3. sign-up lands a block.
   Logical properties only. Everything is inert without JS (the shelf block is a plain link to #enquiry). */
:root{
  --mo-ink:var(--ink,#16181D); --mo-yellow:var(--yellow,#FFEE8C); --mo-card:var(--card,#FFFDF6); --mo-cream:var(--cream,#FBF8EE);
  --mo-head:var(--font-head,"Oswald","Arial Narrow",Arial,sans-serif); --mo-body:var(--font-body,"DM Sans",Arial,sans-serif);
  --mo-ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- 1. the empty seat is a real button ---------- */
.play-seats .play-seat--open[data-moment-seat-btn]{pointer-events:auto;cursor:pointer;border:0;padding:0;margin:0;font:inherit;color:inherit;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
  transition:translate .35s var(--mo-ease),background-color .12s linear}
.play-seats .play-seat--open[data-moment-seat-btn]:hover{translate:0 -4px}
.play-seats .play-seat--open[data-moment-seat-btn]:focus-visible{outline:3px solid var(--mo-ink);outline-offset:9px}
/* a hit area a thumb can find, without changing the look */
.play-seats .play-seat--open[data-moment-seat-btn]{min-inline-size:26px}
.play-seat--open[data-moment-seat-btn]::before{transition:transform .32s cubic-bezier(.3,0,.2,1),background-color .3s}
.play-seat--open.is-taken{pointer-events:none;cursor:default;translate:0 0!important}
.play-seats.is-in .play-seat--open.is-taken,.play-seats .play-seat--open.is-taken{background:var(--mo-ink);box-shadow:none}
.play-seat--open.is-taken::before{transform:translateY(4px);box-shadow:0 -4px 0 var(--play-bg,var(--mo-cream))}
.play-seat--open.is-taken::after{opacity:0!important;animation:none!important}
.moment-sblock{position:absolute;inset-inline:20%;inset-block-start:12%;aspect-ratio:1;border-radius:3px;background:var(--mo-yellow);pointer-events:none;z-index:1}
.play-seat--open.is-taken .play-seat__label{z-index:2}

/* arriving on the Apply page from the seat */
.js.seat-arrive [data-moment="arrive"]{opacity:0;animation:mo-failsafe 0s 2.6s forwards}
@keyframes mo-failsafe{to{opacity:1}}
[data-moment="arrive"]{position:relative}
.field .moment-hi{border-color:var(--mo-ink)!important;box-shadow:0 0 0 4px var(--mo-yellow),0 0 0 6px var(--mo-ink)!important}

/* ---------- 2. your logo here: the partner shelf (5 open spots) ---------- */
.shelf__line{font:700 clamp(1.5rem,3.2vw,2.5rem)/1.15 var(--mo-head);text-transform:uppercase;color:var(--mo-ink);text-wrap:balance}
html[lang="ar"] .shelf__line{text-transform:none;font-weight:800;line-height:1.35}
.shelf{--tile-h:clamp(76px,9vw,124px);--g:clamp(10px,1.4vw,18px);--cols:3;--tile-r:10px 10px 2px 2px;margin-block-start:clamp(24px,3vw,40px);position:relative}
@media (min-width:700px){.shelf{--cols:5}}
.shelf__dock,.shelf__row{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));margin-inline:calc(var(--g) / -2)}
.shelf__dock{margin-block-end:clamp(26px,3vw,40px);position:relative;z-index:3}
.shelf__dock>.shelf__block{grid-column:1;margin-inline:calc(var(--g) / 2)}
.shelf__row{row-gap:clamp(14px,2vw,24px)}
.shelf__cell{padding-inline:calc(var(--g) / 2);border-block-end:10px solid var(--mo-ink)}
.shelf__slot{position:relative;block-size:var(--tile-h);border:2px dashed var(--mo-ink);border-radius:var(--tile-r);
  transition:background-color .25s var(--mo-ease),transform .25s var(--mo-ease)}
.shelf__fill{position:absolute;inset:-2px;display:grid;place-items:center;border:2px solid var(--mo-ink);border-radius:inherit;background:var(--mo-yellow);opacity:0;
  font:700 clamp(.9375rem,1.7vw,1.5rem)/1 var(--mo-head);letter-spacing:.02em;text-transform:uppercase;color:var(--mo-ink);text-align:center;padding-inline:6px}
html[lang="ar"] .shelf__fill,html[lang="ar"] .shelf__block{letter-spacing:0;text-transform:none;font-weight:800}
.shelf__slot.is-near{border-style:solid;background:rgba(255,238,140,.55);transform:scale(1.02)}
.shelf__slot.is-filled{border-color:transparent}
.shelf__slot.is-filled .shelf__fill{opacity:1}
.shelf__block{position:relative;display:grid;place-items:center;block-size:var(--tile-h);padding-inline:26px 8px;background:var(--mo-yellow);color:var(--mo-ink);
  border:2px solid var(--mo-ink);border-radius:var(--tile-r);text-decoration:none;box-shadow:0 5px 0 var(--mo-ink);
  font:700 clamp(.9375rem,1.7vw,1.5rem)/1 var(--mo-head);letter-spacing:.02em;text-transform:uppercase;text-align:center;
  user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent;
  transition:translate .3s var(--mo-ease),box-shadow .3s var(--mo-ease)}
html[dir="rtl"] .shelf__block{padding-inline:26px 8px}
.shelf__block:hover{translate:0 -3px;box-shadow:0 8px 0 var(--mo-ink)}
.shelf__block:focus-visible{outline:3px solid var(--mo-ink);outline-offset:5px}
.shelf__grip{position:absolute;inset-inline-start:9px;inset-block:0;margin-block:auto;inline-size:12px;block-size:20px;pointer-events:none;
  background:radial-gradient(circle,var(--mo-ink) 1.6px,transparent 2.1px) 0 0/6px 6.6px}
.shelf.is-live .shelf__block{cursor:grab;touch-action:none}
.shelf__block.is-drag{cursor:grabbing;translate:0 0;box-shadow:0 16px 22px -10px rgba(22,24,29,.5),0 5px 0 var(--mo-ink);z-index:5;transition:none}
.shelf.is-placed .shelf__dock{visibility:hidden}
.shelf.is-collapsed .shelf__dock{display:none}
@media (prefers-reduced-motion:reduce){.shelf__block,.shelf__slot{transition:none}.shelf__block:hover{translate:none}}

/* ---------- seats: bigger row, a hit area a thumb can find ---------- */
.teaser__seats .play-seats,.empty .play-seats{gap:clamp(4px,.6vw,10px)}
.teaser__seats .play-seat,.empty .play-seat{max-inline-size:none;min-inline-size:0;block-size:clamp(60px,15vw,76px);--r:clamp(9px,2.4vw,26px)}
.empty .play-seats{inline-size:min(100%,800px)}
@media (min-width:700px){.teaser__seats .play-seat,.empty .play-seat{block-size:auto;aspect-ratio:.47}}
@media (max-width:699px){
  .play-seats .play-seat--open[data-moment-seat-btn]{border-inline:12px solid transparent;margin-inline:-12px;background-clip:padding-box}
  .play-seat--open[data-moment-seat-btn]::after{inset-inline:-12px}
}

.numlist--spaced{margin-block-start:clamp(24px,3vw,40px)}