/* Дизайн-система сайта онлайн-записи: фирменные токены и визуальные компоненты. */
:root {
  --oz-color-primary: #007c8e;
  --oz-color-primary-hover: #006777;
  --oz-color-ink: #0e3449;
  --oz-color-accent: #ef7f1a;
  --oz-color-canvas: #f4f8fa;
  --oz-color-surface: #ffffff;
  --oz-color-line: #dfe8ec;
  --oz-color-muted: #667f8c;
  --oz-radius-sm: 10px;
  --oz-radius-md: 16px;
  --oz-radius-lg: 24px;
  --oz-shadow-card: 0 12px 34px rgba(14, 52, 73, .08);
  --oz-shadow-float: 0 18px 50px rgba(14, 52, 73, .14);
  --oz-focus: 0 0 0 4px rgba(0, 124, 142, .18);
}

body {
  background:
    radial-gradient(circle at 8% 4%, rgba(97, 199, 211, .15), transparent 28rem),
    linear-gradient(180deg, #f8fbfc 0, var(--oz-color-canvas) 100%);
}

.oz-header {
  min-height: 70px;
  padding: 14px clamp(16px, 4vw, 54px);
  border-bottom-color: rgba(14, 52, 73, .08);
  box-shadow: 0 4px 22px rgba(14, 52, 73, .045);
}

.oz-logo img {
  width: 224px;
  height: auto;
  max-width: 24vw;
}

.oz-title {
  font-size: 18px;
  letter-spacing: -.15px;
}

.oz-container {
  max-width: 1180px;
  padding: 26px clamp(16px, 4vw, 44px) 72px;
}

.oz-card {
  border-color: rgba(14, 52, 73, .09);
  border-radius: var(--oz-radius-lg);
  box-shadow: var(--oz-shadow-card);
  padding: clamp(18px, 3vw, 30px);
}

.oz-spec-card { height:186px;min-height:186px;display:grid;grid-template-rows:58px 54px 18px 16px;align-items:start; }
.oz-spec-icon { width:50px;height:50px;margin:0 auto; }
.oz-spec-icon svg { width:27px;height:27px; }
.oz-spec-name { height:54px;display:flex;align-items:center;justify-content:center;overflow:hidden; }
.oz-spec-count { line-height:18px; }
.oz-spec-card .oz-slots-badge { line-height:16px;margin-top:0; }

.oz-h1,
.oz-h2,
.oz-doc-name,
.oz-slotdoc-name,
.oz-clinic-pick-name {
  letter-spacing: -.18px;
}

.oz-h2 {
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.25;
}

.oz-hero {
  position: relative;
  min-height: 344px;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid rgba(14, 52, 73, .08);
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.96) 38%, rgba(255,255,255,.48) 62%, rgba(255,255,255,.04) 84%),
    url('../images/content/online-booking-hero.webp') 68% center / cover no-repeat;
  box-shadow: var(--oz-shadow-float);
}

.oz-hero::after {
  content: '';
  position: absolute;
  inset: auto auto -86px -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(0, 124, 142, .07);
}

.oz-hero-content {
  position: relative;
  z-index: 1;
  width: min(54%, 560px);
  padding: clamp(30px, 5vw, 58px);
}

.oz-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--oz-color-primary);
  background: rgba(0, 124, 142, .09);
  font-size: 13px;
  font-weight: 600;
}

.oz-hero-kicker::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22a94f;
  box-shadow: 0 0 0 4px rgba(34, 169, 79, .12);
}

.oz-hero h2 {
  max-width: 520px;
  margin: 0 0 14px;
  color: var(--oz-color-ink);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.04;
  letter-spacing: -1.1px;
}

.oz-hero p {
  max-width: 510px;
  margin: 0;
  color: #47626f;
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.55;
}

.oz-hero-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.oz-hero-benefit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(0, 124, 142, .14);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: var(--oz-color-ink);
  font-size: 13px;
  font-weight: 500;
  backdrop-filter: blur(10px);
}

.oz-hero-benefit svg {
  width: 16px;
  height: 16px;
  color: var(--oz-color-primary);
}

.oz-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 20px;
}

.oz-step {
  min-width: 0;
  height: auto;
  padding: 9px 10px;
  border: 1px solid var(--oz-color-line);
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  color: var(--oz-color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: color .2s, background .2s, border-color .2s, transform .2s;
}

.oz-step span {
  display: inline-flex;
  width: 23px;
  height: 23px;
  align-items: center;
  justify-content: center;
  flex: 0 0 23px;
  border-radius: 50%;
  background: #eaf0f2;
  font-size: 12px;
  font-weight: 700;
}

.oz-step em {
  overflow: hidden;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oz-step.active {
  border-color: var(--oz-color-primary);
  background: var(--oz-color-primary);
  color: #fff;
  transform: translateY(-1px);
}

.oz-step.active span {
  background: rgba(255,255,255,.2);
}

.oz-step.done {
  border-color: rgba(0,124,142,.22);
  background: rgba(0,124,142,.08);
  color: var(--oz-color-primary);
}

.oz-step.done span {
  background: var(--oz-color-primary);
  color: #fff;
}

.oz-clinic-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.oz-clinic-pick,
.oz-spec-card,
.oz-doc-card,
.oz-clinic-block,
.oz-input,
.oz-submit,
.oz-doc-cta,
.oz-slot-chip,
.oz-slot-day-chip {
  border-radius: var(--oz-radius-md);
}

.oz-clinic-pick {
  min-height: 330px;
  border-color: rgba(14,52,73,.11);
  box-shadow: 0 8px 24px rgba(14,52,73,.055);
}

.oz-clinic-pick:hover {
  box-shadow: 0 16px 34px rgba(0,124,142,.15);
}

.oz-clinic-pick-photo {
  height: 164px;
}

.oz-clinic-pick-body {
  padding: 18px;
}

.oz-clinic-pick-name {
  font-size: 17px;
}

.oz-doc-card {
  min-height: 244px;
  padding: 22px;
  border-color: rgba(14,52,73,.1);
  box-shadow: 0 10px 28px rgba(14,52,73,.065);
}

.oz-patient-filters { margin-bottom: 18px; }
.oz-filter-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
.oz-select-field { display:flex;flex-direction:column;gap:7px;color:var(--oz-color-ink);font-size:13px;font-weight:600; }
.oz-select-field select {
  width:100%;height:50px;padding:0 42px 0 14px;border:1px solid var(--oz-color-line);border-radius:14px;
  background:#fff;color:var(--oz-color-ink);font:500 15px/1.2 'Jost',sans-serif;outline:none;cursor:pointer;
}
.oz-select-field select:focus { border-color:var(--oz-color-primary);box-shadow:var(--oz-focus); }
.oz-filter-help { margin:12px 0 0;color:var(--oz-color-muted);font-size:13px; }
.oz-filter-notice { margin:0 0 16px;padding:12px 14px;border-radius:12px;background:#fff6ea;color:#9a570d;font-size:14px; }

.oz-doctors-heading { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px; }
.oz-doctors-heading .oz-h2 { margin-bottom:5px; }
.oz-doctors-heading .oz-sub { margin:0; }
.oz-heading-count { color:var(--oz-color-muted);font-weight:500; }
.oz-doctor-filters { margin-bottom:18px;padding:18px;border:1px solid rgba(14,52,73,.09);border-radius:20px;background:#fff;box-shadow:0 8px 24px rgba(14,52,73,.05); }
.oz-clinic-filter-title,.oz-doc-search-wrap>span { display:block;margin-bottom:9px;color:var(--oz-color-ink);font-size:13px;font-weight:600; }
.oz-clinic-filter-list { display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:thin; }
.oz-clinic-filter-card {
  flex:0 0 176px;min-height:104px;padding:0;overflow:hidden;border:1px solid var(--oz-color-line);border-radius:15px;
  background:#fff;color:var(--oz-color-ink);font:600 12px/1.25 'Jost',sans-serif;text-align:left;cursor:pointer;
  box-shadow:0 5px 14px rgba(14,52,73,.045);transition:.18s ease;
}
.oz-clinic-filter-card img,.oz-clinic-filter-placeholder,.oz-clinic-filter-all { display:flex;width:100%;height:66px;align-items:center;justify-content:center;object-fit:cover;background:linear-gradient(135deg,#e3f4f6,#f3f8fa);color:var(--oz-color-primary); }
.oz-clinic-filter-all svg { width:30px;height:30px; }
.oz-clinic-filter-card>span:last-child { display:block;padding:9px 10px; }
.oz-clinic-filter-card:hover,.oz-clinic-filter-card.selected { border-color:var(--oz-color-primary);box-shadow:0 8px 20px rgba(0,124,142,.14);transform:translateY(-1px); }
.oz-clinic-filter-card.selected { outline:2px solid rgba(0,124,142,.12); }
.oz-doc-search-wrap { display:block;margin-top:12px; }
.oz-doc-search { margin:0; }
.oz-empty-state { padding:26px;border:1px dashed #c9d8dd;border-radius:16px;background:#fff;color:var(--oz-color-muted);text-align:center; }

.oz-doc-photo { width:164px;height:206px;border-radius:14px; }
.oz-doc-info { gap:9px; }
.oz-doc-name { font-size:22px;line-height:1.15; }
.oz-doc-spec { color:var(--oz-color-primary);font-size:14px;font-weight:600; }
.oz-doc-badges { display:flex;flex-wrap:wrap;gap:7px; }
.oz-doc-badges span { padding:5px 9px;border-radius:999px;background:#eef7f8;color:#476773;font-size:12px;font-weight:500; }
.oz-doc-lead { margin:1px 0;color:#405c69;font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
.oz-doc-clinic-line { margin-top:auto;padding-top:9px;border-top:1px solid #edf2f4;color:var(--oz-color-muted);font-size:13px;line-height:1.4; }
.oz-doc-clinic-line strong { color:var(--oz-color-ink); }
.oz-doc-right { min-width:174px;padding-top:0;align-self:stretch; }
.oz-doc-price { font-size:21px; }
.oz-doc-cta { padding:13px 15px; }
.oz-doc-card--all { min-height:160px;background:linear-gradient(135deg,#fff,#f0fafb); }
.oz-doc-card--all .oz-doc-photo { height:116px;align-self:center; }
.oz-doc-photo--all svg { width:52px;height:52px; }

.oz-clinic-block { display:grid;grid-template-columns:230px minmax(0,1fr);gap:0;padding:0;overflow:hidden; }
.oz-clinic-block-photo { width:100%;height:100%;min-height:270px;object-fit:cover; }
.oz-clinic-block-content { min-width:0;padding:22px; }
.oz-secondary-btn { margin-top:16px;padding:11px 16px;border:1px solid var(--oz-color-primary);border-radius:12px;background:#fff;color:var(--oz-color-primary);font:600 14px/1.2 'Jost',sans-serif;cursor:pointer; }

.oz-doc-cta,
.oz-submit {
  background: linear-gradient(135deg, var(--oz-color-primary), #0193a8);
  box-shadow: 0 8px 18px rgba(0,124,142,.18);
}

.oz-doc-cta:hover,
.oz-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--oz-color-primary-hover), var(--oz-color-primary));
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--oz-focus);
}

.oz-test-banner {
  max-width: 1092px;
  box-shadow: 0 8px 24px rgba(154,77,9,.08);
}

@media (max-width: 960px) {
  .oz-logo img { width: 190px; }
  .oz-hero-content { width: 62%; }
  .oz-clinic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oz-step { padding: 8px; }
  .oz-step em { display: none; }
}

@media (max-width: 760px) {
  .oz-filter-grid { grid-template-columns:1fr; }
  .oz-clinic-block { grid-template-columns:1fr; }
  .oz-clinic-block-photo { min-height:180px;height:180px; }
  .oz-doc-card { min-height:0; }
  .oz-doc-name { font-size:19px; }
}

@media (max-width: 640px) {
  .oz-header { min-height: 60px; padding: 10px 12px; }
  .oz-logo img { width: 138px; max-width: 38vw; }
  .oz-title { font-size: 15px; }
  .oz-container { padding: 16px 12px 52px; }
  .oz-steps { gap: 5px; margin-bottom: 14px; }
  .oz-step { padding: 6px 4px; }
  .oz-step span { width: 22px; height: 22px; flex-basis: 22px; }
  .oz-hero {
    min-height: 430px;
    border-radius: 22px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.95) 46%, rgba(255,255,255,.28) 74%, rgba(255,255,255,.04) 100%),
      url('../images/content/online-booking-hero.webp') 61% bottom / auto 72% no-repeat,
      #fff;
  }
  .oz-hero-content { width: 100%; padding: 26px 22px; }
  .oz-hero h2 { max-width: 330px; font-size: 32px; }
  .oz-hero p { max-width: 350px; font-size: 15px; }
  .oz-hero-benefits { margin-top: 17px; }
  .oz-hero-benefit { font-size: 12px; padding: 7px 9px; }
  .oz-card { border-radius: 20px; padding: 18px 14px; }
  .oz-clinic-grid { grid-template-columns: 1fr; gap: 12px; }
  .oz-clinic-pick { min-height: 0; }
  .oz-clinic-pick-photo { height: 152px; }
  .oz-clinic-filter-card { flex-basis:145px; }
  .oz-doc-photo { width:132px;height:166px; }
.oz-doc-photo { max-width:100%;height:auto;aspect-ratio:132/166; }
  .oz-doc-right { min-width:0; }
  .oz-clinic-block-content { padding:16px; }
}

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