/*! Fachowiec24 R25.8.6 — bounded create modal, visible actions and custom city */

/* The older R124 stylesheet is injected after page parsing.  The html/body
 * prefix deliberately gives this corrective layer higher specificity. */
html body .f24-create-modal-overlay {
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100dvh!important;
  min-height:0!important;
  max-height:100dvh!important;
  padding:24px!important;
  overflow:hidden!important;
  overscroll-behavior:contain!important;
}

html body .f24-create-modal-overlay .f24-create-modal-panel {
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  width:min(100%,920px)!important;
  max-width:920px!important;
  height:auto!important;
  min-height:0!important;
  max-height:calc(100dvh - 48px)!important;
  margin:0!important;
  overflow:hidden!important;
}

html body .f24-create-modal-overlay .f24-create-modal-header {
  position:relative!important;
  top:auto!important;
  z-index:4!important;
  flex:0 0 auto!important;
  background:#fff!important;
}

html body .f24-create-modal-overlay .f24-create-modal-body {
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-gutter:stable!important;
}

html body .f24-create-modal-overlay .f24-create-actions {
  position:relative!important;
  inset:auto!important;
  z-index:5!important;
  flex:0 0 auto!important;
  margin:0!important;
  border-top:1px solid #e2e8f0!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:0 -10px 26px rgba(15,23,42,.08)!important;
}

.f24-r2586-custom-city {
  grid-column:1/-1!important;
  display:grid!important;
  gap:5px!important;
  min-width:0!important;
  padding:13px 14px!important;
  border:1px dashed #c4b5fd!important;
  border-radius:14px!important;
  background:#faf9ff!important;
}

.f24-r2586-custom-city label {
  display:grid!important;
  gap:7px!important;
  min-width:0!important;
  color:#334155!important;
  font-size:12px!important;
  font-weight:850!important;
}

.f24-r2586-custom-city input {
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  min-height:48px!important;
  padding:11px 13px!important;
  border:1px solid #cbd5e1!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#172033!important;
  font-size:16px!important;
  font-weight:600!important;
  outline:none!important;
}

.f24-r2586-custom-city input:focus {
  border-color:#8b5cf6!important;
  box-shadow:0 0 0 3px #ede9fe!important;
}

.f24-r2586-custom-city > small {
  color:#64748b!important;
  font-size:10px!important;
  line-height:1.4!important;
}

.f24-r2586-phone-error {
  display:none!important;
  color:#b91c1c!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1.4!important;
}

.f24-r2586-phone-error.is-visible {
  display:block!important;
}

[data-f24-mp-phone][aria-invalid="true"] {
  border-color:#ef4444!important;
  box-shadow:0 0 0 3px #fee2e2!important;
}

@media (max-width:767px) {
  html body .f24-create-modal-overlay {
    align-items:stretch!important;
    padding:0!important;
  }

  html body .f24-create-modal-overlay .f24-create-modal-panel {
    width:100%!important;
    max-width:none!important;
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    margin:0!important;
    border-radius:0!important;
  }

  html body .f24-create-modal-overlay .f24-create-modal-header {
    padding:14px 16px!important;
  }

  html body .f24-create-modal-overlay .f24-create-modal-body {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:13px!important;
    padding:15px 16px 22px!important;
  }

  html body .f24-create-modal-overlay .f24-create-modal-body > * {
    grid-column:1/-1!important;
    min-width:0!important;
  }

  html body .f24-create-modal-overlay .f24-create-actions {
    display:grid!important;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)!important;
    gap:9px!important;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom))!important;
  }

  html body .f24-create-modal-overlay .f24-create-actions button {
    width:100%!important;
    min-width:0!important;
    min-height:52px!important;
    margin:0!important;
    padding:0 10px!important;
    font-size:14px!important;
  }
}