/*
  add-text-pdf/add-text-pdf.css
  ==================================
  Self-contained styles untuk tool Add Text PDF. Mengikuti pola duplikasi
  yang sama seperti tool lain (lihat header upscaler.css): basis (drop
  zone, field, preset group, editor canvas, tombol, status, FAQ) diambil
  dari sign-pdf.css karena memakai editor canvas drag yang sama. Bagian
  khusus tool ini ada di paling bawah: navigasi halaman, layer item
  teks (drag), palet warna, peringatan karakter.
*/

.mea-tool-header { margin-bottom: 32px; }

.mea-back-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mea-text-muted);
  margin-bottom: 20px;
}
.mea-back-link:hover { color: var(--mea-accent-text); }

.mea-tool-header h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 38px);
  letter-spacing: 0.02em;
  margin: 8px 0 8px;
  color: var(--mea-text-primary);
}

.mea-tool-header p {
  font-size: 14.5px;
  color: var(--mea-text-secondary);
  margin: 0;
  max-width: 56ch;
}

.mea-tool-page {
  max-width: 720px;
  padding-top: 40px;
  padding-bottom: 64px;
}

[hidden] { display: none !important; }

/* ---------- Drop zone ---------- */

.mea-drop-zone {
  border: 1px dashed var(--mea-border-strong);
  border-radius: var(--mea-radius-lg);
  padding: 48px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.mea-drop-zone:hover, .mea-drop-zone.drag-active {
  border-color: var(--mea-accent);
  background: var(--mea-accent-muted);
}
.mea-drop-zone p { margin: 0; color: var(--mea-text-secondary); font-size: 14px; }
.mea-drop-zone .dz-sub { font-size: 12px; color: var(--mea-text-muted); margin-top: 6px; }
.mea-drop-zone span { color: var(--mea-accent-text); font-weight: 600; }

.mea-drop-zone-small { padding: 24px 16px; }

/* ---------- Selected file bar ---------- */

.mea-selected-file {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-md);
  background: var(--mea-surface);
}
.mea-selected-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mea-selected-name {
  font-size: 13.5px;
  color: var(--mea-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mea-selected-size { font-size: 12px; color: var(--mea-text-muted); }
.mea-selected-remove {
  background: transparent;
  border: none;
  color: var(--mea-text-muted);
  font-size: 20px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--mea-radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.mea-selected-remove:hover { color: var(--mea-danger-text); background: var(--mea-danger-bg); }

/* ---------- Editor section / fields ---------- */

.mea-editor-section {
  margin-top: 32px;
  border-top: 1px solid var(--mea-border);
  padding-top: 24px;
}

.mea-field { margin-bottom: 24px; }
.mea-field > label {
  display: block;
  font-size: 13px;
  color: var(--mea-text-secondary);
  margin-bottom: 8px;
}
.mea-field-hint { margin: 8px 0 0; font-size: 12px; color: var(--mea-text-muted); }

.mea-text-input,
.mea-select {
  width: 100%;
  padding: 10px 12px;
  background: var(--mea-surface);
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-sm);
  color: var(--mea-text-primary);
  font-size: 13.5px;
  box-sizing: border-box;
}
.mea-text-input:focus, .mea-select:focus { outline: none; border-color: var(--mea-accent); }

.mea-slider {
  width: 100%;
  margin-top: 6px;
  accent-color: var(--mea-accent);
}

/* ---------- Preset groups (reused mea-quality-* classes) ---------- */

.mea-quality-group { display: flex; gap: 8px; }
.mea-quality-btn {
  flex: 1;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-sm);
  color: var(--mea-text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.mea-quality-btn:hover { border-color: var(--mea-border-strong); }
.mea-quality-btn.active {
  border-color: var(--mea-accent);
  background: var(--mea-accent-muted);
  color: var(--mea-accent-text);
}

/* ---------- Editor canvas + drag handle (pratinjau halaman) ---------- */

.mea-editor-canvas-scroll {
  /* TIDAK ADA overflow/scroll internal sama sekali di sini -- preview
     SELALU di-scale supaya lebar canvas pas dengan lebar kontainer ini
     (lihat renderEditorCanvas() di add-text-pdf.js, yang menghitung
     renderScale berdasarkan clientWidth elemen ini, BUKAN lebar tetap
     640px seperti sebelumnya). Kalau halaman PDF tinggi, kontainer ini
     ikut memanjang secara vertikal -- yang di-scroll adalah HALAMAN
     WEBSITE biasa (scroll normal), bukan box kecil di dalamnya. Ini
     menghilangkan akar masalah drag yang konflik dengan scroll
     internal box preview.
     Di HP (layar sempit), renderScale otomatis mengecil mengikuti
     lebar layar -- preview jadi lebih kecil tapi tetap utuh 1 halaman
     penuh tanpa scroll horizontal maupun vertikal internal. */
  width: 100%;
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-md);
  /* TIDAK overflow:hidden -- teks boleh digeser sampai sebagian
     nongol keluar area preview dan tetap tampil utuh (tidak terpotong
     tiba-tiba di tepi kotak). Border-radius di atas jadi dekoratif saja
     untuk sudut canvas, bukan pembatas konten. */
}

.mea-editor-canvas-wrap {
  position: relative;
  margin: 0 auto;
  background: #fff;
  width: 100%;
}

#mea-page-canvas {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Buttons / status / progress ---------- */

.mea-btn-primary {
  width: 100%;
  padding: 13px;
  background: var(--mea-accent);
  color: #061121;
  border: none;
  border-radius: var(--mea-radius-md);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.mea-btn-primary:hover { background: #ffffff; transform: translateY(-1px); }
.mea-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.mea-btn-secondary {
  width: 100%;
  padding: 11px;
  background: transparent;
  color: var(--mea-text-secondary);
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-md);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.mea-btn-secondary:hover { border-color: var(--mea-border-strong); color: var(--mea-text-primary); }

.mea-status { margin-top: 12px; font-size: 13px; min-height: 18px; }

.mea-progress-bar-wrap {
  margin-top: 12px;
  height: 6px;
  border-radius: var(--mea-radius-sm);
  background: var(--mea-surface);
  border: 1px solid var(--mea-border);
  overflow: hidden;
}
.mea-progress-bar { height: 100%; width: 0%; background: var(--mea-accent); transition: width 0.2s ease; }

.mea-download-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px;
  background: var(--mea-success);
  color: #061121;
  border-radius: var(--mea-radius-md);
  font-size: 14.5px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  margin-top: 12px;
  transition: transform 0.15s ease;
}
.mea-download-btn:hover { transform: translateY(-1px); }

/* ---------- FAQ (SEO) ---------- */

.mea-faq { margin-top: 48px; border-top: 1px solid var(--mea-border); padding-top: 24px; }
.mea-faq h2 { font-size: 16px; font-weight: 600; margin: 0 0 16px; color: var(--mea-text-primary); }
.mea-faq-item { margin-bottom: 4px; border-bottom: 1px solid var(--mea-border); }
.mea-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mea-text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mea-faq-item summary::-webkit-details-marker { display: none; }
.mea-faq-item p { margin: 0 4px 16px; font-size: 13.5px; color: var(--mea-text-secondary); }

/* =====================================================================
   Khusus Add Text PDF
   ===================================================================== */

/* ---------- Navigasi halaman ---------- */
.mea-page-nav { display: flex; align-items: center; gap: 12px; }
.mea-page-nav .mea-btn-secondary { min-width: 44px; padding: 8px 14px; font-size: 18px; line-height: 1; }
.mea-page-label { flex: 1; text-align: center; font-size: 13.5px; color: var(--mea-text-primary); }

/* ---------- Panel pengaturan teks terpilih ---------- */
.mea-props {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-md);
  background: var(--mea-surface);
}
.mea-props .mea-field:last-of-type { margin-bottom: 16px; }
.mea-props .mea-text-input,
.mea-props .mea-select { background: var(--mea-bg, transparent); }
.mea-props-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.mea-style-btn { flex: 0 0 auto; min-width: 44px; padding: 9px 0; font-size: 15px; }

.mea-field-warn {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--mea-danger-text);
}

.mea-btn-danger { color: var(--mea-danger-text); }
.mea-btn-danger:hover { background: var(--mea-danger-bg); border-color: var(--mea-danger-text); }

/* ---------- Palet warna ---------- */
.mea-color-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mea-color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--mea-border-strong);
  cursor: pointer;
  padding: 0;
}
.mea-color-swatch.active { outline: 2px solid var(--mea-accent); outline-offset: 2px; }
.mea-color-custom {
  width: 36px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--mea-border-strong);
  border-radius: var(--mea-radius-sm);
  background: transparent;
  cursor: pointer;
}

/* ---------- Layer item teks di atas canvas ---------- */
.mea-items-layer {
  position: absolute;
  inset: 0;
  pointer-events: none; /* hanya item teks (child) yang menangkap pointer; area kosong tetap bisa discroll */
}
.mea-text-item {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  white-space: pre;
  line-height: 1;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none; /* cegah scroll native HANYA saat jari tepat di atas teks */
  pointer-events: auto;
  outline: 1px dashed transparent;
  outline-offset: 3px;
}
.mea-text-item:active { cursor: grabbing; }
.mea-text-item.is-selected { outline-color: rgba(59, 130, 246, 0.85); }
/* Hit-area tambahan di sekeliling teks supaya mudah di-tap di HP walau teksnya kecil */
.mea-text-item::after {
  content: '';
  position: absolute;
  inset: -10px;
}
/* Penanda baseline nol-ukuran untuk mengukur offset baseline (lihat measureBaseline di JS) */
.mea-baseline-probe { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.mea-page-nav .mea-btn-secondary { width: auto; }

/* ---------- Rotasi & latar teks ---------- */
.mea-rot-btns { display: flex; gap: 8px; margin-top: 10px; }
.mea-rot-btns .mea-btn-secondary { width: auto; flex: 1; padding: 8px 10px; font-size: 13px; }
.mea-check-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--mea-text-primary);
  font-size: 13.5px;
}
.mea-check-label input { width: 18px; height: 18px; accent-color: var(--mea-accent); }
.mea-bg-options { margin-top: 12px; }
.mea-sub-label { display: block; margin: 12px 0 0; font-size: 12.5px; color: var(--mea-text-secondary); }
/* Kotak latar di preview: anak absolut dari .mea-text-item, ikut berputar bersama teks */
.mea-text-bg { position: absolute; pointer-events: none; }
.mea-text-content { position: relative; } /* di atas .mea-text-bg (sama-sama absolut/relatif -> urutan DOM menentukan) */