/* ============================================================
   GCC Preview Toggle v4.1
   Desktop ≥901px : panel inline, button ẩn
   Mobile  ≤900px : toggle button → lightbox full screen
   Click lần 1 → mở, click lần 2 → đóng
   ============================================================ */

/* ── Nút toggle ──────────────────────────────────────────── */
.gcc-preview-toggle__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.gcc-preview-toggle__btn:hover  { background: #f9fafb; }
.gcc-preview-toggle__btn:active { background: #f3f4f6; }
.gcc-preview-toggle__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(17,24,39,.12);
  border-color: #111827;
}

.gcc-preview-toggle__hint { font-size: 12px; color: #9ca3af; flex-shrink: 0; }
@media (min-width: 901px) { .gcc-preview-toggle__hint { display: none; } }

.gcc-preview-toggle__chevron { transition: transform .22s ease; flex-shrink: 0; }

/* Panel: ẩn mặc định */
.gcc-preview-toggle__panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .24s ease, opacity .2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .gcc-preview-toggle__panel   { transition: none; }
  .gcc-preview-toggle__chevron { transition: none; }
}

/* ── Desktop ≥901px ─────────────────────────────────────── */
@media (min-width: 901px) {
  body .gcc-preview-toggle .gcc-preview-toggle__btn,
  .gcc-col--preview .gcc-preview-toggle .gcc-preview-toggle__btn,
  .gcc-preview-container .gcc-preview-toggle .gcc-preview-toggle__btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body .gcc-preview-toggle .gcc-preview-toggle__panel,
  .gcc-col--preview .gcc-preview-toggle .gcc-preview-toggle__panel,
  .gcc-preview-container .gcc-preview-toggle .gcc-preview-toggle__panel {
    max-height: none !important;
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    transition: none !important;
    visibility: visible !important;
  }
}

/* ==========================================================
   MOBILE ≤900px — LIGHTBOX FULLSCREEN
   ========================================================== */
@media (max-width: 900px) {

  /* Panel gốc ẩn trên mobile */
  .gcc-preview-toggle__panel { display: none !important; }

  /* ── Bottom tab ── */
  .gcc-sticky-toggle-anchor { display: block; width: 100%; }
  .gcc-sticky-btn-spacer    { display: none; pointer-events: none; }

  /* Tab bám đáy màn hình — giữa, ngón cái chạm được */
  .gcc-sticky-btn-wrap {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: 64px;
    height: 20px;
    background: rgba(255,255,255,0.95);
    border-radius: 8px 8px 0 0;
    border: 1px solid rgba(0,0,0,.10);
    border-bottom: none;
    box-shadow: 0 -2px 10px rgba(0,0,0,.10);
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(4px);
    transition: height .15s ease, background .15s ease;
    /* Luôn nằm trên lightbox (z-index 1050) để không bị che khi mở */
    z-index: 1055 !important;
  }

  .gcc-sticky-btn-wrap:active {
    background: rgba(240,240,240,0.98);
  }

  /* Vạch ngang đậm bên trong tab */
  .gcc-sticky-btn-wrap::after {
    content: '';
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: #555;
    pointer-events: none;
    transition: background .15s ease, width .15s ease;
  }

  /* Khi lightbox mở — tab xanh */
  .gcc-sticky-btn-wrap[data-lightbox="open"] {
    background: rgba(219,234,254,0.97);
    border-color: rgba(147,197,253,.6);
  }
  .gcc-sticky-btn-wrap[data-lightbox="open"]::after {
    background: #1d4ed8;
    width: 20px;
  }

  /* Ẩn button gốc hoàn toàn — tab tự vẽ bằng ::after */
  .gcc-sticky-btn-wrap .gcc-preview-toggle__btn {
    display: none !important;
    visibility: hidden !important;
  }

  /* ── LIGHTBOX ── */
  .gcc-preview-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    /* Bắt đầu ẩn hoàn toàn */
    visibility: hidden;
    pointer-events: none;
    background: rgba(0,0,0,0);
    transition: background .28s ease, visibility 0s linear .28s;
    overflow: hidden;
  }

  /* Khi mở */
  .gcc-preview-lightbox.is-open {
    visibility: visible;
    pointer-events: auto;
    background: #e2e8f0;
    transition: background .28s ease;
  }

  /* Handle pip ở đầu */
  .gcc-lightbox-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0 8px;
    background: #fff;
    border-radius: 20px 20px 0 0;
    /* Slide up cùng với body */
    transform: translateY(100%);
    transition: transform .38s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
  }
  .gcc-preview-lightbox.is-open .gcc-lightbox-header {
    transform: translateY(0);
  }

  .gcc-lightbox-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 40px;
    cursor: grab;
    touch-action: none;
    user-select: none;
  }
  .gcc-lightbox-handle:active { cursor: grabbing; }

  .gcc-lightbox-handle-pip {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #d1d5db;
    transition: background .15s;
  }
  .gcc-lightbox-handle:active .gcc-lightbox-handle-pip { background: #9ca3af; }

  /* Body — NO scroll, fit toàn bộ chiều cao còn lại */
  .gcc-lightbox-body {
    flex: 1;
    overflow: hidden;          /* không scroll */
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
    /* Slide up */
    transform: translateY(100%);
    transition: transform .38s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
  }
  .gcc-preview-lightbox.is-open .gcc-lightbox-body {
    transform: translateY(0);
  }

  /* Panel trong lightbox */
  .gcc-lightbox-body .gcc-preview-toggle__panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    transition: none !important;
    width: 100%;
  }

  /* aside containers */
  .gcc-lightbox-body .gcc-col--preview {
    position: static !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .gcc-lightbox-body .gcc-preview-general,
  .gcc-lightbox-body .gcc-preview-wedding {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /*
   * SCALE TO FIT — JS set --gcc-lb-scale trên .gcc-preview-lightbox
   * Card 9:16 sẽ được scale để vừa đúng chiều cao body mà không scroll.
   * transform-origin: top center để card căn giữa theo chiều ngang.
   */
  .gcc-lightbox-body .gcc-preview-card,
  .gcc-lightbox-body .gcc-preview-wedding-card {
    transform-origin: top center;
    transform: scale(var(--gcc-lb-scale, 1));
    /* max-width/aspect-ratio do gcc-generate-card-preview-base.css xử lý */
  }

  @media (prefers-reduced-motion: reduce) {
    .gcc-preview-lightbox       { transition: none !important; }
    .gcc-lightbox-header        { transition: none !important; }
    .gcc-lightbox-body          { transition: none !important; }
    .gcc-preview-toggle__chevron { transition: none !important; }
  }
}