/* tat.credit final UI normalization */

:root {
  --cc-black: #111;
  --cc-white: #fff;
  --cc-border: rgba(0,0,0,.10);
  --cc-border-soft: rgba(0,0,0,.08);
  --cc-radius-pill: 999px;
  --cc-radius-card: 22px;
  --cc-shadow-soft: 0 8px 24px rgba(0,0,0,.04);
  --cc-shadow-card: 0 12px 34px rgba(0,0,0,.05);
}

/* Page width */
.client-page,
.pro-page,
.pro-shell,
.page-shell,
.main-shell {
  width: min(1120px, calc(100% - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Universal box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Cards */
.card,
.client-card,
.pro-card,
.setting-card,
.reference-card,
.media-card,
.appointment-card,
.transaction-card,
.support-card,
.account-card,
.closure-card,
.client-panel,
.pro-panel {
  border-radius: var(--cc-radius-card) !important;
  border: 1px solid var(--cc-border-soft) !important;
  box-shadow: var(--cc-shadow-soft) !important;
  overflow: hidden !important;
}

/* Inputs and fields */
input,
select,
textarea,
.input-like,
.client-field,
.pro-field {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border-radius: 16px !important;
  border: 1px solid var(--cc-border) !important;
  box-sizing: border-box !important;
  font: inherit !important;
  line-height: 1.2 !important;
}

input,
select,
.input-like {
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 16px !important;
}

textarea {
  min-height: 104px !important;
  padding: 16px !important;
  resize: vertical !important;
}

/* Labels should not inflate first field */
label,
.form-label,
.field-label {
  display: block !important;
  width: 100% !important;
  margin: 0 0 8px !important;
  line-height: 1.15 !important;
}

/* Desktop 2-column form grids */
.client-grid,
.form-grid,
.settings-grid,
.support-grid,
.privacy-grid,
.notification-grid,
.closure-grid,
.client-form,
.pro-form,
.style-form-card,
.profile-form,
.settings-form,
.support-form,
.account-close-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

/* Prevent first child from spanning unless intentionally forced */
.client-grid > *,
.form-grid > *,
.settings-grid > *,
.support-grid > *,
.privacy-grid > *,
.notification-grid > *,
.closure-grid > *,
.client-form > *,
.pro-form > *,
.style-form-card > *,
.profile-form > *,
.settings-form > *,
.support-form > *,
.account-close-form > * {
  grid-column: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Textareas and save buttons span full width */
.client-form textarea,
.pro-form textarea,
.profile-form textarea,
.settings-form textarea,
.support-form textarea,
.account-close-form textarea,
.client-form > button,
.pro-form > button,
.profile-form > button,
.settings-form > button,
.support-form > button,
.account-close-form > button,
.client-form > .button,
.pro-form > .button,
.profile-form > .button,
.settings-form > .button,
.support-form > .button,
.account-close-form > .button {
  grid-column: 1 / -1 !important;
}

/* Notification/privacy/support/closure rows */
.notification-row,
.privacy-row,
.support-row,
.closure-row,
.setting-row,
.client-checkitem,
.status-row {
  min-height: 72px !important;
  padding: 16px !important;
  border-radius: 16px !important;
  border: 1px solid var(--cc-border-soft) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* Buttons */
button,
.button,
.button.dark,
a.button,
.pro-action,
.pro-small-btn,
.client-actions .button,
.client-button-row .button,
.client-card-actions .button,
.client-summary-actions .button,
.appointment-actions .button,
.next-appointment-actions .button,
.transaction-actions .button,
.reference-actions .button {
  min-height: 46px !important;
  height: auto !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  box-sizing: border-box !important;
}

/* Button rows */
.client-appointment-actions,
.appointment-actions,
.next-appointment-actions,
.client-summary-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.client-button-row,
.client-actions,
.transaction-actions,
.reference-actions,
.pro-actions,
.pro-action-row,
.client-card-actions,
.client-media-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.client-appointment-actions > *,
.appointment-actions > *,
.next-appointment-actions > *,
.client-summary-actions > *,
.client-button-row > *,
.client-actions > *,
.transaction-actions > *,
.reference-actions > *,
.pro-actions > *,
.pro-action-row > *,
.client-card-actions > *,
.client-media-actions > * {
  width: 100% !important;
  min-width: 0 !important;
}

/* Nav pills */
.client-rail-link,
.pro-pill,
.style-chip,
.client-filter,
.transaction-filter,
.badge,
.pill {
  white-space: nowrap !important;
  min-height: 42px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Content card grids */
.appointment-list,
.transaction-list,
.reference-list,
.client-card-grid,
.pro-card-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.client-media-grid,
.gallery-grid,
.media-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

/* Safari text rendering consistency */
button,
input,
select,
textarea {
  -webkit-font-smoothing: antialiased;
  appearance: none;
}

/* Mobile */
@media (max-width: 820px) {
  .client-grid,
  .form-grid,
  .settings-grid,
  .support-grid,
  .privacy-grid,
  .notification-grid,
  .closure-grid,
  .client-form,
  .pro-form,
  .style-form-card,
  .profile-form,
  .settings-form,
  .support-form,
  .account-close-form,
  .client-appointment-actions,
  .appointment-actions,
  .next-appointment-actions,
  .client-summary-actions,
  .client-button-row,
  .client-actions,
  .transaction-actions,
  .reference-actions,
  .pro-actions,
  .pro-action-row,
  .client-card-actions,
  .client-media-actions,
  .appointment-list,
  .transaction-list,
  .reference-list,
  .client-card-grid,
  .pro-card-grid,
  .client-media-grid,
  .gallery-grid,
  .media-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   CLIENT SETTINGS: NOTIFICATION CHIPS
   ========================================================= */

.client-notification-form {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.client-chip-toggle-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  margin: 0 0 18px !important;
}

.client-chip-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.client-chip-toggle input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
}

.client-chip-toggle span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-pill) !important;
  background: #fff !important;
  color: #111 !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.client-chip-toggle input:checked + span {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}

.client-chip-toggle:focus-within span {
  outline: 2px solid rgba(0,0,0,.18) !important;
  outline-offset: 3px !important;
}

@media (max-width: 640px) {
  .client-chip-toggle-grid {
    gap: 10px !important;
  }

  .client-chip-toggle span {
    width: 100% !important;
    min-width: 100% !important;
  }

  .client-chip-toggle {
    flex: 1 1 100% !important;
  }
}

/* =========================================================
   FINAL SETTINGS NOTIFICATION CHIPS
   Compact side-by-side toggle buttons with clear on/off state.
   ========================================================= */

.client-notification-form {
  padding: 0 !important;
  margin: 0 0 28px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.client-chip-toggle-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 0 22px !important;
  width: 100% !important;
}

.client-chip-toggle {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.client-chip-toggle input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
}

.client-chip-toggle span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 44px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: #fff !important;
  color: #111 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.client-chip-toggle input:checked + span {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}

.client-chip-toggle input:not(:checked) + span::before {
  content: "Off: " !important;
  opacity: .55 !important;
}

.client-chip-toggle input:checked + span::before {
  content: "On: " !important;
  opacity: .75 !important;
}

.client-chip-toggle:focus-within span {
  outline: 2px solid rgba(0,0,0,.28) !important;
  outline-offset: 2px !important;
}

@media (max-width: 640px) {
  .client-chip-toggle-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .client-chip-toggle,
  .client-chip-toggle span {
    width: 100% !important;
  }

  .client-chip-toggle span {
    min-height: 42px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

@media (max-width: 390px) {
  .client-chip-toggle-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   FINAL COMPACT NOTIFICATION TOGGLE CHIPS
   Plain side-by-side buttons with visible on/off state.
   ========================================================= */

.client-notification-form {
  padding: 0 !important;
  margin: 0 0 28px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.client-chip-toggle-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.client-chip-toggle {
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.client-chip-toggle input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.client-chip-toggle span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: #fff !important;
  color: #111 !important;
}

.client-chip-toggle input:checked + span {
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
}

.client-chip-toggle input:not(:checked) + span {
  background: #fff !important;
  color: #555 !important;
  border-color: rgba(0,0,0,.14) !important;
}

.client-chip-toggle input:checked + span::before {
  content: "On · ";
}

.client-chip-toggle input:not(:checked) + span::before {
  content: "Off · ";
}

.client-chip-toggle:focus-within span {
  outline: 2px solid rgba(0,0,0,.28) !important;
  outline-offset: 3px !important;
}

@media (max-width: 640px) {
  .client-chip-toggle-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .client-chip-toggle {
    width: 100% !important;
  }

  .client-chip-toggle span {
    width: 100% !important;
    white-space: normal !important;
    padding: 12px 10px !important;
    font-size: 13px !important;
  }
}

/* =========================================================
   FINAL CHIP LABEL CLEANUP
   Remove On/Off text. State is shown visually by selected fill.
   ========================================================= */

.client-chip-toggle input:checked + span::before,
.client-chip-toggle input:not(:checked) + span::before {
  content: "" !important;
}

.client-chip-toggle input:checked + span {
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
}

.client-chip-toggle input:not(:checked) + span {
  background: #fff !important;
  color: #555 !important;
  border-color: rgba(0,0,0,.14) !important;
}

/* =========================================================
   CLIENT APPOINTMENTS: REAL LABEL PILL FIX
   Fixes Requested, Tattoo, Confirmed, Service appointment,
   Completed, Tagged photo available, Cancelled/Canceled.
   Does not touch action buttons.
   ========================================================= */

.appt-label-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 14px !important;
  margin: 0 8px 8px 0 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-size: 0 !important;
}

.appt-label-pill::before {
  content: attr(data-label) !important;
  display: block !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transform: translateY(2px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

button.appt-label-pill,
.button.appt-label-pill,
.client-actions .appt-label-pill,
.client-button-row .appt-label-pill {
  font-size: inherit !important;
}

@media (max-width: 640px) {
  .appt-label-pill {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 13px !important;
  }

  .appt-label-pill::before {
    font-size: 13px !important;
    transform: translateY(2px) !important;
  }
}

/* =========================================================
   FINAL CLIENT PAGE NORMALIZATION
   One system for nav, cards, action buttons, status pills, and chips.
   Real text stays visible. No pseudo-label text. No button damage.
   ========================================================= */

:root {
  --cc-card-radius: 20px;
  --cc-action-height: 48px;
  --cc-chip-height: 30px;
  --cc-chip-radius: 999px;
  --cc-chip-x: 16px;
}

/* Page cards */
[data-page^="client:"] .client-card,
[data-page^="client:"] .client-panel,
[data-page^="client:"] .client-form,
[data-page^="client:"] .client-list,
[data-page^="client:"] .client-closure-card,
[data-page^="client:"] .card {
  border-radius: var(--cc-card-radius) !important;
}

/* Top navigation pills */
[data-page^="client:"] nav a,
[data-page^="client:"] .client-nav a,
[data-page^="client:"] .client-tabs a,
[data-page^="client:"] .account-nav a {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Real action buttons only */
[data-page^="client:"] a.button,
[data-page^="client:"] button.button,
[data-page^="client:"] .client-card > a.button,
[data-page^="client:"] .client-card > button.button,
[data-page^="client:"] .client-actions a,
[data-page^="client:"] .client-actions button,
[data-page^="client:"] .button-row a,
[data-page^="client:"] .button-row button,
[data-page^="client:"] form > button {
  height: var(--cc-action-height) !important;
  min-height: var(--cc-action-height) !important;
  padding: 0 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Label chips, status pills, filters, and non-action tags */
.appt-label-pill,
[data-page^="client:"] .client-status,
[data-page^="client:"] .client-badge,
[data-page^="client:"] .client-tag,
[data-page^="client:"] .status-pill,
[data-page^="client:"] .badge,
[data-page^="client:"] .tag,
[data-page^="client:"] .chip,
[data-page^="client:"] .filter-chip-row button,
[data-page^="client:"] .quick-tags button,
[data-page^="client:"] .style-tags button,
[data-page^="client:"] .safety-tags button,
[data-page^="client:"] .client-card p + div span,
[data-page^="client:"] .client-card h3 + p + div span,
[data-page^="client:"] .client-meta span,
[data-page^="client:"] .appointment-meta span,
[data-page^="client:"] .booking-meta span,
[data-page^="client:"] .tag-row span,
[data-page^="client:"] .chip-row span {
  min-height: var(--cc-chip-height) !important;
  height: var(--cc-chip-height) !important;
  padding: 0 var(--cc-chip-x) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: normal !important;
  vertical-align: middle !important;
  border-radius: var(--cc-chip-radius) !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

/* Appointment labels use real text only */
.appt-label-pill {
  position: static !important;
  color: inherit !important;
  text-indent: 0 !important;
}

.appt-label-pill::before,
.appt-label-pill::after {
  content: none !important;
  display: none !important;
}

/* Prevent action buttons from inheriting small label height */
[data-page^="client:"] .client-card a.button,
[data-page^="client:"] .client-card button.button,
[data-page^="client:"] .client-card .button {
  height: var(--cc-action-height) !important;
  min-height: var(--cc-action-height) !important;
  padding: 0 22px !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

/* Settings notification chips */
.client-chip-toggle span {
  min-height: var(--cc-chip-height) !important;
  height: var(--cc-chip-height) !important;
  padding: 0 var(--cc-chip-x) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: normal !important;
  border-radius: var(--cc-chip-radius) !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.client-chip-toggle input:checked + span::before,
.client-chip-toggle input:not(:checked) + span::before {
  content: none !important;
  display: none !important;
}

/* Mobile */
@media (max-width: 640px) {
  [data-page^="client:"] nav a,
  [data-page^="client:"] .client-nav a,
  [data-page^="client:"] .client-tabs a,
  [data-page^="client:"] .account-nav a {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }

  .appt-label-pill,
  [data-page^="client:"] .client-status,
  [data-page^="client:"] .client-badge,
  [data-page^="client:"] .client-tag,
  [data-page^="client:"] .status-pill,
  [data-page^="client:"] .badge,
  [data-page^="client:"] .tag,
  [data-page^="client:"] .chip,
  [data-page^="client:"] .filter-chip-row button,
  [data-page^="client:"] .quick-tags button,
  [data-page^="client:"] .style-tags button,
  [data-page^="client:"] .safety-tags button,
  [data-page^="client:"] .client-card p + div span,
  [data-page^="client:"] .client-card h3 + p + div span,
  [data-page^="client:"] .client-meta span,
  [data-page^="client:"] .appointment-meta span,
  [data-page^="client:"] .booking-meta span,
  [data-page^="client:"] .tag-row span,
  [data-page^="client:"] .chip-row span,
  .client-chip-toggle span {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 13px !important;
    font-size: 12px !important;
    line-height: normal !important;
  }
}


/* =========================================================
   FINAL EQUAL APPOINTMENT LABEL CHIPS
   Fixes Tattoo / 45 minutes / Tattoo Artist / Deposit paid / No balance due.
   Equal visual chip height, centered text, no action button impact.
   ========================================================= */

[data-page="client:dashboard"] .appt-label-pill,
[data-page="client:appointments"] .appt-label-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 30px !important;
  min-height: 30px !important;
  min-width: 82px !important;
  padding: 0 14px !important;
  line-height: 30px !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  text-align: center !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

[data-page="client:dashboard"] .appt-label-pill::before,
[data-page="client:dashboard"] .appt-label-pill::after,
[data-page="client:appointments"] .appt-label-pill::before,
[data-page="client:appointments"] .appt-label-pill::after {
  content: none !important;
  display: none !important;
}

[data-page="client:dashboard"] .appt-label-pill[data-label="45 minutes"],
[data-page="client:dashboard"] .appt-label-pill[data-label="60 minutes"],
[data-page="client:appointments"] .appt-label-pill[data-label="45 minutes"],
[data-page="client:appointments"] .appt-label-pill[data-label="60 minutes"] {
  min-width: 82px !important;
  width: 82px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Keep real action buttons separate */
[data-page="client:dashboard"] .button,
[data-page="client:dashboard"] button,
[data-page="client:dashboard"] a.button,
[data-page="client:appointments"] .button,
[data-page="client:appointments"] button,
[data-page="client:appointments"] a.button {
  min-height: 48px !important;
  height: 48px !important;
  line-height: 1 !important;
}


/* =========================================================
   FINAL SAFE LABEL RESET
   Real text stays visible. No pseudo text. No hidden labels.
   Completed stays black with white text.
   ========================================================= */

.appt-label-pill,
.transaction-status,
.transaction-meta span,
.client-status,
.client-badge,
.client-tag {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  overflow: visible !important;
  transform: none !important;
  color: #111 !important;
}

.appt-label-pill::before,
.appt-label-pill::after,
.transaction-status::before,
.transaction-status::after,
.transaction-meta span::before,
.transaction-meta span::after,
.client-status::before,
.client-status::after,
.client-badge::before,
.client-badge::after,
.client-tag::before,
.client-tag::after {
  content: none !important;
  display: none !important;
}

/* Completed / dark label */
.appt-label-pill.dark,
.dark.appt-label-pill,
.transaction-status.dark,
.client-status.dark,
.client-badge.dark,
.client-tag.dark {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}

/* Warning / requested */
.appt-label-pill.warn,
.warn.appt-label-pill,
.transaction-status.warn,
.client-status.warn,
.client-badge.warn,
.client-tag.warn {
  background: #fbf3df !important;
  color: #6b4a00 !important;
}

/* Good / confirmed */
.appt-label-pill.good,
.good.appt-label-pill,
.transaction-status.good,
.client-status.good,
.client-badge.good,
.client-tag.good {
  background: #e9f5ea !important;
  color: #1f6b35 !important;
}

/* Cancelled */
.appt-label-pill.cancel,
.cancel.appt-label-pill,
.transaction-status.cancel,
.client-status.cancel,
.client-badge.cancel,
.client-tag.cancel {
  background: #f7e8e8 !important;
  color: #8a1f1f !important;
}

/* Neutral labels */
.appt-label-pill:not(.dark):not(.good):not(.warn):not(.cancel),
.transaction-meta span,
.client-badge:not(.dark):not(.good):not(.warn):not(.cancel),
.client-tag:not(.dark):not(.good):not(.warn):not(.cancel) {
  background: #f2efe8 !important;
  border-color: transparent !important;
  color: #111 !important;
}

/* Keep action buttons untouched */
button,
.button,
a.button {
  font-size: inherit;
}


/* =========================================================
   FINAL DASHBOARD / APPOINTMENT LABEL CHIP STANDARD
   Fixes 45 minutes and all small label chips.
   Does not touch action buttons.
   ========================================================= */

.dashboard-meta,
.appointment-meta,
.provider-meta,
.transaction-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

.dashboard-meta .appt-label-pill,
.appointment-meta .appt-label-pill,
.provider-meta span,
.transaction-meta span {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  background: #f2efe8 !important;
  border: 1px solid transparent !important;
  color: #111 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  text-align: center !important;
  vertical-align: middle !important;
  overflow: visible !important;
  transform: none !important;
}

.dashboard-meta .appt-label-pill::before,
.dashboard-meta .appt-label-pill::after,
.appointment-meta .appt-label-pill::before,
.appointment-meta .appt-label-pill::after,
.provider-meta span::before,
.provider-meta span::after,
.transaction-meta span::before,
.transaction-meta span::after {
  content: none !important;
  display: none !important;
}

.appt-label-pill.good,
.good.appt-label-pill {
  background: #e9f5ea !important;
  color: #1f6b35 !important;
}

.appt-label-pill.warn,
.warn.appt-label-pill {
  background: #fbf3df !important;
  color: #6b4a00 !important;
}

.appt-label-pill.dark,
.dark.appt-label-pill {
  background: #111 !important;
  color: #fff !important;
}

.appt-label-pill.cancel,
.cancel.appt-label-pill {
  background: #f7e8e8 !important;
  color: #8a1f1f !important;
}

/* =========================================================
   CLIENT GALLERY: HARD FINAL LAYOUT
   Desktop/tablet: 2 columns.
   Mobile/narrow: 1 column.
   Cards do not stretch sideways.
   Buttons stay inside cards.
   Details render clean.
   ========================================================= */

[data-page="client:gallery"] .client-page {
  width: min(1120px, calc(100% - 32px)) !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
}

[data-page="client:gallery"] .client-media-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

[data-page="client:gallery"] .client-media-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-radius: 24px !important;
}

[data-page="client:gallery"] .client-media-placeholder {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 300px !important;
  aspect-ratio: 4 / 3 !important;
  box-sizing: border-box !important;
  cursor: zoom-in !important;
}

[data-page="client:gallery"] .client-media-body {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

[data-page="client:gallery"] .client-media-top {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

[data-page="client:gallery"] .client-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 86px !important;
  width: auto !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

[data-page="client:gallery"] .client-media-body h3,
[data-page="client:gallery"] .client-media-body p {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

[data-page="client:gallery"] .client-media-actions,
[data-page="client:gallery"] .client-media-actions.primary-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

[data-page="client:gallery"] .client-media-actions .button,
[data-page="client:gallery"] .client-media-actions.primary-actions .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

[data-page="client:gallery"] .client-details {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-top: 4px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
  box-sizing: border-box !important;
}

[data-page="client:gallery"] .client-details summary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 32px !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  list-style: none !important;
}

[data-page="client:gallery"] .client-details summary::-webkit-details-marker {
  display: none !important;
}

[data-page="client:gallery"] .client-details summary::after {
  content: "+" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 3px !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

[data-page="client:gallery"] .client-details[open] summary::after {
  content: "−" !important;
}

[data-page="client:gallery"] .client-media-meta {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-top: 8px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
  background: #faf8f3 !important;
  color: #444 !important;
}

[data-page="client:gallery"] .client-media-meta span {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: #444 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 820px) {
  [data-page="client:gallery"] .client-page {
    width: min(100% - 22px, 1120px) !important;
  }

  [data-page="client:gallery"] .client-media-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  [data-page="client:gallery"] .client-media-placeholder {
    min-height: 280px !important;
    aspect-ratio: 4 / 3 !important;
  }
}

@media (max-width: 520px) {
  [data-page="client:gallery"] .client-media-actions,
  [data-page="client:gallery"] .client-media-actions.primary-actions {
    grid-template-columns: 1fr !important;
  }

  [data-page="client:gallery"] .client-media-actions .button,
  [data-page="client:gallery"] .client-media-actions.primary-actions .button {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}


/* =========================================================
   CLIENT GALLERY: FINAL FILTER ROW FIX
   Keeps All / Pending / Private / Public / Hidden side-by-side.
   Only stacks naturally on very small screens.
   ========================================================= */

[data-page="client:gallery"] .client-filter-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  overflow: visible !important;
}

[data-page="client:gallery"] .client-filter {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 96px !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  text-align: center !important;
}

@media (max-width: 820px) {
  [data-page="client:gallery"] .client-filter-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    gap: 10px !important;
  }

  [data-page="client:gallery"] .client-filter {
    width: auto !important;
    min-width: 104px !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 520px) {
  [data-page="client:gallery"] .client-filter-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  [data-page="client:gallery"] .client-filter {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* =========================================================
   CLIENT RAIL: FINAL NO-WRAP FIX
   Keeps Dashboard / Providers / Appointments / Transactions /
   Styles / Gallery / Settings on one horizontal row.
   Settings no longer drops to second line on tablet widths.
   ========================================================= */

[data-page^="client:"] .client-rail {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 0 6px !important;
  margin: 0 0 22px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

[data-page^="client:"] .client-rail::-webkit-scrollbar {
  display: none !important;
}

[data-page^="client:"] .client-rail-link {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  min-width: max-content !important;
  width: auto !important;
  padding: 12px 18px !important;
  text-align: center !important;
}

@media (max-width: 820px) {
  [data-page^="client:"] .client-rail {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
    margin-bottom: 18px !important;
  }

  [data-page^="client:"] .client-rail-link {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    width: auto !important;
    padding: 11px 16px !important;
  }
}

/* =========================================================
   CLIENT GALLERY: HARD MODAL FIX
   Fixes media text appearing in page corner after click.
   ========================================================= */

[data-page="client:gallery"] .gallery-media-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 22px !important;
  background: rgba(0,0,0,.72) !important;
  box-sizing: border-box !important;
}

[data-page="client:gallery"] .gallery-media-modal.is-open {
  display: flex !important;
}

[data-page="client:gallery"] .gallery-media-modal-box {
  position: relative !important;
  width: min(760px, 100%) !important;
  max-height: min(760px, calc(100vh - 44px)) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 28px !important;
  background: #fff !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.35) !important;
  overflow: hidden !important;
}

[data-page="client:gallery"] .gallery-media-modal-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 2 !important;
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

[data-page="client:gallery"] .gallery-media-modal-content {
  width: 100% !important;
  min-height: 520px !important;
  display: grid !important;
  place-items: center !important;
  padding: 40px !important;
  background: linear-gradient(135deg, #f4f0e7, #fff) !important;
  color: #6d5734 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  [data-page="client:gallery"] .gallery-media-modal {
    padding: 14px !important;
  }

  [data-page="client:gallery"] .gallery-media-modal-box {
    border-radius: 22px !important;
  }

  [data-page="client:gallery"] .gallery-media-modal-content {
    min-height: 420px !important;
    padding: 28px !important;
    font-size: 15px !important;
  }
}

/* =========================================================
   CLIENT GALLERY: SINGLE FINAL MODAL
   ========================================================= */

[data-page="client:gallery"] .gallery-media-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 22px !important;
  background: rgba(0,0,0,.72) !important;
  box-sizing: border-box !important;
}

[data-page="client:gallery"] .gallery-media-modal.is-open {
  display: flex !important;
}

[data-page="client:gallery"] .gallery-media-modal-box {
  position: relative !important;
  width: min(760px, 100%) !important;
  max-height: calc(100vh - 44px) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 28px !important;
  background: #fff !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.35) !important;
  overflow: hidden !important;
}

[data-page="client:gallery"] .gallery-media-modal-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 2 !important;
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

[data-page="client:gallery"] .gallery-media-modal-content {
  width: 100% !important;
  min-height: 520px !important;
  display: grid !important;
  place-items: center !important;
  padding: 40px !important;
  background: linear-gradient(135deg, #f4f0e7, #fff) !important;
  color: #6d5734 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  [data-page="client:gallery"] .gallery-media-modal {
    padding: 14px !important;
  }

  [data-page="client:gallery"] .gallery-media-modal-content {
    min-height: 420px !important;
    padding: 28px !important;
    font-size: 15px !important;
  }
}

/* =========================================================
   MANAGE BOOKING ROADWAY
   Structural route for guest/client booking management.
   ========================================================= */

.manage-booking-page {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 52px;
}

.manage-booking-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(0,0,0,.05);
}

.manage-booking-card.primary {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-bottom: 16px;
}

.manage-booking-card h1,
.manage-booking-card h2 {
  margin: 0;
  letter-spacing: -.02em;
}

.manage-booking-card h1 {
  font-size: 32px;
}

.manage-booking-card h2 {
  font-size: 21px;
}

.manage-booking-card p {
  margin: 0;
  color: #555;
  line-height: 1.45;
}

.manage-booking-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.manage-booking-id-box {
  display: grid;
  gap: 5px;
  min-width: 230px;
  padding: 14px;
  border-radius: 18px;
  background: #faf8f3;
  border: 1px solid rgba(0,0,0,.08);
}

.manage-booking-id-box strong {
  font-size: 18px;
}

.manage-booking-id-box span {
  color: #555;
  font-size: 14px;
}

.manage-booking-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 900px) {
  .manage-booking-card.primary,
  .manage-booking-grid {
    grid-template-columns: 1fr;
  }

  .manage-booking-id-box {
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .manage-booking-page {
    width: min(100% - 22px, 1120px);
    padding-top: 20px;
  }

  .manage-booking-card {
    padding: 14px;
    border-radius: 18px;
  }

  .manage-booking-card h1 {
    font-size: 27px;
  }

  .manage-booking-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .manage-booking-actions .button {
    width: 100%;
  }
}