/*
 * forms.css
 * Generic button variants, the book detail right panel, image/canvas wrapper,
 * crop selection overlay, book image display boxes, and the identification form
 * (card, labels, inputs, textarea, danger zone).
 */

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 13px;border-radius:7px;border:none;cursor:pointer;font-size:.83rem;font-weight:500}
.btn:active{opacity:.82}
.btn:disabled{opacity:.4;cursor:default}
.btn-p{background:#2563eb;color:white}
.btn-s{background:#e2e8f0;color:#475569}
.btn-g{background:#16a34a;color:white}
.btn-r{background:#ef4444;color:white}
.btn-w{width:100%;margin-bottom:7px}
.btn-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px;align-items:center}

/* ── Right panel ── */
.det-empty{display:flex;align-items:center;justify-content:center;height:100%;color:#94a3b8;font-size:.95rem}

/* ── Image + canvas overlay ── */
.img-wrap{position:relative;display:inline-block;max-width:100%;line-height:0;border-radius:7px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.img-wrap img{display:block;max-width:100%;max-height:calc(100vh - 200px);object-fit:contain}
.img-wrap canvas{position:absolute;inset:0;width:100%;height:100%}

/* ── Crop overlay ── */
.crop-sel{position:absolute;border:2px solid #38bdf8;background:rgba(56,189,248,.12);pointer-events:none}

/* ── Book detail panel ── */
.book-panel{display:flex;flex-direction:column;gap:14px}
.book-img-box{border-radius:7px;overflow:hidden;background:#0f172a;line-height:0;box-shadow:0 1px 4px rgba(0,0,0,.2);margin-bottom:8px}
.book-img-box img{max-width:100%;max-height:260px;object-fit:contain;display:block;margin:0 auto}
.book-img-label{font-size:.7rem;color:#64748b;margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}

/* ── Form ── */
.card{background:white;border-radius:10px;padding:13px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.flabel{display:block;font-size:.7rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.finput{width:100%;padding:8px 10px;border:1.5px solid #e2e8f0;border-radius:6px;font-size:.88rem;color:#1e293b;background:white;-webkit-appearance:none}
.finput:focus{outline:none;border-color:#2563eb}
textarea.finput{height:64px;resize:vertical}
.fgroup{margin-bottom:9px}
.dz{border:1.5px solid #fecaca;border-radius:8px;padding:11px;margin-top:12px}
.dz-h{color:#dc2626;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px}