/* ==========================================
   ocr-styles.css — สไตล์สำหรับฟีเจอร์ OCR ทั้งหมด (v2: Anchor-based)
   ==========================================
   ใช้ร่วมกับ camera.js, ui.js — ดีไซน์แบบ Mobile Banking
   Import ไฟล์นี้ในหน้า loan_system.html ก่อน </body>
*/

/* ปุ่มเปิด Bottom Sheet เพิ่มเอกสาร */
.ocr-camera-btn{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:14px;margin-top:10px;background:linear-gradient(135deg,#1565C0,#1E88E5);
  color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;
  cursor:pointer;font-family:"Sarabun",sans-serif;box-shadow:0 2px 8px rgba(21,101,192,.3)}
.ocr-camera-btn:active{opacity:.85}

/* ===== Bottom Sheet: เลือกช่องทางนำเข้าเอกสาร (ถ่ายรูป / อัลบั้ม / PDF) ===== */
.ocr-bottomsheet-overlay{position:fixed;inset:0;z-index:20000;display:flex;align-items:flex-end;
  justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.ocr-bottomsheet-overlay.ocr-bottomsheet-open{opacity:1;pointer-events:auto}
.ocr-bottomsheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.ocr-bottomsheet{position:relative;background:#fff;border-radius:20px 20px 0 0;
  width:100%;max-width:480px;padding:10px 18px 22px;
  transform:translateY(100%);transition:transform .25s cubic-bezier(.32,.72,0,1)}
.ocr-bottomsheet-open .ocr-bottomsheet{transform:translateY(0)}
.ocr-bottomsheet-handle{width:36px;height:4px;background:#DDD;border-radius:2px;margin:8px auto 14px}
.ocr-bottomsheet-title{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:12px;text-align:center}
.ocr-bottomsheet-option{display:flex;align-items:center;gap:14px;width:100%;padding:14px 12px;
  background:var(--g100);border:none;border-radius:12px;margin-bottom:10px;
  font-size:14.5px;font-weight:600;color:#222;cursor:pointer;font-family:"Sarabun",sans-serif;
  text-align:left}
.ocr-bottomsheet-option:active{background:var(--g200)}
.ocr-bs-icon{font-size:22px;width:30px;text-align:center}
.ocr-bottomsheet-cancel{width:100%;padding:13px;background:none;color:#888;border:none;
  font-size:14px;font-weight:600;cursor:pointer;font-family:"Sarabun",sans-serif;margin-top:4px}

/* ===== Corner Picker (แตะ 4 มุม) ===== */
.ocr-corner-picker-overlay{position:fixed;inset:0;background:#000;z-index:20000;
  display:flex;flex-direction:column}
.ocr-corner-header{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;background:#0B2545;color:#fff;font-size:14px}
.ocr-corner-cancel{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:4px 8px}
.ocr-corner-canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;
  overflow:auto;padding:16px}
#ocr-corner-canvas{cursor:crosshair;touch-action:none;max-width:100%;box-shadow:0 4px 20px rgba(0,0,0,.5)}
.ocr-corner-footer{display:flex;gap:10px;padding:14px 16px;background:#0B2545}
.ocr-corner-reset,.ocr-corner-confirm{flex:1;padding:12px;border:none;border-radius:8px;
  font-size:14px;font-weight:600;cursor:pointer;font-family:"Sarabun",sans-serif}
.ocr-corner-reset{background:rgba(255,255,255,.15);color:#fff}
.ocr-corner-confirm{background:#1E8449;color:#fff}
.ocr-corner-confirm:disabled{opacity:.4;cursor:not-allowed}

/* ===== Progress Widget (Mobile Banking style) ===== */
.ocr-progress-widget{position:fixed;left:12px;right:12px;bottom:12px;z-index:15000;
  background:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 4px 20px rgba(0,0,0,.2);
  max-width:400px;margin:0 auto}
.ocr-progress-step{display:flex;align-items:center;gap:10px;padding:8px 0;
  opacity:.4;transition:opacity .3s}
.ocr-progress-step.ocr-step-active{opacity:1}
.ocr-progress-step.ocr-step-done{opacity:.7}
.ocr-progress-step.ocr-step-done .ocr-progress-check::before{content:'✓';color:#1E8449}
.ocr-progress-icon{font-size:18px;width:26px;text-align:center}
.ocr-progress-label{flex:1;font-size:13px;color:#333}
.ocr-progress-check{width:20px;text-align:center;font-weight:700;color:#1E8449}
.ocr-progress-bar{flex:1;height:6px;background:#E0E0E0;border-radius:3px;overflow:hidden;margin-left:8px}
.ocr-progress-bar-fill{height:100%;background:#1565C0;width:0;transition:width .3s}
.ocr-progress-step.ocr-step-active .ocr-progress-bar-fill{animation:ocr-bar-pulse 1.5s ease-in-out infinite}
@keyframes ocr-bar-pulse{0%{width:20%}50%{width:80%}100%{width:20%}}
.ocr-progress-detail{font-size:11.5px;color:#888;text-align:center;margin-top:6px;min-height:16px}

/* ===== Confirm Popup ===== */
.ocr-confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:25000;
  display:flex;align-items:flex-end;justify-content:center}
@media(min-width:600px){.ocr-confirm-overlay{align-items:center;padding:16px}}
.ocr-confirm-box{background:#fff;border-radius:16px 16px 0 0;padding:22px 18px 28px;
  width:100%;max-width:420px;max-height:85vh;overflow-y:auto}
@media(min-width:600px){.ocr-confirm-box{border-radius:16px}}
.ocr-confirm-title{font-size:16px;font-weight:700;color:#1E8449;margin-bottom:4px}
.ocr-confirm-sub{font-size:12.5px;color:#666;margin-bottom:12px}
.ocr-confirm-warnings{background:#FFF3E0;border:1px solid #FFCC80;border-radius:8px;
  padding:10px 12px;font-size:12px;color:#E65100;margin-bottom:14px;line-height:1.6}
.ocr-confirm-field{margin-bottom:12px}
.ocr-confirm-field label{display:block;font-size:12px;font-weight:500;color:#555;margin-bottom:4px}
.ocr-confirm-field input{width:100%;padding:10px 12px;border:1.5px solid #ddd;border-radius:8px;
  font-size:15px;font-family:"Sarabun",sans-serif}
.ocr-confirm-field input:focus{border-color:#1565C0;outline:none}
.ocr-confirm-actions{display:flex;gap:10px;margin-top:16px}
.ocr-confirm-cancel,.ocr-confirm-btn{flex:1;padding:13px;border:none;border-radius:8px;
  font-size:15px;font-weight:600;cursor:pointer;font-family:"Sarabun",sans-serif}
.ocr-confirm-cancel{background:#F0F0F0;color:#666}
.ocr-confirm-btn{background:#1E8449;color:#fff}

/* ===== Fail/Retry Overlay ===== */
.ocr-fail-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:25000;
  display:flex;align-items:center;justify-content:center;padding:20px}
.ocr-fail-box{background:#fff;border-radius:16px;padding:28px 22px;max-width:320px;width:100%;text-align:center}
.ocr-fail-icon{font-size:44px;margin-bottom:10px}
.ocr-fail-title{font-size:17px;font-weight:700;color:#C0392B;margin-bottom:8px}
.ocr-fail-msg{font-size:13px;color:#666;line-height:1.7;margin-bottom:20px}
.ocr-fail-retry-btn{width:100%;padding:13px;background:#1565C0;color:#fff;border:none;
  border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;font-family:"Sarabun",sans-serif;margin-bottom:8px}
.ocr-fail-cancel-btn{width:100%;padding:11px;background:none;color:#888;border:none;
  font-size:13px;cursor:pointer;font-family:"Sarabun",sans-serif}

/* ===== Next Step Prompt ===== */
.ocr-next-prompt-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:25000;
  display:flex;align-items:center;justify-content:center;padding:20px}
.ocr-next-prompt-box{background:#fff;border-radius:16px;padding:26px 22px;max-width:340px;width:100%;text-align:center}
.ocr-next-prompt-title{font-size:16px;font-weight:700;color:#1E8449;margin-bottom:8px}
.ocr-next-prompt-msg{font-size:13px;color:#666;line-height:1.6;margin-bottom:20px}
.ocr-next-prompt-btn{width:100%;padding:13px;background:#1565C0;color:#fff;border:none;
  border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;font-family:"Sarabun",sans-serif;margin-bottom:8px}
.ocr-next-prompt-skip{width:100%;padding:11px;background:none;color:#888;border:none;
  font-size:13px;cursor:pointer;font-family:"Sarabun",sans-serif}