/* =========================================================
   ЛОВИ — DESIGN & RESPONSIVE v1
   Presentation layer only. Business logic is untouched.
   ========================================================= */

:root {
  --ng-content-max: 1440px;
  --ng-desktop-sidebar: 232px;
  --ng-control-h: 48px;
  --ng-touch: 44px;
  --ng-page-gutter: clamp(16px, 2vw, 28px);
  --ng-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html { background: var(--bg); }

body {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* Better native controls without changing semantics. */
button, input, textarea, select { min-height: var(--ng-touch); }
button { -webkit-appearance: none; appearance: none; }

/* Avoid accidental desktop hover effects on touch screens. */
@media (hover: none) {
  button:hover, .brand:hover { transform: none !important; }
}

/* =========================================================
   PHONE — common iPhone + Android foundation
   ========================================================= */
@media (max-width: 650px) {
  :root {
    --mobile-nav-h: 72px;
    --mobile-side: 10px;
  }

  body {
    min-width: 320px;
    width: 100%;
    overflow: hidden;
  }

  .topbar {
    top: max(6px, env(safe-area-inset-top));
  }

  .bottom-nav {
    bottom: max(7px, env(safe-area-inset-bottom));
  }

  .sheet,
  .modalbox,
  .app-dialog-card {
    -webkit-overflow-scrolling: touch;
  }

  .field,
  .app-dialog-input,
  input,
  textarea,
  select {
    font-size: 16px;
  }
}

/* =========================================================
   iOS-specific presentation
   ========================================================= */
body.platform-ios {
  --ng-platform-radius: 20px;
}

body.platform-ios .brand,
body.platform-ios .searchbox,
body.platform-ios .round-btn,
body.platform-ios .map-action,
body.platform-ios .bottom-nav,
body.platform-ios .sheet,
body.platform-ios .modalbox,
body.platform-ios .app-dialog-card {
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
}

@media (max-width: 650px) {
  body.platform-ios .bottom-nav {
    padding-bottom: max(5px, env(safe-area-inset-bottom));
    height: calc(72px + env(safe-area-inset-bottom));
    min-height: calc(72px + env(safe-area-inset-bottom));
    border-radius: 22px;
  }

  body.platform-ios .modalbox,
  body.platform-ios .app-dialog-card {
    border-radius: 26px 26px 0 0;
  }

  body.platform-ios .field,
  body.platform-ios .app-dialog-input {
    min-height: 50px;
  }
}

/* =========================================================
   Android-specific presentation
   ========================================================= */
body.platform-android {
  --ng-platform-radius: 18px;
}

@media (max-width: 650px) {
  body.platform-android .bottom-nav {
    border-radius: 18px;
  }

  body.platform-android .modalbox,
  body.platform-android .app-dialog-card {
    border-radius: 22px 22px 0 0;
  }

  body.platform-android .field,
  body.platform-android .app-dialog-input {
    min-height: 48px;
  }
}

/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */
@media (min-width: 651px) and (max-width: 1100px) {
  body {
    min-width: 0;
  }

  .topbar {
    left: 18px;
    right: 18px;
  }

  .hero-card {
    max-width: min(620px, calc(100vw - 36px));
  }

  body[class*="route-"] #sheet:not(.hidden),
  body.route-create #createM,
  body.route-profile #prof {
    padding-left: 28px;
    padding-right: 28px;
  }
}

/* =========================================================
   DESKTOP — safe responsive layer
   Keep the tested ЛОВИ desktop composition intact.
   Only improve width, spacing and content constraints.
   ========================================================= */
@media (min-width: 1101px) {
  body {
    min-width: 0;
    overflow: hidden;
  }

  /* Do not reposition/hide the tested navigation or map. */
  #map {
    width: 100%;
  }

  .topbar {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-card {
    max-width: 560px;
  }

  /* Desktop forms/content remain readable instead of becoming full-width. */
  body[class*="route-"] #sheet:not(.hidden),
  body.route-create #createM,
  body.route-profile #prof {
    padding-left: clamp(22px, 3vw, 56px);
    padding-right: clamp(22px, 3vw, 56px);
  }

  body[class*="route-"] #sheet:not(.hidden) > *,
  body.route-create #createM .modalbox,
  body.route-profile #prof .modalbox {
    max-width: var(--ng-content-max);
    margin-left: auto;
    margin-right: auto;
  }

  /* Dialogs stay centered exactly as in the tested desktop version. */
  .modal {
    padding-left: 0;
  }
}

/* Wide desktop gets slightly larger content rhythm. */
@media (min-width: 1500px) {
  .hero-card { width: 560px; }
  .topbar { left: 40px; right: 40px; }
}

/* =========================================================
   LARGE TEXT / ACCESSIBILITY
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   SAFE AREA FALLBACKS
   ========================================================= */
@supports not (height: 100dvh) {
  #map { height: 100vh; }
  .picker { height: 100vh; }
}

@supports (height: 100svh) {
  @media (max-width: 650px) {
    #map { height: 100svh; }
  }
}