/**
 * Mtbkh Kitchens — component layer: cards, catalog/portfolio layouts,
 * galleries + lightbox, forms, booking flow, testimonials, misc widgets.
 */

/* ---------- WYSIWYG content ---------- */
.mtbkh-content { color: var(--mtbkh-taupe); font-size: 16px; }
.mtbkh-content > *:last-child { margin-bottom: 0; }
.mtbkh-content h2, .mtbkh-content h3 { color: var(--mtbkh-charcoal); margin-top: 1.4em; }
.mtbkh-content ul { list-style: disc; padding-inline-start: 1.4em; margin-bottom: 1em; }
.mtbkh-content a { color: var(--mtbkh-green); text-decoration: underline; }
.mtbkh-content img { border-radius: var(--mtbkh-radius); margin-block: 12px; }

/* ---------- Filter pills ---------- */
.mtbkh-filter-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.mtbkh-filter-pill {
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid var(--mtbkh-surface-alt);
	background: #fff;
	font-weight: 600;
	font-size: 13.5px;
	cursor: pointer;
	color: var(--mtbkh-ink);
}
.mtbkh-filter-pill:hover { border-color: var(--mtbkh-green); }
.mtbkh-filter-pill.is-active { background: var(--mtbkh-green); border-color: var(--mtbkh-green); color: #fff; }

/* ---------- Card grid (products) ---------- */
.mtbkh-card-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	transition: opacity .2s ease;
}
.mtbkh-card-grid.is-loading { opacity: .45; pointer-events: none; }
.mtbkh-catalog-preview__empty { grid-column: 1 / -1; color: var(--mtbkh-taupe); text-align: center; padding-block: 20px; }
/* Catalog archive page (mtbkh_render_catalog_results()) only — 3 per row on
   desktop/laptop instead of the 4 the homepage's card-grid preview uses, so
   each card has more breathing room next to the filter sidebar. Both still
   share the same responsive step-down below (3 → 2 → 1). */
.mtbkh-card-grid--catalog { grid-template-columns: repeat(2, 1fr); }

.mtbkh-product-card {
	display: block;
	background: #fff;
	border-radius: var(--mtbkh-radius);
	overflow: hidden;
	border: 1px solid var(--mtbkh-surface-alt);
	transition: box-shadow .2s ease, transform .2s ease;
}
.mtbkh-product-card:hover { box-shadow: var(--mtbkh-shadow-md); transform: translateY(-3px); }
.mtbkh-product-card__thumb { aspect-ratio: 4/3; overflow: hidden; background: var(--mtbkh-surface); }
.mtbkh-product-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.mtbkh-product-card:hover .mtbkh-product-card__thumb img { transform: scale(1.06); }
.mtbkh-product-card__body { padding: 16px 18px; }
.mtbkh-product-card__body h3 { font-size: 15.5px; margin-bottom: 6px; }

.mtbkh-price { font-weight: 800; color: var(--mtbkh-green); font-size: 15px; }
.mtbkh-price del { color: var(--mtbkh-taupe); font-weight: 400; font-size: 13px; margin-inline-start: 6px; }
.mtbkh-price--large { font-size: 26px; }

/* ---------- Post cards (index.php fallback) ---------- */
.mtbkh-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mtbkh-post-card { border: 1px solid var(--mtbkh-surface-alt); border-radius: var(--mtbkh-radius); overflow: hidden; }
.mtbkh-post-card__thumb { aspect-ratio: 4/3; background: var(--mtbkh-surface); }
.mtbkh-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mtbkh-post-card__body { padding: 18px; }

/* ---------- Catalog archive layout ---------- */
.mtbkh-page-head { margin-bottom: 28px; }
.mtbkh-page-head p { max-width: 620px; }

.mtbkh-catalog-layout { display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: start; }

.mtbkh-catalog-sidebar { position: sticky; top: 96px; }
.mtbkh-catalog-sidebar__section { background: var(--mtbkh-surface); border-radius: var(--mtbkh-radius); padding: 20px; margin-bottom: 20px;}
.mtbkh-catalog-sidebar__section h3 { font-size: 15px; margin-bottom: 14px; }
.mtbkh-catalog-sidebar__list { display: flex; flex-direction: column; gap: 4px; }
.mtbkh-catalog-sidebar__list a {
	display: flex; align-items: center; justify-content: space-between;
	padding: 9px 10px; border-radius: 8px; font-size: 14.5px; color: var(--mtbkh-ink);
}
.mtbkh-catalog-sidebar__list a:hover,
.mtbkh-catalog-sidebar__list a.is-active { background: #fff; color: var(--mtbkh-green); font-weight: 700; }
.mtbkh-catalog-sidebar__count { font-size: 12px; color: var(--mtbkh-taupe); }

/* Category checkbox filter list */
.mtbkh-filter-checklist { display: flex; flex-direction: column; gap: 8px; }
.mtbkh-filter-checklist label {
	display: flex; align-items: center; gap: 8px;
	padding: 10px; border-radius: 8px; font-size: 14px; cursor: pointer;
}
.mtbkh-filter-checklist label:hover { background: #fff; }
.mtbkh-filter-checklist input[type="checkbox"] { accent-color: var(--mtbkh-green); width: 16px; height: 16px; }
.mtbkh-filter-checklist span { flex: 1; }
.mtbkh-filter-checklist em { font-style: normal; font-size: 11.5px; color: var(--mtbkh-taupe); }

/* Price range dual slider (two overlapping native <input type=range>) */
.mtbkh-price-slider { position: relative; height: 20px; margin-top: 6px; }
.mtbkh-price-slider__track {
	position: absolute; inset-inline: 0; top: 50%; height: 4px;
	transform: translateY(-50%);
	background: var(--mtbkh-surface-alt); border-radius: 999px;
}
.mtbkh-price-slider__range {
	position: absolute; height: 100%;
	background: var(--mtbkh-green); border-radius: 999px;
}
.mtbkh-price-slider input[type="range"] {
	position: absolute; inset-inline: 0; top: 0; width: 100%; height: 20px;
	margin: 0; background: none; pointer-events: none;
	-webkit-appearance: none; appearance: none;
}
.mtbkh-price-slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; pointer-events: auto;
	width: 18px; height: 18px; border-radius: 50%;
	background: #fff; border: 3px solid var(--mtbkh-green);
	cursor: pointer; box-shadow: var(--mtbkh-shadow-sm);
	margin-top: 1px;
}
.mtbkh-price-slider input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	width: 18px; height: 18px; border-radius: 50%;
	background: #fff; border: 3px solid var(--mtbkh-green);
	cursor: pointer; box-shadow: var(--mtbkh-shadow-sm);
}
.mtbkh-price-slider input[type="range"]::-webkit-slider-runnable-track,
.mtbkh-price-slider input[type="range"]::-moz-range-track { background: transparent; height: 20px; }

.mtbkh-price-slider__values { display: flex; justify-content: space-between; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--mtbkh-ink); }

/* Color swatch filter */
.mtbkh-color-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.mtbkh-color-swatch { position: relative; cursor: pointer; }
.mtbkh-color-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mtbkh-color-swatch span {
	display: block; width: 28px; height: 28px; border-radius: 50%;
	background: var(--swatch-color); border: 2px solid #fff;
	box-shadow: 0 0 0 1px var(--mtbkh-surface-alt);
	transition: box-shadow .15s ease, transform .15s ease;
}
.mtbkh-color-swatch:hover span { transform: scale(1.08); }
.mtbkh-color-swatch input:checked + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mtbkh-green); }
.mtbkh-color-swatch input:focus-visible + span { outline: 2px solid var(--mtbkh-green); outline-offset: 3px; }

.mtbkh-filter-clear {
	display: block; text-align: center; margin-top: 10px;
	font-size: 13px; color: var(--mtbkh-taupe); text-decoration: underline;
}
.mtbkh-filter-clear:hover { color: var(--mtbkh-green); }
.mtbkh-filter-clear[hidden] { display: none; }

.mtbkh-catalog-main { transition: opacity .15s ease; }
.mtbkh-catalog-main.is-loading { opacity: .45; pointer-events: none; }

.mtbkh-catalog-toolbar {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 22px; font-size: 14px; color: var(--mtbkh-taupe); flex-wrap: wrap; gap: 10px;
}
.mtbkh-catalog-sort { display: flex; align-items: center; gap: 8px; }
.mtbkh-catalog-sort select { border: 1px solid var(--mtbkh-surface-alt); border-radius: 8px; padding: 8px 10px; font-family: inherit; }

.mtbkh-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 32px; }
.mtbkh-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; border-radius: 8px;
	border: 1px solid var(--mtbkh-surface-alt); font-weight: 600; font-size: 14px;
}
.mtbkh-pagination .page-numbers.current { background: var(--mtbkh-green); color: #fff; border-color: var(--mtbkh-green); }

/* ---------- Single product ---------- */
.mtbkh-single-product { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; margin-bottom: 40px; }
.mtbkh-single-product__cats { display: flex; gap: 8px; margin-bottom: 10px; }
.mtbkh-single-product__cats a { font-size: 12.5px; font-weight: 700; color: var(--mtbkh-green); background: var(--mtbkh-surface); padding: 4px 10px; border-radius: 999px; }
.mtbkh-single-product__price { margin-bottom: 16px; display: flex; align-items: baseline; gap: 10px; }

.mtbkh-spec-table { width: 100%; border-collapse: collapse; margin-block: 18px; font-size: 14.5px; }
.mtbkh-spec-table th, .mtbkh-spec-table td { padding: 10px 0; border-bottom: 1px solid var(--mtbkh-surface-alt); text-align: start; }
.mtbkh-spec-table th { width: 40%; color: var(--mtbkh-taupe); font-weight: 600; }

.mtbkh-feature-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.mtbkh-feature-list li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.mtbkh-feature-list svg { width: 18px; height: 18px; color: var(--mtbkh-green); flex-shrink: 0; }

.mtbkh-related-products { margin-top: 50px; }
.mtbkh-related-products h2 { margin-bottom: 22px; }

/* ---------- Portfolio ---------- */
.mtbkh-portfolio-results { transition: opacity .2s ease; }
.mtbkh-portfolio-results.is-loading { opacity: .45; pointer-events: none; }
.mtbkh-portfolio-empty { color: var(--mtbkh-taupe); text-align: center; padding-block: 40px; }
.mtbkh-portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mtbkh-portfolio-grid--archive { grid-template-columns: repeat(3, 1fr); }
.mtbkh-portfolio-card { position: relative; display: block; border-radius: var(--mtbkh-radius); overflow: hidden; }
.mtbkh-portfolio-card__thumb { position: relative; aspect-ratio: 4/3; background: var(--mtbkh-surface); }
.mtbkh-portfolio-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.mtbkh-portfolio-card__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(31,31,31,.75));
	display: flex; align-items: flex-end; justify-content: space-between;
	padding: 18px; color: #fff; font-weight: 700;
	opacity: 0; transition: opacity .25s ease;
}
.mtbkh-portfolio-card__overlay svg {
	width: 18px; height: 18px;
	translate: 0 0;
	transition: translate .25s ease;
}
[dir="rtl"] .mtbkh-portfolio-card__overlay svg,
.is-rtl .mtbkh-portfolio-card__overlay svg { scale: -1 1; }
.mtbkh-portfolio-card:hover .mtbkh-portfolio-card__overlay { opacity: 1; }
.mtbkh-portfolio-card:hover .mtbkh-portfolio-card__overlay svg { translate: -5px 0; }
.mtbkh-portfolio-card:hover .mtbkh-portfolio-card__thumb img { transform: scale(1.06); }

/* Single portfolio page: the featured gallery + write-up sit together as
   the "main" column, taking two-thirds of the row width; the compact
   vertical meta card (client/location/area/duration) takes the remaining
   third beside it. The grid's first track lands on the visual right in
   this RTL theme (same as every other 2-column layout here), which is
   exactly the "gallery/description on the right, details on the left"
   split this was asked for — no direction hack needed. */
.mtbkh-single-portfolio__body {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 40px;
	align-items: start;
	margin-top: 36px;
}
.mtbkh-single-portfolio__body--full { grid-template-columns: 1fr; }
.mtbkh-single-portfolio__main { display: flex; flex-direction: column; gap: 28px; }
.mtbkh-project-meta {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--mtbkh-surface);
	border-radius: var(--mtbkh-radius);
	padding: 22px;
}
.mtbkh-project-meta div { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--mtbkh-surface-alt); }
.mtbkh-project-meta div:last-child { padding-bottom: 0; border-bottom: none; }
.mtbkh-project-meta__icon {
	flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	background: var(--mtbkh-surface-alt); color: var(--mtbkh-green);
}
.mtbkh-project-meta__icon svg { width: 18px; height: 18px; }
.mtbkh-project-meta__body { display: flex; flex-direction: column; gap: 4px; }
.mtbkh-project-meta__label { font-size: 12.5px; color: var(--mtbkh-taupe); }
.mtbkh-project-meta strong { font-size: 15px; }

.mtbkh-single-portfolio__cta {
	text-align: center;
	background: var(--mtbkh-surface);
	border-radius: var(--mtbkh-radius);
	padding: 40px 24px;
	margin-top: 44px;
}
.mtbkh-single-portfolio__cta h2 { margin: 0 0 8px; }
.mtbkh-single-portfolio__cta p { color: var(--mtbkh-taupe); margin: 0 auto 22px; max-width: 480px; }

/* ---------- Marquee (auto-moving showcase) ----------
   Homepage "أعمالنا" portfolio preview only — a continuous news-ticker-style
   strip with no prev/next controls, driven entirely by a CSS @keyframes
   animation, not JS-computed position. mtbkhInitMarquee() (main.js) clones
   the item set enough times -- at least twice, more if there are only a few
   real items -- that the track always holds a full viewport's worth of
   content beyond the loop point, then sets --mtbkh-marquee-distance to the
   width of exactly ONE set on the track element; the keyframe below reads
   that custom property to slide the track from translateX(0) to
   translateX(-1 x one set's width) and then restarts, and because every
   copy on the track is pixel-identical that restart is invisible, which is
   what makes the loop read as endless instead of snapping back or (with too
   few copies) visibly running out of content before the loop point.

   The animation itself is deliberately NOT started here via the `animation`
   shorthand -- it is set inline by mtbkhInitMarquee() (main.js) instead,
   AFTER the --mtbkh-marquee-distance custom property below already holds
   the real measured value. Starting it unconditionally from this
   stylesheet used to race the page's first paint against that script: the
   browser would begin the animation immediately using the var()'s 50%
   fallback (before any cloning/measuring had happened), and once the
   script then changed the distance/duration on an animation that was
   already mid-flight, browsers don't reliably resync that cleanly -- the
   loop would run fine for a moment and then visibly open a gap once it
   reached the point the stale fallback and the real distance disagreed.
   No JS now means no `animation` at all (a static, non-cloned single set)
   instead of a running-but-wrong animation, which is a safer no-JS
   fallback. Hover/focus pausing -- the only interaction the strip offers
   -- is still plain CSS (:hover / :focus-within) once the animation is
   running. The section this sits in is rendered full-bleed (outside
   .mtbkh-container) so the track visibly starts flush at the true edge of
   the screen, not partway in from a centered, max-width column. */
.mtbkh-marquee__viewport {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.mtbkh-marquee__track {
	display: flex;
	gap: 20px;
	width: max-content;
	padding-inline: 20px;
}
.mtbkh-marquee:hover .mtbkh-marquee__track,
.mtbkh-marquee:focus-within .mtbkh-marquee__track { animation-play-state: paused; }

@keyframes mtbkh-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-1 * var(--mtbkh-marquee-distance, 50%))); }
}

@media (prefers-reduced-motion: reduce) {
	.mtbkh-marquee__track { animation: none !important; }
}

.mtbkh-marquee .mtbkh-portfolio-card { flex: 0 0 300px; }

/* ---------- Testimonial slider ----------
   Homepage "ماذا يقول عملاؤنا" section — a regular carousel showing TWO
   testimonials per slide, side by side (mtbkhInitBasicSlider() in main.js,
   the same mechanism the hero banner above uses), that advances to the next
   pair automatically on a timer — unlike the continuously drifting
   portfolio marquee above. Slides (each holding a 2-card grid) are stacked
   absolutely so the crossfade never causes a layout jump; the viewport's
   min-height keeps the section from collapsing while no slide has laid out
   yet and covers a typical pair's height so shorter/longer testimonials
   don't shift the controls below them. */
/* Spans the full section width (same as the catalog/portfolio sections
   above it, both edge-to-edge within .mtbkh-container) instead of the
   previous 960px cap, which left visible empty gutters on either side once
   the section head/pills above it already ran the full container width. */
.mtbkh-testimonial-slider { width: 100%; overflow: hidden; }
.mtbkh-testimonial-slider__viewport {
	position: relative;
	min-height: 220px;
	overflow: hidden;
}
/* Slide transition (right → left, matching Arabic reading direction): the
   incoming pair enters from off-screen right (translateX(100%)) toward its
   resting position at translateX(0); the outgoing pair — marked
   .is-prev by mtbkhInitBasicSlider() in main.js for the duration of this
   transition only — continues on to translateX(-100%), off-screen left.
   Every other slide simply waits, off-screen right, for its own turn. */
.mtbkh-testimonial-slide {
	position: absolute;
	inset: 0;
	transform: translateX(100%);
	transition: transform .6s cubic-bezier(.4,0,.2,1);
	pointer-events: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	align-items: start;
}
.mtbkh-testimonial-slide.is-active {
	transform: translateX(0);
	pointer-events: auto;
}
.mtbkh-testimonial-slide.is-prev {
	transform: translateX(-100%);
}
.mtbkh-testimonial-slider--single .mtbkh-testimonial-slider__controls { display: none; }

.mtbkh-testimonial-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 28px;
}
.mtbkh-testimonial-slider__dots { display: flex; gap: 6px; }
.mtbkh-testimonial-slider__dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	border: none;
	background: var(--mtbkh-surface-alt);
	cursor: pointer;
	padding: 0;
	transition: background-color .2s ease, width .2s ease;
}
.mtbkh-testimonial-slider__dot.is-active { background: var(--mtbkh-green); width: 20px; border-radius: 4px; }
.mtbkh-testimonial-slider__btn {
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid var(--mtbkh-surface-alt);
	background: #fff;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	color: var(--mtbkh-ink);
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.mtbkh-testimonial-slider__btn:hover { background: var(--mtbkh-green); border-color: var(--mtbkh-green); color: #fff; transform: scale(1.06); }
.mtbkh-testimonial-slider__btn svg { width: 16px; height: 16px; }
/* Base icon points right ("backward" in RTL). "Next" is mirrored to point
   left ("forward") — same rule as every other paired arrow in the theme. */
.mtbkh-testimonial-slider__btn--next svg { transform: scaleX(-1); }

/* ---------- Gallery + Lightbox ---------- */
.mtbkh-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 14px;
	margin-top: 24px;
}
.mtbkh-gallery__item {
	position: relative;
	display: block;
	aspect-ratio: 1/1;
	border-radius: 12px;
	overflow: hidden;
	background: var(--mtbkh-surface);
}
.mtbkh-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.mtbkh-gallery__item:hover img { transform: scale(1.08); }
.mtbkh-gallery__zoom {
	position: absolute; inset-inline-end: 8px; bottom: 8px;
	width: 30px; height: 30px; border-radius: 50%;
	background: rgba(31,31,31,.65); color: #fff;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; transition: opacity .2s ease;
}
.mtbkh-gallery__zoom svg { width: 15px; height: 15px; }
.mtbkh-gallery__item:hover .mtbkh-gallery__zoom { opacity: 1; }

/* ---------- Featured gallery (single product / single portfolio) ----------
   One large "stage" image on top with the rest of the album as a horizontal
   thumbnail strip below it — mtbkh_render_gallery( ..., true ) in
   helpers.php, wired up by the [data-mtbkh-gallery-featured] handler in
   main.js. Every thumbnail is still a real [data-lightbox] trigger inside
   the same .mtbkh-gallery wrapper lightbox.js already knows how to read, so
   the full-screen lightbox (its own thumb strip, counter, prev/next) works
   completely unchanged regardless of this layout. */
.mtbkh-gallery--featured { display: block; margin-top: 0; }
.mtbkh-gallery__stage {
	position: relative;
	aspect-ratio: 4/3;
	border-radius: var(--mtbkh-radius);
	overflow: hidden;
	background: var(--mtbkh-surface);
	cursor: zoom-in;
	margin-bottom: 14px;
	box-shadow: var(--mtbkh-shadow-sm);
}
.mtbkh-gallery__stage-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .25s ease;
}
.mtbkh-gallery--featured .mtbkh-gallery__thumbs {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: thin;
}
.mtbkh-gallery--featured .mtbkh-gallery__thumb {
	flex: 0 0 84px;
	aspect-ratio: 1/1;
	border-radius: 10px;
	border: 2px solid transparent;
	opacity: .6;
	transition: opacity .2s ease, border-color .2s ease;
}
.mtbkh-gallery--featured .mtbkh-gallery__thumb:hover { opacity: .9; }
.mtbkh-gallery--featured .mtbkh-gallery__thumb.is-active { opacity: 1; border-color: var(--mtbkh-green); }
/* The single portfolio page's gallery now sits inside the two-thirds-width
   "main" column (not full container width), so a slightly wider-than-4:3
   ratio keeps it comfortably proportioned there — matching the single
   product page's stage more closely than the old full-bleed layout did. */
.mtbkh-single-portfolio .mtbkh-gallery__stage { aspect-ratio: 4/3; max-height: 520px; }

.mtbkh-lightbox {
	position: fixed; inset: 0; z-index: 2000;
	background: rgba(15,15,15,.94);
	display: flex; flex-direction: column;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .2s ease;
}
.mtbkh-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.mtbkh-lightbox__backdrop { position: absolute; inset: 0; }

.mtbkh-lightbox__stage {
	position: relative; flex: 1;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden; touch-action: none; cursor: grab;
}
.mtbkh-lightbox__stage.is-zoomed { cursor: move; }
.mtbkh-lightbox__img {
	max-width: 90vw; max-height: 74vh;
	object-fit: contain;
	transition: transform .15s ease;
	user-select: none;
	border-radius: 6px;
}

.mtbkh-lightbox__close, .mtbkh-lightbox__nav {
	position: absolute; z-index: 5;
	background: rgba(255,255,255,.12);
	color: #fff; border: none; border-radius: 50%;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.mtbkh-lightbox__close:hover, .mtbkh-lightbox__nav:hover { background: rgba(255,255,255,.24); }
.mtbkh-lightbox__close { top: 16px; inset-inline-end: 16px; width: 42px; height: 42px; font-size: 22px; }
.mtbkh-lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 18px; }
/* Deliberately physical left/right (not inset-inline-start/end): browsing a
   photo album is a visual, left-to-right-scanned interaction regardless of
   the page's text direction (same reasoning the theme already applies to
   phone/email/date fields in rtl-overrides.css) — "prev" always sits on the
   physical left with a left-pointing "‹" glyph and "next" on the physical
   right with a right-pointing "›" glyph, matching how every photo viewer
   works everywhere, Arabic RTL pages included. Mirroring these by page
   direction (the old behavior) put "prev" on the right and "next" on the
   left, which read as backwards. */
.mtbkh-lightbox__nav--prev { left: 16px; }
.mtbkh-lightbox__nav--next { right: 16px; }

.mtbkh-lightbox__zoom-controls {
	position: absolute; top: 16px; inset-inline-start: 16px; z-index: 5;
	display: flex; gap: 6px;
}
.mtbkh-lightbox__zoom-controls button {
	width: 36px; height: 36px; border-radius: 8px;
	background: rgba(255,255,255,.12); color: #fff; border: none;
	font-size: 13px; cursor: pointer;
}
.mtbkh-lightbox__zoom-controls button:hover { background: rgba(255,255,255,.24); }

.mtbkh-lightbox__meta {
	text-align: center; color: rgba(255,255,255,.8); padding: 6px 20px 10px;
	display: flex; flex-direction: column; gap: 4px;
}
.mtbkh-lightbox__counter { font-size: 12.5px; color: rgba(255,255,255,.5); }
.mtbkh-lightbox__caption { font-size: 14px; }

.mtbkh-lightbox__thumbs {
	display: flex; gap: 8px; padding: 0 20px 20px; overflow-x: auto;
	justify-content: center;
}
.mtbkh-lightbox__thumb {
	flex-shrink: 0; width: 56px; height: 56px; border-radius: 8px; overflow: hidden;
	border: 2px solid transparent; padding: 0; cursor: pointer; opacity: .55;
	transition: opacity .2s ease, border-color .2s ease;
}
.mtbkh-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mtbkh-lightbox__thumb.is-active,
.mtbkh-lightbox__thumb:hover { opacity: 1; border-color: var(--mtbkh-green); }

/* ---------- Forms (booking + contact) ---------- */
.mtbkh-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.mtbkh-field { display: flex; flex-direction: column; gap: 6px; }
.mtbkh-field--full { grid-column: 1 / -1; }
.mtbkh-field label { font-size: 13.5px; font-weight: 700; color: var(--mtbkh-ink); }
.mtbkh-field input[type="text"],
.mtbkh-field input[type="tel"],
.mtbkh-field input[type="number"],
.mtbkh-field input[type="email"],
.mtbkh-field input[type="date"],
.mtbkh-field textarea {
	border: 1px solid var(--mtbkh-surface-alt);
	border-radius: 10px;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 14.5px;
	background: #fff;
	color: var(--mtbkh-ink);
}
.mtbkh-field input:focus, .mtbkh-field textarea:focus {
	outline: none; border-color: var(--mtbkh-green);
	box-shadow: 0 0 0 3px rgba(94,114,87,.14);
}

.mtbkh-address-row { display: flex; gap: 8px; }
.mtbkh-address-row input { flex: 1; }
.mtbkh-address-row .mtbkh-btn { flex-shrink: 0; }

.mtbkh-map { width: 100%; height: 280px; border-radius: var(--mtbkh-radius); overflow: hidden; background: var(--mtbkh-surface); margin-top: 10px; }
.mtbkh-map iframe { width: 100%; height: 100%; border: 0; }
.mtbkh-wizard__step .mtbkh-btn {
	margin-top:15px;
}
.mtbkh-slots { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;}
.mtbkh-slot { position: relative; }
.mtbkh-slots__hint { margin: 0; font-size: 13.5px; color: var(--mtbkh-taupe); }
.mtbkh-slot input { position: absolute; opacity: 0; }
.mtbkh-slot span {
	display: block; padding: 10px 18px; border-radius: 10px;
	border: 1px solid var(--mtbkh-surface-alt); font-weight: 600; font-size: 14px; cursor: pointer;
}
.mtbkh-slot input:checked + span { background: var(--mtbkh-green); border-color: var(--mtbkh-green); color: #fff; }
.mtbkh-slot input:focus-visible + span { outline: 2px solid var(--mtbkh-green); outline-offset: 2px; }

.mtbkh-booking__paymethods { display: flex; gap: 8px; margin-block: 14px 4px; }
.mtbkh-booking__paymethods svg,
.mtbkh-booking__paymethods img { width: 38px; height: 24px; }
.mtbkh-booking__secure { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 12.5px; color: var(--mtbkh-taupe); margin-top: 16px; }
.mtbkh-booking__secure svg { width: 14px; height: 14px; }

/* ---------- Booking wizard ---------- */
.mtbkh-wizard { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
/* Matches the form panel's card treatment (background + padding + radius)
   instead of sitting as bare floating text beside a boxed panel — that
   mismatch in visual weight is what used to read as a big empty gap down
   the intro column. */
.mtbkh-wizard__intro {
	position: sticky;
	top: 96px;
	background: var(--mtbkh-surface);
	border-radius: var(--mtbkh-radius);
	padding: 30px;
}
.mtbkh-wizard__panel {
	background: #fff;
	border: 1px solid var(--mtbkh-surface-alt);
	border-radius: var(--mtbkh-radius);
	padding: 30px;
	box-shadow: var(--mtbkh-shadow-sm);
	position: relative;
	overflow: hidden;
}

.mtbkh-wizard__step { display: none; animation: mtbkh-fade-in .25s ease; }
.mtbkh-wizard__step.is-active { display: block; }
@keyframes mtbkh-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.mtbkh-wizard__step-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.mtbkh-wizard__step-head h2 { margin: 0; font-size: 20px; }
.mtbkh-wizard__step-count { font-size: 13px; color: var(--mtbkh-taupe); font-weight: 600; }

/* "بخصوص: <product/project name>" chip — shown when the visitor arrived
   here via a single product/portfolio page's booking button. */
.mtbkh-wizard__ref-chip {
	display: flex; align-items: center; gap: 10px;
	background: var(--mtbkh-surface); border-radius: 10px;
	padding: 12px 14px; margin-bottom: 20px;
	font-size: 13.5px; color: var(--mtbkh-taupe);
}
.mtbkh-wizard__ref-chip svg { width: 18px; height: 18px; color: var(--mtbkh-green); flex-shrink: 0; }
.mtbkh-wizard__ref-chip strong { color: var(--mtbkh-ink); font-weight: 700; }

.mtbkh-wizard__back {
	display: inline-flex; align-items: center; gap: 4px;
	background: none; border: none; cursor: pointer;
	color: var(--mtbkh-taupe); font-weight: 700; font-size: 13.5px;
	padding: 0; margin-bottom: 14px;
}
.mtbkh-wizard__back:hover { color: var(--mtbkh-green); }

.mtbkh-wizard__actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; margin-top: 24px; }

/* Step 1 layout: contact info + address + map on the right, the date/time
   calendar on the left (see the comment in template-booking.php for why
   no direction hack is needed to get that split in this RTL theme). */
.mtbkh-booking-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.mtbkh-booking-columns__schedule > label {
	display: block; font-size: 13.5px; font-weight: 700; color: var(--mtbkh-ink); margin-bottom: 8px;
}
.mtbkh-booking-notes { margin-top: 20px; }

/* Calendar widget */
.mtbkh-calendar {
	border: 1px solid var(--mtbkh-surface-alt);
	border-radius: 12px;
	padding: 16px;
	margin-top: 10px;
	background: var(--mtbkh-surface);
}
/* Fixed physical left-to-right order regardless of the page's RTL
   direction — same reasoning as the lightbox nav above: a month picker's
   prev/next pair reads more naturally kept LTR (like the date/phone/email
   fields in rtl-overrides.css) than mirrored by reading direction, which
   used to put "previous month" on the right and "next month" on the left
   and read as backwards. */
.mtbkh-calendar__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; direction: ltr; }
.mtbkh-calendar__label { font-weight: 700; font-size: 14.5px; }
.mtbkh-calendar__nav {
	width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--mtbkh-surface-alt);
	background: #fff; cursor: pointer; font-size: 15px; line-height: 1;
}
.mtbkh-calendar__nav:disabled { opacity: .35; cursor: not-allowed; }
.mtbkh-calendar__nav:not(:disabled):hover { border-color: var(--mtbkh-green); color: var(--mtbkh-green); }

.mtbkh-calendar__weekdays,
.mtbkh-calendar__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.mtbkh-calendar__weekdays span { font-size: 11.5px; color: var(--mtbkh-taupe); font-weight: 700; padding-block: 4px; }

.mtbkh-calendar__day {
	aspect-ratio: 1/1;
	display: flex; align-items: center; justify-content: center;
	border-radius: 8px; border: none; background: transparent;
	font-size: 13.5px; cursor: pointer; color: var(--mtbkh-ink);
}
.mtbkh-calendar__day:hover:not(:disabled) { background: var(--mtbkh-surface-alt); }
.mtbkh-calendar__day:disabled { color: var(--mtbkh-surface-alt); cursor: not-allowed; }
.mtbkh-calendar__day.is-today { font-weight: 800; color: var(--mtbkh-green); }
.mtbkh-calendar__day.is-selected { background: var(--mtbkh-green); color: #fff; font-weight: 700; }
.mtbkh-calendar__day.is-empty { visibility: hidden; }
.mtbkh-calendar__day.is-closed { text-decoration: line-through; color: var(--mtbkh-taupe); opacity: .45; }

/* Summary / review card */
.mtbkh-summary-card { display: flex; flex-direction: column; gap: 2px; background: var(--mtbkh-surface); border-radius: 12px; overflow: hidden; }
.mtbkh-summary-card__row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--mtbkh-surface-alt); }
.mtbkh-summary-card__row:last-child { border-bottom: none; }
.mtbkh-summary-card__row span { color: var(--mtbkh-taupe); font-size: 13.5px; }
.mtbkh-summary-card__row strong { font-size: 14.5px; text-align: end; }

/* Payment step */
.mtbkh-payment-card {
	text-align: center; background: var(--mtbkh-surface); border-radius: 14px;
	padding: 28px 20px; margin-bottom: 20px;
}
.mtbkh-payment-card > span { display: block; font-size: 13.5px; color: var(--mtbkh-taupe); margin-bottom: 6px; }
.mtbkh-payment-card__amount { display: block; font-size: 34px; font-weight: 800; color: var(--mtbkh-green); }
.mtbkh-payment-card .mtbkh-booking__paymethods { justify-content: center; }

/* Processing step */
.mtbkh-wizard__processing { text-align: center; padding-block: 40px; }
.mtbkh-wizard__spinner {
	display: inline-block; width: 46px; height: 46px;
	border: 4px solid var(--mtbkh-surface-alt); border-top-color: var(--mtbkh-green);
	border-radius: 50%; animation: mtbkh-spin .8s linear infinite; margin-bottom: 20px;
}

/* Success / failure result screens */
.mtbkh-wizard__result { text-align: center; padding-block: 30px; }
.mtbkh-wizard__result-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 68px; height: 68px; border-radius: 50%; margin-bottom: 18px;
	font-size: 30px; line-height: 1;
}
.mtbkh-wizard__result--success .mtbkh-wizard__result-icon { background: #e3f3e6; color: #1f6b3d; }
.mtbkh-wizard__result--success .mtbkh-wizard__result-icon svg { width: 30px; height: 30px; }
.mtbkh-wizard__result--error .mtbkh-wizard__result-icon { background: #fbe4e2; color: #a4231d; }
.mtbkh-wizard__ref {
	display: inline-flex; gap: 8px; align-items: center;
	background: var(--mtbkh-surface); padding: 10px 18px; border-radius: 999px;
	font-size: 13.5px; color: var(--mtbkh-taupe); margin-bottom: 22px;
}
.mtbkh-wizard__ref strong { color: var(--mtbkh-ink); }

/* Both columns are stretched to the same height (the taller of the two
   decides it) instead of each sitting at its own natural content height —
   the form card grows its field grid, the info card grows its map, so
   the two blocks always finish flush with each other instead of one
   trailing off with awkward empty space beside it. */
.mtbkh-contact-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px; align-items: stretch; }

.mtbkh-contact-form {
	display: flex;
	flex-direction: column;
	background: var(--mtbkh-surface);
	border-radius: var(--mtbkh-radius);
	padding: 30px;
}
.mtbkh-contact-form .mtbkh-form-grid { flex: 1 1 auto; }
/* Space between the last field and the submit button, plus pushes the
   button flush to the bottom of the card so it lines up with the info
   column's bottom edge regardless of which column is naturally taller. */
.mtbkh-contact-form > .mtbkh-btn { margin-top: 26px; align-self: flex-start; }
.mtbkh-contact-form #mtbkh-contact-result:not([hidden]) { margin-top: 18px; }

.mtbkh-contact-info { display: flex; flex-direction: column; background: var(--mtbkh-surface); border-radius: var(--mtbkh-radius); padding: 30px; }
.mtbkh-contact-info__list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.mtbkh-contact-info__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; }
.mtbkh-contact-info__list svg { width: 18px; height: 18px; color: var(--mtbkh-green); flex-shrink: 0; margin-top: 2px; }
.mtbkh-contact-info__map { border-radius: 12px; overflow: hidden; flex: 1 1 auto; min-height: 220px; }
.mtbkh-contact-info__map iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Testimonials ---------- */
.mtbkh-testimonial { background: var(--mtbkh-surface); border-radius: var(--mtbkh-radius); padding: 24px; height: 100%; }
.mtbkh-testimonial__stars { display: flex; gap: 2px; color: var(--mtbkh-gold); margin-bottom: 12px; }
.mtbkh-testimonial__stars svg { width: 15px; height: 15px; }
.mtbkh-testimonial p { color: var(--mtbkh-ink); font-size: 14.5px; }
.mtbkh-testimonial__author { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.mtbkh-testimonial__avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.mtbkh-testimonial__author strong { display: block; font-size: 14px; }
.mtbkh-testimonial__author span { font-size: 12.5px; color: var(--mtbkh-taupe); }

/* ---------- About page ---------- */
.mtbkh-about-page { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: center; margin-bottom: 40px; }
.mtbkh-about-page__img { border-radius: var(--mtbkh-radius); box-shadow: var(--mtbkh-shadow-md); width: 100%; aspect-ratio: 16/11; object-fit: cover; }

/* ---------- Booking status badges (used via body class inheritance for admin previews if ever rendered on front) ---------- */
.mtbkh-status-badge { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.mtbkh-status-badge--pending_payment { background: #fdf2d0; color: #8a6d1d; }
.mtbkh-status-badge--paid,
.mtbkh-status-badge--confirmed { background: #e3f3e6; color: #1f6b3d; }
.mtbkh-status-badge--completed { background: #e3ecf3; color: #1d4f8a; }
.mtbkh-status-badge--cancelled,
.mtbkh-status-badge--failed { background: #fbe4e2; color: #a4231d; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.mtbkh-catalog-layout,
	.mtbkh-single-product,
	.mtbkh-single-portfolio__body,
	.mtbkh-wizard,
	.mtbkh-about-page,
	.mtbkh-contact-layout,
	.mtbkh-booking-columns { grid-template-columns: 1fr; }
	.mtbkh-catalog-sidebar { position: static; }
	.mtbkh-wizard__intro { position: static; }
	.mtbkh-wizard__actions { grid-template-columns: 1fr; }
	.mtbkh-card-grid { grid-template-columns: repeat(3, 1fr); }
	/* Stays at 2 columns through this tier too — same rule specificity as
	   .mtbkh-card-grid above, so without restating it here the later,
	   wider-viewport-only rule would win by source order and the catalog
	   would visually widen back to 3 columns on tablet before narrowing
	   again below. */
	.mtbkh-card-grid--catalog { grid-template-columns: repeat(2, 1fr); }
	.mtbkh-portfolio-grid,
	.mtbkh-portfolio-grid--archive { grid-template-columns: repeat(2, 1fr); }
	.mtbkh-post-grid { grid-template-columns: repeat(2, 1fr); }
	.mtbkh-marquee .mtbkh-portfolio-card { flex-basis: 260px; }
}

@media (max-width: 640px) {
	.mtbkh-card-grid,
	.mtbkh-portfolio-grid,
	.mtbkh-portfolio-grid--archive,
	.mtbkh-post-grid { grid-template-columns: 1fr 1fr; }
	.mtbkh-form-grid { grid-template-columns: 1fr; }
	.mtbkh-project-meta { grid-template-columns: 1fr 1fr; }
	/* Stacked (input above, button below) on a narrow phone instead of side
	   by side. The input still stretches to full width (default cross-axis
	   "stretch"), but the button must NOT — letting it stretch too, on top
	   of an unsized SVG icon, is what used to read as one giant square
	   button dominating the address field. */
	.mtbkh-address-row { flex-direction: column; }
	.mtbkh-address-row .mtbkh-btn { align-self: flex-start; }
	.mtbkh-lightbox__img { max-height: 60vh; }
	.mtbkh-marquee .mtbkh-portfolio-card { flex-basis: 220px; }
	.mtbkh-marquee__track { gap: 14px; }
	/* Two testimonial cards can't sit side by side on a narrow phone
	   screen — stack them, and give the (now much taller) pair enough
	   min-height that the crossfade doesn't jump the controls below it. */
	.mtbkh-testimonial-slide { grid-template-columns: 1fr; }
	.mtbkh-testimonial-slider__viewport { min-height: 520px; }
}

@media (max-width: 420px) {
	.mtbkh-card-grid,
	.mtbkh-portfolio-grid,
	.mtbkh-portfolio-grid--archive,
	.mtbkh-post-grid { grid-template-columns: 1fr; }
}

/* Phone fields are type="number" (digits only) — hide the spin buttons. */
input[data-digits-only]::-webkit-outer-spin-button,
input[data-digits-only]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[data-digits-only] { -moz-appearance: textfield; appearance: textfield; width: 100%; box-sizing: border-box; }

/* ======================================================================
   v2.1.0 — portfolio cards with video button, homepage work slider,
   video popup, single-project video section
   ==================================================================== */

/* Card = link (image + overlay) + optional video button on top. */
.mtbkh-portfolio-card__link { display: block; color: inherit; }
.mtbkh-video-btn {
	position: absolute;
	top: 14px;
	inset-inline-start: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px 6px 6px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	color: var(--mtbkh-ink);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.is-rtl .mtbkh-video-btn { padding: 6px 6px 6px 14px; }
.mtbkh-video-btn__icon {
	width: 26px; height: 26px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--mtbkh-green);
	color: #fff;
	transition: background-color .2s ease, color .2s ease;
}
.mtbkh-video-btn__icon svg { width: 12px; height: 12px; margin-inline-start: 2px; }
.mtbkh-video-btn:hover,
.mtbkh-video-btn:focus-visible { background: var(--mtbkh-green); color: #fff; transform: translateY(-2px); }
.mtbkh-video-btn:hover .mtbkh-video-btn__icon,
.mtbkh-video-btn:focus-visible .mtbkh-video-btn__icon { background: #fff; color: var(--mtbkh-green); }
.mtbkh-video-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Homepage work slider. */
.mtbkh-work-slider__head-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mtbkh-work-slider__nav { display: flex; gap: 8px; }
.mtbkh-work-slider__nav .mtbkh-testimonial-slider__btn { color: var(--mtbkh-ink); }
[data-mtbkh-work-slider].is-static .mtbkh-work-slider__nav { display: none; }
.mtbkh-work-slider__viewport {
	--mtbkh-per-view: 4;
	--mtbkh-work-gap: 20px;
	overflow: hidden;
}
.mtbkh-work-slider__track {
	display: flex;
	gap: var(--mtbkh-work-gap);
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}
.mtbkh-work-slider__slide {
	flex: 0 0 calc((100% - (var(--mtbkh-per-view) - 1) * var(--mtbkh-work-gap)) / var(--mtbkh-per-view));
	min-width: 0;
}
@media (max-width: 1080px) { .mtbkh-work-slider__viewport { --mtbkh-per-view: 3; } }
@media (max-width: 760px)  { .mtbkh-work-slider__viewport { --mtbkh-per-view: 2; --mtbkh-work-gap: 14px; } }
@media (max-width: 460px)  { .mtbkh-work-slider__viewport { --mtbkh-per-view: 1; } }
@media (prefers-reduced-motion: reduce) { .mtbkh-work-slider__track { transition: none; } }
/* Touch screens have no hover: keep the title overlay visible. */
@media (hover: none) { .mtbkh-work-slider .mtbkh-portfolio-card__overlay { opacity: 1; } }

/* Video popup. */
html.mtbkh-modal-open { overflow: hidden; }
.mtbkh-video-modal {
	position: fixed; inset: 0; z-index: 10000;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity .25s ease;
}
.mtbkh-video-modal[hidden] { display: none; }
.mtbkh-video-modal.is-open { opacity: 1; }
.mtbkh-video-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 22, 20, .86); }
.mtbkh-video-modal__dialog {
	position: relative;
	width: min(960px, 100%);
	transform: scale(.96);
	transition: transform .25s ease;
}
.mtbkh-video-modal.is-open .mtbkh-video-modal__dialog { transform: scale(1); }
.mtbkh-video-modal__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--mtbkh-radius);
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.mtbkh-video-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mtbkh-video-modal__title { margin: 14px 0 0; color: #fff; font-weight: 700; text-align: center; }
.mtbkh-video-modal__close {
	position: absolute;
	top: -48px;
	inset-inline-end: 0;
	width: 40px; height: 40px;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 26px; line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease;
}
.mtbkh-video-modal__close:hover, .mtbkh-video-modal__close:focus-visible { background: rgba(255, 255, 255, .28); }

/* Single project: video section. */
.mtbkh-project-video {
	background: var(--mtbkh-surface);
	border-radius: var(--mtbkh-radius);
	padding: 22px;
	scroll-margin-top: 110px;
}
.mtbkh-project-video__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.mtbkh-project-video__head h2 { margin: 0 0 4px; font-size: 20px; }
.mtbkh-project-video__head p { margin: 0; font-size: 14px; color: var(--mtbkh-taupe); }
.mtbkh-project-video__badge {
	flex-shrink: 0;
	width: 46px; height: 46px;
	border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	background: var(--mtbkh-green); color: #fff;
}
.mtbkh-project-video__badge svg { width: 20px; height: 20px; margin-inline-start: 2px; }
.mtbkh-project-video__player {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: calc(var(--mtbkh-radius) - 4px);
	overflow: hidden;
	background: #000;
	cursor: pointer;
}
.mtbkh-project-video__player img { width: 100%; height: 100%; object-fit: cover; opacity: .88; transition: transform .4s ease, opacity .3s ease; }
.mtbkh-project-video__player:hover img { transform: scale(1.03); opacity: 1; }
.mtbkh-project-video__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mtbkh-project-video__play {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 76px; height: 76px;
	border: 0; border-radius: 50%;
	background: var(--mtbkh-green);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	box-shadow: 0 0 0 10px rgba(255, 255, 255, .22), 0 14px 30px rgba(0, 0, 0, .35);
	transition: transform .2s ease, background-color .2s ease;
}
.mtbkh-project-video__play svg { width: 30px; height: 30px; margin-left: 4px; }
.mtbkh-project-video__player:hover .mtbkh-project-video__play { transform: translate(-50%, -50%) scale(1.08); background: var(--mtbkh-green-dark); }
.mtbkh-project-meta__link { font-size: 14.5px; font-weight: 700; color: var(--mtbkh-green); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
	.mtbkh-project-video { padding: 16px; }
	.mtbkh-project-video__play { width: 60px; height: 60px; }
	.mtbkh-video-modal__close { top: -46px; }
}