/*
 * Slider layout for blocks with the "binkhalid-slider" class. Loaded on the front end only,
 * so in the editor the slides stay stacked and easy to edit.
 */
.binkhalid-slider-wrap { position: relative; }

.binkhalid-slider,
.binkhalid-reviews .wc-block-review-list {
	position: relative;
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.binkhalid-slider::-webkit-scrollbar,
.binkhalid-reviews .wc-block-review-list::-webkit-scrollbar { display: none; }
.binkhalid-slider > * {
	flex: 0 0 100%;
	width: 100%;
	margin: 0 !important;
	scroll-snap-align: start;
	/* Slides share the tallest slide's height; centre each one's content vertically. */
	display: flex;
	flex-direction: column;
	justify-content: center;
}
@media (hover: hover) and (pointer: fine) {
	.binkhalid-slider,
	.binkhalid-reviews .wc-block-review-list { cursor: grab; }
}
.binkhalid-slider.is-dragging,
.binkhalid-slider-row.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }

/* Arrows: on the hero they sit over the slides (hidden on small screens, where visitors swipe). */
.binkhalid-slider__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: #111111;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s;
}
.binkhalid-slider-wrap > .binkhalid-slider__arrow { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); }
.binkhalid-slider__arrow:hover { background: #ffffff; }
.binkhalid-slider__arrow:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }
.binkhalid-slider-wrap > .binkhalid-slider__arrow--prev { left: 16px; }
.binkhalid-slider__arrow--prev svg { transform: rotate(180deg); }
.binkhalid-slider-wrap > .binkhalid-slider__arrow--next { right: 16px; }
@media (max-width: 781px) {
	.binkhalid-slider-wrap > .binkhalid-slider__arrow { display: none; }
}

/* Dots: visible on both dark and light slides. */
.binkhalid-slider__dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	z-index: 2;
	display: flex;
	gap: 8px;
	transform: translateX(-50%);
}
.binkhalid-slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: width 0.2s, background-color 0.2s;
}
.binkhalid-slider__dot[aria-current="true"] { width: 22px; background: #ffffff; }
.binkhalid-slider__dot:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }

/* Reviews: one row of cards. The section stays hidden until there is at least one review. */
.binkhalid-reviews:not(:has(.wc-block-review-list-item__item)) { display: none; }
.binkhalid-reviews .wc-block-review-list {
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.binkhalid-reviews .wc-block-review-list > * {
	flex: 0 0 min(360px, 85%);
	margin: 0;
	scroll-snap-align: start;
}
.binkhalid-slider__controls { display: flex; gap: 8px; }
.binkhalid-slider__controls .binkhalid-slider__arrow {
	width: 40px;
	height: 40px;
	border: 1px solid var(--wp--preset--color--grey-line, #e7e7e7);
	background: #ffffff;
}
.binkhalid-slider__controls .binkhalid-slider__arrow:hover { border-color: #111111; }