/* ==========================================================================
   QB - Certificates  ·  paper-stack cards + in-page document viewer
   --------------------------------------------------------------------------
   Loads only where the widget is used (handle: awz-qb-certificates, declared
   by the widget's get_style_depends()). Every colour/size is a custom property
   so the Elementor Style tab only ever writes one variable, never a rule.
   Logical properties throughout; RTL mirrors via --qbc-dir.
   ========================================================================== */

.awz-qbc {
	--qbc-cols: 3;
	--qbc-gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
	--qbc-ratio: 5/4;
	--qbc-radius: var(--awz-radius-lg, 26px);
	--qbc-card-bg: var(--awz-surface, #fff);
	--qbc-lift: -6px;

	--qbc-stage-bg: linear-gradient(160deg, var(--awz-blue-050, #F3F6FE) 0%, #fff 100%);
	--qbc-stage-glow: rgb(32 64 154 / 12%);
	--qbc-paper-h: 76cqh;
	--qbc-paper-radius: 4px;
	--qbc-sheet: #fff;

	--qbc-chip-bg: rgb(255 255 255 / 86%);
	--qbc-chip-fg: var(--awz-slate-700, #44546E);
	--qbc-badge-bg: var(--awz-red-050, #FFF5F5);
	--qbc-badge-fg: var(--awz-red-700, #C31119);
	--qbc-title: var(--awz-ink, #0F2038);
	--qbc-title-hover: var(--awz-blue-700, #20409A);
	--qbc-muted: var(--awz-slate-600, #6B7B95);
	--qbc-icon: var(--awz-blue-700, #20409A);
	--qbc-text: var(--awz-slate-700, #44546E);
	--qbc-lines: 2;
	--qbc-link: var(--awz-navy-800, #003970);
	--qbc-link-hover: var(--awz-red-600, #ED1C24);
	--qbc-dl-bg: var(--awz-blue-050, #F3F6FE);
	--qbc-dl-fg: var(--awz-blue-700, #20409A);
	--qbc-dl-bg-hover: var(--awz-blue-700, #20409A);
	--qbc-pill-bg: rgb(4 27 61 / 86%);
	--qbc-pill-fg: #fff;

	--qbc-ease: var(--awz-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
	--qbc-ease-out: var(--awz-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
	--qbc-dur: 520ms;
	--qbc-dir: 1;

	/* pointer tilt, written by JS */
	--qbc-rx: 0deg;
	--qbc-ry: 0deg;
	--qbc-mx: 50%;
	--qbc-my: 50%;
}

[dir="rtl"] .awz-qbc { --qbc-dir: -1; }

/* Fallback columns — Elementor's own (more specific) column rules win. */
@media (max-width: 1024px) { .awz-qbc { --qbc-cols: 2; } }
@media (max-width: 767px)  { .awz-qbc { --qbc-cols: 1; } }

.awz-qbc .awz-sechead { margin-block-end: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); }

.awz-qbc__grid {
	display: grid;
	grid-template-columns: repeat(var(--qbc-cols), minmax(0, 1fr));
	gap: var(--qbc-gap);
}

/* ══ Card ════════════════════════════════════════════════════════════════ */

.awz-qbc__card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	border: 1px solid var(--awz-line, #E8EDF5);
	border-radius: var(--qbc-radius);
	background: var(--qbc-card-bg);
	box-shadow: var(--awz-shadow-sm);
	overflow: hidden;
	isolation: isolate;
	transition:
		transform var(--qbc-dur) var(--qbc-ease-out),
		box-shadow var(--qbc-dur) var(--qbc-ease-out),
		border-color var(--qbc-dur) var(--qbc-ease);
}

.awz-qbc__card:hover {
	transform: translateY(var(--qbc-lift));
	border-color: rgb(32 64 154 / 14%);
	box-shadow: var(--awz-shadow-md);
}

/* ══ Stage (cover area) ══════════════════════════════════════════════════ */

.awz-qbc__stage {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: var(--qbc-ratio);
	container-type: size;
	background: var(--qbc-stage-bg);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	perspective: 1100px;
	cursor: zoom-in;
	outline: none;
}

/* faint dot grid + radial glow under the paper — pure CSS, no request */
.awz-qbc__stage::before,
.awz-qbc__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.awz-qbc__stage::before {
	background-image: radial-gradient(rgb(32 64 154 / 9%) 1px, transparent 1.2px);
	background-size: 16px 16px;
	mask-image: radial-gradient(70% 70% at 50% 45%, #000 0%, transparent 78%);
	-webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 0%, transparent 78%);
	opacity: 0.9;
}

.awz-qbc__stage::after {
	background: radial-gradient(42% 46% at var(--qbc-mx) var(--qbc-my), var(--qbc-stage-glow) 0%, transparent 70%);
	opacity: 0.7;
	transition: opacity var(--qbc-dur) var(--qbc-ease);
}

.awz-qbc__card:hover .awz-qbc__stage::after { opacity: 1; }

.awz-qbc__stage:focus-visible {
	box-shadow: inset 0 0 0 2px var(--awz-blue-700, #20409A);
}

/* paper + back sheets share one box so they stack exactly */
.awz-qbc__paper,
.awz-qbc__sheets,
.awz-qbc__sheets > i {
	grid-area: 1 / 1;
	block-size: var(--qbc-paper-h);
	inline-size: auto;
	max-inline-size: 84cqw;
	aspect-ratio: 1 / 1.414;
	border-radius: var(--qbc-paper-radius);
}

.awz-qbc__sheets {
	position: relative;
	display: block;
	z-index: 1;
}

.awz-qbc__sheets > i {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	background: var(--qbc-sheet);
	box-shadow: 0 1px 2px rgb(15 32 56 / 6%), 0 10px 24px rgb(32 64 154 / 8%);
	transform-origin: 50% 100%;
	transition: transform var(--qbc-dur) var(--qbc-ease-out), opacity var(--qbc-dur) var(--qbc-ease);
}

.awz-qbc__sheets > i:first-child  { transform: rotate(calc(4.5deg * var(--qbc-dir))) translateX(calc(5% * var(--qbc-dir))); }
.awz-qbc__sheets > i:last-child   { transform: rotate(calc(-3deg * var(--qbc-dir))) translateX(calc(-4% * var(--qbc-dir))); background: var(--awz-blue-050, #F3F6FE); }

.awz-qbc__paper {
	position: relative;
	z-index: 2;
	display: block;
	background: #fff;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgb(15 32 56 / 8%),
		0 12px 28px rgb(15 32 56 / 10%),
		0 30px 60px rgb(32 64 154 / 10%);
	transform: rotateX(var(--qbc-rx)) rotateY(var(--qbc-ry)) translateZ(0);
	transform-style: preserve-3d;
	transition:
		transform var(--qbc-dur) var(--qbc-ease-out),
		box-shadow var(--qbc-dur) var(--qbc-ease-out);
	will-change: transform;
}

.awz-qbc__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 900ms var(--qbc-ease-out), filter var(--qbc-dur) var(--qbc-ease);
}

.awz-qbc__blank {
	display: grid;
	place-items: center;
	block-size: 100%;
	color: var(--awz-blue-300, #93AAEE);
}

.awz-qbc__blank svg { inline-size: 36%; block-size: auto; }

/* a single light sweep across the paper on hover */
.awz-qbc__sheen {
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 55%) 48%, transparent 66%);
	translate: -120% 0;
	pointer-events: none;
	transition: translate 1100ms var(--qbc-ease-out);
}

.awz-qbc__card:hover .awz-qbc__paper {
	transform: translateY(-6px) rotate(calc(-1deg * var(--qbc-dir))) rotateX(var(--qbc-rx)) rotateY(var(--qbc-ry));
	box-shadow:
		0 2px 4px rgb(15 32 56 / 8%),
		0 20px 40px rgb(15 32 56 / 12%),
		0 44px 80px rgb(32 64 154 / 14%);
}

.awz-qbc__card:hover .awz-qbc__sheen { translate: 120% 0; }
.awz-qbc__card:hover .awz-qbc__img { transform: scale(1.025); }

.awz-qbc__card:hover .awz-qbc__sheets > i:first-child {
	transform: rotate(calc(8deg * var(--qbc-dir))) translateX(calc(12% * var(--qbc-dir))) translateY(-2%);
}
.awz-qbc__card:hover .awz-qbc__sheets > i:last-child {
	transform: rotate(calc(-6deg * var(--qbc-dir))) translateX(calc(-10% * var(--qbc-dir))) translateY(-1%);
}

/* page-count chip */
.awz-qbc__count {
	position: absolute;
	z-index: 3;
	inset-block-start: 0.85rem;
	inset-inline-end: 0.85rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.32rem 0.6rem;
	border: 1px solid rgb(255 255 255 / 70%);
	border-radius: var(--awz-radius-pill, 999px);
	background: var(--qbc-chip-bg);
	color: var(--qbc-chip-fg);
	font-size: var(--awz-fs-2xs, 0.72rem);
	font-weight: var(--awz-weight-semi, 600);
	line-height: 1;
	box-shadow: 0 4px 14px rgb(15 32 56 / 6%);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.awz-qbc__count svg { inline-size: 0.9rem; block-size: 0.9rem; color: var(--qbc-icon); }

/* "view" pill that rises on hover */
.awz-qbc__pill {
	position: absolute;
	z-index: 3;
	inset-block-end: 0.9rem;
	inset-inline-start: 50%;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.9rem;
	border-radius: var(--awz-radius-pill, 999px);
	background: var(--qbc-pill-bg);
	color: var(--qbc-pill-fg);
	font-size: var(--awz-fs-xs, 0.8rem);
	font-weight: var(--awz-weight-semi, 600);
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 10px 24px rgb(4 27 61 / 22%);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0;
	translate: calc(-50% * var(--qbc-dir)) 10px;
	transition: opacity 360ms var(--qbc-ease), translate var(--qbc-dur) var(--qbc-ease-out);
	pointer-events: none;
}

.awz-qbc__pill svg { inline-size: 1rem; block-size: 1rem; }

.awz-qbc__card:hover .awz-qbc__pill,
.awz-qbc__stage:focus-visible .awz-qbc__pill {
	opacity: 1;
	translate: calc(-50% * var(--qbc-dir)) 0;
}

/* ══ Body ════════════════════════════════════════════════════════════════ */

.awz-qbc__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.55rem;
	padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.45rem);
	border-block-start: 1px solid var(--awz-line-soft, #F1F5FA);
}

.awz-qbc__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.65rem;
}

.awz-qbc__badge {
	display: inline-flex;
	align-items: center;
	padding: 0.28rem 0.55rem;
	border-radius: 6px;
	background: var(--qbc-badge-bg);
	color: var(--qbc-badge-fg);
	font-size: var(--awz-fs-2xs, 0.72rem);
	font-weight: var(--awz-weight-semi, 600);
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.awz-qbc__meta {
	color: var(--qbc-muted);
	font-size: var(--awz-fs-xs, 0.8rem);
	line-height: 1.3;
}

.awz-qbc__title {
	margin: 0.1rem 0 0;
	color: var(--qbc-title);
	font-size: var(--awz-fs-lg, 1.15rem);
	font-weight: var(--awz-weight-bold, 700);
	letter-spacing: var(--awz-tracking-snug, -0.015em);
	line-height: var(--awz-lh-snug, 1.25);
	transition: color var(--awz-dur, 280ms) var(--qbc-ease);
}

.awz-qbc__card:hover .awz-qbc__title { color: var(--qbc-title-hover); }

.awz-qbc__issuer {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	margin: 0;
	color: var(--qbc-muted);
	font-size: var(--awz-fs-sm, 0.9rem);
	line-height: 1.45;
}

.awz-qbc__issuer svg {
	flex: none;
	inline-size: 1rem;
	block-size: 1rem;
	margin-block-start: 0.12rem;
	color: var(--qbc-icon);
}

.awz-qbc__desc {
	display: -webkit-box;
	margin: 0;
	color: var(--qbc-text);
	font-size: var(--awz-fs-sm, 0.9rem);
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--qbc-lines);
	overflow: hidden;
}

.awz-qbc__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-block-start: auto;
	padding-block-start: 0.85rem;
	border-block-start: 1px dashed var(--awz-line, #E8EDF5);
}

.awz-qbc__view {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--qbc-link);
	font-size: var(--awz-fs-sm, 0.9rem);
	font-weight: var(--awz-weight-semi, 600);
	text-decoration: none;
	transition: color var(--awz-dur, 280ms) var(--qbc-ease);
}

.awz-qbc__view svg {
	inline-size: 1rem;
	block-size: 1rem;
	transition: translate var(--qbc-dur) var(--qbc-ease-out);
}

[dir="rtl"] .awz-qbc__view svg { scale: -1 1; }

.awz-qbc__view:hover,
.awz-qbc__view:focus-visible { color: var(--qbc-link-hover); }
.awz-qbc__card:hover .awz-qbc__view svg { translate: calc(4px * var(--qbc-dir)) 0; }

.awz-qbc__dl {
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: 2.35rem;
	block-size: 2.35rem;
	border-radius: 50%;
	background: var(--qbc-dl-bg);
	color: var(--qbc-dl-fg);
	transition:
		background-color var(--awz-dur, 280ms) var(--qbc-ease),
		color var(--awz-dur, 280ms) var(--qbc-ease),
		transform var(--qbc-dur) var(--qbc-ease-out),
		box-shadow var(--qbc-dur) var(--qbc-ease-out);
}

.awz-qbc__dl svg { inline-size: 1.05rem; block-size: 1.05rem; }

.awz-qbc__dl:hover,
.awz-qbc__dl:focus-visible {
	background: var(--qbc-dl-bg-hover);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgb(32 64 154 / 22%);
}

.awz-qbc__dl:hover svg { animation: qbc-drop 700ms var(--qbc-ease-out); }

@keyframes qbc-drop {
	0%   { translate: 0 0; }
	40%  { translate: 0 3px; }
	100% { translate: 0 0; }
}

/* ══ Variant: framed cover — the page fills the area edge to edge ═══════ */

.awz-qbc--frame .awz-qbc__sheets { display: none; }

.awz-qbc--frame .awz-qbc__stage { padding: 0.7rem; }

.awz-qbc--frame .awz-qbc__paper {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	aspect-ratio: auto;
	border-radius: calc(var(--qbc-radius) - 10px);
	box-shadow: 0 1px 2px rgb(15 32 56 / 6%);
}

.awz-qbc--frame .awz-qbc__card:hover .awz-qbc__paper {
	transform: rotateX(var(--qbc-rx)) rotateY(var(--qbc-ry));
	box-shadow: 0 1px 2px rgb(15 32 56 / 6%);
}

.awz-qbc--frame .awz-qbc__card:hover .awz-qbc__img { transform: scale(1.04); }

/* ══ Variant: horizontal list ═══════════════════════════════════════════ */

.awz-qbc--list { --qbc-cols: 1; }

.awz-qbc--list .awz-qbc__card {
	display: grid;
	grid-template-columns: minmax(180px, 34%) 1fr;
}

.awz-qbc--list .awz-qbc__stage {
	aspect-ratio: auto;
	align-self: stretch;
	min-block-size: 240px;
}

.awz-qbc--list .awz-qbc__body {
	justify-content: center;
	border-block-start: 0;
	border-inline-start: 1px solid var(--awz-line-soft, #F1F5FA);
}

.awz-qbc--list .awz-qbc__actions { margin-block-start: 0.4rem; }

@media (max-width: 640px) {
	.awz-qbc--list .awz-qbc__card { grid-template-columns: 1fr; }
	.awz-qbc--list .awz-qbc__stage { aspect-ratio: 5 / 4; }
	.awz-qbc--list .awz-qbc__body { border-inline-start: 0; border-block-start: 1px solid var(--awz-line-soft, #F1F5FA); }
}

/* ══ States ══════════════════════════════════════════════════════════════ */

.awz-qbc__empty {
	padding: 2rem;
	border: 1px dashed var(--awz-slate-400, #B6C1D2);
	border-radius: var(--awz-radius, 18px);
	color: var(--awz-slate-600, #6B7B95);
	font-size: var(--awz-fs-sm, 0.9rem);
	text-align: center;
}

/* touch: no hover — keep the pill quietly visible so the card reads as tappable */
@media (hover: none) {
	.awz-qbc__pill { opacity: 1; translate: calc(-50% * var(--qbc-dir)) 0; }
	.awz-qbc__card:hover { transform: none; }
}

/* ==========================================================================
   Viewer  ·  .awz-qbv  (one instance, appended to <body> by the script)
   ========================================================================== */

.awz-qbv {
	--qbv-accent: var(--awz-blue-700, #20409A);
	--qbv-backdrop: rgb(4 27 61 / 58%);
	--qbv-stage: var(--awz-bg-soft, #F7F9FC);
	--qbv-ease: var(--awz-ease-out, cubic-bezier(0.16, 1, 0.3, 1));

	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: clamp(0.5rem, 2vw, 1.75rem);
	font-family: var(--awz-font-body, system-ui, sans-serif);
	visibility: hidden;
	pointer-events: none;
}

.awz-qbv.is-open { visibility: visible; pointer-events: auto; }

.awz-qbv__backdrop {
	position: absolute;
	inset: 0;
	background: var(--qbv-backdrop);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	opacity: 0;
	transition: opacity 420ms ease;
}

.awz-qbv.is-open .awz-qbv__backdrop { opacity: 1; }

.awz-qbv__panel {
	position: relative;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	grid-template-columns: minmax(0, 1fr);
	inline-size: min(1120px, 100%);
	block-size: min(900px, 100%);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 30px 80px rgb(2 18 42 / 30%), 0 2px 6px rgb(2 18 42 / 10%);
	overflow: hidden;
	opacity: 0;
	transform: translateY(18px) scale(0.975);
	transition: opacity 360ms ease, transform 620ms var(--qbv-ease);
}

.awz-qbv.is-open .awz-qbv__panel { opacity: 1; transform: none; }

/* head */
.awz-qbv__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 0.85rem 0.85rem 1.25rem;
	padding-inline: 1.25rem 0.85rem;
	border-block-end: 1px solid var(--awz-line, #E8EDF5);
}

.awz-qbv__titles { flex: 1; min-inline-size: 0; }

.awz-qbv__title {
	margin: 0;
	overflow: hidden;
	color: var(--awz-ink, #0F2038);
	font-size: var(--awz-fs-base, 1rem);
	font-weight: var(--awz-weight-bold, 700);
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.awz-qbv__issuer {
	margin: 0.15rem 0 0;
	overflow: hidden;
	color: var(--awz-slate-600, #6B7B95);
	font-size: var(--awz-fs-xs, 0.8rem);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.awz-qbv__counter {
	flex: none;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	background: var(--awz-blue-050, #F3F6FE);
	color: var(--qbv-accent);
	font-size: var(--awz-fs-xs, 0.8rem);
	font-weight: var(--awz-weight-semi, 600);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.awz-qbv__counter:empty { display: none; }

.awz-qbv__tools { display: flex; flex: none; gap: 0.35rem; }

.awz-qbv__btn {
	display: inline-grid;
	place-items: center;
	inline-size: 2.4rem;
	block-size: 2.4rem;
	padding: 0;
	border: 1px solid var(--awz-line, #E8EDF5);
	border-radius: 12px;
	background: #fff;
	color: var(--awz-slate-700, #44546E);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease, transform 420ms var(--qbv-ease);
}

.awz-qbv__btn svg { inline-size: 1.1rem; block-size: 1.1rem; }

.awz-qbv__btn:hover,
.awz-qbv__btn:focus-visible {
	border-color: transparent;
	background: var(--awz-blue-050, #F3F6FE);
	color: var(--qbv-accent);
	transform: translateY(-1px);
}

.awz-qbv__btn--close:hover,
.awz-qbv__btn--close:focus-visible { background: var(--awz-red-050, #FFF5F5); color: var(--awz-red-600, #ED1C24); }

.awz-qbv__btn[hidden] { display: none; }

.awz-qbv :focus-visible { outline: 2px solid var(--qbv-accent); outline-offset: 2px; }
.awz-qbv__panel:focus,
.awz-qbv__panel:focus-visible { outline: none; }

/* stage */
.awz-qbv__stage {
	position: relative;
	background: var(--qbv-stage);
	overflow: hidden;
}

.awz-qbv__scroll {
	position: absolute;
	inset: 0;
	display: flex;
	padding: clamp(0.75rem, 2.5vw, 2rem);
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.awz-qbv__page {
	display: block;
	flex: none;
	margin: auto;      /* safe centring: stays scrollable when zoomed */
	max-inline-size: 100%;
	max-block-size: 100%;
	inline-size: auto;
	block-size: auto;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 1px 2px rgb(15 32 56 / 8%), 0 18px 44px rgb(15 32 56 / 12%);
	cursor: zoom-in;
	transition: opacity 320ms ease, transform 520ms var(--qbv-ease), filter 320ms ease;
	user-select: none;
	-webkit-user-drag: none;
}

.awz-qbv__page.is-leaving { opacity: 0; transform: translateX(calc(-14px * var(--qbv-dir, 1))) scale(0.985); filter: blur(2px); }
.awz-qbv__page.is-entering { opacity: 0; transform: translateX(calc(14px * var(--qbv-dir, 1))) scale(0.985); filter: blur(2px); }

/* zoomed: the image takes its natural reading size and the stage scrolls */
.awz-qbv.is-zoomed .awz-qbv__page {
	max-inline-size: none;
	max-block-size: none;
	inline-size: min(1600px, 180%);
	cursor: zoom-out;
}

.awz-qbv__frame {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	background: var(--qbv-stage);
}

.awz-qbv__nav {
	position: absolute;
	z-index: 2;
	inset-block-start: 50%;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 80%);
	border-radius: 50%;
	background: rgb(255 255 255 / 92%);
	color: var(--awz-ink, #0F2038);
	box-shadow: 0 8px 22px rgb(15 32 56 / 12%);
	cursor: pointer;
	translate: 0 -50%;
	transition: background-color 240ms ease, color 240ms ease, scale 420ms var(--qbv-ease), opacity 240ms ease;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.awz-qbv__nav svg { inline-size: 1.1rem; block-size: 1.1rem; }
.awz-qbv__nav--prev { inset-inline-start: 1rem; }
.awz-qbv__nav--prev svg { scale: -1 1; }
.awz-qbv__nav--next { inset-inline-end: 1rem; }
[dir="rtl"] .awz-qbv__nav--prev svg { scale: 1 1; }
[dir="rtl"] .awz-qbv__nav--next svg { scale: -1 1; }

.awz-qbv__nav:hover { background: var(--qbv-accent); color: #fff; scale: 1.06; }
.awz-qbv__nav[disabled] { opacity: 0; pointer-events: none; }
.awz-qbv__nav[hidden] { display: none; }
.awz-qbv.is-zoomed .awz-qbv__nav { opacity: 0.35; }

/* fallback (phone, PDF only) */
.awz-qbv__fallback {
	display: grid;
	justify-items: center;
	gap: 1rem;
	max-inline-size: 360px;
	text-align: center;
}

.awz-qbv__fallback img {
	inline-size: min(240px, 70%);
	border-radius: 4px;
	box-shadow: 0 18px 44px rgb(15 32 56 / 14%);
}

.awz-qbv__fallback p { margin: 0; color: var(--awz-slate-600, #6B7B95); font-size: var(--awz-fs-sm, 0.9rem); }

.awz-qbv__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border-radius: 12px;
	background: var(--qbv-accent);
	color: #fff;
	font-size: var(--awz-fs-sm, 0.9rem);
	font-weight: var(--awz-weight-semi, 600);
	text-decoration: none;
}

.awz-qbv__cta svg { inline-size: 1rem; block-size: 1rem; }

/* loader */
.awz-qbv__spin {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 28px;
	block-size: 28px;
	margin: -14px;
	border: 2px solid rgb(32 64 154 / 16%);
	border-block-start-color: var(--qbv-accent);
	border-radius: 50%;
	opacity: 0;
	animation: qbv-spin 800ms linear infinite;
	transition: opacity 200ms ease;
	pointer-events: none;
}

.awz-qbv.is-loading .awz-qbv__spin { opacity: 1; }

@keyframes qbv-spin { to { rotate: 360deg; } }

/* thumbnails */
.awz-qbv__thumbs {
	display: flex;
	gap: 0.5rem;
	padding: 0.7rem 1rem;
	border-block-start: 1px solid var(--awz-line, #E8EDF5);
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: thin;
}

.awz-qbv__thumbs:empty,
.awz-qbv__thumbs[hidden] { display: none; }

.awz-qbv__thumb {
	flex: none;
	inline-size: 46px;
	aspect-ratio: 1 / 1.414;
	padding: 0;
	border: 1px solid var(--awz-line, #E8EDF5);
	border-radius: 5px;
	background: #fff;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.62;
	transition: opacity 240ms ease, border-color 240ms ease, box-shadow 240ms ease, transform 420ms var(--qbv-ease);
}

.awz-qbv__thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; }
.awz-qbv__thumb:hover { opacity: 1; transform: translateY(-2px); }
.awz-qbv__thumb.is-active { opacity: 1; border-color: var(--qbv-accent); box-shadow: 0 0 0 2px rgb(32 64 154 / 18%); }

html.awz-qbv-lock { overflow: hidden; }

@media (max-width: 767px) {
	.awz-qbv { padding: 0; }
	.awz-qbv__panel { inline-size: 100%; block-size: 100%; border-radius: 0; }
	.awz-qbv__head { padding-inline: 1rem 0.6rem; gap: 0.6rem; }
	.awz-qbv__btn--open { display: none; }
	.awz-qbv__nav { inline-size: 2.4rem; block-size: 2.4rem; }
	.awz-qbv__nav--prev { inset-inline-start: 0.5rem; }
	.awz-qbv__nav--next { inset-inline-end: 0.5rem; }
	.awz-qbv__thumb { inline-size: 38px; }
}

/* ══ Reduced motion ══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.awz-qbc__card,
	.awz-qbc__paper,
	.awz-qbc__sheets > i,
	.awz-qbc__img,
	.awz-qbc__sheen,
	.awz-qbc__pill,
	.awz-qbv__panel,
	.awz-qbv__page,
	.awz-qbv__backdrop { transition: none !important; animation: none !important; }

	.awz-qbc__card:hover,
	.awz-qbc__card:hover .awz-qbc__paper { transform: none; }
	.awz-qbc__sheen { display: none; }
}