/* Agadir Stays — spa booking card on wellness.html (2026-09-29).
   The card, hero, date/time pickers, total, step 2, sticky bar and "How it works" all come from
   transport-tool.css (same .tx-* classes, so both booking tools look like one product). This file only
   adds the treatment list and the few spa-only details. Loaded after transport-tool.css. */

.sp-hero .tx-hero-bg img{object-position:50% 55%;}
.sp-hero .tx-hero-in{align-items:start;}
.sp-hero .tx-hero-copy{padding-top:clamp(0rem,4vw,3rem);}
@media (min-width:901px){.sp-hero .tx-hero-copy{position:sticky;top:6.5rem;}}

/* group tabs: count of chosen treatments */
.sp .tx-tab{position:relative;}
.spl-badge{display:inline-grid;place-items:center;min-width:1.15rem;height:1.15rem;padding:0 .3rem;border-radius:999px;
  background:var(--clay);color:#fff;font:800 .68rem/1 var(--font-ui);}

/* the treatment list (scrolls inside the card, fades at the bottom) */
.spl{display:flex;flex-direction:column;gap:.4rem;max-height:19.5rem;overflow-y:auto;overscroll-behavior:contain;margin:0 0 .85rem;
  padding:.1rem .2rem .9rem .1rem;scrollbar-width:thin;scrollbar-color:#C9D3D4 transparent;
  -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);mask-image:linear-gradient(180deg,#000 88%,transparent);}
.spl-row{display:flex;align-items:center;gap:.7rem;width:100%;min-height:56px;padding:.55rem .6rem .55rem .85rem;border:1.5px solid var(--line);
  border-radius:14px;background:#fff;cursor:pointer;text-align:start;transition:border-color .15s,background-color .15s;}
.spl-row:hover{border-color:rgba(8,126,139,.45);}
.spl-row:focus-visible{outline:2.5px solid var(--clay);outline-offset:1px;}
.spl-row.on{border-color:var(--clay);background:var(--clay-tint);}
.spl-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:.12rem;}
.spl-t b{font:600 var(--fs-md)/1.25 var(--font-ui);color:var(--head);}
.spl-t small{font:500 var(--fs-xs)/1.35 var(--font-ui);color:var(--ink-soft);}
.spl-p{font:800 var(--fs-md)/1 var(--font-ui);color:var(--head);white-space:nowrap;font-variant-numeric:tabular-nums;}
.spl-b{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--plaster-2);color:var(--clay-deep);
  transition:background-color .15s,color .15s,transform .15s;}
.spl-b svg{width:1rem;height:1rem;stroke-width:2.4;}
.spl-row.on .spl-b{background:var(--clay);color:#fff;}
.spl-row:active .spl-b{transform:scale(.9);}

/* people: counter + a short hint beside it */
.spl-cnts{grid-template-columns:minmax(0,11rem) minmax(0,1fr);align-items:end;}
.spl-hint{margin:0 0 .5rem;font:500 var(--fs-xs)/1.4 var(--font-ui);color:var(--ink-soft);}

/* summary: chosen names on one line */
.spl-names{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* step 2 recap: one row per treatment */
.spl-rc{justify-content:space-between;}
.spl-rc small{font:500 var(--fs-xs)/1 var(--font-ui);color:var(--ink-soft);}
.spl-rc b{font:700 var(--fs-md)/1 var(--font-ui);}

@media (max-width:900px){
  .spl{max-height:21rem;}
}
@media (max-width:420px){.spl-cnts{grid-template-columns:minmax(0,1fr);}.spl-hint{margin:-.2rem 0 0;}}
@media (prefers-reduced-motion:reduce){.spl-row,.spl-b{transition:none;}}

/* fixes after the first render check */
.sp .tx-tab{white-space:nowrap;padding-inline:.35rem;}
.sp .tx-tab .spl-badge{position:absolute;top:-5px;inset-inline-end:-3px;box-shadow:0 0 0 2px #fff;}
.sp .tx-sum-p span{white-space:nowrap;}
@media (max-width:400px){.sp .tx-tab{white-space:normal;}}

/* wider card on computers (owner, 2026-10-04: "Hammam & body" was squeezed against the edge of its tab) */
@media (min-width:901px){.sp-hero .tx-hero-in{grid-template-columns:minmax(0,1fr) minmax(0,30rem);}}
@media (min-width:1101px){.sp-hero .tx-hero-in{grid-template-columns:minmax(0,1fr) minmax(0,33rem);}}
@media (min-width:901px){.sp .tx-tab{gap:.45rem;padding-inline:.6rem;}}
/* tabs sized by their label (the long "Hammam & body" / "Hammam y cuerpo" gets the room it needs), spare space shared */
.sp .tx-tabs{display:flex;}
.sp .tx-tabs .tx-tab{flex:1 1 auto;min-width:0;}

/* ---- tighter hero (owner 2026-10-18: "reduce the gaps in wellness") ---- */
.sp-hero{padding:clamp(.75rem,1.6vw,1.25rem) 0 clamp(1.25rem,2.4vw,1.75rem)!important;}
.sp-hero .tx-hero-copy{padding-top:clamp(0rem,2vw,1.5rem)!important;}
/* the hero is overflow:hidden, so a sticky copy was pinned 92px below the hero top, not to the screen: static now */
@media (min-width:901px){.sp-hero .tx-hero-copy{position:static!important;padding-top:clamp(.5rem,1.6vw,1.5rem)!important;}}
@media (max-width:900px){
  .sp-hero .tx-hero-in{gap:1rem!important;}
  .sp-hero .tx-hero-copy :is(h1,h2){margin:.2rem 0 .45rem!important;}
  .sp-hero .tx-points{margin-top:.75rem!important;}
}