/* ============================================================
   RTL-Layout-Anpassungen für Arabisch (Bootstrap 4 kompatibel)
   ============================================================ */

/* ================================
   1. Basis: Text- und Schreibrichtung
   ================================ */
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
  font-family: 'Cairo', 'Noto Kufi Arabic', 'Tajawal', sans-serif;
}

/* ================================
   2. Bootstrap Utilities spiegeln
   ================================ */
html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end   { text-align: left !important; }
html[dir="rtl"] .float-left { float: right !important; }
html[dir="rtl"] .float-right { float: left !important; }

html[dir="rtl"] .ml-auto { margin-right: auto !important; margin-left: 0 !important; }
html[dir="rtl"] .mr-auto { margin-left: auto !important; margin-right: 0 !important; }
html[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; }
html[dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; }

html[dir="rtl"] .pl-3 { padding-right: 1rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pr-3 { padding-left: 1rem !important; padding-right: 0 !important; }

/* ================================
   3. Navbar / Navigation
   ================================ */
html[dir="rtl"] .navbar {
  direction: rtl;
}
html[dir="rtl"] .navbar .navbar-brand {
  margin-right: 0;
  margin-left: auto; /* Logo bleibt links außen */
}
html[dir="rtl"] .navbar-nav {
  flex-direction: row-reverse;
  text-align: right;
}
html[dir="rtl"] .navbar-nav .nav-item {
  margin-left: 0.8rem;
  margin-right: 0;
}
html[dir="rtl"] .navbar-nav .dropdown-menu {
  right: auto;
  left: 0;
  text-align: right;
}
html[dir="rtl"] .dropdown-toggle::after {
  margin-right: 0.255em;
  margin-left: 0;
}
html[dir="rtl"] .navbar-toggler {
  margin-left: 0;
  margin-right: 0.5rem;
}
html[dir="rtl"] .navbar .nav-link i {
  margin-left: 0.3rem;
  margin-right: 0;
}
html[dir="rtl"] .navbar .select-wrapper {
  margin-left: 0;
  margin-right: 0.75rem;
}
html[dir="rtl"] .cart-badge {
  right: auto;
  left: 0;
}

/* ================================
   4. Breadcrumbs
   ================================ */
html[dir="rtl"] .breadcrumb {
  flex-direction: row-reverse;
}
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  padding: 0 0.5rem;
}

/* ================================
   5. Formulare
   ================================ */
html[dir="rtl"] label { text-align: right; }
html[dir="rtl"] .form-check {
  padding-right: 1.25rem;
  padding-left: 0;
}
html[dir="rtl"] .form-check-input {
  margin-right: 0;
  margin-left: -1.25rem;
}

/* ================================
   6. Cards & Listen
   ================================ */
html[dir="rtl"] .card-text,
html[dir="rtl"] ul,
html[dir="rtl"] ol {
  text-align: right;
}

/* ================================
   7. Buttons & Icons
   ================================ */
html[dir="rtl"] .btn i.fas,
html[dir="rtl"] .btn i.far {
  margin-right: 0;
  margin-left: 0.4rem;
}

/* Pfeil-Icons automatisch spiegeln */
html[dir="rtl"] i.fa-chevron-right::before { content: "\f053"; } /* Chevron Left */
html[dir="rtl"] i.fa-chevron-left::before  { content: "\f054"; } /* Chevron Right */
html[dir="rtl"] i.fa-arrow-right::before   { content: "\f060"; } /* Arrow Left */
html[dir="rtl"] i.fa-arrow-left::before    { content: "\f061"; } /* Arrow Right */
html[dir="rtl"] i.fa-angle-right::before   { content: "\f104"; } /* Angle Left */

/* ================================
   8. Pagination & Tabellen
   ================================ */
html[dir="rtl"] .pagination { flex-direction: row-reverse; }
html[dir="rtl"] table { direction: rtl; }
html[dir="rtl"] th,
html[dir="rtl"] td { text-align: right; }

/* ================================
   9. Utility / Layout Fixes
   ================================ */
html[dir="rtl"] .modal-header .close {
  margin: -1rem auto -1rem -1rem;
}
html[dir="rtl"] .list-group {
  padding-right: 0;
  padding-left: 0;
}

/* ================================
   10. Language Switcher / Chevron Fix
   ================================ */
html[dir="rtl"] select.custom-select {
  text-align: right;
  direction: rtl;
  background-position: left 0.75rem center !important;
  padding-right: 0.75rem;
  padding-left: 1.5rem;
}

/* Chevron korrekt links & vertikal mittig */
html[dir="rtl"] .select-wrapper {
  position: relative;
}
html[dir="rtl"] .select-wrapper i.fa-chevron-down {
  position: absolute;
  left: 0.75rem !important;
  right: auto !important;
  top: 50%;
  transform: translateY(-50%) rotate(0deg) !important;
  pointer-events: none;
  color: #666;
  transition: transform 0.25s ease;
}
/* Chevron dreht sich bei Fokus (CSS-only, kein JS nötig) */
.select-wrapper:focus-within i.fa-chevron-down {
  transform: translateY(-50%) rotate(180deg);
}

/* ================================
   11. Debug Helper (optional)
   ================================ */
/*
html[dir="rtl"] * {
  outline: 1px dashed rgba(255,0,0,0.1);
}
*/
.nowrap {
  white-space: nowrap;
}
/* ============================================================
   Checkout: Mengenfeld optimieren (ohne Pfeile, kompakter)
   ============================================================ */
.qty-input {
  /*width: 60px;*/                /* schmaler als Standard */
  text-align: center;         /* Zahl mittig */
  -moz-appearance: textfield; /* Firefox: keine Pfeile */
}

/* Entfernt Spinner (Chrome, Safari, Edge, Opera) */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Optional: etwas kompaktere Höhe */
.qty-input.form-control-sm {
  padding: 0.25rem 0.3rem !important;
  margin: 0 auto; /* mittig in der Zelle */
}

/* Optional: leicht abgerundet, CI-neutral */
.qty-input {
  border-radius: 0.25rem;
}