/*
 * RTL (Right-to-Left) Layout Support
 * Provides comprehensive RTL styling for Arabic and other RTL languages
 * Apply this stylesheet when dir="rtl" is set on html/body element
 */

/* ========================================
   STATIC FOUNDATION - RTL BASE STYLES
   ======================================== */

/* Base RTL Direction */
html[dir="rtl"],
body[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

/* Float Reversals */
html[dir="rtl"] .pull-right {
  float: left !important;
}

html[dir="rtl"] .pull-left {
  float: right !important;
}

/* Text Alignment Reversals */
html[dir="rtl"] .text-right {
  text-align: left !important;
}

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

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

/* Page Title Alignment in RTL */
html[dir="rtl"] ._9t1fKU._3Sjcsw._1wUxdg[data-qa="navigation-header-title"],
html[dir="rtl"] #spnPageTitle {
  text-align: right;
}

/* Margins and Padding Reversals */
html[dir="rtl"] .margin-left {
  margin-left: 0;
  margin-right: auto;
}

html[dir="rtl"] .margin-right {
  margin-right: 0;
  margin-left: auto;
}

html[dir="rtl"] .padding-left {
  padding-left: 0;
  padding-right: inherit;
}

html[dir="rtl"] .padding-right {
  padding-right: 0;
  padding-left: inherit;
}

/* Icon Content Swaps */
html[dir="rtl"] .fa-chevron-right:before {
  content: "\f053";
  /* chevron-left */
}

html[dir="rtl"] .fa-chevron-left:before {
  content: "\f054";
  /* chevron-right */
}

html[dir="rtl"] .fa-angle-right:before {
  content: "\f104";
  /* angle-left */
}

html[dir="rtl"] .fa-angle-left:before {
  content: "\f105";
  /* angle-right */
}

html[dir="rtl"] .fa-angle-double-right:before {
  content: "\f100";
  /* angle-double-left */
}

html[dir="rtl"] .fa-angle-double-left:before {
  content: "\f101";
  /* angle-double-right */
}

html[dir="rtl"] .fa-arrow-circle-right:before {
  content: "\f0a8";
  /* arrow-circle-left */
}

html[dir="rtl"] .fa-arrow-circle-left:before {
  content: "\f0a9";
  /* arrow-circle-right */
}

html[dir="rtl"] .fa-arrow-right:before {
  content: "\f060";
  /* arrow-left */
}

html[dir="rtl"] .fa-arrow-left:before {
  content: "\f061";
  /* arrow-right */
}

/* Bootstrap Grid RTL */
html[dir="rtl"] [class^="col-sm-"],
html[dir="rtl"] [class^="col-md-"] {
  float: right;
}

html[dir="rtl"] .col-sm-6:first-child,
html[dir="rtl"] .col-md-6:first-child,
html[dir="rtl"] .col-lg-6:first-child {
  float: right;
}

html[dir="rtl"] .col-sm-6:last-child,
html[dir="rtl"] .col-md-6:last-child,
html[dir="rtl"] .col-lg-6:last-child {
  float: left;
}

/* Layout Containers */
html[dir="rtl"] .row-fluid,
html[dir="rtl"] .row {
  direction: rtl;
}

/* Lists */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
  padding-right: 8px;
  padding-left: 0;
}

html[dir="rtl"] .list-inline > li {
  float: right;
  padding-right: 0;
  padding-left: 5px;
}

/* Breadcrumb */
html[dir="rtl"] .breadcrumb > li + li:before {
  padding: 0 5px 0 0;
  content: "\\ ";
}

/* Pagination */
html[dir="rtl"] .pagination {
  direction: rtl;
}

/* Placeholder Text RTL */
html[dir="rtl"] ::-webkit-input-placeholder {
  text-align: right;
}

html[dir="rtl"] :-moz-placeholder {
  text-align: right;
}

html[dir="rtl"] ::-moz-placeholder {
  text-align: right;
}

html[dir="rtl"] :-ms-input-placeholder {
  text-align: right;
}

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

/* Tables - Universal RTL */
html[dir="rtl"] table {
  direction: rtl;
  width: 100%;
  border-collapse: collapse;
  display: table !important;
}

/* Table Rows and Cells */
html[dir="rtl"] thead,
html[dir="rtl"] tbody {
  display: table-row-group !important;
}

html[dir="rtl"] tr {
  display: table-row !important;
}

html[dir="rtl"] th,
html[dir="rtl"] td {
  text-align: right !important;
  display: table-cell !important;
  float: none !important;
}

/* Override: keep intentionally hidden cells hidden in RTL */
html[dir="rtl"] th.dispayNone,
html[dir="rtl"] td.dispayNone {
  display: none !important;
}

/* Override: keep datepicker tfoot Today/Clear buttons hidden in RTL */
html[dir="rtl"] .datepicker-days tfoot th.today[style*="display: none"],
html[dir="rtl"] .datepicker-days tfoot th.clear[style*="display: none"],
html[dir="rtl"] .datepicker-months tfoot th.today[style*="display: none"],
html[dir="rtl"] .datepicker-months tfoot th.clear[style*="display: none"],
html[dir="rtl"] .datepicker-years tfoot th.today[style*="display: none"],
html[dir="rtl"] .datepicker-years tfoot th.clear[style*="display: none"] {
  display: none !important;
}

/* Hide the entire datepicker tfoot in RTL to match LTR behavior */
html[dir="rtl"] .datepicker-months tfoot,
html[dir="rtl"] .datepicker-years tfoot {
  display: none !important;
}

html[dir="rtl"] th {
  font-weight: bold;
}

html[dir="rtl"] .btnClass3 {
  margin-right: 10px !important;
  margin-left: 0px !important;
}

/* Table Layout Variants */
html[dir="rtl"] .Table-striped,
html[dir="rtl"] .Table-bordered,
html[dir="rtl"] .wallet-summary-grid,
html[dir="rtl"] #divHistory table,
html[dir="rtl"] #tblTbodyData {
  table-layout: auto !important;
}

/* Fixed Layout Tables */
html[dir="rtl"] #grdData,
html[dir="rtl"] #grdHistory,
html[dir="rtl"] #GrdEditHistoryBooking,
html[dir="rtl"] #grdInvoiceHistory,
html[dir="rtl"] #dtvBookingDetails,
html[dir="rtl"] .challan-report-grid {
  table-layout: fixed !important;
}

/* Table Content Elements */
html[dir="rtl"] table .EmptyHeader {
  text-align: center;
  direction: rtl;
}

html[dir="rtl"] table .btn {
  text-align: center;
  margin: 2px;
}

html[dir="rtl"] table a {
  direction: rtl;
}

html[dir="rtl"] table .fa {
  text-align: center;
  display: inline-block;
}

html[dir="rtl"] #btnUserClose {
  float: left !important;
}

/* Form Elements */
html[dir="rtl"] .form-signin,
html[dir="rtl"] .form-control,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] .input-group-addon {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .input-group {
  direction: rtl;
}

/* Input Group Addon Borders for RTL */
/* First addon (label) - rounded on right side */
html[dir="rtl"] .input-group .input-group-addon {
  border-right: 1px solid #ccc;
  border-left: 0;
  border-radius: 0 4px 4px 0;
}

/* Last addon (icon) - rounded on left side */
html[dir="rtl"] .input-group .input-group-addon:last-child {
  border-right: 0;
  border-left: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
}

/* Input Group Form Controls */
html[dir="rtl"] .input-group .form-control {
  border-left: 1px solid #ccc;
  border-right: 0;
  border-radius: 4px 0 0 4px;
}

/* When form-control sits between two addons, remove its border-radius */
html[dir="rtl"] .input-group .input-group-addon + .form-control:not(:last-child) {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

/* Time picker inputs - force LTR so "10:00 AM" doesn't render as "AM 10:00" */
html[dir="rtl"] #txtStartTime,
html[dir="rtl"] #txtEndTime {
  direction: ltr !important;
  text-align: right !important;
}

/* RTL support for ReportViewer toolbar */
html[dir="rtl"] div[id$="ReportViewer1_ctl06"] > div {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  direction: rtl !important;
  padding-left: 0 !important;
  padding-right: 6px !important;
}
html[dir="rtl"] div[id$="ReportViewer1_ctl06"] input[type="text"] {
  direction: ltr !important;
  text-align: left !important;
}

/* Input Types - All form controls (excluding checkboxes and radios) */
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="search"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] textarea,
html[dir="rtl"] select.form-control {
  text-align: right !important;
  direction: rtl !important;
}

html[dir="rtl"] select.form-control option {
  text-align: right;
  direction: rtl;
}

/* Select2 Dropdown Search Input - Position search icon on right in RTL */
html[dir="rtl"] .select2-search--dropdown .select2-search__field {
  text-align: right;
  direction: rtl;
  padding-right: 35px !important;
}

html[dir="rtl"] .select2-container--default .select2-search--dropdown .select2-search__field {
  text-align: right;
  direction: rtl;
}

/* Select2 Dropdown RTL positioning */
html[dir="rtl"] .select2-dropdown {
  direction: rtl;
}

html[dir="rtl"] .select2-container--default .select2-results__option {
  text-align: right;
}

/* Select2 Search Icon - Move to right side in RTL */
html[dir="rtl"] .select2-search--dropdown:after {
  left: auto !important;
  right: 1.875rem !important;
}

/* StoreWorkshopMap - Checkbox alignment in RTL */
html[dir="rtl"] #Gridtable td .containercss {
  float: right;
}

/* Numeric Input Fields - Force LTR direction for proper cursor navigation */
/* Direction: LTR ensures cursor moves correctly with arrow keys */
/* Text-align: Right keeps visual consistency with RTL layout (numbers appear where input starts) */

/* Specific Field IDs - Customer & Contact Fields */
html[dir="rtl"] #txtPinCode,
html[dir="rtl"] #txtPincode,
html[dir="rtl"] #txtCustomerMobile,
html[dir="rtl"] #txtCustomerPhone,
html[dir="rtl"] #txtGSTIN,
html[dir="rtl"] #txtMobile,
html[dir="rtl"] #txtMobileNo,
html[dir="rtl"] #txtPhone,
html[dir="rtl"] #txtPhone1,
html[dir="rtl"] #txtPhone2,
html[dir="rtl"] #txtPhoneNo,
html[dir="rtl"] #txtPhoneCode,
html[dir="rtl"] #txtCode,

/* Pricing & Financial Fields */
html[dir="rtl"] #txtPrice,
html[dir="rtl"] #txtPriceLoc,
html[dir="rtl"] #txtRate,
html[dir="rtl"] #txtAmount,
html[dir="rtl"] #txtAmountLoc,
html[dir="rtl"] #txtAmountBeforeTax,
html[dir="rtl"] #txtAmountBeforeTaxLoc,
html[dir="rtl"] #txtWalletAmount,
html[dir="rtl"] #txtDiscount,
html[dir="rtl"] #txtDiscountAmt,
html[dir="rtl"] #txtDiscountGiven,
html[dir="rtl"] #drpDefaultDiscountRate,

/* Quantity & Points Fields */
html[dir="rtl"] #txtQuantityLoc,
html[dir="rtl"] #txtPoints,
html[dir="rtl"] #txtQty,

/* Generic Input Types */
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[inputmode="numeric"],
html[dir="rtl"] input[inputmode="decimal"],

/* Class-based selectors for dynamically generated fields */
html[dir="rtl"] input.clsQty,
html[dir="rtl"] input.clsAmount {
  direction: ltr !important;
  text-align: right !important;
}

/* Form Groups */
html[dir="rtl"] .form-group label {
  text-align: right;
}

/* Checkboxes and Radios */
html[dir="rtl"] .checkbox label,
html[dir="rtl"] .radio label {
  padding-right: 20px;
  padding-left: 0;
}

html[dir="rtl"] .checkbox input[type="checkbox"],
html[dir="rtl"] .radio input[type="radio"] {
  margin-right: -20px;
  margin-left: 0;
}

/* Buttons and Links */
html[dir="rtl"] .btn,
html[dir="rtl"] button,
html[dir="rtl"] a,
html[dir="rtl"] #txtTopupPrice,
html[dir="rtl"] #txtQty {
  text-align: center !important;
}

html[dir="rtl"] .modal-dialog-center .text-center .div-margin {
  text-align: center !important;
}

/* Button Icon Spacing */
html[dir="rtl"] .btn i.fa,
html[dir="rtl"] .btn .fa,
html[dir="rtl"] .btn .fa-file-excel-o,
html[dir="rtl"] .btn .fa-binoculars {
  margin-left: 5px;
  margin-right: 0;
}

/* Panels */
html[dir="rtl"] .panel-heading,
html[dir="rtl"] .panel-title,
html[dir="rtl"] .panel-body,
html[dir="rtl"] .panel-footer {
  text-align: right;
}

/* Modals */
html[dir="rtl"] .modal-dialog {
  direction: rtl;
}

html[dir="rtl"] .modal-content,
html[dir="rtl"] .modal-body,
html[dir="rtl"] .modal-header,
html[dir="rtl"] .modal-footer {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .modal-header .close,
html[dir="rtl"] #pnlPrinterPopup .close {
  float: left;
}

/* Alerts */
html[dir="rtl"] .alert {
  text-align: right;
}

html[dir="rtl"] .alert .close,
html[dir="rtl"] #txtTopupPrice,
html[dir="rtl"] .button-right {
  float: left !important;
}

/* Dropdown Menus */
html[dir="rtl"] .dropdown-menu {
  right: auto;
  left: 0;
  text-align: right;
}

html[dir="rtl"] .btn-group .multiselect-container.dropdown-menu {
  right: 0 !important;
  left: auto !important;
}

html[dir="rtl"] .dropdown-menu-right {
  right: auto;
  left: 0;
}

html[dir="rtl"] .dropdown-menu-left {
  right: 0;
  left: auto;
}

/* Navigation */
html[dir="rtl"] .navbar-nav {
  float: right;
}

html[dir="rtl"] .navbar-right {
  float: left !important;
}

html[dir="rtl"] .navbar-left {
  float: right !important;
}

/* Grid/Data Container Divs */
html[dir="rtl"] #divGrid,
html[dir="rtl"] #divGridData,
html[dir="rtl"] #div1,
html[dir="rtl"] #div2,
html[dir="rtl"] .div-margin {
  direction: rtl;
  text-align: right;
}

/* Common Grid Data Container*/
html[dir="rtl"] #divGridData {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: 100% !important;
  width: 100% !important;
  -webkit-overflow-scrolling: touch;
}

/* Common Grid Styles */
/* Grid header alignment */
html[dir="rtl"] #grdData .headerClass {
  text-align: right !important;
}

/* Checkbox columns - center align */
html[dir="rtl"] #grdData .headerClass-2 {
  text-align: center !important;
}

/* Numeric and text alignment for grid cells */
html[dir="rtl"] #grdData td.verAline,
html[dir="rtl"] #grdData th.verAline {
  text-align: center !important;
}

/* Numeric columns with inline style text-align: Right - align left in RTL */
html[dir="rtl"] #grdReport td[style*="text-align: Right"],
html[dir="rtl"] #grdReport td[style*="text-align:Right"],
html[dir="rtl"] #grdPaymentType td[style*="text-align: Right"],
html[dir="rtl"] #grdPaymentType td[style*="text-align:Right"],
html[dir="rtl"] #grdReportSummary td[style*="text-align: Right"],
html[dir="rtl"] #grdReportSummary td[style*="text-align:Right"],
html[dir="rtl"] #grdCustomerWiseReport td[style*="text-align: Right"],
html[dir="rtl"] #grdCustomerWiseReport td[style*="text-align:Right"] {
  text-align: left !important;
}

html[dir="rtl"] .panel-title i[style*="float: right"],
html[dir="rtl"] .panel-title a[style*="float: right"],
html[dir="rtl"] .panel-title #btnClose {
  float: left !important;
}

/* Hyperlinks in grid */
html[dir="rtl"] #grdData .hypLink {
  direction: rtl;
}

/* Grid empty message */
html[dir="rtl"] #grdData .EmptyHeader {
  text-align: center;
  direction: rtl;
}

html[dir="rtl"] .input-group-btn input.btn[style*="margin-left: 5px"] {
  margin-left: 0 !important;
  margin-right: 5px !important;
}

html[dir="rtl"] .space-right-rtl {
  margin-right: 5px !important;
}

/* Panel Body Columns */
html[dir="rtl"] .panel-body .row-fluid .col-sm-1,
html[dir="rtl"] .panel-body .row-fluid .col-sm-2,
html[dir="rtl"] .panel-body .row-fluid .col-sm-3,
html[dir="rtl"] .panel-body .row-fluid .col-sm-4,
html[dir="rtl"] .panel-body .row-fluid .col-sm-6,
html[dir="rtl"] .panel-body .row-fluid .col-sm-8 {
  float: right !important;
  direction: rtl;
}

html[dir="rtl"] .panel-info {
  direction: rtl;
}

html[dir="rtl"] .fa-hand-o-right,
html[dir="rtl"] .fa-floppy-o,
html[dir="rtl"] .fa-check-square-o {
  transform: rotateY(180deg);
}

/* Common Typeahead/Autocomplete Dropdown Styles */
html[dir="rtl"] .tt-menu,
html[dir="rtl"] .tt-dropdown-menu {
  text-align: right;
  direction: rtl;
  width: auto !important;
  min-width: 100%;
  right: 0 !important;
  left: auto !important;
}

html[dir="rtl"] .tt-suggestion {
  text-align: right;
  direction: rtl;
  overflow: hidden;
  padding: 5px 10px;
}

html[dir="rtl"] .tt-suggestion p {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .tt-suggestion table {
  width: 100% !important;
  table-layout: fixed;
}

html[dir="rtl"] .tt-suggestion td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* Common Panel Title Pull-Right Elements */
html[dir="rtl"] .panel-title .pull-right {
  float: left !important;
}

/* Common Well/Filter Section Styles */
html[dir="rtl"] .well.well-sm-tiny {
  overflow: hidden;
}

html[dir="rtl"] .well.well-sm-tiny .form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  direction: rtl;
}

html[dir="rtl"] .well.well-sm-tiny .form-group {
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  margin-left: 0;
  margin-bottom: 5px;
  vertical-align: middle;
}

html[dir="rtl"] .m-signature-pad--footer .button.clear {
  left: auto;
  right: 0;
}

html[dir="rtl"] .m-signature-pad--footer .button.save {
  right: auto;
  left: 0;
}

html[dir="rtl"] .m-signature-pad--footer .button.cancel {
  left: auto;
  right: 4%;
}

/* Common Panel Footer Button Spacing */
html[dir="rtl"] .panel-footer .btn {
  margin-left: 5px;
  margin-right: 0;
}

html[dir="rtl"] .user-search-input {
  float: right !important;
}

/* Panel title alignment */
html[dir="rtl"] .panel-title {
  direction: rtl;
}

html[dir="rtl"] .Textpadding2 {
  padding: 0px 3px 0px 0px !important;
}

html[dir="rtl"] .Textpadding[style*="padding-left: 10px"] {
  padding-left: 0px !important;
  padding-right: 10px !important;
}

html[dir="rtl"] #liStoreTab .containercss {
  float: right !important;
}

html[dir="rtl"] #pnlNewCustomer #lnkLaundry,
html[dir="rtl"] #pnlNewCustomer #achrNewBooking,
html[dir="rtl"] #pnlNewCustomer #achrDropOff,
html[dir="rtl"] #pnlNewCustomer #btnPickUp,
html[dir="rtl"] #pnlNewCustomer #achrCustDetails {
  margin-right: 0px !important;
  margin-left: 10px !important;
}

/* Common Panel Title Duration/Date Range Controls */
html[dir="rtl"] .panel-title #Duration4,
html[dir="rtl"] .panel-title > div[id*="Duration"],
html[dir="rtl"] .panel-title .DateRangeContent,
html[dir="rtl"] .panel-title #reportrange {
  float: left !important;
  margin-left: 0;
  margin-right: 10px;
}

html[dir="rtl"] td:has(#lblAmount),
html[dir="rtl"] td:has(#lblTotal) {
  text-align: left !important;
  direction: ltr;
}

html[dir="rtl"] #RemarkMaster .col-sm-6,
html[dir="rtl"] #colorMaster .col-sm-6,
html[dir="rtl"] #frmBrandMaster .col-sm-6,
html[dir="rtl"] #RemoveReasonMaster .col-sm-6,
html[dir="rtl"] #frmAdjustExcess .col-sm-6,
html[dir="rtl"] #frmPaymentType .col-sm-6,
html[dir="rtl"] #EmployeeMaster .col-sm-6,
html[dir="rtl"] #frmDiscountMaster .col-sm-6,
html[dir="rtl"] #frmLoyaltyPointsMaster .col-sm-6,
html[dir="rtl"] #frmLoyaltyCustomerWise .col-sm-6,
html[dir="rtl"] #frmWalletAdjustment .col-sm-6,
html[dir="rtl"] #frmSupCustomerWalletSummary .form-group.col-sm-5,
html[dir="rtl"] #frmSupInvoiceStatement .form-group.col-sm-5 {
  float: right !important;
}

html[dir="rtl"] #frmDiscountMaster .nav-tabs > li,
html[dir="rtl"] #frmPolicy .nav-tabs > li,
html[dir="rtl"] #divSMSPurchseData .nav-tabs > li {
  float: right !important;
}

html[dir="rtl"] #languageSelectorButton {
  margin-right: 0px !important;
  margin-left: 10px !important;
}

html[dir="rtl"] #btnGarmentReject {
  margin-right: 10px !important;
  margin-left: 10px !important;
}

html[dir="rtl"] #btnCategoryClose {
  float: left !important;
}

html[dir="rtl"] .fixed-footer[style*="padding-right: 100px"] {
  padding-right: 0 !important;
  padding-left: 100px !important;
}

html[dir="rtl"] .btnMain.pull-right[style*="margin-left: 10px"],
html[dir="rtl"] .btnDelete.pull-Left[style*="margin-left: 10px"] {
  margin-left: 0 !important;
  margin-right: 10px !important;
}

html[dir="rtl"] .jconfirm-buttons,
html[dir="rtl"] .jconfirm-white .jconfirm-box .jconfirm-buttons,
html[dir="rtl"] .jconfirm-light .jconfirm-box .jconfirm-buttons,
html[dir="rtl"] .jconfirm-black .jconfirm-box .jconfirm-buttons,
html[dir="rtl"] .jconfirm-dark .jconfirm-box .jconfirm-buttons {
  direction: rtl !important;
  text-align: left !important;
  float: none !important;
}

html[dir="rtl"] .jconfirm-content-pane,
html[dir="rtl"] .jconfirm-title-c {
  text-align: right !important;
}

html[dir="rtl"] #frmLoyaltyPointsMaster .row-fluid .Textpadding,
html[dir="rtl"] #frmLoyaltyAllStore .row-fluid .Textpadding {
  float: right !important;
}

html[dir="rtl"] #PnlServiceDetails {
  flex-direction: row;
}

html[dir="rtl"] #PnlServiceDetails #btnServiceClose {
  float: left !important;
}

html[dir="rtl"] ._2qQKxu._4j7uOc.footer-td {
  text-align: center !important;
}

html[dir="rtl"] .padding-right-100 {
  padding-right: 0 !important;
  padding-left: 100px !important;
}

html[dir="rtl"] #btnSaveUpdate[style*="margin-left: 10px"] {
  margin-left: 0 !important;
  margin-right: 10px !important;
}

html[dir="rtl"] #divPackageData .table td,
html[dir="rtl"] #divPackageData .table th {
  vertical-align: top !important;
}

/* Store list table - ensure divs inside td stack vertically (address below store name) */
html[dir="rtl"] #storeList td > div,
html[dir="rtl"] #tblpkgEditStore td > div {
  display: block !important;
}

/* ========================================
       Common Daterangepicker RTL
 ======================================== */

/* For LTR Option A: [Ranges] [Cal1] [Cal2] - float all RIGHT to reverse DOM order */
html[dir="ltr"] .daterangepicker.opensleft .calendar,
html[dir="ltr"] .daterangepicker.opensleft .ranges,
html[dir="ltr"] .daterangepicker.opensright .calendar,
html[dir="ltr"] .daterangepicker.opensright .ranges {
  float: left !important;
}

html[dir="ltr"] .daterangepicker.opensright[style*="display: block"] {
  display: flex !important;
}

html[dir="ltr"] .daterangepicker.opensright .calendar.right {
  order: 1;
}

html[dir="ltr"] .daterangepicker.opensright .calendar.left {
  order: 0;
}

html[dir="ltr"] .daterangepicker.opensright .ranges {
  order: 2;
}

html[dir="rtl"] .daterangepicker.opensleft .calendar,
html[dir="rtl"] .daterangepicker.opensleft .ranges,
html[dir="rtl"] .daterangepicker.opensright .calendar,
html[dir="rtl"] .daterangepicker.opensright .ranges {
  float: right !important;
}

html[dir="rtl"] .daterangepicker td.in-range + td.end-date {
  -webkit-border-radius: 4px 0px 0px 4px !important;
  -moz-border-radius: 4px 0px 0px 4px !important;
  border-radius: 4px 0px 0px 4px !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 4px !important;
}

html[dir="rtl"] .daterangepicker td.available + td.start-date {
  -webkit-border-radius: 0px 4px 4px 0px !important;
  -moz-border-radius: 0px 4px 4px 0px !important;
  border-radius: 0px 4px 4px 0px !important;
}

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

html[dir="rtl"] .daterangepicker_start_input {
  float: right !important;
}

/* Override opensleft/opensright for RTL - Keep natural calendar order */
html[dir="rtl"] .daterangepicker.opensleft .ranges,
html[dir="rtl"] .daterangepicker.opensright .ranges {
  float: right !important;
  text-align: right;
}

html[dir="rtl"] .daterangepicker.opensleft .calendar,
html[dir="rtl"] .daterangepicker.opensright .calendar {
  float: right !important;
}

html[dir="rtl"] .daterangepicker .ranges ul {
  text-align: right !important;
  direction: rtl;
}

html[dir="rtl"] .daterangepicker .ranges li {
  text-align: right !important;
  direction: rtl;
}

html[dir="rtl"] .daterangepicker .calendar th,
html[dir="rtl"] .daterangepicker .calendar td {
  text-align: center !important;
}

html[dir="rtl"] .daterangepicker .calendar-table {
  direction: rtl;
}

html[dir="rtl"] .daterangepicker .drp-buttons {
  text-align: left !important;
  clear: both;
  direction: rtl;
}

html[dir="rtl"] .daterangepicker .drp-buttons .btn {
  margin-left: 0 !important;
  margin-right: 8px !important;
  float: right;
}

html[dir="rtl"] .daterangepicker .drp-selected {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .daterangepicker select.monthselect,
html[dir="rtl"] .daterangepicker select.yearselect {
  direction: rtl;
}

/* Arrow positioning for RTL - point to the date filter button position */
html[dir="rtl"] .daterangepicker.opensleft:before {
  left: auto !important;
  right: 9px !important;
}

html[dir="rtl"] .daterangepicker.opensleft:after {
  left: auto !important;
  right: 10px !important;
}

html[dir="rtl"] .daterangepicker.opensright:before {
  right: auto !important;
  left: 9px !important;
}

html[dir="rtl"] .daterangepicker.opensright:after {
  right: auto !important;
  left: 10px !important;
}

/* ========================================
   DateRange-1 and reportrange RTL STYLES
   ======================================== */

/* Float date range picker to the right in RTL mode */
html[dir="rtl"] .DateRange-1[style*="float: left"],
html[dir="rtl"] .DateRange-1[style*="float:left"] {
  float: right !important;
}

/* Ensure reportrange floats right in RTL */
html[dir="rtl"] #reportrange,
html[dir="rtl"] .datefilter {
  float: right !important;
  margin-left: 0 !important;
  margin-right: 10px !important;
}

/* Remove left padding in RTL and add right padding */
html[dir="rtl"] .DateRange-1 > .datefilter {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* ========================================
   BOOKING TABLE (grdData) RTL STYLES
   ======================================== */

/* Garment details cell - left align in LTR, right align in RTL */
html[dir="ltr"] #grdData td.booking-garment-details {
  text-align: left !important;
}

html[dir="rtl"] #grdData td.booking-garment-details {
  text-align: right !important;
}

/* Process list cell - vertical align to top */
html[dir="ltr"] #grdData td.booking-process-list,
html[dir="rtl"] #grdData td.booking-process-list {
  vertical-align: top !important;
  text-align: left !important;
}

/* RTL: Align process list to the right */
html[dir="rtl"] #grdData td.booking-process-list {
  text-align: right !important;
}

/* Process list items alignment */
html[dir="ltr"] #grdData td.booking-process-list .ProcessClass,
html[dir="ltr"] #grdData td.booking-process-list .TopUpProcessClass {
  text-align: left;
  direction: ltr;
}

html[dir="rtl"] #grdData td.booking-process-list .ProcessClass,
html[dir="rtl"] #grdData td.booking-process-list .TopUpProcessClass {
  text-align: right;
  direction: rtl;
}

/* Process list item content - keep rates on the right in LTR, left in RTL */
html[dir="rtl"] #grdData td.booking-process-list .ProcessClass li,
html[dir="rtl"] #grdData td.booking-process-list .TopUpProcessClass li {
  text-align: right;
  direction: rtl;
}

/* Ensure pull-right rates are properly positioned */
html[dir="rtl"] #grdData .ProcessClass .pull-right,
html[dir="rtl"] #grdData .TopUpProcessClass .pull-right {
  float: left !important;
}

/* ========================================
   PRICE LIST EDIT PAGE RTL STYLES
   ======================================== */

/* Right side panel - move to left in RTL */
html[dir="rtl"] .rightSide5 {
  right: auto !important;
  left: 17px !important;
  border-left: 0 !important;
  border-right: 2px solid white !important;
}

/* Options padding - flip left to right */
html[dir="rtl"] .rightSide5 .options {
  padding-left: 0 !important;
  padding-right: 10px !important;
}

/* ========================================
   CAROUSEL RTL ARROW ICON FLIP
   In RTL, arrows should point opposite direction:
   - "Previous" action shows right arrow (→) 
   - "Next" action shows left arrow (←)
   ======================================== */

/* MainService slides - flip arrow icons */
html[dir="rtl"] #MainService-slides .cslide-prev .fa-arrow-circle-left:before {
  content: "\f0a9" !important;
  /* fa-arrow-circle-right */
}

html[dir="rtl"] #MainService-slides .cslide-next .fa-arrow-circle-right:before {
  content: "\f0a8" !important;
  /* fa-arrow-circle-left */
}

/* Category slides - flip arrow icons */
html[dir="rtl"] #Category-slides .cslide-prev .fa-arrow-circle-left:before {
  content: "\f0a9" !important;
  /* fa-arrow-circle-right */
}

html[dir="rtl"] #Category-slides .cslide-next .fa-arrow-circle-right:before {
  content: "\f0a8" !important;
  /* fa-arrow-circle-left */
}

/* Garment data slides - flip arrow icons */
html[dir="rtl"]
  #divGarmentData-slides
  .cslide-prev
  .fa-arrow-circle-left:before {
  content: "\f0a9" !important;
  /* fa-arrow-circle-right */
}

html[dir="rtl"]
  #divGarmentData-slides
  .cslide-next
  .fa-arrow-circle-right:before {
  content: "\f0a8" !important;
  /* fa-arrow-circle-left */
}

/* Brand data slides - flip arrow icons */
html[dir="rtl"] #divBrandData-slides .cslide-prev .fa-arrow-circle-left:before {
  content: "\f0a9" !important;
  /* fa-arrow-circle-right */
}

html[dir="rtl"]
  #divBrandData-slides
  .cslide-next
  .fa-arrow-circle-right:before {
  content: "\f0a8" !important;
  /* fa-arrow-circle-left */
}

/* Color data slides - flip arrow icons */
html[dir="rtl"] #divColorData-slides .cslide-prev .fa-arrow-circle-left:before {
  content: "\f0a9" !important;
  /* fa-arrow-circle-right */
}

html[dir="rtl"]
  #divColorData-slides
  .cslide-next
  .fa-arrow-circle-right:before {
  content: "\f0a8" !important;
  /* fa-arrow-circle-left */
}

/* Defect data slides - flip arrow icons */
html[dir="rtl"]
  #divDefectData-slides
  .cslide-prev
  .fa-arrow-circle-left:before {
  content: "\f0a9" !important;
  /* fa-arrow-circle-right */
}

html[dir="rtl"]
  #divDefectData-slides
  .cslide-next
  .fa-arrow-circle-right:before {
  content: "\f0a8" !important;
  /* fa-arrow-circle-left */
}

/* ========================================
   CAROUSEL CONTAINER DIRECTION FIX
   Force LTR direction on carousel containers to prevent
   RTL inheritance from reversing item order
   ======================================== */

/* Keep carousel slide containers in LTR mode for proper ordering */
html[dir="rtl"] .cslide-slides-container {
  direction: ltr !important;
}

/* Keep individual slides in LTR for float to work correctly */
html[dir="rtl"] .cslide-slide {
  direction: rtl !important;
}

/* Allow text content inside items to be RTL for proper Arabic display */
html[dir="rtl"] .cslide-slide .Service-binding,
html[dir="rtl"] .cslide-slide .Group-binding,
html[dir="rtl"] .cslide-slide .Garment-Binding {
  direction: rtl !important;
  unicode-bidi: embed;
}

/* Keep the whole carousel row in LTR */
html[dir="rtl"] #MainService-slides,
html[dir="rtl"] #Category-slides,
html[dir="rtl"] #divGarmentData-slides,
html[dir="rtl"] #divBrandData-slides,
html[dir="rtl"] #divColorData-slides,
html[dir="rtl"] #divDefectData-slides {
  direction: ltr !important;
}

/* ========================================
   ACE SWITCH TOGGLE BUTTON RTL STYLES
   ======================================== */

/* RTL Support for Ace Switch Toggle Buttons */
html[dir="rtl"] input.ace.ace-switch[type="checkbox"] + .lbl:before {
  float: right !important;
  direction: ltr !important;
}

html[dir="rtl"] input.ace.ace-switch[type="checkbox"] + .lbl:after {
  right: 34px !important;
  left: auto !important;
}

html[dir="rtl"] input.ace.ace-switch[type="checkbox"]:checked + .lbl:after {
  right: 1px !important;
  left: auto !important;
}

/* Ace Switch Type 5 (Yes/No with dots) */
html[dir="rtl"]
  input.ace.ace-switch.ace-switch-5[type="checkbox"]
  + .lbl:before {
  direction: ltr !important;
}

html[dir="rtl"]
  input.ace.ace-switch.ace-switch-5[type="checkbox"]
  + .lbl:after {
  right: 34px !important;
  left: auto !important;
}

html[dir="rtl"]
  input.ace.ace-switch.ace-switch-5[type="checkbox"]:checked
  + .lbl:after {
  right: 1px !important;
  left: auto !important;
}

/* Ace Switch Type 2 (Yes/No simple) */
html[dir="rtl"]
  input.ace.ace-switch.ace-switch-2[type="checkbox"]
  + .lbl:before {
  direction: ltr !important;
}

html[dir="rtl"]
  input.ace.ace-switch.ace-switch-2[type="checkbox"]
  + .lbl:after {
  right: 34px !important;
  left: auto !important;
}

html[dir="rtl"]
  input.ace.ace-switch.ace-switch-2[type="checkbox"]:checked
  + .lbl:after {
  right: 1px !important;
  left: auto !important;
}

/* Ace Switch Type 4 */
html[dir="rtl"]
  input.ace.ace-switch.ace-switch-4[type="checkbox"]
  + .lbl:before {
  direction: ltr !important;
}

html[dir="rtl"]
  input.ace.ace-switch.ace-switch-4[type="checkbox"]
  + .lbl:after {
  right: 34px !important;
  left: auto !important;
}

html[dir="rtl"]
  input.ace.ace-switch.ace-switch-4[type="checkbox"]:checked
  + .lbl:after {
  right: 1px !important;
  left: auto !important;
}

/* ========================================
   LOGIN PAGE SPECIFIC RTL STYLES
   ======================================== */

/* Login Links Container */
.row.div-margin[style*="flex"] {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
}

/* Login Links Styling */
.login-link-left,
.login-link-right {
  margin-top: 10px;
  text-decoration: none;
  color: #337ab7;
  display: inline-block;
}

.login-link-left:hover,
.login-link-right:hover {
  text-decoration: underline;
}

/* LTR: Forgot Password (left) | Super Admin (right) */
.login-link-left {
  order: -2;
  text-align: left;
}

.login-link-right {
  order: 2;
  text-align: right;
  margin-right: 13px;
}

/* Super Admin (left) | Forgot Password (right) */
html[dir="rtl"] .login-link-left {
  order: 2;
  text-align: right;
}

html[dir="rtl"] .login-link-right {
  order: -2;
  text-align: left;
}

/* Login Page Specific RTL Adjustments */
html[dir="rtl"] .form-signin {
  margin-right: 88px;
  margin-left: auto;
}

html[dir="rtl"] .logoSize {
  margin-right: 42px;
  margin-left: 0;
}

/* Login Button - Universal Centering (LTR & RTL) */
#btnLogin,
.btn-block,
.btn-primary {
  text-align: center !important;
}

#btnLogin {
  width: 100% !important;
}

/* Hide Send Username Button */
#btnSendUserName {
  display: none !important;
}

/* Login Button RTL */
html[dir="rtl"] .btn-block {
  text-align: center !important;
}

/* Version Text RTL */
html[dir="rtl"] .div-margin[style*="text-align: right"] {
  text-align: left !important;
}

/* ========================================
   LANGUAGE SELECTOR RTL POSITIONING
   ======================================== */

/* Move language selector to left in RTL */
html[dir="rtl"] #qdc-language-selector-wrapper {
  right: auto !important;
  left: 20px !important;
}

html[dir="rtl"] #qdcLanguageDropdown {
  direction: rtl;
}

html[dir="rtl"] #divQDCLanguageOption {
  right: auto !important;
  left: 0 !important;
}

/* Adjust language selector spacing in RTL */
html[dir="rtl"] #qdcSelectedFlag {
  margin-left: 8px;
  margin-right: 0;
}

html[dir="rtl"] .lang-flag-img {
  margin-left: 8px;
  margin-right: 0;
}

html[dir="rtl"] #qdcLanguageDropdown .fa-caret-down {
  margin-right: 5px;
  margin-left: 0;
}

html[dir="rtl"] .qdc-lang-name {
  margin-left: 8px;
  margin-right: 0;
}

/* ========================================
   HOME PAGE SPECIFIC RTL STYLES
   ======================================== */

/* Side Menu Positioning - Move to RIGHT side in RTL */
html[dir="rtl"] #divSubMenu {
  float: right !important;
  /* Move menu to right in RTL */
}

html[dir="rtl"] .submenuHome {
  right: 0 !important;
  /* Position menu on right */
  left: auto !important;
}

html[dir="rtl"] .nav_new {
  direction: rtl;
  right: 0 !important;
  /* Position nav on right */
  left: auto !important;
}

/* Table Layout - Move menu to right and content to left for Arabic */
html[dir="rtl"] body > form > table.table {
  direction: rtl !important;
  /* Use RTL direction to reverse layout */
  width: 100%;
}

html[dir="rtl"] body > form > table.table tbody tr {
  display: flex !important;
  flex-direction: row-reverse !important;
  /* Reverse row direction for RTL */
  width: 100%;
}

html[dir="rtl"] body > form > table.table tbody tr td:first-child {
  flex: 0 0 auto !important;
  width: auto !important;
  order: 2 !important;
  /* Move menu to second position (right side) */
}

html[dir="rtl"] body > form > table.table tbody tr td:last-child {
  flex: 1 1 auto !important;
  width: 100% !important;
  order: 1 !important;
  /* Move content to first position (left side) */
}

/* Force the specific table cells to swap positions */
html[dir="rtl"] #tdMenuData {
  order: 2 !important;
  /* Menu on right */
}

html[dir="rtl"] #tdContentData {
  order: 1 !important;
  /* Content on left */
}

/* For Home page Search bar */
html[dir="rtl"] #HomePage #divCustomer .row-fluid {
  direction: rtl !important;
}

html[dir="rtl"] #HomePage .navbar-collapse .col-sm-6:last-child .navbar-nav,
html[dir="rtl"] #HomePage #languageSelectorContainer,
html[dir="rtl"] #HomePage #div1,
html[dir="rtl"] #HomePage #div3,
html[dir="rtl"] #HomePage #divOrderCount,
html[dir="rtl"] #HomePage #divLiveMode,
html[dir="rtl"] #HomePage #divTestMode {
  float: left !important;
  margin-right: 0 !important;
  margin-left: 11px !important;
}

/* Fix for User Menu Dropdown in RTL - Align left to extend right */
html[dir="rtl"] .dropdown-menu.dropdown-close.pull-right {
  left: 0px !important;
  right: auto !important;
}

/* Search Controls - Keep proper order (icon, dropdown, textbox) */
html[dir="rtl"] #divCustomer .row-fluid {
  direction: ltr !important;
  /* Keep LTR to maintain left-to-right order */
  display: flex !important;
  flex-direction: row !important;
}

html[dir="rtl"] #divCustomer .row-fluid .col-sm-3 {
  order: 1 !important;
  /* Icon and dropdown stay first (left) */
  padding-right: 0 !important;
  /* Remove right padding to connect with textbox */
}

html[dir="rtl"] #divCustomer .row-fluid .col-sm-9 {
  order: 2 !important;
  /* Textbox stays second (right) */
  padding-left: 0 !important;
  /* Remove left padding to connect with dropdown */
}

html[dir="rtl"] #divCustomer .row-fluid .Textpadding {
  padding: 0 !important;
  /* Remove padding to ensure seamless connection */
}

/* Keep border radius same as LTR (dropdown stays in middle, textbox on right) */
html[dir="rtl"] #drpDefaultCustomerSearch {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  border-right: 0 !important;
  /* Remove right border to connect with textbox */
  direction: rtl !important;
  /* Allow RTL text in dropdown */
  text-align: right !important;
}

/* Textbox stays on right with rounded right corners */
html[dir="rtl"] #txtCustomer {
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  margin-top: 0px !important;
  /* Remove top margin for alignment */
  direction: rtl !important;
  text-align: right !important;
}

/* Input group addon for search icon - keep on left side */
html[dir="rtl"] #divCustomer .input-group-addon {
  border-radius: 0 4px 4px 0 !important;
  /* Rounded RIGHT corners for RTL */
  order: 1 !important;
  min-width: 40px !important;
  /* Prevent squeezing */
  width: auto !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html[dir="rtl"] #divCustomer .input-group select {
  order: 2 !important;
  /* Dropdown in middle */
}

/* Ensure input-group maintains left-to-right flow */
html[dir="rtl"] #divCustomer .input-group {
  display: flex !important;
  flex-direction: row !important;
}

/* Fix radio button alignment */
html[dir="rtl"] div[style*="text-align: left"] {
  text-align: right !important;
  direction: rtl !important;
}

/* Button section alignment */
html[dir="rtl"] .btn-style-3 {
  direction: rtl !important;
}

/* Ensure proper text direction in labels */
html[dir="rtl"] label {
  direction: rtl;
}

html[dir="rtl"] .lbl {
  direction: rtl;
}

#DivContainerStatus .textmargin {
  margin-right: 0px !important;
  margin-left: 0px !important;
  width: 100% !important;
}

html[dir="rtl"] #HomePage #divBarcode {
  flex-direction: row-reverse !important;
}

/* Barcode search - keep icon on left, textbox on right */
html[dir="rtl"] #divBarcode {
  direction: rtl !important;
  /* Keep LTR flow for visual layout */
  display: flex !important;
  flex-direction: row !important;
}

html[dir="rtl"] #divBarcode .input-group-addon {
  border-radius: 0 4px 4px 0 !important;
  /* Rounded RIGHT corners for RTL */
  order: 1 !important;
  min-width: 40px !important;
  /* Prevent squeezing */
  width: auto !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html[dir="rtl"] #divBarcode #txtBarcode {
  border-radius: 4px 0 0 4px !important;
  /* Textbox on right with right rounded corners */
  order: 2 !important;
  direction: rtl !important;
  /* Allow RTL text input inside */
  text-align: right !important;
}

/* Ensure navigation menu items are RTL */
html[dir="rtl"] .nav_new ul {
  text-align: right;
}

html[dir="rtl"] .nav_new li {
  text-align: center;
}

/* Main content area */
html[dir="rtl"] .whitebox3 {
  direction: rtl;
  text-align: right;
}

/* Set proper direction for content area */
html[dir="rtl"] body > form > table.table > tbody > tr > td:last-child {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] body > form > table.table > tbody > tr > td:first-child {
  direction: rtl;
}

/* Fix search section alignment within whitebox */
html[dir="rtl"] .whitebox3 .row-fluid .col-sm-12 {
  direction: rtl;
}

html[dir="rtl"] .whitebox3 .row-fluid .col-sm-10 {
  direction: rtl;
}

/* FOUC Prevention - Show content after max 500ms even if translations not loaded */
body:not(.translations-loaded) [data-i18n] {
  opacity: 0.01;
  animation: showContent 0.5s ease-in 0.5s forwards;
}

body.translations-loaded [data-i18n] {
  opacity: 1 !important;
  animation: none;
}

@keyframes showContent {
  to {
    opacity: 1;
  }
}

/* Enhanced Placeholder Visibility */
#txtCustomer::placeholder,
#txtBarcode::placeholder {
  color: #555 !important;
  opacity: 1 !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  letter-spacing: 0.3px !important;
}

#txtCustomer::-webkit-input-placeholder,
#txtBarcode::-webkit-input-placeholder {
  color: #555 !important;
  opacity: 1 !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  letter-spacing: 0.3px !important;
}

#txtCustomer::-moz-placeholder,
#txtBarcode::-moz-placeholder {
  color: #555 !important;
  opacity: 1 !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  letter-spacing: 0.3px !important;
}

#txtCustomer:-ms-input-placeholder,
#txtBarcode:-ms-input-placeholder {
  color: #555 !important;
  opacity: 1 !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  letter-spacing: 0.3px !important;
}

html[dir="rtl"] #txtCustomer::placeholder,
html[dir="rtl"] #txtBarcode::placeholder {
  font-size: 16px !important;
}

/* Hide placeholder in typeahead hint elements */
.twitter-typeahead .tt-hint::placeholder,
input.tt-hint::placeholder,
.tt-hint::placeholder {
  color: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.twitter-typeahead .tt-hint::-webkit-input-placeholder,
input.tt-hint::-webkit-input-placeholder,
.tt-hint::-webkit-input-placeholder {
  color: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.twitter-typeahead .tt-hint::-moz-placeholder,
input.tt-hint::-moz-placeholder,
.tt-hint::-moz-placeholder {
  color: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.twitter-typeahead .tt-hint:-ms-input-placeholder,
input.tt-hint:-ms-input-placeholder,
.tt-hint:-ms-input-placeholder {
  color: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ========================================
   Add New Customer PAGE RTL STYLES
   ======================================== */

html[dir="rtl"] #pnlNewCustomer #txtCustName {
  float: right !important;
}

html[dir="rtl"] #pnlNewCustomer .Textpadding .textRed {
  float: left !important;
}

html[dir="rtl"] #pnlNewCustomer .padding4 {
  padding-left: 4px !important;
  padding-right: 0px !important;
}

html[dir="rtl"] #pnlNewCustomer .Textpadding2 {
  padding: 0px 3px 0px 0px !important;
}

html[dir="rtl"] #pnlNewCustomer .iti--allow-dropdown .iti__flag-container,
html[dir="rtl"] #pnlNewCustomer .iti--separate-dial-code .iti__flag-container {
  left: auto;
  right: 0;
}

html[dir="rtl"] #pnlNewCustomer #txtCustomerMobile {
  padding-left: 0px !important;
  padding-right: 50px !important;
}

#pnlNewCustomer #txtCustomerMobile {
  padding-right: 0px !important;
  padding-left: 50px !important;
}

html[dir="rtl"] #pnlNewCustomer .iti__arrow {
  margin-right: 6px !important;
  margin-left: 0 !important;
}

/* ========================================
   PRIORITY MASTER PAGE RTL STYLES
   ======================================== */

/* Force single column to float right in RTL */
html[dir="rtl"] .priority-master-single-col {
  float: right !important;
}

/* RTL icon spacing for buttons in Priority Master */
[dir="rtl"] .priority-master-panel-content .btn i.fa {
  margin-left: 0.5rem;
  margin-right: 0;
}

[dir="ltr"] .priority-master-panel-content .btn i.fa {
  margin-right: 0.5rem;
  margin-left: 0;
}

/* RTL message alignment for Priority Master */
[dir="rtl"] .priority-master-panel-content ~ div #lblMsg,
[dir="rtl"] .priority-master-panel-content ~ div #lblErr {
  text-align: right;
  direction: rtl;
  line-height: 1.5;
  vertical-align: baseline;
}

/* ========================================
   PROMOTIONAL SMS PAGE RTL STYLES
   ======================================== */

/* Radio button labels alignment - specific spacing */
html[dir="rtl"] input[type="radio"] + label {
  margin-right: 0;
  margin-left: 5px;
}

/* Grid checkbox alignment */
html[dir="rtl"] .dijitCheckBox {
  text-align: center;
}

/* Fix radio button positioning in SMS box */
html[dir="rtl"] #divSMSBox #rdbCustAll,
html[dir="rtl"] #divSMSBox #rdbManualCust {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* ========================================
   CUSTOMER DETAIL REPORT PAGE RTL STYLES
   ======================================== */

html[dir="rtl"] #frmCustomerDetailReportPanel .panel-title .row-fluid {
  display: flex;
  flex-direction: row-reverse;
}

html[dir="rtl"] #frmCustomerDetailReportPanel .panel-title .col-sm-2 {
  order: 1;
}

html[dir="rtl"] #frmCustomerDetailReportPanel .panel-title .col-sm-2 span {
  display: inline-block;
  width: 100%;
}

/* ========================================
   CUSTOMER WALLET SUMMARY PAGE RTL STYLES
   ======================================== */

/* Customer filter input group */
html[dir="rtl"] #txtCustName {
  direction: rtl;
  text-align: right;
}

/* GridView for Customer Wallet Summary */
html[dir="rtl"] .row-fluid[style*="height: 355px"] {
  direction: rtl;
}

/* Customer Wallet Summary - Right align numeric columns */
html[dir="rtl"] .Table td[align="right"],
html[dir="rtl"] .Table th[style*="text-align:right"] {
  text-align: left !important;
}

/* ========================================
   INVOICE NO PRINT PAGE RTL STYLES
   ======================================== */

/* Buttons keep center alignment */
html[dir="rtl"] #btnsubmit,
html[dir="rtl"] #btnPrint {
  text-align: center !important;
}

/* Standalone dropdown without input-group addon */
html[dir="rtl"] #ddlno {
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* ========================================
   BOOKING CANCELLATION PAGE RTL STYLES
   ======================================== */

/* Hidden fields and print divs maintain LTR for technical reasons */
html[dir="rtl"] #divPrint,
html[dir="rtl"] #divThermalPrint {
  direction: ltr;
}

/* ========================================
   CHALLAN REPORT PAGE RTL STYLES
   ======================================== */

/* Grid container overflow */
html[dir="rtl"] .row-fluid[style*="height: 400px"] {
  overflow-x: auto;
}

/* ============================================
   RTL Menu Sidebar Support (from NewMenuCss.css)
   ============================================ */

[dir="rtl"] .page-content [style*="padding-left: 56px"] {
  padding-left: 0px !important;
  padding-right: 56px !important;
}

/* ===== RTL SIDEBAR POSITION ===== */
[dir="rtl"] .sidebar-main.sidebar,
[dir="rtl"] .sidebar.sidebar-main {
  left: auto !important;
  right: 0 !important;
}

[dir="rtl"] .sidebar::before {
  left: auto;
  right: 0;
}

/* ===== RTL NAVBAR BRAND SECTION ===== */
[dir="rtl"] .navbar-brand-section {
  left: auto !important;
  right: 0 !important;
  float: right !important;
}

/* ===== RTL SIDEBAR TOGGLE BUTTON ===== */
[dir="rtl"] .sidebar-control {
  left: auto !important;
  right: 0 !important;
}

[dir="rtl"] body:not(.sidebar-xs) .sidebar-control {
  justify-content: flex-start;
  padding-right: 1rem;
  padding-left: 0;
}

/* ===== RTL CONTENT WRAPPER ===== */
[dir="rtl"] body.sidebar-xs .content-wrapper {
  margin-left: 0 !important;
  margin-right: 56px !important;
  width: calc(100% - 56px);
}

[dir="rtl"] body:not(.sidebar-xs) .content-wrapper {
  margin-left: 0 !important;
  margin-right: 231px !important;
  width: calc(100% - 231px);
}

/* ===== RTL NAVBAR FIXED HEADER ===== */
/* Mirror the LTR left-offset to a right-offset for RTL */
[dir="rtl"] body.sidebar-xs .navbar.fixed-header {
  left: 0 !important;
  right: 56px !important;
  width: calc(100% - 56px) !important;
  transition: right 0.15s ease, width 0.15s ease;
}

[dir="rtl"] body:not(.sidebar-xs) .navbar.fixed-header {
  left: 0 !important;
  right: 231px !important;
  width: calc(100% - 231px) !important;
  transition: right 0.15s ease, width 0.15s ease;
}

/* ===== RTL NAV LINKS (Expanded) ===== */
/* In RTL, flex-direction: row naturally places first item (icon) on right */
[dir="rtl"] body:not(.sidebar-xs) .sidebar .nav-sidebar .nav-link {
  flex-direction: row !important;
  text-align: right !important;
  padding: 10px 15px !important;
}

/* ===== RTL NAV LINKS (Collapsed) ===== */
[dir="rtl"] .sidebar-xs .sidebar .nav-sidebar .nav-link {
  justify-content: center;
  text-align: center;
}

/* ===== RTL MENU ICONS (inline SVG .menu-icon) ===== */
[dir="rtl"] .nav-sidebar .nav-link .menu-icon,
[dir="rtl"] body:not(.sidebar-xs) .sidebar .nav-sidebar .nav-link .menu-icon {
  margin-right: 0 !important;
  margin-left: 10px !important;
}

[dir="rtl"] .sidebar-xs .sidebar .nav-sidebar .nav-link .menu-icon {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ===== RTL FONT AWESOME ICONS (legacy <i>) ===== */
[dir="rtl"] .nav-sidebar .nav-link i,
[dir="rtl"] body:not(.sidebar-xs) .sidebar .nav-sidebar .nav-link i {
  margin-right: 0 !important;
  margin-left: 10px !important;
}

[dir="rtl"] .sidebar-xs .sidebar .nav-sidebar .nav-link i {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ===== RTL SUBMENU ARROW ===== */
[dir="rtl"] .sidebar .nav-item-submenu > .nav-link::after {
  right: auto !important;
  left: 15px;
  content: "\f104";
  font-family: "FontAwesome" !important;
}

[dir="rtl"] .nav-item-submenu.nav-item-open > .nav-link::after {
  transform: rotate(-90deg);
}

[dir="rtl"] .sidebar-xs .sidebar .nav-item-submenu > .nav-link::after {
  display: none !important;
}

/* ===== RTL SUBMENU (Expanded) ===== */
[dir="rtl"] .sidebar .nav-group-sub .nav-link {
  padding: 8px 15px 8px 15px !important;
  text-align: right;
}

[dir="rtl"] .nav-group-sub .nav-item {
  text-align: right;
}

/* ===== RTL SUBMENU (Collapsed - Flyout) ===== */
[dir="rtl"] .sidebar-xs .sidebar .nav-group-sub {
  left: auto !important;
  right: 56px !important;
  border-radius: 8px 0 0 8px !important;
}

[dir="rtl"] .sidebar-xs .sidebar .nav-group-sub .nav-link {
  padding: 8px 20px 8px 15px !important;
  text-align: right;
}

/* ===== RTL SUBMENU TITLE (Collapsed Flyout) ===== */
[dir="rtl"] .sidebar-xs .nav-group-sub[data-submenu-title]::before {
  padding: 10px 20px 8px 15px;
  text-align: right;
}

/* ===== RTL TEXT DIRECTION ===== */
[dir="rtl"] .sidebar .nav-sidebar .nav-link,
[dir="rtl"] .sidebar .nav-group-sub .nav-link,
[dir="rtl"] .sidebar .nav-group-sub .nav-item {
  text-align: right;
  direction: rtl;
}

[dir="rtl"] .nav-sidebar .nav-link span {
  text-align: right;
  direction: rtl;
}

/* ===== RTL MOBILE SIDEBAR ===== */
@media (max-width: 768px) {
  [dir="rtl"] .sidebar-main,
  [dir="rtl"] body.sidebar-xs .sidebar-main {
    margin-left: 0 !important;
    margin-right: -231px;
    left: auto !important;
    right: 0 !important;
  }

  [dir="rtl"] .sidebar-main.active {
    margin-right: 0 !important;
  }

  [dir="rtl"] body.sidebar-xs .content-wrapper,
  [dir="rtl"] .content-wrapper {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
  }

  [dir="rtl"] body.sidebar-xs .navbar.fixed-header,
  [dir="rtl"] .navbar.fixed-header {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  [dir="rtl"] body.sidebar-xs .navbar.fixed-header > div,
  [dir="rtl"] .navbar.fixed-header > div {
    margin-left: 0 !important;
    margin-right: 56px !important;
    width: calc(100% - 56px) !important;
  }

  [dir="rtl"] .navbar-brand-section {
    left: auto !important;
    right: 0 !important;
  }

  /* Mobile submenu - inline, no flyout */
  [dir="rtl"] .sidebar-xs .sidebar .nav-group-sub {
    position: relative !important;
    right: 0 !important;
    left: auto !important;
    width: 100% !important;
    border-radius: 0 !important;
  }

  [dir="rtl"] .sidebar-xs .sidebar .nav-item-submenu > .nav-link::after {
    display: inline-block !important;
  }
}

/* ========================================
   TOP NAVBAR RTL FIXES (StoreMain.Master)
   ======================================== */

/* Main navbar container */
[dir="rtl"] .navbar.navbar-expand-md.navbar-default.fixed-header {
  direction: rtl;
}

/* Navbar columns - reverse float direction */
/* Page title container - moves to right */
[dir="rtl"] .navbar .row .col-sm-6:first-child {
  float: right !important;
  text-align: right;
  direction: rtl;
}

/* Interactive elements container - moves to left and reverses order */
[dir="rtl"] .navbar .row .col-sm-6:last-child {
  float: left !important;
  text-align: left;
  direction: rtl;
  display: flex !important;
  flex-direction: row-reverse !important;
  /* Reverse visual order */
  align-items: center !important;
  justify-content: flex-start !important;
  /* Start from left in RTL */
  height: 70px;
}

/* Reset inline floats and handle margins for flex items */
[dir="rtl"] .navbar .col-sm-6:last-child > ul.navbar-nav,
[dir="rtl"] .navbar .col-sm-6:last-child > div,
[dir="rtl"] .navbar .col-sm-6:last-child ul.navbar-nav {
  float: none !important;
  margin-right: 10px !important;
  margin-left: 0 !important;
}

/* Specific order for navbar elements using flexbox order */
/* User icon dropdown - first (leftmost in RTL) */
[dir="rtl"] .navbar .col-sm-6:last-child > ul.navbar-nav:first-child {
  order: 1;
  margin-right: 0 !important;
}

/* divLiveMode - order 2 */
[dir="rtl"] .navbar .col-sm-6:last-child > #divLiveMode {
  order: 2;
}

/* divTestMode - order 3 */
[dir="rtl"] .navbar .col-sm-6:last-child > #divTestMode {
  order: 3;
}

/* Language selector wrapper - order 4 */
[dir="rtl"]
  .navbar
  .col-sm-6:last-child
  > div:has(#qdc-language-selector-wrapper) {
  order: 4;
}

/* Buttons container - last (rightmost in RTL) */
[dir="rtl"] .navbar .col-sm-6:last-child > div:has(.nav.navbar-nav) {
  order: 5;
}

/* Language selector wrapper */
[dir="rtl"] #qdc-language-selector-wrapper {
  float: none !important;
  right: auto !important;
  left: auto !important;
  margin-top: 0 !important;
}

/* User dropdown menu */
[dir="rtl"] .navbar .col-sm-6 ul.navbar-nav.dropdown {
  float: none !important;
}

/* Test/Trial mode dropdowns */
[dir="rtl"] #divLiveMode,
[dir="rtl"] #divTestMode {
  float: none !important;
}

/* Buttons container */
[dir="rtl"] .navbar .col-sm-6:last-child > div[style*="float: right"] {
  float: none !important;
  background-color: transparent !important;
  margin-top: 0 !important;
}

/* Reset margin for user icon for flex centering */
[dir="rtl"] .navbar .col-sm-6:last-child .fa-user {
  margin-top: 0 !important;
}

/* User dropdown positioning in RTL */
[dir="rtl"] .navbar .dropdown-menu.user-menu {
  left: 0 !important;
  right: auto !important;
  text-align: right;
}

/* Language selector trigger button RTL */
[dir="rtl"] #qdc-language-trigger {
  direction: rtl;
}

[dir="rtl"] #qdc-language-trigger .qdc-current-flag {
  margin-right: 0 !important;
  margin-left: 8px !important;
}

[dir="rtl"] #qdc-language-trigger i.fa-globe {
  margin-left: 0 !important;
  margin-right: 8px !important;
}

/* Language modal RTL support */
[dir="rtl"] .qdc-language-modal-content {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .qdc-lang-flag {
  margin-right: 0 !important;
  margin-left: 8px !important;
}

[dir="rtl"] .qdc-lang-code {
  margin-right: 0 !important;
  margin-left: 5px !important;
}

[dir="rtl"] .qdc-lang-row-bottom {
  display: flex;
  text-align: right !important;
  direction: rtl;
}

[dir="rtl"] .qdc-lang-row-top {
  text-align: right !important;
  direction: rtl;
}

[dir="rtl"] .qdc-language-modal-header {
  direction: rtl;
  text-align: right;
}

/* Prevent icon movement on active/hover/focus */
[dir="rtl"] .sidebar .nav-sidebar .nav-link:hover i,
[dir="rtl"] .sidebar .nav-sidebar .nav-link:active i,
[dir="rtl"] .sidebar .nav-sidebar .nav-link:focus i,
[dir="rtl"] .sidebar .nav-sidebar .nav-link.active i {
  transform: none !important;
  position: relative !important;
}

[dir="rtl"] body:not(.sidebar-xs) .sidebar .nav-sidebar .nav-link:hover i,
[dir="rtl"] body:not(.sidebar-xs) .sidebar .nav-sidebar .nav-link:active i,
[dir="rtl"] body:not(.sidebar-xs) .sidebar .nav-sidebar .nav-link:focus i {
  margin-left: 1rem !important;
  margin-right: 0 !important;
}

/* RTL Flex Direction for Submenus */
[dir="rtl"] .sidebar-xs .sidebar .nav-group-sub {
  border-radius: 0.25rem 0 0 0.25rem !important;
  left: auto !important;
  right: 56px !important;
}

/* Ensure icons stay visible in collapsed mode */
[dir="rtl"] .sidebar-xs .sidebar .nav-sidebar .nav-link span {
  margin-right: 0 !important;
  margin-left: 0 !important;
  display: none !important;
}

/* Show text in expanded mode */
[dir="rtl"] body:not(.sidebar-xs) .sidebar .nav-sidebar .nav-link span {
  display: inline-block !important;
}

/* Fix icon centering in collapsed sidebar */
[dir="rtl"] .sidebar-xs .sidebar .nav-sidebar .nav-link i.fa,
[dir="rtl"] .sidebar-xs .sidebar .nav-sidebar .nav-link i {
  width: 100% !important;
  max-width: 56px !important;
  text-align: center !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  font-size: 24px !important;
  line-height: normal !important;
  position: relative !important;
  transform: none !important;
  transition: none !important;
}

/* Ensure nav-link itself is properly sized in collapsed mode */
[dir="rtl"] .sidebar-xs .sidebar .nav-sidebar .nav-link {
  padding: 0.5rem 0.75rem 0.5rem 0.75rem !important;
  margin: 0 !important;
  display: flex !important;
}

/* Ensure nav-link itself is properly sized in collapsed mode */
[dir="rtl"] .sidebar-xs .sidebar .nav-sidebar .nav-group-sub .nav-link {
  padding: 0.5rem 1.625rem 0.5rem 0.75rem !important;
  margin: 0 !important;
  display: flex !important;
}

/* Ensure nav-item has no extra padding */
[dir="rtl"] .sidebar-xs .sidebar .nav-sidebar .nav-item {
  width: 100% !important;
  display: block !important;
}

/* Override any fa-2x sizing in collapsed mode */
[dir="rtl"] .sidebar-xs .sidebar .nav-sidebar .nav-link i.fa-2x {
  font-size: 24px !important;
}

/* Navbar user menu and language selector */
[dir="rtl"] .navbar .nav {
  float: left !important;
}

[dir="rtl"] .navbar .navbar-nav {
  float: left !important;
}

[dir="rtl"] .navbar-nav > li {
  float: right;
}

/* User icon navbar - should be on LEFT side in RTL */
[dir="rtl"] .navbar .col-sm-6 ul.navbar-nav {
  float: left !important;
}

/* Ensure user icon is visible */
[dir="rtl"] .navbar-nav .fa-user,
[dir="rtl"] .navbar-nav .fa-user.fa-2x {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
}

/* Navbar columns for proper RTL layout */
[dir="rtl"] .navbar.fixed-header .col-sm-6 {
  float: right;
}

[dir="rtl"] .navbar.fixed-header .col-sm-6:first-child {
  text-align: right;
}

[dir="rtl"] .navbar.fixed-header .col-sm-6:last-child {
  text-align: left;
}

/* Navbar items alignment for RTL - Move everything to left */
[dir="rtl"] .navbar.fixed-header .col-sm-6:last-child > div,
[dir="rtl"] .navbar.fixed-header .col-sm-6:last-child > ul {
  float: left !important;
}

/* Dropdown menus */
[dir="rtl"] .dropdown-menu {
  left: auto;
  right: 0;
  text-align: right;
}

[dir="rtl"] .dropdown-menu > li > a {
  text-align: right;
}

/* User menu dropdown positioning */
[dir="rtl"] .user-menu.pull-right {
  left: 0 !important;
  right: auto !important;
}

[dir="rtl"] .dropdown-menu.pull-right {
  left: 0 !important;
  right: auto !important;
}

/* ========================================
   MULTIPLE PAYMENT & DELIVERY PAGE RTL STYLES
   ======================================== */

/* Panel title layout - keep filters together on left, heading on right */
html[dir="rtl"] .frmMultiplePayment .panel-title {
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
}

html[dir="rtl"] .frmMultiplePayment .panel-title > span:first-child {
  order: 3 !important;
  /* Heading text to right */
  flex: 1 !important;
  text-align: right !important;
}

html[dir="rtl"] .frmMultiplePayment .panel-title > #Duration4,
html[dir="rtl"] .frmMultiplePayment .panel-title > div[id*="Duration"] {
  order: 1 !important;
  /* Duration/Calendar to left */
}

html[dir="rtl"]
  .frmMultiplePayment
  .panel-title
  > .col-sm-3:has(#drpAgeFilter) {
  order: 2 !important;
  /* Delivery overdue dropdown next to calendar */
}

html[dir="rtl"] .frmMultiplePayment .panel-title > .col-sm-2:has(#OrderType) {
  order: 2 !important;
  /* Order type dropdown also on left side */
}

/* Multiple Payment main grid area */
html[dir="rtl"] #MainGrid {
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html[dir="rtl"] #MainGrid.col-sm-12,
html[dir="rtl"] #MainGrid.col-sm-9 {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Panel should not overflow */
html[dir="rtl"] .frmMultiplePayment {
  max-width: 100% !important;
  overflow: hidden !important;
}

html[dir="rtl"] .frmMultiplePayment .panel-body {
  overflow-x: scroll !important;
  overflow-y: auto !important;
  max-width: 100% !important;
}

/* Hide checkbox column in rows (first td with checkbox) */
html[dir="rtl"] #divLeftSideData #divGridData #grdData tbody tr td:first-child {
  display: none !important;
  width: 0 !important;
  padding: 0 !important;
}

/* Hide only the checkbox div in frmMultiplePayment, keep hyperlink visible */
html[dir="rtl"] #grdData tbody tr td:first-child .hidden-row-checkbox {
  display: none !important;
}

/* Grid header alignment */
html[dir="rtl"] #grdData .headerClass {
  text-align: right !important;
}

/* Checkbox columns - center align */
html[dir="rtl"] #grdData .headerClass-2 {
  text-align: center !important;
}

/* Numeric and text alignment for grid cells */
html[dir="rtl"] #grdData td.verAline,
html[dir="rtl"] #grdData th.verAline {
  text-align: center !important;
}

/* Ensure inline display:none is respected in RTL */
html[dir="rtl"] #grdData td[style*="display:none"],
html[dir="rtl"] #grdData td[style*="display: none"],
html[dir="rtl"] #tblTbodyData th[style*="display:none"],
html[dir="rtl"] #tblTbodyData th[style*="display: none"],
html[dir="rtl"] #tblTbodyData td[style*="display:none"],
html[dir="rtl"] #tblTbodyData td[style*="display: none"] {
  display: none !important;
}

/* Hyperlinks in grid */
html[dir="rtl"] #grdData .hypLink {
  direction: rtl;
}

/* Grid empty message */
html[dir="rtl"] #grdData .EmptyHeader {
  text-align: center;
  direction: rtl;
}

/* Buttons in footer */
html[dir="rtl"] .frmMultiplePayment .panel-footer .col-sm-5 {
  float: right !important;
}

html[dir="rtl"] .frmMultiplePayment .panel-footer .col-sm-7 {
  float: left !important;
}

/* Pull-right becomes pull-left */
html[dir="rtl"] .frmMultiplePayment .pull-right {
  float: left !important;
}

/* Legend section */
html[dir="rtl"] .frmMultiplePayment .panel-footer .pull-right div {
  text-align: left;
  direction: rtl;
}

/* Side Panel */
html[dir="rtl"] #SidePnl {
  direction: rtl;
  text-align: right;
  float: left !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: 25% !important;
  box-sizing: border-box !important;
}

/* Main grid when side panel is visible*/
html[dir="rtl"] #MainGrid.col-sm-9 {
  float: right !important;
  max-width: 75% !important;
  box-sizing: border-box !important;
}

/* Ensure row with both elements uses proper layout */
html[dir="rtl"] .row-fluid:has(#SidePnl):has(#MainGrid) {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  overflow: hidden !important;
}

/* Side panel button containers */
html[dir="rtl"] #SidePnl .row-fluid.Textpadding {
  overflow: visible !important;
  width: 100% !important;
}

/* Side panel content wrapper */
html[dir="rtl"] #SidePnl > div {
  overflow: visible !important;
}

/* Ensure grid wrapper doesn't interfere with table layout */
html[dir="rtl"] .frmMultiplePayment .panel-body .row-fluid {
  display: block !important;
}

/* Grid container should not use flexbox */
html[dir="rtl"] .row-fluid #divGridData .col-sm-12 {
  display: block !important;
  float: none !important;
}

/* Loader Centering: Absolute Center */
html[dir="rtl"] #pnlMsg {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  -webkit-transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  position: fixed !important;
  z-index: 20000 !important;
  right: auto !important;
  bottom: auto !important;
}

/* Show only header checkbox, hide row checkboxes */
html[dir="rtl"] #divChkAll {
  display: inline-block !important;
}

html[dir="rtl"] .hidden-row-checkbox {
  display: none !important;
}

/* Fix table width for FrmNew_Customer in RTL to prevent blank space */
html[dir="rtl"] #divGridData {
  width: 100% !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}

html[dir="rtl"] #divGridData #grdData {
  width: 100% !important;
  table-layout: auto !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

html[dir="rtl"] #divGridData #grdData td:last-child {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

html[dir="rtl"] #divGridData #grdData th:last-child {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

html[dir="rtl"] #FrmNew_Customer th,
html[dir="rtl"] #FrmNew_Customer td,
html[dir="rtl"] #FrmNew_Customer tr {
  text-align: center !important;
}

/* Empty Data Text Centering: Target TD */
html[dir="rtl"] .EmptyDataText td {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
  border: none !important;
}

html[dir="rtl"] .EmptyDataText {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
}

/* ========================================
   BOOKING HISTORY PAGE RTL STYLES
   ======================================== */

/* Booking History - Grid containers */
html[dir="rtl"] .col-md-4[style*="height: 410px"],
html[dir="rtl"] .col-md-8[style*="height: 410px"] {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Grid cells - specific word wrapping */
html[dir="rtl"] #GrdEditHistoryBooking td,
html[dir="rtl"] #grdHistory td,
html[dir="rtl"] #grdInvoiceHistory td {
  white-space: normal !important;
  word-wrap: break-word !important;
}

/* Reset color for Edit History button in Booking History to match Order Transition button */
#GrdEditHistoryBooking #hypBtnShowDetails {
  color: white !important;
}

/* ========================================
   HOME PICKUP SCHEDULER PAGE RTL STYLES
   ======================================== */

/* Parent container - specific overflow handling */
html[dir="rtl"] #homePickupSchedulerPage .row-fluid.div-margin {
  overflow-x: hidden !important;
}

/* ========================================
   DROP OFF SCHEDULER PAGE RTL STYLES
   ======================================== */

/* Search panel - prevent scrollbars on outer container */
html[dir="rtl"] .panel-primary.well-sm-tiny1,
html[dir="rtl"] .panel-primary.well-sm-tiny1 .panel-body,
html[dir="rtl"] .panel-primary.well-sm-tiny1 .panel-body .row-fluid,
html[dir="rtl"] .panel-primary.well-sm-tiny1 .panel-body .col-sm-12,
html[dir="rtl"] .row-fluid.div-margin:has(.panel-primary.well-sm-tiny1),
html[dir="rtl"]
  .row-fluid.div-margin
  > .col-sm-12:has(.panel-primary.well-sm-tiny1) {
  overflow: visible !important;
}

/* Search input containers - ensure visibility and prevent overflow */
html[dir="rtl"] #divCustomer,
html[dir="rtl"] #divBarcode,
html[dir="rtl"] #divPickUpNo {
  direction: rtl;
}

/* Ensure input-group displays properly in RTL */
html[dir="rtl"] #frmDropOffScheduler #divCustomer.input-group,
html[dir="rtl"] #frmDropOffScheduler #divBarcode.input-group {
  display: flex;
  flex-direction: row-reverse !important;
  width: 100% !important;
}

html[dir="rtl"] #frmDropOffScheduler #divPickUpNo.input-group {
  display: flex;
  flex-direction: row !important;
  width: 100% !important;
}

html[dir="rtl"] #frmDropOffScheduler #divPickUpNo .input-group-addon {
  border-radius: 0 4px 4px 0 !important;
  min-width: 40px !important;
  width: auto !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure hidden search inputs stay hidden */
html[dir="rtl"] #divBarcode[style*="display: none"],
html[dir="rtl"] #divPickUpNo[style*="display: none"],
html[dir="rtl"] #divCustomer[style*="display: none"] {
  display: none !important;
}

/* Search input parent containers - prevent scrollbars */
html[dir="rtl"] .panel-primary .panel-body .row-fluid .col-sm-8 {
  overflow: visible !important;
}

/* Search row container - prevent scrollbars */
html[dir="rtl"] .panel-primary .panel-body .row-fluid.div-margin {
  overflow: visible !important;
}

/* Search radio buttons alignment */
html[dir="rtl"] .divUrgent label.radio {
  margin-left: 10px;
  margin-right: 0;
}

/* Filter section alignment */
html[dir="rtl"] .well.well-sm-tiny {
  overflow: hidden;
}

html[dir="rtl"] .well.well-sm-tiny .form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

html[dir="rtl"] .well.well-sm-tiny .form-group {
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  margin-left: 0;
  margin-bottom: 5px;
  vertical-align: middle;
}

/* Filter textboxes - specific styling */
html[dir="rtl"] #txtArea {
  min-width: 200px;
}

html[dir="rtl"] #txtPincode {
  min-width: 150px;
}

/* Special instruction column */
html[dir="rtl"] #grdEntry td:has(#lblIns),
html[dir="rtl"] #grdCompleted td:has(#lblIns),
html[dir="rtl"] #grdCanceled td:has(#lblIns) {
  text-align: right;
  direction: rtl;
}

/* ========================================
   PAYMENT TYPE REPORT PAGE RTL STYLES
   ======================================== */

/* Title span should be on the right side in RTL */
html[dir="rtl"] #paymentTypeReportHeading span[style*="float: right"] {
  float: left !important;;
}

/* ========================================
   CUSTOMER SUMMARY REPORT PAGE RTL STYLES
   ======================================== */

/* Panel title layout - use flex with order method */
html[dir="rtl"] #frmCustomerSummaryHeading .panel-title {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
}

/* Heading span - rightmost position (order: 3) */
html[dir="rtl"]
  #frmCustomerSummaryHeading
  .panel-title
  > span[data-i18n="frmCustomerSummary.HeadingAccountsReceivable"] {
  order: 3 !important;
  text-align: right !important;
  margin-left: auto !important;
}

/* Separator - middle position (order: 2) */
html[dir="rtl"] #frmCustomerSummaryHeading .panel-title > .separator {
  order: 2 !important;
}

/* Description span - leftmost position (order: 1) */
html[dir="rtl"]
  #frmCustomerSummaryHeading
  .panel-title
  > span[data-i18n="frmCustomerSummary.ReportDescriptionAccountsReceivable"] {
  order: 1 !important;
  text-align: right !important;
}

/* Button row alignment */
html[dir="rtl"] #frmCustomerSummaryHeading + .panel-body .col-sm-6 .btn {
  margin-left: 5px;
  margin-right: 0;
}

/* ========================================
   PROCESS WISE REPORT PAGE RTL STYLES
   ======================================== */

html[dir="rtl"] #frmProcessWiseReportTitle > span:first-child {
  order: 3 !important;
  text-align: right;
  direction: rtl;
  margin-left: auto;
  flex: 0 0 auto;
}

/* ========================================
   PROCESS WISE SUMMARY PAGE RTL STYLES
   ======================================== */

/* Panel title layout - override common row-reverse, use normal row and push all to right */
html[dir="rtl"] #frmProcessWiseSummaryTitle {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  text-align: right !important;
  direction: rtl !important;
}

/* Push first element (heading) to right, which pushes all elements to right */
html[dir="rtl"] #frmProcessWiseSummaryTitle {
  margin-left: auto;
}

/* Separator "-" - add spacing before and after */
html[dir="rtl"] #frmProcessWiseSummaryTitle .separator {
  margin-left: 5px;
  margin-right: 5px;
}

/* ========================================
   BOOKING BY CUSTOMER REPORT PAGE RTL STYLES
   ======================================== */

/* Panel title layout - use flex with space-between like Payment Type Details */
html[dir="rtl"] #BookingByCustomerReportHeading .panel-title {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

/* Duration/Calendar control - pushed to left (order: 2) */
html[dir="rtl"] #BookingByCustomerReportHeading .panel-title #Duration4,
html[dir="rtl"] #BookingByCustomerReportHeading .panel-title #reportrange,
html[dir="rtl"] #BookingByCustomerReportHeading .panel-title .datefilter {
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  order: 2 !important;
}

/* Title content wrapper - pushed to right (order: 1) */
html[dir="rtl"]
  #BookingByCustomerReportHeading
  .panel-title
  .report-title-text {
  order: 1 !important;
  text-align: right !important;
  flex: 0 1 auto !important;
}

/* ========================================
   NON SERVICEABLE PINCODE REPORT PAGE RTL STYLES
   ======================================== */

/* Search icon position - move to left side in RTL (opposite of placeholder direction) */
html[dir="rtl"] #fltCustomerPackage .search-icon-pincode,
html[dir="rtl"] #fltCustomerPackage .search-icon-city,
html[dir="rtl"] #fltCustomerPackage .search-icon-address {
  margin-left: 9px !important;
  margin-right: 0 !important;
  left: 0 !important;
  right: auto !important;
}

/* ========================================
   BOOKING REPORT WITHOUT SLIP PAGE RTL STYLES
   ======================================== */

/* Expand/Shrink buttons - Right, next to title (Order -1) */
html[dir="rtl"] #BookingReportWithoutSlipPanel #achrExpand,
html[dir="rtl"] #BookingReportWithoutSlipPanel #achrshrink {
  float: left !important;
}

/* ========================================
   Price List Edit Page RTL STYLES
   ======================================== */

html[dir="rtl"] #frmPriceListEdit .QtyLabel,
html[dir="rtl"] #frmPriceListEdit .QtyLabel input {
  text-align: center !important;
}

/* ========================================
   Purchase SMS Page RTL STYLES
   ======================================== */

html[dir="rtl"] #divSMSPurchseData .modal-content .closeButton {
  left: 3px !important;
  right: 0px !important;
}

html[dir="rtl"]
  #divSMSPurchseData
  .modal-content
  tbody
  tr
  .col-sm-6:first-child {
  border-right: none !important;
  border-left: 1px solid silver !important;
}

html[dir="rtl"] #divSMSPurchseData .ribbon-container .ribbon {
  left: 2.6rem !important;
}

/* ========================================
   SUPERADMIN DASHBOARD PAGE RTL STYLES
   ======================================== */

html[dir="rtl"] #divOrderCount {
  float: left !important;
  margin-right: 0 !important;
  margin-left: 11px !important;
}

/* ========================================
   SUPERADMIN LOGIN PAGE RTL STYLES
   ======================================== */

/* Fix superadmin login links positioning in RTL */
html[dir="rtl"] #lnkforgetPassword {
  float: right !important;
  margin-left: 0 !important;
  margin-right: 30px !important;
}

html[dir="rtl"] #btLoginStore {
  float: left !important;
  margin-right: 0 !important;
  margin-left: 16px !important;
}

html[dir="rtl"] #lnkforgetUserName {
  float: right !important;
  margin-left: 0 !important;
  margin-right: 30px !important;
}

/* ========================================
   BOOTSTRAP TIMEPICKER RTL SUPPORT
   ======================================== */

/*
 * RTL Time Format: Time displays as "8:00 PM" (same as LTR)
 * The picker maintains LTR column order: Hour : Minute AM/PM
 * Only positioning and alignment are adjusted for RTL layout
 */

/* Timepicker widget container - keep LTR direction for column order */
html[dir="rtl"] .bootstrap-timepicker-widget.dropdown-menu {
  direction: ltr !important;
  text-align: center;
}

/* Timepicker table - maintain LTR order */
html[dir="rtl"] .bootstrap-timepicker-widget table {
  direction: ltr !important;
  width: 100%;
}

/* Ensure text inside columns is properly aligned */
html[dir="rtl"] .bootstrap-timepicker-widget .bootstrap-timepicker-hour,
html[dir="rtl"] .bootstrap-timepicker-widget .bootstrap-timepicker-minute,
html[dir="rtl"] .bootstrap-timepicker-widget .bootstrap-timepicker-meridian {
  direction: ltr;
  text-align: center;
  display: inline-block;
  min-width: 30px;
}

/*
 * Time Input Field Display Format
 * ================================
 * In both LTR and RTL, time is displayed as: "8:00 PM"
 *
 * The input uses LTR direction to prevent Unicode bidirectional
 * algorithm from reordering characters (e.g., preventing "PM 00:8")
 *
 * Text is right-aligned to match RTL layout expectations while
 * maintaining the correct time format order.
 */
html[dir="rtl"] #txtDeliveryTime,
html[dir="rtl"] input.bootstrap-timepicker,
html[dir="rtl"] input[data-provide="timepicker"],
html[dir="rtl"] .bootstrap-timepicker input,
html[dir="rtl"] input.quickdate-button[id*="Time"] {
  direction: ltr !important;
  text-align: center !important;
  unicode-bidi: embed !important;
}

html[dir="rtl"] .bootstrap-timepicker-widget.timepicker-orient-left:before,
html[dir="rtl"] .bootstrap-timepicker-widget.timepicker-orient-left:after {
  right: 135px !important;
  left: auto !important;
}

/* ========================================
   PRINT MEDIA - RTL Support for Printing
   ======================================== */

/* Ensure RTL styles are applied during printing */
@media print {
  /* Base RTL Direction for Print */
  html[dir="rtl"],
  body[dir="rtl"] {
    direction: rtl !important;
    text-align: right !important;
  }

  /* Float Reversals for Print */
  html[dir="rtl"] .pull-right {
    float: left !important;
  }

  html[dir="rtl"] .pull-left {
    float: right !important;
  }

  /* Text Alignment Reversals for Print */
  html[dir="rtl"] .text-right {
    text-align: left !important;
  }

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

  /* Margin and Padding Reversals for Print */
  html[dir="rtl"] {
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: auto !important;
  }

  /* Table RTL Support for Print */
  html[dir="rtl"] table {
    direction: rtl !important;
  }

  html[dir="rtl"] table td,
  html[dir="rtl"] table th {
    text-align: right !important;
  }

  /* Ensure booking slip content is RTL in print */
  html[dir="rtl"] .TableData,
  html[dir="rtl"] #divPrint,
  html[dir="rtl"] .booking-slip-content {
    direction: rtl !important;
    text-align: right !important;
  }

  /* Form elements RTL for Print */
  html[dir="rtl"] input[type="text"],
  html[dir="rtl"] textarea,
  html[dir="rtl"] select {
    text-align: right !important;
    direction: rtl !important;
  }
}

/* ========================================
   Delivery New Page
   ======================================== */

html[dir="rtl"] #frmDeliveryNew .Textpadding {
  text-align: left !important;
}

/* ========================================
   frmBooking Page
   ======================================== */

html[dir="rtl"] #pnlPackageRecharge [style*="text-align: right"] {
  text-align: left !important;
}

html[dir="rtl"] .frmBookingPopUp .rightSide {
  float: left !important;
  left: 0 !important;
  right: auto !important;
}

.frmBooking .Textpadding input[type="text"],
.frmBookingPopUp .rightSide .QtyLabel,
.frmBookingPopUp .rightSide #quantity input[type="text"],
html[dir="rtl"] .frmBooking .Textpadding input[type="text"],
html[dir="rtl"] .frmBookingPopUp .rightSide .QtyLabel,
html[dir="rtl"] .frmBookingPopUp .rightSide #quantity input[type="text"] {
  text-align: center !important;
}

html[dir="rtl"] .frmBookingPopUp .rightButtonGroup a {
  margin-left: 10px !important;
  margin-right: 0 !important;
}

html[dir="rtl"] .frmBooking .fontSizeRight {
  text-align: left !important;
}

html[dir="rtl"] .frmBooking .div-margin2 .fontSize #divApplyCoupon {
  text-align: left !important;
  float: left !important;
}

.frmBooking .fontSizeRight input[type="text"] {
  text-align: right !important;
}

html[dir="rtl"] .frmBooking .fontSizeRight input[type="text"] {
  text-align: left !important;
}

html[dir="rtl"] .frmBooking #MainServices ul,
html[dir="rtl"] .frmBooking #Category-slides ul {
  direction: rtl !important;
}

html[dir="rtl"] .frmBooking #txtDiscount {
  direction: rtl !important;
  text-align: left !important;
}

html[dir="rtl"] #divColorAndDefectPopUp {
  left: 210px !important;
  right: auto !important;
  margin-left: 0px !important;
  margin-right: 12px !important;
}

html[dir="rtl"] #divColorAndDefectPopUp .launcher {
  left: -200px !important;
  right: 0px !important;
}

html[dir="rtl"] #divColorAndDefectPopUp .launcher .options.other-properties {
  right: auto !important;
  left: 0px !important;
}

html[dir="rtl"] #divColorAndDefectPopUp .close1 {
  float: left !important;
  margin-left: -20px !important;
}

html[dir="rtl"] #divColorAndDefectPopUp #btnProceed {
  float: left !important;
  margin-left: 10px !important;
  margin-right: 0px !important;
}

html[dir="rtl"] #divColorAndDefectPopUp ul li label span div {
  text-align: right !important;
}

html[dir="rtl"] #divColorAndDefectPopUp ul li label span input {
  text-align: center !important;
  float: left !important;
}

/* Fix popup carousel column layout in RTL */
/* Use flexbox for proper RTL layout instead of floats */
html[dir="rtl"] #divBrands .cslide-slide ul,
html[dir="rtl"] #divColors .cslide-slide ul,
html[dir="rtl"] #divDefects .cslide-slide ul {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
}

html[dir="rtl"] #divColors .cslide-slides-master .Margin4,
html[dir="rtl"] #divDefects .cslide-slides-master .Margin4,
html[dir="rtl"] #divBrands .cslide-slides-master .Margin4 {
  direction: rtl !important;
}

html[dir="rtl"] #divBrands li,
html[dir="rtl"] #divColors li,
html[dir="rtl"] #divDefects li {
  float: none !important;
}

html[dir="rtl"] #divBrands li label.radio,
html[dir="rtl"] #divBrands li label.checkbox,
html[dir="rtl"] #divColors li label.radio,
html[dir="rtl"] #divColors li label.checkbox,
html[dir="rtl"] #divDefects li label.radio,
html[dir="rtl"] #divDefects li label.checkbox {
  float: none !important;
}

/* Swap margins for RTL */
html[dir="rtl"] #divBrands li label.radio > span,
html[dir="rtl"] #divBrands li label.checkbox > span,
html[dir="rtl"] #divColors li label.radio > span,
html[dir="rtl"] #divColors li label.checkbox > span,
html[dir="rtl"] #divDefects li label.radio > span,
html[dir="rtl"] #divDefects li label.checkbox > span {
  margin-right: 0 !important;
  margin-left: 10px !important;
}

/* Fix popup carousel container overflow in RTL */
html[dir="rtl"] #divColorAndDefectPopUp .cslide-slides-master {
  overflow: hidden !important;
}

html[dir="rtl"] #divColorAndDefectPopUp .cslide-slides-container {
  direction: ltr !important;
}

html[dir="rtl"] #divColorAndDefectPopUp .cslide-slide {
  direction: rtl !important;
}

html[dir="rtl"] #divColorAndDefectPopUp .cslide-slide ul li {
  text-align: right !important;
}

html[dir="rtl"] #additionalServices.dropdownExterService ul li span {
  margin-left: 5px !important;
  margin-right: 10px !important;
}

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

/* Garments container - force RTL direction for scrollbar on left */
html[dir="rtl"] #divGarments {
  direction: rtl !important;
}

html[dir="rtl"] #divGarments ul li label > span.price {
  left: 2px !important;
  right: auto !important;
}

html[dir="rtl"] #divGarments ul li span {
  background-position: right 8px top 5px !important;
}

/* ========================================
   Laundry Booking Page
   ======================================== */

.LaundryBooking .Textpadding .input-group input[type="text"],
html[dir="rtl"] .LaundryBooking .Textpadding .input-group input[type="text"] {
  text-align: center !important;
}

html[dir="rtl"] #pnlGarmentAdd.LaundryBookingGarmentAdd {
  left: 0 !important;
  right: auto !important;
}

html[dir="rtl"] #laundryMainService ul li label > span.GarmentNamestyle {
  left: 7px !important;
  right: 7px !important;
}

html[dir="rtl"] .LaundryBooking .row-fluid .col-sm-6:last-child {
  float: right !important;
}

html[dir="rtl"] .TotalWeightGarments {
  border-left: 2px solid gray !important;
  border-right: 0px !important;
  padding-left: 0px !important;
  padding-right: 15px !important;
}

/* ========================================
   Laundry Delivery Page - Order Summary RTL Support
   ======================================== */

/* Invoice number display - force LTR to keep # before number */
html[dir="rtl"] #lblInvoiceNo {
  direction: ltr !important;
  unicode-bidi: embed;
  display: inline;
}

/* Invoice number container - force LTR to keep # before number (first col-sm-6 in order summary) */
html[dir="rtl"]
  .col-sm-3[style*="background-color: #8d99a0"]
  .row-fluid:first-child
  .col-sm-6:first-child
  .textBold {
  direction: ltr !important;
  unicode-bidi: bidi-override;
}

/* Order summary financial labels - keep right-aligned in RTL */
html[dir="rtl"] .fontSize {
  text-align: right !important;
}

/* Order summary financial values - align left in RTL for proper spacing */
html[dir="rtl"] .fontSize2 {
  text-align: left !important;
}

/* Customer wallet and usage display - align left in RTL */
html[dir="rtl"] .fontSizeRight {
  text-align: left !important;
}

/* Remove excessive padding from Textpadding in order summary */
html[dir="rtl"] #divAccountInfo .Textpadding {
  padding: 0px !important;
}

/* Ensure proper column alignment in order summary rows */
html[dir="rtl"] #divAccountInfo .row-fluid .col-sm-6 {
  padding-right: 0px !important;
  padding-left: 0px !important;
}

/* Fix the top border alignment for balance due section */
html[dir="rtl"]
  #divAccountInfo
  .row-fluid
  .col-sm-4[style*="border-top-style"] {
  float: left !important;
}

/* Ensure inline display:none is respected in RTL */
html[dir="rtl"] #grdData td[style*="display:none"],
html[dir="rtl"] #grdData td[style*="display: none"] {
  display: none !important;
}

/* Center-align table headers and cells in LaundryDelivery grid */
#grdData th,
#grdData td {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Exception: Keep garment details cell left-aligned for better readability */
#grdData td.gramentCss {
  text-align: left !important;
}

/* Exception: Keep garment details cell right-aligned in RTL */
html[dir="rtl"] #grdData td.gramentCss {
  text-align: right !important;
}

/* ========================================
   BARCODE SETTING PAGE RTL STYLES
   ======================================== */

html[dir="rtl"] #barCodeSettingPage .container3,
html[dir="rtl"] #barCodeSettingPage .container4 {
  float: right;
  border-right: 1px solid #000000;
  border-left: 1px solid #ffffff;
}

html[dir="rtl"] #barCodeSettingPage #undersubitem {
  margin-right: 2px;
  margin-left: 0;
}

html[dir="rtl"] #barCodeSettingPage #undersubitem div,
html[dir="rtl"] #barCodeSettingPage #unorderlist li {
  float: right;
}

html[dir="rtl"] #barCodeSettingPage div.icol1 {
  text-align: right;
}

html[dir="rtl"] #barCodeSettingPage #unorderlist label {
  float: right;
}

html[dir="rtl"] #barCodeSettingPage #unorderlist li {
  margin-left: 0;
  margin-right: 15px;
}

html[dir="rtl"] #barCodeSettingPage #demoBarCode span {
  margin-right: 35px;
  margin-left: 0;
}

html[dir="rtl"] #barCodeSettingPage .demo,
html[dir="rtl"] #barCodeSettingPage .demo1 {
  margin-left: auto;
  margin-right: auto;
}

html[dir="rtl"] #barCodeSettingPage #divBarcode {
  display: block !important;
}

/* Barcode label - keep element order same as LTR (don't reverse child elements) */
html[dir="rtl"] #barCodeSettingPage #divBarcode,
html[dir="rtl"] #barCodeSettingPage #divBarcode > div,
html[dir="rtl"] #barCodeSettingPage #divBarcode > span,
html[dir="rtl"] #barCodeSettingPage #divBarcode > img,
html[dir="rtl"] #barCodeSettingPage #divBarcode > br {
  direction: ltr !important;
}

/* Other barcode pages (Barcodet.aspx, frmPrintLabelNew.aspx, PrintLabelRolar.aspx) - keep element order same as LTR */
html[dir="rtl"] #divBarcodeText,
html[dir="rtl"] #divBarcodeText > div,
html[dir="rtl"] #divBarcodeText > span,
html[dir="rtl"] #divBarcodeText > img,
html[dir="rtl"] #divBarcodeText > br {
  direction: ltr !important;
}

html[dir="rtl"] #barCodeSettingPage .lblDeductNew {
  float: right;
  right: 50px;
  left: auto;
  text-align: right;
}

html[dir="rtl"] #barCodeSettingPage .lblPageBreak {
  float: right;
  right: 30px;
  left: auto;
}

/* ========================================
   GOOGLE CHARTS RTL SUPPORT
   For Default.aspx and other pages with charts
   ======================================== */

/* Keep charts in LTR direction even in Arabic for data visualization clarity
   Only chart titles and labels will display in RTL text */
html[dir="rtl"] #columnchart_values,
html[dir="rtl"] #columnchartData,
html[dir="rtl"] #chart_div,
html[dir="rtl"] #chart_div1,
html[dir="rtl"] #columnchart_values svg,
html[dir="rtl"] #columnchartData svg {
  direction: ltr !important;
}

/* Chart titles - keep text RTL for Arabic but chart structure LTR */
html[dir="rtl"] #columnchart_values svg text,
html[dir="rtl"] #columnchartData svg text {
  direction: ltr;
  unicode-bidi: embed;
}

/* ========================================
   CSSMENU ACCORDION RTL STYLES
   For Email Config Step 3 accordions
   ======================================== */

/* Base RTL direction for cssmenu */
html[dir="rtl"] .cssmenu,
html[dir="rtl"] .cssmenu ul,
html[dir="rtl"] .cssmenu li,
html[dir="rtl"] .cssmenu a {
  direction: rtl;
  text-align: right;
}

/* Move plus/minus icons to left side (4%) for RTL */
html[dir="rtl"] .cssmenu > ul > li.has-sub > a span {
  background-position: 4% center !important;
}

html[dir="rtl"] .cssmenu > ul > li.has-sub.active > a span {
  background-position: 4% center !important;
}

/* Adjust padding for RTL */
html[dir="rtl"] .cssmenu > ul > li > a > span {
  padding: 12px 10px;
  text-align: right;
}

/* RTL for submenu items */
html[dir="rtl"] .cssmenu ul ul a {
  padding: 10px 25px 10px 10px;
  text-align: right;
}

/* Move the before pseudo-element arrow to right side */
html[dir="rtl"] .cssmenu ul ul a:before {
  left: auto;
  right: 10px;
}

/* Ensure envelope/icon positioning in accordion headers */
html[dir="rtl"] .cssmenu > ul > li > a .fa {
  margin-left: 8px;
  margin-right: 0;
}

/* Accordion Text Padding Override for RTL (LTR defined in page) */
html[dir="rtl"] .accordion-text-padding {
  padding-right: 0 !important;
  padding-left: 30px !important;
}

/* Sidebar Overlap Fix: Ensure .row with div-margin behaves like row-fluid in RTL */
html[dir="rtl"] .row.div-margin {
  overflow: visible !important;
  margin-right: 0px;
  /* Reset negative margins if causing overlap */
  margin-left: 0px;
}

/* ========================================
   EMAIL AND NOTIFICATION CONFIG PAGE RTL STYLES
   Scoped to #emailNotificationConfigContainer
   ======================================== */

/* Fix column float direction for RTL layout - main content and variable panel */
html[dir="rtl"] #emailNotificationConfigContainer > .col-sm-8 {
  float: right !important;
}

html[dir="rtl"] #emailNotificationConfigContainer > .col-sm-4 {
  float: left !important;
}

/* Ensure container clears floats properly in RTL */
html[dir="rtl"] #emailNotificationConfigContainer {
  overflow: hidden;
}

html[dir="rtl"] #emailNotificationConfigContainer::after {
  content: "";
  display: table;
  clear: both;
}

/* ========================================
   ALL STORE MAP PAGE RTL STYLES
   Scoped to #AllStoreMapContainer
   Only overrides for page-specific inline styles
   ======================================== */

/* Label style - override inline border-radius for RTL */
html[dir="rtl"] #AllStoreMapContainer .label-style {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
}

/* Dropdown select - border radius for RTL */
html[dir="rtl"] #AllStoreMapContainer .dropdown-option1 {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 5px !important;
  border-bottom-left-radius: 5px !important;
}

/* Google Maps container MUST remain LTR for proper display */
html[dir="rtl"] #AllStoreMapContainer #divAllMapArea {
  direction: ltr !important;
}

/* Google Places Autocomplete dropdown - keep LTR for addresses */
html[dir="rtl"] .pac-container {
  direction: ltr !important;
  text-align: left !important;
}

/* ========================================
   PAYMENT TYPE REPORT PAGE RTL STYLES
   ======================================== */

/* Show button should float left in RTL */
html[dir="rtl"] #spanShowButton {
  float: left !important;
}

html[dir="rtl"] #divStoreName .input-group-addon {
  border-right: 1px solid #ccc;
  border-left: 0;
  border-radius: 0 4px 4px 0;
}

html[dir="rtl"] #divStoreName .form-control {
  border-left: 0;
  border-right: 1px solid #ccc;
  border-radius: 0 4px 4px 0;
}

/* ========================================
   QUANTITY AND PRICE REPORT PAGE RTL STYLES
   ======================================== */

/* Expand/Shrink buttons should float left in RTL */
html[dir="rtl"] #QuantityAndPriceReportPanel .expand-shrink-btn,
html[dir="rtl"] #QuantityAndPriceReportPanel #achrExpand,
html[dir="rtl"] #QuantityAndPriceReportPanel #achrshrink {
  float: left !important;
}

/* Ensure checkbox column (first column) is always hidden */
html[dir="rtl"] #QuantityAndPriceReportPanel #grdReport th:nth-child(1),
html[dir="rtl"] #QuantityAndPriceReportPanel #grdReport td:nth-child(1) {
  display: none !important;
}

/* ========================================
   ACCOUNTS RECEIVABLE PAGE RTL STYLES
   ======================================== */

html[dir="rtl"] #frmAccountsReceiveable .custom-pager-row table {
  width: 0% !important;
}

/* ========================================
   PICKUP SCHEDULE PAGE RTL STYLES
   ======================================== */

/* Time dropdown - force LTR to prevent dash/AM-PM reordering 
   Using higher specificity to override select.form-control RTL rule */
html[dir="rtl"] select#drpPickTime,
html[dir="rtl"] select#drpPickTime.form-control,
html[dir="rtl"] select#drpDropOffTime,
html[dir="rtl"] select#drpDropOffTime.form-control {
  direction: rtl !important;
  unicode-bidi: embed !important;
  text-align: right !important;
}

html[dir="rtl"] select#drpPickTime option,
html[dir="rtl"] select#drpDropOffTime option {
  direction: ltr !important;
  unicode-bidi: embed !important;
  text-align: center !important;
}

html[dir="rtl"] td:has(#lblPickTime),
html[dir="rtl"] td:has(#lblDropOffTime) {
  direction: ltr !important;
  text-align: center !important;
}

/* DriverPickupDropoff - Force center alignment for all grid cells */
html[dir="rtl"] #grdAssinged td,
html[dir="rtl"] #grdAssinged th,
html[dir="rtl"] #grdOrders td,
html[dir="rtl"] #grdOrders th {
  text-align: center !important;
}

/* Font Awesome Outlined Arrow Reversals */
html[dir="rtl"] .fa-arrow-circle-o-right:before {
  content: "\f190";
  /* arrow-circle-o-left */
}

html[dir="rtl"] .fa-arrow-circle-o-left:before {
  content: "\f18e";
  /* arrow-circle-o-right */
}

/* ========================================
   ROYALTY PROFORMA INVOICES PAGE RTL STYLES
   ======================================== */

/* Page-specific RTL support for RoyaltyProformaInvoices.aspx */

/* Tab navigation - RTL */
html[dir="rtl"] #royaltyTabs {
  direction: rtl;
}

html[dir="rtl"] #royaltyTabs .nav-item {
  float: right;
}

/* Filter sidebar - RTL positioning */
html[dir="rtl"] .sidebar-filter.right[data-fltcustomerpackage="opened"] {
  left: 0;
  right: auto !important;
}

/* Filter sidebar - RTL positioning */
html[dir="rtl"] .sidebar-filter.right[data-fltcustomerpackage="closed"] {
  left: -300px !important;
  right: auto !important;
}

/* Filter sidebar - RTL positioning - default closed state */
/* The generic rule without data attribute causes sidebar to appear by default */
/* Specific opened/closed rules below handle the positioning */

/* Package use filter sidebar - RTL positioning */
html[dir="rtl"] .sidebar-filter.right[data-fltPkgUse="opened"] {
  left: 0;
  right: auto !important;
}

html[dir="rtl"] .sidebar-filter.right[data-fltPkgUse="closed"] {
  left: -300px !important;
  right: auto !important;
}

/* Upsell filter sidebar - RTL positioning */
html[dir="rtl"] .sidebar-filter.right[data-divupcellfilter="opened"] {
  left: 0;
  right: auto !important;
}

html[dir="rtl"] .sidebar-filter.right[data-divupcellfilter="closed"] {
  left: -300px !important;
  right: auto !important;
}

/* Sales filter sidebar - RTL positioning */
html[dir="rtl"] .sidebar-filter.right[data-divSaleSideFilter="opened"] {
  left: 0;
  right: auto !important;
}

html[dir="rtl"] .sidebar-filter.right[data-divSaleSideFilter="closed"] {
  left: -300px !important;
  right: auto !important;
}

/* Left sidebar - RTL positioning */
html[dir="rtl"] .sidebar-filter.left {
  left: 0;
  right: auto;
}

html[dir="rtl"] .sidebar-filter.left[data-fltcustomerpackage="opened"],
html[dir="rtl"] .sidebar-filter.left[data-fltPkgUse="opened"],
html[dir="rtl"] .sidebar-filter.left[data-divupcellfilter="opened"],
html[dir="rtl"] .sidebar-filter.left[data-divSaleSideFilter="opened"] {
  left: 0;
  right: auto !important;
}

html[dir="rtl"] .sidebar-filter.left[data-fltcustomerpackage="closed"],
html[dir="rtl"] .sidebar-filter.left[data-fltPkgUse="closed"],
html[dir="rtl"] .sidebar-filter.left[data-divupcellfilter="closed"],
html[dir="rtl"] .sidebar-filter.left[data-divSaleSideFilter="closed"] {
  left: -300px !important;
  right: auto !important;
}

/* Filter form elements */
html[dir="rtl"] #drpStatus,
html[dir="rtl"] #drpPaymentMode {
  text-align: right;
  direction: rtl;
}

/* Tables - data grids */
html[dir="rtl"] #tblTbodyData,
html[dir="rtl"] #tblPaidInvoices {
  direction: rtl;
}

html[dir="rtl"] #tblTbodyData th,
html[dir="rtl"] #tblTbodyData td,
html[dir="rtl"] #tblPaidInvoices th,
html[dir="rtl"] #tblPaidInvoices td {
  text-align: right !important;
}

/* Invoice modal content */
html[dir="rtl"] #proformaInvoiceModal .modal-dialog,
html[dir="rtl"] #proformaInvoiceModal .modal-content {
  direction: rtl;
  text-align: right;
}

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

/* Invoice table inside modal */
html[dir="rtl"] #proformaInvoiceContent table {
  direction: rtl;
}

html[dir="rtl"] #proformaInvoiceContent th,
html[dir="rtl"] #proformaInvoiceContent td {
  text-align: right !important;
}

/* TDS Calculation modal */
html[dir="rtl"] #tdsCalculationModal .modal-dialog,
html[dir="rtl"] #tdsCalculationModal .modal-content,
html[dir="rtl"] #tdsCalculationModal .modal-body {
  direction: rtl;
  text-align: right;
}

/* Amount fields - keep LTR for numbers */
html[dir="rtl"] .text-align-right {
  direction: ltr;
  text-align: left !important;
}

/* ========================================
   FORCE LTR FOR NUMBERS AND TIME
   ======================================== */

/* Force LTR direction for time, mobile, and pincode fields in all RTL contexts */
html[dir="rtl"] [dir="ltr"],
html[dir="rtl"] span[dir="ltr"],
html[dir="rtl"] #drpDropOffTime,
html[dir="rtl"] #lblDropTime,
html[dir="rtl"] .Table span[dir="ltr"] {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: embed !important;
  display: inline-block;
}

/* Ensure dropdowns with LTR content maintain LTR direction */
html[dir="rtl"] select[dir="ltr"] {
  direction: ltr !important;
  text-align: left !important;
}

/* ========================================
   BOOKING PAGE - ADD ITEM BUTTON
   ======================================== */

/* Add item button - flip icon to right side for RTL */
html[dir="rtl"] #add-item {
  background-position: right 0 !important;
  padding: 0 125px 0 25px !important;
  text-align: right;
}

/* ========================================
   TOOLTIP RTL SUPPORT
   ======================================== */

/* Tooltip RTL - margin adjustments only.
   Arrow positioning relies on Bootstrap defaults since JS
   already switches placement ('right' -> 'left') for RTL. */
html[dir="rtl"] .tooltip.right {
  margin-left: -3px;
  margin-right: 0;
}

html[dir="rtl"] .tooltip.left {
  margin-right: -3px;
  margin-left: 0;
}

/* Top and bottom tooltips - adjust arrow positioning */
html[dir="rtl"] .tooltip.top .tooltip-arrow {
  left: auto;
  right: 50%;
  margin-right: -5px;
}

html[dir="rtl"] .tooltip.bottom .tooltip-arrow {
  left: auto;
  right: 50%;
  margin-right: -5px;
}

/* ========================================
   CUSTOMER DASHBOARD PAGE RTL STYLES
   ======================================== */

/* Flip button margins in RTL */
html[dir="rtl"] #btnPackageDetails {
  margin-right: 15px !important;
  margin-left: 0 !important;
}

html[dir="rtl"] #btnCustOldDashboard {
  margin-right: 15px !important;
  margin-left: 0 !important;
}

html[dir="rtl"] #lnkLaundry {
  margin-right: 16px !important;
  margin-left: 60px !important;
}

/* ========================================
   PACKAGE HOME PAGE RTL TABLE STYLES
   ======================================== */

/* PackageHome tables - align all headers and cells to right in RTL */
html[dir="rtl"] table._1kvpv- th,
html[dir="rtl"] table._1kvpv- td,
html[dir="rtl"] table._3Vhm-Y th,
html[dir="rtl"] table._3Vhm-Y td,
html[dir="rtl"] table.clsTableScroll th,
html[dir="rtl"] table.clsTableScroll td,
html[dir="rtl"] table.clsTableScroll-2 th,
html[dir="rtl"] table.clsTableScroll-2 td,
html[dir="rtl"] table.clsTableScroll-3 th,
html[dir="rtl"] table.clsTableScroll-3 td,
html[dir="rtl"] table.clsTableScroll-4 th,
html[dir="rtl"] table.clsTableScroll-4 td,
html[dir="rtl"] table._clsCustPkgActive th,
html[dir="rtl"] table._clsCustPkgActive td,
html[dir="rtl"] table._clscCustPkgAvailable th,
html[dir="rtl"] table._clscCustPkgAvailable td,
html[dir="rtl"] table._clsPkgUseDatails th,
html[dir="rtl"] table._clsPkgUseDatails td,
html[dir="rtl"] #tblTbodyData th,
html[dir="rtl"] #tblTbodyData td,
html[dir="rtl"] #tblTbodyData_Package th,
html[dir="rtl"] #tblTbodyData_Package td,
html[dir="rtl"] #tblTbodyDataWPkg th,
html[dir="rtl"] #tblTbodyDataWPkg td,
html[dir="rtl"] #tblTbodyData_TopStaff th,
html[dir="rtl"] #tblTbodyData_TopStaff td,
html[dir="rtl"] #tblTbodyPkgSales th,
html[dir="rtl"] #tblTbodyPkgSales td,
html[dir="rtl"] #tblTbodyData_PkgSales th,
html[dir="rtl"] #tblTbodyData_PkgSales td {
  text-align: right !important;
}

/* Table cells with specific classes */
html[dir="rtl"] ._2qQKxu,
html[dir="rtl"] ._4j7uOc,
html[dir="rtl"] .footer-td {
  text-align: right !important;
}

/* Header cell flex container - align to right in RTL */
html[dir="rtl"] ._11CReE ._1b09d9,
html[dir="rtl"] ._11CReE ._1FniE3,
html[dir="rtl"] ._11CReE ._39KpJm {
  text-align: right !important;
}

/* Reverse flex direction in header cells for RTL */
html[dir="rtl"] ._11CReE > div {
  flex-direction: row-reverse !important;
}

/* Numeric columns - keep left-aligned for better readability */
html[dir="rtl"] ._2qQKxu._1iwiKG {
  text-align: left !important;
  direction: ltr !important;
}

/* ========================================
   PACKAGE HOME PAGE - DROPDOWN MENUS RTL
   ======================================== */

/* In RTL mode, flip the dropdown positioning */
/* Dropdowns that normally open on the right should open on the left in RTL */
html[dir="rtl"] .popupRightToLeft {
  right: auto !important;
  left: 0px !important;
}

/* Dropdowns that normally open on the left (dropdown-caret only) should open on the right in RTL */
html[dir="rtl"]
  .dropdown-menu.filterpopup.dropdown-caret:not(.dropdown-caret-right) {
  right: 0px !important;
  left: auto !important;
  transform: translateY(23px) !important;
}

/* Dropdown caret positioning for RTL */
/* Caret on right side - move to left in RTL */
html[dir="rtl"] .dropdown-menu.dropdown-caret-right:before {
  left: 9px !important;
  right: auto !important;
}

html[dir="rtl"] .dropdown-menu.dropdown-caret-right:after {
  left: 10px !important;
  right: auto !important;
}

/* Regular dropdown caret - move to right in RTL */
html[dir="rtl"] .dropdown-menu.dropdown-caret:before {
  left: auto !important;
  right: 9px !important;
}

html[dir="rtl"] .dropdown-menu.dropdown-caret:after {
  left: auto !important;
  right: 10px !important;
}

/* Filter popup dropdowns in PackageHome */
html[dir="rtl"] .filterpopup.popupRightToLeft {
  right: auto !important;
  left: 0px !important;
}

/* Dropdown menu items alignment in RTL */
html[dir="rtl"] .dropdown-menu {
  text-align: right !important;
}

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

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

/* ========================================
   MULTISELECT FILTER RTL STYLES
   Fix search and clear icon positioning
   ======================================== */

/* Multiselect filter container */
html[dir="rtl"] .multiselect-filter .input-group {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* Search input field */
html[dir="rtl"] .multiselect-filter .multiselect-search {
  padding-right: 35px !important;
  /* Space for search icon on right */
  padding-left: 45px !important;
  /* Space for clear button on left */
  flex: 1 !important;
}

/* Search icon - position on right side */
html[dir="rtl"] .multiselect-filter .icon-search4 {
  position: absolute !important;
  right: 10px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  pointer-events: none !important;
  color: #999 !important;
}

html[dir="rtl"] #StoreModalForNew .multiselect-filter .icon-search4 {
  position: absolute !important;
  right: 10px !important;
  left: auto !important;
  top: 50% !important;
  transform: none !important;
}

/* Clear button - position on far left */
html[dir="rtl"] .multiselect-filter .input-group-append {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  z-index: 3 !important;
}

/* Clear button styling */
html[dir="rtl"] .multiselect-filter .multiselect-clear-filter {
  margin: 0 !important;
  height: 100% !important;
  border-radius: 4px 0 0 4px !important;
  border-right: 1px solid #ddd !important;
  border-left: 0 !important;
}

html[dir="rtl"] ._2P5TQK._1qADt0 .LnBSH4 {
  margin: 0 16px 0 0 !important;
}

html[dir="rtl"] .button-margin-left-20 {
  margin-right: 20px !important;
  margin-left: 0px !important;
}

html[dir="rtl"] #divUserInfo .multiselect-item .form-check-label {
  text-align: left !important;
}

html[dir="rtl"] #divUserInfo .multiselect-item input[type="checkbox"],
html[dir="rtl"]
  #divUserInfo
  .multiselect-item
  input[type="checkbox"]
  ~ .form-check-control-indicator {
  left: auto !important;
  right: 1rem !important;
}

/* Multiselect dropdown toggle button - RTL support */
html[dir="rtl"] .multiselect.dropdown-toggle {
  text-align: center !important;
  padding-right: 12px !important;
  padding-left: 30px !important;
}

html[dir="rtl"] .multiselect {
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

html[dir="rtl"] .multiselect.dropdown-toggle::after {
  position: absolute !important;
  left: 12px !important;
  right: auto !important;
  top: 50% !important;
  margin-top: 0px !important;
  transform: translateY(-50%) !important;
}

html[dir="rtl"] .multiselect.dropdown-toggle .multiselect-selected-text {
  text-align: center !important;
  display: inline-block !important;
}

/* ========================================
   ACE FILE INPUT - RTL SUPPORT
   ======================================== */

/* Reverse the direction of the file input container */
html[dir="rtl"] .ace-file-input .ace-file-container {
  direction: rtl !important;
  text-align: right !important;
}

/* Move the "Choose file" button (pseudo-element) to left side in RTL */
html[dir="rtl"] .ace-file-input .ace-file-container:before {
  right: auto !important;
  left: 0px !important;
  border-width: 2px 4px 2px 2px !important;
}

/* Position icon (ace-icon) on the right side for RTL */
html[dir="rtl"] .ace-file-input .ace-file-container .ace-icon {
  left: auto !important;
  right: 0px !important;
}

/* Adjust file name text padding for RTL (swap left/right padding) */
html[dir="rtl"] .ace-file-input .ace-file-container .ace-file-name {
  text-align: right !important;
  direction: rtl !important;
  padding-left: 0 !important;
  padding-right: 30px !important;
}

/* Position remove button on the left side for RTL */
html[dir="rtl"] .ace-file-input .remove {
  right: auto !important;
  left: -8px !important;
}

/* Adjust selected state positioning for RTL */
html[dir="rtl"] .ace-file-input .ace-file-container.selected {
  right: 0 !important;
  left: 16px !important;
}

/* ========================================
   INVOICE NUMBER - RTL SUPPORT
   ======================================== */

/* Keep invoice # symbol on the left side even in RTL mode */
.invoice-number-container {
  display: inline-flex;
  align-items: center;
}

html[dir="rtl"] .invoice-number-container {
  direction: ltr !important;
  justify-content: flex-start;
}

html[dir="rtl"] .invoice-hash {
  order: -1;
  margin-right: 0;
  margin-left: 0;
}

/* ========================================
   TIME AND DATE FORMATTING - RTL SUPPORT
   ======================================== */

/* Keep time values in LTR format even in RTL mode */
html[dir="rtl"] .ltr-time {
  direction: ltr !important;
  display: inline-block;
  unicode-bidi: embed;
}

/* ========================================
   MODAL CLOSE BUTTON - RTL SUPPORT
   ======================================== */

/* Position close button on the left side for RTL */
html[dir="rtl"] .modal .close,
html[dir="rtl"] .panel-heading .close {
  left: 10px !important;
  right: auto !important;
  float: left !important;
}

/* Checkbox positioning for time slots in RTL - checkbox appears AFTER text on the right, using real checkbox instead of custom FontAwesome one */
html[dir="rtl"] #divPickupSlot li,
html[dir="rtl"] #divDropOffSlot li {
  text-align: right !important;
  list-style: none !important;
}

html[dir="rtl"] #divPickupSlot label,
html[dir="rtl"] #divDropOffSlot label {
  display: inline-block !important;
  width: 100% !important;
  text-align: right !important;
}

html[dir="rtl"] #divPickupSlot .label-text,
html[dir="rtl"] #divDropOffSlot .label-text {
  direction: ltr !important;
  unicode-bidi: embed !important;
  display: inline !important;
}

/* Show real checkbox in RTL mode and position on right */
html[dir="rtl"] #divPickupSlot input[type="checkbox"],
html[dir="rtl"] #divDropOffSlot input[type="checkbox"] {
  display: block !important;
  direction: ltr !important;
  float: right !important;
  margin-left: 8px !important;
  margin-right: 0 !important;
}

/* Hide custom FontAwesome checkbox in RTL - use real checkbox instead */
html[dir="rtl"] #divPickupSlot input[type="checkbox"] + .label-text:before,
html[dir="rtl"] #divDropOffSlot input[type="checkbox"] + .label-text:before {
  display: none !important;
}

/* Force mobile number to display LTR regardless of RTL mode */
html[dir="rtl"] #lblMobile {
  direction: ltr !important;
  unicode-bidi: embed !important;
  display: inline-block !important;
}

/* Force time slots to display LTR regardless of RTL mode */
html[dir="rtl"] span[style*="background-color:#677894"][style*="border-radius:25px"] {
  direction: ltr !important;
  unicode-bidi: embed !important;
  display: inline-block !important;
}

/* Reverse button order in button groups for RTL mode */
html[dir="rtl"] .btn-group {
  display: inline-flex !important;
  flex-direction: row-reverse !important;
  float: right !important;
  position: relative !important;
}

html[dir="rtl"] .btn-group > .btn {
  float: none !important;
  flex-shrink: 0 !important;
}

/* Reverse individual button order using CSS order */
html[dir="rtl"] .btn-group > #today {
  order: 3 !important;
}

html[dir="rtl"] .btn-group > #tomorrow {
  order: 2 !important;
}

html[dir="rtl"] .btn-group > #later {
  order: 1 !important;
}

/* Fix picker/datepicker positioning in RTL mode */
html[dir="rtl"] #hid {
  clear: both !important;
}

html[dir="rtl"] #GarmentCategoryDiv #divPackageData .table td, 
html[dir="rtl"] #GarmentCategoryDiv #divPackageData .table th {
    vertical-align: middle !important;
}

fieldset#divProcessGroup {
  padding: 0px !important;
}

fieldset#divProcessGroup #divChallan {
  margin: 0px !important;
}

html[dir="rtl"] #btnCloseServiceWorkflow {
  float: left !important;
}

/* ========================================
   PackageCreate Page - RTL Overrides
   Scoped to #pkgCreateMain container
   ======================================== */

/* --- Padding-left inline styles: flip to padding-right --- */
html[dir="rtl"] #pkgCreateMain #home .col-sm-12[style*="padding-left"],
html[dir="rtl"] #pkgCreateMain #home .col-md-5[style*="padding-left"],
html[dir="rtl"] #pkgCreateMain #Service .col-sm-4[style*="padding-left"],
html[dir="rtl"] #pkgCreateMain #Service .col-sm-12[style*="padding-left"],
html[dir="rtl"] #pkgCreateMain #Garments .col-sm-4[style*="padding-left"],
html[dir="rtl"] #pkgCreateMain #divServiceSection .form-check[style*="padding-left"],
html[dir="rtl"] #pkgCreateMain #divServiceSection .form-group[style*="padding-left"],
html[dir="rtl"] #pkgCreateMain #divServiceSection .row-fluid[style*="padding-left"],
html[dir="rtl"] #pkgCreateMain #divServiceSection [class*="col-sm"][style*="padding-left"],
html[dir="rtl"] #pkgCreateMain #divValidity .col-sm-4[style*="padding-left"],
html[dir="rtl"] #pkgCreateMain #divMinOrder .col-sm-4[style*="padding-left"],
html[dir="rtl"] #pkgCreateMain #divFrom[style*="padding-left"] {
  padding-left: inherit !important;
  padding-right: 0% !important;
}

/* #divServiceSection itself has padding-left: 13px */
html[dir="rtl"] #pkgCreateMain #divServiceSection[style*="padding-left"] {
  padding-left: 0 !important;
  padding-right: 13px !important;
}

/* --- Float-left inline styles: flip to float-right --- */
html[dir="rtl"] #pkgCreateMain #divValidity .row-fluid[style*="float: left"],
html[dir="rtl"] #pkgCreateMain #divMinOrder .row-fluid[style*="float: left"],
html[dir="rtl"] #pkgCreateMain #Service .col-sm-12[style*="float: left"],
html[dir="rtl"] #pkgCreateMain #Service .form-group[style*="float: left"],
html[dir="rtl"] #pkgCreateMain #Garments .col-sm-12[style*="float: left"],
html[dir="rtl"] #pkgCreateMain #divLmtRadio[style*="float: left"] {
  float: right !important;
}

/* --- Margin-left inline styles on labels: flip to margin-right --- */
html[dir="rtl"] #pkgCreateMain #Service label[style*="margin-left: 46px"],
html[dir="rtl"] #pkgCreateMain #Service label[style*="margin-left: 42px"],
html[dir="rtl"] #pkgCreateMain #Garments label[style*="margin-left: 46px"],
html[dir="rtl"] #pkgCreateMain #Garments label[style*="margin-left: 42px"],
html[dir="rtl"] #pkgCreateMain label[style*="margin-left: 46px"],
html[dir="rtl"] #pkgCreateMain label[style*="margin-left: 42px"] {
  margin-left: 0 !important;
  margin-right: 46px !important;
}

/* Store header form margin-left: 47px */
html[dir="rtl"] #pkgCreateMain .form-inline[style*="margin-left: 47px"] {
  margin-left: 0 !important;
}

/* spnRemoveIcon margin-left */
html[dir="rtl"] #pkgCreateMain #spnRemoveIcon[style*="margin-left"] {
  margin-left: 0 !important;
  margin-right: 47px !important;
}

/* --- Custom checkbox/radio containers: flip margin-left to margin-right --- */
html[dir="rtl"] #pkgCreateMain .custom-control.custom-checkbox[style*="margin-left: 15px"],
html[dir="rtl"] #pkgCreateMain .custom-control.custom-checkbox[style*="margin-left: 12px"] {
  margin-left: 0 !important;
  margin-right: 15px !important;
}

html[dir="rtl"] #pkgCreateMain .custom-control.custom-radio[style*="margin-left"] {
  margin-left: 0 !important;
  margin-right: 15px !important;
}

/* --- Custom control: position checkbox/radio on right side for RTL --- */
html[dir="rtl"] #pkgCreateMain .custom-control {
  padding-left: 0 !important;
  padding-right: 1.5rem !important;
}

html[dir="rtl"] #pkgCreateMain .custom-control-input {
  right: 0;
  left: auto;
}

html[dir="rtl"] #pkgCreateMain .custom-control-label::before,
html[dir="rtl"] #pkgCreateMain .custom-control-label::after {
  left: auto !important;
  right: -1.5rem !important;
}

/* Custom control labels with inline margin-left */
html[dir="rtl"] #pkgCreateMain .custom-control-label[style*="margin-left"] {
  margin-left: 0 !important;
  margin-right: 10px !important;
}

/* --- Switch toggle (float: right): flip to float-left --- */
html[dir="rtl"] #pkgCreateMain label.switch[style*="float: right"] {
  float: left !important;
}

/* --- Form group labels: ensure right alignment --- */
html[dir="rtl"] #pkgCreateMain #home label,
html[dir="rtl"] #pkgCreateMain #Service label,
html[dir="rtl"] #pkgCreateMain #Garments label,
html[dir="rtl"] #pkgCreateMain #Store label,
html[dir="rtl"] #pkgCreateMain #Customer label,
html[dir="rtl"] #pkgCreateMain #Summary label {
  text-align: right !important;
}

/* Keep text-center spans centered (info cards) */
html[dir="rtl"] #pkgCreateMain .text-center .roleContent,
html[dir="rtl"] #pkgCreateMain .text-center .card-3 {
  text-align: center !important;
}

/* --- Input group addon (asterisk *) --- */
html[dir="rtl"] #pkgCreateMain .input-group .input-group-addon.redColor.Req-margin {
  order: -1;
}

/* --- Garments tab: Select garments link alignment --- */
html[dir="rtl"] #pkgCreateMain #divSelGarment {
  text-align: right !important;
}

/* --- From/To date fields column with float: right --- */
html[dir="rtl"] #pkgCreateMain .form-group[style*="float: right"] {
  float: left !important;
}

/* --- Nav tabs in PackageCreate (Laundry/Dry Cleaning) --- */
html[dir="rtl"] #pkgCreateMain #ServiceList .nav-tabs > li {
  float: right !important;
}

/* --- Customer tab radio buttons alignment --- */
html[dir="rtl"] #pkgCreateMain .gigs-fltr-add {
  text-align: right !important;
}

/* --- Summer-cols / Reminder notify alignment --- */
html[dir="rtl"] #pkgCreateMain .summer-cols .title,
html[dir="rtl"] #pkgCreateMain .filter-main .title,
html[dir="rtl"] #pkgCreateMain .filter-main .sm-title {
  text-align: right !important;
}

/* ========================================
   packageStyles.css RTL Overrides
   Scoped to #pkgCreateMain container
   ======================================== */

/* custom-control-label ::before/::after margin-left → margin-right */
html[dir="rtl"] #pkgCreateMain .custom-control-label::before,
html[dir="rtl"] #pkgCreateMain .custom-control-label::after {
  margin-left: 0 !important;
  margin-right: -1rem !important;
}

/* Vertical divider line - flip to right */
html[dir="rtl"] #pkgCreateMain .vl {
  border-left: 0 !important;
  border-right: 1px solid #e1e5e9 !important;
  left: auto !important;
  right: 50% !important;
  margin-left: 0 !important;
  margin-right: -3px !important;
}

/* Nav tabs li margin-right → margin-left */
html[dir="rtl"] #pkgCreateMain .card-tab-main .nav-tabs li {
  margin-right: 0 !important;
  margin-left: 25px !important;
}

/* Date input-group-addon border */
html[dir="rtl"] #pkgCreateMain .card-tab-main .input-group.date .input-group-addon {
  border-left: 1px solid #e1e5e9 !important;
  border-right: none !important;
}
html[dir="rtl"] #pkgCreateMain .card-tab-main .input-group.date input {
  border-left: none !important;
  border-right: 1px solid #e1e5e9 !important;
}

/* Select dropdown arrow position - flip to left side */
html[dir="rtl"] #pkgCreateMain .card-tab-main .custom-select.custom-select-lg {
  background-position: 8% 50% !important;
  padding-right: 12px !important;
  padding-left: 30px !important;
}

/* Table select dropdown arrow - flip to left */
html[dir="rtl"] #pkgCreateMain .card-tab-main .tab-pane table tr td select {
  background-position: 8% 50% !important;
  padding-right: 12px !important;
  padding-left: 30px !important;
}

/* Table td padding-right → padding-left */
html[dir="rtl"] #pkgCreateMain .card-tab-main .tab-pane table tr td {
  padding-left: 25px !important;
}
html[dir="rtl"] #pkgCreateMain .card-tab-main .tab-pane table tr td:first-child {
  padding-left: 0 !important;
}

/* Store form-check label margin-left → margin-right */
html[dir="rtl"] #pkgCreateMain .card-tab-main .store-main-content .form-check .custom-control-label {
  margin-left: 0 !important;
  margin-right: 10px !important;
}

/* Search form icon & padding */
html[dir="rtl"] #pkgCreateMain .card-tab-main .store-main-content .search-form input {
  background-position: 98% 50% !important;
  padding-left: 15px !important;
  padding-right: 40px !important;
}

/* Store list checkbox position left → right */
html[dir="rtl"] #pkgCreateMain .card-tab-main .store-list .store-list-cols .custom-checkbox {
  left: auto !important;
  right: 30px !important;
  transform: translate(50%, -50%) !important;
}

/* Reminder notify margin-left → margin-right */
html[dir="rtl"] #pkgCreateMain .reminder-notify {
  margin-left: 0 !important;
  margin-right: 38px !important;
}

/* Slider toggle transform - flip direction for RTL */
html[dir="rtl"] #pkgCreateMain input:checked+.slider:before {
  -webkit-transform: translateX(-19px) !important;
  -ms-transform: translateX(-19px) !important;
  transform: translateX(-19px) !important;
}
html[dir="rtl"] #pkgCreateMain .slider:before {
  left: auto !important;
  right: 3px !important;
}

/* Summary section margin-right → margin-left */
html[dir="rtl"] #pkgCreateMain .summary-main {
  margin-right: 0 !important;
  margin-left: 70px !important;
}

/* Summary text-div alignment */
html[dir="rtl"] #pkgCreateMain .summary-main .summary-cols .sm-title span {
  text-align: left !important;
}

/* Upload button position */
html[dir="rtl"] #pkgCreateMain .card-tab-main .cl-promonatiol label.upload-btn span {
  right: 0 !important;
  left: auto !important;
}

/* Tab content inputs - right-aligned text for RTL */
html[dir="rtl"] #pkgCreateMain .card-tab-main .tab-content input,
html[dir="rtl"] #pkgCreateMain .card-tab-main .tab-content textarea {
  text-align: right !important;
}

/* Input groups must use direction: rtl to flip addon and input */
html[dir="rtl"] #pkgCreateMain .card-tab-main .input-group {
  direction: rtl !important;
}

/* Ensure .form-group and column containers inherit RTL text alignment */
html[dir="rtl"] #pkgCreateMain .card-tab-main .tab-content .form-group,
html[dir="rtl"] #pkgCreateMain .card-tab-main .tab-content [class*="col-sm"],
html[dir="rtl"] #pkgCreateMain .card-tab-main .tab-content .row-fluid {
  text-align: right !important;
}

/* Toast notification position - mirror to top-left in RTL */
html[dir="rtl"] #toast-container.toast-top-right {
  right: auto !important;
  left: 12px !important;
}

html[dir="rtl"] .text-left [style*="float: left"] {
  float: right !important;
}

html[dir="rtl"] .text-left [style*="float: right"] {
  float: left !important;
}

html[dir="rtl"] .daterangepicker .daterangepicker_input i {
  left: .75rem !important;
  right: auto !important;
}

html[dir="rtl"] .basic-search .icon-wrap {
  left: auto !important;
  right: 15px !important;
}

html[dir="rtl"] #divUpSellCustomerSerach.basic-search .input-field .icon-wrap {
  left: auto !important;
  right: 15px !important;
}

html[dir="rtl"] #divUpSellCustomerSerach.basic-search .input-field .icon-wrap img[style*="margin-left"] {
  margin-left: 0 !important;
}

html[dir="rtl"] #divSelStoreDetails,
html[dir="rtl"] #divSelStoreDetails .div-margin,
html[dir="rtl"] #divSelStoreDetails .div-margin div {
  text-align: center !important;
}

html[dir="rtl"] #divCustomerSerach.basic-search .input-field .icon-wrap {
  left: auto !important;
  right: 15px !important;
}

html[dir="rtl"] .SearchInput {
  padding-left: 10px !important;
  padding-right: 40px !important;
}

html[dir="rtl"] #spnShowSMSInfo span[style*="float:right"], 
html[dir="rtl"] #spnShowSMSInfo a[style*="float:right"] {
  float: left !important;
}

html[dir="rtl"] .minusProductDetailQty {
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

html[dir="rtl"] .plusProductDetailQty {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}

html[dir="rtl"] #spnRemoveIcon[style*="margin-left: 17px"] {
  margin-left: 0px !important;
  margin-right: 17px !important;
}

html[dir="rtl"] .boxsize2[style*="margin-right: 5px;"] {
  margin-right: 0px !important;
  margin-left: 5px !important;
}

.boxsize2 {
  vertical-align: middle !important;
}

html[dir="rtl"] #divLegand li[style*="margin-right:10px"] {
  text-align: right !important;
}

#divLegead li[style*="margin-right:10px"] {
  vertical-align: middle !important;
}

html[dir="rtl"] #divTopupService #spnTopupName {
  text-align: right !important;
}

html[dir="rtl"] .LaundryBooking .padding4 {
  padding-left: 4px !important;
  padding-right: 0px !important;
}

html[dir="rtl"] #divGarments ul li label > span.Inc {
  left: 1px !important;
  right: auto !important;
}