/* =============================================================================
 * Granzia PDP dynamic sections — specs banner + why-choose.
 * Colours come from CSS custom properties set inline on each <section> by the
 * template parts; defaults below mirror the Figma exports. Loaded on product
 * pages only (see granzia_assets() in functions.php).
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1) SPECS BANNER  (Figma: 1 - Banner Desktop / 2 - Banner Mobile)
 * -------------------------------------------------------------------------- */
.gz-specs {
	--navy: #00316a;
	--accent: #ff8282;
	--fold: #b9524b;
	--heading: #5ad0fb;
	--text: #ffffff;
	--tab-text: #ffffff; /* fixed in the source design */
	--check: #ffffff;
	--frame: #ffffff;
	margin: 48px auto;
	padding: 0 16px;
	font-family: 'Cairo', 'GE SS Two', Tahoma, sans-serif;
}

.gz-specs__card {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
	background: var(--navy);
	border-radius: 30px;
	padding: 64px 48px 48px;
	/* LTR so the grid keeps text-left / image-right like the Figma reference,
	   regardless of the surrounding RTL page; inner blocks restore rtl below. */
	direction: ltr;
	display: grid;
	grid-template-columns: 1fr minmax(0, 44%);
	grid-template-areas:
		"head media"
		"list media";
	gap: 8px 40px;
	align-items: start;
}

/* Pink tab with the two side folds */
.gz-specs__tab {
	position: absolute;
	top: -26px;
	left: 50%;
	transform: translateX(-50%);
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gz-specs__tab-label {
	position: relative;
	z-index: 2;
	background: var(--accent);
	color: var(--tab-text);
	font-weight: 800;
	font-size: 28px;
	line-height: 1;
	padding: 14px 42px;
	border-radius: 14px;
	white-space: nowrap;
}
.gz-specs__fold {
	position: absolute;
	top: 50%;
	width: 22px;
	height: 28px;
	background: var(--fold);
	transform: translateY(-50%);
	z-index: 1;
}
.gz-specs__fold--l { left: -12px;  clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.gz-specs__fold--r { right: -12px; clip-path: polygon(0 0, 0 100%, 100% 100%); }

/* Heading + feature list (RTL) */
.gz-specs__heading {
	grid-area: head;
	direction: rtl;
	text-align: right;
	color: var(--heading);
	font-weight: 800;
	font-size: 40px;
	line-height: 1.2;
	margin: 0 0 22px;
}
.gz-specs__list {
	grid-area: list;
	list-style: none;
	margin: 0;
	padding: 0;
	direction: rtl;
	text-align: right;
	color: var(--text);
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.gz-specs__item {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
}
.gz-specs__check { flex: none; width: 32px; height: 32px; display: flex; }
.gz-specs__check svg { width: 32px; height: 32px; }
.gz-specs__gear { fill: var(--accent); }
.gz-specs__tick {
	fill: none;
	stroke: var(--check);
	stroke-width: 3.4px;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.gz-specs__txt { flex: 1; }

/* Product image card (white frame, rounded on the inner side) */
.gz-specs__media {
	grid-area: media;
	align-self: center;
	background: var(--frame);
	border-radius: 24px;
	overflow: hidden;
	padding: 7px;
}
.gz-specs__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 18px;
}

/* -----------------------------------------------------------------------------
 * 2) WHY CHOOSE  (Figma: 3 - Why Choose Desktop / 4 - Why Choose Mobile)
 * -------------------------------------------------------------------------- */
.gz-why {
	--navy: #16357f;
	--circle: #4dccf7;
	--text: #16357f;
	--grad-start: #dff3ff;
	--grad-end: #fdffff;
	background: linear-gradient(180deg, var(--grad-start) 0%, #eef9ff 55%, var(--grad-end) 100%);
	padding: 56px 16px;
	font-family: 'Cairo', 'GE SS Two', Tahoma, sans-serif;
}
.gz-why__inner { max-width: 1200px; margin: 0 auto; }

.gz-why__title {
	max-width: 760px;
	margin: 0 auto 40px;
	background: var(--navy);
	color: #fff;
	font-weight: 800;
	font-size: 32px;
	line-height: 1.3;
	text-align: center;
	border-radius: 26px;
	padding: 22px 28px;
	direction: rtl;
}

.gz-why__grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
}
.gz-why__col { display: flex; flex-direction: column; gap: 28px; }

.gz-why__item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	direction: rtl;
}
.gz-why__badge {
	flex: none;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--navy);
	display: flex;
	align-items: center;
	justify-content: center;
}
.gz-why__badge img { width: 64px; height: 64px; object-fit: contain; display: block; }
.gz-why__card {
	flex: 1;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 18px;
	padding: 14px 20px;
	color: var(--text);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.55;
	text-align: right;
}

/* Centre product over a circle */
.gz-why__center {
	position: relative;
	width: 360px;
	height: 420px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gz-why__circle {
	position: absolute;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: var(--circle);
}
.gz-why__product { position: relative; max-width: 100%; max-height: 100%; object-fit: contain; }

.gz-why__cta { text-align: center; margin-top: 44px; direction: rtl; }
.gz-why__btn {
	display: inline-block;
	background: var(--navy);
	color: #fff;
	font-weight: 700;
	font-size: 22px;
	padding: 18px 80px;
	border-radius: 40px;
	text-decoration: none;
}

/* -----------------------------------------------------------------------------
 * 3) RESPONSIVE — mobile layouts (Figma: 2 / 4 Mobile)
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {

	/* Specs: stack tab → heading → image → list */
	.gz-specs { margin: 28px auto; }
	.gz-specs__card {
		grid-template-columns: 1fr;
		grid-template-areas: "head" "media" "list";
		gap: 0;
		padding: 46px 16px 26px;
		border-radius: 26px;
		max-width: 460px;
	}
	.gz-specs__tab { top: -22px; height: 52px; }
	.gz-specs__tab-label { font-size: 20px; padding: 11px 26px; }
	.gz-specs__fold { width: 16px; height: 22px; }
	.gz-specs__heading { font-size: 22px; margin: 2px 4px 14px; }
	.gz-specs__media { width: calc(100% + 20px); margin: 0 -10px 18px; border-radius: 16px; }
	.gz-specs__media img { border-radius: 12px; }
	.gz-specs__list { gap: 16px; }
	.gz-specs__item { font-size: 16px; gap: 12px; align-items: flex-start; }
	.gz-specs__check { width: 26px; height: 26px; }
	.gz-specs__check svg { width: 26px; height: 26px; }

	/* Why: title → item rows → product → CTA */
	.gz-why { padding: 32px 18px; }
	.gz-why__title { font-size: 19px; padding: 18px 22px; border-radius: 16px; margin-bottom: 24px; }
	.gz-why__grid { grid-template-columns: 1fr; gap: 18px; }
	.gz-why__col { gap: 16px; }
	.gz-why__col--right { order: 1; }
	.gz-why__col--left { order: 2; }
	.gz-why__center { order: 3; width: 100%; height: 340px; margin-top: 14px; }
	.gz-why__circle { width: 300px; height: 300px; }
	.gz-why__badge { width: 68px; height: 68px; }
	.gz-why__badge img { width: 50px; height: 50px; }
	.gz-why__card { font-size: 16px; text-align: center; }
	.gz-why__cta { margin-top: 22px; }
	.gz-why__btn { display: block; width: 100%; font-size: 20px; padding: 16px 0; }
}

/* -----------------------------------------------------------------------------
 * 4) USAGE VIDEOS  (template-parts/pdp/video-section.php)
 * -------------------------------------------------------------------------- */
/* Thumbnail with play button (swaps to an autoplay iframe on click). */
.granzia-video-thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	cursor: pointer;
	background: #000;
	border-radius: 16px;
	overflow: hidden;
}
.granzia-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.granzia-video-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.granzia-play-btn {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* Playlist (YouTube IFrame Player API) — lazy poster + 16:9 player. */
.pdp-playlist { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.pdp-playlist__poster {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	padding: 0; border: 0; cursor: pointer;
	background: linear-gradient(135deg, #16357f, #00256b);
}
.pdp-playlist__player { width: 100%; height: 100%; display: none; }
.pdp-playlist__player iframe { width: 100%; height: 100%; border: 0; display: block; }

.pdp-video-slider { position: relative; }
.pdp-video-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
}
.pdp-video-track::-webkit-scrollbar { height: 4px; background: #e0e0e0; border-radius: 4px; }
.pdp-video-track::-webkit-scrollbar-thumb { background: #1B2D6B; border-radius: 4px; }
.pdp-video-track .granzia-video-slide { flex: 0 0 100%; scroll-snap-align: start; }

.pdp-video-nav {
	position: absolute;
	top: calc(50% - 4px);
	transform: translateY(-50%);
	z-index: 2;
	width: 46px; height: 46px;
	border: 0; border-radius: 50%;
	background: rgba(0, 49, 106, 0.85);
	color: #fff; font-size: 28px; line-height: 1;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.pdp-video-nav:hover { background: rgba(0, 49, 106, 1); }
/* RTL "next" on the right, "prev" on the left (the glyphs ‹/› point that way). */
.pdp-video-nav--prev { left: 10px; }
.pdp-video-nav--next { right: 10px; }

@media (max-width: 768px) {
	/* one full-width 16:9 video per view; smaller arrows; never overflow */
	.pdp-videos { overflow: hidden; }
	.pdp-video-track { gap: 10px; }
	.pdp-video-track .granzia-video-slide { flex: 0 0 100%; }
	.granzia-video-thumb { width: 100%; aspect-ratio: 16 / 9; }
	.pdp-video-nav { width: 40px; height: 40px; font-size: 20px; }
	.pdp-video-nav--prev { left: 6px; }
	.pdp-video-nav--next { right: 6px; }
}

/* Carousel variant ("فيديوهات ذات صلة"): same cards, auto-scrolling infinite
   track (3-up desktop / 1 mobile), opening each video in a lightbox on click.
   Slide widths are set inline by JS; the track translateX is driven by JS too. */
.pdp-videos--carousel .pdp-vcarousel { overflow: hidden; }
/* direction:ltr so the marquee offset math (translateX from offsetLeft) is
   positive — under the page's RTL cascade offsetLeft goes negative and the
   auto-scroll guard (resetX > 0) never fires. */
.pdp-vcarousel-track { display: flex; gap: 16px; direction: ltr; will-change: transform; }
.pdp-videos--carousel .granzia-video-slide { flex: 0 0 auto; }
/* Portrait (9:16) cards — the 16:9 YouTube thumbnail fills via object-fit:cover,
   so portrait Shorts show with no side bars. */
.pdp-videos--carousel .granzia-video-thumb { aspect-ratio: 9 / 16; }

/* Video lightbox */
.granzia-vlightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.granzia-vlightbox__box { position: relative; width: 90%; max-width: 900px; aspect-ratio: 16 / 9; }
.granzia-vlightbox__frame { width: 100%; height: 100%; }
.granzia-vlightbox__frame iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; display: block; }
.granzia-vlightbox__close {
	position: absolute;
	top: -44px;
	left: 0;
	background: none;
	border: 0;
	color: #fff;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
}

/* -----------------------------------------------------------------------------
 * 5) FAQ accordion  (template-parts/pdp/faq-section.php)
 * -------------------------------------------------------------------------- */
/* Background + border live on the whole .faq-item (not the parts), so the open
   state reads as one card. The answer expands via max-height for a smooth open. */
.faq-item {
	border-bottom: 1px solid #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
}
.faq-item.open {
	background: var(--faq-open-bg, #f5f5f5);
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	height: auto !important;
}
/* never tint the question/answer on their own */
.faq-item.open .faq-question,
.faq-item.open .faq-answer { background: transparent; }

.faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	direction: rtl;
	cursor: pointer;
	min-height: 40px;
	padding: 10px 24px;
	color: #002563;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
}
.faq-text { flex: 1; text-align: right; }
.faq-arrow {
	margin-left: 0;
	margin-right: auto;      /* push the arrow to the far left */
	display: inline-block;   /* reliable transform + keep the › glyph un-mirrored */
	direction: ltr;
	font-size: 20px;
	line-height: 1;
	color: #002563;
	transition: transform 0.3s;
}
.faq-item.open .faq-arrow { transform: none; }

.faq-answer {
	color: #00266d;
	font-size: 15px;
	line-height: 24px;
	text-align: right;
	direction: rtl;
	padding: 0 24px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.open .faq-answer {
	max-height: 500px;
	padding: 12px 24px 20px;
}

/* -----------------------------------------------------------------------------
 * 6) AR button + 360° popup
 * -------------------------------------------------------------------------- */
/* AR button lives inside the gallery column, right after the thumbs and before
   the buyer-card — so it flows normally within that column (no positioning). */
.pdp-ar-wrap { width: 100%; }
.pdp-ar-link { display: inline-block; text-decoration: none; }
.granzia-ar-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #5DD8F5;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	font-family: inherit;
	border: none;
	border-radius: 40px;
	padding: 12px 28px;
	cursor: pointer;
	box-shadow: 0 4px 0 #1B6FA8;
	direction: ltr;
}
.granzia-ar-btn:hover {
	background: #3fc8e8;
}
.granzia-ar-btn svg {
	width: 32px;
	height: 32px;
	flex: none;
}