/* qr_code_generator: rules for this tool only. Shared pieces are in ../office_tools.css.
   Read by marketing/office_tools/qr_code_generator (via _head); classes start .ot-qr-. */

/* The shared classes set display, which would beat the hidden attribute. */
.ot-qr [hidden] { display: none !important; }

.ot-qr-options { display: flex; flex-wrap: wrap; gap: 20px 24px; align-items: flex-start; }
.ot-qr-options > .ot-field { flex: 0 1 auto; }
.ot-qr-caption-input { width: 200px; max-width: 100%; }
.ot-qr-textarea { min-height: 88px; padding: 10px 12px; resize: vertical; }
.ot-qr-hidden-check { align-self: end; min-height: 44px; }
.ot-qr-scheme { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; color: var(--text); }

.ot-qr-swatch-black { background: #1c1917; }
.ot-qr-swatch-navy { background: #294887; }
.ot-qr-swatch-green { background: #047857; }
.ot-qr-custom { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: var(--text-secondary); }
.ot-qr-custom.is-selected { border-width: 3px; outline: 2px solid var(--primary-dark); outline-style: solid; color: transparent; }

.ot-qr-side { align-items: center; }
.ot-qr-side > .ot-label { align-self: flex-start; }
.ot-qr-figure { margin: 0; width: 100%; max-width: 300px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ot-qr-preview { width: 100%; max-width: 240px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.ot-qr-preview svg { width: 100%; height: auto; display: block; }
.ot-qr-empty { margin: 0; text-align: center; font-size: 14px; color: var(--text-secondary); }
.ot-qr-caption { font-size: 16px; font-weight: 600; color: var(--text); text-align: center; overflow-wrap: anywhere; }
.ot-qr-summary { margin: 0; font-size: 13px; color: var(--text-secondary); text-align: center; overflow-wrap: anywhere; max-width: 300px; }
.ot-qr-inside { width: 100%; max-width: 300px; font-size: 13px; color: var(--text-secondary); }
.ot-qr-inside summary { cursor: pointer; padding: 8px 0; }
.ot-qr-payload { margin: 6px 0 0; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; }
.ot-qr-actions { width: 100%; max-width: 300px; }
.ot-qr-side .ot-status { align-self: stretch; text-align: center; }