/* Bookio Widget Color Overrides for WellnessInn.sk */
/* Primary color scheme: Dark brown (#342a28) and Warm beige (#e9cfac) */

/* Hide navbar toolbar */
nav.navbar-bookio.widget {
    display: none !important;
}

/* Main background colors */
body,
.service-widget,
.widget-container,
main {
    background-color: #342a28 !important;
}

/* Widget sections background */
.service-widget .choose-service,
.service-widget .choose-worker,
.service-widget .choose-terms,
.service-widget .date-time,
.service-widget .personal-information,
.service-widget .summary {
    background-color: #342a28 !important;
}

/* Service/worker/term cards */
.service-widget .choose-service .widget-services .service,
.service-widget .choose-worker .widget-workers .worker,
.service-widget .choose-terms .widget-terms .term {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: #c4a176 !important;
    color: #ffffff !important;
}

/* Selected service/worker/term items */
.service-widget .choose-service .widget-services .service.selected,
.service-widget .choose-worker .widget-workers .worker.selected,
.service-widget .choose-terms .widget-terms .term.selected {
    background-color: #e9cfac !important;
    border-color: #c4a176 !important;
    color: #342a28 !important;
}

/* Selected time slot */
.service-widget .date-time .choose-date-time .widget-time .times .hours .hour.selected {
    background-color: #e9cfac !important;
    color: #342a28 !important;
}

/* Primary buttons */
footer .content .buttons .button#create-res,
.btn-teal,
button[style*="background-color: rgb(252, 150, 110)"],
button[style*="background: rgb(252, 150, 110)"],
.button[style*="background-color: rgb(252, 150, 110)"],
.button[style*="background: rgb(252, 150, 110)"] {
    background-color: #c4a176 !important;
    border-color: #c4a176 !important;
    color: #342a28 !important;
}

.btn-teal:hover {
    background-color: #c4a176 !important;
    border-color: #c4a176 !important;
    color: #342a28 !important;
}

/* Radio buttons */
.radio-button-teal input[type="radio"]:checked + label:before {
    background-color: #e9cfac !important;
    border-color: #c4a176 !important;
}

/* Calendar navigation */
.ui-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
.ui-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next {
    background-color: #342a28 !important;
    color: #e9cfac !important;
}

/* Calendar header */
.ui-calendar .ui-datepicker .ui-datepicker-calendar thead {
    background-color: #342a28 !important;
    color: #ffffff !important;
}

/* Summary panel text */
.service-widget .summary .summary-panel .sum-panel .name,
.service-widget .summary .summary-panel .sum-price .price {
    color: #342a28 !important;
}

/* Gift card link */
.service-widget .gift-card-link a {
    background-color: #e9cfac !important;
    color: #342a28 !important;
}

.service-widget .gift-card-link a:hover {
    background-color: #c4a176 !important;
}

/* Select dropdowns */
.service-widget .personal-information .information .select-count .select2-container .select2-choice {
    border-color: #c4a176 !important;
}

/* Loading spinner */
.loading-spinner .loader-wrapper .loader {
    border-color: #e9cfac !important;
    border-top-color: #342a28 !important;
}

/* Additional button states */
button:hover,
.button:hover {
    background-color: #c4a176 !important;
    border-color: #c4a176 !important;
}

/* Links */
a {
    color: #c4a176 !important;
}

a:hover {
    color: #e9cfac !important;
}

/* Text colors */
.service-widget h1,
.service-widget h2,
.service-widget h3,
.service-widget h4,
.service-widget label,
.service-widget p {
    color: #ffffff !important;
}

/* Time slots */
.service-widget .date-time .choose-date-time .widget-time .times .hours .hour {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: #c4a176 !important;
    color: #c4a176 !important;
}

.service-widget .date-time .choose-date-time .widget-time .times .hours .hour:hover {
    background-color: rgba(233, 207, 172, 0.3) !important;
}

/* Calendar background */
.ui-calendar .ui-datepicker {
    background-color: #342a28 !important;
}

.ui-calendar .ui-datepicker .ui-datepicker-calendar tbody tr {
    background-color: transparent !important;
}

.ui-calendar .ui-datepicker .ui-datepicker-calendar tbody td {
    background-color: transparent !important;
    color: #ffffff !important;
    border: none !important;
}

/* Remove any circular/rounded styling and reset backgrounds */
.ui-calendar .ui-datepicker .ui-datepicker-calendar tbody td a {
    border-radius: 4px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #c4a176 !important;
}

.ui-calendar .ui-datepicker .ui-datepicker-calendar tbody td a:hover {
    background-color: rgba(233, 207, 172, 0.3) !important;
}

/* Selected/active date - applied to the anchor tag */
.ui-calendar .ui-datepicker .ui-datepicker-calendar tbody td.ui-state-active a,
.ui-calendar .ui-datepicker .ui-datepicker-calendar tbody td a.ui-state-active {
    background-color: #e9cfac !important;
    color: #342a28 !important;
    border-radius: 4px !important;
}

/* Remove background from the td when selected */
.ui-calendar .ui-datepicker .ui-datepicker-calendar tbody td.ui-state-active {
    background-color: transparent !important;
}

/* Current day (today) - applied to the anchor tag */
.ui-calendar .ui-datepicker .ui-datepicker-calendar tbody td.ui-datepicker-today a,
.ui-calendar .ui-datepicker .ui-datepicker-calendar tbody td a.ui-state-highlight {
    background-color: #c4a176 !important;
    color: #342a28 !important;
    border-radius: 4px !important;
}

/* Remove background from the td for today */
.ui-calendar .ui-datepicker .ui-datepicker-calendar tbody td.ui-datepicker-today {
    background-color: transparent !important;
}

/* Footer */
footer {
    background-color: #342a28 !important;
}

/* Step navigation buttons (orange buttons) */
.step-button,
.next-button,
.prev-button,
.continue-button,
button.btn-primary,
.btn-primary,
button.btn-orange,
.widget-button,
[class*="orange"],
button[class*="step"],
div.step,
div.category {
    background-color: #c4a176 !important;
    border-color: #c4a176 !important;
    color: #342a28 !important;
}

button[class*="step"]:hover,
.step-button:hover,
.next-button:hover,
div.step:hover,
div.category:hover {
    background-color: #e9cfac !important;
    color: #342a28 !important;
}

/* Fix white-text class showing orange */
.white-text {
    color: #ffffff !important;
}

/* Fix orange borders */
*[style*="border-color: rgb(252, 150, 110)"],
*[style*="border: rgb(252, 150, 110)"],
div[style*="border"],
.step[style*="border"],
.category[style*="border"] {
    border-color: #c4a176 !important;
}

/* Step line connectors */
.step-line,
.step-line-hour-1,
[class*="step-line-hour"] {
    background-color: #c4a176 !important;
    border-color: #c4a176 !important;
}

/* Override blue-gray color #78909c with light brown - specific selectors */
.service-widget .choose-items .widget-items .participant .input-field .icon,
.service-widget .personal-information .information .input-field .icon {
    background-color: #c4a176 !important;
    border-color: #c4a176 !important;
    color: #ffffff !important;
}

/* Gift card button styling */
#giftCardShop,
#giftCardShop.category {
    background-color: #c4a176 !important;
    border-color: #c4a176 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

#giftCardShop:hover {
    background-color: #e9cfac !important;
    color: #342a28 !important;
}

/* Ensure all text inside gift card button is visible */
#giftCardShop *,
#giftCardShop .white-text {
    color: #ffffff !important;
}

/* Custom label text */
.custom-label {
    color: #ffffff !important;
}

/* Checkbox and radio labels */
.service-widget .personal-information .information .checkbox-label,
.service-widget .personal-information .information .gift-card-radio,
.service-widget .personal-information .information .gift-card-radio-label {
    color: #ffffff !important;
}

/* Generic spans in personal information that inherit gray-blue */
.service-widget .personal-information span,
.service-widget .personal-information .information span {
    color: #ffffff !important;
}

/* Footer days to reservation text */
footer .days-to-reservation {
    color: #ffffff !important;
}

/* Datepicker month and year dropdowns */
.ui-datepicker-month,
.ui-datepicker-year {
    color: #ffffff !important;
    background-color: #342a28 !important;
    border-color: #c4a176 !important;
}