@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+Arabic:wght@400;500;600;700;800;900&family=Noto+Sans+Hebrew:wght@400;500;600;700;800;900&family=Noto+Sans:wght@400;500;600;700;800;900&display=swap");

:root {
  color-scheme: light;
  --font-ui: "Noto Sans Hebrew", "Noto Sans", "Inter", Arial, "Segoe UI", sans-serif;
  --ink: #17202a;
  --muted: #617184;
  --line: #cfd8df;
  --panel: #ffffff;
  --soft: #f3f7fa;
  --public-bg: #3a123f;
  --public-bg-2: #4a1851;
  --accent: #1b8f6a;
  --accent-strong: #0f7555;
  --warn: #e0b426;
  --danger: #c93b45;
  --booked: #f2a0a4;
  --free: #d8e7f0;
  --blocked: #a9afb7;
  --radius: 8px;
  font-family: var(--font-ui);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--soft);
  font-family: var(--font-ui);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

html[lang="ar"] body {
  font-family: "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans", Arial, sans-serif;
}

html[lang="ru"] body {
  font-family: "Inter", "Noto Sans Hebrew", "Noto Sans", Arial, sans-serif;
}

html[lang="en"] body {
  font-family: "Inter", "Noto Sans Hebrew", "Noto Sans", Arial, sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: .6;
}

a {
  color: inherit;
}

.public-shell {
  background:
    radial-gradient(circle at 80% 0%, rgba(43, 128, 116, .32), transparent 34rem),
    linear-gradient(180deg, var(--public-bg), var(--public-bg-2));
  color: #fff;
}

.booking-stage {
  width: min(1060px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 24px 0 34px;
  position: relative;
}

.is-embed-booking .booking-stage {
  width: min(820px, calc(100vw - 148px));
  padding-top: 18px;
}

.is-embed-booking .public-toolbar,
.is-embed-booking .week-title {
  display: none !important;
}

.public-toolbar,
.admin-header,
.admin-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.public-toolbar h1,
.admin-header h1 {
  margin: 0 0 4px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0;
}

.public-toolbar p,
.admin-header p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
}

.toolbar-actions,
.admin-links {
  display: flex;
  align-items: center;
  gap: 10px;
}

.public-language-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
}

.public-language-switch button {
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  padding: 4px 9px;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  font-weight: 900;
}

.public-language-switch button.active {
  background: #fff;
  color: var(--public-bg);
}

select,
input,
textarea {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: #f5f7f9;
  color: var(--ink);
}

textarea {
  resize: vertical;
}

.link-button,
.primary-button,
.secondary-button,
.danger-button,
.danger-outline-button,
.success-button,
.icon-button,
.round-nav {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
}

.link-button,
.secondary-button {
  border-color: var(--line);
  background: #f3f5f7;
  color: var(--ink);
}

.primary-button {
  background: var(--accent);
  color: #fff;
}

.primary-button:hover {
  background: var(--accent-strong);
}

.danger-button {
  background: var(--danger);
  color: #fff;
}

.danger-outline-button {
  border-color: rgba(201, 59, 69, .55);
  background: #fff;
  color: var(--danger);
}

.danger-outline-button:hover {
  background: #fff5f6;
  border-color: var(--danger);
}

.success-button {
  background: #1fb461;
  color: #fff;
}

.success-button:hover {
  background: #179a50;
}

.week-nav {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 12px;
  margin: 28px 0 18px;
}

.is-embed-booking .week-nav {
  position: absolute;
  inset-inline: -62px;
  top: 50%;
  z-index: 3;
  display: block;
  height: 0;
  margin: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

.is-embed-booking .round-nav {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  pointer-events: auto;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 48px;
  width: 44px;
  min-height: 56px;
  box-shadow: none;
}

.is-embed-booking #prevWeek {
  left: 0;
  right: auto;
}

.is-embed-booking #nextWeek {
  left: auto;
  right: 0;
}

html[dir="rtl"] .is-embed-booking #prevWeek {
  left: auto;
  right: 0;
}

html[dir="rtl"] .is-embed-booking #nextWeek {
  left: 0;
  right: auto;
}

html[dir="ltr"] #prevWeek {
  grid-column: 1;
  grid-row: 1;
}

html[dir="ltr"] .week-title {
  grid-column: 2;
  grid-row: 1;
}

html[dir="ltr"] #nextWeek {
  grid-column: 3;
  grid-row: 1;
}

.week-title {
  text-align: center;
  font-weight: 800;
  color: rgba(255, 255, 255, .86);
}

.round-nav,
.icon-button {
  width: 42px;
  padding: 0;
  font-size: 28px;
  line-height: 1;
  background: #f3f5f7;
  color: var(--ink);
  border-color: var(--line);
}

.week-nav .round-nav {
  transition: opacity .16s ease;
}

body:not(.is-calendar-ready) .week-nav .round-nav {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.public-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(96px, 1fr));
  gap: 14px;
  direction: ltr;
  will-change: transform, opacity;
}

html[dir="rtl"] .public-calendar {
  direction: rtl;
}

.is-embed-booking .public-calendar {
  gap: 26px;
}

.public-calendar.slide-from-right {
  animation: calendarSlideFromRight .24s ease-out;
}

.public-calendar.slide-from-left {
  animation: calendarSlideFromLeft .24s ease-out;
}

.public-calendar-loading {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: min(52vh, 360px);
}

.public-calendar-loading span {
  width: 64px;
  height: 64px;
  border: 4px solid rgba(255, 255, 255, .24);
  border-top-color: rgba(255, 255, 255, .96);
  border-radius: 999px;
  animation: publicCalendarSpin .78s linear infinite;
}

@keyframes publicCalendarSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes calendarSlideFromRight {
  from {
    opacity: .55;
    transform: translateX(26px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes calendarSlideFromLeft {
  from {
    opacity: .55;
    transform: translateX(-26px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.day-column {
  min-width: 0;
  direction: inherit;
  display: grid;
  justify-items: center;
  align-content: start;
}

.day-heading {
  text-align: center;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, .94);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.day-heading span {
  display: block;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  margin-top: 3px;
}

.slot-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: min(100%, 72px);
  min-height: 36px;
  margin: 0 auto 9px;
  border-radius: 999px;
  border: 2px solid rgba(178, 182, 190, .82);
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f7 100%);
  color: #4a4651;
  font-family: "Inter", "Noto Sans", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  direction: ltr;
  letter-spacing: 0;
  box-shadow:
    0 1px 3px rgba(15, 10, 20, .22);
}

.slot-pill:hover {
  border-color: var(--danger);
}

.slot-pill small {
  display: block;
  margin-top: 1px;
  font-size: 10px;
  line-height: 1.05;
  font-weight: 700;
  color: #6d6874;
}

.slot-pill.phone-only {
  border-color: rgba(178, 182, 190, .82);
  box-shadow: 0 1px 3px rgba(15, 10, 20, .22);
}

.slot-pill.next-slot {
  border-color: #ffffff;
  background: linear-gradient(180deg, #ffffff 0%, #f6f1fb 100%);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .36),
    0 0 0 6px rgba(128, 94, 152, .22),
    0 8px 18px rgba(0, 0, 0, .18);
}

.night-slot-divider {
  width: min(100%, 86px);
  height: 2px;
  margin: 4px auto 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 1px 0 rgba(87, 54, 103, .35);
  direction: ltr;
}

.night-slot-divider::before,
.night-slot-divider::after {
  display: none;
}

.night-slot-divider span {
  font-size: 0;
}

.slot-pill.unavailable {
  background: transparent;
  color: rgba(255, 255, 255, .22);
  border-color: rgba(178, 182, 190, .82);
  box-shadow: none;
}

.slot-pill.unavailable:hover {
  border-color: rgba(178, 182, 190, .82);
}

.admin-shell {
  background: #eef3f6;
}

.admin-header {
  padding: 22px 26px;
  background:
    linear-gradient(135deg, rgba(22, 91, 105, .95), rgba(17, 46, 68, .98)),
    #123247;
  color: #fff;
  box-shadow: 0 14px 40px rgba(19, 49, 68, .18);
}

.admin-title {
  display: grid;
  gap: 4px;
}

.admin-kicker {
  color: #8be0c2;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-header p {
  color: rgba(255, 255, 255, .72);
}

.admin-header p.success {
  color: #8be0c2;
}

.admin-header p.error {
  color: #ffb7bd;
}

.admin-toast {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 10000;
  width: min(420px, calc(100vw - 36px));
  min-height: 46px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  box-shadow: 0 18px 50px rgba(15, 30, 44, .22);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.admin-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.admin-toast.success {
  background: rgba(20, 151, 96, .9);
}

.admin-toast.error {
  background: rgba(201, 59, 69, .92);
}

.admin-toast.info {
  background: rgba(45, 112, 180, .9);
}

.admin-links a {
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 6px;
  padding: 9px 13px;
  background: rgba(255, 255, 255, .08);
  text-decoration: none;
}

.admin-links {
  flex-wrap: wrap;
}

.admin-main {
  width: 100%;
  padding: 20px 22px 34px;
  background: #fff;
}

.full-width-page {
  max-width: none;
}

.admin-controls {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.date-control,
.stat-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-status {
  color: rgba(255, 255, 255, .72);
  font-weight: 700;
}

.stat-chip {
  min-width: 92px;
  min-height: 52px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid #d7e0e6;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(29, 58, 76, .06);
}

.stat-chip span {
  font-size: 20px;
  font-weight: 900;
}

.stat-chip small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
}

.stat-chip small i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 999px;
}

.booking-stats {
  justify-content: flex-end;
  flex: 1 1 520px;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 10px;
}

.total-bookings-stat {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  min-height: 34px;
  padding: 5px 10px;
  border-color: rgba(27, 143, 106, .28);
  border: 1px solid rgba(27, 143, 106, .28);
  border-radius: 8px;
  background: #f7fffb;
}

.total-bookings-stat small {
  color: #526474;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.total-bookings-stat strong {
  color: var(--accent-strong);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.game-stats-row {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
  scrollbar-width: thin;
}

.game-stat-pill {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid #dce6ec;
  border-radius: 999px;
  background: #fff;
  color: #3d5062;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.game-stat-pill i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 999px;
}

.game-stat-pill strong {
  color: #17202a;
  font-size: 14px;
  font-weight: 900;
}

.timeline-shell {
  overflow-x: auto;
  overflow-y: hidden;
  overflow-anchor: none;
  border: 1px solid #d3dde4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 60px rgba(20, 48, 64, .09);
}

.admin-calendar {
  min-width: 1460px;
}

.timeline-board {
  display: grid;
  grid-template-columns: 72px 1fr;
  min-height: calc(var(--timeline-height) + 54px);
}

.time-axis {
  background: #f7fafc;
  border-inline-start: 1px solid #e0e7ec;
}

.axis-spacer {
  height: 54px;
}

.axis-body,
.timeline-body,
.lane-body {
  position: relative;
}

.time-mark {
  position: absolute;
  inset-inline: 0;
  height: 1px;
  border-top: 1px solid #e7edf1;
  color: #718091;
  font-size: 12px;
  font-weight: 800;
}

.axis-body .time-mark span {
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  text-align: center;
}

.axis-body .time-mark {
  border-top: 0;
}

.timeline-body {
  overflow: visible;
  background: #edf2f5;
}

.night-band {
  position: absolute;
  z-index: 0;
  inset-inline: 0;
  background: #d8e0e6;
  pointer-events: none;
}

.hour-grid {
  position: absolute;
  z-index: 1;
  top: 54px;
  left: 0;
  right: 0;
  height: var(--timeline-height);
  pointer-events: none;
}

.hour-grid .time-mark span {
  display: none;
}

.hour-grid .time-mark {
  border-top-color: rgba(74, 93, 108, .26);
}

.hour-grid .hour-mark {
  border-top-color: rgba(53, 73, 88, .38);
}

.hour-grid .half-hour-mark {
  border-top-color: rgba(74, 93, 108, .24);
}

.resource-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(9, minmax(150px, 1fr));
  min-height: calc(var(--timeline-height) + 54px);
}

.resource-lane {
  position: relative;
  border-inline-start: 1px solid #e0e7ec;
}

.resource-lane.lane-hover {
  background: rgba(27, 143, 106, .05);
}

.resource-head {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid #e0e7ec;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  text-align: center;
}

.resource-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.lane-body {
  background: transparent;
}

.settings-main {
  display: grid;
  justify-items: stretch;
}

.settings-panel {
  width: 100%;
  overflow: hidden;
  border: 1px solid #d3dde4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 60px rgba(20, 48, 64, .09);
}

.settings-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px;
  border-bottom: 1px solid #dfe8ee;
  background: #f8fbfd;
}

.settings-tab {
  border-color: transparent;
  background: transparent;
  color: #405365;
}

.settings-tab.is-active {
  border-color: rgba(27, 143, 106, .28);
  background: #e9f6f0;
  color: var(--accent-strong);
}

.settings-tab-panels {
  min-height: 430px;
}

.settings-panel .form-section {
  padding: 24px;
}

.settings-panel h2 {
  margin: 0 0 16px;
  font-size: 20px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.settings-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 18px 24px;
  border: 1px solid #dfe8ee;
  border-radius: 8px;
  background: #fbfdfe;
  color: var(--muted);
  font-weight: 800;
}

.settings-preview strong {
  color: var(--ink);
  font-size: 20px;
}

.settings-actions {
  border: 0;
}

.clients-panel {
  overflow: visible;
}

.clients-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #dfe8ee;
  background: #f8fbfd;
}

.clients-toolbar label {
  display: grid;
  gap: 5px;
  min-width: min(420px, 100%);
  color: #3c4d5f;
  font-weight: 800;
}

.clients-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px 0;
}

.danger-stat span {
  color: var(--danger);
}

.club-stat span {
  color: var(--accent-strong);
}

.clients-table-wrap {
  width: 100%;
  overflow: auto;
  padding: 16px;
}

.clients-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #d7e0e6;
  border-radius: 8px;
  background: #fff;
}

.clients-table th,
.clients-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #e4ebf0;
  text-align: right;
  vertical-align: top;
  font-size: 12px;
  line-height: 1.25;
}

.clients-table th {
  background: #f1f6f9;
  color: #425668;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.clients-table tr:last-child td {
  border-bottom: 0;
}

.clients-table td strong,
.clients-table td small {
  display: block;
}

.clients-table td small {
  color: var(--muted);
  font-size: 10px;
}

.account-logins-table {
  min-width: 1180px;
}

.club-discounts-toolbar {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.club-discounts-toolbar label {
  min-width: min(280px, 100%);
}

.club-discounts-toolbar button {
  margin-inline-start: auto;
}

.club-discounts-table {
  min-width: 1320px;
}

.club-discounts-table th {
  background: #7d3c98;
  color: #fff;
}

.club-discounts-table tr:nth-child(even) td {
  background: #fbf7ed;
}

.club-discounts-table td {
  white-space: nowrap;
}

.account-login-tech {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clients-table tr.is-risk-client {
  background: #fff6f7;
}

.client-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 2px 7px;
  border: 1px solid #d7e0e6;
  border-radius: 999px;
  background: #f4f7f9;
  color: #526474;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.client-status-chip.is-club {
  border-color: rgba(27, 143, 106, .28);
  background: #e9f6f0;
  color: var(--accent-strong);
}

.club-admin-toolbar {
  flex-wrap: wrap;
}

.club-admin-toolbar select {
  min-width: 220px;
}

.club-admin-actions {
  display: flex;
  gap: 8px;
}

.club-members-table {
  min-width: 1080px;
}

.club-actions-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.club-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px 18px;
  color: var(--muted);
  font-weight: 800;
}

.club-member-panel {
  width: min(780px, calc(100vw - 24px));
}

.club-member-checkbox {
  align-self: end;
  min-height: 42px;
}

.client-note-cell {
  max-width: 90px;
  color: #405365;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-email-cell {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-button {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 12px;
}

.compact-icon-button {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  font-size: 18px;
}

.client-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.client-table-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}

.modal-actions .client-inline-actions {
  margin-top: 0;
}

.empty-table {
  padding: 18px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.client-modal-panel {
  width: min(760px, calc(100vw - 24px));
  max-height: min(92vh, 820px);
  overflow: auto;
}

.client-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dfe8ee;
}

.client-risk-badge {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: #d93649;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.client-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.client-card-grid > div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #dfe8ee;
  border-radius: 8px;
  background: #fbfdfe;
}

.client-card-grid strong {
  color: #596b7d;
  font-size: 12px;
}

.client-card-grid span {
  font-weight: 900;
}

.client-summary-list {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dfe8ee;
}

.client-summary-list > div {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.client-summary-list strong {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  line-height: 1.2;
}

.client-summary-list span {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #1f3142;
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-card-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid #dfe8ee;
  border-radius: 8px;
  background: #f8fbfd;
}

.client-card-tab {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 12px;
  background: transparent;
  color: #405365;
  font-weight: 900;
}

.client-card-tab.is-active {
  border-color: rgba(27, 143, 106, .28);
  background: #e9f6f0;
  color: var(--accent-strong);
}

.client-note-section,
.client-profile-section,
.client-bookings-section {
  padding: 16px 0 0;
}

.client-profile-section h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

.client-profile-section .form-grid {
  gap: 8px 12px;
}

.client-profile-section label {
  display: grid;
  gap: 4px;
  color: #405365;
  font-size: 12px;
  font-weight: 900;
}

.client-profile-section input {
  min-height: 34px;
}

.client-profile-section input[readonly] {
  background: #f2f6f8;
  color: #5b6b7c;
}

.client-profile-section input:disabled {
  cursor: not-allowed;
}

.client-profile-section input.is-invalid {
  border-color: var(--danger);
  background: #fff7f8;
  box-shadow: 0 0 0 2px rgba(201, 59, 69, .12);
}

.client-club-toggle {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  align-self: end;
  gap: 8px;
  min-height: 42px;
}

.client-club-toggle input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
}

.client-note-section textarea {
  width: 100%;
  margin-top: 6px;
}

.client-note-section .checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 24px;
  margin: 0 0 10px;
  color: #405365;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.client-note-section .checkbox-row input {
  display: block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
}

.client-note-section .checkbox-row span {
  display: block;
  line-height: 16px;
}

.client-page-actions .primary-button:disabled {
  border-color: #d2d8df;
  background: #d9dee4;
  color: #7a8794;
  opacity: 1;
}

.client-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.client-section-head h3 {
  margin: 0;
  font-size: 15px;
}

.client-section-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.client-club-discounts-section {
  border-top: 1px solid #dfe8ee;
}

.client-discount-notice {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.client-discount-alert {
  padding: 8px 10px;
  border: 1px solid #f1cdd1;
  border-radius: 6px;
  background: #fff6f7;
  color: #8f2b35;
  font-size: 12px;
  font-weight: 900;
}

.client-discount-alert.is-success {
  border-color: rgba(27, 143, 106, .25);
  background: #eaf7f1;
  color: var(--accent-strong);
}

.birthday-id-dialog {
  width: min(560px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 24px);
  overflow: hidden;
}

.modal-panel.birthday-id-panel {
  width: 100%;
  max-width: 100%;
  max-height: calc(100vh - 24px);
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: #f8fbfd;
  text-align: right;
}

.birthday-id-dialog .birthday-id-head {
  padding: 14px 18px 10px 48px;
  border-bottom: 1px solid #d8e2e8;
  background: #fff;
}

.birthday-id-dialog .birthday-id-head h2 {
  margin: 0;
  color: #1e3142;
  font-size: 18px;
  line-height: 1.25;
}

.birthday-id-dialog .birthday-id-head p {
  margin: 6px 0 0;
  color: #617184;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.birthday-id-dialog .birthday-id-date {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 8px 18px;
  border-bottom: 1px solid #e1e9ee;
  background: #f1f6f9;
  color: #1e3142;
  font-size: 13px;
  font-weight: 900;
}

.birthday-id-dialog .birthday-id-date strong {
  font-size: 16px;
}

.birthday-id-dialog .birthday-id-image-wrap {
  margin: 0;
  padding: 10px 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background: #f8fbfd;
}

.birthday-id-dialog .birthday-id-image {
  display: block;
  width: min(420px, 100%);
  max-width: min(420px, 100%);
  max-height: clamp(180px, 34vh, 270px);
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  border: 1px solid #d7e0e6;
  border-radius: 8px;
  background: #fff;
}

.birthday-id-image[hidden],
.birthday-id-card[hidden] {
  display: none;
}

.birthday-id-card {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 0 auto;
  width: min(100%, 610px);
  max-width: 100%;
  padding: 18px 20px;
  border: 1px solid #b9d9e6;
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 28%, rgba(49, 172, 208, .26), transparent 22%),
    radial-gradient(circle at 78% 70%, rgba(78, 183, 181, .22), transparent 26%),
    linear-gradient(135deg, #d9f1f8 0%, #f4fbff 48%, #d8eef7 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 10px 22px rgba(31, 49, 66, .16);
}

.birthday-id-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #24516a;
  font-size: 18px;
  font-weight: 900;
}

.birthday-id-card-body {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 132px;
  gap: 18px;
  align-items: center;
}

.birthday-id-chip {
  width: 78px;
  height: 58px;
  border: 2px solid #b98425;
  border-radius: 12px;
  background:
    linear-gradient(90deg, transparent 46%, #b98425 46% 50%, transparent 50%),
    linear-gradient(#f5d476, #dfb84f);
}

.birthday-id-lines {
  display: grid;
  gap: 12px;
  color: #24475c;
  font-size: 14px;
  font-weight: 850;
  text-align: center;
}

.birthday-id-lines span {
  min-height: 16px;
  border-bottom: 1px solid rgba(36, 71, 92, .28);
}

.birthday-id-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px !important;
  border: 0 !important;
}

.birthday-id-mark::before {
  content: "";
  position: absolute;
  inset: -7px -18px;
  border: 5px solid #e52626;
  border-radius: 50%;
  transform: rotate(-5deg);
}

.birthday-id-mark b {
  position: relative;
  z-index: 1;
  color: #152a3d;
  font-size: 18px;
}

.birthday-id-photo {
  width: 118px;
  height: 150px;
  border-radius: 46% 46% 18px 18px;
  background:
    radial-gradient(circle at 50% 31%, #c5a08a 0 22%, transparent 23%),
    linear-gradient(#5f6d7e 0 38%, #273342 39% 100%);
  opacity: .72;
}

.birthday-id-dialog .birthday-id-actions {
  margin: 0;
  padding: 10px 18px;
  border-top: 1px solid #d8e2e8;
  background: #fff;
}

.birthday-id-dialog .modal-actions-main {
  flex-wrap: wrap;
}

.birthday-id-dialog .modal-actions-main button {
  min-height: 36px;
}

.birthday-id-dialog #birthdayIdCancel {
  border-color: #f28a25;
  background: #f28a25;
  color: #fff;
}

.birthday-id-dialog #birthdayIdCancel:hover {
  background: #df7512;
}

.sms-consent-dialog {
  width: min(560px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  overflow: hidden;
}

.modal-panel.sms-consent-panel {
  width: 100%;
  max-width: 100%;
  gap: 12px;
  padding: 22px 24px 20px;
  overflow: hidden;
  border: 1px solid #d8e2e8;
  background: #fff;
  color: #1e3142;
  text-align: right;
}

.modal-panel.sms-consent-panel .modal-close {
  top: 10px;
  left: 10px;
  background: #eef3f6;
  color: #26384a;
  font-size: 20px;
}

.modal-panel.sms-consent-panel h2 {
  margin: 0;
  padding-inline-start: 36px;
  color: #1e3142;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.25;
}

.modal-panel.sms-consent-panel p {
  margin: 0;
  color: #405365;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.modal-panel.sms-consent-panel .sms-consent-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 8px;
}

.modal-panel.sms-consent-panel .sms-consent-actions button {
  min-width: 132px;
}

.client-discount-controls {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(240px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

.client-discount-controls label {
  display: grid;
  gap: 5px;
  color: #405365;
  font-size: 12px;
  font-weight: 900;
}

.client-discount-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.client-discounts-table-wrap {
  overflow: auto;
}

.client-discounts-table {
  min-width: 720px;
}

.client-discounts-table th {
  background: #7d3c98;
  color: #fff;
}

.client-discounts-table td {
  white-space: nowrap;
}

.client-discount-delete-cell {
  text-align: left;
  width: 1%;
}

.club-discount-rules {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.club-discount-settings {
  display: grid;
  gap: 10px;
}

.club-discount-card {
  border: 1px solid #d7e0e6;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.club-discount-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #e5edf2;
  background: #f7fafc;
}

.club-discount-card-head h3 {
  margin: 0;
  color: #1e3142;
  font-size: 14px;
  line-height: 1.25;
}

.club-discount-card-head p {
  margin: 2px 0 0;
  color: #617184;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.club-discount-card-body {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
}

.club-discount-card-body .settings-help {
  margin: 0;
  color: #617184;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

.club-discount-switch {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 0;
  color: #405365;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.club-settings-section .switch-field {
  min-height: 28px;
  gap: 7px;
  color: #405365;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}

.club-settings-section .switch-field input {
  width: 16px;
  height: 16px;
}

.club-discount-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.club-discount-grid label {
  gap: 4px;
  color: #405365;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
}

.club-discount-grid input,
.club-discount-grid select {
  min-height: 32px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 800;
}

.compact-preview {
  margin: 0;
  min-height: 34px;
  padding: 7px 10px;
  font-size: 11px;
  line-height: 1.25;
}

.compact-preview strong {
  font-size: 13px;
  line-height: 1.25;
}

.club-discount-rule-row {
  display: grid;
  grid-template-columns: 78px repeat(3, minmax(110px, 1fr)) auto;
  gap: 8px;
  align-items: end;
  padding: 8px;
  border: 1px solid #d7e0e6;
  border-radius: 8px;
  background: #f8fbfd;
}

.club-discount-rule-row strong {
  align-self: center;
  color: #405365;
  font-size: 12px;
  line-height: 1.2;
}

.club-settings-section h3 {
  margin: 14px 0 6px;
  font-size: 14px;
}

.club-settings-section .club-discount-card-head h3 {
  margin: 0;
  font-size: 14px;
}

.club-custom-discounts {
  display: grid;
  gap: 8px;
}

.club-custom-discount-row {
  border: 1px solid #d7e0e6;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.club-custom-discount-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid #e5edf2;
  background: #f8fbfd;
}

.club-custom-discount-head strong,
.club-custom-discount-head span {
  display: block;
}

.club-custom-discount-head strong {
  color: #405365;
  font-size: 13px;
  line-height: 1.2;
}

.club-custom-discount-head span {
  margin-top: 2px;
  color: #617184;
  font-size: 11px;
  font-weight: 800;
}

.club-custom-discount-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.club-custom-discount-row > .settings-grid {
  padding: 10px;
}

.settings-panel .club-settings-section .club-discount-card-head h3,
.settings-panel .club-settings-section h3 {
  font-size: 14px;
  line-height: 1.25;
}

.settings-panel .club-settings-section .settings-grid label,
.settings-panel .club-settings-section .club-discount-rule-row label {
  gap: 4px;
  color: #405365;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
}

.settings-panel .club-settings-section input:not([type="checkbox"]),
.settings-panel .club-settings-section select {
  min-height: 32px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.settings-panel .club-settings-section .switch-field {
  min-height: 28px;
  font-size: 12px;
  line-height: 1.2;
}

.settings-panel .club-settings-section .switch-field input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.settings-panel .club-settings-section .compact-preview {
  min-height: 34px;
  padding: 7px 10px;
}

.settings-panel .club-settings-section .compact-preview span {
  font-size: 11px;
  line-height: 1.25;
}

.settings-panel .club-settings-section .compact-preview strong {
  font-size: 13px;
  line-height: 1.25;
}

.settings-panel .club-settings-section .compact-button {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 12px;
}

.client-bookings-section h3 {
  margin: 0 0 10px;
  font-size: 17px;
}

.client-history-section h3 {
  margin: 0 0 10px;
  font-size: 17px;
}

.client-bookings-list,
.client-history-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
}

.client-bookings-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid #d7e0e6;
  border-radius: 8px;
  background: #fff;
}

.client-bookings-table,
.client-booking-history-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}

.client-bookings-table {
  min-width: 1040px;
}

.client-bookings-table th,
.client-bookings-table td,
.client-booking-history-table th,
.client-booking-history-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #e3ebf0;
  text-align: right;
  vertical-align: top;
}

.client-bookings-table th,
.client-booking-history-table th {
  background: #f3f7fa;
  color: #405365;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.client-bookings-table td {
  color: #26384a;
  font-size: 13px;
  font-weight: 800;
}

.client-bookings-table td strong,
.client-bookings-table td small {
  display: block;
}

.client-bookings-table td small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.client-bookings-table tr.is-canceled-booking > td {
  background: #fff7f7;
  color: #8f2b35;
}

.client-booking-history-row > td {
  padding: 0;
  background: #fbfdfe;
}

.client-booking-history-row .client-booking-payments,
.client-booking-note {
  margin: 8px 10px;
}

.client-booking-history-table {
  border-top: 1px solid #dfe8ee;
}

.client-booking-history-table th {
  background: #edf3f7;
}

.client-booking-history-table td {
  color: #34475a;
  font-size: 12px;
  font-weight: 750;
}

.client-booking-history-table td p {
  margin: 0;
  color: #405365;
  white-space: pre-wrap;
}

.client-booking-history-table time {
  color: #596b7d;
  white-space: nowrap;
}

.client-history-change-line {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.client-history-change-line span {
  padding: 3px 6px;
  border-radius: 999px;
  background: #eef5f8;
  color: #405365;
  font-size: 11px;
  line-height: 1.35;
}

.client-history-change-line strong {
  margin-inline-end: 4px;
  color: #1f3142;
}

.client-booking-note {
  color: #3d4f60;
  font-size: 12px;
  font-weight: 800;
  white-space: pre-wrap;
}

.client-booking-item {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #dfe8ee;
  border-radius: 8px;
  background: #fff;
}

.client-booking-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.client-booking-head strong,
.client-booking-head span,
.client-booking-head small {
  display: block;
}

.client-booking-head small {
  color: var(--muted);
  font-weight: 800;
}

.client-booking-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.client-booking-meta span {
  padding: 3px 7px;
  border-radius: 999px;
  background: #f0f5f8;
  color: #405365;
  font-size: 11px;
  font-weight: 900;
}

.client-booking-item p {
  margin: 6px 0 0;
  color: #3d4f60;
  white-space: pre-wrap;
}

.client-booking-payments {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.client-booking-payments span {
  padding: 3px 7px;
  border-radius: 999px;
  background: #eef7f2;
  color: #116447;
  font-size: 11px;
  font-weight: 900;
}

.client-booking-history-details {
  border-top: 1px solid #e4ebf0;
  padding-top: 8px;
}

.client-booking-history-details summary {
  cursor: pointer;
  color: #253746;
  font-weight: 900;
}

.client-booking-history {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.client-booking-history-item {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 10px;
  padding: 8px;
  border-radius: 7px;
  background: #f8fbfd;
}

.client-booking-history-item time {
  color: #596b7d;
  font-size: 12px;
  font-weight: 900;
}

.client-booking-history-item strong,
.client-booking-history-item small {
  display: block;
}

.client-booking-history-item small {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
}

.client-booking-empty-history {
  padding: 8px;
  color: var(--muted);
  font-weight: 800;
}

.client-history-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid #d7e0e6;
  border-radius: 8px;
  background: #fff;
}

.client-history-table {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}

.client-history-table th,
.client-history-table td {
  padding: 7px 9px;
  border-bottom: 1px solid #e4ebf0;
  text-align: right;
  vertical-align: top;
  font-size: 12px;
  line-height: 1.25;
}

.client-history-table th {
  background: #f1f6f9;
  color: #425668;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.client-history-table tr:last-child td {
  border-bottom: 0;
}

.client-history-table time {
  color: #516274;
  font-weight: 900;
  white-space: nowrap;
}

.client-history-action {
  max-width: 360px;
  color: #1e3142;
  font-weight: 900;
}

.client-history-detail {
  max-width: 520px;
  color: #405365;
  font-weight: 750;
  overflow-wrap: anywhere;
  white-space: normal;
}

.client-history-changes {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.client-history-changes li {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 6px 8px;
  border-radius: 6px;
  background: #f8fbfd;
  color: #405365;
  font-size: 12px;
}

.client-history-changes strong {
  color: #253746;
}

.client-history-changes span {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.client-messages-section h3 {
  margin: 0 0 10px;
  font-size: 17px;
}

.client-messages-list {
  display: grid;
  gap: 8px;
  max-height: 430px;
  overflow: auto;
}

.client-detail-main {
  background: #eef3f6;
}

.client-detail-panel {
  overflow: visible;
}

.client-page-head {
  padding: 18px 20px;
  background: #fff;
}

.client-detail-panel .client-card-grid,
.client-detail-panel .client-card-tabs {
  margin-inline: 20px;
}

.client-detail-panel .client-card-grid {
  margin-top: 18px;
}

.client-club-block {
  grid-column: span 2;
}

.client-internal-note-block {
  grid-column: span 2;
}

.client-club-block span {
  line-height: 1.45;
}

.client-internal-note-block span {
  white-space: pre-wrap;
}

.client-detail-panel .form-section {
  padding: 20px;
}

.client-detail-panel .client-bookings-list,
.client-detail-panel .client-history-list,
.client-detail-panel .client-messages-list {
  max-height: none;
  overflow: visible;
}

.client-detail-panel .client-booking-item,
.client-detail-panel .client-history-item {
  padding: 14px;
}

.client-page-actions {
  margin-top: 0;
  padding: 16px 20px;
  border-top: 1px solid #dfe8ee;
  background: #f8fbfd;
}

.client-messages-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid #d7e0e6;
  border-radius: 8px;
  background: #fff;
}

.client-messages-table {
  width: 100%;
  min-width: 1280px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}

.client-messages-table th,
.client-messages-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #e4ebf0;
  text-align: right;
  vertical-align: top;
  font-size: 12px;
  line-height: 1.25;
}

.client-messages-table th {
  background: #f1f6f9;
  color: #425668;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.client-messages-table tr:last-child td {
  border-bottom: 0;
}

.client-messages-table time {
  color: #516274;
  font-weight: 900;
  white-space: nowrap;
}

.client-message-booking {
  display: grid;
  gap: 2px;
  min-width: 150px;
}

.client-message-booking strong {
  color: #26384a;
  font-weight: 900;
  line-height: 1.2;
}

.client-message-booking small {
  color: #617184;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.client-message-provider {
  max-width: 150px;
  overflow: hidden;
  color: #596b7d;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-message-body {
  min-width: 420px;
  max-width: 720px;
  color: #26384a;
  font-weight: 750;
  white-space: pre-wrap;
}

.account-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 80% 0%, rgba(43, 128, 116, .32), transparent 34rem),
    linear-gradient(180deg, var(--public-bg), var(--public-bg-2));
  color: #fff;
}

.account-shell {
  width: min(520px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 14px 0 28px;
}

.account-panel {
  display: grid;
  gap: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  padding: 14px 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(245, 241, 248, .92)),
    #f4f1f7;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .35);
}

.account-head {
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(94, 73, 113, .18);
  background: transparent;
  text-align: right;
}

.account-head p,
.account-head h1,
.account-head span {
  display: block;
  margin: 0;
}

.account-head p {
  color: #23172c;
  font-family: "Inter", "Noto Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
}

.account-head h1 {
  margin-top: 2px;
  color: #23172c;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: none;
}

.account-head span {
  margin-top: 2px;
  color: #3f334a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.account-authenticated .account-head span {
  display: none;
}

.club-shell {
  padding-top: 24px;
}

.club-panel {
  gap: 12px;
}

.club-form {
  gap: 8px;
}

.club-consent-field {
  align-items: flex-start;
  margin-top: 4px;
  color: #3f334a;
}

.club-consent-field a {
  color: var(--accent-strong);
  font-weight: 900;
}

.club-form .required-field > span::after {
  content: " *";
  color: #c93b45;
  font-weight: 900;
}

.club-form .form-message,
.club-code-form .form-message {
  min-height: 16px;
  font-size: 11px;
  line-height: 1.25;
}

.club-welcome {
  padding: 9px 10px;
  border: 1px solid rgba(27, 143, 106, .24);
  border-radius: 8px;
  background: #effaf5;
  color: #116447;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

.club-code-sent {
  margin: 0;
  color: #3f334a;
  font-size: 12px;
  font-weight: 800;
}

.club-code-form label > span {
  color: #21162e;
  font-size: 15px;
  font-weight: 900;
}

.club-success {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  margin-top: 4px;
  min-height: 160px;
  padding: 28px 14px;
  border: 1px solid rgba(27, 143, 106, .28);
  border-radius: 8px;
  background: #effaf5;
  color: #116447;
  text-align: center;
  overflow: hidden;
}

.club-success > * {
  position: relative;
  z-index: 1;
}

.club-confetti {
  font-size: 34px;
  line-height: 1;
}

.club-success strong {
  color: #0f7555;
  font-size: 18px;
  font-weight: 900;
}

.club-success span {
  color: #185f46;
  font-weight: 700;
}

.account-form {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #493d54;
  box-shadow: none;
}

.account-form label {
  display: grid;
  gap: 4px;
  color: #3c4d5f;
  font-size: 12px;
  font-weight: 800;
}

.account-form input {
  width: 100%;
  height: 30px;
  min-height: 30px;
  border: 1px solid rgba(150, 135, 164, .34);
  border-radius: 6px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, .96);
  color: #26384a;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  direction: ltr;
  text-align: center;
  box-shadow: none;
}

.account-form input[type="tel"] {
  font-family: "Inter", "Noto Sans", Arial, sans-serif;
}

.account-form input::placeholder {
  color: #758493;
  font-family: "Inter", "Noto Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.account-form label.is-invalid {
  color: #b82e3a;
}

.account-form label.is-invalid > span {
  color: #b82e3a;
}

.account-form label.is-invalid input {
  border-color: #c93b45;
  background: #fff7f8;
  box-shadow: 0 0 0 2px rgba(201, 59, 69, .12);
}

.account-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #493d54;
  font-size: 12px;
  font-weight: 900;
}

.account-code-head strong {
  color: #3f334a;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.account-form .account-code-head + label > span {
  color: #21162e;
  font-size: 15px;
  font-weight: 900;
}

.account-code-inputs {
  margin: 2px 0 0;
}

.account-form .form-message {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 16px;
  color: #665d6e;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
}

.account-form .form-message.error {
  color: var(--danger);
}

.account-form .form-message.success {
  color: #594566;
}

.account-form .form-message.loading::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid rgba(111, 61, 131, .2);
  border-top-color: #6f3d83;
  border-radius: 999px;
  animation: account-message-spin .8s linear infinite;
}

@keyframes account-message-spin {
  to {
    transform: rotate(360deg);
  }
}

.link-button {
  border: 0;
  background: transparent;
  color: #6f3d83;
  font-size: 12px;
  font-weight: 900;
  text-decoration: underline;
}

.account-form .primary-button {
  height: 32px;
  min-height: 32px;
  border-color: #6b3a7d;
  background: #6f3d83;
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 900;
}

.account-form .primary-button:hover {
  background: #5b2f6c;
}

.account-dashboard {
  display: grid;
  gap: 8px;
  padding: 0;
  color: #493d54;
}

.account-customer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(94, 73, 113, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .62);
  box-shadow: none;
}

.account-customer span,
.account-customer strong {
  display: block;
}

.account-customer span {
  color: #665d6e;
  font-size: 13px;
  font-weight: 800;
}

.account-customer strong {
  color: #23172c;
  font-size: 22px;
  font-weight: 900;
}

.account-bookings-section {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(94, 73, 113, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .5);
}

.account-bookings-section h2 {
  margin: 0;
  color: #23172c;
  font-size: 16px;
  font-weight: 900;
  text-shadow: none;
}

.account-club-section {
  background: rgba(248, 252, 250, .78);
}

.account-club-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.account-club-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid rgba(117, 82, 139, .18);
  border-radius: 999px;
  background: #f8f5fb;
  color: #594566;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.account-club-chip.is-member {
  border-color: rgba(46, 84, 133, .24);
  background: #f1f6fb;
  color: #294f78;
}

.account-club-details {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) minmax(150px, 1fr) minmax(210px, 1.2fr) auto;
  gap: 8px;
  align-items: end;
  flex: 1 1 100%;
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid rgba(36, 118, 83, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
}

.account-club-field {
  display: grid;
  gap: 4px;
  color: #405365;
  font-size: 12px;
  font-weight: 900;
}

.account-club-field strong {
  display: flex;
  align-items: center;
  min-height: 32px;
  color: #1e3142;
  font-size: 13px;
  font-weight: 900;
}

.account-club-field input {
  min-height: 32px;
  border: 1px solid rgba(150, 135, 164, .32);
  border-radius: 6px;
  padding: 5px 8px;
  background: #fff;
  color: #1e3142;
  font-size: 13px;
  font-weight: 850;
}

.account-club-field input.is-invalid {
  border-color: var(--danger);
  background: #fff7f8;
}

.account-club-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: #405365;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.account-club-toggle input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  accent-color: var(--accent);
}

.account-club-message {
  grid-column: 1 / -1;
  min-height: 16px;
  color: #617184;
  font-size: 12px;
  font-weight: 900;
}

.account-club-message.error {
  color: var(--danger);
}

.account-club-message.success {
  color: var(--accent-strong);
}

.account-discount-list {
  display: grid;
  gap: 8px;
}

.account-discount-card {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid rgba(150, 135, 164, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  color: #263442;
}

.account-discount-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.account-discount-game {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
}

.account-discount-amount {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid rgba(117, 82, 139, .18);
  border-radius: 999px;
  background: #f8f5fb;
  color: #594566;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.account-discount-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.account-discount-meta span {
  padding: 3px 7px;
  border-radius: 999px;
  background: #f3f5f8;
  color: #5c6673;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
}

.account-bookings-section.past h2 {
  color: #665d6e;
}

.account-booking-list {
  display: grid;
  gap: 10px;
}

.account-booking-card {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(150, 135, 164, .26);
  border-inline-start: 4px solid #6f3d83;
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  color: #29303a;
  box-shadow: none;
}

.account-booking-card.is-past {
  border-color: rgba(190, 184, 196, .55);
  border-inline-start-color: #8b8291;
  background: rgba(245, 245, 247, .86);
  color: #5c5663;
  box-shadow: none;
  opacity: .82;
}

.account-booking-card h3 {
  margin: 0;
  color: inherit;
  font-size: 20px;
  font-weight: 900;
}

.account-booking-card time {
  color: inherit;
  font-size: 15px;
  font-weight: 900;
}

.account-booking-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.account-booking-meta span {
  padding: 4px 9px;
  border-radius: 999px;
  background: #f1f4f6;
  color: #405365;
  font-size: 12px;
  font-weight: 900;
}

.account-cancel-button {
  justify-self: start;
  min-height: 36px;
  margin-top: 4px;
  padding: 6px 14px;
}

.account-empty {
  padding: 16px;
  border: 1px dashed rgba(94, 73, 113, .26);
  border-radius: 8px;
  background: rgba(255, 255, 255, .55);
  color: #665d6e;
  font-weight: 900;
  text-align: center;
}

.form-message.success {
  color: var(--accent-strong);
}

@media (max-width: 760px) {
  .birthday-id-dialog {
    width: min(520px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .modal-panel.birthday-id-panel {
    max-height: calc(100vh - 16px);
  }

  .birthday-id-dialog .birthday-id-head {
    padding: 14px 16px 10px 46px;
  }

  .birthday-id-dialog .birthday-id-head h2 {
    font-size: 17px;
  }

  .birthday-id-dialog .birthday-id-head p {
    font-size: 12px;
    line-height: 1.4;
  }

  .birthday-id-dialog .birthday-id-date {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding: 9px 16px;
    font-size: 12px;
  }

  .birthday-id-dialog .birthday-id-date strong {
    font-size: 16px;
  }

  .birthday-id-dialog .birthday-id-image-wrap {
    padding: 10px 12px;
  }

  .birthday-id-dialog .birthday-id-image {
    width: min(360px, 100%);
    max-width: min(360px, 100%);
    max-height: clamp(150px, 30vh, 230px);
  }

  .birthday-id-dialog .birthday-id-actions {
    padding: 10px 12px;
  }

  .birthday-id-dialog .modal-actions-main {
    width: 100%;
  }

  .birthday-id-dialog .modal-actions-main button {
    flex: 1 1 180px;
  }

  .account-shell {
    width: min(520px, calc(100vw - 16px));
    padding: 8px 0;
  }

  .account-panel {
    padding: 14px 16px;
  }

  .account-head {
    padding: 0 0 8px;
  }

  .account-head h1 {
    font-size: 18px;
  }

  .account-form {
    max-width: none;
  }

  .account-customer {
    align-items: stretch;
  }

  .account-discount-card {
    padding: 8px;
  }

  .account-discount-card-head {
    gap: 6px;
  }

  .account-club-details {
    grid-template-columns: 1fr;
  }
}

.games-settings-section {
  background: #fbfdfe;
}

.settings-games-list {
  display: grid;
  gap: 10px;
}

.settings-game-row {
  display: grid;
  grid-template-columns: 74px repeat(4, minmax(120px, 1fr)) repeat(2, minmax(90px, .6fr)) 90px;
  align-items: end;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d7e0e6;
  border-radius: 8px;
  background: #fff;
}

.settings-game-row label {
  display: grid;
  gap: 5px;
  color: #3c4d5f;
  font-size: 13px;
  font-weight: 800;
}

.pricing-settings-section {
  background: #fff;
}

.deposit-release-section {
  background: #fbfdfe;
}

.deposit-release-rules {
  display: grid;
  gap: 10px;
  margin: 10px 0;
}

.deposit-reminder-quiet-grid {
  align-items: end;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #d7e0e6;
  border-radius: 8px;
  background: #fff;
}

.deposit-reminder-quiet-grid label {
  min-height: 54px;
}

.deposit-release-rule {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #d7e0e6;
  border-radius: 8px;
  background: #fff;
}

.deposit-release-rule header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.deposit-release-grid {
  grid-template-columns: minmax(160px, 1.1fr) repeat(2, minmax(150px, .8fr));
  align-items: end;
}

.deposit-release-rule label {
  min-height: 54px;
}

.deposit-release-rule label,
.deposit-rule-row label {
  display: grid;
  align-content: end;
  gap: 5px;
  color: #3c4d5f;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.deposit-release-rule input,
.deposit-release-rule select {
  min-height: 36px;
}

.deposit-rule-row {
  display: grid;
  align-items: end;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid #eef3f6;
}

.deposit-rule-reminder-row {
  grid-template-columns: minmax(220px, max-content) minmax(160px, 220px);
  justify-content: start;
}

.deposit-rule-time-row {
  grid-template-columns: minmax(150px, 180px) repeat(2, minmax(130px, 160px));
  justify-content: start;
}

.deposit-rule-row .switch-field,
.deposit-rule-reminder-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  width: fit-content;
  align-self: end;
  white-space: nowrap;
}

.deposit-rule-row .switch-field input,
.deposit-rule-reminder-toggle input {
  width: 18px;
  height: 18px;
  min-height: 18px;
}

.deposit-rule-range {
  margin: 0;
  padding: 7px 10px;
  border: 1px solid #d7e0e6;
  border-radius: 7px;
  color: #3c4d5f;
  background: #f6f9fb;
  font-size: 13px;
  font-weight: 800;
}

.deposit-rule-time-field.is-disabled,
.deposit-rule-reminder-field.is-disabled {
  color: #7b8793;
}

.deposit-rule-time-field.is-disabled input,
.deposit-rule-reminder-field.is-disabled input {
  color: #7b8793;
  border-color: #d7e0e6;
  background: #edf2f5;
  cursor: not-allowed;
}

.pending-deposit-deadlines {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.pending-deposit-deadline-head,
.pending-deposit-deadline-item,
.pending-deposit-deadline-empty {
  border: 1px solid #d7e0e6;
  border-radius: 8px;
  background: #fff;
}

.pending-deposit-deadline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  color: #26384a;
  font-size: 13px;
  font-weight: 900;
}

.pending-deposit-deadline-head div {
  display: grid;
  gap: 2px;
}

.pending-deposit-deadline-head span,
.pending-deposit-deadline-item span {
  color: #6a7887;
  font-size: 12px;
  font-weight: 800;
}

.pending-deposit-deadline-items {
  display: grid;
  gap: 6px;
}

.pending-deposit-deadline-item {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) repeat(4, minmax(110px, 1fr));
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: #102235;
  font-size: 13px;
}

.pending-deposit-deadline-item > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pending-deposit-deadline-item strong {
  overflow-wrap: anywhere;
}

.pending-deposit-main strong {
  font-size: 14px;
}

.pending-deposit-deadline-empty {
  padding: 10px 12px;
  color: #526273;
  font-size: 13px;
  font-weight: 800;
}

.pending-deposit-deadline-empty.is-error {
  border-color: #f0bdc5;
  color: #9d2031;
  background: #fff6f7;
}

.pricing-rows {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.pricing-row {
  display: grid;
  grid-template-columns: 120px minmax(150px, 1fr) minmax(150px, 1fr);
  align-items: end;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d7e0e6;
  border-radius: 8px;
  background: #fbfdfe;
}

.pricing-row strong {
  align-self: center;
  color: #26384a;
  font-size: 14px;
}

.pricing-row label {
  display: grid;
  gap: 5px;
  color: #3c4d5f;
  font-size: 13px;
  font-weight: 800;
}

.pricing-row input {
  width: 100%;
  background: #fff;
}

.pricing-row input:disabled {
  color: #7b8793;
  background: #edf2f5;
}

.pricing-preview {
  margin-top: 14px;
}

.payment-status-settings-section {
  background: #fff;
}

.settings-help {
  margin: 0 0 14px;
  color: #516274;
  font-size: 13px;
  font-weight: 800;
}

.payment-status-rows {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.payment-status-row {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(180px, 1fr) minmax(180px, .9fr) auto;
  align-items: end;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d7e0e6;
  border-radius: 8px;
  background: #fbfdfe;
}

.payment-status-row label {
  display: grid;
  gap: 5px;
  color: #3c4d5f;
  font-size: 13px;
  font-weight: 800;
}

.payment-status-row input,
.payment-status-row select {
  width: 100%;
  background: #fff;
}

.payment-status-row input[readonly] {
  color: #7b8793;
  background: #edf2f5;
}

.sms-panel {
  min-height: 640px;
}

.sms-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
}

.sms-toolbar label,
.sms-template-card label {
  display: grid;
  gap: 5px;
  color: #3c4d5f;
  font-size: 13px;
  font-weight: 800;
}

.sms-message-list,
.sms-template-list,
.sms-reminder-list,
.sms-rate-list {
  display: grid;
  gap: 10px;
}

.sms-message-item,
.sms-template-card,
.sms-reminder-card,
.sms-rate-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #d7e0e6;
  border-radius: 8px;
  background: #fff;
}

.sms-message-item header,
.sms-template-card-head,
.sms-template-head,
.sms-reminder-card header,
.sms-rate-card header,
.sms-head-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.sms-message-item header strong {
  color: #26384a;
}

.sms-message-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: #526474;
  font-size: 12px;
  font-weight: 800;
}

.sms-message-meta span,
.sms-message-meta time,
.message-status {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #d5e0e7;
  border-radius: 999px;
  padding: 3px 8px;
  background: #f6fafc;
}

.message-status.sent,
.message-status.delivered {
  border-color: rgba(27, 143, 106, .24);
  background: #e9f6f0;
  color: var(--accent-strong);
}

.message-status.failed {
  border-color: rgba(201, 59, 69, .22);
  background: #fff1f2;
  color: var(--danger);
}

.sms-message-item p,
.template-preview p {
  margin: 0;
  color: #26384a;
  line-height: 1.45;
  white-space: pre-wrap;
}

.sms-empty {
  padding: 18px;
  border: 1px dashed #cbd7df;
  border-radius: 8px;
  color: #526474;
  text-align: center;
  font-weight: 800;
}

.sms-template-head {
  margin-bottom: 14px;
}

.sms-template-head h2,
.sms-template-head p {
  margin: 0;
}

.sms-template-head p {
  margin-top: 4px;
  color: #526474;
  font-weight: 700;
}

.placeholder-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.placeholder-pill {
  cursor: default;
}

.placeholder-pill small {
  color: #526474;
  font-weight: 800;
}

.sms-template-card-head {
  display: grid;
  grid-template-columns: 180px 1fr;
}

.sms-head-actions {
  align-items: center;
  flex-wrap: wrap;
}

.sms-template-card textarea {
  width: 100%;
  min-height: 140px;
  background: #fff;
}

.sms-reminder-card header {
  align-items: center;
}

.sms-reminder-card header span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #d5e0e7;
  border-radius: 999px;
  padding: 5px 10px;
  background: #f6fafc;
  color: #526474;
  font-size: 12px;
  font-weight: 900;
}

.sms-rate-card header strong {
  color: #26384a;
}

.sms-rate-card header span {
  color: #526474;
  font-size: 12px;
  font-weight: 900;
}

.sms-reminder-grid,
.sms-rate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sms-reminder-grid label,
.sms-rate-grid label {
  display: grid;
  gap: 5px;
  color: #3c4d5f;
  font-size: 13px;
  font-weight: 800;
}

.settings-panel {
  font-size: 12px;
}

.settings-panel .form-section {
  padding: 16px;
}

.settings-panel h2 {
  margin: 0 0 12px;
  color: #1e3142;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
}

.settings-tabs {
  gap: 4px;
  padding: 8px;
  background: #f6fafc;
}

.settings-tab {
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 10px;
  color: #405365;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.settings-tab.is-active {
  border-color: rgba(27, 143, 106, .28);
  background: #e9f6f0;
  color: var(--accent-strong);
}

.settings-tab-panels {
  min-height: 360px;
}

.settings-panel .settings-grid {
  gap: 10px;
}

.settings-panel label,
.settings-panel .settings-game-row label,
.settings-panel .pricing-row label,
.settings-panel .payment-status-row label,
.settings-panel .sms-toolbar label,
.settings-panel .sms-template-card label,
.settings-panel .sms-reminder-grid label,
.settings-panel .sms-rate-grid label,
.settings-panel .club-discount-grid label,
.settings-panel .club-discount-rule-row label {
  gap: 4px;
  color: #405365;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
}

.settings-panel input:not([type="checkbox"]):not([type="range"]):not([type="color"]),
.settings-panel select,
.settings-panel textarea {
  min-height: 32px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.settings-panel textarea {
  min-height: 110px;
}

.settings-panel input[type="color"] {
  min-height: 32px;
}

.settings-panel .switch-field {
  min-height: 28px;
  gap: 7px;
  color: #405365;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}

.settings-panel .switch-field input[type="checkbox"],
.settings-panel input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
}

.settings-panel .settings-preview,
.settings-panel .pricing-preview,
.settings-panel .access-preview,
.settings-panel .bulk-preview,
.settings-panel .compact-preview {
  min-height: 34px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.25;
}

.settings-panel .settings-preview strong,
.settings-panel .pricing-preview strong,
.settings-panel .access-preview strong,
.settings-panel .bulk-preview strong,
.settings-panel .compact-preview strong {
  font-size: 13px;
  line-height: 1.25;
}

.settings-panel .settings-help {
  margin: 0 0 10px;
  color: #617184;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

.settings-panel .settings-game-row,
.settings-panel .pricing-row,
.settings-panel .payment-status-row,
.settings-panel .sms-template-card,
.settings-panel .sms-reminder-card,
.settings-panel .sms-rate-card,
.settings-panel .club-discount-card,
.settings-panel .club-custom-discount-row {
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
}

.settings-panel .settings-games-list,
.settings-panel .pricing-rows,
.settings-panel .payment-status-rows,
.settings-panel .club-discount-settings,
.settings-panel .club-custom-discounts,
.settings-panel .club-discount-rules {
  gap: 8px;
}

.settings-panel .settings-game-row {
  grid-template-columns: 68px repeat(4, minmax(104px, 1fr)) repeat(2, minmax(82px, .6fr)) 82px;
}

.settings-panel .pricing-row {
  grid-template-columns: 92px minmax(130px, 1fr) minmax(130px, 1fr);
}

.settings-panel .deposit-release-grid {
  grid-template-columns: minmax(150px, 1.1fr) repeat(2, minmax(130px, .8fr));
}

.settings-panel .payment-status-row {
  grid-template-columns: minmax(130px, .75fr) minmax(150px, 1fr) minmax(150px, .9fr) auto;
}

.settings-panel .pricing-row strong,
.settings-panel .club-discount-rule-row strong,
.settings-panel .sms-rate-card header strong,
.settings-panel .sms-message-item header strong {
  color: #26384a;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.settings-panel .primary-button,
.settings-panel .secondary-button,
.settings-panel .danger-button,
.settings-panel .danger-outline-button,
.settings-panel .success-button,
.settings-panel .compact-button {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.settings-panel .modal-actions,
.settings-panel .settings-actions {
  padding: 12px 16px 16px;
}

.sms-reminder-card p {
  margin: 0;
  color: #526474;
  font-size: 13px;
  font-weight: 700;
}

.sms-reminder-result {
  margin-top: 14px;
}

.template-preview {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid #dfe8ee;
  border-radius: 8px;
  background: #fbfdfe;
}

.template-preview span {
  color: #526474;
  font-size: 12px;
  font-weight: 900;
}

.switch-field {
  min-height: 38px;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 0;
  line-height: 1.2;
}

.switch-field[hidden] {
  display: none !important;
}

.switch-field input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  accent-color: var(--accent);
}

.color-field {
  position: relative;
}

.color-field input[type="color"] {
  width: 100%;
  min-height: 38px;
  padding: 4px 42px 4px 8px;
}

.color-swatch {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 999px;
  pointer-events: none;
}

.slot-bulk-section {
  background: #fff;
}

.slot-bulk-section h3 {
  margin: 0 0 10px;
  color: #26384a;
  font-size: 15px;
}

.bulk-picker {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 16px;
  margin-top: 18px;
}

.check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.check-pill {
  min-height: 36px;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid #d7e0e6;
  border-radius: 999px;
  background: #f8fbfd;
  color: #33475a;
  font-size: 13px;
  font-weight: 800;
}

.check-pill input {
  width: 16px;
  height: 16px;
  min-height: 0;
  accent-color: var(--accent);
}

.bulk-preview {
  margin: 18px 0 0;
}

.bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.timeline-card {
  position: absolute;
  z-index: 3;
  inset-inline: 8px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 1px;
  align-content: center;
  align-items: center;
  border: 1px solid rgba(25, 57, 76, .18);
  border-right: 6px solid var(--slot-game-color, #76b5df);
  border-radius: 8px;
  padding: 6px 12px 6px 10px;
  background: #fff;
  color: #173044;
  box-shadow: 0 10px 22px rgba(22, 53, 72, .12);
  overflow: hidden;
  text-align: right;
  touch-action: none;
  user-select: none;
}

.timeline-card.has-deposit-deadline {
  padding-left: 54px;
}

.timeline-card:hover {
  border-color: rgba(27, 143, 106, .48);
  border-right-color: var(--slot-game-color, #76b5df);
  box-shadow: 0 14px 28px rgba(22, 53, 72, .18);
}

.timeline-card.free {
  border-color: var(--slot-game-color, #76b5df);
  border-right-color: var(--slot-game-color, #76b5df);
}

.timeline-card.free:hover {
  border-color: var(--slot-game-color, #76b5df);
  border-right-color: var(--slot-game-color, #76b5df);
}

.slot-interest-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #7a3fa0;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(72, 34, 98, .28);
}

.customer-risk-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #d93649;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-shadow: none;
  box-shadow: 0 6px 14px rgba(117, 18, 32, .24);
}

.timeline-card.booked,
.timeline-card.blocked {
  background: var(--slot-game-color, #76b5df);
  border-color: var(--slot-game-color, #76b5df);
  border-right-color: var(--slot-game-color, #76b5df);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .34);
}

.timeline-card.booked.payment-pending::before,
.timeline-card.booked.payment-deposit::before,
.timeline-card.booked.payment-neutral::before,
.timeline-card.booked.payment-success::before,
.timeline-card.booked.payment-warning::before,
.timeline-card.booked.payment-danger::before,
.timeline-card.booked.payment-purple::before,
.timeline-card.booked.payment-blue::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: #d93649;
}

.timeline-card.booked.payment-deposit::before {
  background: #24a66a;
}

.timeline-card.booked.payment-neutral::before {
  background: #8b98a5;
}

.timeline-card.booked.payment-success::before {
  background: #24a66a;
}

.timeline-card.booked.payment-warning::before {
  background: #e08a22;
}

.timeline-card.booked.payment-danger::before {
  background: #d93649;
}

.timeline-card.booked.payment-purple::before {
  background: #813aa6;
}

.timeline-card.booked.payment-blue::before {
  background: #3f6f9f;
}

.timeline-card.booked.payment-prepaid {
  background: #d93649;
  border-color: #d93649;
  border-right-color: #d93649;
  box-shadow: 0 12px 26px rgba(217, 54, 73, .28);
}

.timeline-card.booked.payment-prepaid:hover {
  border-color: #c92f42;
  border-right-color: #c92f42;
}

.timeline-card.blocked {
  opacity: .88;
}

.slot-preview-card {
  position: absolute;
  z-index: 4;
  inset-inline: 8px;
  display: grid;
  align-content: center;
  gap: 2px;
  border: 2px dashed rgba(27, 143, 106, .72);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(233, 246, 240, .88);
  color: var(--accent-strong);
  box-shadow: 0 12px 26px rgba(22, 53, 72, .14);
  overflow: hidden;
  pointer-events: none;
}

.slot-preview-card strong {
  font-size: 14px;
}

.slot-preview-card small {
  color: #436453;
  font-weight: 900;
}

.new-slot-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.new-slot-controls input {
  width: 100%;
  min-height: 34px;
  background: #fff;
}

.timeline-card.is-dragging {
  z-index: 20;
  opacity: .92;
  cursor: grabbing;
}

.timeline-card.slot-conflict {
  border-color: rgba(201, 59, 69, .9);
  border-right-color: var(--slot-game-color, #76b5df);
  background: #ffe1e4;
  box-shadow: 0 0 0 3px rgba(201, 59, 69, .18);
}

.admin-calendar.is-moving-booking .timeline-card {
  cursor: not-allowed;
}

.admin-calendar.is-moving-booking .timeline-card.free {
  cursor: copy;
  outline: 2px solid rgba(27, 143, 106, .42);
  outline-offset: 2px;
}

.admin-calendar.is-moving-booking .timeline-card.booked,
.admin-calendar.is-moving-booking .timeline-card.blocked {
  opacity: .52;
}

.timeline-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.12;
}

.slot-customer-line {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  overflow: hidden;
  line-height: 1.05;
  white-space: nowrap;
}

.booking-source-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  align-self: center;
  display: inline-flex;
  color: rgba(255, 255, 255, .96);
}

.booking-source-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.booking-source-icon.public svg {
  stroke-width: 1.8;
}

.slot-customer-line strong,
.slot-customer-line small {
  min-width: 0;
  line-height: inherit;
}

.slot-customer-line strong {
  flex: 1 1 auto;
}

.slot-customer-line small {
  flex: 0 0 auto;
  max-width: none;
}

.timeline-card.hide-slot-phone .slot-phone {
  display: none;
}

.timeline-card.phone-stacked .slot-customer-line {
  display: grid;
  gap: 1px;
}

.timeline-card.phone-stacked .slot-customer-line strong,
.timeline-card.phone-stacked .slot-customer-line small {
  width: 100%;
}

.timeline-card.hide-slot-time .slot-time {
  display: none;
}

.timeline-card small {
  grid-column: 1;
  overflow: hidden;
  color: #617184;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-card .slot-time {
  grid-column: 1;
  overflow: hidden;
  color: #617184;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-card.booked small,
.timeline-card.blocked small {
  color: rgba(255, 255, 255, .92);
}

.timeline-card.booked .slot-time,
.timeline-card.blocked .slot-time {
  color: rgba(255, 255, 255, .88);
}

.timeline-card[data-density="slot-compact"] {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-content: center;
  gap: 0;
  padding: 2px 8px;
  border-radius: 6px;
  box-shadow: 0 5px 12px rgba(22, 53, 72, .12);
}

.timeline-card.has-deposit-deadline[data-density="slot-compact"] {
  padding-left: 54px;
}

.timeline-card[data-density="slot-compact"] strong {
  display: none;
}

.timeline-card.booked[data-density="slot-compact"] strong,
.timeline-card.blocked[data-density="slot-compact"] strong {
  display: block;
  font-size: 11px;
  line-height: 1.05;
}

.timeline-card[data-density="slot-compact"] small {
  grid-column: 1;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.timeline-card.booked[data-density="slot-compact"],
.timeline-card.blocked[data-density="slot-compact"] {
  grid-template-rows: 1fr;
  align-content: center;
}

.timeline-card.booked[data-density="slot-compact"] small,
.timeline-card.blocked[data-density="slot-compact"] small {
  font-size: 11px;
}

.timeline-card.booked[data-density="slot-compact"] .slot-customer-line small {
  line-height: 1.05;
}

.timeline-card.booked[data-density="slot-compact"] .slot-time,
.timeline-card.blocked[data-density="slot-compact"] .slot-time {
  display: none;
}

.timeline-card[data-density="slot-tiny"] {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  padding: 0 5px;
  border-radius: 5px;
  box-shadow: none;
}

.timeline-card.has-deposit-deadline[data-density="slot-tiny"] {
  padding-left: 50px;
}

.timeline-card[data-density="slot-tiny"] strong {
  display: none;
}

.timeline-card.booked[data-density="slot-tiny"] strong,
.timeline-card.blocked[data-density="slot-tiny"] strong {
  display: block;
  font-size: 11px;
  line-height: 1.05;
}

.timeline-card[data-density="slot-tiny"] small {
  grid-column: 1;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1;
}

.timeline-card.booked[data-density="slot-tiny"] .slot-time,
.timeline-card.blocked[data-density="slot-tiny"] .slot-time {
  display: none;
}

.timeline-card.booked[data-density="slot-tiny"] small,
.timeline-card.blocked[data-density="slot-tiny"] small {
  font-size: 11px;
}

.timeline-card.booked[data-density="slot-tiny"] .slot-customer-line small {
  line-height: 1.05;
}

.slot-preview-card[data-density="slot-compact"],
.slot-preview-card[data-density="slot-tiny"] {
  gap: 0;
  padding: 2px 7px;
  border-radius: 6px;
  box-shadow: none;
}

.slot-preview-card[data-density="slot-compact"] strong,
.slot-preview-card[data-density="slot-tiny"] strong {
  display: none;
}

.slot-preview-card[data-density="slot-compact"] small,
.slot-preview-card[data-density="slot-tiny"] small {
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1;
}

.current-time-line {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  border-top: 2px solid #e53935;
  pointer-events: none;
}

.current-time-line::before {
  content: none;
}

.current-time-line span {
  position: absolute;
  inset-inline-start: auto;
  right: -60px;
  top: -13px;
  border-radius: 999px;
  padding: 3px 8px;
  background: #e53935;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.booking-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-panel {
  margin-top: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}

.audit-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.audit-panel h2,
.audit-panel-head h2 {
  margin: 0;
  font-size: 18px;
}

.audit-main {
  width: 100%;
  max-width: none;
}

.audit-full-panel {
  margin-top: 0;
}

.audit-list {
  display: grid;
  gap: 8px;
}

.audit-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  border-bottom: 1px solid #edf1f3;
  padding-bottom: 10px;
  color: var(--muted);
  font-size: 14px;
}

.audit-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.audit-copy strong {
  color: #26384a;
  font-size: 14px;
  line-height: 1.35;
}

.audit-copy span {
  color: #526474;
  line-height: 1.35;
}

.audit-copy small,
.audit-item time {
  color: #7a8793;
  font-size: 12px;
  font-weight: 800;
}

.audit-item time {
  flex: 0 0 auto;
  white-space: nowrap;
}

.audit-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 14px;
}

.audit-pagination span {
  color: #526474;
  font-weight: 800;
}

.modal {
  width: min(440px, calc(100vw - 24px));
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .35);
}

.admin-booking-modal {
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100vh - 16px);
  margin: auto;
}

.admin-booking-modal,
.admin-booking-modal * {
  box-sizing: border-box;
}

.modal::backdrop {
  background: rgba(14, 21, 30, .48);
}

.modal-panel {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 22px;
  background: #c6d8e2;
}

.admin-modal-panel {
  width: auto;
}

.booking-editor {
  gap: 0;
  max-height: calc(100vh - 16px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  background: #f8fbfd;
}

.booking-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px 52px;
  border-bottom: 1px solid #d8e2e8;
  background: #fff;
}

.booking-editor-head > div {
  width: 100%;
}

.booking-editor-head h2 {
  display: none;
}

.modal-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
}

.modal h2 {
  margin: 0;
  font-size: 21px;
}

.modal label {
  display: grid;
  gap: 4px;
  color: #3c4d5f;
  font-size: 12px;
  font-weight: 800;
}

.modal label.required-field > span::after {
  content: " *";
  color: var(--danger);
  font-weight: 900;
}

.modal-close {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 0;
  background: #2d3138;
  color: #fff;
  font-size: 22px;
  line-height: 1;
}

html[dir="ltr"] .booking-modal .modal-close {
  right: 8px;
  left: auto;
}

.summary-line {
  margin: 0;
  color: #26384a;
  font-weight: 800;
}

#adminSlotSummary {
  font-size: 18px;
  line-height: 1.25;
}

.summary-line.meta-line {
  margin-top: 5px;
  color: #617184;
  font-size: 12px;
}

.booking-modal {
  width: min(520px, calc(100vw - 24px));
}

.booking-flow-panel {
  gap: 7px;
  padding: 14px 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(245, 241, 248, .92)),
    #f4f1f7;
}

.booking-flow-panel .details-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  margin: 0 0 5px;
  padding: 8px 10px;
  border: 1px solid rgba(111, 61, 131, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
}

html[lang="he"] .booking-flow-panel .details-block,
html[lang="ar"] .booking-flow-panel .details-block,
.booking-flow-panel .details-block[dir="rtl"] {
  direction: rtl;
  text-align: right;
  justify-items: stretch;
}

html[dir="rtl"] .booking-flow-panel .details-block {
  padding-inline: 10px;
  text-align: right;
  justify-items: stretch;
}

html[lang="ru"] .booking-flow-panel .details-block,
html[lang="en"] .booking-flow-panel .details-block,
.booking-flow-panel .details-block[dir="ltr"] {
  direction: ltr;
  text-align: left;
  justify-items: stretch;
}

html[dir="ltr"] .booking-flow-panel .details-block {
  text-align: left;
  justify-items: stretch;
}

.booking-flow-panel .details-block h2 {
  margin: 0 0 1px;
  color: #6f3d83;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.booking-flow-panel .details-block p {
  width: 100%;
  margin: 0;
  color: #3f334a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.booking-flow-panel.is-inline-deposit .details-block {
  display: none;
}

.booking-flow-form,
.booking-step {
  display: grid;
  gap: 6px;
}

.booking-progress {
  display: grid;
  gap: 5px;
  padding: 0 36px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.booking-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #6a6071;
  font-size: 11px;
  font-weight: 900;
}

.booking-progress-head strong {
  font-size: 12px;
  color: #6f3d83;
}

html[dir="rtl"] .booking-progress {
  padding-inline-start: 8px;
  padding-inline-end: 36px;
}

.booking-progress-track {
  overflow: hidden;
  height: 3px;
  border-radius: 999px;
  background: rgba(150, 135, 164, .22);
}

.booking-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6f3d83, var(--danger));
  transition: width .22s ease;
}

.booking-flow-form[hidden],
.booking-step[hidden],
.phone-booking-block[hidden] {
  display: none;
}

.booking-step input {
  width: 100%;
  height: 30px;
  min-height: 30px;
  padding: 4px 8px;
  border-color: rgba(150, 135, 164, .34);
  background: rgba(255, 255, 255, .96);
  font-size: 12px;
}

.booking-step input[type="tel"],
.booking-step input[type="email"],
.booking-step input[inputmode="numeric"],
.booking-step input[inputmode="tel"] {
  font-family: "Inter", "Noto Sans", Arial, sans-serif;
}

.booking-step input::placeholder {
  color: #758493;
}

.booking-step .field-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(201, 59, 69, .12);
}

.booking-step .form-group {
  display: grid;
  gap: 4px;
}

.booking-step-intro {
  display: grid;
  gap: 2px;
  padding: 5px 2px 2px;
  text-align: center;
}

.booking-step-intro strong {
  color: #23172c;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

.booking-step-intro span {
  color: #7a7082;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.sms-step-intro {
  padding-top: 1px;
}

.phone-entry-group {
  padding-top: 0;
}

.booking-phone-control {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(111, 61, 131, .24);
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.booking-phone-control::after {
  content: none;
}

.booking-phone-control input {
  height: 38px;
  min-height: 38px;
  border: 0;
  background: transparent;
  color: #23172c;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
  direction: ltr;
}

.booking-phone-control input:focus {
  outline: 3px solid rgba(111, 61, 131, .16);
}

.booking-phone-control:focus-within {
  border-color: rgba(111, 61, 131, .58);
  background: rgba(255, 255, 255, .96);
}

.booking-phone-control:has(input.field-error) {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(201, 59, 69, .12);
}

.customer-welcome {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid rgba(27, 143, 106, .22);
  border-radius: 8px;
  background: #f0faf5;
  color: #1f5e49;
  font-size: 12px;
  line-height: 1.35;
}

.customer-welcome strong {
  color: #123c2e;
  font-size: 14px;
  font-weight: 900;
}

.customer-welcome span {
  font-weight: 800;
}

.number-input {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: stretch;
  gap: 6px;
}

.number-input button {
  height: 30px;
  min-height: 30px;
  border: 1px solid rgba(150, 135, 164, .38);
  border-radius: 6px;
  background: #fff;
  color: #6f3d83;
  font-size: 17px;
  font-weight: 900;
}

.number-input input {
  text-align: center;
  font-weight: 800;
}

.price-display {
  min-height: 17px;
  color: #5a4d66;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.price-note {
  display: grid;
  gap: 2px;
  color: #665d6e;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.price-note p {
  margin: 0;
}

.price-note a,
.terms-copy a,
.help-line a,
.terms-field a {
  color: #6f3d83;
  font-weight: 900;
}

.booking-modal .primary-button {
  height: 32px;
  min-height: 32px;
  padding: 5px 11px;
  border-color: #6b3a7d;
  background: #6f3d83;
  font-size: 13px;
}

.booking-modal .primary-button:hover {
  background: #5b2f6c;
}

.booking-modal .secondary-button {
  height: 30px;
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px;
}

.error-message {
  color: var(--danger);
  font-size: 12px;
  font-weight: 900;
}

.phone-number-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0;
  color: #665d6e;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.phone-number-line strong {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  direction: ltr;
}

.help-line,
.minute-line {
  margin: 0;
  color: #526474;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.sms-code-focus {
  display: grid;
  gap: 6px;
  padding: 1px 0 3px;
}

.sms-code-focus .form-message {
  text-align: center;
  justify-self: center;
}

.sms-step-meta {
  display: grid;
  justify-items: center;
  gap: 0;
  padding-top: 0;
  color: #665d6e;
  font-size: 11px;
}

.sms-step-meta-top {
  padding: 0;
  margin-bottom: 0;
}

.sms-step-meta-bottom {
  padding-top: 0;
  padding-bottom: 24px;
}

.sms-step-meta .phone-number-line,
.sms-step-meta .minute-line,
.sms-step-meta .help-line {
  color: #665d6e;
  font-size: 11px;
  font-weight: 800;
}

.sms-step-meta .help-line a {
  color: #6f3d83;
  font-family: inherit;
  font-size: inherit;
  font-weight: 900;
  text-decoration: none;
  direction: inherit;
}

.sms-edit-phone {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: auto;
  height: auto;
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0 2px;
  color: #6f3d83;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}

.sms-edit-phone:hover {
  background: transparent;
  color: #5b2f6c;
}

.sms-code-inputs {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(6, 36px);
  justify-content: center;
  gap: 10px;
  max-width: 100%;
}

.sms-code-digit {
  width: 100%;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid rgba(150, 135, 164, .38);
  border-radius: 8px;
  background: rgba(255, 255, 255, .98);
  color: #25172f;
  font-family: "Inter", "Noto Sans", Arial, sans-serif;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.sms-code-digit:focus {
  border-color: #6f3d83;
  outline: 3px solid rgba(111, 61, 131, .16);
}

.sms-code-inputs.is-checking .sms-code-digit {
  border-color: rgba(63, 111, 159, .65);
  background: #f3f8fd;
  color: #2f5f90;
  animation: sms-code-checking 1s ease-in-out infinite;
}

.sms-code-inputs.is-valid .sms-code-digit {
  border-color: rgba(27, 143, 106, .72);
  background: #effaf5;
  color: #116447;
  box-shadow: 0 0 0 2px rgba(27, 143, 106, .12);
}

.sms-code-inputs.is-invalid .sms-code-digit {
  border-color: rgba(201, 59, 69, .72);
  background: #fff5f6;
  color: #b82e3a;
  animation: sms-code-invalid .2s ease-in-out 2;
}

@keyframes sms-code-checking {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(63, 111, 159, .08);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(63, 111, 159, .14);
  }
}

@keyframes sms-code-invalid {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(2px);
  }
}

.terms-copy {
  display: grid;
  gap: 5px;
  color: #493d54;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.32;
}

.terms-copy p,
.terms-copy ul {
  margin: 0;
}

.terms-copy ul {
  padding-inline-start: 20px;
}

.terms-copy li:nth-child(3) {
  margin-bottom: 8px;
}

.terms-copy > a {
  margin-bottom: 8px;
}

.terms-copy li:empty,
.terms-copy li[hidden] {
  display: none;
}

.terms-field {
  display: grid !important;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 7px !important;
  color: #493d54 !important;
  font-size: 12px !important;
  line-height: 1.3;
}

.terms-field[hidden] {
  display: none !important;
}

.terms-field input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 1px 0 0;
  accent-color: #6f3d83;
}

.booking-success-panel {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid rgba(27, 143, 106, .24);
  border-radius: 8px;
  background: #eefaf4;
  color: #185f46;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  overflow: hidden;
}

.booking-success-panel::before,
.booking-success-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
}

.booking-success-panel::before {
  background:
    radial-gradient(circle at 9% 22%, #27a876 0 2px, transparent 3px),
    radial-gradient(circle at 18% 76%, #d94b5f 0 2px, transparent 3px),
    radial-gradient(circle at 78% 20%, #7a4a92 0 2px, transparent 3px),
    radial-gradient(circle at 91% 68%, #27a876 0 2px, transparent 3px);
}

.booking-success-panel::after {
  inset: 6px 12px;
  border-top: 1px dashed rgba(15, 117, 85, .25);
  border-bottom: 1px dashed rgba(15, 117, 85, .18);
  transform: rotate(-1deg);
}

.booking-success-panel > * {
  position: relative;
  z-index: 1;
}

.booking-success-panel strong {
  color: #0f7555;
  font-size: 15px;
}

.inline-deposit-summary {
  padding: 8px 10px;
  border: 1px solid rgba(150, 135, 164, .28);
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
}

.inline-deposit-summary:empty {
  display: none;
}

.inline-deposit-summary[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

.inline-deposit-summary[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

.inline-deposit-summary h3 {
  margin: 0 0 6px;
  color: #25172f;
  font-size: 14px;
}

.inline-deposit-summary dl {
  display: grid;
  gap: 5px;
  margin: 0;
}

.inline-deposit-summary div {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  border-bottom: 1px solid #edf2f5;
  padding-bottom: 5px;
}

.inline-deposit-summary div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.inline-deposit-summary dt {
  flex: 0 0 auto;
  color: #6e6378;
  font-size: 11px;
  font-weight: 800;
}

.inline-deposit-summary dt::after {
  content: ":";
}

.inline-deposit-summary dd {
  margin: 0;
  flex: 0 1 auto;
  color: #25172f;
  font-size: 12px;
  font-weight: 900;
  text-align: inherit;
}

.inline-deposit-rules {
  display: grid;
  gap: 7px;
  padding: 2px 4px 4px;
}

.inline-deposit-rules .rule {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #493d54;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.36;
}

.inline-deposit-rules .rule:first-child {
  color: #3c2f45;
  font-weight: 800;
}

.inline-deposit-rules .bullet-rule {
  padding-inline-start: 15px;
}

.inline-deposit-rules .bullet-rule::before {
  content: "";
  position: absolute;
  top: .62em;
  inset-inline-start: 2px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #6f3d83;
}

.inline-deposit-field {
  display: grid;
  gap: 4px;
  color: #493d54;
  font-size: 12px;
  font-weight: 800;
}

.inline-deposit-field input {
  width: 100%;
  min-height: 30px;
  background: #fff;
}

#bookingDepositMessage {
  min-height: 16px;
  color: #c93b45;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.booking-deposit-payment {
  border: 1px solid #dbe6ec;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.booking-deposit-payment iframe {
  display: block;
  width: 100%;
  height: 620px;
  border: 0;
}

.phone-booking-block {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #493d54;
  text-align: center;
}

.phone-booking-block h2 {
  margin: 0;
  font-size: 17px;
}

.phone-booking-block p {
  margin: 0;
  color: #665d6e;
  font-size: 12px;
  font-weight: 800;
}

.phone-call-button {
  min-width: 170px;
}

.booking-status-line {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 330px;
  color: #526474;
  font-size: 13px;
  font-weight: 800;
}

.booking-status-line span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #d5e0e7;
  border-radius: 999px;
  padding: 5px 10px;
  background: #f6fafc;
}

.booking-status-line .booking-status-chip {
  border-color: rgba(27, 143, 106, .24);
  background: #e9f6f0;
  color: var(--accent-strong);
}

.form-message {
  min-height: 20px;
  color: var(--danger);
  font-weight: 800;
}

.form-message.success {
  color: var(--accent-strong);
}

.form-message.conflict {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(217, 54, 73, .38);
  border-radius: 8px;
  background: #fff1f3;
  color: #b92335;
}

.conflict-title {
  margin-bottom: 4px;
  font-size: 15px;
}

.conflict-details {
  margin: 10px 0;
  padding: 10px;
  max-height: 190px;
  overflow: auto;
  border: 1px solid rgba(185, 35, 53, .18);
  border-radius: 6px;
  background: #fff;
  color: #173044;
  font: 700 12px/1.5 inherit;
  white-space: pre-wrap;
}

.conflict-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.slot-interest-notice {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(122, 63, 160, .32);
  border-radius: 8px;
  background: #f7f0fb;
  color: #593072;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.customer-risk-notice {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(217, 54, 73, .32);
  border-radius: 8px;
  background: #fff1f3;
  color: #9d2031;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
}

.deposit-countdown-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #dfc9ea;
  border-radius: 8px;
  color: #3b2645;
  background: #f8f1fb;
  font-size: 13px;
  font-weight: 800;
}

.deposit-deadline-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #d7e0e6;
  border-radius: 8px;
  background: #fbfdfe;
  color: #26384a;
  font-size: 13px;
}

.deposit-deadline-editor[hidden] {
  display: none;
}

.deposit-deadline-editor label {
  color: #3c4d5f;
  font-size: 12px;
  font-weight: 900;
}

.deposit-deadline-editor-controls {
  display: flex;
  align-items: end;
  gap: 8px;
  flex: 1 1 520px;
  min-width: 0;
}

.deposit-deadline-editor .deposit-deadline-field,
.deposit-deadline-editor .deposit-deadline-preset-field {
  display: grid;
  flex: 0 1 240px;
  gap: 4px;
  min-width: 190px;
}

.deposit-deadline-editor .deposit-deadline-field[hidden],
.deposit-deadline-editor .deposit-deadline-preset-field[hidden],
.deposit-deadline-editor .deposit-deadline-editor-actions[hidden] {
  display: none;
}

.deposit-deadline-editor input,
.deposit-deadline-editor select {
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid #cad6df;
  border-radius: 7px;
  background: #fff;
  font: inherit;
}

.deposit-deadline-editor input:disabled,
.deposit-deadline-editor select:disabled {
  border-color: #d5dee5;
  background: #edf2f5;
  color: #7a8794;
  cursor: not-allowed;
  opacity: 1;
}

.deposit-deadline-editor input.is-invalid {
  border-color: var(--danger);
  background: #fff7f8;
  box-shadow: 0 0 0 2px rgba(201, 59, 69, .12);
}

.deposit-deadline-editor-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
}

.deposit-deadline-editor .deposit-deadline-auto-toggle,
.deposit-deadline-editor .deposit-deadline-disable-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 34px;
  width: fit-content;
  cursor: pointer;
  white-space: nowrap;
}

.deposit-deadline-editor .deposit-deadline-auto-toggle {
  align-self: end;
}

.deposit-deadline-editor .deposit-deadline-disable-toggle {
  margin-inline-start: auto;
}

.deposit-deadline-editor .deposit-deadline-auto-toggle input,
.deposit-deadline-editor .deposit-deadline-disable-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.deposit-deadline-editor .deposit-deadline-auto-toggle .toggle-visual,
.deposit-deadline-editor .deposit-deadline-disable-toggle .toggle-visual {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 20px;
  border: 1px solid #b9c8d3;
  border-radius: 999px;
  background: #dfe8ee;
  transition: background .16s ease, border-color .16s ease;
}

.deposit-deadline-editor .deposit-deadline-auto-toggle .toggle-visual::after,
.deposit-deadline-editor .deposit-deadline-disable-toggle .toggle-visual::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(31, 49, 66, .25);
  transition: transform .16s ease;
}

.deposit-deadline-editor .deposit-deadline-auto-toggle input:checked + .toggle-visual,
.deposit-deadline-editor .deposit-deadline-disable-toggle input:checked + .toggle-visual {
  border-color: var(--accent);
  background: var(--accent);
}

.deposit-deadline-editor .deposit-deadline-auto-toggle input:disabled + .toggle-visual {
  border-color: #c6d2db;
  background: #dfe8ee;
}

.deposit-deadline-editor .deposit-deadline-auto-toggle input:checked + .toggle-visual::after,
.deposit-deadline-editor .deposit-deadline-disable-toggle input:checked + .toggle-visual::after {
  transform: translateX(-18px);
}

.deposit-deadline-editor .deposit-deadline-auto-toggle > span:last-child,
.deposit-deadline-editor .deposit-deadline-disable-toggle > span:last-child {
  color: #3c4d5f;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.deposit-countdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #6d2d85;
  background: #f1e2f7;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.deposit-countdown.is-compact {
  min-width: 54px;
  padding: 2px 6px;
  font-size: 11px;
}

.deposit-countdown.is-expired {
  color: #9b1c31;
  background: #fde8ed;
}

.slot-deposit-countdown {
  position: absolute;
  left: 6px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  color: #9b1c31;
  font-size: 11px;
  font-weight: 900;
  text-shadow: none;
  pointer-events: none;
}

.slot-deposit-countdown .deposit-countdown {
  min-width: 42px;
  padding: 2px 6px;
  border: 1px solid rgba(201, 59, 69, .28);
  color: #b91c31;
  background: #ffe6eb;
  box-shadow: 0 4px 10px rgba(120, 18, 32, .16);
}

.deposit-page {
  min-height: 100vh;
  --deposit-accent: #7d3f98;
  --deposit-accent-strong: #64307d;
  --deposit-accent-soft: #f4eef8;
  --deposit-accent-line: #dfc9ea;
  background: #edf4f6;
}

.deposit-page[data-payment-type="prepayment_charge"] {
  --deposit-accent: #327ca3;
  --deposit-accent-strong: #256582;
  --deposit-accent-soft: #edf7fb;
  --deposit-accent-line: #c4dfec;
}

.deposit-page[data-payment-type="deposit_authorization"] .deposit-panel {
  border-top: 5px solid #7d3f98;
}

.deposit-page[data-payment-type="prepayment_charge"] .deposit-panel {
  border-top: 5px solid #327ca3;
}

.deposit-shell {
  width: min(700px, calc(100% - 18px));
  margin: 0 auto;
  padding: 14px 0;
}

.deposit-panel {
  background: #fff;
  border: 1px solid #d7e3e9;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(28, 55, 72, .1);
  overflow: hidden;
}

.deposit-head,
.deposit-rules,
.deposit-form,
.deposit-summary {
  padding: 14px 18px;
}

.deposit-head {
  position: relative;
  background: var(--deposit-accent);
  color: #fff;
}

.lang-switch {
  position: relative;
  z-index: 3;
  width: 98px;
  margin-bottom: 10px;
}

html[dir="rtl"] .deposit-head .lang-switch {
  margin-right: 0;
  margin-left: auto;
}

html[dir="ltr"] .deposit-head .lang-switch {
  margin-left: 0;
  margin-right: auto;
}

.lang-pill {
  width: 100%;
  min-height: 30px;
  display: grid;
  grid-template-columns: 1fr 12px;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.lang-pill:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .78);
  outline-offset: 2px;
}

.lang-pill span:first-child {
  min-width: 0;
  text-align: center;
  line-height: 1;
}

.lang-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255, 255, 255, .92);
  border-bottom: 2px solid rgba(255, 255, 255, .92);
  transform: rotate(45deg) translateY(-2px);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline: 0;
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(31, 48, 62, .14);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(22, 35, 48, .22);
}

.lang-menu[hidden] {
  display: none !important;
}

.lang-menu button {
  min-height: 32px;
  border: 0;
  border-bottom: 1px solid #e5edf2;
  background: #fff;
  color: #223648;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

.lang-menu button:last-child {
  border-bottom: 0;
}

.lang-menu button:hover,
.lang-menu button.active {
  background: var(--deposit-accent-soft);
  color: var(--deposit-accent-strong);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.deposit-head span {
  font-size: 12px;
  font-weight: 900;
  color: rgba(255, 255, 255, .78);
}

.deposit-head h1 {
  margin: 0 0 5px;
  font-size: 23px;
  line-height: 1.18;
}

.deposit-head p {
  margin: 0;
  color: rgba(255, 255, 255, .9);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

#depositStatus {
  margin-top: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 6px;
  background: rgba(255, 255, 255, .12);
}

#depositStatus[data-tone="negative"] {
  border-color: #d84b5f;
  background: #fff5f6;
  color: #b42336;
}

#depositStatus[data-tone="positive"] {
  border-color: #2ca06d;
  background: #effaf4;
  color: #16724c;
}

#depositStatus[hidden] {
  display: none !important;
}

.deposit-summary {
  border-bottom: 1px solid #dfe8ee;
  background: #fff;
}

.deposit-summary.is-canceled-like {
  border-color: #f0b7bf;
  background: #fff6f7;
}

.deposit-summary.is-canceled-like h2,
.deposit-summary.is-canceled-like dd {
  color: #8f2434;
}

.deposit-summary.is-canceled-like dt {
  color: #a95d68;
}

.deposit-summary.is-message-only {
  padding: 18px;
  color: #9b1c31;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
}

.deposit-summary h2 {
  margin: 0 0 9px;
  color: #1e3345;
  font-size: 16px;
}

.deposit-summary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
}

.deposit-summary div {
  display: grid;
  gap: 2px;
}

.deposit-summary dt {
  color: #627789;
  font-size: 11px;
  font-weight: 800;
}

.deposit-summary dd {
  margin: 0;
  color: #1e3345;
  font-size: 14px;
  font-weight: 900;
}

.deposit-rules {
  display: grid;
  gap: 10px;
  background: #f8fbfd;
}

.deposit-deadline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--deposit-accent-line);
  border-radius: 8px;
  color: var(--deposit-accent-strong);
  background: var(--deposit-accent-soft);
  font-weight: 900;
}

.deposit-deadline.is-expired {
  border-color: #f0b7bf;
  color: #9b1c31;
  background: #fff3f5;
}

.deposit-deadline.is-expired .deposit-countdown {
  color: #9b1c31;
  background: #fde0e5;
}

.deposit-deadline-copy {
  display: grid;
  gap: 3px;
  min-width: 220px;
  flex: 1 1 260px;
}

.deposit-deadline-copy small {
  color: #486072;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.deposit-rules p {
  margin: 0;
  color: #2a3e50;
  font-size: 14px;
  line-height: 1.45;
}

.deposit-rules .deposit-rule-lead {
  color: #20384a;
  font-weight: 850;
}

.deposit-rule-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-inline-start: 20px;
  color: #2a3e50;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.45;
}

.deposit-rule-list li::marker {
  color: var(--deposit-accent-strong);
  font-size: .9em;
}

.deposit-form {
  display: grid;
  gap: 10px;
  border-top: 1px solid #dfe8ee;
  background: #fff;
}

.deposit-form[hidden],
.deposit-summary[hidden],
.deposit-payment[hidden] {
  display: none;
}

.deposit-payment-status {
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--deposit-accent-line);
  border-radius: 8px;
  background: #fff;
  color: #26384a;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.deposit-payment-status[hidden] {
  display: none !important;
}

.deposit-payment-status[data-tone="negative"] {
  border-color: #f0b7bf;
  background: #fff3f5;
  color: #9b1c31;
}

.deposit-payment-status strong {
  font-size: 14px;
  font-weight: 900;
}

.deposit-payment-deadline {
  margin-bottom: 10px;
}

.deposit-form input[type="email"] {
  width: 100%;
  min-height: 38px;
  margin-top: 4px;
}

.deposit-form .primary-button {
  min-height: 42px;
  background: var(--deposit-accent);
}

.deposit-form .primary-button:hover {
  background: var(--deposit-accent-strong);
}

.deposit-form-message {
  min-height: 18px;
  padding-top: 2px;
  text-align: center;
  font-size: 13px;
}

.deposit-payment {
  margin-top: 10px;
  background: #fff;
  border: 1px solid #dbe6ec;
  border-radius: 8px;
  overflow: hidden;
}

.deposit-payment iframe {
  display: block;
  width: 100%;
  height: 620px;
  border: 0;
}

.debit-modal-panel {
  width: min(440px, calc(100vw - 28px));
  padding: 28px 24px 22px;
  background: #fff;
}

.debit-modal-panel p {
  margin: 0;
  color: #23384a;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
}

.debit-modal-panel .primary-button {
  justify-self: center;
  min-width: 120px;
}

.tel-ltr {
  direction: ltr;
  display: inline-block;
}

.payment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.payment-log {
  display: grid;
  gap: 6px;
}

.payment-log-item,
.payment-log-empty {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid #dbe5eb;
  border-radius: 8px;
  background: #f8fbfd;
}

.payment-log-item strong {
  color: #24384b;
  font-size: 13px;
}

.payment-log-item span,
.payment-log-item time,
.payment-log-empty {
  color: #617487;
  font-size: 12px;
  font-weight: 700;
}

.payment-link-panel {
  width: 100%;
  gap: 14px;
  padding: 0 16px 18px;
  overflow: visible;
  background: #fff;
  direction: rtl;
}

#paymentLinkDialog {
  width: min(620px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 20px);
  overflow: auto;
}

.payment-link-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -16px;
  padding: 18px 20px 18px 52px;
  color: #fff;
}

.payment-link-head[data-type="deposit"] {
  background: #813aa6;
}

.payment-link-head[data-type="prepayment"] {
  background: #3f6f9f;
}

.payment-link-head h2 {
  color: #fff;
  font-size: 24px;
}

.payment-link-head .modal-close {
  top: 20px;
  left: 18px;
  background: transparent;
  font-size: 28px;
}

.payment-link-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  text-align: center;
}

.payment-link-details div {
  display: grid;
  gap: 4px;
}

.payment-link-details span {
  color: #6a6f76;
  font-size: 13px;
  font-weight: 800;
}

.payment-link-details strong {
  color: #2d3138;
  font-size: 16px;
  font-weight: 900;
}

.payment-link-field {
  display: grid;
  gap: 6px;
  color: #343b44;
  font-size: 15px;
  font-weight: 800;
  min-width: 0;
}

.payment-link-field input,
.payment-link-field textarea {
  width: 100%;
  min-width: 0;
  border-color: #cfd5dc;
  background: #fff;
  color: #1f2730;
  direction: ltr;
  font-size: 15px;
  font-weight: 500;
}

.payment-link-field textarea {
  min-height: 88px;
  line-height: 1.45;
  resize: vertical;
  text-align: right;
  direction: rtl;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.payment-link-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}

.payment-link-actions .primary-button,
.payment-link-actions .secondary-button,
.payment-link-actions .success-button {
  min-width: 110px;
  min-height: 38px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-modal-panel .form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 10px;
}

.wide-field {
  grid-column: 1 / -1;
}

.range-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 14px;
}

.range-field input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 24px;
  padding: 0;
  accent-color: var(--accent);
}

.range-field output {
  color: var(--accent-strong);
  font-weight: 900;
}

.booking-form-sections {
  display: grid;
  gap: 0;
}

.form-section {
  padding: 12px 20px;
  border-bottom: 1px solid #dfe8ee;
}

.form-section h3 {
  margin: 0 0 8px;
  color: #26384a;
  font-size: 14px;
}

.booking-editor input,
.booking-editor select,
.booking-editor textarea {
  width: 100%;
  min-height: 34px;
  padding: 6px 9px;
  border-color: #cbd7df;
  background: #fff;
}

.booking-editor textarea {
  min-height: 58px;
}

.admin-notes-toggle {
  justify-self: start;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 900;
}

.admin-notes-block {
  display: grid;
  gap: 5px;
}

.admin-customer-display {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 18px;
  align-items: center;
}

.admin-customer-display div {
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
  min-width: 0;
}

.admin-customer-display span,
.admin-customer-display small {
  color: #596b7d;
  font-size: 11px;
  font-weight: 900;
}

.admin-customer-display strong {
  overflow-wrap: anywhere;
  color: #213446;
  font-size: 14px;
  font-weight: 900;
}

.admin-customer-display small {
  flex: 1 0 100%;
}

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  position: sticky;
  bottom: 0;
  padding: 12px 20px 14px;
  background: #fff;
}

.admin-auth-dialog {
  width: min(360px, calc(100vw - 32px));
  border: 0;
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.admin-auth-dialog::backdrop {
  background: rgba(12, 18, 24, .48);
}

.admin-auth-form {
  display: grid;
  gap: 12px;
  padding: 22px;
  background: #fff;
}

.admin-auth-form h2 {
  margin: 0;
  color: #152536;
  font-size: 22px;
}

.admin-auth-form label {
  display: grid;
  gap: 6px;
  color: #2d4053;
  font-weight: 800;
}

.modal-actions-main {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.booking-editor.is-editing .modal-actions {
  border-top: 1px solid #d8e2e8;
}

.booking-editor .modal-actions {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 20px 9px;
  overflow: visible;
}

.booking-editor .modal-actions-main {
  flex: 1 1 520px;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
  gap: 6px;
}

.booking-editor .modal-actions-side {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
}

.booking-editor .modal-actions .client-inline-actions {
  display: contents;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
}

.booking-editor .admin-action-button {
  flex: 0 0 auto;
  min-height: 31px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.booking-editor .deposit-action-button {
  border-color: rgba(129, 58, 166, .58);
  background: #fff;
  color: #713091;
}

.booking-editor .deposit-action-button:hover {
  border-color: #813aa6;
  background: #faf5fd;
}

.booking-editor .prepayment-action-button {
  border-color: rgba(63, 111, 159, .62);
  background: #fff;
  color: #2f5f90;
}

.booking-editor .prepayment-action-button:hover {
  border-color: #3f6f9f;
  background: #f3f8fd;
}

.booking-editor .block-action-button {
  border-color: rgba(191, 119, 28, .62);
  background: #fff;
  color: #9a570f;
}

.booking-editor .block-action-button:hover {
  border-color: #bf771c;
  background: #fff9ef;
}

.booking-editor .admin-notes-toggle {
  justify-self: start;
  width: auto;
  min-height: 31px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
}

.booking-editor label.is-invalid {
  color: #b82e3a;
}

.booking-editor label.is-invalid input {
  border-color: #c93b45;
  background: #fff7f8;
  box-shadow: 0 0 0 2px rgba(201, 59, 69, .12);
}

.booking-editor .field-error {
  margin-top: 3px;
  color: #c93b45;
  font-size: 12px;
  font-weight: 900;
}

.new-slot-panel {
  background: #f8fbfd;
}

.new-slot-panel .modal-actions {
  margin: 8px -22px -22px;
}

.move-confirm-panel {
  background: #f8fbfd;
}

.notify-field {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #d7e0e6;
  border-radius: 8px;
  background: #fff;
}

.move-confirm-panel .modal-actions {
  margin: 8px -22px -22px;
}

@media (max-width: 780px) {
  .is-embed-booking .booking-stage {
    width: min(100vw - 104px, 500px);
    padding-top: 16px;
  }

  .is-embed-booking .week-nav {
    inset-inline: -34px;
  }

  .is-embed-booking .round-nav {
    width: 32px;
    min-height: 48px;
    font-size: 40px;
  }

  .public-toolbar,
  .admin-header {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .public-calendar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .is-embed-booking .public-calendar {
    gap: 8px;
  }

  .day-heading {
    min-height: 46px;
    margin-bottom: 7px;
    font-size: 14px;
  }

  .day-heading span {
    font-size: 12px;
  }

  .slot-pill {
    width: min(100%, 72px);
    min-height: 32px;
    margin-bottom: 7px;
    border-width: 2px;
    font-size: 13px;
  }

  .public-toolbar h1,
  .admin-header h1 {
    font-size: 24px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .clients-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .client-discount-controls {
    grid-template-columns: 1fr;
  }

  .client-discount-buttons button {
    flex: 1 1 140px;
  }

  .club-discount-card-head,
  .club-custom-discount-head,
  .club-custom-discount-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .club-discount-grid {
    grid-template-columns: 1fr;
  }

  .club-discount-rule-row {
    grid-template-columns: 1fr;
  }

  .client-card-grid,
  .client-booking-item,
  .client-booking-head,
  .client-booking-history-item,
  .client-history-item,
  .client-history-changes li,
  .client-message-tech {
    grid-template-columns: 1fr;
  }

  .settings-tabs {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-tab {
    width: 100%;
  }

  .settings-game-row {
    grid-template-columns: 1fr;
  }

  .pricing-row {
    grid-template-columns: 1fr;
  }

  .deposit-release-grid {
    grid-template-columns: 1fr;
  }

  .deposit-rule-reminder-row,
  .deposit-rule-time-row {
    grid-template-columns: 1fr;
  }

  .pending-deposit-deadline-head,
  .pending-deposit-deadline-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .pending-deposit-deadline-head {
    flex-direction: column;
  }

  .deposit-deadline-editor {
    grid-template-columns: 1fr;
  }

  .deposit-deadline-editor-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .deposit-deadline-editor-actions {
    flex-wrap: wrap;
  }

  .deposit-deadline-editor .deposit-deadline-disable-toggle {
    width: fit-content;
    padding-top: 0;
  }

  .payment-status-row {
    grid-template-columns: 1fr;
  }

  .sms-toolbar,
  .sms-template-card-head,
  .sms-reminder-grid,
  .sms-rate-grid {
    grid-template-columns: 1fr;
  }

  .sms-template-head,
  .sms-reminder-card header,
  .sms-rate-card header {
    align-items: stretch;
    flex-direction: column;
  }

  .bulk-picker {
    grid-template-columns: 1fr;
  }

  .booking-editor-head {
    align-items: stretch;
    flex-direction: column;
    padding: 22px 18px 16px 48px;
  }

  .booking-status-line {
    justify-content: flex-start;
    max-width: none;
  }

  .form-section,
  .modal-actions {
    padding-inline: 18px;
  }

  .admin-booking-modal {
    width: min(100vw - 24px, 920px);
    max-width: calc(100vw - 24px);
    inset: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    margin: auto;
  }

  .booking-editor {
    width: 100%;
    max-width: 100%;
  }

  .admin-customer-display {
    display: grid;
    gap: 5px;
  }

  .admin-customer-display div {
    justify-content: start;
  }
}

@media (max-width: 720px) {
  .deposit-shell {
    width: min(100% - 12px, 700px);
    padding: 6px 0;
  }

  .deposit-panel,
  .deposit-payment {
    border-radius: 7px;
  }

  .deposit-head,
  .deposit-rules,
  .deposit-form,
  .deposit-summary {
    padding: 12px;
  }

  .deposit-head {
    padding-top: 10px;
  }

  .deposit-head h1 {
    margin-top: 0;
    font-size: 18px;
    line-height: 1.16;
  }

  .deposit-head p,
  .deposit-rules p,
  .terms-field {
    font-size: 12px;
  }

  .deposit-head p {
    line-height: 1.34;
  }

  .deposit-head span {
    font-size: 11px;
  }

  .deposit-summary dl {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .deposit-summary div {
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
  }

  .deposit-summary dt,
  .deposit-summary dd {
    font-size: 13px;
  }

  .deposit-rules .rule {
    padding: 7px 9px;
  }

  .lang-switch {
    width: 82px;
    margin-bottom: 8px;
  }

  .lang-pill {
    min-height: 24px;
    grid-template-columns: 1fr 9px;
    gap: 3px;
    padding: 3px 8px;
    font-size: 11px;
  }

  .lang-chevron {
    width: 6px;
    height: 6px;
    border-width: 1.5px;
  }

  .lang-menu button {
    min-height: 27px;
    font-size: 12px;
  }
}

@media (max-width: 760px) {
  .admin-modal-panel .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .admin-booking-modal {
    width: min(100vw - 32px, 420px);
    max-width: calc(100vw - 32px);
    inset: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    margin: auto;
  }

  .admin-modal-panel .form-grid {
    grid-template-columns: 1fr;
  }

  .booking-editor .modal-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 8px 12px 10px;
  }

  .booking-editor .modal-actions-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .booking-editor .modal-actions-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-inline-start: 0;
  }

  .booking-editor .modal-actions .client-inline-actions {
    display: contents;
  }

  .booking-editor .admin-action-button {
    width: 100%;
    min-height: 32px;
    padding: 6px 7px;
    font-size: 12px;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }

  .booking-editor .admin-notes-toggle,
  .booking-editor .danger-outline-button.admin-action-button {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    margin-inline-start: 0;
  }

  .payment-link-details {
    grid-template-columns: 1fr;
  }

  .payment-link-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .booking-editor-head {
    padding-inline-end: 16px;
  }
}

@media (max-width: 460px) {
  .is-embed-booking .booking-stage {
    width: min(100vw - 96px, 420px);
  }

  .is-embed-booking .week-nav {
    inset-inline: -34px;
  }

  .public-calendar {
    gap: 6px;
  }

  .day-heading {
    font-size: 12px;
  }

  .day-heading span,
  .slot-pill {
    font-size: 12px;
  }

  .slot-pill {
    width: 100%;
    min-height: 32px;
  }

  .sms-code-inputs {
    grid-template-columns: repeat(6, minmax(30px, 34px));
    gap: 7px;
  }

  .sms-code-digit {
    height: 40px;
    min-height: 40px;
  }

  .booking-flow-panel {
    padding: 12px 12px;
  }

  .booking-flow-panel .details-block {
    margin-inline: 0;
    padding-inline: 9px;
  }

  html[dir="rtl"] .booking-flow-panel .details-block {
    padding-inline: 9px;
  }
}