/*
  sign-pdf/sign-pdf.css
  ==================================
  Self-contained styles for the Sign PDF tool. Follows the same
  duplication pattern as every other tool (see upscaler.css's header
  comment) -- base diambil dari watermark-pdf.css (drop zone, field,
  preset group, editor canvas + drag handle, thumbnails, buttons,
  status, FAQ) karena Sign PDF memakai editor canvas drag yang sama
  persis. Tambahan khusus tool ini ada di bagian paling bawah: pad
  gambar tanda tangan (canvas) + tab mode (gambar tangan / upload
  gambar / ketik nama) + palet warna pena.
*/

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

[hidden] { display: none !important; }

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

.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-thumb {
  width: 40px;
  height: 40px;
  min-width: 40px;
  object-fit: contain;
  border-radius: var(--mea-radius-sm);
  border: 1px solid var(--mea-border);
  flex-shrink: 0;
  background: repeating-conic-gradient(#2a2a2a 0% 25%, #1a1a1a 0% 50%) 50% / 10px 10px;
}

.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;
}

/* ---------- 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-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); }

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

/* ---------- Editor canvas + drag handle (posisi tanda tangan di 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 sign-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 -- tanda tangan 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;
}

.mea-wm-handle {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  /* Hanya elemen handle (area tanda tangan itu sendiri) yang menahan
     gesture bawaan browser -- supaya drag tidak "direbut" oleh scroll
     native saat jari menyentuh PAS di atas handle, tapi area preview
     DI LUAR handle tetap bisa discroll bebas. */
  touch-action: none;
  /* Hit-area minimum -- supaya handle tetap mudah di-tap/drag walau
     konten di dalamnya (gambar tanda tangan atau teks placeholder)
     berukuran kecil atau belum ter-load. */
  min-width: 48px;
  min-height: 48px;
  padding: 10px;
}
.mea-wm-handle:active { cursor: grabbing; }

.mea-wm-handle-content {
  display: flex;
  align-items: center;
  justify-content: center;
  outline: 1px dashed rgba(59, 130, 246, 0.6);
  padding: 2px 4px;
  pointer-events: none; /* klik/drag selalu ditangani oleh .mea-wm-handle, bukan konten di dalamnya (gambar <img>) */
}

.mea-wm-placeholder {
  font-size: 12px;
  color: var(--mea-text-muted);
  background: var(--mea-surface);
  padding: 8px 14px;
  border-radius: var(--mea-radius-sm);
  white-space: nowrap;
}

.mea-wm-rotate-handle {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--mea-accent);
  border: 2px solid #fff;
  cursor: grab;
  box-shadow: 0 0 0 1px var(--mea-border-strong);
}
.mea-wm-rotate-handle:active { cursor: grabbing; }
.mea-wm-rotate-handle::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 50%;
  width: 1px;
  height: 12px;
  background: var(--mea-accent);
  transform: translateX(-50%);
}

/* ---------- Thumbnails (pilih halaman) ---------- */

.mea-thumbnails { margin-top: 4px; margin-bottom: 24px; }
.mea-hint { font-size: 12.5px; color: var(--mea-text-muted); margin-bottom: 16px; }

.mea-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 4px;
}

.mea-thumb-item {
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-md);
  padding: 6px;
  background: var(--mea-surface);
}

.mea-thumb-selectable { cursor: pointer; transition: border-color 0.15s ease; }
.mea-thumb-selectable:hover { border-color: var(--mea-border-strong); }
.mea-thumb-selectable.is-selected {
  border-color: var(--mea-accent);
  background: var(--mea-accent-muted);
}

.mea-thumb-canvas-wrap {
  width: 100%;
  aspect-ratio: 0.75;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
  border-radius: var(--mea-radius-sm);
}
.mea-thumb-canvas { max-width: 100%; max-height: 100%; }

.mea-thumb-label {
  margin-top: 6px;
  font-size: 11px;
  text-align: center;
  color: var(--mea-text-muted);
}

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

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

.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) ---------- */

/* =====================================================================
   Khusus Sign PDF: pad gambar tanda tangan + tab mode + palet warna
   ===================================================================== */

/* ---------- Tab pemilih mode tanda tangan ---------- */

.mea-sig-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.mea-sig-tab {
  flex: 1;
  padding: 9px 10px;
  background: transparent;
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-sm);
  color: var(--mea-text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.mea-sig-tab:hover { border-color: var(--mea-border-strong); }
.mea-sig-tab.active {
  border-color: var(--mea-accent);
  background: var(--mea-accent-muted);
  color: var(--mea-accent-text);
}

/* ---------- Pad gambar tangan ---------- */

.mea-sigpad-wrap {
  position: relative;
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-md);
  background: #ffffff;
  background-image: linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 100% 28px;
  overflow: hidden;
  touch-action: none;
}
#mea-sigpad-canvas {
  display: block;
  width: 100%;
  height: 180px;
  cursor: crosshair;
  touch-action: none;
}
.mea-sigpad-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--mea-text-muted);
  pointer-events: none;
}

.mea-sigpad-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.mea-sigpad-colors { display: flex; gap: 6px; }
.mea-sigpad-color {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--mea-border);
  cursor: pointer;
  padding: 0;
}
.mea-sigpad-color.active { border-color: var(--mea-accent-text); box-shadow: 0 0 0 2px var(--mea-accent-muted); }

.mea-sigpad-clear {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-sm);
  color: var(--mea-text-secondary);
  font-size: 12px;
  padding: 7px 12px;
  cursor: pointer;
}
.mea-sigpad-clear:hover { border-color: var(--mea-danger-text); color: var(--mea-danger-text); }

/* ---------- Tanda tangan ketik nama ---------- */

.mea-sig-type-preview {
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-md);
  background: #ffffff;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  overflow: hidden;
}
.mea-sig-type-preview span {
  color: #111111;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mea-sig-font-group {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.mea-sig-font-btn {
  flex: 1;
  min-width: 90px;
  padding: 10px 8px;
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-sm);
  color: #111111;
  background-color: #ffffff;
  font-size: 18px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.mea-sig-font-btn:hover { border-color: var(--mea-border-strong); }
.mea-sig-font-btn.active { border-color: var(--mea-accent); box-shadow: 0 0 0 1px var(--mea-accent); }

/* ---------- Upload gambar tanda tangan ---------- */

.mea-sig-upload-hint { font-size: 12px; color: var(--mea-text-muted); margin-top: 8px; }

/* ---------- Konfirmasi tanda tangan siap dipakai ---------- */

.mea-sig-ready {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-md);
  background: var(--mea-surface);
}
.mea-sig-ready-thumb {
  width: 60px;
  height: 36px;
  object-fit: contain;
  border-radius: var(--mea-radius-sm);
  background: repeating-conic-gradient(#2a2a2a 0% 25%, #1a1a1a 0% 50%) 50% / 8px 8px;
  flex-shrink: 0;
}
.mea-sig-ready-text { flex: 1; font-size: 13px; color: var(--mea-text-secondary); }