/* ==========================================================================
   GCC WEDDING TOKENS — VISUAL SKIN  v6.0 (clean rewrite)
   --------------------------------------------------------------------------
   NGUYÊN TẮC THIẾT KẾ:
   • TUYỆT ĐỐI không đụng layout (flex, grid, gap, padding, sizing) —
     gcc-wedding-preview.css v5 độc quyền layout.
   • Tokens chỉ phụ trách: màu, typography, border, shadow, animation.
   • Background card: SOLID color (không gradient 160° → tránh bug
     "dải đậm rơi giữa card" khi `background-size: cover` từ v5).
   • Header: trong suốt SẠCH — không pseudo, không background.
   • Box message & event-details: cùng tone vàng nhạt, weight đồng đều
     → contrast với card root tinh tế, không cảm giác chồng lớp.
   • Animation: chỉ giữ sparkle (ornament) + fade-settle (content).
     Hai hiệu ứng dùng opacity/transform thuần, không pan gradient.
   • Ảnh nền inline: tokens TỰ ĐỘNG trong suốt qua [style*="background-image"].

   CASCADE:
     1. v5 preview CSS định nghĩa layout (selector không có data-wedding-template)
     2. Tokens (file này) định nghĩa visual (selector có data-wedding-template)
        → specificity cao hơn nên thắng cascade ở đúng property visual
        → KHÔNG cần !important trừ visibility/transparency override
   ========================================================================== */

/* ==========================================================================
   0. FONT IMPORT
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ==========================================================================
   1. CSS VARIABLES
   --------------------------------------------------------------------------
   Tất cả màu, font, animation timing đều ở đây.
   Template biến thể chỉ cần override các vars này, không cần viết lại CSS.
   ========================================================================== */
.gcc-preview-wedding-card[data-wedding-template],
.gcc-wedding-card[data-wedding-template] {
  /* ── Brand accent (PALETTE OVERRIDE — đây là biến PRIMARY, palette chỉ
        cần đổi --wc-accent là 90% biến khác tự đổi theo nhờ color-mix) ── */
  --wc-accent:        #c9a227;   /* gold */
  --wc-accent-dark:   #a07e15;   /* gold dark */

  /* ── DERIVED accent variants ──
        Dùng color-mix để các template chỉ cần set --wc-accent.
        Palette vẫn có thể override trực tiếp 4 biến này nếu muốn tinh chỉnh. */
  --wc-accent-soft:   color-mix(in srgb, var(--wc-accent) 12%, transparent);
  --wc-accent-border: color-mix(in srgb, var(--wc-accent) 45%, transparent);

  /* ── Text ── */
  --wc-text:          #3a2f1e;
  /* DERIVED — text muted = text gốc pha với accent (giữ tone nhưng nhạt hơn) */
  --wc-text-muted:    color-mix(in srgb, var(--wc-text) 60%, var(--wc-accent) 25%);

  /* ── Card surface ── */
  --wc-bg:            #fbf6e4;   /* solid, NO gradient */
  /* DERIVED — surface-soft tự đổi theo accent → các box message/event-details
                tự ăn màu palette mà không cần palette set tay biến này */
  --wc-surface-soft:  color-mix(in srgb, var(--wc-accent) 7%, transparent);

  /* ── Typography ── */
  --wc-font-display:  'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --wc-font-body:     'Cormorant Garamond', Georgia, serif;
  --wc-font-accent:   'Cinzel', Georgia, serif;

  /* ── Shape ── */
  --wc-radius:        16px;
  --wc-radius-inner:  12px;
  /* DERIVED — border-color follow accent-border (palette chỉ override 1 chỗ) */
  --wc-border-color:  var(--wc-accent-border);

  /* ── Shadow (outer only, NO inset) ── */
  --wc-shadow:        0 6px 20px rgba(0, 0, 0, 0.10);
  /* DERIVED — shadow glow ăn theo accent */
  --wc-shadow-glow:   0 4px 16px color-mix(in srgb, var(--wc-accent) 22%, transparent);

  /* ── Decorative ── */
  --wc-ornament-symbol: "\2726"; /* ✦ */
  /* DERIVED — divider gradient theo accent-dark */
  --wc-divider-gradient: linear-gradient(
    90deg,
    transparent,
    var(--wc-accent-dark),
    transparent
  );

  /* ── Animation timing ── */
  --wc-anim-sparkle:  1.9s;
  --wc-anim-content:  4.96s;
  --wc-anim-delay:    0.42s;
}

/* ==========================================================================
   2. KEYFRAMES — chỉ 2 cái cần thiết
   ========================================================================== */
@keyframes gcc-wc-sparkle {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.1);  }
}

@keyframes gcc-wc-fade-settle {
  0%   { opacity: 0.7; transform: translateY(2px); }
  100% { opacity: 1;   transform: translateY(0);   }
}

/* ==========================================================================
   3. CARD BASE — surface visual
   --------------------------------------------------------------------------
   Background SOLID. Không gradient → không bug khi v5 áp `cover`.
   Position: relative để chứa absolute children (canvas, photo orbit, etc).
   ========================================================================== */
.gcc-preview-wedding-card[data-wedding-template],
.gcc-wedding-card[data-wedding-template] {
  font-family:   var(--wc-font-body);
  color:         var(--wc-text);
  background:    var(--wc-bg);
  border:        1px solid var(--wc-accent);
  border-radius: var(--wc-radius);
  box-shadow:    var(--wc-shadow);
  /* position: relative → structural, gcc-wedding-preview.css § BASE */
}

/* Khi user chọn ảnh nền inline → tokens nhường background hoàn toàn */
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"],
.gcc-wedding-card[data-wedding-template][style*="background-image"] {
  background-color: transparent;
}

/* ==========================================================================
   4. HEADER — TRONG SUỐT SẠCH
   --------------------------------------------------------------------------
   Tuyệt đối không pseudo, không background, không box-shadow inset.
   Header chỉ là vùng chứa text — visual hoàn toàn đến từ con của nó.
   ========================================================================== */
.gcc-preview-wedding-card[data-wedding-template] .wedding-header,
.gcc-wedding-card[data-wedding-template] .wedding-header {
  background:  transparent;
  border:      0;
  box-shadow:  none;
}

/* Landscape: border-right phân cách col-left / col-right */
.gcc-preview-wedding-card[data-wedding-template][data-orientation="landscape"] .wedding-header,
.gcc-wedding-card[data-wedding-template][data-orientation="landscape"] .wedding-header {
  border-right: 1.5px solid var(--wc-accent-border);
}

/* ── Ornament ── */
.gcc-preview-wedding-card[data-wedding-template] .wedding-ornament,
.gcc-wedding-card[data-wedding-template] .wedding-ornament {
  color:    var(--wc-accent);
  /* overflow: visible → structural, gcc-wedding-preview.css § Ornament */
  animation: gcc-wc-sparkle var(--wc-anim-sparkle) ease-in-out infinite;
  transform-origin: center;
}

/* Ký tự ornament ✦ render qua ::before khi không có <img> */
.gcc-preview-wedding-card[data-wedding-template] .wedding-ornament::before,
.gcc-wedding-card[data-wedding-template] .wedding-ornament::before {
  content: var(--wc-ornament-symbol);
}
.gcc-preview-wedding-card[data-wedding-template] .wedding-ornament:has(img)::before,
.gcc-wedding-card[data-wedding-template] .wedding-ornament:has(img)::before {
  content: none !important; /* :has + ::before cùng specificity → cần !important */
}
.gcc-preview-wedding-card[data-wedding-template] .wedding-ornament img,
.gcc-wedding-card[data-wedding-template] .wedding-ornament img {
  /* display: inline-block → structural, gcc-wedding-preview.css § Ornament img */
  vertical-align: middle;
}

/* ── Invitation title ── */
.gcc-preview-wedding-card[data-wedding-template] .invitation-title,
.gcc-wedding-card[data-wedding-template] .invitation-title {
  color:       var(--wc-accent);
  font-family: var(--wc-font-accent);
  font-weight: 600;
}

/* ── Couple names ── chỉ màu + font, KHÔNG đụng flex (v5 quản) ── */
.gcc-preview-wedding-card[data-wedding-template] .couple-names,
.gcc-preview-wedding-card[data-wedding-template] .wedding-couple-names,
.gcc-wedding-card[data-wedding-template] .couple-names,
.gcc-wedding-card[data-wedding-template] .wedding-couple-names {
  color:       var(--wc-text);
  font-family: var(--wc-font-display);
  font-weight: 600;
}

.gcc-preview-wedding-card[data-wedding-template] .ampersand,
.gcc-wedding-card[data-wedding-template] .ampersand {
  color:       var(--wc-accent);
  font-family: var(--wc-font-accent);
  font-style:  italic;
  font-weight: 500;
}

.gcc-preview-wedding-card[data-wedding-template] .groom-name,
.gcc-preview-wedding-card[data-wedding-template] .bride-name,
.gcc-wedding-card[data-wedding-template] .groom-name,
.gcc-wedding-card[data-wedding-template] .bride-name {
  color: var(--wc-text);
}

/* ── Parents names ── */
.gcc-preview-wedding-card[data-wedding-template] .wedding-parents-names,
.gcc-wedding-card[data-wedding-template] .wedding-parents-names {
  color:       var(--wc-text-muted);
  font-family: var(--wc-font-body);
  font-style:  italic;
}

/* ── Divider — line + icon (cặp nhẫn ở trên / 2 trái tim ở dưới) ── */
.gcc-preview-wedding-card[data-wedding-template] .wedding-divider,
.gcc-wedding-card[data-wedding-template] .wedding-divider {
  /* RESET — divider mới là flex container (line — icon — line),
     KHÔNG còn là 1 thanh background nữa */
  background: transparent;
  border:     0;
  display:    flex;
  align-items: center;
  justify-content: center;
  gap:        12px;
  width:      88%;
  max-width:  100%;
  margin:     14px auto;
  color:      var(--wc-accent, currentColor);
}

/* 2 đường line ở 2 bên — gradient mảnh, fade về phía icon */
.gcc-preview-wedding-card[data-wedding-template] .wedding-divider__line,
.gcc-wedding-card[data-wedding-template] .wedding-divider__line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--wc-divider-gradient,
              linear-gradient(to right,
                transparent,
                currentColor 35%,
                currentColor 65%,
                transparent));
  opacity: 0.55;
}

/* Container icon ở giữa */
.gcc-preview-wedding-card[data-wedding-template] .wedding-divider__icon,
.gcc-wedding-card[data-wedding-template] .wedding-divider__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wc-accent, currentColor);
  line-height: 0;
}

/* SVG bên trong */
.gcc-preview-wedding-card[data-wedding-template] .wedding-divider__icon svg,
.gcc-wedding-card[data-wedding-template] .wedding-divider__icon svg {
  display: block;
  width:  64px;
  height: 32px;
  overflow: visible;
}

/* ==========================================================================
   5. CONTENT — message & event details
   --------------------------------------------------------------------------
   Cả 2 box dùng cùng surface-soft + cùng border → đồng đều, weight nhẹ.
   Animation fade-settle subtle khi load.
   ========================================================================== */
.gcc-preview-wedding-card[data-wedding-template] .wedding-content,
.gcc-wedding-card[data-wedding-template] .wedding-content {
  animation: gcc-wc-fade-settle var(--wc-anim-content) ease-out
             var(--wc-anim-delay) both;
}

/* ── Message box ── */
.gcc-preview-wedding-card[data-wedding-template] .invitation-message,
.gcc-preview-wedding-card[data-wedding-template] .wedding-message,
.gcc-wedding-card[data-wedding-template] .invitation-message,
.gcc-wedding-card[data-wedding-template] .wedding-message {
  color:         var(--wc-text);
  font-family:   var(--wc-font-body);
  background:    var(--wc-surface-soft);
  border:        1px solid var(--wc-border-color);
  border-radius: var(--wc-radius-inner);
}

/* ── Event details container ── */
.gcc-preview-wedding-card[data-wedding-template] .wedding-event-details,
.gcc-wedding-card[data-wedding-template] .wedding-event-details {
  background:    var(--wc-surface-soft);
  border:        1px solid var(--wc-border-color);
  border-radius: var(--wc-radius-inner);
}

/* Detail item — KHÔNG đụng layout, chỉ visual */
.gcc-preview-wedding-card[data-wedding-template] .wedding-detail-item,
.gcc-wedding-card[data-wedding-template] .wedding-detail-item {
  background: transparent;
  border:     0;
}

.gcc-preview-wedding-card[data-wedding-template] .detail-icon,
.gcc-wedding-card[data-wedding-template] .detail-icon {
  color:    var(--wc-accent);
  /* overflow: visible → structural, gcc-wedding-preview.css § Detail icon */
}

.gcc-preview-wedding-card[data-wedding-template] .detail-label,
.gcc-wedding-card[data-wedding-template] .detail-label {
  color:       var(--wc-accent-dark);
  font-family: var(--wc-font-accent);
  font-weight: 600;
}

.gcc-preview-wedding-card[data-wedding-template] .detail-value,
.gcc-wedding-card[data-wedding-template] .detail-value {
  color:       var(--wc-text);
  font-family: var(--wc-font-body);
}

/* ── Map button ── */
.gcc-preview-wedding-card[data-wedding-template] .wedding-map-button,
.gcc-wedding-card[data-wedding-template] .wedding-map-button {
  background:    var(--wc-accent);
  color:         #fff;
  border:        0;
  text-decoration: none;
  transition:    background-color 0.2s ease;
}

.gcc-preview-wedding-card[data-wedding-template] .wedding-map-button:hover,
.gcc-wedding-card[data-wedding-template] .wedding-map-button:hover {
  background: var(--wc-accent-dark);
}

/* ==========================================================================
   6. FOOTER
   ========================================================================== */
.gcc-preview-wedding-card[data-wedding-template] .wedding-footer,
.gcc-wedding-card[data-wedding-template] .wedding-footer {
  background: transparent;
  border:     0;
}

/* Landscape: border-top gold rõ ràng + nền nhạt phân vùng footer */
.gcc-preview-wedding-card[data-wedding-template][data-orientation="landscape"] .wedding-footer,
.gcc-wedding-card[data-wedding-template][data-orientation="landscape"] .wedding-footer {
  border-top:  1.5px solid var(--wc-accent-border);
  background:  rgba(201, 162, 39, 0.04);
}

.gcc-preview-wedding-card[data-wedding-template] .footer-message,
.gcc-wedding-card[data-wedding-template] .footer-message {
  color:       var(--wc-text-muted);
  font-family: var(--wc-font-body);
  font-style:  italic;
}

/* Placeholder khi footer-message rỗng */
.gcc-preview-wedding-card[data-wedding-template] .footer-message:empty::before,
.gcc-wedding-card[data-wedding-template] .footer-message:empty::before {
  content: attr(data-placeholder);
  color:   var(--wc-text-muted);
  opacity: 0.55;
}

/* ==========================================================================
   7. PHOTO SECTION
   --------------------------------------------------------------------------
   v5 quản size, border-radius, overflow. Tokens chỉ thêm border + bg
   cho placeholder (khi chưa có ảnh).
   ========================================================================== */
.gcc-preview-wedding-card[data-wedding-template] .wedding-photo-section,
.gcc-wedding-card[data-wedding-template] .wedding-photo-section {
  background: var(--wc-bg);
  border:     1px solid var(--wc-accent);
}

.gcc-preview-wedding-card[data-wedding-template] .wedding-photo-placeholder,
.gcc-wedding-card[data-wedding-template] .wedding-photo-placeholder {
  color: var(--wc-text-muted);
}

/* ==========================================================================
   8. BACKGROUND IMAGE OVERRIDE
   --------------------------------------------------------------------------
   Khi card có ảnh nền inline → mọi box trong tokens trong suốt
   để ảnh hiện nguyên vẹn. Border + radius giữ nguyên cho framing.
   ========================================================================== */
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"] .invitation-message,
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"] .wedding-message,
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"] .wedding-event-details,
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"] .wedding-photo-section,
.gcc-wedding-card[data-wedding-template][style*="background-image"] .invitation-message,
.gcc-wedding-card[data-wedding-template][style*="background-image"] .wedding-message,
.gcc-wedding-card[data-wedding-template][style*="background-image"] .wedding-event-details,
.gcc-wedding-card[data-wedding-template][style*="background-image"] .wedding-photo-section {
  background: transparent;
}

/* ── 8a. SCRIM OVERLAY ──────────────────────────────────────────────────────
   Phủ 1 lớp gradient bán trong suốt lên ảnh nền để chữ luôn nổi rõ.
   - Sáng ở giữa, hơi tối ở rìa → ảnh vẫn "thở" được, không bị che lấp.
   - z-index: 0 — nằm trên ảnh nền (background-image của card),
     dưới canvas particle (z-index 0 nhưng sau trong stacking) và text (z-index 1).
   - Để scrim KHÔNG đè canvas particle, ta đặt scrim trước canvas trong stacking
     bằng cách giữ z-index: 0 nhưng card cần isolation.
   ────────────────────────────────────────────────────────────────────────── */
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"],
.gcc-wedding-card[data-wedding-template][style*="background-image"] {
  /* isolation: isolate → structural, gcc-wedding-preview.css § Scrim stacking */
}

.gcc-preview-wedding-card[data-wedding-template][style*="background-image"]::after,
.gcc-wedding-card[data-wedding-template][style*="background-image"]::after {
  content: "";
  /* position/inset/pointer-events/z-index/border-radius → structural, gcc-wedding-preview.css § Scrim */
  background:
    radial-gradient(ellipse at center,
      rgba(255, 250, 240, 0.20) 0%,
      rgba(255, 250, 240, 0.40) 50%,
      rgba(0, 0, 0, 0.15) 100%);
}

/* ── 8b. TEXT-SHADOW NHẸ ────────────────────────────────────────────────────
   Mỗi chữ có 1 vòng halo sáng mỏng + 1 bóng tối rất nhẹ → tách khỏi nền
   bất kể ảnh sáng hay tối. Cường độ giữ kín đáo cho thẩm mỹ thiệp cưới.
   ────────────────────────────────────────────────────────────────────────── */
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"] .invitation-title,
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"] .wedding-invitation-title,
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"] .couple-names,
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"] .wedding-couple-names,
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"] .groom-name,
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"] .bride-name,
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"] .ampersand,
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"] .wedding-parents-names,
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"] .invitation-message,
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"] .wedding-message,
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"] .detail-label,
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"] .detail-value,
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"] .footer-message,
.gcc-wedding-card[data-wedding-template][style*="background-image"] .invitation-title,
.gcc-wedding-card[data-wedding-template][style*="background-image"] .wedding-invitation-title,
.gcc-wedding-card[data-wedding-template][style*="background-image"] .couple-names,
.gcc-wedding-card[data-wedding-template][style*="background-image"] .wedding-couple-names,
.gcc-wedding-card[data-wedding-template][style*="background-image"] .groom-name,
.gcc-wedding-card[data-wedding-template][style*="background-image"] .bride-name,
.gcc-wedding-card[data-wedding-template][style*="background-image"] .ampersand,
.gcc-wedding-card[data-wedding-template][style*="background-image"] .wedding-parents-names,
.gcc-wedding-card[data-wedding-template][style*="background-image"] .invitation-message,
.gcc-wedding-card[data-wedding-template][style*="background-image"] .wedding-message,
.gcc-wedding-card[data-wedding-template][style*="background-image"] .detail-label,
.gcc-wedding-card[data-wedding-template][style*="background-image"] .detail-value,
.gcc-wedding-card[data-wedding-template][style*="background-image"] .footer-message {
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.7),   /* halo sáng giúp tách khỏi nền tối */
    0 1px 2px rgba(0, 0, 0, 0.35);      /* bóng tối nhẹ giúp tách khỏi nền sáng */
}

/* Ornament & icon dùng drop-shadow vì chúng là SVG/img, không phải text */
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"] .wedding-ornament,
.gcc-preview-wedding-card[data-wedding-template][style*="background-image"] .detail-icon,
.gcc-wedding-card[data-wedding-template][style*="background-image"] .wedding-ornament,
.gcc-wedding-card[data-wedding-template][style*="background-image"] .detail-icon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* ==========================================================================
   9. PRINT
   ========================================================================== */
@media print {
  .gcc-wedding-card[data-wedding-template] {
    box-shadow: none;
    border:     1px solid var(--wc-accent);
  }
  .gcc-wedding-card[data-wedding-template] .wedding-ornament,
  .gcc-wedding-card[data-wedding-template] .wedding-content {
    animation: none !important;
  }
}

/* ==========================================================================
   10. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .gcc-preview-wedding-card[data-wedding-template] .wedding-ornament,
  .gcc-wedding-card[data-wedding-template] .wedding-ornament,
  .gcc-preview-wedding-card[data-wedding-template] .wedding-content,
  .gcc-wedding-card[data-wedding-template] .wedding-content {
    animation: none;
  }
}
/* ==========================================================================
   11. MOBILE — visual reset landscape footer
   --------------------------------------------------------------------------
   Structural reset (grid-column, padding) nằm trong gcc-wedding-preview.css.
   Tokens chỉ reset visual: bỏ border-top gold + background khi stack portrait.
   ========================================================================== */
@media (max-width: 768px) {
  .gcc-preview-wedding-card[data-wedding-template][data-orientation="landscape"] .wedding-footer,
  .gcc-wedding-card[data-wedding-template][data-orientation="landscape"] .wedding-footer {
    border-top: 0;
    background: transparent;
  }
}