/* ==========================================================
   Chamber admin - Street of Lights registrations
   Uses the site design tokens (Action Blue, parchment, 17px
   body, one product shadow) but stands alone: no site nav,
   no marketing CSS, so it loads fast and cannot be broken by
   a change to main.css.
   ========================================================== */

:root {
  --primary:#0066cc; --primary-focus:#0071e3;
  --canvas:#ffffff; --parchment:#f5f5f7; --pearl:#fafafc;
  --ink:#1d1d1f; --ink-80:#333333; --ink-48:#7a7a7a;
  --hairline:#e0e0e0; --divider-soft:#f0f0f0;
  --ok:#1d7a3e; --warn:#8a6100; --off:#8a2020;
  --r-sm:8px; --r-md:11px; --r-lg:18px; --r-pill:9999px;
  --fd:'SF Pro Display',system-ui,-apple-system,'Inter',sans-serif;
  --fb:'SF Pro Text',system-ui,-apple-system,'Inter',sans-serif;
  --product-shadow:rgba(0,0,0,0.22) 3px 5px 30px 0;
}

*{box-sizing:border-box}
body{margin:0;background:var(--parchment);color:var(--ink);
  font-family:var(--fb);font-size:17px;line-height:1.47;
  letter-spacing:-0.374px;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
h1,h2{font-family:var(--fd);font-weight:600;letter-spacing:-0.3px;margin:0}

/* ===== Login ===== */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:100%;max-width:400px;background:var(--canvas);
  border-radius:var(--r-lg);padding:36px;box-shadow:var(--product-shadow)}
.login-card h1{font-size:26px;margin-bottom:6px}
.login-card .sub{color:var(--ink-48);font-size:14px;margin:0 0 26px}

label{display:block;font-size:14px;color:var(--ink-80);margin:0 0 6px}
input[type=text],input[type=email],input[type=password],input[type=search],select{
  width:100%;padding:11px 14px;font-family:var(--fb);font-size:16px;
  color:var(--ink);background:var(--parchment);border:1px solid transparent;
  border-radius:var(--r-md);outline:none;margin-bottom:18px}
input:focus,select:focus{border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(0,102,204,.12);background:var(--canvas)}

.btn{display:inline-block;border:0;cursor:pointer;font-family:var(--fb);
  font-size:16px;padding:11px 22px;border-radius:var(--r-pill);
  background:var(--primary);color:#fff;transition:transform .12s}
.btn:active{transform:scale(.95)}
.btn-full{width:100%}
.btn-ghost{background:transparent;color:var(--primary);
  border:1px solid var(--primary)}
.err{background:#fdeaea;color:var(--off);font-size:14px;padding:10px 14px;
  border-radius:var(--r-sm);margin:0 0 18px}

/* ===== Shell ===== */
.top{background:var(--ink);color:#fff;padding:14px 28px;display:flex;
  align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.top h1{font-size:19px;color:#fff}
.top .who{font-size:13px;color:#cccccc}
.top a{color:#2997ff;font-size:14px;margin-left:16px}
.page{max-width:1440px;margin:0 auto;padding:28px}

/* ===== Summary tiles ===== */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.tile{background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:18px 20px}
.tile .n{font-family:var(--fd);font-size:30px;font-weight:600;
  letter-spacing:-0.5px;display:block;line-height:1.1}
.tile .l{font-size:13px;color:var(--ink-48)}
.tile.money .n{color:var(--ok)}

/* ===== Toolbar ===== */
.bar{background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:16px 20px;margin-bottom:20px;
  display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.bar .field{flex:1;min-width:170px}
.bar label{margin-bottom:4px}
.bar input,.bar select{margin-bottom:0}
.bar .spacer{flex:1}

/* ===== Table ===== */
.tablewrap{background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-lg);overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;font-weight:600;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-48);padding:14px 16px;
  border-bottom:1px solid var(--hairline);white-space:nowrap}
td{padding:14px 16px;border-bottom:1px solid var(--divider-soft);
  vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:var(--pearl)}
.who-cell strong{display:block;font-weight:600}
.who-cell span{color:var(--ink-48);font-size:13px}
.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.empty{padding:56px 24px;text-align:center;color:var(--ink-48)}

/* ===== Status pills ===== */
.pill{display:inline-block;font-size:12px;font-weight:600;padding:4px 11px;
  border-radius:var(--r-pill);white-space:nowrap}
.pill.paid{background:#e6f4ea;color:var(--ok)}
.pill.pending{background:#fdf3e0;color:var(--warn)}
.pill.waived{background:#e8f0fb;color:var(--primary)}
.pill.cancelled{background:#f3f3f3;color:var(--ink-48)}
/* Membership enquiry statuses. 'new' is the loudest because it is the only
   one that means somebody is still waiting on a reply. */
.pill.new{background:#fdf3e0;color:var(--warn)}
.pill.contacted{background:#e8f0fb;color:var(--primary)}
.pill.joined{background:#e6f4ea;color:var(--ok)}
.pill.closed{background:#f3f3f3;color:var(--ink-48)}

/* ===== Expandable detail row ===== */
.detail{background:var(--pearl)}
.detail td{padding:0}
.detail-in{padding:18px 20px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 28px}
.detail-in div{font-size:14px}
.detail-in .k{color:var(--ink-48);font-size:12px;display:block;
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.rowtoggle{cursor:pointer}
.rowtoggle:hover{background:#f0f6ff}

/* Status + notes editor inside an expanded membership row. Sits under the
   detail grid, separated by a rule so it reads as an action area rather than
   more information. */
.detail-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;
  padding:16px 20px 20px;border-top:1px solid var(--line)}
.detail-form .field{margin:0}

.note{font-size:13px;color:var(--ink-48);margin:16px 2px 0}

@media (max-width:900px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .page{padding:16px}
  .hide-sm{display:none}
}
@media print{
  .top,.bar,.tiles{display:none}
  body{background:#fff}
  .tablewrap{border:0}
}

/* ==========================================================================
   Business editor — shared by /admin/businesses and /merchant
   ========================================================================== */
.ok{color:#1a7f4b}
.btn-sm{padding:5px 11px;font-size:.8rem}
.btn-danger{background:#a5321f;color:#fff;border:0;border-radius:9999px;
  padding:10px 20px;font-weight:600;cursor:pointer}
.btn-danger:active{transform:scale(.95)}

.bf{display:block;margin-top:18px}
.bf-sec{background:#fff;border:1px solid #e0e0e0;border-radius:12px;
  padding:22px 24px;margin-bottom:18px}
.bf-sec h3{font-size:.85rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#1d1d1f;padding-bottom:11px;margin-bottom:16px;
  border-bottom:2px solid #0066cc}
.bf-danger{border-color:#f0c9c2;background:#fffaf9}

.bf label{display:block;margin-bottom:15px;font-size:.82rem;font-weight:600;
  color:#3a3a3c}
.bf input[type=text],.bf input[type=email],.bf input[type=password],
.bf select,.bf textarea{display:block;width:100%;margin-top:5px;
  font:400 .95rem/1.5 system-ui,-apple-system,sans-serif;color:#1d1d1f;
  background:#fff;border:1px solid #d2d2d7;border-radius:8px;padding:9px 12px}
.bf textarea{resize:vertical}
.bf input:focus,.bf select:focus,.bf textarea:focus{outline:2px solid #0071e3;
  outline-offset:-1px;border-color:#0071e3}
.bf input[type=file]{display:block;margin-top:6px;font-size:.85rem}
.bf-hint{display:block;margin-top:5px;font-size:.78rem;font-weight:400;
  color:#6e6e73;line-height:1.45}
.bf-sublabel{font-size:.82rem;font-weight:600;color:#3a3a3c;margin:16px 0 8px}

/* paired day/time and coupon rows */
.bf-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.bf-coupon{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:10px;
  margin-bottom:10px}

.bf-photo{margin-bottom:16px}
.bf-photo-label{display:block;font-size:.82rem;font-weight:600;color:#3a3a3c;
  margin-bottom:7px}
.bf-thumb,.bf-photo picture,.bf-gal-item picture{display:block;max-width:190px;
  height:auto;border-radius:8px;border:1px solid #e0e0e0}
.bf-photo img,.bf-gal-item img{width:100%;height:auto;display:block;
  border-radius:8px}
.bf-gallery{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}
.bf-gal-item{width:150px;margin:0;font-weight:400;font-size:.78rem}
.bf-gal-item picture{max-width:150px}
.bf-gal-item span{display:block;margin-top:5px;color:#6e6e73}
.bf-check{font-weight:400;font-size:.9rem}
.bf-check input{margin-right:7px}

.bf-inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;align-items:end}
.bf-inline button{align-self:end;margin-bottom:15px}

.bf-users{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:.85rem}
.bf-users td{padding:9px 8px;border-bottom:1px solid #f0f0f0;vertical-align:middle}
.bf-users form{margin:0}

.bf-actions{display:flex;gap:12px;align-items:center;margin:22px 0 40px}

@media (max-width:700px){
  .bf-pair,.bf-coupon{grid-template-columns:1fr}
  .bf-sec{padding:18px 16px}
}

/* ===== Event tabs + season picker (admin.php) ===== */
.evbar{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-bottom:20px;padding-bottom:2px;
  border-bottom:1px solid #e0e0e0}
.evtabs{display:flex;gap:6px}
.evtabs a{display:flex;align-items:center;gap:8px;padding:10px 16px;
  font-size:.88rem;font-weight:600;color:#6e6e73;text-decoration:none;
  border-bottom:3px solid transparent;margin-bottom:-1px}
.evtabs a:hover{color:#1d1d1f}
.evtabs a.is-on{color:#1d1d1f;border-bottom-color:#0066cc}
.evcount{display:inline-block;min-width:22px;padding:1px 7px;text-align:center;
  font-size:.75rem;font-weight:700;color:#6e6e73;background:#f0f0f0;
  border-radius:9999px}
.evtabs a.is-on .evcount{color:#fff;background:#0066cc}
.evyear{display:flex;align-items:center;gap:9px;margin:0 0 8px}
.evyear label{font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#6e6e73}
.evyear select{font-size:.9rem;padding:7px 11px;border:1px solid #d2d2d7;
  border-radius:8px;background:#fff;color:#1d1d1f}

@media (max-width:640px){
  .evbar{gap:10px}
  .evtabs{width:100%;overflow-x:auto}
  .evtabs a{white-space:nowrap;padding:10px 12px}
}

/* ==========================================================================
   DASHBOARD SHELL (admin-head.php)
   Dark sidebar + light content, using the Chamber palette: Action Blue #0066cc,
   ink #1d1d1f, parchment #f5f5f7. Same weight ladder as the public site.
   ========================================================================== */
body.adm{margin:0;background:#f5f5f7;color:#1d1d1f;
  font:400 15px/1.55 'SF Pro Text',system-ui,-apple-system,'Inter',sans-serif}

/* ===== Sidebar ===== */
.side{position:fixed;top:0;left:0;bottom:0;width:236px;background:#1d1d1f;
  display:flex;flex-direction:column;padding:20px 0;z-index:20}
.side-brand{display:flex;align-items:center;gap:11px;padding:0 20px 22px;
  text-decoration:none}
.side-mark{width:30px;height:30px;border-radius:8px;background:#0066cc;
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.95rem;flex:none}
.side-name{font-family:'SF Pro Display',system-ui,sans-serif;font-size:.98rem;
  font-weight:600;letter-spacing:-.01em;color:#fff}

.side-nav{display:flex;flex-direction:column;gap:2px;padding:0 12px;flex:1}
.side-nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;
  border-radius:9px;font-size:.9rem;font-weight:600;color:#a1a1a6;
  text-decoration:none;transition:background-color .15s ease,color .15s ease}
.side-nav a svg{width:19px;height:19px;flex:none}
.side-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.side-nav a.is-on{background:#0066cc;color:#fff}
/* Unread count on a nav item. Pushed right by the auto margin so it sits on
   the far edge regardless of how long the label is. */
.side-badge{margin-left:auto;min-width:20px;padding:1px 6px;border-radius:9999px;
  background:#ff9500;color:#1d1d1f;font-size:11px;font-weight:700;
  text-align:center;line-height:18px}
.side-nav a.is-on .side-badge{background:#fff;color:#0066cc}

.side-foot{padding:16px 20px 0;border-top:1px solid rgba(255,255,255,.1);
  margin:16px 12px 0}
.side-link{display:block;font-size:.8rem;color:#2997ff;text-decoration:none;
  margin-bottom:16px}
.side-link:hover{text-decoration:underline}
.side-user{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.side-av{width:32px;height:32px;border-radius:50%;background:#3a3a3c;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;
  font-size:.85rem;flex:none}
.side-user-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.side-user-txt strong{font-size:.85rem;font-weight:600;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-user-txt span{font-size:.74rem;color:#7a7a7a}
.side-out{font-size:.8rem;color:#a1a1a6;text-decoration:none}
.side-out:hover{color:#fff;text-decoration:underline}

/* ===== Main ===== */
.main{margin-left:236px;min-height:100vh}
.main-head{position:sticky;top:0;z-index:10;background:rgba(245,245,247,.88);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid #e0e0e0;padding:20px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap}
.main-head h1{font-family:'SF Pro Display',system-ui,sans-serif;
  font-size:1.5rem;font-weight:700;letter-spacing:-.025em;margin:0;color:#1d1d1f}
.main-sub{margin:4px 0 0;font-size:.86rem;color:#6e6e73}
.main-sub a{color:#0066cc;text-decoration:none}
.main-sub a:hover{text-decoration:underline}
.main-actions{display:flex;gap:10px;align-items:center}
.main-body{padding:26px 32px 60px;max-width:1400px}

/* ===== Stat cards ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:16px;margin-bottom:22px}
.card{background:#fff;border:1px solid #e0e0e0;border-radius:14px;padding:19px 20px}
/* A stat card that is also a link. Kept visually identical to a plain card so
   the row stays even, with only the hover lift signalling it is clickable. */
.card-link{display:block;text-decoration:none;color:inherit;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.card-link:hover{border-color:#0066cc;transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.07)}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;margin-bottom:12px}
.card-label{font-size:.78rem;font-weight:600;letter-spacing:.055em;
  text-transform:uppercase;color:#6e6e73}
.card-ic{width:36px;height:36px;border-radius:9px;flex:none;
  display:flex;align-items:center;justify-content:center}
.card-ic svg{width:19px;height:19px}
.ic-blue{background:rgba(0,102,204,.1);color:#0066cc}
.ic-green{background:rgba(26,127,75,.1);color:#1a7f4b}
.ic-amber{background:rgba(176,116,15,.12);color:#b0740f}
.card-n{font-family:'SF Pro Display',system-ui,sans-serif;font-size:2rem;
  font-weight:700;letter-spacing:-.03em;line-height:1;margin:0 0 8px;color:#1d1d1f}
.card-foot{margin:0;font-size:.8rem;color:#6e6e73;line-height:1.4}

/* ===== Split panels ===== */
.split{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start}
.panel{background:#fff;border:1px solid #e0e0e0;border-radius:14px;
  padding:20px 22px 22px}
.panel-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding-bottom:13px;margin-bottom:16px;border-bottom:1px solid #f0f0f0}
.panel-head h2{font-family:'SF Pro Display',system-ui,sans-serif;font-size:1rem;
  font-weight:600;letter-spacing:-.015em;margin:0}
.panel-more{font-size:.83rem;font-weight:600;color:#0066cc;text-decoration:none}
.panel-more:hover{text-decoration:underline}

/* ===== Activity feed ===== */
.feed{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.feed li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #f5f5f7}
.feed li:last-child{border-bottom:0;padding-bottom:0}
.feed-dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:6px}
.feed-dot.ok{background:#1a7f4b}
.feed-dot.warn{background:#b0740f}
.feed-dot.bad{background:#a5321f}
.feed-dot.info{background:#0066cc}
.feed-txt{font-size:.9rem;line-height:1.45}
.feed-meta{display:block;font-size:.78rem;color:#6e6e73;margin-top:3px}
.empty{padding:26px 4px;color:#6e6e73;font-size:.9rem}
.empty p{margin:0 0 5px}

/* ===== Setup score ===== */
.score{margin-bottom:16px}
.score-row{display:flex;justify-content:space-between;align-items:baseline;
  font-size:.86rem;color:#6e6e73;margin-bottom:8px}
.score-row strong{font-size:1rem;color:#1d1d1f}
.score-bar{height:7px;border-radius:9999px;background:#f0f0f0;overflow:hidden}
.score-bar span{display:block;height:100%;background:#0066cc;border-radius:9999px}
.checks{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.checks li{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;
  line-height:1.4}
.check-ic{width:18px;height:18px;border-radius:50%;flex:none;font-size:.78rem;
  display:flex;align-items:center;justify-content:center;font-weight:700;
  margin-top:1px}
.checks li.yes .check-ic{background:rgba(26,127,75,.12);color:#1a7f4b}
.checks li.no  .check-ic{background:rgba(165,50,31,.1);color:#a5321f}
.checks li.no{color:#a5321f}
.quick{display:flex;gap:10px;flex-wrap:wrap}

/* ===== Responsive ===== */
@media (max-width:980px){ .split{grid-template-columns:1fr} }
@media (max-width:820px){
  /* Sidebar becomes a horizontal strip so the content keeps full width. */
  .side{position:static;width:auto;flex-direction:row;align-items:center;
    flex-wrap:wrap;padding:12px 16px;gap:12px}
  .side-brand{padding:0;flex:1}
  .side-nav{flex-direction:row;order:3;flex-basis:100%;padding:0;
    overflow-x:auto;gap:4px}
  .side-nav a{white-space:nowrap;padding:9px 12px}
  .side-foot{border-top:0;margin:0;padding:0;display:flex;align-items:center;
    gap:14px}
  .side-link,.side-user{display:none}
  .side-out{font-size:.82rem}
  .main{margin-left:0}
  .main-head{position:static;padding:18px 18px}
  .main-body{padding:18px 18px 50px}
}

/* ===== Staff screen (admin-staff.php) ===== */

.staff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.staff-add .field, .staff-row .field { display: flex; flex-direction: column; gap: 6px; }
.staff-tbl td { vertical-align: middle; }

.staff-panel-in {
  display: grid;
  gap: 22px;
  padding: 20px 4px 8px;
  border-top: 1px solid var(--line, #e6e8ec);
}
.staff-panel-in h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.staff-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.staff-row .field { flex: 1 1 220px; }
.staff-row .muted { flex-basis: 100%; margin: 0; }
.staff-danger { border-top: 1px solid var(--line, #e6e8ec); padding-top: 18px; }

@media (max-width: 760px) {
  .staff-grid { grid-template-columns: 1fr; }
  .staff-row { flex-direction: column; align-items: stretch; }
}

/* ===== Confirm-your-password modal ===== */

.modal {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(17, 24, 39, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal[hidden] { display: none; }
.modal-card {
  background: #fff; border-radius: 14px; padding: 26px;
  width: 100%; max-width: 420px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.modal-card h3 { margin: 0 0 6px; }
.modal-card .muted { margin: 0 0 18px; }
.modal-card label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.modal-card input[type="password"] { width: 100%; }
.modal-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* Delete sits next to Suspend, but .btn-danger (line ~145) defines its own
   padding after .btn-sm, so it was rendering bigger. Match them. */
.btn-sm.btn-danger { padding: 5px 11px; font-size: .8rem; }

/* Keep every button on the Access row the same height regardless of label. */
.staff-danger .staff-row { align-items: center; }
.staff-danger .staff-row form { display: flex; }
.staff-danger .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; line-height: 1;
}

/* Slightly darker fields so the boxes read as inputs, not blank space. */
.staff-add input[type=text],
.staff-add input[type=password],
.staff-row input[type=text],
.staff-row input[type=password],
.modal-card input[type=password] {
  background: #eceef2;
  border: 1px solid #ccd1da;
}
.staff-add input:focus,
.staff-row input:focus,
.modal-card input:focus {
  background: #fff;
  border-color: var(--primary);
  outline: none;
}

/* ===== Member deals screen ===== */

.deal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.deal-form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.deal-form small { color: #6b7280; font-size: 12px; }
.deal-form input[type=color] { width: 70px; height: 38px; padding: 2px; }
.deal-form-acts { display: flex; gap: 10px; align-items: center; }

.deal-thumb { display: block; margin-top: 10px; max-width: 150px; border-radius: 8px; border: 1px solid #e0e3e8; }
.deal-thumb-sm { width: 52px; height: 68px; object-fit: cover; border-radius: 6px; border: 1px solid #e0e3e8; }
.deal-noimg { display: block; width: 52px; height: 68px; border-radius: 6px; }
.deals-tbl td { vertical-align: middle; }
.deal-cell-img { width: 64px; }
.deal-order, .deal-acts { white-space: nowrap; }
.deal-order form, .deal-acts form { display: inline-block; margin-left: 4px; }
.deal-acts .btn { margin-left: 4px; }

@media (max-width: 760px) {
  .deal-grid { grid-template-columns: 1fr; }
}

/* ===== Add-a-business popup ===== */

.biz-modal { align-items: flex-start; padding: 28px 20px; overflow-y: auto; }
.biz-modal-card {
  max-width: 760px; width: 100%; padding: 0; overflow: hidden;
  display: flex; flex-direction: column; max-height: calc(100vh - 56px);
}
.biz-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid #e6e8ec; flex: 0 0 auto;
}
.biz-modal-head h3 { margin: 0; }
.biz-modal-x {
  background: none; border: 0; cursor: pointer; line-height: 1;
  font-size: 26px; color: #6b7280; padding: 0 4px;
}
.biz-modal-x:hover { color: #1d1d1f; }
.biz-modal-body { overflow-y: auto; padding: 4px 24px 24px; flex: 1 1 auto; }
.biz-modal-body .bf { margin-top: 8px; }
.biz-modal-body .bf-sec { border: 0; padding: 14px 0; margin-bottom: 0; border-bottom: 1px solid #eef0f3; }
.biz-modal-body .bf-sec:last-of-type { border-bottom: 0; }

/* ===== Merchant logins row ===== */
/* Every field is the same shape now, so the boxes line up. The hint drops
   onto its own full-width line instead of stretching one label. */
.bf-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}
.bf-inline > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 200px;
  margin: 0;
  font-weight: 600;
  font-size: 14px;
}
.bf-inline > label input { width: 100%; margin: 0; }
.bf-inline > .btn { flex: 0 0 auto; height: 42px; margin-bottom: 0; }
.bf-inline-note { flex: 1 1 100%; margin: 0; }

@media (max-width: 760px) {
  .bf-inline > label, .bf-inline > .btn { flex: 1 1 100%; }
}

/* View profile sits next to Save changes, so it needs the button shape as
   well as the ghost colours. */
.bf-actions { display: flex; align-items: center; gap: 12px; }
.bf-actions .btn-ghost { text-decoration: none; display: inline-flex; align-items: center; }

/* Exact terms a registrant agreed to */
.terms-text { white-space: pre-wrap; font-family: inherit; font-size: 14px; line-height: 1.6;
  background: #f7f8fa; border: 1px solid #e3e6eb; border-radius: 10px; padding: 18px 20px; margin: 12px 0 0; }

/* Rules & Waivers screen */
.rules-form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.rules-form .field label { font-weight: 600; font-size: 14px; }
.rules-form input[type=text], .rules-form textarea {
  width: 100%; font: inherit; font-size: 14px; line-height: 1.5;
  padding: 9px 11px; border: 1px solid #ccd1da; border-radius: 8px; background: #eceef2; }
.rules-form input:focus, .rules-form textarea:focus { background: #fff; border-color: var(--primary); outline: none; }
.rules-form small { color: #6b7280; font-size: 12px; }
.rules-form .field.is-changed label::after { content: "  • changed"; color: #9a6b00; font-weight: 500; }
.rules-form .card-warn { border-left: 4px solid #d9a400; }
.rules-acts { display: flex; gap: 12px; align-items: center; margin: 8px 0 18px; }
.rules-reset { margin-bottom: 40px; }
.tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.tabs .tab { padding: 8px 16px; border-radius: 999px; text-decoration: none; color: #4b5563; background: #eceef2; font-weight: 600; font-size: 14px; }
.tabs .tab.on { background: var(--primary); color: #fff; }