/* assets/punkty.css — стили страницы punkty.php (STORY-524).

   Вынесено из <style> как есть, байт в байт, без переупорядочивания и без попыток
   что-либо объединить. Причина одна: HTML страницы отдаётся с `Cache-Control:
   no-store` (следствие session_start), поэтому стили ехали заново при каждом
   открытии. Отдельным файлом они попадают под уже настроенный max-age статики.

   Порядок правил значим и сохранён — не сортировать и не группировать.
   Дедупликации с другими страницами здесь НЕТ намеренно: сведение классов через
   46 страниц меняет каскад на каждой, и это отдельная работа со своей проверкой. */
@import url('/assets/fonts/manrope.css?v=1');
:root{--bg:#F6F8F7;--surface:#FFF;--ink:#14201C;--soft:#5B6B65;--teal:#0E5E4E;--teal-d:#0B4C3F;--mint:#E4F0EB;--line:#E3E9E6;--warn:#B45309;--warn-bg:#FEF0DA;--warn-line:#F0C9A0;--late-bg:#F2EEE7;--late-line:#E0D9CE;--late-text:#6B5D4F;--hh:57px;}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Manrope',-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;}
/* sticky footer: подвал всегда у низа окна, даже если контент короче экрана (десктоп) */
#pgFooter{margin-top:auto;}
a{color:inherit;}
.wrap{max-width:1180px;width:100%;margin:0 auto;padding:0 20px;}
.head{border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:100;}
.head .row{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:none;margin:0;padding:0 48px;}
.head nav{display:flex;gap:22px;align-items:center;}
.head nav a{color:var(--soft);text-decoration:none;font-weight:600;font-size:15px;}
.head nav a:hover{color:var(--ink);}
.head nav a.active{color:var(--ink);}

/* Desktop top section */
.top{padding:22px 0 10px;}
.top h1{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.02em;}
.top p{color:var(--soft);margin-top:6px;}
.sel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--mint);border-radius:12px;padding:12px 16px;}
.sel .lbl{font-weight:700;}
.sel .val{font-family:Manrope,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--teal-d);}
.sel a.btn{margin-left:auto;}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:15px;text-decoration:none;padding:11px 20px;border-radius:999px;background:var(--teal);color:#fff;transition:background .15s;}
.btn:hover{background:var(--teal-d);}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);}

/* Desktop layout */
.layout{display:grid;grid-template-columns:380px 1fr;gap:18px;padding:14px 0 40px;}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;height:600px;}
.filters{padding:14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px;}
.filters input,.filters select{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:14px;background:#fff;}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--teal);}
.cnt{font-size:13px;color:var(--soft);padding:0 2px;}
.list{flex:1;overflow-y:auto;}
/* Поле метро над списком клиник — наглядная фильтрация по станции */
.list-metro{padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface);}
.list-metro input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:14px;background:#fff;}
.list-metro input:focus{outline:none;border-color:var(--teal);}
/* Кастомные подсказки станций (вместо уродливого datalist на десктопе) */
.metro-suggest{display:none;position:absolute;left:14px;right:14px;top:calc(100% - 4px);max-height:240px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(20,32,28,.12);z-index:30;}
.metro-suggest.show{display:block;}
.metro-suggest-item{padding:10px 14px;font:500 14px/1.3 Manrope,sans-serif;color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line-s);}
.metro-suggest-item:last-child{border-bottom:none;}
.metro-suggest-item:hover,.metro-suggest-item.active{background:var(--mint);color:var(--teal);}
.metro-suggest-item .ms-ico{color:var(--teal);flex-shrink:0;}
.metro-suggest-empty{padding:12px 14px;font:400 13px/1.3 Manrope,sans-serif;color:var(--muted);}
.pt{padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s;position:relative;}
.pt.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#0E5E4E;border-radius:0 2px 2px 0;}
.pt:hover{background:#F2F7F5;}
.pt.active{background:var(--mint);}
.pt .nm{font-weight:700;font-size:14px;}
.pt .ad{font-size:13px;color:var(--soft);margin-top:2px;}
#map{height:600px;border-radius:16px;overflow:hidden;border:1px solid var(--line);}
.nokey{height:600px;border-radius:16px;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;color:var(--soft);background:var(--surface);}
.mapwrap{position:relative;}
.progress{position:absolute;z-index:5;margin:10px;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--soft);}
/* STORY-207: акции партнёра живут в шите записи, а не на карте. Решение владельца
   03.08.2026: «карта — очень важный инструмент, там не может быть инфошума». В шите
   человек уже выбрал клинику и смотрит её часы и телефон — предложение той же
   клиники здесь по делу. Только заголовки: описание и срок — в карточке клиники.
   STORY-731 (13.08.2026): блок стоит сразу под адресом, до выбора даты — порядок
   задан владельцем. Раз он теперь стоит перед действием, а не после справочной
   части, отступы и кегль заголовка поджаты: каждая лишняя строка здесь отодвигает
   календарь вниз. Служебные строки (пометка «Реклама», рекламодатель, erid,
   лицензия и предупреждение о противопоказаниях) не сокращаются и не мельчают —
   это требование ФЗ-38, и читаемость юридического текста важнее экономии места. */
.cm-promo{background:#FFFCF5;border:1px solid #F0DCB4;border-left:3px solid #E6A417;
  border-radius:10px;padding:8px 11px;margin:0 0 12px;}
.cm-promo .cp-kicker{font:700 10px/1 Manrope,sans-serif;text-transform:uppercase;
  letter-spacing:.08em;color:#B07C0C;margin-bottom:4px;}
.cm-promo .cp-item{margin-top:4px;}
.cm-promo .cp-item:first-of-type{margin-top:0;}
.cm-promo .cp-title{display:block;font:700 13px/1.3 Manrope,sans-serif;color:#14201C;text-decoration:none;}
.cm-promo .cp-title:hover{color:var(--teal);}
.cm-promo .cp-legal{margin-top:8px;padding-top:6px;border-top:1px solid #F3E4C4;
  font:400 10px/1.45 Manrope,sans-serif;color:var(--muted);}
/* STORY-479: пометка «Реклама» и erid под заголовком акции. Кегль как у служебной
   строки ниже — это служебная информация. word-break: токен по словам не переносится
   и на узком балуне иначе распирает карточку. */
.cm-promo .cp-ad{margin-top:3px;font:400 10px/1.4 Manrope,sans-serif;color:var(--muted);
  word-break:break-word;}
/* STORY-207: издалека было непонятно, к какой точке относится карточка — хвостик
   балуна у Яндекса белый на белом с еле заметной тенью. Первая попытка красила его
   в зелёный: получился тёмный ромб, висящий отдельной фигурой под белой карточкой
   («страшненько», владелец 03.08.2026). Поэтому здесь хвостик остаётся белым, но
   крупнее и с той же тенью, что у карточки, — читается как её продолжение. А куда
   она показывает, видно по самой метке: выбранная перекрашивается (см. onPick).
   Селектор по вхождению класса: у ymaps в нём номер версии, он меняется с API. */
[class*="balloon__tail"]{width:28px !important;height:28px !important;}
[class*="balloon__tail"]:after{background:#fff !important;
  box-shadow:2px 2px 7px rgba(0,0,0,.16) !important;}
.balloon b{font-size:14px;}
.balloon .ba{color:#5B6B65;font-size:13px;margin:4px 0 10px;}
.balloon button{background:#0E5E4E;color:#fff;border:none;border-radius:8px;padding:8px 14px;font-weight:700;cursor:pointer;font-family:inherit;}
/* STORY-207: издалека было непонятно, к какой точке относится карточка — хвостик
   балуна у Яндекса белый на белом с еле заметной тенью. Первая попытка красила его
   в зелёный: получился тёмный ромб, висящий отдельной фигурой под белой карточкой
   («страшненько», владелец 03.08.2026). Поэтому здесь хвостик остаётся белым, но
   крупнее и с той же тенью, что у карточки, — читается как её продолжение. А куда
   она показывает, видно по самой метке: выбранная перекрашивается (см. onPick).
   Селектор по вхождению класса: у ymaps в нём номер версии, он меняется с API. */
[class*="balloon__tail"]{width:28px !important;height:28px !important;}
[class*="balloon__tail"]:after{background:#fff !important;
  box-shadow:2px 2px 7px rgba(0,0,0,.16) !important;}
.balloon b{font-size:14px;}
.balloon .ba{color:#5B6B65;font-size:13px;margin:4px 0 10px;}
.balloon button{background:#0E5E4E;color:#fff;border:none;border-radius:8px;padding:8px 14px;font-weight:700;cursor:pointer;font-family:inherit;}
@media(max-width:880px){.layout{grid-template-columns:1fr;}.panel{height:auto;max-height:400px;}#map,.nokey{height:380px;}}
/* Десктоп: карта и список тянутся почти на всю высоту окна (было фикс. 600px) */
@media(min-width:881px){
  .panel{height:calc(100vh - 210px);min-height:600px;}
  #map,.nokey{height:calc(100vh - 210px);min-height:600px;}
}

/* ===== MOBILE MAP-FIRST LAYOUT ===== */
/* Initially hide mobile-only elements */
#hamburger,#mobileBar,#mobileSelBar,#navDrawer,#navOverlay{display:none;}

@media(max-width:680px){
  /* Hide desktop chrome */
  .wrap.top{display:none;}
  .head nav{display:none;}
  #hamburger{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:none;background:none;cursor:pointer;border-radius:8px;padding:4px;}

  /* Full-screen map container */
  .wrap.layout{
    display:block;padding:0;margin:0;max-width:100%;
    position:fixed;top:var(--hh);left:0;right:0;bottom:0;
  }
  .mapwrap{position:absolute;inset:0;}
  #map,.nokey{position:absolute;inset:0;width:100%;height:100%;border-radius:0;border:none;}

  /* List panel = bottom sheet, hidden until toggled */
  .panel{
    position:fixed;bottom:0;left:0;right:0;z-index:400;
    height:62dvh;max-height:62dvh;
    border-radius:22px 22px 0 0;border:none;
    box-shadow:0 -4px 32px rgba(0,0,0,.18);
    transform:translateY(100%);
    transition:transform .3s cubic-bezier(.32,.72,0,1);
    display:flex;
    overscroll-behavior:contain;
  }
  .panel::before{content:none;}
  .panel.mob-open{transform:translateY(0);}
  #panelCloseBtn{display:flex;}

  /* When panel open, dim the map */
  #mapDim{position:fixed;inset:0;z-index:399;background:rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .3s;}
  #mapDim.show{opacity:1;pointer-events:all;}

  /* Mobile bottom action bar */
  #mobileBar{
    display:block;
    position:fixed;bottom:0;left:0;right:0;z-index:300;
    padding:10px 12px max(16px,env(safe-area-inset-bottom));
    background:rgba(255,255,255,0.96);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-top:1px solid #E3E9E6;
  }
  #barHandle{display:none;}
  #barBtns{display:flex;gap:8px;}
  #listBtn{
    flex:1;background:#fff;border:1.5px solid #D0D8D4;border-radius:14px;
    padding:14px 16px;font:600 15px/1 Manrope,sans-serif;color:#14201C;
    cursor:pointer;text-align:left;
    box-shadow:0 2px 10px rgba(0,0,0,0.07);
  }
  #listBtn.open{color:#0E5E4E;border-color:#0E5E4E;}
  #filterBtn{
    width:54px;height:54px;flex-shrink:0;
    background:#fff;border:1.5px solid #D0D8D4;border-radius:14px;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 10px rgba(0,0,0,0.07);
  }

  /* Selected point strip above bottom bar */
  #mobileSelBar{
    display:flex;
    position:fixed;bottom:102px;left:12px;right:12px;z-index:350;
    background:#fff;border-radius:14px;border:1px solid var(--line);
    box-shadow:0 2px 16px rgba(0,0,0,.12);
    padding:10px 14px;align-items:center;gap:10px;
  }
  #mobileSelBar.hidden{display:none;}

  /* Left nav drawer */
  #navOverlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1999;opacity:0;pointer-events:none;transition:opacity .25s;}
  #navOverlay.show{opacity:1;pointer-events:all;}
  #navDrawer{
    display:flex;flex-direction:column;
    position:fixed;top:0;left:0;bottom:0;width:min(280px,85vw);
    background:#fff;z-index:2000;
    transform:translateX(-110%);transition:transform .3s cubic-bezier(.32,.72,0,1);
    box-shadow:4px 0 24px rgba(0,0,0,.12);
  }
  #navDrawer.open{transform:translateX(0);}

  /* Adjust panel filters for mobile (add top padding for handle) */
  .filters{padding-top:24px;}
  /* Hide footer — full-screen map page */
  #pgFooter{display:none;}

  /* Bigger tap targets in list */
  .pt{padding:16px;}
  .filters input,.filters select{font-size:16px;}
  /* Hide desktop filters on mobile — filter modal used instead */
  .filters{display:none;}
  /* Hide desktop-only clinic modal elements on mobile */
  #cmTags,#cmHours,#cmDirections,.cm-secondary{display:none!important;}
  #clinicModal .cm-name,#clinicModal .cm-addr{display:none;}
  /* Show mobile-only elements */
  #cmTitle{display:block;font:800 18px/1.2 Manrope,sans-serif;color:#14201C;letter-spacing:-.02em;}
  .cm-mob-lbl{display:block;}
  /* Hide desktop-only clinic divider/labels */
  #cmDesktopDivider,#cmDesktopDateSec,#cmDesktopTimeSec{display:none;}
  /* Compact map on mobile */
  #cmMap iframe{height:130px!important;}
}

@media(min-width:681px){
  #cmTitle,#cmMobHeader{display:none;}
  #cmInfoRow{display:none!important;}
}

/* ---- Clinic sidebar / bottom sheet ---- */
#clinicOverlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;opacity:0;transition:opacity .25s;display:none;}
#clinicOverlay.show{opacity:1;}
#clinicModal{position:fixed;z-index:1001;background:#fff;display:none;flex-direction:column;transition:transform .32s cubic-bezier(.32,.72,0,1),opacity .22s;opacity:0;}
#clinicModal.show{opacity:1;}
@media(max-width:680px){
  #clinicModal{bottom:0;left:0;right:0;border-radius:22px 22px 0 0;max-height:92dvh;transform:translateY(110%);}
  #clinicModal.show{transform:translateY(0);}
}
@media(min-width:681px){
  #clinicModal{top:0;right:0;bottom:0;width:460px;border-radius:20px 0 0 20px;max-height:100vh;transform:translateX(110%);}
  #clinicModal.show{transform:translateX(0);}
  #cmHandle{display:none;}
}
.cm-handle{display:none!important;}
.cm-scroll{overflow-y:auto;flex:1;padding:14px 20px 8px;overscroll-behavior:contain;overflow-x:hidden;}
.cm-close{position:absolute;top:10px;right:12px;z-index:2;width:28px;height:28px;border-radius:50%;border:none;background:rgba(14,94,78,.09);color:#5B6B65;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;}
.cm-close:hover{background:rgba(14,94,78,.17);color:var(--ink);}
/* Mobile-only compact header */
#cmMobHeader{margin-bottom:12px;}
#cmMobClinicRow{display:flex;align-items:center;gap:8px;margin-top:4px;}
#cmMobName{font:400 13px/1 Manrope,sans-serif;color:#5B6B65;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#cmMobKlinika{font:600 12px/1 Manrope,sans-serif;color:#0E5E4E;text-decoration:none;white-space:nowrap;flex-shrink:0;}
/* Section mini-labels (mobile) */
.cm-mob-lbl{display:none;font:700 11px/1 Manrope,sans-serif;color:#9BADA6;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;}
#cmTimeLbl{margin-top:14px;}
.cm-name{font:800 19px/1.25 Manrope,sans-serif;color:var(--ink);letter-spacing:-.02em;margin-bottom:4px;}
.cm-addr{font:400 14px/1.4 Manrope,sans-serif;color:var(--soft);margin-bottom:12px;}
.cm-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.cm-tag{font:700 11px/1 Manrope,sans-serif;padding:4px 10px;border-radius:999px;white-space:nowrap;}
.cm-tag.child{background:#DCFCE7;color:#15803D;}
.cm-tag.wknd{background:var(--mint);color:var(--teal-d);}
.cm-tag.park{background:#EEF2FF;color:#3730A3;}
.cm-hours{display:flex;align-items:flex-start;gap:8px;font:400 13px/1.45 Manrope,sans-serif;color:var(--soft);background:var(--bg);border-radius:10px;padding:10px 12px;margin-bottom:16px;}
.cm-divider{height:1px;background:var(--line);margin:0 -22px 16px;}
.cm-sec{font:700 12px/1 Manrope,sans-serif;color:var(--soft);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px;}
.date-strip{display:flex;gap:7px;overflow-x:auto;padding-bottom:6px;margin-bottom:16px;scrollbar-width:none;}
.date-strip::-webkit-scrollbar{display:none;}
/* STORY-537: дата и слот — <button>, а не <div>: иначе фокус на них не встаёт и
   записаться с клавиатуры нельзя. Сброс ниже возвращает кнопке вид прежней
   плашки (у кнопки свои фон, шрифт и рамка от браузера). */
.date-pill,.time-slot{background:none;color:inherit;font-family:inherit;text-align:center;-webkit-appearance:none;appearance:none;}
.date-pill:focus-visible,.time-slot:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.date-pill{flex-shrink:0;width:62px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 6px;border-radius:12px;border:1.5px solid var(--line);cursor:pointer;transition:border-color .14s,background .14s,color .14s;}
.date-pill:hover{border-color:var(--teal);}
.date-pill.sel{border-color:var(--teal);background:var(--mint);color:var(--teal-d);}
.date-pill.sel .dp-mon{opacity:1;}
.dp-day{font:600 10px/1 Manrope,sans-serif;text-transform:uppercase;letter-spacing:.06em;}
.dp-num{font:800 18px/1 Manrope,sans-serif;}
.dp-mon{font:400 11px/1 Manrope,sans-serif;opacity:.8;}
.time-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px;}
@media(min-width:400px){.time-grid{grid-template-columns:repeat(5,1fr);}}
.time-slot{padding:0;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1.5px solid var(--line);font:700 13px/1 Manrope,sans-serif;cursor:pointer;transition:border-color .15s,background .15s,color .15s;}
.time-slot:hover{border-color:var(--teal);}
.time-slot.sel{border-color:var(--teal);background:var(--mint);color:var(--teal-d);}
/* STORY-692: слоты ≥12:00 — нейтральный холодный фон (зеркало checkout.php).
   Владелец 12.08.2026: одной линии и мелкой подписи не хватало, люди границу не
   замечали. Первая итерация (персиковый) прочиталась как «аларм/недоступно» —
   переведено в спокойный нейтральный серый: «другая группа», а не «нельзя».
   Выбранный поздний слот всё равно зажигается teal/mint (.sel). Решение STORY-437
   не красить слоты — пересмотрено. */
.time-slot.late{background:var(--late-bg);border-color:var(--late-line);}
.time-slot.late:hover{border-color:#B8C5BF;}
.time-slot.late.sel{border-color:var(--teal);background:var(--mint);color:var(--teal-d);}
.time-slot.past,.time-slot:disabled{color:#C8D4D0;border-color:#F0F4F2;cursor:default;}
.time-slot:disabled:hover{border-color:#F0F4F2;}
/* STORY-437: та же граница отсечки 11:40, что в чекауте и в приложении. Линия —
   полноширинный ребёнок грида (grid-column:1/-1), поэтому переносит остаток на
   новую строку и на 4 колонках, и на 5 (≥400px). Текст к линии не подвешен: это
   дисклеймер ко всему ряду времени и стоит под сеткой (решение владельца
   09.08.2026). */
.time-split{grid-column:1/-1;border-top:1px solid var(--late-line);margin:2px 0;height:0;font-size:0;}
/* STORY-692 (12.08.2026): из мелкой подписи — заметная плашка (фон, рамка, кегль
   13, вес 700), иначе подпись терялась под сеткой. Тон — нейтральный, не аларм. */
.time-note{
  display:block;background:var(--late-bg);border:1px solid var(--late-line);
  border-radius:10px;padding:9px 12px;
  font:700 13px/1.4 Manrope,sans-serif;color:var(--late-text);
  margin:0 0 10px;
}
.cm-footer{padding:14px 22px 28px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;flex-shrink:0;background:#fff;}
.cm-book{width:100%;padding:0 20px;height:52px;border:none;border-radius:999px;background:var(--teal);color:#fff;font:700 15px/1 Manrope,sans-serif;cursor:pointer;transition:background .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;}
.cm-book:hover:not(:disabled){background:var(--teal-d);}
.cm-book:disabled{background:#D0D8D4;cursor:default;}
.cm-secondary{display:flex;justify-content:center;gap:20px;}
.cm-secondary a{font:600 13px/1 Manrope,sans-serif;color:var(--teal);text-decoration:none;cursor:pointer;}
.cm-secondary a:hover{text-decoration:underline;}
/* Filter modal chips */
.flt-row{display:flex;flex-direction:column;gap:9px;}
.flt-lbl{font:700 11px/1 Manrope,sans-serif;color:#9BADA6;text-transform:uppercase;letter-spacing:.07em;}
.flt-input{width:100%;border:1.5px solid #E3E9E6;border-radius:12px;padding:13px 14px;font:400 16px/1 Manrope,sans-serif;color:#14201C;background:#fff;box-sizing:border-box;-webkit-appearance:none;}
.flt-input::placeholder{color:#9BADA6;}
.flt-input:focus{outline:none;border-color:#0E5E4E;}
.flt-chips{display:flex;gap:8px;flex-wrap:wrap;}
.flt-chip{border:1.5px solid #E3E9E6;border-radius:999px;padding:10px 16px;font:600 13px/1 Manrope,sans-serif;color:#5B6B65;background:#fff;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s;-webkit-tap-highlight-color:transparent;}
.flt-chip.active{background:#0E5E4E;border-color:#0E5E4E;color:#fff;}
/* Filter date pills (horizontal scroll, no native picker) */
.flt-dates{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.flt-dates::-webkit-scrollbar{display:none;}
.flt-dpill{flex-shrink:0;min-width:58px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px;border-radius:12px;border:1.5px solid #E3E9E6;background:#fff;cursor:pointer;transition:background .15s,border-color .15s,color .15s;-webkit-tap-highlight-color:transparent;}
.flt-dpill.active{background:#0E5E4E;border-color:#0E5E4E;color:#fff;}
.flt-dpill .d-day{font:600 10px/1 Manrope,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:inherit;opacity:.75;}
.flt-dpill .d-num{font:800 17px/1 Manrope,sans-serif;color:inherit;}
.flt-dpill .d-mon{font:400 10px/1 Manrope,sans-serif;color:inherit;opacity:.7;}
.flt-dpill.any{justify-content:center;font:600 13px/1.2 Manrope,sans-serif;text-align:center;min-width:74px;}