app-sangh-edit-profile {
    background: var(--ion-background-content);

    ion-header {
        ion-toolbar {
            ion-button::part(native) {
                --background: none !important
            }

            ion-icon {
                font-size: var(--ion-font-size-24);
            }
        }

    }

    ion-content {
        --background: var(--ion-background-content);
        --padding-start: var(--ion-padding-15);
        --padding-end: var(--ion-padding-15);

        h5 {
            color: var(--ion-color-sangh);
            font-weight: 600;
        }

        ion-card {
            margin: var(--ion-margin-0);
            padding: var(--ion-padding-15);
            margin-bottom: var(--ion-margin-15);
            border-radius: 8px;

            ion-card-header {
                padding: var(--ion-padding-0);

                ion-card-title {
                    font-size: var(--ion-font-size-14);
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: var(--ion-margin-10);
                    align-items: center;

                    ion-icon {
                        width: 27px;
                        height: 33px;
                        padding: 3px 6px;
                        background: var(--ion-background-content);
                        border-radius: var(--ion-border-radius-100);
                        color: var(--ion-color);
                        margin-right: var(--ion-margin-10);
                    }

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .left-data {
                        display: flex;
                        align-items: center;

                        .icons {
                            width: 39px;
                            height: 39px;
                            padding: 8px;
                            background: var(--ion-background-content);
                            border-radius: var(--ion-border-radius-100);
                            color: var(--ion-color);
                            margin-right: var(--ion-margin-10);
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            &.family-members {
                                padding: var(--ion-padding-0);
                            }
                        }

                        p {
                            padding: var(--ion-padding-0);
                            margin: var(--ion-margin-0);
                            font-size: var(--ion-font-size-14);
                            color: #000;
                            font-weight: 600;

                            span {
                                color: var(--ion-content-color);
                                font-size: var(--ion-font-size-14);
                                display: block;
                            }

                            &.points {
                                font-size: var(--ion-font-size-12);
                                color: var(--ion-content-color);
                                display: flex;
                                margin-top: 2px;

                                ion-icon {
                                    background: none;
                                    width: 12px;
                                    height: 12px;
                                    margin: var(--ion-margin-0) 2px var(--ion-margin-0) var(--ion-margin-0);
                                    padding: var(--ion-padding-0);
                                    color: var(--ion-content-color);
                                }
                            }
                        }

                        .content {
                            width: calc(100% - 49px);
                        }
                    }

                    .edit-icon {
                        width: 25px;
                        height: 25px;
                        padding: var(--ion-padding-0);
                        background: var(--ion-background-content);
                        border-radius: var(--ion-border-radius-100);
                        color: var(--ion-color);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    &.profile-picture {
                        display: block;

                        ion-avatar {
                            margin: var(--ion-margin-0) auto;
                            height: 100px;
                            width: 100px;
                        }

                        .edit-icon {
                            float: right;
                        }
                    }
                }
            }

            .edit-icon {
                width: 25px;
                height: 25px;
                padding: var(--ion-padding-0);
                background: var(--ion-background-content);
                border-radius: var(--ion-border-radius-100);
                color: var(--ion-color-sangh);
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                right: 0px;

                img {
                    width: auto;
                    height: 12px;
                }
            }

            &.location-box {
                border: 1px solid var(--ion-content-color);

                ion-card-header {
                    ion-card-title {
                        input {
                            width: 100%;
                            border: none;
                            line-height: 2.2em;
                            outline: none;
                        }
                    }
                }
            }
        }

        input {
            width: 100%;
            display: flex;
            align-items: center;
            padding-left: 5px;
            font-size: 12px;
            border: 1px solid var(--ion-content-color);
            border-radius: 0.25rem;
            height: 2.813rem;
        }

        .search-data {
            top: auto !important;

            ion-list {
                border: 1px solid var(--ion-content-color-sant);
                border-radius: 5px;

                ion-item {
                    ion-label {
                        max-width: inherit !important;
                        white-space: normal !important;
                        width: 69vw;
                        margin: var(--ion-margin-0);
                    }

                    &:last-child {
                        border: none;
                    }
                }
            }
        }

        ion-item::part(detail-icon) {
            display: none;
        }

        &.sangh {
            form {
                position: relative;

                .reset-btn {
                    float: right;

                    &.disable-reset {
                        pointer-events: none !important;
                        opacity: 0.4;
                    }
                }
            }
        }
    }
}

ion-modal {
    &.date-modal {
        --width: 290px;
        --border-radius: 8px;
    }
}

ion-radio-group {
    display: flex;
    gap: 50px;
    margin: 10px 0 10px 0;

    ion-label {
        margin: var(--ion-margin-0);
    }

    ion-radio {
        --color-checked: var(--ion-color-sangh) !important;

        &::part(container) {
            --border-width: 1px;
            border-color: var(--ion-color-sangh);
        }

        &.radio-checked {
            --color-checked: var(--ion-color-sangh) !important;
        }
    }
}

.mobile-input {
    display: flex;
    justify-content: space-between;

    ion-input {
        height: 30px;
    }
}


.upload-container {
    width: 100%;
    min-height: 50px;
    border: 1.5px dashed #B4B4B4;
    text-align: center;
    padding: 0.8rem;
    color: var(--ion-color-sangh);
    background-color: var(--ion-color-light-dark);
    justify-content: center;
    align-items: center;
    display: flex;

    ion-icon {
        margin-right: 0.5rem;
    }
}

.upload-preview {
    display: flex;
    align-items: center;
    padding: 5px;
    position: relative;
    gap: 10px;

    img {
        width: 100px;
        height: 80px;
        object-fit: cover;
        border-radius: 5px;
    }

    ion-icon {
        position: absolute;
        background: var(--ion-color-white);
        font-size: 20px;
        border-radius: var(--ion-border-radius-100);
        color: #343434;
        right: 0px;
        top: 8px;
    }
}

ion-button {
    margin: var(--ion-margin-0) var(--ion-margin-15);
    --border-radius: 0.313rem;
}

ion-footer {
    padding-bottom: env(safe-area-inset-bottom);
}

.modal-card {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 10px;

    ion-card-header {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    ion-card-title {
        font-size: 18px;
        font-weight: 600;
    }

    ion-card-content {
        p {
            color: black;
        }

        padding-bottom: 0 !important;
    }

    p {
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: 600;
    }

    .hi {
        &::part(native) {
            --background: var(--ion-color-sangh) !important;
        }
    }

    .button-container {
        display: flex;
        justify-content: center;
        gap: 5px;

        ion-button.hi {
            flex: 0 0 35%;
        }
    }

}