/* Kolase Builder -- shared styles dipakai Index.html (klien, builder) DAN Admin.html (Owner,
   management template + viewer submission read-only). Lihat js/kolase-render.js buat markup-nya. */

.kolase-canvas{position:relative;width:100%;background:var(--surface-2);border-radius:10px;overflow:hidden;}
.kolase-slot{position:absolute;box-sizing:border-box;overflow:hidden;background:var(--glass-input-bg);border:1px solid var(--glass-input-border);}
.kolase-slot img{width:100%;height:100%;object-fit:cover;display:block;}
.kolase-slot.interactive{cursor:pointer;}
.kolase-slot.interactive:active{opacity:.85;}
.kolase-slot-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:11.5px;color:var(--ink-dim);text-align:center;padding:4px;}
.kolase-slot-remove{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;border:none;font-size:14px;line-height:1;cursor:pointer;z-index:5;}

.kolase-preview-mini{position:relative;width:100%;background:var(--surface-2);border-radius:6px;overflow:hidden;}
.kolase-preview-mini-slot{position:absolute;box-sizing:border-box;background:var(--glass-input-bg);border:1px solid var(--glass-input-border);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--ink-dim);}

/* ---------- Grid pilih template (klien & daftar Owner) ---------- */
.kolase-template-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.kolase-template-card{border:1.5px solid var(--rule);border-radius:10px;padding:10px;cursor:pointer;background:var(--glass-bg-soft);transition:border-color .15s var(--ease);}
.kolase-template-card:hover{border-color:var(--maroon-bright);}
.kolase-template-card.active{border-color:var(--maroon-bright);box-shadow:0 0 0 1px var(--maroon-bright);}
.kolase-template-card-name{font-size:12.5px;font-weight:600;margin-top:8px;text-align:center;}
.kolase-template-card-meta{font-size:10.5px;color:var(--ink-dim);text-align:center;margin-top:2px;}
.kolase-template-card-actions{display:flex;gap:6px;margin-top:8px;justify-content:center;}
.kolase-template-card-actions button{font-size:11px;padding:5px 9px;border-radius:6px;border:1px solid var(--rule);background:var(--surface-2);color:var(--ink);}
.kolase-template-card [data-preview]{max-width:160px;margin:0 auto;}

/* ---------- Picker foto (klien, isi slot) ---------- */
.kolase-photo-picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-height:52vh;overflow-y:auto;}
.kolase-photo-picker-item{cursor:pointer;border-radius:6px;overflow:hidden;border:2px solid transparent;}
.kolase-photo-picker-item img{width:100%;aspect-ratio:1;object-fit:cover;display:block;}
.kolase-photo-picker-item:active{border-color:var(--maroon-bright);}

/* ---------- Focal point adjust (klien, drag titik fokus di slot terisi) ---------- */
.kolase-focal-hint{font-size:11px;color:var(--ink-dim);text-align:center;margin-top:8px;}