.wbk_step {
    &__location_required_notice {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin: 8px 0 12px;
        padding: 10px 12px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #f9fafb;
        color: #6b7280;
        font-size: 13px;
        line-height: 18px;
        font-family: colors.$wbk-font;
    }

    &__location_required_notice_icon {
        flex-shrink: 0;
        width: 18px;
        height: 18px;

        svg {
            width: 18px;
            height: 18px;
            display: block;
            filter: grayscale(1);
        }
    }

    &__services_area {
        display: flex;
        flex-direction: column;
        min-height: 0;

        &--locked {
            filter: blur(2px);
            opacity: 0.6;
            pointer-events: none;
        }
    }

    &__calendar_area {
        display: flex;
        flex-direction: column;
        min-height: 0;

        &--locked {
            filter: blur(2px);
            opacity: 0.6;
            pointer-events: none;
        }
    }

    &__staff_selector_wrapper {
        border-top: 1px solid colors.$row-border;
        padding: 16px 0;
        margin-bottom: 16px;

        .wbk_staff_selector {
            margin-top: 12px;
        }
    }

    &__staff_selector_label {
        display: block;
        margin: 0;
        font-family: colors.$wbk-font;
        font-weight: 500;
        font-size: 14px;
        line-height: 18px;
        color: #8b9ba3;
    }

    &__separator {
        width: 100%;
        height: 1px;
        background-color: #edeff2;
    }

    &__scroll-wrapper {
        .rcs-custom-scrollbar {
            width: 3px;
            right: 0;
            padding: 0;
        }
    }

    &__payment-step {
        display: flex;
        flex-flow: column;
        gap: 16px;
    }

    &__pay-full-amount {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        font-size: 14px;
        line-height: 22px;
        font-weight: 400;
        padding: 14px 16px;
        border: 1.5px solid #edeff2;
        border-radius: 8px;
        background-color: colors.$wbk-primary-50;

        input[type='checkbox'] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
    }

    &__certificates {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 8px;

        img {
            filter: grayscale(1);
            opacity: 0.5;
        }
    }

    &__form-wrapper {
        padding-right: 8px;
    }

    &__unit_range_wrapper {
        display: flex;
        flex-direction: column;
        gap: 12px;
        border: 1px solid #edeff2;
        border-radius: 12px;
        padding: 12px;
        background: #ffffff;
    }

    &__unit_range_header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 4px 8px;
    }

    &__unit_range_badge {
        display: inline-block;
        padding: 0;
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        color: #8b9ba3;
        background: transparent;
        border: none;
        border-radius: 0;
        white-space: nowrap;
    }

    &__unit_range_calendar {
        .wbk_booking_calendar {
            padding: 0;
        }
    }

    &__unit_flexibility {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 4px;

        h4 {
            margin: 0;
            font-size: 18px;
            line-height: 22px;
            color: #22292f;
        }
    }

    &__unit_flexibility_buttons {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    &__unit_flexibility_button {
        border: 1.5px solid #d4dde2;
        border-radius: 10px;
        background: #ffffff;
        color: #22292f;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        padding: 8px 4px;
        cursor: pointer;
        text-align: center;
        user-select: none;

        &--active {
            border-color: colors.$wbk-color-border-selected;
            background: colors.$wbk-primary-50;
            color: colors.$wbk-primary-text-50;
        }
    }

    &__unit_range_loader {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 56px;
    }

    &__unit_range_loader_spinner {
        width: 28px;
        height: 28px;
        border: 3px solid colors.$wbk-primary-500;
        border-top: 3px solid #ffffff;
        border-radius: 50%;
        animation: wbkUnitRangeSpin 0.8s linear infinite;
    }

    &__unit_offers_empty {
        margin: 0;
        font-size: 14px;
        line-height: 20px;
        color: #6b7280;
    }

    &__unit_offers {
        margin-top: 18px;
        scroll-margin-top: 16px;
    }

    &__unit_offers_title {
        margin: 0 0 12px;
        font-size: 18px;
        line-height: 22px;
        color: #111827;
    }

    &__unit_offers_list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 1px;
    }

    &__unit_offers_item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: 1px solid #e6ebf0;
        border-radius: 12px;
        padding: 14px 16px;
        background: #ffffff;
        cursor: pointer;
        transition:
            border-color 0.15s ease,
            box-shadow 0.15s ease,
            background 0.15s ease;

        &:hover {
            border-color: #cbd5e1;
        }

        &--selected {
            border-color: colors.$wbk-color-border-selected;
            box-shadow: 0 0 0 1px colors.$wbk-color-border-selected;
            background: #f8fafc;
        }
    }

    &__unit_offers_item_left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    &__unit_offers_item_icon {
        width: 44px;
        min-width: 44px;
        height: 44px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f0f7ff;
    }

    &__unit_offers_item_title {
        margin: 0!important;
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
        color: #111827;
    }

    &__unit_offers_item_days {
        margin: 2px 0 0!important;
        font-size: 14px;
        line-height: 20px;
        color: #6b7280;
    }

    &__unit_offers_item_right {
        text-align: right;
    }

    &__unit_offers_item_price {
        margin: 0!important;
        font-size: 20px;
        line-height: 24px;
        font-weight: 700;
        color: #111827;
    }

    &__unit_offers_item_status {
        margin: 2px 0 0!important;
        font-size: 14px;
        line-height: 18px;
        font-weight: 400;
        color: #16a34a;
    }

    &__native-scroll-wrapper {
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 0;
        flex: 1;
        scroll-behavior: smooth;

        /* Slim custom scrollbar for Webkit browsers */
        &::-webkit-scrollbar {
            width: 6px;
            background: transparent;
        }

        &::-webkit-scrollbar-thumb {
            background: #d1d5db;
            border-radius: 4px;
            transition: background 0.2s;
        }

        &::-webkit-scrollbar-thumb:hover {
            background: #b0b8c1;
        }

        /* Slim custom scrollbar for Firefox */
        scrollbar-width: thin;
        scrollbar-color: #d1d5db transparent;
    }
}

@keyframes wbkUnitRangeSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.wbk_coupon {
    &__wrapper {
        display: flex;
        align-items: center;
        gap: 12px;

        input[type='text'] {
            border-radius: 8px;
            border: 1px solid #edeff2;
            outline: none;
            box-shadow: none;
            padding: 11px 16px;
            font-weight: 300;
            font-size: 14px;
            line-height: 22px;
            letter-spacing: 1%;
            vertical-align: middle;
            color: #668091;
            width: 100%;
            background: #fff;
        }
    }

    &__feedback {
        margin-top: 4px;
        padding: 10px 16px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;

        &--success {
            background: #e6f7ec;
            color: #1a7f37;
            border: 1px solid #b7ebc6;
        }

        &--failed {
            background: #fff1f0;
            color: #d93025;
            border: 1px solid #ffccc7;
        }
    }
}

.wbk_timezone_selector {
    width: 100%;

    &__wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-bottom: 16px;
        position: sticky;
        top: 0;
        z-index: 999;
        background-color: #fff;
    }

    &__label {
        font-family: colors.$wbk-font;
        font-weight: 400;
        font-style: Regular;
        font-size: 14px;
        leading-trim: NONE;
        line-height: 18px;
        letter-spacing: 1%;
        color: #668091;
        white-space: nowrap;
    }

    .css-13cymwt-control {
        border: 1.5px solid #d4dde2;
        border-radius: 8px;
    }

    .css-1dimb5e-singleValue {
        font-family: colors.$wbk-font;
        font-weight: 500;
        font-style: Medium;
        font-size: 14px;
        leading-trim: NONE;
        line-height: 22px;
        letter-spacing: 1%;
        vertical-align: middle;
        color: #22292f;
    }

    .css-10wo9uf-option,
    .css-d7l1ni-option,
    .css-tr4s17-option {
        font-size: 14px !important;
        line-height: 22px;
        font-family: colors.$wbk-font;
    }

    input {
        height: 30px !important;
    }
}