/* Flyer Maker styles are intentionally scoped to fm-* for the Infoxchange website widget. */
.fm-overlay { --fm-bg: var(--background, #0d0f14); --fm-surface: var(--surface, #161a24); --fm-surface-2: var(--surface-elevated, #202536); --fm-text: var(--text, #f4f7fb); --fm-muted: var(--muted, #a4adbd); --fm-gold: #c99a3d; --fm-gold-bright: #e8bd67; --fm-line: rgba(255,255,255,.11); --fm-danger: #e37b76; position: fixed; inset: 0; z-index: 2147483000; overflow: auto; background: radial-gradient(circle at 85% 0%, rgba(201,154,61,.13), transparent 31rem), var(--fm-bg); color: var(--fm-text); font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); }
.fm-overlay *, .fm-overlay *::before, .fm-overlay *::after { box-sizing: border-box; }
.fm-app { min-height: 100%; width: min(1080px, 100%); margin: 0 auto; padding: 18px 18px 48px; }
.fm-shell { min-height: calc(100vh - 66px); }
.fm-header { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 7px 0 24px; }
.fm-brand { display: flex; align-items: center; gap: 11px; letter-spacing: -.01em; }
.fm-brand > div { display: flex; flex-direction: column; gap: 2px; }
.fm-brand strong { font-size: 18px; }
.fm-brand small { color: var(--fm-muted); font-size: 11px; }
.fm-brand-mark { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #17130c; background: linear-gradient(140deg, var(--fm-gold-bright), var(--fm-gold)); font-weight: 850; font-size: 11px; letter-spacing: -.05em; box-shadow: 0 8px 22px rgba(201,154,61,.2); }
.fm-close-button { color: var(--fm-muted); border-color: var(--fm-line); background: transparent; }
.fm-panel { background: color-mix(in srgb, var(--fm-surface) 92%, transparent); border: 1px solid var(--fm-line); border-radius: 22px; padding: clamp(18px, 3vw, 32px); box-shadow: 0 24px 70px rgba(0,0,0,.15); }
.fm-wizard { max-width: 850px; margin: 0 auto; }
.fm-stepper { display: flex; align-items: center; justify-content: center; max-width: 640px; margin: 0 auto 34px; }
.fm-step-dot { width: 30px; height: 30px; border-radius: 50%; padding: 0; flex: 0 0 30px; border: 1px solid var(--fm-line); background: var(--fm-surface-2); color: var(--fm-muted); font-size: 11px; font-weight: 700; cursor: pointer; }
.fm-step-dot.is-active { color: #17130c; background: var(--fm-gold-bright); border-color: var(--fm-gold-bright); box-shadow: 0 0 0 5px rgba(201,154,61,.12); }
.fm-step-dot.is-done { color: var(--fm-gold-bright); border-color: var(--fm-gold); }
.fm-step-line { height: 1px; background: var(--fm-line); flex: 1; min-width: 12px; }
.fm-step-line.is-done { background: var(--fm-gold); }
.fm-step-header { max-width: 680px; margin: 0 auto 26px; }
.fm-eyebrow, .fm-summary-label { color: var(--fm-gold-bright); font-size: 10px; letter-spacing: .14em; font-weight: 800; margin: 0 0 10px; }
.fm-step-title { font-size: clamp(28px, 5vw, 44px); line-height: 1.02; letter-spacing: -.045em; margin: 0 0 13px; }
.fm-step-description { color: var(--fm-muted); line-height: 1.6; max-width: 620px; margin: 0; }
.fm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.fm-span-2 { grid-column: 1 / -1; }
.fm-form-stack, .fm-repeat-box, .fm-product-vault, .fm-form-grid, .fm-summary { display: flex; flex-direction: column; gap: 16px; }
.fm-field-label { display: flex; flex-direction: column; gap: 7px; color: var(--fm-muted); font-size: 12px; font-weight: 650; }
.fm-input { width: 100%; min-height: 45px; border: 1px solid var(--fm-line); border-radius: 11px; outline: none; background: var(--fm-surface-2); color: var(--fm-text); padding: 11px 13px; font: inherit; font-size: 14px; transition: border .18s, box-shadow .18s; }
.fm-input::placeholder { color: color-mix(in srgb, var(--fm-muted) 72%, transparent); }
.fm-input:focus { border-color: var(--fm-gold); box-shadow: 0 0 0 3px rgba(201,154,61,.14); }
.fm-textarea { min-height: 145px; resize: vertical; line-height: 1.55; }
.fm-button { appearance: none; min-height: 40px; border: 1px solid var(--fm-line); border-radius: 10px; padding: 9px 14px; background: var(--fm-surface-2); color: var(--fm-text); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; transition: transform .16s, filter .16s, border-color .16s; }
.fm-button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.fm-button:focus-visible, .fm-history-row:focus-visible, .fm-step-dot:focus-visible { outline: 2px solid var(--fm-gold-bright); outline-offset: 3px; }
.fm-button:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.fm-button-primary, .fm-button-gold { border-color: var(--fm-gold); background: var(--fm-gold); color: #1d170d; }
.fm-button-gold { background: linear-gradient(135deg, var(--fm-gold-bright), var(--fm-gold)); }
.fm-button-secondary { background: transparent; }
.fm-button-quiet { min-height: 32px; padding: 6px 9px; font-size: 11px; color: var(--fm-gold-bright); background: transparent; border-color: transparent; }
.fm-button-link { min-height: auto; padding: 2px 0; background: transparent; border: 0; color: var(--fm-gold-bright); font-size: 11px; }
.fm-button-danger { color: #ffb4ae; border-color: rgba(227,123,118,.35); background: transparent; }
.fm-wizard-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 26px; margin-top: 30px; border-top: 1px solid var(--fm-line); }
.fm-choice-row, .fm-size-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.fm-choice, .fm-size-choice, .fm-check-item { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; border: 1px solid var(--fm-line); border-radius: 10px; padding: 8px 11px; color: var(--fm-muted); font-size: 12px; cursor: pointer; }
.fm-choice:has(input:checked), .fm-size-choice:has(input:checked), .fm-check-item:has(input:checked) { color: var(--fm-text); border-color: rgba(201,154,61,.75); background: rgba(201,154,61,.1); }
.fm-choice input, .fm-size-choice input, .fm-check-item input { accent-color: var(--fm-gold); }
.fm-overlay input[type="checkbox"], .fm-overlay input[type="radio"] { width: 18px; height: 18px; min-height: 18px; min-width: 18px; flex: 0 0 18px; padding: 0; margin: 0; border-radius: 3px; }
.fm-colors-box, .fm-repeat-box, .fm-campaign-products { border: 1px solid var(--fm-line); border-radius: 14px; padding: 15px; }
.fm-color-list, .fm-phone-list, .fm-location-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 7px; }
.fm-color-row, .fm-repeat-row { display: grid; grid-template-columns: 45px 1fr auto; gap: 8px; align-items: center; }
.fm-color-row input[type="color"] { height: 43px; padding: 3px; cursor: pointer; }
.fm-color-row input[type="text"] { grid-column: 2 / -1; }
.fm-repeat-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; color: var(--fm-text); font-size: 13px; }
.fm-repeat-heading small { display: block; flex: 1; color: var(--fm-muted); font-size: 11px; font-weight: 400; }
.fm-upload-box { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 17px; align-items: stretch; }
.fm-dropzone, .fm-upload-inline { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; min-height: 205px; border: 1px dashed rgba(201,154,61,.55); border-radius: 15px; background: rgba(201,154,61,.05); text-align: center; cursor: pointer; padding: 22px; }
.fm-dropzone strong, .fm-upload-inline strong { font-size: 15px; }
.fm-dropzone small, .fm-upload-inline small { color: var(--fm-muted); font-size: 11px; }
.fm-upload-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; color: var(--fm-gold-bright); border: 1px solid rgba(201,154,61,.4); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.fm-file-input { width: auto; min-height: auto; max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--fm-muted); font-size: 11px; cursor: pointer; }
.fm-file-input::file-selector-button { border: 1px solid var(--fm-line); border-radius: 8px; background: var(--fm-surface-2); color: var(--fm-text); padding: 7px 9px; margin-right: 5px; cursor: pointer; }
.fm-asset-preview { display: grid; place-items: center; min-height: 170px; border-radius: 14px; overflow: hidden; background: repeating-conic-gradient(#292720 0 25%, #211f1b 0 50%) 50% / 18px 18px; color: var(--fm-muted); font-size: 11px; text-align: center; padding: 10px; }
.fm-preview-image, .fm-product-thumb img { max-width: 100%; max-height: 165px; display: block; object-fit: contain; }
.fm-product-list { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.fm-product-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 9px; border-radius: 12px; background: var(--fm-surface-2); }
.fm-product-thumb { display: grid; place-items: center; flex: 0 0 54px; height: 54px; overflow: hidden; border-radius: 9px; background: #1b1a17; color: var(--fm-muted); font-size: 9px; }
.fm-product-details { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.fm-product-details strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.fm-product-details small { color: var(--fm-muted); font-size: 10px; }
.fm-empty { color: var(--fm-muted); font-size: 13px; margin: 4px 0; }
.fm-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fm-summary-card { padding: 17px; min-height: 118px; border-radius: 14px; background: var(--fm-surface-2); }
.fm-summary-card h3 { margin: 5px 0 8px; font-size: 20px; overflow-wrap: anywhere; }
.fm-summary-text { margin: 7px 0; font-size: 14px; line-height: 1.4; }
.fm-muted, .fm-summary-card .fm-muted { color: var(--fm-muted); font-size: 12px; line-height: 1.5; }
.fm-summary-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.fm-proofread { grid-column: 1 / -1; margin: 0; color: #e0b96b; font-size: 12px; line-height: 1.5; }
.fm-toggle { display: inline-flex; align-items: center; gap: 10px; color: var(--fm-text); font-size: 14px; margin-bottom: 18px; cursor: pointer; }
.fm-toggle input { accent-color: var(--fm-gold); width: 18px; height: 18px; }
.fm-muted-fields { opacity: .48; }
.fm-auth-warning, .fm-alert { max-width: 850px; margin: 0 auto 14px; border-radius: 12px; padding: 12px 14px; font-size: 12px; line-height: 1.5; }
.fm-auth-warning { border: 1px solid rgba(201,154,61,.38); background: rgba(201,154,61,.09); color: var(--fm-gold-bright); }
.fm-auth-warning p { margin: 4px 0 0; color: var(--fm-muted); }
.fm-alert { border: 1px solid rgba(227,123,118,.45); background: rgba(227,123,118,.1); color: #ffc2bd; }
.fm-alert-success { border-color: rgba(81,185,135,.45); background: rgba(81,185,135,.1); color: #a5e6bd; }
.fm-alert-warning { border-color: rgba(201,154,61,.45); background: rgba(201,154,61,.1); color: var(--fm-gold-bright); }
.fm-workspace { max-width: 980px; margin: 0 auto; }
.fm-workspace-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.fm-workspace-title { flex: 1; margin: 0; font-size: clamp(23px, 4vw, 34px); letter-spacing: -.04em; }
.fm-free-badge { color: #a5e6bd; border: 1px solid rgba(81,185,135,.4); border-radius: 99px; padding: 7px 10px; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.fm-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.fm-tab { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--fm-muted); }
.fm-tab.is-active { color: var(--fm-gold-bright); border-color: var(--fm-gold); }
.fm-section-title { margin: 0 0 7px; font-size: 24px; letter-spacing: -.03em; }
.fm-inspiration-upload { display: grid; grid-template-columns: auto 1fr minmax(220px, 1fr); gap: 12px; align-items: center; margin: 20px 0; padding: 14px; border: 1px dashed rgba(201,154,61,.5); border-radius: 13px; }
.fm-inspiration-upload small { color: var(--fm-muted); font-size: 11px; }
.fm-inspiration-upload .fm-file-input { max-width: 220px; }
.fm-inspiration-status { color: var(--fm-gold-bright); font-size: 12px; overflow-wrap: anywhere; }
.fm-inspiration-status, .fm-saved-inspiration, .fm-inspiration-reference { grid-column: 1 / -1; }
.fm-inspiration-reference { margin: 0; width: min(100%, 380px); }
.fm-inspiration-preview { min-height: 160px; max-height: 340px; }
.fm-inspiration-preview img { width: 100%; max-height: 310px; object-fit: contain; }
.fm-inspiration-reference figcaption { margin-top: 7px; font-size: 12px; color: var(--fm-muted); overflow-wrap: anywhere; }
.fm-reference-card { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 160px; max-width: 100%; padding: 10px; }
.fm-reference-thumb { min-height: 115px; height: 115px; padding: 6px; }
.fm-reference-thumb img { width: 100%; height: 100%; max-height: 103px; object-fit: contain; }
.fm-reference-caption { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.fm-reference-caption input { flex-shrink: 0; }
.fm-reference-caption > span { flex: 1; min-width: 0; overflow-wrap: break-word; }
.fm-inline-feedback { max-width: none; margin: 12px 0 0; }
.fm-input[aria-invalid="true"] { border-color: var(--fm-danger); }
.fm-field-caption { color: var(--fm-muted); font-size: 11px; margin: 6px 0 8px; }
.fm-checklist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fm-campaign-products { margin: 17px 0; }
.fm-project-controls { display: flex; justify-content: flex-end; margin-top: 21px; }
.fm-progress { min-height: 19px; color: var(--fm-gold-bright); font-size: 12px; }
.fm-copy-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.fm-copy-form .fm-field-label:last-child { grid-column: 1 / -1; }
.fm-reference-plan { margin: 18px 0 20px; padding: 13px 15px; border: 1px solid var(--fm-line); border-radius: 14px; background: color-mix(in srgb, var(--fm-surface-2) 72%, transparent); }
.fm-reference-plan > summary { color: var(--fm-gold-bright); cursor: pointer; font-size: 13px; font-weight: 800; }
.fm-reference-plan[open] > summary { margin-bottom: 14px; }
.fm-plan-section { padding-top: 13px; border-top: 1px solid var(--fm-line); }
.fm-plan-section + .fm-plan-section { margin-top: 16px; }
.fm-plan-section h4 { margin: 0 0 10px; font-size: 15px; }
.fm-plan-item { display: grid; grid-template-columns: minmax(125px, .3fr) minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--fm-line) 70%, transparent); }
.fm-plan-item strong { color: var(--fm-text); font-size: 11px; }
.fm-plan-item p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.fm-plan-list { margin-top: 12px; }
.fm-plan-list h5 { margin: 0 0 5px; color: var(--fm-text); font-size: 11px; }
.fm-plan-list ul, .fm-quality-list { margin: 5px 0 0; padding-left: 20px; }
.fm-plan-list li, .fm-quality-list li { margin: 4px 0; color: var(--fm-muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.fm-quality-checks { margin: 12px 0 14px; padding: 12px 14px; border: 1px solid rgba(201,154,61,.42); border-radius: 12px; background: rgba(201,154,61,.08); }
.fm-quality-title { display: block; color: var(--fm-gold-bright); font-size: 12px; }
.fm-quality-composition-summary { margin: 9px 0 5px; padding: 8px 10px; border-left: 3px solid var(--fm-danger); border-radius: 5px; background: rgba(227,123,118,.13); color: #ffc2bd; font-size: 12px; font-weight: 800; line-height: 1.45; }
.fm-quality-warning.fm-quality-composition { color: #ffc2bd; font-weight: 700; }
.fm-quality-has-composition-warning { border-color: rgba(227,123,118,.65); background: rgba(227,123,118,.09); }
.fm-versions { border-top: 1px solid var(--fm-line); margin-top: 25px; padding-top: 20px; }
.fm-versions h4 { margin: 0 0 10px; }
.fm-version-row { padding: 11px 0; border-bottom: 1px solid var(--fm-line); }
.fm-version-row > small { color: var(--fm-muted); margin-left: 11px; font-size: 10px; }
.fm-version-row.is-selected { border-color: rgba(201,154,61,.4); }
.fm-version-image { max-width: 680px; min-height: 90px; margin: 12px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--fm-muted); font-size: 11px; }
.fm-flyer-image { width: 100%; max-height: 650px; object-fit: contain; border-radius: 12px; background: #171613; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.fm-edit-form { display: flex; gap: 8px; }
.fm-history-row { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--fm-line); border-radius: 0; background: transparent; color: var(--fm-text); padding: 15px 3px; cursor: pointer; }
.fm-history-row strong { flex: 1; overflow-wrap: anywhere; }
.fm-history-row span { color: var(--fm-gold-bright); font-size: 11px; }
.fm-history-row small { color: var(--fm-muted); font-size: 10px; }
.fm-is-busy { cursor: progress; }
.fm-legacy-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--fm-line); }
.fm-legacy-row strong { flex: 1 1 180px; overflow-wrap: anywhere; }
.fm-legacy-row small { color: var(--fm-muted); font-size: 10px; }
.fm-legacy-row p { flex-basis: 100%; margin: 0; }
.fm-legacy-link { text-decoration: none; }
.fm-legacy-preview { width: min(100%, 260px); max-height: 300px; flex-basis: 100%; object-fit: contain; border-radius: 10px; background: #171613; }
.fm-is-busy .fm-panel { opacity: .83; }
@media (max-width: 650px) {
  .fm-app { padding: 12px 11px 36px; }
  .fm-header { padding-bottom: 15px; }
  .fm-panel { border-radius: 17px; padding: 17px 14px; }
  .fm-stepper { margin-bottom: 25px; }
  .fm-step-dot { width: 27px; height: 27px; flex-basis: 27px; font-size: 10px; }
  .fm-step-title { font-size: 31px; }
  .fm-form-grid, .fm-copy-form, .fm-summary { display: flex; flex-direction: column; }
  .fm-upload-box { grid-template-columns: 1fr; }
  .fm-asset-preview { min-height: 110px; }
  .fm-repeat-row { grid-template-columns: 1fr 1fr auto; }
  .fm-repeat-heading { align-items: flex-start; flex-wrap: wrap; }
  .fm-repeat-heading small { flex-basis: 100%; order: 3; }
  .fm-inspiration-upload { grid-template-columns: 1fr; align-items: start; }
  .fm-inspiration-upload .fm-file-input { max-width: 100%; }
  .fm-workspace-top { flex-wrap: wrap; }
  .fm-workspace-title { order: 3; flex-basis: 100%; }
  .fm-wizard-actions { justify-content: stretch; }
  .fm-wizard-actions .fm-button { flex: 1; }
  .fm-summary-actions .fm-button { flex: 1; }
  .fm-product-row { align-items: flex-start; flex-wrap: wrap; }
  .fm-product-row .fm-button-link { margin-left: 66px; }
  .fm-edit-form { flex-direction: column; }
}