@import "./variables";
@import "./bootstrap-variables";
@import "./bootstrap";

@import "./mixins";
@import "./../calendar";
@import "./calendar-overrides";
@import "./../app";

.service-form {
    .header {
        color: $cosmic-orange;

        img {
            max-width: 35px;
        }
    }

    .form-step-header {
        color: $cosmic-header-secondary;
    }

    input[type="text"],
    select {
        @include cosmic-input-base;
        height: 40px;
    }

    .form-check-input {
        &:checked {
            background-color: $cosmic-orange;
            border-color: $cosmic-orange;
        }

        &:focus {
            box-shadow: 0 0 0 0.25rem $cosmic-orange-light;
        }
    }

    .calendar-month {
        .day-of-week {
            @include media-breakpoint-down(sm) {
                font-size: 0.8rem;
            }
        }

        .days-grid .calendar-day {
            label {
                border-color: $cosmic-orange;

                &.disabled {
                    color: $calendar-day-disabled-color;
                    border-color: $calendar-day-disabled-color;
                }

                &:hover,
                &:has(input[type="radio"]:checked) {
                    background: $cosmic-orange;
                    color: #ffffff;
                }
            }
        }
    }

    .craue_formflow_buttons {
        display: flex;
        gap: 0.5rem;
        justify-content: space-between;

        .next-button {
            order: 1;
        }

        .back-button {
            order: 0;
        }
    }
}

.service-choice-btn {
    border-color: $cosmic-orange;
    color: $cosmic-btn-text;

    &.active,
    &:hover {
        border-color: $cosmic-orange;
        box-shadow: 0 4px 6px 0 rgba($cosmic-orange, 0.5);
        color: $cosmic-btn-text;
    }

    .icon {
        max-height: 60px;
    }

    input[type="radio"] {
        /** Hide radio button circle but show html notices */
        position: absolute;
        opacity: 0;
    }
}

.btn-outline-primary {
    @include cosmic-button-base;
}

.btn-outline-secondary {
    @include cosmic-button-base;
}

.logo {
    height: 40px;
    width: auto;
}