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

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

/* The mock-up gives the preview the wider column. */
.ot-card-tool .ot-card-form { flex: 1 1 380px; }
.ot-card-tool .ot-card-side { flex: 999 1 420px; }

.ot-card-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ot-card-style { min-height: 56px; border-radius: var(--radius-md); justify-content: center; padding: 0 8px; text-align: center; }
.ot-card-options { display: flex; flex-wrap: wrap; gap: 20px 24px; align-items: flex-start; }
.ot-card-scheme { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; color: var(--text); }

.ot-card-swatch-teal { background: #0f766e; }
.ot-card-swatch-navy { background: #294887; }
.ot-card-swatch-charcoal { background: #292524; }
.ot-card-custom { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: var(--text-secondary); }
.ot-card-custom.is-selected { border-width: 3px; outline: 2px solid var(--primary-dark); outline-style: solid; color: transparent; }

.ot-card-previews { display: flex; flex-wrap: wrap; gap: 20px; }
.ot-card-figure { margin: 0; display: flex; flex-direction: column; gap: 8px; flex: 1 1 260px; max-width: 350px; min-width: 0; }
.ot-card-figure figcaption { font-size: 13px; color: var(--text-secondary); }
.ot-card-face { width: 100%; aspect-ratio: 7 / 4; border-radius: 6px; overflow: hidden; background: var(--surface); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.06); }
.ot-card-face svg { display: block; width: 100%; height: 100%; }
.ot-card-note { margin: 0; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; }
.ot-card-actions { max-width: 420px; }