/* ============================================================
   Queen of Retreats — Account Area
   Shared styles for all account pages
   ============================================================ */

/* --- Account Header ------------------------------------------ */
.acct-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.acct-header__inner {
  height: 60px;
  padding: 0 var(--s7);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.acct-header__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--ui);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  transition: color var(--dur-fast);
  white-space: nowrap;
}
.acct-header__back svg { transition: transform var(--dur-fast); }
.acct-header__back:hover { color: var(--ink); }
.acct-header__back:hover svg { transform: translateX(-3px); }
.acct-header__help {
  display: flex;
  align-items: center;
  gap: var(--s3);
  justify-content: flex-end;
  font-size: var(--t-sm);
  color: var(--stone);
  white-space: nowrap;
}
.acct-header__help a {
  color: var(--sage);
  font-weight: 500;
}
.acct-header__help a:hover { text-decoration: underline; }
.acct-header__help-sep {
  color: var(--mist);
}
.acct-header__logo {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
  text-align: center;
  letter-spacing: 0.01em;
}
.acct-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--ui);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--stone);
  transition: color var(--dur-fast);
  text-transform: uppercase;
  margin-bottom: var(--s6);
}
.acct-back svg { transition: transform var(--dur-fast); }
.acct-back:hover { color: var(--ink); }
.acct-back:hover svg { transform: translateX(-3px); }
.acct-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ui);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* --- Sidebar user block -------------------------------------- */
.acct-sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s6) var(--s4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s4);
  transition: opacity var(--dur-fast);
}
.acct-sidebar__user:hover { opacity: 0.75; }
.acct-sidebar__user .acct-avatar {
  width: 38px;
  height: 38px;
  font-size: var(--t-sm);
  flex-shrink: 0;
}
.acct-sidebar__name {
  font-size: var(--t-sm);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
}
.acct-sidebar__email {
  font-size: var(--t-xs);
  color: var(--stone);
  margin-top: 2px;
}

/* --- Account Layout ------------------------------------------ */
.acct-layout {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: calc(100vh - 60px);
}

/* --- Sidebar ------------------------------------------------- */
.acct-sidebar {
  border-right: 1px solid var(--border);
  padding: 0 0 var(--s10);
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--white);
}
.acct-nav {
  display: flex;
  flex-direction: column;
  padding: 0 var(--s4);
}
.acct-nav__section {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
  padding: var(--s5) var(--s3) var(--s2);
}
.acct-nav__section:first-child { padding-top: 0; }
.acct-nav__item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 9px var(--s3);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  color: var(--stone);
  transition: all var(--dur-fast);
  font-weight: 400;
  line-height: 1;
}
.acct-nav__item:hover {
  background: var(--sage-pale);
  color: var(--ink);
}
.acct-nav__item.is-active {
  background: var(--sage-pale);
  color: var(--sage);
  font-weight: 500;
}
.acct-nav__item svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.acct-nav__item.is-active svg { opacity: 1; }
.acct-nav__badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--sage);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acct-nav__divider {
  height: 1px;
  background: var(--border);
  margin: var(--s3) var(--s3);
}
.acct-nav__item--danger:hover {
  background: var(--error-bg);
  color: var(--error);
}

/* --- Account Main -------------------------------------------- */
.acct-main {
  padding: var(--s9) var(--s9);
  background: var(--parchment);
  min-height: calc(100vh - 60px);
}
.acct-page-header {
  margin-bottom: var(--s7);
}
.acct-page-header h1 {
  font-size: var(--t-2xl);
  color: var(--ink);
  margin-bottom: var(--s2);
}
.acct-page-header p {
  color: var(--stone);
  font-size: var(--t-base);
}

/* --- Tabs ---------------------------------------------------- */
.acct-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s7);
  gap: 0;
}
.acct-tab {
  padding: var(--s3) var(--s6);
  font-family: var(--ui);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--dur-fast);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s2);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  white-space: nowrap;
}
.acct-tab:first-child { padding-left: 0; }
.acct-tab:hover { color: var(--ink); }
.acct-tab.is-active {
  color: var(--sage);
  border-bottom-color: var(--sage);
}
.acct-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 600;
  background: var(--cloud);
  color: var(--stone);
}
.acct-tab.is-active .acct-tab__count {
  background: var(--sage-light);
  color: var(--sage);
}
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* --- Booking Card -------------------------------------------- */
.booking-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--s5);
  transition: box-shadow var(--dur-fast);
}
.booking-card:hover { box-shadow: var(--shadow-sm); }
.booking-card__inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: start;
}
.booking-card__img {
  width: 200px;
  height: 160px;
  object-fit: cover;
  display: block;
}
.booking-card__body {
  padding: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.booking-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
}
.booking-card__title {
  font-family: var(--serif);
  font-size: var(--t-lg);
  color: var(--ink);
  line-height: 1.15;
}
.booking-card__location {
  font-size: var(--t-sm);
  color: var(--stone);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.booking-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6);
}
.booking-card__meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.booking-card__meta-label {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist);
}
.booking-card__meta-value {
  font-size: var(--t-sm);
  color: var(--charcoal);
  font-weight: 500;
}
.booking-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s4) var(--s6);
  border-top: 1px solid var(--border);
  background: var(--parchment);
}
.booking-card__next-step {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-sm);
  color: var(--charcoal);
}
.booking-card__actions {
  display: flex;
  gap: var(--s3);
  align-items: center;
}

/* --- Enquiry Card -------------------------------------------- */
.enquiry-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--s5);
}
.enquiry-card__inner {
  display: grid;
  grid-template-columns: 200px 1fr;
}
.enquiry-card__img {
  width: 200px;
  aspect-ratio: 3/2.2;
  object-fit: cover;
  display: block;
}
.enquiry-card__body {
  padding: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.enquiry-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
}
.enquiry-card__title {
  font-family: var(--serif);
  font-size: var(--t-lg);
  color: var(--ink);
  line-height: 1.15;
}
.enquiry-card__location {
  font-size: var(--t-sm);
  color: var(--stone);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.enquiry-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6);
}
.enquiry-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s4) var(--s6);
  border-top: 1px solid var(--border);
  background: var(--parchment);
}

/* --- Messaging Thread --------------------------------------- */
.msg-thread {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: var(--s4);
}
.msg-thread__header {
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--border);
  background: var(--parchment);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.msg-thread__title {
  font-family: var(--ui);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}
.msg-thread__messages {
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  max-height: 260px;
  overflow-y: auto;
  background: var(--white);
}
.msg-row {
  display: flex;
  flex-direction: column;
}
.msg-row--outbound { align-items: flex-end; }
.msg-row--inbound  { align-items: flex-start; }
.msg-sender {
  font-size: var(--t-xs);
  color: var(--stone);
  margin-bottom: var(--s1);
  font-weight: 500;
}
.msg-bubble {
  max-width: 72%;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-lg);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.msg-bubble--inbound {
  background: var(--cloud);
  color: var(--charcoal);
  border-bottom-left-radius: var(--r-sm);
}
.msg-bubble--outbound {
  background: var(--sage);
  color: var(--white);
  border-bottom-right-radius: var(--r-sm);
}
.msg-time {
  font-size: var(--t-xs);
  color: var(--mist);
  margin-top: var(--s1);
}
.msg-compose {
  border-top: 1px solid var(--border);
  padding: var(--s4) var(--s5);
  display: flex;
  gap: var(--s3);
  align-items: flex-end;
  background: var(--white);
}
.msg-compose__input {
  flex: 1;
  padding: var(--s3) var(--s4);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--white);
  resize: none;
  outline: none;
  transition: border-color var(--dur-fast);
  font-family: var(--sans);
  line-height: 1.5;
  min-height: 40px;
}
.msg-compose__input:focus { border-color: var(--sage-mid); }

/* --- Past Booking Card (compact) ----------------------------- */
.past-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--s4);
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
}
.past-card__img {
  width: 130px;
  height: 96px;
  object-fit: cover;
  display: block;
}
.past-card__body {
  padding: var(--s4) var(--s6);
}
.past-card__title {
  font-family: var(--serif);
  font-size: var(--t-md);
  color: var(--ink);
  margin-bottom: 3px;
}
.past-card__sub {
  font-size: var(--t-sm);
  color: var(--stone);
}
.past-card__actions {
  padding: var(--s4) var(--s6) var(--s4) 0;
  display: flex;
  gap: var(--s2);
  align-items: center;
}

/* --- Account Section Panel ---------------------------------- */
.acct-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--s6);
}
.acct-panel__header {
  padding: var(--s5) var(--s7);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.acct-panel__header h2 {
  font-family: var(--serif);
  font-size: var(--t-lg);
  color: var(--ink);
}
.acct-panel__header p {
  font-size: var(--t-sm);
  color: var(--stone);
  margin-top: 2px;
}
.acct-panel__body {
  padding: var(--s7);
}
.acct-panel__footer {
  padding: var(--s5) var(--s7);
  border-top: 1px solid var(--border);
  background: var(--parchment);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s3);
}

/* --- Payment Cards ------------------------------------------ */
.payment-card {
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s5) var(--s6);
  display: flex;
  align-items: center;
  gap: var(--s5);
  margin-bottom: var(--s4);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  background: var(--white);
}
.payment-card.is-default {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px var(--sage-light);
}
.payment-card__icon {
  width: 52px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  font-size: 11px;
  font-weight: 700;
  color: var(--charcoal);
  flex-shrink: 0;
}
.payment-card__icon--visa { color: #1a1f71; }
.payment-card__icon--mc { color: #eb001b; }
.payment-card__info { flex: 1; }
.payment-card__name {
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--ink);
}
.payment-card__detail {
  font-size: var(--t-sm);
  color: var(--stone);
  margin-top: 2px;
}
.payment-card__actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.add-card {
  border: 1.5px dashed var(--border-mid);
  border-radius: var(--r-lg);
  padding: var(--s5) var(--s6);
  display: flex;
  align-items: center;
  gap: var(--s4);
  cursor: pointer;
  transition: all var(--dur-fast);
  color: var(--stone);
  background: none;
  width: 100%;
  text-align: left;
}
.add-card:hover {
  border-color: var(--sage-mid);
  color: var(--sage);
  background: var(--sage-pale);
}
.add-card__label {
  font-size: var(--t-sm);
  font-weight: 500;
}

/* --- Preference Chips --------------------------------------- */
.pref-section {
  margin-bottom: var(--s7);
}
.pref-section:last-child { margin-bottom: 0; }
.pref-section__label {
  font-family: var(--ui);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--s4);
}
.pref-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.pref-chip {
  padding: var(--s2) var(--s4);
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  color: var(--charcoal);
  cursor: pointer;
  transition: all var(--dur-fast);
  background: var(--white);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  user-select: none;
}
.pref-chip:hover { border-color: var(--sage-mid); color: var(--ink); }
.pref-chip.is-selected {
  background: var(--sage-pale);
  border-color: var(--sage);
  color: var(--sage);
}
.pref-chip__icon { font-size: 14px; }

/* Selectable cards for travel style */
.pref-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s3);
}
.pref-style-card {
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s5) var(--s4);
  text-align: center;
  cursor: pointer;
  transition: all var(--dur-fast);
  background: var(--white);
  user-select: none;
}
.pref-style-card:hover { border-color: var(--sage-mid); background: var(--sage-pale); }
.pref-style-card.is-selected {
  border-color: var(--sage);
  background: var(--sage-pale);
  box-shadow: 0 0 0 3px var(--sage-light);
}
.pref-style-card__icon {
  font-size: 28px;
  margin-bottom: var(--s2);
  display: block;
}
.pref-style-card__label {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
}
.pref-style-card__desc {
  font-size: var(--t-xs);
  color: var(--stone);
  margin-top: 2px;
}

/* Budget range */
.budget-slider-wrap {
  padding: var(--s4) 0;
}
.budget-slider {
  width: 100%;
  accent-color: var(--sage);
  height: 4px;
  cursor: pointer;
}
.budget-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s2);
  font-size: var(--t-xs);
  color: var(--stone);
}
.budget-value {
  text-align: center;
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--s3);
}

/* --- Comms Toggles ------------------------------------------ */
.comms-section {
  margin-bottom: var(--s7);
}
.comms-section:last-child { margin-bottom: 0; }
.comms-section__label {
  font-family: var(--ui);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border);
}
.comms-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--cloud);
  gap: var(--s8);
}
.comms-item:last-child { border-bottom: none; padding-bottom: 0; }
.comms-item__text strong {
  display: block;
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 3px;
}
.comms-item__text p {
  font-size: var(--t-sm);
  color: var(--stone);
  line-height: 1.5;
}
.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle__track {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: var(--cloud);
  transition: background var(--dur-fast);
  cursor: pointer;
}
.toggle input:checked + .toggle__track { background: var(--sage); }
.toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform var(--dur-fast);
  pointer-events: none;
}
.toggle input:checked ~ .toggle__thumb { transform: translateX(20px); }

/* --- Saved Retreat Cards ------------------------------------ */
.saved-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s5);
}
.saved-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow var(--dur-fast), border-color var(--dur-fast);
  display: flex;
  flex-direction: column;
}
.saved-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-mid); }
.saved-card__img-wrap {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
}
.saved-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.saved-card:hover .saved-card__img { transform: scale(1.04); }
.saved-card__remove {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--stone);
  transition: all var(--dur-fast);
  backdrop-filter: blur(4px);
}
.saved-card__remove:hover { background: var(--white); color: var(--error); }
.saved-card__body {
  padding: var(--s5);
  flex: 1;
}
.saved-card__location {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--s2);
}
.saved-card__title {
  font-family: var(--serif);
  font-size: var(--t-md);
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: var(--s3);
}
.saved-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.saved-card__price {
  font-size: var(--t-sm);
  color: var(--stone);
}
.saved-card__price strong {
  color: var(--ink);
  font-weight: 500;
}
.saved-card__avail {
  font-size: var(--t-xs);
  color: var(--stone);
  margin-top: 3px;
}
.saved-card__footer {
  display: flex;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--border);
  background: var(--parchment);
}

/* --- Inline edit -------------------------------------------- */
.field-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s7);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--cloud);
}
.field-row:last-child { border-bottom: none; }
.field-row__label {
  font-family: var(--ui);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  min-width: 160px;
  padding-top: 2px;
  flex-shrink: 0;
}
.field-row__value {
  flex: 1;
  font-size: var(--t-base);
  color: var(--ink);
}
.field-row__action {
  flex-shrink: 0;
}

/* --- Success toast ------------------------------------------ */
.acct-toast {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--success-bg);
  border: 1px solid #b8d9c3;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  color: var(--success);
  margin-bottom: var(--s6);
}
.acct-toast svg { flex-shrink: 0; }

/* --- Inline alert ------------------------------------------ */
.acct-info-box {
  display: flex;
  gap: var(--s4);
  padding: var(--s5) var(--s6);
  border-radius: var(--r-md);
  margin-bottom: var(--s5);
}
.acct-info-box--warning {
  background: var(--warning-bg);
  border: 1px solid #e6c47a;
}
.acct-info-box--info {
  background: var(--sage-pale);
  border: 1px solid var(--sage-light);
}
.acct-info-box__icon { flex-shrink: 0; margin-top: 1px; }
.acct-info-box__text { font-size: var(--t-sm); line-height: 1.6; }
.acct-info-box--warning .acct-info-box__text { color: var(--warning); }
.acct-info-box--info .acct-info-box__text { color: var(--sage); }

/* --- Empty state -------------------------------------------- */
.acct-empty {
  text-align: center;
  padding: var(--s11) var(--s7);
}
.acct-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sage-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--s5);
  color: var(--sage);
}
.acct-empty h3 {
  font-family: var(--serif);
  font-size: var(--t-xl);
  color: var(--ink);
  margin-bottom: var(--s3);
}
.acct-empty p {
  font-size: var(--t-base);
  color: var(--stone);
  margin-bottom: var(--s6);
}

/* --- Stat bar ----------------------------------------------- */
.acct-stat-bar {
  display: flex;
  gap: var(--s6);
  margin-bottom: var(--s7);
}
.acct-stat {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s5) var(--s6);
  flex: 1;
}
.acct-stat__value {
  font-family: var(--serif);
  font-size: var(--t-2xl);
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
}
.acct-stat__label {
  font-size: var(--t-sm);
  color: var(--stone);
}

/* --- Sidebar collapsible ------------------------------------- */
.acct-layout {
  transition: grid-template-columns 200ms ease;
}
.acct-layout.sidebar-collapsed {
  grid-template-columns: 60px 1fr;
}

.acct-sidebar.is-collapsed {
  cursor: pointer;
}
.acct-sidebar.is-collapsed .acct-sidebar__name,
.acct-sidebar.is-collapsed .acct-sidebar__email {
  display: none;
}
.acct-sidebar.is-collapsed .acct-sidebar__user {
  padding: var(--s5) 0;
  justify-content: center;
  gap: 0;
}
.acct-sidebar.is-collapsed .acct-nav {
  padding: var(--s3) 0;
  align-items: center;
}
.acct-sidebar.is-collapsed .acct-nav__section,
.acct-sidebar.is-collapsed .acct-nav__badge,
.acct-sidebar.is-collapsed .acct-nav__label {
  display: none;
}
.acct-sidebar.is-collapsed .acct-nav__item {
  width: 44px;
  padding: 10px 0;
  justify-content: center;
  border-radius: var(--r-md);
}
.acct-sidebar.is-collapsed .acct-nav__divider {
  width: 20px;
  margin: var(--s2) auto;
}
.acct-sidebar.is-collapsed .acct-sidebar-collapse {
  display: none;
}

/* Collapse button — last item in nav */
.acct-sidebar-collapse {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 9px var(--s3);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  color: var(--stone);
  transition: all var(--dur-fast);
  font-family: var(--ui);
  font-weight: 400;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.acct-sidebar-collapse:hover {
  background: var(--sage-pale);
  color: var(--ink);
}
.acct-sidebar-collapse svg { flex-shrink: 0; opacity: 0.7; }

/* ============================================================
   Mobile — ≤ 768px
   All desktop styles above are unchanged.
   ============================================================ */
@media (max-width: 768px) {

  /* Header — hide help text, reduce padding, shrink logo */
  .acct-header__inner { padding: 0 var(--s5); }
  .acct-header__help { display: none; }
  .acct-header__logo { font-size: 18px; }

  /* Layout — single column, sidebar stacks above main */
  .acct-layout { display: block; }

  /* Sidebar → compact horizontal scrollable nav strip */
  .acct-sidebar {
    position: sticky;
    top: 60px;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0;
    overflow-x: hidden;
    overflow-y: visible;
    z-index: 90;
  }
  .acct-sidebar__user { display: none; }
  .acct-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: var(--s2) var(--s3);
    gap: var(--s1);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .acct-nav::-webkit-scrollbar { display: none; }
  .acct-nav__section { display: none; }
  .acct-nav__divider {
    width: 1px;
    height: 20px;
    margin: auto var(--s2);
    flex-shrink: 0;
  }
  .acct-nav__item {
    flex-shrink: 0;
    white-space: nowrap;
    padding: var(--s2) var(--s3);
    border-radius: var(--r-pill);
    font-size: var(--t-xs);
  }
  .acct-nav__item svg { display: none; }
  .acct-nav__badge { display: none; }

  /* Main content */
  .acct-main {
    padding: var(--s6) var(--s5);
    min-height: auto;
  }
  .acct-page-header { margin-bottom: var(--s5); }
  .acct-page-header h1 { font-size: var(--t-xl); }
  .acct-back { margin-bottom: var(--s4); }

  /* Stat bar — 2×2 */
  .acct-stat-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
    margin-bottom: var(--s5);
  }
  .acct-stat { padding: var(--s4); }
  .acct-stat__value { font-size: var(--t-xl); }

  /* Tabs — horizontally scrollable */
  .acct-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: var(--s5);
  }
  .acct-tabs::-webkit-scrollbar { display: none; }

  /* Booking card — stack image above body */
  .booking-card__inner { grid-template-columns: 1fr; }
  .booking-card__img { width: 100%; height: 200px; }
  .booking-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s3);
    padding: var(--s4) var(--s5);
  }
  .booking-card__actions {
    flex-wrap: wrap;
    gap: var(--s2);
    width: 100%;
  }
  .booking-card__next-step { font-size: var(--t-xs); }

  /* Enquiry card — stack */
  .enquiry-card__inner { grid-template-columns: 1fr; }
  .enquiry-card__img { width: 100%; aspect-ratio: 16/9; height: auto; }
  .enquiry-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s3);
    padding: var(--s4) var(--s5);
  }

  /* Past card — stack */
  .past-card { grid-template-columns: 1fr; }
  .past-card__img { width: 100%; height: 160px; }
  .past-card__actions {
    padding: var(--s3) var(--s5) var(--s4);
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  /* Account panels */
  .acct-panel__header { padding: var(--s4) var(--s5); }
  .acct-panel__body { padding: var(--s5); }
  .acct-panel__footer { padding: var(--s4) var(--s5); flex-wrap: wrap; }

  /* Field rows — stack label above value */
  .field-row { flex-direction: column; gap: var(--s2); }
  .field-row__label { min-width: auto; }

  /* Comms — tighten gap between text and toggle */
  .comms-item { gap: var(--s5); }

  /* Saved grid — 2 columns on tablet, 1 on phone */
  .saved-grid { grid-template-columns: 1fr 1fr; }

  /* Payment cards */
  .payment-card { flex-wrap: wrap; }
  .payment-card__actions { width: 100%; justify-content: flex-end; }

}

@media (max-width: 480px) {
  .saved-grid { grid-template-columns: 1fr; }
  .booking-card__meta { gap: var(--s3); }
  .booking-card__body { padding: var(--s4); }
  .enquiry-card__body { padding: var(--s4); }
}