/* RTL Support Styles */
.rtl {
  direction: rtl;
  text-align: right;
  font-family: "Nunito", sans-serif !important;
}

/* Apply Nunito font to all Arabic content */
.rtl *,
.rtl body,
.rtl h1, .rtl h2, .rtl h3, .rtl h4, .rtl h5, .rtl h6,
.rtl p, .rtl span, .rtl a, .rtl button,
.rtl div, .rtl section, .rtl article,
.rtl input, .rtl textarea, .rtl select, .rtl label {
  font-family: "Nunito", sans-serif !important;
}

/* Preserve Font Awesome icons - must use FA font family */
.rtl i.fa,
.rtl i.fa-solid,
.rtl i.fa-regular,
.rtl i.fa-brands,
.rtl i.fas,
.rtl i.far,
.rtl i.fab,
.rtl .fa-star,
.rtl .reviewsStar {
  font-family: "Font Awesome 6 Free" !important;
}

/* Ensure solid icons have correct font-weight */
.rtl i.fa-solid,
.rtl i.fas {
  font-weight: 900 !important;
}

/* Ensure regular icons have correct font-weight */
.rtl i.fa-regular,
.rtl i.far {
  font-weight: 400 !important;
}

/* Move + icon to left side in RTL mode for Attachment field */
.rtl .addIcon {
  right: auto !important;
  left: -1.7rem !important;
}

/* Specific overrides for all headings and classes */
.rtl h1,
.rtl h2,
.rtl h3,
.rtl h4,
.rtl h5,
.rtl h6,
.rtl h1.lgHeading,
.rtl h1.mdHeading,
.rtl h2.mdHeading,
.rtl h3.mdHeading,
.rtl h1.smHeading,
.rtl h2.smHeading,
.rtl h3.smHeading,
.rtl .lgHeading,
.rtl .mdHeading,
.rtl .smHeading,
.rtl .smThemeHeading,
.rtl .mainText,
.rtl .formHeading,
.rtl .heroSection .lgHeading,
.rtl .heroSection h1,
.rtl .aboutSection .mdHeading,
.rtl .aboutSection h1,
.rtl .sectionHeader .mdHeading,
.rtl .sectionHeader h1,
.rtl .ourCard .mdHeading,
.rtl .ourCard h3,
.rtl .aboutOxciraContent .mdHeading,
.rtl .aboutOxciraContent h1,
.rtl .aboutBoxContainer .mdHeading,
.rtl .aboutBoxContainer h1,
.rtl .ourValueBox .mdHeading,
.rtl .ourValueBox h3,
.rtl .ourValuesSection .mdHeading,
.rtl .ourValuesSection h1,
.rtl .ourValuesSection h3,
.rtl .serviceCard .mdHeading,
.rtl .serviceCard h3,
.rtl .meterialsCardBody .mdHeading,
.rtl .meterialsCardBody h1,
.rtl .questionsContainer .mdHeading,
.rtl .questionsContainer h1,
.rtl .ourSuccessPartnersSection .mdHeading,
.rtl .ourSuccessPartnersSection h1 {
  font-family: "Nunito", sans-serif !important;
}

.rtl .navbar-nav {
  direction: rtl;
}

.rtl .dropdown-menu {
  text-align: right;
}

.rtl .flexDiv {
  flex-direction: row-reverse !important;
}

/* Keep table heading sorting icons after the label in RTL mode */
.rtl .tableHeading.flexDiv,
.rtl .tableHeading.flexCenter {
  flex-direction: row !important;
}

.rtl .d-flex {
  flex-direction: row-reverse;
}

.rtl .text-start {
  text-align: right !important;
}

.rtl .text-end {
  text-align: left !important;
}

.rtl .ms-auto {
  margin-right: auto !important;
  margin-left: 0 !important;
}

.rtl .me-auto {
  margin-left: auto !important;
  margin-right: 0 !important;
}

.rtl .pe-lg-5 {
  padding-left: 3rem !important;
  padding-right: 0 !important;
}

.rtl .ps-lg-5 {
  padding-right: 3rem !important;
  padding-left: 0 !important;
}

/* Bootstrap RTL overrides */
.rtl [class*="col-"] {
  direction: rtl;
}

.rtl .row {
  direction: rtl;
}

/* Override direction for flex containers inside RTL to keep icons on right */
.rtl .aboutBoxContainer .flexDiv,
.rtl .flexDiv.ourValueBox {
  direction: ltr !important;
  flex-direction: row-reverse !important;
}

/* RTL styles for sign-up page */
.rtl .downArrowSelectButton {
  left: 1rem !important;
  right: auto !important;
}

.rtl .inputArea {
  text-align: right;
  direction: rtl;
}

.rtl select.inputArea {
  text-align: right;
  direction: rtl;
}

/* RTL styles for checkbox spacing in sign-up page */
.rtl .custom-checkbox {
  margin-left: 0 !important;
  margin-right: 1rem !important;
}

.rtl .checkbox-text {
  padding-left: 1rem !important;
  padding-right: 0 !important;
}

/* RTL styles for header buttons order - language button should be first */
.rtl .navbar .d-flex.align-items-center.gap-1 {
  flex-direction: row !important;
}

.rtl .navbar .d-flex.align-items-center.gap-1 > .dropdown {
  order: 1;
}

.rtl .navbar .d-flex.align-items-center.gap-1 > .navButton,
.rtl .navbar .d-flex.align-items-center.gap-1 > a.navButton {
  order: 2;
}

/* RTL styles for auction card buttons - category on right, timer on left */
.rtl .cardBody .d-flex.align-items-center.gap-3.flex-wrap {
  justify-content: flex-start !important;
  flex-direction: row !important;
  direction: rtl !important;
}

/* RTL styles for card buttons - icon on right of text */
.rtl .cardBody .cardSmButton {
  flex-direction: row !important;
  direction: rtl !important;
}

.rtl .cardBody .cardSmButton img {
  margin-left: 0.25rem !important;
  margin-right: 0 !important;
}

/* RTL styles for swiper navigation arrows - keep original direction */
.rtl .customPaginationArrow,
.rtl .customPaginationArrow.d-flex {
  flex-direction: row !important;
  direction: ltr !important;
}

/* RTL styles for Why OxCira section - reverse card order */
.rtl .whyOxCiraSection .row.row-gap-3 {
  flex-direction: row-reverse;
  display: flex;
}

/* RTL styles for About Us section - move blue line to right */
.rtl .aboutSection .sectionHeader {
  border-left: none !important;
  border-right: 9px solid #21579c !important;
  border-bottom-right-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 20px !important;
  border-top-left-radius: 20px !important;
}

/* RTL styles for Mission/Vision section - reverse order */
.rtl .aboutSection .row.g-lg-5.row-gap-5 {
  flex-direction: row-reverse;
  display: flex;
}

/* RTL styles for Values section - reverse order */
.rtl .ourValuesSection .row.row-gap-3 {
  flex-direction: row-reverse;
  display: flex;
}

/* RTL styles for Mission/Vision and Values - ensure icons on right */
.rtl .aboutSection .flexDiv.gap-3,
.rtl .ourValuesSection .flexDiv.gap-3 {
  flex-direction: row-reverse !important;
}

/* RTL styles for Services section - keep original order */
.rtl .ourServicesSection .row {
  flex-direction: row !important;
  direction: ltr !important;
}

/* RTL styles for Materials page - position filters at start (right), content at end (left) */
.rtl .meterialsContentSection .row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
}

/* Only prevent wrapping on desktop */
@media screen and (min-width: 992px) {
  .rtl .meterialsContentSection .row {
    flex-wrap: nowrap !important;
  }
}

/* First div (filters) - align to start (right side in RTL) with RTL direction */
.rtl .meterialsContentSection .row > .col-lg-3 {
  order: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  direction: rtl !important;
  text-align: right !important;
}

/* Ensure all filter content flows RTL */
.rtl .meterialsContentSection .col-lg-3 * {
  direction: rtl;
  text-align: right;
}

/* Form elements should maintain RTL */
.rtl #materialsFilterForm {
  direction: rtl;
}

.rtl .meterialSelectCol {
  direction: rtl;
  text-align: right;
}

/* Second div (content) - align to end (left side in RTL) */
.rtl .meterialsContentSection .row > .col-lg-8.offset-lg-1 {
  order: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* RTL styles for materials grid - arrange cards in 2 columns from right to left */
.rtl .meterialsContentSection .col-lg-8 > .row {
  display: flex !important;
  flex-direction: row-reverse !important;
  flex-wrap: wrap !important;
}

.rtl .meterialsContentSection .col-lg-8 > .row > .col-lg-6 {
  direction: rtl;
}

/* RTL styles for auctions grid - arrange cards in 3 columns from right to left */
.rtl .meterialsContentSection .col-lg-9 > .row {
  display: flex !important;
  flex-direction: row-reverse !important;
  flex-wrap: wrap !important;
}

.rtl .meterialsContentSection .col-lg-9 > .row > .col-lg-4 {
  direction: rtl;
}

/* RTL styles for category header - Title at start (right), Arrow at end (left) */
.rtl .categoryHeader {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  direction: rtl !important;
  text-align: right !important;
  align-items: center !important;
}

.rtl .categoryHeader .mdHeading {
  text-align: right !important;
  direction: rtl !important;
  order: 1;
}

/* Arrow icon should be at the END (on the LEFT in RTL) */
.rtl .categoryHeader img {
  order: 2;
  transform: scaleX(-1);
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* RTL styles for accordion buttons - Icon + Text grouped at start (right), Arrow at end (left) */
.rtl .meterialAccordianWrapper .accordion-button {
  display: flex !important;
  flex-direction: row !important;
  text-align: right !important;
  direction: rtl !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px;
}

/* Wrapper for icon and text - grouped together at the start (right side) */
.rtl .meterialAccordianWrapper .accordion-button .category-icon-text-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px;
  direction: rtl !important;
}

/* Category icon - inside wrapper, on the right of text */
.rtl .meterialAccordianWrapper .accordion-button .category-icon-text-wrapper img {
  order: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Category name text - inside wrapper, on the left of icon */
.rtl .meterialAccordianWrapper .accordion-button .category-icon-text-wrapper span {
  order: 1 !important;
  text-align: right !important;
  direction: rtl !important;
}

/* Bootstrap chevron (::after) - at the end (left side) using space-between */
.rtl .meterialAccordianWrapper .accordion-button::after {
  order: 1 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}

/* RTL styles for checkbox wrappers - Checkbox → Subcategory Name → Count (from right to left) */
.rtl .meterialAccordianCheckWrapper {
  display: flex !important;
  flex-direction: row !important;
  direction: rtl !important;
  text-align: right !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* The flexDiv containing checkbox and label should be on the RIGHT */
.rtl .meterialAccordianCheckWrapper .flexDiv {
  display: flex !important;
  flex-direction: row !important;
  direction: rtl !important;
  text-align: right !important;
  order: 1;
  gap: 0.5rem;
  align-items: center;
}

/* Checkbox should be FIRST in the flexDiv (on the RIGHT in RTL) */
.rtl .meterialAccordianCheckWrapper input[type="checkbox"] {
  order: 1 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}

/* Label text should be SECOND in the flexDiv (after checkbox) */
.rtl .meterialAccordianCheckWrapper label {
  order: 2 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  text-align: right !important;
  direction: rtl !important;
}

/* Count number should be LAST (on the LEFT in RTL) - separate from flexDiv */
.rtl .meterialAccordianCheckWrapper .smText {
  order: 2 !important;
  text-align: left !important;
  direction: ltr !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* RTL styles for price/quantity input labels */
.rtl .inputHolder {
  direction: rtl !important;
  text-align: right !important;
}

.rtl .inputHolder .inputLabel {
  flex-direction: column !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.25rem !important;
  direction: rtl !important;
  text-align: right !important;
}

.rtl .inputHolder .inputLabel span {
  order: 1;
}

/* RTL styles for price/quantity filter rows - reverse column order so max is on right, min is on left */
.rtl .row.mt-3.g-3 {
  display: flex !important;
  flex-direction: row !important;
}

/* RTL styles for range slider container */
.rtl .range-slider-container {
  direction: rtl !important;
  text-align: right !important;
}

.rtl .range-slider-container .inputHolder {
  direction: rtl !important;
  text-align: right !important;
}

/* RTL for filter button */
.rtl #materialsFilterForm .mainButton {
  direction: rtl;
  text-align: center;
}

/* RTL styles for offer badges - move to bottom right */
.rtl .offerBadgeGroup {
  left: auto !important;
  right: 12px !important;
  justify-content: flex-end !important;
}

/* RTL styles for location tag - icon on right */
.rtl .locationTag {
  flex-direction: row-reverse;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rtl .locationTag .locationTagIcon {
  order: -1;
}

/* RTL styles for seller info - avatar on right */
.rtl .sellerInfo {
  flex-direction: row;
}

.rtl .sellerInfo .sellerAvatar {
  margin-left: 0.5rem;
  margin-right: 0 !important;
}

/* RTL styles for paymentLabel sellerInfo - image on right, text on left */
.rtl .paymentLabel .sellerInfo {
  flex-direction: row !important;
  justify-content: flex-start !important;
  text-align: right !important;
  direction: rtl !important;
}

.rtl .paymentLabel .sellerInfo .sellerAvatar {
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}

.rtl .paymentLabel .sellerInfo > div {
  text-align: right !important;
  direction: rtl !important;
}

.rtl .paymentLabel .sellerInfo .sellerName {
  text-align: right !important;
  direction: rtl !important;
}

.rtl .paymentLabel .sellerInfo .smHeading {
  text-align: right !important;
  direction: rtl !important;
}

/* RTL styles for payment/buy-now page */
.rtl .paymentPageBodyHeader {
  justify-content: flex-end !important;
}

.rtl .paymentPageBodyHeader .arrowRight {
  transform: scaleX(-1);
}

.rtl .paymentContentWrapper {
  direction: rtl;
}

.rtl .paymentLabel {
  direction: rtl;
  text-align: right;
}

/* RTL styles for flexDiv.paymentLabel - ensure it starts from right */
.rtl .flexDiv.paymentLabel {
  justify-content: flex-end !important;
  direction: rtl !important;
  text-align: right !important;
  width: 100% !important;
}

.rtl .certifcateDownloader {
  flex-direction: row !important;
  direction: rtl !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.rtl .certifcateDownloader .certifcateDownloadWrapper {
  order: 1;
}

.rtl .certifcateDownloader .mdHeading {
  text-align: right !important;
  direction: rtl !important;
  order: 2;
  flex: 1;
  margin: 0;
}

.rtl .paymentButtonsWrapper {
  flex-direction: row-reverse;
  direction: rtl;
}

.rtl .paymentPageBodyFooter {
  flex-direction: row-reverse;
  direction: rtl;
}

.rtl .paymentPageBodyFooter .flexDiv {
  flex-direction: row-reverse;
}

/* RTL styles for seller and price section */
.rtl .sellerAndPrice {
  flex-direction: row-reverse;
}

/* RTL styles for pagination - reverse arrow direction */
.rtl .paginationContainer {
  flex-direction: row-reverse;
}

.rtl .pageControl .pageLink span {
  display: inline-block;
  transform: scaleX(-1);
}

/* RTL styles for product card layout */
.rtl .productCardContainer .detailsSection {
  text-align: right;
}

.rtl .productCardContainer .titleAndQuantity {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

/* RTL styles for price tag */
.rtl .priceTag {
  text-align: left;
}

/* RTL styles for materials filter form */
.rtl .meterialSelectCol {
  direction: rtl !important;
  text-align: right !important;
}

.rtl .meterialAccordianWrapper {
  direction: rtl !important;
  text-align: right !important;
}

.rtl .meterialAccordianWrapperBody {
  direction: rtl !important;
  text-align: right !important;
}

/* RTL styles for double range wrap - keep LTR for slider functionality */
.rtl .double-range-wrap {
  direction: ltr !important;
}

/* RTL styles for input area in price/quantity */
.rtl .range-slider-container .inputArea {
  text-align: center;
  direction: ltr;
}

/* RTL styles for accordion body */
.rtl .accordion-body {
  text-align: right !important;
  direction: rtl !important;
}

/* RTL styles for accordion item */
.rtl .accordion-item {
  text-align: right;
  direction: rtl;
}

/* RTL styles for materials results text */
.rtl .meterialsContentSection .smHeading {
  text-align: right;
  direction: rtl;
}

/* RTL styles for product card button */
.rtl .productCardContainer .mainButton {
  width: 100%;
  text-align: center;
}

/* RTL styles for image wrapper - ensure proper positioning */
.rtl .productCardContainer .imageWrapper {
  position: relative;
}

/* RTL styles for offer badge group - ensure it overrides inline styles */
.rtl .productCardContainer .offerBadgeGroup {
  left: auto !important;
  right: 12px !important;
  bottom: 12px !important;
  justify-content: flex-end !important;
}

/* ============================================
   RTL Styles for Product Cards Section (lines 328-500)
   ============================================ */

/* Main content area - product cards grid */
.rtl .meterialsContentSection .col-lg-8 {
  direction: rtl !important;
  text-align: right !important;
}

.rtl .meterialsContentSection .col-lg-8 > .row {
  direction: rtl !important;
}

/* Main content area - auction cards grid (3 columns) */
.rtl .meterialsContentSection .col-lg-9 {
  direction: rtl !important;
  text-align: right !important;
}

.rtl .meterialsContentSection .col-lg-9 > .row {
  direction: rtl !important;
}

/* Product card container - full RTL direction */
.rtl .productCardContainer {
  direction: rtl !important;
  text-align: right !important;
}

/* Product card inner sections */
.rtl .productCardContainer > div {
  direction: rtl !important;
}

/* Image wrapper with badges */
.rtl .productCardContainer .imageWrapper {
  direction: rtl !important;
  position: relative !important;
}

.rtl .productCardContainer .productImage {
  direction: ltr; /* Images don't need RTL */
}

/* Offer badges - positioned on bottom right in RTL */
.rtl .productCardContainer .offerBadgeGroup {
  left: auto !important;
  right: 12px !important;
  bottom: 12px !important;
  direction: rtl !important;
  flex-direction: row-reverse !important;
}

.rtl .productCardContainer .offerBadge {
  direction: ltr; /* Badge text can stay LTR if it's English */
}

/* Details section - title, quantity, description, location */
.rtl .productCardContainer .detailsSection {
  direction: rtl !important;
  text-align: right !important;
}

/* Title and quantity row */
.rtl .productCardContainer .titleAndQuantity {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  direction: rtl !important;
  text-align: right !important;
}

.rtl .productCardContainer .titleAndQuantity .mdHeading {
  text-align: right !important;
  direction: rtl !important;
}

.rtl .productCardContainer .titleAndQuantity .quantityUnit {
  text-align: right !important;
  direction: rtl !important;
}

/* Description text */
.rtl .productCardContainer .detailsSection .mainText {
  text-align: right !important;
  direction: rtl !important;
}

/* Location tag - icon on right of text */
.rtl .productCardContainer .locationTag {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  direction: rtl !important;
  text-align: right !important;
}

.rtl .productCardContainer .locationTag .locationTagIcon {
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}

/* Seller and price section */
.rtl .productCardContainer .sellerAndPrice {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  direction: rtl !important;
}

/* Seller info - avatar on right of name */
.rtl .productCardContainer .sellerInfo {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  direction: rtl !important;
}

.rtl .productCardContainer .sellerInfo .sellerAvatar {
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}

.rtl .productCardContainer .sellerInfo .sellerName {
  text-align: right !important;
  direction: rtl !important;
}

/* Price tag */
.rtl .productCardContainer .priceTag {
  text-align: left !important;
  direction: ltr !important; /* Prices usually stay LTR */
}

.rtl .productCardContainer .priceTag .priceAmount {
  direction: ltr !important;
}

/* View Details button */
.rtl .productCardContainer .mainButton {
  width: 100% !important;
  text-align: center !important;
  direction: rtl !important;
}

/* Empty state message */
.rtl .productCardContainer .text-center {
  direction: rtl !important;
  text-align: center !important;
}

.rtl .productCardContainer .text-center .mdHeading,
.rtl .productCardContainer .text-center .mainText {
  text-align: center !important;
  direction: rtl !important;
}

/* Pagination - RTL direction */
.rtl .paginationContainer {
  display: flex !important;
  flex-direction: row-reverse !important;
  direction: rtl !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px;
}

.rtl .paginationItem {
  direction: ltr; /* Page numbers usually stay LTR */
}

.rtl .pageLink {
  direction: ltr; /* Page numbers usually stay LTR */
}

.rtl .pageControl .pageLink span {
  display: inline-block;
  transform: scaleX(-1);
}

.rtl .pageEllipsis {
  direction: ltr;
}

/* Results count text */
.rtl .meterialsContentSection .smHeading {
  direction: rtl !important;
  text-align: right !important;
}

/* ============================================
   RTL Styles for Auctions Page Cards
   ============================================ */

/* Auction card container */
.rtl .auctionsSliderCard {
  direction: rtl !important;
  text-align: right !important;
}

/* Card body - full RTL direction */
.rtl .auctionsSliderCard .cardBody {
  direction: rtl !important;
  text-align: right !important;
}

/* Card heading */
.rtl .auctionsSliderCard .cardBody .mdHeading {
  text-align: right !important;
  direction: rtl !important;
}

/* Card description text */
.rtl .auctionsSliderCard .cardBody .mainText {
  text-align: right !important;
  direction: rtl !important;
}

/* Card button */
.rtl .auctionsSliderCard .cardButton {
  direction: rtl !important;
  text-align: center !important;
}

/* ============================================
   RTL Styles for FAQ Accordion
   ============================================ */

/* FAQ container */
.rtl .faqContainer {
  direction: rtl !important;
  text-align: right !important;
}

/* FAQ accordion */
.rtl .customFaqAccordion {
  direction: rtl !important;
}

/* FAQ button - text on right, icon on left */
.rtl .faqButton {
  text-align: right !important;
  direction: rtl !important;
  padding-left: 2.5rem !important;
  padding-right: 0 !important;
}

/* FAQ button icon - move to left */
.rtl .faqButton::after {
  left: 0 !important;
  right: auto !important;
}

/* FAQ body text */
.rtl .faqBody {
  direction: rtl !important;
  text-align: right !important;
}

/* RTL styles for contact form phone number input */
.rtl .phoneInput {
  text-align: right !important;
  direction: rtl !important;
}

/* RTL styles for contact form select dropdown arrow */
.rtl .selectWrapper::after {
  right: auto !important;
  left: 20px !important;
}

/* RTL styles for contact info items - increase space between icon and text */
.rtl .infoIconWrapper {
  margin-right: 0 !important;
  margin-left: 25px !important;
}

/* Prevent reversal of contact section row columns in RTL mode */
.rtl .contactSectionContainer .row {
  flex-direction: row !important;
  direction: ltr !important;
}

/* RTL styles for checkout address section - mirror layout */
.rtl .payemntInputHolder {
  direction: rtl !important;
}

.rtl .payemntInputHolder .flexDiv.justify-content-between {
  flex-direction: row-reverse !important;
  direction: rtl !important;
}

/* Radio button and label - label on left of radio in RTL */
.rtl .payemntInputHolder .flexDiv .flexDiv {
  flex-direction: row !important;
  direction: rtl !important;
}

.rtl .payemntInputHolder .radioLabel {
  text-align: right !important;
  direction: rtl !important;
  margin-right: 0.5rem !important;
  margin-left: 0 !important;
}

/* Input fields should be on the left in RTL */
.rtl .payemntInputHolder .inputHolder {
  order: 1;
}

.rtl .payemntInputHolder .flexDiv .flexDiv {
  order: 2;
}

/* Ensure select dropdown is RTL */
.rtl .payemntInputHolder select.inputArea {
  text-align: right !important;
  direction: rtl !important;
  padding-right: 40px !important;
  padding-left: 0 !important;
}

/* RTL styles for terms checkbox section */
.rtl .flexDiv.mb-5 {
  flex-direction: row-reverse !important;
  direction: rtl !important;
  justify-content: flex-end !important;
}

.rtl .flexDiv.mb-5 .checkInputLable {
  text-align: right !important;
  direction: rtl !important;
  margin-right: 0.5rem !important;
  margin-left: 0 !important;
  order: 1;
}

.rtl .flexDiv.mb-5 .termsCheckInput {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
  order: 2;
}

/* RTL styles for shipping options - radio button on right */
.rtl .shippingOption {
  direction: rtl !important;
  flex-direction: row !important;
}

.rtl .shippingOption .flexDiv.gap-3 {
  flex-direction: row-reverse !important;
  direction: rtl !important;
}

.rtl .shippingOption .radioCheckInput.shipping-radio {
  order: 2;
  margin-right: 0 !important;
  margin-left: 0.75rem !important;
}

.rtl .shippingOption .flexDiv.gap-3 > div {
  order: 1;
}

.rtl .shippingOption .checkInputLable {
  text-align: right !important;
  direction: rtl !important;
}

.rtl .shippingOption .shipping-price {
  order: 1;
  text-align: left !important;
}

/* RTL styles for order confirmation page */
.rtl .orderPageContainer {
  direction: rtl !important;
  text-align: right !important;
}

.rtl .orderPageContainer .pageTitle {
  text-align: center !important;
  direction: rtl !important;
}

.rtl .orderInfoSection {
  direction: rtl !important;
  text-align: right !important;
}

.rtl .infoRow {
  flex-direction: row !important;
  direction: rtl !important;
  justify-content: flex-start !important;
}

.rtl .infoRow .infoLabel {
  text-align: right !important;
  direction: rtl !important;
}

.rtl .infoRow .infoValue {
  text-align: right !important;
  direction: rtl !important;
}

.rtl .detailsTableTableWrapper {
  direction: rtl !important;
}

.rtl .sectionTableHeader {
  text-align: right !important;
  direction: rtl !important;
}

.rtl .detailsTable {
  direction: rtl !important;
}

.rtl .detailsTable thead {
  direction: rtl !important;
}

.rtl .detailsTable tbody {
  direction: rtl !important;
}

.rtl .tableHeader {
  text-align: right !important;
  direction: rtl !important;
}

.rtl .tableCell {
  text-align: right !important;
  direction: rtl !important;
}

.rtl .tableCell.ps-4 {
  padding-right: 1rem !important;
  padding-left: 0 !important;
}

.rtl .tableHeader.ps-4 {
  padding-right: 1rem !important;
  padding-left: 0 !important;
}

.rtl .tableInfoRow {
  direction: rtl !important;
  text-align: right !important;
}

.rtl .tableInfoRow .infoRow {
  flex-direction: row !important;
  direction: rtl !important;
  justify-content: flex-start !important;
}

.rtl .mainOutlineButton.flexDiv {
  flex-direction: row-reverse !important;
  direction: rtl !important;
}

.rtl .mainOutlineButton .pdfIcon img {
  margin-right: 0.5rem !important;
  margin-left: 0 !important;
}

/* RTL styles for bidding page - countdown timer - reverse order */
.rtl .paymentLabel .flexDiv.flex-wrap.gap-3 {
  flex-direction: row !important;
  direction: rtl !important;
}

.rtl #auctionCountdown {
  flex-direction: row-reverse !important;
  direction: rtl !important;
}

/* RTL styles for bidding page - checkbox section */
.rtl .biddingHistoryWrapper .flexDiv.mb-4.mt-4 {
  flex-direction: row !important;
  direction: rtl !important;
  justify-content: flex-start !important;
}

.rtl .biddingHistoryWrapper .flexDiv.mb-4.mt-4 .checkInputLable {
  text-align: right !important;
  direction: rtl !important;
  margin-right: 0.5rem !important;
  margin-left: 0 !important;
}

.rtl .biddingHistoryWrapper .flexDiv.mb-4.mt-4 .termsCheckInput {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
  order: 1;
}

.rtl .biddingHistoryWrapper .flexDiv.mb-4.mt-4 .checkInputLable {
  order: 2;
}

/* RTL styles for sidebar - mirror icon and text positions */
.rtl .sidebar {
  direction: rtl !important;
}

.rtl .sidebarMenu {
  direction: rtl !important;
}

.rtl .sidebarlink.flexDiv {
  flex-direction: row !important;
  direction: rtl !important;
  text-align: right !important;
  justify-content: flex-start !important;
}

.rtl .sidebarlink.flexDiv img,
.rtl .sidebarlink.flexDiv svg,
.rtl .sidebarlink.flexDiv i {
  margin-left: 0 !important;
  margin-right: 1rem !important;
}

/* Ensure Font Awesome icons display properly in RTL */
.rtl .sidebarlink.flexDiv i.fa-regular,
.rtl .sidebarlink.flexDiv i.fa-solid,
.rtl .sidebarlink.flexDiv i.fa {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 24px !important;
  height: 24px !important;
  font-size: 20px !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 400 !important;
}

/* Specific fix for star icon */
.rtl .sidebarlink.flexDiv i.fa-star,
.rtl .sidebarlink.flexDiv i.fa-regular.fa-star {
  font-weight: 400 !important;
}

.rtl .sidebarlink.flexDiv i.fa-star::before {
  content: "\f005" !important;
  display: inline-block !important;
}

.rtl .sidebarlink.flexDiv > * {
  text-align: right !important;
}

/* RTL styles for sidebar active indicator - move from left to right */
.rtl .sidebarlink::after {
  left: auto !important;
  right: -2rem !important;
}

/* RTL styles for notification section - mark as read button on left */
.rtl #notificationsPanel .notificationItem {
  flex-direction: row !important;
}

.rtl #notificationsPanel .notificationItem > span {
  text-align: right !important;
  direction: rtl !important;
}

.rtl #notificationsPanel .notificationItem > div {
  order: 2 !important;
}

.rtl #notificationsPanel .notificationItem > span {
  order: 1 !important;
}

/* RTL styles for purchases page - title on right, search on left */
.rtl .dashboardBox.flexBetween .flexDiv.flex-wrap.gap-4 {
  flex-direction: row-reverse !important;
  direction: rtl !important;
}

.rtl .dashboardBox.flexBetween .flexDiv.flex-wrap.gap-4 .boxHeading {
  order: 2;
}

.rtl .dashboardBox.flexBetween .flexDiv.flex-wrap.gap-4 .searchInputHolder {
  order: 1;
}

/* RTL styles for purchases page table - center the table */
.rtl .dashbaordTableWrapper {
  display: flex !important;
  justify-content: center !important;
  direction: rtl !important;
}

.rtl .tablesmScrollerWrapper {
  display: flex !important;
  justify-content: center !important;
  direction: rtl !important;
}

.rtl .dashbaordTable {
  margin: 0 auto !important;
  direction: rtl !important;
}

/* Center table cell content */
.rtl .dashbaordTable td {
  text-align: center !important;
}

.rtl .dashbaordTable th {
  text-align: center !important;
}

.rtl .dashbaordTable thead td {
  text-align: center !important;
}

/* Increase space between Actions column and slider */
.rtl .dashbaordTable td.text-end {
  margin-right: 1rem !important;
}

/* RTL styles for action button dropdown popup - reverse position */
.rtl .dropdownContainer {
  direction: rtl !important;
}

.rtl .dropdownContent {
  right: auto !important;
  left: 0 !important;
  direction: rtl !important;
  text-align: right !important;
}

.rtl .dropdownContent li {
  text-align: right !important;
  direction: rtl !important;
}

.rtl .dropdownContent li a {
  text-align: right !important;
  direction: rtl !important;
}

/* RTL styles for order tracking modal - move blue line to right and X button to left */
.rtl [id^="orderTrackingModal"] .modal-header.modalHeaderArea {
  flex-direction: row-reverse !important;
  direction: rtl !important;
}

.rtl [id^="orderTrackingModal"] .modal-header .closeButton {
  order: 1;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.rtl [id^="orderTrackingModal"] .modal-header .modalTitleText {
  order: 2;
}

.rtl [id^="orderTrackingModal"] .tilelineConnectLine {
  left: auto !important;
  right: 1.1rem !important;
}

/* RTL styles for participations page */
.rtl .participationsContentWrraper {
  padding-bottom: 3rem !important;
  padding-left: 2rem !important;
}

.rtl .participationsContentWrraper .dashbaordTableWrapper {
  margin-bottom: 2rem !important;
  padding: 1rem !important;
}

/* Add space before Pay Now button in RTL mode */
.rtl .participationsContentWrraper .dashbaordTable td.text-end {
  padding-left: 1.5rem !important;
}

/* Add space before delete button in materials table for RTL mode */
.rtl .dashbaordTableWrapper .dashbaordTable td.pe-3 {
  padding-left: 1.5rem !important;
}

/* Center the Actions label in materials table for RTL mode */
.rtl .dashbaordTableWrapper .dashbaordTable thead td.text-end,
.rtl .dashbaordTableWrapper .dashbaordTable thead td.text-end .tableHeading {
  text-align: center !important;
  justify-content: center !important;
}

/* Fix arrow direction in add-product pages header for RTL mode */
.rtl .dashboardBox.flexBetween a img[src*="left_arrow"] {
  transform: scaleX(-1) !important;
}

/* Apply RTL direction to gallery container in add-product pages */
.rtl .gelleryInputWrraper,
.rtl #galleryContainer {
  flex-direction: row-reverse !important;
}

.rtl .flexDiv[style*="overflow-x: auto"] {
  flex-direction: row !important;
}

/* Reverse column arrangement in reports pages for RTL mode */
.rtl #purchases-filter-form .row.row-gap-4,
.rtl #reportsFilterForm .row.row-gap-4,
.rtl #environmental-filter-form .row.row-gap-4,
.rtl #environmentalFilterForm .row.row-gap-4 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

/* Mirror the Generate button and select input in RTL mode */
.rtl #purchases-filter-form .inputHolderGenerateHolder,
.rtl #reportsFilterForm .inputHolderGenerateHolder,
.rtl #environmental-filter-form .inputHolderGenerateHolder,
.rtl #environmentalFilterForm .inputHolderGenerateHolder {
  flex-direction: row !important;
}

/* Ensure generate button appears last in RTL */
.rtl .inputHolderGenerateHolder {
  flex-direction: row !important;
}

/* RTL styles for footer menu - add margin in Arabic mode */
.rtl .footerMenu {
  margin: 50px !important;
}

/* RTL styles for terms and conditions section number separator - reverse border direction */
.rtl .conditionsListMenuWrapper .mdHeading span {
  border-right: none !important;
  border-left: 1px solid #07484a !important;
  padding-right: 0 !important;
  padding-left: 1rem !important;
}

/* RTL styles for phone numbers - keep LTR direction */
.rtl .infoDetail[dir="ltr"] {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: embed;
}

/* Chart container - ensure it renders the same in both LTR and RTL */
.rtl .chartContainer {
  direction: ltr !important;
}

.rtl .chartContainer .apexcharts-canvas,
.rtl .apexcharts-canvas {
  direction: ltr !important;
}

/* RTL styles for back link arrow - flip horizontally and reverse order in Arabic mode */
.rtl .backLink {
  flex-direction: row !important;
  direction: rtl !important;
}

.rtl .backLink img {
  transform: scaleX(-1) !important;
}

/* Increase spacing between checkbox and label in shipping cost modal */
.category-checkbox-label .category-checkbox,
.category-checkbox-label #select_all_categories {
  margin-right: 12px !important;
  margin-left: 0 !important;
}

.rtl .category-checkbox-label .category-checkbox,
.rtl .category-checkbox-label #select_all_categories {
  margin-left: 12px !important;
  margin-right: 0 !important;
}

.category-checkbox-label .category-checkbox-text {
  padding: 0;
}

/* ============================================
   Mobile-Specific RTL Styles
   ============================================ */

/* RTL overrides for mobile padding utilities (without -lg suffix) */
.rtl .p-1 {
  padding: 0.25rem !important;
}

.rtl .p-2 {
  padding: 0.5rem !important;
}

.rtl .p-3 {
  padding: 1rem !important;
}

.rtl .pb-0 {
  padding-bottom: 0 !important;
}

.rtl .px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.rtl .py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.rtl .py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

/* RTL overrides for mobile margin utilities (without -lg suffix) */
.rtl .mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}

.rtl .mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}

.rtl .mt-3 {
  margin-top: 1rem !important;
}

.rtl .mb-3 {
  margin-bottom: 1rem !important;
}

.rtl .mb-4 {
  margin-bottom: 1.5rem !important;
}

.rtl .mb-5 {
  margin-bottom: 3rem !important;
}

/* RTL overrides for padding on specific sides (mobile) */
.rtl .pe-3 {
  padding-left: 1rem !important;
  padding-right: 0 !important;
}

.rtl .ps-3 {
  padding-right: 1rem !important;
  padding-left: 0 !important;
}

.rtl .pe-4 {
  padding-left: 1.5rem !important;
  padding-right: 0 !important;
}

.rtl .ps-4 {
  padding-right: 1.5rem !important;
  padding-left: 0 !important;
}

/* RTL overrides for margin on specific sides (mobile) */
.rtl .me-3 {
  margin-left: 1rem !important;
  margin-right: 0 !important;
}

.rtl .ms-3 {
  margin-right: 1rem !important;
  margin-left: 0 !important;
}

/* Mobile-specific RTL layout adjustments */
@media screen and (max-width: 992px) {
  /* FAQ page mobile adjustments */
  .rtl .faqSection {
    direction: rtl !important;
    overflow-x: hidden !important;
  }
  
  .rtl .faqSection .col-xl-6,
  .rtl .faqSection .col-lg-8,
  .rtl .faqSection .col-11 {
    direction: rtl !important;
    text-align: right !important;
    width: 91.666667% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .rtl .faqContainer {
    direction: rtl !important;
    text-align: right !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .rtl .customFaqAccordion {
    width: 100% !important;
  }
  
  .rtl .accordionItem,
  .rtl .faqItem {
    direction: rtl !important;
    width: 100% !important;
  }
  
  .rtl .accordionHeader,
  .rtl .faqHeader {
    direction: rtl !important;
    width: 100% !important;
  }
  
  .rtl .faqButton,
  .rtl .accordionButton.faqButton {
    width: 100% !important;
    padding-left: 2.5rem !important;
    padding-right: 0.5rem !important;
    text-align: right !important;
    direction: rtl !important;
    display: block !important;
    word-wrap: break-word !important;
    white-space: normal !important;
  }
  
  .rtl .faqButton::after,
  .rtl .accordionButton.faqButton::after {
    left: 0.5rem !important;
    right: auto !important;
  }
  
  .rtl .accordionCollapse {
    direction: rtl !important;
    width: 100% !important;
  }
  
  .rtl .faqBody,
  .rtl .accordionBody.faqBody {
    text-align: right !important;
    direction: rtl !important;
    padding: 0 0.5rem 20px 0 !important;
    width: 100% !important;
  }
  
  /* Questions section at bottom */
  .rtl .questionsSection {
    direction: rtl !important;
  }
  
  .rtl .questionsContainer,
  .rtl .faqQuestionSectionContaienr {
    direction: rtl !important;
    text-align: center !important;
  }
  
  .rtl .faqQuestionSectionContaienr .col-lg-6 {
    direction: rtl !important;
  }
  
  /* General mobile table adjustments for all pages */
  .rtl .dashbaordTableWrapper {
    overflow-x: auto !important;
    padding: 0.5rem !important;
    direction: rtl !important;
    width: 100% !important;
    display: block !important;
  }
  
  .rtl .tablesmScrollerWrapper {
    direction: rtl !important;
    min-width: 1000px !important;
    display: block !important;
    width: max-content !important;
  }
  
  .rtl .dashbaordTable {
    direction: rtl !important;
    text-align: center !important;
    min-width: 1000px !important;
    margin: 0 !important;
  }
  
  .rtl .dashbaordTable thead {
    direction: rtl !important;
  }
  
  .rtl .dashbaordTable thead td {
    text-align: center !important;
    direction: rtl !important;
  }
  
  .rtl .dashbaordTable tbody {
    direction: rtl !important;
  }
  
  .rtl .dashbaordTable tbody td {
    text-align: center !important;
    direction: rtl !important;
  }
  
  /* Table rounded corners in RTL - first column on right */
  .rtl .dashbaordTable tbody td:first-child {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
  
  /* Table rounded corners in RTL - last column on left */
  .rtl .dashbaordTable tbody td:last-child {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  
  /* First column padding - right aligned */
  .rtl .dashbaordTable td.ps-3 {
    padding-right: 1rem !important;
    padding-left: 0 !important;
    text-align: right !important;
  }
  
  /* Last column padding - right aligned */
  .rtl .dashbaordTable td.text-end,
  .rtl .dashbaordTable td.pe-3 {
    text-align: right !important;
    padding-left: 1rem !important;
    padding-right: 0 !important;
  }
  
  /* Table headings alignment */
  .rtl .tableHeading.flexDiv {
    flex-direction: row !important;
    justify-content: flex-start !important;
    text-align: right !important;
  }
  
  .rtl .tableHeading.flexCenter {
    justify-content: center !important;
    text-align: center !important;
  }
  
  .rtl .tableData {
    direction: rtl !important;
  }
  
  /* Tab buttons on mobile - general for all pages */
  .rtl .tabWrapper {
    direction: rtl !important;
  }
  
  .rtl .salesTabsButton {
    direction: rtl !important;
    flex-direction: row !important;
  }
  
  .rtl .salesTab {
    direction: rtl !important;
    text-align: center !important;
  }
  
  /* Modal buttons - general */
  .rtl .modalButton {
    direction: rtl !important;
    text-align: center !important;
  }
  
  /* Content wrappers - general */
  .rtl .participationsContentWrraper,
  .rtl .tabContentWrapper {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    direction: rtl !important;
  }
  
  /* Materials content section on mobile - allow stacking */
  .rtl .meterialsContentSection .row {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  
  .rtl .meterialsContentSection .row > .col-lg-3,
  .rtl .meterialsContentSection .row > .col-lg-8,
  .rtl .meterialsContentSection .row > .col-lg-9 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .rtl .meterialsContentSection .col-lg-8.offset-lg-1 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Dashboard box layout on mobile */
  .rtl .dashboardBox.flexBetween {
    flex-direction: row-reverse !important;
    direction: rtl !important;
    justify-content: flex-start !important;
  }
  
  /* Sale details header - swap order in RTL mobile view so arrow is on right */
  .rtl .sale-details-header {
    flex-direction: row !important;
  }
  
  .rtl .sale-details-header .sale-details-title {
    order: 2;
  }
  
  .rtl .sale-details-header .sale-details-back-link {
    order: 1;
  }
  
  .rtl .dashboardBox .flexDiv.flex-wrap {
    flex-direction: row-reverse !important;
    direction: rtl !important;
    width: 100% !important;
    justify-content: flex-end !important;
  }
  
  .rtl .dashboardBox .boxHeading {
    text-align: right !important;
    direction: rtl !important;
    margin-right: 0 !important;
    margin-left: auto !important;
  }
  
  /* Search input holder */
  .rtl .searchInputHolder {
    direction: rtl !important;
    text-align: right !important;
  }
  
  .rtl .searchInputHolder input {
    text-align: right !important;
    direction: rtl !important;
    padding-right: 2.5rem !important;
    padding-left: 1rem !important;
  }
  
  .rtl .searchInputHolder img {
    left: auto !important;
    right: 0.75rem !important;
  }
  
  /* Alert boxes on mobile */
  .rtl .alert {
    text-align: right !important;
    direction: rtl !important;
  }
  
  /* Dashboard main padding adjustments for mobile */
  .rtl .dashboardMain {
    padding: 1.2rem 1rem !important;
    direction: rtl !important;
  }
  
  /* Table wrapper on mobile - maintain RTL direction */
  .rtl .dashbaordTableWrapper {
    direction: rtl !important;
  }
  
  .rtl .tablesmScrollerWrapper {
    direction: rtl !important;
  }
  
  /* Flex wrap items should reverse on mobile in RTL */
  .rtl .flex-wrap {
    flex-direction: row-reverse !important;
  }
  
  /* Gap utilities should work in RTL */
  .rtl .gap-2 {
    gap: 0.5rem !important;
  }
  
  .rtl .gap-3 {
    gap: 1rem !important;
  }
  
  .rtl .gap-4 {
    gap: 1.5rem !important;
  }
  
  /* Modal buttons on mobile */
  .rtl .modalButton,
  .rtl .mainButton {
    direction: rtl !important;
    text-align: center !important;
  }
  
  /* Pagination on mobile */
  .rtl .paginationContainer {
    flex-direction: row-reverse !important;
    direction: rtl !important;
  }
  
  /* Dashboard header on mobile */
  .rtl .dashboardHeader {
    direction: rtl !important;
  }
  
  .rtl .backLink {
    flex-direction: row !important;
    direction: rtl !important;
  }
}

@media screen and (max-width: 768px) {
  /* Extra mobile adjustments for very small screens */
  .rtl .dashboardBox {
    padding: 1rem 0.75rem !important;
  }
  
  .rtl .boxHeading {
    text-align: right !important;
    direction: rtl !important;
  }
  
  /* Form inputs on small mobile */
  .rtl .inputArea,
  .rtl .modalInput {
    text-align: right !important;
    direction: rtl !important;
  }
  
  /* FAQ adjustments for tablet/small mobile */
  .rtl .faqButton,
  .rtl .accordionButton.faqButton {
    font-size: 18px !important;
    padding: 1rem 2rem 1rem 0.5rem !important;
  }
  
  .rtl .faqButton::after,
  .rtl .accordionButton.faqButton::after {
    font-size: 2.5rem !important;
  }
  
  .rtl .faqSection .col-11 {
    width: 95% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  /* Tables on tablet - general for all pages */
  .rtl .dashbaordTableWrapper {
    padding: 0.5rem 0.25rem !important;
  }
  
  .rtl .tableData,
  .rtl .tableHeading {
    font-size: 14px !important;
  }
}

@media screen and (max-width: 575px) {
  /* Extra small mobile devices */
  .rtl .smHeading,
  .rtl .mdHeading {
    text-align: right !important;
    direction: rtl !important;
  }
  
  /* Notification items on mobile */
  .rtl .notificationItem {
    text-align: right !important;
    direction: rtl !important;
  }
  
  /* Chat icon button positioning in RTL on mobile */
  .rtl .chat-icon-btn {
    left: 1rem !important;
    right: auto !important;
  }
  
  /* Custom dialog in RTL on mobile */
  .rtl .custom-dialog {
    text-align: right !important;
    direction: rtl !important;
  }
  
  /* FAQ on extra small mobile */
  .rtl .faqButton,
  .rtl .accordionButton.faqButton {
    font-size: 16px !important;
    padding: 0.8rem 2rem 0.8rem 0.5rem !important;
    line-height: 1.4 !important;
  }
  
  .rtl .faqButton::after,
  .rtl .accordionButton.faqButton::after {
    font-size: 2rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  
  .rtl .faqBody,
  .rtl .accordionBody.faqBody {
    font-size: 14px !important;
    padding: 0 0.5rem 15px 0 !important;
  }
  
  .rtl .faqQuestionSectionContaienr .mdHeading {
    font-size: 36px !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }
  
  .rtl .faqSection .col-11 {
    width: 95% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  /* Tables on extra small mobile - general for all pages */
  .rtl .dashbaordTableWrapper {
    padding: 0.25rem 0 !important;
  }
  
  .rtl .tableData,
  .rtl .tableHeading {
    font-size: 13px !important;
    padding: 0.5rem 0.25rem !important;
  }
  
  .rtl .modalButton {
    max-width: 140px !important;
    font-size: 13px !important;
    padding: 0.4rem 0.8rem !important;
  }
  
  .rtl .salesTabsButton {
    padding: 0.1rem 0.5rem !important;
  }
  
  .rtl .salesTab {
    font-size: 14px !important;
    padding: 0.6rem 0 !important;
  }
  
}