/* ============================================================
   ANIDA LAB — v2 client portal (.portal-* / .acc-* / .bk-* /
   .ord-* / .cr-* / .wpass-*)
   One light "Apple" surface language for the whole my-account
   area (passes · bookings · credits · purchases · account · the
   public wallet pass). Follows hx.css + modals.css: white cards,
   hairline borders, soft shadow → hover lift, pill chips, 44px
   hairline inputs with a mauve focus ring. Riforma is inherited.
   Loaded globally in layout.php; every selector is namespaced to
   portal markup so nothing leaks onto the marketing pages.
   ============================================================ */

/* ---------- Shared surface tokens (local, for readability) ---------- */
:root {
  --pt-card-bd: rgba(43, 43, 43, .10);
  --pt-row-bd: rgba(43, 43, 43, .08);
  --pt-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  --pt-shadow-h: 0 12px 28px rgba(0, 0, 0, .08);
  --pt-focus: 0 0 0 3px rgba(190, 173, 196, .45);
}

/* ============================================================
   1 · PORTAL HEADER  (identity · title · tab bar)
   ============================================================ */
.portal-head { margin: 0 0 6px; }

/* Identity strip — who's signed in, mirrors the header avatar. */
.portal-id {
  display: flex; align-items: center; gap: 14px;
  padding: 0 0 22px;
}
.portal-id__avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #A9B8AE; color: #2b2b2b;
  font-size: 15px; letter-spacing: .02em; font-weight: 500;
}
.portal-id__meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.portal-id__name { font-size: 15px; font-weight: 500; color: var(--char); line-height: 1.2; }
.portal-id__mail { font-size: 13px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-id__credits {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--cream); border: 1px solid var(--pt-card-bd);
  font-size: 13px; color: var(--char); white-space: nowrap;
}
.portal-id__credits b { font-size: 15px; font-weight: 600; }

.portal-title {
  font-size: clamp(30px, 4.4vw, 46px); line-height: 1.03;
  font-weight: 500; letter-spacing: -.028em; color: var(--char); margin: 0;
}
.portal-lead { font-size: clamp(15px, 1.3vw, 17px); line-height: 1.5; color: var(--muted); margin: 12px 0 0; max-width: 56ch; }

/* Tab bar — calm underline tabs, horizontally scrollable on small screens. */
.portal-tabs {
  display: flex; gap: 26px; margin: 22px 0 34px;
  border-bottom: 1px solid var(--pt-card-bd);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.portal-tabs::-webkit-scrollbar { display: none; }
.portal-tabs__tab {
  position: relative; flex: none; padding: 13px 1px; margin-bottom: -1px;
  font-size: 15px; letter-spacing: -.01em; color: var(--soft);
  white-space: nowrap; text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.portal-tabs__tab:hover { color: var(--char); }
.portal-tabs__tab.is-active { color: var(--char); border-color: var(--char); }

/* ============================================================
   2 · ACTION ROW  (portal CTAs reuse the global .hx-cta pills)
   ============================================================ */
.portal-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 4px; }
.portal-actions .hx-cta { height: 46px; }

/* ============================================================
   3 · EMPTY STATE
   ============================================================ */
.portal-empty {
  margin: 26px 0 0; padding: 44px 28px; text-align: center;
  background: var(--paper); border: 1px solid var(--pt-card-bd);
  border-radius: 16px; box-shadow: var(--pt-shadow);
}
.portal-empty__icon {
  width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream); color: var(--soft);
}
.portal-empty__title { font-size: 18px; font-weight: 500; color: var(--char); margin: 0; }
.portal-empty__text { font-size: 14.5px; color: var(--muted); margin: 8px 0 0; }
.portal-empty__cta { margin-top: 22px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* Bare inline empty note (used inside the credits history panel). */
.portal-note { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; }

/* ============================================================
   4 · STATUS CHIPS  (dot + label, one scale everywhere)
   ============================================================ */
.portal-chip {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  background: #efeeea; color: #6c6a63;
}
.portal-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.portal-chip--active, .portal-chip--paid, .portal-chip--booked, .portal-chip--attended {
  background: #e7f1ea; color: #2f6b47;
}
.portal-chip--expired, .portal-chip--refunded { background: #f6e6e4; color: #a4443b; }
.portal-chip--used, .portal-chip--pending { background: #efeeea; color: #6c6a63; }
.portal-chip--waitlisted { background: #f6ecd9; color: #8a5a2b; }
.portal-chip--cancelled { background: #efeeea; color: #a2a099; }
.portal-chip--cancelled::before { opacity: .55; }

/* ============================================================
   5 · PASSES  (cards with a prominent remaining count)
   ============================================================ */
.portal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 4px; }
.portal-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--pt-card-bd);
  border-radius: 16px; padding: 22px 24px; box-shadow: var(--pt-shadow);
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.portal-card:hover { border-color: rgba(43, 43, 43, .22); box-shadow: var(--pt-shadow-h); transform: translateY(-2px); }
.portal-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.portal-card__title { font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--char); line-height: 1.25; }
.portal-card__count { display: flex; align-items: baseline; gap: 9px; margin: 16px 0 2px; }
.portal-card__num { font-size: 42px; line-height: 1; font-weight: 400; letter-spacing: -.03em; color: var(--char); }
.portal-card__numlbl { font-size: 13px; color: var(--muted); }
.portal-card__meta { margin-top: 12px; color: var(--muted); font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.portal-card__meta .portal-dot { color: #c9c6bb; }
.portal-card__foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pt-row-bd); }
.portal-card__sched {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--char); text-decoration: none;
  transition: gap .25s ease, color .2s ease;
}
.portal-card__sched svg { color: var(--soft); transition: color .2s ease; }
.portal-card__sched .ar { margin-left: 2px; color: var(--soft); transition: transform .25s ease, color .2s ease; }
.portal-card__sched:hover { color: var(--char); }
.portal-card__sched:hover svg, .portal-card__sched:hover .ar { color: var(--mauve); }
.portal-card__sched:hover .ar { transform: translateX(4px); }

/* ============================================================
   6 · BOOKINGS  (grouped upcoming / past hairline rows)
   ============================================================ */
.portal-group { margin-top: 30px; }
.portal-group__title { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); margin: 0 0 14px; }

.bk-list { background: var(--paper); border: 1px solid var(--pt-card-bd); border-radius: 16px; box-shadow: var(--pt-shadow); overflow: hidden; }
.bk-row { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--pt-row-bd); }
.bk-row:last-child { border-bottom: 0; }
.bk-row--past { opacity: .78; }
.bk-date {
  width: 52px; flex: none; text-align: center;
  border: 1px solid var(--pt-card-bd); border-radius: 12px; padding: 7px 0; background: var(--cream);
}
.bk-d { display: block; font-size: 19px; font-weight: 600; line-height: 1; color: var(--char); }
.bk-m { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--soft); margin-top: 3px; }
.bk-main { flex: 1; min-width: 0; }
.bk-title { display: block; font-size: 15.5px; font-weight: 500; letter-spacing: -.01em; color: var(--char); }
.bk-meta { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.bk-dot { color: #c9c6bb; }
.bk-time { display: block; font-size: 13px; color: var(--char); margin-top: 2px; }
.bk-note { display: inline-flex; align-items: flex-start; gap: 7px; margin-top: 8px; max-width: 46ch; font-size: 12.5px; line-height: 1.45; color: #8a5a2b; }
.bk-note::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 5px; border-radius: 50%; background: currentColor; }
.bk-cal { display: inline-flex; gap: 12px; align-items: center; margin-top: 8px; font-size: 12px; flex-wrap: wrap; }
.bk-cal__label { color: var(--soft); }
.bk-cal a { color: var(--char); text-decoration: none; border-bottom: 1px solid rgba(43, 43, 43, .28); padding-bottom: 1px; transition: border-color .2s ease, color .2s ease; }
.bk-cal a:hover { color: var(--mauve); border-color: var(--mauve); }
.bk-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.bk-actions { display: flex; gap: 8px; }
.bk-btn {
  background: var(--paper); border: 1px solid rgba(43, 43, 43, .22); border-radius: 999px;
  height: 38px; padding: 0 17px; font-size: 13px; cursor: pointer; color: var(--char);
  transition: border-color .15s ease, background .15s ease, color .15s ease, opacity .15s ease;
}
.bk-btn:hover:not(:disabled) { border-color: var(--char); background: rgba(43, 43, 43, .03); }
.bk-btn:disabled { opacity: .4; cursor: default; }
.bk-btn--cancel:hover:not(:disabled) { border-color: #a4362f; color: #a4362f; background: #fdf4f3; }

/* ============================================================
   7 · PURCHASES / ORDERS  (tidy cards + invoice rows)
   ============================================================ */
.ord-list { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.ord {
  background: var(--paper); border: 1px solid var(--pt-card-bd); border-radius: 16px;
  padding: 20px 22px; box-shadow: var(--pt-shadow);
  transition: border-color .2s ease, box-shadow .25s ease;
}
.ord:hover { border-color: rgba(43, 43, 43, .18); box-shadow: var(--pt-shadow-h); }
.ord__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.ord__id { min-width: 0; }
.ord__ref { display: block; font-size: 15.5px; font-weight: 500; color: var(--char); letter-spacing: -.01em; }
.ord__date { display: block; font-size: 12.5px; color: var(--soft); margin-top: 3px; }
.ord__right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.ord__amount { font-size: 17px; letter-spacing: -.01em; color: var(--char); }
.ord__pdf {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--char);
  text-decoration: none; border-bottom: 1px solid rgba(43, 43, 43, .28); padding-bottom: 1px; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
.ord__pdf:hover { color: var(--mauve); border-color: var(--mauve); }
.ord__items { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--pt-row-bd); display: flex; flex-direction: column; gap: 8px; }
.ord__items li { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; color: var(--muted); }
.ord__items li span:last-child { color: var(--char); white-space: nowrap; }

/* ============================================================
   8 · CREDITS  (summary stats · active list · history)
   ============================================================ */
.cr-label { margin: 2px 0 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.cr-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 14px; }
.cr-stat {
  background: var(--paper); border: 1px solid var(--pt-card-bd); border-radius: 16px;
  padding: 22px 24px; box-shadow: var(--pt-shadow);
}
.cr-stat__num { display: block; font-size: clamp(30px, 4vw, 38px); line-height: 1; font-weight: 400; letter-spacing: -.03em; color: var(--char); }
.cr-stat__lbl { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }

.cr-active { margin-top: 16px; background: var(--paper); border: 1px solid var(--pt-card-bd); border-radius: 16px; box-shadow: var(--pt-shadow); overflow: hidden; }
.cr-active__row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--pt-row-bd); }
.cr-active__row:last-child { border-bottom: 0; }
.cr-active__name { font-size: 14.5px; font-weight: 500; color: var(--char); }
.cr-active__meta { font-size: 12.5px; color: var(--soft); white-space: nowrap; }
.cr-dot { color: #c9c6bb; }

.cr-hist { margin-top: 40px; border-top: 1px solid var(--pt-card-bd); }
.cr-hist__toggle { width: 100%; display: flex; align-items: center; gap: 12px; padding: 22px 0; background: none; border: 0; cursor: pointer; color: var(--char); }
.cr-hist__h { font-size: clamp(18px, 2vw, 22px); font-weight: 500; letter-spacing: -.01em; }
.cr-hist__cta { margin-left: auto; font-size: 14px; color: var(--muted); transition: color .18s ease; }
.cr-hist__toggle:hover .cr-hist__cta { color: var(--char); }
.cr-hist__chev { flex: none; color: var(--soft); transition: transform .25s ease; }
.cr-hist__chev.rotate-180 { transform: rotate(180deg); }
.cr-hist__body { padding-bottom: 8px; }
.cr-h { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--soft); margin: 22px 0 10px; }
.cr-rows { background: var(--paper); border: 1px solid var(--pt-card-bd); border-radius: 14px; box-shadow: var(--pt-shadow); overflow: hidden; }
.cr-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--pt-row-bd); }
.cr-row:last-child { border-bottom: 0; }
.cr-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cr-row__main strong { font-size: 14.5px; font-weight: 500; color: var(--char); }
.cr-row__sub { font-size: 12px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-row__date { font-size: 12.5px; color: var(--soft); white-space: nowrap; }
.cr-row__amount { font-size: 14.5px; color: var(--char); white-space: nowrap; }

/* ============================================================
   9 · ACCOUNT SETTINGS FORM  (.acc-*)
   ============================================================ */
.acc-form { display: flex; flex-direction: column; gap: 16px; }
.acc-card {
  background: var(--paper); border: 1px solid var(--pt-card-bd); border-radius: 16px;
  padding: 26px 28px; box-shadow: var(--pt-shadow);
}
.acc-card__head { margin-bottom: 20px; }
.acc-eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); margin: 0 0 6px; }
.acc-h2 { font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--char); margin: 0; }
.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.acc-col-2 { grid-column: 1 / -1; }
.acc-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: #8a8780; margin: 0 0 8px; }
.acc-req { color: #b4453f; }
.acc-opt { text-transform: none; letter-spacing: 0; color: var(--soft); font-size: 11px; }
.acc-input {
  width: 100%; height: 44px; box-sizing: border-box;
  border: 1px solid rgba(43, 43, 43, .18); border-radius: 10px;
  padding: 0 14px; font-size: 15px; background: var(--paper); color: var(--char);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.acc-input:focus { outline: none; border-color: var(--char); box-shadow: var(--pt-focus); }
.acc-input.is-missing { border-color: #b4453f; background: #fdf3f1; }
select.acc-input { -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7a76' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.acc-hint-err { color: #b4453f; font-size: 12px; margin-top: 6px; }
.acc-check { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; cursor: pointer; color: var(--char); }
.acc-check input { width: 18px; height: 18px; accent-color: var(--char); }

/* Language — segmented pill switch (matches the calendar room switch). */
.acc-langrow { display: inline-flex; gap: 4px; padding: 4px; background: #ececec; border-radius: 999px; }
.acc-lang { min-width: 72px; height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; color: var(--char); font-size: 14.5px; transition: background .25s ease, color .25s ease; }
.acc-lang:hover:not(.is-active) { color: var(--char); background: rgba(43, 43, 43, .05); }
.acc-lang.is-active { background: var(--char); color: var(--cream); }

/* Notifications matrix. */
.acc-matrix { display: grid; grid-template-columns: 1fr 74px 74px; gap: 4px 8px; align-items: center; }
.acc-matrix__head { text-align: center; font-size: 11px; color: var(--soft); text-transform: uppercase; letter-spacing: .06em; padding-bottom: 8px; }
.acc-cat { font-size: 14.5px; color: var(--char); padding: 11px 0; border-top: 1px solid var(--pt-row-bd); }
.acc-cell { display: flex; justify-content: center; padding: 11px 0; border-top: 1px solid var(--pt-row-bd); }
.acc-matrix input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--char); }

/* Sticky action bar — save is always reachable on long forms. */
.acc-actions {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 22px; padding: 16px 4px;
  background: linear-gradient(to top, #fff 62%, rgba(255, 255, 255, 0));
}
.acc-actions__right { display: flex; align-items: center; gap: 16px; }
.acc-dirty { font-size: 13px; color: #a07f2e; }
.acc-logout { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.acc-logout:hover { color: var(--char); }
.acc-save {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mauve); color: var(--char); border: 0; border-radius: 999px;
  height: 48px; padding: 0 34px; font-size: 15px; cursor: pointer;
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
}
.acc-save:hover:not(:disabled) { background: #b19fba; transform: translateY(-2px); }
.acc-save.is-saved { background: #e7f1ea; color: #2f6b47; }
.acc-save:disabled { opacity: .55; cursor: default; transform: none; }
.acc-error { color: #b4453f; font-size: 14px; margin-top: 12px; text-align: right; }

/* ============================================================
   10 · WALLET PASS  (public page — dark wallet card + store btns)
   ============================================================ */
.wpass-intro { text-align: center; }
.wpass-title { font-size: clamp(28px, 4vw, 40px); line-height: 1.05; font-weight: 500; letter-spacing: -.025em; color: var(--char); margin: 0; }
.wpass-sub { font-size: 15px; color: var(--muted); margin: 10px 0 0; }
.wpass-card {
  background: var(--char); color: var(--cream); border-radius: 20px;
  padding: 26px 28px; margin-top: 28px; box-shadow: 0 24px 60px rgba(0, 0, 0, .26);
}
.wpass-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wpass-card__studio { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: rgba(242, 241, 237, .72); }
.wpass-badge { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 5px 12px; border-radius: 999px; background: rgba(242, 241, 237, .16); color: rgba(242, 241, 237, .85); }
.wpass-badge.is-active { background: #6f9e82; color: #0f1f16; }
.wpass-card__label { font-size: 22px; font-weight: 400; letter-spacing: -.01em; margin-top: 16px; line-height: 1.2; }
.wpass-card__big { display: flex; flex-direction: column; align-items: center; padding: 28px 0 24px; }
.wpass-card__num { font-size: 60px; font-weight: 400; line-height: 1; letter-spacing: -.03em; }
.wpass-card__numlabel { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: rgba(242, 241, 237, .62); margin-top: 10px; }
.wpass-card__meta { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(242, 241, 237, .18); padding-top: 16px; }
.wpass-card__key { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: rgba(242, 241, 237, .6); }
.wpass-card__val { display: block; font-size: 15px; margin-top: 4px; }
.wpass-btns { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.wpass-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border-radius: 12px; font-size: 15.5px; text-decoration: none; transition: transform .18s ease, opacity .18s ease; }
.wpass-btn:not(.is-disabled):hover { transform: translateY(-2px); }
.wpass-btn--apple { background: #000; color: #fff; }
.wpass-btn--google { background: #fff; color: var(--char); border: 1px solid rgba(43, 43, 43, .22); }
.wpass-btn.is-disabled { opacity: .5; cursor: default; }
.wpass-btn__soon { font-size: 12px; font-style: normal; opacity: .75; }
.wpass-error { text-align: center; padding-top: 24px; }
.wpass-error__p { color: var(--muted); font-size: 15px; line-height: 1.6; margin-top: 16px; }
.wpass-error__links { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 28px; }
.wpass-error__home { color: var(--char); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.wpass-error__home:hover { color: var(--mauve); }

/* ============================================================
   11 · RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .portal-grid { grid-template-columns: 1fr; }
  .cr-summary { grid-template-columns: 1fr; }
  .portal-actions .hx-cta { flex: 1 1 auto; justify-content: center; }
  .acc-grid { grid-template-columns: 1fr; }
  .acc-col-2 { grid-column: auto; }
  .portal-id__credits { padding: 6px 12px; }
}
@media (max-width: 560px) {
  .acc-card { padding: 22px 20px; }
  /* Bookings: date chip stays left, status/actions drop below the main block. */
  .bk-row { flex-wrap: wrap; row-gap: 12px; }
  .bk-side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  .ord__head { flex-wrap: wrap; }
}