/*
 * Shared Build App UI components.
 * Visual references: /orders/ and /objects/1/ext/.
 * Do not add module-specific alternatives to these primitives.
 */

:root {
  --f7-preloader-color: var(--app-brand-primary);
  --f7-preloader-size: var(--app-loader-size);
  --f7-input-height: var(--app-input-height);
  --f7-input-outline-border-radius: var(--app-input-radius);
  --f7-input-text-color: var(--app-text-primary);
  --f7-input-placeholder-color: var(--app-text-secondary);
  --f7-input-outline-border-color: var(--app-border);
  --f7-input-outline-focused-border-color: var(--app-brand-primary);
  --f7-input-error-text-color: var(--app-color-error);
  --f7-list-item-border-color: var(--app-border);
  --f7-checkbox-active-color: var(--app-brand-primary);
  --f7-checkbox-inactive-color: var(--app-text-secondary);
  --f7-radio-active-color: var(--app-brand-primary);
  --f7-radio-inactive-color: var(--app-text-secondary);
  --f7-toggle-active-bg-color: var(--app-brand-primary);
  --f7-toggle-active-border-color: var(--app-brand-primary);
  --f7-toggle-inactive-bg-color: var(--app-surface-muted);
  --f7-toggle-inactive-border-color: var(--app-border);
  --f7-toggle-inactive-knob-bg-color: var(--app-text-secondary);
  --f7-toggle-active-knob-bg-color: var(--app-on-brand);
  --f7-dialog-border-radius: var(--app-card-radius);
  --f7-dialog-bg-color: rgba(var(--app-surface-rgb), .98);
  --f7-dialog-bg-color-rgb: var(--app-surface-rgb);
  --f7-dialog-text-color: var(--app-text-secondary);
  --f7-dialog-title-text-color: var(--app-text-primary);
  --f7-dialog-button-text-color: var(--app-brand-primary);
  --f7-dialog-button-strong-text-color: var(--app-brand-primary);
  --f7-dialog-input-height: var(--app-input-height);
  --f7-dialog-input-border-radius: var(--app-input-radius);
  --f7-dialog-input-border-color: var(--app-border);
  --f7-dialog-input-bg-color: var(--app-surface-muted);
  --f7-dialog-input-placeholder-color: var(--app-text-secondary);
  --f7-sheet-border-radius: var(--app-radius-lg);
  --f7-sheet-bg-color: var(--app-surface);
  --f7-sheet-border-color: var(--app-border);
  --f7-popup-tablet-border-radius: var(--app-radius-lg);
}

.is-hidden {
  display: none !important;
}

/* Shared staged confirmation/signing flow used by handover documents and surveys. */
.app-sign-flow-progress {
  display: grid;
  grid-template-columns: repeat(var(--app-sign-flow-steps, 3), minmax(0, 1fr));
  gap: var(--app-space-xs);
  margin: var(--app-space-md) 0;
}

.app-sign-flow-indicator {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--app-space-xs);
  color: var(--app-text-secondary);
  text-align: center;
}

.app-sign-flow-indicator:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  top: 14px;
  left: calc(50% + 18px);
  width: calc(100% - 30px);
  height: 2px;
  background: var(--app-border);
  content: "";
}

.app-sign-flow-indicator span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 2px solid var(--app-border-strong);
  border-radius: 50%;
  background: var(--app-surface);
  color: inherit;
  font-size: 11px;
  font-weight: 800;
}

.app-sign-flow-indicator small {
  max-width: 100%;
  overflow: hidden;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.app-sign-flow-indicator.is-active {
  color: var(--app-brand-primary);
}

.app-sign-flow-indicator.is-active span {
  border-color: var(--app-brand-primary);
  background: var(--app-brand-primary);
  color: var(--app-on-brand);
  box-shadow: var(--app-shadow-card);
}

.app-sign-flow-indicator.is-complete {
  color: var(--app-color-success);
}

.app-sign-flow-indicator.is-complete span {
  border-color: var(--app-color-success);
  background: var(--app-color-success-soft);
  color: var(--app-color-success);
}

.app-sign-flow-indicator.is-complete::after {
  background: var(--app-color-success);
}

.app-sign-flow-step {
  display: none;
}

.app-sign-flow-step.is-active {
  display: block;
  animation: app-sign-flow-step-in .2s ease;
}

.app-sign-flow-step > h3 {
  margin: 0;
  color: var(--app-text-primary);
  font-size: 17px;
}

.app-sign-flow-description {
  margin: var(--app-space-xs) 0 var(--app-space-md);
  color: var(--app-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.app-sign-flow-otp {
  display: none;
  margin-top: var(--app-space-md);
  padding: var(--app-space-md);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  background: var(--app-surface-muted);
}

.app-sign-flow-otp.is-visible {
  display: block;
  animation: app-sign-flow-step-in .2s ease;
}

.app-sign-flow-status {
  min-height: 18px;
  margin-top: var(--app-space-xs);
  color: var(--app-color-success);
  font-size: 11px;
  line-height: 1.4;
}

.app-sign-flow-actions {
  display: grid;
  grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr);
  gap: var(--app-space-sm);
  margin-top: var(--app-space-lg);
}

.app-sign-flow-actions .button {
  margin: 0;
}

.app-sign-flow-success {
  padding: var(--app-space-lg) var(--app-space-xs) var(--app-space-sm);
  text-align: center;
}

.app-sign-flow-success-icon {
  display: grid;
  width: 78px;
  height: 78px;
  margin: 0 auto var(--app-space-lg);
  place-items: center;
  border-radius: 50%;
  background: var(--app-color-success-soft);
  color: var(--app-color-success);
  box-shadow: var(--app-shadow-card);
}

.app-sign-flow-success-icon .icon {
  font-size: 43px;
  font-weight: 800;
}

.app-sign-flow-success h2 {
  margin: 0;
  color: var(--app-color-success);
  font-size: 22px;
}

.app-sign-flow-success p {
  max-width: 330px;
  margin: var(--app-space-sm) auto var(--app-space-lg);
  color: var(--app-text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

@keyframes app-sign-flow-step-in {
  from { transform: translateX(8px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 360px) {
  .app-sign-flow-progress {
    gap: 2px;
  }

  .app-sign-flow-indicator small {
    font-size: 8px;
  }

  .app-sign-flow-actions {
    grid-template-columns: 90px minmax(0, 1fr);
  }
}

.preloader {
  color: var(--f7-preloader-color);
}

.app-content-loader .preloader {
  flex: 0 0 var(--app-loader-size);
}

.app-ui-surface {
  box-sizing: border-box;
  border-radius: var(--app-card-radius);
  background: var(--app-surface);
  color: var(--app-text-primary);
  box-shadow: var(--app-shadow-card);
}

.app-order-comment-surface {
  border: 1px solid var(--app-border-strong);
}

.app-order-comment-surface.is-empty {
  flex-direction: column;
  text-align: center;
}

.app-order-comment-icon {
  margin-right: 0;
  color: var(--app-text-secondary);
}

.app-state-host {
  width: 100%;
}

.app-list-safe-bottom {
  padding-bottom: calc(90px + var(--app-safe-area-bottom));
}

.app-list-safe-bottom--spaced {
  padding-top: 10px;
}

/* Keep legacy fixed actions above Android/iOS system navigation, like the main toolbar. */
.app-fixed-bottom-bar {
  bottom: calc(10px + var(--app-safe-area-bottom));
}

.app-fixed-bottom-bar-full,
.app-static-bottom-btn,
#app-main-profile-img-btn-box,
#app-apartment-buy-box {
  box-sizing: border-box;
  padding-bottom: var(--app-safe-area-bottom);
}

.objects-filter-actions {
  bottom: calc(10px + var(--app-safe-area-bottom));
}

.app-project-apt-bottom-bar {
  padding-bottom: calc(10px + var(--app-safe-area-bottom));
}

.app-buy-project-bottom {
  padding-bottom: calc(17px + var(--app-safe-area-bottom));
}

.profile-signature-editor.is-active {
  display: flex;
}

.app-transient-control {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-invisible {
  visibility: hidden;
}

.app-module-disabled {
  opacity: .5;
}

.app-media-height-fill {
  width: auto;
  height: 100%;
}

.app-dynamic-progress,
.app-stories-viewer__progress-fill.app-dynamic-progress,
.survey-detail-answer-progress-track .app-dynamic-progress {
  width: var(--app-progress, 0%);
}

.app-form-control,
.service-content input.app-form-control,
.service-content textarea.app-form-control,
.service-content select.app-form-control {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--app-input-height);
  padding: 0 var(--app-input-padding-x);
  border: 1px solid var(--app-border);
  border-radius: var(--app-input-radius);
  outline: 0;
  background: var(--app-surface);
  color: var(--app-text-primary);
  font: inherit;
  font-size: 16px;
}

textarea.app-form-control {
  min-height: 112px;
  padding-top: var(--app-space-12);
  padding-bottom: var(--app-space-12);
  resize: vertical;
}

.app-form-control::placeholder {
  color: var(--app-text-secondary);
  opacity: 1;
}

.app-form-control:focus {
  border-color: var(--app-brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--app-brand-primary-rgb), .12);
}

.app-form-control[aria-invalid="true"],
.app-form-control.is-invalid {
  border-color: var(--app-color-error);
}

.app-form-control:disabled,
.app-form-control[readonly] {
  background: var(--app-surface-muted);
  color: var(--app-text-secondary);
  opacity: .72;
}

.dialog-button {
  font-weight: 600;
  text-transform: none;
}

.dialog-button.color-red,
.dialog-button.text-color-red {
  color: var(--app-color-error);
}

.sheet-modal .page-content,
.popup .page-content {
  color: var(--app-text-primary);
}

.app-state {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: var(--app-state-min-height);
  padding: var(--app-state-padding);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--app-text-primary);
  text-align: center;
}

.app-state--surface {
  border-radius: var(--app-card-radius);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-card);
}

.app-state--compact {
  min-height: 120px;
  padding: var(--app-space-lg) var(--app-space-md);
}

.app-state__media {
  display: block;
  width: var(--app-state-media-size);
  height: var(--app-state-media-size);
  margin: 0 auto var(--app-space-md);
  object-fit: contain;
}

.app-state__icon {
  display: flex;
  width: var(--app-state-icon-size);
  height: var(--app-state-icon-size);
  margin: 0 auto var(--app-space-md);
  align-items: center;
  justify-content: center;
  border-radius: var(--app-radius-lg);
  background: var(--app-color-info-soft);
  color: var(--app-color-info);
}

.app-state__icon .f7-icons {
  font-size: 28px;
}

.app-state--error .app-state__icon {
  background: var(--app-color-error-soft);
  color: var(--app-color-error);
}

.app-state--offline .app-state__icon,
.app-state--warning .app-state__icon {
  background: var(--app-color-warning-soft);
  color: var(--app-color-warning);
}

.app-state--success .app-state__icon {
  background: var(--app-color-success-soft);
  color: var(--app-color-success);
}

.app-state__title {
  margin: 0;
  color: var(--app-text-primary);
  font-size: var(--app-font-size-title-sm);
  font-weight: 600;
  line-height: 1.35;
}

.app-state__text {
  max-width: 340px;
  margin: var(--app-space-sm) auto 0;
  color: var(--app-text-secondary);
  font-size: var(--app-font-size-body);
  line-height: 1.5;
}

.app-state__action {
  min-width: 148px;
  margin-top: var(--app-space-md);
}

.app-content-loader {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: var(--app-loader-min-height);
  padding: var(--app-space-lg);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--app-space-12);
  color: var(--app-text-secondary);
  font-size: var(--app-font-size-body);
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

.app-content-loader--vertical {
  flex-direction: column;
}

.page-content > .app-content-loader,
.page-content > [id^="preloader-pdf"].app-content-loader {
  min-height: 100%;
}

/* PDF.js must retain a viewport while its first page renders below the loader. */
.page-content.app-pdf-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.app-pdf-stage > [id^="pdf-container"],
.app-pdf-stage > .app-content-loader {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
}

.app-pdf-stage > .app-content-loader {
  z-index: 1;
  background: var(--app-page-bg);
}

.survey-results-popup-loading {
  box-sizing: border-box;
  display: flex;
  min-height: var(--app-loader-min-height);
  padding: var(--app-space-lg);
  align-items: center;
  justify-content: center;
  color: var(--app-text-secondary);
}

.survey-overview-results-empty {
  margin: var(--app-space-md) 0;
  color: var(--app-text-secondary);
  font-size: var(--app-font-size-body);
  line-height: 1.5;
  text-align: center;
}

.survey-detail-signature-empty {
  box-sizing: border-box;
  display: flex;
  padding: var(--app-space-md);
  align-items: center;
  justify-content: space-between;
  gap: var(--app-space-md);
  border-radius: var(--app-radius-md);
  background: var(--app-surface-muted);
  color: var(--app-text-secondary);
}

.survey-detail-character-count {
  margin-top: var(--app-space-sm);
}

.app-survey-detail-page label.survey-detail-file {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  min-height: 64px;
  margin-bottom: 0;
  padding: var(--app-space-12);
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  gap: var(--app-space-12);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  background: var(--app-surface-muted);
  color: var(--app-text-primary);
}

.survey-detail-file__icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: var(--app-radius-md);
  background: var(--app-color-info-soft);
  color: var(--app-color-info);
}

.survey-detail-file__copy,
.survey-detail-file__copy strong {
  min-width: 0;
}

.survey-detail-file__copy strong {
  display: block;
  overflow: hidden;
  font-size: var(--app-font-size-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.survey-detail-file__action {
  color: var(--app-text-secondary);
  font-size: var(--app-font-size-title-sm);
}

.survey-detail-file.is-uploaded {
  border-color: var(--app-color-success);
}

.survey-detail-file.is-uploaded .survey-detail-file__icon {
  background: var(--app-color-success-soft);
  color: var(--app-color-success);
}

.survey-detail-file.is-error {
  border-color: var(--app-color-error);
}

.survey-detail-file.is-error .survey-detail-file__icon {
  background: var(--app-color-error-soft);
  color: var(--app-color-error);
}

.survey-file-status {
  margin-top: var(--app-space-sm);
  padding: 0 var(--app-space-12);
  color: var(--app-text-secondary);
}

.survey-file-status.is-success {
  color: var(--app-color-success);
}

.survey-file-status.is-error {
  color: var(--app-color-error);
}

.app-content-loader__label {
  font-size: var(--app-font-size-body);
  font-weight: 400;
  line-height: 1.4;
}

.app-sheet-auto-height {
  height: auto;
}

/* Keep swipe-sheet actions above Android gesture and three-button navigation. */
.sheet-modal[data-swipe-to-close="true"] > .sheet-modal-inner {
  box-sizing: border-box;
  padding-bottom: var(--app-safe-area-bottom);
}

.app-mt-8 {
  margin-top: var(--app-space-sm);
}

.survey-signature-preview-image {
  width: auto;
  max-width: 100%;
  height: 100px;
  object-fit: contain;
}

.app-button {
  box-sizing: border-box;
  min-height: var(--app-button-height);
  padding: 0 var(--app-button-padding-x);
  border: 0;
  border-radius: var(--app-button-radius);
  font-size: var(--app-font-size-button);
  font-weight: 600;
  line-height: 1.2;
}

.app-button--primary {
  background: var(--app-brand-primary);
  color: var(--app-on-brand);
}

.app-button--secondary {
  border: 1px solid var(--app-brand-primary);
  background: transparent;
  color: var(--app-brand-primary);
}

.app-button--tertiary {
  background: transparent;
  color: var(--app-brand-primary);
}

.app-sales-offices-page {
  padding-bottom: calc(20px + var(--app-safe-area-bottom));
}

.app-sales-offices-page > .block {
  margin: 8px 0;
  padding-left: 0;
  padding-right: 0;
}

.app-sales-offices-intro {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 8px 0;
  padding: 16px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-card);
}

.app-sales-offices-intro > i {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--app-radius-md);
  color: var(--f7-theme-color);
  background: var(--app-surface-muted);
  font-size: 24px;
}

.app-sales-offices-intro h2,
.app-sales-offices-intro p { margin: 0; }
.app-sales-offices-intro h2 { color: var(--app-text-primary); font-size: 18px; }
.app-sales-offices-intro p { margin-top: 4px; color: var(--app-text-secondary); line-height: 1.45; }
.app-sales-offices-intro span { display: inline-block; margin-top: 8px; color: var(--f7-theme-color); font-size: 13px; font-weight: 600; }

.app-sales-offices-company-contacts {
  margin: 8px 0;
}

.app-sales-company-contact-card {
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-card);
}

.app-sales-company-contact-card + .app-sales-company-contact-card { margin-top: 10px; }

.app-sales-company-contact-card__head {
  display: flex;
  padding: 14px 16px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--app-border);
}

.app-sales-company-contact-card__head h3 { margin: 0; color: var(--app-text-primary); font-size: 17px; }
.app-sales-company-contact-card__head p { margin: 2px 0 0; color: var(--app-text-secondary); font-size: 13px; }

.app-sales-company-contact-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 8px;
  gap: 8px;
}

.app-sales-company-contact-link {
  display: flex;
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  align-items: center;
  gap: 8px;
  border-radius: var(--app-radius-md);
  background: var(--app-surface-muted);
  color: var(--app-text-primary);
  font-size: 13px;
  text-decoration: none;
}

.app-sales-company-contact-link i { flex: 0 0 auto; color: var(--f7-theme-color); font-size: 20px; }
.app-sales-company-contact-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-sales-office-card {
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-card);
}

.app-sales-office-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 8px;
}

.app-sales-office-card__number {
  flex: 0 0 auto;
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--app-radius-sm);
  color: var(--f7-theme-color);
  background: var(--app-surface-muted);
  font-weight: 700;
}

.app-sales-office-card__header h3 { min-width: 0; margin: 0; color: var(--app-text-primary); font-size: 17px; line-height: 1.3; }

.app-sales-office-gallery {
  display: grid;
  grid-auto-columns: minmax(76%, 1fr);
  grid-auto-flow: column;
  gap: 8px;
  margin: 4px 0 8px;
  padding: 0 16px 4px;
  overflow-x: auto;
  scroll-padding-inline: 16px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.app-sales-office-gallery::-webkit-scrollbar { display: none; }

.app-sales-office-photo {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  background: var(--app-surface-muted);
  scroll-snap-align: start;
  cursor: pointer;
}

.app-sales-office-photo:focus-visible {
  outline: 3px solid rgba(var(--app-brand-primary-rgb), .2);
  outline-offset: 2px;
}

.app-sales-office-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.app-sales-office-card .comment-list { margin: 0; padding: 4px 16px; }
.app-sales-office-card .comment { align-items: flex-start; gap: 14px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--app-border); }
.app-sales-office-card .comment:last-child { border-bottom: 0; }
.app-sales-office-card .comment > i { flex: 0 0 26px; width: 26px; margin-top: 2px; text-align: center; color: var(--f7-theme-color); }
.app-sales-office-card .comment-header { color: var(--app-text-secondary); font-size: 12px; }
.app-sales-office-card .comment-text { color: var(--app-text-primary); }

.app-sales-office-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--app-border);
}

.app-sales-office-actions .button { width: 100%; margin: 0; }

.app-sales-office-map-block {
  box-sizing: border-box;
  width: calc(100% - 32px);
  margin: 4px 16px 16px;
}

.app-sales-office-map {
  width: 100%;
  height: clamp(210px, 34vh, 270px);
  margin: 0;
  border-radius: var(--app-radius-lg);
  box-shadow: none;
}

.app-sales-office-map-block .button {
  width: 100%;
  margin: 8px 0 0;
}

@media (max-width: 359px) {
  .app-sales-office-actions { grid-template-columns: 1fr; }
  .app-sales-company-contact-links { grid-template-columns: 1fr; }
}

.app-button--danger {
  background: var(--app-color-error);
  color: var(--app-on-brand);
}

.app-button--block {
  width: 100%;
}

.app-button--compact {
  min-height: var(--app-button-height-compact);
  padding: 0 var(--app-space-md);
}

.app-button--icon {
  width: var(--app-button-height);
  padding: 0;
}

.app-button:active {
  transform: scale(.985);
}

.app-button:focus-visible {
  outline: 3px solid rgba(var(--app-brand-primary-rgb), .2);
  outline-offset: 2px;
}

.app-button:disabled,
.app-button.is-disabled {
  opacity: .48;
  pointer-events: none;
}

.app-button.is-loading {
  position: relative;
  pointer-events: none;
}

/* Compact project card inside the /buy-project/ map balloon. */
.app-share-popup {
  width: min(268px, calc(100vw - (var(--app-space-md) * 4)));
  max-width: 100%;
  overflow: hidden;
  font-family: inherit;
}

.app-share-media {
  position: relative;
  height: 132px;
  overflow: hidden;
  background: var(--app-surface-muted);
}

.app-share-project-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-share-status {
  position: absolute;
  top: var(--app-space-sm);
  left: var(--app-space-sm);
  max-width: calc(100% - (var(--app-space-md)));
  padding: 5px 9px;
  overflow: hidden;
  border-radius: var(--app-navbar-avatar-radius);
  background: var(--app-status-bg, var(--app-text-secondary));
  color: var(--app-on-brand);
  font-size: var(--app-font-size-caption);
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-share-content {
  padding: var(--app-space-12);
}

.app-share-title {
  margin: 0 0 var(--app-space-sm);
  color: var(--app-text-primary);
  font-size: var(--app-font-size-title-sm);
  font-weight: 700;
  line-height: 1.25;
}

.app-share-line {
  display: flex;
  margin-top: 7px;
  align-items: flex-start;
  gap: var(--app-space-sm);
  color: var(--app-text-secondary);
  font-size: var(--app-font-size-body);
  line-height: 1.35;
}

.app-share-line .icon {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--app-brand-primary);
  font-size: 16px;
}

.app-share-line span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.app-share-more-link {
  display: flex;
  margin-top: var(--app-space-12);
  align-items: center;
  justify-content: center;
  gap: var(--app-space-sm);
  text-decoration: none;
}

.app-share-more-link .icon {
  font-size: 17px;
}

.app-button.is-loading > :not(.app-button__loader) {
  visibility: hidden;
}

.app-button__loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*
 * Compatibility layer for legacy Framework7 markup. Intentional compact,
 * round, segmented and icon controls keep their component-specific geometry.
 */
.button.button-fill:not(.button-small):not(.button-round),
.button.button-outline:not(.button-small):not(.button-round) {
  min-height: var(--app-button-height);
  border-radius: var(--app-button-radius);
  font-size: var(--app-font-size-button);
  font-weight: 600;
}

.button.button-fill:not(.color-red):not(.color-green):not(.color-orange) {
  --f7-button-fill-bg-color: var(--app-brand-primary);
  --f7-button-fill-pressed-bg-color: rgba(var(--app-brand-primary-rgb), .82);
  --f7-button-fill-text-color: var(--app-on-brand);
}

.button.button-outline:not(.color-red):not(.color-green):not(.color-orange) {
  --f7-button-outline-border-color: var(--app-brand-primary);
  --f7-button-text-color: var(--app-brand-primary);
}

.button:focus-visible {
  outline: 3px solid rgba(var(--app-brand-primary-rgb), .2);
  outline-offset: 2px;
}

.button.disabled,
.button[disabled],
.button:disabled {
  opacity: .48;
  pointer-events: none;
}

.toast[class*="custom-toast-"] {
  --f7-toast-padding-horizontal: var(--app-space-md);
  --f7-toast-padding-vertical: 12px;
  --f7-toast-text-color: var(--app-on-brand);
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 48px;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
  color: var(--app-on-brand);
  box-shadow: var(--app-shadow-overlay);
}

.ios .toast[class*="custom-toast-"],
.md .toast[class*="custom-toast-"] {
  right: 0;
  left: 0;
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
  border-radius: 0;
}

.md .toast.toast-bottom[class*="custom-toast-"] {
  bottom: 0;
}

.toast[class*="custom-toast-"] .toast-content {
  min-height: 48px;
  background: inherit;
}

.toast[class*="custom-toast-"] .toast-text {
  background: transparent;
  color: inherit;
  font-size: var(--app-font-size-body);
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
}

.toast.custom-toast-success {
  background: var(--app-color-success);
}

.toast.custom-toast-error {
  background: var(--app-color-error);
}

.toast.custom-toast-info {
  background: var(--app-color-info);
}

.toast.custom-toast-warning {
  background: var(--app-color-warning);
}

.toast[class*="custom-toast-"] .toast-button {
  width: auto;
  min-height: var(--app-button-height-compact);
  margin: -6px -8px -6px var(--app-space-sm);
  color: inherit;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .app-button:active {
    transform: none;
  }
}

/* Pilot modules: align their layout with /orders/ and /objects/1/ext/. */
.handover-app-page,
.app-surveys-page,
.app-payments-page {
  --handover-blue: var(--app-brand-primary);
  --handover-ink: var(--app-text-primary);
  --handover-muted: var(--app-text-secondary);
  --handover-border: var(--app-border);
}

.handover-app-page .page-content,
.app-surveys-page .page-content,
.app-payments-page .page-content {
  box-sizing: border-box;
  background: var(--app-page-bg);
}

.handover-app-hero {
  padding: 16px;
  border: 0;
  border-radius: var(--app-card-radius);
  background: var(--app-surface);
  color: var(--app-text-primary);
  box-shadow: var(--app-shadow-card);
}

.handover-app-hero-icon {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-radius: var(--app-radius-md);
  background: rgba(var(--app-brand-primary-rgb), .09);
  color: var(--app-brand-primary);
}

.handover-app-hero-icon i {
  font-size: 24px;
}

.handover-app-hero h1 {
  color: var(--app-text-primary);
  font-size: var(--app-font-size-title-sm);
  line-height: 1.35;
}

.handover-app-hero p {
  color: var(--app-text-secondary);
  font-size: var(--app-font-size-body);
  opacity: 1;
}

.handover-app-summary > div,
.handover-progress-card,
.handover-app-card,
.handover-entity-card,
.handover-stage-line,
.handover-action-grid > a,
.handover-info-card,
.handover-form-card,
.handover-focus-card,
.survey-app-card,
.survey-overview-card,
.survey-detail-question,
.app-payment-item {
  border-color: var(--app-border);
  border-radius: var(--app-card-radius);
  background: var(--app-surface);
  color: var(--app-text-primary);
  box-shadow: var(--app-shadow-card);
}

.handover-app-number,
.handover-app-open,
.handover-action-grid > a > i,
.survey-app-type {
  color: var(--app-brand-primary);
}

.handover-app-page .handover-focus-card > .handover-focus-calendar-icon {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin: 15px 0 8px;
}

.handover-appointment-cancel-sheet {
  height: auto;
  max-height: min(70vh, 460px);
  border-radius: var(--app-radius-lg) var(--app-radius-lg) 0 0;
  color: var(--app-text-primary);
}

.handover-appointment-cancel-sheet .sheet-modal-inner {
  max-height: min(70vh, 460px);
  overflow: auto;
  background: var(--app-surface);
}

.handover-appointment-cancel-sheet-content {
  box-sizing: border-box;
  padding: 24px var(--app-page-padding) calc(16px + var(--app-safe-area-bottom));
}

.handover-appointment-cancel-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--app-space-sm);
  margin: 0 0 var(--app-space-sm);
}

.handover-appointment-cancel-sheet-head h3 {
  margin: 0;
  color: var(--app-text-primary);
  font-size: var(--app-font-size-title-sm);
}

.handover-appointment-cancel-sheet-head .link {
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  color: var(--app-text-secondary);
}

.handover-appointment-cancel-sheet-head .icon {
  font-size: 22px;
}

.handover-appointment-cancel-sheet .handover-inline-form {
  margin: 0;
  padding: 0;
  border: 0;
}

.handover-appointment-cancel-sheet .handover-inline-form label {
  margin: 0 0 6px;
}

.handover-appointment-cancel-sheet .handover-inline-form textarea {
  min-height: 88px;
}

.handover-appointment-cancel-sheet .handover-inline-form > .button {
  margin-top: var(--app-space-sm);
}

.handover-chip,
.handover-key-icon,
.handover-app-empty-icon,
.survey-app-type,
.survey-overview-type,
.survey-detail-type,
.survey-detail-question-meta > span i,
.survey-detail-method-head > .icon,
.survey-results-popup-question-head > span {
  background: var(--app-color-info-soft);
  color: var(--app-color-info);
}

.handover-stage-line .done span,
.handover-sign-step-indicator.is-complete span,
.app-survey-status-active,
.survey-overview-status.is-active,
.survey-detail-signature-ready,
.app-payment-item.is-paid .app-payment-status {
  border-color: var(--app-color-success);
  background: var(--app-color-success-soft);
  color: var(--app-color-success);
}

.app-survey-status-paused,
.survey-overview-status.is-paused,
.survey-detail-signature-empty,
.app-payment-item.is-due .app-payment-status {
  border-color: var(--app-color-warning);
  background: var(--app-color-warning-soft);
  color: var(--app-color-warning);
}

.handover-app-empty-icon.is-error,
.handover-defect-delete-confirm,
.survey-detail-question-meta b,
.app-payment-item.is-overdue .app-payment-status {
  border-color: var(--app-color-error);
  background: var(--app-color-error-soft);
  color: var(--app-color-error);
}

.app-survey-status-completed,
.survey-overview-status.is-completed {
  background: var(--app-surface-muted);
  color: var(--app-text-secondary);
}

.dark :is(
  .handover-chip,
  .handover-key-icon,
  .handover-app-empty-icon,
  .survey-app-type,
  .survey-overview-type,
  .survey-detail-type,
  .survey-detail-question-meta > span i,
  .survey-detail-method-head > .icon,
  .survey-results-popup-question-head > span
) {
  background: var(--app-color-info-soft);
  color: var(--app-color-info);
}

.dark :is(
  .handover-stage-line .done span,
  .handover-sign-step-indicator.is-complete span,
  .app-survey-status-active,
  .survey-overview-status.is-active,
  .survey-detail-signature-ready,
  .app-payment-item.is-paid .app-payment-status
) {
  border-color: var(--app-color-success);
  background: var(--app-color-success-soft);
  color: var(--app-color-success);
}

.dark :is(
  .app-survey-status-paused,
  .survey-overview-status.is-paused,
  .survey-detail-signature-empty,
  .app-payment-item.is-due .app-payment-status
) {
  border-color: var(--app-color-warning);
  background: var(--app-color-warning-soft);
  color: var(--app-color-warning);
}

.dark :is(
  .handover-app-empty-icon.is-error,
  .handover-defect-delete-confirm,
  .survey-detail-question-meta b,
  .app-payment-item.is-overdue .app-payment-status
) {
  border-color: var(--app-color-error);
  background: var(--app-color-error-soft);
  color: var(--app-color-error);
}

.handover-current-status {
  background: var(--app-brand-primary);
  box-shadow: none;
}

.handover-section-head {
  background: none;
}

.handover-app-page .button.button-fill,
.app-surveys-page .button.button-fill,
.app-survey-overview-page .button.button-fill,
.app-survey-detail-page .button.button-fill,
.app-payments-page .button.button-fill {
  min-height: var(--app-button-height);
  border-radius: var(--app-button-radius);
  background: var(--app-brand-primary);
  color: var(--app-on-brand);
}

.handover-app-page .button.button-outline,
.app-surveys-page .button.button-outline,
.app-survey-overview-page .button.button-outline,
.app-survey-detail-page .button.button-outline,
.app-payments-page .button.button-outline {
  min-height: var(--app-button-height);
  border-color: var(--app-brand-primary);
  border-radius: var(--app-button-radius);
  color: var(--app-brand-primary);
}

.app-payments-page #app-payments-list {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--app-content-max-width);
  margin: 0 auto;
}

.app-payment-center {
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  padding: var(--app-space-sm) var(--app-page-padding) calc(var(--app-space-lg) + var(--app-safe-area-bottom));
}

.app-payment-segmented {
  position: sticky;
  top: 0;
  z-index: 6;
  box-sizing: border-box;
  min-height: var(--app-button-height);
  width: 100%;
  margin: 0;
  background: var(--app-surface-muted);
}

.app-payment-segmented .button {
  min-width: 0;
  min-height: var(--app-button-height-compact);
  padding: var(--app-space-xs) 6px;
  color: var(--app-text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.app-payment-segmented .button.tab-link-active {
  color: var(--app-on-brand);
}

.app-payment-segmented .segmented-highlight {
  pointer-events: none;
  background: var(--app-brand-primary);
}

.app-payment-segmented .button.tab-link-active .app-tab-count-badge {
  background: var(--app-surface);
  color: var(--app-brand-primary);
}

.app-payment-charge-items {
	margin-top: var(--app-space-12);
	padding-top: var(--app-space-sm);
	border-top: 1px solid var(--app-border);
}

.app-payment-charge-items-title {
	margin-bottom: var(--app-space-sm);
	color: var(--app-text-secondary);
	font-size: var(--app-font-size-caption);
	font-weight: 600;
}

.app-payment-charge-item {
	display: flex;
	justify-content: space-between;
	gap: var(--app-space-12);
	padding: var(--app-space-xs) 0;
	font-size: var(--app-font-size-body);
}

.app-payment-charge-item span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.app-payment-charge-total {
	margin-top: var(--app-space-xs);
	border-top: 1px solid var(--app-border);
	font-weight: 700;
}

.dark .handover-app-hero,
.dark .handover-app-summary > div,
.dark .handover-progress-card,
.dark .handover-app-card,
.dark .handover-entity-card,
.dark .handover-stage-line,
.dark .handover-action-grid > a,
.dark .handover-info-card,
.dark .handover-form-card,
.dark .handover-focus-card,
.dark .survey-app-card,
.dark .survey-overview-card,
.dark .survey-detail-question,
.dark .app-payment-item {
  border-color: var(--app-border);
  background: var(--app-surface);
}
.app-property-progress > span {
	width: var(--app-progress, 0%);
}
.app-full-width-banner {
  display: block;
  margin-inline: calc(var(--app-page-padding) * -1);
  overflow: hidden;
}
.app-full-width-banner img { display: block; width: 100%; height: auto; }
.app-countdown {
  position: relative;
  display: block;
  min-height: 0;
  width: calc(100% + (var(--app-page-padding) * 2));
  margin: 8px calc(var(--app-page-padding) * -1);
  overflow: hidden;
  border-block: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-text-primary);
  box-shadow: var(--app-shadow-card);
  transition: transform .16s ease;
}
.app-countdown__content { position: relative; z-index: 1; display: flex; box-sizing: border-box; flex-direction: column; padding: 14px; }
.app-countdown__eyebrow { display: inline-flex; width: fit-content; align-items: center; gap: 5px; margin-top: 12px; margin-bottom: 7px; color: var(--app-brand-accent); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.app-countdown__eyebrow .icon { font-size: 16px; }
.app-countdown__content > strong { max-width: 96%; font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
.app-countdown__subtitle { max-width: 96%; margin-top: 4px; opacity: .76; font-size: 12px; line-height: 1.35; }
.app-countdown__units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.app-countdown__units > span { min-width: 0; padding: 8px 2px 7px; border: 1px solid var(--app-border); border-radius: var(--app-radius-sm); background: var(--app-surface-muted); text-align: center; }
.app-countdown__units b, .app-countdown__units small { display: block; }
.app-countdown__units b { color: var(--app-brand-accent); font-size: 23px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.app-countdown__units small { margin-top: 5px; overflow: hidden; color: inherit; font-size: 9px; line-height: 1; opacity: .68; text-overflow: ellipsis; white-space: nowrap; }
.app-countdown__date { display: flex; align-items: center; gap: 4px; margin-top: 9px; font-size: 10px; opacity: .58; }
.app-countdown__date .icon { font-size: 13px; }
.app-countdown__finished { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--app-brand-accent); font-size: 14px; font-weight: 800; }
.app-countdown__finished .icon { font-size: 20px; }
.app-countdown:active { transform: scale(.992); }
@media (max-width: 340px) { .app-countdown__units { gap: 3px; } .app-countdown__units b { font-size: 21px; } .app-countdown__units small { font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { .app-countdown:active { transform: none; } }

.dark .link_to_zhk,
.theme-dark .link_to_zhk {
  border-color: var(--app-text-primary);
}
.dark .link_to_zhk a,
.theme-dark .link_to_zhk a {
  color: var(--app-text-primary) !important;
}

.app-message-card--service {
  --message-accent: var(--app-color-info);
}
.app-message-card--uslugi {
  --message-accent: var(--app-color-success);
}
.app-message-card--service .app-message-card-icon,
.app-message-card--uslugi .app-message-card-icon {
  color: var(--app-on-brand);
}
.page[data-name="message-service"] #app-main-notification-own.full-width,
.page[data-name="message-uslugi"] #app-main-notification-own.full-width {
  max-width: none;
}
.toolbar.tabbar-icons.app-main-toolbar--five-items .tabbar-label {
  font-size: 10px;
}

.toolbar.tabbar-icons.app-main-toolbar--five-items i.icon {
  --f7-tabbar-icon-size: 32px;
}