/* business.css -- "Your business" page (business.html) and the "what ads can say"
   drawer / chip on the ad screens (business-facts.js, canvas-assist.js).
   Private Bank tokens with fallbacks, so it works on pages that do not define them. */

/* ---- page ---- */
.bf-meter { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 14px; }
.bf-meter b { font-family:'Space Grotesk',sans-serif; font-size:20px; }
.bf-bar { flex:1 1 160px; min-width:120px; height:10px; border-radius:6px; background:var(--card-2,#f1ece1); border:1px solid var(--line,rgba(20,33,61,.18)); overflow:hidden; }
.bf-bar > i { display:block; height:100%; background:var(--lime,#1f6b4a); }
.bf-missing { margin:0 0 16px; color:var(--muted,#4b5363); font-size:15px; }
.bf-section > h2 { margin-top:4px; }
.bf-section .bf-lead { color:var(--muted,#4b5363); margin:0 0 6px; }
.bf-hours { display:grid; gap:8px; margin:6px 0 4px; }
.bf-day { display:grid; grid-template-columns: 96px 1fr; gap:6px 12px; align-items:center; }
.bf-day label { margin:0; font-weight:600; }
.bf-day .bf-times { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.bf-day .bf-times input { width:auto; min-width:128px; flex:1 1 128px; }
.bf-day .bf-closed { color:var(--muted,#4b5363); }
.bf-prompt { border-color:var(--lime,#1f6b4a); background:rgba(31,107,74,.07); }
.bf-prompt h2 { font-size:20px; }
.bf-savebar { position:sticky; bottom:0; background:var(--bg,#f7f4ec); padding:12px 0 14px; border-top:1px solid var(--line,rgba(20,33,61,.18)); margin-top:8px; z-index:5; }
/* Phones: sit above the fixed bottom bar (65px) instead of under it. */
@media (max-width:900px) { .bf-savebar { bottom:calc(65px + env(safe-area-inset-bottom)); } }

/* ---- facts form (page section 2 + drawer) ---- */
.bf-set { border:0; padding:0; margin:0 0 6px; }
.bf-set legend { font-weight:600; padding:0; margin:10px 0 4px; }
.bf-checks { display:grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap:2px 14px; }
.bf-check { display:flex; gap:10px; align-items:center; font-weight:400; margin:4px 0; min-height:44px; cursor:pointer; }
.bf-check input { width:22px; height:22px; flex-shrink:0; }
.bf-field label { display:block; font-weight:600; margin:14px 0 6px; }
.bf-sub { margin-left:2px; }
.bf-hint { color:var(--muted,#4b5363); font-size:15px; margin:2px 0 0; }
.bf-pair { display:grid; grid-template-columns: 1fr 120px; gap:10px; }
.bf-confirm { margin:18px 0 0; padding:12px 14px; border:1px solid var(--line,rgba(20,33,61,.18)); border-radius:12px; background:var(--card-2,#f1ece1); }
.bf-confirm .bf-check { font-weight:700; }
.bf-err { color:#8c2f39; font-weight:600; margin-top:8px; }
.bf-status { color:var(--lime,#1f6b4a); font-weight:600; margin:8px 0 0; min-height:1.2em; }
.bf-btn { display:inline-block; font:inherit; font-weight:700; font-size:16px; padding:11px 20px; border-radius:11px; border:0; cursor:pointer; text-decoration:none; min-height:44px; }
.bf-primary { background:var(--coral,#8c2f39); color:#fffdf8; }
.bf-primary:hover { background:var(--coral-hover,#5e1f27); }
.bf-btn:disabled { opacity:.55; cursor:wait; }
.bf-link { color:var(--coral,#8c2f39); font-weight:600; }
.bf-drawer-root .bf-field input[type=text], .bf-drawer-root .bf-field input[type=number], .bf-drawer-root .bf-field select, .bf-drawer-root .bf-field textarea {
  width:100%; font:inherit; font-size:16px; color:var(--text,#14213d); background:var(--card-2,#f1ece1); border:1px solid var(--line,rgba(20,33,61,.18));
  border-radius:10px; padding:10px 12px; min-height:44px; box-sizing:border-box; }

/* ---- drawer ---- */
.bf-drawer-root { position:fixed; inset:0; z-index:2147483000; display:flex; justify-content:flex-end; }
.bf-scrim { position:absolute; inset:0; background:rgba(20,33,61,.45); }
.bf-drawer { position:relative; width:min(440px, 100%); height:100%; background:var(--card,#fffdf8); color:var(--text,#14213d); display:flex; flex-direction:column;
  box-shadow:-8px 0 30px rgba(20,33,61,.25); font-family:'Inter',system-ui,sans-serif; font-size:16px; line-height:1.5; }
.bf-drawer:focus { outline:none; }
.bf-drawer-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line,rgba(20,33,61,.18)); }
.bf-drawer-head h2 { margin:0; font-family:'Space Grotesk',sans-serif; font-size:20px; }
/* The app's global button rule (styles.css) is heavily qualified, so the drawer and chip buttons
   restate what they need with !important; otherwise they render as filled coral buttons on index.html. */
.bf-drawer .bf-x { font:inherit; font-size:28px; line-height:1; width:44px; height:44px; padding:0 !important; border:0; background:transparent !important; color:var(--text,#14213d) !important;
  cursor:pointer; border-radius:10px; box-shadow:none !important; filter:none !important; transform:none !important; }
.bf-drawer-body { flex:1 1 auto; overflow-y:auto; padding:4px 16px 12px; }
.bf-drawer .bf-status { padding:0 16px; }
.bf-drawer-foot { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 16px 16px; border-top:1px solid var(--line,rgba(20,33,61,.18)); }
body.bf-drawer-open { overflow:hidden; }
@media (max-width:640px) { .bf-drawer { width:100%; } }

/* ---- chip above Write it for me / the refused-claim button ---- */
.bf-chip { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:8px 0 4px; padding:8px 12px; border-radius:10px;
  border:1px solid var(--line,rgba(20,33,61,.18)); background:var(--card-2,#f1ece1); font-size:14px; line-height:1.4; }
.bf-chip.bf-chip-empty { border-color:rgba(168,122,38,.55); background:rgba(168,122,38,.10); }
.bf-chip .bf-chip-btn { font:inherit; font-size:14px; font-weight:700; color:var(--coral,#8c2f39) !important; background:transparent !important; border:0; padding:6px 4px !important; min-height:36px;
  cursor:pointer; text-decoration:underline; box-shadow:none !important; filter:none !important; transform:none !important; width:auto; }
.bf-refused { margin:6px 0 0; font:inherit; font-size:14px; font-weight:700; padding:8px 12px !important; min-height:40px; border-radius:10px; border:2px solid var(--coral,#8c2f39);
  background:transparent !important; color:var(--coral,#8c2f39) !important; cursor:pointer; box-shadow:none !important; filter:none !important; transform:none !important; text-align:left; }

/* ---- nudge card (My plan) ---- */
.bf-nudge { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.bf-nudge p { margin:0; font-weight:600; flex:1 1 240px; }