body {
  background-image: url('../images/hero/mobilebg.png');
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  body {
    background-image: url('../images/hero/background.jpg');
  }
}

/* ═══════════════════════════════════════════
   RTL (Arabic) Support
   ═══════════════════════════════════════════ */

/* ── Base direction ── */
[dir="rtl"] * { letter-spacing: 0 !important; }
[dir="rtl"] body { direction: rtl; text-align: right; }

/* ── Header ── */
[dir="rtl"] header .container > div { flex-direction: row-reverse; }
[dir="rtl"] header nav { flex-direction: row-reverse; }
[dir="rtl"] .dropdown-icon { transform: scaleX(-1); }

/* ── Mobile sidebar ── */
[dir="rtl"] #sidebar .w-full > div:first-child { flex-direction: row-reverse; }
[dir="rtl"] #sidebar .flex.flex-col { align-items: flex-end; }
[dir="rtl"] #sidebar ul { text-align: right; }

/* ── Form labels + inputs ── */
[dir="rtl"] label { text-align: right; }
[dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea {
  text-align: right;
  direction: rtl;
}
[dir="rtl"] .row { flex-direction: row-reverse; flex-wrap: wrap; }

/* ── intlTelInput RTL (phone field) ── */
[dir="rtl"] .iti { direction: ltr; }
[dir="rtl"] .iti input { text-align: left; direction: ltr; }

/* ── Chevron icons in selects ── */
[dir="rtl"] select { background-position: left 12px center; padding-left: 36px; padding-right: 16px; }
[dir="rtl"] .absolute.right-3 { right: auto; left: 12px; }
[dir="rtl"] .absolute.right-3.top-1\/2 { right: auto; left: 12px; }

/* ── Login card ── */
[dir="rtl"] .login-card { flex-direction: row-reverse; }
[dir="rtl"] .login-brand { border-radius: 0 28px 28px 0; }
[dir="rtl"] .login-panel { border-radius: 28px 0 0 28px; }
[dir="rtl"] .l-icon { left: auto; right: 14px; }
[dir="rtl"] .l-input { padding-left: 44px; padding-right: 42px; }
[dir="rtl"] .l-input:not([type="password"]) { padding-left: 16px; padding-right: 42px; }
[dir="rtl"] .eye-btn { right: auto; left: 13px; }
[dir="rtl"] #mobile-logo { direction: rtl; }

/* ── Buttons ── */
[dir="rtl"] .l-btn { flex-direction: row-reverse; }
[dir="rtl"] .btn-submit-one, [dir="rtl"] .btn-cancel { direction: rtl; }

/* ── Visitor Details form ── */
[dir="rtl"] .imgGroup { direction: ltr; }
[dir="rtl"] .form-check { flex-direction: row-reverse; justify-content: flex-end; }

/* ── Step navigation ── */
[dir="rtl"] .flex.justify-between { flex-direction: row-reverse; }

/* ── Hamburger sidebar button ── */
[dir="rtl"] #open-sidebar { margin-left: 0; }

/* ── Header stacking: ensure header + dropdown paint above login card ── */
header {
    z-index: 100;
}
/* Make .dropdown the positioned parent so top/right/left are relative to the button, not the header */
header .dropdown {
    position: relative;
}
header .dropdown ul,
header .dropdown-active > ul {
    position: absolute !important;
    top: 100% !important;
    margin-top: 8px;
    z-index: 9999 !important;
}
/* LTR: align left edge of menu with button */
header .dropdown ul { left: 0; right: auto; }
/* RTL: align right edge of menu with button */
[dir="rtl"] header .dropdown ul { right: 0; left: auto; }