@import url('https://fonts.googleapis.com/css2?family=Antonio&display=swap');

:root {
    --bg-color: #ffffff;
    --primary-color: #f0b862;
    --secondary-color: #f2f3f3;
    --font-color: #333333;
}

body{
    background-color: var(--bg-color) !important;
}
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 12px;
    background-color: #ece5df;
}

.rz-selectbutton .rz-button.rz-button-md{
    background-color: white !important;
}

.rz-selectbutton .rz-button.rz-button-md.rz-state-active{
    background-color: #ffddbc !important;
}

.rz-form-field-content {
    background-color:white !important;
}

.rz-textbox{
    background-color: white !important;
}
::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgba(234, 181, 100, 1);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}
.rz-layout {
    background-color: var(--bg-color) !important;
    padding: 0px;
}

.rz-body {
    padding: 0px;
}
.antonio-font{
    font-family: 'Antonio', sans-serif !important;
}

.rz-button.rz-primary.rz-shade-default{
    background-color: var(--primary-color) !important;
}
.rz-color-on-primary-light{
    color: #252529 !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);
}

/* 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;
}

/* Input fields - normal state */
.rz-textbox:not([readonly]):not(:focus-within), 
.rz-textarea:not([readonly]):not(:focus-within),
.rz-dropdown:not(:focus-within),
.rz-multiselect:not(:focus-within),
.rz-datepicker:not(:focus-within) {
    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;
}

.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-dropdown, .rz-multiselect {
    background-color: white !important;
}

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

/* Font colors - More specific and selective */
.rz-text:not(.rz-color-on-primary-light), 
.rz-label, 
.rz-heading, 
p:not(.rz-color-on-primary-light), 
span:not(.rz-color-on-primary-light),
div:not(.rz-color-on-primary-light):not(.rz-button-box) {
    color: var(--font-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 disabled state */
.rz-datepicker-calendar .rz-state-default.rz-state-disabled {
    opacity: 0.7 !important;
    background-color: transparent !important;
}

@media only screen and (min-width: 641px) {
    .rz-layout {
        padding: 20px;
    }
}

@media only screen and (min-width: 961px) {
    .rz-layout {
        padding: 20px;
    }
}