@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');:root {
  --text: #6b6375;
  --text-h: #08060d;
  --bg: #fff;
  --border: #e5e4e7;
  --code-bg: #f4f3ec;
  --accent: #aa3bff;
  --accent-bg: rgba(170, 59, 255, 0.1);
  --accent-border: rgba(170, 59, 255, 0.5);
  --social-bg: rgba(244, 243, 236, 0.5);
  --shadow:
    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;

  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, Consolas, monospace;

  font: 18px/145% var(--sans);
  letter-spacing: 0.18px;
  color-scheme: light dark;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @media (max-width: 1024px) {
    font-size: 16px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #9ca3af;
    --text-h: #f3f4f6;
    --bg: #16171d;
    --border: #2e303a;
    --code-bg: #1f2028;
    --accent: #c084fc;
    --accent-bg: rgba(192, 132, 252, 0.15);
    --accent-border: rgba(192, 132, 252, 0.5);
    --social-bg: rgba(47, 48, 58, 0.5);
    --shadow:
      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
  }

  #social .button-icon {
    filter: invert(1) brightness(2);
  }
}

body {
  margin: 0;
}

#root {
  width: 1126px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  border-inline: 1px solid var(--border);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

h1,
h2 {
  font-family: var(--heading);
  font-weight: 500;
  color: var(--text-h);
}

h1 {
  font-size: 56px;
  letter-spacing: -1.68px;
  margin: 32px 0;
  @media (max-width: 1024px) {
    font-size: 36px;
    margin: 20px 0;
  }
}
h2 {
  font-size: 24px;
  line-height: 118%;
  letter-spacing: -0.24px;
  margin: 0 0 8px;
  @media (max-width: 1024px) {
    font-size: 20px;
  }
}
p {
  margin: 0;
}

code,
.counter {
  font-family: var(--mono);
  display: inline-flex;
  border-radius: 4px;
  color: var(--text-h);
}

code {
  font-size: 15px;
  line-height: 135%;
  padding: 4px 8px;
  background: var(--code-bg);
}


.appRoot,
.appRoot * {
  font-family: Poppins, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Android Chrome: прибираємо типове синє/сіре підсвічування дотику */
  -webkit-tap-highlight-color: transparent;
}

/* Без синьої обводки браузера при кліку; обводка лишається при Tab (focus-visible) на десктопі */

.appRoot
  :where(
    button,
    a,
    input,
    textarea,
    select,
    summary,
    [role='button'],
    [role='tab'],
    [role='link'],
    [role='menuitem']
  ):focus {
  outline: none;
}

.appRoot
  :where(
    button,
    a,
    input,
    textarea,
    select,
    summary,
    [role='button'],
    [role='tab'],
    [role='link'],
    [role='menuitem']
  ):focus-visible {
  outline: 2px solid #ca9d99;
  outline-offset: 2px;
}

/* Android: Chromium часто показує :focus-visible після тапу — прибираємо будь-яку обводку */

html.ua-android
  .appRoot
  :where(
    button,
    a,
    input,
    textarea,
    select,
    summary,
    [role='button'],
    [role='tab'],
    [role='link'],
    [role='menuitem']
  ):focus,
html.ua-android
  .appRoot
  :where(
    button,
    a,
    input,
    textarea,
    select,
    summary,
    [role='button'],
    [role='tab'],
    [role='link'],
    [role='menuitem']
  ):focus-visible {
  outline: none !important;
}

.counter {
  font-size: 16px;
  padding: 5px 10px;
  border-radius: 5px;
  color: var(--accent);
  background: var(--accent-bg);
  border: 2px solid transparent;
  transition: border-color 0.3s;
  margin-bottom: 24px;

  &:hover {
    border-color: var(--accent-border);
  }
  &:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}

.hero {
  position: relative;

  .base,
  .framework,
  .vite {
    inset-inline: 0;
    margin: 0 auto;
  }

  .base {
    width: 170px;
    position: relative;
    z-index: 0;
  }

  .framework,
  .vite {
    position: absolute;
  }

  .framework {
    z-index: 1;
    top: 34px;
    height: 28px;
    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
      scale(1.4);
  }

  .vite {
    z-index: 0;
    top: 107px;
    height: 26px;
    width: auto;
    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
      scale(0.8);
  }
}

#center {
  display: flex;
  flex-direction: column;
  gap: 25px;
  place-content: center;
  place-items: center;
  flex-grow: 1;

  @media (max-width: 1024px) {
    padding: 32px 20px 24px;
    gap: 18px;
  }
}

#next-steps {
  display: flex;
  border-top: 1px solid var(--border);
  text-align: left;

  & > div {
    flex: 1 1 0;
    padding: 32px;
    @media (max-width: 1024px) {
      padding: 24px 20px;
    }
  }

  .icon {
    margin-bottom: 16px;
    width: 22px;
    height: 22px;
  }

  @media (max-width: 1024px) {
    flex-direction: column;
    text-align: center;
  }
}

#docs {
  border-right: 1px solid var(--border);

  @media (max-width: 1024px) {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

#next-steps ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 8px;
  margin: 32px 0 0;

  .logo {
    height: 18px;
  }

  a {
    color: var(--text-h);
    font-size: 16px;
    border-radius: 6px;
    background: var(--social-bg);
    display: flex;
    padding: 6px 12px;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: box-shadow 0.3s;

    &:hover {
      box-shadow: var(--shadow);
    }
    .button-icon {
      height: 18px;
      width: 18px;
    }
  }

  @media (max-width: 1024px) {
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;

    li {
      flex: 1 1 calc(50% - 8px);
    }

    a {
      width: 100%;
      justify-content: center;
      box-sizing: border-box;
    }
  }
}

#spacer {
  height: 88px;
  border-top: 1px solid var(--border);
  @media (max-width: 1024px) {
    height: 48px;
  }
}

.ticks {
  position: relative;
  width: 100%;

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: -4.5px;
    border: 5px solid transparent;
  }

  &::before {
    left: 0;
    border-left-color: var(--border);
  }
  &::after {
    right: 0;
    border-right-color: var(--border);
  }
}

/* SCREEN 01 (Home: categories) + bottom navigation */

.appRoot {
  min-height: 100svh;
  background: #FFFAFA;
  box-sizing: border-box;
  overflow-x: hidden;
}

.appContent {
  max-width: 520px;
  margin: 0 auto;
  /* tab bar 101px + зазор + пагінація / safe area (iPhone) */
  padding: 20px 20px calc(101px + 48px + env(safe-area-inset-bottom, 0px)) 20px;
}

.apiStatus {
  /* Hide debug health text in the UI (matches your screenshot) */
  display: none;
}

.screen {
  margin: 0 auto;
}

.screenTitle {
  margin: 20px 0 34px 0;
  font-size: 18px;
  font-family: Poppins, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: center;
  color: #1A1A1A;
}

.categoryGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.categoryCard {
  border-radius: 24px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  position: relative;
  aspect-ratio: 16 / 8;
}

/* Фото категорії (як раніше з nails.png / brows.png): кадрування через object-position + scale */

.categoryCardImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  transform: scale(1.12);
  transform-origin: center;
  display: block;
}

.categoryCard-nails .categoryCardImage {
  object-position: center 31%;
}

.categoryCard-brows .categoryCardImage {
  object-position: 95% 49%;
  transform: scale(1.25) translateX(-35px);
}

.categoryCard-makeup .categoryCardImage {
  /* Вліво: низький % по X + translateX (як у brows) — інакше object-position майже не «тягне» */
  object-position: 32% 46%;
  transform: scale(1.12) translateX(-18px);
  transform-origin: center center;
}

/* Вузький екран: без горизонтального зсуву — центр + трохи більший scale, щоб заповнити плитку рівномірно */

@media (max-width: 768px) {
  .categoryCard-makeup .categoryCardImage {
    object-position: center 46%;
    transform: scale(1.3) translateX(0);
    transform-origin: center center;
  }
}

/* Горизонтальне фото стрижки (руки + ножиці) — тримати фокус по центру */

.categoryCard-hair .categoryCardImage {
  object-position: center 42%;
  transform: scale(1.1);
}

/* Барбер: горизонтальний крупний план (борода / тример) */

.categoryCard-barber .categoryCardImage {
  object-position: center 42%;
  transform: scale(1.08);
}

.categoryCardVisual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transform-origin: center;
}

.categoryCard-nails .categoryCardVisual {
  background-image:
    radial-gradient(ellipse 120% 80% at 18% 12%, rgba(255, 255, 255, 0.5), transparent 55%),
    linear-gradient(135deg, #f8e8e4 0%, #e8b4a8 38%, #c26b6b 78%, #8b3a4a 100%);
}

.categoryCard-brows .categoryCardVisual {
  background-image:
    radial-gradient(circle at 78% 22%, rgba(255, 236, 210, 0.45), transparent 48%),
    linear-gradient(145deg, #3e2723 0%, #5d4037 34%, #8d6e63 68%, #d7ccc8 100%);
}

.categoryCard-hair .categoryCardVisual {
  background-image:
    radial-gradient(ellipse 90% 70% at 28% 18%, rgba(255, 255, 255, 0.28), transparent 52%),
    linear-gradient(125deg, #1a0f2e 0%, #4a2c6b 42%, #8e6ba8 74%, #e1bee7 100%);
}

.categoryCard-makeup .categoryCardVisual {
  background-image:
    radial-gradient(circle at 68% 12%, rgba(255, 255, 255, 0.55), transparent 42%),
    linear-gradient(140deg, #fff3e0 0%, #ffccbc 32%, #f48fb1 68%, #ad1457 100%);
}

.categoryCard-massage .categoryCardVisual {
  background-image:
    radial-gradient(ellipse 100% 55% at 50% 0%, rgba(255, 255, 255, 0.22), transparent 58%),
    linear-gradient(160deg, #0a2f38 0%, #1a5c6b 38%, #3d8b8f 72%, #9fd9d4 100%);
}

.categoryCard-cosmetology .categoryCardVisual {
  background-image:
    radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.6), transparent 46%),
    linear-gradient(135deg, #fff3e0 0%, #ffd54f 28%, #ff7f7f 62%, #6a1b9a 100%);
}

.categoryCard-epilation .categoryCardVisual {
  background-image:
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.5), transparent 40%),
    linear-gradient(145deg, #e8f5e9 0%, #c8e6c9 32%, #66bb6a 62%, #2e7d32 100%);
}

.categoryCard-barber .categoryCardVisual {
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 15%, rgba(255, 255, 255, 0.35), transparent 50%),
    linear-gradient(155deg, #0d47a1 0%, #1976d2 35%, #42a5f5 62%, #e3f2fd 100%);
}

.categoryCard-other .categoryCardVisual {
  transform: scale(1);
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 48%, rgba(255, 255, 255, 0.12) 100%),
    linear-gradient(148deg, #121826 0%, #1f3a4d 52%, #2d5a6a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.categoryCard-other .categoryCardVisual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    108deg,
    rgba(255, 255, 255, 0.045) 0px,
    rgba(255, 255, 255, 0.045) 1px,
    transparent 1px,
    transparent 11px
  );
  opacity: 0.55;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.categoryCard-other .categoryCardVisual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 55% at 50% 0%, rgba(255, 255, 255, 0.18), transparent 58%);
  pointer-events: none;
}

.categoryCardOverlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Єдиний «бʼюті»-оверлей: зверху чисто, донизу теплий коричневий — як на твоїх референс-фото */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(140, 109, 103, 0) 40.28%,
    rgba(74, 51, 46, 0.4) 105.72%
  );
}

/* На реальних фото трохи сильніше затемнення знизу, щоб білий текст читався як на макеті */

.categoryCard--photo .categoryCardOverlay {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(140, 109, 103, 0.08) 34%,
    rgba(74, 51, 46, 0.55) 100%
  );
}

.categoryCard-other:not(.categoryCard--photo) .categoryCardOverlay {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(18, 24, 38, 0.25) 48%,
    rgba(10, 14, 22, 0.78) 100%
  );
}

/* Якщо для «Інші послуги» є фото — той самий теплий градієнт, що й для інших плиток */

.categoryCard-other.categoryCard--photo .categoryCardOverlay {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(140, 109, 103, 0.08) 34%,
    rgba(74, 51, 46, 0.55) 100%
  );
}

.categoryCard:hover {
  transform: translateY(-1px);
}

.categoryCardTitle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  color: #FFFFFF;
  font-family: Poppins, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  font-style: SemiBold;
  font-size: 37px;
  line-height: 1;
  letter-spacing: 0px;
  text-align: right;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.categoryOverlay {
  display: none; /* text is baked into category images */
}

.categoryLabel {
  position: absolute;
  bottom: 14px;
  right: 14px;
  left: 14px;
  display: flex;
  justify-content: flex-end;
}

.categoryLabelTitle {
  font-weight: 600;
  color: #FFFFFF;
  font-size: 20px;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.screenText {
  padding-top: 20px;
  color: #888888;
  font-size: 14px;
  margin-top: 8px;
}

.mastersTitleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mastersTitleRight {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* (removed empty deprecated ruleset) */

.mastersScreenTitle {
  /* Make the location title more prominent and add spacing above search */
  font-size: 22px;
  line-height: 1.15;
  font-weight: 600;
  margin: 18px 0 26px;

  min-width: 0;
}

.mastersMapPlaceholderBtn {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  opacity: 0.65;
  cursor: not-allowed;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  width: 24px;
  height: 24px;
  box-shadow: none;
}

.mastersMapPlaceholderIcon {
  display: block;
  flex-shrink: 0;
}

.masterAvatarLink {
  text-decoration: none;
  display: block;
  align-self: center;
  color: inherit;
}

.masterNameLink {
  color: inherit;
  text-decoration: none;
}

.masterNameLink:hover {
  text-decoration: underline;
}

.mastersList {
  margin-top: 14px;
  display: grid;
  gap: 12px;
  width: 100%;
  justify-items: stretch;
}

.mastersToolbar {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.mastersSearchRow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
}

.mastersSearchInputWrap {
  width: 100%;
  height: 38px;
  border: 1px solid #F3E8E8;
  border-radius: 16px;
  padding: 8px 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
}

@media (max-width: 420px) {
  .mastersSearchRow {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

/* не показуємо "квадрат" (focus-visible outline) навколо wrapper при кліку в інпут */

.mastersSearchInputWrap:focus-within {
  outline: none;
}

.mastersSearchInput {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  color: #201C1B;
  font-size: 12px;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

/* On some browsers clicks can still trigger :focus-visible; keep search clean */

.mastersSearchInput:focus-visible,
.mastersSearchInputWrap:focus-visible {
  outline: none;
  outline-offset: 0;
}

.mastersSearchInput::placeholder {
  color: #B0B0B0;
}

.mastersSearchClearBtn {
  border: none;
  background: #E3B0AC;
  padding: 0;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.mastersLocationBtn {
  border: none;
  background: transparent;
  color: #CA9D99;
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: left;
  padding: 0;
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  justify-self: start;
  white-space: nowrap;
}

.mastersTypeSheet {
  height: min(56vh, 340px);
  max-height: min(56vh, 340px);
}

.mastersLocationBtn span {
  font-size: 11px;
}

.mastersLocationBtn:disabled {
  opacity: 0.6;
  cursor: default;
}

.mastersLocationIcon {
  width: 13px;
  height: 13px;
  display: block;
}

.mastersEmpty {
  text-align: center;
  color: #B0B0B0;
  font-size: 13px;
  margin: 8px 0 0;
}

.mastersPagination {
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.paginationBtn {
  min-width: 64px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #D9D9D9;
  background: #FFFFFF;
  color: #201C1B;
  font-size: 12px;
  font-weight: 500;
}

.paginationBtn:disabled {
  opacity: 0.45;
}

.paginationInfo {
  color: #8A8A8A;
  font-size: 12px;
}

.mastersLoadMoreWrap {
  min-height: 28px;
  margin: 14px 0 6px;
}

.masterCard {
  background: #FFFFFF;
  border: 1px solid #D9D9D9;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 13px 15px 10px 15px;
  box-sizing: border-box;
  display: grid;
  width: 100%;
  max-width: 100%;
  min-height: 169px;
  height: auto;
  grid-template-columns: 117px minmax(0, 1fr);
  gap: 23px;
  justify-content: space-between;
  align-items: stretch;
  margin: 0;
}

.masterLeft {
  height: 100%;
  min-height: 92px;
  width: 117px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.masterAvatar {
  width: 117px;
  height: 115px;
  border-radius: 999px;
  /* Без фото: світліший рожево-беж, але не «чисто білий» */
  background: linear-gradient(180deg, #f2e8e5 0%, #eadfd9 52%, #e2d3cd 100%);
  color: #7a6560;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 32px;
  align-self: center;
  overflow: hidden;
}

.masterAvatarImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.masterStars {
  width: 100%;
  padding: 0px 4px 4px;
  display: flex;
  align-items: center;
  /* justify-content: flex-start; */
  /* gap: 2px; */
  /* flex-wrap: wrap; */
}

.masterStar {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

.masterRatingValue {
  margin-left: 6px;
  color: #B0B0B0;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: center;
  display: inline-flex;
  align-items: center;
}

.masterInfo {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  min-height: 0;
}

.masterName {
  margin: 0;
  color: #201C1B;
  font-size: 16px;
  font-weight: 600;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: left;
  align-self: stretch;
}

.masterStudio {
  margin: 0;
  color: #201C1B;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: left;
  align-self: stretch;
}

.masterRole {
  margin: 0;
  color: #7a6560;
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: 0px;
  text-align: left;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow-wrap: anywhere;
}

.masterAddress {
  margin: 0;
  color: #B0B0B0;
  font-size: 10px;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: left;
  align-self: stretch;
}

.masterExperience {
  margin: 0;
  color: #B0B0B0;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: left;
  align-self: stretch;
}

.masterYearsValue {
  color: #201C1B;
}

.appointmentBtn {
  margin-top: auto;
  width: 100%;
  height: 49px;
 
  box-sizing: border-box;
  border-radius: 999px;
  background: linear-gradient(270deg, #EFD7D6 0%, #E2BAB7 66.5%);
  box-shadow: 0px 6px 4px 0px #CA9D991A;
  border: none;
  color: #FFFFFF;
  text-decoration: none;
  display: inline-flex;
 
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: center;
}

/* Masters catalog list — glass cards + search (client «home» /masters) */

.mastersScreen:not(.mastersScreen--map) .masterCard {
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 18px;
  box-shadow:
    0 8px 28px rgba(202, 157, 153, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.65) inset,
    0 1px 0 rgba(255, 255, 255, 0.78) inset;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.mastersScreen:not(.mastersScreen--map) .masterAvatar {
  background: linear-gradient(180deg, #f1e6e2 0%, #e9dad5 45%, #e0cfc9 100%);
  color: #7a6560;
  border: 1px solid rgba(230, 200, 195, 0.65);
  box-shadow:
    0 4px 14px rgba(202, 157, 153, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.mastersScreen:not(.mastersScreen--map) .masterName,
.mastersScreen:not(.mastersScreen--map) .masterStudio {
  color: rgba(78, 68, 65, 0.95);
}

.mastersScreen:not(.mastersScreen--map) .masterYearsValue {
  color: rgba(78, 68, 65, 0.88);
}

.mastersScreen:not(.mastersScreen--map) .masterRatingValue {
  color: rgba(150, 135, 130, 0.85);
}

.mastersScreen:not(.mastersScreen--map) .mastersSearchInputWrap {
  border: 1px solid rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 4px 18px rgba(202, 157, 153, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.mastersScreen:not(.mastersScreen--map) .mastersSearchInput {
  color: rgba(65, 56, 54, 0.95);
}

.mastersScreen:not(.mastersScreen--map) .mastersSearchClearBtn {
  background: linear-gradient(180deg, #f0ddd9 0%, #e4c2bc 48%, #d9ada5 100%);
  box-shadow: 0 1px 6px rgba(202, 157, 153, 0.2);
}

.mastersScreen:not(.mastersScreen--map) .appointmentBtn {
  background: linear-gradient(180deg, #f0ddd9 0%, #e4c2bc 48%, #d9ada5 100%);
  border: 1px solid rgba(200, 150, 145, 0.48);
  box-shadow: 0 2px 12px rgba(202, 157, 153, 0.2);
  color: #fff;
}

.mastersScreen:not(.mastersScreen--map) .mastersEmpty {
  color: rgba(140, 128, 124, 0.85);
}

.masterProfileScreen {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 20px;
  margin-top: -20px;
}

/* М’яка рожева пляма зверху — крізь скляну модалку запису видно «живий» відблиск */

.masterProfileScreen::before {
  content: '';
  position: absolute;
  left: -8%;
  top: -48px;
  width: 116%;
  height: min(260px, 38vh);
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 72% 68% at 42% 52%, rgba(232, 188, 184, 0.55), transparent 68%),
    radial-gradient(ellipse 58% 52% at 72% 36%, rgba(255, 218, 200, 0.42), transparent 64%);
  filter: blur(40px);
  opacity: 0.92;
}

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

.profileHero {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
  height: 391px;
}

@media (min-width: 768px) {
  .profileHero {
    width: 100%;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  .profileHeroImage {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
}

.profileHeroImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  display: block;
}

.profileHeroPlaceholder {
  width: 100%;
  height: 100%;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EFE9E4;
}

.profileHeroPlaceholderLetter {
  font-size: 72px;
  font-weight: 700;
  color: #201C1B;
  line-height: 1;
  user-select: none;
}

.profileHeroOverlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 61.68%, rgba(0, 0, 0, 0.59) 95.03%);
}

.profileFavoriteTopRight {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}

.profileHeroContent {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 15px 20px 15px;
  color: #FFFFFF;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.profileFavoriteBtn {
  border: none;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1;
  color: #B0B0B0;
  border-radius: 999px;
}

.profileFavoriteBtn--active {
  color: #E3B0AC;
}

.profileFavoriteIcon {
  font-size: 26px;
  line-height: 1;
}

.profileFavoriteText {
  font-weight: 700;
}

.clientSectionTitle {
  text-align: left;
  color: #201C1B;
}

.clientActionRow {
  display: flex;
  gap: 10px;
}

.clientActionRow--mt10 {
  margin-top: 10px;
}

.clientActionRow--mt12 {
  margin-top: 12px;
}

.clientActionRow--mt14 {
  margin-top: 14px;
}

.clientActionBtn {
  flex: 1;
}

.clientActionLink {
  text-align: center;
  text-decoration: none;
}

.clientFavActionsRow {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  width: 100%;
  align-items: end;
}

.clientFavActionsRow > * {
  width: 100%;
}

.clientFavActionsRow > .bookingNextBtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.masterCard--fav .masterNameLink {
  font-size: 15px;
}

.clientFavHeader {
  display: flex;
  gap: 12px;
  align-items: center;
}

.clientFavAvatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid #E5E0DC;
}

.clientFavAvatar--placeholder {
  background: #EFE9E4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #201C1B;
}

.clientFavMeta {
  min-width: 0;
}

.clientFavName {
  font-weight: 700;
  color: #201C1B;
}

.clientFavSub {
  margin: 0;
}

.clientHistoryList {
  display: grid;
  gap: 14px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 6px;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

.clientAccountHistoryList .clientAppointmentsGlassCard {
  scroll-snap-align: start;
}

.clientAppointmentsCard {
  /* legacy — list now uses .clientAppointmentsGlassCard */
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.profileHeroName {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: left;
  color: #FFFFFF;
}

.profileHeroSub {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: 0px;
  text-align: left;
  color: #FFFFFF;
}

.profileHeroRole {
  font-weight: 500;
  opacity: 0.95;
  text-align: left;
  justify-self: start;
  width: 100%;
  max-width: 100%;
  line-height: 1.25;
  margin: 0;
}

.profileHeroInfo {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
  justify-items: start;
  align-content: end;
}

.profileHeroRatingWrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.profileHeroStars {
  display: flex;
  gap: 2px;
}

.profileHeroStar {
  color: #B0B0B0;
  font-size: 12px;
  line-height: 1;
}

.profileHeroStarActive {
  color: #FFFFFF;
}

.profileHeroRatingValue {
  color: #B0B0B0;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: center;
  display: inline-flex;
  align-items: center;
}

.profileSection {
  background: transparent;
  border: none;
  border-radius: 16px;
  padding: 0;
}

.profileSectionServices {
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: left;
}

.profileServicesSalonEmpty {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.4;
  color: #6b5e5b;
  font-weight: 400;
}

/* .profileSectionBooking {
  padding-top: 15px;
  padding-bottom: 15px;
} */

.profileSectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 16px;
  padding: 20px 0;
}

.profileSectionTitle {
  margin: 0;
  color: #000000;
  font-size: 16px;
  font-weight: 600;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: left;
  display: inline-flex;
  align-items: center;
  padding-bottom: 0;
}

.profileServicesTitle {
  padding-bottom: 20px;
  display: block;
  width: 100%;
  text-align: left;
  align-self: flex-start;
  margin-left: 0;
  margin-right: auto;
  justify-content: flex-start;
}

.profileSectionLink {
  border: none;
  background: transparent;
  color: #CA9D99;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  margin: 0;
}

.profilePortfolioGrid {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.profilePortfolioGrid > .profilePortfolioItem {
  min-width: 0;
}

.profilePortfolioItem {
  width: 100%;
  height: 100px;
  min-width: 0;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  background: #f4e8e6;
}

.profileSectionHead--salonTeam {
  align-items: flex-start;
}

.profileSectionHead--salonTeam .profileSalonTeamHint {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 400;
  color: #6b5e5b;
  line-height: 1.35;
}

/* Секція майстрів салону: вирівнювання зліва (як початок списку), не по центру колонки. */

.profileSectionSalonTeam {
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
  text-align: left;
}

.profileSectionSalonTeam .profileSectionHead--salonTeam {
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.profileSectionSalonTeam .profileSectionHead--salonTeam > div {
  width: 100%;
  text-align: left;
}

.profileSectionSalonTeam .profileSalonTeamMastersList {
  margin-top: 8px;
  justify-items: stretch;
  width: 100%;
}

.profileSectionSalonTeam .masterAvatar {
  align-self: flex-start;
}

.profileSectionSalonTeam .masterStars {
  justify-content: flex-start;
  width: 100%;
}

.masterProfileScreen .masterCard--salonTeamUnpublished {
  opacity: 0.72;
}

.masterProfileScreen .masterCard--salonTeamSelf {
  box-shadow: 0 0 0 2px rgba(227, 176, 172, 0.55);
}

.profileSalonTeamSelfHint {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: #b06b63;
  line-height: 1.2;
}

.masterProfileScreen .appointmentBtn--salonTeamDisabled {
  pointer-events: none;
  opacity: 0.62;
  cursor: default;
  background: linear-gradient(270deg, #e8e0df 0%, #d4c9c7 66.5%);
  color: #6b605e;
}

.profileSalonTeamScroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  margin: 0 -2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.profileSalonTeamCard {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 88px;
  text-decoration: none;
  color: #201c1b;
  text-align: center;
}

.profileSalonTeamCard--current .profileSalonTeamAvatarWrap {
  box-shadow: 0 0 0 2px #e3b0ac;
}

.profileSalonTeamCard--unpublished {
  opacity: 0.72;
}

.profileSalonTeamBadge--muted {
  color: #8a7a76;
  font-weight: 500;
}

.profileSalonTeamAvatarWrap {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  overflow: hidden;
  background: #f4e8e6;
}

.profileSalonTeamAvatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profileSalonTeamAvatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  color: #b06b63;
}

.profileSalonTeamName {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.profileSalonTeamBadge {
  font-size: 10px;
  font-weight: 600;
  color: #b06b63;
  line-height: 1.2;
}

.profileServicesGrid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 10px;
  text-align: left;
}

.profileServiceItem {
  color: #201C1B;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
  position: relative;
  padding-left: 0;
  text-align: left;
}

.profileServiceItem::before {
  content: '';
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 999px;
  background: #E3B0AC;
  position: static;
}

.profileServiceItemName {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.profileServiceItemDur {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: #b06b63;
  white-space: nowrap;
}

.profileBookingDateRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  width: 100%;
  min-height: 40px;
}

.profileBookingDateNav {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #e3b0ac;
  background: #fff;
  color: #201c1b;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.profileBookingDateNav:disabled {
  opacity: 0.35;
  cursor: default;
}

.profileBookingDate {
  flex: 1;
  min-width: 0;
  min-height: 2.6em;
  margin: 0;
  padding-bottom: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: normal;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 0 4px;
}

.profileBookingDateRow .profileBookingDate {
  text-align: center;
}

.profileBookingSlotsRegion {
  min-height: 44px;
}

.profileSlotsGridRefreshing {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.profileSlotsStatus {
  margin: 0 0 10px;
}

.profileSlotsStatusPlaceholder {
  min-height: 44px;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.profileBookingDateLabel {
  color: #201C1B;
}

.profileBookingDateValue {
  color: #E3B0AC;
}

.profileDatePickerRow {
  margin-bottom: 14px;
  width: 100%;
  max-width: 100%;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  box-sizing: border-box;
}

.profileDateChip {
  flex: 0 0 48px;
  border: 1px solid #E3B0AC;
  border-radius: 12px;
  background: #FFFFFF;
  color: #201C1B;
  min-height: 44px;
  padding: 4px 2px;
  display: grid;
  place-items: center;
  gap: 2px;
  font-size: 10px;
  line-height: 1;
}

.profileDateChipActive {
  background: #E8B4B8;
  border-color: #E8B4B8;
  color: #FFFFFF;
}

.profileSlotsGrid {
  margin-top: 0;
  display: grid;
  /* minmax(0,1fr) + ширина кнопки ≤ комірки — інакше 57px у 6 колонок на вузькому екрані накладаються й «зникає» gap */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  justify-content: flex-start;
  gap: 12px 10px;
}

.profileSlotBtn {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 34px;
  padding: 1px 8px;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(220, 185, 180, 0.55);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 252, 251, 0.88) 50%,
    rgba(252, 240, 237, 0.58) 100%
  );
  color: #8f5e58;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(202, 157, 153, 0.08);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

.profileSlotBtn:hover:not(:disabled):not(.profileSlotBtnActive) {
  border-color: rgba(210, 175, 170, 0.85);
  filter: brightness(1.02);
}

.profileSlotBtnActive {
  background: linear-gradient(180deg, #f0ddd9 0%, #e4c2bc 48%, #d9ada5 100%);
  border-color: rgba(200, 150, 145, 0.55);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(202, 157, 153, 0.18);
}

.profileSlotBtnBusy {
  border: 1px solid #e0e0e0;
  color: #9a9a9a;
  background: #e8e8e8;
  cursor: not-allowed;
  box-shadow: none;
  font-weight: 500;
}

.profileBookBtn {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 48px;
  border: 1px solid rgba(200, 150, 145, 0.48);
  border-radius: 999px;
  background: linear-gradient(180deg, #f0ddd9 0%, #e4c2bc 48%, #d9ada5 100%);
  box-shadow: 0 2px 12px rgba(202, 157, 153, 0.2);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.profileBookBtn:hover:not(:disabled) {
  filter: brightness(1.02);
}

.profileBookBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.profileSectionContact,
.profileSectionLocation {
  padding-bottom: 15px;
}

.profileSectionLocation {
  text-align: left;
}

.profileContactHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profileLocationHead {
  display: flex;

  justify-content: flex-start;
  gap: 5px;
  width: fit-content;
}

.profileLocationHead svg {
  display: block;
  flex: 0 0 auto;
  transform: translateY(-4px);
}

.profileContactIcons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.profileContactLine {
  margin: 12px 0 0;
  color: #201C1B;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: left;
}

.profileLocationStudio {
  margin: 12px 0 0;
  color: #201C1B;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: left;
}

.profileLocationAddress {
  margin: 12px 0 15px 0;
  color: #B0B0B0;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: left;
}

.profileLocationLink {
  margin-top: 10px;
  border: none;
  background: transparent;
  padding: 0;
  color: #CA9D99;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  text-align: left;
  align-self: flex-start;
  width: fit-content;
}

.backLink {
  display: inline-block;
  margin-top: 16px;
  color: #D4909A;
  text-decoration: none;
  font-weight: 600;
}

.galleryTopRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.galleryTitle {
  margin: 20px 0 16px 0;
}

.galleryBackLink {
  color: #CA9D99;
  text-decoration: none;
  font-size: 12px;
}

.portfolioFullGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.portfolioFullItem {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* SCREEN 03b — full-screen portfolio viewer */

.portfolioViewerRoot {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #0f0f0f;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  box-sizing: border-box;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0)
    env(safe-area-inset-left, 0);
}

.portfolioViewerLoading {
  margin: auto;
  padding: 24px;
  color: #e8e8e8;
  font-size: 14px;
  text-align: center;
}

.portfolioViewerTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  flex-shrink: 0;
}

.portfolioViewerClose {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.portfolioViewerCounter {
  color: #fafafa;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.portfolioViewerSpacer {
  width: 44px;
}

.portfolioViewerStage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 4px 8px;
  min-height: 0;
}

.portfolioViewerImgWrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-height: min(72vh, 100%);
}

.portfolioViewerImg {
  max-width: 100%;
  max-height: min(72vh, 86dvh);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

.portfolioViewerNav {
  flex-shrink: 0;
  width: 40px;
  height: 56px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.portfolioViewerNav:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.portfolioViewerHint {
  text-align: center;
  font-size: 12px;
  color: #888;
  margin: 0 16px 10px;
}

.portfolioViewerBackLink {
  display: block;
  text-align: center;
  padding: 8px 16px 16px;
  color: #e3b0ac;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.bookingScreen {
  padding-top: 4px;
}

@media (max-width: 768px) {
  .bookingScreen {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    box-sizing: border-box;
  }
}

.bookingTopRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* margin-bottom: 10px; */
}

.bookingTopRow .bookingTitle {
  flex: 1;
  text-align: center;
}

.bookingTitle {
  margin: 20px 0 20px 0;
}

.bookingBackLink {
  color: #CA9D99;
  text-decoration: none;
  font-size: 12px;
}

.guestLoginModalPanel .bookingBackLink--belowPrimary {
  display: block;
  text-align: center;
  margin-top: 10px;
}

.bookingMasterName {
  margin: 15px 0 14px;
  color: #201C1B;
  font-size: 14px;
  font-weight: 600;
}

.bookingServicesList {
  display: grid;
  gap: 10px;
}

.bookingServiceItem {
  border: 2px solid #f0dedb;
  background: #ffffff;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.bookingServiceItemActive {
  border: 2px solid rgba(200, 150, 145, 0.85);
  background: linear-gradient(180deg, rgba(255, 252, 251, 1) 0%, rgba(252, 236, 233, 0.65) 100%);
  box-shadow: 0 2px 12px rgba(202, 157, 153, 0.18);
}

.bookingServiceItemLeading {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
}

.bookingServiceCheck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bookingServiceCheck--off {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(200, 160, 155, 0.45);
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.6);
}

.bookingServiceCheck--on {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f0ddd9 0%, #e4c2bc 48%, #d9ada5 100%);
  border: 1px solid rgba(180, 120, 115, 0.55);
  color: #ffffff;
  box-shadow: 0 1px 6px rgba(202, 157, 153, 0.35);
}

.bookingServiceCheck--on svg {
  display: block;
}

.bookingServiceMain {
  display: grid;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.bookingServiceName {
  color: #201C1B;
  font-size: 13px;
  font-weight: 600;
}

.bookingServiceItemActive .bookingServiceName {
  color: #6b3a3a;
}

.bookingServiceMeta {
  color: #B0B0B0;
  font-size: 12px;
}

.bookingServicePrice {
  color: #201C1B;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.bookingError {
  margin: 10px 0 0;
  color: #D96B6B;
  font-size: 12px;
}

.bookingError--modal {
  text-align: center;
  margin: 8px 0 4px;
}

/* Під модалкою запису: той самий тип плями, що на профілі (маршрут /booking без профілю в DOM) */

.bookingGlassBackdrop {
  position: fixed;
  inset: 0;
  z-index: 1106;
  pointer-events: none;
}

.bookingGlassBackdropBlob {
  position: absolute;
  left: 50%;
  top: max(4px, env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  width: min(520px, 104vw);
  height: min(220px, 32vh);
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 74% 66% at 45% 48%, rgba(232, 188, 184, 0.62), transparent 68%),
    radial-gradient(ellipse 56% 50% at 74% 36%, rgba(255, 212, 200, 0.48), transparent 64%);
  filter: blur(42px);
  opacity: 0.45;
}

/* Вибір послуг при записі — той самий bottom-sheet, що вхід на карті */

.bookingSelectServicesModalPanel.guestLoginModalPanel {
  max-height: min(82vh, 640px);
}

/* Модалки запису: темніший допоміжний текст і «рожеві» лейбли для читабельності на склі */

.bookingSelectServicesModalPanel.guestLoginModalPanel .guestLoginModalHint {
  color: rgba(42, 34, 32, 0.9);
}

.bookingSelectServicesModalPanel.guestLoginModalPanel .bookingBackLink {
  color: #8f5c56;
  font-weight: 600;
}

.bookingSelectServicesModalPanel.guestLoginModalPanel .bookingBackLink:hover {
  color: #6b3a3a;
}

.bookingSelectServicesModalPanel.guestLoginModalPanel .bookingSummaryRow span {
  color: #a86b63;
}

.bookingSelectServicesModalPanel.guestLoginModalPanel .bookingSuccessSub {
  color: rgba(45, 42, 40, 0.78);
}

.bookingMasterName--modal {
  margin: 6px 0 10px;
  text-align: center;
  font-size: 13px;
  color: rgba(42, 34, 32, 0.92);
  text-shadow: 0 1px 2px rgba(255, 252, 251, 0.9);
}

.bookingSelectServicesModalScroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -2px 0 0;
  padding-right: 4px;
}

.guestLoginModalPanel .bookingServicesList {
  gap: 8px;
}

.guestLoginModalPanel .bookingServiceItem {
  background: rgba(255, 255, 255, 0.38);
  border-color: rgba(244, 220, 218, 0.75);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
}

.guestLoginModalPanel .bookingServiceItemActive {
  border-color: rgba(200, 150, 145, 0.85);
  background: linear-gradient(
    180deg,
    rgba(255, 252, 251, 0.62) 0%,
    rgba(252, 236, 233, 0.48) 100%
  );
  box-shadow: 0 2px 12px rgba(202, 157, 153, 0.14);
  backdrop-filter: blur(10px) saturate(1.06);
  -webkit-backdrop-filter: blur(10px) saturate(1.06);
}

.guestLoginModalPanel .bookingServiceName,
.guestLoginModalPanel .bookingServicePrice {
  text-shadow: 0 1px 1px rgba(255, 252, 251, 0.75);
}

.guestLoginModalPanel .bookingSelectServicesNextBtn.bookingNextBtn {
  margin-top: 14px;
  flex-shrink: 0;
  width: 100%;
  height: 46px;
  border: 1px solid rgba(200, 150, 145, 0.48);
  background: linear-gradient(180deg, #f0ddd9 0%, #e4c2bc 48%, #d9ada5 100%);
  box-shadow: 0 2px 12px rgba(202, 157, 153, 0.2);
  color: #ffffff;
  font-weight: 600;
}

.guestLoginModalPanel .bookingSelectServicesNextBtn.bookingNextBtn:hover {
  filter: brightness(1.02);
}

/* Успішний запис: «Календар» + «На головну» у стилі модалки */

.guestLoginModalPanel .bookingSuccessModalActions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  width: 100%;
}

.guestLoginModalPanel .bookingSuccessModalActions .bookingSuccessModalBtn {
  margin-top: 0;
}

.guestLoginModalPanel .bookingSuccessModalBtn--secondary.bookingSelectServicesNextBtn.bookingNextBtn {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  border: 1px solid rgba(244, 220, 218, 0.95);
  color: #3d2822;
  box-shadow: 0 2px 12px rgba(202, 157, 153, 0.12);
  text-shadow: none;
}

.guestLoginModalPanel .bookingSuccessModalBtn--secondary.bookingSelectServicesNextBtn.bookingNextBtn:hover {
  filter: brightness(1.03);
  background: rgba(255, 255, 255, 0.78);
}

/* Календар і слоти в тому ж bottom-sheet, що вибір послуг */

.guestLoginModalPanel .bookingCalendarHead {
  margin-top: 0;
}

.guestLoginModalPanel .bookingModalDateHint {
  margin-bottom: 8px;
}

.guestLoginModalPanel .bookingSlotsGrid {
  margin-top: 4px;
}

.guestLoginModalPanel .bookingRetryOutline {
  margin-top: 10px;
  width: 100%;
}

.guestLoginModalPanel .bookingDateCell:not(.bookingDateCellActive):not(:disabled) {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
}

/* Вільні: чіткий білий (клікабельно); зайняті — .bookingSlotBtnBusy (сірий блок нижче). */

.guestLoginModalPanel .bookingSlotBtn:not(.bookingSlotBtnActive):not(.bookingSlotBtnBusy) {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(244, 220, 218, 0.95);
  color: #201c1b;
  font-weight: 600;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 6px rgba(202, 157, 153, 0.12);
}

.guestLoginModalPanel .bookingSlotBtnBusy {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.bookingNextBtn {
  margin-top: 16px;
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(270deg, #EFD7D6 0%, #E2BAB7 66.5%);
  box-shadow: 0px 6px 4px 0px #CA9D991A;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.bookingNextBtn:disabled {
  opacity: 0.55;
}

.bookingRetryOutline {
  margin-top: 19px;
  background: #ffffff;
  color: #201c1b;
  border: 1px solid #f4dcda;
  box-shadow: none;
}

.bookingCalendarHead {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bookingCalendarTitle {
  margin: 0;
  color: #201C1B;
  font-size: 14px;
  font-weight: 600;
}

.bookingCalendarNav {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid #f0dedb;
  background: rgba(255, 255, 255, 0.85);
  color: #ca9d99;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.bookingCalendarNav:hover {
  border-color: rgba(200, 150, 145, 0.45);
  color: #8a6a66;
}

.bookingWeekdays {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.bookingWeekdays span {
  color: #B0B0B0;
  font-size: 10px;
  text-align: center;
}

.bookingCalendarGrid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

/* Screen 09: Client appointments — glass cards + soft blobs (aligned with login / dashboard) */

/* Client account uses the same ambient background + blurred spots */

.clientAppointmentsScreen,
.clientAccountScreen,
.settingsScreen {
  position: relative;
  isolation: isolate;
  min-height: min(100%, 100svh);
  background:
    radial-gradient(ellipse 85% 55% at 8% 18%, rgba(227, 176, 172, 0.42), transparent 58%),
    radial-gradient(ellipse 75% 50% at 92% 12%, rgba(255, 218, 200, 0.45), transparent 52%),
    radial-gradient(ellipse 70% 45% at 55% 88%, rgba(244, 212, 210, 0.38), transparent 50%),
    radial-gradient(ellipse 60% 40% at 20% 75%, rgba(255, 240, 236, 0.5), transparent 48%),
    #fffafa;
}

/* Settings: same vibe, slightly brighter ambient wash */

.settingsScreen {
  background:
    radial-gradient(ellipse 85% 55% at 8% 18%, rgba(235, 205, 200, 0.34), transparent 58%),
    radial-gradient(ellipse 75% 50% at 92% 12%, rgba(255, 228, 215, 0.4), transparent 52%),
    radial-gradient(ellipse 70% 45% at 55% 88%, rgba(248, 228, 225, 0.32), transparent 50%),
    radial-gradient(ellipse 60% 40% at 20% 75%, rgba(255, 244, 240, 0.52), transparent 48%),
    #fffdfc;
}

.clientAppointmentsScreen::before,
.clientAccountScreen::before,
.settingsScreen::before {
  content: '';
  position: fixed;
  left: max(-40px, -5vw);
  top: 80px;
  width: min(380px, 95vw);
  height: 280px;
  background:
    radial-gradient(circle at 35% 25%, rgba(226, 176, 172, 0.55), rgba(255, 250, 250, 0) 60%),
    radial-gradient(circle at 75% 10%, rgba(202, 157, 153, 0.48), rgba(255, 250, 250, 0) 58%),
    radial-gradient(circle at 30% 85%, rgba(255, 218, 200, 0.32), rgba(255, 250, 250, 0) 60%);
  filter: blur(28px);
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

.clientAppointmentsScreen::after,
.clientAccountScreen::after {
  content: '';
  position: fixed;
  right: max(-100px, -12vw);
  top: 140px;
  width: min(380px, 95vw);
  height: 260px;
  background:
    radial-gradient(circle at 40% 35%, rgba(226, 176, 172, 0.52), rgba(255, 250, 250, 0) 62%),
    radial-gradient(circle at 70% 70%, rgba(244, 212, 210, 0.34), rgba(255, 250, 250, 0) 60%);
  filter: blur(30px);
  opacity: 0.88;
  pointer-events: none;
  z-index: 0;
}

.clientAppointmentsScreen > *,
.clientAccountScreen > *,
.settingsScreen > * {
  position: relative;
  z-index: 1;
}

.clientAppointmentsScreen > h1.screenTitle.bookingTitle,
.clientAccountScreen > h1.screenTitle.bookingTitle,
.settingsScreen > h1.screenTitle.bookingTitle {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Settings page — glass panels + buttons (aligned with client account; slightly airier) */

.settingsScreen .settingsProfileCard,
.settingsScreen .settingsLangCard,
.settingsScreen .settingsBlacklistCard,
.settingsScreen .settingsSessionCard {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.96);
  background: rgba(255, 255, 255, 0.64);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 8px 28px rgba(202, 157, 153, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.65) inset,
    0 1px 0 rgba(255, 255, 255, 0.78) inset;
  border-radius: 18px;
  padding: 16px 14px 18px !important;
}

.settingsScreen .settingsLangCard,
.settingsScreen .settingsSessionCard {
  margin-top: 12px;
}

.settingsScreen .settingsProfileAvatarImg,
.settingsScreen .settingsProfileAvatarPlaceholder {
  border: 2px solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 0 1px rgba(227, 176, 172, 0.4),
    0 10px 28px rgba(202, 157, 153, 0.22);
}

.settingsScreen .settingsProfileAvatarPlaceholder {
  background: linear-gradient(180deg, #f1e6e2 0%, #e8dbd6 100%);
  color: #7a6560;
}

.settingsScreen .settingsLangCardTitle {
  color: rgba(78, 68, 65, 0.9);
  font-weight: 700;
}

.settingsScreen .langToggleBtn {
  border: 1px solid rgba(220, 185, 180, 0.55);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 252, 251, 0.88) 50%,
    rgba(252, 240, 237, 0.58) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #8a756f;
  box-shadow: 0 1px 6px rgba(202, 157, 153, 0.06);
}

.settingsScreen .langToggleBtn--active {
  background: linear-gradient(180deg, #f0ddd9 0%, #e4c2bc 48%, #d9ada5 100%);
  border-color: rgba(200, 150, 145, 0.45);
  color: #fff;
  box-shadow: 0 2px 12px rgba(202, 157, 153, 0.18);
}

.settingsScreen .settingsActions .bookingNextBtn.settingsBtn,
.settingsScreen .settingsBlacklistActions .bookingNextBtn.settingsBtn {
  border: 1px solid rgba(200, 150, 145, 0.48);
  background: linear-gradient(180deg, #f0ddd9 0%, #e4c2bc 48%, #d9ada5 100%);
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(202, 157, 153, 0.2);
}

.settingsScreen .settingsActions .settingsBtnOutline,
.settingsScreen .settingsActions .settingsLogoutBtn {
  border: 1px solid rgba(220, 185, 180, 0.55) !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 252, 251, 0.88) 50%,
    rgba(252, 240, 237, 0.58) 100%
  ) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #8f5e58 !important;
  box-shadow: 0 1px 8px rgba(202, 157, 153, 0.06) !important;
  min-height: 44px !important;
  height: auto !important;
}

.settingsScreen .settingsActions .settingsBtnOutline:hover,
.settingsScreen .settingsActions .settingsLogoutBtn:hover {
  border-color: rgba(210, 175, 170, 0.72) !important;
}

.settingsScreen .settingsMsg {
  color: rgba(196, 138, 130, 0.92);
}

.settingsScreen .dashboardQrPanel {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.98);
  box-shadow:
    0 16px 44px rgba(202, 157, 153, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.65) inset;
  border-radius: 18px;
}

.settingsScreen .settingsProfileName {
  color: rgba(78, 68, 65, 0.95);
}

.settingsScreen .settingsProfileEmail {
  color: rgba(110, 98, 95, 0.72);
}

.settingsScreen .settingsCopyLinkText {
  color: rgba(198, 150, 145, 0.98);
}

.settingsScreen .settingsProfileCard .settingsProfileMyLinkBtns .dashboardGhostBtn {
  background: rgba(255, 255, 255, 0.42) !important;
  border-color: rgba(220, 185, 180, 0.5) !important;
  color: rgba(95, 82, 78, 0.88) !important;
}

.settingsScreen .settingsProfileCard .settingsProfileMyLinkBtns .dashboardGhostBtn:disabled {
  background: rgba(255, 255, 255, 0.28) !important;
}

/* Settings: blacklist (master-only) — scoped so other forms stay intact */

.settingsScreen .settingsBlacklistCard {
  margin-top: 12px;
  max-width: 100%;
}

.settingsScreen .settingsBlacklistForm {
  margin-top: 10px;
  display: grid;
  gap: 10px;
  max-width: 100%;
}

.settingsScreen .settingsBlacklistRow2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 100%;
}

@media (max-width: 420px) {
  .settingsScreen .settingsBlacklistRow2 {
    grid-template-columns: 1fr;
  }
}

.settingsScreen .settingsBlacklistInput {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 44px;
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid rgba(227, 176, 172, 0.6);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55) inset,
    0 1px 10px rgba(202, 157, 153, 0.06);
  color: rgba(78, 68, 65, 0.92);
  outline: none;
}

.settingsScreen .settingsBlacklistInput::placeholder {
  color: rgba(125, 110, 106, 0.6);
}

.settingsScreen .settingsBlacklistInput:focus {
  border-color: rgba(200, 150, 145, 0.72);
  box-shadow:
    0 0 0 3px rgba(227, 176, 172, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

.settingsScreen .settingsBlacklistActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
  max-width: 100%;
}

.settingsScreen .settingsBlacklistActions .bookingNextBtn.settingsBtn {
  width: 100%;
  margin-top: 0;
  min-height: 48px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  /* Match base .bookingNextBtn (same as the old "clear data" look) */
  border: none !important;
  background: linear-gradient(270deg, #EFD7D6 0%, #E2BAB7 66.5%) !important;
  box-shadow: 0px 6px 4px 0px #CA9D991A !important;
}

.settingsScreen .settingsBlacklistList {
  margin-top: 12px;
  max-width: 100%;
}

.settingsScreen .settingsBlacklistItems {
  display: grid;
  gap: 10px;
  max-width: 100%;
}

.settingsScreen .settingsBlacklistItem {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex-wrap: wrap;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(220, 185, 180, 0.55);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 6px 22px rgba(202, 157, 153, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

.settingsScreen .settingsBlacklistItemMain {
  display: grid;
  grid-template-columns: 30% 70%;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 260px;
}

.settingsScreen .settingsBlacklistAvatar {
  width: 76px;
  height: 76px;
  border-radius: 999px;
  flex: 0 0 76px;
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(122, 101, 96, 0.95);
  background: linear-gradient(180deg, rgba(241, 230, 226, 0.98) 0%, rgba(232, 219, 214, 0.92) 100%);
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 0 1px rgba(227, 176, 172, 0.32),
    0 10px 26px rgba(202, 157, 153, 0.16);
  user-select: none;
  justify-self: center;
}

.settingsScreen .settingsBlacklistItemText {
  min-width: 0;
  flex: 1 1 220px;
  padding-right: 120px;
  display: grid;
  align-content: start;
  gap: 2px;
}

.settingsScreen .settingsBlacklistItemTopRow {
  position: absolute;
  top: 10px;
  right: 10px;
}

.settingsScreen .settingsBlacklistBadge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: rgba(140, 74, 74, 0.92);
  background: rgba(227, 176, 172, 0.18);
  border: 1px solid rgba(227, 176, 172, 0.46);
  box-shadow: 0 1px 10px rgba(202, 157, 153, 0.08);
  flex: 0 0 auto;
}

.settingsScreen .settingsBlacklistItemMeta {
  margin-top: 1px;
  color: rgba(95, 82, 78, 0.78);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
}

.settingsScreen .settingsBlacklistItemMeta.screenText,
.settingsScreen .settingsBlacklistItemNote.screenText {
  padding-top: 0;
  margin-top: 0;
}

.settingsScreen .settingsBlacklistItemNote {
  margin-top: 3px;
  color: rgba(95, 82, 78, 0.82);
}

@media (max-width: 520px) {
  .settingsScreen .settingsBlacklistItemMain {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .settingsScreen .settingsBlacklistAvatar {
    justify-self: start;
  }

  .settingsScreen .settingsBlacklistItemText {
    padding-right: 0;
  }
}

.settingsScreen .settingsBlacklistRemoveBtn {
  border: 1px solid rgba(220, 185, 180, 0.55) !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 252, 251, 0.88) 50%,
    rgba(252, 240, 237, 0.58) 100%
  ) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #8f5e58 !important;
  box-shadow: 0 1px 8px rgba(202, 157, 153, 0.06) !important;
  border-radius: 14px;
  min-height: 40px;
  height: auto;
  white-space: nowrap;
  flex: 0 0 auto;
}

.settingsScreen .settingsBlacklistRemoveBtn:hover {
  border-color: rgba(210, 175, 170, 0.72) !important;
}

.settingsScreen .settingsBlacklistEmpty {
  margin-top: 10px;
  opacity: 0.78;
}

/* Settings: blacklist item rendered as masterCard */

.settingsScreen .settingsBlacklistMasterCard.masterCard {
  min-height: 0;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
}

.settingsScreen .settingsBlacklistMasterCard .masterLeft {
  justify-content: flex-start;
  width: 92px;
}

.settingsScreen .settingsBlacklistMasterCard .masterAvatar {
  width: 92px;
  height: 90px;
  font-size: 26px;
}

.settingsScreen .settingsBlacklistMasterCard .masterInfo {
  gap: 4px;
}

.settingsScreen .settingsBlacklistMasterName {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settingsScreen .settingsBlacklistMasterLine {
  margin: 0;
}

.settingsScreen .settingsBlacklistMasterNote {
  margin: 0;
  color: rgba(95, 82, 78, 0.82);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.settingsScreen .settingsBlacklistMasterActions {
  margin-top: 6px;
  display: flex;
  justify-content: flex-start;
}

/* —— Client account: glass profile card + inputs (scoped; register flow unchanged) —— */

.clientAccountScreen .clientAccountProfile {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(202, 157, 153, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.55) inset,
    0 1px 0 rgba(255, 255, 255, 0.65) inset;
  padding: 16px 14px 18px;
}

.clientAccountScreen .accountCreationInput167,
.clientAccountScreen .accountCreationInput350 {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(227, 176, 172, 0.7);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.clientAccountPhoneWrap {
  position: relative;
  width: 100%;
}

.clientAccountPhoneVerifiedIcon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  color: rgba(10, 120, 80, 0.95);
  background: rgba(46, 200, 160, 0.22);
  border: 1px solid rgba(46, 200, 160, 0.55);
  pointer-events: none;
}

.clientAccountScreen .accountCreationInput167:focus,
.clientAccountScreen .accountCreationInput350:focus {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(227, 176, 172, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.45) inset;
}

.clientAccountScreen .accountCreationInput167.clientAccountEmailReadonly {
  color: rgba(80, 70, 78, 0.62);
  background: rgba(255, 255, 255, 0.42);
  cursor: default;
  border-color: rgba(200, 190, 195, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

.clientAccountScreen .accountCreationInput167.clientAccountEmailReadonly:focus {
  outline: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}

.clientAccountScreen textarea.accountCreationInput167,
.clientAccountScreen .clientAccountBeautyNotes {
  min-height: 80px;
  resize: vertical;
  line-height: 1.45;
  padding-top: 12px;
  padding-bottom: 12px;
}

.clientAccountScreen .accountCreationAvatar {
  border: 2px solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 0 1px rgba(227, 176, 172, 0.4),
    0 10px 28px rgba(202, 157, 153, 0.22);
}

.clientAccountScreen .clientAccountWhatsAppRow input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 0;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1.5px solid rgba(227, 176, 172, 0.95);
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  position: relative;
  vertical-align: middle;
}

.clientAccountScreen .clientAccountWhatsAppRow input[type='checkbox']:hover {
  border-color: #d9a099;
  box-shadow: 0 0 0 2px rgba(227, 176, 172, 0.22);
}

.clientAccountScreen .clientAccountWhatsAppRow input[type='checkbox']:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(227, 176, 172, 0.45);
}

.clientAccountScreen .clientAccountWhatsAppRow input[type='checkbox']:checked {
  background: linear-gradient(160deg, #ecc9c4 0%, #e3b0ac 45%, #cf968f 100%);
  border-color: rgba(190, 130, 125, 0.98);
  box-shadow: 0 1px 2px rgba(160, 100, 95, 0.2);
}

.clientAccountScreen .clientAccountWhatsAppRow input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Client account: info after save when phone not yet verified in Telegram */

.clientAccountVerifyPhoneNotice {
  margin: 12px 16px 0;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(120, 180, 255, 0.12);
  border: 1px solid rgba(120, 180, 255, 0.35);
  box-sizing: border-box;
}

/* Client account: nav (save + find + bookings) */

.clientAccountNavBar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 520px) {
  .clientAccountNavBar {
    grid-template-columns: 1fr;
  }
}

.clientAccountNavBtn {
  min-height: 40px;
  padding: 0 10px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
}

.clientAccountNavBtn:disabled {
  opacity: 0.55;
  cursor: default;
}

.clientAccountNavBtn--primary {
  border: 1px solid rgba(200, 150, 145, 0.48);
  background: linear-gradient(180deg, #f0ddd9 0%, #e4c2bc 48%, #d9ada5 100%);
  color: #fff;
  box-shadow: 0 2px 12px rgba(202, 157, 153, 0.2);
}

.clientAccountNavBtn--outline {
  border: 1px solid rgba(220, 185, 180, 0.55);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 252, 251, 0.88) 50%,
    rgba(252, 240, 237, 0.58) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #8f5e58;
  box-shadow: 0 1px 8px rgba(202, 157, 153, 0.06);
}

.clientAccountHistorySection,
.clientAccountFavoritesSection {
  margin-top: 16px;
  width: 100%;
  box-sizing: border-box;
}

.clientAccountHistoryList {
  margin-top: 8px;
}

.clientAccountFavGrid {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.clientAccountScreen .masterCard.clientAccountFavCard {
  height: auto;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 8px 28px rgba(202, 157, 153, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.52) inset,
    0 1px 0 rgba(255, 255, 255, 0.55) inset;
  border-radius: 18px;
  padding: 12px 12px 12px 14px;
}

.clientAccountScreen .clientAccountFavCard .masterLeft {
  justify-content: flex-start;
  gap: 6px;
}

.clientAccountScreen .clientFavActionsRow {
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}

.clientAccountScreen .clientFavActionsRow > * {
  flex: 1;
  width: auto;
  min-width: 0;
}

.clientAccountFavBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  padding: 0 12px;
  line-height: 1.2;
  box-sizing: border-box;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  border: 1px solid rgba(202, 157, 153, 0.52);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 252, 251, 0.82) 50%,
    rgba(245, 230, 227, 0.38) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #7a4540;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(202, 157, 153, 0.08);
  text-decoration: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.clientAccountFavBtn--muted {
  border-color: rgba(202, 157, 153, 0.38);
  background: rgba(255, 255, 255, 0.62);
  color: #8a5a55;
  font-weight: 600;
}

.clientAccountFavBtn:hover {
  border-color: rgba(202, 157, 153, 0.95);
}

.masterStars--compact {
  padding: 0 2px 2px;
}

.masterStars--compact .masterStar {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
}

.masterStars--compact .masterRatingValue {
  margin-left: 4px;
  font-size: 10px;
  font-weight: 500;
  color: rgba(176, 176, 176, 0.95);
}

.clientAppointmentsListWrap {
  margin-top: 12px;
}

.clientAppointmentsEmptyHint {
  margin-top: 8px;
}

.clientAppointmentsList {
  display: grid;
  gap: 14px;
  margin-top: 4px;
}

.clientAppointmentsGlassCard {
  position: relative;
  overflow: hidden;
  padding: 14px 14px 12px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(202, 157, 153, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.55) inset,
    0 1px 0 rgba(255, 255, 255, 0.65) inset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Brand accent: soft violet → blush (same family as master profile graphic) */

.clientAppointmentsGlassCard::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(
    180deg,
    #f4dcd8 0%,
    #e8c4c0 28%,
    #e3b0ac 55%,
    #c98b84 82%,
    #a86b63 100%
  );
  box-shadow: 2px 0 14px rgba(202, 157, 153, 0.35);
  pointer-events: none;
  z-index: 0;
}

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

.clientAppointmentsGlassCard--empty {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.clientAppointmentsGlassCard--empty::before {
  display: none;
}

.clientAppointmentsCardHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.clientAppointmentsCardHeadLeft {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.clientAppointmentsCardHeadLeft .clientAppointmentsMasterTitle {
  flex: 0 1 auto;
}

.clientAppointmentsStatusPill {
  align-self: flex-start;
  font-size: 0.72rem;
  padding: 0.28em 0.65em;
  letter-spacing: 0.02em;
}

/* Як «Підтверджено» (зелена крапка): жовта крапка + жовтий текст */

.clientAppointmentsStatusPill.dashboardStatusPill--new {
  background: transparent;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #b8860b;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.clientAppointmentsStatusPill.dashboardStatusPill--new::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #e6b319;
  box-shadow: 0 2px 6px rgba(212, 160, 0, 0.35);
}

/* Червона крапка + червоний текст */

.clientAppointmentsStatusPill.dashboardStatusPill--cancelled {
  background: transparent;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c62828;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.clientAppointmentsStatusPill.dashboardStatusPill--cancelled::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #e53935;
  box-shadow: 0 2px 6px rgba(198, 40, 40, 0.28);
}

.clientAppointmentsCardWhen {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  flex: 0 0 auto;
}

.clientAppointmentsCardTime {
  font-family: Poppins, system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #b06b63;
}

.clientAppointmentsCardDate {
  font-size: 11px;
  font-weight: 600;
  color: rgba(74, 63, 60, 0.65);
  text-transform: capitalize;
}

.clientAppointmentsMasterTitle {
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #1a1412;
  text-align: left;
}

.clientAppointmentsServiceTitle {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(32, 28, 27, 0.88);
}

.clientAppointmentsServicesBlock {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  align-self: stretch;
  text-align: left;
}

.clientAppointmentsServiceRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(32, 28, 27, 0.88);
}

.clientAppointmentsServiceRow--total {
  padding-top: 2px;
  border-top: 1px solid rgba(227, 176, 172, 0.35);
  margin-top: 2px;
}

.clientAppointmentsServiceName {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.clientAppointmentsServiceDur {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(176, 107, 99, 0.95);
  white-space: nowrap;
}

.clientAppointmentsDuration {
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  line-height: 1.35;
}

.clientAppointmentsDurationLabel {
  font-weight: 600;
  color: rgba(176, 107, 99, 0.88);
}

.clientAppointmentsDurationValue {
  font-weight: 600;
  color: rgba(32, 28, 27, 0.82);
}

.clientAppointmentsAddressRow {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 4px;
  min-width: 0;
}

.clientAppointmentsPinIcon {
  flex: 0 0 auto;
  display: block;
  color: rgba(176, 107, 99, 0.85);
  /* Легкий зсув униз, якщо після прибирання margin іконка здалась «вище» рядка */
  transform: translateY(1px);
}

.clientAppointmentsAddressText {
  padding-left: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(74, 63, 60, 0.82);
  word-break: break-word;
}

.clientAppointmentsActions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(202, 157, 153, 0.18);
}

.clientAppointmentsBtnRepeat {
  flex: 0 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(202, 157, 153, 0.52);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 252, 251, 0.8) 50%,
    rgba(245, 230, 227, 0.4) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #7a4540;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(202, 157, 153, 0.09);
}

.clientAppointmentsBtnRepeat:disabled {
  opacity: 0.45;
  cursor: default;
}

.clientAppointmentsBtnCancel {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(202, 157, 153, 0.35);
  background: rgba(255, 255, 255, 0.85);
  color: #9a6a64;
  margin-left: auto;
  padding: 0;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease, color 0.15s ease;
}

.clientAppointmentsBtnCancel:hover:not(:disabled) {
  background: rgba(255, 240, 238, 0.95);
  color: #b85c54;
}

.clientAppointmentsBtnCancel:active:not(:disabled) {
  transform: scale(0.97);
}

.clientAppointmentsBtnCancel:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.clientAppointmentCard {
  border: 1px solid #F4DCDA;
  border-radius: 14px;
  padding: 12px;
  background: #FFFFFF;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.clientAppointmentMaster {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.clientAppointmentAvatar {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: linear-gradient(180deg, #F4E8E6 0%, #EED8D6 100%);
  color: #7A5A55;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 28px;
  overflow: hidden;
  flex: 0 0 auto;
}

.clientAppointmentAvatarImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.clientAppointmentMasterInfo {
  display: grid;
  gap: 6px;
}

.clientAppointmentMasterName {
  color: #201C1B;
  font-size: 14px;
  font-weight: 600;
}

.clientAppointmentService {
  color: #201C1B;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}

.clientAppointmentMeta {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.clientAppointmentMetaLine {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.clientAppointmentMetaLabel {
  color: #E3B0AC;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.clientAppointmentMetaValue {
  color: #201C1B;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

.clientAppointmentCancelBtn {
  height: 34px;
  border-radius: 999px;
  border: 1px solid #D96B6B;
  background: #FFFFFF;
  color: #D96B6B;
  font-weight: 600;
  font-size: 12px;
  padding: 0 12px;
  box-sizing: border-box;
}

.clientAppointmentCancelBtn:disabled {
  opacity: 0.55;
}

/* New layout for SCREEN 09 */

.clientAppointmentTop {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.clientAppointmentMasterNameCenter {
  text-align: center;
  color: #201C1B;
  font-size: 14px;
  font-weight: 600;
}

.clientAppointmentInfoGrid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  width: 100%;
}

.clientAppointmentServicesBlock {
  min-width: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.clientAppointmentDateTimeBlock {
  min-width: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.clientAppointmentSectionLabel {
  color: #E3B0AC;
  font-size: 12px;
  font-weight: 600;
}

.clientAppointmentValue {
  color: #201C1B;
  font-size: 12px;
  font-weight: 600;
}

.clientAppointmentFooter {
  margin-top: 2px;
}

.clientAppointmentCancelBtnFull {
  width: 100%;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Stack layout for SCREEN 09 */

.clientAppointmentMainRow {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.clientAppointmentRightAvatar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.clientAppointmentBody {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}

.clientAppointmentServicesStack {
  display: flex;
  flex-direction: column;

  align-items: flex-start;
  text-align: left;
}

.clientAppointmentDateTimeRow {
  display: flex;
  gap: 22px;
  justify-content: flex-start;
  align-items: flex-start;
}

.clientAppointmentInlineCol {
  display: flex;
  flex-direction: column;
 
  min-width: 0;
  align-items: flex-start;
  text-align: left;
}

.clientAppointmentAddressStack {
  display: flex;
  flex-direction: column;

  align-items: flex-start;
  text-align: left;
}

@media (max-width: 360px) {
  .clientAppointmentMainRow {
    flex-direction: column;
    gap: 10px;
  }

  .clientAppointmentRightAvatar {
    justify-content: flex-start;
  }

  .clientAppointmentDateTimeRow {
    gap: 16px;
    justify-content: flex-start;
  }
}

.bookingCalendarEmpty {
  height: 38px;
}

.bookingDateCell {
  height: 38px;
  border-radius: 999px;
  border: 2px solid #f0dedb;
  background: rgba(255, 255, 255, 0.85);
  color: #201c1b;
  font-size: 12px;
  font-weight: 600;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}

.bookingDateCell:disabled {
  color: #d9d9d9;
  border-color: #f0f0f0;
  background: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.bookingDateCellActive {
  border: 1px solid rgba(180, 120, 115, 0.55);
  background: linear-gradient(180deg, #f0ddd9 0%, #e4c2bc 48%, #d9ada5 100%);
  color: #ffffff;
  box-shadow: 0 1px 6px rgba(202, 157, 153, 0.35);
}

.bookingSlotsGrid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.bookingSlotBtn {
  height: 38px;
  border-radius: 12px;
  border: 2px solid #f0dedb;
  background: rgba(255, 255, 255, 0.85);
  color: #201c1b;
  font-size: 12px;
  font-weight: 600;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}

.bookingSlotBtnActive {
  border: 1px solid rgba(180, 120, 115, 0.55);
  background: linear-gradient(180deg, #f0ddd9 0%, #e4c2bc 48%, #d9ada5 100%);
  color: #ffffff;
  box-shadow: 0 1px 6px rgba(202, 157, 153, 0.35);
}

.bookingSlotBtnBusy {
  border-color: #e0e0e0;
  color: #9a9a9a;
  background: #e8e8e8;
  font-weight: 500;
  cursor: not-allowed;
  box-shadow: none;
}

.bookingForm {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.bookingField {
  display: grid;
  gap: 6px;
}

@media (min-width: 768px) {
  .bookingField--horizonDays {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .bookingField--horizonDays span {
    flex: 0 0 auto;
  }

  .bookingField--horizonDays input {
    width: auto;
    min-width: 72px;
    max-width: 120px;
    flex-shrink: 0;
  }
}

.bookingField span {
  color: #201C1B;
  font-size: 12px;
  font-weight: 600;
}

/* Client registration: labels moved into placeholders */

.bookingField span:empty {
  display: none;
}

.bookingField input,
.bookingField textarea,
.bookingField select {
  width: 100%;
  border: 1px solid #F4DCDA;
  border-radius: 12px;
  padding: 10px 12px;
  box-sizing: border-box;
  font-size: 13px;
  color: #201C1B;
  background: #FFFFFF;
}

.bookingField textarea {
  resize: vertical;
  min-height: 78px;
}

.bookingField input.bookingWorkYearsInput {
  max-width: 120px;
  text-align: center;
}

.bookingConsentRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bookingConsentRow input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: #E3B0AC;
}

.bookingConsentRow span {
  color: #201C1B;
  font-size: 12px;
}

/* Mobile: consent label should be visually centered */

@media (max-width: 768px) {
  .bookingConsentRow {
    justify-content: center;
    text-align: center;
  }

  .bookingConsentRow span {
    text-align: center;
  }

  /* Профіль клієнта: чекбокс WhatsApp має бути зліва, не по центру */
  .clientAccountWhatsAppRow {
    justify-content: flex-start;
    text-align: left;
  }

  .clientAccountWhatsAppRow span {
    text-align: left;
  }
}

.bookingFieldError {
  color: #D96B6B;
  font-size: 11px;
}

/* iOS: уникати авто-зуму при фокусі в полях (потрібен ефективний font-size ≥16px) */

@media (max-width: 768px) {
  .bookingField input,
  .bookingField textarea,
  .bookingField select {
    font-size: 16px;
  }

  .guestLoginModalPanel .bookingField input,
  .guestLoginModalPanel .bookingField textarea {
    font-size: 16px;
  }

  .guestLoginModalPanel .bookingDetailsFormInModal .bookingField input,
  .guestLoginModalPanel .bookingDetailsFormInModal .bookingField textarea {
    font-size: 16px;
  }
}

.bookingStepHint {
  margin: -4px 0 10px;
  color: #B0B0B0;
  font-size: 12px;
  line-height: 1.25;
}

.bookingFormCard {
  padding: 12px;
  border: 1px solid #F4DCDA;
  border-radius: 14px;
  background: #FFFFFF;
}

.bookingSummaryCard {
  /* margin-top: 10px; */
  padding: 12px;

  border-radius: 14px;

  display: grid;
  gap: 10px;
}

/* Підсумок на екрані «Підтвердити запис» у glass-модалці — без суцільної білої картки */

.bookingSummaryCard--confirmPanel {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(14px) saturate(1.04);
  -webkit-backdrop-filter: blur(14px) saturate(1.04);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset;
  box-sizing: border-box;
}

.bookingSummaryRow {
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.bookingSummaryRow span {
  color: #E3B0AC;
  font-size: 12px;
}

.bookingSummaryRow strong {
  color: #201C1B;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

.bookingSummaryConfirmServices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
  max-width: 100%;
}

.bookingSummaryConfirmServiceLine {
  text-align: right;
  display: block;
  max-width: 100%;
  word-break: break-word;
}

.bookingSummaryRow strong.bookingSummaryServicesStack {
  text-align: left;
  flex: 1;
  min-width: 0;
}

.bookingSummaryServicesStack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  text-align: left;
}

.bookingSummaryServiceLine {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.bookingSummaryServiceName {
  text-align: left;
  flex: 1;
  min-width: 0;
}

.bookingSummaryServiceDur {
  color: #b06b63;
  font-weight: 600;
  white-space: nowrap;
}

.clientAccountServicesValue {
  color: #201c1b;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  width: 100%;
  max-width: 100%;
  flex: 1;
  min-width: 0;
}

.clientAccountServicesValue .clientAppointmentsServicesBlock {
  align-items: stretch;
}

.clientBookingServicesFallback {
  font-weight: 600;
}

.bookingSuccessTitle {
  margin: 6px 0 0;
  color: #201C1B;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.bookingSuccessSub {
  margin: 8px 0 0;
  color: #888888;
  font-size: 13px;
  line-height: 1.4;
}

.bookingConfirmCheckWrap {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: #2F8F5A;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 0;
}

.bookingConfirmCheckIcon {
  color: #FFFFFF;
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
}

.bookingConfirmMasterRow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.bookingConfirmMasterAvatarWrap {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  background: #F4DCDA;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bookingConfirmMasterAvatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bookingConfirmMasterAvatarPlaceholder {
  color: #201C1B;
  font-weight: 700;
}

.bookingConfirmMasterInfo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.bookingConfirmMasterName {
  color: #201C1B;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.bookingConfirmMasterSub {
  color: #888888;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sseStatusRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.sseStatusRowCompact {
  margin: 0;
}

.sseDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
}

.sseDotOn {
  background: #2F8F5A;
}

.sseDotOff {
  background: #CA9D99;
}

.sseStatusText {
  color: #888888;
  font-size: 12px;
  line-height: 1.2;
}

.sseStatusTextCompact {
  font-size: 11px;
}

.sseStatusTextOff {
  color: #CA9D99;
}

.dashboardHeaderTitleWrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.bookingSummaryCardSuccess {
  margin-top: 16px;
}

/* Bottom tab bar — той самий вигляд, що був на Android (щільна панель без «ламаного» blur у Chrome) */

.bottomNav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(100%, 520px);
  height: 101px;
  background: rgba(255, 252, 251, 0.97);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 8px 20px 13px 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  border-style: solid;
  border-color: rgba(210, 178, 173, 0.42);
  border-width: 1px 1px 0 1px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  z-index: 1000;
  box-shadow:
    0 -8px 32px rgba(18, 12, 11, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

@media (max-width: 420px) {
  .bottomNav {
    padding: 8px 12px 13px 12px;
  }

  .navItem {
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
  }

  .navSvg {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 360px) {
  .bottomNav {
    padding: 8px 10px 13px 10px;
  }

  .navItem {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
  }

  .navSvg {
    width: 28px;
    height: 28px;
  }
}

/* Full-bleed masters map mode */

.mastersScreen--map .mastersMapView {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mastersScreen--map .mastersTitleRow,
.mastersScreen--map .mastersToolbar {
  position: relative;
  z-index: 5;
}

.mastersScreen--map .mastersMapCanvas {
  border-radius: 0;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  width: 100%;
}

.mastersScreen--map .mastersMapbox {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}

@media (min-width: 521px) {
  .mastersScreen--map .mastersMapView {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(100%, 520px);
    max-width: 520px;
    margin-left: 0;
  }
}

.navItem {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 1000px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  color: #888888;
  font-size: 20px;
  position: relative;
  overflow: visible;
}

.navIcon {
  position: relative;
  z-index: 2;
}

.navSvg {
  width: 33px;
  height: 33px;
  position: relative;
  z-index: 2;
  display: block;
}

.navLabel {
  position: relative;
  z-index: 2;
  color: #201C1B;
  font-family: Poppins, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 8px;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: center;
  background: transparent;
  text-transform: none;
}

.navItemActive {
  color: #1A1A1A;
}

.navItemActive .navLabel {
  color: #FFFFFF;
}

.navItemActive .navSvg {
  filter: brightness(0) invert(1);
}

.navItemActive::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #E3B0AC;
  z-index: 1;
  box-shadow: 0 10px 24px rgba(232, 180, 184, 0.35);
}

/* Auth and master dashboard */

.langToggleRow {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 6px 0;
}

.settingsProfileLang {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.settingsLangToggleRow {
  margin: 0;
}

/* Settings (account settings page) */

.settingsProfileCard {
  margin: 0;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(202, 157, 153, 0.26);
  box-shadow: 0 14px 34px rgba(32, 28, 27, 0.08);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  border-radius: 16px;
  padding: 14px 16px;
}

.settingsProfileTop {
  display: flex;
  align-items: center;
  gap: 14px;
}

.settingsProfileActions {
  margin-top: 12px;
}

.settingsProfileMyLinkBtns {
  display: flex;
  gap: 8px;
  width: 100%;
  justify-content: center;
}

.settingsProfileCard .settingsProfileMyLinkBtns .dashboardGhostBtn {
  height: 30px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(202, 157, 153, 0.55) !important;
  color: rgba(26, 26, 26, 0.85) !important;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto !important;
  min-width: 0;
}

.settingsProfileCard .settingsProfileMyLinkBtns .dashboardGhostBtn:disabled {
  background: rgba(255, 255, 255, 0.12) !important;
  opacity: 0.58;
}

.settingsProfileAvatarImg {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
}

.settingsProfileAvatarPlaceholder {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f1e6e2 0%, #e8dbd6 100%);
  border: 1px solid rgba(220, 185, 180, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7a6560;
  font-weight: 800;
  font-size: 26px;
  flex: 0 0 auto;
}

.settingsProfileText {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  align-items: flex-start;
}

.settingsProfileName {
  font-size: 16px;
  font-weight: 800;
  color: #201c1b;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settingsProfileEmail {
  font-size: 11px;
  font-weight: 600;
  color: rgba(32, 28, 27, 0.55);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

.settingsCopyLinkText {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: Poppins, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgba(201, 157, 153, 0.98);
  line-height: 1.15;
  cursor: pointer;
  text-align: left;
  align-self: flex-start;
}

.settingsCopyLinkText:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.settingsLangCard {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(202, 157, 153, 0.26);
  box-shadow: 0 14px 34px rgba(32, 28, 27, 0.08);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  border-radius: 16px;
  padding: 14px 16px !important;
}

.settingsLangCardTitle {
  font-size: 12px;
  font-weight: 700;
  color: rgba(32, 28, 27, 0.92);
  margin-bottom: 10px;
}

.settingsMyLinkCard.dashboardBlock--glass.dashboardBlock--myLink {
  margin-top: 12px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(202, 157, 153, 0.22) !important;
  box-shadow: 0 10px 24px rgba(32, 28, 27, 0.06) !important;
}

.settingsSessionCard .settingsActions {
  gap: 16px;
}

.settingsLogoutBtn {
  background: transparent !important;
  border: 1px solid rgba(202, 157, 153, 0.35) !important;
  box-shadow: none !important;
  color: rgba(201, 157, 153, 0.98) !important;
  min-height: 44px !important;
  height: 44px !important;
}

.settingsLogoutBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Guest welcome / role choice (nearby masters + role buttons) */

.guestRoleScreen .guestRoleIntro {
  margin-top: 6px;
}

.guestRoleScreen--map {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
}

.guestRoleScreen--map .mastersMapView {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Guest: animated "drop" pins for real masters (DOM overlay) */

.mastersGuestDropPinsLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.mastersGuestDropPin {
  position: absolute;
  transform: translate(-50%, -100%);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  animation: mastersGuestDropPinDrop 700ms cubic-bezier(0.2, 0.9, 0.25, 1.05) both;
}

@keyframes mastersGuestDropPinDrop {
  0% {
    opacity: 0;
    transform: translate(-50%, -220%) scale(0.9);
    filter: blur(1px);
  }
  65% {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
    filter: blur(0);
  }
  80% {
    transform: translate(-50%, -112%) scale(1);
  }
  100% {
    transform: translate(-50%, -100%) scale(1);
  }
}

.mastersGuestDropPinAvatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #201c1b;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(202, 157, 153, 0.8);
  box-shadow: 0 10px 24px rgba(32, 28, 27, 0.12);
}

.mastersGuestDropPinAvatarImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mastersGuestDropPinDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #CA9D99;
  border: 2px solid rgba(255, 255, 255, 0.95);
  margin: -3px auto 0;
  box-shadow: 0 8px 18px rgba(202, 157, 153, 0.42);
}

/* На ПК карта лише у колонці 520px (як .appContent); на вузьких екранах — на всю ширину */

@media (min-width: 521px) {
  .guestRoleScreen--map .mastersMapView {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(100%, 520px);
    max-width: 520px;
    margin-left: 0;
  }
}

.guestRoleScreen--map .mastersMapCanvas {
  border-radius: 0;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  width: 100%;
}

.guestRoleScreen--map .mastersMapbox {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}

/* Картка обраного майстра — вище напівпрозорого дока, щоб не ховалась під ним */

.guestRoleScreen--map .mastersMapBottomSheet {
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  padding: 0 10px;
  z-index: 4;
}

.guestMapTopOverlay {
  position: relative;
  z-index: 6;
  padding-top: calc(22px + env(safe-area-inset-top, 0px));
  padding-right: max(6px, env(safe-area-inset-right, 0px));
  padding-bottom: 15px;
  padding-left: max(6px, env(safe-area-inset-left, 0px));
  background: linear-gradient(180deg, rgba(255, 252, 251, 0.98) 0%, rgba(255, 252, 251, 0.88) 55%, rgba(255, 252, 251, 0) 100%);
  pointer-events: auto;
}

.guestMapHeroTitle {
  font-size: clamp(1.15rem, 4.2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-align: center;
  color: #1a1412;
  margin: 0 0 25px;
}

.guestStatLine--compact {
  margin-top: 8px;
  padding: 8px 12px;
}

.guestMapTopOverlay .guestMapToolbar {
  margin-top: 0;
  margin-bottom: 10px;
}

/* Flex: кнопка «Моє місцезнаходження» не стискається (на Android не обрізається до «Моє місце»). */

.guestMapTopOverlay .mastersSearchRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.guestMapTopOverlay .mastersSearchInputWrap {
  flex: 1 1 0;
  min-width: min(140px, 100%);
}

.guestMapTopOverlay .mastersLocationBtn {
  flex: 0 0 auto;
  flex-shrink: 0;
  min-width: min-content;
}

@media (max-width: 520px) {
  .guestMapTopOverlay .mastersSearchInputWrap {
    min-height: 40px;
    border-radius: 14px;
    padding: 8px 8px;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: 100%;
  }

  .guestMapTopOverlay .mastersSearchInput {
    font-size: 14px;
  }

  .guestMapTopOverlay .mastersLocationBtn {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    height: 42px;
    min-height: 0;
    max-width: none;
    padding: 0 2px;
    line-height: 1;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
  }

  .guestMapTopOverlay .mastersLocationBtn span {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }

  .guestMapTopOverlay .mastersLocationIcon {
    flex-shrink: 0;
  }
}

.guestMapBottomDock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1105; /* ensure above bottom tab bar if it is present */
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(
    180deg,
    rgba(255, 252, 251, 0.08) 0%,
    rgba(255, 252, 251, 0.38) 35%,
    rgba(255, 252, 251, 0.55) 100%
  );
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 -6px 28px rgba(32, 28, 27, 0.07);
  box-sizing: border-box;
  border-radius: 20px 20px 0 0;
  pointer-events: auto;
}

@media (min-width: 521px) {
  .guestMapBottomDock {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(100%, 520px);
    max-width: 520px;
    margin-left: 0;
  }
}

.guestMapLoginTrigger {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  background: #e3b0ac;
  box-shadow: 0 8px 22px rgba(202, 157, 153, 0.38);
  cursor: pointer;
  margin: 0;
}

.guestMapLoginTrigger:active {
  transform: scale(0.99);
}

.guestLoginModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 1106; /* ensure modal stays above bottom tab bar */
  transform: translateZ(0);
  backface-visibility: hidden;
  /* Як на Android: помітне затемнення + blur — «прозорий екран» однаково у вебі */
  background: rgba(16, 12, 11, 0.72);
  backdrop-filter: blur(26px) saturate(1.06);
  -webkit-backdrop-filter: blur(26px) saturate(1.06);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
  animation: guestLoginModalFadeIn 0.2s ease;
}

/* Модалка запису (bottom-sheet поверх профілю) */

.bookingGlassBackdrop > .guestLoginModalOverlay {
  pointer-events: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  background: rgba(16, 12, 11, 0.74);
  backdrop-filter: blur(28px) saturate(1.06);
  -webkit-backdrop-filter: blur(28px) saturate(1.06);
}

/*
 * ПК / широкий веб: backdrop-filter іноді дає слабше візуальне затемнення, ніж на Android WebView.
 * Трохи сильніший фон + менш яскрава “пляма” під карткою — ближче до Android.
 */

@media (min-width: 521px) {
  .guestLoginModalOverlay {
    background: rgba(12, 9, 8, 0.82);
  }

  .bookingGlassBackdrop > .guestLoginModalOverlay {
    background: rgba(12, 9, 8, 0.86);
  }

  .bookingGlassBackdropBlob {
    opacity: 0.22;
  }
}

@keyframes guestLoginModalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Скляний bottom-sheet: blur(20px) + біла напівпрозорість — контраст із шаром під склом */

.guestLoginModalPanel {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  /* Compact sheet: size to content instead of 80% of the viewport */
  height: auto;
  max-height: min(72vh, 72dvh, 520px);
  min-height: 0;
  box-sizing: border-box;
  padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateZ(0);
  backface-visibility: hidden;
  background: rgba(255, 252, 251, 0.98);
  border-radius: 20px 20px 0 0;
  border: 1px solid rgba(210, 178, 173, 0.52);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 -14px 48px rgba(18, 12, 11, 0.28),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.72);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.guestLoginModalPanel .bookingField input,
.guestLoginModalPanel .bookingField textarea {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, 0.99);
  border: 1px solid rgba(198, 168, 163, 0.58);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.88) inset;
}

.guestLoginModalPanel .bookingServiceItem,
.guestLoginModalPanel .bookingServiceItemActive,
.guestLoginModalPanel .bookingDateCell:not(.bookingDateCellActive):not(:disabled),
.guestLoginModalPanel .bookingSlotBtn:not(.bookingSlotBtnActive):not(.bookingSlotBtnBusy),
.guestLoginModalPanel .bookingSuccessModalBtn--secondary.bookingSelectServicesNextBtn.bookingNextBtn,
.guestLoginModalPanel .bookingSummaryCard--confirmPanel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.guestLoginModalPanel .bookingSummaryCard--confirmPanel {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(202, 157, 153, 0.35);
  box-shadow: none;
}

.guestLoginModalPanel .bookingNextBtn {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: rgba(202, 157, 153, 0.22);
  touch-action: manipulation;
  box-sizing: border-box;
  border-style: solid;
}

.guestLoginModalPanel .bookingSelectServicesNextBtn.bookingNextBtn:not(.bookingSuccessModalBtn--secondary) {
  text-shadow: 0 1px 1px rgba(90, 48, 42, 0.18);
  box-shadow:
    0 3px 16px rgba(202, 157, 153, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.38) inset;
}

.guestLoginModalPanel .bookingSuccessModalBtn--secondary.bookingSelectServicesNextBtn.bookingNextBtn {
  background: linear-gradient(180deg, #ffffff 0%, #faf4f3 100%);
  border: 1px solid rgba(232, 200, 196, 0.98);
  color: #3d2822;
  box-shadow: 0 2px 14px rgba(202, 157, 153, 0.16);
  text-shadow: none;
}

.guestLoginModalPanel .bookingSuccessModalBtn--secondary.bookingSelectServicesNextBtn.bookingNextBtn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f5ecea 100%);
  filter: none;
}

.guestLoginModalPanel .bookingNextBtn.bookingRetryOutline {
  background: #ffffff;
  border: 1px solid #f0dcd8;
  color: #201c1b;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

.guestLoginModalDragZone {
  flex-shrink: 0;
  padding: 2px 12px 8px;
  margin-top: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.guestLoginModalDragZone:active {
  cursor: grabbing;
}

.guestLoginModalHandle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(32, 28, 27, 0.12);
  margin: 4px auto 0;
  flex-shrink: 0;
}

.guestLoginModalTitle {
  margin: 0 auto 10px;
  align-self: center;
  max-width: 100%;
  padding: 6px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  color: rgba(42, 34, 32, 0.9);
  background: rgba(255, 252, 251, 0.96);
  border: 1px solid rgba(210, 178, 173, 0.48);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
  flex-shrink: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: 0 1px 1px rgba(255, 252, 251, 0.85);
}

.guestLoginModalHint {
  margin: 0 0 12px;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
  text-align: center;
  color: rgba(74, 63, 60, 0.78);
  flex-shrink: 0;
}

.guestLoginModalSuccessMsg {
  margin: 4px 0 12px;
  padding: 0 6px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: rgba(52, 92, 72, 0.92);
  flex-shrink: 0;
}

.guestLoginModalFooter--solo {
  margin-top: 4px;
}

.guestLoginModalForm {
  /* Allow the form to stretch, so we can pin the submit button to the bottom */
  flex: 1 1 auto;
  width: 100%;
  margin-bottom: 0;
  min-height: 0; /* allow internal layout to flex with overflow-y */
}

/* Modal sheet: don't stretch form to fill 80% height — keep panel compact */

.guestLoginModalPanel .guestLoginModalForm {
  flex: 0 0 auto;
}

.guestLoginModalPanel .guestMapLoginForm.guestLoginModalForm {
  gap: 10px;
}

.guestLoginModalForgotRow {
  display: flex;
  justify-content: flex-start;
  margin: -2px 0 10px;
}

.guestLoginModalForgotLink {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #b06b63;
  text-decoration: underline;
  cursor: pointer;
}

.guestLoginModalRegister {
  margin-top: 14px;
  padding-top: 0;
  border-top: none;
  text-align: center;
}

/* Compact footer: "No account?" + links in one flow (guest login modal) */

.guestLoginModalFooter {
  margin: 8px 0 0;
  padding: 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(74, 63, 60, 0.72);
}

.guestLoginModalFooterMuted {
  color: rgba(120, 108, 104, 0.75);
  font-weight: 500;
}

.guestLoginModalFooterLink {
  color: #b06b63;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.guestLoginModalFooterLink--sub {
  font-weight: 500;
  color: #9a6a64;
}

.guestLoginModalFooterLink--button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  font-family: inherit;
  display: inline;
  text-align: inherit;
}

.guestLoginModalFooterSep {
  color: rgba(136, 120, 116, 0.55);
  font-weight: 400;
}

.guestMapLoginForm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.guestMapLoginHint {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: #6f4f4a;
  text-align: center;
}

.guestMapLoginField input {
  width: 100%;
  box-sizing: border-box;
}

.guestPasswordField {
  position: relative;
}

.guestPasswordField input {
  padding-right: 54px;
}

.guestPasswordToggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(220, 185, 180, 0.55);
  background: rgba(255, 255, 255, 0.75);
  color: rgba(143, 94, 88, 0.98);
  height: 34px;
  width: 34px;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.guestPasswordToggleIcon {
  display: block;
}

.guestPasswordToggle:hover {
  border-color: rgba(210, 175, 170, 0.72);
}

.guestPasswordToggle:active {
  transform: translateY(-50%) scale(0.99);
}

/* Telegram phone verification (client account) */

.tgVerifyInline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: -2px;
}

.tgVerifyInlineOk {
  font-size: 12px;
  font-weight: 700;
  color: rgba(95, 122, 96, 1);
}

.tgVerifyInlineWait {
  font-size: 12px;
  color: rgba(80, 72, 68, 0.75);
}

.tgVerifyInlineErr {
  font-size: 12px;
  color: #d96b6b;
  font-weight: 600;
}

/* Guest client login modal: glass inputs (scoped to modal panel only) */

.guestLoginModalPanel .bookingField input {
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 500;
  color: #141210;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

.guestLoginModalPanel .bookingField input::placeholder {
  color: rgba(80, 72, 68, 0.55);
  font-weight: 400;
}

.guestLoginModalPanel .bookingField input:focus {
  outline: none;
  border-color: rgba(202, 157, 153, 0.65);
  box-shadow:
    0 0 0 2px rgba(202, 157, 153, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

.guestLoginModalPanel .bookingField textarea {
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: #141210;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

.guestLoginModalPanel .bookingField textarea::placeholder {
  color: rgba(80, 72, 68, 0.55);
  font-weight: 400;
}

.guestLoginModalPanel .bookingField textarea:focus {
  outline: none;
  border-color: rgba(202, 157, 153, 0.65);
  box-shadow:
    0 0 0 2px rgba(202, 157, 153, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

/* Екран «Ваші дані» — м’якший текст у полях, видимі межі, без «жирного» заповнення */

.guestLoginModalPanel .guestLoginModalTitle--bookingDetails {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 2px 8px 4px;
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(42, 34, 32, 0.88);
}

.guestLoginModalPanel .bookingModalDateHint--details {
  margin-top: 2px;
  margin-bottom: 8px;
  color: rgba(88, 44, 40, 0.92);
  font-weight: 600;
  font-size: 13px;
}

.guestLoginModalPanel .bookingForm.bookingFormCard.bookingDetailsFormInModal {
  margin-top: 2px;
  padding: 4px 0 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.guestLoginModalPanel .bookingDetailsFormInModal.bookingForm {
  gap: 12px;
  margin-top: 0;
}

.guestLoginModalPanel .bookingDetailsFormInModal .bookingField input,
.guestLoginModalPanel .bookingDetailsFormInModal .bookingField textarea {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(45, 38, 36, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(14px) saturate(1.04);
  -webkit-backdrop-filter: blur(14px) saturate(1.04);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset;
}

.guestLoginModalPanel .bookingDetailsFormInModal .bookingField input::placeholder,
.guestLoginModalPanel .bookingDetailsFormInModal .bookingField textarea::placeholder {
  color: rgba(110, 96, 92, 0.42);
  font-weight: 400;
}

.guestLoginModalPanel .bookingDetailsFormInModal .bookingField input:focus,
.guestLoginModalPanel .bookingDetailsFormInModal .bookingField textarea:focus {
  border-color: rgba(202, 157, 153, 0.55);
  background: rgba(255, 255, 255, 0.38);
  box-shadow:
    0 0 0 2px rgba(202, 157, 153, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

.guestLoginModalPanel .bookingDetailsFormInModal .bookingConsentRow span {
  color: rgba(45, 38, 36, 0.72);
  font-weight: 400;
  line-height: 1.35;
}

.guestMapLoginErr {
  margin: 0;
  text-align: center;
}

.guestMapLoginSubmit {
  margin-top: 4px;
}

.guestLoginModalPanel .guestMapLoginSubmit.bookingNextBtn {
  height: 42px;
  margin-top: 4px;
  border-radius: 999px;
  border: 1px solid rgba(202, 157, 153, 0.78);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(245, 218, 214, 0.92) 48%,
    rgba(255, 252, 251, 0.96) 100%
  );
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 4px 18px rgba(202, 157, 153, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.72) inset;
  color: #5c332e;
  font-weight: 700;
  font-size: 13px;
}

.guestLoginModalPanel .guestMapLoginSubmit.bookingNextBtn:disabled {
  opacity: 0.5;
}

/* Pin "Sign in" to the bottom of the modal panel */

.guestMapLoginForm .guestMapLoginSubmit {
  margin-top: auto !important;
}

.guestLoginModalPanel .guestMapLoginForm .guestMapLoginSubmit {
  margin-top: 12px !important;
}

.guestMapLoginCollapse {
  border: none;
  background: transparent;
  color: #ca9d99;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px;
  font-family: inherit;
}

.guestMapForgotBtn {
  border: none;
  background: transparent;
  color: #888;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 2px;
  font-family: inherit;
}

.guestMapRegisterRow {
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: #4a3f3c;
}

.guestMapRegisterIntro {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.guestMapRegisterLinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
}

.guestMapRegisterLink {
  color: #b06b63;
  font-weight: 700;
  text-decoration: none;
}

.guestMapRegisterLink:hover {
  text-decoration: underline;
}

.guestMapRegisterOr {
  color: #888;
  font-weight: 500;
}

.guestStatLine {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(227, 176, 172, 0.18), rgba(255, 255, 255, 0.9));
  border: 1px solid rgba(202, 157, 153, 0.35);
  font-size: 14px;
  line-height: 1.35;
  color: #3a2f2c;
  text-align: center;
}

.guestStatLine__num {
  font-weight: 800;
  color: #b06b63;
  margin-right: 6px;
}

.guestStatLine__label {
  font-weight: 600;
}

.guestLocationRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 13px;
}

.guestLocationPin {
  display: inline-flex;
  flex-shrink: 0;
}

.guestLocationCity {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  color: #1a1a1a;
  text-align: left;
}

.guestLocationCityManualBtn {
  display: inline;
  max-width: 100%;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: #ca9d99;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}

.guestLocationCityManualBtn:hover {
  color: #b07a73;
}

.guestLocationCityManualBtn[aria-expanded='true'] {
  color: #8b5e58;
}

.guestLocationCityManualBtn--value {
  color: #1a1a1a;
}

.guestLocationCityManualBtn--value:hover {
  color: #ca9d99;
}

.guestLocationUseMyBtn {
  margin-left: auto;
  flex-shrink: 0;
  border: 1px solid rgba(202, 157, 153, 0.55);
  background: #ffffff;
  color: #6f4f4a;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.guestLocationUseMyBtn:hover:not(:disabled) {
  background: rgba(227, 176, 172, 0.12);
  border-color: rgba(202, 157, 153, 0.85);
}

.guestLocationUseMyBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.guestCategoryChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
  align-items: center;
}

.guestCategoryChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #e8ddd9;
  background: #fffdfb;
  font-size: 12px;
  font-weight: 700;
  color: #5a4a47;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.guestCategoryChip:hover {
  border-color: rgba(202, 157, 153, 0.65);
  background: rgba(255, 252, 251, 0.95);
}

.guestCategoryChip--active {
  border-color: rgba(202, 157, 153, 0.95);
  background: rgba(227, 176, 172, 0.22);
  color: #4a302c;
  box-shadow: 0 2px 8px rgba(202, 157, 153, 0.25);
}

.guestManualCity {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 10px;
}

.guestManualCityInputWrap {
  position: relative;
  width: 100%;
}

.guestManualCityInput {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e5dcd9;
  font-size: 14px;
}

.guestManualCityInput--withClear {
  padding-right: 36px;
}

.guestManualCityClearBtn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.guestNearbyNameRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.guestNearbyRating {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: #c48a00;
}

.guestNearbyPrice {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #5a4a47;
}

.guestNearbyNextSlot {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #9a7b73;
  line-height: 1.35;
}

.guestCtaPrimary {
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.guestCtaSecondary {
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.guestNearbyBlock {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid #f4dcda;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.guestNearbyTitle {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: left;
}

.guestNearbyCity {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #ca9d99;
  text-align: left;
}

.guestNearbyStatus {
  margin: 0 0 8px;
  text-align: left;
  font-size: 13px;
}

.guestNearbyList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guestNearbyCard {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid #f0e0dd;
  background: #ffffff;
  text-decoration: none;
  color: inherit;
}

.guestNearbyCard:active {
  transform: scale(0.99);
}

.guestNearbyAvatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #e5e0dc;
}

.guestNearbyAvatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #7a5a55;
  background: #efe9e4;
}

.guestNearbyCardBody {
  min-width: 0;
  flex: 1;
  text-align: left;
}

.guestNearbyName {
  font-size: 13px;
  font-weight: 700;
  color: #201c1b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guestNearbyMeta {
  margin-top: 2px;
  font-size: 11px;
  color: #888888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guestBrowseAllLink {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #ca9d99;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.guestRoleActions {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.langToggleBtn {
  border: 1px solid rgba(202, 157, 153, 0.35);
  background: rgba(255, 255, 255, 0.8);
  color: #6f5b58;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.langToggleBtn:hover {
  transform: translateY(-1px);
  border-color: rgba(202, 157, 153, 0.55);
}

.langToggleBtn--active {
  background: rgba(227, 176, 172, 0.95);
  border-color: rgba(227, 176, 172, 0.95);
  color: #ffffff;
}

.authRoleCards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 8px;
}

@media (min-width: 720px) {
  .authRoleCards {
    grid-template-columns: 1fr 1fr;
  }
}

.authRoleCard {
  position: relative;
  display: block;
  min-height: 156px;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  box-shadow: 0 14px 34px rgba(32, 28, 27, 0.16);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transform: translateZ(0);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease, border-color 160ms ease;
}

.authRoleCardClient {
  /* Pull the image up a bit to show more of the top area */
  background-position: 30% 38%;
}

.authRoleCard:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(32, 28, 27, 0.22);
}

.authRoleCardActive {
  outline: 3px solid rgba(227, 176, 172, 0.55);
  outline-offset: 0px;
}

.authRoleCardClient.authRoleCardActive {
  border-color: rgba(227, 176, 172, 0.55);
  filter: saturate(1.06) contrast(1.03);
  box-shadow: 0 18px 46px rgba(227, 176, 172, 0.22);
}

.authRoleCardShade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.32) 52%,
    rgba(0, 0, 0, 0.78) 100%
  );
}

.authRoleCardText {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: grid;
  gap: 4px;
}

.authRoleCardTitle {
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.authRoleCardSubtitle {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.12;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.authFooterText {
  margin-top: 12px;
  font-size: 13px;
  color: #888888;
  text-align: center;
}

.authInlineLink {
  color: #ca9d99;
  font-weight: 600;
  text-decoration: none;
}

.authInlineLink:hover {
  text-decoration: underline;
}

.authPrimaryLink {
  display: block;
  text-align: center;
  line-height: 48px;
  text-decoration: none;
  box-sizing: border-box;
}

.authSecondBtn {
  margin-top: 12px;
}

.settingsSessionCard {
  border-radius: 22px;
  padding: 14px 14px 12px;
  box-shadow: 0 4px 14px rgba(202, 157, 153, 0.12);
}

.settingsStrongValue {
  max-width: 62%;
  word-break: break-all;
}

.settingsUrlHint {
  margin: 0 0 10px;
  padding: 0 2px;
  font-size: 11px;
  line-height: 1.35;
  color: #888888;
}

.settingsActions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settingsBtn {
  width: 100%;
}

.settingsActions .bookingNextBtn,
.settingsActions .settingsBtnOutline {
  margin-top: 0;
  min-height: 48px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.settingsActions .settingsBtnOutline {
  display: flex;
  align-items: center;
  justify-content: center;
}

.settingsMsg {
  margin-top: 10px;
  color: #CA9D99;
  text-align: center;
}

.settingsHint {
  margin-top: 14px;
}

.masterRegisterOutline {
  margin: 12px 0 16px;
  padding-left: 20px;
  color: #201c1b;
  font-size: 14px;
  line-height: 1.6;
}

.portfolioGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.portfolioGridItem {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 10px;
}

.portfolioGridImg {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.dashboardBlock {
  margin: 20px 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.dashboardBlock--glass {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(202, 157, 153, 0.30);
  box-shadow: 0 18px 50px rgba(32, 28, 27, 0.10);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  position: relative;
  overflow: hidden;
}

.dashboardBlock--glass::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: linear-gradient(180deg, rgba(226, 176, 172, 0.95), rgba(217, 107, 107, 0.78));
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.dashboardBlock--glass::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 24%, rgba(255, 255, 255, 0.35) 0 1px, rgba(255, 255, 255, 0) 2px),
    repeating-linear-gradient(135deg, rgba(202, 157, 153, 0.16) 0 2px, rgba(255, 255, 255, 0) 2px 7px);
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}

.dashboardBlock--glass > * {
  position: relative;
  z-index: 1;
}

.dashboardBlock--myLink {
  margin: 14px 0 10px;
  padding: 10px 12px !important;
  border-radius: 14px;
  max-width: 420px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  overflow: hidden;
}

.dashboardBlock--myLink.dashboardBlock--glass {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(202, 157, 153, 0.26);
  box-shadow: 0 14px 34px rgba(32, 28, 27, 0.08);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
}

.dashboardBlock--myLink.dashboardBlock--glass::before {
  width: 6px;
  opacity: 0.26;
}

.dashboardBlock--myLink.dashboardBlock--glass::after {
  opacity: 0.06;
}

.dashboardHomeScreen {
  position: relative;
}

.dashboardHomeScreen::before {
  content: '';
  position: absolute;
  left: -80px;
  top: 120px;
  width: 360px;
  height: 260px;
  background:
    radial-gradient(circle at 35% 25%, rgba(226, 176, 172, 0.68), rgba(255, 250, 250, 0) 60%),
    radial-gradient(circle at 75% 10%, rgba(202, 157, 153, 0.62), rgba(255, 250, 250, 0) 58%),
    radial-gradient(circle at 30% 85%, rgba(191, 231, 248, 0.34), rgba(255, 250, 250, 0) 60%);
  filter: blur(28px);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.dashboardHomeScreen::after {
  content: '';
  position: absolute;
  right: -120px;
  top: 170px;
  width: 340px;
  height: 240px;
  background:
    radial-gradient(circle at 40% 35%, rgba(226, 176, 172, 0.52), rgba(255, 250, 250, 0) 62%),
    radial-gradient(circle at 70% 70%, rgba(191, 231, 248, 0.28), rgba(255, 250, 250, 0) 60%);
  filter: blur(30px);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

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

.dashboardBlock--myLink .dashboardBlockTitle {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight:600;
}

.dashboardBlock--myLink .screenText {
  padding-top: 8px;
  margin-top: 0;
  font-size: 12px;
  color: rgba(26, 26, 26, 0.55);
}

.dashboardBlock--myLink .dashboardLinkPreview {
  margin: 6px 0 8px;
  font-size: 12px;
  color: rgba(26, 26, 26, 0.70);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}

.dashboardBlock--myLink .dashboardMyLinkBtns {
  margin-top: 4px;
  gap: 8px;
  width: 100%;
  justify-content: center;
}

.dashboardBlock--myLink .dashboardMyLinkBtns .dashboardGhostBtn {
  height: 30px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(202, 157, 153, 0.55) !important;
  color: rgba(26, 26, 26, 0.85) !important;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 160px !important;
  min-width: 0;
}

.dashboardBlock--myLink .dashboardMyLinkBtns .dashboardGhostBtn:disabled {
  background: rgba(255, 255, 255, 0.12) !important;
  opacity: 0.58;
}

@media (max-width: 420px) {
  .dashboardBlock--myLink .dashboardMyLinkBtns {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboardBlock--myLink .dashboardMyLinkBtns .dashboardGhostBtn {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font-size: 12px;
    gap: 8px;
    flex: 1 1 auto !important;
  }

  .dashboardBlock--myLink .dashboardActionLabel {
    white-space: nowrap;
    line-height: 1;
  }
}

.dashboardHomeActionBtn {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(202, 157, 153, 0.45) !important;
  box-shadow: none !important;
  color: #201C1B !important;
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  margin-top: 0 !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.dashboardHomeActionBtn--muted {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(202, 157, 153, 0.32) !important;
  color: rgba(201, 157, 153, 0.98) !important;
  box-shadow: none !important;
}

.dashboardHomeActionBtn--primary {
  background: linear-gradient(270deg, rgba(239, 215, 214, 0.98) 0%, rgba(226, 186, 183, 0.78) 66.5%) !important;
  border-color: rgba(226, 176, 172, 0.98) !important;
  box-shadow: 0 18px 40px rgba(226, 176, 172, 0.22) !important;
  color: #FFFFFF !important;
}

.dashboardActionIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  flex: 0 0 auto;
}

.dashboardActionLabel {
  white-space: nowrap;
}

.dashboardNearestBlock {
  margin-top: 14px;
}

.dashboardNearestBlock .dashboardBlockTitle {
  margin-top: 6px;
}

/* Прибрати діагональні “косі рисочки” з цього конкретного блока */

.dashboardNearestBlock.dashboardBlock--glass::after {
  background: none !important;
  opacity: 0 !important;
}

.dashboardBlockTitle {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

.dashboardLinkPreview {
  margin: 8px 0 12px;
  font-size: 13px;
  color: #888888;
  word-break: break-all;
}

.dashboardGhostBtn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid #e5e0dc;
  background: #fafaf9;
  color: #888888;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.dashboardGhostBtn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.dashboardHeaderRow {
  margin-top: 20px;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.dashboardHeaderAvatar {
  width: 82px;
  height: 82px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f2e8e5 0%, #eadfd9 52%, #e2d3cd 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
  font-weight: 600;
  font-size: 30px;
  color: #7a6560;
}

.dashboardHeaderAvatarImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dashboardHeaderTitle {
  margin: 0 !important;
  color: #0D0D0D;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 22px;
  line-height: 1.1;
  text-shadow: 0 10px 30px rgba(32, 28, 27, 0.10);
  text-align: left;
  flex: 1;
  min-width: 0;
}

@media (max-width: 420px) {
  .dashboardHeaderRow {
    margin-top: 14px;
    gap: 10px;
  }

  .dashboardHeaderAvatar {
    width: 64px;
    height: 64px;
    font-size: 22px;
  }

  .dashboardHeaderTitle {
    font-size: 22px;
    line-height: 1.1;
  }
}

/* Dashboard schedule card — make toggles & hours compact on phone */

@media (max-width: 420px) {
  .dashboardScheduleCard strong {
    font-size: 12px;
  }

  .dashboardScheduleCard .bookingConsentRow span {
    font-size: 12px;
  }

  .dashboardScheduleCard .bookingField > span {
    font-size: 12px;
  }

  .dashboardScheduleCard .bookingField input,
  .dashboardScheduleCard .bookingField select {
    font-size: 14px;
    min-height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .dashboardScheduleCard .bookingConsentRow input[type='checkbox'] {
    transform: scale(0.92);
  }
}

/* Dashboard schedule: remove click-focus outline on selects (keep keyboard focus-visible) */

.dashboardScheduleCard .bookingField select:focus {
  outline: none;
  box-shadow: none;
}

.dashboardScheduleCard .bookingField select:focus-visible {
  outline: 2px solid rgba(227, 176, 172, 0.7);
  outline-offset: 2px;
}

.dashboardMyLinkBtns {
  margin-top: 10px;
  display: flex;
  gap: 12px;
}

.dashboardMyLinkBtns .dashboardGhostBtn {
  flex: 1;
  text-align: center;
  height: 40px;
}

@media (max-width: 420px) {
  .dashboardMyLinkBtns {
    gap: 10px;
  }

  .dashboardMyLinkBtns .dashboardGhostBtn {
    font-size: 11px;
    padding: 10px 12px;
  }

  .dashboardBlock--myLink {
    max-width: 100%;
    width: 100%;
  }
}

.dashboardNearestCards {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.dashboardNearestCard {
  margin-top: 0;
}

.bookingSummaryCard.dashboardNearestCard {
  /* підсунемо час ближче до лівого краю (менше padding зліва) */
  padding-left: 2px;
  padding-right: 12px;
}

.dashboardNearestLine {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.dashboardNearestTopRow {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.dashboardNearestMainCol {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  min-width: 0;
  flex: 1 1 auto;
}

.dashboardNearestHeaderRow {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dashboardNearestServiceRow {
  width: 100%;
  min-width: 0;
  display: block;
}

.dashboardNearestTime {
  color: #201C1B;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: -0.2px;
  min-width: 56px;
  flex: 0 0 auto;
}

.dashboardNearestClient {
  color: #201C1B;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboardNearestDash {
  color: #201C1B;
  font-size: 12px;
  font-weight: 600;
}

.dashboardNearestService {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: rgba(32, 28, 27, 0.86);
  min-width: 0;
  line-height: 1.35;
}

.dashboardNearestStatusPill {
  margin-top: 0;
  flex: 0 0 auto;
}

.dashboardNearestStatusRow {
  margin-top: 6px;
  display: flex;
  align-items: center;
}

.dashboardNearestBlock--empty {
  padding: 10px 16px;
}

.dashboardNearestEmptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 0 2px;
}

.dashboardNearestCalendarPlaceholder {
  width: 100%;
  max-width: 320px;
  height: 120px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  opacity: 0.95;
  background:
    radial-gradient(circle at 30% 20%, rgba(226, 176, 172, 0.35), rgba(255, 255, 255, 0) 60%),
    radial-gradient(circle at 70% 70%, rgba(191, 231, 248, 0.22), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(202, 157, 153, 0.18);
  box-shadow: 0 14px 34px rgba(32, 28, 27, 0.05);
}

.dashboardNearestCalendarPlaceholder::before {
  content: '';
  position: absolute;
  inset: 10px 12px 12px 12px;
  border-radius: 12px;
  background:
    repeating-linear-gradient(
      to right,
      rgba(202, 157, 153, 0.16) 0 1px,
      rgba(255, 255, 255, 0) 1px 24px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(202, 157, 153, 0.16) 0 1px,
      rgba(255, 255, 255, 0) 1px 20px
    );
  opacity: 0.6;
}

.dashboardNearestCalendarPlaceholder::after {
  content: '';
  position: absolute;
  left: 22px;
  top: 22px;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: radial-gradient(circle at 35% 30%, rgba(226, 176, 172, 0.55), rgba(255, 255, 255, 0) 68%);
  opacity: 0.75;
  filter: blur(0.6px);
}

.dashboardNearestEmptyState .screenText {
  padding-top: 0;
  margin-top: 0;
  font-size: 13px;
  color: rgba(26, 26, 26, 0.55);
  text-align: center;
}

.dashboardNearestEmptyIcon {
  width: 26px;
  height: 26px;
  opacity: 0.62;
  filter: saturate(1.25) hue-rotate(-10deg) brightness(0.95) contrast(0.95);
}

.dashboardNearestPrimaryCta {
  margin-top: 10px;
  width: 100%;
  height: 54px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
  /* dark -> light (визуально зліва направо) */
  background: linear-gradient(90deg, #d9ada5 0%, #e2bab7 72%, #f6e1dc 100%);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(202, 157, 153, 0.22);
  position: relative;
  overflow: hidden;
}

.dashboardNearestPrimaryCta::after {
  content: '';
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 40%);
  opacity: 0.65;
  pointer-events: none;
  mix-blend-mode: screen;
}

.dashboardNearestSecondaryLink {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  text-decoration: none;
  color: rgba(202, 157, 153, 0.98);
  font-size: 12px;
  font-weight: 600;
}

.dashboardNearestEmptyState .dashboardNearestPrimaryCta,
.dashboardNearestEmptyState .dashboardNearestSeeAllCta {
  max-width: 360px;
}

@media (max-width: 420px) {
  .dashboardNearestPrimaryCta {
    height: 44px;
    font-size: 12px;
    box-shadow: 0 10px 22px rgba(202, 157, 153, 0.18);
  }

  .dashboardNearestSeeAllCta {
    /* Make it identical to primary CTA on mobile */
    height: 44px;
    padding: 0 12px;
    font-size: 12px;
    width: 100%;
    max-width: 360px;
    border: none;
    background: linear-gradient(90deg, #d9ada5 0%, #e2bab7 72%, #f6e1dc 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 10px 22px rgba(202, 157, 153, 0.18);
  }

  .dashboardNearestSeeAllCta {
    margin-left: auto;
    margin-right: auto;
  }
}

.dashboardNearestSecondaryLink:hover {
  text-decoration: underline;
}

.dashboardNearestSeeAllCta {
  display: flex;
  width: fit-content;
  margin: 12px auto 0;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  text-decoration: none;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(227, 176, 172, 0.85);
  color: rgba(201, 157, 153, 0.98);
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.dashboardNearestSeeAllCta:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(227, 176, 172, 1);
  text-decoration: none;
}

.dashboardNearestFooter {
  margin-top: 8px;
}

.dashboardNearestSeeAllBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  border-radius: 999px;
  text-decoration: none;
  box-sizing: border-box;
  background: transparent;
  border: none;
  color: rgba(202, 157, 153, 0.95);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 0 2px;
}

.dashboardNearestSeeAllBtn:hover {
  text-decoration: underline;
}

.dashboardStatusPill {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.dashboardStatusPill--new {
  background: #F8E7B8;
  border: 1px solid #F0D26A;
  color: #7A5A00;
}

.dashboardStatusPill--confirmed {
  background: transparent;
  border: none;
  color: #2F8F5A;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dashboardStatusPill--confirmed::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #2F8F5A;
  box-shadow: 0 8px 18px rgba(47, 143, 90, 0.22);
}

.dashboardStatusPill--cancelled {
  background: #F2F2F2;
  border: 1px solid #D9D9D9;
  color: #9E9E9E;
}

.dashboardStatusPill--completed {
  background: #E5E0DC;
  border: 1px solid #E5E0DC;
  color: #201C1B;
}

.dashboardQrOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* Must sit above `.bottomNav` (z-index: 2000) — otherwise fixed UI can show through modals on Android WebView */
  z-index: 5000;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.dashboardQrOverlay.dashboardQrOverlay--strong {
  /* Hide everything under modal (mobile-friendly) */
  background: rgba(12, 9, 8, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dashboardQrPanel {
  width: 100%;
  max-width: 360px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0px 18px 40px rgba(0, 0, 0, 0.2);
}

.dashboardQrTitle {
  margin: 0 0 10px;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 600;
}

.dashboardQrImg {
  width: 220px;
  height: 220px;
  display: block;
  margin: 0 auto;
}

.dashboardQrCloseBtn {
  margin-top: 14px;
  width: 100%;
  height: 48px;
}

/* Explore map */

.exploreRoot {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.exploreMapWrap {
  position: fixed;
  inset: 0;
  flex: 0 0 auto;
  min-height: 100vh;
  height: 100vh;
}

.exploreHeader {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  pointer-events: none;
}

.exploreHeaderTitle {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #201C1B;
  pointer-events: none;
}

.exploreHeaderMenuBtn {
  position: absolute;
  right: 16px;
  top: 6px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  pointer-events: auto;
}

.exploreHeaderMenuLine {
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: #E3B0AC;
}

.exploreSearchRow {
  position: absolute;
  top: 52px;
  left: 16px;
  right: 16px;
  z-index: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.exploreSearchPill {
  flex: 1 1 auto;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}

.exploreSearchChevron {
  color: #CA9D99;
  font-size: 12px;
  margin-right: 8px;
  flex: 0 0 auto;
}

.exploreSearchInput {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 12px;
  color: #201C1B;
}

.exploreSearchClear {
  border: none;
  background: transparent;
  color: #CA9D99;
  font-size: 18px;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
}

.exploreUseLocBtn {
  height: 34px;
  border-radius: 999px;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #CA9D99;
  font-size: 12px;
  padding: 0 2px;
  cursor: pointer;
}

.exploreUseLocBtn:disabled {
  opacity: 0.6;
  cursor: default;
}

.exploreUseLocIcon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.95);
  color: #CA9D99;
  font-size: 12px;
}

.exploreUseLocText {
  white-space: nowrap;
}

.exploreMap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #FAF7F4;
}

.exploreMapImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exploreMapImgPlaceholder {
  background-color: #FAF7F4;
  /* Map-like fallback when external tiles are blocked */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Crect width='1200' height='1200' fill='%23FAF7F4'/%3E%3Cg opacity='0.9'%3E%3Cpath d='M0 520 C 220 470, 360 610, 600 560 C 820 515, 980 610, 1200 560 L1200 700 C 980 750, 820 650, 600 705 C 360 760, 220 630, 0 690 Z' fill='%23BFE7F8'/%3E%3C/g%3E%3Cg opacity='0.65'%3E%3Cpath d='M40 160 H1160' stroke='%23E9E2DE' stroke-width='18' stroke-linecap='round'/%3E%3Cpath d='M80 280 H1120' stroke='%23E9E2DE' stroke-width='12' stroke-linecap='round'/%3E%3Cpath d='M120 400 H1080' stroke='%23E9E2DE' stroke-width='10' stroke-linecap='round'/%3E%3Cpath d='M160 820 H1040' stroke='%23E9E2DE' stroke-width='12' stroke-linecap='round'/%3E%3Cpath d='M220 940 H980' stroke='%23E9E2DE' stroke-width='18' stroke-linecap='round'/%3E%3Cpath d='M220 120 C 280 220, 240 320, 320 420 C 410 530, 380 650, 460 740 C 560 850, 520 980, 640 1120' stroke='%23E5E0DC' stroke-width='10' stroke-linecap='round' fill='none'/%3E%3Cpath d='M980 80 C 900 220, 960 330, 860 460 C 760 600, 820 740, 720 860 C 640 960, 700 1080, 620 1200' stroke='%23E5E0DC' stroke-width='12' stroke-linecap='round' fill='none'/%3E%3C/g%3E%3Cg opacity='0.35'%3E%3Ccircle cx='220' cy='220' r='34' fill='%23F4DCDA'/%3E%3Ccircle cx='980' cy='320' r='26' fill='%23F4DCDA'/%3E%3Ccircle cx='760' cy='900' r='30' fill='%23F4DCDA'/%3E%3C/g%3E%3Cg opacity='0.35'%3E%3Ctext x='520' y='610' font-family='Arial' font-size='64' fill='%23888888'%3ENew York%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}

/* Masters map view (inside Selecting a location screen) */

.mastersMapView {
  position: relative;
  margin: 10px 0 0;
  flex: 1 1 auto;
  min-height: 420px;
}

.mastersMapCanvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  overflow: hidden;
  border-radius: 18px;
  background: #FAF7F4;
  touch-action: pan-x pan-y;
}

.mastersMapbox {
  position: absolute;
  inset: 0;
}

.mastersMapHint {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  z-index: 6;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(217, 217, 217, 0.7);
  backdrop-filter: blur(14px);
  color: #201c1b;
  font-size: 13px;
  line-height: 1.25;
}

.mastersMapDebug {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 56px;
  z-index: 6;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(32, 28, 27, 0.68);
  color: #ffffff;
  font-size: 12px;
  line-height: 1.2;
  word-break: break-word;
}

.mastersMapImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mastersMapImgPlaceholder {
  background-color: #FAF7F4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Crect width='1200' height='1200' fill='%23FAF7F4'/%3E%3Cg opacity='0.9'%3E%3Cpath d='M0 520 C 220 470, 360 610, 600 560 C 820 515, 980 610, 1200 560 L1200 700 C 980 750, 820 650, 600 705 C 360 760, 220 630, 0 690 Z' fill='%23BFE7F8'/%3E%3C/g%3E%3Cg opacity='0.65'%3E%3Cpath d='M40 160 H1160' stroke='%23E9E2DE' stroke-width='18' stroke-linecap='round'/%3E%3Cpath d='M80 280 H1120' stroke='%23E9E2DE' stroke-width='12' stroke-linecap='round'/%3E%3Cpath d='M120 400 H1080' stroke='%23E9E2DE' stroke-width='10' stroke-linecap='round'/%3E%3Cpath d='M160 820 H1040' stroke='%23E9E2DE' stroke-width='12' stroke-linecap='round'/%3E%3Cpath d='M220 940 H980' stroke='%23E9E2DE' stroke-width='18' stroke-linecap='round'/%3E%3Cpath d='M220 120 C 280 220, 240 320, 320 420 C 410 530, 380 650, 460 740 C 560 850, 520 980, 640 1120' stroke='%23E5E0DC' stroke-width='10' stroke-linecap='round' fill='none'/%3E%3Cpath d='M980 80 C 900 220, 960 330, 860 460 C 760 600, 820 740, 720 860 C 640 960, 700 1080, 620 1200' stroke='%23E5E0DC' stroke-width='12' stroke-linecap='round' fill='none'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 560px 560px;
  background-position: 0 0;
}

.mastersPinsLayer {
  position: absolute;
  inset: 0;
}

.mastersMarkerBtn {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.mastersClusterBtn {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 2px solid #FFFFFF;
  background: #E3B0AC;
  box-shadow: 0px 10px 24px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.mastersClusterCount {
  color: #201C1B;
  font-weight: 700;
  font-size: 12px;
}

.mastersPinDrop {
  width: 18px;
  height: 18px;
  background: #E3B0AC;
  border: 2px solid #FFFFFF;
  border-radius: 999px 999px 999px 0;
  transform: rotate(-45deg);
  box-shadow: 0px 10px 24px rgba(0, 0, 0, 0.15);
}

.mastersPinDropActive {
  background: #D4909A;
}

.mastersMapToast {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #F4DCDA;
  border-radius: 12px;
  padding: 8px 10px;
  color: #888888;
  font-size: 12px;
  z-index: 4;
}

.mastersMapBottomSheet {
  position: absolute;
  left: 0;
  right: 0;
  /* slightly tuck under the translucent tab bar */
  bottom: calc(100px - 6px + env(safe-area-inset-bottom, 0px));
  padding: 0;
  z-index: 5;
}

/* Use existing masterCard styles inside map sheet */

.masterCard--map {
  box-shadow: 0px 20px 45px rgba(0, 0, 0, 0.14);
  min-height: 224px;
  height: auto;
  padding: 45px 25px 15px 25px;
  grid-template-columns: 117px minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 100%;
  border-left: 0;
  border-right: 0;
  border-radius: 20px 20px 0 0;
}

.masterCard--map .masterLeft {
  width: 117px;
  justify-content: flex-start;
  gap: 15px;
}

.masterCard--map .masterAvatar {
  width: 117px;
  height: 115px;
  font-size: 26px;
}

.masterCard--map .masterStars {
  padding: 0;
}

.masterCard--map .masterInfo {
  gap: 5px;
}

.masterCard--map .appointmentBtn {
  margin-top: 30px;
  border: 1px solid rgba(200, 150, 145, 0.48);
  background: linear-gradient(180deg, #f0ddd9 0%, #e4c2bc 48%, #d9ada5 100%);
  box-shadow: 0 2px 12px rgba(202, 157, 153, 0.2);
}

.masterCard--map .appointmentBtn:hover {
  filter: brightness(1.02);
}

.mastersMapHint {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #F4DCDA;
  border-radius: 16px;
  padding: 10px 12px;
  text-align: center;
  color: #888888;
  font-size: 12px;
}

.explorePinsLayer {
  position: absolute;
  inset: 0;
}

.exploreMarkerBtn {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.exploreMarkerBtn:disabled {
  cursor: default;
}

.exploreMarkerBtnActive .explorePinDot {
  background: #D4909A;
}

.explorePinDrop {
  width: 18px;
  height: 18px;
  background: #E3B0AC;
  border: 2px solid #FFFFFF;
  border-radius: 999px 999px 999px 0;
  transform: rotate(-45deg);
  box-shadow: 0px 10px 24px rgba(0, 0, 0, 0.15);
}

.explorePinDropActive {
  background: #D4909A;
}

.exploreOverlayMsg {
  position: absolute;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #F4DCDA;
  border-radius: 12px;
  padding: 10px 12px;
  color: #888888;
  font-size: 12px;
  z-index: 500;
}

.exploreBottomSheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 101px;
  padding: 12px 16px;
  box-sizing: border-box;
  z-index: 600;
}

.exploreMasterCard {
  background: #FFFFFF;
  border: 1px solid #F4DCDA;
  border-radius: 16px;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  box-sizing: border-box;
}

.exploreMasterAvatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #F4DCDA;
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #201C1B;
  font-weight: 700;
}

.exploreMasterAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exploreMasterBody {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.exploreMasterTopRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.exploreMasterTextCol {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.exploreBookBtnPill {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #F4DCDA;
  color: #201C1B;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.exploreBookBtnPill:active {
  transform: translateY(1px);
}

.exploreMasterName {
  color: #201C1B;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exploreMasterSub {
  color: #888888;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exploreMasterAddr {
  color: #201C1B;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exploreMasterRatingRow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #888888;
  font-size: 12px;
}

.exploreMasterStars {
  display: inline-flex;
  gap: 2px;
}

.exploreStar {
  color: #E5E0DC;
  font-size: 12px;
  line-height: 1;
}

.exploreStarOn {
  color: #E3B0AC;
}

.exploreMasterRatingValue {
  color: #888888;
  font-size: 12px;
}

.exploreBookBtn {
  margin-top: 6px;
}

.exploreSheetHint {
  background: #FFFFFF;
  border: 1px solid #F4DCDA;
  border-radius: 16px;
  padding: 14px;
  text-align: center;
  color: #888888;
  font-size: 12px;
}

.explorePinIcon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.explorePinDot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #E3B0AC;
  border: 2px solid #E8B4B8;
}

.explorePinDotActive {
  background: #2F8F5A;
  border-color: #2F8F5A;
}

/**
 * Master registration: /register, /register/set-password
 * Loaded by RegisterScreen + RegisterSetPasswordScreen
 */

/* Account creation (/register) — Figma */
.accountCreationScreen {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 8px max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100svh; /* Keep footer at the bottom even on short pages */
  font-family: 'Poppins', system-ui, sans-serif;
}

/* Password step (/register/set-password) uses the shared booking layout. */
.screen.bookingScreen {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.screen.bookingScreen .authFooterText {
  margin-top: auto;
}

.accountCreationTitle {
  margin: 12px 0 20px;
  text-align: center;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: #201c1b;
}

.accountCreationAvatarWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
}

.accountCreationAvatar {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: #e3b0ac;
  object-fit: cover;
  border: none;
  flex-shrink: 0;
}

.accountCreationAvatarBtn {
  margin-top: 10px;
  padding: 0;
  border: none;
  background: none;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: #b0b0b0;
  cursor: pointer;
}

.accountCreationAvatarBtn:hover {
  color: #888888;
}

.accountCreationHiddenFile {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.accountCreationSectionTitle {
  margin: 20px 0 20px 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  color: #201c1b;
  text-align: start;
  margin-bottom: 15px;
}

.accountCreationSub {
  margin: 0 0 20px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: #201c1b;
  text-align: left;
}

.accountCreationRowBtn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1.5px solid rgba(227, 176, 172, 0.9);
  background: rgba(227, 176, 172, 0.12);
  color: #201c1b;
  cursor: pointer;
  transition: transform 120ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 10px 24px rgba(32, 28, 27, 0.06);
}

.accountCreationRowBtn:hover {
  background: rgba(227, 176, 172, 0.18);
  box-shadow: 0 12px 28px rgba(32, 28, 27, 0.09);
}

.accountCreationRowBtn:active {
  transform: translateY(1px);
}

.accountCreationRowBtnIcon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  color: #201c1b; /* іконка чекбокса */
}

.accountCreationRowBtnText {
  text-align: left;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
}

.accountCreationNameRow {
  display: flex;
  flex-direction: row; 
  gap: 8px; /* Невеликий відступ, щоб влізло на мобільних */
  width: 100%;
  margin-bottom: 0;
}

.accountCreationInput167 {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  padding: 15px 16px;
  border: 1.5px solid #e3b0ac;
  border-radius: 12px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 14px;
  color: #201c1b;
  background: #fff;
}

.accountCreationInput167::placeholder {
  color: #b0b0b0;
}

.accountCreationInput167:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(227, 176, 172, 0.35);
}

.accountCreationCategories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  margin-bottom: 20px;
  width: 100%;
}

.accountCreationCatCard {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: 'Poppins', system-ui, sans-serif;
  border-radius: 16px;
}

.accountCreationCatMedia {
  position: relative;
  display: block;
  width: 100%;
  height: 104px;
  border-radius: 16px;
  overflow: hidden;
}

.accountCreationCatImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  display: block;
  border: none;
}

.accountCreationCatCard-brows .accountCreationCatImg {
  object-position: 95% 49%;
  transform: scale(1.2) translateX(-8%);
  transform-origin: center;
}

.accountCreationCatCard-makeup .accountCreationCatImg {
  object-position: 32% 46%;
  transform: translateX(-4%);
  transform-origin: center center;
}

@media (max-width: 768px) {
  .accountCreationCatCard-makeup .accountCreationCatImg {
    object-position: center 46%;
    transform: scale(1.14) translateX(0);
    transform-origin: center center;
  }
}

.accountCreationCatFallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.accountCreationCatFallback--nails {
  background: linear-gradient(135deg, #f8e8e4 0%, #e8b4a8 38%, #c26b6b 78%, #8b3a4a 100%);
}

.accountCreationCatFallback--brows {
  background: linear-gradient(145deg, #3e2723 0%, #5d4037 34%, #8d6e63 68%, #d7ccc8 100%);
}

.accountCreationCatFallback--hair {
  background: linear-gradient(125deg, #1a0f2e 0%, #4a2c6b 42%, #8e6ba8 74%, #e1bee7 100%);
}

.accountCreationCatFallback--cosmetology {
  background: linear-gradient(135deg, #fff3e0 0%, #ffd54f 28%, #ff7f7f 62%, #6a1b9a 100%);
}

.accountCreationCatFallback--makeup {
  background: linear-gradient(140deg, #fff3e0 0%, #ffccbc 32%, #f48fb1 68%, #ad1457 100%);
}

.accountCreationCatFallback--massage {
  background: linear-gradient(160deg, #0a2f38 0%, #1a5c6b 38%, #3d8b8f 72%, #9fd9d4 100%);
}

.accountCreationCatFallback--epilation {
  background: linear-gradient(145deg, #e8f5e9 0%, #c8e6c9 32%, #66bb6a 62%, #2e7d32 100%);
}

.accountCreationCatFallback--barber {
  background: linear-gradient(155deg, #0d47a1 0%, #1976d2 35%, #42a5f5 62%, #e3f2fd 100%);
}

.accountCreationCatFallback--other {
  background: linear-gradient(148deg, #121826 0%, #1f3a4d 52%, #2d5a6a 100%);
}

.accountCreationCatGradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(140, 109, 103, 0) 40.28%,
    rgba(74, 51, 46, 0.4) 105.72%
  );
  opacity: 0.55;
  transition: opacity 160ms ease;
}

.accountCreationCatLabel {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 10px;
  color: #ffffff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.1;
  transform: translateX(-50%);
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.accountCreationCatCardFocused:not(.accountCreationCatCardActive) .accountCreationCatMedia {
  box-shadow: 0 0 0 2px rgba(203, 123, 117, 0.55);
}

.accountCreationCatCardFocused.accountCreationCatCardActive .accountCreationCatMedia {
  box-shadow: 0 0 0 2.5px #a85f57, 0 6px 16px rgba(140, 90, 90, 0.28);
}

.accountCreationCatCardActive .accountCreationCatMedia {
  box-shadow: 0 0 0 2.5px #a85f57, 0 6px 16px rgba(140, 90, 90, 0.22);
}

.accountCreationCatCardActive .accountCreationCatGradient {
  opacity: 1;
}

.accountCreationCatCardActive .accountCreationCatImg {
  filter: brightness(0.9);
}

.accountCreationServiceGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  column-gap: 16px;
  row-gap: 12px;
  width: 100%;
  margin-bottom: 20px;
}

.accountCreationServiceRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px;
  min-width: 0;
}

.accountCreationServiceRow button {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 23px;
  justify-content: center;
}

.accountCreationServiceRow button svg {
  width: 22px;
  height: 23px;
  display: block;
}

.accountCreationServiceLabel {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: #201c1b;
  text-align: left;
  min-width: 0;
  flex: 1;
}

.accountCreationContactHead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.accountCreationContactHead .accountCreationSectionTitle {
  margin: 0;
}

.accountCreationInput350 {
  width: 100%;
  max-width: 350px;
  height: 48px;
  box-sizing: border-box;
  margin: 0 auto 10px;
  display: block;
  padding: 15px 16px;
  border: 1.5px solid #e3b0ac;
  border-radius: 12px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 14px;
  color: #201c1b;
  background: #fff;
}

.accountCreationContactInput {
  margin: 0 0 10px;
}

.accountCreationContactInput.accountCreationInput350 {
  /* On Account edit the contact block can be wider than 350px. */
  max-width: none;
  margin: 0 0 10px;
}

.accountCreationInput350::placeholder {
  color: #b0b0b0;
}

.accountCreationInput350:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(227, 176, 172, 0.35);
}

@media (max-width: 338px) {
  .appointmentsDateInput {
    max-width: 120px;
 
  }


}



.accountCreationFieldLabel {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: #b0b0b0;
  text-align: center;
}

.accountCreationCheckRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  width: 100%;
}

.accountCreationCheckRow button {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  height: 22px;
  display: flex;
  align-items: center;
  outline: none;
}

.accountCreationCheckRow button:focus {
  outline: none;
}

.accountCreationCheckRow button:focus-visible {
  outline: none;
  box-shadow: none;
}

.accountCreationCheckRow button svg {
  width: 16px;
  height: 22px;
  display: block;
}

.accountCreationWhatsAppLabel {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: #201c1b;
  text-align: left;
}

.registerTelegramVerify {
  width: 100%;
  max-width: 350px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(227, 176, 172, 0.12);
  border: 1px solid rgba(203, 123, 117, 0.35);
  box-sizing: border-box;
}

.registerTelegramVerifyHint {
  margin: 0 0 10px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  color: #4a4543;
  text-align: left;
}

.registerTelegramVerifyOk {
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
  color: #2d6a4f;
  text-align: left;
}

.registerTelegramVerifyBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(200, 150, 145, 0.48);
  border-radius: 999px;
  background: linear-gradient(180deg, #f0ddd9 0%, #e4c2bc 48%, #d9ada5 100%);
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 12px rgba(202, 157, 153, 0.2);
}

.registerTelegramVerifyBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.registerTelegramVerifyBtn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(227, 176, 172, 0.22),
    0 2px 12px rgba(202, 157, 153, 0.2);
}

.registerTelegramVerifyWait {
  margin: 10px 0 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: #5c5654;
  text-align: left;
}

.registerTelegramVerifyLink {
  color: #cb7b75;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.registerTelegramVerifyLink:hover {
  color: #a85f5a;
}

/* Inline Telegram verify (under phone input) */
.tgVerifyInline {
  margin-top: -2px;
  display: grid;
  gap: 6px;
}

.tgVerifyInlineLink {
  justify-self: start;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  color: #e3b0ac;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 12px;
}

.tgVerifyInlineLink:disabled {
  opacity: 0.55;
  cursor: default;
  text-decoration: none;
}

.tgVerifyInlineOk {
  font-size: 12px;
  font-weight: 800;
  color: rgba(46, 200, 160, 0.95);
}

.tgVerifyInlineWait {
  font-size: 12px;
  color: rgba(92, 86, 84, 0.75);
}

.tgVerifyInlineErr {
  font-size: 12px;
  color: rgba(214, 64, 64, 0.95);
}

.accountCreationIgWrap {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 0 6px;
}

.accountCreationIgWrap .accountCreationInput350 {
  margin: 0;
  padding-right: 44px;
  max-width: none;
  width: 100%;
}

.accountCreationIgIcon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.accountCreationOptionalNote {
  width: 100%;
  margin: 0 0 20px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: #b0b0b0;
  text-align: left;
}

.accountCreationLocationHead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.accountCreationLocationHead .accountCreationSectionTitle {
  margin: 0;
}

.accountCreationMapLink {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
  width: 100%;
  justify-content: flex-start;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  color: #CA9D99;
  text-align: left;
}

.accountCreationMapLink:hover {
  opacity: 0.85;
}

.accountCreationMapModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.accountCreationMapModalPanel {
  width: min(680px, 100%);
  max-height: min(86vh, 760px);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.accountCreationMapModalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.accountCreationMapModalTitle {
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #201c1b;
}

.accountCreationMapModalClose {
  border: none;
  background: transparent;
  color: #777;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.accountCreationMapModalMap {
  width: 100%;
  height: min(56vh, 420px);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ead2cf;
}

.accountCreationMapModalHint {
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 12px;
  color: #7a7a7a;
}

.accountCreationMapModalPicked {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f8f0ef;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 12px;
  color: #6c504d;
}

.accountCreationMapModalActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.accountCreationMapModalCancelBtn {
  border-radius: 25px;
  padding: 10px 16px;
}

.accountCreationLocationGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-bottom: 28px;
}

.accountCreationLocInput {
  width: 100%;
  min-width: 0;
  height: 48px;
  box-sizing: border-box;
  padding: 12px 10px;
  border: 1.5px solid #e3b0ac;
  border-radius: 12px;
  background: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  text-align: start;
  color: #201c1b;
}

.accountCreationLocInput::placeholder {
  color: #b0b0b0;
}

.accountCreationLocInput:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(227, 176, 172, 0.35);
}

.accountCreationPortfolioHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.accountCreationPortfolioHead .accountCreationSectionTitle {
  margin: 0;
}

.accountCreationShowAllBtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: #e3b0ac;
}

.accountCreationShowAllBtn:hover {
  opacity: 1;
}

.accountCreationPortfolioModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(32, 28, 27, 0.25);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.accountCreationPortfolioModalPanel {
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border: 1px solid rgba(227, 176, 172, 0.7);
  border-radius: 16px;
  padding: 12px 12px 14px;
  box-sizing: border-box;
}

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

.accountCreationPortfolioModalTitle {
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.1;
  color: #201c1b;
}

.accountCreationPortfolioModalClose {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #e3b0ac;
  background: transparent;
  color: #e3b0ac;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}

.accountCreationPortfolioModalGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.accountCreationPortfolioModalItem {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
}

.accountCreationPortfolioModalImg {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #d9d9d9;
}

.accountCreationPortfolioGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
  column-gap: 12px;
  row-gap: 18px;
  width: 100%;
  margin-bottom: 34px;
}

.accountCreationPortfolioSlot {
  width: 100%;
  min-height: 100px;
  height: auto;
  flex-shrink: 0;
}

.accountCreationPortfolioAdd {
  position: relative;
  width: 100%;
  height: 100px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: #d9d9d9;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accountCreationPortfolioPlusWrap {
  position: static;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accountCreationPortfolioAddLabel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: #b0b0b0;
  pointer-events: none;
}

@media (max-width: 360px) {
  .accountCreationPortfolioGrid {
    grid-template-columns: 1fr;
  }
}

.accountCreationPortfolioThumb {
  width: 100%;
  height: 100px;
  padding: 0;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  display: block;
  background: #d9d9d9;
}

.accountCreationPortfolioThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.accountCreationPortfolioReorderBtn {
  position: absolute;
  top: 6px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid #e3b0ac;
  background: #ffffff;
  color: #e3b0ac;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.accountCreationPortfolioReorderBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.accountCreationPortfolioReorderBtn--up {
  left: 6px;
}

.accountCreationPortfolioReorderBtn--down {
  right: 6px;
}

.accountCreationScheduleHint {
  margin: 6px 0 16px;
  max-width: 350px;
  width: 256px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  color: #201c1b;
  text-align: left;
}

.accountCreationWorkRow {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 18px;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.accountCreationWorkLabel {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  color: #e3b0ac;
}

.accountCreationWorkTo {
  padding: 0 2px;
}

/* Поле «років стажу»: цифра по центру клітинки */
.accountCreationWorkYearsInput {
  box-sizing: border-box;
  width: 76px;
  height: 39px;
  padding: 0 6px;
  border-radius: 14px;
  border: 1px solid #e3b0ac;
  background: #fff;
  text-align: center;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1;
  color: #201c1b;
  flex-shrink: 0;
}

.accountCreationWorkYearsInput:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(227, 176, 172, 0.35);
}

.accountCreationWorkYearsInput::-webkit-outer-spin-button,
.accountCreationWorkYearsInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.accountCreationWorkYearsInput[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.accountCreationTimeBox {
  box-sizing: border-box;
  width: 76px;
  height: 39px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid #e3b0ac;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.accountCreationTimeSelectWrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.accountCreationTimeSelectBtn {
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #201c1b;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
}

.accountCreationTimeSelectBtn:focus {
  outline: none;
}

.accountCreationTimeDropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 180px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #e3b0ac;
  border-radius: 12px;
  z-index: 50;
  box-sizing: border-box;
}

.accountCreationTimeDropdownUp {
  top: auto;
  bottom: calc(100% + 6px);
}

.accountCreationTimeModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(250, 247, 244, 0.25);
  display: block;
}

.accountCreationTimeModalPanel {
  position: fixed;
  background: #ffffff;
  border: 1px solid #e3b0ac;
  border-radius: 12px;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 6px 0;
}

.accountCreationTimeDropdownItem {
  width: 100%;
  padding: 10px 0;
  border: none;
  background: transparent;
  color: #201c1b;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}

.accountCreationTimeDropdownItemActive {
  background: #e3b0ac;
  color: #ffffff;
}

.accountCreationTimeDropdownItem:hover {
  background: rgba(227, 176, 172, 0.18);
}

.accountCreationTimeSelect {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 2px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #201c1b;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.accountCreationTimeSelect:focus {
  outline: none;
  box-shadow: none;
}

.accountCreationScheduleDivider {
  width: 100%;
  max-width: 100%;
  height: 0;
  margin: 16px 0 18px;
  border: 0;
  border-top: 1px solid #d9d9d9;
  opacity: 0.55;
}

.accountCreationWeeklyScheduleWrap {
  width: 100%;
  max-width: 100%;
  margin: 0 0 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Mobile: make schedule rows a bit denser */
@media (max-width: 520px) {
  .accountCreationTimeBox,
  .accountCreationTimeBoxSmall {
    width: 72px;
  }

  .accountCreationWeeklyDayRow {
    column-gap: 0;
    grid-template-columns: 1.85rem 42px minmax(0, 1fr);
  }

  .accountCreationWeeklyDayRest {
    gap: 8px;
    flex-wrap: wrap;
  }

  .accountCreationWeeklyDash {
    margin-left: 1px;
    margin-right: 1px;
  }

  .accountCreationWeeklyBreakRow {
    gap: 5px;
  }
}

.accountCreationWeeklyDayWrap {
  width: 100%;
}

.accountCreationWeeklyDayRow {
  display: grid;
  grid-template-columns: 2rem 42px minmax(0, 1fr);
  align-items: center;
  column-gap: 1px;
  row-gap: 6px;
  width: 100%;
}

.accountCreationWeeklyDayRest {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  align-content: flex-start;
  gap: 9px;
  min-width: 0;
}

.accountCreationWeeklyDayLabel {
  width: auto;
  min-width: 0;
  text-align: left;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
  color: #e3b0ac;
  flex-shrink: 0;
  white-space: nowrap;
}

.accountCreationWeeklyToggle {
  width: 42px;
  height: 39px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid #d9d9d9;
  background: transparent;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
  color: #d9d9d9;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.accountCreationWeeklyToggleActive {
  border-color: #e3b0ac;
  color: #201c1b;
  font-weight: 600;
}

.accountCreationWeeklyDash {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
  color: #e3b0ac;
  flex-shrink: 0;
  text-align: center;
  width: 10px;
  margin-left: 2px;
  margin-right: 2px;
}

.accountCreationWeeklyOffRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-height: 39px;
}

.accountCreationBreakToggle {
  height: 39px;
  width: 62px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid #e3b0ac;
  background: transparent;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;
  color: #e3b0ac;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accountCreationBreakToggleOn {
  color: #201c1b;
  font-weight: 600;
}

.accountCreationBreakToggle:disabled {
  opacity: 0.55;
  cursor: default;
}

.accountCreationWeeklyBreakRow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 0;
  justify-content: center;
  max-width: 100%;
  flex-wrap: nowrap;
  margin-top: 6px;
  margin-bottom: 6px;
}

.accountCreationBreakLabel {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;
  color: #e3b0ac;
  flex-shrink: 0;
}

.accountCreationTimeBoxSmall {
  width: 76px;
  height: 39px;
  padding: 0;
}

.accountCreationBookingHorizonRow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  max-width: 100%;
  width: 100%;
}

.accountCreationBookingHorizonLine1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.accountCreationBookingHorizonLine2 {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.accountCreationBookingHorizonText {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0;
  color: #e3b0ac;
  white-space: normal;
}

.accountCreationHorizonInput {
  width: 74px;
  height: 41px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid #e3b0ac;
  background: transparent;
  color: #201c1b;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  box-sizing: border-box;
  outline: none;
}

.accountCreationHorizonInput:focus {
  outline: none;
}

.accountCreationBookingHorizonLine1 .accountCreationHorizonInput {
  flex-shrink: 0;
}

.accountCreationBookingHorizonLine2 .accountCreationBookingHorizonText {
  white-space: nowrap;
}

/* ПК / широкий екран: один ряд — «…бронювати до» [N] «днів наперед» */
@media (min-width: 768px) {
  .accountCreationBookingHorizonRow {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .accountCreationBookingHorizonLine1 {
    flex-wrap: nowrap;
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
  }

  .accountCreationBookingHorizonLine2 {
    width: auto;
    justify-content: flex-start;
    flex-shrink: 0;
  }

  .accountCreationBookingHorizonLine1 .accountCreationBookingHorizonText {
    white-space: nowrap;
  }
}

.accountCreationRegisterTimeBanner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;

  gap: 12px;
  max-width: 350px;
  margin: 0 auto 14px;
  padding: 0;
  background: transparent;
}

.accountCreationRegisterTimeText {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  color: #e3b0ac;
}

.accountCreationRegisterTimeIcon {
  flex-shrink: 0;
  color: #e3b0ac;
}

.accountCreationClientSlots {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  max-width: 350px;
  margin: 0 auto 8px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;

}

.accountCreationClientSlot {
  min-width: 52px;
  height: 34px;
  /* padding: 10px 14px; */
  border-radius: 14px;
  border: 1px solid #e3b0ac;
  background: transparent;
  cursor: pointer;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  color: #201c1b;
}

.accountCreationClientSlot:hover {
  opacity: 0.92;
}

.accountCreationClientSlot:disabled {
  cursor: default;
  opacity: 1;
}

.accountCreationClientSlot:disabled:hover {
  opacity: 1;
}

.accountCreationClientSlotActive {
  background: transparent;
  border: 1px solid #e3b0ac;
  color: #201c1b;
  font-weight: 600;
}

.accountCreationClientSlotDisabled {
  border-color: #d9d9d9;
  color: #d9d9d9;
  cursor: not-allowed;
  opacity: 0.75;
}

.accountCreationCompleteWrap {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.accountCreationCompleteBtn {
  box-sizing: border-box;
  width: 190px;
  height: 48px;
  padding: 4px 10px;
  border: none;
  border-radius: 1000px;
  background: linear-gradient(270deg, #efd7d6 0%, #e2bab7 66.5%);
  box-shadow: 0 6px 4px rgba(202, 157, 153, 0.1);
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
}

.accountCreationCompleteBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.accountCreationPasswordBlock {
  margin-top: 8px;
  margin-bottom: 8px;
}

.accountCreationSubmit {
  margin-top: 20px;
  width: 100%;
  display: block;
  height: 52px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(270deg, #efd7d6 0%, #e2bab7 66.5%);
  box-shadow: 0 6px 4px rgba(202, 157, 153, 0.1);
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.accountCreationSubmit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.accountCreationScreen .bookingError {
  width: 100%;
  margin: 10px 0 0;
}

.accountCreationScreen .authFooterText {
  margin-top: auto;
}

.accountCreationExceptionTitle {
  margin: 15px 0 6px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 0;
  color: #201c1b;
  text-align: left;
}

.accountCreationExceptionsWrap {
  width: 100%;
  max-width: 350px;
  margin: 0 auto 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.accountCreationExceptionCard {
  width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 14px;
  background: transparent;
  padding: 12px 12px 14px;
  box-sizing: border-box;
}

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

.accountCreationExceptionLabel {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  color: #e3b0ac;
  white-space: nowrap;
}

.accountCreationExceptionDateInput {
  width: 165px;
  height: 41px;
  padding: 0 38px 0 12px;
  border-radius: 14px;
  border: 1.5px solid #e3b0ac;
  background: transparent;
  color: #201c1b;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1V3a1 1 0 0 1 1-1Zm12 8H5v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V10ZM6 6a1 1 0 0 0-1 1v1h14V7a1 1 0 0 0-1-1H6Z' fill='%23E3B0AC'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  box-sizing: border-box;
  outline: none;
}

.accountCreationExceptionDateInput::-ms-expand {
  display: none;
}

.accountCreationExceptionDateInput:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(227, 176, 172, 0.35);
}

.accountCreationExceptionDateInput::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
  /* Keep it clickable, but hide native icon (we render our own). */
}

.accountCreationExceptionToggleBtn {
  width: auto;
  min-width: 62px;
  height: 39px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid #e3b0ac;
  background: transparent;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  color: #e3b0ac;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accountCreationExceptionToggleBtn--on {
  color: #201c1b;
  font-weight: 600;
}

.accountCreationExceptionTimeGrid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin: 0 0 10px;
}

.accountCreationExceptionSaveWrap {
  display: flex;
  justify-content: center;
}

.accountCreationExceptionSaveBtn {
  box-sizing: border-box;
  width: 220px;
  height: 48px;
  padding: 4px 10px;
  border: none;
  border-radius: 1000px;
  background: linear-gradient(270deg, #efd7d6 0%, #e2bab7 66.5%);
  box-shadow: 0 6px 4px rgba(202, 157, 153, 0.1);
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
}

.accountCreationExceptionSaveBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.accountCreationExceptionReasonInput {
  width: 100%;
  height: 41px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1.5px solid #e3b0ac;
  background: transparent;
  color: #201c1b;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.accountCreationExceptionReasonInput:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(227, 176, 172, 0.35);
}

.accountCreationExceptionsList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* «Ваші послуги»: один видимий блок картки, решта — вертикальний скрол */
.accountCreationServiceEditList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(360px, 68vh);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-padding: 0 0 8px;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  box-sizing: border-box;
}

.accountCreationServiceEditList .accountCreationServiceEditCard {
  flex-shrink: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

@media (max-width: 520px) {
  .accountCreationServiceEditList {
    max-height: min(340px, 62vh);
  }
}

.accountCreationExceptionItem {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 14px;
}

.accountCreationExceptionItemMain {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.accountCreationExceptionItemDate {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: #201c1b;
  text-align: left;
  align-self: flex-start;
}

.accountCreationExceptionItemStatus {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  color: #e3b0ac;
  text-align: left;
  align-self: flex-start;
  margin-top: auto;
}

.accountCreationExceptionItemReason {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.2;
  color: #201c1b;
}

.accountCreationExceptionItemActions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.accountCreationExceptionLinkBtn {
  border: none;
  background: transparent;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  color: #e3b0ac;
  cursor: pointer;
  padding: 0;
  text-align: right;
}

.accountCreationExceptionLinkBtn:hover {
  opacity: 0.9;
}

.accountCreationExceptionLinkBtn--danger {
  color: #CA9D99;
}

.accountCreationServicesSection {
  margin-bottom: 20px;
}

.accountCreationCustomServiceBar {
  margin-top: 14px;
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
}

.accountCreationCustomServiceBtn {
  border: none;
  background: transparent;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #e3b0ac;
  cursor: pointer;
  padding: 8px 4px 8px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-align: left;
}

.accountCreationServiceEditCard {
  padding: 12px;
  border: 1px solid #e3b0ac;
  border-radius: 14px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.accountCreationServiceEditTopActions {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.accountCreationServiceEditTitleRow {
  display: flex;
  align-items: center;
  justify-content:space-between ;
  gap: 8px;
  width: 100%;
}

.accountCreationServiceEditTitle {
  min-width: 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: #201c1b;
}

.accountCreationServiceRemoveLink {
  flex-shrink: 0;
  align-self: flex-start;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  display: inline-block;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #ca9d99;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  line-height: 1.2;
}

.accountCreationServiceRemoveLink:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.accountCreationServiceEditCat {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: #888888;
  text-transform: uppercase;
}

.accountCreationServiceEditGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.accountCreationServiceEditField {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: #888888;
  text-align: left;
  align-items: flex-start;
}

.accountCreationServiceEditField > span {
  width: 100%;
  text-align: left;
}

.accountCreationServiceEditCheck {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #201c1b;
  text-align: left;
  width: 100%;
}

.accountCreationServiceEditCheck > span {
  text-align: left;
}

.accountCreationServiceEditCheck button {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.accountCreationServiceEditDesc {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #e3b0ac;
  padding: 8px 10px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13px;
  resize: vertical;
  box-sizing: border-box;
}

.accountCreationServiceEditActions {
  display: flex;
  justify-content: flex-end;
}

.accountCreationModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(32, 28, 27, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}

@media (min-width: 520px) {
  .accountCreationModalOverlay {
    align-items: center;
  }
}

.accountCreationModalPanel {
  width: 100%;
  max-width: 400px;
  max-height: 90vh;
  overflow: auto;
  background: #faf7f4;
  border-radius: 18px;
  padding: 18px 20px 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

.accountCreationModalTitle {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
  color: #201c1b;
  text-align: left;
}

.accountCreationModalField {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: #888888;
  text-align: left;
  align-items: stretch;
  width: 100%;
}

.accountCreationModalField > span {
  text-align: left;
  width: 100%;
}

/* У модалці прибираємо центрування від .accountCreationInput350 (margin: 0 auto) */
.accountCreationModalPanel .accountCreationModalInput,
.accountCreationModalPanel .accountCreationModalSelect {
  margin: 0 0 10px;
  max-width: 100%;
}

.accountCreationModalSelect {
  padding-right: 64px; /* space for custom arrow */
  padding-left: 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23CA9D99' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* Custom dropdown for modal category (avoids native select overflow on mobile) */
.accountCreationModalSelectWrap {
  width: 100%;
}

.accountCreationModalSelectBtn {
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  border: 1.5px solid #e3b0ac;
  border-radius: 12px;
  background: #fff;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 14px;
  color: #201c1b;
  cursor: pointer;
}

.accountCreationModalSelectArrow {
  margin-left: 12px;
  color: #ca9d99;
  font-size: 14px;
  line-height: 1;
}

.accountCreationModalSelectPanel {
  position: fixed;
  z-index: 1300;
  background: #ffffff;
  border: 1px solid #f4dcda;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  overflow: auto;
  box-sizing: border-box;
}

.accountCreationModalTextarea {
  margin: 0 0 4px;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.accountCreationModalCheck {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #201c1b;
  text-align: left;
  width: 100%;
}

.accountCreationModalCheck > span {
  text-align: left;
}

.accountCreationModalCheck button {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.accountCreationModalActions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 6px;
}

.accountCreationModalActions .bookingNextBtn {
  margin-top: 0;
  width: auto;
  min-width: 120px;
  padding: 0 16px;
}

.accountCreationModalActions .bookingRetryOutline {
  margin-top: 0;
  width: auto;
  min-height: 48px;
  border-radius: 999px;
  padding: 0 16px;
}

.accountCreationPortfolioCaption {
  width: 100%;
  margin-top: 6px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid #e3b0ac;
  font-size: 12px;
  box-sizing: border-box;
  background: #ffffff;
}

.accountCreationPortfolioDelete {
  margin-top: 6px;
  width: 100%;
  border: none;
  background: transparent;
  color: #ca9d99;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Кабінет салону — картка запрошення майстра (як плитки на реєстрації: hero + градієнт) */
.orgPendingMasterCard {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(202, 157, 153, 0.38);
  box-shadow:
    0 4px 6px rgba(32, 28, 27, 0.06),
    0 18px 44px rgba(32, 28, 27, 0.1);
  background: rgba(255, 252, 251, 0.92);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  font-family: 'Poppins', system-ui, sans-serif;
}

.orgPendingMasterCard__hero {
  position: relative;
  height: 118px;
  overflow: hidden;
}

.orgPendingMasterCard__heroImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
  transform: scale(1.03);
}

.orgPendingMasterCard__heroGradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(74, 51, 46, 0.12) 45%,
    rgba(45, 32, 30, 0.72) 100%
  );
  opacity: 1;
}

.orgPendingMasterCard__heroGradient::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(227, 176, 172, 0.35) 0%,
    rgba(255, 255, 255, 0) 55%
  );
}

.orgPendingMasterCard__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #3d2c2a;
  background: linear-gradient(135deg, rgba(255, 236, 179, 0.98), rgba(255, 213, 128, 0.95));
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  max-width: calc(100% - 20px);
  text-align: center;
  line-height: 1.2;
}

.orgPendingMasterCard__heroName {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  color: #fff;
  text-align: right;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.orgPendingMasterCard__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  text-align: left;
}

.orgPendingMasterCard__email {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #3d2c2a;
  word-break: break-word;
  line-height: 1.4;
}

.orgPendingMasterCard__note {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #5c4f4d;
  word-break: break-word;
  line-height: 1.4;
}

.orgPendingMasterCard__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(60, 52, 50, 0.72);
}

.orgPendingMasterCard__expiry {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(60, 52, 50, 0.68);
}

.orgPendingMasterCard__expiry strong {
  color: #3d2c2a;
  font-weight: 600;
}

.orgPendingMasterCard__delete {
  margin-top: 8px;
  align-self: stretch;
  width: 100%;
  padding: 12px 16px;
  text-align: center;
  border-radius: 999px;
  border: 1px solid rgba(217, 107, 107, 0.55);
  background: rgba(255, 255, 255, 0.65);
  color: #c45c5c;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    opacity 160ms ease;
}

.orgPendingMasterCard__delete:hover:not(:disabled) {
  background: rgba(255, 245, 245, 0.95);
  border-color: rgba(217, 107, 107, 0.85);
}

.orgPendingMasterCard__delete:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Кабінет салону — акаунт / dashboard: ритм відступів і «повітря» в картках */
.orgDashboardHub {
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 18px 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

@media (min-width: 480px) {
  .orgDashboardHub {
    padding: 4px 24px 44px;
    gap: 26px;
  }
}

.orgDashboardHub__status {
  margin: 0;
  text-align: center;
  padding: 10px 4px 0;
  font-size: 15px;
  line-height: 1.45;
}

.orgDashboardHub__status--error {
  text-align: left;
  padding-top: 6px;
}

.orgOwnerAccountScreen {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.orgOwnerAccountScreen__title {
  margin: 12px 18px 6px;
  padding: 0;
}

@media (min-width: 480px) {
  .orgOwnerAccountScreen__title {
    margin: 16px 24px 8px;
  }
}

.orgAccountRoleLoading {
  padding: 6px 18px 28px;
  margin: 0;
  text-align: center;
}

@media (min-width: 480px) {
  .orgAccountRoleLoading {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.orgDashboardHub .bookingSummaryCard.orgDashboardCard {
  padding: 16px 18px;
  gap: 14px;
}

.orgDashboardCard--addOrg .bookingNextBtn {
  margin-top: 2px;
}

.orgDashboardHub .orgDashboardCard__title {
  margin: 0 0 4px;
}

.orgDashboardHub .orgDashboardCard__subtitle {
  margin: 0 0 10px;
}

.orgDashboardFieldRow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.orgDashboardCategoriesBlock {
  margin-top: 4px;
}

.orgDashboardCategoriesHint {
  margin: 0 0 14px;
  opacity: 0.88;
  line-height: 1.45;
}

.orgMastersInviteForm {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 4px;
}

.orgMastersInviteForm__submit {
  align-self: stretch;
}

.orgMastersEmptyHint {
  margin: 6px 0 0;
  opacity: 0.9;
  line-height: 1.45;
}

.orgPendingInvitesGrid {
  display: grid;
  gap: 18px;
  margin-top: 6px;
}

.orgDashboardAddOrgHint {
  margin: 0 0 14px;
  opacity: 0.9;
  line-height: 1.45;
}

/* iOS Safari: при font-size < 16px на полях сторінка «стрибає» (зум при фокусі) */
@media (max-width: 768px) {
  .accountCreationInput167,
  .accountCreationInput350,
  .accountCreationContactInput,
  .accountCreationPortfolioCaption,
  .accountCreationTimeSelect,
  .accountCreationWorkYearsInput,
  .accountCreationHorizonInput,
  .accountCreationExceptionDateInput,
  .accountCreationModalSelectBtn {
    font-size: 16px;
  }
}/* Screen 07: Master appointments (dashboard/appointments) */

.bookingTopRow .bookingTitle.bookingTitle--alignStart {
  text-align: left;
  padding-left: 15px;
}

/* Глибший теплий «чорний» для заголовка екрана записів */
.bookingScreen > .bookingTopRow .screenTitle.bookingTitle {
  color: #1f1f1f;
}

.appointmentsFiltersWrap {
  margin-bottom: 12px;
  min-width: 0;
}

/* Салон: заголовок «Чий розклад» + смуга майстрів — зверху не обрізати текст */
.appointmentsOrgMasterFiltersWrap {
  padding-top: 6px;
}

.appointmentsOrgMasterFiltersHeading {
  margin-top: 0;
  margin-bottom: 10px;
  padding-top: 2px;
  line-height: 1.35;
  opacity: 0.88;
  font-size: 13px;
}

/* Premium "glass calendar": keep screen as one canvas */
.appointmentsDayCard.bookingSummaryCard {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

/* Soft colored blobs under glass (so blur is visible) */
.bookingScreen {
  position: relative;
  min-height: 100vh;
  background: transparent;
}

.bookingScreen::before,
.bookingScreen::after {
  content: '';
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  filter: blur(70px);
  opacity: 0; /* background removed as requested */
  pointer-events: none;
  z-index: 0;
}

.bookingScreen::before {
  left: -220px;
  top: 160px;
  background: radial-gradient(circle at 30% 30%, rgba(181, 155, 230, 0.45), rgba(181, 155, 230, 0));
}

.bookingScreen::after {
  right: -260px;
  top: 520px;
  background: radial-gradient(circle at 30% 30%, rgba(227, 176, 172, 0.45), rgba(227, 176, 172, 0));
}

.bookingScreen > * {

  z-index: 1;
}

/* Усі прямі діти .bookingScreen мають z-index:1 — наступні блоки перекривають попап календаря */
.bookingScreen > .bookingTopRow--overlay {
  z-index: 200;
}

.bookingTopRowTools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.appointmentsCalendarAnchor {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.appointmentsStatusDropdown {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.appointmentsStatusTriggerBtn {
  height: 36px;
  min-width: 0;
  max-width: min(42vw, 200px);
  padding: 0 10px 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(227, 176, 172, 0.55);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 8px 22px rgba(32, 28, 27, 0.06);
  color: #e3b0ac;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.appointmentsStatusTriggerBtn:hover {
  background: rgba(227, 176, 172, 0.12);
  border-color: rgba(227, 176, 172, 0.75);
}

.appointmentsStatusTriggerBtn:active {
  transform: scale(0.99);
}

.appointmentsStatusTriggerLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appointmentsStatusTriggerChevron {
  flex-shrink: 0;
  display: inline-flex;
  color: #e3b0ac;
}

.appointmentsStatusTriggerChevron svg {
  display: block;
}

/* Bottom sheet: не перекриває стрічку днів — з’їжджає знизу, скло */
.appointmentsStatusSheetBackdrop {
  position: fixed;
  inset: 0;
  z-index: 240;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(32, 28, 27, 0.28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  cursor: pointer;
}

.appointmentsStatusSheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 241;
  display: flex;
  flex-direction: column;
  /* Фіксована висота панелі — інакше flex не дає скролу всередині й обрізаються останні пункти */
  height: min(70vh, 400px);
  max-height: min(70vh, 400px);
  padding: 0 0 env(safe-area-inset-bottom, 0);
  border-radius: 18px 18px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-bottom: none;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 -12px 40px rgba(32, 28, 27, 0.12);
  animation: appointmentsStatusSheetIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .appointmentsStatusSheet {
    animation: none;
  }
}

@keyframes appointmentsStatusSheetIn {
  from {
    transform: translateY(100%);
    opacity: 0.96;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.appointmentsSheetGrabberZone {
  touch-action: none;
  cursor: grab;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 24px 10px;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
}

.appointmentsSheetGrabberZone:active {
  cursor: grabbing;
}

.appointmentsStatusSheetGrabber {
  width: 36px;
  height: 4px;
  margin: 0;
  border-radius: 999px;
  background: rgba(32, 28, 27, 0.12);
  pointer-events: none;
}

.appointmentsStatusSheetInner {
  flex: 1 1 0;
  min-height: 0;
  padding: 4px 8px calc(24px + env(safe-area-inset-bottom, 0));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
}

.appointmentsStatusOption {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  margin: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #5c4f4d;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(227, 176, 172, 0.25);
}

.appointmentsStatusOption:hover {
  background: rgba(255, 255, 255, 0.45);
}

.appointmentsStatusOption.isActive {
  color: #201c1b;
  font-weight: 700;
  background: transparent;
}

.appointmentsStatusOptionDot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.appointmentsStatusOptionDot--all {
  background: linear-gradient(135deg, #e3b0ac 0%, #d4a8a3 100%);
}

.appointmentsStatusOptionDot--new {
  background: #5b8fd9;
}

.appointmentsStatusOptionDot--confirmed {
  background: #2f8f5a;
}

.appointmentsStatusOptionDot--completed {
  background: #6d6563;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.appointmentsStatusOptionDot--cancelled {
  background: #d32f2f;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.appointmentsStatusOptionLabel {
  flex: 1;
  min-width: 0;
}

.appointmentsStatusOption--confirmed .appointmentsStatusOptionLabel {
  color: #1a4d33;
  font-weight: 600;
}

.appointmentsStatusOption--confirmed.isActive .appointmentsStatusOptionLabel {
  color: #142e20;
  font-weight: 700;
}

.appointmentsStatusOptionTrail {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #e3b0ac;
}

.appointmentsStatusOptionCheck {
  display: block;
}

.appointmentsTodayBtn {
  height: 36px;
  width: 36px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(244, 220, 218, 0.95);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 8px 22px rgba(32, 28, 27, 0.06);
  color: #201C1B;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.appointmentsTodayBtn:hover {
  background: rgba(255, 255, 255, 0.72);
}

.appointmentsTodayBtn:active {
  transform: scale(0.99);
}

.appointmentsTodayBtnIcon {
  font-size: 16px;
  line-height: 1;
}

.appointmentsCalendarPopover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 210;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(244, 220, 218, 0.85);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(32, 28, 27, 0.12), 0 1px 0 rgba(255, 255, 255, 0.75) inset;
  /* Каскад для всього календаря (у бібліотеці за замовчуванням — синій accent) */
  --appointments-accent: var(--accent);
  /* Avoid `color-mix`: some Android WebViews ignore it, which makes RDP vars invalid and falls back to library defaults. */
  --appointments-accent-bg: var(--accent-bg);
  --appointments-accent-border: var(--accent-border);
  --appointments-tap-highlight: var(--accent-bg);

  --rdp-accent-color: var(--appointments-accent) !important;
  --rdp-accent-background-color: var(--appointments-accent-bg) !important;
  --rdp-selected-border: 2px solid var(--appointments-accent) !important;
  --rdp-today-color: var(--appointments-accent) !important;
  --rdp-outline: 2px solid var(--appointments-accent) !important;
  --rdp-outline-selected: 2px solid var(--appointments-accent) !important;
}

/* Календар — модальна панель знизу, не більше половини висоти екрана */
.appointmentsCalendarSheet.appointmentsCalendarPopover {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 241;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 50vh;
  max-height: 50dvh;
  padding: 0;
  box-sizing: border-box;
  border-radius: 18px 18px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-bottom: none;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 -12px 40px rgba(32, 28, 27, 0.12);
  animation: appointmentsStatusSheetIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .appointmentsCalendarSheet.appointmentsCalendarPopover {
    animation: none;
  }
}

.appointmentsCalendarSheetBody {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 env(safe-area-inset-right, 0) 0 env(safe-area-inset-left, 0);
}

.appointmentsCalendarSheetScroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 16px 12px;
}

/* трохи більші клітинки на повноекранному модальному календарі */
.appointmentsCalendarSheetScroll .rdp-root {
  --rdp-day-width: 48px;
  --rdp-day-height: 48px;
  --rdp-day_button-width: 46px;
  --rdp-day_button-height: 46px;
}

.appointmentsCalendarSheetFooter {
  flex-shrink: 0;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0));
  border-top: 1px solid rgba(244, 220, 218, 0.55);
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -8px 24px rgba(32, 28, 27, 0.06);
}

.appointmentsCalendarSheet .appointmentsSheetGrabberZone {
  padding-top: 8px;
}

/* react-day-picker v9: корінь — .rdp-root */
.appointmentsCalendarPopover .rdp-root.appointmentsDayPicker,
.appointmentsCalendarPopover .rdp-root {
  margin: 0;
  -webkit-tap-highlight-color: var(--appointments-tap-highlight);
  --rdp-accent-color: var(--appointments-accent) !important;
  --rdp-accent-background-color: var(--appointments-accent-bg) !important;
  --rdp-selected-border: 2px solid var(--appointments-accent) !important;
  --rdp-today-color: var(--appointments-accent) !important;
  --rdp-outline: 2px solid var(--appointments-accent) !important;
  --rdp-outline-selected: 2px solid var(--appointments-accent) !important;
}

/* Верх календаря: підпис місяця без «системного» синього кільця (Highlight / -webkit-focus-ring-color) */
.appointmentsCalendarPopover .rdp-root .rdp-month_caption {
  color: #201c1b !important;
  background: transparent !important;
}

.appointmentsCalendarPopover .rdp-root .rdp-caption_label {
  color: #201c1b !important;
}

.appointmentsCalendarPopover .rdp-root .rdp-dropdown:focus-visible ~ .rdp-caption_label {
  outline: 2px solid var(--appointments-accent) !important;
  outline-offset: 2px !important;
}

.appointmentsCalendarPopover .rdp-root button,
.appointmentsCalendarPopover .rdp-root [role='button'],
.appointmentsCalendarPopover .rdp-root select {
  outline-color: var(--appointments-accent) !important;
}

.appointmentsCalendarPopover .rdp-root button:focus-visible,
.appointmentsCalendarPopover .rdp-root [role='button']:focus-visible,
.appointmentsCalendarPopover .rdp-root select:focus-visible {
  outline: 2px solid var(--appointments-accent) !important;
  outline-style: solid !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

.appointmentsCalendarPopover .rdp-root .rdp-button_previous:focus-visible,
.appointmentsCalendarPopover .rdp-root .rdp-button_next:focus-visible {
  outline: 2px solid var(--appointments-accent) !important;
  outline-style: solid !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Стрілки місяця — фірмовий рожевий */
.appointmentsCalendarPopover .rdp-root .rdp-chevron {
  fill: var(--appointments-accent) !important;
  color: var(--appointments-accent) !important;
}

.appointmentsCalendarPopover .rdp-root .rdp-button_previous,
.appointmentsCalendarPopover .rdp-root .rdp-button_next {
  border: 1px solid var(--appointments-accent-border) !important;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85) !important;
  color: var(--appointments-accent) !important;
}

.appointmentsCalendarPopover .rdp-root .rdp-today:not(.rdp-outside) .rdp-day_button {
  font-weight: 800;
}

/* Вибраний день — цифра у фірмовому кольорі + легка заливка */
.appointmentsCalendarPopover .rdp-root .rdp-selected .rdp-day_button {
  color: var(--appointments-accent) !important;
  background-color: var(--appointments-accent-bg) !important;
  border-color: var(--appointments-accent) !important;
}

/* Фокус клавіатурою — без системного синього */
.appointmentsCalendarPopover .rdp-root .rdp-day_button:focus,
.appointmentsCalendarPopover .rdp-root .rdp-day_button:focus-visible {
  outline: 2px solid var(--appointments-accent) !important;
  outline-offset: 2px;
  border-color: var(--appointments-accent) !important;
}

.appointmentsCalendarGoTodayBtn {
  width: 100%;
  margin: 0;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--accent-border);
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.appointmentsCalendarGoTodayBtn:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}

.appointmentsDateStrip {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  padding: 2px 2px 2px 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.appointmentsDateStripHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 2px 6px 2px;
}

.appointmentsDateStripMonth {
  font-size: 12px;
  font-weight: 900;
  color: rgba(32, 28, 27, 0.88);
  text-transform: capitalize;
  letter-spacing: 0.01em;
}

.appointmentsDateStrip::-webkit-scrollbar {
  display: none;
}

.appointmentsDayChip {
  flex: 0 0 auto;
  /* Трохи більші за попередні компактні; 7 днів лишаються у видимій зоні на типових екранах */
  width: 50px;
  height: 60px;
  border-radius: 15px;
  border: none;
  background: transparent;
  display: grid;
  grid-template-rows: 1fr 1fr;
  place-items: center;
  padding: 7px 6px 11px 6px;
  position: relative;
  cursor: pointer;
}

.appointmentsDayChip.isActive {
  background: transparent;
  border-color: transparent;
}

.appointmentsDayChipDow {
  font-size: 10px;
  font-weight: 700;
  color: #7B6D6B;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.appointmentsDayChipDay {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #FFFFFF;
  border: 1px solid rgba(244, 220, 218, 0.85);
  font-size: 16px;
  font-weight: 800;
  color: #201C1B;
  line-height: 1;
}

.appointmentsDayChip.isActive .appointmentsDayChipDay {
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
  background: linear-gradient(165deg, #f2b4ae 0%, #e3b0ac 42%, #cf7a72 100%);
  box-shadow: none;
}

.appointmentsDayChip.isActive .appointmentsDayChipDow {
  color: #b85a52;
  font-weight: 800;
}

/* Салон: «Чий розклад» — підпис одним рядком, кола на одній горизонталі (довгі імена не зсувають owner вниз) */
.appointmentsOrgMasterStrip {
  align-items: flex-start;
  gap: 6px;
  padding: 6px 2px 4px;
  box-sizing: border-box;
}

.appointmentsOrgMasterStrip .appointmentsOrgMasterChip.appointmentsDayChip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 52px;
  min-width: 52px;
  height: auto;
  min-height: 0;
  padding: 8px 4px 8px;
  grid-template-rows: none;
  gap: 6px;
}

.appointmentsOrgMasterStrip .appointmentsOrgMasterChip .appointmentsDayChipDow {
  flex: 0 0 auto;
  width: 100%;
  max-width: 52px;
  min-height: 26px;
  max-height: 26px;
  line-height: 1.25;
  padding-top: 1px;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.appointmentsOrgMasterStrip .appointmentsOrgMasterChip .appointmentsDayChipDay {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  font-size: 14px;
  font-weight: 800;
}

.appointmentsGroupCard {
  margin-bottom: 12px;
}

.appointmentsGroupTitleRow {
  align-items: center;
}

.appointmentsGroupTitle {
  color: #888888;
  font-size: 12px;
}

.appointmentsDayCard {
  margin-bottom: 12px;
}

.appointmentsDayTitleRow {
  align-items: center;
}

.appointmentsDayTitle {
  color: #888888;
  font-size: 12px;
  font-weight: 600;
}

.appointmentsEmptyDayText {
  margin: 10px 0 0 0;
}

.appointmentsTimeline {
  position: relative;
  margin-top: 10px;
  display: grid;
  gap: 14px;
}

/* Add subtle contrast under glass cards (so blur is visible),
   without setting a background on `.bookingScreen`. */
.appointmentsTimeline::after {
  content: '';
  position: absolute;
  inset: -30px -12px -30px -12px;
  pointer-events: none;
  z-index: 0;
  /* Keep it extremely subtle to avoid “uneven” look across cards */
  background:
    radial-gradient(560px 560px at 22% 18%, rgba(181, 155, 230, 0.10), rgba(181, 155, 230, 0.00) 72%),
    radial-gradient(600px 600px at 76% 32%, rgba(227, 176, 172, 0.10), rgba(227, 176, 172, 0.00) 74%);
  filter: blur(34px);
  opacity: 0.32;
  mix-blend-mode: screen;
}

/* Only timeline: one thin spine */
.appointmentsTimeline::before {
  content: '';
  position: absolute;
  left: 23px; /* center of 46px time column */
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(32, 28, 27, 0.10);
  pointer-events: none;
  z-index: 1;
}

.appointmentsTimelineItem,
.appointmentsGapCard {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  position: relative;
  z-index: 2; /* above timeline's soft blobs */
}

.appointmentsTimelineTimeCol {
  padding-top: 10px;
  position: relative;
}

.appointmentsTimelineTime {
  font-size: 11px;
  font-weight: 800;
  color: rgba(32, 28, 27, 0.62);
}

.appointmentsGapCard {
  padding: 0;
}

.appointmentsTimelineBody {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 2px 0;
}

.appointmentsGapCard .appointmentsTimelineBody {
  /* Як у .appointmentsItemCard--timeline (18px), вирівнювання з ім’ям клієнта */
  padding: 10px 18px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.appointmentsGapCard.isEmptyDay .appointmentsTimelineBody {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.appointmentsGapTopRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.appointmentsGapMiniActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.appointmentsGapMiniBtn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  color: rgba(32, 28, 27, 0.45);
  opacity: 0.5;
  transition: opacity 0.12s ease;
}

.appointmentsGapCard.isBlocked .appointmentsTimelineBody {
  border: 1px solid rgba(32, 28, 27, 0.14);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.appointmentsGapMiniBtn:hover,
.appointmentsGapMiniBtn:focus-visible,
.appointmentsGapMiniBtn:active {
  opacity: 1;
}

.appointmentsGapMiniBtn:focus-visible {
  outline: 2px solid #e3b0ac;
  outline-offset: 2px;
}

.appointmentsEmptyState {
  display: grid;
  gap: 10px;
  padding: 10px 0 6px 0;
}

.appointmentsEmptyIllustration {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(227, 176, 172, 0.14);
  border: 1px solid rgba(244, 220, 218, 0.9);
  font-size: 26px;
}

.appointmentsEmptyActions {
  display: grid;
  gap: 10px;
}

.appointmentsDayBlockedBody {
  border-style: solid;
  border-color: rgba(32, 28, 27, 0.14);
  background: rgba(32, 28, 27, 0.04);
}

.appointmentsDayBlockedActions {
  margin-top: 10px;
}

.appointmentsModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(32, 28, 27, 0.45);
  display: grid;
  justify-content: space-evenly;
  place-items: center;
  padding: 16px;
}

.appointmentsModal {
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.74);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.50);
  padding: 16px 16px 14px 16px;
  box-shadow:
    0 24px 70px rgba(32, 28, 27, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.55) inset;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.appointmentsModalTitle {
  font-size: 14px;
  font-weight: 900;
  color: #201C1B;
  margin-bottom: 18px;
}

.appointmentsModalGrid {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

.appointmentsSuggestWrap {
  position: relative;
  min-width: 0;
  max-width: 100%;
}

/* Поле часу в iOS/Safari має великий min-width — вилазить за сітку; обрізаємо по ширині інших полів */
.appointmentsModalField .appointmentsSuggestWrap--time {
  overflow-x: hidden;
  max-width: 100%;
}

.appointmentsSuggestList {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 200;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.20);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
}

.appointmentsSuggestItem {
  height: 34px;
  width: 100%;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.28);
  color: rgba(12, 12, 12, 0.92);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.appointmentsSuggestItemLeft {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appointmentsSuggestItemRight {
  flex: 0 0 auto;
  font-weight: 900;
  color: rgba(32, 28, 27, 0.68);
}

.appointmentsSuggestItem:hover {
  background: rgba(255, 255, 255, 0.38);
}

.appointmentsModalField {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #7B6D6B;
  min-width: 0;
}

.appointmentsModalField .appointmentsSuggestWrap {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.appointmentsModalField .appointmentsSuggestWrap input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.appointmentsModalField input {
  height: 44px;
  border-radius: 14px;
  border: 1px solid #F4DCDA;
  padding: 0 12px;
  font-size: 13px;
  color: #201C1B;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.appointmentsModalField input[type='time'] {
  accent-color: #E3B0AC;
}

/* Без нативної іконки годинника (Chrome/Edge/Safari) */
.appointmentsModalField input[type='time'].appointmentsTimeNoPicker::-webkit-calendar-picker-indicator {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  width: 0;
  height: 0;
}

.appointmentsModalField input[type='time'].appointmentsTimeNoPicker::-moz-calendar-picker-indicator {
  display: none;
}

/* Час по центру поля (модалка «Додати запис») */
.appointmentsModalField input[type='time'].appointmentsTimeNoPicker {
  text-align: center;
  /* iOS: зняти мінімальну ширину ~8em, інакше поле ширше за текст/телефон */
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  background: #ffffff;
  color: #201c1b;
  font-family: inherit;
  /* Явно симетричні відступи (у т. ч. для WebKit shadow DOM) */
  padding-left: 12px;
  padding-right: 12px;
}

/*
 * Без width:100% на fields-wrapper: інакше блок часу розтягується на всю ширину інпута
 * і зникає «повітря» справа (виглядає як прилипання до краю).
 */
.appointmentsModalField input[type='time'].appointmentsTimeNoPicker::-webkit-datetime-edit {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding-left: 2px;
  padding-right: 2px;
}

.appointmentsModalField input[type='time'].appointmentsTimeNoPicker::-webkit-datetime-edit-fields-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  max-width: calc(100% - 4px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
}

.appointmentsModalField input[type='time'].appointmentsTimeNoPicker::-webkit-datetime-edit-hour-field,
.appointmentsModalField input[type='time'].appointmentsTimeNoPicker::-webkit-datetime-edit-minute-field,
.appointmentsModalField input[type='time'].appointmentsTimeNoPicker::-webkit-datetime-edit-ampm-field,
.appointmentsModalField input[type='time'].appointmentsTimeNoPicker::-webkit-datetime-edit-text {
  text-align: center;
}

.appointmentsModalField input[type='time'].appointmentsTimeNoIcon::-webkit-calendar-picker-indicator {
  opacity: 0;
  pointer-events: none;
}

.appointmentsModalField input.appointmentsTimeNoIcon {
  text-align: center;
  padding: 0 12px;
}

.appointmentsTimeRangeRow .appointmentsSuggestWrap input.appointmentsTimeNoIcon {
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(32, 28, 27, 0.08);
  background: rgba(255, 255, 255, 0.40);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.80) inset;
}

.appointmentsTimeRangeRow .appointmentsSuggestWrap input.appointmentsTimeNoIcon:focus {
  border-color: rgba(227, 176, 172, 0.70);
  box-shadow:
    0 0 0 3px rgba(227, 176, 172, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.80) inset;
}

.appointmentsModalField input[type='time'].appointmentsTimeNoIcon::-webkit-datetime-edit,
.appointmentsModalField input[type='time'].appointmentsTimeNoIcon::-webkit-datetime-edit-fields-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.appointmentsModalField input[type='time'].appointmentsTimeNoIcon::-webkit-datetime-edit-hour-field,
.appointmentsModalField input[type='time'].appointmentsTimeNoIcon::-webkit-datetime-edit-minute-field,
.appointmentsModalField input[type='time'].appointmentsTimeNoIcon::-webkit-datetime-edit-ampm-field,
.appointmentsModalField input[type='time'].appointmentsTimeNoIcon::-webkit-datetime-edit-text {
  text-align: center;
}

/* Flex + однаковий gap: дефіс завжди посередині між двома полями, не «в» першому інпуті */
.appointmentsTimeRangeRow {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

.appointmentsTimeRangeRow .appointmentsSuggestWrap {
  flex: 0 0 118px;
  width: 118px;
  min-width: 0;
  max-width: 118px;
}

.appointmentsTimeRangeRow .appointmentsSuggestWrap input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.appointmentsTimeRangeSep {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25ch;
  padding: 0;
  color: rgba(32, 28, 27, 0.55);
  font-weight: 900;
  line-height: 1;
  user-select: none;
}

.appointmentsModalField input:focus {
  outline: none;
  border-color: #E3B0AC;
}

.appointmentsModalActions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.appointmentsModalActions .bookingRetryOutline {
  border: none;
  background: transparent;
  padding: 8px 6px;
  height: auto;
  border-radius: 10px;
  color: rgba(32, 28, 27, 0.62);
  font-weight: 900;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.appointmentsModalActions .bookingRetryOutline:hover {
  color: rgba(32, 28, 27, 0.86);
}

.appointmentsModalActions .bookingNextBtn {
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f2c9c5, #E3B0AC);
  border: 1px solid rgba(227, 176, 172, 0.35);
  box-shadow: 0 10px 22px rgba(227, 176, 172, 0.28);
}

.appointmentsModalActions .bookingNextBtn:hover {
  filter: brightness(1.03);
}
.appointmentsGapTitle {
  font-size: 11px;
  font-weight: 600;
  color: #7B6D6B;
}

.appointmentsGapTitle {
  color: rgba(32, 28, 27, 0.42);
  font-weight: 700;
}

.appointmentsGapBlockBtn,
.appointmentsGapUnblockBtn {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #F4DCDA;
  background: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.appointmentsGapBlockBtn:hover,
.appointmentsGapUnblockBtn:hover {
  border-color: #E3B0AC;
}

.appointmentsGapSub {
  margin-top: 6px;
}

.appointmentsGapSubText {
  font-size: 11px;
  color: #7B6D6B;
  font-weight: 600;
}

.appointmentsSwipeWrap {
  position: relative;
  border-radius: 16px;
}

/* Frosted “tab bar” glass (Telegram / Apple Music–like): blur + vibrancy + light specular edge */
.appointmentsSwipeWrap.appointmentsSwipeWrap--card {
  overflow: hidden;
  isolation: isolate;
  border-radius: 14px;
  /* Add a tiny internal gradient so glass looks consistent everywhere */
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.18)),
    rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-top: 1px solid rgba(255, 255, 255, 0.60); /* iOS glass cut highlight */
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.04),
    0 8px 28px rgba(227, 176, 172, 0.12),
    0 6px 24px rgba(31, 38, 135, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 140ms ease, box-shadow 200ms ease, background 200ms ease;
}

.appointmentsSwipeWrap.appointmentsSwipeWrap--card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* Top specular strip like iOS glass */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.56) 0%,
    rgba(255, 255, 255, 0.10) 40%,
    rgba(255, 255, 255, 0) 58%
  );
  opacity: 0.6;
}

/* Thin mirror edge (subtle, not heavy chrome) */
.appointmentsSwipeWrap.appointmentsSwipeWrap--card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.75),
    rgba(255, 255, 255, 0.22) 42%,
    rgba(255, 255, 255, 0.12) 58%,
    rgba(255, 255, 255, 0.55)
  );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.45;
}

.appointmentsSwipeWrap.appointmentsSwipeWrap--card:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.24);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.05),
    0 8px 30px rgba(227, 176, 172, 0.14),
    0 6px 26px rgba(31, 38, 135, 0.07);
}

.appointmentsSwipeWrap.appointmentsSwipeWrap--card:hover::after {
  opacity: 0.55;
}

.appointmentsSwipeFront:focus-visible {
  outline: 2px solid rgba(227, 176, 172, 0.75);
  outline-offset: 3px;
  border-radius: 14px;
}

.appointmentsSwipeBg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  /* Keep swipe actions grouped (one row) */
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 12px 12px 12px;
  z-index: 0;
}

.appointmentsSwipeBgLeft {
  /* Keep actions background subtle so card stays transparent */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0;
}

.appointmentsSwipeBgRight {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 0;
}

.appointmentsSwipeBgText {
  display: none;
}

.appointmentsSwipeBgIcon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 900;
  opacity: 1;
  color: rgba(20, 20, 20, 0.92);
  background: rgba(255, 255, 255, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.70) inset,
    0 10px 26px rgba(255, 255, 255, 0.16),
    0 8px 22px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
}

.appointmentsSwipeFront {
  position: relative;
  border-radius: inherit;
  touch-action: pan-y;
  /* Keep text crisp (avoid “soft” compositing artifacts) */
  will-change: auto;
  transform: translate3d(var(--appointments-swipe-dx, 0px), 0, 0);
  backface-visibility: hidden;
  z-index: 1;
}

.appointmentsSwipeWrap--card .appointmentsSwipeFront {
  border-radius: inherit;
  /* Prevent swipe icons from showing through content */
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

.appointmentsItemCard--timeline {
  position: relative;
  overflow: hidden;
}

.appointmentsItemAccent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 999px;
}

.appointmentsItemActions--desktop {
  display: none;
}

@media (min-width: 521px) {
  .appointmentsItemActions--desktop {
    display: flex;
    gap: 8px;
  }
}

.appointmentsExpandedDetails--timeline {
  padding-top: 10px;
}

.appointmentsExpandedBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(32, 28, 27, 0.08);
}

.appointmentsExpandedBarLeft {
  min-width: 0;
 
}

.appointmentsExpandedPhone {
  font-size: 12px;
  font-weight: 800;
  color: #201c1b;
  text-decoration: none;
  word-break: break-all;
  line-height: 1.35;
}

.appointmentsExpandedPhone:hover {
  color: #e3b0ac;
}

.appointmentsExpandedPhone--empty {
  color: rgba(32, 28, 27, 0.45);
  font-weight: 700;
}

.appointmentsExpandedBarRight {
  display: flex;
 
  flex-shrink: 0;
  align-items: center;
}

/* Лише круглі ✅/❌ (appointmentsSwipeBgIcon), без кольорового квадрата під ними */
.appointmentsExpandedIconBtn {
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  min-width: 44px;
  min-height: 44px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.appointmentsExpandedIconBtn .appointmentsSwipeBgIcon {
  flex-shrink: 0;
}

.appointmentsExpandedIconBtn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.appointmentsExpandedIconBtn:hover:not(:disabled) .appointmentsSwipeBgIcon {
  filter: brightness(1.06);
}

.appointmentsExpandedIconBtn:focus-visible {
  outline: 2px solid #E3B0AC;
  outline-offset: 3px;
  border-radius: 999px;
}

.appointmentsExpandedIconBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.appointmentsErrorText {
  color: #D96B6B;
}

.appointmentsGroupItemsGrid {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.appointmentsItemCard {
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
}

.appointmentsItemCard.appointmentsItemCard--timeline {
  border-radius: 14px;
  padding: 20px 18px;
  min-height: 130px;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.appointmentsItemToggle {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.appointmentsItemTopRow {
  display: grid;
  gap: 6px;
}

.appointmentsItemTimeRow {
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-width: 0;
}

.appointmentsItemHeaderRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.appointmentsItemRight {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}


.appointmentsItemBottomRow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  min-width: 0;
}

.appointmentsItemCard.appointmentsItemCard--timeline .appointmentsItemBottomRow {
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.appointmentsItemBottomLeft {
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}

.appointmentsItemBottomRight {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  flex: 0 0 auto;
  white-space: nowrap;
}

.appointmentsItemLeft {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.appointmentsItemTime {
  color: #201C1B;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.appointmentsItemClient {
  color: #1f1f1f;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}

.appointmentsItemService {
  color: rgba(31, 31, 31, 0.9);
  font-size: 12px;
  font-weight: 600;
  white-space: normal;
  overflow: hidden;
  max-width: 220px;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
}

.appointmentsItemDuration {
  font-size: 10px;
  font-weight: 700;
  color: rgba(32, 28, 27, 0.56);
}

.appointmentsItemMiniActions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: 0 10px 24px rgba(32, 28, 27, 0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.appointmentsMiniIconBtn {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: 0.75;
}

.appointmentsMiniIconBtn:hover {
  opacity: 0.95;
}

.appointmentsMiniIconBtn:disabled {
  opacity: 0.5;
  cursor: default;
}


.appointmentsActionBtn {
  height: 34px;
  border-radius: 999px;
  padding: 0 12px;
  font-weight: 600;
  font-size: 12px;
  box-sizing: border-box;
}

.appointmentsActionBtn--confirm {
  border: 1px solid #E3B0AC;
  background: #E3B0AC;
  color: #FFFFFF;
}

.appointmentsActionBtn--cancel {
  border: 1px solid #D96B6B;
  background: #FFFFFF;
  color: #D96B6B;
}

.appointmentsActionBtn--complete {
  border: 1px solid #2F8F5A;
  background: #2F8F5A;
  color: #FFFFFF;
}

.appointmentsExpandedDetails {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.appointmentsStrongRight {
  text-align: right;
}

.appointmentsClientLink {
  color: #201C1B;
  text-decoration: none;
}

.appointmentsCommentStrong {
  text-align: right;
  font-weight: 500;
  color: #888888;
}

.appointmentsStatusBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: auto;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  font-weight: 700;
  font-size: 11px;
  box-sizing: border-box;
  white-space: nowrap;
}

.appointmentsStatusBadge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.9;
}

.appointmentsStatusBadge--new {
  color: #E3B0AC;
}

.appointmentsStatusBadge--confirmed {
  color: #1d6b45;
}

.appointmentsStatusBadge--completed {
  color: rgba(32, 28, 27, 0.55);
}

.appointmentsStatusBadge--cancelled {
  color: #9E9E9E;
}

@media (max-width: 640px) {
  .appointmentsStatusTriggerBtn {
    max-width: min(46vw, 168px);
    padding: 0 8px 0 10px;
    font-size: 11px;
  }

  /* Вузькі екрани: трохи менше за базові, але більше за попередній ультракомпакт */
  .appointmentsDayChip {
    width: 46px;
    height: 56px;
    padding: 6px 4px 10px 4px;
    border-radius: 14px;
  }

  .appointmentsDayChipDay {
    width: 31px;
    height: 31px;
    font-size: 15px;
  }

  .appointmentsDayChipDow {
    font-size: 9px;
  }

  .appointmentsOrgMasterStrip .appointmentsOrgMasterChip.appointmentsDayChip {
    width: 48px;
    min-width: 48px;
    padding: 7px 3px 7px;
    gap: 5px;
  }

  .appointmentsOrgMasterStrip .appointmentsOrgMasterChip .appointmentsDayChipDow {
    max-width: 48px;
    min-height: 24px;
    max-height: 24px;
    line-height: 1.2;
  }

  .appointmentsOrgMasterStrip .appointmentsOrgMasterChip .appointmentsDayChipDay {
    width: 31px;
    height: 31px;
    font-size: 12px;
  }

  .appointmentsItemTimeRow {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .appointmentsItemClient,
  .appointmentsItemService {
    max-width: 100%;
  }

}

/* Мобільна модалка «Додати запис»: 16px проти зуму iOS + відступ зліва у полі часу (WebKit shadow DOM) */
@media (max-width: 768px) {
  .appointmentsModalField input {
    font-size: 16px;
  }

  .appointmentsModalField input[type='time'].appointmentsTimeNoPicker {
    padding-left: 16px;
    padding-right: 16px;
  }

  .appointmentsModalField input[type='time'].appointmentsTimeNoPicker::-webkit-datetime-edit {
    padding-left: 4px;
    padding-right: 4px;
  }

  .appointmentsModalField input[type='time'].appointmentsTimeNoPicker::-webkit-datetime-edit-fields-wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Variables declaration */
.rdp-root {
  --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
  --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */

  --rdp-day-height: 44px; /* The height of the day cells. */
  --rdp-day-width: 44px; /* The width of the day cells. */

  --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
  --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
  --rdp-day_button-height: 42px; /* The height of the day cells. */
  --rdp-day_button-width: 42px; /* The width of the day cells. */

  --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
  --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
  --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
  --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */

  --rdp-dropdown-gap: 0.5rem; /* The gap between the dropdowns used in the month captons. */

  --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */

  --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
  --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */
  --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */
  --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */

  --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
  --rdp-range_middle-color: inherit; /* The color of the range text. */

  --rdp-range_start-color: white; /* The color of the range text. */
  --rdp-range_start-background: linear-gradient(
    var(--rdp-gradient-direction),
    transparent 50%,
    var(--rdp-range_middle-background-color) 50%
  ); /* Used for the background of the start of the selected range. */
  --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */

  --rdp-range_end-background: linear-gradient(
    var(--rdp-gradient-direction),
    var(--rdp-range_middle-background-color) 50%,
    transparent 50%
  ); /* Used for the background of the end of the selected range. */
  --rdp-range_end-color: white; /* The color of the range text. */
  --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */

  --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
  --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */

  --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
  --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
  --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
  --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */

  --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
  --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
  --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */

  --rdp-gradient-direction: 90deg;

  --rdp-animation_duration: 0.3s;
  --rdp-animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
}

.rdp-root[dir="rtl"] {
  --rdp-gradient-direction: -90deg;
}

.rdp-root[data-broadcast-calendar="true"] {
  --rdp-outside-opacity: unset;
}

/* Root of the component. */
.rdp-root {
  position: relative; /* Required to position the navigation toolbar. */
  box-sizing: border-box;
}

.rdp-root * {
  box-sizing: border-box;
}

.rdp-day {
  width: var(--rdp-day-width);
  height: var(--rdp-day-height);
  text-align: center;
}

.rdp-day_button {
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  justify-content: center;
  align-items: center;
  display: flex;

  width: var(--rdp-day_button-width);
  height: var(--rdp-day_button-height);
  border: var(--rdp-day_button-border);
  border-radius: var(--rdp-day_button-border-radius);
}

.rdp-day_button:disabled {
  cursor: revert;
}

.rdp-caption_label {
  z-index: 1;

  position: relative;
  display: inline-flex;
  align-items: center;

  white-space: nowrap;
  border: 0;
}

.rdp-dropdown:focus-visible ~ .rdp-caption_label {
  outline: 5px auto Highlight;
  /* biome-ignore lint/suspicious/noDuplicateProperties: backward compatibility */
  outline: 5px auto -webkit-focus-ring-color;
}

.rdp-button_next,
.rdp-button_previous {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -moz-appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  appearance: none;

  width: var(--rdp-nav_button-width);
  height: var(--rdp-nav_button-height);
}

.rdp-button_next:disabled,
.rdp-button_next[aria-disabled="true"],
.rdp-button_previous:disabled,
.rdp-button_previous[aria-disabled="true"] {
  cursor: revert;

  opacity: var(--rdp-nav_button-disabled-opacity);
}

.rdp-chevron {
  display: inline-block;
  fill: var(--rdp-accent-color);
}

.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
  transform: rotate(180deg);
  transform-origin: 50%;
}

.rdp-dropdowns {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--rdp-dropdown-gap);
}
.rdp-dropdown {
  z-index: 2;

  /* Reset */
  opacity: 0;
  appearance: none;
  position: absolute;
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  cursor: inherit;
  border: none;
  line-height: inherit;
}

.rdp-dropdown_root {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
  opacity: var(--rdp-disabled-opacity);
}

.rdp-month_caption {
  display: flex;
  align-content: center;
  height: var(--rdp-nav-height);
  font-weight: bold;
  font-size: large;
}

.rdp-root[data-nav-layout="around"] .rdp-month,
.rdp-root[data-nav-layout="after"] .rdp-month {
  position: relative;
}

.rdp-root[data-nav-layout="around"] .rdp-month_caption {
  justify-content: center;
  margin-inline-start: var(--rdp-nav_button-width);
  margin-inline-end: var(--rdp-nav_button-width);
  position: relative;
}

.rdp-root[data-nav-layout="around"] .rdp-button_previous {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: var(--rdp-nav-height);
  display: inline-flex;
}

.rdp-root[data-nav-layout="around"] .rdp-button_next {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  height: var(--rdp-nav-height);
  display: inline-flex;
  justify-content: center;
}

.rdp-months {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rdp-months-gap);
  max-width: fit-content;
}

.rdp-month_grid {
  border-collapse: collapse;
}

.rdp-nav {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;

  display: flex;
  align-items: center;

  height: var(--rdp-nav-height);
}

.rdp-weekday {
  opacity: var(--rdp-weekday-opacity);
  padding: var(--rdp-weekday-padding);
  font-weight: 500;
  font-size: smaller;
  text-align: var(--rdp-weekday-text-align);
  text-transform: var(--rdp-weekday-text-transform);
}

.rdp-week_number {
  opacity: var(--rdp-week_number-opacity);
  font-weight: 400;
  font-size: small;
  height: var(--rdp-week_number-height);
  width: var(--rdp-week_number-width);
  border: var(--rdp-week_number-border);
  border-radius: var(--rdp-week_number-border-radius);
  text-align: var(--rdp-weeknumber-text-align);
}

/* DAY MODIFIERS */
.rdp-today:not(.rdp-outside) {
  color: var(--rdp-today-color);
}

.rdp-selected {
  font-weight: bold;
  font-size: large;
}

.rdp-selected .rdp-day_button {
  border: var(--rdp-selected-border);
}

.rdp-outside {
  opacity: var(--rdp-outside-opacity);
}

.rdp-disabled:not(.rdp-selected) {
  opacity: var(--rdp-disabled-opacity);
}

.rdp-hidden {
  visibility: hidden;
  color: var(--rdp-range_start-color);
}

.rdp-range_start {
  background: var(--rdp-range_start-background);
}

.rdp-range_start .rdp-day_button {
  background-color: var(--rdp-range_start-date-background-color);
  color: var(--rdp-range_start-color);
}

.rdp-range_middle {
  background-color: var(--rdp-range_middle-background-color);
}

.rdp-range_middle .rdp-day_button {
  border: unset;
  border-radius: unset;
  color: var(--rdp-range_middle-color);
}

.rdp-range_end {
  background: var(--rdp-range_end-background);
  color: var(--rdp-range_end-color);
}

.rdp-range_end .rdp-day_button {
  color: var(--rdp-range_start-color);
  background-color: var(--rdp-range_end-date-background-color);
}

.rdp-range_start.rdp-range_end {
  background: revert;
}

.rdp-focusable {
  cursor: pointer;
}

@keyframes rdp-slide_in_left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes rdp-slide_in_right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes rdp-slide_out_left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes rdp-slide_out_right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.rdp-weeks_before_enter {
  animation: rdp-slide_in_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-weeks_before_exit {
  animation: rdp-slide_out_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-weeks_after_enter {
  animation: rdp-slide_in_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-weeks_after_exit {
  animation: rdp-slide_out_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-root[dir="rtl"] .rdp-weeks_after_enter {
  animation: rdp-slide_in_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-root[dir="rtl"] .rdp-weeks_before_exit {
  animation: rdp-slide_out_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-root[dir="rtl"] .rdp-weeks_before_enter {
  animation: rdp-slide_in_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-root[dir="rtl"] .rdp-weeks_after_exit {
  animation: rdp-slide_out_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

@keyframes rdp-fade_in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes rdp-fade_out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.rdp-caption_after_enter {
  animation: rdp-fade_in var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-caption_after_exit {
  animation: rdp-fade_out var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-caption_before_enter {
  animation: rdp-fade_in var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-caption_before_exit {
  animation: rdp-fade_out var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}
.mapboxgl-map{font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgb(0 0 0/0)}.mapboxgl-canvas{left:0;position:absolute;top:0}.mapboxgl-map:-webkit-full-screen{height:100%;width:100%}.mapboxgl-canary{background-color:salmon}.mapboxgl-canvas-container.mapboxgl-interactive,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass{cursor:grab;-webkit-user-select:none;user-select:none}.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer{cursor:pointer}.mapboxgl-canvas-container.mapboxgl-interactive:active,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active{cursor:grabbing}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas{touch-action:pan-x pan-y}.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:pinch-zoom}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:none}.mapboxgl-ctrl-bottom,.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right,.mapboxgl-ctrl-left,.mapboxgl-ctrl-right,.mapboxgl-ctrl-top,.mapboxgl-ctrl-top-left,.mapboxgl-ctrl-top-right{pointer-events:none;position:absolute;z-index:2}.mapboxgl-ctrl-top-left{left:0;top:0}.mapboxgl-ctrl-top{left:50%;top:0;transform:translateX(-50%)}.mapboxgl-ctrl-top-right{right:0;top:0}.mapboxgl-ctrl-right{right:0;top:50%;transform:translateY(-50%)}.mapboxgl-ctrl-bottom-right{bottom:0;right:0}.mapboxgl-ctrl-bottom{bottom:0;left:50%;transform:translateX(-50%)}.mapboxgl-ctrl-bottom-left{bottom:0;left:0}.mapboxgl-ctrl-left{left:0;top:50%;transform:translateY(-50%)}.mapboxgl-ctrl{clear:both;pointer-events:auto;transform:translate(0)}.mapboxgl-ctrl-top-left .mapboxgl-ctrl{float:left;margin:10px 0 0 10px}.mapboxgl-ctrl-top .mapboxgl-ctrl{float:left;margin:10px 0}.mapboxgl-ctrl-top-right .mapboxgl-ctrl{float:right;margin:10px 10px 0 0}.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,.mapboxgl-ctrl-right .mapboxgl-ctrl{float:right;margin:0 10px 10px 0}.mapboxgl-ctrl-bottom .mapboxgl-ctrl{float:left;margin:10px 0}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,.mapboxgl-ctrl-left .mapboxgl-ctrl{float:left;margin:0 0 10px 10px}.mapboxgl-ctrl-group{background:#fff;border-radius:4px}.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px #0000001a}@media (-ms-high-contrast:active){.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px ButtonText}}.mapboxgl-ctrl-group button{background-color:initial;border:0;box-sizing:border-box;cursor:pointer;display:block;height:32px;outline:none;overflow:hidden;padding:0;width:32px}.mapboxgl-ctrl-group button+button{border-top:1px solid #ddd}.mapboxgl-ctrl button .mapboxgl-ctrl-icon{background-position:50%;background-repeat:no-repeat;display:block;height:100%;width:100%}@media (-ms-high-contrast:active){.mapboxgl-ctrl-icon{background-color:initial}.mapboxgl-ctrl-group button+button{border-top:1px solid ButtonText}}.mapboxgl-ctrl-attrib-button:focus,.mapboxgl-ctrl-group button:focus{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl button:disabled{cursor:not-allowed}.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon{opacity:.25}.mapboxgl-ctrl-group button:first-child{border-radius:4px 4px 0 0}.mapboxgl-ctrl-group button:last-child{border-radius:0 0 4px 4px}.mapboxgl-ctrl-group button:only-child{border-radius:inherit}.mapboxgl-ctrl button:not(:disabled):hover{background-color:#eee}.mapboxgl-ctrl-group button:focus:focus-visible{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl-group button:focus:not(:focus-visible){box-shadow:none}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23999'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-arrow-up .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23333' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.29289 11.7071C4.68342 12.0976 5.31658 12.0976 5.70711 11.7071L9 8.41421L12.2929 11.7071C12.6834 12.0976 13.3166 12.0976 13.7071 11.7071C14.0976 11.3166 14.0976 10.6834 13.7071 10.2929L9.70711 6.29289C9.31658 5.90237 8.68342 5.90237 8.29289 6.29289L4.29289 10.2929C3.90237 10.6834 3.90237 11.3166 4.29289 11.7071Z' fill='%23333333'/%3E%3C/svg%3E");background-size:18px 18px}.mapboxgl-ctrl button.mapboxgl-ctrl-arrow-down .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23333' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.29289 6.29289C4.68342 5.90237 5.31658 5.90237 5.70711 6.29289L9 9.58579L12.2929 6.29289C12.6834 5.90237 13.3166 5.90237 13.7071 6.29289C14.0976 6.68342 14.0976 7.31658 13.7071 7.70711L9.70711 11.7071C9.31658 12.0976 8.68342 12.0976 8.29289 11.7071L4.29289 7.70711C3.90237 7.31658 3.90237 6.68342 4.29289 6.29289Z' fill='%23333333'/%3E%3C/svg%3E");background-size:18px 18px}.mapboxgl-ctrl button.mapboxgl-ctrl-indoor-toggle .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23333' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.0017 3.0017L4.0017 15.0017L10.0017 15.0017V12.0017H12.0017V15.0017H14.0017L14.0017 3.0017C14.0097 2.86829 13.9894 2.73469 13.9419 2.60973C13.8945 2.48477 13.8211 2.37129 13.7266 2.27678C13.6321 2.18228 13.5186 2.10889 13.3937 2.06147C13.2687 2.01405 13.1351 1.99368 13.0017 2.0017L5.0017 2.0017C4.86829 1.99368 4.73469 2.01405 4.60973 2.06147C4.48477 2.10889 4.37129 2.18228 4.27678 2.27678C4.18228 2.37129 4.10889 2.48477 4.06147 2.60973C4.01405 2.73469 3.99368 2.86829 4.0017 3.0017ZM8.0017 14.0017H6.0017V12.0017H8.0017V14.0017ZM8.0017 10.0017H6.0017L6.0017 8.0017H8.0017V10.0017ZM8.0017 6.0017L6.0017 6.0017V4.0017H8.0017V6.0017ZM12.0017 10.0017H10.0017V8.0017H12.0017V10.0017ZM12.0017 6.0017H10.0017V4.0017L12.0017 4.0017V6.0017Z' fill='%23333333'/%3E%3C/svg%3E");background-size:18px 18px}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-indoor-toggle .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.0017 3.0017L4.0017 15.0017L10.0017 15.0017V12.0017H12.0017V15.0017H14.0017L14.0017 3.0017C14.0097 2.86829 13.9894 2.73469 13.9419 2.60973C13.8945 2.48477 13.8211 2.37129 13.7266 2.27678C13.6321 2.18228 13.5186 2.10889 13.3937 2.06147C13.2687 2.01405 13.1351 1.99368 13.0017 2.0017L5.0017 2.0017C4.86829 1.99368 4.73469 2.01405 4.60973 2.06147C4.48477 2.10889 4.37129 2.18228 4.27678 2.27678C4.18228 2.37129 4.10889 2.48477 4.06147 2.60973C4.01405 2.73469 3.99368 2.86829 4.0017 3.0017ZM8.0017 14.0017H6.0017V12.0017H8.0017V14.0017ZM8.0017 10.0017H6.0017L6.0017 8.0017H8.0017V10.0017ZM8.0017 6.0017L6.0017 6.0017V4.0017H8.0017V6.0017ZM12.0017 10.0017H10.0017V8.0017H12.0017V10.0017ZM12.0017 6.0017H10.0017V4.0017L12.0017 4.0017V6.0017Z' fill='%23333333'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-indoor-toggle .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.0017 3.0017L4.0017 15.0017L10.0017 15.0017V12.0017H12.0017V15.0017H14.0017L14.0017 3.0017C14.0097 2.86829 13.9894 2.73469 13.9419 2.60973C13.8945 2.48477 13.8211 2.37129 13.7266 2.27678C13.6321 2.18228 13.5186 2.10889 13.3937 2.06147C13.2687 2.01405 13.1351 1.99368 13.0017 2.0017L5.0017 2.0017C4.86829 1.99368 4.73469 2.01405 4.60973 2.06147C4.48477 2.10889 4.37129 2.18228 4.27678 2.27678C4.18228 2.37129 4.10889 2.48477 4.06147 2.60973C4.01405 2.73469 3.99368 2.86829 4.0017 3.0017ZM8.0017 14.0017H6.0017V12.0017H8.0017V14.0017ZM8.0017 10.0017H6.0017L6.0017 8.0017H8.0017V10.0017ZM8.0017 6.0017L6.0017 6.0017V4.0017H8.0017V6.0017ZM12.0017 10.0017H10.0017V8.0017H12.0017V10.0017ZM12.0017 6.0017H10.0017V4.0017L12.0017 4.0017V6.0017Z' fill='%23333333'/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23aaa'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='%23f00'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon{animation:mapboxgl-spin 2s linear infinite}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23999'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='%23f00'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23666'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='%23f00'/%3E%3C/svg%3E")}}@keyframes mapboxgl-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}a.mapboxgl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd' viewBox='0 0 88 23'%3E%3Cdefs%3E%3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='clip'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/mask%3E%3Cg id='outline' opacity='0.3' stroke='%23000' stroke-width='3'%3E%3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E%3C/g%3E%3Cg id='fill' opacity='0.9' fill='%23fff'%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;cursor:pointer;display:block;height:23px;margin:0 0 -4px -4px;overflow:hidden;width:88px}a.mapboxgl-ctrl-logo.mapboxgl-compact{width:23px}@media (-ms-high-contrast:active){a.mapboxgl-ctrl-logo{background-color:initial;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd' viewBox='0 0 88 23'%3E%3Cdefs%3E%3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='clip'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/mask%3E%3Cg id='outline' opacity='1' stroke='%23000' stroke-width='3'%3E%3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E%3C/g%3E%3Cg id='fill' opacity='1' fill='%23fff'%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/g%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){a.mapboxgl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd' viewBox='0 0 88 23'%3E%3Cdefs%3E%3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='clip'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/mask%3E%3Cg id='outline' opacity='1' stroke='%23fff' stroke-width='3' fill='%23fff'%3E%3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E%3C/g%3E%3Cg id='fill' opacity='1' fill='%23000'%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/g%3E%3C/svg%3E")}}.mapboxgl-ctrl.mapboxgl-ctrl-attrib{background-color:#ffffff80;margin:0;padding:0 5px}@media screen{.mapboxgl-ctrl-attrib.mapboxgl-compact{background-color:#fff;border-radius:12px;box-sizing:initial;margin:10px;min-height:20px;padding:2px 24px 2px 0;position:relative}.mapboxgl-ctrl-attrib.mapboxgl-compact-show{padding:2px 28px 2px 8px;visibility:visible}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show,.mapboxgl-ctrl-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show,.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show{border-radius:12px;padding:2px 8px 2px 28px}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner{display:none}.mapboxgl-ctrl-attrib-button{background-color:#ffffff80;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");border:0;border-radius:12px;box-sizing:border-box;cursor:pointer;display:none;height:24px;outline:none;position:absolute;right:0;top:0;width:24px}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-left .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib-button{left:0}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner{display:block}.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button{background-color:#0000000d}.mapboxgl-ctrl-bottom-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;right:0}.mapboxgl-ctrl-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{right:0}.mapboxgl-ctrl-top-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{right:0;top:0}.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{left:0;top:0}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;left:0}.mapboxgl-ctrl-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{left:0}}@media screen and (-ms-high-contrast:active){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' fill='%23fff'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")}}@media screen and (-ms-high-contrast:black-on-white){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")}}.mapboxgl-ctrl-attrib a{color:#000000bf;text-decoration:none}.mapboxgl-ctrl-attrib a:hover{color:inherit;text-decoration:underline}.mapboxgl-ctrl-attrib .mapbox-improve-map{font-weight:700;margin-left:2px}.mapboxgl-attrib-empty{display:none}.mapboxgl-ctrl-scale{background-color:#ffffffbf;border:2px solid #333;border-top:#333;box-sizing:border-box;color:#333;font-size:10px;padding:0 5px;white-space:nowrap}.mapboxgl-popup{display:flex;left:0;pointer-events:none;position:absolute;top:0;will-change:transform}.mapboxgl-popup-anchor-top,.mapboxgl-popup-anchor-top-left,.mapboxgl-popup-anchor-top-right{flex-direction:column}.mapboxgl-popup-anchor-bottom,.mapboxgl-popup-anchor-bottom-left,.mapboxgl-popup-anchor-bottom-right{flex-direction:column-reverse}.mapboxgl-popup-anchor-left{flex-direction:row}.mapboxgl-popup-anchor-right{flex-direction:row-reverse}.mapboxgl-popup-tip{border:10px solid #0000;height:0;width:0;z-index:1}.mapboxgl-popup-anchor-top .mapboxgl-popup-tip{align-self:center;border-bottom-color:#fff;border-top:none}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{align-self:flex-start;border-bottom-color:#fff;border-left:none;border-top:none}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{align-self:flex-end;border-bottom-color:#fff;border-right:none;border-top:none}.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{align-self:center;border-bottom:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip{align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip{align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff}.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{align-self:center;border-left:none;border-right-color:#fff}.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{align-self:center;border-left-color:#fff;border-right:none}.mapboxgl-popup-close-button{background-color:initial;border:0;border-radius:0 3px 0 0;cursor:pointer;position:absolute;right:0;top:0}.mapboxgl-popup-close-button:hover{background-color:#eee}.mapboxgl-popup-content{background:#fff;border-radius:3px;box-shadow:0 1px 2px #0000001a;padding:10px 10px 15px;pointer-events:auto;position:relative}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content{border-top-left-radius:0}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content{border-top-right-radius:0}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content{border-bottom-left-radius:0}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content{border-bottom-right-radius:0}.mapboxgl-popup-track-pointer{display:none}.mapboxgl-popup-track-pointer *{pointer-events:none;user-select:none}.mapboxgl-map:hover .mapboxgl-popup-track-pointer{display:flex}.mapboxgl-map:active .mapboxgl-popup-track-pointer{display:none}.mapboxgl-marker{left:0;opacity:1;position:absolute;top:0;transition:opacity .2s;will-change:transform}.mapboxgl-user-location-dot,.mapboxgl-user-location-dot:before{background-color:#1da1f2;border-radius:50%;height:15px;width:15px}.mapboxgl-user-location-dot:before{animation:mapboxgl-user-location-dot-pulse 2s infinite;content:"";position:absolute}.mapboxgl-user-location-dot:after{border:2px solid #fff;border-radius:50%;box-shadow:0 0 3px #00000059;box-sizing:border-box;content:"";height:19px;left:-2px;position:absolute;top:-2px;width:19px}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading{height:0;width:0}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after,.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{border-bottom:7.5px solid #4aa1eb;content:"";position:absolute}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{border-left:7.5px solid #0000;transform:translateY(-28px) skewY(-20deg)}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after{border-right:7.5px solid #0000;transform:translate(7.5px,-28px) skewY(20deg)}@keyframes mapboxgl-user-location-dot-pulse{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(3)}to{opacity:0;transform:scale(1)}}.mapboxgl-user-location-dot-stale{background-color:#aaa}.mapboxgl-user-location-dot-stale:after{display:none}.mapboxgl-user-location-accuracy-circle{background-color:#1da1f233;border-radius:100%;height:1px;width:1px}.mapboxgl-crosshair,.mapboxgl-crosshair .mapboxgl-interactive,.mapboxgl-crosshair .mapboxgl-interactive:active{cursor:crosshair}.mapboxgl-boxzoom{background:#fff;border:2px dotted #202020;height:0;left:0;opacity:.5;position:absolute;top:0;width:0}@media print{.mapbox-improve-map{display:none}}.mapboxgl-scroll-zoom-blocker,.mapboxgl-touch-pan-blocker{align-items:center;background:#000000b3;color:#fff;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;height:100%;justify-content:center;left:0;opacity:0;pointer-events:none;position:absolute;text-align:center;top:0;transition:opacity .75s ease-in-out;transition-delay:1s;width:100%}.mapboxgl-scroll-zoom-blocker-show,.mapboxgl-touch-pan-blocker-show{opacity:1;transition:opacity .1s ease-in-out}.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page,.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page .mapboxgl-canvas{touch-action:pan-x pan-y}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button{font-size:16px;font-weight:700;text-align:center}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button-selected{background-color:#ccc;color:#000}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button-selected:hover{background-color:#ccc}