#main .contactcard .actions{margin-top:24px;padding-top:8px}#main .contactcard .phone{margin-top:20px}#main .info-contacts .quick-actions{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}.contact-privacy{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}.contact-privacy .textlink{font-size:.8rem;white-space:normal;text-align:left;line-height:1.45}
:is(#main,#modal) .day-controls .day-input-shell{min-height:44px;max-width:240px}:is(#main,#modal) .day-controls .day-input-shell>input{height:42px;min-height:42px;padding:8px 32px;text-align:center;line-height:normal;font-size:16px;font-variant-numeric:tabular-nums}:is(#main,#modal) .day-controls .day-input-shell>input::-webkit-date-and-time-value{text-align:center;margin:0;width:100%}:is(#main,#modal) .day-controls .day-input-shell>input::-webkit-datetime-edit{display:inline-flex;justify-content:center;text-align:center;padding:0}:is(#main,#modal) .day-controls .day-input-shell>.icon{left:12px;width:16px;height:16px}:is(#main,#modal) .day-controls .day-input-shell>input::-webkit-calendar-picker-indicator{right:10px;width:16px}
@media(max-width:760px){#main .contactcard .actions{margin-top:22px;padding-top:6px}.contact-privacy{flex-direction:column;align-items:flex-start;gap:14px}:is(#main,#modal) .day-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}:is(#main,#modal) .day-controls .day-length-field{grid-column:1/-1}:is(#main,#modal) .day-controls .day-field{min-width:0;width:auto}:is(#main,#modal) .day-controls .day-input-shell{max-width:none;width:100%}:is(#main,#modal) .day-controls .day-input-shell>input{padding-inline:25px}:is(#main,#modal) .day-controls .day-input-shell>.icon{left:8px;width:14px;height:14px}:is(#main,#modal) .day-controls .day-input-shell>input::-webkit-calendar-picker-indicator{right:7px;width:13px}}

/* Native pickers stay usable; a separate value avoids Safari's uneven native layout. */
/* One consistent control row; formatted values sit above accessible native pickers. */
:is(#main,#modal) .day-controls{display:grid;grid-template-columns:minmax(260px,1.4fr) minmax(180px,1fr) minmax(150px,.8fr);gap:14px;align-items:end;max-width:960px}
:is(#main,#modal) .day-controls .day-length{height:54px;min-height:54px}
:is(#main,#modal) .day-controls .day-length>.chip{height:44px;min-height:44px;max-height:none}
:is(#main,#modal) .day-controls .day-value-control{width:100%;max-width:none;height:54px;min-height:54px;display:grid;place-items:center;position:relative;border-radius:100px;background:white;border:1px solid #d8cfe4}
:is(#main,#modal) .day-controls .day-value-display{position:relative;display:block;text-align:center;font-size:16px;font-weight:600;color:var(--portal-ink);line-height:1.2;font-variant-numeric:tabular-nums;pointer-events:none;padding:0 42px}
:is(#main,#modal) .day-controls .day-value-control:after{content:'';position:absolute;right:20px;top:50%;width:6px;height:6px;border-right:1.5px solid #60566f;border-bottom:1.5px solid #60566f;transform:translateY(-65%) rotate(45deg);pointer-events:none}
:is(#main,#modal) .day-controls .day-value-control>input{position:absolute;inset:0;width:100%;height:100%;min-height:0;opacity:0;padding:0;cursor:pointer;z-index:1}
:is(#main,#modal) .day-controls .day-value-control>input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;opacity:0}
:is(#main,#modal) .day-controls .day-value-control:focus-within{outline:3px solid #54852b;outline-offset:3px}
#main .day-controls-length-only{display:block;max-width:360px}
#modal .day-controls{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
#modal .day-controls .day-length-field{grid-column:1/-1}
@media(max-width:760px){:is(#main,#modal) .day-controls{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:none;gap:12px}:is(#main,#modal) .day-controls .day-length-field{grid-column:1/-1}:is(#main,#modal) .day-controls .day-value-display{padding-inline:28px}#main .day-controls-length-only{display:block;max-width:none}}
@media(max-width:420px){:is(#main,#modal) .day-controls{grid-template-columns:minmax(0,1fr)}:is(#main,#modal) .day-controls .day-length-field{grid-column:1}}
#main .contactcard .actions>.contact-spa-booking{background:transparent;color:var(--portal-ink);border:1px solid var(--portal-line,#d8dfe0);box-shadow:none}

/* Anchor contact actions to the same bottom bar on every card. */
#main .contactcard{display:flex;flex-direction:column}
#main .contactcard .actions{margin-top:auto;padding-top:20px}
#main .contactcard>.flex{margin-bottom:20px}
#main .contactcard .phone{margin-top:0;margin-bottom:20px}

#main .contact-privacy{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch}
#main .contact-privacy>.btn{width:100%;min-width:0;white-space:normal;text-align:center;justify-content:center;font-size:.8rem;line-height:1.4;padding:12px}
@media(max-width:760px){#main .contact-privacy{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Selected date and start time share the selected trip-length treatment. */
:is(#main,#modal) .day-controls .day-value-control{background:var(--portal-ink);border-color:var(--portal-ink)}
:is(#main,#modal) .day-controls .day-value-control .day-value-display{color:#fff}
:is(#main,#modal) .day-controls .day-value-control:after{border-color:#fff}