/* ==========================================================================
   Halaman Undangan Tamu — Gathering Ditsy ke-5  (v2.0 Premium Mobile)
   ========================================================================== */

/* ── Wrapper ────────────────────────────────────────────── */
.invitation-wrapper {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 0 calc(var(--nav-height) + 1.5rem) 0;
  position: relative;
}

/* ── Music Toggle ───────────────────────────────────────── */
.music-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(194, 125, 107, 0.25);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.15rem;
  transition: all var(--transition-smooth);
  -webkit-tap-highlight-color: transparent;
}

.music-toggle:hover,
.music-toggle.playing {
  background: var(--color-blush-soft);
  border-color: var(--color-rose-gold);
  box-shadow: 0 0 0 6px rgba(194, 125, 107, 0.12), var(--shadow-md);
}

.music-toggle.playing {
  animation: spinSlow 8s linear infinite;
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Demo Switcher ──────────────────────────────────────── */
.demo-switcher-box {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  border: 1.5px dashed rgba(194, 125, 107, 0.5);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  margin: 0.75rem 1rem 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.82rem;
}

.demo-switcher-select {
  flex: 1;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--color-charcoal);
  outline: none;
}

/* ── Hero Invitation Cover ──────────────────────────────── */
.invitation-hero {
  position: relative;
  background: var(--color-cream-light);
  text-align: center;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.hero-media-wrapper {
  position: relative;
  height: 100dvh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.04);
  transition: transform 1.5s ease-out;
  will-change: transform;
}

.hero-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(35, 28, 28, 0.05) 0%,
    rgba(35, 28, 28, 0.10) 35%,
    rgba(251, 247, 241, 0.70) 68%,
    #FBF7F1 100%
  );
  z-index: 1;
}

.brand-badge {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  background: #FFFFFF;
  padding: 5px;
  border-radius: 50%;
  box-shadow: 0 8px 28px rgba(133, 66, 55, 0.22);
  border: 2.5px solid var(--color-blush);
  width: 80px;
  height: 80px;
  z-index: 3;
}

.brand-badge img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 1.25rem 2.5rem 1.25rem;
}

.tagline-sub {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-rose-gold);
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
}

.gathering-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 8vw, 2.5rem);
  line-height: 1.1;
  color: var(--color-charcoal);
  margin-bottom: 0.5rem;
}

.gathering-theme {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-charcoal-soft);
  margin-bottom: 1.25rem;
  line-height: 1.4;
}

/* ── Guest Personal Greeting Card ───────────────────────── */
.guest-greeting-card {
  background: linear-gradient(145deg, rgba(253, 238, 233, 0.8) 0%, rgba(255,255,255,0.95) 100%);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.25rem;
  margin: 0 0 1.25rem 0;
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}

.guest-greeting-card::before {
  content: '✦';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #FFFDF9;
  padding: 0 10px;
  color: var(--color-rose-gold);
  font-size: 0.85rem;
}

.guest-badge {
  display: inline-block;
  background: var(--color-blush);
  color: var(--color-rose-deep);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.28rem 0.8rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.guest-name {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 6vw, 2.1rem);
  font-weight: 700;
  color: var(--color-rose-deep);
  margin-bottom: 0.35rem;
  line-height: 1.15;
}

.guest-greeting-text {
  font-size: 0.87rem;
  color: var(--color-charcoal-soft);
  line-height: 1.6;
}

/* ── Countdown Timer ────────────────────────────────────── */
.countdown-box {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.25rem 0;
}

.countdown-cell {
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.6rem;
  min-width: 66px;
  text-align: center;
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(8px);
  transition: transform var(--transition-fast);
}

.countdown-cell:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.countdown-num {
  font-family: var(--font-sans);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-rose-deep);
  line-height: 1;
  letter-spacing: -0.02em;
}

.countdown-unit {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  margin-top: 0.3rem;
  font-weight: 600;
}

/* ── Section Container ──────────────────────────────────── */
.details-section {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0 1rem 1.25rem 1rem;
}

/* ── Section Title Row ──────────────────────────────────── */
.section-title-row {
  text-align: center;
  margin: 0 1rem 1rem 1rem;
  padding-top: 0.5rem;
}

.section-title-row h2 {
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  margin-top: 0.25rem;
}

/* ── Detail Cards ───────────────────────────────────────── */
.detail-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.15rem;
  border: 1px solid rgba(229, 152, 134, 0.2);
  box-shadow: var(--shadow-xs);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: all var(--transition-smooth);
}

.detail-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(194, 125, 107, 0.4);
}

.detail-icon-box {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-blush-soft) 0%, rgba(255,255,255,0.9) 100%);
  border: 1px solid var(--color-blush);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.detail-info h4 {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-rose-gold);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.detail-info p {
  font-size: 0.92rem;
  color: var(--color-charcoal);
  font-weight: 500;
  margin-bottom: 0.1rem;
  line-height: 1.4;
}

.detail-sub {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 0.15rem;
}

/* ── Dress Code Swatches ────────────────────────────────── */
.color-swatches {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}

.swatch-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--color-charcoal-soft);
}

.swatch-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* ── Map Card ───────────────────────────────────────────── */
.map-embed-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  margin: 0 1rem 1.25rem 1rem;
}

.map-iframe-container {
  height: 200px;
  width: 100%;
  background: #EFE7DC;
}

.map-iframe-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.map-card-footer {
  padding: 1rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.65rem;
}

/* ── Ticket Section ────────────────────────────────── */
.ticket-section {
  margin: 0 1rem 1.25rem 1rem;
}

.ticket-section-title {
  text-align: center;
  margin-bottom: 1.15rem;
}

.ticket-section-title h2 {
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  margin-top: 0.25rem;
}

.ticket-section-title p {
  font-size: 0.83rem;
  color: var(--color-charcoal-soft);
  max-width: 320px;
  margin: 0.35rem auto 0 auto;
  line-height: 1.55;
}

/*
 * Ticket Card Overlay Design: ticket-template-clean.png (576×1024 px)
 * Positions measured from actual template image pixels:
 *   Frame:         x=20..556, y=20..1004
 *   Ribbon:        x=394..481, y=0..110  → left:68.4%, w:15.1%, h:10.7%
 *   White QR card: x=87..488,  y=88..453 → top:8.6%, left:15.1%, right:15.3%, h:35.6%
 *   Guest name:    x=20..255,  y=15..65  → top:1.5%, left:3.5%, right:38%
 */

.ticket-card-wrapper {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto 1.5rem auto;
  border-radius: 20px;
  overflow: visible;
  box-shadow: 0 16px 48px rgba(74, 53, 49, 0.16);
}

.ticket-inner-card {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: visible;
  line-height: 0;
  container-type: inline-size;
}

/* The base ticket template image */
.ticket-bg-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  pointer-events: none;
  user-select: none;
}

/* ── Overlay: Guest Name + Wilayah (Top Left) ────────── */
/* Exact coordinates from reference photo: x=114/576 (19.8%), y=86/1024 (8.4%) */
.ticket-overlay-guest {
  position: absolute;
  top: 8.0%;     /* y ≈ 82 on 1024px */
  left: 19.4%;   /* x ≈ 112 on 576px */
  right: 32%;
  line-height: 1.15;
  z-index: 3;
}

.ticket-overlay-guest .ticket-guest-name {
  font-family: var(--font-sans), 'Outfit', 'Inter', sans-serif;
  font-size: clamp(0.72rem, 2.7vw, 1.05rem);
  font-weight: 800;
  color: #C57E73; /* Exact dusty rose from reference photo */
  margin: 0 0 0.15em 0;
  line-height: 1.15;
  letter-spacing: 0.01em;
  word-break: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ticket-overlay-guest .ticket-guest-wilayah {
  font-family: var(--font-sans), 'Outfit', 'Inter', sans-serif;
  font-size: clamp(0.46rem, 1.7vw, 0.68rem);
  font-weight: 700;
  color: #7E8A74; /* Exact sage green / taupe from reference photo */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Overlay: Ribbon Bookmark (Top Right - Matches Reference Photo Exactly) ── */
.ticket-overlay-ribbon {
  position: absolute;
  top: 0;
  left: 69.10%;  /* x = 398 on 576px */
  width: 12.15%; /* w = 70 on 576px */
  height: 9.57%; /* h = 98 on 1024px - exact ribbon height */
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2.0cqw 0 1.4cqw 0;
  box-sizing: border-box;
  z-index: 5;
  pointer-events: none;
}

.ticket-overlay-ribbon .ribbon-label {
  font-family: 'Outfit', -apple-system, sans-serif;
  font-size: clamp(6px, 1.55cqw, 9.5px);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
  white-space: nowrap;
  margin: 0;
}

.ticket-overlay-ribbon .ribbon-seat-num {
  font-family: 'Barlow Condensed', 'Outfit', sans-serif;
  font-size: clamp(21px, 6.4cqw, 38px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  transform: scaleY(1.06);
  white-space: nowrap;
  margin: 0;
  display: inline-block;
  -webkit-text-stroke: 0;
  text-stroke: 0;
}

.ticket-overlay-ribbon .ribbon-table-num {
  font-family: 'Outfit', -apple-system, sans-serif;
  font-size: clamp(6.5px, 1.7cqw, 10.5px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF;
  line-height: 1;
  white-space: nowrap;
  margin: 0;
}

/* ── Overlay: White Card (QR Code + Gate Times) ────────── */
.ticket-overlay-qr {
  position: absolute;
  top: 14.06%;   /* y = 144 on 1024px */
  left: 24.31%;  /* x = 140 on 576px */
  width: 51.39%; /* w = 296 on 576px */
  height: 31.25%;/* h = 320 on 1024px */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 3.5% 3% 2.8% 3%;
  box-sizing: border-box;
  z-index: 2;
}

.ticket-qr-canvas-holder {
  width: 82%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.ticket-qr-canvas-holder canvas {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  border-radius: 4px;
}

.ticket-gate-box {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
  padding-bottom: 1%;
}

.ticket-gate-time {
  font-family: var(--font-sans), 'Outfit', sans-serif;
  font-size: clamp(8px, 2.2cqw, 12.5px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.25;
  white-space: nowrap;
}

.ticket-gate-time.open-gate {
  color: #74836A; /* Sage green from reference photo */
}

.ticket-gate-divider {
  width: 58%; /* Exact width matching reference */
  border-bottom: 1.5px dashed #74836A; /* Sage green dashed line */
  margin: 3px auto 4px auto;
}

.ticket-gate-time.close-gate {
  color: #CF867E; /* Terracotta rose from reference photo */
}

/* ── Overlay: Ultra-HD Roses (Asli Foto 2 - Razor-Sharp, Non-Blur) ── */
.ticket-overlay-roses {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 4;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* ── Overlay: Ultra-HD Vector Table Map Layer (Sangat Jelas, Razor-Sharp Vector) ── */
.ticket-overlay-tablemap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.ticket-overlay-tablemap .table-seat {
  pointer-events: auto;
  cursor: pointer;
}

.ticket-overlay-tablemap .table-seat circle {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), fill 0.2s ease, filter 0.2s ease;
  transform-origin: center;
  transform-box: fill-box;
}

.ticket-overlay-tablemap .table-seat:hover circle {
  transform: scale(1.35);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.ticket-overlay-tablemap .table-seat:hover text {
  font-weight: 800;
}

.ticket-overlay-tablemap text {
  user-select: none;
  -webkit-user-select: none;
}

/* Animasi pulse kursi aktif tamu */
@keyframes seatActivePulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.65; }
  100% { opacity: 1; }
}

/* ── Overlay: Logo Setting di Bagian Bawah ─────────────── */
.ticket-overlay-logo {
  display: flex !important;
  position: absolute;
  left: 50%;
  bottom: 2.3%;
  transform: translateX(-50%);
  width: 30%;
  max-width: 170px;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
  justify-content: center;
  align-items: center;
  z-index: 5;
  pointer-events: none;
}

.ticket-overlay-logo img {
  width: 100%;
  height: auto;
  max-height: 40px;
  object-fit: contain;
  display: block;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════
   TICKET PRESET 2 — CANVAS MODE
   Saat renderPreset2CanvasPreview selesai, semua overlay HTML
   disembunyikan dan digantikan oleh <img> canvas yang identik
   dengan hasil download HD.
   ══════════════════════════════════════════════════════════ */

/* Img canvas preview mengisi penuh inner card */
.ticket-preview-canvas-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  position: relative;
  z-index: 10;
}

/* Sembunyikan SEMUA overlay HTML saat canvas mode aktif (Mencegah box dobel) */
.ticket-inner-card.preset2-canvas-mode > *:not(#ticketPreviewCanvas),
.ticket-inner-card.ticket-preset2.preset2-canvas-mode > *:not(#ticketPreviewCanvas),
.ticket-inner-card.preset2-canvas-mode .ticket-bg-img,
.ticket-inner-card.preset2-canvas-mode .ticket-overlay-guest,
.ticket-inner-card.preset2-canvas-mode .ticket-overlay-ribbon,
.ticket-inner-card.preset2-canvas-mode .ticket-overlay-qr,
.ticket-inner-card.preset2-canvas-mode .ticket-overlay-tablemap,
.ticket-inner-card.preset2-canvas-mode .ticket-overlay-roses,
.ticket-inner-card.preset2-canvas-mode .ticket-overlay-logo,
.ticket-inner-card.preset2-canvas-mode .ticket-preset2-menu-card,
.ticket-inner-card.ticket-preset2.preset2-canvas-mode .ticket-bg-img,
.ticket-inner-card.ticket-preset2.preset2-canvas-mode .ticket-overlay-guest,
.ticket-inner-card.ticket-preset2.preset2-canvas-mode .ticket-overlay-ribbon,
.ticket-inner-card.ticket-preset2.preset2-canvas-mode .ticket-overlay-qr,
.ticket-inner-card.ticket-preset2.preset2-canvas-mode .ticket-overlay-tablemap,
.ticket-inner-card.ticket-preset2.preset2-canvas-mode .ticket-overlay-roses,
.ticket-inner-card.ticket-preset2.preset2-canvas-mode .ticket-overlay-logo,
.ticket-inner-card.ticket-preset2.preset2-canvas-mode .ticket-preset2-menu-card {
  display: none !important;
}

/* Loading shimmer saat rendering */
.ticket-inner-card.preset2-rendering {
  aspect-ratio: 576 / 1024;
  background: linear-gradient(
    90deg,
    #E8E2D9 25%,
    #F0EBE3 50%,
    #E8E2D9 75%
  );
  background-size: 200% 100%;
  animation: shimmerPreset2 1.4s infinite;
  border-radius: 20px;
  overflow: hidden;
}
.ticket-inner-card.preset2-rendering * {
  display: none !important;
}

@keyframes shimmerPreset2 {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════
   TICKET PRESET 2 — Linen Coklat (100% Sesuai Foto Referensi 2)
   Background: preset2-bg.jpg  (576 × 1024 px)
   ══════════════════════════════════════════════════════════ */

/* Pastikan base image preset2 tampil normal (tidak disembunyikan seperti emerald) */
.ticket-inner-card.ticket-preset2 .ticket-bg-img {
  visibility: visible !important;
  position: relative !important;
  display: block;
}

/* ── Ribbon & Table Map: Sembunyikan pada Preset 2 ── */
.ticket-inner-card.ticket-preset2 .ticket-overlay-ribbon,
.ticket-overlay-ribbon.ribbon-preset2 {
  display: none !important;
}

.ticket-inner-card.ticket-preset2 .ticket-overlay-tablemap {
  display: none !important;
}

.ticket-inner-card.ticket-preset2 .ticket-guest-menu-info {
  display: none !important;
}

.ticket-inner-card.ticket-preset2 .ticket-overlay-roses {
  display: none !important;
}

/* ── Guest Name & Wilayah Preset 2 ── */
/* Canvas: nameX=144, nameY=126 → top=10.5%, left=25.0% */
.ticket-inner-card.ticket-preset2 .ticket-overlay-guest {
  top:   10.5% !important;
  left:  25.0% !important;
  right: 15%   !important;
}

.ticket-inner-card.ticket-preset2 .ticket-overlay-guest .ticket-guest-name {
  color: #8E7E73 !important;    /* Taupe brown persis Foto 2 */
  font-size: clamp(0.85rem, 3.2cqw, 1.25rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.ticket-inner-card.ticket-preset2 .ticket-overlay-guest .ticket-guest-wilayah {
  color: #222222 !important;    /* Charcoal/Black persis Foto 2 */
  font-size: clamp(0.5rem, 1.8cqw, 0.72rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  margin-top: 3px !important;
}

/* ── QR Code Area Preset 2 ── */
/* Canvas: QR_BOX x=136, y=196, w=304, h=462
   → top=19.14%, left=23.61%, width=52.78%, height=45.12% */
.ticket-inner-card.ticket-preset2 .ticket-overlay-qr {
  top:    22.75% !important; /* y = 233 on 1024px */
  left:   23.44% !important; /* x = 135 on 576px */
  width:  50.69% !important; /* w = 292 on 576px */
  height: 39.55% !important; /* h = 405 on 1024px */
  background: transparent !important;
  border: none !important;
  border-radius: 24px 24px 0 0 !important;
  padding: 6% 4% 4% 4% !important;
  box-shadow: none !important;
}

/* Gate times preset 2: coklat taupe */
.ticket-inner-card.ticket-preset2 .ticket-gate-time.open-gate {
  color: #9E8E81 !important;
  font-weight: 700 !important;
}
.ticket-inner-card.ticket-preset2 .ticket-gate-divider {
  border-bottom: 1.2px dashed #9E8E81 !important;
}
.ticket-inner-card.ticket-preset2 .ticket-gate-time.close-gate {
  color: #8E7E73 !important;
  font-weight: 700 !important;
}

/* ── PRESET 2 Menu Card (Brown Pill Card: Two Columns Makanan & Minuman) ── */
.ticket-inner-card.ticket-preset2:not(.preset2-canvas-mode) .ticket-preset2-menu-card {
  display: flex !important;
  position: absolute;
  left: 9.375%;   /* x = 54 / 576 */
  width: 81.25%;  /* w = 468 / 576 */
  top: 76.17%;    /* y = 780 / 1024 */
  height: 11.13%; /* h = 114 / 1024 */
  background: #8E7E73;
  border-radius: 48px;
  align-items: center;
  justify-content: space-around;
  padding: 0 4%;
  box-sizing: border-box;
  z-index: 10;
}
.ticket-inner-card.preset2-canvas-mode .ticket-preset2-menu-card,
.ticket-inner-card.ticket-preset2.preset2-canvas-mode .ticket-preset2-menu-card {
  display: none !important;
}

.ticket-inner-card.ticket-preset2 .preset2-menu-col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
}

.ticket-inner-card.ticket-preset2 .preset2-menu-text {
  color: #FFFFFF;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(0.85rem, 3.0cqw, 1.2rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  white-space: pre-line;
}

/* Logo bawah preset 2: pakai preset2-logo.png via JS, posisi sama */


/* ── Cinema Pass Card (Desain Foto ke-2) ─────────────────── */
.cinema-pass-card {

  position: relative;
  background: linear-gradient(170deg, #F9EDE7 0%, #F4E4DC 100%);
  border-radius: 26px;
  padding: 1.75rem 1.25rem 0 1.25rem;
  box-shadow: 0 16px 40px rgba(74, 53, 49, 0.12);
  border: none;
  overflow: visible;
  margin-bottom: 1.5rem;
}

/* Ribbon Bookmark Tag (Seat No. & Table) di Kanan Atas — Desain Foto ke-2 */
.cinema-ribbon-tag {
  position: absolute;
  top: 0;
  right: 24px;
  width: 68px;
  background: #C27D6B;
  color: #FFFFFF;
  text-align: center;
  padding: 0.55rem 0.3rem 0.8rem 0.3rem;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 12px rgba(194, 125, 107, 0.4);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cinema-ribbon-tag .ribbon-label {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
}

.cinema-ribbon-tag .ribbon-seat-num {
  font-family: var(--font-sans);
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  margin: 0.1rem 0 0.15rem 0;
  color: #FFFFFF;
}

.cinema-ribbon-tag .ribbon-table-num {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  border-top: 1px solid rgba(255,255,255,0.35);
  padding-top: 0.2rem;
  width: 100%;
}

/* Classic Vintage Gold Inner Frame */
.cinema-card-inner-frame {
  border: 1.5px solid #D4B896;
  border-radius: 18px;
  padding: 1.1rem 1rem 0rem 1rem;
  position: relative;
  background: transparent;
  overflow: hidden;
}

/* Guest Identity Block (top-left, Image 2 style) */
.ticket-guest-identity {
  margin-bottom: 0.9rem;
  margin-top: 0.3rem;
}

.ticket-guest-name {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 700;
  color: #C27D6B;
  line-height: 1.2;
  margin-bottom: 0.12rem;
}

.ticket-guest-region {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: #7a8a8a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cinema-pass-sub {
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-rose-gold);
  font-weight: 700;
}

.cinema-pass-title {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--color-charcoal);
  margin-top: 0.15rem;
}

.cinema-pass-event-info {
  font-size: 0.72rem;
  color: var(--color-charcoal-soft);
  margin-top: 0.2rem;
}

.cinema-guest-name {
  font-family: var(--font-sans);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-rose-deep);
  line-height: 1.2;
}

.cinema-guest-nida {
  font-size: 0.8rem;
  color: var(--color-charcoal-soft);
  margin-top: 0.15rem;
}

/* QR Code Display Box */
.cinema-qr-wrapper {
  background: #FFFFFF;
  border-radius: 22px;
  padding: 1.5rem 1.5rem 1.2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(0,0,0,0.09);
  margin: 0 auto 0.75rem auto;
  max-width: 300px;
  width: 90%;
}

.cinema-qr-wrapper .qr-canvas-holder canvas {
  display: block;
  max-width: 100%;
  width: 220px !important;
  height: 220px !important;
}

/* Gate Times (below QR, Image 2 style) */
.ticket-gate-times {
  margin-top: 0.9rem;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.7;
}

.gate-open {
  color: #888;
}

.gate-open strong,
.gate-close strong {
  font-weight: 800;
}

.gate-close {
  color: #C27D6B;
}

/* Stage Graphic */
.cinema-stage-banner {
  width: 100%;
  margin: 0.5rem 0 0 0;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  line-height: 0;
}

.cinema-stage-banner .stage-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Floor Plan Seating Container (Cinema Style) ────────── */
.cinema-floorplan-container {
  background: #CF8476;
  border-radius: 18px;
  padding: 1rem 0.65rem 5.5rem 0.65rem;
  position: relative;
  color: #FFFFFF;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.08), 0 4px 14px rgba(207, 132, 118, 0.35);
  margin-top: -2px;
  overflow: visible;
}

.floorplan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.3rem 0.75rem 0.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  margin-bottom: 0.85rem;
}

.floorplan-title {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #FFFFFF;
}

.floorplan-legend {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #FFFFFF;
}

.legend-dot-assigned {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #738A73;
  display: inline-block;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 6px rgba(115, 138, 115, 0.8);
}

/* Floor Plan Layout */
.floorplan-layout {
  position: relative;
  padding: 0.25rem 0;
}

/* Floor Plan Tables Grid */
.floorplan-tables-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Upper Hall (Tables 1-4) & Lower Hall (Tables 5-10) */
.floorplan-hall-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  position: relative;
}

.floorplan-side-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
}

/* Walkway Aisle in between */
.floorplan-aisle-divider {
  width: 22px;
  min-width: 22px;
  align-self: stretch;
  background: #DDD4CE;
  border-radius: 4px;
  position: relative;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.12);
}

/* Individual Table Component */
.cinema-table-unit {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 2px;
  border-radius: 6px;
  flex: 1;
  justify-content: center;
}

.cinema-chair-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
}

.cinema-table-pillar {
  background: #FFFFFF;
  color: #5C4A45;
  border-radius: 4px;
  padding: 6px 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  height: 98px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  user-select: none;
  white-space: nowrap;
}

/* ── Cinema Seat Dot ────────────────────────────────────── */
.seat-dot {
  width: 17px;
  height: 17px;
  min-width: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  cursor: pointer;
  position: relative;
}

/* 1. Kursi Tersedia (Putih bersih) */
.seat-dot.seat-available {
  background: #FFFFFF;
  color: #5C4A45;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

.seat-dot.seat-available:hover {
  transform: scale(1.3);
  background: #FFFDF9;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  z-index: 5;
}

/* 2. Kursi Milik Tamu Ini (Sage Green persis seperti di foto referensi!) */
.seat-dot.seat-assigned {
  background: #738A73 !important;
  color: #FFFFFF !important;
  font-weight: 900;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 10px rgba(115, 138, 115, 0.9) !important;
  transform: scale(1.25);
  animation: pulseMySeat 2.2s infinite ease-in-out;
  z-index: 4;
}

/* 3. Kursi Terisi oleh Tamu Lain (Semi transparan / booked di bioskop) */
.seat-dot.seat-occupied {
  background: rgba(255, 255, 255, 0.42);
  color: rgba(92, 74, 69, 0.7);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
  cursor: pointer;
}

.seat-dot.seat-occupied:hover {
  transform: scale(1.15);
  background: rgba(255, 255, 255, 0.65);
}

@keyframes pulseMySeat {
  0% {
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0 rgba(115, 138, 115, 0.8);
  }
  70% {
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 7px rgba(115, 138, 115, 0);
  }
  100% {
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 0 rgba(115, 138, 115, 0);
  }
}

/* Floor Plan Footer */
.floorplan-footer {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  margin-top: 0.85rem;
  padding: 0.5rem 0 0 0;
  min-height: 80px;
  overflow: visible;
}

.floorplan-branding {
  position: relative;
  z-index: 2;
}

/* Ditsy logo as image */
.ditsy-logo-img {
  height: 55px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* Rose decorations at the bottom of the ticket */
.ticket-rose {
  position: absolute;
  bottom: -10px;
  width: 140px;
  height: auto;
  pointer-events: none;
  z-index: 3;
}

.ticket-rose-left {
  left: -15px;
}

.ticket-rose-right {
  right: -15px;
}

.floorplan-seat-badge {
  display: none; /* hidden in new design */
  backdrop-filter: blur(4px);
}

/* ── Ticket Notches ─────────────────────────────────────── */
.ticket-notch-row {
  position: relative;
  height: 22px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  overflow: visible;
}

.ticket-notch-row::before,
.ticket-notch-row::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-cream-bg);
  top: 0;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.10);
}

.ticket-notch-row::before { left: -11px; }
.ticket-notch-row::after  { right: -11px; }

.ticket-dashed-line {
  width: 100%;
  border-bottom: 2px dashed rgba(194, 125, 107, 0.35);
  margin: 0 14px;
}

/* ── QR Code Display ────────────────────────────────────── */
.qr-display-box {
  width: 210px;
  height: 210px;
  margin: 0.5rem auto 1.15rem auto;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: #FFFDF9;
  border: 2px dashed rgba(194, 125, 107, 0.5);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.qr-display-box canvas {
  width: 100% !important;
  height: auto !important;
  border-radius: 6px;
}

/* ── Ticket Meta Grid ───────────────────────────────────── */
.ticket-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  background: var(--color-cream-bg);
  border-radius: var(--radius-md);
  text-align: left;
}

.meta-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.meta-val {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1.3;
}

.ticket-instruction {
  font-size: 0.8rem;
  color: var(--color-charcoal-soft);
  margin: 0.85rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  line-height: 1.4;
}

/* ── RSVP Form Section ──────────────────────────────────── */
.rsvp-section {
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--radius-xl);
  padding: 1.75rem 1.25rem;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  margin: 0 1rem 1.5rem 1rem;
}

.rsvp-section-title {
  text-align: center;
  margin-bottom: 1.5rem;
}

.rsvp-section-title h2 {
  font-size: clamp(1.5rem, 5vw, 1.75rem);
  margin-top: 0.25rem;
}

.radio-pill-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.radio-pill-item {
  position: relative;
}

.radio-pill-item input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-pill-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.9rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border-subtle);
  background: var(--color-cream-bg);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-charcoal-soft);
  cursor: pointer;
  transition: all var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.radio-pill-item input:checked + .radio-pill-label {
  border-color: var(--color-rose-deep);
  background: var(--color-blush-soft);
  color: var(--color-rose-deep);
  box-shadow: 0 0 0 3px rgba(133, 66, 55, 0.1);
}

.radio-pill-label:active {
  transform: scale(0.97);
}

/* ── Footer ─────────────────────────────────────────────── */
.invitation-footer {
  text-align: center;
  padding: 1.5rem 1.5rem 0.5rem 1.5rem;
  color: var(--color-muted);
}

/* ==========================================================================
   MULTI-SESSION EVENT THEMES & CUSTOM DESIGN STYLES
   ========================================================================== */

/* ── Floating Session Header Banner ──────────────────────── */
.session-floating-banner {
  background: var(--color-cream-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.45rem 1rem;
  margin: 0.75rem 1rem 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  box-shadow: var(--shadow-xs);
  position: relative;
  z-index: 10;
}

.session-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-rose-deep);
  background: var(--color-blush-soft);
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  border: 1px solid var(--color-border);
}

.session-switch-link {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-rose-mid);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  transition: all var(--transition-fast);
}

.session-switch-link:hover {
  background: var(--color-blush-soft);
  color: var(--color-rose-deep);
}

/* ──────────────────────────────────────────────────────────
   1. THEME: EMERALD & ROYAL GOLD (Midnight Luxury Gala)
   ────────────────────────────────────────────────────────── */
body.theme-emerald {
  --color-cream-bg:      #071510;
  --color-cream-light:   #0C211A;
  --color-cream-card:    rgba(12, 33, 26, 0.92);
  --color-blush-soft:    #123629;
  --color-blush:         #1B4D3E;
  --color-blush-accent:  #D4AF37;
  --color-rose-gold:     #D4AF37;
  --color-rose-mid:      #B38F24;
  --color-rose-deep:     #F3E5AB;
  --color-rose-soft:     rgba(212, 175, 55, 0.25);
  --color-sage-soft:     #0F2B20;
  --color-sage:          #2E6F54;
  --color-charcoal:      #F7F3EE;
  --color-charcoal-soft: #D9CEC2;
  --color-muted:         #8FA89C;
  --color-border:        rgba(212, 175, 55, 0.28);
  --color-border-subtle: rgba(212, 175, 55, 0.16);
  --color-surface:       rgba(10, 27, 21, 0.96);
  --gradient-rose:       linear-gradient(135deg, #0A1C15 0%, #153E31 50%, #D4AF37 100%);
  --gradient-blush:      linear-gradient(145deg, #102F24 0%, #081711 100%);
  --gradient-cream:      linear-gradient(180deg, #0C211A 0%, #06120D 100%);
  --gradient-ticket:     linear-gradient(135deg, #071711 0%, #123629 55%, #1A4D3B 100%);
  background-color: #071510;
  color: #F7F3EE;
}

body.theme-emerald .ambient-blob-1 {
  background: radial-gradient(circle, rgba(27, 77, 62, 0.45) 0%, rgba(27, 77, 62, 0) 70%);
}

body.theme-emerald .ambient-blob-2 {
  background: radial-gradient(circle, rgba(212, 175, 55, 0.30) 0%, rgba(212, 175, 55, 0) 70%);
}

body.theme-emerald .invitation-hero {
  background: #071510;
}

body.theme-emerald .hero-gradient-overlay {
  background: linear-gradient(180deg, rgba(7, 21, 16, 0.2) 0%, rgba(7, 21, 16, 0.6) 40%, rgba(7, 21, 16, 0.98) 95%);
}

body.theme-emerald .guest-greeting-card {
  background: rgba(14, 38, 29, 0.88);
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

body.theme-emerald .cinema-pass-card {
  background: #0A1B14;
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 175, 55, 0.2);
}

body.theme-emerald .cinema-card-inner-frame {
  border-color: #D4AF37;
  background: linear-gradient(165deg, #0D261C 0%, #071610 100%);
}

body.theme-emerald .cinema-ribbon-tag {
  background: linear-gradient(135deg, #B38F24 0%, #D4AF37 100%);
  color: #071510;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

body.theme-emerald .cinema-ribbon-tag .ribbon-label {
  color: rgba(7, 21, 16, 0.8);
}

body.theme-emerald .cinema-ribbon-tag .ribbon-table-num {
  border-top-color: rgba(7, 21, 16, 0.25);
  color: #071510;
}

body.theme-emerald .btn-primary {
  background: linear-gradient(135deg, #D4AF37 0%, #B89028 100%);
  color: #071510;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35);
  border: none;
}

body.theme-emerald .btn-primary:hover {
  background: linear-gradient(135deg, #F3E5AB 0%, #D4AF37 100%);
  box-shadow: 0 8px 26px rgba(212, 175, 55, 0.5);
}

body.theme-emerald .btn-outline-gold {
  border-color: #D4AF37;
  color: #D4AF37;
}

body.theme-emerald .countdown-cell {
  background: rgba(14, 38, 29, 0.9);
  border-color: rgba(212, 175, 55, 0.3);
}

body.theme-emerald .countdown-num {
  color: #D4AF37;
}

body.theme-emerald .detail-card,
body.theme-emerald .map-embed-card,
body.theme-emerald .demo-switcher-box,
body.theme-emerald .rsvp-section {
  background: rgba(12, 33, 26, 0.88);
  border-color: rgba(212, 175, 55, 0.25);
}

body.theme-emerald .form-input,
body.theme-emerald .form-textarea,
body.theme-emerald .form-select {
  background: rgba(7, 21, 16, 0.8);
  border-color: rgba(212, 175, 55, 0.3);
  color: #F7F3EE;
}

body.theme-emerald .form-input:focus,
body.theme-emerald .form-textarea:focus {
  border-color: #D4AF37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}

body.theme-emerald .radio-pill-label {
  background: rgba(10, 27, 21, 0.85);
  border-color: rgba(212, 175, 55, 0.25);
  color: #D9CEC2;
}

body.theme-emerald .radio-pill-item input:checked + .radio-pill-label {
  background: rgba(212, 175, 55, 0.18);
  border-color: #D4AF37;
  color: #F3E5AB;
}

/* ── EMERALD THEME: Ticket Card Full Override ──────────── */

/* Sembunyikan background image rose/beige — ganti dengan CSS dark emerald */
body.theme-emerald .ticket-bg-img {
  visibility: hidden;
  position: absolute;
}

/* Card body: Dark Forest Emerald + Gold accent */
body.theme-emerald .ticket-inner-card {
  background: linear-gradient(160deg, #071813 0%, #0B2318 30%, #112D1F 60%, #091C14 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.42);
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.35),
    inset 0 0 0 8px rgba(212, 175, 55, 0.05);
  aspect-ratio: 576 / 1024;
  overflow: hidden;
}

body.theme-emerald .ticket-card-wrapper {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(212, 175, 55, 0.18),
    0 0 40px rgba(18, 54, 41, 0.4);
}

/* Dekorasi frame double-border (menggantikan ornamen dari base image) */
body.theme-emerald .ticket-inner-card::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 13px;
  pointer-events: none;
  z-index: 1;
}
body.theme-emerald .ticket-inner-card::after {
  content: '';
  position: absolute;
  inset: 15px;
  border: 0.5px solid rgba(212, 175, 55, 0.13);
  border-radius: 10px;
  pointer-events: none;
  z-index: 1;
}

/* Ribbon bookmark kanan atas — gold gradient */
body.theme-emerald .ticket-overlay-ribbon {
  background: linear-gradient(180deg, #B38F24 0%, #D4AF37 45%, #E6C84A 75%, #C0941A 100%);
  clip-path: polygon(0 0, 100% 0, 100% 87%, 50% 100%, 0 87%);
}
body.theme-emerald .ticket-overlay-ribbon .ribbon-label,
body.theme-emerald .ticket-overlay-ribbon .ribbon-seat-num,
body.theme-emerald .ticket-overlay-ribbon .ribbon-table-num {
  color: #071510 !important;
  text-shadow: none;
}

/* Guest name overlay: gold + sage */
body.theme-emerald .ticket-overlay-guest .ticket-guest-name {
  color: #D4AF37;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
body.theme-emerald .ticket-overlay-guest .ticket-guest-wilayah {
  color: #7EAD96;
}

/* QR code area: semi-transparan dark emerald dengan gold border */
body.theme-emerald .ticket-overlay-qr {
  background: rgba(7, 21, 16, 0.88);
  border: 1px solid rgba(212, 175, 55, 0.38);
  border-radius: 10px;
}

/* Gate times */
body.theme-emerald .ticket-gate-time.open-gate {
  color: #D4AF37;
}
body.theme-emerald .ticket-gate-divider {
  border-bottom-color: rgba(212, 175, 55, 0.45);
}
body.theme-emerald .ticket-gate-time.close-gate {
  color: #8FA89C;
}

/* Table Map: area background emerald gelap */
body.theme-emerald .ticket-overlay-tablemap rect {
  fill: rgba(212, 175, 55, 0.18) !important;
  stroke: rgba(212, 175, 55, 0.35);
  stroke-width: 0.5;
}
body.theme-emerald .ticket-overlay-tablemap > rect:first-child {
  fill: rgba(6, 18, 14, 0.92) !important;
}
body.theme-emerald .ticket-overlay-tablemap text {
  fill: #9DB89F !important;
}

/* Kursi kosong: outline gold transparan */
body.theme-emerald .ticket-overlay-tablemap .table-seat circle {
  fill: rgba(212, 175, 55, 0.10) !important;
  stroke: rgba(212, 175, 55, 0.38);
  stroke-width: 0.6;
}
body.theme-emerald .ticket-overlay-tablemap .table-seat text {
  fill: #D4AF37 !important;
}

/* Roses overlay: sembunyikan, tidak cocok untuk tema gelap */
body.theme-emerald .ticket-overlay-roses {
  opacity: 0.08;
  mix-blend-mode: luminosity;
  filter: grayscale(1) brightness(0.3);
}

/* ──────────────────────────────────────────────────────────
   2. THEME: TERRACOTTA & SUNSET SAND (Earthy Chic Modern)
   ────────────────────────────────────────────────────────── */
body.theme-terracotta {
  --color-cream-bg:      #FAF5EE;
  --color-cream-light:   #FFFDF9;
  --color-cream-card:    rgba(255, 255, 255, 0.92);
  --color-blush-soft:    #F9EAE3;
  --color-blush:         #EACBC0;
  --color-blush-accent:  #C86D51;
  --color-rose-gold:     #C86D51;
  --color-rose-mid:      #9E462E;
  --color-rose-deep:     #6B3526;
  --color-rose-soft:     rgba(200, 109, 81, 0.28);
  --color-charcoal:      #2A1D1A;
  --color-charcoal-soft: #5E4640;
  --color-muted:         #8F7974;
  --color-border:        rgba(200, 109, 81, 0.24);
  --color-border-subtle: rgba(200, 109, 81, 0.14);
  --gradient-rose:       linear-gradient(135deg, #6B3526 0%, #C86D51 60%, #E89A80 100%);
  --gradient-ticket:     linear-gradient(135deg, #532317 0%, #8A3D2A 50%, #C86D51 100%);
  --gradient-blush:      linear-gradient(145deg, #F9EAE3 0%, #FFFFFF 100%);
  background-color: #FAF5EE;
}

body.theme-terracotta .ambient-blob-1 {
  background: radial-gradient(circle, rgba(200, 109, 81, 0.28) 0%, rgba(200, 109, 81, 0) 70%);
}

body.theme-terracotta .ambient-blob-2 {
  background: radial-gradient(circle, rgba(232, 197, 168, 0.35) 0%, rgba(232, 197, 168, 0) 70%);
}

body.theme-terracotta .cinema-ribbon-tag {
  background: linear-gradient(135deg, #C86D51 0%, #9E462E 100%);
  color: #FFFDF9;
}

body.theme-terracotta .btn-primary {
  background: linear-gradient(135deg, #6B3526 0%, #C86D51 100%);
  box-shadow: 0 6px 20px rgba(107, 53, 38, 0.3);
}

/* ──────────────────────────────────────────────────────────
   3. THEME: SAPPHIRE SERENITY & SILVER (Celestial Royal)
   ────────────────────────────────────────────────────────── */
body.theme-sapphire {
  --color-cream-bg:      #F0F4FA;
  --color-cream-light:   #F8FAFD;
  --color-cream-card:    rgba(255, 255, 255, 0.94);
  --color-blush-soft:    #E2ECF8;
  --color-blush:         #C2D6EE;
  --color-blush-accent:  #3B82F6;
  --color-rose-gold:     #2563EB;
  --color-rose-mid:      #1D4ED8;
  --color-rose-deep:     #122544;
  --color-rose-soft:     rgba(59, 130, 246, 0.25);
  --color-charcoal:      #0F1E36;
  --color-charcoal-soft: #384A68;
  --color-muted:         #6E819E;
  --color-border:        rgba(59, 130, 246, 0.22);
  --color-border-subtle: rgba(59, 130, 246, 0.12);
  --gradient-rose:       linear-gradient(135deg, #122544 0%, #1D4ED8 60%, #3B82F6 100%);
  --gradient-ticket:     linear-gradient(135deg, #0A162B 0%, #152E58 50%, #204B8C 100%);
  --gradient-blush:      linear-gradient(145deg, #E2ECF8 0%, #FFFFFF 100%);
  background-color: #F0F4FA;
}

body.theme-sapphire .ambient-blob-1 {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.22) 0%, rgba(37, 99, 235, 0) 70%);
}

body.theme-sapphire .ambient-blob-2 {
  background: radial-gradient(circle, rgba(147, 197, 253, 0.32) 0%, rgba(147, 197, 253, 0) 70%);
}

body.theme-sapphire .cinema-ribbon-tag {
  background: linear-gradient(135deg, #2563EB 0%, #122544 100%);
  color: #FFFFFF;
}

body.theme-sapphire .btn-primary {
  background: linear-gradient(135deg, #122544 0%, #2563EB 100%);
  box-shadow: 0 6px 20px rgba(18, 37, 68, 0.3);
}

/* ──────────────────────────────────────────────────────────
   4. THEME: LILAC TWILIGHT & PEARL (Dreamy Pastel Violet)
   ────────────────────────────────────────────────────────── */
body.theme-lavender {
  --color-cream-bg:      #F9F6FC;
  --color-cream-light:   #FCFAFD;
  --color-cream-card:    rgba(255, 255, 255, 0.94);
  --color-blush-soft:    #F2EBF9;
  --color-blush:         #DFCEF4;
  --color-blush-accent:  #9C7DC2;
  --color-rose-gold:     #9C7DC2;
  --color-rose-mid:      #784A9F;
  --color-rose-deep:     #4D2B69;
  --color-rose-soft:     rgba(156, 125, 194, 0.28);
  --color-charcoal:      #261733;
  --color-charcoal-soft: #543D69;
  --color-muted:         #846F98;
  --color-border:        rgba(156, 125, 194, 0.24);
  --color-border-subtle: rgba(156, 125, 194, 0.14);
  --gradient-rose:       linear-gradient(135deg, #4D2B69 0%, #784A9F 60%, #9C7DC2 100%);
  --gradient-ticket:     linear-gradient(135deg, #321647 0%, #582C79 50%, #8553A8 100%);
  --gradient-blush:      linear-gradient(145deg, #F2EBF9 0%, #FFFFFF 100%);
  background-color: #F9F6FC;
}

body.theme-lavender .ambient-blob-1 {
  background: radial-gradient(circle, rgba(156, 125, 194, 0.28) 0%, rgba(156, 125, 194, 0) 70%);
}

body.theme-lavender .ambient-blob-2 {
  background: radial-gradient(circle, rgba(223, 206, 244, 0.38) 0%, rgba(223, 206, 244, 0) 70%);
}

body.theme-lavender .cinema-ribbon-tag {
  background: linear-gradient(135deg, #9C7DC2 0%, #4D2B69 100%);
  color: #FFFFFF;
}

body.theme-lavender .btn-primary {
  background: linear-gradient(135deg, #4D2B69 0%, #784A9F 100%);
  box-shadow: 0 6px 20px rgba(77, 43, 105, 0.3);
}