/* Binjimmy Studio guest card. Mobile first, max card width 460px. */

/* Fonts are bundled with the plugin (SIL Open Font License, see assets/fonts). */
@font-face { font-family: "Great Vibes"; src: url("../fonts/great-vibes.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond.woff") format("woff"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "BJS Kufi"; src: url("../fonts/sets/reemkufi.woff") format("woff"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "BJS Arab"; src: url("../fonts/sets/amiri.woff") format("woff"); font-display: swap; }
@font-face { font-family: "BJS Ruqah"; src: url("../fonts/sets/arefruqaa.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat.woff") format("woff"); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
	--col: 460px;
	--ease: cubic-bezier(.22, .61, .36, 1);
	--font-script: "BJS Script", "Great Vibes", "Brush Script MT", cursive;
	--font-serif: "BJS Serif", "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--font-sans: "BJS Sans", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Themes (backgrounds) */
.bjs-bg--ivory-emas {
	--bg: #FAF6EC; --ink: #3A342A; --heading: #1F3D2E; --gold: #B08A36; --muted: #7A705E;
	--panel: rgba(255, 252, 244, .94); --line: rgba(176, 138, 54, .35);
	--btn-bg: #1F3D2E; --btn-ink: #F3E6BF;
	--wash: radial-gradient(120% 60% at 50% 0%, #FFFDF6 0%, rgba(255,253,246,0) 60%), radial-gradient(90% 50% at 50% 100%, #F3EAD3 0%, rgba(243,234,211,0) 70%);
}
.bjs-bg--hijau-zamrud {
	--bg: #18332A; --ink: #EAE2CC; --heading: #F3E6BF; --gold: #D2B06A; --muted: #BDB49C;
	--panel: rgba(28, 58, 46, .95); --line: rgba(210, 176, 106, .35);
	--btn-bg: #D2B06A; --btn-ink: #18332A;
	--wash: radial-gradient(110% 55% at 50% 0%, #24493B 0%, rgba(36,73,59,0) 65%), radial-gradient(100% 50% at 50% 100%, #10261E 0%, rgba(16,38,30,0) 70%);
}
.bjs-bg--sage-lembut {
	--bg: #F7F6EF; --ink: #353B31; --heading: #3E5A45; --gold: #A9883F; --muted: #6E7368;
	--panel: rgba(255, 255, 251, .95); --line: rgba(169, 136, 63, .32);
	--btn-bg: #3E5A45; --btn-ink: #F7F6EF;
	--wash: radial-gradient(65% 32% at 8% 4%, rgba(148, 176, 142, .7) 0%, rgba(148,176,142,0) 70%), radial-gradient(60% 30% at 96% 10%, rgba(186, 204, 176, .75) 0%, rgba(186,204,176,0) 70%), radial-gradient(75% 32% at 90% 98%, rgba(148, 176, 142, .65) 0%, rgba(148,176,142,0) 70%), radial-gradient(65% 28% at 0% 92%, rgba(214, 196, 160, .55) 0%, rgba(214,196,160,0) 70%);
}

.bjs-bg--rose-gold {
	--bg: #FBF3F1; --ink: #4A3A3D; --heading: #5A2A3A; --gold: #B76E79; --muted: #8A6F73;
	--panel: rgba(255, 250, 249, .94); --line: rgba(183, 110, 121, .35);
	--btn-bg: #5A2A3A; --btn-ink: #FBE4E6;
	--wash: radial-gradient(120% 60% at 50% 0%, #FFF9F8 0%, transparent 60%), radial-gradient(90% 50% at 50% 100%, #F5E1DD 0%, transparent 70%);
}
.bjs-bg--biru-diraja {
	--bg: #F5F7FB; --ink: #2F3445; --heading: #1E2A4A; --gold: #B08A36; --muted: #6B7286;
	--panel: rgba(255, 255, 255, .94); --line: rgba(176, 138, 54, .35);
	--btn-bg: #1E2A4A; --btn-ink: #EDE3C8;
	--wash: radial-gradient(120% 60% at 50% 0%, #FFFFFF 0%, transparent 60%), radial-gradient(90% 50% at 50% 100%, #E6EBF4 0%, transparent 70%);
}
.bjs-bg--maroon-emas {
	--bg: #FBF6EF; --ink: #3D2B2B; --heading: #6B1F2A; --gold: #B08A36; --muted: #806A63;
	--panel: rgba(255, 252, 247, .94); --line: rgba(176, 138, 54, .35);
	--btn-bg: #6B1F2A; --btn-ink: #F3E1C0;
	--wash: radial-gradient(120% 60% at 50% 0%, #FFFBF5 0%, transparent 60%), radial-gradient(90% 50% at 50% 100%, #F2E3D0 0%, transparent 70%);
}
.bjs-bg--lavender {
	--bg: #F7F4FA; --ink: #3B3546; --heading: #4A3B63; --gold: #9C7FB8; --muted: #776F85;
	--panel: rgba(255, 253, 255, .94); --line: rgba(156, 127, 184, .35);
	--btn-bg: #4A3B63; --btn-ink: #EDE5F5;
	--wash: radial-gradient(120% 60% at 50% 0%, #FDFBFF 0%, transparent 60%), radial-gradient(90% 50% at 50% 100%, #EAE1F3 0%, transparent 70%);
}
.bjs-bg--terracotta {
	--bg: #FBF5EF; --ink: #43362E; --heading: #5B3A29; --gold: #C0703F; --muted: #85715F;
	--panel: rgba(255, 251, 247, .94); --line: rgba(192, 112, 63, .35);
	--btn-bg: #5B3A29; --btn-ink: #F6E1CF;
	--wash: radial-gradient(120% 60% at 50% 0%, #FFFAF5 0%, transparent 60%), radial-gradient(90% 50% at 50% 100%, #F3E1CF 0%, transparent 70%);
}
.bjs-bg--malam-emas {
	--bg: #151515; --ink: #E6DFD2; --heading: #F3E6BF; --gold: #C9A45C; --muted: #A79F90;
	--panel: rgba(32, 30, 26, .94); --line: rgba(201, 164, 92, .35);
	--btn-bg: #C9A45C; --btn-ink: #151515;
	--wash: radial-gradient(120% 60% at 50% 0%, #2A251C 0%, transparent 60%), radial-gradient(90% 50% at 50% 100%, #0B0B0B 0%, transparent 70%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.bjs {
	margin: 0;
	min-height: 100vh;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-serif);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
body.bjs:not(.is-open) { overflow: hidden; height: 100vh; height: 100dvh; }
.bjs button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.bjs [hidden] { display: none !important; }

/* Background layer: fixed, drifts slowly (parallax in card.js). */
.bjs-backdrop {
	position: fixed;
	top: 0;
	left: 50%;
	width: min(100vw, var(--col));
	/* 80px taller than the screen: the layer drifts up to 60px when scrolling, so the bottom never shows a gap */
	height: calc(100vh + 80px);
	height: calc(100lvh + 80px);
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
	will-change: transform;
}
.bjs-backdrop__wash {
	position: absolute;
	inset: -10%;
	background: var(--wash);
}
.bjs-backdrop::after {
	/* soft paper grain */
	content: "";
	position: absolute;
	inset: 0;
	opacity: .22;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .35 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bjs-bg--hijau-zamrud .bjs-backdrop::after, .bjs-bg--malam-emas .bjs-backdrop::after { mix-blend-mode: soft-light; opacity: .35; }
/* Backgrounds uploaded in Merak Kayangan > Latar: the photo fills the frame, a light veil keeps text readable. */
.bjs-bg--custom .bjs-backdrop__wash { inset: -6%; background: var(--bg-img) center / cover no-repeat, #222; }
.bjs-bg--custom .bjs-backdrop::after { background-image: none; mix-blend-mode: normal; background: #FFFFFF; opacity: .14; }
.bjs-tone--gelap .bjs-backdrop::after { background: #000000; opacity: .16; }
/* Uploaded photo backgrounds: boxes become frosted glass so they take the photo's colours.
   Gelap = light text on darkened glass, Cerah = dark text on milky glass. Heading colour can be set per photo. */
.bjs-tone--gelap {
	--ink: #F7F2E8; --heading: #FFFFFF; --muted: rgba(255, 255, 255, .78); --gold: #E2C27E;
	--panel: rgba(10, 8, 16, .3); --line: rgba(255, 255, 255, .28);
	--btn-bg: rgba(255, 255, 255, .2); --btn-ink: #FFFFFF;
	--sheet: rgba(18, 14, 24, .64);
}
.bjs-tone--cerah {
	--ink: #2B2723; --heading: #1E1A16; --muted: rgba(30, 26, 22, .66); --gold: #A07A2C;
	--panel: rgba(255, 255, 255, .42); --line: rgba(30, 26, 22, .18);
	--btn-bg: rgba(30, 26, 22, .78); --btn-ink: #FFFFFF;
	--sheet: rgba(255, 255, 255, .86);
}
.bjs-bg--custom .bjs-wish-box,
.bjs-bg--custom .bjs-count div,
.bjs-bg--custom .bjs-music,
.bjs-bg--custom .bjs-dock,
.bjs-bg--custom .bjs-open,
.bjs-bg--custom .bjs-btn--solid,
.bjs-bg--custom .bjs-icon-btn {
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
}
.bjs-bg--custom .bjs-btn--solid, .bjs-bg--custom .bjs-open { border: 1px solid var(--line); }
.bjs-bg--custom .bjs-sheet, .bjs-bg--hijau-zamrud.bjs-bg--custom .bjs-sheet {
	background: var(--sheet);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	backdrop-filter: blur(20px) saturate(1.3);
}
.bjs-tone--gelap .bjs-input { background: rgba(0, 0, 0, .22); border-color: var(--line); color: var(--ink); }
.bjs-tone--cerah .bjs-input { background: rgba(255, 255, 255, .6); }

/* Wide screens (tablet, laptop): the space beside the card shows the same photo, blurred and dimmed */
body.bjs-bg--custom::before {
	content: "";
	position: fixed;
	inset: -60px;
	z-index: -1;
	background: var(--bg-img) center / cover no-repeat;
	filter: blur(28px) brightness(.72);
	pointer-events: none;
}
.bjs-orn {
	position: absolute;
	width: clamp(130px, 44vw, 205px);
	color: var(--gold);
	opacity: .9;
}
.bjs-orn svg { display: block; width: 100%; height: auto; }
.bjs-orn--tl { top: -4px; left: -4px; }
.bjs-orn--tr { top: -4px; right: -4px; transform: scaleX(-1); }
.bjs-orn--bl { bottom: 76px; left: -4px; transform: scaleY(-1); }
.bjs-orn--br { bottom: 76px; right: -4px; transform: scale(-1, -1); }
.bjs.is-opening .bjs-backdrop__wash,
.bjs.is-opening .bjs-orn svg { animation: bjs-camera 2s var(--ease) both; }
@keyframes bjs-camera {
	0% { transform: scale(1); }
	45% { transform: scale(1.12) translateY(-1.5%); }
	100% { transform: scale(1); }
}

/* Falling decoration canvas */
.bjs-deco {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(100vw, var(--col));
	height: 100vh;
	height: 100lvh;
	pointer-events: none;
	z-index: 1;
}

/* Loader: three pulsing dots */
.bjs-loader {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	z-index: 40;
	transition: opacity .5s ease;
}
.bjs-loader span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--gold);
	animation: bjs-dot 1s ease-in-out infinite;
}
.bjs-loader span:nth-child(2) { animation-delay: .15s; }
.bjs-loader span:nth-child(3) { animation-delay: .3s; }
@keyframes bjs-dot {
	0%, 100% { transform: scale(.6); opacity: .4; }
	50% { transform: scale(1); opacity: 1; }
}
.bjs:not(.is-loading) .bjs-loader { opacity: 0; pointer-events: none; }

/* Cover */
.bjs-cover {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
}
.bjs-cover__inner { transition: filter 1s var(--ease), opacity 1s var(--ease), transform 1.2s var(--ease); }
.bjs-cover__item {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.bjs.is-ready .bjs-cover__item { opacity: 1; transform: none; }
.bjs.is-ready .bjs-cover__item:nth-child(2) { transition-delay: .2s; }
.bjs.is-ready .bjs-cover__item:nth-child(3) { transition-delay: .4s; }
.bjs.is-ready .bjs-cover__item:nth-child(4) { transition-delay: .6s; }
.bjs.is-opening .bjs-cover__inner { filter: blur(12px); opacity: 0; transform: scale(1.05); }
.bjs.is-open .bjs-cover { display: none; }
.bjs-cover__date {
	font-size: 17px;
	letter-spacing: .08em;
	color: var(--muted);
	margin: 18px 0 30px;
}

.bjs-open {
	appearance: none;
	border: 0;
	cursor: pointer;
	background: var(--btn-bg);
	color: var(--btn-ink) !important;
	font-family: var(--font-sans) !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .28em;
	text-transform: uppercase;
	padding: 13px 34px 13px 38px;
	border-radius: 999px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.bjs-open:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.bjs.is-opening .bjs-open { animation: bjs-glow .9s ease-out; }
@keyframes bjs-glow {
	0% { box-shadow: 0 0 0 0 rgba(210, 176, 106, .7); }
	100% { box-shadow: 0 0 0 26px rgba(210, 176, 106, 0); }
}

/* Shared type */
.bjs-kicker {
	font-family: var(--font-serif);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--heading);
	margin: 0 0 6px;
}
.bjs-names {
	font-family: var(--font-script);
	font-weight: 400;
	color: var(--heading);
	font-size: clamp(54px, 16vw, 72px);
	line-height: 1.05;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.bjs-names .bjs-amp { font-size: .6em; color: var(--gold); line-height: 1.1; }
.bjs-small-caps {
	font-size: 14px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 22px;
}
.bjs-body { font-size: 18.5px; line-height: 1.6; margin: 0 0 22px; }
.bjs-italic { font-style: italic; }
.bjs-amp-sm { display: block; color: var(--gold); font-size: 22px; margin: 4px 0; font-weight: 400; }

/* Card body */
.bjs-card {
	position: relative;
	z-index: 2;
	max-width: var(--col);
	margin: 0 auto;
	visibility: hidden;
	text-align: center;
	padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
.bjs.is-open .bjs-card { visibility: visible; }
.bjs-sec { padding: 40px 30px; }
.bjs-hero {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 70px;
}
.bjs-hero__day {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--heading);
	margin: 26px 0 2px;
}
.bjs-hero__date { font-size: 22px; letter-spacing: .06em; margin: 0 0 10px; }
.bjs-hero__venue {
	font-size: 14px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0;
}
.bjs-scroll-hint {
	margin-top: 46px;
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--muted);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.bjs-scroll-hint span {
	width: 1px;
	height: 34px;
	background: linear-gradient(var(--gold), transparent);
	animation: bjs-hint 2s ease-in-out infinite;
	transform-origin: top;
}
@keyframes bjs-hint {
	0% { transform: scaleY(0); opacity: 1; }
	70% { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; }
}

.bjs-divider { color: var(--gold); margin: 0 auto 30px; width: min(240px, 70%); }
.bjs-divider svg { display: block; width: 100%; height: auto; }

.bjs-parents, .bjs-couple {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--heading);
	line-height: 1.4;
	margin: 0 0 22px;
}
.bjs-couple { font-size: 21px; margin-top: 4px; }

.bjs-detail { margin: 0 0 26px; }
.bjs-detail h3, .bjs-sheet h3 {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 8px;
}
.bjs-detail p { font-size: 19px; line-height: 1.5; margin: 0; }
.bjs-detail strong { font-weight: 600; color: var(--heading); }

.bjs-btn-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.bjs-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-sans);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .05em;
	text-decoration: none;
	color: var(--heading);
	border: 1px solid var(--gold);
	border-radius: 999px;
	padding: 10px 18px;
	background: transparent;
	min-height: 44px;
}
.bjs-btn svg { width: 17px; height: 17px; }
.bjs-btn--solid { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.bjs-btn-row--full { flex-direction: column; }
.bjs-btn-row--full .bjs-btn { width: 100%; justify-content: center; font-size: 13.5px; min-height: 50px; }

.bjs-sec-title {
	font-size: 26px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--heading);
	margin: 0 0 20px;
}
.bjs-count { display: flex; justify-content: center; gap: 10px; }
.bjs-count div {
	width: 70px;
	padding: 12px 0 10px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--panel);
}
.bjs-count b {
	display: block;
	font-size: 32px;
	font-weight: 500;
	line-height: 1;
	color: var(--heading);
	font-variant-numeric: tabular-nums;
}
.bjs-count span {
	display: block;
	margin-top: 6px;
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--muted);
}
.bjs-signoff { font-family: var(--font-script); font-size: 38px; color: var(--heading); margin: 6px 0 0; }
.bjs-foot {
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted);
	opacity: .7;
	padding: 20px 0 10px;
}

/* Reveal effects */
.bjs-seq, .bjs-reveal {
	opacity: 0;
	transform: translateY(26px);
	filter: blur(4px);
	transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease);
}
.bjs-seq.is-in, .bjs-reveal.is-in { opacity: 1; transform: none; filter: none; }

/* Music pill */
.bjs-music {
	position: fixed;
	top: calc(12px + env(safe-area-inset-top));
	left: 50%;
	z-index: 15;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: min(78vw, 320px);
	padding: 7px 14px 7px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--panel);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-family: var(--font-sans) !important;
	font-size: 11px;
	cursor: pointer;
	opacity: 0;
	transform: translate(-50%, -16px);
	pointer-events: none;
	transition: opacity .8s var(--ease) .6s, transform .8s var(--ease) .6s;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
.bjs.is-open .bjs-music { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.bjs-music__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.bjs-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.bjs-eq i { width: 3px; height: 4px; background: var(--gold); border-radius: 1px; }
.bjs-music[aria-pressed="true"] .bjs-eq i { animation: bjs-eq .9s ease-in-out infinite; }
.bjs-music[aria-pressed="true"] .bjs-eq i:nth-child(2) { animation-delay: .2s; }
.bjs-music[aria-pressed="true"] .bjs-eq i:nth-child(3) { animation-delay: .4s; }
@keyframes bjs-eq {
	0%, 100% { height: 4px; }
	50% { height: 12px; }
}

/* Bottom icon bar */
.bjs-dock {
	position: fixed;
	bottom: 0;
	left: 50%;
	z-index: 15;
	width: min(100%, var(--col));
	display: flex;
	justify-content: space-around;
	padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
	background: var(--panel);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid var(--line);
	border-radius: 18px 18px 0 0;
	box-shadow: 0 -6px 20px rgba(0, 0, 0, .06);
	transform: translate(-50%, 110%);
	transition: transform .9s var(--ease) .35s;
}
.bjs.is-open .bjs-dock { transform: translate(-50%, 0); }
.bjs-dock:empty { display: none; }
.bjs-dock button {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 64px;
	min-height: 48px;
	padding: 4px 6px;
	color: var(--heading);
	border-radius: 12px;
}
.bjs-dock button:focus-visible { outline: 2px solid var(--gold); }
.bjs-dock svg { width: 23px; height: 23px; }
.bjs-dock span {
	font-family: var(--font-sans);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .04em;
}

/* Pop-up panels */
.bjs-sheet-backdrop {
	position: fixed;
	inset: 0;
	z-index: 30;
	background: rgba(10, 16, 12, .38);
	opacity: 0;
	transition: opacity .3s ease;
}
.bjs-sheet-backdrop.is-visible { opacity: 1; }
.bjs-sheet {
	position: fixed;
	left: 50%;
	bottom: 0;
	z-index: 31;
	width: min(100%, var(--col));
	max-height: 80vh;
	overflow-y: auto;
	padding: 18px 22px calc(26px + env(safe-area-inset-bottom));
	background: var(--panel);
	color: var(--ink);
	border-radius: 22px 22px 0 0;
	box-shadow: 0 -10px 30px rgba(0, 0, 0, .15);
	transform: translate(-50%, 100%);
	transition: transform .4s var(--ease);
}
.bjs-sheet.is-visible { transform: translate(-50%, 0); }
.bjs-bg--hijau-zamrud .bjs-sheet { background: #1C3A2E; }
.bjs-bg--malam-emas .bjs-sheet { background: #1E1C18; }
.bjs-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bjs-sheet__head h3 { margin: 0; }
.bjs-sheet__close {
	appearance: none;
	background: none;
	border: 0;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	cursor: pointer;
	color: var(--muted);
}
.bjs-sheet__close svg { width: 22px; height: 22px; }
.bjs-sheet__text { font-size: 19px; line-height: 1.5; margin: 6px 0 16px; text-align: center; }
.bjs-sheet__text strong { color: var(--heading); }
.bjs-list { list-style: none; margin: 0; padding: 0; }
.bjs-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
}
.bjs-list li:last-child { border-bottom: 0; }
.bjs-list__name { font-size: 19px; font-weight: 500; }
.bjs-list__actions { display: flex; gap: 8px; }
.bjs-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--btn-bg);
	color: var(--btn-ink);
}
.bjs-icon-btn svg { width: 20px; height: 20px; }

/* ---------- Stage 2 ---------- */

.bjs .bjs-btn { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--heading); cursor: pointer; }
.bjs .bjs-btn--solid { color: var(--btn-ink); }
.bjs .bjs-btn--wide { font-size: 13.5px; }
.bjs-btn--wide { width: 100%; justify-content: center; min-height: 50px; font-size: 13.5px; }
.bjs-sec .bjs-btn--wide { max-width: 300px; }
.bjs-btn:disabled { opacity: .6; cursor: default; }

/* Programme */
.bjs-prog-list { list-style: none; margin: 0 auto; padding: 0; max-width: 340px; text-align: left; }
.bjs-prog-list li {
	display: grid;
	grid-template-columns: 128px 1fr;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	align-items: baseline;
}
.bjs-prog-list li:last-child { border-bottom: 0; }
.bjs-prog-time {
	font-family: var(--font-sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--gold);
	text-align: right;
	white-space: nowrap;
}
.bjs-prog-text { font-size: 19px; line-height: 1.35; }

/* Gallery: auto polaroid stack */
.bjs-pola { max-width: 300px; margin: 0 auto; }
.bjs-pola__bars { display: flex; gap: 4px; width: 230px; margin: 0 auto 4px; }
.bjs-pola__bars span { flex: 1; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.bjs-pola__bars i { display: block; height: 100%; width: 0; background: var(--gold); }
.bjs-pola__stack {
	position: relative;
	height: 360px;
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}
.bjs-pola__stack:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 8px; }
.bjs-pola__card {
	position: absolute;
	left: 50%;
	top: 22px;
	width: 236px;
	margin: 0;
	padding: 11px 11px 40px;
	background: #FFFEFA;
	border-radius: 3px;
	box-shadow: 0 10px 26px rgba(40, 32, 18, .16), 0 1px 3px rgba(40, 32, 18, .12);
	transform: translateX(-50%);
	transition: transform .9s var(--ease), opacity .9s ease;
	will-change: transform, opacity;
}
.bjs-pola__win { height: 236px; overflow: hidden; border-radius: 2px; background: #EFE8D8; }
.bjs-pola__win img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); }
.bjs-pola__card.is-top .bjs-pola__win img { transform: scale(1.12); transition: transform 4.6s linear; }
.bjs-pola__card.is-leaving .bjs-pola__win img { transform: scale(1.12); }
.bjs-pola__card figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	text-align: center;
	font-family: var(--font-script);
	font-size: 22px;
	color: #3A342A;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 10px;
}

/* Wishes: one at a time */
.bjs-wish-box {
	max-width: 340px;
	min-height: 168px;
	margin: 0 auto 18px;
	padding: 22px 20px 20px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.bjs-wish-bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--line); }
.bjs-wish-bar i { display: block; height: 100%; width: 0; background: var(--gold); }
.bjs-wish-text { margin: 0; font-size: 19px; font-style: italic; line-height: 1.5; white-space: pre-line; word-wrap: break-word; }
.bjs-wish-name {
	display: block;
	margin-top: 12px;
	font-style: normal;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold);
}
.bjs-wish-name:empty { display: none; }
.bjs-wish-box .bjs-wish-empty { margin: 0; }

/* Forms inside panels */
.bjs-form { text-align: left; }
.bjs-label {
	display: block;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 14px 0 6px;
}
.bjs-label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.bjs-input {
	width: 100%;
	font-family: var(--font-sans);
	font-size: 16px; /* 16px stops iPhone zooming in */
	color: var(--ink);
	background: rgba(255, 255, 255, .7);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 12px 14px;
	outline: none;
}
.bjs-bg--hijau-zamrud .bjs-input, .bjs-bg--malam-emas .bjs-input { background: rgba(0, 0, 0, .25); }
.bjs-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176, 138, 54, .18); }
textarea.bjs-input { resize: vertical; min-height: 110px; line-height: 1.45; }
.bjs-choice { display: flex; gap: 10px; }
.bjs-choice label { flex: 1; }
.bjs-choice input { position: absolute; opacity: 0; pointer-events: none; }
.bjs-choice span {
	display: block;
	text-align: center;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 500;
	padding: 12px 8px;
	border: 1px solid var(--line);
	border-radius: 12px;
	cursor: pointer;
}
.bjs-choice input:checked + span { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.bjs-choice input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.bjs-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.bjs-counts .bjs-hint { grid-column: 1 / -1; }
.bjs-stepper > div { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.bjs-stepper button {
	width: 44px;
	height: 46px;
	border: 0;
	background: transparent;
	font-size: 22px;
	color: var(--heading);
	cursor: pointer;
}
.bjs-stepper input {
	flex: 1;
	min-width: 0;
	text-align: center;
	border: 0;
	background: transparent;
	font-family: var(--font-sans);
	font-size: 17px;
	font-weight: 600;
	color: var(--ink);
	-moz-appearance: textfield;
}
.bjs-stepper input::-webkit-outer-spin-button, .bjs-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bjs-hint { font-family: var(--font-sans); font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.bjs-counter { text-align: right; }
.bjs-form-msg { font-family: var(--font-sans); font-size: 13px; min-height: 18px; margin: 12px 0 10px; color: #A63D3D; }
.bjs-bg--hijau-zamrud .bjs-form-msg, .bjs-bg--malam-emas .bjs-form-msg { color: #F2A7A7; }
.bjs-form-done { text-align: center; padding: 10px 0; }
.bjs-done-text { font-size: 20px; line-height: 1.5; color: var(--heading); margin: 6px 0 18px; }
.bjs-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Gift */
.bjs-bank { text-align: center; padding: 6px 0 4px; }
.bjs-bank__name { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0; }
.bjs-bank__no { font-family: var(--font-sans); font-size: 26px; font-weight: 600; letter-spacing: .06em; color: var(--heading); margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.bjs-bank__holder { font-size: 19px; margin: 0 0 16px; }
.bjs-qr { text-align: center; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.bjs-qr img { width: min(240px, 70vw); height: auto; border-radius: 12px; background: #fff; padding: 8px; display: block; margin: 0 auto 12px; }

.bjs-toast {
	position: fixed;
	left: 50%;
	top: calc(58px + env(safe-area-inset-top));
	transform: translateX(-50%);
	z-index: 60;
	white-space: nowrap;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
	background: rgba(20, 24, 22, .92);
	color: #fff;
	font-family: var(--font-sans);
	font-size: 13px;
	padding: 10px 18px;
	border-radius: 999px;
}

/* Desktop: keep the card as a phone-width column */
@media (min-width: 700px) {
	body.bjs { background: color-mix(in srgb, var(--bg) 82%, #000 18%); }
	.bjs-backdrop { background: var(--bg); box-shadow: 0 0 60px rgba(0, 0, 0, .25); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
}

/* "Kad ini telah tamat" page */
.bjs-gone { overflow: auto !important; height: auto !important; }
.bjs-gone__box {
	position: relative;
	z-index: 2;
	min-height: 100vh;
	min-height: 100svh;
	max-width: 400px;
	margin: 0 auto;
	padding: 40px 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.bjs-gone__rings { width: 96px; color: var(--gold); margin: 18px 0 8px; }
.bjs-gone__title { font-family: var(--font-script); font-weight: 400; font-size: 46px; color: var(--heading); margin: 0 0 14px; line-height: 1.1; }
.bjs-gone .bjs-btn--wide { max-width: 300px; margin-top: 8px; }

/* ---------- Stage 3: preview ---------- */
.bjs-pre { white-space: pre-line; }
.bjs-block { display: block; }
.bjs-ribbon {
	position: fixed;
	top: 14px;
	right: -34px;
	z-index: 70;
	transform: rotate(40deg);
	background: #A63D3D;
	color: #fff;
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .2em;
	padding: 4px 40px;
	pointer-events: none;
}
.bjs-flash { animation: bjs-flash 1.1s ease-out; }
@keyframes bjs-flash {
	0% { box-shadow: inset 0 0 0 2px var(--gold); }
	100% { box-shadow: inset 0 0 0 2px transparent; }
}
.is-preview[data-preview="editor"] .bjs-scroll-hint { display: none; }
.is-preview[data-preview="editor"] .bjs-hero { min-height: 70vh; }
.is-preview[data-preview="editor"] .bjs-music { transition: none; }
.is-preview[data-preview="editor"] .bjs-dock { display: none; }
.is-preview[data-preview="editor"] .bjs-card { padding-bottom: 40px; }

/* Small live view inside a homepage phone */
.is-mini .bjs-deco { display: none; }
html:has(.is-mini) { scrollbar-width: none; }
html:has(.is-mini)::-webkit-scrollbar { display: none; }
.is-mini *, .is-mini *::before, .is-mini *::after { transition: none !important; }

/* Bismillah (front of the card) and the Arabic doa (closing) */
.bjs-bismillah { margin: 0 0 12px; color: var(--gold); font-family: "BJS Arab", serif; line-height: 1.4; text-align: center; }
.bjs-bismillah--naskh { font-size: 27px; color: var(--heading); }
.bjs-bismillah--ruqah { font-family: "BJS Ruqah", "BJS Arab", serif; font-size: 29px; }
.bjs-bismillah--kufi { font-family: "BJS Kufi", "BJS Arab", serif; font-weight: 600; font-size: 31px; line-height: 1.3; }
.bjs-doa { margin: 22px auto 0; max-width: 320px; font-family: "BJS Arab", serif; font-size: 21px; line-height: 1.85; color: var(--heading); text-align: center; }
.bjs-doa--ruqah { font-family: "BJS Ruqah", "BJS Arab", serif; color: var(--gold); }
.bjs-doa--kufi { font-family: "BJS Kufi", "BJS Arab", serif; font-weight: 500; font-size: 20px; line-height: 1.7; color: var(--gold); }
.bjs-hero .bjs-doa { margin: 18px auto 6px; }