/**
 * Only what the existing plugin stylesheet does not already provide.
 *
 * The app deliberately reuses the class names from bh_ext_bundle.css (which the
 * plugin enqueues site-wide), so this file covers just the few elements that
 * used to be produced by inline PHP or by Swiper.
 */

/* Step icons came from an inline <style> block in builder-steps.php; they are
   now passed in as custom properties by StepBar. */
.bh-app-steps .multi-steps > li.setting:before {
	background-image: var( --bh-step-setting );
}

.bh-app-steps .multi-steps > li.diamond:before {
	background-image: var( --bh-step-diamond );
}

.bh-app-steps .multi-steps > li.complete_product:before {
	background-image: var( --bh-step-complete );
}

/* In-app links are anchors so they inherit the themed styling the plugin
   stylesheet defines (a.stone_page, .progress_links a, .custom-pagination a);
   these only add the cursor and remove the default underline where the
   originals had none. */
#bh_search_ext .select_stones .select_option a.stone_page,
#bh_search_ext #bh_paginator .custom-pagination a,
#bh_search_ext #back_icon {
	cursor: pointer;
	text-decoration: none;
}

/* Gallery thumbnails replace the Swiper thumb strip. */
.bh-gallery-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.bh-gallery-thumb {
	width: 64px;
	height: 64px;
	padding: 0;
	/* Falls back to a neutral grey when the theme colour is unset. */
	border: 1px solid var( --bh-theme-light, rgba( 0, 0, 0, 0.12 ) );
	background: none;
	cursor: pointer;
	overflow: hidden;
}

.bh-gallery-thumb.is-active {
	border-color: var( --bh-theme-color, #000 );
}

.bh-gallery-thumb img,
.bh-gallery-thumb video {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	display: block;
}

#bh_gallery_container .bh-swiper-controls .swiper-button-prev,
#bh_gallery_container .bh-swiper-controls .swiper-button-next {
	cursor: pointer;
}

/* Review step line items. */
.bh-review-line {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.bh-review-price {
	margin-left: auto;
	font-weight: 600;
}

#bh_search_ext .bh-review-line + .bh-review-line,
#bh_search_ext .variant-group .bh-review-line {
	padding: 4px 0;
}

#bh_search_ext .bh-review-line a {
	color: var( --bh-theme-color, #000 );
	font-weight: 600;
	text-decoration: underline;
}

/* Fallback for the range filters when ion.rangeSlider is unavailable. */
.bh-range-fallback {
	display: flex;
	gap: 8px;
}

.bh-range-fallback select {
	flex: 1;
}

.bh-builder-app__boot {
	min-height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bh-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* The boot placeholder shares #bh_loader's markup for its spinner, but it sits
   in the page rather than covering it, so the fixed overlay styling is undone
   here (an id + class selector to outrank the stylesheet's `#bh_loader`). */
#bh_loader.bh-builder-app__boot {
	display: flex;
	position: static;
	background: none;
}

/* Mobile gallery: the wrapper becomes a flex strip below 1024px, so slides must
   hold their full width instead of shrinking to share the row. Desktop is left
   to the stylesheet's two-column grid. */
@media ( max-width: 1024px ) {
	.bh-app-gallery .swiper-wrapper {
		flex-wrap: nowrap;
	}

	.bh-app-gallery .swiper-slide {
		flex: 0 0 100%;
	}
}


/* ---------------------------------------------------------------------------
   Step-bar summary tooltips

   Two problems with the shared stylesheet's rules, fixed here rather than there
   so the legacy pages are untouched:

   1. `.bh_tooltip_text` sits at `top: calc(100% + 5px)`, so reaching the
      View / Change / Remove links means crossing 5px that belong to neither the
      label nor the tooltip - hover drops and the tooltip disappears before the
      click lands. The ::before bridges that gap (and inherits `visibility`, so
      it never blocks anything while the tooltip is closed).

   2. The tooltip is `z-index: 1` inside an `li` at `z-index: 2`, while the
      gallery's media overlay is 5-6 in the same stacking context, and the step
      bar comes earlier in the DOM - so a diamond image, video or 360 viewer
      paints over the tooltip. Making the bar its own stacking context at 40
      puts it above the content but still below the dialogs (100) and the
      loader (10000).
--------------------------------------------------------------------------- */
#bh_search_ext .bh-app-steps {
	position: relative;
	z-index: 40;
}

#bh_search_ext .bh-app-steps .bh_tooltip_text {
	z-index: 50;
}

#bh_search_ext .bh-app-steps .bh_tooltip_text::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	/* Covers the 5px offset with slack for sub-pixel rounding. */
	top: -9px;
	height: 9px;
}

/* Keyboard users get the same affordance as the pointer. */
#bh_search_ext .bh-app-steps .bh_tooltip:focus-visible {
	outline: 2px solid var( --bh-theme-color, #000 );
	outline-offset: 2px;
}