/* ============================================================================
   axtbnb.ae : the booking sheet (validated on 3 September 2026, CONTRAT-FORK
   §3.33) and its twin, the booking card of a vehicle page.

   One calendar, one price, ONE red button, "Book it", which opens WhatsApp
   with the vehicle, the dates and the spot written in. Two columns from
   1024px (the vehicle on the left, a panel that shows the whole month, the
   price and the button without a scroll); a fixed three part frame under
   520px that fits down to 320 x 568 without a scroll: the photograph takes
   the free room, the month, the summary and the button stay on screen, and
   the equipment waits behind "Details".
============================================================================ */

/* the chips of the sheet: ink when on, never red */
.chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border:0;border-radius:999px;
  background:#fff;box-shadow:inset 0 0 0 1px var(--grey-3);cursor:pointer;font-size:.8125rem;font-weight:600;
  color:var(--ink-2);white-space:nowrap;transition:box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.chip:hover{box-shadow:inset 0 0 0 1px var(--ink-4)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}

.dlg{border:0;padding:0;background:none;max-width:none;max-height:none;color:inherit}
.dlg::backdrop{background:rgb(20 20 20 / .5)}
.dlg-s{position:fixed;inset:0;width:100%;height:100%}
@media (min-width:1024px){.dlg-s{inset:clamp(14px,2.4vh,30px);width:auto;height:auto}}
@media (prefers-reduced-motion:no-preference){
  .dlg-s[open]::backdrop{animation:bk-fade 240ms ease-out both}
  @keyframes bk-fade{from{opacity:0}}
}

/* the light world, as tokens: calendar.css reads them */
.bk,.bk-card{--c-bg:#fff;--c-fg:var(--ink);--c-dim:var(--ink-3);--c-card:#fff;--c-card-on:var(--grey-1);
  --c-line:var(--grey-2);--c-line-2:var(--grey-3);--c-btn-bg:var(--ink);--c-btn-fg:#fff}
.bk{--bk-pad:clamp(16px,2.2vw,28px);position:relative;height:100%;background:#fff;color:var(--ink);
  display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}

.bk-x{position:absolute;z-index:4;top:10px;left:10px;width:40px;height:40px;display:grid;place-items:center;border:0;
  border-radius:50%;background:#fff;color:var(--ink-2);cursor:pointer;box-shadow:0 2px 10px rgb(0 0 0 / .18);
  font-size:1.375rem;line-height:1;padding:0;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.bk-x:hover{background:var(--ink);color:#fff}

/* ---- the vehicle ------------------------------------------------------- */
.bk-stage{position:relative;flex:0 0 auto;display:flex;flex-direction:column;min-height:0;background:#fff}
.bk-photo{position:relative;flex:1 1 auto;min-height:0}
/* contained, never cropped: a cutout cropped loses its drawbar */
.bk-photo img{position:absolute;inset:44px 16px 50px;width:calc(100% - 32px);height:calc(100% - 94px);
  object-fit:contain;object-position:center;display:block}
.bk-photo img.is-room{object-fit:cover;border-radius:14px}
.bk-cap{position:absolute;z-index:2;left:var(--bk-pad);bottom:12px;display:grid;gap:2px;max-width:60%}
.bk-cap b{font-family:var(--display);font-size:1.125rem;font-weight:700;font-stretch:92%;letter-spacing:-.01em;line-height:1.15}
.bk-cap span{font-size:.8125rem;color:var(--ink-3)}
.bk-gal{position:absolute;z-index:2;right:var(--bk-pad);bottom:10px;display:flex;align-items:center;gap:6px}
.bk-gal button{width:36px;height:36px;border:1px solid var(--grey-2);border-radius:50%;background:#fff;color:var(--ink);
  cursor:pointer;display:grid;place-items:center;font-size:1rem;line-height:1;padding:0;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.bk-gal button:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.bk-gal span{font-size:.75rem;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;min-width:3.4em;text-align:center}

.bk-info{display:grid;gap:16px;padding:0 var(--bk-pad) var(--bk-pad)}
.bk-desc{margin:0;font-size:.9375rem;color:var(--ink-3);line-height:1.55;max-width:78ch}
.bk-board{display:grid;gap:9px}
.bk-board:empty{display:none}
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pills span{font-size:.75rem;font-weight:500;color:var(--ink-2);background:var(--grey-1);border-radius:999px;padding:5px 11px}
.bk-note{margin:0;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.bk-page{justify-self:start;font-size:.875rem;font-weight:600;border-bottom:1.5px solid var(--grey-3)}
.bk-page:hover{border-bottom-color:var(--ink)}

/* ---- the panel --------------------------------------------------------- */
.bk-pane{display:contents}
.bk-body{display:flex;flex-direction:column;gap:clamp(14px,2svh,20px);padding:var(--bk-pad)}
.bk-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.bk-t{margin:0;font-family:var(--display);font-size:clamp(1.375rem,2vw,1.75rem);font-weight:700;font-stretch:92%;
  letter-spacing:-.02em;line-height:1.1}
.bk-more{display:none}
/* the fleet as chips, one row that scrolls sideways: the panel keeps its
   height whatever the size of the fleet */
.bk-fleet{position:relative;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
  margin-inline:calc(-1 * var(--bk-pad));padding-inline:var(--bk-pad);scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}
.bk-fleet::-webkit-scrollbar{display:none}
.bk-fleet .chip{flex:0 0 auto;height:36px;padding:0 14px}
.bk-cal{--cal-cell:clamp(38px,6svh,54px)}
.bk-fallback{display:grid;gap:6px;font-size:.8125rem;font-weight:600;color:var(--ink-3)}
.bk-fallback input{height:46px;width:100%;border:0;border-radius:12px;padding:0 14px;font-size:.9375rem;background:#fff;
  box-shadow:inset 0 0 0 1px var(--grey-3)}
.bk-fallback input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--ink)}

/* the stay and what it costs, above the button */
.bk-sum{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.bk-dates{margin:0;font-size:.9375rem;font-weight:500;color:var(--ink-3);line-height:1.35;min-width:0}
.bk-dates.is-set{color:var(--ink);font-weight:600}
.bk-dates small{display:block;margin-top:3px;font-size:.75rem;font-weight:500;color:var(--ink-4);line-height:1.4}
.bk-price{flex:0 0 auto;text-align:right;display:grid;gap:3px;justify-items:end}
.bk-price b{font-family:var(--display);font-size:1.5rem;font-weight:700;font-stretch:92%;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.bk-price span{font-size:.75rem;color:var(--ink-4);white-space:nowrap}
.bk-spot{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;color:var(--ink-2);
  background:var(--grey-1);border-radius:999px;padding:4px 10px}
.bk-spot svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}

/* THE ONE BUTTON */
.bk-act{flex:0 0 auto;display:grid;gap:10px;padding:12px var(--bk-pad) calc(var(--bk-pad) + env(safe-area-inset-bottom,0px));
  background:#fff;border-top:1px solid var(--grey-2);position:sticky;bottom:0;z-index:3;margin-top:auto}
.bk-go{width:100%}
.bk-go[aria-disabled="true"]{opacity:.45;box-shadow:none;transform:none;cursor:not-allowed}
.bk-go[aria-disabled="true"]:hover{background:var(--red);transform:none;box-shadow:none}
.bk-foot{margin:0;text-align:center;font-size:.75rem;color:var(--ink-4);line-height:1.45}
.bk-foot.is-hint{color:var(--ink);font-weight:600}

@media (min-width:1024px){
  .bk{--bk-pane:clamp(440px,40vw,560px);display:grid;grid-template-columns:minmax(0,1fr) var(--bk-pane);
    grid-template-rows:minmax(0,1fr);overflow:hidden;border-radius:var(--r-lg);box-shadow:var(--sh-2)}
  .bk-stage{min-height:0;height:auto;overflow-y:auto;overscroll-behavior:contain}
  .bk-photo{flex:1 0 auto;min-height:clamp(220px,40svh,480px)}
  .bk-photo img{inset:56px clamp(24px,4vw,64px) 64px;width:calc(100% - 2 * clamp(24px,4vw,64px));height:calc(100% - 120px)}
  .bk-cap b{font-size:1.375rem}
  .bk-pane{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--grey-2)}
  .bk-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .bk-cal{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center}
  .bk-act{position:static;margin-top:0}
}
@media (max-width:1023px){
  .bk-stage{height:clamp(190px,30svh,320px)}
  .bk-t{font-size:1.375rem}
  .bk-info{padding-inline:0;padding-bottom:6px}
  .bk-cal{--cal-cell:clamp(42px,5.6svh,50px)}
  .bk-price b{font-size:1.3125rem}
  .bk-act{padding-top:10px;gap:8px}
}
/* a phone opens on the decision: compact vehicle, dates, confirmation */
@media (max-width:520px){
  .bk{overflow:hidden}
  .bk-stage{flex:1 1 auto;height:auto;min-height:104px;border-bottom:1px solid var(--grey-2)}
  .bk-photo img{inset:20px 24px 42px;width:calc(100% - 48px);height:calc(100% - 62px)}
  .bk-cap{left:16px;bottom:12px;max-width:48%;gap:3px}
  .bk-cap b{font-size:.9375rem}
  .bk-cap span{font-size:.75rem}
  .bk-gal{right:16px;bottom:8px}
  .bk-pane{display:flex;flex:0 1 auto;flex-direction:column;min-height:0}
  .bk-body{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;gap:8px;padding:10px 16px}
  .bk-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:8px;min-height:28px}
  .bk-head .kicker{font-size:.625rem}
  .bk-t{font-size:1.25rem;white-space:nowrap}
  .bk-more{display:inline-flex;align-items:center;justify-content:center;min-width:62px;height:30px;padding:0 12px;
    border:1px solid var(--grey-2);border-radius:999px;background:#fff;color:var(--ink-2);font-size:.75rem;font-weight:600;cursor:pointer}
  .bk-more[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
  .bk-fleet{display:none}
  .bk-cal{--cal-cell:clamp(32px,5.35svh,40px)}
  .bk-cal .axt-cal-head{margin-bottom:6px}
  .bk-cal .axt-cal-nav{width:32px;height:32px}
  .bk-cal .axt-cal-dow{padding-bottom:2px;font-size:.5625rem}
  .bk-info{display:none;padding:4px 0 8px}
  .bk.is-details .bk-cal,.bk.is-details .bk-body>.note{display:none}
  .bk.is-details .bk-info{display:grid}
  .bk.is-details .bk-stage{flex:0 0 104px}
  .bk.is-details .bk-pane,.bk.is-details .bk-body{flex:1 1 auto}
  .bk-act{position:static;margin:0;gap:12px;padding:14px 20px calc(16px + env(safe-area-inset-bottom,0px))}
  .bk-dates{font-size:.8125rem}
  .bk-dates small{font-size:.6875rem}
  .bk-price b{font-size:1.1875rem}
  .bk-price span{font-size:.6875rem}
  .bk-foot{display:none}
  .bk-foot.is-hint{display:block;font-size:.6875rem}
  .bk-spot{display:none}
}
@media (min-width:1024px) and (max-height:820px){
  .bk{--bk-pad:18px}
  .bk-body{gap:12px}
  .bk-t{font-size:1.25rem}
  .bk-cal{--cal-cell:clamp(34px,5.8svh,46px)}
}

/* ---- the booking card of a vehicle page -------------------------------- */
.bk-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-1),inset 0 0 0 1px var(--grey-2);
  padding:clamp(18px,2vw,26px);display:grid;gap:14px}
.bk-card .bk-cal{--cal-cell:clamp(36px,4.6vw,46px)}
.bk-card .bk-act{position:static;padding:14px 0 0;margin:0;background:none}
.bk-card-rate{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bk-card-rate b{font-family:var(--display);font-size:1.75rem;font-weight:700;font-stretch:92%;letter-spacing:-.02em}
.bk-card-rate span{color:var(--ink-3)}