/* ==========================================================================
   King Koil KSA — main-rtl.css (mirrors for the Arabic layout)
   Loaded automatically after main.css when the site language is RTL.
   Layout already uses logical properties; this file only flips what CSS
   cannot mirror on its own: arrows, offsets of hover shadows, transforms.
   ========================================================================== */

/* Directional icons (arrows, slider chevrons) point the other way */
.kk-icon--dir {
	transform: scaleX(-1);
}

.kk-card:hover .kk-card__more .kk-icon--dir,
.kk-store__link:hover .kk-icon--dir {
	transform: translateX(-3px) scaleX(-1);
}

.kk-menu a::after {
	transform-origin: right center;
}

/* Hover shadows fall towards the reading direction */
.kk-btn--primary:hover,
.kk-btn--outline:hover {
	box-shadow: -5px 5px 0 rgba(16, 71, 119, 0.25);
}

.kk-hero .kk-btn--primary:hover,
.kk-hero .kk-btn--outline:hover,
.kk-btn--light:hover {
	box-shadow: -5px 5px 0 rgba(255, 255, 255, 0.3);
}

.kk-chip:hover {
	box-shadow: -3px 3px 0 rgba(16, 71, 119, 0.18);
}

.kk-field__input:focus {
	box-shadow: -3px 3px 0 rgba(16, 71, 119, 0.18);
}

.kk-card:hover {
	transform: translateY(-4px);
}

.kk-hero__text {
	max-width: 33ch;
}

/* Phone and email inputs stay left-to-right but align with the Arabic labels */
.kk-field__input--ltr {
	text-align: right;
}