/* ═══════════════════════════════════════════════════════════════
   MENU FLIPBOOK — The Legend of Dragon Tea Suối Giàng
   Prefix: fb- (flipbook) to avoid conflicts with theme styles
   ═══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ───────────────────────────────────────────── */
:root {
	--fb-cream       : #F6F1E9;
	--fb-gold        : #C9A96E;
	--fb-gold-light  : #E8D5A8;
	--fb-gold-dim    : rgba(201, 169, 110, 0.32);
	--fb-dark        : #0C0B09;
	--fb-dark-mid    : #181714;
}

/* ── SECTION SHELL ───────────────────────────────────────────── */
body.page-template-restaurant-page .menu-flipbook {
	position        : relative;
	display         : flex;
	flex-direction  : column;
	align-items     : center;
	/* prevent horizontal scroll from book shadow */
	overflow-x      : hidden;
	padding-bottom  : 4rem;
}

/* Dark luxury background — pseudo so it doesn't affect children stacking */
body.page-template-restaurant-page .menu-flipbook::before {
	content         : '';
	position        : absolute;
	inset           : 0;
	z-index         : 0;
	pointer-events  : none;
	/* background      :
		radial-gradient(ellipse 58% 44% at 10% 88%, rgba(201,169,110,0.09) 0%, transparent 65%),
		radial-gradient(ellipse 48% 38% at 90% 10%, rgba(201,169,110,0.06) 0%, transparent 60%),
		linear-gradient(168deg, #191916 0%, #0E0E0C 55%, #080807 100%); */
}

/* ── HEADER ──────────────────────────────────────────────────── */
section.menu-flipbook {
    text-align: center;
}
section.menu-flipbook p.brand-mark {
    margin-bottom: 0;
    color: #800404;
    font-weight: 600;
}
section.menu-flipbook h1.flipbook-title {
    color: #cc9933;
    font-weight: bold;
}
section.menu-flipbook h1.flipbook-title em {
    color: #800404;
}
div#fb-stage-wrap {
    /* padding-bottom: 50px; */
    text-align: center;
}

div#fb-stage {
    margin: 0 auto;
}

.flipbook-header {
	position        : relative;
	z-index         : 10;
	text-align      : center;
	padding         : 3rem 1.5rem 1.75rem;
	width           : 100%;
}

.brand-mark {
	display         : block;
	font-size       : 10px;
	font-weight     : 400;
	letter-spacing  : 0.48em;
	text-transform  : uppercase;
	color           : var(--fb-gold);
	opacity         : 0.7;
	margin-bottom   : 0.55rem;
}

.flipbook-title {
	/* font-family     : 'Cormorant Garamond', 'Playfair Display', Georgia, serif; */
	font-size       : clamp(1.75rem, 4vw, 2.8rem);
	font-weight     : 300;
	color           : var(--fb-cream);
	letter-spacing  : 0.06em;
	line-height     : 1.2;
}
.flipbook-title em {
	font-style      : italic;
	color           : var(--fb-gold);
}

.gold-divider {
	display         : flex;
	align-items     : center;
	justify-content : center;
	gap             : 10px;
	margin          : 1rem auto 0.85rem;
	width           : 240px;
}
.gold-divider::before,
.gold-divider::after {
	content         : '';
	flex            : 1;
	height          : 0.5px;
}
.gold-divider::before { background: linear-gradient(90deg, transparent, var(--fb-gold)); }
.gold-divider::after  { background: linear-gradient(90deg, var(--fb-gold), transparent); }
.gold-diamond {
	width           : 6px;
	height          : 6px;
	border          : 1px solid var(--fb-gold);
	transform       : rotate(45deg);
	flex-shrink     : 0;
	opacity         : 0.75;
}

.flipbook-hint {
	display         : flex;
	align-items     : center;
	justify-content : center;
	gap             : 8px;
	font-size       : 0.69rem;
	color           : rgba(201,169,110,0.4);
	letter-spacing  : 0.07em;
}
.hint-dot {
	width           : 4px;
	height          : 4px;
	border-radius   : 50%;
	background      : var(--fb-gold);
	opacity         : 0.4;
	animation       : fb-pulse 2.4s ease-in-out infinite;
}
.hint-dot:last-child { animation-delay: 1.2s; }
@keyframes fb-pulse { 0%,100%{opacity:.18} 50%{opacity:.7} }

/* ── APP WRAPPER ─────────────────────────────────────────────── */
#flipbook-app {
	position        : relative;
	z-index         : 10;
	display         : flex;
	flex-direction  : column;
	align-items     : center;
	width           : 100%;
	/* horizontal padding so book shadow doesn't touch screen edge */
	padding         : 0 16px;
}

/* ── STAGE WRAPPER ───────────────────────────────────────────── */
#fb-stage-wrap {
	display         : flex;
	flex-direction  : column;
	align-items     : center;
	gap             : 1.5rem;
	width           : 100%;
}


#fb-stage {
	position        : relative;
	overflow        : visible;
	/* Layered drop-shadows for book depth */
	filter          :
		drop-shadow(0 3px 6px rgba(0,0,0,0.42))
		drop-shadow(0 16px 40px rgba(0,0,0,0.48));
	transition      : filter 0.35s ease;
}
#fb-stage:hover {
	filter          :
		drop-shadow(0 3px 6px rgba(0,0,0,0.48))
		drop-shadow(0 20px 50px rgba(0,0,0,0.52))
		drop-shadow(0 0 64px rgba(201,169,110,0.05));
}

#fb-book {
	width           : 100%;
	height          : 100%;
}

/* ── PAGE BASE ───────────────────────────────────────────────── */
.fb-page {
	background      : var(--fb-cream);
	position        : relative;
	overflow        : hidden;
	user-select     : none;
}

.fb-page-inner {
	width           : 100%;
	height          : 100%;
	display         : flex;
	overflow        : hidden;
}


.fb-page-inner img {
	width           : 100%;
	height          : 100%;
	object-fit      : contain;
	object-position : center;
	display         : block;
	background      : var(--fb-cream);
	will-change     : transform;
}

/* Subtle inset line simulating paper edge */
.fb-page::after {
	content         : '';
	position        : absolute;
	inset           : 0;
	pointer-events  : none;
	box-shadow      : inset 0 0 0 0.5px rgba(120,90,15,0.1);
}

/* ── NAVIGATION ──────────────────────────────────────────────── */
.fb-nav {
	display         : flex;
	align-items     : center;
	gap             : 1.1rem;
}

.fb-btn {
	width           : 44px;
	height          : 44px;
	border-radius   : 50%;
	border          : 0.5px solid var(--fb-gold-dim);
	background      : rgba(201,169,110,0.07);
	color           : var(--fb-gold);
	display         : flex;
	align-items     : center;
	justify-content : center;
	cursor          : pointer;
	transition      : background .2s ease, border-color .2s ease, transform .12s ease;
}
.fb-btn:hover  { background: rgba(201,169,110,0.17); border-color: var(--fb-gold); }
.fb-btn:active { transform: scale(0.9); }

.fb-indicator {
	font-family     : 'Cormorant Garamond', Georgia, serif;
	font-size       : 1rem;
	color           : var(--fb-gold-light);
	letter-spacing  : 0.16em;
	min-width       : 68px;
	text-align      : center;
	opacity         : 0.8;
}

/* Mobile zoom nudge */
.fb-mobile-hint {
	display         : none;
	font-size       : 0.68rem;
	color           : rgba(201,169,110,0.38);
	letter-spacing  : 0.06em;
	text-align      : center;
	margin-top      : -0.5rem;
}


/* Overlay — full viewport, flex row, centres image between arrows */
#fb-lb {
	display         : none !important; /* !important: JS overrides to 'flex !important' */
	position        : fixed !important;
	top             : 0 !important;
	left            : 0 !important;
	right           : 0 !important;
	bottom          : 0 !important;
	z-index         : 999999 !important;
	align-items     : center !important;
	justify-content : center !important;
	/* Prevent theme padding/margin leaking in */
	margin          : 0 !important;
	padding         : 0 !important;
}

/* JS adds this class to open — overrides the none above */
#fb-lb.is-open {
	display         : flex !important;
}

/* Dark backdrop — absolute inside the fixed overlay */
#fb-lb-bg {
	position        : absolute !important;
	top             : 0 !important;
	left            : 0 !important;
	right           : 0 !important;
	bottom          : 0 !important;
	background      : rgba(4, 3, 2, 0.94) !important;
	cursor          : pointer !important;
	z-index         : 0 !important;
}

/* Image wrapper — sits above backdrop (z-index 1), constrained size */
#fb-lb-imgwrap {
	position        : relative !important;
	z-index         : 1 !important;
	display         : flex !important;
	align-items     : center !important;
	justify-content : center !important;
	/* Max 86% of viewport in both axes, leaving room for arrows */
	max-width       : 86vw !important;
	max-height      : 90vh !important;
	flex            : 1 1 auto !important;
}

/* The actual image — must be fully visible */
#fb-lb-img {
	display         : block !important;
	max-width       : 100% !important;
	max-height      : 90vh !important;
	width           : auto !important;
	height          : auto !important;
	object-fit      : contain !important;
	border          : 0.5px solid rgba(201,169,110,0.15) !important;
	box-shadow      : 0 12px 48px rgba(0,0,0,0.75) !important;
	transition      : opacity 0.14s ease !important;
	/* Override any theme img rules */
	margin          : 0 auto !important;
	padding         : 0 !important;
	border-radius   : 0 !important;
}

/* Close × button — top-right corner, above everything */
#fb-lb-close {
	position        : fixed !important;
	top             : 14px !important;
	right           : 14px !important;
	z-index         : 1000000 !important;
	width           : 40px !important;
	height          : 40px !important;
	border-radius   : 50% !important;
	border          : 0.5px solid rgba(201,169,110,0.3) !important;
	background      : rgba(10,9,7,0.85) !important;
	color           : #E8D5A8 !important;
	font-size       : 22px !important;
	line-height     : 1 !important;
	display         : flex !important;
	align-items     : center !important;
	justify-content : center !important;
	cursor          : pointer !important;
	padding         : 0 !important;
	transition      : background .2s, border-color .2s !important;
}
#fb-lb-close:hover {
	background      : rgba(201,169,110,0.2) !important;
	border-color    : #C9A96E !important;
}

/* Prev / Next arrows — flex siblings of #fb-lb-imgwrap */
.fb-lb-arrow {
	position        : relative !important;
	z-index         : 1 !important;
	flex-shrink     : 0 !important;
	width           : 48px !important;
	height          : 48px !important;
	border-radius   : 50% !important;
	border          : 0.5px solid rgba(201,169,110,0.25) !important;
	background      : rgba(10,9,7,0.72) !important;
	color           : #C9A96E !important;
	display         : flex !important;
	align-items     : center !important;
	justify-content : center !important;
	cursor          : pointer !important;
	padding         : 0 !important;
	margin          : 0 10px !important;
	transition      : background .2s, border-color .2s, transform .12s !important;
}
.fb-lb-arrow:hover  {
	background      : rgba(201,169,110,0.18) !important;
	border-color    : #C9A96E !important;
}
.fb-lb-arrow:active { transform: scale(0.9) !important; }

/* Page counter — fixed at bottom centre */
#fb-lb-counter {
	position        : fixed !important;
	bottom          : 14px !important;
	left            : 50% !important;
	transform       : translateX(-50%) !important;
	z-index         : 1000000 !important;
	font-family     : 'Cormorant Garamond', Georgia, serif !important;
	font-size       : 0.88rem !important;
	color           : rgba(201,169,110,0.52) !important;
	letter-spacing  : 0.18em !important;
	white-space     : nowrap !important;
	pointer-events  : none !important;
	margin          : 0 !important;
	padding         : 0 !important;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 600px) {
	.flipbook-hint       { display: none; }
	.fb-mobile-hint      { display: block; }
	#fb-flipbook-app     { padding: 0 8px; }
	.fb-lb-arrow         { width: 40px; height: 40px; margin: 0 4px; }
	#fb-lb-imgwrap       { max-width: 100vw; max-height: 85vh; }
	#fb-lb-img           { max-height: 85vh; }
}