/* Agadir Stays — transfer booking tool + transport page hero (2026-09-27 redesign).
   Loaded by transport.html after design.css. The tool markup is built by transport-tool.js. */

/* ------------------------------------------------------------------ page hero: photo + booking card */
.tx-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--ocean);color:#fff;
  padding:clamp(1.5rem,4vw,3.25rem) 0 clamp(2rem,5vw,4rem);}
.tx-hero-bg{position:absolute;inset:0;z-index:-2;}
.tx-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 55%;display:block;}
.tx-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(8,26,31,.9) 0%,rgba(8,26,31,.72) 42%,rgba(8,26,31,.35) 100%);}
html[dir="rtl"] .tx-hero::before{background:linear-gradient(270deg,rgba(8,26,31,.9) 0%,rgba(8,26,31,.72) 42%,rgba(8,26,31,.35) 100%);}
.tx-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,27rem);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;}
.tx-hero-copy .kicker--xl{color:#FFC58A!important;}
.tx-hero-copy .kicker--xl .k-ic{background:rgba(255,255,255,.14)!important;color:#FFC58A!important;}
.tx-hero-copy :is(h1,h2){color:#fff!important;font-size:clamp(2rem,4.2vw,3.2rem)!important;line-height:1.05;margin:.3rem 0 .6rem;}
.tx-hero-copy .sub{color:rgba(255,255,255,.88)!important;font-size:var(--fs-lg);white-space:normal!important;max-width:34rem;}
.tx-points{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.6rem;}
.tx-points li{display:flex;align-items:center;gap:.6rem;font:600 var(--fs-md)/1.35 var(--font-ui);color:#fff;}
.tx-points svg{flex:none;width:1.35rem;height:1.35rem;padding:.25rem;border-radius:50%;background:rgba(255,255,255,.16);
  fill:none;stroke:#9FE3BF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:900px){
  .tx-hero-in{grid-template-columns:minmax(0,1fr);}
  .tx-hero::before{background:linear-gradient(180deg,rgba(8,26,31,.82) 0%,rgba(8,26,31,.7) 45%,rgba(8,26,31,.9) 100%);}
  .tx-points{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem .8rem;margin-top:1rem;}
  .tx-points li{font-size:var(--fs-sm);align-items:flex-start;}
}

/* ------------------------------------------------------------------ the card */
.tx-card,.tx-done{position:relative;background:#fff;color:var(--ink);border-radius:22px;padding:clamp(1rem,2vw,1.35rem);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.06);}
.tx-done[hidden],.tx-card[hidden]{display:none!important;}
.tx svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* service tabs */
.tx-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem;margin:0 0 .85rem;padding:.3rem;
  border-radius:14px;background:var(--plaster-2);}
.tx-tab{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:40px;padding:.45rem .4rem;border:0;border-radius:10px;
  background:transparent;cursor:pointer;font:600 var(--fs-sm)/1.15 var(--font-ui);color:var(--ink-soft);text-align:center;
  transition:background .15s,color .15s,box-shadow .15s;}
.tx-tab svg{width:1rem;height:1rem;flex:none;}
.tx-tab:hover{color:var(--head);}
.tx-tab.on{background:#fff;color:var(--clay-deep);box-shadow:0 1px 3px rgba(23,37,42,.12),0 4px 12px -6px rgba(23,37,42,.2);}
.tx-tab:focus-visible{outline:2.5px solid var(--clay);outline-offset:1px;}

/* one way / return  (and the 3 durations) */
.tx-seg2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0 0 .85rem;border:1.5px solid var(--line);border-radius:999px;padding:3px;}
.tx-seg2--3{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:14px;margin:0;}
.tx-seg2-b{min-height:38px;border:0;border-radius:999px;background:transparent;cursor:pointer;
  font:600 var(--fs-md)/1.1 var(--font-ui);color:var(--ink-soft);transition:background .15s,color .15s;}
.tx-seg2--3 .tx-seg2-b{border-radius:11px;padding:.45rem .3rem;display:flex;flex-direction:column;align-items:center;gap:.15rem;}
.tx-seg2--3 .tx-seg2-b b{font:600 var(--fs-sm)/1.15 var(--font-ui);}
.tx-seg2--3 .tx-seg2-b small{font:700 var(--fs-xs)/1 var(--font-ui);opacity:.85;}
.tx-seg2-b.on{background:var(--clay);color:#fff;}
.tx-seg2-b:not(.on):hover{color:var(--head);background:var(--plaster-2);}
.tx-seg2-b:focus-visible{outline:2.5px solid var(--clay);outline-offset:1px;}
.tx-dur{margin:0 0 .85rem;}
.tx-dur .tx-cnt-l{display:block;margin-bottom:.4rem;}

/* from / to — one box, dotted connector, swap button */
.tx-route{position:relative;border:1.5px solid var(--line-strong);border-radius:14px;margin:0 0 .6rem;background:#fff;}
.tx-rt{display:flex;align-items:center;gap:.7rem;min-height:58px;padding:.35rem 3.4rem .35rem .85rem;}
html[dir="rtl"] .tx-rt{padding:.35rem .85rem .35rem 3.4rem;}
.tx-route--one .tx-rt{padding-inline-end:.85rem;}
.tx-rt + .tx-rt-line + .tx-rt{border-top:1px solid var(--line);}
.tx-rt-ic{flex:none;display:grid;place-items:center;width:1.4rem;color:var(--clay);}
.tx-rt-ic svg{width:1.2rem;height:1.2rem;}
.tx-rt:first-child .tx-rt-ic svg{width:.95rem;height:.95rem;}
.tx-rt-f{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;cursor:text;}
.tx-rt-l{font:700 var(--fs-xs)/1 var(--font-ui);color:var(--ink-soft);}
.tx-rt-v{font:600 var(--fs-base)/1.3 var(--font-ui);color:var(--head);}
.tx-rt.is-fixed .tx-rt-f{cursor:default;}
.tx-rt-in{width:100%;border:0!important;box-shadow:none!important;padding:.1rem 0!important;background:transparent!important;
  font:600 var(--fs-base)/1.3 var(--font-ui);color:var(--head);border-radius:0!important;}
.tx-rt-in::placeholder{font-weight:500;color:#7A8789;}
.tx-rt-in:focus{outline:none;}
.tx-rt:focus-within{background:var(--clay-tint);border-radius:12px;}
.tx-rt.is-bad{background:rgba(198,40,40,.06);border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--err);}
/* the dotted line between the two points (under the icons) */
.tx-rt-line{position:absolute;inset-inline-start:calc(.85rem + .7rem - 1px);top:calc(29px + .7rem);height:calc(100% - 58px - 1.4rem + 2px);
  border-inline-start:2px dotted #9FB0B2;pointer-events:none;}
.tx-swap{position:absolute;inset-inline-end:.7rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:2.3rem;height:2.3rem;
  border-radius:50%;border:1.5px solid var(--line-strong);background:#fff;color:var(--clay-deep);cursor:pointer;
  transition:border-color .15s,background .15s,transform .3s var(--ease-out);}
.tx-swap svg{width:1.05rem;height:1.05rem;}
.tx-swap:hover{border-color:var(--clay);background:var(--clay-tint);}
.tx-route.flip .tx-swap{transform:translateY(-50%) rotate(180deg);}
.tx-swap:focus-visible{outline:2.5px solid var(--clay);outline-offset:2px;}

/* date + time: one row, two tappable halves */
.tx-when{position:relative;margin:0 0 .6rem;}
.tx-when-l{display:block;font:700 var(--fs-xs)/1 var(--font-ui);color:var(--ink-soft);margin:0 0 .35rem .15rem;}
.tx-when-b{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);border:1.5px solid var(--line-strong);border-radius:14px;overflow:hidden;}
.tx-when.is-bad .tx-when-b{border-color:var(--err);}
.tx-pick{display:flex;align-items:center;gap:.55rem;width:100%;min-height:52px;padding:.5rem .85rem;border:0;background:#fff;cursor:pointer;
  text-align:start;font:600 var(--fs-md)/1.25 var(--font-ui);color:var(--head);transition:background .15s;}
.tx-pick + .tx-pick{border-inline-start:1px solid var(--line);}
.tx-pick:hover{background:var(--stone);}
.tx-pick[aria-expanded="true"]{background:var(--clay-tint);}
.tx-pick.is-bad{background:rgba(198,40,40,.06);}
.tx-pick:focus-visible{outline:2.5px solid var(--clay);outline-offset:-3px;}
.tx-pick-ic{flex:none;display:grid;place-items:center;color:var(--clay);}
.tx-pick-ic svg{width:1.15rem;height:1.15rem;}
.tx-pick-v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tx-pick-v.is-empty{font-weight:500;color:#5C6B6E;}

/* passengers + luggage */
.tx-cnts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin:.2rem 0 .75rem;}
.tx-cnt-l{display:block;font:700 var(--fs-xs)/1 var(--font-ui);color:var(--ink-soft);margin:0 0 .35rem .15rem;}
.tx-cnt-b{display:flex;align-items:center;gap:.3rem;padding:.35rem .4rem;border:1.5px solid var(--line-strong);border-radius:14px;}
.tx-cnt-ic{display:none;}
.tx-cnt-b .gst-b{width:2.3rem;height:2.3rem;min-width:2.3rem;border:0;background:var(--plaster-2);}
.tx-cnt-b .gst-b:hover:not(:disabled){background:var(--clay-tint);}
.tx-num{flex:1;min-width:0;width:100%;border:0!important;box-shadow:none!important;background:transparent!important;text-align:center;padding:0!important;
  font:700 var(--fs-lg)/1 var(--font-ui);color:var(--head);-moz-appearance:textfield;}
.tx-num::-webkit-inner-spin-button,.tx-num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.tx-num:focus{outline:none;}
.tx-cnt-b:focus-within{border-color:var(--clay);box-shadow:0 0 0 3px rgba(8,126,139,.14);}
.tx-num.is-bad{color:var(--err);}

/* price */
.tx-sum{margin:0 0 .75rem;padding:.75rem .85rem;border-radius:14px;background:var(--stone);}
.tx-sum-in{display:flex;align-items:center;gap:.75rem;}
.tx-sum-ic{flex:none;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:#fff;color:var(--clay);}
.tx-sum-ic svg{width:1.3rem;height:1.3rem;}
.tx-sum-t{display:flex;flex-direction:column;min-width:0;}
.tx-sum-t b{font:700 var(--fs-md)/1.2 var(--font-ui);color:var(--head);}
.tx-sum-t span{font:500 var(--fs-sm)/1.3 var(--font-ui);color:var(--ink-soft);}
.tx-sum-p{margin-inline-start:auto;text-align:end;}
.tx-sum-p b{display:block;font:800 1.45rem/1 var(--font-ui);color:var(--head);letter-spacing:-.01em;}
.tx-sum-p span{font:600 var(--fs-xs)/1 var(--font-ui);color:var(--ink-soft);}
.tx-sum-note{margin:.5rem 0 0;font:500 var(--fs-sm)/1.4 var(--font-ui);color:var(--ink-soft);}
.tx-sum-note--small{font-size:var(--fs-xs);}
.tx-sum-note--quote{color:var(--head);}
.tx-big b{display:block;font:700 var(--fs-base)/1.3 var(--font-ui);color:var(--head);margin-bottom:.3rem;}
.tx-big p{font:400 var(--fs-md)/1.5 var(--font-ui);color:var(--ink-soft);margin-bottom:.7rem;}
.tx-big-b{display:flex;flex-wrap:wrap;gap:.45rem;}
.tx-big-b .btn{min-height:40px;padding:.5em 1em;font-size:var(--fs-sm);}

/* actions + reassurance */
.tx-go{width:100%;min-height:52px;font-size:var(--fs-base)!important;}
.tx-mini{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1rem;}
.tx-mini li{display:flex;align-items:center;gap:.35rem;font:600 var(--fs-xs)/1.3 var(--font-ui);color:var(--ok);}
.tx-mini svg{width:.95rem;height:.95rem;stroke-width:2.6;}
.tx-err{margin:0 0 .7rem;padding:.6rem .8rem;border-radius:12px;background:var(--err-tint);color:#9B1C1C;
  font:600 var(--fs-sm)/1.4 var(--font-ui);display:flex;gap:.5rem;align-items:flex-start;}
.tx-err::before{content:"!";flex:none;display:grid;place-items:center;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--err);color:#fff;font-weight:800;font-size:.75rem;}
.tx-err[hidden]{display:none!important;}

/* step 2 */
.tx-back{display:inline-flex;align-items:center;gap:.35rem;margin:0 0 .6rem;padding:.3rem .5rem .3rem .2rem;border:0;background:none;cursor:pointer;
  font:700 var(--fs-sm)/1 var(--font-ui);color:var(--clay-deep);border-radius:8px;}
.tx-back svg{width:1.05rem;height:1.05rem;}
html[dir="rtl"] .tx-back svg{transform:scaleX(-1);}
.tx-back:hover{background:var(--clay-tint);}
.tx-s2-head h3{font-size:1.3rem!important;margin:0 0 .2rem;}
.tx-sub{margin:0 0 .8rem;font:400 var(--fs-sm)/1.5 var(--font-ui);color:var(--ink-soft);}
.tx-recap{margin:0 0 .9rem;padding:.8rem .9rem;border-radius:14px;background:var(--stone);border:1px solid var(--line);}
.tx-recap-r{display:flex;align-items:center;gap:.6rem;font:600 var(--fs-md)/1.35 var(--font-ui);color:var(--head);}
.tx-recap-r + .tx-recap-r{margin-top:.35rem;}
.tx-rc-dot{flex:none;width:.6rem;height:.6rem;margin:0 .2rem;border-radius:50%;border:2.5px solid var(--clay);}
.tx-rc-pin{flex:none;display:grid;place-items:center;color:var(--clay);}
.tx-rc-pin svg{width:1rem;height:1rem;}
.tx-recap-m{margin:.45rem 0 0;font:500 var(--fs-sm)/1.4 var(--font-ui);color:var(--ink-soft);}
.tx-recap-p{margin:.5rem 0 0;padding-top:.5rem;border-top:1px solid var(--line);font:500 var(--fs-sm)/1 var(--font-ui);color:var(--ink-soft);}
.tx-recap-p b{font:800 1.2rem/1 var(--font-ui);color:var(--head);}
.tx-f{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.7rem;min-width:0;}
.tx-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.7rem;}
.tx-lab{font:700 var(--fs-xs)/1.2 var(--font-ui);color:var(--ink-soft);}
.tx-in{width:100%;min-height:48px;padding:.7rem .85rem;border:1.5px solid var(--line-strong);border-radius:12px;background:#fff;
  font:500 var(--fs-base)/1.35 var(--font-ui);color:var(--ink);}
textarea.tx-in{resize:vertical;min-height:4.8rem;}
.tx-signed{margin:0 0 .7rem;padding:.55rem .75rem;border-radius:10px;background:var(--ok-tint);color:#14603A;font:600 var(--fs-sm)/1.4 var(--font-ui);}
.tx-signed[hidden]{display:none!important;}
.tx-auth{margin:0 0 .8rem;padding:.8rem .9rem;border:1.5px dashed rgba(8,126,139,.45);border-radius:14px;background:var(--clay-tint);}
.tx-auth[hidden]{display:none!important;}
.tx-auth b{font:700 var(--fs-md)/1.3 var(--font-ui);color:var(--head);}
.tx-auth p{margin:.3rem 0 .7rem;font:400 var(--fs-sm)/1.45 var(--font-ui);color:var(--ink-soft);}
.tx-auth-b{display:flex;flex-wrap:wrap;gap:.45rem;}
.tx-pay{margin:.6rem 0 0;font:500 var(--fs-xs)/1.45 var(--font-ui);color:var(--ink-soft);text-align:center;}

/* popovers: calendar + time chips */
.tx-pop{position:absolute;top:calc(100% + .35rem);inset-inline-start:0;z-index:70;width:min(21rem,calc(100vw - 2.5rem));
  padding:.9rem;background:#fff;border-radius:18px;box-shadow:0 26px 54px -18px rgba(23,37,42,.4),0 0 0 1px rgba(23,37,42,.06);}
.tx-pop--time{inset-inline-start:auto;inset-inline-end:0;width:min(21rem,calc(100vw - 2.5rem));}
.tx-pop[hidden]{display:none!important;}
.tx-pop .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;}
.tx-pop .cal-mon{font:700 var(--fs-base)/1 var(--font-ui);color:var(--head);text-transform:capitalize;}
.tx-pop .cal-nav{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;
  font-size:1.2rem;line-height:1;color:var(--ink);}
.tx-pop .cal-nav:disabled{opacity:.3;cursor:default;}
.tx-pop .cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;}
.tx-pop .cal-dow{text-align:center;font:700 .68rem/1 var(--font-ui);color:var(--ink-soft);padding:.3rem 0 .4rem;text-transform:capitalize;}
.tx-pop .cal-d{position:relative;aspect-ratio:1;border:0;border-radius:50%;background:none;cursor:pointer;font:600 var(--fs-md)/1 var(--font-ui);color:var(--ink);}
.tx-pop .cal-d.pad{visibility:hidden;}
.tx-pop .cal-d.today::after{content:"";position:absolute;left:50%;bottom:14%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--coral);}
.tx-pop .cal-d.on{background:var(--clay)!important;color:#fff!important;}
.tx-pop .cal-d.on.today::after{background:#fff;}
.tx-t-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding-bottom:.55rem;border-bottom:1px solid var(--line);}
.tx-t-now{font:800 1.5rem/1 var(--font-ui);color:var(--head);font-variant-numeric:tabular-nums;}
.tx-t-acts{display:flex;align-items:center;gap:.5rem;}
.tx-t-mini{border:0;background:none;padding:.35rem .2rem;cursor:pointer;font:700 var(--fs-sm)/1 var(--font-ui);color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.tx-t-ok{border:0;border-radius:999px;padding:.5rem 1rem;background:var(--clay);color:#fff;cursor:pointer;font:700 var(--fs-sm)/1 var(--font-ui);}
.tx-t-ok:hover{background:var(--clay-deep);}
.tx-t-lab{margin:.65rem 0 .4rem;font:700 var(--fs-xs)/1 var(--font-ui);color:var(--ink-soft);}
.tx-t-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.3rem;}
.tx-t-grid--m{grid-template-columns:repeat(4,minmax(0,1fr));}
.tx-t-chip{min-height:38px;border:1.5px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;
  font:600 var(--fs-md)/1 var(--font-ui);color:var(--ink);font-variant-numeric:tabular-nums;}
.tx-t-chip:hover{border-color:var(--clay);color:var(--clay-deep);background:var(--clay-tint);}

/* confirmation */
.tx-done{text-align:center;}
.tx-done-ic{display:grid;place-items:center;width:3.4rem;height:3.4rem;margin:0 auto .9rem;border-radius:50%;background:var(--ok-tint);color:var(--ok);}
.tx-done-ic svg{width:1.7rem;height:1.7rem;stroke-width:3;}
.tx-done h3{font-size:1.4rem!important;}
.tx-done-p{font:400 var(--fs-md)/1.5 var(--font-ui);color:var(--ink-soft);margin:.3rem 0 .9rem;}
.tx-ref{display:inline-block;padding:.5rem 1rem;border-radius:999px;background:var(--stone);font:700 var(--fs-md)/1 var(--font-ui);color:var(--head);margin-bottom:.9rem;}
.tx-done-sum{padding:.75rem .9rem;border-radius:12px;background:var(--stone);font:500 var(--fs-sm)/1.5 var(--font-ui);color:var(--ink);margin-bottom:1rem;}
.tx-done-b{display:flex;flex-direction:column;gap:.5rem;}

/* how it works */
.tx-how-h{font-size:clamp(1.5rem,2.6vw,2rem)!important;margin:0 0 1rem;}
.tx-how{list-style:none;margin:0 0 clamp(1.75rem,4vw,2.75rem);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;counter-reset:none;}
.tx-how li{position:relative;padding:1.1rem 1.15rem 1.15rem;border-radius:18px;background:#fff;border:1px solid var(--line);
  box-shadow:0 12px 30px -24px rgba(15,61,68,.45);}
.tx-how-n{position:absolute;top:1rem;inset-inline-end:1rem;font:800 .8rem/1 var(--font-ui);color:var(--ink-soft);opacity:.6;}
.tx-how-ic{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;background:var(--clay-tint);color:var(--clay);margin-bottom:.7rem;}
.tx-how li:nth-child(2) .tx-how-ic{background:var(--sand);color:#8A5A1C;}
.tx-how-ic svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.tx-how b{display:block;font:700 var(--fs-base)/1.3 var(--font-ui);color:var(--head);margin-bottom:.25rem;}
.tx-how p{margin:0;font:400 var(--fs-sm)/1.5 var(--font-ui);color:var(--ink-soft);}
@media (max-width:760px){.tx-how{grid-template-columns:minmax(0,1fr);gap:.6rem;}.tx-how li{display:grid;grid-template-columns:auto 1fr;column-gap:.8rem;}
  .tx-how-ic{grid-row:1 / span 2;margin:0;}}

/* phones */
.tx-sticky{display:none;}
@media (max-width:860px){
  .tx-row{grid-template-columns:minmax(0,1fr);gap:0;}
  .tx-pop,.tx-pop--time{position:fixed;inset:auto .75rem .75rem;top:auto;width:auto;max-height:78vh;overflow:auto;z-index:200;
    border-radius:20px;box-shadow:0 -14px 50px rgba(12,34,38,.35);}
  .tx-t-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;}
  .tx-t-chip{min-height:46px;font-size:var(--fs-base);}
  .tx-sticky{display:flex;align-items:center;justify-content:space-between;gap:.8rem;position:fixed;inset-inline:0;bottom:0;z-index:120;
    padding:.65rem .9rem calc(.65rem + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(23,37,42,.1);
    transition:transform .25s var(--ease-out);}
  .tx-sticky.is-off{transform:translateY(110%);}
  .tx-sticky[hidden]{display:none!important;}
  .tx-sticky-p{font:800 1.3rem/1 var(--font-ui);color:var(--head);}
  .tx-sticky .btn{flex:1 1 auto;max-width:15rem;}
  .mcta{display:none!important;}
}
@media (max-width:400px){.tx-tab{flex-direction:column;gap:.15rem;font-size:.75rem;}}
@media (prefers-reduced-motion:reduce){.tx-swap,.tx-sticky,.tx-tab,.tx-pick{transition:none;}}

/* fixes after the first render check */
.tx .tx-pop .cal-head{position:static!important;inset:auto!important;display:flex!important;align-items:center;justify-content:space-between;gap:.4rem;margin:0 0 .5rem!important;}
.tx .tx-pop .cal-mon{flex:1;text-align:center;}
.tx .tx-pop .cal-wrap{position:static;}
html .tx .tx-rt-in[aria-invalid="true"],html .tx .tx-num[aria-invalid="true"]{border:0!important;box-shadow:none!important;}
html .tx .tx-pick[aria-invalid="true"]{border-color:transparent!important;box-shadow:none!important;}
.tx-hero{z-index:5;}  /* its own stacking context: lift it so the phone date/time sheets cover the sections below */

/* arrived from the homepage search */
.tx-fromsearch{display:flex;align-items:center;gap:.45rem;margin:0 0 .75rem;padding:.55rem .75rem;border-radius:12px;
  background:var(--ok-tint);color:#14603A;font:600 var(--fs-sm)/1.35 var(--font-ui);}
.tx-fromsearch svg{flex:none;width:1rem;height:1rem;stroke-width:2.6;}
@keyframes txPulse{0%{box-shadow:inset 0 0 0 2px var(--clay),0 0 0 0 rgba(8,126,139,.35)}70%{box-shadow:inset 0 0 0 2px var(--clay),0 0 0 10px rgba(8,126,139,0)}100%{box-shadow:inset 0 0 0 2px var(--clay),0 0 0 0 rgba(8,126,139,0)}}
.tx-pulse{animation:txPulse 1.2s var(--ease-out) 2;border-radius:12px;}
@media (prefers-reduced-motion:reduce){.tx-pulse{animation:none;box-shadow:inset 0 0 0 2px var(--clay);}}

/* vehicle choice (2026-09-29: the vehicle pages were merged into the tool) */
.tx-veh{margin:0 0 .9rem;}
.tx-veh .tx-cnt-l{display:block;margin-bottom:.45rem;}
.tx-veh-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem;}
.tx-veh-b{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;min-width:0;min-height:78px;padding:.6rem .6rem .55rem;border:1.5px solid var(--line,#E5E8E6);
  border-radius:14px;background:#fff;color:var(--ink,#17252A);text-align:start;cursor:pointer;transition:border-color .15s,background-color .15s;}
.tx-veh-b:hover:not(:disabled){border-color:rgba(8,126,139,.5);}
.tx-veh-b.on{border-color:var(--clay,#087E8B);background:var(--clay-tint,#E4F2F3);box-shadow:inset 0 0 0 1px var(--clay,#087E8B);}
.tx-veh-b:disabled{opacity:.42;cursor:not-allowed;}
.tx-veh-b:focus-visible{outline:2.5px solid var(--clay-deep,#066570);outline-offset:2px;}
.tx-veh-ic svg{width:1.35rem;height:1.35rem;fill:none;stroke:var(--clay,#087E8B);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.tx-veh-b b{font:700 .8rem/1.25 var(--font-ui,'Plus Jakarta Sans',sans-serif);}
.tx-veh-b small{font:500 .72rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--ink-soft,#5C6B6E);}
.tx-veh-b em{margin-top:auto;font:800 .9rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);font-style:normal;color:var(--head,#17252A);}
.tx-hint{display:block;margin-top:.3rem;font:500 .75rem/1.4 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--ink-soft,#5C6B6E);}
@media (max-width:520px){.tx-veh-row{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (prefers-reduced-motion:reduce){.tx-veh-b{transition:none;}}
/* private trip: price agreed with the guest (2026-09-29) */
.tx-sum-p.is-quote b{font-size:1.05rem;white-space:nowrap;}

/* ---- tighter hero (owner 2026-10-18: "do same to transfers", as on the wellness page) ---- */
.tx-hero:not(.sp-hero){padding:clamp(.75rem,1.6vw,1.25rem) 0 clamp(1.25rem,2.4vw,1.75rem)!important;}
@media (min-width:901px){
  .tx-hero:not(.sp-hero) .tx-hero-in{align-items:start!important;}
  .tx-hero:not(.sp-hero) .tx-hero-copy{padding-top:clamp(.5rem,1.6vw,1.5rem)!important;}
}
@media (max-width:900px){
  .tx-hero:not(.sp-hero) .tx-hero-in{gap:1rem!important;}
  .tx-hero:not(.sp-hero) .tx-hero-copy :is(h1,h2){margin:.2rem 0 .45rem!important;}
  .tx-hero:not(.sp-hero) .tx-points{margin-top:.75rem!important;}
}

/* car rental (2026-10-19): 4 tabs fit on one row, car type tiles, handover note */
.tx-tab{text-align:center;line-height:1.15;}
@media (max-width:520px){.tx-tab{flex-direction:column;gap:.15rem;font-size:.72rem;padding:.4rem .2rem;}}
.tx-car-row{grid-template-columns:repeat(3,minmax(0,1fr));}
.tx-car-row .tx-veh-b em{font-style:normal;font-weight:500;font-size:.72rem;line-height:1.25;color:var(--ink-soft);white-space:normal;}
.tx-hand{margin:.2rem 0 .85rem;}
.tx-hand .tx-seg2--3 .tx-seg2-b b{white-space:normal;text-align:center;}
.tx-hand .tx-route{margin:.65rem 0 0;}
.tx-hand-p{margin:.55rem .2rem 0;font-size:.82rem;line-height:1.45;color:var(--ink-soft);}

/* ---------- airport-transfer photo on phones (2026-10-21): the tall header shows a narrow slice of the photo, so it is
   placed on the "AEROPORT AGADIR AL MASSIRA" sign instead of the palm trees ---------- */
@media (max-width:700px){.tx-hero:not(.sp-hero) .tx-hero-bg img{object-position:22% 28%;}}

/* ---------- wider transfer card, every word readable (owner, 2026-10-21) ----------
   Transfers page only (the spa card has its own widths in spa-tool.css). The card was 27rem: tab labels broke into 2-3
   lines beside their icons, "Ajouter une heure" was cut off and the vehicle names wrapped. */
@media (min-width:901px){.tx-hero:not(.sp-hero) .tx-hero-in{grid-template-columns:minmax(0,1fr) minmax(0,31rem);}}
@media (min-width:1101px){.tx-hero:not(.sp-hero) .tx-hero-in{grid-template-columns:minmax(0,1fr) minmax(0,35rem);}}
/* tabs: the icon above the words, so a label gets the whole width of its tab */
#txTool .tx-tab{flex-direction:column;gap:.25rem;min-height:58px;padding:.5rem .3rem;font-size:.82rem;line-height:1.2;text-wrap:balance;}
@media (max-width:520px){#txTool .tx-tab{font-size:.74rem;min-height:54px;padding:.45rem .2rem;}}
/* date and time: two equal halves */
#txTool .tx-when-b{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
/* vehicles: two per row, icon - name - price on one line (phones keep their 2 stacked columns) */
@media (min-width:521px){
  #txTool .tx-veh-row:not(.tx-car-row){grid-template-columns:repeat(2,minmax(0,1fr));}
  #txTool .tx-veh-row:not(.tx-car-row) .tx-veh-b{flex-direction:row;align-items:center;gap:.6rem;min-height:54px;padding:.55rem .8rem;}
  #txTool .tx-veh-row:not(.tx-car-row) .tx-veh-b b{flex:1 1 auto;min-width:0;font-size:.86rem;}
  #txTool .tx-veh-row:not(.tx-car-row) .tx-veh-b em{margin:0;margin-inline-start:auto;}
}
#txTool .tx-veh-b b{text-wrap:balance;}
/* small laptops: the card is 31rem, so the vehicle icon gives its room to the name */
@media (min-width:901px) and (max-width:1100px){#txTool .tx-veh-row:not(.tx-car-row) .tx-veh-ic{display:none;}}
/* phones: date and time each on their own line ("Ajouter une heure", "Uhrzeit hinzufügen" were cut off) */
@media (max-width:520px){#txTool .tx-when-b{grid-template-columns:minmax(0,1fr);}#txTool .tx-pick + .tx-pick{border-inline-start:0;border-top:1px solid var(--line);}}
/* the airport's name may take 2 lines on small phones instead of being cut */
#txTool .tx-rt-v{white-space:normal;overflow:visible;text-overflow:clip;text-wrap:balance;}
/* phones: the swap button sits on the line between the two rows, above the second row's input, so that row can use the
   full width (the hint "Hôtel, appartement ou adresse" was cut off) */
@media (max-width:520px){#txTool .tx-route .tx-rt + .tx-rt-line + .tx-rt{padding-inline-end:.85rem;}}

/* ---------- car rental card, tidied (owner 2026-10-26: "too messy, not good for a perfect UX") ----------
   Three numbered steps (1 car, 2 where, 3 dates) with clear space between them; the pickup choice is a list where each
   row says what it means (no floating grey line), the delivery address opens under its own row; pick-up and return
   share one box; the price note no longer repeats the car chosen above. */
.tx-car{margin:0 0 .9rem;}
.tx-csec{display:flex;align-items:center;gap:.5rem;margin:1.15rem 0 .55rem;font:700 .875rem/1.25 var(--font-ui);color:var(--head);}
.tx-car > .tx-csec:first-child{margin-top:.35rem;}
.tx-csec-n{flex:none;display:grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;background:var(--clay-tint,#E4F2F3);
  color:var(--clay-deep,#066570);font:800 .75rem/1 var(--font-ui);}
#txTool .tx-car-row .tx-veh-b{min-height:0;gap:.2rem;padding:.65rem .7rem;}
/* 2 where */
.tx-hlist{border:1.5px solid var(--line-strong,#D5DCDB);border-radius:16px;overflow:hidden;background:#fff;}
.tx-ho{display:flex;align-items:center;gap:.75rem;width:100%;min-height:62px;padding:.6rem .85rem;border:0;background:#fff;
  text-align:start;cursor:pointer;color:var(--head);transition:background-color .15s;}
.tx-ho + .tx-ho,.tx-ho-addr + .tx-ho{border-top:1px solid var(--line,#E5E8E6);}
.tx-ho:hover:not(.on){background:var(--stone,#F7F8F6);}
.tx-ho:focus-visible{outline:2.5px solid var(--clay);outline-offset:-3px;}
.tx-ho-ic{flex:none;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:12px;background:var(--stone,#F7F8F6);color:var(--clay,#087E8B);}
.tx-ho-ic svg{width:1.2rem;height:1.2rem;}
.tx-ho-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.12rem;}
.tx-ho-t b{font:700 .9375rem/1.25 var(--font-ui);}
.tx-ho-t small{font:500 .8125rem/1.35 var(--font-ui);color:var(--ink-soft,#5C6B6E);}
.tx-ho-r{flex:none;width:1.25rem;height:1.25rem;border-radius:50%;border:2px solid var(--line-strong,#C9D2D1);background:#fff;transition:border-color .15s,box-shadow .15s;}
.tx-ho.on{background:var(--clay-tint,#E4F2F3);}
.tx-ho.on .tx-ho-ic{background:#fff;}
.tx-ho.on .tx-ho-r{border-color:var(--clay,#087E8B);box-shadow:inset 0 0 0 3.5px #fff;background:var(--clay,#087E8B);}
.tx-ho-addr{padding:0 .85rem .85rem;background:var(--clay-tint,#E4F2F3);}
.tx-ho-addr .tx-route{margin:0;}
/* 3 dates: one box, a row each for pick-up and return */
.tx-cdates{border:1.5px solid var(--line-strong,#D5DCDB);border-radius:16px;background:#fff;}
.tx-cdates .tx-when{display:grid;grid-template-columns:minmax(6.5rem,auto) minmax(0,1fr);align-items:center;gap:.5rem;margin:0;padding:.35rem .4rem .35rem .85rem;}
html[dir="rtl"] .tx-cdates .tx-when{padding:.35rem .85rem .35rem .4rem;}
.tx-cdates .tx-when + .tx-when{border-top:1px solid var(--line,#E5E8E6);}
.tx-cdates .tx-when-l{margin:0;font:600 .875rem/1.25 var(--font-ui);color:var(--head);}
#txTool .tx-cdates .tx-when-b{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);border:0;border-radius:12px;}
.tx-cdates .tx-pick{min-height:46px;padding:.45rem .7rem;border-radius:10px;}
.tx-cdates .tx-pick + .tx-pick{border-inline-start:1px solid var(--line,#E5E8E6);border-radius:0 10px 10px 0;}
html[dir="rtl"] .tx-cdates .tx-pick + .tx-pick{border-radius:10px 0 0 10px;}
.tx-cdates .tx-when.is-bad{box-shadow:inset 0 0 0 1.5px var(--err);border-radius:14px;}
/* the price note */
.tx-csum{display:flex;align-items:flex-start;gap:.6rem;}
.tx-csum-ic{flex:none;display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:#fff;color:var(--ok,#1B7A4B);margin-top:.05rem;}
.tx-csum-ic svg{width:.9rem;height:.9rem;stroke-width:2.6;}
.tx-csum-t{flex:1 1 auto;min-width:0;margin:0;font:500 .8125rem/1.45 var(--font-ui);color:var(--ink-soft,#5C6B6E);}
.tx-csum-t b{color:var(--head);font-weight:700;}
.tx-csum-d{flex:none;align-self:center;padding:.3rem .65rem;border-radius:999px;background:#fff;font:700 .8125rem/1 var(--font-ui);color:var(--clay-deep,#066570);white-space:nowrap;}
/* phones: label above, date | time side by side (short hints "Date" / "Time", so nothing is cut) */
@media (max-width:520px){
  .tx-cdates .tx-when{grid-template-columns:minmax(0,1fr);gap:.25rem;padding:.6rem .45rem .45rem;}
  .tx-cdates .tx-when-l{padding-inline-start:.35rem;font-size:.8125rem;}
  #txTool .tx-cdates .tx-when-b{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  #txTool .tx-cdates .tx-pick + .tx-pick{border-top:0;border-inline-start:1px solid var(--line,#E5E8E6);}
  .tx-ho{min-height:58px;padding:.55rem .75rem;gap:.65rem;}
  .tx-ho-ic{width:2.2rem;height:2.2rem;}
}
@media (prefers-reduced-motion:reduce){.tx-ho,.tx-ho-r{transition:none;}}
/* the address suggestions open over the rows below, so the list may not clip; its rows round their own corners */
.tx-hlist{overflow:visible;}
.tx-hlist > :first-child{border-radius:14px 14px 0 0;}
.tx-hlist > :last-child{border-radius:0 0 14px 14px;}
/* phones: the "4 days" pill goes under the note instead of squeezing it */
@media (max-width:520px){
  .tx-csum{flex-wrap:wrap;}
  .tx-csum-t{flex-basis:calc(100% - 2.3rem);}
  .tx-csum-d{margin-inline-start:2.2rem;}
}
/* ---------- /car rental card, tidied ---------- */

/* ==== review 2026-10-30: the error message right under the field that needs it ==== */
.tx-ferr{display:flex;align-items:flex-start;gap:.4rem;margin:.4rem .1rem .75rem;font:600 .8125rem/1.35 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:#B42318;}
.tx-ferr::before{content:"!";flex:none;display:grid;place-items:center;width:1.05rem;height:1.05rem;margin-top:.05rem;border-radius:50%;background:#B42318;color:#fff;font-size:.7rem;font-weight:800;}
html[lang="ar"] .tx-ferr{font-family:'Tajawal',sans-serif;font-size:.875rem;}
@media (prefers-reduced-motion:no-preference){.tx-ferr{animation:txFerr .25s ease-out;}@keyframes txFerr{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}}