/* 
    RTL Fixes for Nadeem Rafiq & Partners (Arabic Version)
    Centralized fixes for Right-to-Left layout.
*/

/* Global RTL defaults - text/direction only, no layout flipping */
html[dir="rtl"], 
html[dir="rtl"] body, 
html[dir="rtl"] #main_content,
html[dir="rtl"] .site_wrapper {
    text-align: right !important;
    direction: rtl !important;
}

/* ==============================================
   HEADER: Keep exactly like English version.
   The HTML already has logo on left (middle_left) 
   and menu on right (middle_right).
   We MUST NOT flip the header flex-direction.
   Only fix: social icons top bar → align right.
   ============================================== */

/* Stop RTL from reversing the main header row */
html[dir="rtl"] .gt3_header_builder__section-container {
    flex-direction: row !important;
}

/* Social icons top bar - push to the right side */
html[dir="rtl"] .gt3_header_builder__section--top .gt3_header_builder__section-container {
    justify-content: flex-end !important;
}

/* Hide the empty top_left and top_center slots so icons sit at far right */
html[dir="rtl"] .top_left.left.header_side,
html[dir="rtl"] .top_center.center.header_side {
    display: none !important;
}

html[dir="rtl"] .top_right.right.header_side {
    text-align: right !important;
}

html[dir="rtl"] .middle_right.right.header_side {
    flex-grow: 1 !important;
}

/* Menu items: keep flowing left-to-right like English */
html[dir="rtl"] .main-menu > ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    margin-right: 5% !important; /* Space between logo and menu to match English */
}

html[dir="rtl"] .main-menu ul li {
    text-align: left !important;
}

/* Column Flipping for WPBakery page content (not header) */
html[dir="rtl"] .main_wrapper .vc_row:not(.vc_inner) {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .main_wrapper .vc_inner.vc_row {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row-reverse !important;
}

/* Fix WPBakery column width and floats */
html[dir="rtl"] .vc_column_container {
    float: none !important;
    width: 100%; /* Fallback */
}

@media (min-width: 768px) {
    html[dir="rtl"] .vc_col-sm-12 { width: 100% !important; }
    html[dir="rtl"] .vc_col-sm-8 { width: 66.66666667% !important; }
    html[dir="rtl"] .vc_col-sm-6 { width: 50% !important; }
    html[dir="rtl"] .vc_col-sm-4 { width: 33.33333333% !important; }
    html[dir="rtl"] .vc_col-sm-3 { width: 25% !important; }
    html[dir="rtl"] .vc_col-sm-2 { width: 16.66666667% !important; }
}

@media (min-width: 992px) {
    html[dir="rtl"] .vc_col-md-12 { width: 100% !important; }
    html[dir="rtl"] .vc_col-md-9 { width: 75% !important; }
    html[dir="rtl"] .vc_col-md-8 { width: 66.66666667% !important; }
    html[dir="rtl"] .vc_col-md-6 { width: 50% !important; }
    html[dir="rtl"] .vc_col-md-4 { width: 33.33333333% !important; }
    html[dir="rtl"] .vc_col-md-3 { width: 25% !important; }
    html[dir="rtl"] .vc_col-md-2 { width: 16.66666667% !important; }
}

/* Directional Icons Transformation */
html[dir="rtl"] .fa-chevron-right, 
html[dir="rtl"] .fa-arrow-right, 
html[dir="rtl"] .fa-long-arrow-right, 
html[dir="rtl"] .fa-angle-right,
html[dir="rtl"] .gt3_icon_box__icon i,
html[dir="rtl"] .gt3_practice_list__link:after,
html[dir="rtl"] .rs-arrow,
html[dir="rtl"] .gt3_icon_box__icon img {
    transform: scaleX(-1) !important;
}

/* Padding/Margin Flipping */
html[dir="rtl"] .gt3_icon_box_icon-position_left .gt3_icon_box__icon {
    margin-right: 0 !important;
    margin-left: 21px !important;
}

html[dir="rtl"] .gt3_icon_box_icon-position_left .gt3_icon_box-content-wrapper {
    text-align: right !important;
}

/* Force horizontal alignment to right for Arabic */
html[dir="rtl"] .gt3_icon_box.gt3_icon_box_flex_horizontal_left {
    display: flex !important;
    flex-direction: row !important; /* In RTL, row is right-to-left */
    justify-content: flex-start !important; /* flex-start is the right side in RTL */
    text-align: right !important;
    float: right !important;
    width: 100% !important;
}

/* Make under-slider boxes format nicely in RTL (mirroring English spacing) */
html[dir="rtl"] #under-slider .gt3_icon_box__icon {
    margin-left: 21px !important;
    margin-right: 0 !important;
}

/* Mirror the padding for the dark wrappers to center the content */
html[dir="rtl"] #under-slider .vc_custom_1617524994693 {
    padding-left: 0 !important;
    padding-right: 10% !important;
}
html[dir="rtl"] #under-slider .vc_custom_1597051493345,
html[dir="rtl"] #under-slider .vc_custom_1617526229812 {
    padding-left: 5% !important;
    padding-right: 10% !important;
}

/* Footer Fixes */
html[dir="rtl"] .main_footer .gt3_span4, 
html[dir="rtl"] .main_footer .gt3_span6,
html[dir="rtl"] .main_footer .gt3_span3,
html[dir="rtl"] .main_footer .gt3_span12 {
    text-align: right !important;
}

html[dir="rtl"] .top_footer .row {
    display: flex !important;
    flex-direction: row-reverse !important;
}

/* Sticky Menu Fix */
html[dir="rtl"] #mysticky-nav.wrapfixed .myfixed {
    right: 0 !important;
    left: auto !important;
}

/* Text alignment for common elements */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] p, html[dir="rtl"] span, html[dir="rtl"] div {
    text-align: inherit;
}

html[dir="rtl"] .gt3_custom_text {
    text-align: right !important;
}


/* Fix icon placement for Mission and Vision section in Arabic */
html[dir="rtl"] #mission .gt3_icon_box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}
html[dir="rtl"] #mission .gt3_icon_box__icon {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-bottom: 15px !important;
}
html[dir="rtl"] #mission .gt3_icon_box__icon img {
    margin: 0 auto !important;
    display: block !important;
}


/* Fix WPBakery column offsets in RTL */
@media (min-width: 768px) {
    html[dir="rtl"] .vc_col-sm-10 { width: 83.33333333% !important; }
    html[dir="rtl"] .vc_col-sm-offset-1 { margin: 0 auto !important; }
}
@media (min-width: 992px) {
    html[dir="rtl"] .vc_col-md-10 { width: 83.33333333% !important; }
    html[dir="rtl"] .vc_col-md-offset-1 { margin: 0 auto !important; }
}


/* Fix WPBakery xs column offsets in RTL */
html[dir="rtl"] .vc_col-xs-10 { width: 83.33333333% !important; }
html[dir="rtl"] .vc_col-xs-offset-1 { margin: 0 auto !important; }

/* Fix Arabic homepage "Check our legal services" section */
/* The vc_col-sm-* classes use float:left which prevents flex ordering.
   Override float, then use order to position: text on RIGHT, button on LEFT. */
html[dir="rtl"] .vc_custom_1594641845592 .vc_row-fluid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}
/* Clear the float:left that WPBakery adds and set width/order via flex */
/* In RTL flex-direction:row: lower order = RIGHT (flex-start in RTL), higher order = LEFT */
html[dir="rtl"] .vc_custom_1594641845592 .vc_col-sm-8 {
    float: none !important;
    order: 1 !important;
    width: 66.66666667% !important;
    max-width: 66.66666667% !important;
    flex: 0 0 66.66666667% !important;
}
html[dir="rtl"] .vc_custom_1594641845592 .vc_col-sm-4 {
    float: none !important;
    order: 2 !important;
    width: 33.33333333% !important;
    max-width: 33.33333333% !important;
    flex: 0 0 33.33333333% !important;
}
@media (min-width: 992px) {
    html[dir="rtl"] .vc_custom_1594641845592 .vc_col-md-9 {
        width: 75% !important;
        max-width: 75% !important;
        flex: 0 0 75% !important;
    }
    html[dir="rtl"] .vc_custom_1594641845592 .vc_col-md-3 {
        width: 25% !important;
        max-width: 25% !important;
        flex: 0 0 25% !important;
    }
}
html[dir="rtl"] .vc_custom_1594641845592 h2 {
    text-align: right !important;
}
html[dir="rtl"] .vc_custom_1594641845592 p {
    text-align: right !important;
}
html[dir="rtl"] .vc_custom_1594641845592 .gt3_module_button {
    text-align: center !important;
}

/* Fix Practice Areas section in Arabic - restore proper list layout */
html[dir="rtl"] #practicesareas .gt3_module_button.button_alignment_inline {
    display: block !important;
    width: 100% !important;
}
html[dir="rtl"] #practicesareas .button_size_normal.btn_icon_position_left {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
}
html[dir="rtl"] #practicesareas .btn_icon_container {
    margin-left: 0 !important;
    margin-right: 8px !important;
    transform: scaleX(-1) !important;
}
html[dir="rtl"] #practicesareas .gt3_btn_text {
    text-align: right !important;
}
/* Fix the 3-column layout order for practice areas */
html[dir="rtl"] #practicesareas .vc_row-fluid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
}
html[dir="rtl"] #practicesareas .wpb_column {
    float: none !important;
}

/* Fix team card layout in RTL: body.rtl sets float:right on all .gt3_span4 elements,
   which breaks the grid because the invisible grid-sizer (also .gt3_span4) consumes
   a column slot. Reset ALL team grid children to float:left to match the English layout. */
html[dir="rtl"] .gt3_team_list__posts-container .gt3_team_list__item,
html[dir="rtl"] .gt3_team_list__posts-container .gt3_team_list__grid-sizer,
html[dir="rtl"] .gt3_team_list__posts-container .gt3_team_list__grid-gutter {
    float: left !important;
}

/* Center the triangle notch and separator in RTL */
html[dir="rtl"] .gt3_team_list__item > div:after,
html[dir="rtl"] .gt3_team_separator {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

/* Reset padding and center text (name and position) inside each card */
html[dir="rtl"] .gt3_team_list__title_link,
html[dir="rtl"] .gt3_team_list__position,
html[dir="rtl"] .gt3_team_separator ~ .gt3_team_list__title_link,
html[dir="rtl"] .gt3_team_separator ~ .gt3_team_list__position {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}

/* Ensure the team content area itself is centered */
html[dir="rtl"] .gt3_team_list__content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-items: center !important;
}

/* Center the photo within the card */
html[dir="rtl"] .gt3_team_list__item .gt3_team_list__image_link {
    margin: 0 auto !important;
    align-self: center !important;
}

/* ===== Newsletter section: "ابقى على تواصل دائم" =====
   The general rule: html[dir="rtl"] .main_wrapper .vc_row:not(.vc_inner) { row-reverse }
   has specificity (0,3,1,1). Override below uses (0,4,1,1) to win. */
html[dir="rtl"] .main_wrapper .vc_custom_1596988223114 .vc_row {
    flex-direction: row !important;
}
html[dir="rtl"] .main_wrapper .vc_custom_1596988223114 .vc_col-sm-9 {
    flex: 0 0 75% !important;
    max-width: 75% !important;
    width: 75% !important;
}
html[dir="rtl"] .main_wrapper .vc_custom_1596988223114 .vc_col-sm-3 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
}

/* Keep text on a single line and right-aligned */
html[dir="rtl"] .main_wrapper .vc_custom_1596988223114 .vc_col-sm-3 h2 {
    white-space: nowrap !important;
    text-align: right !important;
}
/* Fix alignment for "نحن محامون متمرسون في المحاكم" section */
html[dir="rtl"] .vc_custom_1594287544338 .vc_inner.vc_row,
html[dir="rtl"] .vc_custom_1526042890512.vc_row {
    flex-direction: row !important; /* Move the 1st column (title) to the RIGHT side */
}

html[dir="rtl"] .vc_custom_1594287544338 .vc_col-sm-3 h2,
html[dir="rtl"] .vc_custom_1526042890512 .vc_col-sm-3 h2 {
    white-space: nowrap !important;
    text-align: right !important;
}

/* Align the squares in "Associated Firm" section */
html[dir="rtl"] .gt3_squares_row {
    display: flex !important;
    flex-direction: row-reverse !important; /* Keep the Arabic column order */
    align-items: stretch !important;
    margin-top: 0 !important;
}

html[dir="rtl"] .gt3_squares_row > .wpb_column {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}