/*
    CSS file for Kódszervíz Időpontfoglaló
*/

/*  Base
-------------------------------------------*/

    .kszi-booking {
        --kszi-accent: #3B1856;
        --kszi-primary: #BC9EBD;
        --kszi-primary-hover: #C990CB;
        --kszi-primary-shadow: #826283;
        --kszi-surface: #F7F0F8;
        --kszi-text: #272727;
        --kszi-muted: #8A8A8A;
        --kszi-error: #D96499;
        --kszi-radius: 16px;
        --kszi-font-heading: inherit;

        display: flex;
        align-items: flex-start;
        gap: 48px;
        color: var(--kszi-text);
        transition: all ease 0.4s;
    }

    .kszi-booking.loading .days,
    .kszi-booking.loading .form {
        opacity: 0.5;
        pointer-events: none;
    }

        .kszi-booking button {
            font-family: inherit;
            transition: all ease 0.4s;
        }

        .kszi-booking [hidden] {
            display: none !important;
        }


/*  Calendar
-------------------------------------------*/

    .kszi-booking .calendar {
        flex: 1 1 auto;
        min-width: 0;
    }

        .kszi-booking .calendar-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 24px;
        }

            .kszi-booking .kszi-arrow {
                width: 42px;
                height: 42px;
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #FFF;
                background: var(--kszi-primary);
                border: 0;
                border-radius: 50%;
                box-shadow: 0 3px 0 var(--kszi-primary-shadow);
                cursor: pointer;
            }

                .kszi-booking .kszi-arrow svg {
                    width: 15px;
                    height: 16px;
                }

                .kszi-booking .kszi-arrow.prev svg {
                    transform: rotate(90deg);
                }

                .kszi-booking .kszi-arrow.next svg {
                    transform: rotate(-90deg);
                }

                .kszi-booking .kszi-arrow:hover {
                    background: var(--kszi-primary-hover);
                }

                .kszi-booking .kszi-arrow:active {
                    background: var(--kszi-primary-hover);
                    box-shadow: none;
                    transform: translateY(3px);
                }

                .kszi-booking .kszi-arrow:disabled {
                    background: var(--kszi-primary);
                    box-shadow: 0 3px 0 var(--kszi-primary-shadow);
                    opacity: 0.4;
                    transform: none;
                    cursor: default;
                }

            .kszi-booking .week-label {
                color: var(--kszi-accent);
                font-family: var(--kszi-font-heading);
                font-size: 22px;
                line-height: 1.2;
                text-align: center;
            }

        .kszi-booking .days {
            display: flex;
            gap: 12px;
            transition: all ease 0.4s;
        }

            .kszi-booking .day {
                flex: 1 1 0;
                min-width: 0;
                padding: 16px 12px;
                background: var(--kszi-surface);
                border-radius: var(--kszi-radius);
            }

                .kszi-booking .day-name {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 2px;
                    padding-bottom: 12px;
                    border-bottom: 1px solid rgba(59, 24, 86, 0.1);
                    margin-bottom: 12px;
                }

                    .kszi-booking .day-name strong {
                        color: var(--kszi-accent);
                        font-family: var(--kszi-font-heading);
                        font-size: 18px;
                        font-weight: 400;
                        text-transform: capitalize;
                    }

                    .kszi-booking .day-name span {
                        color: var(--kszi-muted);
                        font-size: 14px;
                    }

                .kszi-booking .slots {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                }

                    .kszi-booking .slot {
                        width: 100%;
                        color: var(--kszi-accent);
                        font-size: 16px;
                        font-weight: 600;
                        padding: 10px 4px;
                        background: #FFF;
                        border: 1px solid transparent;
                        border-radius: 100px;
                        cursor: pointer;
                    }

                        .kszi-booking .slot:hover {
                            border-color: var(--kszi-primary);
                        }

                        .kszi-booking .slot.active {
                            color: #FFF;
                            background: var(--kszi-accent);
                        }

                    .kszi-booking .slots .none {
                        color: var(--kszi-muted);
                        text-align: center;
                    }

            .kszi-booking .day.--empty {
                opacity: 0.6;
            }

        .kszi-booking .empty {
            color: var(--kszi-muted);
            text-align: center;
            margin-top: 16px;
        }


/*  Form
-------------------------------------------*/

    .kszi-booking .form,
    .kszi-booking .success {
        flex: 0 0 auto;
        width: 100%;
        max-width: 420px;
        padding: 24px;
        background: var(--kszi-surface);
        border-radius: var(--kszi-radius);
        transition: all ease 0.4s;
    }

        .kszi-booking .selected {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-bottom: 20px;
        }

            .kszi-booking .selected-label {
                color: var(--kszi-muted);
                font-size: 14px;
            }

            .kszi-booking .selected strong {
                color: var(--kszi-accent);
                font-family: var(--kszi-font-heading);
                font-size: 20px;
                font-weight: 400;
                line-height: 1.3;
            }

        .kszi-booking .field + .field {
            margin-top: 12px;
        }

            .kszi-booking .field > label:not(:has(input)) {
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip: rect(0 0 0 0);
                position: absolute;
            }

            .kszi-booking .field input[type="text"],
            .kszi-booking .field input[type="email"],
            .kszi-booking .field input[type="tel"] {
                width: 100%;
                color: var(--kszi-text);
                font-family: inherit;
                font-size: 16px;
                padding: 12px 20px;
                background: #FFF;
                border: 1px solid transparent;
                border-radius: 100px;
                appearance: none;
            }

                .kszi-booking .field input:focus {
                    border-color: var(--kszi-primary);
                    outline: none;
                }

                .kszi-booking ::placeholder {
                    color: var(--kszi-text);
                    opacity: 1;
                }

            .kszi-booking .field.invalid input {
                border-color: var(--kszi-error);
            }

        .kszi-booking .consent {
            margin-top: 16px;
        }

            .kszi-booking .consent label {
                display: flex;
                align-items: flex-start;
                gap: 8px;
                font-size: 14px;
                line-height: 1.4;
                cursor: pointer;
            }

            .kszi-booking .consent input[type="checkbox"] {
                width: 20px;
                height: 20px;
                flex-shrink: 0;
                margin: 0;
                padding: 0;
                background: #FFF;
                border: 1px solid transparent;
                border-radius: 6px;
                appearance: none;
                cursor: pointer;
            }

                .kszi-booking .consent input[type="checkbox"]:checked {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5L4.5 8.5L11 1.5' stroke='%233B1856' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                    background-position: center;
                    background-repeat: no-repeat;
                }

            .kszi-booking .consent.invalid input[type="checkbox"] {
                border-color: var(--kszi-error);
            }

            .kszi-booking .consent a {
                text-decoration: underline;
            }

        .kszi-booking .error {
            color: #FFF;
            font-size: 12px;
            padding: 6px 16px;
            background: var(--kszi-error);
            border-radius: 12px;
            margin-top: 4px;
            display: none;
        }

        .kszi-booking .error.show {
            display: block;
        }

        .kszi-booking .hp {
            left: -9999px;
            position: absolute;
        }

        .kszi-booking .form-message:not(:empty) {
            color: var(--kszi-error);
            font-weight: 600;
            margin-top: 16px;
        }

        .kszi-booking .footer {
            margin-top: 20px;
            text-align: center;
        }

            .kszi-booking .kszi-button {
                min-width: 213px;
                height: 44px;
                color: #FFF;
                font-size: 16px;
                padding: 0 24px;
                background: var(--kszi-primary);
                border: 0;
                border-radius: 100px;
                cursor: pointer;
            }

                .kszi-booking .kszi-button:hover {
                    background: var(--kszi-primary-hover);
                }

            .kszi-booking button[type="submit"]:disabled {
                opacity: 0.6;
                cursor: default;
            }

    .kszi-booking .success {
        max-width: none;
        color: var(--kszi-accent);
        font-family: var(--kszi-font-heading);
        font-size: 22px;
        line-height: 1.4;
        text-align: center;
    }


/*  Cancel
-------------------------------------------*/

    .kszi-cancel {
        justify-content: center;
    }

        .kszi-cancel .cancel-box {
            width: 100%;
            max-width: 560px;
            padding: 32px;
            text-align: center;
            background: var(--kszi-surface);
            border-radius: var(--kszi-radius);
        }

            .kszi-cancel h3 {
                color: var(--kszi-accent);
                font-family: var(--kszi-font-heading);
                font-size: 26px;
                font-weight: 400;
                line-height: 1.2;
                margin-bottom: 16px;
            }

            .kszi-cancel p + p {
                margin-top: 8px;
            }

            .kszi-cancel .form-message:not(:empty) {
                color: var(--kszi-accent);
                font-weight: 600;
                margin: 16px 0 0;
            }

            .kszi-cancel button {
                margin-top: 24px;
            }


/*  Responsive
-------------------------------------------*/

@media (max-width: 1023px)
{
    .kszi-booking { flex-direction: column; align-items: stretch; }
    .kszi-booking .form, .kszi-booking .success { max-width: none; }
}

@media (max-width: 767px)
{
    .kszi-booking .days { flex-direction: column; }
    .kszi-booking .day { display: flex; align-items: flex-start; gap: 12px; }
    .kszi-booking .day-name { width: 72px; flex-shrink: 0; align-items: flex-start; padding-bottom: 0; border-bottom: 0; margin-bottom: 0; }
    .kszi-booking .slots { flex-direction: row; flex-wrap: wrap; flex: 1 1 auto; }
    .kszi-booking .slot { width: auto; padding: 8px 14px; }
    .kszi-booking .slots .none { text-align: left; }
    .kszi-booking .week-label { font-size: 18px; }
}