/* watermark_photos: rules for /tools/watermark-photos only
   (marketing/office_tools/watermark_photos.html.erb, watermark_photos_controller.js).
   Shared pieces are in ../office_tools.css. Prefix: .ot-wm- */

/* Shared classes set display (.ot-btn, .ot-field...), which beats [hidden]. */
.ot-wm [hidden] { display: none !important; }

.ot-wm.is-dragover { outline: 2px dashed var(--primary); outline-offset: 4px; }

.ot-wm-drop { min-height: 260px; justify-content: center; }
.ot-wm-drop svg { color: var(--gray-500); }
.ot-wm-drop-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--text); }

.ot-wm-workspace { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.ot-wm-preview { margin: 0; background: var(--gray-100); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px; display: flex; justify-content: center; align-items: center; min-height: 200px; }
.ot-wm-preview canvas { display: block; max-width: 100%; max-height: min(70vh, 600px); width: auto; height: auto; border-radius: 4px; box-shadow: var(--shadow-sm); }
.ot-wm-caption { margin: 0; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }

.ot-wm-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.ot-wm-thumb-list { display: contents; }
.ot-wm-thumb, .ot-wm-add { width: 72px; height: 72px; border-radius: var(--radius-md); flex: none; }
.ot-wm-thumb { position: relative; padding: 0; overflow: hidden; border: 1px solid var(--border-hover); background: var(--gray-100); cursor: pointer; }
.ot-wm-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ot-wm-thumb[aria-current="true"] { border: 3px solid var(--primary); }
.ot-wm-thumb:focus-visible, .ot-wm-pos:focus-visible, .ot-wm-add:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; }
.ot-wm-thumb-tag { position: absolute; left: 4px; bottom: 4px; font-size: 11px; font-weight: 700; line-height: 1.4; padding: 0 5px; border-radius: 4px; color: #ffffff; background: rgba(28, 25, 23, 0.85); }
.ot-wm-thumb-after { background: #0f766e; }
.ot-wm-add { border: 2px dashed var(--gray-400); background: var(--surface); color: var(--gray-700); font: inherit; font-size: 14px; cursor: pointer; }
.ot-wm-add:disabled { opacity: 0.5; cursor: not-allowed; }

.ot-wm-row { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-start; }
.ot-wm-logo-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ot-wm-logo-thumb { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #ffffff; }

.ot-wm-positions { display: grid; grid-template-columns: repeat(3, 44px); gap: 4px; }
.ot-wm-pos { width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-hover); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ot-wm-pos::after { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--gray-300); }
.ot-wm-pos[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); }
.ot-wm-pos[aria-pressed="true"]::after { background: #ffffff; }

.ot-wm-label-row { display: flex; justify-content: space-between; gap: 8px; }
.ot-wm-range { width: 100%; min-height: 32px; margin: 0; accent-color: var(--primary); }