body.patient-doctors-page-body {
    margin: 0;
    background: var(--color-3);
    color: var(--color-0);
    font-family: var(--font-primary);
}

body.patient-doctors-page-body *,
body.patient-doctors-page-body *::before,
body.patient-doctors-page-body *::after {
    box-sizing: border-box;
}

.patient-doctors-page-body .app-shell {
    min-height: 100vh;
    overflow-x: hidden;
}

.patient-doctors-page-body .portal-layout,
.patient-doctors-page-body.portal-body--patient .portal-layout--patient {
    display: grid;
    min-height: 100vh;
    grid-template-columns: var(--patient-sidebar-width, 252px) minmax(0, 1fr);
    align-items: start;
}

.patient-doctors-page-body .portal-stage {
    min-width: 0;
    padding: var(--space-32) var(--space-40) var(--space-40) var(--space-24);
    gap: var(--space-24);
    align-items: flex-start;
    background: var(--color-3);
}

.patient-doctors-page-body .portal-main {
    width: 100%;
    min-width: 0;
    display: block;
}

.patient-doctors-page-body .portal-topbar {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-24);
    align-items: end;
}

.patient-doctors-page-body .portal-topbar > div:first-child {
    min-width: 0;
}

.patient-doctors-page-body .portal-topbar__actions {
    display: none;
}

.patient-doctors-page {
    width: 100%;
    min-width: 0;
    display: grid;
    gap: var(--space-24);
}

.patient-doctors-page__breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
    color: var(--color-15);
}

.patient-doctors-page__breadcrumb-link {
    color: inherit;
    text-decoration: none;
}

.patient-doctors-page__breadcrumb-link:hover,
.patient-doctors-page__breadcrumb-link:focus-visible {
    color: var(--color-0);
    outline: none;
}

.patient-doctors-page__breadcrumb-current {
    color: var(--color-0);
}

.patient-doctors-page__breadcrumb-separator {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-15);
}

.patient-doctors-page__breadcrumb-separator svg {
    width: 16px;
    height: 16px;
}

.patient-doctors-page__filters {
    display: grid;
    gap: var(--space-24);
}

.patient-doctors-page__search-icon,
.patient-doctors-page__datetime-leading,
.patient-doctors-page__sort-leading {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.patient-doctors-page__datetime-leading img,
.patient-doctors-page__sort-leading img {
    width: 16px;
    height: 16px;
    display: block;
}

.patient-doctors-page__toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 284px) minmax(220px, 284px);
    gap: var(--space-24);
    align-items: end;
}

.patient-doctors-page__datetime-picker,
.patient-doctors-page__dropdown {
    min-width: 0;
    align-self: end;
}

.patient-doctors-page__datetime-picker {
    position: relative;
    width: fit-content;
    max-width: 100%;
    justify-self: start;
}

.patient-doctors-page__dropdown {
    width: 100%;
    justify-self: end;
}

.patient-doctors-page__datetime-caption {
    margin-bottom: var(--space-8);
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    color: var(--color-0);
}

.patient-doctors-page__datetime-caption-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.patient-doctors-page__datetime-caption-icon img {
    width: 16px;
    height: 16px;
    display: block;
}

.patient-doctors-page__dropdown .patient-profile-edit__control-wrap {
    display: block;
}

.patient-doctors-page__dropdown .patient-profile-edit__control,
.patient-doctors-page__datetime-trigger {
    min-height: 48px;
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--color-43);
    border-radius: var(--radius-12);
    display: grid;
    align-items: center;
    gap: var(--space-8);
    background: var(--color-3);
    color: var(--color-0);
    outline: none;
}

.patient-doctors-page__dropdown .patient-profile-edit__control {
    width: 100%;
}

.patient-doctors-page__datetime-trigger {
    width: auto;
    max-width: 100%;
    grid-template-columns: 16px minmax(0, 1fr);
    column-gap: var(--space-8);
    text-align: left;
    position: relative;
}

.patient-doctors-page__datetime-trigger:hover,
.patient-doctors-page__datetime-trigger:focus-visible,
.patient-doctors-page__dropdown .patient-profile-edit__control:hover,
.patient-doctors-page__dropdown .patient-profile-edit__control:focus-visible,
.patient-doctors-page__dropdown .patient-profile-edit__control[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--color-6) 32%, var(--color-43));
}

.patient-doctors-page__datetime-label,
.patient-doctors-page__dropdown-trigger--with-leading .ui-dropdown__trigger-label,
.patient-doctors-page__mobile-filter {
    min-width: 0;
}

.patient-doctors-page__datetime-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-doctors-page__dropdown-trigger--with-leading {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) 20px;
    align-items: center;
    column-gap: var(--space-8);
}

.patient-doctors-page__datetime-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 40;
    width: fit-content;
    max-width: min(calc(100vw - 96px), 560px);
}

.patient-doctors-page__datetime-surface {
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--color-43);
    border-radius: var(--radius-16);
    display: grid;
    grid-template-columns: 132px auto;
    overflow: hidden;
    background: var(--color-3);
    box-shadow: 0 18px 36px rgba(34, 44, 72, 0.12);
    align-items: start;
}

.patient-doctors-page__time-column {
    border-right: 1px solid color-mix(in srgb, var(--color-43) 88%, transparent);
    background: var(--color-3);
    min-height: 0;
    overflow: hidden;
}

.patient-doctors-page__time-list {
    height: 100%;
    min-height: 0;
    padding: var(--space-20);
    display: grid;
    align-content: start;
    gap: var(--space-8);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.patient-doctors-page__time-option {
    min-height: 40px;
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--color-43);
    border-radius: var(--radius-12);
    background: var(--color-3);
    color: var(--color-0);
    text-align: center;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.patient-doctors-page__time-option:hover,
.patient-doctors-page__time-option:focus-visible {
    border-color: color-mix(in srgb, var(--color-6) 32%, var(--color-43));
    outline: none;
}

.patient-doctors-page__time-option.is-selected {
    border-color: var(--color-6);
    background: var(--color-6);
    color: var(--color-3);
}

.patient-doctors-page__time-empty {
    margin: 0;
    color: var(--color-15);
}

.patient-doctors-page__calendar-column {
    padding: var(--space-12);
    display: flex;
    align-items: stretch;
    width: fit-content;
}

.patient-doctors-page__calendar-mount {
    width: fit-content;
}

.patient-doctors-page__calendar-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.patient-doctors-page__calendar-column .flatpickr-calendar {
    box-shadow: none;
}

.patient-doctors-page__calendar-column .flatpickr-calendar.inline {
    width: auto;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

.patient-doctors-page__datetime-footer {
    padding-top: var(--space-12);
    display: flex;
    justify-content: flex-end;
}

.patient-doctors-page__datetime-clear.ui-outlined-neutral-button {
    min-width: 120px;
}

.patient-doctors-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
    width: 100%;
}

.patient-doctors-page__grid[hidden],
.patient-doctors-page__empty[hidden] {
    display: none !important;
}

.patient-doctors-card {
    width: 100%;
    padding: 16px;
    border: 1px solid var(--color-43);
    border-radius: var(--radius-16);
    display: grid;
    grid-template-columns: 120px minmax(220px, 280px) minmax(0, 1fr) minmax(130px, 150px) minmax(150px, 170px);
    gap: var(--space-24);
    align-items: center;
    background: var(--color-3);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.patient-doctors-card:hover,
.patient-doctors-card:focus-visible {
    border-color: color-mix(in srgb, var(--color-6) 28%, var(--color-43));
    box-shadow: 0 18px 36px rgba(34, 44, 72, 0.08);
    transform: translateY(-2px);
    outline: none;
}

.patient-doctors-card__media {
    width: 120px;
    aspect-ratio: 1;
    border-radius: var(--radius-10);
    overflow: hidden;
    background: color-mix(in srgb, var(--color-0) 8%, var(--color-3));
}

.patient-doctors-card__media img,
.patient-doctors-card__fallback {
    width: 100%;
    height: 100%;
    display: block;
}

.patient-doctors-card__media img {
    object-fit: cover;
}

.patient-doctors-card__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-6) 18%, var(--color-3));
    color: var(--color-0);
}

.patient-doctors-card__identity,
.patient-doctors-card__description,
.patient-doctors-card__summary {
    min-width: 0;
}

.patient-doctors-card__identity {
    display: grid;
    gap: var(--space-12);
}

.patient-doctors-card__heading {
    display: grid;
    gap: var(--space-4);
}

.patient-doctors-card__name,
.patient-doctors-card__specialization,
.patient-doctors-card__brief,
.patient-doctors-card__price,
.patient-doctors-card__reviews-value {
    margin: 0;
    min-width: 0;
}

.patient-doctors-card__specialization {
    color: var(--color-0);
}

.patient-doctors-card__brief {
    color: var(--color-15);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.patient-doctors-card__meta {
    display: grid;
    align-content: start;
    gap: var(--space-8);
}

.patient-doctors-card__rating-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
}

.patient-doctors-card__rating-summary {
    color: var(--color-0);
}

.patient-doctors-card__meta-details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-12);
}

.patient-doctors-card__reviews-value,
.patient-doctors-card__duration,
.patient-doctors-card__price-label {
    color: var(--color-15);
}

.patient-doctors-card__duration {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}

.patient-doctors-card__duration-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background: currentColor;
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.patient-doctors-card__summary {
    display: grid;
    gap: var(--space-8);
    justify-items: start;
}

.patient-doctors-card__actions {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
}

.patient-doctors-card__booking-form {
    width: 100%;
}

.patient-doctors-card__action.ui-accent-button {
    width: 100%;
    max-width: none;
    min-height: 40px;
    padding: 8px 14px;
    text-decoration: none;
    justify-content: center;
    line-height: 1.2;
}

.patient-doctors-page__more {
    display: flex;
    justify-content: center;
}

.patient-doctors-page__more[hidden] {
    display: none !important;
}

.patient-doctors-page__more-button.ui-accent-button {
    min-width: 164px;
    justify-content: center;
    color: var(--color-4);
    text-decoration: none;
}

.patient-doctors-page__empty {
    width: 100%;
    padding: var(--space-32);
    border: 1px solid var(--color-43);
    border-radius: var(--radius-16);
    display: grid;
    gap: var(--space-8);
    background: var(--color-3);
}

.patient-doctors-page__empty h2,
.patient-doctors-page__empty p {
    margin: 0;
}

.patient-doctors-page-body .portal-footer {
    margin-top: var(--space-80);
    padding: var(--space-80) 0 var(--space-96);
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.patient-doctors-page-body .portal-footer__half {
    padding: 0 var(--space-40);
}

.patient-doctors-page-body .portal-footer__column--brand {
    gap: 30px;
}

.patient-doctors-page-body .portal-footer__description {
    max-width: 290px;
}

.patient-doctors-page-body .portal-footer__nav-group {
    gap: 56px;
}

@media (max-width: 1200px) {
    .patient-doctors-page-body .portal-stage {
        padding-left: var(--space-24);
    }

    .patient-doctors-card {
        grid-template-columns: 108px minmax(0, 240px) minmax(0, 1fr) minmax(120px, 140px) minmax(140px, 156px);
        gap: var(--space-16);
    }
}

@media (max-width: 1100px) {
    .patient-doctors-page-body .portal-layout,
    .patient-doctors-page-body.portal-body--patient .portal-layout--patient {
        grid-template-columns: 1fr;
    }

    .patient-doctors-page-body .portal-stage {
        padding: var(--space-16) var(--space-16) var(--space-40);
        align-items: stretch;
    }

    .patient-doctors-page {
        gap: var(--space-20);
    }

    .patient-doctors-page__filters {
        gap: var(--space-20);
    }

    .patient-doctors-page__toolbar {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }

    .patient-doctors-page__datetime-picker {
        grid-column: 1 / -1;
        position: relative;
        width: 100%;
    }

    .patient-doctors-page__datetime-panel {
        position: static;
        width: 100%;
        margin-top: var(--space-12);
        max-width: none;
    }

    .patient-doctors-page__datetime-surface {
        grid-template-columns: 128px minmax(0, 1fr);
        width: 100%;
    }

    .patient-doctors-page__calendar-column .flatpickr-calendar.inline {
        width: 100%;
    }

    .patient-doctors-page__datetime-trigger {
        width: 100%;
        min-width: 0;
    }

    .patient-doctors-page__grid {
        gap: var(--space-16);
    }

    .patient-doctors-card {
        padding: var(--space-16);
        grid-template-columns: 1fr;
        gap: var(--space-12);
        align-items: start;
    }

    .patient-doctors-card__media {
        width: 100%;
        aspect-ratio: 251 / 200;
    }

    .patient-doctors-card__identity,
    .patient-doctors-card__description,
    .patient-doctors-card__summary,
    .patient-doctors-card__actions {
        width: 100%;
    }

    .patient-doctors-card__meta {
        gap: var(--space-8);
    }

    .patient-doctors-card__brief {
        -webkit-line-clamp: 3;
    }

    .patient-doctors-card__summary {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .patient-doctors-card__price-label {
        grid-column: 1;
    }

    .patient-doctors-card__price {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .patient-doctors-page__more-button.ui-accent-button {
        width: 100%;
        max-width: none;
    }

    .patient-doctors-page-body .portal-topbar {
        gap: var(--space-16);
    }
}

@media (max-width: 767px) {
    .patient-doctors-page__toolbar {
        grid-template-columns: 1fr;
    }

    .patient-doctors-page__datetime-surface {
        grid-template-columns: 1fr;
    }

    .patient-doctors-page__time-column {
        border-right: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--color-43) 88%, transparent);
    }

    .patient-doctors-page__time-list {
        max-height: 180px;
    }
}