/* /submit-your-business: the free directory-listing form with a live preview card.
   Builds on membership_front.css (.mf-front tokens, .mf-field, .mf-btn, .mf-panel); this file only
   adds the two-column layout, the logo dropzone, the preview card and the mobile preview sheet.
   Element ids/classes toggled by the page script (hidden, flex, is-filled) are kept as-is. */

.mf-front .sb-layout { display: grid; gap: var(--mf-space-40); align-items: start; padding-block: var(--mf-space-40) var(--mf-space-64); }
@media (min-width: 1024px) { .mf-front .sb-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.mf-front .sb-main { min-width: 0; }
.mf-front .sb-form { margin-top: 0; }
.mf-front .sb-req { color: #b91c1c; }
.mf-front .sb-error { margin: var(--mf-space-16) 0 0; }
.mf-front select.mf-field { appearance: auto; cursor: pointer; }

/* logo dropzone: the file input covers the whole box */
.mf-front .sb-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 168px;
  padding: var(--mf-space-24); border: 2px dashed var(--mf-ink-a50); border-radius: var(--mf-radius-control);
  background: var(--mf-surface-subtle); cursor: pointer; transition: border-color 150ms ease-out, background-color 150ms ease-out;
}
.mf-front .sb-drop:hover, .mf-front .sb-drop.is-filled { border-color: var(--mf-accent); }
.mf-front .sb-drop.is-filled { background: var(--mf-white); }
.mf-front .sb-drop:focus-within { outline: 2px solid var(--mf-accent); outline-offset: 2px; }
.mf-front .sb-drop-ph { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 12px; color: var(--mf-ink-a70); pointer-events: none; }
.mf-front .sb-drop-ph svg { width: 36px; height: 36px; margin-bottom: 4px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mf-front .sb-drop-h { font-size: 14px; font-weight: 600; color: var(--mf-ink); }
.mf-front .sb-drop-img { max-height: 112px; object-fit: contain; border-radius: 4px; }
.mf-front .sb-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mf-front .sb-remove { justify-self: start; margin-top: var(--mf-space-4); }

/* "facebook.com/" prefix joined to its input */
.mf-front .sb-prefix { display: flex; }
.mf-front .sb-prefix span {
  display: inline-flex; align-items: center; padding-inline: var(--mf-space-12); border: 2px solid var(--mf-border-field); border-right: 0;
  border-radius: var(--mf-radius-control) 0 0 var(--mf-radius-control); background: var(--mf-surface-subtle); color: var(--mf-ink-a70); font-size: 14px; white-space: nowrap;
}
.mf-front .sb-prefix .mf-field { border-radius: 0 var(--mf-radius-control) var(--mf-radius-control) 0; min-width: 0; }

.mf-front .sb-honeypot { display: none; }
.mf-front .sb-optin { display: flex; align-items: flex-start; gap: var(--mf-space-12); font-size: 14px; line-height: 1.5; color: var(--mf-ink-a70); }
.mf-front .sb-optin input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--mf-accent); cursor: pointer; }
.mf-front .sb-optin label { cursor: pointer; }
.mf-front .sb-optin a { text-decoration: underline; text-underline-offset: 3px; }

/* success state */
.mf-front .sb-success { display: grid; gap: var(--mf-space-16); }
.mf-front .sb-success-head { display: grid; justify-items: center; gap: var(--mf-space-8); padding-bottom: var(--mf-space-24); text-align: center; border-bottom: 1px solid var(--mf-border); }
.mf-front .sb-check { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--mf-space-8); border-radius: 50%; background: #e4f0e7; color: #2d794d; }
.mf-front .sb-check svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mf-front .sb-success .mf-panel { display: grid; gap: var(--mf-space-12); }
.mf-front .sb-success .mf-panel + .mf-panel { margin-top: 0; }
.mf-front .sb-boost { background: var(--mf-surface-subtle); }

/* live preview: sticky aside on wide screens; a floating button + bottom sheet below 1024px */
.mf-front .sb-aside { display: none; }
@media (min-width: 1024px) { .mf-front .sb-aside { display: block; position: sticky; top: var(--mf-space-24); } }
.mf-front .sb-aside-note { margin: var(--mf-space-4) 0 var(--mf-space-12); font-size: 13px; }
.mf-front .sb-toggle {
  display: inline-flex; align-items: center; min-height: 32px; margin-bottom: var(--mf-space-12); padding: 0 var(--mf-space-12);
  border: 1px solid var(--mf-border); border-radius: var(--mf-radius-pill); background: var(--mf-white); cursor: pointer;
  font: 600 12px/1 var(--mf-font-primary); color: var(--mf-ink);
}
.mf-front .sb-toggle:hover { border-color: var(--mf-ink); }

.mf-front .sb-card { position: relative; overflow: hidden; border: 1px solid var(--mf-border); border-radius: var(--mf-radius-panel); background: var(--mf-white); transition: box-shadow 200ms ease-out; }
.mf-front .sb-ribbon {
  position: absolute; top: var(--mf-space-12); right: var(--mf-space-12); z-index: 1; padding: 4px 10px; border-radius: var(--mf-radius-pill);
  background: #fdf4cd; color: var(--mf-ink); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.mf-front .sb-card-media { aspect-ratio: 16 / 10; background: var(--mf-surface-subtle); }
.mf-front .sb-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mf-front .sb-card-ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--mf-ink-a50); }
.mf-front .sb-card-ph svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.mf-front .sb-card-body { display: grid; gap: var(--mf-space-4); padding: var(--mf-space-16) var(--mf-space-20) var(--mf-space-20); }
.mf-front .sb-card-cat { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mf-link); }
.mf-front .sb-card-name { margin: 0; font-family: var(--mf-font-editorial); font-weight: 800; font-size: 1.25rem; line-height: 1.15; color: var(--mf-ink); }
.mf-front .sb-card-city { margin: 0; font-size: 13px; color: var(--mf-ink-a70); }
.mf-front .sb-card-desc {
  margin: var(--mf-space-8) 0 0; min-height: 4.5em; font-size: 14px; line-height: 1.5; color: var(--mf-ink-a80);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mf-front .sb-card-more { margin-top: var(--mf-space-8); font-size: 13px; font-weight: 600; color: var(--mf-link); }

.mf-front .sb-fab {
  position: fixed; right: var(--mf-space-20); bottom: var(--mf-space-24); z-index: 40; display: inline-flex; align-items: center; gap: var(--mf-space-8);
  min-height: 44px; padding: 0 var(--mf-space-16); border: 0; border-radius: var(--mf-radius-pill); cursor: pointer;
  background: var(--mf-ink); color: var(--mf-white); font: 700 14px/1 var(--mf-font-primary); box-shadow: 0 8px 24px rgba(33, 33, 33, 0.25);
}
.mf-front .sb-fab svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mf-front .sb-overlay { position: fixed; inset: 0; z-index: 50; align-items: flex-end; justify-content: center; background: rgba(33, 33, 33, 0.5); }
.mf-front .sb-overlay.flex { display: flex; }
.mf-front .sb-sheet { width: 100%; max-width: 32rem; max-height: 90vh; overflow-y: auto; padding: var(--mf-space-24); border-radius: var(--mf-radius-panel) var(--mf-radius-panel) 0 0; background: var(--mf-white); }
.mf-front .sb-close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--mf-surface-subtle); color: var(--mf-ink); cursor: pointer; }
@media (min-width: 1024px) { .mf-front .sb-fab, .mf-front .sb-overlay, .mf-front .sb-overlay.flex { display: none; } }

/* Script-toggled .hidden must win over this file's display rules (loaded after membership_front.css) */
.mf-front .hidden, .mf-front img.hidden { display: none; }