/* =============================================================
 * Qezar.com — RTL overrides (Arabic)
 *
 * Loaded only when app.request.locale === 'ar' (see base.html.twig).
 * Kept intentionally small: it overrides the most common Bootstrap 3
 * directional utilities so the existing LTR stylesheet still drives
 * the bulk of the visual design. Extend when specific pages break.
 * ============================================================= */

html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] button,
html[dir="rtl"] select {
    font-family: 'Cairo', 'Tajawal', 'Noto Sans Arabic', 'Ubuntu', Tahoma, Arial, sans-serif;
}

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* --- Bootstrap 3 utilities -------------------------------------- */
html[dir="rtl"] .pull-right { float: left !important; }
html[dir="rtl"] .pull-left  { float: right !important; }
html[dir="rtl"] .text-left  { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left !important; }

/* --- Custom float helpers (defined in custom.css:154) ----------
   `.float-left` is applied to the bootstrap-select wrappers on the
   car ad form (CarAdType::make/model) so the two selectors sit on
   the same row. In RTL they must stack right-to-left — make first
   (rightmost), then model — so flip the float. Same mirror for
   `.float-right`. Both source rules use !important, so we match. */
html[dir="rtl"] .float-left  { float: right !important; }
html[dir="rtl"] .float-right { float: left  !important; }

/* --- bootstrap-select RTL overrides -----------------------------
   bootstrap-select.min.css was written LTR-only, so three rules
   need mirroring to match the rest of the Arabic UI (and the
   sibling chosen-field dropdowns on the same form):

   1) `.filter-option { text-align: left }` — parks the Arabic
      label on the wrong edge. Flip to right.
   2) `.dropdown-toggle { padding-right: 25px }` — reserves space
      for the caret on the right. In RTL the caret lives on the
      left, so reserve on the left instead. Zero the right pad
      or the text gets pushed off-center.
   3) `.caret { right: 12px }` — absolute-positioned caret on the
      right edge. Move to the left edge so it mirrors the chosen
      city dropdown's caret position.

   Each selector matches (or exceeds) the upstream specificity.
   `!important` is a safety net because the bundled CSS is loaded
   after this file on some pages. */
html[dir="rtl"] .bootstrap-select.btn-group .dropdown-toggle .filter-option {
    text-align: right !important;
}
html[dir="rtl"] .bootstrap-select > .dropdown-toggle {
    padding-right: 12px !important;
    padding-left:  25px !important;
}
html[dir="rtl"] .bootstrap-select.btn-group .dropdown-toggle .caret {
    right: auto !important;
    left:  12px !important;
}

/* Inherit the Arabic font stack on bootstrap-select triggers so
   the selected value matches the sibling chosen-field and the
   form's visual rhythm (Cairo is noticeably different from the
   browser default for Arabic glyphs at this size). */
html[dir="rtl"] .bootstrap-select .dropdown-toggle,
html[dir="rtl"] .bootstrap-select .dropdown-toggle .filter-option {
    font-family: inherit;
    font-size: inherit;
}

/* --- Bootstrap 3 grid -------------------------------------------
   Bootstrap 3 columns always `float: left`. Under dir="rtl" that
   leaves labels on the left and inputs on the right — wrong for
   Arabic. Flip the float at each breakpoint so columns stack
   right-to-left (label on the right, field on the left).
   Each block mirrors the breakpoint Bootstrap itself uses to
   activate the float. */
html[dir="rtl"] [class*="col-xs-"] { float: right; }
@media (min-width: 768px) {
    html[dir="rtl"] [class*="col-sm-"] { float: right; }
}
@media (min-width: 992px) {
    html[dir="rtl"] [class*="col-md-"] { float: right; }
}
@media (min-width: 1200px) {
    html[dir="rtl"] [class*="col-lg-"] { float: right; }
}

/* --- Bootstrap 3 column offsets --------------------------------
   Offsets use `margin-left: N/12*100%` in LTR. Once the column is
   flipped to float: right (above), that margin still pushes from the
   left — so an offset-3 column ends up jammed against the right edge
   instead of centered. Mirror every offset onto margin-right so the
   column sits where it would in LTR, symmetrically. Kept breakpoint-
   scoped so xs-only offsets don't leak into wider screens. */
html[dir="rtl"] .col-xs-offset-0  { margin-right: 0;               margin-left: 0; }
html[dir="rtl"] .col-xs-offset-1  { margin-right: 8.33333333%;     margin-left: 0; }
html[dir="rtl"] .col-xs-offset-2  { margin-right: 16.66666667%;    margin-left: 0; }
html[dir="rtl"] .col-xs-offset-3  { margin-right: 25%;             margin-left: 0; }
html[dir="rtl"] .col-xs-offset-4  { margin-right: 33.33333333%;    margin-left: 0; }
html[dir="rtl"] .col-xs-offset-5  { margin-right: 41.66666667%;    margin-left: 0; }
html[dir="rtl"] .col-xs-offset-6  { margin-right: 50%;             margin-left: 0; }
html[dir="rtl"] .col-xs-offset-7  { margin-right: 58.33333333%;    margin-left: 0; }
html[dir="rtl"] .col-xs-offset-8  { margin-right: 66.66666667%;    margin-left: 0; }
html[dir="rtl"] .col-xs-offset-9  { margin-right: 75%;             margin-left: 0; }
html[dir="rtl"] .col-xs-offset-10 { margin-right: 83.33333333%;    margin-left: 0; }
html[dir="rtl"] .col-xs-offset-11 { margin-right: 91.66666667%;    margin-left: 0; }
@media (min-width: 768px) {
    html[dir="rtl"] .col-sm-offset-0  { margin-right: 0;            margin-left: 0; }
    html[dir="rtl"] .col-sm-offset-1  { margin-right: 8.33333333%;  margin-left: 0; }
    html[dir="rtl"] .col-sm-offset-2  { margin-right: 16.66666667%; margin-left: 0; }
    html[dir="rtl"] .col-sm-offset-3  { margin-right: 25%;          margin-left: 0; }
    html[dir="rtl"] .col-sm-offset-4  { margin-right: 33.33333333%; margin-left: 0; }
    html[dir="rtl"] .col-sm-offset-5  { margin-right: 41.66666667%; margin-left: 0; }
    html[dir="rtl"] .col-sm-offset-6  { margin-right: 50%;          margin-left: 0; }
    html[dir="rtl"] .col-sm-offset-7  { margin-right: 58.33333333%; margin-left: 0; }
    html[dir="rtl"] .col-sm-offset-8  { margin-right: 66.66666667%; margin-left: 0; }
    html[dir="rtl"] .col-sm-offset-9  { margin-right: 75%;          margin-left: 0; }
    html[dir="rtl"] .col-sm-offset-10 { margin-right: 83.33333333%; margin-left: 0; }
    html[dir="rtl"] .col-sm-offset-11 { margin-right: 91.66666667%; margin-left: 0; }
}
@media (min-width: 992px) {
    html[dir="rtl"] .col-md-offset-0  { margin-right: 0;            margin-left: 0; }
    html[dir="rtl"] .col-md-offset-1  { margin-right: 8.33333333%;  margin-left: 0; }
    html[dir="rtl"] .col-md-offset-2  { margin-right: 16.66666667%; margin-left: 0; }
    html[dir="rtl"] .col-md-offset-3  { margin-right: 25%;          margin-left: 0; }
    html[dir="rtl"] .col-md-offset-4  { margin-right: 33.33333333%; margin-left: 0; }
    html[dir="rtl"] .col-md-offset-5  { margin-right: 41.66666667%; margin-left: 0; }
    html[dir="rtl"] .col-md-offset-6  { margin-right: 50%;          margin-left: 0; }
    html[dir="rtl"] .col-md-offset-7  { margin-right: 58.33333333%; margin-left: 0; }
    html[dir="rtl"] .col-md-offset-8  { margin-right: 66.66666667%; margin-left: 0; }
    html[dir="rtl"] .col-md-offset-9  { margin-right: 75%;          margin-left: 0; }
    html[dir="rtl"] .col-md-offset-10 { margin-right: 83.33333333%; margin-left: 0; }
    html[dir="rtl"] .col-md-offset-11 { margin-right: 91.66666667%; margin-left: 0; }
}
@media (min-width: 1200px) {
    html[dir="rtl"] .col-lg-offset-0  { margin-right: 0;            margin-left: 0; }
    html[dir="rtl"] .col-lg-offset-1  { margin-right: 8.33333333%;  margin-left: 0; }
    html[dir="rtl"] .col-lg-offset-2  { margin-right: 16.66666667%; margin-left: 0; }
    html[dir="rtl"] .col-lg-offset-3  { margin-right: 25%;          margin-left: 0; }
    html[dir="rtl"] .col-lg-offset-4  { margin-right: 33.33333333%; margin-left: 0; }
    html[dir="rtl"] .col-lg-offset-5  { margin-right: 41.66666667%; margin-left: 0; }
    html[dir="rtl"] .col-lg-offset-6  { margin-right: 50%;          margin-left: 0; }
    html[dir="rtl"] .col-lg-offset-7  { margin-right: 58.33333333%; margin-left: 0; }
    html[dir="rtl"] .col-lg-offset-8  { margin-right: 66.66666667%; margin-left: 0; }
    html[dir="rtl"] .col-lg-offset-9  { margin-right: 75%;          margin-left: 0; }
    html[dir="rtl"] .col-lg-offset-10 { margin-right: 83.33333333%; margin-left: 0; }
    html[dir="rtl"] .col-lg-offset-11 { margin-right: 91.66666667%; margin-left: 0; }
}

/* --- Navbar ----------------------------------------------------- */
/* Always-on bits (apply at every breakpoint) */
html[dir="rtl"] .navbar-brand      { padding-right: 15px; padding-left: 15px; }
html[dir="rtl"] .navbar-toggle     { float: left; margin-right: 0; margin-left: 15px; }
html[dir="rtl"] .navbar-nav .caret { margin-right: 4px; margin-left: 0; }

/* Desktop-only floats. Bootstrap 3 collapses the navbar below 768px
   (removing its floats so items stack vertically). The RTL flips must
   be scoped to ≥768px so the mobile collapsed menu still stacks. */
@media (min-width: 768px) {
    html[dir="rtl"] .navbar-header     { float: right; }
    html[dir="rtl"] .navbar-nav        { float: right; }
    html[dir="rtl"] .navbar-nav > li   { float: right; }
    html[dir="rtl"] .navbar-left       { float: right !important; }
    html[dir="rtl"] .navbar-right      { float: left  !important; }
    html[dir="rtl"] .navbar-brand      { float: right; }
    html[dir="rtl"] .nav-right         { float: left; text-align: left; }
    html[dir="rtl"] .nav-right .sign-in,
    html[dir="rtl"] .nav-right .sign-in > li { float: right; }
    html[dir="rtl"] .nav-right .language-dropdown { float: right; margin-left: 10px; margin-right: 0; }
}

/* --- Dropdowns -------------------------------------------------- */
html[dir="rtl"] .dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
    /* Cancel the broad ul padding-right rule further below; Bootstrap's
       default is vertical-only padding. */
    padding-right: 0;
    padding-left: 0;
}
html[dir="rtl"] .dropdown-menu > li > a {
    text-align: right;
}
html[dir="rtl"] .dropdown-menu-right {
    right: auto;
    left: 0;
}
/* Right-side navbar widgets (user menu, language switcher) sit on the
   LEFT half of the viewport in RTL, so their dropdowns must open toward
   the left edge of the widget instead of overflowing off-screen. */
html[dir="rtl"] .nav-right .dropdown-menu,
html[dir="rtl"] .navbar-right .dropdown-menu {
    right: auto;
    left: 0;
}
html[dir="rtl"] .caret {
    margin-right: 4px;
    margin-left: 0;
}

/* --- Forms ------------------------------------------------------ */
html[dir="rtl"] .form-control      { text-align: right; }
html[dir="rtl"] .input-group-addon:first-child { border-right-width: 1px; border-left-width: 0; }
html[dir="rtl"] .input-group-addon:last-child  { border-left-width: 1px;  border-right-width: 0; }
/* Checkbox/radio glyphs are CSS :before pseudo-elements (main.css
   :1434, :2123) absolutely positioned at left:0 with the label
   reserving 22px of padding-left for them. In RTL both the reserved
   space and the glyph must move to the right edge — otherwise the
   glyph ends up at the left while the text flows unrestricted and
   the square overlaps the last letter of the label. */
html[dir="rtl"] .checkbox label,
html[dir="rtl"] .radio label { padding-right: 22px; padding-left: 0; }
html[dir="rtl"] .checkbox label:before,
html[dir="rtl"] .radio label:before {
    left: auto;
    right: 0;
}
html[dir="rtl"] .checkbox input[type="checkbox"],
html[dir="rtl"] .radio input[type="radio"] {
    margin-right: -20px;
    margin-left: 0;
}
/* .checkbox label uses margin-right:35px as the horizontal gap to
   the next sibling label (main.css:2128). In RTL the siblings lay
   out right-to-left, so the gap belongs on the left side; otherwise
   the first label gets pushed 35px off the right container edge. */
html[dir="rtl"] .checkbox label {
    margin-right: 0;
    margin-left: 35px;
}
html[dir="rtl"] .checkbox label:last-child {
    margin-left: 0;
}

/* --- Lists ----------------------------------------------------- */
/* main.css:56-60 already resets every <ul> to margin:0; padding:0;
   list-style:none, so we inherit no UA bullet indent to flip. An
   earlier defensive `padding-right: 40px` rule here conflicted with
   that reset and left every bespoke list (.select-category,
   .category-list, .post-option ul, .sign-in, …) with 40px of
   unwanted right-padding in Arabic. If a specific list ever needs
   mirrored bullet indent in RTL, scope it to that component. */

/* --- Buttons / icons ------------------------------------------- */
html[dir="rtl"] .btn .fa,
html[dir="rtl"] .btn .icofont {
    margin-right: 0;
    margin-left: 6px;
}

/* --- Breadcrumb ------------------------------------------------- */
/* Flip FontAwesome `angle-double-right` (\f101) to `angle-double-left`
   (\f100) so the separator points in the reading direction for RTL. */
html[dir="rtl"] .breadcrumb > li + li:before {
    content: "\f100";
}

/* --- Owl Carousel nav arrows ------------------------------------ */
/* In LTR the prev/next arrows sit at right: 15px / 55px above the
   carousel. In RTL the section heading (h4) floats to the right, so we
   mirror the arrows to the left edge to avoid overlap. The carousel's
   scroll direction itself is flipped via `rtl: true` at init time. */
html[dir="rtl"] .owl-carousel .owl-next {
    right: auto;
    left: 15px;
}
html[dir="rtl"] .owl-carousel .owl-prev {
    right: auto;
    left: 55px;
}
html[dir="rtl"] .owl-carousel .owl-prev:before {
    right: auto;
    left: 50%;
    margin-right: 0;
    margin-left: -20px;
}

/* --- Language switcher (header widget) ------------------------- */
.language-switcher {
    display: inline-block;
    margin: 0 10px;
    font-size: 13px;
    line-height: 1;
    vertical-align: middle;
}
.language-switcher a {
    color: inherit;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 3px;
    border: 1px solid transparent;
}
.language-switcher a:hover {
    border-color: rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

/* --- Modals ---------------------------------------------------- */
html[dir="rtl"] .modal-header .close {
    float: left;
    margin: -2px 0 0 0;
}

/* --- Tables ---------------------------------------------------- */
html[dir="rtl"] table { text-align: right; }
html[dir="rtl"] th, html[dir="rtl"] td { text-align: inherit; }

/* --- Carousel / third-party ------------------------------------ */
/* Slick and bootstrap-datepicker ship their own [dir='rtl'] rules;
   since <html> carries dir="rtl", those activate automatically. */

/* --- Homepage banner search form (main_search_form) ----------- */
html[dir="rtl"] .banner-form {
    text-align: right;
}
/* Submit button is absolutely positioned right: -2px in LTR.
   Flip it to the left edge in RTL and mirror the border-radius. */
html[dir="rtl"] .banner-form button.form-control {
    right: auto;
    left: -2px;
    border-radius: 5px 0 0 5px;
}
html[dir="rtl"] .banner-form input {
    text-align: right;
}
/* The dropdowns + keyword input are display: inline-block so they
   reverse automatically via direction: rtl on <body>. Make sure the
   dropdown menus drop from the correct side. */
html[dir="rtl"] .main_search_form .dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
}
html[dir="rtl"] .main_search_form .dropdown-menu input {
    text-align: right;
}

/* --- Homepage category icons (homepage_icons.html.twig) -------- */
/* .category-list .category-item uses float: left — must flip in RTL
   so tiles read right-to-left. */
html[dir="rtl"] .category-list .category-item {
    float: right;
}

/* --- Category picker (.select-category) ------------------------
   Shown on BaseAdController::index and the "post new ad" flow.
   main.css:2337 positions an angle-right chevron at right: 0 as a
   hover/active cue. In RTL the cue must sit on the left edge and
   point the other way (\f104 = angle-left) so it aligns with the
   reading direction. Also flip the `span.select` margin that
   separates the text from the category icon. */
html[dir="rtl"] .select-category li:before {
    right: auto;
    left: 0;
    content: "\f104";
}
html[dir="rtl"] .select-category span.select {
    margin-right: 0;
    margin-left: 25px;
}

/* --- Ad creation "Quick rules" panel (panel_rules.html.twig) ---
   .quick-rules li has `padding-left: 25px` with a FontAwesome `\f105`
   (angle-right `›`) absolutely positioned at `left: 0`. For Arabic the
   chevron must point the other way and sit on the right. */
html[dir="rtl"] .quick-rules li {
    padding-left: 0;
    padding-right: 25px;
}
html[dir="rtl"] .quick-rules li:before {
    content: "\f104";
    left: auto;
    right: 0;
}

/* --- Profile header (.av-profile) ------------------------------
   LTR layout relies on left-floated avatar/user-info/menu tabs with
   left-side separators, and right-floated counters. Flip all of it
   for Arabic so avatar sits at the right, counters at the left, and
   separators move to the right edge of each tab/card. */
html[dir="rtl"] .av-profile .user-images {
    float: right;
    margin-right: 0;
    margin-left: 30px;
}
html[dir="rtl"] .av-profile .user        { float: right; }
html[dir="rtl"] .av-profile .favorites-user { float: left; }
html[dir="rtl"] .av-profile .my-avs,
html[dir="rtl"] .av-profile .favorites {
    float: right;
    border-left: none;
    border-right: 1px solid #f5f5f5;
}
html[dir="rtl"] .av-profile .user-menu li {
    float: right;
    border-left: none;
    border-right: 1px solid #f5f5f5;
}

/* --- Registration form (.user-registration-form) ---------------
   registration.css forces `text-align: left` on every .form-group
   and .span-error so inputs, the captcha image + reload link, and
   error messages all cling to the left. In Arabic those belong on
   the right edge of the form column. Also flip the captcha image's
   margin (custom.css sets margin-right: 15px as the gap to the
   reload link; in RTL the link sits on the other side). */
html[dir="rtl"] .user-registration-form .form-group,
html[dir="rtl"] .user-registration-form .span-error {
    text-align: right;
}
html[dir="rtl"] .captcha_image {
    margin-right: 0;
    margin-left: 15px;
}

/* --- Homepage services section (.single-service cards) --------- */
/* .single-service uses display: inline-block, which respects the
   inherited direction: rtl and reorders visually. We still need to
   right-align the card contents (h5, list) for Arabic reading. */
html[dir="rtl"] .single-service {
    text-align: right;
}
html[dir="rtl"] .single-service ul {
    padding-right: 0;
    padding-left: 0;
    list-style: none;
}


/* CV upload — RTL layout */
html[dir="rtl"] .custom-file-input-wrapper {
    direction: rtl;
}

/* Job/CV list items — RTL float fixes */
html[dir="rtl"] .job-av-item .item-image-box,
html[dir="rtl"] .job-av-item .av-info {
    float: right;
}
html[dir="rtl"] .job-av-item .av-meta li {
    float: right;
    margin-left: 0;
    margin-right: 20px;
}
html[dir="rtl"] .job-av-item .av-meta li:first-child {
    margin-right: 0;
}
html[dir="rtl"] .job-av-item .av-meta i,
html[dir="rtl"] .job-av-item .av-meta a i {
    margin-right: 0;
    margin-left: 10px;
}
html[dir="rtl"] .job-av-item .button {
    float: left;
}