@import "bookprocess_base.css";
@import "bookprocess_v2.css";
@import "node_modules/react-datepicker/dist/react-datepicker.min.css";

.bookprocess {
    --bp-col-dark: hsl(140, 58%, 30%);
    --bp-col-middle: hsl(120, 65%, 40%);
    --bp-col-light: hsl(140, 20%, 75%);
    --bp-color-text: hsl(140, 10%, 15%);
    --bp-color-text-alt: hsl(140, 10%, 90%);
    --bp-color-invalid: #c00;
}

.bookprocess * {
    box-sizing: border-box;
}

label[for^='fixedtext_'] {
    color: #444;
}
.recras-required > :is(label[for^='choice_'], label[for^='contact']):not(:empty)::after {
    color: #444;
}

#flows a {
    background: var(--bp-col-dark);
    border-radius: 4px;
    color: var(--bp-color-text-alt);
    transition: background-color 0.2s linear;
}
#flows a:hover,
#flows a:active {
    background: var(--bp-col-middle);
}

.bookprocess aside h2 {
    background-color: var(--bp-col-light);
}
@container bookprocess (width < 900px) {
    .recapWrapper h2::after,
    .recapWrapper h2::before {
        background-color: currentColor;
    }
}

.bookprocess :is(input, button, select, textarea) {
    border-radius: 4px;
}
.bookprocess :is(input, select, textarea) {
    background: #fff;
    color: #000;
}
.bookprocess input[disabled] {
    background: var(--bp-color-disabled);
    cursor: not-allowed;
}
.bookprocess option[disabled] {
    color: var(--bp-color-disabled);
}
.bookprocess input:invalid:not([value='']) {
    border: 2px solid var(--bp-color-invalid);
}
.bookprocess button {
    background: #ddd;
    border: 1px solid #bbb;
    margin: 0.5em 0;
    transition: all 0.2s linear;
}
.bookprocess button:active {
    background: #eee;
}
@media (hover) {
    .bookprocess button:hover {
        background: #eee;
    }
}
.bookprocess .react-datepicker button {
    background: unset;
    border: unset;
    margin: unset;
}

.bookprocess .primary {
    background: var(--bp-col-dark);
    border-color: var(--bp-col-dark);
    color: var(--bp-color-text);
}
.bookprocess .primary:active {
    background: var(--bp-col-middle);
    border-color: var(--bp-col-middle);
}
@media (hover) {
    .bookprocess .primary:hover {
        background: var(--bp-col-middle);
        border-color: var(--bp-col-middle);
    }
}

.price-information {
    color: #444;
    font-size: 0.9em;
}

.bookprocess .error {
    background: hsl(0, 100%, 96%);
    color: hsl(0, 100%, 33%);
}
.bookprocess .info {
    background: hsl(200, 100%, 96%);
    color: hsl(200, 100%, 33%);
}
.bookprocess :is(.error, .info) {
    border: 1px solid currentColor;
    border-radius: 4px;
}

:is(#programma, #factuurRegels) tbody tr + tr td {
    border-top: 1px dotted #dedede;
}
:is(#programma, #factuurRegels) thead th {
    border-bottom: 2px solid #ccc;
    font-weight: bold;
}
#factuurRegels tbody:empty + tfoot #totaalFactuur :is(th, td) {
    /* If the table is empty, hide the footer border because the header also has a 2px border */
    border-top: 0;
}
#teBetalen {
    font-size: 1.1em;
    font-weight: bold;
}
#teBetalen :is(th, td) {
    border-top: 2px solid #ccc;
}
#totaalFactuur :is(th, td) {
    border-top: 2px solid #ccc;
}
#totaalFactuur + tr:not(#teBetalen) {
    color: #666;
    font-style: italic;
}

.react-datepicker .react-datepicker__day--keyboard-selected {
    background-color: transparent;
}
.react-datepicker .react-datepicker__day--keyboard-selected:not(.react-datepicker__day--disabled) {
    color: #000;
}
.react-datepicker__day--today::after {
    border-color: var(--bp-col-dark);
}

.react-datepicker__day--fully-booked {
    color: #fd9d9d;
}

.recras-product_with_time.auto-amount.display-automatic .selectWrapper label,
:is(.recras-package, .recras-product_label_filter) .radioWrapper > label,
:is(.recras-product_without_time, .recras-product_label_filter, .recras-voucher) .checkboxWrapper > label,
.display-dayticket.display-automatic .checkboxWrapper label {
    background-color: var(--bp-col-light);
    border-radius: 50%;
}
.recras-booking_starttime.display-blocks label,
.recras-product_with_time:not(.display-dayticket) .checkboxWrapper > label {
    background-color: var(--bp-col-light);
    border: 1px solid var(--bp-col-light);
    color: var(--bp-color-text-alt);
}
@media (hover) {
    .recras-booking_starttime.display-blocks input:not([disabled]) + label:hover,
    .recras-product_with_time.auto-amount.display-automatic .selectWrapper input:not([disabled]) + label:hover,
    :is(.recras-package, .recras-product_label_filter) .radioWrapper input:not([disabled]) + label:hover,
    :is(.recras-product_without_time, .recras-product_label_filter, .recras-voucher) .checkboxWrapper > input:not([disabled]) + label:hover,
    .recras-product_with_time .checkboxWrapper input:not([disabled]) + label:hover {
        background-color: var(--bp-col-middle);
        color: var(--bp-color-text-alt);
    }
    .recras-booking_starttime.display-blocks input[disabled] + label,
    .recras-product_with_time.auto-amount.display-automatic .selectWrapper input[disabled] + label,
    :is(.recras-package, .recras-product_label_filter) .radioWrapper input[disabled] + label,
    .recras-product_with_time .checkboxWrapper input[disabled] + label {
        cursor: not-allowed;
    }
}

.recras-booking_starttime.display-blocks :checked + label,
.recras-product_with_time.auto-amount.display-automatic .selectWrapper :checked + label,
:is(.recras-package, .recras-product_label_filter) :checked + label,
:is(
    .recras-product_with_time:not(.display-dayticket),
    .recras-product_without_time,
    .recras-voucher
) > div > div :checked + label,
.recras-product_label_filter .subgroupWrapper :checked + label,
.display-dayticket.display-automatic .checkboxWrapper :checked + label {
    background-color: var(--bp-col-dark);
    color: var(--bp-color-text-alt);
}

.recras-product_with_time > div > div.subgroupWrapper input:disabled + label,
.recras-product_without_time > div.subgroupWrapper input:disabled + label,
.recras-voucher > div.subgroupWrapper input:disabled + label {
    border-color: var(--bp-color-disabled);
    background-color: var(--bp-color-disabled);
    color: var(--bp-color-disabled-text);
}

.bookprocess .numberWithPlusMinus input {
    background-color: #fff;
    border-color: var(--bp-col-dark);
}
.bookprocess .numberWithPlusMinus input:disabled {
    background-color: var(--bp-color-disabled);
    border-color: var(--bp-color-disabled);
}
.bookprocess .numberWithPlusMinus button {
    background-color: var(--bp-col-dark);
    color: var(--bp-color-text);
}
.bookprocess .numberWithPlusMinus :is(
    input:placeholder-shown,
    input[value=''],
    input[value='0']
) {
    border-color: var(--bp-col-light);
}

/* Time selected, but no amount */
.bookprocess .selectWrapper:has(option:not(:first-child):checked) + .numberWrapper input:is(
    :placeholder-shown,
    [value=''],
    [value='0']
) {
    border-color: var(--bp-color-invalid);
}
/* Amount selected, but no time */
.bookprocess .selectWrapper:has(option:first-child:checked):has(
    + .numberWrapper input:not(:is(
        :placeholder-shown,
        [value=''],
        [value='0']
    ))
) select {
    border-color: var(--bp-color-invalid);
}

.bookprocess .numberWithPlusMinus input:placeholder-shown ~ button {
    background-color: var(--bp-col-light);
    color: var(--bp-color-text-alt);
}
.bookprocess .numberWithPlusMinus input:placeholder-shown ~ button::after {
    background-color: var(--bp-color-text-alt);
}
.numberWithPlusMinus input:where([value=''],[value='0']) ~ button {
    background-color: var(--bp-col-light);
    color: var(--bp-color-text);
}
.numberWithPlusMinus input:where([value=''],[value='0']) ~ button::after {
    background-color: var(--bp-color-text-alt);
}
@media (hover) {
    .numberWithPlusMinus button:hover {
        background-color: var(--bp-col-middle) !important; /* Important to override styles for empty value */
    }
}

.recras-product_with_time .numberWrapper.disabled {
    color: var(--bp-color-disabled);
}
.recras-product_without_time .numberWrapper.disabled,
.recras-voucher .numberWrapper.disabled {
    background-color: var(--bp-color-disabled);
}
.numberWrapper.disabled button {
    background-color: var(--bp-color-disabled) !important; /* Important to overwrite [value=""] */
    color: var(--bp-color-disabled-text) !important; /* Important to overwrite [value=""] */
}
.numberWrapper.disabled input {
    border-color: var(--bp-color-disabled) !important; /* Important to overwrite [value=""] */
}
.numberWrapper > input:invalid {
    background-color: #e0adad;
    border: 0;
}
.spinner {
    border: 8px solid var(--bp-col-dark);
    border-top-color: var(--bp-col-middle);
}

.recapEle dt {
    color: #666;
}

.bookprocess input.discountInput[disabled] {
    background: var(--bp-col-light);
}
.recras-discount .btnDelete {
    color: hsl(0, 58%, 58%);
}

.timeslot-capacity {
    background: var(--bp-col-light);
    color: var(--bp-color-text-alt);
}

.bookprocess :is(.extraInfoOpen, dialog .closeBig) {
    background-color: var(--bp-col-light);
    border-color: var(--bp-col-light);
    color: var(--bp-color-text-alt);
}
.bookprocess :is(.extraInfoOpen, dialog .closeBig):active {
    background: var(--bp-col-middle);
    border-color: var(--bp-col-middle);
}
@media (hover) {
    .bookprocess :is(.extraInfoOpen, dialog .closeBig):hover {
        background: var(--bp-col-middle);
        border-color: var(--bp-col-middle);
    }
}