/*!
 * WP Coloring – Popup CSS (Flatsome-safe)
 * Replace your current coloring-popup.css with this file.
 * - Remove fixed heights; use flex/grid with min-height:0
 * - Bound popup body by viewport; columns scroll when needed
 * - Keep mobile layout unaffected (<=900px)
 */

/* ==============================
   Root variables (tweak if needed)
   ============================== */
:root {
  --wpcl-popup-maxw: 90vw;
  --wpcl-popup-maxh: 90vh;
  --wpcl-shell-maxw: 1200px;       /* giới hạn chiều rộng shell */
  --wpcl-shell-pad: 16px;          /* padding trong shell */
  --wpcl-gap: 16px;                /* khoảng cách giữa cột */
  --wpcl-sidebar-w: 88px;          /* rộng sidebar trái/phải desktop */
  --wpcl-header-h-min: 44px;       /* chiều cao tối thiểu header */
  --wpcl-shadow: 0 6px 24px rgba(0,0,0,.08);
  --wpcl-radius: 16px;
  --wpcl-bg: #f6f9fc;
  --wpcl-panel: #ffffff;
  --wpcl-border: #e7eef6;
}

/* ==============================
   Popup container (inside theme modal)
   ============================== */
.wp-coloring-popup-body{
  max-width: var(--wpcl-popup-maxw) !important;
  max-height: var(--wpcl-popup-maxh) !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important; /* Flatsome đôi khi thêm padding */
}

/* ==============================
   Shell – khung tổng, dùng flex column
   ============================== */
.wp-coloring-shell{
  width: 100% !important;
  max-width: var(--wpcl-shell-maxw) !important;
  background: var(--wpcl-bg);
  border-radius: var(--wpcl-radius);
  box-shadow: var(--wpcl-shadow);
  overflow: hidden;                 /* bo tròn góc cho cả nội dung */
  display: flex;
  flex-direction: column;
  /* chiều cao tối đa của shell = chiều cao popup (trừ chút đệm) */
  max-height: calc(var(--wpcl-popup-maxh) - 0px) !important;
  height: auto !important;
}

/* Một số theme set transform cho modal; ta không scale ở CSS */
.wp-coloring-shell:where(*){ transform: none !important; }

/* ==============================
   Header – cố định trên, không tràn
   ============================== */
.wp-coloring-header{
  flex: 0 0 auto;
  min-height: var(--wpcl-header-h-min);
  display: flex;
  align-items: center;
  padding: 12px var(--wpcl-shell-pad);
  background: var(--wpcl-panel);
  border-bottom: 1px solid var(--wpcl-border);
}

/* ==============================
   Layout/grid phần thân – chiếm phần còn lại
   ============================== */
.wp-coloring-layout,
.wp-coloring-grid{
  /* Quan trọng: cho phép co theo chiều cao còn lại */
  flex: 1 1 auto;
  min-height: 0;                    /* 🔑 để con có thể co và scroll */
  display: grid;
  grid-template-columns: var(--wpcl-sidebar-w) 1fr var(--wpcl-sidebar-w);
  gap: var(--wpcl-gap);
  padding: var(--wpcl-shell-pad);
  overflow: hidden;                 /* phần con sẽ cuộn */
}

/* ==============================
   Sidebar & Main – bỏ height cứng, cho phép cuộn
   ============================== */
.wp-coloring-sidebar.left,
.wp-coloring-sidebar.right,
.wp-coloring-main{
  background: var(--wpcl-panel);
  border: 1px solid var(--wpcl-border);
  border-radius: 14px;
  /* Không dùng height cố định; cho phép chiếm toàn bộ chiều cao còn lại */
  height: auto !important;
  max-height: 100%;                 /* theo grid container */
  min-height: 0;                    /* 🔑 cho phép con cuộn */
  overflow: auto;                   /* cuộn khi thiếu chỗ */
}

/* Nếu trong sidebar có inner-wrap, cũng cần min-height:0 để không đẩy container */
.wp-coloring-sidebar.left > * ,
.wp-coloring-sidebar.right > * ,
.wp-coloring-main > * {
  min-height: 0;
}

/* ==============================
   Canvas container – vùng vẽ
   ============================== */
.wp-coloring-main .wp-coloring-canvas-outer{
  position: relative;
  width: 100%;
  /* linh hoạt theo viewport, nhưng vẫn đủ không gian thao tác */
  min-height: clamp(200px, 60vh, 820px);
  height: auto !important;
  border-radius: 12px;
  border: 1px dashed #dfe7f1;
  background: #fff;
  overflow: hidden;                 /* canvas con là absolute */
}

/* Canvas lớp nền & lớp tô */
.wp-coloring-main .bg-canvas,
.wp-coloring-main .paint-canvas{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  /* để JS đặt left/top theo resize; nhưng đảm bảo không vượt ngoài */
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* Khi JS đặt left/top để canh giữa, đừng để theme ghi đè */
.wp-coloring-main .bg-canvas,
.wp-coloring-main .paint-canvas{
  left: 0; top: 0;
}

/* ==============================
   Nút/khối bên phải (actions) – stack dọc, có scroll
   ============================== */
.wp-coloring-sidebar.right .wp-coloring-actions{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  min-height: 0;
}

/* ==============================
   Mobile – giữ nguyên layout 1 cột của plugin
   ============================== */
@media (max-width: 900px){
  .wp-coloring-layout,
  .wp-coloring-grid{
    grid-template-columns: 1fr;     /* 1 cột */
    gap: 10px;
  }

  .wp-coloring-sidebar.left,
  .wp-coloring-sidebar.right{
    order: 0;
    height: auto !important;
    max-height: none !important;
  }

  .wp-coloring-main{
    order: 1;
    height: auto !important;
    max-height: none !important;
  }

  .wp-coloring-main .wp-coloring-canvas-outer{
    min-height: clamp(240px, 52vh, 700px);
  }

  /* Body popup trên mobile: có thể cao hơn để thao tác */
  .wp-coloring-popup-body{
    max-width: 100vw !important;
    max-height: 100vh !important;
    padding: 0 !important;
  }

  .wp-coloring-shell{
    border-radius: 0;
    max-width: 100% !important;
    max-height: 100vh !important;
  }
}

/* ==============================
   Flatsome / theme resets (nếu có)
   ============================== */

/* Ngăn một số modal wrapper của Flatsome cắt nội dung bên trong */
.ux-modal .ux-modal-content .wp-coloring-popup-body,
.mfp-content .wp-coloring-popup-body{
  overflow: hidden !important;
}

/* Đảm bảo phần nội dung không bị margin âm của theme đẩy tràn */
.ux-modal .wp-coloring-shell,
.mfp-content .wp-coloring-shell{
  margin: 0 !important;
}

/* Nhiều theme thêm line-height lớn gây tăng chiều cao vô lý cho cột */
.wp-coloring-sidebar.left,
.wp-coloring-sidebar.right,
.wp-coloring-main{
  line-height: 1.2;
}

/* ==============================
   Utility (tùy chọn thẩm mỹ)
   ============================== */
.wp-coloring-title{
  font-weight: 700;
  font-size: 18px;
  margin: 0;
}

.wp-coloring-popup-close{
  margin-left: auto;
  appearance: none;
  border: 0;
  background: #fff;
  border: 1px solid var(--wpcl-border);
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.wp-coloring-palette{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 12px;
}