/* Reservations & CRM page — booking widget + CRM profile card */
.booking { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); overflow:hidden; max-width:400px; }
.booking__h { padding:16px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.booking__h b { font-family:var(--font-display); font-weight:600; font-size:1.1rem; }
.booking__h span { font-size:.8rem; color:var(--muted); }
.booking__b { padding:18px; }
.bk-label { font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.party { display:flex; gap:8px; margin-bottom:18px; }
.party button { flex:1; padding:10px 0; border-radius:10px; border:1px solid var(--line); font-weight:600; font-size:.9rem; color:var(--text-2); transition:.2s; }
.party button.on { background:var(--accent-tint); color:var(--accent); border-color:transparent; }
.slots { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.slot { padding:10px 0; text-align:center; border-radius:9px; border:1px solid var(--line); font-size:.85rem; font-weight:600; font-family:var(--font-mono); transition:.2s; }
.slot.full { color:var(--muted); opacity:.45; text-decoration:line-through; }
.slot.on { background:var(--accent); color:#fff; border-color:transparent; }
html[data-theme="dark"] .slot.on { color:#1a0f0a; }
.slot:not(.full):not(.on):hover { border-color:var(--accent); color:var(--accent); }
.booking__foot { padding:0 18px 18px; }
.ph-basket { margin:2px 12px 14px; background:var(--text); color:var(--bg); border-radius:12px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; font-size:.86rem; font-weight:600; }

/* CRM */
.crm { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); overflow:hidden; width:100%; max-width:100%; }
.crm__hd { padding:18px 20px; display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--line); }
.crm__hd > div:nth-child(2) {
  flex: 1;         /* Take up remaining space */
  min-width: 0;    /* CRITICAL: Allows text to wrap instead of pushing the badge out */
}
.crm__av { width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,var(--accent-soft),var(--accent)); flex:none; }
.crm__hd h4 { font-family:var(--font-sans); font-size:1.1rem; font-weight:700; }
.crm__hd .em { color:var(--muted); font-size:.84rem; word-break:break-word; line-height:1.4; margin-top:2px; }
.crm__opt { margin-left:auto; }
.crm__opt.optin {
  flex-shrink: 0; 
}
.crm__stats { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); }
.crm__stats div { padding:16px 8px; text-align:center; border-right:1px solid var(--line); }
.crm__stats div:last-child { border-right:none; }
.crm__stats .n { font-family:var(--font-display); font-size:1.7rem; line-height:1; }
.crm__stats .l { font-size:.72rem; color:var(--muted); margin-top:4px; }
.crm__row .r { 
  margin-left: auto; 
  color: var(--text-2); 
  font-family: var(--font-mono); 
  font-size: .78rem; 
  text-align: right; /* Ensure text stays right-aligned if it wraps */
}
.crm__body { padding:18px 20px; }
.crm__row { display:flex; align-items:start; gap:10px; padding:9px 0; font-size:.86rem; border-bottom:1px solid var(--line); }
.crm__row:last-child { border-bottom:none; }
.crm__row .ic { color:var(--muted); } .crm__row .r { margin-left:auto; color:var(--text-2); font-family:var(--font-mono); font-size:.78rem; }
.optin { display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:600; color:#0f7a3d; background:rgba(15,122,61,.1); padding:4px 9px; border-radius:99px; }