/* ============================================================
   PerpectHub — Tema 10 template undangan
   Setiap kelas .tpl-* meng-override token di invite-core.css
   ============================================================ */

/* ---------- 1. Klasik Jawa ---------- */
.tpl-klasik-jawa {
  --tbg: #f7f1e5; --tink: #3a2f26; --tcard: #fffdf8;
  --taccent: #a47c48; --taccent2: #3d2b1f;
  --thead: "Playfair Display", Georgia, serif;
  --tbody: "Poppins", system-ui, sans-serif;
  background-image:
    repeating-linear-gradient(45deg, rgba(164,124,72,.05) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(164,124,72,.05) 0 2px, transparent 2px 14px);
}
.tpl-klasik-jawa .sec-title::after { width: 70px; height: 3px; background: linear-gradient(90deg, transparent, #a47c48, transparent); }
.tpl-klasik-jawa .cover-pretitle { letter-spacing: .4em; }
.tpl-klasik-jawa .script-names { font-family: "Playfair Display", serif; letter-spacing: .02em; }

/* ---------- 2. Modern Minimalis ---------- */
.tpl-modern-minimalis {
  --tbg: #fbfaf8; --tink: #33383d; --tcard: #ffffff;
  --taccent: #8a8f7e; --taccent2: #2f3437;
  --thead: "Cormorant Garamond", Georgia, serif;
  --tbody: "Poppins", system-ui, sans-serif;
}
.tpl-modern-minimalis .sec { padding: 44px 22px; }
.tpl-modern-minimalis .sec-title { font-size: 1.35rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.tpl-modern-minimalis .sec-title::after { width: 34px; height: 1px; }
.tpl-modern-minimalis .script-names { font-family: "Cormorant Garamond", serif; font-style: italic; }
.tpl-modern-minimalis .couple-photo { border-radius: 18px; }
.tpl-modern-minimalis .event-card, .tpl-modern-minimalis .wish-form { border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.tpl-modern-minimalis .gift-card { border-radius: 10px; }
.tpl-modern-minimalis .bottom-nav { background: rgba(255,255,255,.97); }

/* ---------- 3. Floral Rustic ---------- */
.tpl-floral-rustic {
  --tbg: #faf7f0; --tink: #41473a; --tcard: #ffffff;
  --taccent: #7c8b62; --taccent2: #4a5540;
}
.tpl-floral-rustic body { background: #faf7f0; }
.tpl-floral-rustic .cover { background: linear-gradient(160deg, #5c6b52, #8a9a76 60%, #cbb99a); }
.tpl-floral-rustic .sec-title::after { background: linear-gradient(90deg, transparent, #7c8b62, #cbb99a, transparent); height: 3px; }
.tpl-floral-rustic .event-card, .tpl-floral-rustic .wish-form { border-top: 3px solid #cbb99a; }
.tpl-floral-rustic .petal.pt-petal { background: radial-gradient(circle at 30% 30%, #d9e3c8, #a8b98a); }

/* ---------- 4. Luxury Gold ---------- */
.tpl-luxury-gold {
  --tbg: #0f1626; --tink: #e9e2cf; --tcard: #16213a;
  --taccent: #c9a227; --taccent2: #f3e5b8;
  --thead: "Playfair Display", Georgia, serif;
}
.tpl-luxury-gold body { background: #0f1626; }
.tpl-luxury-gold .guest-badge { background: rgba(6, 9, 18, .94); }
.tpl-luxury-gold .sec-title { color: #f3e5b8; }
.tpl-luxury-gold .sec-title::after { background: linear-gradient(90deg, transparent, #c9a227, transparent); height: 2px; }
.tpl-luxury-gold .cover-open-btn { background: linear-gradient(135deg, #c9a227, #e6c76a); color: #101a2b; }
.tpl-luxury-gold .event-card, .tpl-luxury-gold .wish-form, .tpl-luxury-gold .gift-card,
.tpl-luxury-gold .rsvp-stats > div, .tpl-luxury-gold .cd-box, .tpl-luxury-gold .wish-item {
  background: #16213a; border: 1px solid rgba(201, 162, 39, .3); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.tpl-luxury-gold .cd-box b, .tpl-luxury-gold .rsvp-stats b, .tpl-luxury-gold .wish-item .w-name { color: #f3e5b8; }
.tpl-luxury-gold .cover-guest { background: rgba(201, 162, 39, .12); border-color: rgba(201, 162, 39, .4); }
.tpl-luxury-gold .bottom-nav { background: rgba(10, 15, 28, .92); border-color: rgba(201, 162, 39, .3); }
.tpl-luxury-gold .bn-item { color: #d8d2c0; }
.tpl-luxury-gold .bn-item:hover, .tpl-luxury-gold .bn-item.active { background: rgba(201, 162, 39, .16); }
.tpl-luxury-gold .lightbox { background: rgba(4, 6, 12, .96); }
.tpl-luxury-gold .muted { opacity: .8; }
.tpl-luxury-gold .ig-chip { background: rgba(201, 162, 39, .1); border-color: rgba(201, 162, 39, .3); color: #e6c76a; }
.tpl-luxury-gold .wish-form input, .tpl-luxury-gold .wish-form select, .tpl-luxury-gold .wish-form textarea {
  background: #0f1626; color: #e9e2cf; border-color: rgba(201, 162, 39, .3); }

/* ---------- 5. Islami ---------- */
.tpl-islami {
  --tbg: #f4faf7; --tink: #274238; --tcard: #ffffff;
  --taccent: #177a63; --taccent2: #0e4d45;
}
.tpl-islami .cover { background: linear-gradient(160deg, #0e4d45, #177a63 60%, #d4af37 130%); }
.tpl-islami .sec-title::after { background: linear-gradient(90deg, transparent, #177a63, #d4af37, transparent); }
.tpl-islami .ornament { color: #d4af37; }
.tpl-islami .event-card { border-top: 3px solid #d4af37; }
.tpl-islami .quote { color: #0e4d45; }

/* ---------- 6. Elegant Rose ---------- */
.tpl-elegant-rose {
  --tbg: #fdf5f5; --tink: #5a3d44; --tcard: #ffffff;
  --taccent: #b76e79; --taccent2: #6d3b47;
  --tscript: "Great Vibes", cursive;
}
.tpl-elegant-rose .cover { background: linear-gradient(160deg, #8e4a5b, #c98a97 60%, #f2d7da 130%); }
.tpl-elegant-rose .sec-title::after { background: linear-gradient(90deg, transparent, #b76e79, transparent); }
.tpl-elegant-rose .petal.pt-petal { background: radial-gradient(circle at 30% 30%, #f7d4da, #d98a97); }
.tpl-elegant-rose .event-card { box-shadow: 0 10px 30px rgba(183, 110, 121, .12); }

/* ---------- 7. Scandinavian ---------- */
.tpl-scandinavian {
  --tbg: #fcfdfe; --tink: #3d4750; --tcard: #ffffff;
  --taccent: #7fa3b8; --taccent2: #3d5a6c;
  --thead: "Cormorant Garamond", Georgia, serif;
}
.tpl-scandinavian .sec-title { letter-spacing: .16em; text-transform: uppercase; font-size: 1.1rem; font-weight: 500; }
.tpl-scandinavian .sec-title::after { width: 30px; height: 2px; }
.tpl-scandinavian .couple-photo { border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; }
.tpl-scandinavian .event-card { border: 1.5px solid #dfe8ee; box-shadow: 0 6px 16px rgba(61, 90, 108, .08); }
.tpl-scandinavian .script-names { font-family: "Cormorant Garamond", serif; font-style: italic; }

/* ---------- 8. Tropical ---------- */
.tpl-tropical {
  --tbg: #f6fbf4; --tink: #2c4a38; --tcard: #ffffff;
  --taccent: #2ea36b; --taccent2: #0b5d43;
}
.tpl-tropical .cover { background: linear-gradient(160deg, #0b6e4f, #2ea36b 60%, #ffd166 130%); }
.tpl-tropical .sec-title::after { background: linear-gradient(90deg, transparent, #2ea36b, #ffd166, transparent); height: 3px; }
.tpl-tropical .petal.pt-confetti { background: linear-gradient(135deg, #2ea36b, #ffd166); }
.tpl-tropical .event-card { border-left: 4px solid #2ea36b; }

/* ---------- 9. Vintage ---------- */
.tpl-vintage {
  --tbg: #f8f3e9; --tink: #4d4335; --tcard: #fffaf0;
  --taccent: #9a7b4f; --taccent2: #5a4a33;
}
.tpl-vintage body { background: #f8f3e9; }
.tpl-vintage .cover { background: linear-gradient(160deg, #6f5b3e, #a08a5f 60%, #e4d5b0 130%); }
.tpl-vintage .sec-title { letter-spacing: .1em; }
.tpl-vintage .sec-title::after { background: repeating-linear-gradient(90deg, #9a7b4f 0 8px, transparent 8px 14px); height: 2px; }
.tpl-vintage .event-card, .tpl-vintage .wish-form { border: 1px solid #d9c9a8; box-shadow: 0 6px 16px rgba(90, 74, 51, .12); }
.tpl-vintage .g-item { border: 4px solid #fffaf0; outline: 1px solid #d9c9a8; }

/* ---------- 10. Kids / Khitanan / Ulang Tahun ---------- */
.tpl-kids {
  --tbg: #fff8f2; --tink: #4a3a3d; --tcard: #ffffff;
  --taccent: #ff7b8a; --taccent2: #e05575;
  --thead: "Poppins", system-ui, sans-serif;
  --tbody: "Poppins", system-ui, sans-serif;
  --tscript: "Great Vibes", cursive;
}
.tpl-kids body { background: #fff8f2; }
.tpl-kids .cover { background: linear-gradient(160deg, #ff9a8b, #ff6a88 55%, #ffb56b 130%); }
.tpl-kids .sec-title { font-weight: 700; }
.tpl-kids .sec-title::after { background: repeating-linear-gradient(90deg, #ff7b8a 0 10px, #ffd166 10px 20px, #7fd1c0 20px 30px); height: 4px; border-radius: 2px; }
.tpl-kids .cd-box { border-radius: 20px; }
.tpl-kids .couple-photo { border-radius: 42% 58% 60% 40% / 45% 50% 55% 50%; background: linear-gradient(135deg, #ff9a8b, #ffd166); }
.tpl-kids .event-card { border: 2px dashed #ffb9a0; box-shadow: 0 8px 20px rgba(255, 122, 138, .15); }
.tpl-kids .btn { border-radius: 999px; font-weight: 600; }
.tpl-kids .petal.pt-confetti { width: 10px; height: 16px; }

/* ---------- 11. Khitanan Batik (kawung soga) ---------- */
.tpl-khitanan-batik {
  --tbg: #f8f1e4; --tink: #4a3527; --tcard: #fffcf5;
  --taccent: #8b5e34; --taccent2: #5d4037;
  --thead: "Playfair Display", Georgia, serif;
  --tbody: "Poppins", system-ui, sans-serif;
  /* motif kawung: 4 kelopak elips per tile 44px */
  background-color: #f8f1e4;
  background-image:
    radial-gradient(ellipse 9px 15px at 50% 22%, rgba(139, 94, 52, .13), transparent 72%),
    radial-gradient(ellipse 9px 15px at 50% 78%, rgba(139, 94, 52, .13), transparent 72%),
    radial-gradient(ellipse 15px 9px at 22% 50%, rgba(139, 94, 52, .13), transparent 72%),
    radial-gradient(ellipse 15px 9px at 78% 50%, rgba(139, 94, 52, .13), transparent 72%),
    radial-gradient(circle at 50% 50%, rgba(93, 64, 55, .08) 0 2.5px, transparent 3.5px);
  background-size: 44px 44px;
}
.tpl-khitanan-batik .cover { background: linear-gradient(160deg, #5d4037, #8b5e34 60%, #d9b380 130%); }
.tpl-khitanan-batik .cover-bg::after { background: linear-gradient(180deg, rgba(50, 33, 22, .35), rgba(50, 33, 22, .6)); }
.tpl-khitanan-batik .sec-title::after {
  height: 4px; border-radius: 2px;
  background: repeating-linear-gradient(45deg, #8b5e34 0 8px, #d9b380 8px 16px);
}
.tpl-khitanan-batik .ornament { color: #8b5e34; }
.tpl-khitanan-batik .quote { color: #5d4037; }
.tpl-khitanan-batik .couple-photo { background: linear-gradient(135deg, #8b5e34, #5d4037); border-color: #fffcf5; }
.tpl-khitanan-batik .event-card { border-top: 4px solid #8b5e34; }
.tpl-khitanan-batik .event-card, .tpl-khitanan-batik .wish-form {
  box-shadow: 0 8px 24px rgba(93, 64, 55, .14); border: 1px solid #e6d5b8;
}
.tpl-khitanan-batik .event-card::before { content: "ۙ"; display: block; font-size: 1.3rem; color: #b08d57; margin-bottom: 6px; }
.tpl-khitanan-batik .gift-card { border: 1px solid #e6d5b8; }
.tpl-khitanan-batik .petal.pt-heart { color: #b08d57; }
.tpl-khitanan-batik .bottom-nav { background: rgba(255, 252, 245, .95); border: 1px solid #e6d5b8; }
.tpl-khitanan-batik .tl-dot { background: #8b5e34; box-shadow: 0 0 0 2px #8b5e34; }