/* ============================================================================
   RTL.CSS - the right-to-left mirror of style.css, for Arabic only.

   Loaded by templates/templateTop.php ONLY when the session language is 'ar',
   after style.css, so it cannot affect any other language: the file is not even
   downloaded. Every selector is additionally scoped to [dir="rtl"], which
   templateTop puts on <html> for the same language - belt and braces, and it
   keeps the per-page <main dir="rtl"> opt-ins working unchanged.

   GENERATED, then hand-extended at the end. Each rule here mirrors one rule in
   style.css, in the same source order and inside the same media context - the
   order matters, because these selectors outrank the originals and would
   otherwise leak across breakpoints.

   To regenerate after style.css changes, re-run the generator and re-apply the
   hand-written section at the bottom. Rules deliberately NOT mirrored:
     - #stud-cert-logo-modal .stud-cert-logo-mockup-logo
       (left:50% with translateX(-50%) - mirroring would un-centre it)

   What is NOT in this file, because it is handled elsewhere:
     - the grid, spacing utilities and components: Bootstrap 5 ships its own RTL
       build, and templateTop loads bootstrap.rtl.min.css for 'ar'
     - the player: it draws into a canvas and is a separate project

   Created 2026-10-08.
   ========================================================================== */
[dir="rtl"] #message {
	right: 0;
	left: auto;
	padding: 5px 15px 0px 20px;
}
[dir="rtl"] #close-message {
	left: 10px;
	right: auto;
}
[dir="rtl"] #close-message .close-btn {
	left: 0 !important;
	right: auto !important;
}
[dir="rtl"] #logo svg {
	float: right;
}
[dir="rtl"] #member-logo {
	padding-right: 8px !important;
	padding-left: 0 !important;
}
[dir="rtl"] nav .logo {
	float: right;
}
[dir="rtl"] nav .menu-icon {
	float: left;
}
@media (min-width: 1250px) {
	[dir="rtl"] .header-nav ul {
		padding: 8px 10px 0 0;
	}
	[dir="rtl"] .header-nav li {
		margin-left: 30px;
		margin-right: 0;
		float: left;
	}
	[dir="rtl"] #index .header-nav li:first-of-type {
		right: 0 !important;
		left: auto !important;
	}
	[dir="rtl"] .header-nav li:first-of-type {
		right: 30px;
		left: auto;
	}
	[dir="rtl"] #main-page .header-nav li:first-of-type {
		right: 0 !important;
		left: auto !important;
	}
	[dir="rtl"] nav .menu {
		margin-left: 40px;
		margin-right: 0;
	}
	[dir="rtl"] #main-page nav .menu {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	[dir="rtl"] .second-menu-icon {
		left: 0;
		right: auto;
	}
}

[dir="rtl"] .nav-box {
	margin-left: 5px;
	margin-right: 0;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
[dir="rtl"] #home-study-text {
	text-align: left;
}
[dir="rtl"] #home-study-text h1 {
	margin-left: 5vh;
	margin-right: 0;
}
[dir="rtl"] #chess-club-text {
	margin-right: 45%;
	margin-left: 0;
}
[dir="rtl"] .carousel-control-next {
	left: -20px !important;
	right: auto !important;
}
[dir="rtl"] .carousel-control-prev {
	right: -20px !important;
	left: auto !important;
}
[dir="rtl"] #footerNav ul li {
	margin-left: 40px;
	margin-right: 0;
}
[dir="rtl"] #footerNav ul li::after {
	left: -25px;
	right: auto;
}
[dir="rtl"] #socials {
	text-align: left;
}
[dir="rtl"] #lock, [dir="rtl"] #world, [dir="rtl"] #person, [dir="rtl"] #member, [dir="rtl"] #arrow, [dir="rtl"] #back-arrow {
	right: -3.2vh;
	left: auto;
}
[dir="rtl"] #nav-book, [dir="rtl"] #nav-horse, [dir="rtl"] #nav-head, [dir="rtl"] #nav-logic, [dir="rtl"] #nav-account, [dir="rtl"] #nav-progress, [dir="rtl"] #nav-password, [dir="rtl"] #nav-lm, [dir="rtl"] #nav-cm, [dir="rtl"] #nav-admin, [dir="rtl"] #nav-logout, [dir="rtl"] #nav-language, [dir="rtl"] #nav-unlock, [dir="rtl"] #nav-language-black, [dir="rtl"] #nav-unlock-black {
	right: -3.2vh;
	left: auto;
}
[dir="rtl"] #home-study-text h1::before {
	left: -10px;
	right: auto;
}
[dir="rtl"] #chess-club-text h1::before {
	right: 0px;
	left: auto;
}
[dir="rtl"] #home-study-text h1::after {
	left: -5vh;
	right: auto;
}
[dir="rtl"] #chess-club-text h1::after {
	left: -5vh;
	right: auto;
}
[dir="rtl"] #trial-text h1::after {
	left: -5vh;
	right: auto;
}
[dir="rtl"] .lang-bg {
	right: 0;
	left: auto;
}
[dir="rtl"] #langBox {
	right: 40%;
	left: auto;
}
[dir="rtl"] #accountBox {
	right: 40%;
	left: auto;
}
[dir="rtl"] .lang-box {
	right: -40%;
	left: auto;
}
[dir="rtl"] .close-lang {
	left: 15px;
	right: auto;
}
[dir="rtl"] .close-btn {
	left: 5px;
	right: auto;
	float: left;
}
[dir="rtl"] .close-btn2 {
	left: 0px;
	right: auto;
	float: left;
}
[dir="rtl"] .legal-tabs ul li ul {
	padding-right: 20px;
	padding-left: 0;
}
[dir="rtl"] .legal-tabs ul li button {
	text-align: right;
}
[dir="rtl"] .legal-tabcontent ul li {
	margin-right: 20px;
	margin-left: 0;
}
[dir="rtl"] .legal-tabcontent ul li::before {
	right: -20px;
	left: auto;
}
[dir="rtl"] .legal-tabs ul li ul li::before {
	right: -20px;
	left: auto;
}
@media screen and (min-width: 1601px) {
	[dir="rtl"] #nav-unlock-black {
		right: -3vh;
		left: auto;
	}
}

@media screen and (max-width: 1249px) {
	[dir="rtl"] .header-nav li {
		padding: 0 100px 0 0;
	}
	[dir="rtl"] #lock, [dir="rtl"] #world, [dir="rtl"] #person, [dir="rtl"] #member, [dir="rtl"] #arrow, [dir="rtl"] #back-arrow, [dir="rtl"] #nav-book, [dir="rtl"] #nav-horse, [dir="rtl"] #nav-head, [dir="rtl"] #nav-logic, [dir="rtl"] #nav-account, [dir="rtl"] #nav-progress, [dir="rtl"] #nav-password, [dir="rtl"] #nav-lm, [dir="rtl"] #nav-cm, [dir="rtl"] #nav-admin, [dir="rtl"] #nav-logout, [dir="rtl"] #nav-language, [dir="rtl"] #nav-unlock, [dir="rtl"] #nav-language-black, [dir="rtl"] #nav-unlock-black {
		right: 40px;
		left: auto;
	}
}

@media screen and (max-width: 1049px) and (max-height: 800px) {
	[dir="rtl"] .carousel-inner {
		margin-right: 80px;
		margin-left: 0;
	}
	[dir="rtl"] .carousel-control-next {
		left: -20px;
		right: auto;
	}
}

@media screen and (max-width: 991px) {
	[dir="rtl"] #home-study-text {
		padding-left: 40vh;
		padding-right: 0;
	}
}

@media screen and (max-width: 910px) {
	[dir="rtl"] #chess-club-text {
		margin-right: 38%;
		margin-left: 0;
	}
}

@media screen and (max-width: 800px) {
	[dir="rtl"] #chess-club-text {
		margin-right: 15px;
		margin-left: 0;
	}
	[dir="rtl"] .carousel {
		margin-left: 20px;
		margin-right: -50px;
	}
	[dir="rtl"] .carousel-inner {
		margin-right: 100px;
		margin-left: 0;
	}
	[dir="rtl"] .carousel-control-prev {
		right: 10px !important;
		left: auto !important;
	}
	[dir="rtl"] .carousel-control-next {
		left: -50px !important;
		right: auto !important;
	}
	[dir="rtl"] #home-study-text {
		padding-left: 40px;
		padding-right: 0;
	}
	[dir="rtl"] #trial-text {
		padding-right: 0;
		padding-left: 0;
		right: 28%;
		left: auto;
	}
	[dir="rtl"] #home_study #trial-text {
		right: 11%;
		left: auto;
	}
}

@media screen and (max-width: 767px) {
	[dir="rtl"] #scroll-box {
		margin-right: 20px;
		margin-left: 0;
	}
	[dir="rtl"] #forgotten .right-login-box {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}
}

@media screen and (max-width: 601px) {
	[dir="rtl"] #home-study-text {
		padding-left: 30px;
		padding-right: 0;
	}
	[dir="rtl"] .nav-box {
		margin-left: 0;
		margin-right: 0;
	}
	[dir="rtl"] .carousel-item {
		margin-right: 10px !important;
		margin-left: 0 !important;
	}
	[dir="rtl"] .carousel-control-prev {
		right: -60px !important;
		left: auto !important;
	}
	[dir="rtl"] #scroll-box {
		margin-right: 30px !important;
		margin-left: 0 !important;
	}
	[dir="rtl"] #langBox {
		right: 40%;
		left: auto;
	}
	[dir="rtl"] #accountBox {
		right: 40%;
		left: auto;
	}
	[dir="rtl"] .lang-box {
		right: -58%;
		left: auto;
	}
	[dir="rtl"] .mobil-legal .btn-link {
		text-align: right;
	}
	[dir="rtl"] .mobil-legal .card-body {
		text-align: right;
	}
}

@media screen and (max-width: 500px) {
	[dir="rtl"] #tactic #trial-text, [dir="rtl"] #trial-text {
		right: 0% !important;
		left: auto !important;
	}
	[dir="rtl"] #home_study #trial-text {
		right: 5px;
		left: auto;
	}
	[dir="rtl"] #win-text, [dir="rtl"] #cert-text {
		right: 0 !important;
		left: auto !important;
	}
}

@media screen and (max-width: 376px) and (max-height: 668px) {
	[dir="rtl"] #chess-club-text h1::after {
		left: -5vh;
		right: auto;
	}
}

[dir="rtl"] .left-course-box {
	margin-left: 5px;
	margin-right: 0;
}
[dir="rtl"] #signUpLine, [dir="rtl"] #avaliableLine, [dir="rtl"] #lockedLine, [dir="rtl"] #progressLine, [dir="rtl"] #completedLine {
	margin-right: 80px;
	margin-left: 0;
}
[dir="rtl"] #signUpLine::before, [dir="rtl"] #avaliableLine::before, [dir="rtl"] #lockedLine::before, [dir="rtl"] #progressLine::before, [dir="rtl"] #completedLine::before {
	right: -60px;
	left: auto;
}
[dir="rtl"] .courseStatus, [dir="rtl"] .lessonStatus {
	right: 0;
	left: auto;
}
[dir="rtl"] .completedCourse, [dir="rtl"] .completedLesson, [dir="rtl"] .lockedLesson, [dir="rtl"] .freeLesson {
	right: 0;
	left: auto;
}
[dir="rtl"] .card h5 {
	text-align: right;
	padding: 10px 20px 10px 100px;
}
[dir="rtl"] .tab-open button {
	left: 10px;
	right: auto;
}
[dir="rtl"] .tab-close button {
	left: 10px;
	right: auto;
}
[dir="rtl"] .card-body {
	padding: 1.25rem 7px 6px 0 !important;
}
[dir="rtl"] .courseInfo {
	margin: 2px 0 2px 2px;
}
[dir="rtl"] .last .courseInfo:first-of-type {
	border-radius: 5px 5px 20px 5px;
}
[dir="rtl"] .last .courseInfo:last-of-type {
	border-radius: 5px 5px 5px 20px;
}
[dir="rtl"] .courseInfo:first-of-type {
	margin-right: -7px;
	margin-left: 0;
}
@media screen and (max-width: 992px) {
	[dir="rtl"] .card .tab-open button, [dir="rtl"] .card .tab-close button {
		left: 15px;
		right: auto;
	}
	[dir="rtl"] .left-contact-box {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

[dir="rtl"] .main-lesson ul {
	text-align: left;
}
[dir="rtl"] #progress-list {
	text-align: right;
}
[dir="rtl"] .statusInfo p {
	margin-left: 40px;
	margin-right: 0;
}
[dir="rtl"] .restart {
	float: left;
	text-align: left;
	padding: 10px 40px 10px 20px;
	border-radius: 5px 20px 20px 5px;
}
[dir="rtl"] .restart a::before {
	right: -35px;
	left: auto;
}
[dir="rtl"] .accept {
	border-left: 2.5px solid #ecece0;
	border-right: none;
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 0;
}
[dir="rtl"] .reject {
	border-right: 2.5px solid #ecece0;
	border-left: none;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 0;
}
[dir="rtl"] .big-number {
	margin-right: 5px;
	margin-left: 0;
}
[dir="rtl"] .tab-open button::after {
	left: -8px;
	right: auto;
}
[dir="rtl"] .tab-close button::after {
	left: -8px;
	right: auto;
}
@media screen and (min-width: 801px) {
	[dir="rtl"] .left-lesson-box {
		padding-left: 4px !important;
		padding-right: 0 !important;
	}
	[dir="rtl"] .right-lesson-box {
		padding-right: 4px !important;
		padding-left: 0 !important;
	}
}

@media screen and (max-width: 800px) {
	[dir="rtl"] .main-lesson ul {
		text-align: right;
	}
}

@media screen and (max-width: 500px) {
	[dir="rtl"] .statusInfo p {
		margin-left: 6px;
		margin-right: 0;
	}
}

[dir="rtl"] .progress-box {
	margin-left: 5px;
	margin-right: 0;
}
[dir="rtl"] .progress-box .col-lg-12:nth-child(2) {
	margin-right: 130px;
	margin-left: 0;
	text-align: right;
}
@media screen and (min-width: 1500px) {
	[dir="rtl"] .progress-box .col-lg-12:nth-child(2) {
		margin-right: 180px;
		margin-left: 0;
	}
}

[dir="rtl"] .progress-menu-box .col-12:first-of-type {
	padding-left: 2px !important;
	padding-right: 0 !important;
}
[dir="rtl"] .progress-menu-box .col-12:last-of-type {
	padding-right: 2px !important;
	padding-left: 0 !important;
}
[dir="rtl"] .progress-menu-box .col-md-3:last-of-type, [dir="rtl"] .progress-menu-box .col-lg-3:last-of-type {
	padding-left: 15px;
	padding-right: 0;
}
[dir="rtl"] .purple::after {
	left: 5px;
	right: auto;
}
[dir="rtl"] .purple h5 {
	padding: 10px 20px 10px 60px;
}
[dir="rtl"] .progress-menu-box .col-md-3 h5, [dir="rtl"] .progress-menu-box .col-lg-3 h5 {
	text-align: left;
}
[dir="rtl"] .progress-menu-box .col-md-6, [dir="rtl"] .progress-menu-box .col-lg-6 {
	padding-left: 0;
	padding-right: 0;
}
[dir="rtl"] .left-rating-header {
	margin-left: 4px;
	margin-right: 0;
}
[dir="rtl"] .right-rating-header {
	margin: 8px 4px 8px 0;
}
[dir="rtl"] .right-rating-header h1::before {
	right: -2vh;
	left: auto;
}
[dir="rtl"] #iron, [dir="rtl"] #bronze, [dir="rtl"] #silver, [dir="rtl"] #gold, [dir="rtl"] #diamond {
	margin-right: 80px;
	margin-left: 0;
}
[dir="rtl"] #iron::before, [dir="rtl"] #bronze::before, [dir="rtl"] #silver::before, [dir="rtl"] #gold::before, [dir="rtl"] #diamond::before {
	right: -60px;
	left: auto;
}
[dir="rtl"] .info-box {
	right: 0;
	left: auto;
	text-align: right;
}
[dir="rtl"] .info-box button {
	right: 0;
	left: auto;
}
[dir="rtl"] .levels, [dir="rtl"] .tactics {
	margin-right: 20px;
	margin-left: 0;
}
[dir="rtl"] .levels span, [dir="rtl"] .tactics span {
	margin-right: 5px;
	margin-left: 0;
}
[dir="rtl"] .levels tbody th, [dir="rtl"] .tactics tbody th {
	text-align: left;
}
[dir="rtl"] .percent-area {
	left: 45px;
	right: auto;
	float: left;
}
[dir="rtl"] .number {
	margin-right: 5px;
	margin-left: 0;
}
@media screen and (max-width: 992px) {
	[dir="rtl"] .card h5 {
		padding: 8px 0 8px 20px;
	}
	[dir="rtl"] .purple h5 {
		padding: 8px 10px 8px 20px;
	}
	[dir="rtl"] .card-header {
		padding-left: 50px !important;
		padding-right: 0 !important;
	}
	[dir="rtl"] .levels, [dir="rtl"] .tactics {
		margin-right: 0;
		margin-left: 0;
	}
	[dir="rtl"] .table {
		margin-right: -20px;
		margin-left: 0;
	}
	[dir="rtl"] #centralManagement .table, [dir="rtl"] #centralLicenses .table, [dir="rtl"] #manageTeacher .table {
		margin-right: -5px;
		margin-left: 0;
	}
	[dir="rtl"] #lm-stud {
		margin-right: 0;
		margin-left: 0;
	}
	[dir="rtl"] .progress-box .col-lg-12:nth-child(2) {
		margin-right: 60px;
		margin-left: 0;
	}
	[dir="rtl"] .progress-menu-box .col-12:first-of-type {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	[dir="rtl"] .progress-menu-box .col-12:last-of-type {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}
}

@media screen and (max-width: 800px) {
	[dir="rtl"] .progress-menu-box .col-md-6, [dir="rtl"] .progress-menu-box .col-lg-6 {
		padding-left: 15px;
		padding-right: 0;
	}
	[dir="rtl"] .progress-menu-box .col-md-3 h5, [dir="rtl"] .progress-menu-box .col-lg-3 h5 {
		text-align: right;
		padding: 10px 20px 10px 60px !important;
	}
	[dir="rtl"] .card-header {
		padding-left: 85px !important;
		padding-right: 0 !important;
	}
	[dir="rtl"] .progress-box .col-lg-12:nth-child(2) {
		margin-right: 0;
		margin-left: 0;
	}
}

[dir="rtl"] .left-signup-box, [dir="rtl"] .left-login-box, [dir="rtl"] .left-account-box, [dir="rtl"] .left-contact-box {
	margin-left: 5px;
	margin-right: 0;
}
[dir="rtl"] #validateCheck {
	margin-right: 10px;
	margin-left: 0;
	float: left;
}
[dir="rtl"] form label, [dir="rtl"] label {
	margin-right: 10px;
	margin-left: 0;
}
[dir="rtl"] .error, [dir="rtl"] .number-error {
	margin-left: 10px;
	margin-right: 0;
	float: right;
}
[dir="rtl"] .number-error {
	clear: right;
}
[dir="rtl"] form img {
	margin-right: 20px;
	margin-left: 0;
}
[dir="rtl"] #count-label {
	float: right;
}
[dir="rtl"] .select-selected:after {
	left: -3px;
	right: auto;
}
[dir="rtl"] .select-items {
	left: 0;
	right: -4px;
}
[dir="rtl"] select {
	background-position: left;
}
[dir="rtl"] input[type=number] {
	float: right;
}
[dir="rtl"] .check-container {
	padding: 5px 40px 5px 0;
}
[dir="rtl"] .checkmark {
	right: -10px;
	left: auto;
}
[dir="rtl"] .check-container .checkmark:after {
	right: 6px;
	left: auto;
}
@media screen and (max-width: 800px) {
	[dir="rtl"] .check-container {
		padding: 5px 50px 0 0;
	}
	[dir="rtl"] #change .left-login-box {
		margin-left: -20px;
		margin-right: 0;
	}
}

@media screen and (max-width: 767px) {
	[dir="rtl"] .left-signup-box, [dir="rtl"] .left-login-box, [dir="rtl"] .left-account-box {
		margin-left: 0;
		margin-right: 0;
	}
}

[dir="rtl"] .left-tactic-box {
	margin-left: 5px;
	margin-right: 0;
}
[dir="rtl"] .right-tactic-box label {
	margin-left: -35px;
	margin-right: 35px;
}
[dir="rtl"] .right-tactic-box .checkmark {
	right: -20px !important;
	left: auto !important;
}
[dir="rtl"] .right-tactic-box .container {
	padding-right: 15px;
	padding-left: 0;
	float: right;
}
[dir="rtl"] .right-tactic-box .checkmark {
	right: 0;
	left: auto;
}
[dir="rtl"] .right-tactic-box botton::after {
	left: 22vw;
	right: auto;
}
[dir="rtl"] .start .accept {
	border-left: 2.5px solid #ecece0;
	border-right: none;
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 0;
	text-align: right;
}
[dir="rtl"] .start .accept h1::after {
	left: 20px;
	right: auto;
}
[dir="rtl"] .start .reject {
	border-right: 2.5px solid #ecece0;
	border-left: none;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 0;
	text-align: right;
}
[dir="rtl"] .start .reject h1::after {
	left: 20px;
	right: auto;
}
[dir="rtl"] #win-text h1::after {
	left: -5vh;
	right: auto;
}
[dir="rtl"] #cert-text h1::after {
	left: -5vh;
	right: auto;
}
[dir="rtl"] #lightning {
	left: 5px;
	right: auto;
}
@media screen and (max-width: 1024px) {
	[dir="rtl"] .left-tactic-box {
		margin-right: -5px;
		margin-left: 5px;
	}
	[dir="rtl"] .right-tactic-box {
		margin-left: -5px;
		margin-right: 0;
	}
}

@media screen and (max-width: 800px) {
	[dir="rtl"] .right-tactic-box botton::after {
		left: 100px;
		right: auto;
	}
	[dir="rtl"] #win-text {
		right: 24%;
		left: auto;
	}
	[dir="rtl"] #cert-text {
		right: 24%;
		left: auto;
	}
	[dir="rtl"] #tactic #win-text {
		right: 28%;
		left: auto;
	}
}

@media screen and (max-width: 767px) {
	[dir="rtl"] #tactic #win-text, [dir="rtl"] #tactic #trial-text {
		right: 19%;
		left: auto;
	}
}

@media screen and (max-width: 500px) {
	[dir="rtl"] #tactic #win-text {
		right: 2%;
		left: auto;
	}
	[dir="rtl"] .right-tactic-box botton::after {
		left: 40px;
		right: auto;
	}
}

[dir="rtl"] #login .form-box .error-box {
	margin: 0 -15px 0 0;
}
[dir="rtl"] .password .eye, [dir="rtl"] .current-password .eye, [dir="rtl"] .new-password .eye, [dir="rtl"] .confirm-password .eye {
	left: 20px;
	right: auto;
}
[dir="rtl"] .password .no-eye, [dir="rtl"] .current-password .no-eye, [dir="rtl"] .new-password .no-eye, [dir="rtl"] .confirm-password .no-eye {
	left: 20px;
	right: auto;
}
[dir="rtl"] .confirmation-box p {
	margin-right: 90px;
	margin-left: 0;
}
[dir="rtl"] #signup .card-header h5, [dir="rtl"] #forgotten .card-header h5 {
	padding: 10px 0 10px 16px;
}
[dir="rtl"] .left-welcome-box, [dir="rtl"] #forgotten .left-pass-box {
	margin-left: -5px;
	margin-right: 0;
}
[dir="rtl"] .left-accordion-box {
	margin-left: -5px;
	margin-right: 0;
}
[dir="rtl"] .right-welcome-box {
	margin-right: 10px;
	margin-left: 0;
}
[dir="rtl"] #forgotten .right-login-box {
	margin-right: -20px;
	margin-left: 0;
}
@media screen and (max-width: 500px) {
	[dir="rtl"] #forgotten .right-login-box, [dir="rtl"] .right-welcome-box {
		margin-right: 0;
		margin-left: 0;
	}
}

@media screen and (max-width: 767px) {
	[dir="rtl"] #change .left-login-box {
		margin-left: 0;
		margin-right: 0;
	}
}

[dir="rtl"] #myaccount .checkmark {
	right: 0;
	left: auto;
}
[dir="rtl"] input[type=date] {
	padding: 10px 20px 10px 5px;
}
[dir="rtl"] .delete .accept {
	border-left: 2.5px solid #ecece0;
	border-right: none;
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 0;
	text-align: right;
}
[dir="rtl"] .delete .accept h1::after {
	left: 20px;
	right: auto;
}
[dir="rtl"] .delete .reject {
	border-right: 2.5px solid #ecece0;
	border-left: none;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 0;
	text-align: right;
}
[dir="rtl"] .delete .reject h1::after {
	left: 20px;
	right: auto;
}
@media screen and (max-width: 500px) {
	[dir="rtl"] #newsletter-cb {
		padding: 5px 80px 20px 10px;
	}
}

[dir="rtl"] .left-img-box {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
[dir="rtl"] .right-img-box {
	padding-right: 0 !important;
	padding-left: 0 !important;
}
[dir="rtl"] .text-box-equal h1 svg, [dir="rtl"] .text-box h1 svg {
	right: -10px;
	left: auto;
}
[dir="rtl"] .text-box-equal h3 svg, [dir="rtl"] .text-box h3 svg {
	right: -10px;
	left: auto;
}
[dir="rtl"] .text-box-equal ul, [dir="rtl"] .text-box-equal ol, [dir="rtl"] .text-box ul, [dir="rtl"] .text-box ol {
	margin-right: 30px;
	margin-left: 0;
}
[dir="rtl"] .text-box-equal a h3::after, [dir="rtl"] .text-box a h3::after {
	left: -4vh;
	right: auto;
}
@media screen and (max-width: 800px) {
	[dir="rtl"] .left-big-img {
		background-position: left;
	}
}

@media screen and (max-width: 815px) and (max-height: 420px) {
	[dir="rtl"] .offset-md-3 {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}
	[dir="rtl"] #win-text {
		margin-right: 60%;
		margin-left: 0;
	}
	[dir="rtl"] .left-contact-box {
		margin-left: 5px !important;
		margin-right: 0 !important;
	}
	[dir="rtl"] #chess-club-text {
		margin-right: 5vh;
		margin-left: 0;
	}
	[dir="rtl"] #home-study-text {
		margin-right: -5vh;
		margin-left: 0;
	}
	[dir="rtl"] #home-study-text h1::after, [dir="rtl"] #chess-club-text h1::after {
		left: -6vh;
		right: auto;
	}
	[dir="rtl"] .carousel-control-next {
		left: -50px !important;
		right: auto !important;
	}
	[dir="rtl"] #tactic #trial-text {
		left: -4% !important;
		right: auto !important;
	}
	[dir="rtl"] #tactic #win-text {
		right: 0;
		left: auto;
	}
	[dir="rtl"] #support-text h2::after {
		left: -6vh !important;
		right: auto !important;
	}
	[dir="rtl"] .right-welcome-box {
		margin-right: 0;
		margin-left: 0;
	}
}

@media screen and (min-width: 1300px) {
	[dir="rtl"] .bonus-box-inner button[type=submit]::after {
		left: -30px !important;
		right: auto !important;
	}
	[dir="rtl"] .currency-box .custom-select .select-selected:after {
		left: 6px !important;
		right: auto !important;
	}
}

@media screen and (max-width: 992px) {
	[dir="rtl"] .big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h1::before {
		right: -10px !important;
		left: auto !important;
	}
}

@media screen and (max-width: 768px) {
	[dir="rtl"] .bonus-box-inner {
		margin-right: 11% !important;
		margin-left: 0 !important;
	}
}

@media screen and (max-width: 630px) {
	[dir="rtl"] .bonus-box-inner {
		margin-right: 5% !important;
		margin-left: 0 !important;
	}
}

@media screen and (max-width: 590px) {
	[dir="rtl"] .bonus-box-inner {
		margin-right: 0% !important;
		margin-left: 0 !important;
	}
}

@media screen and (max-width: 500px) {
	[dir="rtl"] .left-big-img {
		background-position: left;
	}
	[dir="rtl"] .left-img-box {
		padding-left: 15px !important;
		padding-right: 0 !important;
	}
	[dir="rtl"] .right-img-box {
		padding-right: 15px !important;
		padding-left: 0 !important;
	}
	[dir="rtl"] .small-price-box p, [dir="rtl"] .small-price-box h1 {
		text-align: left;
	}
	[dir="rtl"] .small-price-box ul {
		margin: 0 30px 0 0 !important;
	}
	[dir="rtl"] .big-price-inner-boxes .col-6:first-of-type .big-price-inner-box {
		padding: 0 20px 0 0 !important;
	}
	[dir="rtl"] .big-price-inner-boxes .col-6:nth-child(2) .big-price-inner-box {
		padding: 0 20px 0 0 !important;
	}
	[dir="rtl"] .big-price-inner-boxes .col-6:nth-child(3) .big-price-inner-box {
		margin-right: -15px;
		margin-left: 0;
	}
}

@media screen and (max-width: 380px) {
	[dir="rtl"] .currency-box .custom-select {
		padding: 0 0 0 20px !important;
	}
}

@media screen and (max-width: 360px) {
	[dir="rtl"] .currency-box .custom-select {
		padding: 6px 0 0 20px !important;
	}
}

[dir="rtl"] .help-tabs ul li ul {
	padding-right: 20px;
	padding-left: 0;
}
[dir="rtl"] .help-tabs ul li button {
	text-align: right;
}
[dir="rtl"] .help-tabcontent ul li {
	margin-right: 20px;
	margin-left: 0;
}
[dir="rtl"] .help-tabcontent ul li::before {
	right: -20px;
	left: auto;
}
[dir="rtl"] .help-tabs ul li ul li::before {
	right: -20px;
	left: auto;
}
[dir="rtl"] .mobil-help .btn-link {
	text-align: right;
}
[dir="rtl"] .mobil-help .card-body {
	text-align: right;
}
[dir="rtl"] .big-price-inner-boxes .col-6:first-of-type .big-price-inner-box {
	text-align: left;
}
[dir="rtl"] .big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h1::before {
	right: -30px;
	left: auto;
}
[dir="rtl"] .big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h2 span {
	margin-right: 5px;
	margin-left: 0;
}
[dir="rtl"] .big-price-inner-boxes .col-6:first-of-type .big-price-inner-box {
	padding: 0 40px 0 0;
}
[dir="rtl"] .big-price-inner-boxes .col-6:nth-child(2) .big-price-inner-box {
	margin-right: 15px;
	margin-left: 0;
	text-align: right;
	padding: 0 40px 0 0;
}
[dir="rtl"] .single-course .col-6:first-of-type .big-price-inner-box p {
	text-align: left;
}
[dir="rtl"] .small-price-boxes .col-12:first-of-type {
	padding-left: 3px !important;
	padding-right: 0 !important;
}
[dir="rtl"] .small-price-boxes .col-12:nth-child(4) {
	padding-right: 3px !important;
	padding-left: 0 !important;
}
[dir="rtl"] .small-price-box::before {
	right: 49%;
	left: auto;
}
[dir="rtl"] .small-price-boxes .col-lg-4:last-of-type {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
[dir="rtl"] .currency-box h1, [dir="rtl"] .bonus-box h1 {
	margin-left: 10px;
	margin-right: 0;
	text-align: left;
}
[dir="rtl"] .currency-box h1, [dir="rtl"] .currency-box .custom-select, [dir="rtl"] .bonus-box h1 {
	float: right;
}
[dir="rtl"] .currency-box .custom-select .select-selected:after {
	left: 5px !important;
	right: auto !important;
}
[dir="rtl"] .guarantee-box {
	text-align: left;
}
[dir="rtl"] .guarantee-box img {
	margin-left: 10px;
	margin-right: 0;
}
[dir="rtl"] .guarantee-box h1 {
	text-align: right;
}
[dir="rtl"] .guarantee-box h1 {
	float: left;
}
[dir="rtl"] .bonus-box-inner button[type=submit]::after {
	left: -15px !important;
	right: auto !important;
}
[dir="rtl"] .table-number {
	left: 7px;
	right: auto;
}
[dir="rtl"] #support-text h2::after {
	left: -5vh;
	right: auto;
}
[dir="rtl"] #support-text {
	left: -10%;
	right: auto;
}
@media screen and (min-width: 1331px) {
	[dir="rtl"] .bonus-box-inner button[type=submit]::after {
		left: -20px !important;
		right: auto !important;
	}
}

@media screen and (max-width: 1330px) {
	[dir="rtl"] .bonus-box-inner button[type=submit]::after {
		left: -20px !important;
		right: auto !important;
	}
}

@media screen and (max-width: 1200px) {
	[dir="rtl"] #support-text {
		left: -2%;
		right: auto;
	}
}

@media screen and (max-width: 1083px) {
	[dir="rtl"] .guarantee-box img {
		margin-left: 10px;
		margin-right: 0;
	}
}

@media screen and (max-width: 1049px) {
	[dir="rtl"] .bonus-box-inner button[type=submit]::after {
		left: -20px !important;
		right: auto !important;
	}
}

@media screen and (max-width: 992px) {
	[dir="rtl"] .bonus-box-inner {
		margin-right: 18%;
		margin-left: 0;
	}
	[dir="rtl"] .guarantee-box img, [dir="rtl"] .currency-box h1 {
		float: left;
	}
	[dir="rtl"] .guarantee-box h1 {
		float: right;
	}
}

@media screen and (max-width: 991px) {
	[dir="rtl"] .small-price-boxes .col-12:nth-child(2) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	[dir="rtl"] .small-price-boxes .col-12:nth-child(3) {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}
	[dir="rtl"] .small-price-boxes .col-lg-4:last-of-type {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

@media screen and (max-width: 815px) and (max-height: 420px) {
	[dir="rtl"] #unlock .levels td svg {
		margin-left: 40px !important;
		margin-right: 0 !important;
	}
}

@media screen and (max-width: 800px) {
	[dir="rtl"] #support-text {
		padding-right: 0;
		padding-left: 0;
		left: -26% !important;
		right: auto !important;
	}
	[dir="rtl"] .bonus-box-inner {
		text-align: right;
	}
	[dir="rtl"] #unlock .levels td svg {
		margin-left: 80px;
		margin-right: 0;
	}
}

@media screen and (max-width: 767px) {
	[dir="rtl"] .small-price-boxes .col-12:first-of-type {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	[dir="rtl"] .small-price-boxes .col-12:nth-child(2) {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}
	[dir="rtl"] .small-price-boxes .col-lg-4:last-of-type {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	[dir="rtl"] .small-price-boxes .col-12:nth-child(3) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	[dir="rtl"] .small-price-boxes .col-12:nth-child(4) {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}
}

@media screen and (max-width: 601px) {
	[dir="rtl"] #unlock .levels td svg {
		margin-left: 40px;
		margin-right: 0;
	}
	[dir="rtl"] .bonus-box-inner button[type=submit]::after {
		left: -20px !important;
		right: auto !important;
	}
}

@media screen and (max-width: 500px) {
	[dir="rtl"] #support-text h2::after {
		left: -60px;
		right: auto;
	}
	[dir="rtl"] #support-text {
		left: -50px !important;
		right: auto !important;
	}
	[dir="rtl"] .small-price-box h3 {
		text-align: left;
	}
	[dir="rtl"] .bonus-box-inner {
		margin-right: 0;
		margin-left: 0;
	}
}

@media screen and (max-width: 992px) {
	[dir="rtl"] #about .table {
		margin-right: 0;
		margin-left: 0;
	}
	[dir="rtl"] .single-course .col-6:nth-child(3) {
		text-align: left;
	}
}

@media screen and (max-width: 815px) and (max-height: 420px) {
	[dir="rtl"] #win-text h1::after {
		left: -6vh;
		right: auto;
	}
	[dir="rtl"] .text-box-equal a h3::after, [dir="rtl"] .text-box a h3::after {
		left: -5vh;
		right: auto;
	}
	[dir="rtl"] .single-course .col-6:nth-child(3) {
		text-align: left;
	}
	[dir="rtl"] .big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h1::before {
		right: -20px;
		left: auto;
	}
}

@media screen and (min-width: 1020px) and (max-width: 1026px) {
	[dir="rtl"] #trial-text h1::after {
		left: -3vh;
		right: auto;
	}
	[dir="rtl"] #win-text h1::after {
		left: -3vh;
		right: auto;
	}
	[dir="rtl"] #win .offset-lg-8 {
		margin-right: 50%;
		margin-left: 0;
	}
	[dir="rtl"] #support-text h2::after {
		left: -58px !important;
		right: auto !important;
	}
	[dir="rtl"] .big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h1::before {
		right: -30px;
		left: auto;
	}
	[dir="rtl"] #unlock .big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h1::before {
		right: 0 !important;
		left: auto !important;
	}
	[dir="rtl"] .right-rating-header h1::before {
		right: -2vh;
		left: auto;
	}
}

@media screen and (min-width: 1200px) and (max-height: 1100px) {
	[dir="rtl"] #nav-book, [dir="rtl"] #nav-horse, [dir="rtl"] #nav-head, [dir="rtl"] #nav-logic, [dir="rtl"] #nav-account, [dir="rtl"] #nav-progress, [dir="rtl"] #nav-password, [dir="rtl"] #nav-lm, [dir="rtl"] #nav-cm, [dir="rtl"] #nav-admin, [dir="rtl"] #nav-logout, [dir="rtl"] #nav-language, [dir="rtl"] #nav-unlock, [dir="rtl"] #nav-language-black, [dir="rtl"] #nav-unlock-black, [dir="rtl"] #lock, [dir="rtl"] #world, [dir="rtl"] #person, [dir="rtl"] #member, [dir="rtl"] #arrow, [dir="rtl"] #back-arrow {
		right: -2.2vh;
		left: auto;
	}
}

@media screen and (min-width: 1366px) and (min-height: 1024px) {
	[dir="rtl"] #trial-text {
		right: 3vh;
		left: auto;
	}
	[dir="rtl"] #unlock .big-price-inner-boxes .col-6:first-of-type .big-price-inner-box h1::before {
		right: 0 !important;
		left: auto !important;
	}
}

[dir="rtl"] .left-success-box {
	margin-left: 5px;
	margin-right: 0;
}
@media screen and (max-width: 767px) {
	[dir="rtl"] .left-success-box {
		margin-left: 0;
		margin-right: 0;
	}
}

[dir="rtl"] .left-form-box {
	margin-left: 5px;
	margin-right: 0;
}
[dir="rtl"] .right-tactic-box button {
	right: 0;
	left: auto;
}
@media screen and (max-width: 767px) {
	[dir="rtl"] .left-form-box {
		margin-left: 0;
		margin-right: 0;
	}
}

@media screen and (min-width: 2500px) {
	[dir="rtl"] #nav-book, [dir="rtl"] #nav-horse, [dir="rtl"] #nav-head, [dir="rtl"] #nav-logic, [dir="rtl"] #nav-account, [dir="rtl"] #nav-progress, [dir="rtl"] #nav-password, [dir="rtl"] #nav-lm, [dir="rtl"] #nav-cm, [dir="rtl"] #nav-admin, [dir="rtl"] #nav-logout, [dir="rtl"] #nav-language, [dir="rtl"] #nav-unlock, [dir="rtl"] #nav-language-black, [dir="rtl"] #lock, [dir="rtl"] #world, [dir="rtl"] #person, [dir="rtl"] #member, [dir="rtl"] #arrow, [dir="rtl"] #back-arrow, [dir="rtl"] #black #back-arrow, [dir="rtl"] #nav-unlock-black {
		right: -30px;
		left: auto;
	}
	[dir="rtl"] #back-arrow {
		right: -15px !important;
		left: auto !important;
	}
	[dir="rtl"] .header-nav li {
		margin-left: 80px !important;
		margin-right: 0 !important;
	}
	[dir="rtl"] #home-study-text h1::after, [dir="rtl"] #chess-club-text h1::after, [dir="rtl"] #support-text h2::after, [dir="rtl"] #trial-text h1::after, [dir="rtl"] #win-text h1::after {
		left: -80px;
		right: auto;
	}
	[dir="rtl"] .carousel-control-prev {
		right: -100px !important;
		left: auto !important;
	}
	[dir="rtl"] .currency-box .custom-select .select-selected:after {
		left: 0px !important;
		right: auto !important;
	}
	[dir="rtl"] .table-number {
		left: 0;
		right: auto;
	}
	[dir="rtl"] .close-lang {
		left: 35px;
		right: auto;
	}
	[dir="rtl"] .text-box-equal a h3::after, [dir="rtl"] .text-box a h3::after {
		left: -50px;
		right: auto;
	}
	[dir="rtl"] .select-selected:after {
		left: -10px;
		right: auto;
	}
	[dir="rtl"] form img {
		margin-right: 20px;
		margin-left: 0;
	}
	[dir="rtl"] #home_study #trial-text {
		left: 5% !important;
		right: 5px;
	}
	[dir="rtl"] .offset-lg-8 {
		margin-right: 60% !important;
		margin-left: 0 !important;
	}
	[dir="rtl"] .help-tabcontent ul li::before, [dir="rtl"] .legal-tabcontent ul li::before {
		right: -30px;
		left: auto;
	}
	[dir="rtl"] .help-tabcontent ul li, [dir="rtl"] .legal-tabcontent ul li {
		margin-right: 40px;
		margin-left: 0;
	}
	[dir="rtl"] #tactic #trial-text {
		right: -11vh;
		left: -4% !important;
	}
}

@media screen and (min-width: 830px) and (max-width: 840px) {
	[dir="rtl"] #chess-club-text {
		margin-right: 5px;
		margin-left: 0;
	}
	[dir="rtl"] #home-study-text h1::after, [dir="rtl"] #chess-club-text h1::after {
		left: -4vh;
		right: auto;
	}
	[dir="rtl"] #trial-text {
		right: 1vh;
		left: auto;
	}
	[dir="rtl"] #index #trial-text h1 {
		margin-left: 100px;
		margin-right: 0;
	}
	[dir="rtl"] #support-text h2::after {
		left: -4vh;
		right: auto;
	}
	[dir="rtl"] #tactic #trial-text, [dir="rtl"] #home_study #trial-text {
		right: -4vh !important;
		left: auto !important;
	}
	[dir="rtl"] .left-contact-box {
		margin-left: 5px !important;
		margin-right: 0 !important;
	}
}

[dir="rtl"] .lm-btn-select {
	padding: 10px 0 10px 18px !important;
}
[dir="rtl"] .lm-btn {
	margin-right: 5px;
	margin-left: 0;
}
[dir="rtl"] .lm-cert-new-badge {
	left: -6px;
	right: auto;
}
[dir="rtl"] .lm-dropdown-caret {
	margin-right: 8px;
	margin-left: 0;
}
[dir="rtl"] #stud-cert-logo-modal .stud-cert-logo-x {
	left: 12px;
	right: auto;
}
[dir="rtl"] #stud-cert-logo-modal .stud-cert-logo-info-wrap {
	margin-right: 6px;
	margin-left: 0;
}
[dir="rtl"] #lesson-access .container {
	padding-right: 30px;
	padding-left: 0;
	float: right;
}
[dir="rtl"] #lesson-access .checkmark {
	right: 0;
	left: auto;
}
[dir="rtl"] .submit-btns .accept input[type=submit], [dir="rtl"] .submit-btns .reject h1 {
	text-align: right;
	padding: 0 30px 0 0;
}
[dir="rtl"] #lesson-access .accept::after {
	left: 20px;
	right: auto;
}
[dir="rtl"] #lesson-access .reject::after {
	left: 20px;
	right: auto;
}
[dir="rtl"] .lesson-restart {
	margin-left: 15px;
	margin-right: 0;
	float: right;
}
[dir="rtl"] #lesson-access .recontainer {
	padding-right: 30px;
	padding-left: 0;
	float: right;
}
[dir="rtl"] #lesson-access .restart-checkmark {
	right: -10px;
	left: auto;
}
@media screen and (max-width: 360px) {
	[dir="rtl"] .submit-btns .start .accept h1, [dir="rtl"] .submit-btns .start .reject h1 {
		padding-right: 20px;
		padding-left: 0;
	}
}

[dir="rtl"] .cookie-consent-options input {
	margin-left: 5px;
	margin-right: 0;
}

/* --- Horizontal arrow glyphs ------------------------------------------------
   These draw LearningChess.net-arrow-right.svg (or its black twin). The generated
   rules above move them to the other side; the artwork still points the old way,
   and there is no left-hand version of the white arrow, so flip it. No rule here
   carries a transform of its own - checked before writing. Added 2026-10-08. */
[dir="rtl"] .carousel-control-next-icon {
	transform: scaleX(-1);
}
[dir="rtl"] .carousel-control-prev-icon {
	transform: scaleX(-1);
}
[dir="rtl"] #home-study-text h1::after {
	transform: scaleX(-1);
}
[dir="rtl"] #chess-club-text h1::after {
	transform: scaleX(-1);
}
[dir="rtl"] #trial-text h1::after {
	transform: scaleX(-1);
}
[dir="rtl"] .purple::after {
	transform: scaleX(-1);
}
[dir="rtl"] .right-tactic-box botton::after {
	transform: scaleX(-1);
}
[dir="rtl"] #win-text h1::after {
	transform: scaleX(-1);
}
[dir="rtl"] #cert-text h1::after {
	transform: scaleX(-1);
}
[dir="rtl"] .text-box-equal a h3::after, [dir="rtl"] .text-box a h3::after {
	transform: scaleX(-1);
}
[dir="rtl"] .bonus-box-inner button[type=submit]::after {
	transform: scaleX(-1);
}
[dir="rtl"] #support-text h2::after {
	transform: scaleX(-1);
}

/* ============================================================================
   HAND-WRITTEN SECTION - keep this below the generated rules so it wins.

   These were written and tested against live Arabic pages on 2026-10-05 and
   carry knowledge the generator cannot derive from style.css: chiefly padding
   values that come from Bootstrap's own defaults rather than from our rules,
   where a mechanical mirror would reset the far side to 0 and lose the gutter.
   Moved here from the end of style.css on 2026-10-08, unchanged except for one
   dropped rule (.progress-box .col-lg-12:nth-child(2)) that mirrored a media
   query's 60px instead of the base rule's 130px.
   ========================================================================== */

/* ============================================================================
   Arabic (RTL) - course list (courses.php) and lesson list (lessons.php).
   Both pages put dir="rtl" on <main> for lang 'ar'; every selector here is scoped
   to [dir="rtl"], so no other language or page can be affected.

   The stylesheet has no logical properties, so each hard-coded side is mirrored
   explicitly - and in the SAME media context as the rule it mirrors, otherwise a
   desktop override would leak down into the breakpoints (these selectors outrank
   the originals, so they win wherever they both apply). Added 2026-10-05.
   ========================================================================== */
[dir="rtl"] .card h5 { text-align: right; padding-right: 0; padding-left: 20px; }
[dir="rtl"] .card-header { padding-right: 1.25rem !important; padding-left: 50px !important; }
[dir="rtl"] .tab-open button,
[dir="rtl"] .tab-close button { right: auto; left: 10px; }
[dir="rtl"] .tab-open button::after,
[dir="rtl"] .tab-close button::after { right: auto; left: -8px; }
[dir="rtl"] .courseStatus,
[dir="rtl"] .lessonStatus { left: auto; right: 0; }
[dir="rtl"] .statusInfo p { margin-right: 0; margin-left: 40px; }
[dir="rtl"] .left-course-box { margin-right: 0; margin-left: 5px; }

@media screen and (max-width: 992px) {
	[dir="rtl"] .card .tab-open button,
	[dir="rtl"] .card .tab-close button { right: auto; left: 15px; }
}
@media screen and (max-width: 800px) {
	[dir="rtl"] .card-header { padding-right: 1.25rem !important; padding-left: 85px !important; }
}
@media screen and (max-width: 600px) {
	[dir="rtl"] .card h5 { padding-right: 0; padding-left: 0; }
}
@media screen and (max-width: 500px) {
	[dir="rtl"] .statusInfo p { margin-right: 0; margin-left: 6px; }
}

/* --- Member pages (myprogress, chessboards, guest, member-login) -------------
   Same rule as above: scoped to [dir="rtl"], mirrored in the media context of the
   rule it mirrors. Only content inside <main> is covered - the surrounding nav and
   language/account pop-ups stay LTR, which is why none of their rules appear here.
   Added 2026-10-05. */

/* status + medal legends: the coloured bar is an ::before hung off the left */
[dir="rtl"] #signUpLine, [dir="rtl"] #avaliableLine, [dir="rtl"] #lockedLine,
[dir="rtl"] #progressLine, [dir="rtl"] #completedLine,
[dir="rtl"] #iron, [dir="rtl"] #bronze, [dir="rtl"] #silver,
[dir="rtl"] #gold, [dir="rtl"] #diamond { margin-left: 0; margin-right: 80px; }
[dir="rtl"] #signUpLine::before, [dir="rtl"] #avaliableLine::before,
[dir="rtl"] #lockedLine::before, [dir="rtl"] #progressLine::before,
[dir="rtl"] #completedLine::before,
[dir="rtl"] #iron::before, [dir="rtl"] #bronze::before, [dir="rtl"] #silver::before,
[dir="rtl"] #gold::before, [dir="rtl"] #diamond::before { left: auto; right: -60px; }

/* rating header + its star */
[dir="rtl"] .left-rating-header { margin-right: 0; margin-left: 4px; }
[dir="rtl"] .right-rating-header h1::before { left: auto; right: -2vh; }

/* progress summary */
[dir="rtl"] .progress-box { margin-right: 0; margin-left: 5px; }
[dir="rtl"] .progress-menu-box .col-md-3 h5,
[dir="rtl"] .progress-menu-box .col-lg-3 h5 { text-align: left; }
[dir="rtl"] .purple::after { right: auto; left: 5px; }

/* puzzle statistics tables */
[dir="rtl"] .levels span, [dir="rtl"] .tactics span { margin-left: 0; margin-right: 5px; }
[dir="rtl"] .levels tbody th, [dir="rtl"] .tactics tbody th { text-align: left; }
[dir="rtl"] .table { margin-left: 0; margin-right: -20px; }
[dir="rtl"] .info-box { left: auto; right: 0; text-align: right; }
[dir="rtl"] .info-box button { left: auto; right: 0; }

@media screen and (min-width: 1500px) {
	[dir="rtl"] .progress-box .col-lg-12:nth-child(2) { margin-left: 0; margin-right: 180px; }
}
@media screen and (max-width: 800px) {
	[dir="rtl"] .progress-menu-box .col-md-3 h5,
	[dir="rtl"] .progress-menu-box .col-lg-3 h5 { text-align: right; }
	[dir="rtl"] .progress-box .col-lg-12:nth-child(2) { margin-right: 0; }
}

/* --- Tactics trainer / any custom-select dropdown ----------------------------
   The arrow is an ::after pinned to the right of .select-selected, and the option
   list is pinned left. Under RTL the text runs to the right edge and the arrow
   lands on top of it, so both are mirrored. Added 2026-10-05. */
[dir="rtl"] .select-selected:after { right: auto; left: -3px; }
[dir="rtl"] .select-items { left: 0; right: -4px; }

@media screen and (min-width: 2500px) {
	[dir="rtl"] .select-selected:after { right: auto; left: -10px; }
}

/* --- Student course page (student-course.php) ---------------------------------
   Same discipline as the blocks above: scoped to [dir="rtl"], mirrored inside the
   media context of the rule it mirrors. This page shows one student's course to a
   teacher and reuses the lesson cards from lessons.php, so the card, tab and
   lessonStatus rules above already cover most of it. What is left is the progress
   column and the two lesson columns' inner gutter. Added 2026-10-08. */
[dir="rtl"] .main-lesson ul { text-align: left; }
[dir="rtl"] #progress-list { text-align: right; }
[dir="rtl"] .big-number { margin-left: 0; margin-right: 5px; }

/* The restart pill is floated to the end of the card, its leading corner rounded
   and the arrow icon hung off its left. lessons.php has rendered it in Arabic since
   2026-10-05 - it was missed by that pass because student-course.php, the page that
   led to this block, passes 0 and never shows it. */
[dir="rtl"] .restart {
	float: left;
	text-align: left;
	border-radius: 5px 20px 20px 5px;
	padding: 10px 40px 10px 20px;
}
[dir="rtl"] .restart a::before { left: auto; right: -35px; }

@media screen and (min-width: 801px) {
	[dir="rtl"] .left-lesson-box { padding-right: 0 !important; padding-left: 4px !important; }
	[dir="rtl"] .right-lesson-box { padding-left: 0 !important; padding-right: 4px !important; }
}
@media screen and (max-width: 800px) {
	[dir="rtl"] .main-lesson ul { text-align: right; }
}


/* === Hero banners with fixed artwork ==========================================
   index.php (#home-study, #trial, #cert), test.php (#trial, #win) and
   home_study.php (#trial) lay their text over a photograph, and the photograph
   is not mirrored: the empty half stays where the photographer left it.
   Mirroring the text column therefore drops the text onto the subject - over the
   boy's head in #home-study, onto the certificate in #cert (white on white, so it
   reads as missing) and off the purple panel in #trial. Janos asked that the text
   stay put rather than have new artwork cut, so these blocks keep their LTR
   position at every breakpoint; only the alignment inside the box follows the
   reading direction. The arrow glyphs in the ::after rules above stay mirrored -
   they point along the reading direction, not at the artwork. Added 2026-10-08. */

/* #home-study: the boy is on the right, so the text column stays on the left with
   its text hugging the centre line. text-align:right is what LTR already uses
   here, and it is also the Arabic-natural alignment, so it is simply restored. */
[dir="rtl"] #home-study .row { justify-content: flex-end; }
[dir="rtl"] #home-study-text { text-align: right; }

/* #trial: the chess-clock photo fills the right half. */
[dir="rtl"] #trial .row { justify-content: flex-end; }

/* #cert / #win: the column carries a Bootstrap offset, which bootstrap.rtl turns
   into margin-right and so walks the text across onto the artwork. Restoring the
   LTR gaps - 0 at md (offset-md-6 + col-md-6 fills the row) and 8.333333% at lg
   (offset-lg-7 + col-lg-4 leaves one column after it) - puts it back. */
@media screen and (min-width: 768px) {
	[dir="rtl"] #cert-text,
	[dir="rtl"] #win-text { margin-right: 0; margin-left: 0; }
}
@media screen and (min-width: 992px) {
	[dir="rtl"] #cert-text,
	[dir="rtl"] #win-text { margin-right: 8.333333%; margin-left: 0; }
}

/* Inside that box the lines are centred rather than hugging an edge. The column is
   already centred on the coloured wedge, so centring the text as well sits the whole
   block in the middle of the colour instead of pushing it against the outer margin.
   Janos asked for this on both pages, 2026-10-08. */
[dir="rtl"] #cert-text,
[dir="rtl"] #win-text { text-align: center; }

/* The portrait crops used below 1024px put their empty area in the same place as
   the landscape ones, so every nudge is restored to its LTR side as well. */
@media screen and (max-width: 991px) {
	[dir="rtl"] #home-study-text { padding-right: 40vh; padding-left: 0; }
}
@media screen and (max-width: 800px) {
	[dir="rtl"] #home-study-text { padding-right: 40px; padding-left: 0; }
	[dir="rtl"] #trial-text { left: 28%; right: auto; }
	[dir="rtl"] #home_study #trial-text { left: 11%; right: auto; }
	[dir="rtl"] #win-text,
	[dir="rtl"] #cert-text { left: 24%; right: auto; }
}
@media screen and (max-width: 767px) {
	[dir="rtl"] #tactic #win-text,
	[dir="rtl"] #tactic #trial-text { left: 19%; right: auto; }
}
@media screen and (max-width: 601px) {
	[dir="rtl"] #home-study-text { padding-right: 30px; padding-left: 0; }
}
@media screen and (max-width: 500px) {
	[dir="rtl"] #tactic #trial-text,
	[dir="rtl"] #trial-text { left: 0% !important; right: auto !important; }
	[dir="rtl"] #home_study #trial-text { left: 5px; right: auto; }
	[dir="rtl"] #win-text,
	[dir="rtl"] #cert-text { left: 0 !important; right: auto !important; }
	[dir="rtl"] #tactic #win-text { left: 2%; right: auto; }
}
@media screen and (max-width: 815px) and (max-height: 420px) {
	[dir="rtl"] #win-text { margin-left: 60%; margin-right: 0; }
	[dir="rtl"] #home-study-text { margin-left: -5vh; margin-right: 0; }
	[dir="rtl"] #tactic #trial-text { right: -4% !important; left: auto !important; }
	[dir="rtl"] #tactic #win-text { left: 0; right: auto; }
}
@media screen and (min-width: 1366px) and (min-height: 1024px) {
	[dir="rtl"] #trial-text { left: 3vh; right: auto; }
}
@media screen and (min-width: 830px) and (max-width: 840px) {
	[dir="rtl"] #trial-text { left: 1vh; right: auto; }
	[dir="rtl"] #index #trial-text h1 { margin-right: 100px; margin-left: 0; }
	[dir="rtl"] #tactic #trial-text,
	[dir="rtl"] #home_study #trial-text { left: -4vh !important; right: auto !important; }
}
@media screen and (min-width: 2500px) {
	[dir="rtl"] #home_study #trial-text { right: 5% !important; left: auto !important; }
	[dir="rtl"] #tactic #trial-text { left: -11vh; right: auto; }
}

/* === lessons.php progress circles =============================================
   Each <li> holds a label above a 100px dial. The label is right-aligned, so a
   label wider than the dial - "the overall score" is 178px against 100px - hangs
   out to the left and reads as if it belonged to the dial next to it. Centring
   the label over its own dial removes the ambiguity; English is unaffected
   because its labels happen to be narrower. Janos, 2026-10-08. */
[dir="rtl"] #progress-list li { text-align: center; }
[dir="rtl"] .statusInfo #progress-list p { margin-left: 0; margin-right: 0; }
[dir="rtl"] #progress-list .big-percent { margin-left: auto; margin-right: auto; }

/* === #trial banner: centre the lines on the coloured wedge ====================
   Same arrangement as #cert-text / #win-text above: the artwork is not mirrored,
   so the wedge stays on the left and only the text had to move.

   Centring inside the column alone was not enough here, because the column does
   not line up with the wedge: the wedge is the left half of the WINDOW, while
   the column is half of a .container that is itself inset (136px on test.php,
   and only 5 columns wide on index.php). The text then sat right of the wedge
   centre on one page and left of it on the other. So at desktop widths the
   container runs full width and the column takes exactly half of it, which puts
   the column over the wedge; the centring then lands where the eye expects it.
   Below 992px the banner is a single stacked column and rtl.css positions it by
   hand further down, so this is scoped to lg and up. Janos, 2026-10-08. */
[dir="rtl"] #trial-text { text-align: center; }

@media screen and (min-width: 992px) {
	[dir="rtl"] #trial .container {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}
	[dir="rtl"] #trial-text {
		flex: 0 0 auto;
		width: 50%;
		max-width: 50%;
	}
}

/* The gauge icon above the headline is a bare 60px block with no margins, so the
   flex column drops it at the inline start: the left edge in English, where it
   sits right above the first line, but the right edge in Arabic, where it ended
   up out on the diagonal with nothing under it. The lines are centred now, so
   the icon is centred with them. Janos, 2026-10-08. */
[dir="rtl"] #trial-text #rate {
	margin-left: auto;
	margin-right: auto;
}

/* === LMS / group management: hard-coded left gutters that have to mirror =====
   .functionContainer carries an inline margin-left:15px on every panel of
   manage_groups.php (add / modify / delete group, expiry date, add / remove
   teacher), so the whole "manage group" menu was affected, not just one panel.
   An inline left margin stays on the left under RTL, and the panel, which now
   starts from the right, ran into the window edge.

   (The button row and the "no students yet" message were flush too, but they are
   flush in English as well - the fix for those is shared, in style.css.)
   Janos, 2026-10-08. */
[dir="rtl"] #manage .functionContainer {
	margin-left: 0 !important;
	margin-right: 15px !important;
}

/* === Testimonials carousel on phones =========================================
   This is the whole of the 31px horizontal overflow that shifted the Arabic index
   and unlock pages sideways at phone width (scrollWidth 421 against a 390 window),
   and with it the clipped nav boxes, the clipped HOME STUDY heading and the
   missing second carousel arrow. They were one bug, not four.

   At <=601px style.css resets both margins with a SYMMETRIC shorthand -
   ".carousel { margin: 0 }" and ".carousel-inner { margin: 0 }" - so the mirror
   generator had nothing directional to mirror and emitted nothing for them. The
   mirrors from the wider <=800px block therefore kept winning: a [dir="rtl"] X
   rule outranks the plain X rule it came from (two selector components against
   one), so it also beats that selector's own override in a NARROWER media query.
   Restating the reset for RTL is all that is needed - the values match style.css
   at this breakpoint exactly. Janos, 2026-10-08. */
@media screen and (max-width: 601px) {
	[dir="rtl"] .carousel,
	[dir="rtl"] .carousel-inner {
		margin-left: 0;
		margin-right: 0;
	}
}

/* === Arabic banner headings on a tablet in portrait ==========================
   The heading is an inline-block, so it hugs its text on one line but widens to
   the whole column the moment the text wraps - and the house/hat icon and the
   arrow are hung off that box, not off the words. In English they are anchored
   to the right edge and the text is right-aligned too, so they stay together;
   under RTL the mirror moves them to the LEFT edge, which the right-aligned
   Arabic text no longer reaches. On an iPad Pro in portrait that left the icons
   stranded some 200px away from the heading.

   Between 992px and 1199px - the two-column layout, where the column is narrow
   enough that 5vh type wraps - the heading takes its width from its longest
   line instead, so the icons sit against the words again. Outside that range
   the heading already fits on one line and nothing changes; measured at
   eighteen window sizes, the gap is 0 at every one. Janos, 2026-10-08. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
	[dir="rtl"] #home-study-text h1,
	[dir="rtl"] #chess-club-text h1 {
		width: min-content;
	}
}