/* =========================================================================
 * Xızmet — Чистый стандартный CSS3 (работает и напрямую в браузере
 * при выгрузке на хостинг, и при сборке через Vite)
 * ========================================================================= */

:root {
  --font-sans: 'Nunito', 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Rubik', sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  background-color: #C8DBF4;
  color: #0F172A;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  margin: 0;
  padding: 0;
}

button,
a,
input,
label,
[data-nav],
[data-quick-service] {
  touch-action: manipulation;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* =========================================================================
 * UNIFIED 60PX STICKY SCREEN HEADER
 * ========================================================================= */
.app-top-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  padding: 0 16px;
  background-color: #FFFFFF;
  box-shadow: 0 4px 14px -2px rgba(29, 78, 216, 0.1), 0 2px 6px -1px rgba(15, 23, 42, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.app-header-title {
  font-size: 18px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================================
 * SINGLE-LINE BADGES
 * ========================================================================= */
.badge-single {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap !important;
  flex-shrink: 0;
  line-height: 1;
}

/* =========================================================================
 * HORIZONTAL SCROLL WITH ANIMATED LEFT & RIGHT ARROWS ON BOTH SIDES
 * ========================================================================= */
.h-scroll-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

.h-scroll-track {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  flex: 1;
  min-width: 0;
}

.h-scroll-arrow {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07);
  transition: transform 0.12s ease, opacity 0.18s ease, background-color 0.15s ease;
}

.h-scroll-arrow:not(.arrow-at-edge):active {
  transform: scale(0.9);
}

.h-scroll-arrow.arrow-at-edge,
.h-scroll-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
  transition: none;
  transform: none !important;
}

.h-scroll-arrow.arrow-at-edge .anim-chevron-left,
.h-scroll-arrow.arrow-at-edge .anim-chevron-right,
.h-scroll-arrow.arrow-at-edge svg,
.h-scroll-arrow.arrow-at-edge i {
  animation: none !important;
  transform: none !important;
}

/* =========================================================================
 * CLEAN BORDERLESS CARDS WITH VISIBLE ELEVATION SHADOWS ON BLUE-TINTED BG
 * ========================================================================= */
.card-surface {
  background-color: #FFFFFF;
  border: none;
  box-shadow: 0 8px 22px -4px rgba(29, 78, 216, 0.13), 0 3px 8px -2px rgba(15, 23, 42, 0.07);
}

.btn-gradient-blue {
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  color: #FFFFFF;
  box-shadow: 0 6px 16px -3px rgba(29, 78, 216, 0.36);
  transition: transform 0.08s ease, filter 0.1s ease;
}
.btn-gradient-blue:hover {
  filter: brightness(1.04);
}
.btn-gradient-blue:active {
  transform: scale(0.97);
}

.btn-gradient-green {
  background: linear-gradient(135deg, #22C55E 0%, #15803D 100%);
  color: #FFFFFF;
  box-shadow: 0 6px 16px -3px rgba(21, 128, 61, 0.36);
  transition: transform 0.08s ease, filter 0.1s ease;
}
.btn-gradient-green:hover {
  filter: brightness(1.04);
}
.btn-gradient-green:active {
  transform: scale(0.97);
}

/* Спокойная тёплая кнопка СРОЧНОГО ВЫЗОВА (без тревожного «пожарного» красного цвета и без рамок) */
.btn-gradient-urgent {
  background: linear-gradient(135deg, #F59E0B 0%, #EA580C 100%);
  color: #FFFFFF;
  border: none;
  box-shadow: 0 6px 16px -3px rgba(234, 88, 12, 0.35);
  transition: transform 0.08s ease, filter 0.1s ease;
}
.btn-gradient-urgent:hover {
  filter: brightness(1.04);
}
.btn-gradient-urgent:active {
  transform: scale(0.97);
}

/* Выделенные блоки без рамок с чёткой мягкой тенью */
.card-attention-urgent {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF7ED 100%);
  border: none;
  box-shadow: 0 8px 22px -4px rgba(234, 88, 12, 0.15), 0 3px 8px -2px rgba(15, 23, 42, 0.07);
}

.card-attention-amber {
  background: linear-gradient(135deg, #FFFFFF 0%, #FEF3C7 100%);
  border: none;
  box-shadow: 0 8px 22px -4px rgba(217, 119, 6, 0.15), 0 3px 8px -2px rgba(15, 23, 42, 0.07);
}

.card-attention-emerald {
  background: linear-gradient(135deg, #FFFFFF 0%, #D1FAE5 100%);
  border: none;
  box-shadow: 0 8px 22px -4px rgba(16, 185, 129, 0.15), 0 3px 8px -2px rgba(15, 23, 42, 0.07);
}

.card-attention-blue {
  background: linear-gradient(135deg, #FFFFFF 0%, #DBEAFE 100%);
  border: none;
  box-shadow: 0 8px 22px -4px rgba(29, 78, 216, 0.15), 0 3px 8px -2px rgba(15, 23, 42, 0.07);
}

.app-link {
  color: #1D4ED8;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
  white-space: nowrap;
}
.app-link:hover {
  color: #1E40AF;
}

/* Подсветка пропущенных обязательных полей без вывода текста ошибки внутри формы */
.input-error-highlight {
  background-color: #FEF2F2 !important;
  box-shadow: 0 0 0 2px #EF4444 !important;
}

/* =========================================================================
 * MAP PIN & BOTTOM SHEET SLIDE ANIMATIONS
 * ========================================================================= */
#map-center-pin-wrapper .pin-head {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
#map-center-pin-wrapper .pin-shadow {
  transition: transform 0.18s ease, opacity 0.18s ease;
}
#map-center-pin-wrapper.map-pin-lifted .pin-head {
  transform: translateY(-16px) scale(1.08);
}
#map-center-pin-wrapper.map-pin-lifted .pin-shadow {
  transform: scale(0.55);
  opacity: 0.3;
}

.bottom-sheet-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.bottom-sheet-backdrop.sheet-open {
  opacity: 1;
  pointer-events: auto;
}
.bottom-sheet-panel {
  transform: translateY(100%);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.bottom-sheet-backdrop.sheet-open .bottom-sheet-panel {
  transform: translateY(0);
}

/* =========================================================================
 * ANIMATED MESSAGE, ERROR & POPUP ICONS
 * ========================================================================= */
@keyframes iconPopSpring {
  0% {
    transform: scale(0.4) rotate(-12deg);
    opacity: 0;
  }
  65% {
    transform: scale(1.22) rotate(6deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes iconFloatPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.06);
  }
}

@keyframes iconPhoneWave {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  20% {
    transform: rotate(-12deg) scale(1.06);
  }
  40% {
    transform: rotate(12deg) scale(1.06);
  }
  60% {
    transform: rotate(-8deg) scale(1.03);
  }
  80% {
    transform: rotate(8deg) scale(1.03);
  }
}

@keyframes chevronLeftAnim {
  0%, 100% {
    transform: translateX(1.5px);
  }
  50% {
    transform: translateX(-2.5px);
  }
}

@keyframes chevronRightAnim {
  0%, 100% {
    transform: translateX(-1.5px);
  }
  50% {
    transform: translateX(2.5px);
  }
}

.anim-icon-pop {
  animation: iconPopSpring 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.anim-icon-float {
  animation: iconFloatPulse 2.4s ease-in-out infinite;
}

.anim-icon-ring {
  animation: iconPhoneWave 1.8s ease-in-out infinite;
}

.h-scroll-arrow:not(.arrow-at-edge) .anim-chevron-left {
  animation: chevronLeftAnim 1.25s ease-in-out infinite;
}

.h-scroll-arrow:not(.arrow-at-edge) .anim-chevron-right,
.anim-chevron-nudge {
  animation: chevronRightAnim 1.25s ease-in-out infinite;
}