/**
 * Report User modal - RTL/LTR layout.
 * Loaded after page Styles sections so profile CSS cannot override it.
 */

#reportUserModal.show.report-user-modal--rtl .modal-content,
#reportUserModal.show[dir="rtl"] .modal-content {
    direction: rtl !important;
    text-align: right !important;
}

#reportUserModal.show:not(.report-user-modal--rtl) .modal-content,
#reportUserModal.show[dir="ltr"] .modal-content {
    direction: ltr !important;
    text-align: left !important;
}

#reportUserModal.show.report-user-modal--rtl .modal-header,
#reportUserModal.show[dir="rtl"] .modal-header {
    direction: rtl !important;
    flex-direction: row !important;
    justify-content: space-between !important;
}

#reportUserModal.show.report-user-modal--rtl .modal-body,
#reportUserModal.show[dir="rtl"] .modal-body {
    direction: rtl !important;
    text-align: right !important;
}

#reportUserModal.show:not(.report-user-modal--rtl) .modal-body,
#reportUserModal.show[dir="ltr"] .modal-body {
    direction: ltr !important;
    text-align: left !important;
}

#reportUserModal.show.report-user-modal--rtl .modal-footer,
#reportUserModal.show[dir="rtl"] .modal-footer {
    direction: ltr !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
}

#reportUserModal.show.report-user-modal--rtl .modal-footer .btn,
#reportUserModal.show[dir="rtl"] .modal-footer .btn {
    direction: rtl !important;
}

#reportUserModal.show.report-user-modal--rtl .report-user-modal-alert,
#reportUserModal.show[dir="rtl"] .report-user-modal-alert {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    direction: rtl !important;
    text-align: right !important;
}

#reportUserModal.show:not(.report-user-modal--rtl) .report-user-modal-alert,
#reportUserModal.show[dir="ltr"] .report-user-modal-alert {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    direction: ltr !important;
    text-align: left !important;
}

#reportUserModal.show .report-user-modal-alert__icon {
    flex-shrink: 0 !important;
    margin-top: 0.15rem !important;
}

#reportUserModal.show .report-user-modal-alert__text {
    flex: 1 1 auto !important;
}

#reportUserModal.show.report-user-modal--rtl .report-user-modal-alert__text,
#reportUserModal.show[dir="rtl"] .report-user-modal-alert__text {
    direction: rtl !important;
    text-align: right !important;
}

#reportUserModal.show.report-user-modal--rtl .modal-title,
#reportUserModal.show.report-user-modal--rtl .form-label,
#reportUserModal.show.report-user-modal--rtl .form-control,
#reportUserModal.show.report-user-modal--rtl .form-select,
#reportUserModal.show.report-user-modal--rtl textarea.form-control,
#reportUserModal.show[dir="rtl"] .modal-title,
#reportUserModal.show[dir="rtl"] .form-label,
#reportUserModal.show[dir="rtl"] .form-control,
#reportUserModal.show[dir="rtl"] .form-select,
#reportUserModal.show[dir="rtl"] textarea.form-control {
    direction: rtl !important;
    text-align: right !important;
}

#reportUserModal.show.report-user-modal--rtl .form-control::placeholder,
#reportUserModal.show.report-user-modal--rtl textarea.form-control::placeholder,
#reportUserModal.show[dir="rtl"] .form-control::placeholder,
#reportUserModal.show[dir="rtl"] textarea.form-control::placeholder {
    direction: rtl !important;
    text-align: right !important;
}

#reportUserModal.show.report-user-modal--rtl .modal-header .btn-close,
#reportUserModal.show[dir="rtl"] .modal-header .btn-close {
    margin: -0.5rem auto -0.5rem -0.5rem !important;
}

html:not([lang="fa"]) #reportUserModal.show.report-user-modal--rtl .modal input,
html:not([lang="fa"]) #reportUserModal.show.report-user-modal--rtl .modal textarea,
html:not([lang="fa"]) #reportUserModal.show.report-user-modal--rtl .modal select,
html:not([lang="fa"]) #reportUserModal.show[dir="rtl"] .modal input,
html:not([lang="fa"]) #reportUserModal.show[dir="rtl"] .modal textarea,
html:not([lang="fa"]) #reportUserModal.show[dir="rtl"] .modal select {
    direction: rtl !important;
    text-align: right !important;
}