/* =========================
   DEPARTMENTS — Cool UI (OKL)
   (mirrors specialists style)
========================= */

/* ================================================
   FILTERS WRAPPER — banner gradient
   ================================================ */

.dep-filters-wrapper {
    margin-bottom: 0;
    border-radius: 28px;
    background: linear-gradient(145deg, #6f8ce0 0%, #7a9bf2 50%, #5b73c8 100%);
    padding: 20px 28px;
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: 0 8px 40px rgba(91,115,200,.32), 0 2px 8px rgba(0,0,0,.06);
    border: none;
    animation: dpSlideIn 0.5s ease both;
    transition: box-shadow 0.3s ease, border-radius 0.4s ease;
}

.dep-filters-wrapper::before {
    content: '';
    position: absolute;
    top: -60px; right: -40px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.20) 0%, transparent 65%);
    pointer-events: none;
}
.dep-filters-wrapper::after {
    content: '';
    position: absolute;
    bottom: -50px; left: 40px;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%);
    pointer-events: none;
}

.dep-filters-wrapper:hover {
    transform: none;
}

@keyframes dpSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Title */
.title-dep-fil {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -.02em;
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0,0,0,.12);
    white-space: nowrap;
    margin: 0;
}

/* ================================================
   SEARCH ROW
   ================================================ */

.dep-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 200px;
    margin-bottom: 0;
}

.dep-search-row input {
    flex: 1;
    height: 40px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #fff !important;
    background: rgba(255,255,255,.15) !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    border-radius: 28px !important;
    outline: none !important;
    font-family: inherit;
    min-width: 0;
    transition: background .22s ease, border-color .22s ease !important;
    box-shadow: none !important;
}
.dep-search-row input::placeholder { color: rgba(255,255,255,.65) !important; }
.dep-search-row input:focus {
    background: rgba(255,255,255,.22) !important;
    border-color: rgba(255,255,255,.70) !important;
    box-shadow: none !important;
}

.dep-clear-btn {
    flex-shrink: 0;
    width: 40px !important;
    height: 40px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    cursor: pointer !important;
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    font-family: inherit;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    user-select: none;
    transition: background .22s ease, transform .22s ease, border-color .22s ease !important;
    white-space: nowrap;
}
.dep-clear-btn:hover {
    background: rgba(255,255,255,.30) !important;
    border-color: rgba(255,255,255,.60) !important;
    transform: scale(1.08) !important;
}
.dep-clear-btn:active { transform: scale(0.96) !important; }

/* ================================================
   TOGGLE
   ================================================ */

.dep-filters-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    margin-bottom: 0;
    list-style: none;
}

.dep-filters-wrapper .tgl { display: none; }

.dep-filters-wrapper .tgl-ios + .tgl-btn {
    display: block;
    width: 4.3em;
    height: 2em;
    padding: 2px;
    border: 1px solid rgba(255,255,255,.35) !important;
    border-radius: 2em;
    background: rgba(255,255,255,.18) !important;
    cursor: pointer;
    position: relative;
    transition: background 0.3s ease, border-color 0.3s ease;
    flex-shrink: 0;
    box-shadow: none !important;
}
.dep-filters-wrapper .tgl-ios + .tgl-btn::after {
    content: '';
    position: absolute;
    display: block !important;
    top: 2px; left: 2px;
    width: calc(50% - 2px);
    height: calc(100% - 4px);
    border-radius: 2em;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 3px 0 rgba(0,0,0,0.08);
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.dep-filters-wrapper .tgl-ios + .tgl-btn::before { display: none !important; }
.dep-filters-wrapper .tgl-ios:checked + .tgl-btn {
    background: rgba(255,255,255,.40) !important;
    border-color: rgba(255,255,255,.65) !important;
    box-shadow: none !important;
}
.dep-filters-wrapper .tgl-ios:checked + .tgl-btn::after { left: calc(50% + 2px); }
.dep-filters-wrapper .tgl-ios + .tgl-btn:active { box-shadow: none !important; }

.dep-filter-text {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,.90);
    white-space: nowrap;
    margin-top: 0;
}

/* Badge знайдено */
.dep-found-badge {
    padding: 6px 14px;
    border-radius: 28px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    margin: 0;
    margin-left: auto;
}

/* ================================================
   COLLAPSIBLE FILTERS CONTENT
   ================================================ */

.dep-filters-content {
    flex-basis: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height 0.4s ease, opacity 0.35s ease, transform 0.35s ease;
}
.dep-filters-wrapper.active .dep-filters-content {
    max-height: 300px;
    opacity: 1;
    transform: translateY(0);
}
.dep-filters-wrapper.active {
    padding-bottom: 4px;
}

.dep-filters-grid {
    display: flex;
    gap: 14px;
    padding: 16px 0 18px;
    flex-wrap: wrap;
}

.dep-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
    flex: 1;
}

.dep-filter-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    padding-left: 4px;
    margin-bottom: 2px;
    line-height: 1;
}

.dep-filters-grid select {
    width: 100%;
    height: 40px;
    padding: 0 36px 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background-color: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 28px;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23ffffff' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    transition: background-color .22s ease, border-color .22s ease;
    margin: 0;
}
.dep-filters-grid select option { background: #5b73c8; color: #fff; }
.dep-filters-grid select:hover {
    background-color: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.50);
}
.dep-filters-grid select:focus {
    background-color: rgba(255,255,255,.25);
    border-color: rgba(255,255,255,.70);
    box-shadow: none;
}

/* ================================================
   SORT BAR (окремий бар якщо є)
   ================================================ */

.dep-sort-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    animation: dpSlideIn 0.55s ease both;
    animation-delay: 0.05s;
}

.dep-sort-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    padding-left: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.dep-sort-select {
    height: 40px;
    padding: 0 36px 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background-color: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 28px;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23ffffff' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    transition: background-color .22s ease, border-color .22s ease;
    min-width: 170px;
}
.dep-sort-select option { background: #5b73c8; color: #fff; }
.dep-sort-select:hover {
    background-color: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.50);
}
.dep-sort-select:focus {
    background-color: rgba(255,255,255,.25);
    border-color: rgba(255,255,255,.70);
}
.dep-sort-select.is-active {
    background-color: rgba(255,255,255,.30);
    border-color: rgba(255,255,255,.70);
    font-weight: 700;
}

/* ================================================
   DEPARTMENTS CARDS GRID
   ================================================ */

/* ================================================
   A3 · COMPACT LIST-ROW
   Список відділень — горизонтальний рядок
   ================================================ */

.dep-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 25px;
    align-items: stretch;
}

/* CARD = клікабельний контейнер.
   Desktop layout:
     Ряд 1: [icon][title][cta]      [photo — на всю висоту картки]
     Ряд 2: [main         ][status] [photo продовж]
   Mobile: photo стає банером зверху на повну ширину. */
.dep-card,
.dep-cards-grid .dep-card {
    counter-increment: none !important;
    /* display БЕЗ !important — щоб JS міг ставити style.display='none' для пагінації "Показати ще" */
    display: grid;
    grid-template-columns: 64px 1fr auto 44px;
    grid-template-areas:
        "icon  title title  cta"
        "main  main  status status";
    column-gap: 18px;
    row-gap: 12px;
    align-items: start;
    padding: 18px 22px !important;
    background: #ffffff !important;
    border: 1px solid #e7eaf3 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 0 rgba(91,115,200,.03) !important;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer;
    min-height: 0 !important;
    position: relative;
    overflow: hidden;
    transition:
        border-color .5s cubic-bezier(.22,1,.36,1),
        box-shadow   .5s cubic-bezier(.22,1,.36,1) !important;
}
/* Якщо JS додасть hidden — гарантовано ховаємо (страховка від можливих !important у темі) */
.dep-card[style*="display: none"],
.dep-card[style*="display:none"] {
    display: none !important;
}

@media (hover: hover) {
    /* Без transform — щоб уникнути «блимання» на краю рамки
       (transform зміщує елемент, курсор виходить з нього, hover off → on → off …) */
    .dep-card:hover,
    .dep-cards-grid .dep-card:hover {
        border-color: #c4d0ff !important;
        box-shadow: 0 10px 26px rgba(91,115,200,.14), 0 2px 6px rgba(17,17,20,.05) !important;
    }
    .dep-card:hover .dep-card-cta {
        background: #5b73c8 !important;
        color: #ffffff !important;
    }
    .dep-card:hover .dep-card-icon-wrap > .dep-card-icon {
        background: linear-gradient(135deg, #6f8ce0 0%, #5b73c8 100%) !important;
        color: #ffffff !important;
    }
}

.dep-card::after,
.dep-card::before { content: none !important; }

/* === Hero photo на правому боці картки (desktop).
   Подвоюємо клас, щоб мати вищу специфічність ніж `.dep-cards-grid .dep-card` === */
.dep-card.dep-card-has-photo,
.dep-cards-grid .dep-card.dep-card-has-photo {
    grid-template-columns: 64px 1fr auto 44px 320px !important;
    grid-template-areas:
        "icon title title cta photo"
        "main main status status photo" !important;
    column-gap: 18px;
}
.dep-card-photo {
    grid-area: photo;
    display: block;
    /* розтягуємо за padding картки: справа -22, зверху/знизу -18, ліворуч лишаємо
       column-gap 18px між контентом і фото */
    margin: -18px -22px -18px 0;
    overflow: hidden;
    position: relative;
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
    background: linear-gradient(135deg, #f4f6fc 0%, #e6ebf8 100%);
    align-self: stretch;
    min-height: 100%;
}
.dep-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.dep-card-photo::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 30%;
    background: linear-gradient(90deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}
@media (hover: hover) {
    .dep-card:hover .dep-card-photo img {
        transform: scale(1.04);
    }
}

/* === Icon === */
.dep-card-icon-wrap {
    grid-area: icon;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    align-self: center;
}
.dep-card-icon-wrap > .dep-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #f4f6fd 0%, #e6ebf8 100%);
    color: #4257a8;
    flex-shrink: 0;
    box-shadow:
        inset 0 0 0 1px rgba(91,115,200,.08),
        0 2px 6px rgba(91,115,200,.10);
    transition: background .35s cubic-bezier(.22,1,.36,1),
                color .35s cubic-bezier(.22,1,.36,1),
                transform .35s cubic-bezier(.22,1,.36,1),
                box-shadow .35s cubic-bezier(.22,1,.36,1);
}
.dep-card-icon-wrap > .dep-card-icon svg {
    width: 30px;
    height: 30px;
    display: block;
}
@media (hover: hover) {
    .dep-card:hover .dep-card-icon-wrap > .dep-card-icon {
        transform: scale(1.04);
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.30),
            0 8px 22px rgba(91,115,200,.32);
    }
}

/* === Title — в окремому ряду grid === */
.dep-card-title {
    grid-area: title;
    align-self: center;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #111114 !important;
    line-height: 1.3;
    letter-spacing: -.005em;
    margin: 0 !important;
    text-decoration: none;
    /* На широких — обрізаємо однією лінією; на вузьких розгортаємо */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    transition: color .35s ease;
}

/* === Main — flex-column контейнер для tagline/badges/meta === */
.dep-card-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    align-self: start;
}
.dep-card:hover .dep-card-title { color: #4257a8 !important; }

/* tagline — повний опис що лікують у відділенні */
.dep-card-tagline {
    font-size: 14.5px;
    color: #4e5465;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* badges — chip-и з ключовими процедурами/спеціалізаціями */
.dep-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 6px;
    margin: 0;
}
.dep-card-badge {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 11px;
    border-radius: 50px;
    background: #eef1fb;
    color: #4257a8;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
.dep-card:hover .dep-card-badge {
    background: #e1e7fa;
}

.dep-card-meta {
    display: flex;
    align-items: center;
    gap: 8px 14px;
    font-size: 14px;
    color: #4e5465;
    flex-wrap: wrap;
    margin: 0;
}
.dep-card-meta > * + *::before {
    content: '·';
    margin-right: 12px;
    color: #c4c9d6;
}
.dep-card-type {
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #4e5465 !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    white-space: nowrap;
}

/* Бейдж типу відділення — окремий чіп над tagline */
.dep-card-type-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 50px;
    background: linear-gradient(135deg, #f4f6fc 0%, #e6ebf8 100%);
    border: 1px solid #d8e0f5;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(91,115,200,.06);
}
.dep-card-type-badge-label {
    color: #818696;
    font-weight: 600;
    letter-spacing: .01em;
}
.dep-card-type-badge-value {
    color: #4257a8;
    font-weight: 700;
}

/* Звичайний графік під телефонами — в один рядок */
.dep-card-reception {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 2px;
    line-height: 1.3;
}
.dep-card-reception-line {
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    color: #4e5465;
    letter-spacing: -.005em;
    white-space: nowrap;
}
.dep-card-reception-line:first-child {
    color: #111114;
}
.dep-card-reception-line + .dep-card-reception-line::before {
    content: '·';
    margin-right: 14px;
    color: #c4c9d6;
    font-weight: 400;
}
.dep-card-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4e5465;
    white-space: nowrap;
}
.dep-card-phone svg { color: #818696; flex-shrink: 0; width: 15px; height: 15px; }
.dep-phone-label {
    color: #818696;
    font-weight: 500;
}
.dep-phone-num {
    color: #111114;
    font-weight: 500;
}

/* === Status column (праворуч) === */
.dep-card-status {
    grid-area: status;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    white-space: nowrap;
}

/* Status-блок — група "графік + бейдж + прогрес" або "24/7 рядок + бейдж" */
.dep-status-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}
.dep-status-block-hours {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    line-height: 1.3;
}
.dep-status-block-hour-line {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #4e5465;
    white-space: nowrap;
    letter-spacing: -.005em;
}
.dep-status-block-247 {
    padding-top: 12px;
    border-top: 1px dashed #e1e7fa;
    align-self: stretch;
    align-items: flex-end;
}
.dep-status-block-247 .dep-status-block-hour-line {
    color: #157a3d;
    font-weight: 700;
}
.dep-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 12px;
    border-radius: 50px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
}
.dep-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dep-status-open  { background: #e6f4ec; color: #157a3d; }
.dep-status-open  .dep-status-dot { background: #1f9d55; }
.dep-status-break { background: #fdf4dd; color: #8a5d00; }
.dep-status-break .dep-status-dot { background: #c98a00; }
.dep-status-closed { background: #f3f5fa; color: #4e5465; }
.dep-status-closed .dep-status-dot { background: #b0b6c7; }

/* schedule badge — "Працюємо до X" / "Приходьте завтра з X" / "Чергова зміна цілодобово" */
.dep-status-schedule {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 50px;
    background: #eef1fb;
    color: #4257a8;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.dep-status-schedule svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .85; }
.dep-status-schedule-open    { background: #e6f4ec; color: #157a3d; }
.dep-status-schedule-break   { background: #fdf4dd; color: #8a5d00; }
.dep-status-schedule-closed  { background: #eef1fb; color: #4257a8; }

.dep-card-hours {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 12.5px;
    color: #818696;
    line-height: 1.4;
}
.dep-card-hour-line {
    display: block;
    white-space: normal;
}

/* ================================================
   TIME PROGRESS BAR — прогрес робочого часу сьогодні
   ================================================ */
.dep-time-progress {
    --now: 0%;
    --brk-start: 0%;
    --brk-end: 0%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    max-width: 360px;
    margin-top: 2px;
}
.dep-time-progress-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #4e5465;
    font-variant-numeric: tabular-nums;
}
.dep-time-start::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 5px;
    vertical-align: middle;
    opacity: .55;
}
.dep-time-end::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    margin-left: 5px;
    vertical-align: middle;
    opacity: .55;
}
.dep-time-progress-track {
    position: relative;
    height: 8px;
    border-radius: 50px;
    background: linear-gradient(180deg, #edf0f8 0%, #f4f6fc 100%);
    box-shadow: inset 0 1px 2px rgba(91,115,200,.10);
    overflow: hidden;
}
.dep-time-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--now);
    border-radius: 50px;
    background: linear-gradient(90deg, #1f9d55 0%, #4caf50 50%, #66bb6a 100%);
    box-shadow: 0 0 8px rgba(31,157,85,.28);
    animation: depTimeFillIn .9s cubic-bezier(.22,1,.36,1) both;
}
.dep-time-progress-break {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--brk-start);
    width: calc(var(--brk-end) - var(--brk-start));
    background: repeating-linear-gradient(
        45deg,
        rgba(255,193,7,.55),
        rgba(255,193,7,.55) 3px,
        rgba(255,255,255,.55) 3px,
        rgba(255,255,255,.55) 6px
    );
    z-index: 1;
}
.dep-time-progress-now {
    position: absolute;
    top: 50%;
    left: var(--now);
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #1f9d55;
    box-shadow: 0 0 0 0 rgba(31,157,85,.45), 0 2px 6px rgba(31,157,85,.40);
    animation: depTimePulse 1.8s ease-in-out infinite;
    z-index: 2;
}

@keyframes depTimePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(31,157,85,.45), 0 2px 6px rgba(31,157,85,.40); }
    50%      { box-shadow: 0 0 0 8px rgba(31,157,85,0),  0 2px 6px rgba(31,157,85,.40); }
}
@keyframes depTimeFillIn {
    from { width: 0; }
    to   { width: var(--now); }
}

/* States */
.dep-time-progress-break .dep-time-progress-fill {
    background: linear-gradient(90deg, #c98a00 0%, #e6a700 50%, #ffc107 100%);
    box-shadow: 0 0 8px rgba(201,138,0,.28);
}
.dep-time-progress-break .dep-time-progress-now {
    border-color: #c98a00;
    box-shadow: 0 0 0 0 rgba(201,138,0,.45), 0 2px 6px rgba(201,138,0,.40);
    animation-name: depTimePulseBreak;
}
@keyframes depTimePulseBreak {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201,138,0,.45), 0 2px 6px rgba(201,138,0,.40); }
    50%      { box-shadow: 0 0 0 8px rgba(201,138,0,0),  0 2px 6px rgba(201,138,0,.40); }
}
.dep-time-progress-closed .dep-time-progress-fill {
    background: linear-gradient(90deg, #b0b6c7 0%, #c4c9d6 100%);
    box-shadow: none;
    width: 100%;
    opacity: .55;
}
.dep-time-progress-closed .dep-time-progress-labels { color: #818696; }
.dep-time-progress-before .dep-time-progress-fill {
    width: 0;
}
.dep-time-progress-before .dep-time-progress-labels { color: #4e5465; }

/* === CTA arrow === */
.dep-card-cta {
    grid-area: cta;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0f2f8;
    color: #4257a8;
    transition: background .35s cubic-bezier(.22,1,.36,1),
                color .35s cubic-bezier(.22,1,.36,1);
    flex-shrink: 0;
}
.dep-card-cta svg { width: 18px; height: 18px; display: block; }

/* Старі елементи від попереднього шаблону — ховаємо */
.dep-card-img-wrap,
.dep-card-label,
.dep-card-divider,
.dep-card-desc,
.dep-card-btn { display: none !important; }

/* ================================================
   LOAD MORE BUTTON
   ================================================ */

.dep-load-more-wrapper {
    text-align: center;
    margin-top: 20px;
}
.dep-load-more-wrapper button,
#sp-load-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 26px;
    padding: 13px 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(145deg, #6f8ce0 0%, #7a9bf2 50%, #5b73c8 100%);
    color: #fff;
    font-family: inherit;
    letter-spacing: .02em;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.dep-load-more-wrapper button:hover,
#sp-load-more:hover {
    background: linear-gradient(145deg, #7a9bf2 0%, #8aabff 50%, #6f8ce0 100%);
    box-shadow: 0 10px 26px rgba(91,115,200,.42);
}
.dep-load-more-wrapper button:active,
#sp-load-more:active { box-shadow: 0 4px 12px rgba(91,115,200,.32); }

/* ================================================
   SHOWN COUNT
   ================================================ */

.dep-shown-count {
    text-align: center;
    margin-top: 26px;
    font-size: 14px;
    color: #4e5465;
}

/* ================================================
   CONTAINER / ANIMATIONS
   ================================================ */

#departments-container { position: relative; }
.spmedical-departments { will-change: opacity, transform; }

@keyframes dpFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes dpFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(6px); }
}
@keyframes dpSortExit {
    0%   { opacity: 1; transform: scale(1)    translateY(0);     }
    100% { opacity: 0; transform: scale(0.88) translateY(-12px); }
}
@keyframes dpSortEnter {
    0%   { opacity: 0; transform: scale(0.88) translateY(16px); }
    100% { opacity: 1; transform: scale(1)    translateY(0);    }
}

.dep-card-enter  { animation: dpFadeUp   0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
.dep-card-exit   { animation: dpFadeOut  0.2s  ease both; pointer-events: none; }
.dep-sort-exit   { animation: dpSortExit  180ms ease-in both; }
.dep-sort-enter  { animation: dpSortEnter 260ms cubic-bezier(0.22, 1, 0.36, 1) both; }

.dep-cards-grid.sorting {
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* ================================================
   dep-s-filters (secondary filters block)
   ================================================ */

.dep-s-filters-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding-top: 4px;
}
.dep-s-filter-field { display: flex; flex-direction: column; gap: 4px; }
.dep-s-filter-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    padding-left: 4px;
    margin-bottom: 2px;
    line-height: 1;
}
.dep-s-filters-grid select {
    width: 100%;
    height: 40px;
    padding: 0 36px 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background-color: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 28px;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23ffffff' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    transition: background-color .22s ease, border-color .22s ease;
    max-width: none;
}
.dep-s-filters-grid select option { background: #5b73c8; color: #fff; }
.dep-s-filters-grid select:hover  { background-color: rgba(255,255,255,.22); border-color: rgba(255,255,255,.50); }
.dep-s-filters-grid select:focus  { background-color: rgba(255,255,255,.25); border-color: rgba(255,255,255,.70); box-shadow: none; }

/* ================================================
   RESPONSIVE
   ================================================ */

@media (max-width: 1200px) {
    .dep-cards-grid { margin-top: 20px; }
    .dep-filter-field { min-width: 140px; }
}
@media (max-width: 900px) {
    .dep-filter-field { min-width: calc(50% - 7px); }
    .dep-s-filters-grid { grid-template-columns: repeat(2, 1fr); }

    /* На вузьких — main і status повертаються у повну ширину під рядом 1.
       Картка БЕЗ photo */
    .dep-card,
    .dep-cards-grid .dep-card {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "icon  title  cta"
            "main  main   main"
            "status status status";
        column-gap: 14px;
        row-gap: 12px;
        padding: 16px 18px !important;
        align-items: start;
    }
    /* Картка З photo — photo стає банером зверху на повну ширину */
    .dep-card.dep-card-has-photo,
    .dep-cards-grid .dep-card.dep-card-has-photo {
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas:
            "photo photo  photo"
            "icon  title  cta"
            "main  main   main"
            "status status status" !important;
    }
    .dep-card-photo {
        width: calc(100% + 36px);
        margin: -16px -18px 4px;
        height: 180px;
        min-height: 0;
        border-radius: 0;
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
        align-self: auto;
    }
    .dep-card-photo::after {
        inset: auto 0 0 0;
        width: auto;
        height: 40%;
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 100%);
    }
    .dep-card-icon-wrap,
    .dep-card-title,
    .dep-card-cta { align-self: center; }

    /* На мобільному назва розгортається без обрізки */
    .dep-card-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .dep-card-status { align-items: flex-start; }
    .dep-status-block { align-items: flex-start; }
    .dep-status-block-hours { align-items: flex-start; }
    .dep-status-block-247 { align-items: flex-start; }

    .dep-time-progress-track { height: 9px; }
    .dep-time-progress-now { width: 16px; height: 16px; }
}
@media (max-width: 860px) {
    .dep-filters-wrapper { flex-wrap: wrap; padding: 20px 22px 22px; gap: 14px; }
    .title-dep-fil { display: none; }
    .dep-search-row { flex: 1 1 100%; width: 100%; min-width: 0; }
    .dep-filters-toggle { flex: 1 1 auto; }
    .dep-found-badge { margin-left: auto; }
}
@media (max-width: 650px) {
    .dep-filters-wrapper { padding: 18px 16px 20px; gap: 12px; border-radius: 22px; }
    .dep-sort-bar { gap: 6px; }
    .dep-sort-label { padding-left: 0; font-size: 11px; }
    .dep-sort-select { font-size: 14px; height: 40px; min-width: 0; flex: 1; }
    .dep-filters-grid { gap: 7px; padding: 12px 0 14px; flex-direction: column; }
    .dep-filter-field { flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
    .dep-filter-label { flex: 0 0 90px; padding-left: 0; margin-bottom: 0; white-space: nowrap; }
    .dep-filter-field select { flex: 1; height: 40px; }
    .dep-s-filters-grid { grid-template-columns: 1fr; gap: 7px; }
    .dep-s-filter-field { flex-direction: row; align-items: center; gap: 8px; }
    .dep-s-filter-label { flex: 0 0 90px; padding-left: 0; margin-bottom: 0; white-space: nowrap; }
    .dep-s-filter-field select { flex: 1; height: 40px; }
}
@media (max-width: 600px) {
    .dep-cards-grid { gap: 10px; margin-top: 20px; }

    .dep-card,
    .dep-cards-grid .dep-card {
        padding: 18px 18px !important;
        border-radius: 16px !important;
        column-gap: 14px;
        row-gap: 14px;
    }
    .dep-card-photo {
        width: calc(100% + 36px);
        margin: -18px -18px 6px;
        height: 200px;
        border-radius: 0;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }
    .dep-card-icon-wrap > .dep-card-icon { width: 68px; height: 68px; }
    .dep-card-icon-wrap > .dep-card-icon svg { width: 34px; height: 34px; }

    /* Назва — повністю розгорнута, без обрізки */
    .dep-card-title {
        font-size: 20px !important;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.3;
    }
    /* tagline — повністю розгортається на всі рядки */
    .dep-card-tagline {
        font-size: 15.5px;
        -webkit-line-clamp: unset;
        display: block;
        overflow: visible;
    }
    /* Бейдж типу відділення — більший і ширший на мобільному */
    .dep-card-type-badge {
        padding: 8px 16px;
        gap: 8px;
        font-size: 14.5px;
    }
    /* badges — більші чіпи */
    .dep-card-badges { margin: 0; gap: 7px; }
    .dep-card-badge { height: 30px; padding: 0 13px; font-size: 14px; }

    /* Meta — стовпчиком, без роздільника */
    .dep-card-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        font-size: 15px;
    }
    .dep-card-meta > * + *::before { content: none; }
    .dep-card-phone { gap: 8px; }
    .dep-card-phone svg { width: 17px; height: 17px; }

    /* Графік під телефонами */
    .dep-card-reception { gap: 5px 14px; margin-top: 4px; }
    .dep-card-reception-line { font-size: 14.5px; }

    /* Status pill — крупніший */
    .dep-status-pill {
        height: 34px;
        padding: 0 14px;
        font-size: 14.5px;
        gap: 8px;
    }
    .dep-status-dot { width: 9px; height: 9px; }
    /* 24/7 бейдж і рядок екстреної допомоги */
    .dep-status-schedule {
        height: 32px;
        padding: 0 14px;
        font-size: 14px;
        gap: 7px;
    }
    .dep-status-schedule svg { width: 16px; height: 16px; }
    .dep-status-block-hour-line { font-size: 14.5px; }
    .dep-status-block { gap: 9px; }
    .dep-card-status { gap: 16px; }
    .dep-status-block-247 { padding-top: 16px; }

    /* CTA стрілка — крупніша */
    .dep-card-cta { width: 44px; height: 44px; }
    .dep-card-cta svg { width: 20px; height: 20px; }

    /* Прогрес-бар — повна ширина, крупніша смуга та дот */
    .dep-time-progress { width: 100%; max-width: none; gap: 7px; }
    .dep-time-progress-labels { font-size: 13px; }
    .dep-time-start::before,
    .dep-time-end::after { width: 6px; height: 6px; }
    .dep-time-progress-track { height: 11px; }
    .dep-time-progress-now { width: 18px; height: 18px; border-width: 3px; }
}
/* ================================================
   DEP_MODULE — SP Medical component overrides
   (перенесено з default-dp.php)
   ================================================ */

.spmedical-departments-list {
    --dp-accent:       linear-gradient(145deg, #6f8ce0 0%, #7a9bf2 50%, #5b73c8 100%);
    --dp-accent-h:     linear-gradient(145deg, #7a9bf2 0%, #8aabff 50%, #6f8ce0 100%);
    --dp-accent-solid: #607cd0;
    --dp-bg:           rgb(244,246,252);
    --dp-bg-card:      #ffffff;
    --dp-border:       rgba(0,0,0,0.06);
    --dp-text:         #111114;
    --dp-muted:        #4e5465;
    --dp-radius:       16px;
    --dp-radius-pill:  12px;
    --dp-shadow:       0 2px 18px rgba(91,115,200,.10), 0 1px 4px rgba(0,0,0,.03), inset 0 1px 0 rgba(255,255,255,.75);
    --dp-shadow-h:     0 14px 42px rgba(96,124,208,0.28), 0 2px 10px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.88);
    max-width: 1440px;
    margin: 0 auto;
    padding: 0;
    font-family: inherit;
    animation: dpSlideIn 0.5s ease both;
}

.dep-cards-grid,
#departments-container .spmedical-departments-wrapper,
#departments-container > .spmedical-row {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 25px;
    align-items: stretch;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

.spmedical-departments {
    margin: 0 !important;
    min-height: 0 !important;
}

.spmedical-departments.spmedical-col-xl-3,
.spmedical-departments.spmedical-col-lg-4,
.spmedical-departments.spmedical-col-md-6,
.spmedical-departments[class*="spmedical-col-"] {
    flex: none !important;
    max-width: none !important;
    width: 100% !important;
}

/* Старі обгортки попереднього шаблону, якщо випадково лишилися — ховаємо */
.spmedical-departments .spmedical-department-wrap { display: none !important; }

.dep-load-more-wrapper { text-align: center; }

#sp-load-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 26px;
    padding: 13px 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(145deg, #6f8ce0 0%, #7a9bf2 50%, #5b73c8 100%);
    color: #fff;
    font-family: inherit;
    letter-spacing: .02em;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
#sp-load-more:hover {
    background: linear-gradient(145deg, #7a9bf2 0%, #8aabff 50%, #6f8ce0 100%);
    box-shadow: 0 10px 26px rgba(91,115,200,.42);
}
#sp-load-more:active { box-shadow: 0 4px 12px rgba(91,115,200,.32); }

.dep-shown-count {
    text-align: center;
    margin-top: 26px;
    font-size: 14px;
    color: var(--dp-muted);
}

/* list-row не міняє кількість колонок — завжди 1fr */
@media (max-width: 860px) {
    .dep-filters-wrapper { flex-wrap: wrap; padding: 20px 22px 22px; gap: 14px; }
    .title-dep-fil { display: none; }
    .dep-search-row { flex: 1 1 100%; width: 100%; min-width: 0; }
    .dep-filters-toggle { flex: 1 1 auto; }
    .dep-found-badge { margin-left: auto; }
    .dep-filters-grid { flex-direction: column; gap: 8px; padding: 16px 0 18px; }
    .dep-filter-field { min-width: 0; }
}
@media (max-width: 600px) {
    #departments-container .spmedical-departments-wrapper,
    #departments-container > .spmedical-row {
        grid-template-columns: 1fr;
        margin-top: 0;
    }
    .dep-filters-wrapper { padding: 18px 16px 20px; gap: 12px; }
}