.service-button-common {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 40px;
    padding: 16px;
    border-radius: 20px;
    border-width: 2px;
    border-style: solid;
    border-color: #F5BE1E;

}

.service-button {
    color: #F5BE1E;
    background-color: white
}

.service-button .service-button-plus-icon {
    display: block;
}

.service-button .custom-checkbox {
    display: none;
}

.service-button .add-text {
    display: inline;
}

.service-button:hover {
    color: #3F3F3F;
    background-color: #F5E8C0;
}

.service-button:hover .service-button-plus-icon {
    fill: #3F3F3F;
}

.service-frame {
    border: 4px solid #CFCFCF
}

.selected-service .service-button {
    background-color: #F5BE1E;
    color: white;
}

.selected-service .service-button-plus-icon {
    display: none;
}

.selected-service .custom-checkbox {
    display: block;
}

.selected-service .add-text {
    display: none;
}

.selected-service .service-frame {
    border: 16px solid #F5BE1E !important;
}

.service-card .selected-service-image {
    display: none;
}

.service-card .service-image {
    display: block;
}

.selected-service .selected-service-image {
    display: block !important;
}

.selected-service .service-image {
    display: none !important;
}


/* Checkbox'ı gizle */
.custom-checkbox input[type="checkbox"] {
    display: none;
}

/* Checkbox kutusunun stili */
.custom-checkbox .checkmark {
    width: 20px;
    height: 20px;
    background-color: white;
    /* Arkaplan beyaz */
    border: 2px solid #F5BE1E;
    display: inline-block;
    position: relative;
    border-radius: 2px;
    /* Köşeleri yuvarlat */
    cursor: pointer;
}

/* Checkbox seçili olduğunda */
.custom-checkbox input[type="checkbox"]:checked+.checkmark {
    background-color: white;
    /* Arkaplan beyaz */
    border-color: #F5BE1E;
    /* Sınır rengi */
}

/* Tik işareti */
.custom-checkbox input[type="checkbox"]:checked+.checkmark::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 12px;
    border: solid #F5BE1E;
    /* Tik işareti sarı */
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

#select-all-services-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 40px;
    padding: 16px;
    text-align: center;
}

#select-all-services-button.none-selected {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

#select-all-services-button.none-selected:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}

#select-all-services-button.none-selected:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(252 211 77 / var(--tw-bg-opacity, 1));
}

#select-all-services-button.all-selected {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

#select-all-services-button.all-selected:hover {
    --tw-border-opacity: 1;
    border-color: rgb(217 119 6 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}

#select-all-services-button.all-selected:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(252 211 77 / var(--tw-bg-opacity, 1));
}

.service-selection-container {
    column-gap: calc((100% - (3 * 366px)) / 2);
    row-gap: 2rem;
    display: grid;
    place-items: center;

    @media (min-width: 1244px) {
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(3, 1fr);
    }

    @media (max-width: 1243px) and (min-width: 768px) {
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: 767px) {
        grid-template-rows: repeat(6, 1fr);
        grid-template-columns: 1fr;
    }
}

.custom-radio {
    appearance: none;
    -webkit-appearance: none;
    background-color: white;
    border: 2px solid #000;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    outline: none;
}

/* Seçili durumdaki işaret */
.custom-radio:checked::before {
    content: "";
    width: 6px;
    height: 6px;
    background-color: black;
    /* İşaretin siyah olması için */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#other-reasons-textarea {
    display: none;
}

.other-selected #other-reasons-textarea {
    display: block;
}

/* Checkbox'ı gizle */
.custom-checkbox-modal input[type="checkbox"] {
    display: none;
}

/* Checkbox kutusunun stili */
.custom-checkbox-modal .checkmark {
    width: 12px;
    height: 12px;
    background-color: white;
    /* Arkaplan beyaz */
    border: 1px solid #3F3F3F;
    display: inline-block;
    position: relative;
    border-radius: 2px;
    /* Köşeleri yuvarlat */
    cursor: pointer;
}

/* Checkbox seçili olduğunda */
.custom-checkbox-modal input[type="checkbox"]:checked+.checkmark {
    background-color: #3F3F3F;
    /* Arkaplan beyaz */
    border-color: #3F3F3F;
    /* Sınır rengi */
}

/* Tik işareti */
.custom-checkbox-modal input[type="checkbox"]:checked+.checkmark::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0px;
    width: 4px;
    height: 8px;
    border: solid white;
    /* Tik işareti sarı */
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.user-intake-wizard-modal-container[data-step="0"] .form-previous {
    visibility: hidden;
}

.user-intake-wizard-modal-container[data-step="0"] #step-one-fill {
    fill: #F5BE1E;
}

.user-intake-wizard-modal-container[data-step="0"] #step-one-border {
    fill: #F5BE1E;
}

.user-intake-wizard-modal-container[data-step="1"] #step-one-fill {
    fill: #F5BE1E;
}

.user-intake-wizard-modal-container[data-step="1"] #step-one-border {
    fill: #F5BE1E;
}

.user-intake-wizard-modal-container[data-step="2"] #step-one-fill {
    fill: #F5BE1E;
}

.user-intake-wizard-modal-container[data-step="2"] #step-one-border {
    fill: #F5BE1E;
}

.user-intake-wizard-modal-container[data-step="1"] #step-two-fill {
    fill: #F5BE1E;
}

.user-intake-wizard-modal-container[data-step="1"] #step-two-border {
    fill: #F5BE1E;
}

.user-intake-wizard-modal-container[data-step="2"] #step-two-fill {
    fill: #F5BE1E;
}

.user-intake-wizard-modal-container[data-step="2"] #step-two-border {
    fill: #F5BE1E;
}

.user-intake-wizard-modal-container[data-step="2"] #step-three-fill {
    fill: #F5BE1E;
}

.user-intake-wizard-modal-container[data-step="2"] #step-three-border {
    fill: #F5BE1E;
}

.user-intake-wizard-modal-container[data-step="0"] #step-one text {
    font-family: Helvetica Neue;
}

.user-intake-wizard-modal-container[data-step="1"] #step-two text {
    font-family: Helvetica Neue;
}

.user-intake-wizard-modal-container[data-step="2"] #step-three text {
    font-family: Helvetica Neue;
}

.progress-bar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, white 79%, transparent 80% 100%),
        conic-gradient(#EAB308 33%, #FFDE83 0);
    display: flex;
    justify-content: center;
    align-items: center;
}

.address-dropdown {
    background: #f5be1e;
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    width: 500px;
    margin-top: 2px;
}

    .address-dropdown li {
        padding: 10px;
        cursor: pointer;
        padding-left: 15px;
    }

        .address-dropdown li:hover {
            background: #f9db85;
            color: #3f3f3f;
            font-weight: 600;
        }

    .address-dropdown.hidden {
        display: none !important;
    }