/* Ethos Facility Color Overrides for Online Booking */

/* Color Variables for Ethos */
:root {
    --ethos-primary: #8C9B87;
    --ethos-primary-dark: #C3D1C9;
    --ethos-bg-light: #E8E9E1;
    --ethos-bg-lighter: #E8E9E1;
}

/* Header Styles - Explicit border-radius preservation */
.ethos-booking .ob-header {
    border-radius: 15px !important;
}

.ethos-booking .ob-header .header {
    background: linear-gradient(135deg, var(--ethos-primary) 0%, #C3D1C9 100%) !important;
    background-color: var(--ethos-primary) !important;
    border-radius: 15px !important;
}

.ethos-booking .ob-header .facility-name h2,
.ethos-booking .ob-header .text h1 {
    color: #fff !important;
}

/* Main Container Background - Removed as per user request */

/* Layout Background - Applied to parent container */
.ethos-booking .ob-layout {
    background-color: var(--ethos-bg-light) !important;
}

/* Sidebar and Main Content Background */
.ethos-booking .ob-categories-sidebar {
    background-color: var(--ethos-bg-light) !important;
    border-right-color: var(--ethos-primary) !important;
}

.ethos-booking .ob-main-content {
    background-color: var(--ethos-bg-light) !important;
}

.ethos-booking .ob-sidebar-title {
    background-color: var(--ethos-bg-lighter) !important;
    border-bottom-color: var(--ethos-primary) !important;
}

/* Category Items */
.ethos-booking .ob-category-item {
    border-bottom-color: rgba(140, 156, 134, 0.3) !important;
}

.ethos-booking .ob-category-item:hover {
    background: var(--ethos-bg-lighter) !important;
}

.ethos-booking .ob-category-item.active {
    background: var(--ethos-primary) !important;
    color: #fff !important;
}

.ethos-booking .ob-category-item.active .ob-category-name {
    color: #fff !important;
}

.ethos-booking .ob-category-item.active:before {
    color: #fff !important;
}

/* Service Cards */
.ethos-booking .ob-service-card {
    background-color: var(--ethos-primary) !important;
}

.ethos-booking .ob-service-card:hover {
    background-color: #4E5A53 !important;
}


.ethos-booking .ob-service-description {
    background: var(--ethos-bg-lighter) !important;
    border-top-color: rgba(140, 156, 134, 0.3) !important;
}

/* Provider Cards */
.ethos-booking .ob-provider-img,
.ethos-booking .ob-provider-initials {
    border-color: var(--ethos-primary) !important;
}

.ethos-booking .ob-provider-initials {
    background: linear-gradient(135deg, var(--ethos-primary), var(--ethos-primary-dark)) !important;
    border: 3px solid var(--ethos-primary) !important;
    box-shadow: 0 2px 6px rgba(140, 155, 135, 0.3) !important;
}

/* Override pink gradient colors in provider initials inline styles */
.ethos-booking .ob-provider-initials[style*="#E8B4D9"],
.ethos-booking .ob-provider-initials[style*="#e8b4d9"],
.ethos-booking .ob-provider-initials[style*="#9D8FC7"],
.ethos-booking .ob-provider-initials[style*="#9d8fc7"],
.ethos-booking .ob-provider-initials[style*="E8B4D9"],
.ethos-booking .ob-provider-initials[style*="9D8FC7"] {
    background: linear-gradient(135deg, var(--ethos-primary), var(--ethos-primary-dark)) !important;
}

/* Override pink border in provider initials */
.ethos-booking .ob-provider-initials[style*="#D89BC7"],
.ethos-booking .ob-provider-initials[style*="#d89bc7"],
.ethos-booking .ob-provider-initials[style*="D89BC7"] {
    border-color: var(--ethos-primary) !important;
}

/* Override pink box-shadow in provider initials */
.ethos-booking .ob-provider-initials[style*="rgba(216, 155, 199"],
.ethos-booking .ob-provider-initials[style*="rgba(216,155,199"],
.ethos-booking .ob-provider-initials[style*="216, 155, 199"],
.ethos-booking .ob-provider-initials[style*="216,155,199"] {
    box-shadow: 0 2px 6px rgba(140, 155, 135, 0.3) !important;
}

/* Comprehensive override for provider initials with any pink gradient */
.ethos-booking .ob-provider-initials[style*="linear-gradient"] {
    background: linear-gradient(135deg, var(--ethos-primary), var(--ethos-primary-dark)) !important;
}

/* Override specific pink gradient pattern: linear-gradient(135deg, #e8b4d9 0%, #9d8fc7 100%) */
/* Target any element with this gradient in inline styles */
.ethos-booking [style*="linear-gradient(135deg, #e8b4d9"],
.ethos-booking [style*="linear-gradient(135deg, #E8B4D9"],
.ethos-booking [style*="linear-gradient(135deg,#e8b4d9"],
.ethos-booking [style*="linear-gradient(135deg,#E8B4D9"],
.ethos-booking [style*="linear-gradient(135deg, #e8b4d9 0%"],
.ethos-booking [style*="linear-gradient(135deg, #E8B4D9 0%"],
.ethos-booking [style*="linear-gradient(135deg,#e8b4d9 0%"],
.ethos-booking [style*="linear-gradient(135deg,#E8B4D9 0%"],
.ethos-booking [style*="#9d8fc7 100%"],
.ethos-booking [style*="#9D8FC7 100%"],
.ethos-booking [style*="9d8fc7 100%"],
.ethos-booking [style*="9D8FC7 100%"],
.ethos-booking [style*="e8b4d9 0%, #9d8fc7"],
.ethos-booking [style*="E8B4D9 0%, #9D8FC7"],
.ethos-booking [style*="e8b4d9 0%,#9d8fc7"],
.ethos-booking [style*="E8B4D9 0%,#9D8FC7"] {
    background: #1f322633 !important;
}

.ethos-booking .ob-provider-image-link:hover .ob-provider-img,
.ethos-booking .ob-provider-image-link:hover .ob-provider-initials {
    border-color: var(--ethos-primary-dark) !important;
}

/* Replace blue color #007BFF with olive #8C9B87 for ethos */
.ethos-booking .provider-card:hover {
    border-color: #8C9B87 !important;
    box-shadow: 0 6px 20px rgba(140, 155, 135, 0.2) !important;
}

.ethos-booking .provider-card.selected {
    border-color: #8C9B87 !important;
    background-color: #f8f9ff !important;
    box-shadow: 0 6px 20px rgba(140, 155, 135, 0.25) !important;
}

.ethos-booking .provider-card.selected:after {
    background: #8C9B87 !important;
}

/* Override any blue colors in links, buttons, and interactive elements */
.ethos-booking a[style*="#007BFF"],
.ethos-booking a[style*="#007bff"],
.ethos-booking button[style*="#007BFF"],
.ethos-booking button[style*="#007bff"],
.ethos-booking .btn[style*="#007BFF"],
.ethos-booking .btn[style*="#007bff"] {
    background-color: #8C9B87 !important;
    border-color: #8C9B87 !important;
}

/* Avatar Circles */
.ethos-booking .avatar-circle {
    background: linear-gradient(135deg, var(--ethos-primary), var(--ethos-primary-dark)) !important;
}

.ethos-booking .provider-image-circle {
    border-color: var(--ethos-primary) !important;
}

/* Buttons */
.ethos-booking .ob-book-btn {
    background-color: var(--ethos-primary) !important;
}

.ethos-booking .ob-book-btn:hover {
    background-color: var(--ethos-primary-dark) !important;
}

/* Service Meta Tags */
.ethos-booking .ob-service-cost,
.ethos-booking .ob-service-duration {
    background: var(--ethos-bg-lighter) !important;
}

.ethos-booking .ob-service-cost:hover,
.ethos-booking .ob-service-duration:hover {
    background: var(--ethos-bg-light) !important;
}

/* Scrollbar Styles */
.ethos-booking .ob-categories-sidebar::-webkit-scrollbar-thumb {
    background: var(--ethos-primary) !important;
}

.ethos-booking .ob-categories-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--ethos-primary-dark) !important;
}

.ethos-booking .ob-content-area::-webkit-scrollbar-thumb {
    background: var(--ethos-primary) !important;
}

.ethos-booking .ob-content-area::-webkit-scrollbar-thumb:hover {
    background: var(--ethos-primary-dark) !important;
}

/* Selected Service and Back to Service Text Colors */
.ethos-booking .bc-header .service-name {
    color: #000 !important;
    font-family: "Neue Haas Grotesk" !important;
}

.ethos-booking .bc-header .service-name span {
    color: #000 !important;
    font-family: "Neue Haas Grotesk" !important;
}

.ethos-booking .bc-header .go-back {
    color: #000 !important;
    text-decoration: none;
    transition: color 0.3s;
    font-family: "Neue Haas Grotesk" !important;
    cursor: pointer;
}

.ethos-booking .bc-header .box-area {
    font-family: "Neue Haas Grotesk" !important;
}

.ethos-booking .bc-header .go-back:hover {
    color: #4E5A53 !important;
}

.ethos-booking .bc-header .go-back i {
    color: inherit;
}


/* Divider and Border Colors - Replace Pink with Ethos */

.ethos-booking .bc-calendar-area::-webkit-scrollbar-thumb {
    background: var(--ethos-primary) !important;
}

.ethos-booking .bc-calendar-area::-webkit-scrollbar-thumb:hover {
    background: var(--ethos-primary-dark) !important;
}

/* Booking Calendar Page Styles */
.ethos-booking.booking-calendar-page {
    background: #F8F8F8 !important;
}

.ethos-booking .bc-layout {
    background: #F8F8F8 !important;
}

.ethos-booking .bc-sidebar {
    background: #F8F8F8 !important;
}

.ethos-booking .bc-calendar-area {
    background: #F8F8F8 !important;
}

.ethos-booking .bc-header {
    background: var(--ethos-bg-lighter) !important;
}

/* FullCalendar Empty Cells - Light Grey Background */
.ethos-booking .fc-timegrid-slot,
.ethos-booking .fc-timegrid-col,
.ethos-booking .fc-timegrid-col-frame,
.ethos-booking .fc-daygrid-day-frame,
.ethos-booking .fc-scrollgrid-sync-inner,
.ethos-booking .fc-timegrid-body,
.ethos-booking .fc-timegrid-body table,
.ethos-booking .fc-timegrid-body td,
.ethos-booking .fc-timegrid-body th,
.ethos-booking .fc-daygrid-body,
.ethos-booking .fc-daygrid-body table,
.ethos-booking .fc-daygrid-body td,
.ethos-booking .fc-daygrid-body th {
    background-color: #F8F8F8 !important;
    background: #F8F8F8 !important;
}

/* Ensure empty slots are light grey */
.ethos-booking .fc-timegrid-slot-minor,
.ethos-booking .fc-timegrid-slot-label,
.ethos-booking .fc-timegrid-now-indicator-container {
    background-color: #F8F8F8 !important;
}

/* Calendar grid cells */
.ethos-booking .fc-scrollgrid-section-body table td,
.ethos-booking .fc-scrollgrid-section-body table th {
    background-color: #F8F8F8 !important;
}

/* FullCalendar day cells */
.ethos-booking .fc-timegrid-col.fc-day,
.ethos-booking .fc-daygrid-day {
    background-color: #F8F8F8 !important;
}

.ethos-booking .bc-sidebar::-webkit-scrollbar-thumb {
    background: var(--ethos-primary) !important;
}

.ethos-booking .bc-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--ethos-primary-dark) !important;
}

/* Category Heading */
.ethos-booking .bc-category-heading {
    border-bottom-color: var(--ethos-primary) !important;
}

/* Service Accordion */
.ethos-booking .bc-service-accordion-header {
    background-color: var(--ethos-primary) !important;
}

.ethos-booking .bc-service-accordion-header:hover {
    background-color: var(--ethos-primary-dark) !important;
}

.ethos-booking .bc-service-accordion-header.active {
    background-color: var(--ethos-primary) !important;
}

.ethos-booking .bc-service-accordion-item.selected-service {
    border-color: var(--ethos-primary) !important;
}

.ethos-booking .bc-service-accordion-content {
    background-color: var(--ethos-bg-lighter) !important;
    border-top-color: rgba(140, 156, 134, 0.3) !important;
}

/* Provider Section Border */
.ethos-booking .bc-provider-section {
    border-color: var(--ethos-primary) !important;
    background: linear-gradient(135deg, var(--ethos-bg-lighter) 0%, #F8F8F8 100%) !important;
}

/* Calendar Navigation Buttons - Ethos Colors Only */
.ethos-booking .fc-next-button,
.ethos-booking .fc-prev-button,
.ethos-booking .fc-button,
.ethos-booking .fc-toolbar .fc-button {
    background-color: var(--ethos-primary) !important;
    border-color: var(--ethos-primary) !important;
    color: #fff !important;
}

/* More specific override for patientAppointment page buttons */
#patientAppointment.ethos-booking .fc .fc-button,
#patientAppointment.ethos-booking .fc .fc-next-button,
#patientAppointment.ethos-booking .fc .fc-prev-button {
    background-color: var(--ethos-primary) !important;
    border-color: var(--ethos-primary) !important;
    color: #fff !important;
}

.ethos-booking .fc-next-button:hover,
.ethos-booking .fc-prev-button:hover,
.ethos-booking .fc-button:hover,
.ethos-booking .fc-toolbar .fc-button:hover {
    background-color: var(--ethos-primary-dark) !important;
    border-color: var(--ethos-primary-dark) !important;
    color: #fff !important;
}

/* More specific override for patientAppointment page button hover states */
#patientAppointment.ethos-booking .fc .fc-button:hover,
#patientAppointment.ethos-booking .fc .fc-next-button:hover,
#patientAppointment.ethos-booking .fc .fc-prev-button:hover {
    background-color: var(--ethos-primary-dark) !important;
    border-color: var(--ethos-primary-dark) !important;
    color: #fff !important;
}

.ethos-booking .fc-next-button:focus,
.ethos-booking .fc-prev-button:focus,
.ethos-booking .fc-button:focus,
.ethos-booking .fc-toolbar .fc-button:focus {
    background-color: var(--ethos-primary-dark) !important;
    border-color: var(--ethos-primary-dark) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(140, 156, 134, 0.3) !important;
}

/* More specific override for patientAppointment page button focus/active states */
#patientAppointment.ethos-booking .fc .fc-button:focus,
#patientAppointment.ethos-booking .fc .fc-button:active,
#patientAppointment.ethos-booking .fc .fc-next-button:focus,
#patientAppointment.ethos-booking .fc .fc-next-button:active,
#patientAppointment.ethos-booking .fc .fc-prev-button:focus,
#patientAppointment.ethos-booking .fc .fc-prev-button:active {
    background-color: var(--ethos-primary-dark) !important;
    border-color: var(--ethos-primary-dark) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(140, 156, 134, 0.3) !important;
}

.ethos-booking .fc-next-button:active,
.ethos-booking .fc-prev-button:active,
.ethos-booking .fc-button:active,
.ethos-booking .fc-toolbar .fc-button:active {
    background-color: var(--ethos-primary-dark) !important;
    border-color: var(--ethos-primary-dark) !important;
    color: #fff !important;
}

/* Ensure icons inside buttons are white */
.ethos-booking .fc-next-button .fc-icon,
.ethos-booking .fc-prev-button .fc-icon,
.ethos-booking .fc-button .fc-icon,
.ethos-booking .fc-toolbar .fc-button .fc-icon {
    color: #fff !important;
}

/* Calendar Scrollbar */
.ethos-booking .fc-datagrid-body::-webkit-scrollbar-thumb,
.ethos-booking .fc-scroller::-webkit-scrollbar-thumb,
.ethos-booking .fc-scrollgrid-section::-webkit-scrollbar-thumb,
.ethos-booking .fc-timegrid-body::-webkit-scrollbar-thumb {
    background: var(--ethos-primary) !important;
}

.ethos-booking .fc-datagrid-body::-webkit-scrollbar-thumb:hover,
.ethos-booking .fc-scroller::-webkit-scrollbar-thumb:hover,
.ethos-booking .fc-scrollgrid-section::-webkit-scrollbar-thumb:hover,
.ethos-booking .fc-timegrid-body::-webkit-scrollbar-thumb:hover {
    background: var(--ethos-primary-dark) !important;
}


/* Available Box Indicator */
.ethos-booking .box.available {
    background: var(--ethos-primary) !important;
}

/* Online Booking Buttons */
.ethos-booking .online-booking-btn,
.ethos-booking .online-booking-btn.btn-primary,
.ethos-booking .online-booking-btn.btn-secondary {
    background-color: var(--ethos-primary) !important;
    border-color: var(--ethos-primary) !important;
    color: #fff !important;
}

.ethos-booking .online-booking-btn:hover,
.ethos-booking .online-booking-btn.btn-primary:hover,
.ethos-booking .online-booking-btn.btn-secondary:hover {
    background-color: var(--ethos-primary-dark) !important;
    border-color: var(--ethos-primary-dark) !important;
    color: #fff !important;
}

/* Modal Buttons - Ethos Specific Colors */
.ethos-booking #provider-select-button,
.ethos-booking #patient-info,
.ethos-booking #ob-with-payment,
.ethos-booking #ob-witout-payment,
.ethos-booking #ob-payment-confirm,
.ethos-booking .modal-footer .btn,
.ethos-booking .modal-footer .btn.online-booking-btn,
.ethos-booking .modal-footer .btn.btn-primary,
.ethos-booking .modal-footer .btn.btn-secondary,
.ethos-booking .ob-modal .btn,
.ethos-booking .ob-modal .btn-primary,
.ethos-booking .ob-modal .btn-secondary {
    background-color: #4E5A53 !important;
    border-color: #4E5A53 !important;
    color: #fff !important;
}

.ethos-booking #provider-select-button:hover,
.ethos-booking #patient-info:hover,
.ethos-booking #ob-with-payment:hover,
.ethos-booking #ob-witout-payment:hover,
.ethos-booking #ob-payment-confirm:hover,
.ethos-booking .modal-footer .btn:hover,
.ethos-booking .modal-footer .btn.online-booking-btn:hover,
.ethos-booking .modal-footer .btn.btn-primary:hover,
.ethos-booking .modal-footer .btn.btn-secondary:hover,
.ethos-booking .ob-modal .btn:hover,
.ethos-booking .ob-modal .btn-primary:hover,
.ethos-booking .ob-modal .btn-secondary:hover {
    background-color: #4E5A53 !important;
    border-color: #4E5A53 !important;
    color: #fff !important;
}

/* Modal Scrollbar Styles - Colors Only */
.ethos-booking .modal-body::-webkit-scrollbar-thumb,
.ethos-booking .ob-scroll::-webkit-scrollbar-thumb,
.ethos-booking .modal-content::-webkit-scrollbar-thumb,
.ethos-booking #ob-payment .modal-body::-webkit-scrollbar-thumb,
.ethos-booking #patientSelect .modal-body::-webkit-scrollbar-thumb,
.ethos-booking #providerModal .modal-body::-webkit-scrollbar-thumb,
.ethos-booking #appointmetnConfirm .modal-body::-webkit-scrollbar-thumb {
    background: var(--ethos-primary) !important;
}

.ethos-booking .modal-body::-webkit-scrollbar-thumb:hover,
.ethos-booking .ob-scroll::-webkit-scrollbar-thumb:hover,
.ethos-booking .modal-content::-webkit-scrollbar-thumb:hover,
.ethos-booking #ob-payment .modal-body::-webkit-scrollbar-thumb:hover,
.ethos-booking #patientSelect .modal-body::-webkit-scrollbar-thumb:hover,
.ethos-booking #providerModal .modal-body::-webkit-scrollbar-thumb:hover,
.ethos-booking #appointmetnConfirm .modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--ethos-primary-dark) !important;
}

/* Focus States */
.ethos-booking .ob-category-item:focus {
    outline-color: var(--ethos-primary) !important;
}

.ethos-booking .ob-service-card:focus {
    outline-color: var(--ethos-primary) !important;
}

.ethos-booking .ob-provider-card:focus {
    outline-color: var(--ethos-primary) !important;
}

/* Provider Carousel Controls */
.ethos-booking #providerCarousel .carousel-control-next,
.ethos-booking #providerCarousel .carousel-control-prev {
    background-color: rgba(140, 156, 134, 0.7) !important;
}

.ethos-booking #providerCarousel .carousel-control-next:hover,
.ethos-booking #providerCarousel .carousel-control-prev:hover {
    background-color: rgba(78, 90, 83, 0.9) !important;
}

/* Ensure light grey backgrounds for modals and forms */
.ethos-booking .modal-content,
.ethos-booking .form-control,
.ethos-booking .card {
    background-color: #F8F8F8 !important;
}

/* Category Section Background */
.ethos-booking .ob-category-section {
    background: var(--ethos-bg-light) !important;
}

/* Calendar Event Colors - Override JavaScript colors */
.ethos-booking .fc-event,
.ethos-booking .fc-event[style*="background-color"],
.ethos-booking .fc-event[style*="background"],
.ethos-booking .fc-timegrid-event,
.ethos-booking .fc-timegrid-event[style*="background-color"],
.ethos-booking .fc-timegrid-event[style*="background"],
.ethos-booking .fc-event[style*="#12b6aa"],
.ethos-booking .fc-event[style*="#12B6AA"],
.ethos-booking .fc-event[style*="#0a8f82"],
.ethos-booking .fc-timegrid-event[style*="#12b6aa"],
.ethos-booking .fc-timegrid-event[style*="#12B6AA"],
.ethos-booking .fc-timegrid-event[style*="#0a8f82"] {
    background-color: var(--ethos-primary) !important;
    border-color: var(--ethos-primary-dark) !important;
    border-radius: 10px !important;
}

.ethos-booking .fc-event:hover,
.ethos-booking .fc-event[style*="background-color"]:hover,
.ethos-booking .fc-timegrid-event:hover,
.ethos-booking .fc-timegrid-event[style*="background-color"]:hover {
    background-color: var(--ethos-primary-dark) !important;
    border-color: var(--ethos-primary) !important;
    border-radius: 10px !important;
}

/* Replace teal color #12B6AA with dark olive #4E5952 for ethos */
.ethos-booking .fc-event[style*="#12B6AA"],
.ethos-booking .fc-event[style*="#12b6aa"],
.ethos-booking .fc-timegrid-event[style*="#12B6AA"],
.ethos-booking .fc-timegrid-event[style*="#12b6aa"],
.ethos-booking [class*="event"][style*="#12B6AA"],
.ethos-booking [class*="event"][style*="#12b6aa"] {
    background-color: #4E5952 !important;
    border-color: #4E5952 !important;
}

/* Replace orange color #E46A44 with dark olive #4E5952 for ethos */
.ethos-booking [style*="#E46A44"],
.ethos-booking [style*="#e46a44"],
.ethos-booking [style*="E46A44"],
.ethos-booking [style*="e46a44"] {
    background-color: #4E5952 !important;
    border-color: #4E5952 !important;
    color: #4E5952 !important;
}

.ethos-booking .fc-event[style*="#E46A44"],
.ethos-booking .fc-event[style*="#e46a44"],
.ethos-booking .fc-timegrid-event[style*="#E46A44"],
.ethos-booking .fc-timegrid-event[style*="#e46a44"],
.ethos-booking [class*="btn"][style*="#E46A44"],
.ethos-booking [class*="btn"][style*="#e46a44"],
.ethos-booking [class*="button"][style*="#E46A44"],
.ethos-booking [class*="button"][style*="#e46a44"] {
    background-color: #4E5952 !important;
    border-color: #4E5952 !important;
}

/* Replace blue colors with dark olive #4E5952 for ethos */
.ethos-booking [style*="#26C6DA"],
.ethos-booking [style*="#26c6da"],
.ethos-booking [style*="#26DAD2"],
.ethos-booking [style*="#26dad2"],
.ethos-booking [style*="#3DB87E"],
.ethos-booking [style*="#3db87e"],
.ethos-booking [style*="#1976D2"],
.ethos-booking [style*="#1976d2"] {
    background-color: #4E5952 !important;
    border-color: #4E5952 !important;
    color: #4E5952 !important;
}

.ethos-booking .fc-event[style*="#26C6DA"],
.ethos-booking .fc-event[style*="#26c6da"],
.ethos-booking .fc-event[style*="#26DAD2"],
.ethos-booking .fc-event[style*="#26dad2"],
.ethos-booking .fc-event[style*="#3DB87E"],
.ethos-booking .fc-event[style*="#3db87e"],
.ethos-booking .fc-event[style*="#1976D2"],
.ethos-booking .fc-event[style*="#1976d2"],
.ethos-booking .fc-timegrid-event[style*="#26C6DA"],
.ethos-booking .fc-timegrid-event[style*="#26c6da"],
.ethos-booking .fc-timegrid-event[style*="#26DAD2"],
.ethos-booking .fc-timegrid-event[style*="#26dad2"],
.ethos-booking .fc-timegrid-event[style*="#3DB87E"],
.ethos-booking .fc-timegrid-event[style*="#3db87e"],
.ethos-booking .fc-timegrid-event[style*="#1976D2"],
.ethos-booking .fc-timegrid-event[style*="#1976d2"],
.ethos-booking [class*="btn"][style*="#26C6DA"],
.ethos-booking [class*="btn"][style*="#26c6da"],
.ethos-booking [class*="btn"][style*="#26DAD2"],
.ethos-booking [class*="btn"][style*="#26dad2"],
.ethos-booking [class*="btn"][style*="#3DB87E"],
.ethos-booking [class*="btn"][style*="#3db87e"],
.ethos-booking [class*="btn"][style*="#1976D2"],
.ethos-booking [class*="btn"][style*="#1976d2"],
.ethos-booking [class*="button"][style*="#26C6DA"],
.ethos-booking [class*="button"][style*="#26c6da"],
.ethos-booking [class*="button"][style*="#26DAD2"],
.ethos-booking [class*="button"][style*="#26dad2"],
.ethos-booking [class*="button"][style*="#3DB87E"],
.ethos-booking [class*="button"][style*="#3db87e"],
.ethos-booking [class*="button"][style*="#1976D2"],
.ethos-booking [class*="button"][style*="#1976d2"] {
    background-color: #4E5952 !important;
    border-color: #4E5952 !important;
}

/* Override blue colors from other CSS files for ethos - specific class overrides */
.ethos-booking .btn-primary,
.ethos-booking .btn-info {
    background-color: #4E5952 !important;
    border-color: #4E5952 !important;
}

/* Replace blue hover color #1976D2 with ethos primary #8C9B87 for ethos */
.ethos-booking *:hover[style*="#1976D2"],
.ethos-booking *:hover[style*="#1976d2"],
.ethos-booking *:hover[style*="1976D2"],
.ethos-booking *:hover[style*="1976d2"],
.ethos-booking #providerModal select option:hover,
.ethos-booking #providerModal select option:focus,
.ethos-booking .modal select option:hover,
.ethos-booking .modal select option:focus {
    background-color: #8C9B87 !important;
    border-color: #8C9B87 !important;
    color: #fff !important;
}

/* Dropdown option hover - Use ethos primary color #8C9B87 */
.ethos-booking select option:hover,
.ethos-booking select option:focus,
.ethos-booking #provider-select option:hover,
.ethos-booking #provider-select option:focus,
.ethos-booking #patient-referral-source option:hover,
.ethos-booking #patient-referral-source option:focus,
.ethos-booking #patient-gender option:hover,
.ethos-booking #patient-gender option:focus,
.ethos-booking #payment-type-for-online-booking-authorize-payment option:hover,
.ethos-booking #payment-type-for-online-booking-authorize-payment option:focus,
.ethos-booking #provider-selection-row select option:hover,
.ethos-booking #provider-selection-row select option:focus,
.ethos-booking #provider-selection-row #provider-select option:hover,
.ethos-booking #provider-selection-row #provider-select option:focus,
.ethos-booking .select2-results__option:hover,
.ethos-booking .select2-results__option--highlighted,
.ethos-booking .select2-results__option--highlighted[aria-selected],
.ethos-booking .select2-results__option[aria-selected="true"],
.ethos-booking .select2-results__option[aria-selected="true"]:hover,
.ethos-booking [class*="dropdown"] [class*="option"]:hover,
.ethos-booking [class*="select"] [class*="option"]:hover,
.ethos-booking [class*="option"]:hover,
.ethos-booking [role="option"]:hover,
.ethos-booking [role="option"][aria-selected="true"],
.ethos-booking .select2-container--default .select2-results__option--highlighted[aria-selected],
.ethos-booking .select2-container--default .select2-results__option[aria-selected="true"],
.ethos-booking .select2-container--classic .select2-results__option--highlighted[aria-selected],
.ethos-booking .select2-container--classic .select2-results__option[aria-selected="true"] {
    background-color: #8C9B87 !important;
    color: #fff !important;
}

/* Override Select2 blue color #5897fb with ethos color */
.ethos-booking .select2-container--default .select2-results__option--highlighted[aria-selected],
.ethos-booking .select2-container--default .select2-results__option--highlighted[aria-selected]:hover,
.ethos-booking .select2-container--classic .select2-results__option--highlighted[aria-selected],
.ethos-booking .select2-container--classic .select2-results__option--highlighted[aria-selected]:hover,
.ethos-booking [style*="#5897fb"]:hover,
.ethos-booking [style*="#5897FB"]:hover,
.ethos-booking [style*="5897fb"]:hover,
.ethos-booking [style*="5897FB"]:hover {
    background-color: #8C9B87 !important;
    color: #fff !important;
}

.ethos-booking [style*="background"][style*="#1976D2"]:hover,
.ethos-booking [style*="background"][style*="#1976d2"]:hover,
.ethos-booking [style*="background-color"][style*="#1976D2"]:hover,
.ethos-booking [style*="background-color"][style*="#1976d2"]:hover,
.ethos-booking select[style*="#1976D2"] option:hover,
.ethos-booking select[style*="#1976d2"] option:hover,
.ethos-booking #patient-referral-source option[style*="#1976D2"]:hover,
.ethos-booking #patient-referral-source option[style*="#1976d2"]:hover,
.ethos-booking #patient-gender option[style*="#1976D2"]:hover,
.ethos-booking #patient-gender option[style*="#1976d2"]:hover,
.ethos-booking #payment-type-for-online-booking-authorize-payment option[style*="#1976D2"]:hover,
.ethos-booking #payment-type-for-online-booking-authorize-payment option[style*="#1976d2"]:hover {
    background-color: #8C9B87 !important;
    border-color: #8C9B87 !important;
}

/* Override blue hover background from other CSS files */
.ethos-booking *:hover[style*="background-color: rgb(25, 118, 210)"],
.ethos-booking *:hover[style*="background-color:rgb(25,118,210)"],
.ethos-booking *:hover[style*="background: rgb(25, 118, 210)"],
.ethos-booking *:hover[style*="background:rgb(25,118,210)"],
.ethos-booking select option:hover[style*="background-color: rgb(25, 118, 210)"],
.ethos-booking select option:hover[style*="background-color:rgb(25,118,210)"],
.ethos-booking #patient-referral-source option:hover[style*="background-color: rgb(25, 118, 210)"],
.ethos-booking #patient-referral-source option:hover[style*="background-color:rgb(25,118,210)"],
.ethos-booking #patient-gender option:hover[style*="background-color: rgb(25, 118, 210)"],
.ethos-booking #patient-gender option:hover[style*="background-color:rgb(25,118,210)"],
.ethos-booking #payment-type-for-online-booking-authorize-payment option:hover[style*="background-color: rgb(25, 118, 210)"],
.ethos-booking #payment-type-for-online-booking-authorize-payment option:hover[style*="background-color:rgb(25,118,210)"],
.ethos-booking #providerModal select option:hover,
.ethos-booking #providerModal select option:focus,
.ethos-booking .modal select option:hover,
.ethos-booking .modal select option:focus,
.ethos-booking #patient-referral-source option:hover,
.ethos-booking #patient-referral-source option:focus,
.ethos-booking #patient-gender option:hover,
.ethos-booking #patient-gender option:focus,
.ethos-booking #payment-type-for-online-booking-authorize-payment option:hover,
.ethos-booking #payment-type-for-online-booking-authorize-payment option:focus {
    background-color: #8C9B87 !important;
}

/* Replace pink color #D89BC7 with light olive #8C9B87 for ethos */
.ethos-booking [style*="#D89BC7"],
.ethos-booking [style*="#d89bc7"],
.ethos-booking [style*="D89BC7"],
.ethos-booking [style*="d89bc7"] {
    border-color: #8C9B87 !important;
    color: #8C9B87 !important;
}

.ethos-booking .fc-event[style*="#D89BC7"],
.ethos-booking .fc-event[style*="#d89bc7"],
.ethos-booking .fc-timegrid-event[style*="#D89BC7"],
.ethos-booking .fc-timegrid-event[style*="#d89bc7"],
.ethos-booking [class*="btn"][style*="#D89BC7"],
.ethos-booking [class*="btn"][style*="#d89bc7"],
.ethos-booking [class*="button"][style*="#D89BC7"],
.ethos-booking [class*="button"][style*="#d89bc7"],
.ethos-booking [class*="card"][style*="#D89BC7"],
.ethos-booking [class*="card"][style*="#d89bc7"] {
    background-color: #8C9B87 !important;
    border-color: #8C9B87 !important;
}

/* Force override for all time grid event elements */
.ethos-booking .fc-timegrid-event .fc-event-main,
.ethos-booking .fc-timegrid-event .fc-event-main-frame {
    background-color: var(--ethos-primary) !important;
    border-color: var(--ethos-primary-dark) !important;
}

/* Maximum specificity override for calendar time slots */
.ethos-booking #onlineBookingCalendar .fc-timegrid-event,
.ethos-booking #patientAppointment .fc-timegrid-event,
.ethos-booking .fc-timegrid-body .fc-timegrid-event,
.ethos-booking .fc-timegrid-col .fc-timegrid-event {
    background-color: #8C9B87 !important;
    border-color: #4E5A53 !important;
}

.ethos-booking #onlineBookingCalendar .fc-timegrid-event:hover,
.ethos-booking #patientAppointment .fc-timegrid-event:hover,
.ethos-booking .fc-timegrid-body .fc-timegrid-event:hover,
.ethos-booking .fc-timegrid-col .fc-timegrid-event:hover {
    background-color: #4E5A53 !important;
    border-color: #8C9B87 !important;
}

/* Additional card hover effects */
.ethos-booking #online-booking .card:hover {
    background-color: var(--ethos-bg-lighter) !important;
}

/* Service button colors */
.ethos-booking .service-button {
    background-color: var(--ethos-bg-lighter) !important;
    color: var(--ethos-primary-dark) !important;
}

.ethos-booking .service-button:hover {
    background-color: var(--ethos-primary) !important;
    color: #fff !important;
}

/* Accordion header */
.ethos-booking .accoudion-header {
    background-color: var(--ethos-bg-lighter) !important;
}

/* Preserve Border-Radius for Booking Calendar Page */
/* Allow sticky sidebar to work by keeping overflow visible on the page wrapper */
.ethos-booking#patientAppointment,
.ethos-booking #patientAppointment {
    border-radius: 15px !important;
    overflow: visible !important;
}

.ethos-booking .custome-container .row {
    border-radius: 10px !important;
}

.ethos-booking .box {
    border-radius: 2px !important;
}

/* Additional override for time grid event content */
.ethos-booking .fc-timegrid-event .fc-event-main,
.ethos-booking .fc-timegrid-event .fc-event-main-frame,
.ethos-booking .fc-timegrid-event .fc-event-time,
.ethos-booking .fc-timegrid-event .fc-event-title {
    background-color: transparent !important;
    color: #fff !important;
}

/* Preserve Border-Radius from Original Design */
.ethos-booking#online-booking,
.ethos-booking #online-booking {
    border-radius: 15px !important;
    overflow: visible !important;
}

.ethos-booking .card {
    border-radius: 20px !important;
    overflow: hidden !important;
}

.ethos-booking .service-item {
    border-radius: 20px !important;
    overflow: hidden !important;
}

.ethos-booking .service-duration {
    border-radius: 25px !important;
}

.ethos-booking .service-button {
    border-radius: 20px !important;
}


.ethos-booking .accoudion-header {
    border-radius: 20px !important;
}

.ethos-booking .service-icon {
    border-radius: 50% !important;
}

.ethos-booking .service-accordion-icon {
    border-radius: 15% !important;
}


/* Body background for booking calendar page */
body:has(.ethos-booking.booking-calendar-page) {
    background: #F8F8F8 !important;
}

/* Show More button text color - Ethos color */
.ethos-booking .ob-description-toggle {
    color: #8C9B87 !important;
}

.ethos-booking .ob-description-toggle:hover {
    color: #4E5A53 !important;
}

/* Separator line between services - Ethos color */
.ethos-booking hr {
    border-top: 2px solid #C5CBC2 !important;
}

/* All paragraphs and titles - Ethos color */
.ethos-booking p,
.ethos-booking h1,
.ethos-booking h2,
.ethos-booking h3,
.ethos-booking h4,
.ethos-booking h5,
.ethos-booking h6 {
    color: #353535 !important;
}

/* Override header titles that should remain white */
.ethos-booking .ob-header .facility-name h2,
.ethos-booking .ob-header .text h1 {
    color: #fff !important;
}

/* Font Family - Neue Haas Grotesk for paragraphs and specific classes */
.ethos-booking p,
.ethos-booking .ob-category-name,
.ethos-booking .ob-column-title,
.ethos-booking .ob-provider-initials,
.ethos-booking .ob-welcome-text,
.ethos-booking .ob-description-toggle,
.ethos-booking .bc-service-name,
.ethos-booking .bc-service-meta,
.ethos-booking .bc-service-accordion-content,
.ethos-booking .bc-header .go-back,
.ethos-booking .bc-header .service-name,
.ethos-booking .bc-header .service-name span,
.ethos-booking .bc-header .box-area,
.ethos-booking button:not([class*="icon"]):not([class*="mdi"]):not([class*="fa"]):not(.material-icons):not(.fc-icon),
.ethos-booking .btn:not([class*="icon"]):not([class*="mdi"]):not([class*="fa"]):not(.material-icons):not(.fc-icon),
.ethos-booking .fc-col-header-cell-cushion,
.ethos-booking .fc-event-main,
.ethos-booking table,
.ethos-booking .box.available,
.ethos-booking .bc-provider-section,
.ethos-booking .bc-provider-section div,
.ethos-booking div.d-flex.text-center.justify-content-center.pt-3,
.ethos-booking div.d-flex.text-center.justify-content-center,
.ethos-booking .modal span:not(i):not([class*="icon"]):not([class*="mdi"]):not([class*="fa"]):not(.material-icons):not(.fc-icon),
.ethos-booking .modal div:not([class*="icon"]):not([class*="mdi"]):not([class*="fa"]):not(.material-icons):not(.fc-icon),
.ethos-booking .modal-content span:not(i):not([class*="icon"]):not([class*="mdi"]):not([class*="fa"]):not(.material-icons):not(.fc-icon),
.ethos-booking .modal-content div:not([class*="icon"]):not([class*="mdi"]):not([class*="fa"]):not(.material-icons):not(.fc-icon),
.ethos-booking .modal-body span:not(i):not([class*="icon"]):not([class*="mdi"]):not([class*="fa"]):not(.material-icons):not(.fc-icon),
.ethos-booking .modal-body div:not([class*="icon"]):not([class*="mdi"]):not([class*="fa"]):not(.material-icons):not(.fc-icon),
.ethos-booking .modal-header span:not(i):not([class*="icon"]):not([class*="mdi"]):not([class*="fa"]):not(.material-icons):not(.fc-icon),
.ethos-booking .modal-header div:not([class*="icon"]):not([class*="mdi"]):not([class*="fa"]):not(.material-icons):not(.fc-icon),
.ethos-booking .modal-footer span:not(i):not([class*="icon"]):not([class*="mdi"]):not([class*="fa"]):not(.material-icons):not(.fc-icon),
.ethos-booking .modal-footer div:not([class*="icon"]):not([class*="mdi"]):not([class*="fa"]):not(.material-icons):not(.fc-icon),
.ethos-booking .ob-modal span:not(i):not([class*="icon"]):not([class*="mdi"]):not([class*="fa"]):not(.material-icons):not(.fc-icon),
.ethos-booking .ob-modal div:not([class*="icon"]):not([class*="mdi"]):not([class*="fa"]):not(.material-icons):not(.fc-icon) {
    font-family: "Neue Haas Grotesk" !important;
    font-weight: 400 !important;
}

/* Preserve icon font families for ethos - icons need their original fonts */
/* Explicitly exclude icon elements from font-family override */
.ethos-booking i,
.ethos-booking [class*="mdi"],
.ethos-booking [class*="fa"],
.ethos-booking [class*="fa-"],
.ethos-booking .fc-icon,
.ethos-booking .material-icons,
.ethos-booking [class*="glyphicon"],
.ethos-booking [class*="icon"]:not([class*="service-icon"]):not([class*="category-icon"]):not([class*="service-accordion-icon"]),
.ethos-booking .fa,
.ethos-booking .fas,
.ethos-booking .far,
.ethos-booking .fab,
.ethos-booking .mdi,
.ethos-booking .wi,
.ethos-booking .sli,
.ethos-booking .ti,
.ethos-booking span[class*="mdi"],
.ethos-booking span[class*="fa"],
.ethos-booking span[class*="icon"]:not([class*="service-icon"]):not([class*="category-icon"]):not([class*="service-accordion-icon"]) {
    font-weight: normal !important;
}

/* Override Ubuntu font for all headings - use Neue Haas Grotesk */
.ethos-booking h1,
.ethos-booking h2,
.ethos-booking h3,
.ethos-booking h4,
.ethos-booking h5,
.ethos-booking h6 {
    font-family: "Neue Haas Grotesk" !important;
}

/* Use Ogg font for header facility name and "Book An Appointment" text */
.ethos-booking .ob-header .facility-name h2,
.ethos-booking .ob-header .facility-name h2 *,
.ethos-booking .ob-header .text h1,
.ethos-booking .ob-header .text h1 *,
.ethos-booking .ob-header .text,
.ethos-booking .ob-header .text *,
.ethos-booking .ob-header h1,
.ethos-booking .ob-header h2,
.ethos-booking .ob-header .header .text h1,
.ethos-booking .ob-header .header .facility-name h2 {
    font-family: "Ogg" !important;
    font-weight: 400 !important;
}

/* Don't use Ubuntu for ethos facilities */
/* Note: We don't set font-family on .ethos-booking itself to avoid affecting icon elements */
/* Font-family is applied via specific element selectors above */

/* Preserve icon fonts in pseudo-elements - don't override icon font families */
.ethos-booking [class*="icon"]:not([class*="service-icon"]):not([class*="category-icon"]):not([class*="service-accordion-icon"]):before,
.ethos-booking [class*="icon"]:not([class*="service-icon"]):not([class*="category-icon"]):not([class*="service-accordion-icon"]):after,
.ethos-booking [class*="mdi"]:before,
.ethos-booking [class*="mdi"]:after,
.ethos-booking [class*="fa"]:before,
.ethos-booking [class*="fa"]:after,
.ethos-booking [class*="fa-"]:before,
.ethos-booking [class*="fa-"]:after,
.ethos-booking i:before,
.ethos-booking i:after,
.ethos-booking .fc-icon:before,
.ethos-booking .fc-icon:after,
.ethos-booking .fa:before,
.ethos-booking .fa:after,
.ethos-booking .fas:before,
.ethos-booking .fas:after,
.ethos-booking .far:before,
.ethos-booking .far:after,
.ethos-booking .fab:before,
.ethos-booking .fab:after,
.ethos-booking .mdi:before,
.ethos-booking .mdi:after {
    font-family: unset !important;
}

/* Toggle switch colors - Change to dark olive #4E5952 for ethos */
.ethos-booking .switch label input[type="checkbox"]:checked + .lever {
    background-color: #4E5952 !important;
}

.ethos-booking .switch label input[type="checkbox"]:checked + .lever:after {
    background-color: #4E5952 !important;
}

/* Toggle switch slider colors - Change to ethos color #8C9B87 for ethos */
.ethos-booking .switch input:checked + .slider {
    background-color: #8C9B87 !important;
}

.ethos-booking .switch input:focus + .slider {
    box-shadow: 0 0 1px #8C9B87 !important;
}

.ethos-booking [type="checkbox"]:checked + label:before {
    border-right-color: #4E5952 !important;
    border-bottom-color: #4E5952 !important;
}

.ethos-booking [type="checkbox"].filled-in:checked + label:after {
    border-color: #4E5952 !important;
    background-color: #4E5952 !important;
}

.ethos-booking [type="checkbox"].filled-in.tabbed:checked:focus + label:after {
    background-color: #4E5952 !important;
    border-color: #4E5952 !important;
}

/* Checkmark circle error styling for ethos */
.ethos-booking .checkmark_circle.error {
    stroke: #848C81 !important;
    fill: #768071 !important;
}

/* Checkmark success styling for ethos - color #768071 */
.ethos-booking .checkmark__circle,
.ethos-booking .checkmark__circle.success {
    stroke: #768071 !important;
    fill: #768071 !important;
}

.ethos-booking .checkmark__check {
    stroke-width: 2 !important;
}

.ethos-booking .checkmark {
    box-shadow: inset 0px 0px 0px #768071 !important;
}

/* Override animation fill color for ethos checkmark */
@keyframes ethos-checkmark-fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #768071 !important;
    }
}

.ethos-booking .checkmark {
    animation: ethos-checkmark-fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both !important;
}