/**
 * theme-switcher.css — Chủ đề + lớp hạt trong phạm vi thiệp.
 *
 * KHÁC BẢN GỐC: bản gốc viết 9 khối `.gcc-theme-{tên}::before` cứng, mỗi
 * chủ đề một khối gradient. Thêm chủ đề thứ 10 phải sửa file này.
 *
 * Ở đây chỉ còn MỘT khối `::before` đọc hai biến do JS đặt:
 *     --gcc-theme-ambient        gradient nền
 *     --gcc-theme-ambient-anim   hoạt ảnh nền
 * Hiệu ứng mới khai báo gradient trong chính file JS của nó, CSS này không
 * phải biết tên hiệu ứng nào cả.
 *
 * Các @keyframes bên dưới giữ tên gốc và dùng chung — hiệu ứng mới chọn một
 * cái có sẵn hoặc tự thêm keyframes riêng trong file của mình.
 */

/* ══════════════════════════════════════════════════════════════════════════
 * LỚP CANVAS — nằm trong thiệp, không phủ toàn màn hình
 * ══════════════════════════════════════════════════════════════════════════ */
#gcc-bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

/* Nội dung thiệp nằm trên canvas */
.gcc-preview-card > *,
.gcc-preview-wedding-card > * {
    position: relative;
    z-index: 1;
}

/* Trừ chính canvas ra */
.gcc-preview-card > #gcc-bg-canvas,
.gcc-preview-wedding-card > #gcc-bg-canvas {
    position: absolute;
    z-index: 0;
}

/* Và trừ nút loa ra.
   Quy tắc `.gcc-preview-card > *` ở trên ép relative để nội dung nổi trên
   canvas, nhưng nút loa cần absolute mới neo được góc trên phải. Bị ép
   relative thì `right: 12px` không neo vào mép phải nữa mà ĐẨY NÓ SANG TRÁI
   12px khỏi vị trí tĩnh — tức là về góc trên TRÁI. Đã đo: left tính toán ra
   -12px, nút cách mép trái -4px trong khi cách mép phải 340px. */
.gcc-preview-card > .gcc-audio-toggle,
.gcc-preview-wedding-card > .gcc-audio-toggle,
.gcc-wedding-card > .gcc-audio-toggle {
    position: absolute !important;
    /* z-index 4, KHÔNG phải 2.
       Tầng ở tệp này chỉ tính tới canvas nền (0) và nội dung thiệp (1), nên 2
       nghe có vẻ đủ. Nhưng TEMPLATE có tầng riêng: quét cả 247 tệp thì chúng
       dùng z-index 0/1/2/3, riêng mức 3 xuất hiện 898 lần cho header, vùng ảnh
       và lời chúc. Nút loa ở mức 2 nằm LỌT DƯỚI chúng — người tạo chọn nhạc
       xong không thấy nút đâu vì chính tấm thiệp che mất.
       4 là mức thấp nhất còn cao hơn mọi thứ template đang dùng. */
    z-index: 4;
}

/* ══════════════════════════════════════════════════════════════════════════
 * MÀU THIỆP — JS đặt --gcc-theme-bg / -card-bg / -text
 * ══════════════════════════════════════════════════════════════════════════ */
.gcc-preview-card,
.gcc-preview-wedding-card,
.gcc-wedding-card {
    transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    isolation: isolate;
}

/* Màu chỉ áp khi ĐÃ chọn chủ đề (JS gắn .gcc-theme-active), chưa chọn thì
   giữ nguyên màu gốc của mẫu thiệp.
   Selector phải có HAI lớp: gcc-live-preview.css dùng
   `.gcc-view-standalone .gcc-preview-card` (0,2,0) — chỉ `.gcc-preview-card`
   (0,1,0) sẽ thua và nền thiệp không bao giờ đổi màu. Ở 0,2,0 thì hoà, và
   file này nạp sau nên thắng. */
/* CO Y BO TRONG: hieu ung chi son NEN NGOAI thiep.
 * Truoc day khoi nay ep background-color + color cua hieu ung len than thiep,
 * nen no de len bang mau cua template: thiep cuoi Botanical Garden (#f7fee7,
 * chu #1a2e05) bi hieu ung Pink phu thanh hong sam, chu xanh tren nen hong
 * gan nhu khong doc duoc. Template va hieu ung vi the triet tieu nhau.
 * Nay than thiep giu nguyen mau template; hieu ung chi doi nen trang
 * (xem khoi body.gcc-theme-manual ben duoi) va hat bay. */

.gcc-preview-card { overflow: hidden; }

/* Thiệp cưới cần overflow visible để không cắt box-shadow; canvas và lớp nền
   tự bo góc riêng để vẫn bị cắt bên trong. */
.gcc-preview-wedding-card { overflow: visible; }
.gcc-preview-wedding-card > #gcc-bg-canvas,
.gcc-preview-wedding-card::before {
    border-radius: 12px;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
 * LỚP NỀN ĐỘNG — một khối duy nhất, nội dung do biến quyết định
 * ══════════════════════════════════════════════════════════════════════════ */
/* Lop phu ambient cung da bo: no la mot lop mau trai kin than thiep,
 * cung mot van de nhu tren. Bien --gcc-theme-ambient van duoc JS dat nhung
 * khong con phan tu nao dung o trong thiep. */

/* Một số vùng trong thiệp có nền SÁNG cố định của riêng mẫu (khung ảnh,
   slider…). Chúng không đổi màu theo chủ đề, nên nếu để thừa kế màu chữ của
   chủ đề tối thì thành chữ sáng trên nền trắng — không đọc được. Trả các
   vùng đó về mực đậm. */
/* Bo: mieng va nay chi ton tai vi than thiep bi ep mau chu cua hieu ung.
 * Ep #1d1d1f o day se pha template co nen toi. */

/* Thiệp nền tối cần bóng đổ đậm hơn. Lớp này do JS gắn dựa trên độ sáng của
   card_bg — hiệu ứng mới tự động được hưởng, không phải liệt kê tên. */
/* Bo: lop is-dark do JS suy ra tu do sang cua card_bg cua HIEU UNG, ma than
 * thiep khong con dung mau do nua — bong do dam se sai voi template sang. */

/* ══════════════════════════════════════════════════════════════════════════
 * KEYFRAMES NỀN — dùng chung cho mọi hiệu ứng
 * ══════════════════════════════════════════════════════════════════════════ */
@keyframes gcc-nebulaPulse   { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes gcc-lightShimmer  { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } }
@keyframes gcc-blueFlicker   { 0%, 100% { opacity: 1; } 25% { opacity: 0.7; } 75% { opacity: 0.85; } }
@keyframes gcc-fireGlow      { 0%, 100% { opacity: 1; } 33% { opacity: 0.7; } 66% { opacity: 0.9; } }
@keyframes gcc-forestBreath  { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes gcc-auroraShift   { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes gcc-bloomPulse    { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }
@keyframes gcc-heatRise      { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }
@keyframes gcc-seaGlow       { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ══════════════════════════════════════════════════════════════════════════
 * BƯỚC CHỌN HIỆU ỨNG (luồng tạo thiệp) — lưới 4 cột, gọn
 *
 * ĐỘ ĐẶC HIỆU, không phải thứ tự, mới là thứ quyết định ở đây.
 * iphone-chat.css dựng `.gcc-chat-shell .gcc-chat-choices` (0,2,0) thành
 * flex-wrap pill bằng !important. Viết `.gcc-fx-choices` (0,1,0) thì dù nạp
 * sau vẫn THUA — đã đo trên trang thật: display vẫn ra `flex`, còn
 * grid-template-columns bị bỏ qua. Nên phải có bản kèm `.gcc-chat-shell`.
 *
 * Với 11 lựa chọn, pill một cột làm vùng nhập cao quá màn hình và cuộn kẹt.
 * Nên: lưới 4 cột + tự cuộn trong chính khung lựa chọn.
 * ══════════════════════════════════════════════════════════════════════════ */
.gcc-fx-choices,
.gcc-chat-shell .gcc-chat-choices.gcc-fx-choices {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    justify-content: stretch !important;
    /* Tự cuộn TRONG khung này. Nếu để nó cao tự nhiên, vùng nhập
       (flex: 0 0 auto, không giới hạn) sẽ nở ra nuốt cả luồng hội thoại. */
    /* 11 hiệu ứng ở 4 cột chỉ chiếm 3 hàng (~230px) nên mức chặn này thường
       không chạm tới; nó là lưới an toàn cho khi bảng màu dài ra. */
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;   /* cuộn hết thì đừng kéo theo trang nền */
    padding: 2px !important;
    width: 100%;
}

/* gcc-chat-mode.css cho phần tử LẺ cuối cùng chiếm trọn hàng
   (`:nth-child(odd):last-child { grid-column: 1 / -1 }`) — hợp lý với lưới 2
   cột của nó, nhưng ở đây mục thứ 11 bị kéo dài hết 4 cột, cao gấp ba và đẩy
   hàng trước xuống còn 2 ô. Trả về một ô như mọi mục khác. */
.gcc-fx-choices > .gcc-chat-choice:nth-child(odd):last-child,
.gcc-chat-shell .gcc-fx-choices > .gcc-chat-choice:nth-child(odd):last-child {
    grid-column: auto !important;
}

.gcc-fx-choices .gcc-chat-choice,
.gcc-chat-shell .gcc-fx-choices .gcc-chat-choice {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 6px 4px !important;
    border-radius: 10px !important;
    min-width: 0 !important;
    text-align: center !important;
}

.gcc-fx-choices .gcc-chat-choice-label,
.gcc-chat-shell .gcc-fx-choices .gcc-chat-choice-label {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Ở bề rộng một ô 4 cột thì dòng mô tả chỉ là nhiễu — nó lặp lại gần như
   giống nhau ở mọi hiệu ứng. Ô màu đã nói đủ. */
.gcc-fx-choices .gcc-chat-choice-desc,
.gcc-chat-shell .gcc-fx-choices .gcc-chat-choice-desc { display: none !important; }

.gcc-fx-swatch {
    width: 100% !important;
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}

.gcc-fx-swatch > span {
    width: 62%;
    height: 62%;
    border-radius: 3px;
    display: block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

/* Ô "No ambience" — gạch chéo để phân biệt với một hiệu ứng màu xám */
.gcc-fx-swatch.is-none {
    background:
        linear-gradient(to top right,
            transparent calc(50% - 1px), currentColor calc(50% - 1px),
            currentColor calc(50% + 1px), transparent calc(50% + 1px)),
        var(--pf-surface-2, #eee);
    opacity: .55;
}

/* Máy hẹp: 4 ô sẽ quá nhỏ để nhìn ra màu, lùi về 3 */
@media (max-width: 360px) {
    .gcc-fx-choices,
    .gcc-chat-shell .gcc-chat-choices.gcc-fx-choices {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
 * TRỢ NĂNG
 * ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .gcc-preview-card::before,
    .gcc-preview-wedding-card::before {
        animation: none !important;
        transition: none !important;
    }
    #gcc-bg-canvas { display: none; }
}

@media print {
    #gcc-bg-canvas { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * NỀN TRANG — chuyển màu chậm khi chưa chọn chủ đề thủ công
 * ══════════════════════════════════════════════════════════════════════════ */
body.gcc-wedding-view:not(.gcc-theme-manual),
body.gcc-view-standalone:not(.gcc-wedding-view):not(.gcc-theme-manual) {
    background: linear-gradient(135deg,
        #ffd6e7, #e8d5f5, #1a1a2e, #0a0a0a, #2d1010,
        #c0392b, #f39c12, #c8f0e8, #ffd6e7);
    background-size: 600% 600%;
    animation: gcc-bg-flow 36s ease-in-out infinite;
}

@keyframes gcc-bg-flow {
    0%   { background-position:   0%  50%; }
    14%  { background-position:  14%  30%; }
    28%  { background-position:  28%  70%; }
    42%  { background-position:  42%  20%; }
    57%  { background-position:  57%  80%; }
    71%  { background-position:  71%  40%; }
    85%  { background-position:  85%  60%; }
    100% { background-position: 100%  50%; }
}

body.gcc-wedding-view.gcc-theme-manual,
body.gcc-view-standalone.gcc-theme-manual {
    animation: none !important;
    background: none !important;
    background-color: var(--gcc-theme-bg, #880e4f) !important;
    transition: background-color 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
    body.gcc-wedding-view,
    body.gcc-view-standalone { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * SỬA LỖI CANVAS BIẾN MẤT Ở KHỔ DỌC 9:16
 *
 * Nguyên nhân (giữ nguyên chẩn đoán của bản gốc):
 *   (a) thiệp dọc bị ép `overflow: auto` → canvas absolute cuộn theo nội dung
 *       và trôi khỏi vùng nhìn thấy;
 *   (b) `contain: layout paint style` tạo containing block mới cho phần tử
 *       absolute, làm canvas bị clip theo border-box;
 *   (c) các section con có nền riêng che mất canvas.
 *
 * Cách sửa: trả overflow về hidden, dùng `isolation: isolate` (tạo stacking
 * context mà KHÔNG đổi containing block — khác hẳn `contain: paint`), rồi
 * tuyên bố lại thứ tự chồng lớp: canvas 0, nền động 1, nội dung 2.
 * ══════════════════════════════════════════════════════════════════════════ */
.gcc-theme-active.gcc-preview-wedding-card[data-orientation="portrait"],
main.gcc-theme-active.gcc-preview-wedding-card[data-orientation="portrait"] {
    overflow: hidden !important;
}

.gcc-preview-card > #gcc-bg-canvas,
.gcc-preview-wedding-card > #gcc-bg-canvas,
.gcc-wedding-card > #gcc-bg-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: inherit;
}

.gcc-preview-card::before,
.gcc-preview-wedding-card::before,
.gcc-preview-wedding-card[data-wedding-template]::before,
.gcc-wedding-card[data-wedding-template]::before {
    z-index: 1 !important;
}

.gcc-preview-wedding-card > .wedding-header,
.gcc-preview-wedding-card > .wedding-content,
.gcc-preview-wedding-card > .wedding-footer,
.gcc-preview-wedding-card > .wedding-photo-section,
.gcc-wedding-card > .wedding-header,
.gcc-wedding-card > .wedding-content,
.gcc-wedding-card > .wedding-footer,
.gcc-wedding-card > .wedding-photo-section {
    position: relative !important;
    z-index: 2 !important;
}

/* Chỉ section cấp 1 của khổ dọc mới trong suốt — grandchild giữ nền riêng.
   Giới hạn trong .gcc-theme-active: chưa chọn hiệu ứng thì không có canvas
   nào để lộ ra, mà những !important này lại đè overflow của preview lúc tạo
   thiệp — làm hỏng một trang chẳng liên quan gì. */
.gcc-theme-active.gcc-preview-wedding-card[data-orientation="portrait"] > .wedding-header,
.gcc-theme-active.gcc-preview-wedding-card[data-orientation="portrait"] > .wedding-content,
.gcc-theme-active.gcc-preview-wedding-card[data-orientation="portrait"] > .wedding-footer,
main.gcc-theme-active.gcc-preview-wedding-card[data-orientation="portrait"] > .wedding-header,
main.gcc-theme-active.gcc-preview-wedding-card[data-orientation="portrait"] > .wedding-content,
main.gcc-theme-active.gcc-preview-wedding-card[data-orientation="portrait"] > .wedding-footer {
    background: transparent !important;
    background-color: transparent !important;
}