/**
 * Modal — модальное окно (overlay + панель)
 * Референс: docs/design/screenshots/1
 * Варианты: снизу (mobile), по центру (desktop)
 * Только токены из tokens.css
 */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--Product-Theme-Light-bg-overlay-primary);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.modal-overlay--active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--Product-Theme-Light-bg-basic);
  border-radius: var(--Radius-Value-large-container) var(--Radius-Value-large-container) 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.modal-overlay--active .modal,
.modal-overlay.active .modal {
  transform: translateY(0);
}

.modal__header {
  padding: var(--Spacing-Value-spacing-20) var(--Spacing-Value-spacing-20) var(--Spacing-Value-spacing-10);
  font-size: var(--Text-Styles-Value-font-size-20);
  font-weight: 700;
  line-height: var(--Text-Styles-Value-line-height-24);
  color: var(--Product-Theme-Light-text-basic-primary);
  font-family: var(--Text-Styles-Value-font-family-master), sans-serif;
}

.modal__content {
  padding: var(--Spacing-Value-spacing-20);
}


.modal-content {
  padding: var(--Spacing-Value-spacing-20);
  min-width: 0;
}
.modal-content--time-options {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Value-spacing-10);
}
.modal-content--time-options .menu-item { width: 100%; }
/* Time picker modal — flow 1.3 */
.modal-content--time-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--Spacing-Value-spacing-20);
}
.modal-content--time-picker .time-picker__actions {
  align-self: stretch;
}
.time-picker__actions {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Value-spacing-10);
}
.time-picker__actions .btn {
  width: 100%;
  height: var(--Components-Value-button-xxl-height);
}

/* Настройки — ограниченное модальное окно */
.modal--settings {
  padding: var(--Spacing-Value-spacing-20);
  min-width: 0;
}
.modal--settings .settings-menu {
  display: flex;
  flex-direction: column;
}
.settings-menu__theme-wrap {
  padding: var(--Spacing-Value-spacing-12) var(--Spacing-Value-spacing-16);
  margin-bottom: var(--Spacing-Value-spacing-8);
}
.settings-menu__theme-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Spacing-Value-spacing-8);
}
.settings-menu__theme-options .settings-theme-btn {
  min-width: 100px;
}
.settings-menu__map-wrap {
  padding: var(--Spacing-Value-spacing-12) var(--Spacing-Value-spacing-16);
  margin-bottom: var(--Spacing-Value-spacing-8);
}
.settings-menu__lang-wrap {
  padding: var(--Spacing-Value-spacing-12) var(--Spacing-Value-spacing-16);
  margin-bottom: var(--Spacing-Value-spacing-8);
}
.settings-menu__lang-label {
  display: block;
  font-size: var(--Text-Styles-Value-font-size-14);
  color: var(--Product-Theme-Light-text-basic-secondary);
  margin-bottom: var(--Spacing-Value-spacing-8);
}
.settings-menu__lang-options {
  display: flex;
  gap: var(--Spacing-Value-spacing-8);
}
.settings-menu__lang-options .settings-lang-btn {
  min-width: 100px;
}

.settings-menu__notifications {
  padding: var(--Spacing-Value-spacing-12) var(--Spacing-Value-spacing-16);
  margin-bottom: var(--Spacing-Value-spacing-8);
}
.settings-menu__section-label {
  display: block;
  font-size: var(--Text-Styles-Value-font-size-14);
  color: var(--Product-Theme-Light-text-basic-secondary);
  margin-bottom: var(--Spacing-Value-spacing-8);
}
.settings-menu__toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Spacing-Value-spacing-12);
  padding: var(--Spacing-Value-spacing-8) 0;
  min-height: 44px;
}
.settings-menu__toggle-row .menu-item__text-primary {
  flex: 1;
  font-size: var(--Text-Styles-Value-font-size-16);
}

/* Размер шрифта — ограниченное модальное окно со слайдером (как в html/test/scale) */
.modal--font-size {
  padding: var(--Spacing-Value-spacing-20);
  min-width: 0;
}
.font-size-hint {
  font-size: var(--Text-Styles-Value-font-size-14);
  color: var(--Product-Theme-Light-text-basic-secondary);
  margin-bottom: var(--Spacing-Value-spacing-12);
}
.font-size-slider-value {
  font-size: var(--Text-Styles-Value-font-size-18);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--Spacing-Value-spacing-16);
  color: var(--Product-Theme-Light-text-basic-primary);
}
/* Высота 40px, трек 24px → по 8px сверху/снизу; те же 8px слева/справа через left/right у детей */
.font-size-slider-wrapper {
  --font-size-slider-inset-left: 16;
  --font-size-slider-inset-right: 16;
  --font-size-slider-progress-extra-left: 4;
  --font-size-slider-progress-extra-right: 4;
  --font-size-slider-thumb: 16;
  position: relative;
  height: 40px;
  margin: 0 0 var(--Spacing-Value-spacing-20);
}
/* Трек: отступы по переменным + по 8px с каждой стороны (шире на 16px) */
.font-size-slider-track {
  position: absolute;
  top: 50%;
  left: calc(var(--font-size-slider-inset-left) * 1px - 4px);
  right: calc(var(--font-size-slider-inset-right) * 1px - 4px);
  height: 24px;
  background: var(--Product-Theme-Light-border-basic-secondary, rgba(0, 0, 0, 0.12));
  border-radius: 12px;
  transform: translateY(-50%);
  z-index: 1;
}
.font-size-slider-progress {
  position: absolute;
  top: 50%;
  left: calc(var(--font-size-slider-inset-left) * 1px - var(--font-size-slider-progress-extra-left, 0) * 1px);
  height: 24px;
  background: var(--Product-Theme-Light-controls-accent-initial);
  border-radius: 12px;
  transform: translateY(-50%);
  z-index: 2;
  width: 0;
  min-width: calc(var(--font-size-slider-thumb, 16) * 1px + var(--font-size-slider-progress-extra-left, 0) * 1px + var(--font-size-slider-progress-extra-right, 4) * 1px);
}
.font-size-slider-input {
  position: absolute;
  top: 0;
  left: calc(var(--font-size-slider-inset-left) * 1px);
  right: calc(var(--font-size-slider-inset-right) * 1px);
  width: auto;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  z-index: 3;
}
.font-size-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: calc(var(--font-size-slider-thumb, 16) * 1px);
  height: calc(var(--font-size-slider-thumb, 16) * 1px);
  border-radius: 50%;
  background: var(--Product-Theme-Light-bg-basic);
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}
.font-size-slider-input::-moz-range-thumb {
  width: calc(var(--font-size-slider-thumb, 16) * 1px);
  height: calc(var(--font-size-slider-thumb, 16) * 1px);
  border-radius: 50%;
  background: var(--Product-Theme-Light-bg-basic);
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}
/* Тики: left/right от переменных отступов; внутренний отступ 4px для выравнивания с ползунком */
.font-size-slider-ticks {
  position: absolute;
  top: 50%;
  left: calc(var(--font-size-slider-inset-left) * 1px);
  right: calc(var(--font-size-slider-inset-right) * 1px);
  width: auto;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
  z-index: 2;
  pointer-events: none;
}
.font-size-slider-tick {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--Product-Theme-Light-text-basic-secondary);
  opacity: 0.6;
  flex-shrink: 0;
}
.font-size-slider-tick.font-size-slider-tick--on-fill {
  background: var(--Product-Theme-Light-bg-basic);
  opacity: 1;
}
.font-size-slider-tick.font-size-slider-tick--active {
  opacity: 1;
  background: var(--Product-Theme-Light-bg-basic);
}
.font-size-preview {
  background: var(--Product-Theme-Light-bg-basic-secondary, rgba(0, 0, 0, 0.04));
  padding: var(--Spacing-Value-spacing-16);
  border-radius: var(--Radius-Value-small-container);
  margin-bottom: var(--Spacing-Value-spacing-20);
}
.font-size-preview__title {
  font-size: var(--Text-Styles-Value-font-size-18);
  font-weight: 600;
  margin: 0 0 var(--Spacing-Value-spacing-8);
  color: var(--Product-Theme-Light-text-basic-primary);
}
.font-size-preview__text {
  font-size: var(--Text-Styles-Value-font-size-16);
  line-height: 1.5;
  margin: 0;
  color: var(--Product-Theme-Light-text-basic-secondary);
}
.font-size-save {
  width: 100%;
  height: var(--Components-Value-button-xxl-height);
}

/* Стилизация скроллбара в модальных окнах */
.modal::-webkit-scrollbar,
.modal--full-height::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
  width: 6px;
}
.modal::-webkit-scrollbar-track,
.modal--full-height::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track {
  background: transparent;
}
.modal::-webkit-scrollbar-thumb,
.modal--full-height::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
  background: var(--Product-Theme-Light-vector-basic-disabled, rgba(0, 0, 0, 0.2));
  border-radius: 3px;
}
.modal::-webkit-scrollbar-thumb:hover,
.modal--full-height::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--Product-Theme-Light-vector-basic-secondary, rgba(0, 0, 0, 0.35));
}
.modal,
.modal--full-height,
.modal-content {
  scrollbar-width: thin;
  scrollbar-color: var(--Product-Theme-Light-vector-basic-disabled, rgba(0, 0, 0, 0.2)) transparent;
}

.modal__close {
  position: absolute;
  top: var(--Spacing-Value-spacing-20);
  right: var(--Spacing-Value-spacing-20);
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  font-size: 24px;
  color: var(--Product-Theme-Light-text-basic-secondary);
  cursor: pointer;
  z-index: 3001;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.modal__close:hover {
  color: var(--Product-Theme-Light-text-basic-primary);
}

@media (min-width: 768px) {
  .modal {
    border-radius: var(--Radius-Value-large-container);
    max-height: 80vh;
    margin: var(--Spacing-Value-spacing-20);
  }
}

/* modal-block без --full-height: высота по контенту, анимация всего блока (header + modal) */
.modal-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
}

.modal-block:not(.modal-block--full-height) {
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.modal-overlay--active .modal-block:not(.modal-block--full-height),
.modal-overlay.active .modal-block:not(.modal-block--full-height) {
  transform: translateY(0);
}

.modal-block:not(.modal-block--full-height) .modal {
  transform: none;
}

@media (min-width: 768px) {
  .modal-block:not(.modal-block--full-height),
  .modal-block--full-height {
    margin-left: auto;
    margin-right: auto;
  }
  /* Внутри modal-block .modal не получает внешний margin — блок уже центрирован, контент в одну линию с header */
  .modal-block .modal {
    margin: 0;
  }
}

/* Окно «Куда приехать?» — header--close над modal: прозрачный фон, скрыты Назад и заголовок (видная только кнопка Закрыть) */
.modal-block .address-modal-header {
  flex-shrink: 0;
  min-height: 72px;
  background: transparent;
  border-bottom: none;
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
}

.modal-block .address-modal-header .header__left,
.modal-block .address-modal-header .header__center {
  display: none;
}

.modal-block .address-modal-header .header__right {
  margin-left: auto;
}

/* Окно «Куда приехать?» — заголовок внутри модалки выровнять по левому краю */
#address-modal-overlay .modal .header--texts .header__center {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}

/* Окно «Давайте уточним адрес» — тот же стандарт: header--close сверху (только Закрыть), header--texts внутри */
.modal-block .clarify-address-header {
  flex-shrink: 0;
  min-height: 72px;
  background: transparent;
  border-bottom: none;
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
}

.modal-block .clarify-address-header .header__left,
.modal-block .clarify-address-header .header__center {
  display: none;
}

.modal-block .clarify-address-header .header__right {
  margin-left: auto;
}

#clarify-address-overlay .modal .header--texts .header__center {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}

/* Модальное окно на всю высоту (Куда приехать?, услуги, поиск и т.д.) */
/* flex-start + 100dvh: header close всегда виден на Android (иначе уезжает вверх) */
/* Оверлей — только opacity/visibility (без движения). Контент (modal-block) выезжает снизу. */
.modal-overlay--full-height {
  align-items: flex-start;
  justify-content: flex-start;
  /* bottom: auto + height: 100dvh — используем dvh вместо layout viewport (не вылезает сверху на мобилке) */
  bottom: auto;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-block--full-height {
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.modal-overlay--full-height.modal-overlay--active .modal-block--full-height,
.modal-overlay--full-height.active .modal-block--full-height {
  transform: translateY(0);
}

/* Модальное окно авторизации — поверх всех, на весь экран */
.modal-overlay--auth {
  z-index: 5000;
}
.modal-block--full-height {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  width: 100%;
  max-width: 500px;
  /* Высота ровно по оверлею, не вылезает за экран */
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  /* Центрирование по горизонтали на всех разрешениях */
  margin-left: auto;
  margin-right: auto;
}
.modal-block--full-height .header--close,
.modal-block--full-height .modal--full-height {
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
}
/* position: fixed — header всегда виден на Android (поиск, услуги и т.д.) */
.modal-overlay--full-height.modal-overlay--active .modal-block--full-height .header--close,
.modal-overlay--full-height.active .modal-block--full-height .header--close {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 500px;
  z-index: 11;
  background: transparent;
}
.modal-overlay--full-height.modal-overlay--active .modal-block--full-height:has(.header--close),
.modal-overlay--full-height.active .modal-block--full-height:has(.header--close) {
  padding-top: 72px;
}
.modal-block--full-height .header--close {
  min-height: 72px;
  flex-shrink: 0;
  border-bottom: none;
}
.modal-block--full-height .modal--full-height {
  flex: 1;
  min-height: 0;
  /* Мобильный Chrome: dvh = видимая область (с учётом адресной строки) */
  max-height: calc(100dvh - 72px);
  max-height: calc(100vh - 72px);
  border-radius: var(--Radius-Value-large-container) var(--Radius-Value-large-container) 0 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.modal-block--full-height .modal-content {
  flex: 1;
  min-height: 0;
}
.modal-block--full-height .service-page {
  flex: 1;
  min-height: 0;
}
/* Профиль: profile-page вместо modal--full-height, тот же flex-расклад */
.modal-block--full-height .profile-page {
  flex: 1;
  min-height: 0;
  max-height: calc(100dvh - 72px);
  max-height: calc(100vh - 72px);
}
@media (min-width: 768px) {
  .modal-block--full-height {
    margin: 0 auto;
  }
  .modal-block--full-height .modal--full-height {
    border-radius: var(--Radius-Value-large-container);
    margin: 0;
  }
}

/* Level info modal — header на прозрачном фоне */
.modal--level-info {
  display: flex;
  flex-direction: column;
  background: transparent;
}

.modal--level-info .header--transparent {
  background: transparent;
  flex-shrink: 0;
}

.modal--level-info .modal-content {
  background: var(--Product-Theme-Light-bg-basic);
  border-radius: var(--Radius-Value-large-container) var(--Radius-Value-large-container) 0 0;
}

/* Галерея / Замечание / Камера — header с белым фоном (переопределяет transparent из .header--close) */
.modal-overlay--full-height.modal-overlay--active .modal-block--full-height .header.gallery-header,
.modal-overlay--full-height.active .modal-block--full-height .header.gallery-header {
  background: var(--Product-Theme-Light-bg-basic);
}

/* Замечание и Камера — непрозрачный фон всего окна */
#remark-overlay .modal-block--full-height,
#camera-overlay .modal-block--full-height {
  background: var(--Product-Theme-Light-bg-basic);
}

/* Модальное окно «Замечание» — контент */
.remark-modal-content {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.remark-photo-zone {
  align-self: stretch;
  height: 304px;
  min-height: 304px;
  padding: var(--Spacing-Value-spacing-16) var(--Spacing-Value-spacing-24);
  background: var(--Product-Theme-Light-bg-secondary-initial);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--Spacing-Value-spacing-10);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.remark-photo-zone-inner {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 11px;
}

.remark-photo-zone-inner::before {
  display: none;
  content: none;
}

.remark-photo-zone-text {
  align-self: stretch;
  text-align: center;
  color: var(--Product-Theme-Light-text-basic-primary);
  font-size: var(--Text-Styles-Value-font-size-14);
  font-weight: 400;
  line-height: 14px;
  font-family: var(--Text-Styles-Value-font-family-master), sans-serif;
  margin: 0;
}

.remark-photo-zone.has-photo .remark-photo-zone-inner {
  width: 100%;
  height: 100%;
  min-height: 200px;
}

.remark-photo-zone.has-photo .remark-photo-zone-inner .icon-button,
.remark-photo-zone.has-photo .remark-photo-zone-inner .remark-photo-zone-text {
  display: none;
}

.remark-photo-preview-wrap {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: none;
}

.remark-photo-zone.has-photo .remark-photo-preview-wrap {
  display: block;
}

.remark-photo-zone .remark-photo-zone-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--Radius-Value-small-container);
}

.remark-photo-zone-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--Radius-Value-small-container);
}

/* Кнопка удалить — как у мастера (master-building-photo__delete), справа внизу */
.remark-photo-delete {
  position: absolute;
  right: var(--Spacing-Value-spacing-16, 16px);
  bottom: var(--Spacing-Value-spacing-16, 16px);
  width: 56px;
  height: 56px;
  border-radius: var(--Radius-Value-buttons-and-controls, 20px);
  background: var(--Product-Theme-Light-controls-destructive-initial);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.remark-photo-delete:hover {
  background: var(--Product-Theme-Light-controls-destructive-hover);
}

.remark-photo-delete-icon {
  width: 24px;
  height: 24px;
  background: var(--Product-Theme-Light-text-basic-primary-on-color, #fff);
  mask-image: url('/masterclick/assets/icons/fill/trash-fill.svg');
  -webkit-mask-image: url('/masterclick/assets/icons/fill/trash-fill.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 24px 24px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 24px 24px;
}

.remark-comment-wrap {
  flex: 1 1 0;
  padding: var(--Spacing-Value-spacing-16);
  min-height: 0;
}

.remark-comment {
  width: 100%;
  min-height: 120px;
  padding: var(--Spacing-Value-spacing-8) var(--Spacing-Value-spacing-12);
  background: var(--Product-Theme-Light-controls-inputs-active);
  border: 2px solid transparent;
  border-radius: var(--Radius-Value-small-container, 16px);
  color: var(--Product-Theme-Light-text-basic-primary);
  font-size: var(--Text-Styles-Value-font-size-16);
  font-family: var(--Text-Styles-Value-font-family-master), sans-serif;
  resize: vertical;
  box-sizing: border-box;
}

.remark-comment:focus {
  outline: none;
  border-color: var(--Product-Theme-Light-controls-inputs-active-border);
}

.remark-comment::placeholder {
  color: var(--Product-Theme-Light-text-basic-secondary);
}

/* Футер экрана замечания — Отмена / Отправить */
.remark-footer {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--Spacing-Value-spacing-10, 10px);
  padding: var(--Spacing-Value-spacing-8, 8px) var(--Spacing-Value-spacing-16, 16px) var(--Spacing-Value-spacing-16, 16px);
  background: var(--Product-Theme-Light-bg-basic);
  border-top-left-radius: var(--Radius-Value-buttons-and-controls, 20px);
  border-top-right-radius: var(--Radius-Value-buttons-and-controls, 20px);
}

.remark-footer .btn {
  flex: 1 1 0;
}

/* Оверлей камеры — контент как в html/test/camera */
.camera-modal-block .camera-content {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.camera-before-section {
  display: none;
  height: 30%;
  position: relative;
  overflow: hidden;
  background: var(--Product-Theme-Light-bg-secondary-initial);
  flex-shrink: 0;
}
.camera-before-section--visible {
  display: block;
}
.camera-before-section .camera-before-label {
  position: absolute;
  top: var(--Spacing-Value-spacing-10);
  left: var(--Spacing-Value-spacing-10);
  padding: var(--Spacing-Value-spacing-4) var(--Spacing-Value-spacing-8);
  background: var(--Product-Theme-Light-badge-gray-bg);
  border-radius: var(--Radius-Value-buttons-and-controls);
  font-size: var(--Text-Styles-Value-font-size-14);
  font-weight: 500;
  color: var(--Product-Theme-Light-text-basic-secondary);
  z-index: 2;
}
.camera-before-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.camera-section {
  flex: 1 1 0;
  position: relative;
  overflow: hidden;
  min-height: 0;
  background: var(--Product-Theme-Light-bg-secondary-initial, #1B1D20);
}

.camera-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--Product-Theme-Light-bg-secondary-initial, #1B1D20);
}

.camera-thumbnails-wrap {
  padding: var(--Spacing-Value-spacing-8) var(--Spacing-Value-spacing-16);
  background: var(--Product-Theme-Light-bg-basic);
  border-top: 1px solid var(--Product-Theme-Light-bg-secondary-initial);
  flex-shrink: 0;
  height: 18%;
}

.camera-thumbnails {
  display: flex;
  gap: var(--Spacing-Value-spacing-8);
  align-items: center;
  height: 100%;
}

.camera-thumbnail {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 3px solid var(--Product-Theme-Light-bg-basic);
  background: var(--Product-Theme-Light-bg-secondary-initial);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.camera-thumbnail.selected {
  border-color: var(--Product-Theme-Light-controls-accent-initial);
}

.camera-thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-thumbnail.add-thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--Product-Theme-Light-controls-accent-subdued-initial);
  color: var(--Product-Theme-Light-controls-switch-button-active-text);
  font-size: var(--Text-Styles-Value-font-size-20);
  font-weight: 700;
}

.camera-footer {
  padding: var(--Spacing-Value-spacing-16);
  background: var(--Product-Theme-Light-bg-basic);
  border-top-left-radius: var(--Radius-Value-buttons-and-controls);
  border-top-right-radius: var(--Radius-Value-buttons-and-controls);
  flex-shrink: 0;
}

.camera-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--Spacing-Value-spacing-24);
}

.camera-control-btn {
  width: 56px;
  height: 56px;
  border-radius: var(--Radius-Value-buttons-and-controls);
  border: none;
  background: var(--Product-Theme-Light-controls-accent-subdued-initial);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  color: var(--Product-Theme-Light-controls-switch-button-active-text);
}

.camera-control-btn:hover {
  background: var(--Product-Theme-Light-controls-accent-subdued-hover);
}

.camera-flash-icon,
.camera-flip-icon {
  width: 24px;
  height: 24px;
  background: currentColor;
}

.camera-flash-icon {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v11h3v9l7-12h-4l4-8z'/%3E%3C/svg%3E") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v11h3v9l7-12h-4l4-8z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.camera-flip-icon {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 3h4v4h-4zm2 14v-4h-4v4h4zM3 21h4v-4H3zm0-6h4v-4H3zm6-6h4V5H9zm0 6h4v-4H9z'/%3E%3C/svg%3E") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 3h4v4h-4zm2 14v-4h-4v4h4zM3 21h4v-4H3zm0-6h4v-4H3zm6-6h4V5H9zm0 6h4v-4H9z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.camera-shutter-btn {
  width: 58px;
  height: 58px;
  background: #DE3531;
  border: 2px solid var(--Product-Theme-Light-bg-basic);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 4px #1B1D20;
  transition: transform 0.1s;
}

.camera-shutter-btn:active {
  transform: scale(0.95);
}