/* ============================================================
   forms-theme.css — standalone BrandFinder form pages (bf2 look)
   Linked by the public form pages under /forms (they open in their
   own tab, so they are self-contained — NOT the app chrome).
   Scoped under body.fm2 so it only touches form pages.
   Native forms keep their existing Bootstrap markup/JS hooks; this
   sheet only restyles. Loaded AFTER bootstrap.css so it overrides.
   ============================================================ */

body.fm2 {
    --accent: #2563eb; --accent-d: #1d4ed8; --accent-soft: #e8f0ff;
    --ink: #1f2a44; --muted: #6b7686; --line: #e7eaf0; --bg: #f4f6fa; --card: #fff;
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
body.fm2 * { box-sizing: border-box; }

/* branded top bar */
.fm2 .fm-topbar {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 12px 22px; position: sticky; top: 0; z-index: 30;
}
.fm2 .fm-topbar .fm-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.fm2 .fm-topbar .fm-logo { width: 36px; height: 36px; border-radius: 9px; background: var(--accent); color: #fff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; letter-spacing: -1px; }
.fm2 .fm-topbar .fm-brand b { font-size: 18px; font-weight: 800; }
.fm2 .fm-topbar .fm-brand b span { color: var(--accent); }
.fm2 .fm-topbar .fm-formname { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); }

/* page container */
.fm2 .container { max-width: 880px; margin: 0 auto; padding: 28px 22px 64px; }
.fm2 h1 { font-size: 24px; font-weight: 800; color: var(--ink); margin: 4px 0 24px; text-align: center; }
.fm2 h3, .fm2 h4 { font-family: inherit; }

/* cards */
.fm2 .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 3px rgba(16,24,40,.05); overflow: hidden; }
.fm2 .card-header { background: #f7f9fc; border-bottom: 1px solid var(--line); padding: 14px 18px; }
.fm2 .card-header h3, .fm2 .card-header h4 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.fm2 .card-body { padding: 18px; }

/* form controls */
.fm2 label { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; display: block; }
.fm2 .form-control {
    width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px;
    padding: 9px 13px; font-size: 14.5px; color: var(--ink); background: #fff; font-family: inherit;
}
.fm2 textarea.form-control { min-height: 120px; }
.fm2 select.form-control { cursor: pointer; }
.fm2 .form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* buttons (native forms use btn-info to submit, btn-success to add) */
.fm2 .btn { border-radius: 10px; font-weight: 600; font-size: 14px; padding: 10px 20px; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.fm2 .btn-info, .fm2 #doTerritoryCheck, .fm2 #doResaleCheck { background: var(--accent); border-color: var(--accent); color: #fff; }
.fm2 .btn-info:hover, .fm2 #doTerritoryCheck:hover, .fm2 #doResaleCheck:hover { background: var(--accent-d); border-color: var(--accent-d); color: #fff; }
.fm2 #doTerritoryCheck, .fm2 #doResaleCheck { padding: 12px 34px; font-size: 15px; font-weight: 700; }
.fm2 .btn-success { background: #fff; border-color: var(--accent); color: var(--accent); }
.fm2 .btn-success:hover { background: var(--accent-soft); color: var(--accent-d); }

/* alerts */
.fm2 .alert { border-radius: 12px; border: 1px solid var(--line); padding: 13px 16px; }
.fm2 .alert-info { background: var(--accent-soft); border-color: #c7dbff; color: var(--accent-d); }
.fm2 .alert-dark { background: #1f2a44; border-color: #1f2a44; }
.fm2 .alert-dark .form-check-label { color: #fff; }

/* recommended franchisor chips */
.fm2 .recommended-franchisor { display: inline-block; background: var(--accent-soft) !important; color: var(--accent-d) !important; border-radius: 20px; padding: 5px 12px; font-size: 13px !important; font-weight: 600; text-decoration: none; }
.fm2 .recommended-franchisor:hover { background: #d7e6ff !important; }

/* embedded (JotForm) pages */
.fm2.fm2-embed { background: #fff; }
.fm2 .fm-embedwrap { max-width: 1000px; margin: 0 auto; padding: 0; }
.fm2 .fm-embedwrap iframe { display: block; width: 100% !important; min-width: 100% !important; border: 0; }

/* ---------- responsive ---------- */
@media (max-width: 680px) {
    .fm2 .container { padding: 18px 14px 56px; }
    .fm2 h1 { font-size: 20px; }
    /* Bootstrap rows collapse to a single column on phones */
    .fm2 .card-body .row { display: block; }
    .fm2 .card-body .row > [class*="col"] { width: 100%; max-width: 100%; flex: 0 0 100%; margin-bottom: 12px; }
    .fm2 .card-body .row > [class*="col"]:last-child { margin-bottom: 0; }
    /* franchisor pickers (kept as .col-3 for the JS) reflow to 1 per row */
    .fm2 #territory-check-franchisors .col-3,
    .fm2 #resale-check-franchisors .col-3 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 681px) and (max-width: 900px) {
    .fm2 #territory-check-franchisors .col-3,
    .fm2 #resale-check-franchisors .col-3 { flex: 0 0 50%; max-width: 50%; }
}