/* Utility: apply to <input>, <textarea> or wrapper
   Usage examples:
     <input class="placeholder-rtl" placeholder="متن ...">
     <div class="placeholder-rtl"><input placeholder="متن ..."></div>
     <input class="placeholder-rtl--only" placeholder="متن ...">  <-- placeholder only
*/

/* Align field text and placeholder to the right (use for RTL fields) */
.placeholder-rtl,
.placeholder-rtl input,
.placeholder-rtl textarea,
input.placeholder-rtl,
textarea.placeholder-rtl {
    text-align: right;
}

    /* Standard placeholder */
    input.placeholder-rtl::placeholder,
    textarea.placeholder-rtl::placeholder,
    .placeholder-rtl::placeholder,
    .placeholder-rtl input::placeholder,
    .placeholder-rtl textarea::placeholder {
        text-align: right;
        opacity: 1; /* Keep consistent visibility */
    }

    /* Vendor-prefixed placeholders for wider browser support */
    input.placeholder-rtl::-webkit-input-placeholder,
    textarea.placeholder-rtl::-webkit-input-placeholder,
    .placeholder-rtl::-webkit-input-placeholder {
        text-align: right;
    }

    input.placeholder-rtl:-ms-input-placeholder,
    textarea.placeholder-rtl:-ms-input-placeholder,
    .placeholder-rtl:-ms-input-placeholder {
        text-align: right;
    }

    input.placeholder-rtl::-ms-input-placeholder,
    textarea.placeholder-rtl::-ms-input-placeholder,
    .placeholder-rtl::-ms-input-placeholder {
        text-align: right;
    }

    input.placeholder-rtl::-moz-placeholder,
    textarea.placeholder-rtl::-moz-placeholder,
    .placeholder-rtl::-moz-placeholder {
        text-align: right;
        opacity: 1;
    }

/* Variant: align placeholder only (do not change direction/text-align of actual input) */
input.placeholder-rtl--only::placeholder,
textarea.placeholder-rtl--only::placeholder,
.placeholder-rtl--only::placeholder {
    text-align: right;
    opacity: 1;
}