/* ============================================================
   OZYDE — Manage my booking (manage.html)
   ============================================================
   A private, one-column page for a client who followed the link in their confirmation email. Calendar, time
   slots and form fields reuse booking.css so it looks and behaves like the wizard they just used; only the
   cards and notices are new. */

.manage { padding-top: clamp(32px, 5vw, 56px); }
.manage__container { max-width: 780px; }

.manage__root {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 240px;
}

.manage__status { opacity: 0.6; padding: 40px 0; text-align: center; }

/* Status line that appears after every save, cancel or refusal. */
.manage__toast { display: none; padding: 14px 18px; border-radius: var(--r-md); font-size: 14.5px; line-height: 1.5; }
.manage__toast.is-visible { display: block; }
.manage__toast.is-ok { background: var(--gold-light); color: var(--ink); }
.manage__toast.is-error { background: var(--jewel); color: var(--cream); }

/* ---------- Cards ---------- */
.mb-card {
  background: var(--paper);
  border-radius: var(--r-md);
  padding: clamp(20px, 4vw, 30px);
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.mb-card h2 { font-size: clamp(24px, 3.4vw, 30px); }
.mb-card h3 { font-size: 20px; }
.mb-card--summary { background: var(--cream); box-shadow: none; align-items: stretch; }
.mb-card--problem { align-items: flex-start; gap: 16px; }

.mb-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mb-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 6px; }

.mb-chip {
  flex: none;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mb-chip--on { background: var(--ink); color: var(--cream); }
.mb-chip--off { box-shadow: inset 0 0 0 1px var(--jewel); color: var(--jewel); }

.mb-rows { display: flex; flex-direction: column; }
.mb-row {
  display: grid;
  grid-template-columns: minmax(96px, 30%) 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.mb-row:last-child { border-bottom: 0; padding-bottom: 0; }
.mb-row dt { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.55; padding-top: 2px; }
.mb-row dd { overflow-wrap: anywhere; }

.mb-lead { font-size: 15.5px; }
.mb-hint { font-size: 13.5px; line-height: 1.6; opacity: 0.68; max-width: 60ch; }
.mb-sub { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.65; margin-top: 8px; }
.mb-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.mb-notice { background: var(--cream); box-shadow: none; }
.mb-notice p { max-width: 56ch; line-height: 1.6; }

.mb-error { display: none; font-size: 13.5px; color: var(--jewel); }
.mb-error.is-visible { display: block; }

/* Danger-ish, but quiet: the site never shouts. */
.mb-danger { color: var(--jewel); box-shadow: inset 0 0 0 1.5px var(--jewel); }
.mb-danger:hover { background: var(--jewel); color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--jewel); }

.btn.is-loading { opacity: 0.6; pointer-events: none; }

/* ---------- Form ---------- */
.mb-form { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.mb-form .measure-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mb-form input:disabled { background: var(--cream); opacity: 0.7; cursor: not-allowed; }
.mb-form input, .mb-form textarea { font-size: 16px; border: 0; } /* the box-shadow from .form-field is the outline; no native border on top of it */ /* 16px so iOS doesn't zoom the page on focus */

/* ---------- Time picker (inside its card) ---------- */
.mb-picker { width: 100%; margin-top: 8px; }
.mb-picker .picker-grid { margin-bottom: 18px; }
/* The slot list is a 3-column grid; a one-line message must span it rather than squeeze into one cell. */
.mb-picker .slot-empty, .mb-picker .slot-notice { grid-column: 1 / -1; }
.slot-btn.is-current { box-shadow: inset 0 0 0 1.5px var(--gold); background: var(--cream); opacity: 1; text-decoration: none; cursor: default; }
.slot-btn__tag { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); margin-top: 2px; }

.manage__help { font-size: 14px; line-height: 1.6; opacity: 0.8; margin-top: 4px; }
.manage__help a { color: var(--gold-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.manage__help a:hover { color: var(--jewel); }

/* ---------- Phones ---------- */
@media (max-width: 720px) {
  .mb-form .measure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mb-row { grid-template-columns: 1fr; gap: 2px; padding: 9px 0; }
  .mb-actions .btn, .mb-card > .btn { width: 100%; justify-content: center; }
  .mb-card > .btn { align-self: stretch; }
}

/* ---------- Find my bookings / book again ---------- */
.mb-card--find { background: var(--cream); box-shadow: none; align-items: stretch; }
.mb-find { display: flex; flex-direction: column; gap: 14px; }
.mb-find input { font-size: 16px; border: 0; }
.mb-find__msg { font-size: 14px; line-height: 1.6; display: none; }
.mb-find__msg.is-ok, .mb-find__msg.is-error { display: block; }
.mb-find__msg.is-error { color: var(--jewel); }
.manage__newbooking { align-self: flex-start; }
.manage__again { font-size: 14px; line-height: 1.6; opacity: 0.85; }
.manage__again-link { color: var(--gold-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.manage__again-link:hover { color: var(--jewel); }
@media (max-width: 720px) {
  .mb-find .mb-actions .btn, .manage__newbooking { width: 100%; justify-content: center; align-self: stretch; }
}