/**
 * VT Flipbook — fixed landscape catalogue (FlipHTML5-style).
 */

* {
	box-sizing: border-box;
}

html,
body.vt-flipbook-body {
	background: #4b5563 !important;
	height: 100%;
	margin: 0;
}

.vt-flipbook-body {
	background: #4b5563 !important;
	color: #f1f5f9;
	font-family: "Be Vietnam Pro", "Segoe UI", sans-serif;
	overflow: hidden;
}

.vt-flipbook-body .site-header,
.vt-flipbook-body .vt-header,
.vt-flipbook-body header:not(.vt-flipbook__toolbar) {
	display: none !important;
}

.vt-flipbook {
	background: #4b5563;
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
	max-height: 100vh;
	max-height: 100dvh;
	overflow: hidden;
	position: relative;
	width: 100vw;
}

body.admin-bar .vt-flipbook {
	height: calc(100vh - 32px);
	height: calc(100dvh - 32px);
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .vt-flipbook {
		height: calc(100vh - 46px);
		height: calc(100dvh - 46px);
		max-height: calc(100vh - 46px);
		max-height: calc(100dvh - 46px);
	}
}

/* Toolbar */
.vt-flipbook__toolbar {
	align-items: center;
	background: rgba(20, 28, 40, 0.96);
	display: flex;
	flex: 0 0 auto;
	gap: 12px;
	height: 52px;
	max-height: 52px;
	overflow: hidden;
	padding: 0 16px;
	z-index: 50;
}

.vt-flipbook__back {
	align-items: center;
	display: inline-flex !important;
	flex: 0 0 auto;
	height: 28px;
	max-height: 28px;
	max-width: 120px;
	overflow: hidden;
	text-decoration: none;
}

.vt-flipbook__back img {
	display: block !important;
	height: 28px !important;
	max-height: 28px !important;
	max-width: 120px !important;
	object-fit: contain !important;
	width: auto !important;
}

.vt-flipbook__brand {
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
}

.vt-flipbook__title {
	color: rgba(255, 255, 255, 0.72);
	flex: 1 1 auto;
	font-size: 0.92rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vt-flipbook__cta {
	background: #0b6bcb;
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	flex: 0 0 auto;
	font-size: 0.88rem;
	font-weight: 700;
	padding: 10px 18px;
	white-space: nowrap;
}

.vt-flipbook__cta:hover {
	background: #0958a8;
}

.vt-flipbook__empty {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	padding: 40px;
}

.vt-flipbook__empty-hint {
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.9rem;
	max-width: 520px;
	text-align: center;
}

/* Viewport — fills remaining space between toolbar and bottom thumbs */
.vt-flipbook__viewport {
	align-items: center;
	background: #4b5563;
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	min-height: 0;
	overflow: hidden;
	padding: 6px 52px 4px;
	perspective: 2600px;
	position: relative;
}

.vt-flipbook__stage {
	align-items: center;
	background: #4b5563;
	container-type: size;
	display: flex;
	height: 100%;
	justify-content: center;
	position: relative;
	width: 100%;
}

/* Only one stage visible at a time (desktop spreads vs mobile single pages). */
.vt-flipbook__stage--mobile {
	display: none;
}

@media (max-width: 900px) {
	.vt-flipbook__stage--desktop {
		display: none !important;
	}

	.vt-flipbook__stage--mobile {
		display: flex !important;
	}
}

body.vt-flipbook-mobile .vt-flipbook__stage--desktop {
	display: none !important;
}

body.vt-flipbook-mobile .vt-flipbook__stage--mobile {
	display: flex !important;
}

body.vt-flipbook-desktop .vt-flipbook__stage--mobile {
	display: none !important;
}

body.vt-flipbook-desktop .vt-flipbook__stage--desktop {
	display: flex !important;
}

/*
 * Open book: pair of ~4:3 pages → 8:3.
 * Size to fill the stage (no hard 560px cap) so PC view is large and readable.
 */
.vt-flipbook__spread {
	align-items: stretch;
	aspect-ratio: 8 / 3;
	display: none;
	filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.42));
	height: min(100%, calc(100cqw * 3 / 8));
	left: 50%;
	max-height: 100%;
	max-width: 100%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(100%, calc(100cqh * 8 / 3));
}

/* Fallback when container queries unavailable */
@supports not (width: 1cqh) {
	.vt-flipbook__spread {
		height: auto;
		max-height: calc(100dvh - 130px);
		width: min(100%, calc((100dvh - 130px) * 8 / 3));
	}

	body.admin-bar .vt-flipbook__spread {
		max-height: calc(100dvh - 162px);
		width: min(100%, calc((100dvh - 162px) * 8 / 3));
	}
}

.vt-flipbook__spread.is-active,
.vt-flipbook__spread.is-leaving,
.vt-flipbook__spread.is-entering {
	display: flex;
}

.vt-flipbook__spread.is-active {
	z-index: 2;
}

/* Cover / single page: 4:3 — full image, fill available stage. */
.vt-flipbook__spread.is-cover,
.vt-flipbook__spread.is-single {
	aspect-ratio: 4 / 3;
	height: min(100%, calc(100cqw * 3 / 4));
	max-height: 100%;
	max-width: 100%;
	width: min(100%, calc(100cqh * 4 / 3));
}

@supports not (width: 1cqh) {
	.vt-flipbook__spread.is-cover,
	.vt-flipbook__spread.is-single {
		height: auto;
		max-height: calc(100dvh - 130px);
		width: min(100%, calc((100dvh - 130px) * 4 / 3));
	}

	body.admin-bar .vt-flipbook__spread.is-cover,
	body.admin-bar .vt-flipbook__spread.is-single {
		max-height: calc(100dvh - 162px);
		width: min(100%, calc((100dvh - 162px) * 4 / 3));
	}
}

.vt-flipbook__spread.is-cover .vt-flipbook__sheet--left {
	display: none;
}

.vt-flipbook__spread.is-cover .vt-flipbook__sheet--right,
.vt-flipbook__spread.is-single .vt-flipbook__sheet--single {
	border-radius: 4px;
	box-shadow: 10px 12px 32px rgba(0, 0, 0, 0.35);
	flex: 1 1 100%;
	max-width: 100%;
}

.vt-flipbook__sheet {
	background: transparent;
	flex: 1 1 50%;
	max-width: 50%;
	min-width: 0;
	overflow: hidden;
	position: relative;
}

.vt-flipbook__sheet--left {
	border-radius: 4px 0 0 4px;
}

.vt-flipbook__sheet--right {
	border-radius: 0 4px 4px 0;
}

/* Spine shadow — light so page content near fold stays readable */
.vt-flipbook__sheet--left::after {
	background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
	bottom: 0;
	content: "";
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	width: 18px;
	z-index: 2;
}

.vt-flipbook__sheet--right::before {
	background: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
	bottom: 0;
	content: "";
	pointer-events: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 18px;
	z-index: 2;
}

.vt-flipbook__spread:not(.is-cover)::after {
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.04) 45%,
		rgba(0, 0, 0, 0.08) 50%,
		rgba(0, 0, 0, 0.04) 55%,
		rgba(0, 0, 0, 0) 100%
	);
	bottom: 0;
	content: "";
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	width: 16px;
	z-index: 4;
}

.vt-flipbook__sheet img {
	display: block;
	height: 100%;
	object-fit: contain;
	object-position: center;
	user-select: none;
	width: 100%;
}

.vt-flipbook__sheet-blank {
	background: #4b5563;
	display: block;
	height: 100%;
	width: 100%;
}

.vt-flipbook__spread.is-leaving {
	z-index: 4;
}

.vt-flipbook__spread.is-leaving.is-forward {
	animation: vtFlipOutForward 0.55s ease forwards;
	transform-origin: left center;
}

.vt-flipbook__spread.is-leaving.is-backward {
	animation: vtFlipOutBackward 0.55s ease forwards;
	transform-origin: right center;
}

.vt-flipbook__spread.is-entering {
	animation: vtFlipIn 0.55s ease forwards;
	z-index: 3;
}

@keyframes vtFlipOutForward {
	0% {
		opacity: 1;
		transform: translate(-50%, -50%) rotateY(0deg);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -50%) rotateY(-70deg);
	}
}

@keyframes vtFlipOutBackward {
	0% {
		opacity: 1;
		transform: translate(-50%, -50%) rotateY(0deg);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -50%) rotateY(70deg);
	}
}

@keyframes vtFlipIn {
	0% {
		opacity: 0.4;
		transform: translate(-50%, -50%) scale(0.985);
	}
	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

.vt-flipbook__controls {
	align-items: center;
	bottom: 68px;
	display: flex;
	justify-content: space-between;
	left: 0;
	padding: 0 10px;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 52px;
	z-index: 40;
}

.vt-flipbook__nav {
	align-items: center;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	display: inline-flex;
	font-size: 1.8rem;
	height: 48px;
	justify-content: center;
	line-height: 1;
	pointer-events: auto;
	width: 48px;
}

.vt-flipbook__nav:hover {
	background: rgba(255, 255, 255, 0.25);
}

.vt-flipbook__nav:disabled {
	opacity: 0.28;
}

/* Bottom: counter + thumbs — always fully visible */
.vt-flipbook__bottombar {
	align-items: center;
	background: rgba(20, 28, 40, 0.96);
	display: flex;
	flex: 0 0 auto;
	flex-shrink: 0;
	gap: 14px;
	min-height: 68px;
	padding: 10px 16px;
	padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
	z-index: 50;
}

.vt-flipbook__counter {
	color: rgba(255, 255, 255, 0.7);
	flex: 0 0 auto;
	font-size: 0.88rem;
	font-variant-numeric: tabular-nums;
	min-width: 56px;
}

.vt-flipbook__thumbnails {
	display: flex;
	flex: 1 1 auto;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 4px 0;
	scrollbar-width: thin;
}

.vt-flipbook__thumb {
	background: transparent;
	border: 2px solid transparent;
	border-radius: 5px;
	cursor: pointer;
	flex: 0 0 auto;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 56px;
}

.vt-flipbook__thumb.is-active,
.vt-flipbook__thumb:hover {
	border-color: #3b82f6;
}

.vt-flipbook__thumb img {
	aspect-ratio: 1.35 / 1;
	display: block;
	object-fit: cover;
	width: 100%;
}

.vt-flipbook__thumb span {
	bottom: 1px;
	color: #fff;
	font-size: 0.62rem;
	position: absolute;
	right: 3px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

/* Partner modal */
.vt-partner-modal[hidden] {
	display: none !important;
}

.vt-partner-modal {
	inset: 0;
	position: fixed;
	z-index: 1000;
}

.vt-partner-modal__backdrop {
	background: rgba(8, 12, 20, 0.72);
	inset: 0;
	position: absolute;
}

.vt-partner-modal__dialog {
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	color: #0f172a;
	left: 50%;
	max-height: calc(100vh - 40px);
	max-width: 460px;
	overflow: auto;
	padding: 28px 24px 24px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 32px);
}

.vt-partner-modal__close {
	background: transparent;
	border: 0;
	color: #64748b;
	cursor: pointer;
	font-size: 1.6rem;
	line-height: 1;
	position: absolute;
	right: 12px;
	top: 10px;
}

.vt-partner-modal__title {
	font-size: 1.25rem;
	font-weight: 800;
	margin: 0 0 8px;
}

.vt-partner-modal__lead {
	color: #64748b;
	font-size: 0.92rem;
	line-height: 1.5;
	margin: 0 0 18px;
}

.vt-partner-modal__form {
	display: grid;
	gap: 12px;
}

.vt-partner-modal__form label {
	display: grid;
	gap: 6px;
}

.vt-partner-modal__form label span {
	color: #334155;
	font-size: 0.85rem;
	font-weight: 600;
}

.vt-partner-modal__form input,
.vt-partner-modal__form select,
.vt-partner-modal__form textarea {
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font: inherit;
	padding: 10px 12px;
	width: 100%;
}

.vt-partner-modal__form input:focus,
.vt-partner-modal__form select:focus,
.vt-partner-modal__form textarea:focus {
	border-color: #0b6bcb;
	outline: none;
	box-shadow: 0 0 0 3px rgba(11, 107, 203, 0.15);
}

.vt-partner-modal__submit {
	background: #0b6bcb;
	border: 0;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	font-weight: 700;
	margin-top: 4px;
	padding: 12px 16px;
}

.vt-partner-modal__submit:hover {
	background: #0958a8;
}

.vt-partner-modal__submit:disabled {
	opacity: 0.65;
}

.vt-partner-modal__status {
	border-radius: 8px;
	font-size: 0.9rem;
	margin: 0;
	padding: 10px 12px;
}

.vt-partner-modal__status.is-ok {
	background: #ecfdf5;
	color: #047857;
}

.vt-partner-modal__status.is-error {
	background: #fef2f2;
	color: #b91c1c;
}

@media (max-width: 900px) {
	.vt-flipbook__viewport {
		padding: 8px 44px 4px;
	}

	/* Mobile: one 4:3 page, full art visible (no crop). */
	.vt-flipbook__spread.is-single {
		aspect-ratio: 4 / 3;
		max-height: calc(100dvh - 140px);
		max-width: calc(100vw - 72px);
		width: min(calc(100vw - 72px), calc((100dvh - 140px) * 4 / 3));
		height: auto;
	}

	.vt-flipbook__spread.is-single .vt-flipbook__sheet--single {
		border-radius: 4px;
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
		max-width: 100%;
	}

	.vt-flipbook__spread.is-single::after,
	.vt-flipbook__spread.is-single .vt-flipbook__sheet--single::before,
	.vt-flipbook__spread.is-single .vt-flipbook__sheet--single::after {
		display: none;
	}

	.vt-flipbook__nav {
		height: 40px;
		width: 40px;
		font-size: 1.45rem;
	}

	.vt-flipbook__cta {
		font-size: 0.78rem;
		padding: 8px 12px;
	}

	.vt-flipbook__thumb {
		width: 44px;
	}
}

@media (max-width: 640px) {
	.vt-flipbook__title {
		display: none;
	}

	.vt-flipbook__viewport {
		padding: 6px 40px 4px;
	}

	.vt-flipbook__bottombar {
		gap: 10px;
		min-height: 60px;
		padding: 8px 10px;
		padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
	}

	.vt-flipbook__controls {
		bottom: 60px;
		padding: 0 4px;
	}
}

/* Landscape phone: maximize page area like desktop catalogue. */
@media (max-width: 900px) and (orientation: landscape) {
	.vt-flipbook__toolbar {
		height: 44px;
		max-height: 44px;
	}

	.vt-flipbook__bottombar {
		padding: 4px 12px;
	}

	.vt-flipbook__spread.is-single {
		aspect-ratio: 4 / 3;
		max-height: calc(100dvh - 108px);
		max-width: calc(100vw - 96px);
		width: min(calc(100vw - 96px), calc((100dvh - 108px) * 4 / 3));
		height: auto;
	}
}