﻿.home-live-booking-form select:disabled {
    cursor: not-allowed;
    opacity: .72;
}

.home-booking-feedback {
    min-height: 1.25rem;
    margin: .2rem 0 .65rem;
    color: rgba(255, 255, 255, .88);
    font-size: .8rem;
    line-height: 1.45;
}

.home-booking-feedback[data-state="error"] {
    color: #ffe2e2;
}

.home-booking-feedback[data-state="empty"] {
    color: #fff1b8;
}

.home-booking-feedback[data-state="loading"]::before {
    content: "";
    width: .7rem;
    height: .7rem;
    display: inline-block;
    margin-inline-end: .4rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: home-booking-spin .8s linear infinite;
}

@keyframes home-booking-spin {
    to {
        transform: rotate(360deg);
    }
}

.home-booking-secondary-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
    margin-top: .8rem;
}

.home-booking-secondary-links .booking-status-home-link {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin: 0;
    padding: .55rem .65rem;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 10px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: .76rem;
    font-weight: 800;
}

.home-booking-secondary-links .booking-status-home-link:hover {
    background: rgba(255, 255, 255, .1);
}

.quick-service-emergency .quick-service-icon {
    color: #c9303e;
    background: rgba(201, 48, 62, .11);
}

.home-upcoming-appointments {
    padding: clamp(2.2rem, 5vw, 4.5rem) 0;
    background:
        linear-gradient(180deg, #f5fbfb 0%, #fff 100%);
}

.home-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.35rem;
}

.home-section-heading span {
    color: #16828d;
    font-weight: 900;
}

.home-section-heading h2 {
    margin: .2rem 0;
    color: #123e47;
    font-size: clamp(1.55rem, 3vw, 2.25rem);
}

.home-section-heading p {
    margin: 0;
    color: #64777d;
}

.home-section-heading > a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    color: #0f6972;
    font-weight: 900;
    text-decoration: none;
}

.home-upcoming-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.home-upcoming-card {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    min-width: 0;
    padding: 1rem;
    background: #fff;
    border: 1px solid #dcebed;
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(18, 80, 89, .07);
}

.home-upcoming-doctor {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: inherit;
    text-decoration: none;
}

.home-upcoming-doctor img,
.home-upcoming-doctor > span {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    flex: 0 0 52px;
    border-radius: 50%;
    object-fit: cover;
    background: #edf7f7;
    color: #0f6972;
    font-size: 1.5rem;
}

.home-upcoming-doctor small,
.home-upcoming-doctor strong {
    display: block;
}

.home-upcoming-doctor small {
    margin-bottom: .18rem;
    color: #16828d;
    font-size: .76rem;
    font-weight: 800;
}

.home-upcoming-doctor strong {
    color: #153f47;
    line-height: 1.35;
}

.home-upcoming-time {
    display: grid;
    gap: .4rem;
    padding: .75rem;
    color: #31565d;
    background: #f4f9f9;
    border-radius: 12px;
}

.home-upcoming-time span {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.home-upcoming-card > p {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    color: #667b81;
    font-size: .82rem;
}

.home-upcoming-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin-top: auto;
    padding: .72rem .85rem;
    color: var(--home-upcoming-book-text, #fff);
    background: var(--home-upcoming-book-bg, #0f6972);
    border-radius: 11px;
    text-decoration: none;
    font-weight: 900;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.home-upcoming-book:hover,
.home-upcoming-book:focus-visible {
    color: var(--home-upcoming-book-text, #fff);
    background: var(--home-upcoming-book-hover, #0b535c);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(13, 70, 84, .16);
}

.schedule-doctor-name-wrap {
    color: inherit;
    text-decoration: none;
}

.schedule-doctor-placeholder {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    font-size: 1.4rem;
}

.schedule-board-footer a {
    color: var(--schedule-header-text);
    font-weight: 900;
}

@media (max-width: 1200px) {
    .home-upcoming-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .home-booking-secondary-links {
        grid-template-columns: 1fr;
    }

    .home-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-upcoming-grid {
        grid-template-columns: 1fr;
    }
}

/* LAVIDA-HOME-VISUAL-SLOTS */
.home-booking-slot-field {
    align-items: flex-start;
}

.home-booking-slot-panel {
    width: 100%;
    min-width: 0;
}

.home-booking-slot-title {
    font-weight: 700;
    margin-bottom: .45rem;
}

.home-booking-slot-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    max-height: 210px;
    overflow-y: auto;
    padding: .15rem;
}

.home-booking-slot-placeholder {
    grid-column: 1 / -1;
    display: block;
    color: #667085;
    font-size: .88rem;
    padding: .55rem .2rem;
}

.home-booking-slot-button {
    border: 1px solid rgba(15, 105, 114, .24);
    background: #fff;
    color: #0f6972;
    border-radius: 10px;
    padding: .55rem .45rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .25rem;
    flex-wrap: wrap;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.home-booking-slot-button:hover {
    transform: translateY(-1px);
    border-color: #0f6972;
}

.home-booking-slot-button strong {
    font-size: .96rem;
}

.home-booking-slot-button small {
    font-size: .75rem;
    opacity: .78;
}

.home-booking-slot-button span {
    width: 100%;
    font-size: .7rem;
    opacity: .8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-booking-slot-button.is-selected {
    background: #0f6972;
    border-color: #0f6972;
    color: #fff;
    box-shadow: 0 5px 14px rgba(15, 105, 114, .18);
}

.home-booking-slot-buttons[data-state="loading"] {
    opacity: .7;
}

.home-booking-feedback[data-state="selected"] {
    color: #0f6972;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .home-booking-slot-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 190px;
    }
}

/* D11R2 - stable numeric date direction inside Arabic appointment cards */
.home-upcoming-date-line { direction: rtl; }

.home-upcoming-date-value {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    display: inline-block;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.home-upcoming-doctor img {
    object-fit: contain !important;
    object-position: center !important;
}

/* ==========================================================
   CYBERDESIGN D14.12A
   Bidirectional Clinic / Specialty / Doctor booking filters
   + booking-card responsive polish.
   ========================================================== */
.enterprise-hero-booking-shell .hero-booking-card {
    scrollbar-width: none;
}

.enterprise-hero-booking-shell .hero-booking-card::-webkit-scrollbar {
    display: none;
}

.home-live-booking-form {
    display: grid;
    gap: .72rem;
}

.home-booking-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

.home-booking-filter-grid .booking-field {
    position: relative;
    min-width: 0;
    margin: 0;
    padding-top: 1.18rem;
}

.home-booking-field-label {
    position: absolute;
    inset-inline-start: .15rem;
    inset-block-start: 0;
    z-index: 2;
    color: #385a64;
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
}

.home-booking-field-label span {
    color: #c9303e;
}

.enterprise-hero-booking-shell .home-live-booking-form select {
    min-height: 44px;
    width: 100%;
}

.enterprise-hero-booking-shell .home-booking-feedback {
    min-height: 1.1rem;
    margin: .05rem 0 .15rem;
    color: #4e6670;
}

.enterprise-hero-booking-shell .home-booking-feedback[data-state="error"] {
    color: #b42318;
}

.enterprise-hero-booking-shell .home-booking-feedback[data-state="empty"] {
    color: #8a5b00;
}

.enterprise-hero-booking-shell .home-booking-feedback[data-state="selected"] {
    color: #0f6972;
}

.enterprise-hero-booking-shell .home-booking-slot-field {
    margin-top: .05rem;
    padding-top: 0;
}

.enterprise-hero-booking-shell .home-booking-slot-title {
    margin-bottom: .42rem;
    color: #244d58;
    font-size: .86rem;
    font-weight: 900;
}

.enterprise-hero-booking-shell .home-booking-slot-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: 132px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: .12rem .1rem .2rem;
}

.enterprise-hero-booking-shell .home-booking-slot-button {
    min-height: 54px;
    padding: .45rem .35rem;
}

.enterprise-hero-booking-shell .home-booking-slot-button strong {
    font-size: .9rem;
}

.enterprise-hero-booking-shell .home-booking-slot-button small {
    font-size: .68rem;
}

.enterprise-hero-booking-shell .home-booking-slot-button span {
    font-size: .64rem;
}

.enterprise-hero-booking-shell .booking-search-button {
    width: 100%;
    min-height: 44px;
}

.enterprise-hero-booking-shell .booking-live-note {
    margin-block: .58rem .2rem;
    font-size: .72rem;
    line-height: 1.55;
}

.enterprise-hero-booking-shell .home-booking-secondary-links {
    gap: .45rem;
    margin-top: .55rem;
}

.enterprise-hero-booking-shell .home-booking-secondary-links .booking-status-home-link {
    min-height: 38px;
    padding: .45rem .5rem;
    font-size: .7rem;
}

@media (max-width: 1199.98px) {
    .enterprise-hero-booking-shell .home-booking-slot-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 126px;
    }
}

@media (max-width: 767.98px) {
    .home-booking-filter-grid {
        grid-template-columns: 1fr;
        gap: .62rem;
    }

    .enterprise-hero-booking-shell .home-booking-slot-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 150px;
    }

    .enterprise-hero-booking-shell .home-booking-secondary-links {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 420px) {
    .enterprise-hero-booking-shell .home-booking-slot-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .enterprise-hero-booking-shell .home-booking-secondary-links {
        grid-template-columns: 1fr;
    }
}

