/*
 * DiziXYZ Restaurant User Panel - RTL Styles
 *
 * This file contains specific styles to adjust the layout for
 * right-to-left (RTL) languages like Persian and Arabic.
 * It's loaded conditionally to override LTR styles when needed.
 */

/* General RTL adjustments */
body {
    direction: rtl;
    text-align: right;
}

/* Header and navigation adjustments */
header {
    /* Reverse the order of elements in the header for RTL */
    flex-direction: row-reverse;
}

header .flex-grow {
    flex-grow: 1;
    text-align: right;
}

header .flex-items-center {
    justify-content: flex-start;
}

header .space-x-4 > * + * {
    margin-left: 0;
    margin-right: 1rem; /* Equivalent of space-x-4 in LTR */
}

/* Form and input adjustments */
.form-label {
    text-align: right;
}

/* Page-specific adjustments */
/* No specific adjustments needed yet, but this is where they would go */

/* Align content to the right if needed, for example */
@media (min-width: 640px) {
    .text-sm-right {
        text-align: right;
    }
}

/* Align text to the right for lists or details */
ul, ol {
    list-style-position: inside;
}

.order-detail-list li, .menu-item p {
    text-align: right;
}

/* Chat page RTL adjustments */
.chat-container .chat-message.self {
    align-self: flex-end; /* Align own messages to the right */
    background-color: #ef4444; /* red-500 */
    color: #fff;
    border-radius: 12px 12px 0 12px;
}

.chat-container .chat-message.other {
    align-self: flex-start; /* Align other messages to the left */
    background-color: #e5e7eb; /* gray-200 */
    color: #333;
    border-radius: 12px 12px 12px 0;
}