/* Royal Bloom: loaded only by cards that use the "royal" design. */
.theme-royal {
  --gold: #c39a5b;
  --gold-dark: #9b7640;
  --gold-soft: #e8d2a6;
  --blush: #f7ddd3;
  --copper-a: #ab6252;
  --copper-b: #96493a;
  --font-cap: "Cinzel", Georgia, serif;
  background:
    radial-gradient(60vmax 40vmax at 12% 8%, #f9d9d6 0, transparent 60%),
    radial-gradient(50vmax 38vmax at 92% 30%, #f5dcc6 0, transparent 60%),
    radial-gradient(60vmax 40vmax at 30% 95%, #f7d3cf 0, transparent 60%),
    #efe0d6;
}
.theme-royal .card { background: var(--bg); box-shadow: 0 0 120px rgba(150, 90, 70, 0.18); }
.theme-royal .btn:not(.ghost) { background: linear-gradient(135deg, var(--copper-a), var(--copper-b)); border-color: var(--copper-b); color: #fff; box-shadow: 0 8px 20px rgba(150, 73, 58, 0.28); }
.theme-royal .btn.ghost { border-color: var(--gold-soft); color: var(--accent-ink); background: rgba(255, 252, 247, 0.7); }
.theme-royal .rb-gold { color: var(--gold); display: inline-flex; }
.theme-royal .prewrap { white-space: pre-line; }

/* ---------- opening cover: a sealed envelope ---------- */
.theme-royal .cover { transition: opacity 0.7s ease, visibility 0s linear 0.7s; }
.theme-royal .cover.open { transform: none; opacity: 0; visibility: hidden; }
.rb-cover-inner { background: linear-gradient(180deg, #fffaf2 0%, #fcece2 58%, #f6dcd0 100%) !important; justify-content: center; }
.rb-cover-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.rb-cover-glow { position: absolute; inset: 0; background: radial-gradient(70% 45% at 50% 42%, #fff 0, rgba(255, 255, 255, 0) 70%); }
.rb-cbloom { position: absolute; bottom: -6px; width: min(58vw, 250px); height: auto; }
.rb-cbloom-l { left: -8px; }
.rb-cbloom-r { right: -8px; }
.rb-cover-content { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 28px 0 !important; z-index: 2; }
.rb-kicker { font: 500 12px/1.4 var(--font-cap); letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold-dark); margin: 8px 0 0; padding-left: 0.42em; }
.rb-envelope { position: relative; width: min(74vw, 320px); aspect-ratio: 1.5; margin: 30px 0 26px; perspective: 1100px; }
.rb-env-back { position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(160deg, #f1d6c8, #e4bfae); box-shadow: 0 28px 46px rgba(130, 70, 50, 0.24); }
.rb-letter { position: absolute; left: 7%; right: 7%; top: 11%; bottom: 7%; z-index: 2; border-radius: 4px; background: #fffdf8; border: 1px solid var(--gold-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 6px; }
.rb-letter-names { font: 400 26px/1.1 "Great Vibes", cursive; color: var(--accent-ink); }
.rb-letter-names i, .rb-cover-names i { font-family: var(--font-display); }
.rb-letter-date { font: 500 9px var(--font-cap); letter-spacing: 0.3em; color: var(--gold-dark); }
.rb-env-pocket { position: absolute; inset: 0; z-index: 3; border-radius: 6px; clip-path: polygon(0 0, 50% 62%, 100% 0, 100% 100%, 0 100%); background: linear-gradient(135deg, #fbece2, #f1d2c3); }
.rb-env-flapwrap { position: absolute; left: 0; right: 0; top: 0; height: 62%; z-index: 4; transform-origin: 50% 0; filter: drop-shadow(0 3px 2px rgba(120, 60, 40, 0.28)); }
.rb-env-flap { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(180deg, #edcdbd, #dfb4a2); }
.rb-seal { position: absolute; left: 50%; top: 62%; z-index: 6; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 34% 28%, #f0d79e, #b98a45 72%); box-shadow: 0 4px 10px rgba(90, 55, 20, 0.35), inset 0 0 0 3px rgba(255, 255, 255, 0.18); }
.rb-seal span { font: 400 19px/1 "Great Vibes", cursive; color: #5a3a17; }
.rb-cover-names { font: 500 13px/1.5 var(--font-cap); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); margin: 0; }
.rb-cover-date { margin: 6px 0 0 !important; color: var(--accent-ink) !important; font: 500 12px var(--font-cap) !important; letter-spacing: 0.3em !important; }
.rb-open { margin-top: 22px !important; min-width: 220px; gap: 10px; }
.rb-skip { margin-top: 12px; background: none; border: 0; color: var(--muted); font: 500 12px var(--font-ui); letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 4px; padding: 10px 14px; cursor: pointer; }
.rb-flash { position: absolute; inset: 0; z-index: 5; background: radial-gradient(circle at 50% 46%, #fff 0, #fff7ec 60%, #fff3e6 100%); opacity: 0; pointer-events: none; }

/* ---------- hero: layered floral arch ---------- */
.theme-royal section.rb-hero { padding: 0; min-height: max(640px, 100svh); max-height: 980px; display: flex; flex-direction: column; align-items: center; justify-content: center; isolation: isolate; overflow: hidden; }
.theme-royal .rb-hero > .rb-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.rb-l { position: absolute; inset: 0; will-change: transform; }
.rb-l img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; max-width: none; }
.rb-l-light { background: radial-gradient(90% 58% at 50% 40%, #fff 0, rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, #fff8ef 0%, #fbebe1 56%, #f4dacd 100%); }
.rb-l-light::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70px 70px at 14% 62%, rgba(246, 190, 190, 0.35), transparent), radial-gradient(110px 110px at 88% 46%, rgba(240, 205, 160, 0.3), transparent), radial-gradient(60px 60px at 70% 82%, rgba(246, 190, 190, 0.3), transparent); }
.rb-sway { transform-origin: 50% 0; animation: rb-sway 9s ease-in-out infinite alternate; }
.rb-l-gr .rb-sway { animation-duration: 11s; animation-delay: -3s; }
.rb-l-fl .rb-sway, .rb-l-fr .rb-sway { transform-origin: 50% 100%; animation-duration: 12s; }
.rb-l-fr .rb-sway { animation-delay: -5s; }
@keyframes rb-sway { from { rotate: -0.5deg; } to { rotate: 0.6deg; } }
.rb-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 56px; margin-top: -4%; }
.rb-orn-top { margin-bottom: 6px; }
.theme-royal .rb-hero .names { font-size: clamp(46px, 13.4vw, 70px); line-height: 1.05; margin: 12px 0 8px; color: var(--accent-ink); text-shadow: 0 1px 0 #fff8; letter-spacing: 0; text-wrap: balance; }
.theme-royal .rb-hero .names .amp { font-size: 0.42em; line-height: 1.5; opacity: 0.8; }
.rb-char { display: inline-block; will-change: transform, opacity; }
.rb-hero-rule { width: min(220px, 60%); height: 16px; margin: 6px 0 10px; }
.theme-royal .rb-date { font: 500 13px var(--font-cap); letter-spacing: 0.34em; color: var(--accent-ink); margin: 0; padding-left: 0.34em; }
.rb-scroll { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: 100px; display: grid; justify-items: center; gap: 2px; text-decoration: none; color: var(--muted); font: 500 11px var(--font-ui); letter-spacing: 0.03em; }
.rb-scroll svg { animation: rb-bounce 1.8s ease-in-out infinite; color: var(--gold-dark); }
@keyframes rb-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- petals ---------- */
.rb-petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.rb-petal { position: absolute; top: -26px; left: var(--x); width: var(--s); height: calc(var(--s) * 1.25); background: linear-gradient(135deg, #fbd9da, #e79aa6); border-radius: 70% 0 70% 0; opacity: 0; animation: rb-fall var(--d) linear var(--delay) infinite; will-change: transform; }
.rb-petal.cream { background: linear-gradient(135deg, #fff3e2, #efd3ae); }
@keyframes rb-fall { 0% { transform: translate3d(0, -30px, 0) rotate(0deg); opacity: 0; } 10% { opacity: 0.85; } 100% { transform: translate3d(var(--dx), 112vh, 0) rotate(560deg); opacity: 0; } }

/* ---------- shared section styling ---------- */
.theme-royal section.rb-section { padding: 54px 22px 12px; position: relative; }
.rb-head { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; margin-bottom: 22px; }
.rb-head h2 { font: 600 31px/1.15 var(--font-display); margin: 0; color: var(--ink); letter-spacing: 0.01em; }
.rb-head-icon { display: inline-grid; place-items: center; color: var(--gold-dark); }
.rb-head .rb-rule { flex-basis: 100%; width: 170px; height: 14px; margin: 8px auto 0; }
.rb-sub { flex-basis: 100%; font: 400 15px/1.5 var(--font-display); color: var(--muted); font-style: italic; margin: 4px 0 0; }
.theme-royal .eyebrow { font-family: var(--font-cap); letter-spacing: 0.4em; color: var(--gold-dark); }
.theme-royal .arabic { color: var(--gold-dark); }
.theme-royal .hosts { font-family: var(--font-display); font-size: 1.12em; color: var(--ink); }
.theme-royal .couple-full { font: 400 36px/1.15 "Great Vibes", cursive; color: var(--accent-ink); margin-top: 22px; }
.theme-royal .couple-full .amp { font: italic 400 24px/1.4 var(--font-display); color: var(--gold-dark); }
.rb-salam { padding-top: 62px !important; }

/* ---------- Akad Nikah and Majlis Resepsi ---------- */
.rb-events { display: grid; gap: 14px; }
.rb-events.two { grid-template-columns: 1fr 1fr; gap: 12px; }
.rb-event { position: relative; text-align: center; padding: 18px 12px 16px; border-radius: 18px; border: 1px solid var(--gold-soft); background: linear-gradient(180deg, #fffcf7, #fcefe5); box-shadow: 0 10px 26px rgba(160, 100, 80, 0.11); }
.rb-event::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(195, 154, 91, 0.32); border-radius: 14px; pointer-events: none; }
.rb-ev-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 50%; border: 1px solid var(--gold); color: var(--copper-a); background: #fffaf3; }
.rb-event h3 { font: 600 20px/1.2 var(--font-display); margin: 0 0 12px; color: var(--ink); }
.rb-ev-row { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; text-align: left; margin: 0 0 9px !important; font: 400 13.5px/1.35 var(--font-ui); color: var(--ink); }
.rb-ev-row > svg { color: var(--gold-dark); margin-top: 2px; }
.rb-ev-row span { display: grid; gap: 1px; }
.rb-ev-row small { font: 500 10px var(--font-cap); letter-spacing: 0.22em; color: var(--muted); }
.rb-ev-row b { font-weight: 500; letter-spacing: 0.02em; }
.rb-ev-row em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.rb-events:not(.two) .rb-event { max-width: 340px; margin: 0 auto; width: 100%; }

/* ---------- countdown ---------- */
.theme-royal #tarikh .count { gap: 10px; margin: 8px 0 18px; }
.theme-royal .count div { background: linear-gradient(180deg, #fffdf9, #fbede3); border: 1px solid var(--gold-soft); border-radius: 14px; box-shadow: 0 8px 20px rgba(160, 100, 80, 0.11); padding: 14px 4px 12px; position: relative; }
.theme-royal .count div::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(195, 154, 91, 0.28); border-radius: 10px; pointer-events: none; }
.theme-royal .count b { font: 600 34px/1.1 var(--font-display); color: var(--accent-ink); }
.theme-royal .count span { font: 500 10px var(--font-ui); letter-spacing: 0.14em; color: var(--muted); margin-top: 6px; }

/* ---------- location ---------- */
.rb-loc-card { position: relative; overflow: hidden; border: 1px solid var(--gold-soft); border-radius: 20px; background: #fffbf6; text-align: left; box-shadow: 0 10px 26px rgba(160, 100, 80, 0.1); min-height: 200px; }
.rb-map { position: absolute; inset: 0 0 0 34%; opacity: 0.85; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46%); mask-image: linear-gradient(90deg, transparent 0, #000 46%); }
.rb-map img { width: 100%; height: 100%; object-fit: cover; }
.rb-pin { position: absolute; right: 20%; top: 36%; color: var(--copper-b); filter: drop-shadow(0 4px 3px rgba(120, 60, 40, 0.3)); }
.rb-loc-text { position: relative; z-index: 1; padding: 20px 18px 20px 18px; max-width: 70%; }
.rb-loc-text h3 { font: 600 22px/1.25 var(--font-display); margin: 0 0 6px; color: var(--ink); }
.rb-loc-text p { font: 400 13.5px/1.5 var(--font-ui); color: var(--muted); margin: 0; }
.rb-loc-actions { display: grid; gap: 8px; margin-top: 14px; justify-items: start; }
.rb-loc-actions .btn { min-height: 42px; padding: 9px 16px; font-size: 14px; }

/* ---------- gallery carousel ---------- */
.rb-carousel-wrap { position: relative; }
.theme-royal .rb-carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 22px 16px; margin: 0 -22px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; outline-offset: -2px; }
.rb-carousel::-webkit-scrollbar { display: none; }
.theme-royal .rb-carousel button { flex: 0 0 66%; scroll-snap-align: center; aspect-ratio: 3 / 4; border-radius: 999px 999px 18px 18px; border: 3px solid #fffdf8; box-shadow: 0 12px 28px rgba(150, 90, 70, 0.2); padding: 0; overflow: hidden; cursor: zoom-in; grid-column: auto; background: var(--blush); }
.theme-royal .rb-carousel button img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.theme-royal .rb-carousel button:first-child, .theme-royal .rb-carousel button:nth-child(even):last-child { grid-column: auto; }
.theme-royal .rb-carousel button:first-child img, .theme-royal .rb-carousel button:nth-child(even):last-child img { aspect-ratio: auto; }
.rb-arrow { position: absolute; top: 44%; z-index: 2; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gold); background: rgba(255, 252, 247, 0.94); color: var(--copper-b); box-shadow: 0 6px 16px rgba(120, 70, 50, 0.2); cursor: pointer; transition: transform 0.2s, opacity 0.3s; }
.rb-arrow:active { transform: scale(0.92); }
.rb-prev { left: -6px; } .rb-next { right: -6px; }
.rb-dots { display: flex; justify-content: center; gap: 7px; margin-top: 4px; min-height: 8px; }
.rb-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-soft); transition: width 0.3s, background 0.3s; }
.rb-dots i.on { width: 20px; border-radius: 6px; background: var(--copper-a); }

/* ---------- RSVP + wishes ---------- */
.rb-rsvp { padding-top: 34px !important; }
.rb-panel { position: relative; overflow: hidden; border-radius: 22px; background: linear-gradient(135deg, #fce5dc, #f5d1c5); border: 1px solid #ebc2b4; text-align: left; box-shadow: 0 12px 28px rgba(170, 100, 85, 0.16); }
.rb-panel > summary { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; padding: 20px 18px; list-style: none; cursor: pointer; }
.rb-panel > summary::-webkit-details-marker { display: none; }
.rb-panel-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #fffaf4; color: var(--copper-a); box-shadow: 0 6px 16px rgba(150, 80, 60, 0.18); }
.rb-panel-copy h2 { font: 600 23px/1.2 var(--font-display); margin: 0 0 2px; color: var(--accent-ink); letter-spacing: 0; }
.rb-panel-copy .rb-sub { display: block; font-size: 14px; margin: 0; }
.rb-cta { grid-column: 2; justify-self: start; min-height: 44px !important; padding: 10px 20px !important; gap: 8px !important; }
.rb-cta svg { transition: transform 0.3s; }
details[open] > summary .rb-cta svg { transform: rotate(90deg); }
.rb-panel-bloom { position: absolute; right: -10px; bottom: -6px; width: 42%; max-width: 170px; height: auto; pointer-events: none; z-index: 0; opacity: 0.95; }
.rb-fold-body { position: relative; z-index: 1; padding: 4px 18px 22px; }
.rb-write { margin-top: 14px; }
.rb-write > summary { list-style: none; cursor: pointer; display: inline-flex; margin: 0 auto; }
.rb-write > summary::-webkit-details-marker { display: none; }
.rb-write .rb-fold-body { padding: 18px 0 4px; }
.theme-royal .choice input:checked + span { background: linear-gradient(135deg, var(--copper-a), var(--copper-b)); border-color: var(--copper-b); color: #fff; animation: rb-pop 0.35s ease; }
@keyframes rb-pop { 0% { transform: scale(0.94); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
.theme-royal input, .theme-royal select, .theme-royal textarea { border-color: var(--gold-soft); background: #fffdf9; }
.theme-royal input:focus-visible, .theme-royal select:focus-visible, .theme-royal textarea:focus-visible { border-color: var(--copper-a); box-shadow: 0 0 0 3px rgba(171, 98, 82, 0.18); }
.theme-royal .done { background: #fffaf3; border-color: var(--gold-soft); color: var(--ink); }
.theme-royal .form-note.ok { color: var(--copper-b); }

.theme-royal .wishes.rb-wishes { display: flex; max-height: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; gap: 12px; padding: 6px 22px 12px; margin: 4px -22px 0; scrollbar-width: none; }
.rb-wishes::-webkit-scrollbar { display: none; }
.rb-wishes:empty::before { content: "Jadilah yang pertama menitipkan doa untuk pengantin."; display: block; width: 100%; padding: 22px 12px; font: italic 400 16px var(--font-display); color: var(--muted); }
.theme-royal .rb-wishes .wish { flex: 0 0 90%; scroll-snap-align: center; position: relative; display: flex; flex-direction: column; gap: 2px; text-align: left; min-height: 108px; padding: 16px 16px 14px 74px; border-radius: 16px; border: 1px solid var(--gold-soft); background: linear-gradient(180deg, #fffdf9, #fdf0e8); box-shadow: 0 8px 20px rgba(160, 100, 80, 0.1); }
.rb-wishes .wish::before { content: attr(data-initial); position: absolute; left: 16px; top: 16px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ebbcae, #c98a7b); color: #fff; font: 600 19px var(--font-ui); }
.rb-wishes .wish::after { content: attr(data-date); position: absolute; right: 16px; top: 18px; font: 400 11px var(--font-ui); color: var(--muted); }
.theme-royal .rb-wishes .wish b { order: -1; margin: 0; font: 600 15px var(--font-ui); color: var(--ink); letter-spacing: 0; }
.theme-royal .rb-wishes .wish b::before { content: none; }
.rb-wishes .wish p { font: 400 15px/1.5 var(--font-ui); color: var(--muted); margin: 0; }
.rb-wishes .wish p::after { content: "\2665"; float: right; margin-left: 8px; color: #d98592; }

/* ---------- gift, contacts, schedule: warm up the shared blocks ---------- */
.theme-royal .account, .theme-royal .contact { border-color: var(--gold-soft); background: linear-gradient(180deg, #fffdf9, #fdf0e8); }
.theme-royal .icon-btn { background: linear-gradient(135deg, var(--copper-a), var(--copper-b)); }
.theme-royal .sched li { border-bottom-color: var(--gold-soft); }
.theme-royal .sched time { color: var(--copper-b); }

/* ---------- closing scene ---------- */
.rb-closing { position: relative; margin-top: 28px; padding: 0 !important; min-height: 560px; overflow: hidden; text-align: center; background: linear-gradient(180deg, var(--bg) 0%, #fbeee4 55%, #f6e1d5 100%); }
.rb-closing-art { position: absolute; inset: 0; pointer-events: none; }
.rb-hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; opacity: 0.95; }
.rb-bloom { position: absolute; bottom: -4px; width: 52%; max-width: 230px; height: auto; transform-origin: 50% 100%; }
.rb-bloom-l { left: -6px; } .rb-bloom-r { right: -6px; }
.rb-closing-copy { position: relative; z-index: 2; padding: 74px 28px 190px; display: flex; flex-direction: column; align-items: center; }
.rb-thanks { font: 600 22px var(--font-cap); letter-spacing: 0.42em; padding-left: 0.42em; color: var(--gold-dark); margin: 10px 0 6px; }
.rb-from { font: 400 34px/1.2 "Great Vibes", cursive; color: var(--accent-ink); margin: 0 0 14px; }
.theme-royal .rb-closing .closing { font: italic 400 17px/1.7 var(--font-display); color: var(--muted); max-width: 340px; margin: 0 auto 20px; }
.rb-replay { min-height: 42px !important; font-size: 14px !important; }
.theme-royal .rb-closing .brand { margin-top: 10px; }

/* ---------- dock and controls ---------- */
.theme-royal .dock { border-color: var(--gold-soft); background: rgba(255, 250, 244, 0.93); box-shadow: 0 10px 34px rgba(150, 90, 70, 0.22); }
.theme-royal .dock a.active { background: linear-gradient(135deg, var(--copper-a), var(--copper-b)); color: #fff; }
.theme-royal .music { border-color: var(--gold-soft); color: var(--copper-b); }
.theme-royal .reading-progress { background: linear-gradient(90deg, var(--gold), var(--copper-a)); }

/* ---------- small screens, reduced motion ---------- */
@media (max-width: 370px) {
  .rb-events.two { grid-template-columns: 1fr; }
  .theme-royal .rb-hero .names { font-size: 44px; }
  .rb-hero-copy { padding: 0 40px; }
}
@media (min-width: 700px) {
  .theme-royal .rb-carousel button { flex-basis: 46%; }
}
@media (prefers-reduced-motion: reduce) {
  .rb-sway, .rb-petal, .rb-scroll svg { animation: none !important; }
  .rb-flash { display: none; }
}