/* BookingFrameComponent Styles */
@import url('CustomButtonComponent.css');
.rz-layout {
    background-color: white !important;
}
:root {
    --bg-color: #ffffff;
    --primary-color: #f3b962;
    --secondary-color: #f2f3f3;
    --font-color: #333333;
}

.antonio-font {
    font-family: 'Antonio', sans-serif;
}

.no-line-break {
    white-space: nowrap;
}

.link-button{
    color: #000000 !important;
    min-height: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
    border-radius: 0px !important;
    padding-bottom: 10px;
    text-align: left !important;
    justify-content: flex-start !important;
}

.link-button .rz-button-box{
    background-image: linear-gradient(#424242,#424242) !important;
    background-size: 100% 1px !important;
    background-position: bottom right !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
}

.rz-button.link-button:hover,
.rz-button.link-button:active,
.rz-button.link-button:focus {
    background-color: transparent !important;
    background-image: none !important;
}

.material-symbols {
    font-family: 'Material Symbols Outlined';
}

/* Form styling - All states use secondary color with hue variations */
.rz-textbox, .rz-textarea, .rz-dropdown, .rz-multiselect, .rz-datepicker {
    border-radius: 5px !important;
    background-color: var(--secondary-color) !important;
}

.rz-textbox input, .rz-textarea textarea {
    background-color: var(--secondary-color) !important;
}

.rz-textbox:not([readonly]):not(:focus-within) input, 
.rz-textarea:not([readonly]):not(:focus-within) textarea {
    background-color: var(--secondary-color) !important;
}

/* Input fields - focused state (slightly lighter hue) */
.rz-textbox:focus-within, 
.rz-textarea:focus-within,
.rz-dropdown:focus-within,
.rz-multiselect:focus-within,
.rz-datepicker:focus-within {
    background-color: var(--secondary-color) !important;
    filter: hue-rotate(5deg) brightness(1.05) !important;
}

.rz-textbox:focus-within input, 
.rz-textarea:focus-within textarea {
    background-color: var(--secondary-color) !important;
    filter: hue-rotate(5deg) brightness(1.05) !important;
}

/* Input fields - readonly state (slightly darker hue) */
.rz-textbox[readonly],
.rz-textarea[readonly] {
    background-color: var(--secondary-color) !important;
    filter: hue-rotate(-5deg) brightness(0.95) !important;
}

.rz-textbox[readonly] input,
.rz-textarea[readonly] textarea {
    background-color: var(--secondary-color) !important;
    filter: hue-rotate(-5deg) brightness(0.95) !important;
}

/* Input fields - hover state (slight brightness increase) */
.rz-textbox:hover:not(:focus-within):not([readonly]), 
.rz-textarea:hover:not(:focus-within):not([readonly]),
.rz-dropdown:hover:not(:focus-within),
.rz-multiselect:hover:not(:focus-within),
.rz-datepicker:hover:not(:focus-within) {
    filter: brightness(1.02) !important;
}

/* Datepicker specific styling */
.rz-datepicker .rz-inputtext {
    background-color: var(--secondary-color) !important;
}

.rz-datepicker:focus-within .rz-inputtext {
    background-color: var(--secondary-color) !important;
    filter: hue-rotate(5deg) brightness(1.05) !important;
}

/* Datepicker input text color */
.rz-datepicker:has(.rz-datepicker-trigger) > .rz-inputtext {
    color: var(--font-color) !important;
}

/* Input placeholder styling */
.rz-inputtext::placeholder {
    color: var(--font-color) !important;
    opacity: 0.7;
}

.rz-inputtext::-webkit-input-placeholder {
    color: var(--font-color) !important;
    opacity: 0.7;
}

.rz-inputtext::-moz-placeholder {
    color: var(--font-color) !important;
    opacity: 0.7;
}

.rz-inputtext:-ms-input-placeholder {
    color: var(--font-color) !important;
    opacity: 0.7;
}

.rz-checkbox {
    background-color: transparent !important;
}

.rz-checkbox-box {
    background-color: white !important;
}

.rz-checkbox-list-vertical {
    background-color: transparent !important;
}

.rz-checkbox.rz-state-active, .rz-checkbox-box.rz-state-active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.rz-chkbox-box.rz-state-active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.rz-button {
    border-radius: 5px !important;
}

/* Primary buttons (checkout, apply buttons) */
.rz-button-primary, 
.rz-button[style*="background-color: #f3b962"],
.rz-button[style*="background-color: #6D7B71"] {
    background-color: var(--primary-color) !important;
}

/* Promo code and gift card sections */
.rz-stack {
    gap: 15px !important;
}

/* Order summary styling */
.order-summary {
    background-color: var(--secondary-color);
    padding: 15px;
    border-radius: 5px;
}

/* Terms and conditions checkbox */
.terms-checkbox {
    width: 20px;
    height: 20px;
    background-color: white;
    margin-top: 2px;
}

/* Checkout button styling */
.checkout-button {
    width: 100%;
    border-radius: 5px;
    background-color: var(--primary-color);
    text-transform: uppercase;
}

/* Control backgrounds using secondary-color */
.rz-card, .rz-panel, .rz-fieldset {
    background-color: var(--secondary-color) !important;
}



/* Preserve specific component colors */
.rz-color-on-primary-light {
    color: var(--font-color) !important;
    padding-left: 5px;
    font-weight: 400;
    font-family: var(--rz-text-font-family);
    font-size: var(--rz-text-display-h6-font-size);
    line-height: var(--rz-text-display-h6-line-height);
    letter-spacing: var(--rz-text-display-h6-letter-spacing);
}

/* Datepicker popup styling - More specific selectors to override inline styles */
.rz-datepicker-popup-container.rz-popup {
    background: var(--bg-color) !important;
    background-color: var(--bg-color) !important;
}

.rz-datepicker-popup-container.rz-popup.show-popup {
    background: var(--bg-color) !important;
    background-color: var(--bg-color) !important;
}

/* Most specific selector matching the exact HTML structure */
div.rz-datepicker-popup-container.rz-popup.show-popup[style*="background"] {
    background: var(--bg-color) !important;
    background-color: var(--bg-color) !important;
}

div.rz-datepicker-popup-container {
    background: var(--bg-color) !important;
    background-color: var(--bg-color) !important;
}

.rz-calendar {
    background-color: var(--bg-color) !important;
}

.rz-calendar-header {
    background-color: var(--bg-color) !important;
}

.rz-calendar-view-container {
    background-color: var(--bg-color) !important;
}

.rz-calendar-view {
    background-color: var(--bg-color) !important;
}

/* Datepicker dropdown panels (month/year) */
.rz-dropdown-panel {
    background-color: var(--bg-color) !important;
}

.rz-dropdown-items-wrapper {
    background-color: var(--bg-color) !important;
}

.rz-dropdown-items {
    background-color: var(--bg-color) !important;
}

ul.rz-dropdown-items {
    background-color: var(--bg-color) !important;
}

.rz-dropdown-item {
    background-color: var(--bg-color) !important;
}

.rz-dropdown-item:hover {
    background-color: var(--secondary-color) !important;
}

.rz-dropdown-item.rz-state-highlight {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* Datepicker disabled state */
.rz-datepicker-calendar .rz-state-default.rz-state-disabled {
    opacity: 0.7 !important;
    background-color: transparent !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .rz-column {
        padding: 10px;
    }
    
    .order-summary {
        margin-top: 20px;
    }
}

/* Dynamic color customization support */
/* Usage: Add URL parameters ?bg-color=HEXCOLOR&primary-color=HEXCOLOR */
/* Example: ?bg-color=ff0000&primary-color=00ff00 */

/* JavaScript will update these CSS variables based on URL parameters */

/* Custom styling for RadzenTextBox in booking forms */
.booking-form-input .rz-textbox,
.booking-form-input .rz-textbox.rz-textbox,
.booking-form-input.rz-textbox {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    background-color: white !important;
    height: auto !important;
    filter: none !important;
    margin-top:5px !important;
}

.booking-form-input .rz-textbox input,
.booking-form-input .rz-textbox.rz-textbox input,
.booking-form-input.rz-textbox input {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    background-color: white !important;
    height: auto !important;
    filter: none !important;
    box-sizing: border-box !important;

}

.booking-form-input .rz-textbox:focus,
.booking-form-input .rz-textbox:focus-within,
.booking-form-input .rz-textbox.rz-textbox:focus,
.booking-form-input .rz-textbox.rz-textbox:focus-within,
.booking-form-input.rz-textbox:focus,
.booking-form-input.rz-textbox:focus-within {
    outline: none !important;
    border-color: #f1b865 !important;
    box-shadow: 0 0 0 3px rgba(241, 184, 101, 0.1) !important;
    background-color: white !important;
    filter: none !important;
}

.booking-form-input .rz-textbox input:focus,
.booking-form-input .rz-textbox.rz-textbox input:focus,
.booking-form-input.rz-textbox input:focus {
    outline: none !important;
    border-color: #f1b865 !important;
    box-shadow: 0 0 0 3px rgba(241, 184, 101, 0.1) !important;
    background-color: white !important;
    filter: none !important;
}

.booking-form-input .rz-textbox input::placeholder,
.booking-form-input .rz-textbox.rz-textbox input::placeholder,
.booking-form-input.rz-textbox input::placeholder,
.booking-form-input .rz-textbox input::-webkit-input-placeholder,
.booking-form-input .rz-textbox input::-moz-placeholder,
.booking-form-input .rz-textbox input:-ms-input-placeholder {
    color: #999 !important;
    font-style: italic !important;
    opacity: 1 !important;
    font-family: 'Antonio', sans-serif !important;
}

.booking-form-input .rz-textbox:hover:not(:focus-within),
.booking-form-input .rz-textbox.rz-textbox:hover:not(:focus-within),
.booking-form-input.rz-textbox:hover:not(:focus-within) {
    filter: none !important;
    border-color: #e0e0e0 !important;
    background-color: white !important;
}

.booking-form-input .rz-textbox input:hover:not(:focus),
.booking-form-input .rz-textbox.rz-textbox input:hover:not(:focus),
.booking-form-input.rz-textbox input:hover:not(:focus) {
    filter: none !important;
    border-color: #e0e0e0 !important;
    background-color: white !important;
}

/* Custom styling for RadzenTextArea in booking forms */
.booking-form-input .rz-textarea,
.booking-form-input .rz-textarea.rz-textarea,
.booking-form-input.rz-textarea {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    background-color: white !important;
    height: auto !important;
    filter: none !important;
    resize: vertical !important;
        margin-top:5px !important;
}

.booking-form-input .rz-textarea textarea,
.booking-form-input .rz-textarea.rz-textarea textarea,
.booking-form-input.rz-textarea textarea {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    background-color: white !important;
    height: auto !important;
    filter: none !important;
    box-sizing: border-box !important;
    resize: vertical !important;
}

.booking-form-input .rz-textarea:focus,
.booking-form-input .rz-textarea:focus-within,
.booking-form-input .rz-textarea.rz-textarea:focus,
.booking-form-input .rz-textarea.rz-textarea:focus-within,
.booking-form-input.rz-textarea:focus,
.booking-form-input.rz-textarea:focus-within {
    outline: none !important;
    border-color: #f1b865 !important;
    box-shadow: 0 0 0 3px rgba(241, 184, 101, 0.1) !important;
    background-color: white !important;
    filter: none !important;
}

.booking-form-input .rz-textarea textarea:focus,
.booking-form-input .rz-textarea.rz-textarea textarea:focus,
.booking-form-input.rz-textarea textarea:focus {
    outline: none !important;
    border-color: #f1b865 !important;
    box-shadow: 0 0 0 3px rgba(241, 184, 101, 0.1) !important;
    background-color: white !important;
    filter: none !important;
}

.booking-form-input .rz-textarea textarea::placeholder,
.booking-form-input .rz-textarea.rz-textarea textarea::placeholder,
.booking-form-input.rz-textarea textarea::placeholder,
.booking-form-input .rz-textarea textarea::-webkit-input-placeholder,
.booking-form-input .rz-textarea textarea::-moz-placeholder,
.booking-form-input .rz-textarea textarea:-ms-input-placeholder {
    color: #999 !important;
    font-style: italic !important;
    opacity: 1 !important;
}

.booking-form-input .rz-textarea:hover:not(:focus-within),
.booking-form-input .rz-textarea.rz-textarea:hover:not(:focus-within),
.booking-form-input.rz-textarea:hover:not(:focus-within) {
    filter: none !important;
    border-color: #e0e0e0 !important;
    background-color: white !important;
}

.booking-form-input .rz-textarea textarea:hover:not(:focus),
.booking-form-input .rz-textarea.rz-textarea textarea:hover:not(:focus),
.booking-form-input.rz-textarea textarea:hover:not(:focus) {
    filter: none !important;
    border-color: #e0e0e0 !important;
    background-color: white !important;
}