@font-face { font-family: 'Batusa'; src: url('fonts/Batusa.otf') format('opentype'); font-display: swap; }
/* Wishes — white card for legibility on any theme background (photo/dark themes made the old translucent list
   unreadable). #wst-wishes outranks the themes' own cui-* rules, which force pale colours with !important. */
#wst-wishes.wst-wishes { background: #fff !important; color: #3d3d3d !important; border-radius: 16px; padding: 22px 20px 24px !important; box-shadow: 0 10px 30px rgba(0,0,0,.14); font-family: 'Batusa', Georgia, serif; text-align: left; }
#wst-wishes .wst-counts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; padding: 0 0 16px; margin: 0 0 16px; font-size: 13px; color: #6b6b6b !important; background: none !important; backdrop-filter: none !important; border-bottom: 1px solid #e4e6ea; border-radius: 0; }
#wst-wishes .wst-counts b { font-size: 15px; color: #1f1f1f; }
#wst-wishes .cui-container-form { display: grid; gap: 10px; }
#wst-wishes .cui-container-form input[type=text],
#wst-wishes .cui-container-form textarea,
#wst-wishes .cui-container-form select { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 8px; border: 1px solid #d5d9df !important; background: #fff !important; color: #222 !important; font: 14px/1.4 'Batusa', Georgia, serif; }
#wst-wishes .cui-container-form ::placeholder { color: #9aa0a6 !important; opacity: 1; }
#wst-wishes .cui-container-form input[type=submit], #wst-wishes .cui-container-form input[type=submit]:hover { justify-self: end; padding: 11px 28px; border-radius: 8px; border: 0 !important; background: #262626 !important; color: #fff !important; font: 600 13px 'Batusa', Georgia, serif; letter-spacing: .08em; cursor: pointer; }
#wst-wishes .cui-container-form input[type=submit]:disabled { opacity: .55; cursor: not-allowed; }
#wst-wishes .wst-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#wst-wishes .wst-demo, #wst-wishes .wst-wish-ok { font-size: 12px; color: #6b6b6b; text-align: center; }
#wst-wishes .cui-container-comments { list-style: none; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid #e4e6ea; display: grid; gap: 24px; }
#wst-wishes .cui-item-comment { margin: 0; padding: 0; }
#wst-wishes .cui-comment-content { padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; backdrop-filter: none !important; box-shadow: none !important; color: #444 !important; }
#wst-wishes .cui-comment-info { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
#wst-wishes .cui-commenter-name { font: 700 14px/1.3 'Batusa', Georgia, serif !important; color: #111 !important; text-decoration: none; }
#wst-wishes .wst-time { font-size: 12.5px; color: #9aa0a6 !important; }
#wst-wishes .wst-att { font-size: 11px; line-height: 1.6; padding: 0 8px; border-radius: 99px; border: 1px solid #d5d9df; color: #6b7280 !important; }
#wst-wishes .cui-comment-text p { margin: 6px 0 0 !important; font-size: 14px !important; font-family: 'Batusa', Georgia, serif !important; line-height: 1.65; color: #444 !important; overflow-wrap: anywhere; }
/* "Lihat lebih banyak": first 4 shown, the 4th fades out (invitation.js). */
#wst-wishes .wst-hide { display: none; }
#wst-wishes .wst-fade { max-height: 64px; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(#000 0, transparent 90%); mask-image: linear-gradient(#000 0, transparent 90%); }
#wst-wishes .wst-more { display: block; margin: 14px auto 0; padding: 12px 26px; border: 0; border-radius: 8px; background: #262626; color: #fff; font: 600 14px 'Batusa', Georgia, serif; cursor: pointer; }
#wst-wishes .wst-more[hidden] { display: none; }
#wst-wishes .wst-more:hover, #wst-wishes .wst-more:focus-visible { background: #000; }

/* Backsound button (position from the Elementor widget wrapper) */
/* Vinyl record player button */
button.wst-music, button.wst-music:hover, button.wst-music:focus { width: 56px; height: 56px; min-width: 0; padding: 0; margin: 0; border: 0; border-radius: 50%; line-height: 1; background: transparent; cursor: pointer; display: block; box-shadow: 0 3px 12px rgba(0,0,0,.35); }
.wst-music:focus-visible { outline: 2px solid var(--m-accent, #d6392e); outline-offset: 3px; }
.wst-music svg { width: 100%; height: 100%; display: block; overflow: visible; }
.wst-music .wst-disc { transform-origin: 32px 32px; transform-box: view-box; }
.wst-music[aria-pressed=true] .wst-disc { animation: wst-spin 4s linear infinite; }
.wst-music .wst-ring { stroke: var(--m-accent, #d6392e); }
.wst-music .wst-label { fill: var(--m-accent, #d6392e); }
.wst-music .wst-ico-pause { display: none; }
.wst-music[aria-pressed=true] .wst-ico-pause { display: inline; }
.wst-music[aria-pressed=true] .wst-ico-play { display: none; }
@keyframes wst-spin { to { transform: rotate(360deg); } }

/* Countdown */
.wst-countdown { display: flex; justify-content: center; gap: 10px; }
.wst-cd-box { min-width: 58px; padding: 10px 6px; border: 1px solid currentColor; border-radius: 10px; text-align: center; display: grid; gap: 2px; }
.wst-cd-box b { font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.wst-cd-box span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }

/* Plain style = the themes' original WeddingPress countdown: no boxes, big digits, label under, ":" between units. */
.wst-cd-plain { gap: 0; align-items: flex-start; color: var(--cd-dc, inherit); }
.wst-cd-plain .wst-cd-box { flex: 1 1 0; min-width: 0; padding: 1px; border: 0; border-radius: 0; gap: 0; }
.wst-cd-plain .wst-cd-box b, .wst-cd-plain .wst-cd-sep {
	font-family: var(--cd-df, inherit); font-weight: var(--cd-dw, 700); font-size: var(--cd-ds, 25px);
	line-height: 1.4; letter-spacing: var(--cd-dls, normal); color: var(--cd-dc, inherit);
}
.wst-cd-plain .wst-cd-box span {
	font-family: var(--cd-lf, inherit); font-weight: var(--cd-lw, 700); font-size: var(--cd-ls, 14px);
	letter-spacing: var(--cd-lls, normal); color: var(--cd-lc, inherit); text-transform: none; opacity: 1;
}
.wst-cd-sep { flex: none; font-style: normal; padding: 0 4px; }
@media (max-width: 1024px) {
	.wst-cd-plain .wst-cd-box b, .wst-cd-plain .wst-cd-sep { font-size: var(--cd-ds-t, var(--cd-ds, 25px)); line-height: 1.1; }
	.wst-cd-plain .wst-cd-box span { font-size: var(--cd-ls-t, var(--cd-ls, 14px)); }
}
@media (max-width: 767px) {
	.wst-cd-plain .wst-cd-box b, .wst-cd-plain .wst-cd-sep { font-size: var(--cd-ds-m, var(--cd-ds-t, var(--cd-ds, 25px))); }
	.wst-cd-plain .wst-cd-box span { font-size: var(--cd-ls-m, var(--cd-ls-t, var(--cd-ls, 14px))); }
}

@media (prefers-reduced-motion: reduce) { .wst-music[aria-pressed=true] .wst-disc { animation: none; } }

/* Wedding Gift: outline buttons in the theme's colour/font, modal cards */
.wst-gift-btns { display: grid; gap: 22px; max-width: 800px; margin: 0 auto; }
button.wst-gift-btn, button.wst-gift-btn:hover, button.wst-gift-btn:focus { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 16px 20px; margin: 0; border: 1.5px solid currentColor; border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: clamp(20px, 3.2vw, 30px); line-height: 1.2; cursor: pointer; transition: background .2s; }
button.wst-gift-btn:hover { background: rgba(255,255,255,.08); }
.wst-gift-btn svg { width: 1.2em; height: 1.2em; flex: none; }
.wst-gift-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

dialog.wst-modal { width: min(1060px, 92vw); max-height: 88vh; overflow: auto; padding: clamp(36px, 6vw, 70px) clamp(16px, 6vw, 90px) clamp(28px, 5vw, 60px); border: 0; border-radius: 4px; background: #fff; color: #111; font-family: 'Poppins', system-ui, sans-serif; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
dialog.wst-modal::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(6px); }
dialog.wst-modal[open] { animation: wst-pop .25s ease-out; }
@keyframes wst-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
button.wst-modal-x, button.wst-modal-x:hover, button.wst-modal-x:focus { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 4px; background: #fff; color: #333; font-size: 26px; line-height: 1; cursor: pointer; }
button.wst-modal-x:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.wst-modal-title { margin: 0 0 32px; text-align: center; font: 600 clamp(22px, 3vw, 30px)/1.2 'Playfair Display', Georgia, serif; color: #111; letter-spacing: 0; text-transform: none; }
.wst-card { position: relative; margin: 0 0 28px; padding: clamp(18px, 3vw, 26px) clamp(16px, 3vw, 22px); border: 1px solid #d4d4d4; border-radius: 12px; background: linear-gradient(135deg, #fafafa 0%, #ececec 55%, #d9d9d9 100%); box-shadow: 0 4px 16px rgba(0,0,0,.08); text-align: left; }
.wst-card:last-child { margin-bottom: 0; }
.wst-card-logo { display: flex; justify-content: flex-end; min-height: 56px; margin-bottom: clamp(18px, 4vw, 40px); }
dialog.wst-modal .wst-card-logo img { height: clamp(40px, 8vw, 80px); width: auto; max-width: 72%; object-fit: contain; object-position: right center; } /* beats .elementor img */
.wst-wordmark { font: italic 900 clamp(30px, 6vw, 64px)/1 'Arial Black', 'Poppins', sans-serif; letter-spacing: -.02em; }
.wst-card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wst-card-no { font-size: clamp(16px, 2.4vw, 20px); letter-spacing: .12em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wst-card-name { margin-top: clamp(14px, 3vw, 30px); font-size: clamp(14px, 2vw, 18px); text-transform: uppercase; }
button.wst-copy, button.wst-copy:hover, button.wst-copy:focus { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; margin: 0; border: 0; border-radius: 4px; background: #111; color: #fff; font: 500 14px/1 'Poppins', system-ui, sans-serif; cursor: pointer; }
.wst-copy svg { width: 14px; height: 14px; }
.wst-card-addr { text-align: center; font-size: clamp(15px, 2.2vw, 19px); line-height: 1.75; }
.wst-card-addr hr { width: 80%; height: 0; margin: 18px auto; border: 0; border-top: 1px solid #111; background: none; opacity: 1; }
.wst-card-addr .wst-copy { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) { dialog.wst-modal[open] { animation: none; } }

/* Tema 11 cover: fixed vh spacers pushed OPEN INVITATION under the browser toolbar on short phones.
   Fill the full screen (lvh — iOS toolbars float over the page) and pin the "Dear, … button" group to its bottom instead. */
@media (max-width: 767px) {
	.elementor-element-332950da > .elementor-container { min-height: 100vh; min-height: 100lvh; }
	.elementor-element-332950da .elementor-widget-wrap { flex-direction: column; flex-wrap: nowrap; }
	.elementor-element-332950da .elementor-element-3576b4ce { display: none; }
	.elementor-element-332950da .elementor-element-7e533b4d .elementor-spacer-inner { height: 6svh !important; }
	.elementor-element-332950da .elementor-element-17551263 { margin-top: auto !important; padding-top: 24px; }
	.elementor-element-332950da .elementor-element-46c5a35d { margin-bottom: 100px; margin-bottom: max(100px, calc(100lvh - 100svh + 16px)); }
}

/* Tema 4 cover: same fix as Tema 11 (40vh spacer between date and "Dear,"). */
@media (max-width: 767px) {
	.elementor-element-885cbd2 > .elementor-container { min-height: 100vh; min-height: 100lvh; }
	.elementor-element-885cbd2 .elementor-widget-wrap { flex-direction: column; flex-wrap: nowrap; }
	.elementor-element-885cbd2 .elementor-element-b3a5cb9 { display: none; }
	.elementor-element-885cbd2 .elementor-element-6f4962cf { margin-top: auto !important; padding-top: 24px; }
	.elementor-element-885cbd2 .elementor-element-44ec505a { margin-bottom: 100px; margin-bottom: max(100px, calc(100lvh - 100svh + 16px)); }
}

/* Tema 5 cover: the 40vh spacer sits inside the names block; let it absorb only the space that's left. */
@media (max-width: 767px) {
	.elementor-element-2b21f4e1 > .elementor-container { min-height: 100vh; min-height: 100lvh; }
	.elementor-element-2b21f4e1 .elementor-widget-wrap { flex-direction: column; flex-wrap: nowrap; }
	.elementor-element-2b21f4e1 .elementor-element-44afef6f { flex: 1 1 auto !important; display: flex; }
	.elementor-element-2b21f4e1 .elementor-element-44afef6f > .elementor-container { flex: 1 1 auto; }
	.elementor-element-2b21f4e1 .elementor-element-a9e2784 { flex: 1 1 0 !important; min-height: 16px; }
	.elementor-element-2b21f4e1 .elementor-element-a9e2784 .elementor-spacer-inner { height: 100% !important; }
	.elementor-element-2b21f4e1 .elementor-element-5a77b204 { margin-bottom: 100px; margin-bottom: max(100px, calc(100lvh - 100svh + 16px)); }
}

/* Tema 6 / 7 cover: vh spacers become flexible — they take only the space left in the visible viewport. */
@media (max-width: 767px) {
	.elementor-element-4d40e0a1 > .elementor-container,
	.elementor-element-7e963520 > .elementor-container { min-height: 100vh; min-height: 100lvh; }
	.elementor-element-4d40e0a1 .elementor-widget-wrap,
	.elementor-element-7e963520 .elementor-widget-wrap { flex-direction: column; flex-wrap: nowrap; }
	.elementor-element-7fe20ac1, .elementor-element-4c1a0060, .elementor-element-5f8f3afd { flex: 1 1 0 !important; min-height: 16px; }
	.elementor-element-7fe20ac1 .elementor-spacer-inner,
	.elementor-element-4c1a0060 .elementor-spacer-inner,
	.elementor-element-5f8f3afd .elementor-spacer-inner { height: 100% !important; }
	.elementor-element-4c1a0060 { flex-grow: 1.5 !important; } /* keep Tema 7's names a bit below centre, as designed */
	.elementor-element-5df4b29a, .elementor-element-3238d029 { margin-bottom: 100px; margin-bottom: max(100px, calc(100lvh - 100svh + 16px)); }
}
/* Tema 9 cover: the portrait photo is fixed-size; shrink it on short screens. */
@media (max-width: 767px) and (max-height: 640px) {
	.elementor-element-ab833ea .elementor-element-c9b61e3 img { max-height: 24svh; width: auto; }
}

/* Tema 13 cover: content is ~650px tall; tighten it on short screens so "Buka Undangan" stays in view. */
@media (max-height: 700px) {
	.wx-hero { padding-bottom: 24px !important; }
	.wx-hero .wx-synopsis { display: none; }
	.wx-hero .wx-title .elementor-heading-title { font-size: clamp(44px, 13vw, 64px) !important; }
}

/* Tema 9–12 on tablet: the 70/30 columns wrapped, dropping the invitation into a 230px strip below the photo.
   Use the desktop split instead: photo fills the left, invitation column is 420px on the right. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-element-263f6a33 > .elementor-container,
	.elementor-element-4556af4a > .elementor-container,
	.elementor-element-166d0782 > .elementor-container,
	.elementor-element-6e2e87f > .elementor-container { flex-wrap: nowrap !important; flex-direction: row !important; } /* theme CSS stacks at <=768px */
	.elementor-element-612c0d2, .elementor-element-5be8c854,
	.elementor-element-bd416df, .elementor-element-2be6e599 { width: auto !important; flex: 1 1 auto; min-width: 0; }
	.elementor-element-e30a0c8, .elementor-element-3e413792,
	.elementor-element-36874069, .elementor-element-4b4a03c0 { width: 420px !important; flex: 0 0 420px !important; }
}

/* iOS: Safari 26's floating bar and Chrome's bottom toolbar both overlay the page, and they disagree on svh.
   So covers fill the full screen (lvh) and keep the open button at least 100px — or the toolbar gap — above the bottom. */
@media (max-width: 767px) {
	.elementor .wx-hero.e-con { min-height: 100lvh !important; padding-bottom: 100px !important; padding-bottom: max(100px, calc(100lvh - 100svh + 16px)) !important; }
}

/* Invitation footer (inc/wishes.php). Logo file is white → rendered black on the white footer. */
.wst-foot { position: relative; z-index: 2; clear: both; background: #fff; color: #555; text-align: center; padding: 36px 20px 30px; font: 400 15px/1.5 Poppins, system-ui, sans-serif; }
.wst-foot p { margin: 0; }
.wst-foot-made { font-size: 17px; }
.wst-foot-made span { color: #444; }
.wst-foot-logo { display: inline-block; margin: 8px 0 12px; }
.wst-foot-logo img { width: 130px; height: auto; filter: brightness(0); opacity: .85; }
.wst-foot-ig { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 18px; border-radius: 6px; background: #7a7a7a; color: #fff !important; }
.wst-foot-ig:hover { background: #444; }
.wst-foot-song { font-size: 15px; margin-bottom: 18px !important; }
.wst-foot-song em { font-size: 15px; color: #666; }
.wst-foot-copy { font-size: 12.5px; color: #777; }

/* Turut mengundang — sits right above the footer (inc/wishes.php), same white band. */
.wst-turut { position: relative; z-index: 2; clear: both; background: #fff; color: #444; text-align: center; padding: 40px 24px 6px; }
.wst-turut h2 { margin: 0 0 14px; font: 400 22px/1.2 'Batusa', Georgia, serif; color: #222; letter-spacing: .02em; }
.wst-turut ul { list-style: none; margin: 0 auto; padding: 0 0 26px; max-width: 420px; border-bottom: 1px solid #e6e6e6; }
.wst-turut li { font: 400 14.5px/1.85 'Batusa', Georgia, serif; }
.wst-turut + .wst-foot { padding-top: 26px; }

/* Music button hidden on the cover; shown once the invitation is opened (html.wst-opened, invitation.js). */
html:not(.wst-opened) .wst-music { opacity: 0; visibility: hidden; pointer-events: none; }
.wst-music { transition: opacity .4s ease, visibility .4s; }