/* Custom styles for the reservation form */

.wpc-reservation-form-root {
    background-color: var(--theme-palette-color-8, #f5f5f5) !important; /* fallback to light gray */
}

.wpc-reservation-form-root .bg-white,
.wpc-reservation-form-root .bg-card {
    background-color: #181c18
}

.wpc-reservation-form-root .wcf-calendar .text-center {
    color: #fff;
}

.wpc-reservation-form-root .wcf-calendar .text-center {
    color: var(--theme-palette-color-3);
}


.wpc-reservation-form-root label,
.wpc-reservation-form-root .wpc-label,
.wpc-reservation-form-root .wpc-field-label,
.wpc-reservation-form-root span[class*="label"] {
    color: var(--theme-palette-color-3);
    font-weight: 500;
}

/* Dropdowns (Time and Total Guest) color fix */
.wpc-reservation-form-root .wcf-select-btn,
.wpc-reservation-form-root select[aria-hidden],
.wpc-reservation-form-root select {
    background-color: transparent !important;
    color: var(--theme-palette-color-2);
    border: 1px solid var(--theme-palette-color-6);
    border-radius: 10px;
    font-size: 15px;
}

.wpc-reservation-form-root .wcf-select-btn[data-state="open"],
.wpc-reservation-form-root select:focus {
    border-color: var(--theme-palette-color-1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-palette-color-1) 25%, transparent);
}

.wpc-reservation-form-root .wcf-select-btn span[data-slot="select-value"] {
    color: var(--theme-palette-color-2);
}

/* Dropdown placeholder text */
.wpc-reservation-form-root .wcf-select-btn[data-placeholder] span[data-slot="select-value"] {
    color: var(--theme-palette-color-4);
}

/* Dropdown arrow icon */
.wpc-reservation-form-root .wcf-select-btn svg {
    color: var(--theme-palette-color-4);
    stroke: var(--theme-palette-color-4);
}

.wpc-reservation-form-root .wcf-select-btn span[data-slot="select-value"] {
    color: var(--theme-palette-color-3);
}

.wpc-reservation-form-root .rdp-root {
    background-color: var(--theme-palette-color-7)
}

/* Cancel button */
.wpc-reservation-form-root .wcf-soft-secondary-btn {
    padding: 25px 20px;
}

.wpc-reservation-form-root .wcf-primary-btn {
    padding: 25px 20px;
}

@layer smc {
    .wpc-reservation-form-root .wcf-input,
    .wpc-reservation-form-root textarea {
        color: var(--theme-text-color) !important;
    }


    /* Reservation page 2-3, confirm, confirmed */
    .wpc-reservation-summary .wcf-reservation-summary-item {
        color: var(--theme-text-color);
    }

    .wpc-reservation-form-root .text-card-foreground,
    .wpc-reservation-form-root .text-gray-900,
    .wpc-reservation-form-root .text-gray-600,
    .wpc-reservation-form-root .text-muted-foreground {
        color: var(--theme-text-color) !important;
    }
}