/*
 * Right-to-left corrections for the Arabic site.
 *
 * Loaded on Arabic pages only (inc/functions/rtl.php), after the theme and our
 * own stylesheets. Every rule is scoped to html[dir="rtl"] as a second guard so
 * nothing here can reach an English page.
 *
 * What is NOT here, because it is handled elsewhere:
 * - Alignment and spacing saved in Elementor pages: mirrored automatically into
 *   each page's CSS file by cabina_rtl_mirror_elementor_css() in rtl.php.
 * - text-align in our own stylesheets: written as "start", which already
 *   follows the direction.
 */

/* ---------------------------------------------------------------------------
 * Arabic is a joined script. Any letter-spacing pulls the letters of a word
 * apart and breaks the joins, so it is removed everywhere. Headings and buttons
 * set it for English capitals, where it is a style choice.
 * ------------------------------------------------------------------------ */
html[dir="rtl"] body,
html[dir="rtl"] body *,
html[dir="rtl"] body *::before,
html[dir="rtl"] body *::after {
	letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------ */

/* The item count sits on the bag's outer corner, which is now the left one. */
html[dir="rtl"] .header_7 .header7-actions .cart-num {
	right: auto;
	left: -8px;
}

/* Top bar social icons: the 12px between them is on the end side, now the
   left, so the first icon sits on the right gutter. */
html[dir="rtl"] .header_7 .nav-social li {
	margin-right: 0;
	margin-left: 12px;
}

/* Account and bag icons: their spacing is on the end side, now the left. */
html[dir="rtl"] .header_7 .user-guest i,
html[dir="rtl"] .header_7 .icon-search i,
html[dir="rtl"] .header_7 .icon_mini-cart i {
	margin-right: 0;
	margin-left: 10px;
}

/* The language switcher's gap from the phone number goes on its right, and
   the hairline between English and العربية moves with it. */
html[dir="rtl"] .header_7 .header7-contact .cabina-lang-switch {
	margin-left: 0;
	margin-right: 22px;
}

html[dir="rtl"] .header_7 .header7-contact .cabina-lang-switch .cabina-lang + .cabina-lang {
	border-left: 0;
	padding-left: 0;
	border-right: 1px solid rgba(255, 255, 255, 0.35);
	padding-right: 10px;
}

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

@media (min-width: 992px) {
	html[dir="rtl"] .header_7 .header7-actions .dropdown-menu {
		right: auto;
		left: 0;
	}
}

/* Breadcrumb: Bootstrap's list-inline -5px nudge moves to the start side, and
   the chevron separator goes on the left and points left. */
html[dir="rtl"] .breadcrumbs.list-inline {
	margin-left: 0;
	margin-right: -5px;
}

html[dir="rtl"] .breadcrumbs li {
	padding-right: 0;
	padding-left: 13px;
	margin-right: 0;
	margin-left: 8px;
}

html[dir="rtl"] .breadcrumbs li::after {
	right: auto;
	left: 0;
	content: "\f104";
}

/* ---------------------------------------------------------------------------
 * Home slider (Smart Slider 3)
 *
 * On an RTL page the slider's script swaps its own layout variables
 * (--ss-fs flex-start <-> flex-end, --ss-r row <-> row-reverse) inline on the
 * slider element - and the page's direction then mirrors the flex layout a
 * second time, so the swaps cancel out: the text block moved right but the
 * BUY NOW button went back to the left edge of it. Putting the variables back
 * leaves the mirroring to the page direction alone. !important is what lets a
 * stylesheet beat the inline values.
 *
 * Each text layer is also saved with text-align:left.
 * ------------------------------------------------------------------------ */
html[dir="rtl"] .n2-ss-slider {
	--ss-fs: flex-start !important;
	--ss-fe: flex-end !important;
	--ss-r: row !important;
	--ss-rr: row-reverse !important;
}

html[dir="rtl"] .n2-ss-slider [class*="-inner"] {
	text-align: right !important;
}

/* ---------------------------------------------------------------------------
 * Home: the three app cards under the slider
 * ------------------------------------------------------------------------ */
html[dir="rtl"] .custom-card-content {
	padding: 10px 12px 12px 44px;
}

html[dir="rtl"] .custom-card-arrow {
	right: auto;
	left: 16px;
	transform: translateY(-50%) scaleX(-1);
}

/* MADE IN QATAR: the space between text and video (typography.css) is on the
   side facing the video, which is now the left. */
@media (min-width: 992px) {
	html[dir="rtl"] .home .elementor-element-16577a1 {
		padding-right: 0;
		padding-left: 40px;
	}
}

/* ---------------------------------------------------------------------------
 * Home: wardrobe drawing with labelled points. The drawing itself is not
 * mirrored, so the labels stay where their points are; only the text inside
 * each label follows the reading direction.
 * ------------------------------------------------------------------------ */
html[dir="rtl"] .modus-annotated-image__copy {
	text-align: right !important;
}

/* ---------------------------------------------------------------------------
 * Footer newsletter: the Subscribe button sits inside the email field, at the
 * end the text runs towards - the left in Arabic.
 * ------------------------------------------------------------------------ */
html[dir="rtl"] .form-sub .wpcf7-submit {
	right: auto !important;
	left: 1px !important;
}

html[dir="rtl"] .form-sub input[type="email"] {
	padding-right: 14px !important;
	padding-left: 112px !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

/* Back-to-top button moves to the left corner. */
html[dir="rtl"] .scroll-to-top {
	right: auto;
	left: 25px;
}

/* ---------------------------------------------------------------------------
 * About Us: the quote's rule is on its start edge. The rule's width comes from
 * Elementor and is mirrored with the page; this carries about-us.css's colour
 * and inset across.
 * ------------------------------------------------------------------------ */
html[dir="rtl"] .page-id-5063 .elementor-element-7fbfa3a > .elementor-widget-container {
	border-right-color: #595959;
	padding-left: 1rem;
	padding-right: 1.25rem;
}

@media (max-width: 767px) {
	html[dir="rtl"] .page-id-5063 .elementor-element-7fbfa3a > .elementor-widget-container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* ---------------------------------------------------------------------------
 * Tables and WooCommerce headings. The theme and Bootstrap pin th/td and every
 * WooCommerce h2 to the left.
 * ------------------------------------------------------------------------ */
html[dir="rtl"] th,
html[dir="rtl"] td,
html[dir="rtl"] .woocommerce h2 {
	text-align: right;
}

html[dir="rtl"] .woocommerce table.shop_table th.product-name {
	text-align: right;
}

/* ---------------------------------------------------------------------------
 * Checkout, order received, My Account
 * ------------------------------------------------------------------------ */

/*
 * Two-column blocks (billing | your order, and the address pair on order
 * received and My Account): the first column goes on the right.
 * WooCommerce's own RTL layout file already floats col-1 right, but it also
 * carries a ".rtl .col2-set .col-1" rule written for the LTR file, which after
 * its automatic flip floats col-1 left again - and the body here has .rtl.
 */
html[dir="rtl"] body.rtl .woocommerce .col2-set .col-1,
html[dir="rtl"] body.rtl .woocommerce-page .col2-set .col-1 {
	float: right;
}

html[dir="rtl"] body.rtl .woocommerce .col2-set .col-2,
html[dir="rtl"] body.rtl .woocommerce-page .col2-set .col-2 {
	float: left;
}

/* Order summary: labels and titles on the right, amounts on the left. */
html[dir="rtl"] .cabina-review-order th,
html[dir="rtl"] .cabina-review-order td {
	text-align: right !important;
}

html[dir="rtl"] .cabina-review-order th.product-total,
html[dir="rtl"] .cabina-review-order td.product-total,
html[dir="rtl"] .cabina-review-order tfoot td {
	text-align: left !important;
}

html[dir="rtl"] .cabina-review-order tfoot .cabina-payment-terms-row td {
	text-align: right !important;
}

html[dir="rtl"] .woocommerce-checkout .order_review #payment #place_order {
	float: right;
}

html[dir="rtl"] .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input.input-checkbox,
html[dir="rtl"] .woocommerce-checkout .woocommerce-form__input-checkbox {
	margin: 0 0 0 9px !important;
}
html[dir="rtl"] .cabina-order-note {
	border-left: 0;
	border-right: 3px solid #232427;
}

html[dir="rtl"] .cabina-browse {
	margin-left: 0;
	margin-right: 8px;
}

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

/* ---------------------------------------------------------------------------
 * Mobile (matches the breakpoints in mobile.css)
 * ------------------------------------------------------------------------ */
@media (max-width: 991px) {
	/* Header row: the actions keep their 16px clear of the menu button, which
	   is now to their left. */
	html[dir="rtl"] .header_7 .header7-actions-col {
		padding-right: 0;
		padding-left: 16px;
	}

	html[dir="rtl"] .header_7 .header7-actions i {
		margin-left: 0 !important;
	}

	html[dir="rtl"] .header_7 .header7-actions .cart-num {
		right: auto;
		left: -7px;
	}

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

	html[dir="rtl"] .header_7 .header7-contact .cabina-lang-switch {
		margin-right: 12px;
	}

	/* Top bar: the 15px gutter belongs on each column's outer edge. */
	html[dir="rtl"] .header7-top-row .header7-social-col {
		padding-left: 0 !important;
		padding-right: 15px !important;
	}

	html[dir="rtl"] .header7-top-row .header7-contact-col {
		padding-right: 0 !important;
		padding-left: 15px !important;
	}

	html[dir="rtl"] .bread-crumb ul.breadcrumbs.list-inline {
		margin-right: 0 !important;
	}

	/* Footer logo sits on the start gutter. */
	html[dir="rtl"] .thim-ekit__footer .thim-ekit-site-logo,
	html[dir="rtl"] .thim-ekit__footer .elementor-widget__width-initial {
		margin-right: 0 !important;
		margin-left: auto !important;
	}

	html[dir="rtl"] .thim-ekit__footer .thim-ekit-site-logo a {
		padding-right: 0 !important;
	}

	html[dir="rtl"] table.cabina-cart-table.shop_table_responsive td.cabina-cart-actions a {
		margin-right: 0 !important;
	}

	/* mobile.css cancels the wardrobe button's left padding; the Elementor
	   mirror moved that padding to the right. */
	html[dir="rtl"] .home .elementor-element-cabwrdb1 > .elementor-widget-container {
		padding-right: 0 !important;
	}
}