/* ==========================================================================
   МЕАЛАБ — медицинская лаборатория
   Стили перенесены из дизайн-компонента МЕАЛАБ.dc.html (Claude Design).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: #17A398; color: #ffffff; }
a { color: #0D7A72; }
a:hover { color: #17A398; }
input, textarea, select, button { font-family: inherit; }
input:focus, textarea:focus, select:focus { outline: none; }

@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes floatSlow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes breatheImg { 0%,100% { transform: scale(1); } 50% { transform: scale(1.012); } }
@keyframes blinkEyes { 0%,88%,100% { transform: scaleY(1); } 94% { transform: scaleY(0.1); } }
@keyframes waveArm { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(12deg); } }
@keyframes tgWave { 0%,100% { transform: rotate(-1deg); } 50% { transform: rotate(-13deg); } }
@keyframes swayBot { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes giftSway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes pinPulse { 0% { transform: scale(0.9); opacity: 0.55; } 70% { transform: scale(2.1); opacity: 0; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes particleFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(6px,-18px); } }
@keyframes tgBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.ml-scroll-x { scrollbar-width: none; -ms-overflow-style: none; }
.ml-scroll-x::-webkit-scrollbar { display: none; }

[style*="floatY"], [style*="floatSlow"], [style*="breatheImg"], [style*="blinkEyes"],
[style*="waveArm"], [style*="swayBot"], [style*="giftSway"], [style*="pinPulse"],
[style*="particleFloat"], [style*="tgBounce"], [style*="tgWave"] { animation-play-state: var(--anim-play, running); }

.ml-card-lift { transition: transform 0.28s cubic-bezier(.22,.9,.34,1), box-shadow 0.28s ease; }
.ml-card-lift:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(15,61,58,0.10); }
.ml-card-lift:active { transform: translateY(-2px) scale(0.99); }
.ml-card-lift:hover .ml-icon-pop { transform: scale(1.06); }
.ml-card-lift:hover .ml-circle-pop { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15,61,58,0.10); border-color: #17A398; }

.ml-btn-primary { transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; position: relative; overflow: hidden; }
.ml-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(15,61,58,0.20); background: #0D8B82; }
.ml-btn-primary:active { transform: translateY(-1px) scale(0.98); }
.ml-btn-primary .ml-shine-bar { position: absolute; top: 0; left: 0; width: 55%; height: 100%; background: linear-gradient(115deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.38) 50%, rgba(255,255,255,0) 80%); transform: translateX(-180%) skewX(-12deg); transition: transform 0.65s ease; pointer-events: none; }
.ml-btn-primary:hover .ml-shine-bar { transform: translateX(260%) skewX(-12deg); }

.ml-btn-outline { transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease; }
.ml-btn-outline:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15,61,58,0.10); background: #F1FAF8; border-color: #17A398 !important; }
.ml-btn-outline:active { transform: translateY(-1px) scale(0.98); }

.ml-btn-hero { transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease; position: relative; overflow: hidden; background: #ffffff !important; color: var(--teal-700) !important; border: 1.5px solid var(--teal-200) !important; }
.ml-btn-hero:hover { background: #17A398 !important; color: #ffffff !important; border-color: #17A398 !important; transform: translateY(-2px); box-shadow: 0 8px 16px rgba(15,61,58,0.20); }
.ml-btn-hero:active { transform: translateY(-1px) scale(0.98); }
.ml-btn-hero .ml-shine-bar { position: absolute; top: 0; left: 0; width: 55%; height: 100%; background: linear-gradient(115deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.38) 50%, rgba(255,255,255,0) 80%); transform: translateX(-180%) skewX(-12deg); transition: transform 0.65s ease; pointer-events: none; }
.ml-btn-hero:hover .ml-shine-bar { transform: translateX(260%) skewX(-12deg); }

.ml-link-arrow { transition: color 0.2s ease; }
.ml-link-arrow:hover { color: #17A398; }
.ml-link-arrow:hover .ml-arrow-ic { transform: translateX(6px); }
.ml-arrow-ic { transition: transform 0.25s ease; display: inline-flex; }

.ml-circle-btn { transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease; }
.ml-circle-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 14px rgba(15,61,58,0.14); background: #17A398 !important; border-color: #17A398 !important; }
.ml-circle-btn:hover .ml-circle-ic { stroke: #ffffff !important; color: #ffffff !important; }
.ml-circle-btn:active { transform: translateY(-1px) scale(0.97); }

.ml-social-btn { transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; }
.ml-social-btn:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 16px rgba(0,0,0,0.20); }

.ml-pin-btn { transition: transform 0.25s ease; cursor: pointer; }
.ml-pin-btn:hover { transform: scale(1.12) translateY(-2px); }

.ml-nav-link { transition: color 0.2s ease; position: relative; }
.ml-nav-link:hover { color: #0D7A72 !important; }

.ml-dot { transition: all 0.25s ease; cursor: pointer; }
.ml-dot:hover { transform: scale(1.3); }

.ml-x-btn { transition: transform 0.2s ease, background 0.2s ease; }
.ml-x-btn:hover { transform: rotate(90deg); background: #F1FAF8; }

.ml-input:focus { border-color: #17A398 !important; box-shadow: 0 0 0 3px rgba(23,163,152,0.12); }

.ml-example-chip { transition: all 0.2s ease; }
.ml-example-chip:hover { background: #17A398 !important; color: #ffffff !important; border-color: #17A398 !important; }

.ml-footer-link { transition: color 0.2s ease, padding-left 0.2s ease; }
.ml-footer-link:hover { color: #ffffff !important; padding-left: 4px; }

.ml-logo-mark { transition: filter 0.3s ease; }
.ml-logo-mark:hover { filter: brightness(1.12) saturate(1.1); }

@media (max-width: 1180px) {
  .ml-tg-content { flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 15px !important; padding: 26px 250px 26px 320px !important; }
}
@media (max-width: 980px) {
  .ml-tg-content { justify-content: flex-start !important; gap: 16px !important; min-height: 0 !important; padding: 22px 18px 162px !important; }
  .ml-tg-robot { width: 150px !important; height: 156px !important; left: -4px !important; bottom: -10px !important; }
  .ml-tg-gift { height: 116px !important; right: 6px !important; bottom: 2px !important; }
}
@media (max-width: 760px) {
  .ml-header-nav { display: none !important; }
  .ml-burger { display: flex !important; }
  .ml-hero-grid { grid-template-columns: 1fr !important; }
  .ml-hero-media { order: -1; }
  .ml-addr-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 900px) {
  .ml-checkup-grid { grid-template-columns: repeat(2,1fr) !important; }
  .ml-footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .ml-header-phone { display: none !important; }
  .ml-footer-grid { grid-template-columns: 1fr !important; }
  .ml-stats-row { justify-content: flex-start !important; }
}
@media (max-width: 560px) {
  .ml-checkup-grid { grid-template-columns: 1fr !important; }
  .ml-tg-robot { width: 128px !important; height: 133px !important; }
  .ml-tg-gift { height: 98px !important; }
}

/* --------------------------------------------------------------------------
   Дополнения к дизайн-компоненту
   -------------------------------------------------------------------------- */

/* Строка популярных анализов: в дизайне 8 колонок, на узких экранах —
   горизонтальная прокрутка вместо сжатия карточек. */
@media (max-width: 1100px) {
  #tests-grid {
    display: flex !important;
    overflow-x: auto;
    scroll-behavior: smooth;
  }
  #tests-grid > [data-test-card] { flex: 0 0 132px; }
}

/* Доступность: видимый фокус для клавиатурной навигации. */
:focus-visible {
  outline: 2px solid #17A398;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Плейсхолдер вместо отсутствующей иллюстрации. Занимает те же размеры,
   что и оригинальное изображение, поэтому вёрстка не «прыгает». */
.ml-img-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 14px;
  background:
    repeating-linear-gradient(135deg, rgba(23,163,152,0.06) 0 10px, rgba(23,163,152,0.11) 10px 20px);
  border: 1.5px dashed rgba(23,163,152,0.35);
  color: #0D7A72;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  padding: 8px;
  overflow: hidden;
}
.ml-img-fallback span { opacity: 0.85; }

/* Фото лаборатории в карточке адреса (в прототипе — заполняемый слот). */
.ml-photo-slot {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #E1F2EB, #CDEADF);
  color: #0D7A72;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  padding: 8px;
}

/* Модальные окна и тосты скрыты до открытия — управляется в js/app.js. */
[hidden] { display: none !important; }