@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@700&family=Poppins:wght@400;600&display=swap');

:root {
  --brand: #3b2da7;
  --accent: #da4d6a;
  --bg: #f5f5f5;
  --panel: #ffffff;
  --border: #ddd;
  --muted: #666;
}

/* Reset-ish */
* { box-sizing: border-box; }

/* Base */
body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--brand);
  background: var(--bg);
  margin: 20px;
}

h1 {
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  color: var(--brand);
  text-align: left;
  margin: 0 0 12px;
}

/* Layout helpers */
.block { display:block; }
.mt-10 { margin-top: 10px; }

/* Grid rows */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.row.sm2 { grid-template-columns: 1fr 1fr; }
.row.sm3 { grid-template-columns: repeat(3,1fr); }
.row.sm4 { grid-template-columns: repeat(4,1fr); }

/* Panel */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.panel h3 { margin: 0 0 8px; }
.panel-head { display:flex; justify-content:space-between; align-items:center; }
.panel-head h3 { margin:0; }

/* Forms */
label { display:block; font-weight:600; margin:8px 0 6px; color: var(--brand); }
input[type="text"],
input[type="number"],
select,
textarea {
  width:100%;
  padding:8px;
  border-radius:8px;
  border:1px solid #d1d1d1;
  color:#333;
  background:#fff;
  outline:none;
}
textarea { min-height: 280px; }

.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }

button[type="button"], .btn {
  font-family: 'Poppins', sans-serif;
  background-color: var(--accent);
  color: #fff;
  border: none;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: transform .06s ease, opacity .2s ease;
}
button[type="button"]:hover { opacity:.95; }
button[type="button"]:active { transform: translateY(1px); }

.small { font-size: 12px; color: var(--muted); }
.hint  { font-size: 12px; color: var(--muted); margin-top:6px; }

/* URL row */
.row-url { display:grid; grid-template-columns: 1fr auto; gap:8px; }
.row-url .btn { height:38px; align-self:end; }

/* Editors grid (container för alla editors) */
.editors-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px){ .editors-grid { grid-template-columns: 1fr; } }

/* Enskild editor */
.editor-wrap {
  aspect-ratio: 1 / 1;
  position: relative;
  width: 100%;
  max-width: 560px;
  background:#f6f6f8;
  border:1px solid #e5e5ef;
  border-radius:10px;
  overflow:hidden;
  margin:auto;
}
/* Alternativ stil (behåll om du använder andra vyer)
.editor-wrap.alt {
  width:100%;
  max-width:840px;
  position:relative;
  border:1px dashed #bbb;
  border-radius:8px;
  background:#fafafa;
  overflow:visible;
  min-height: 200px;
} */

/* Flex: tre fält på en rad, wrappar snyggt på små skärmar */
.cs-row {
  display: flex;
  gap: 10px;
  align-items: end;        /* samma som flex-end men för formfält funkar 'end' fint */
  flex-wrap: wrap;         /* sätt till 'nowrap' om du ALLTID vill ha en rad */
}
.cs-row .field {
  flex: 1 1 160px;         /* jämn bredd, min 160px */
}
.cs-row .field label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}
.cs-row .field input {
  width: 100%;
}


.editor-img {
  position:absolute;
  left:0; top:0;
  transform-origin: 0 0;
  z-index:1;
  will-change: transform;
  user-select:none;
  -webkit-user-drag:none;
  image-rendering:auto;
}

.editor-overlay {
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  z-index:2;
  pointer-events:none;
  display:block;
}

.editor-text {
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  z-index:3;
  pointer-events:none;
  opacity:1;
}

.editor-hint {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#999;
  font-size:14px;
  background:repeating-linear-gradient(45deg, #fafafa, #fafafa 10px, #f2f2f7 10px, #f2f2f7 20px);
  z-index:0;
}

/* Overlay-tag (ad4) */
.overlay-tag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  z-index: 2;      /* under .editor-text (z=3), över bilden/ghost */
  pointer-events: none;
}

/* Språk-piller */
.lang-group { margin-top: 6px; }
.group-title { font-weight:700; margin-bottom:6px; }

.lang-grid {
  display:grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap:8px;
}
@media (max-width: 900px){ .lang-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 560px){ .lang-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.lang-pill { display:block; }
.lang-pill input { display:none; }

.lang-pill .pill {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid #d1d1d1;
  border-radius:999px;
  color:#333;
  background:#fff;
  cursor:pointer;
  user-select:none;
}
.lang-pill .pill img {
  width:20px; height:20px;
  border-radius:50%;
  object-fit:cover;
}
.lang-pill input:checked + .pill {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(59,45,167,.15);
  color: var(--brand);
}

/* Export set-piller */
.exp-sets { display:flex; gap:8px; flex-wrap:wrap; }
.pill-check {
  display:flex; gap:6px; align-items:center;
  border:1px solid #ddd; border-radius:999px;
  padding:6px 10px; background:#fff; cursor:pointer;
}

/* Responsive för panel/grids */
@media (max-width: 900px) {
  .row { grid-template-columns: 1fr; }
}