/*
 * Shared UI pieces (core/inc/ui.php): the slider, the "Add to Cart" button and
 * sticky side cards. Coloured by the theme's --prt-* tokens; a theme restyles
 * them with its own selectors.
 */

/* ---- Slider: data-prt-slider on a track; its children are the slides. ---- */
[data-prt-slider] {
	--prt-slides: 1;
	--prt-gap: 22px;
	display: flex;
	gap: var(--prt-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
[data-prt-slider]::-webkit-scrollbar { display: none; }
[data-prt-slider] > * {
	flex: 0 0 calc((100% - (var(--prt-slides) - 1) * var(--prt-gap)) / var(--prt-slides));
	min-width: 0;
	box-sizing: border-box;
	scroll-snap-align: start;
}
[data-prt-slider]:focus-visible { outline: 3px solid var(--prt-primary-text, var(--prt-primary)); outline-offset: 4px; }
.prt-slider__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.prt-slider__arrow, .prt-slider__pause {
	display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
	border-radius: 50%; border: 1px solid var(--prt-line); background: var(--prt-surface); color: var(--prt-ink);
	cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); transition: background .2s, color .2s, border-color .2s;
}
/* Hover only where a pointer hovers (a tapped arrow kept the filled look on phones) and never on a disabled arrow (round 11). */
@media (hover: hover) {
.prt-slider__arrow:not(:disabled):hover, .prt-slider__pause:hover { background: var(--prt-primary-ground, var(--prt-primary)); border-color: var(--prt-primary-ground, var(--prt-primary)); color: var(--prt-primary-ink); }
}
.prt-slider__arrow svg, .prt-slider__pause svg { width: 20px; height: 20px; }
.prt-slider__arrow:disabled { opacity: .4; cursor: default; }
.prt-slider__arrow[hidden], .prt-slider__pause[hidden], .prt-slider__dots[hidden] { display: none; }
.prt-slider__pause { width: 36px; height: 36px; box-shadow: none; }
.prt-slider__pause svg { width: 15px; height: 15px; }
.prt-slider__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
/* 24px hit area, small visible dot. */
.prt-slider__dot { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
/* Inactive dots use --prt-ui-mark (bridge.php: 3:1 on the theme's bg, surface and
   surface_alt). On another ground set --prt-dot (and --prt-dot-active) on the wrap. */
.prt-slider__dot::before { content: ""; width: 9px; height: 9px; border-radius: 99px; background: var(--prt-dot, var(--prt-ui-mark, var(--prt-muted))); transition: background .25s; } /* width changes at once: animating it ran layout every frame on each autoplay step (round 11, B#4) */
.prt-slider__dot:hover::before { background: var(--prt-dot-hover, var(--prt-muted)); }
.prt-slider__dot.is-active::before { width: 22px; background: var(--prt-dot-active, var(--prt-primary-text, var(--prt-primary))); }
.prt-slider__dot:focus-visible, .prt-slider__arrow:focus-visible, .prt-slider__pause:focus-visible { outline: 3px solid var(--prt-primary-text, var(--prt-primary)); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { [data-prt-slider] { scroll-behavior: auto; } }

/* ---- "Add to Cart" (prt_add_to_cart_button). Themes pass their own button classes. ---- */
/* position: relative holds the screen-reader name (absolute) inside the button: in a sideways-scrolling rail it
   escaped to x=2,676 and widened the phone's layout viewport to 1,560px (round 8, B#1). */
.prt-atc { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; }
.prt-atc:not([class*="btn"]) {
	/* --prt-atc-ground / --prt-atc-hover / --prt-atc-ink recolour it in one place (round 12, B#2). */
	padding: 11px 18px; border-radius: var(--prt-radius-sm, 10px); border: 2px solid var(--prt-atc-ground, var(--prt-primary-ground, var(--prt-primary)));
	background: var(--prt-atc-ground, var(--prt-primary-ground, var(--prt-primary))); color: var(--prt-atc-ink, var(--prt-primary-ink));
}
.prt-atc:not([class*="btn"]):not(.is-link):not(.is-waiting):hover { background: var(--prt-atc-hover, var(--prt-primary-hover, var(--prt-primary-ground))); border-color: var(--prt-atc-hover, var(--prt-primary-hover, var(--prt-primary-ground))); }
.prt-atc.is-link:not([class*="btn"]) { background: transparent; color: var(--prt-primary-text, var(--prt-primary)); }
.prt-atc .prt-atc__ic { width: 1.15em; height: 1.15em; flex: none; }
.prt-atc.is-waiting { cursor: progress; } /* no fade: a 75% button dropped its label to ~3:1 while the date window was open */
.prt-atc.is-added .prt-atc__ic { animation: prt-atc-pop .45s ease; }
.prt-atc:focus-visible { outline: 3px solid var(--prt-primary-text, var(--prt-primary)); outline-offset: 2px; }
@keyframes prt-atc-pop { 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .prt-atc.is-added .prt-atc__ic { animation: none; } }
.prt-atc-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---- Sticky side cards: .prt-sticky-side on a column stays in view beside a longer one (desktop). ---- */
@media (min-width: 961px) {
	.prt-sticky-side { position: sticky; top: var(--prt-sticky-top, 110px); align-self: start; }
}

/* Phones (polish round 2; touch tablets too since round 3): 44px tap targets for the slider's pause and Add to Cart. */
@media (max-width: 760px), (pointer: coarse) {
	.prt-slider__pause { width: 44px; height: 44px; }
	.prt-atc { min-height: 44px; }
}
/* Polish round 4: a floating bubble steps aside while keyboard focus is under it (prt-slider.js). */
.prt-fab-dodge { opacity: 0 !important; pointer-events: none !important; transition: opacity .15s !important; }
/* FrontDesk's chat button: a ring in the brand colour, not white on a light page (round 4, B#2). */
body .wdz-fd__launch:focus-visible { outline: 3px solid var(--prt-primary-text) !important; outline-offset: 3px !important; }

/* Balanced pill rows (data-prt-balance, prt-slider.js): hidden for the moment before the script has
   evened them out, so the pills do not jump between rows after the first paint (layout shift).
   Shown regardless after 1.5s, and always without scripts or in print. Polish round 7. */
@media (scripting: enabled) {
	[data-prt-balance]:not(.is-balanced) { visibility: hidden; animation: prt-bal-show 0s 1.5s forwards; }
}
@keyframes prt-bal-show { to { visibility: visible; } }
@media print { [data-prt-balance] { visibility: visible !important; } }

/* ---- Press feedback (polish round 11). Every control core draws presses in a little while held: the
   `scale` property (not `transform`), so it adds to a theme's own hover lift instead of replacing it, and
   it is instant, so nothing moves for reduced-motion visitors. Wide rows (FAQ questions, the contents toggle,
   video posters) are left out: a whole row shrinking reads as a glitch, not a press. Zero specificity: a theme can restyle it. ---- */
:where(:is(.prts-btn, .prt-atc, .prt-slider__arrow, .prt-slider__pause, .prts-pills a, .prts-fqpop button, .prts-fqtabs a,
	.prts-fqsearch__clear, .prts-rwall__filters button, .prts-rleave__btn, .pe-tab, .pe-picks__cats a,
	.pe-lb__btn, .prt-blog-btn, .prt-blog-pill, .prt-blog-share__btn, .prt-blog-more__btn,
	.prt-blog-card__tag, .prt-blog-art__tag, .prt-blog-tags a, .io_button, .item_add, .io_view_toggle_btn, .wdz-browse__add,
	.wdz-browse__qty button, .wdz-gate__btn, .wdz-gate__close, .wdz-form__btn, .wdz-browse-fab__toggle, .wdz-fd__launch, .wdz-fd__teaser-x, .wp-block-button__link):active:not(:disabled, [aria-disabled="true"])) { scale: .97; }
/* Wide rows press with a tint instead (FAQ questions, the blog contents toggle). */
:where(.prts-fqq, .prt-blog-toc__sum):active { background-color: color-mix(in srgb, var(--prt-primary) 8%, transparent); }

/* Reduced-motion floor (polish round 11, B#3). Elementor adds a rule like this only on pages it builds, so the blog,
   search, 404 and the platform's pages kept full-length transitions and looping animations in every theme that did not
   cover them itself. Durations become near zero (end states and transitionend/animationend still happen), loops run once,
   smooth scrolling stops. Animation delays are kept (core's balanced-row reveal relies on one). `:is(html, #prt-rm)`
   gives the rule an id's weight (no such id exists), so it also beats the class-based `!important` transitions on the
   platform's/BookFlow's buttons (C#2, the selector Glow/Confetti use). */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto !important; }
	:is(html, #prt-rm) *, :is(html, #prt-rm) *::before, :is(html, #prt-rm) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* prt_accent(): a highlight and the punctuation right after it share a line (polish round 13). */
.prt-nobr { white-space: nowrap; }
.prt-nobr > * { white-space: normal; }

/* A rental or category with no photo (polish round 18, prt_noimg_src()): a tinted tile with a
   balloon instead of a broken image. Attribute selectors only, so a theme's own frame/shape rules
   still apply; object-fit does not matter (the picture is transparent). */
:where(img[src*="prt-noimg"]) { background: var(--prt-surface-alt, #f1f3f6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238792a2' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c-3.3 0-6 2.6-6 6 0 3.7 3.2 7 6 7s6-3.3 6-7c0-3.4-2.7-6-6-6Z'/%3E%3Cpath d='m11 16-.6 1.6h3.2L13 16'/%3E%3Cpath d='M12 17.6c0 1.6-1.5 1.8-1.5 3.4'/%3E%3C/svg%3E") center / clamp(28px, 22%, 72px) no-repeat; aspect-ratio: 4 / 3; }
/* Dark themes (C#1): a faint light wash instead of the pale surface tone. */
.prt-dark :where(img[src*="prt-noimg"]) { background-color: rgba(255, 255, 255, .06); }

/* Round 19: scrolling link rows carry tabindex="-1" (Firefox otherwise adds the row itself as a Tab stop); a click on the
   row's empty space must not leave a ring on it. Its links keep their own rings. */
:where(.prt-blog-cats__list, .pe-tabs__list, .prts-fqtabs ul)[tabindex="-1"]:focus { outline: none; }
/* Round 19 (Safari review): iOS Safari zooms the whole page when a field under 16px is tapped. On touch screens core's
   and the booking plugins' fields are 16px (the FAQ/contact section form was 14.7px, BookFlow's quantity boxes and the cart's
   month/year pickers 14px). Desktop sizes are unchanged. */
@media (pointer: coarse) {
	html body .prts-form :is(input, textarea, select) { font-size: max(16px, 1em); }
	html body.prt :is(.wdz-browse__qty input, .wdz-form :is(input, select, textarea), .io_form :is(input, select, textarea), #cartPopover :is(input, select, textarea), #cartPopover .ui-datepicker select) { font-size: 16px !important; }
}