/* =============================================
   ParkMe SRL – RTL / Arabic Stylesheet
   Applied when body has class .lang-ar
   ============================================= */

body.lang-ar {
    font-family: 'Cairo', 'Plus Jakarta Sans', sans-serif;
    direction: rtl;
}

/* Flip icon directions */
body.lang-ar .bi-arrow-right { transform: scaleX(-1); }
body.lang-ar .bi-arrow-left  { transform: scaleX(-1); }

/* Text alignment */
body.lang-ar .screen-title { text-align: right; }
body.lang-ar .screen-title-ar { text-align: right; }
body.lang-ar .plate-example { text-align: right; }

/* Plate input: keep numerals LTR */
body.lang-ar .plate-input { direction: ltr; text-align: center; }

/* Details table */
body.lang-ar .detail-row { flex-direction: row-reverse; }
body.lang-ar .detail-value { text-align: left; }
body.lang-ar .txn-row { flex-direction: row-reverse; }

/* Location grid */
body.lang-ar .location-facility { flex-direction: row-reverse; }

/* Amount summary bar */
body.lang-ar .amount-summary-bar { flex-direction: row-reverse; }

/* Transaction values keep LTR for numbers */
body.lang-ar .txn-value.mono,
body.lang-ar .txn-value { direction: ltr; text-align: left; }

/* QR hint */
body.lang-ar .qr-scan-hint { flex-direction: row-reverse; }

/* Step labels */
body.lang-ar .step-indicator { flex-direction: row-reverse; }

/* Footer */
body.lang-ar .app-footer { text-align: center; }

/* Buttons */
body.lang-ar .btn-primary-parkme,
body.lang-ar .payment-method-btn { flex-direction: row-reverse; }

/* Bilingual label visibility */
body.lang-ar [data-ar] { /* use Arabic text */ }

/* Card number – always LTR */
body.lang-ar #cardNumber,
body.lang-ar #cardExpiry,
body.lang-ar #cardCvv,
body.lang-ar #cardHolder { direction: ltr; }

/* Bootstrap overrides for RTL */
body.lang-ar .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
body.lang-ar .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
body.lang-ar .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
body.lang-ar .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }

/* Exit notice – right align */
body.lang-ar .exit-notice-card { text-align: right; }

/* Hide EN / Show AR toggling handled in JS */