* { box-sizing: border-box; }
body {
  margin: 0 !important;
  background: #0d1f0d !important;
  color: #faf6f2 !important;
  font-family: Arial, Helvetica, sans-serif;
}
#mbk-account-root { max-width: 560px; margin: 0 auto; padding: 60px 20px; }

.mbk-acc-wrap { width: 100%; }
.mbk-acc-loading { text-align: center; color: rgba(250,246,242,.6); font-size: 15px; }

.mbk-acc-card {
  background: #142814; border: 1px solid rgba(201,168,76,.25);
  border-radius: 12px; padding: 40px 32px; box-shadow: 0 24px 64px rgba(0,0,0,.4);
}
.mbk-acc-title {
  font-family: Georgia, serif; font-weight: 400; font-size: 26px;
  color: #faf6f2 !important; margin: 0 0 10px; letter-spacing: .3px;
}
.mbk-acc-sub { font-size: 14.5px; color: rgba(250,246,242,.65) !important; line-height: 1.6; margin: 0 0 24px; }
.mbk-acc-sub strong { color: #c9a84c; }

.mbk-acc-card label {
  display: block; font-size: 13px; color: rgba(250,246,242,.6); margin-bottom: 16px; letter-spacing: .3px;
}
.mbk-acc-card input {
  display: block; width: 100%; margin-top: 7px; padding: 13px 16px;
  background: rgba(250,246,242,.05); border: 2px solid rgba(201,168,76,.4);
  border-radius: 4px; color: #faf6f2; font-family: inherit; font-size: 16px;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.mbk-acc-card input:focus { border-color: #c9a84c; box-shadow: 0 0 10px rgba(201,168,76,.2); }

.mbk-acc-btn {
  display: block; width: 100%; background: #c9a84c; color: #1a3a1a;
  border: none; border-radius: 6px; padding: 14px 24px; font-size: 14px;
  font-weight: 700; letter-spacing: .3px; cursor: pointer; transition: background .2s;
}
.mbk-acc-btn:hover { background: #e8cc80; }
.mbk-acc-btn:disabled { opacity: .6; cursor: default; }
.mbk-acc-btn-outline {
  background: transparent; color: #c9a84c; border: 1.5px solid rgba(201,168,76,.5);
}
.mbk-acc-btn-outline:hover { background: rgba(201,168,76,.1); }

.mbk-acc-switch { text-align: center; font-size: 13.5px; color: rgba(250,246,242,.5); margin: 20px 0 0; }
.mbk-acc-switch a { color: #c9a84c; text-decoration: underline; text-underline-offset: 2px; }

.mbk-acc-err {
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.4);
  color: #f87171; font-size: 13.5px; padding: 10px 14px; border-radius: 6px; margin: 0 0 20px;
}

/* Dashboard */
.mbk-acc-dash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.mbk-acc-logout {
  background: none; border: 1px solid rgba(250,246,242,.25); color: rgba(250,246,242,.7);
  font-size: 12.5px; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: background .2s;
}
.mbk-acc-logout:hover { background: rgba(250,246,242,.08); }
.mbk-acc-code { font-size: 12.5px; color: rgba(250,246,242,.4); margin: 0 0 20px; }
.mbk-acc-code strong { color: #c9a84c; letter-spacing: .5px; }

.mbk-acc-tabs {
  display: flex; gap: 4px; margin: 0 0 24px; border-bottom: 1px solid rgba(201,168,76,.2);
}
.mbk-acc-tab {
  -webkit-appearance: none; appearance: none;
  background: none; background-color: transparent !important; border: none; color: rgba(250,246,242,.5);
  font-size: 13.5px; font-weight: 700; letter-spacing: .3px; padding: 10px 4px 12px;
  margin-right: 20px; cursor: pointer; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.mbk-acc-tab:hover { color: rgba(250,246,242,.8); }
.mbk-acc-tab-active, .mbk-acc-tab-active:hover { color: #c9a84c; border-bottom-color: #c9a84c; }
/* Chromium fills a plain <button>'s background with a solid grey "button
   face" on :focus/:active regardless of `background: none` above (that
   only clears the DEFAULT state) — confirmed live via Playwright screenshot
   after a real click, not just a guess. background-color with !important on
   every interaction state is what actually clears it; the box-shadow gives
   keyboard users a themed focus ring back without the grey fill. */
.mbk-acc-tab:focus, .mbk-acc-tab:active, .mbk-acc-tab:hover:active {
  outline: none; background: none; background-color: transparent !important;
  box-shadow: 0 0 0 2px rgba(201,168,76,.4); border-radius: 3px;
}
.mbk-acc-tab:focus:not(:focus-visible), .mbk-acc-tab:active { box-shadow: none; }

.mbk-acc-session-group {
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700;
  color: rgba(201,168,76,.85); margin: 24px 0 10px;
}
.mbk-acc-session-group:first-child { margin-top: 0; }

.mbk-acc-list-label {
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(250,246,242,.4); margin: 0 0 12px;
}
.mbk-acc-empty { color: rgba(250,246,242,.5); font-size: 14px; margin: 0 0 28px; }

.mbk-acc-sessions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.mbk-acc-session, a.mbk-acc-session-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-radius: 10px; background: rgba(201,168,76,.06);
  border: 1.5px solid rgba(201,168,76,.25);
}
a.mbk-acc-session-link {
  text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, transform .18s;
}
a.mbk-acc-session-link:hover {
  background: rgba(201,168,76,.14); border-color: rgba(201,168,76,.55); transform: translateY(-1px);
}
.mbk-acc-session-info { display: flex; flex-direction: column; gap: 3px; }
.mbk-acc-session-date { font-size: 15px; font-weight: 700; color: #faf6f2; }
.mbk-acc-session-pkg { font-size: 12.5px; color: rgba(250,246,242,.55); }
.mbk-acc-session-cta {
  font-size: 13px; font-weight: 700; color: #c9a84c; border: 1px solid rgba(201,168,76,.5);
  padding: 7px 15px; border-radius: 999px; white-space: nowrap; flex: none;
}
.mbk-acc-session-pending { font-size: 12.5px; color: rgba(250,246,242,.4); white-space: nowrap; flex: none; }

/* Family Journey entries can carry two actions (view gallery + book next
   stage) instead of the single action every other session card has, so
   unlike .mbk-acc-session's side-by-side row this stacks info above a row
   of action pills. */
.mbk-acc-session-family { flex-direction: column; align-items: stretch; gap: 12px; }
.mbk-acc-session-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mbk-acc-session-action {
  font-size: 13px; font-weight: 700; color: #0d1f0d; background: #c9a84c;
  padding: 8px 16px; border-radius: 999px; white-space: nowrap; text-decoration: none;
  transition: opacity .2s;
}
.mbk-acc-session-action:hover { opacity: .85; }
.mbk-acc-session-action-outline {
  color: #c9a84c; background: none; border: 1px solid rgba(201,168,76,.5);
}

.mbk-acc-contact { border-top: 1px solid rgba(201,168,76,.2); padding-top: 24px; }
.mbk-acc-contact-note { font-size: 13px; margin: -4px 0 14px; min-height: 1em; }
.mbk-acc-contact-note.mbk-acc-ok { color: #4ade80; }
.mbk-acc-contact-note.mbk-acc-bad { color: #f87171; }

@media (max-width: 480px) {
  #mbk-account-root { padding: 30px 14px; }
  .mbk-acc-card { padding: 28px 20px; }
}