/* ====================================================================
 * Course page — information design
 * --------------------------------------------------------------------
 * The page was still a stack of paragraphs and bullet runs. Everything
 * here turns a list into something scannable: a reader should be able to
 * take the shape of the page without reading a sentence.
 *
 * Loaded after rtl-guards.css, on Tutor single templates only.
 * ==================================================================== */

/* ── Lists in the description become card grids ───────────────────────
 * Three long bullet runs — who it is for, what you will learn, the
 * benefits — read as one undifferentiated column. As a grid of bordered
 * cards each point becomes an object with edges, and the section can be
 * scanned instead of read start to finish. */
.alrasly-crs-main .alrasly-course-desc ul {
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0.7rem;
	margin-block-end: 1.9rem;
}

.alrasly-crs-main .alrasly-course-desc ul > li {
	padding: 0.85rem 2.4rem 0.85rem 0.95rem;
	background-color: var(--wp--preset--color--card);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	font-size: 0.875rem;
	line-height: 1.7;
}

/* A drawn check, not a disc — these are things you get, not entries in
   an inventory. Same stroke weight as every other mark on the site. */
.alrasly-crs-main .alrasly-course-desc ul > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.9rem;
	inset-block-start: 1.05rem;
	inline-size: 1.05rem;
	block-size: 1.05rem;
	border-radius: 0;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB27A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.6l4.8 4.8L19.5 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

/* Prose keeps a reading measure; the card grids get the full column. */
.alrasly-crs-main .alrasly-course-desc,
.alrasly-crs-main .tutor-course-details-content {
	max-inline-size: none;
}
.alrasly-crs-main .alrasly-course-desc > p {
	max-inline-size: var(--alrasly-measure, 660px);
}

/* ── The blocks that were trapped in the sidebar ─────────────────────
 * Instructor, audience, requirements and tags now sit in the main
 * column. Tutor spaces all of them with tutor-mr-* utilities, which are
 * PHYSICAL left-to-right margins — in RTL they push the avatar and the
 * bullets away from their text instead of towards it. Every one of them
 * is reset here and the spacing rebuilt with logical properties. */
.alrasly-crs-about {
	margin-block-start: 2.75rem;
	display: grid;
	gap: 1.5rem;
}

.alrasly-crs-about .tutor-course-details-instructors,
.alrasly-crs-about .tutor-course-details-widget {
	background-color: var(--wp--preset--color--card);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--wp--custom--radius--card, 12px);
	padding: 1.5rem 1.6rem;
}

.alrasly-crs-about h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem !important;
	font-weight: 500;
	margin: 0 0 1.15rem !important;
	color: var(--wp--preset--color--text) !important;
}

.alrasly-crs-about [class*="tutor-mr-"],
.alrasly-crs-about [class*="tutor-ml-"] {
	margin-inline: 0 !important;
}

/* The instructor, at a size proportionate to what he is being trusted
   with. It was a 48px thumbnail in a 340px rail. */
.alrasly-crs-about .tutor-course-details-instructors .tutor-d-flex {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.alrasly-crs-about .tutor-avatar {
	inline-size: 4.25rem !important;
	block-size: 4.25rem !important;
	flex: 0 0 auto;
}
.alrasly-crs-about .tutor-avatar img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid rgba(255, 178, 122, 0.32);
}
.alrasly-crs-about .tutor-course-details-instructors a {
	font-size: 1.0625rem !important;
	font-weight: 500;
	color: var(--wp--preset--color--text) !important;
	text-decoration: none;
}
.alrasly-crs-about .tutor-instructor-designation {
	color: var(--wp--preset--color--text-3) !important;
	font-size: 0.8125rem !important;
	margin-block-start: 0.25rem;
	line-height: 1.6;
}

/* Audience and requirements, on the same card grid as everything else. */
.alrasly-crs-about .tutor-course-details-widget-list {
	list-style: none;
	margin: 0 !important;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0.7rem;
}
.alrasly-crs-about .tutor-course-details-widget-list li {
	display: flex !important;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0 !important;
	padding: 0.8rem 0.95rem;
	background-color: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 10px;
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--wp--preset--color--text-2) !important;
}
.alrasly-crs-about .tutor-course-details-widget-list li > span:first-child {
	color: var(--wp--preset--color--accent) !important;
	flex: 0 0 auto;
	margin-block-start: 0.35rem;
}

/* Tags are a set, so they look like one instead of a comma-run. */
.alrasly-crs-about [class*="tags"] ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.alrasly-crs-about [class*="tags"] li {
	margin: 0 !important;
	padding: 0;
	background: none;
	border: none;
}
.alrasly-crs-about [class*="tags"] a {
	display: inline-block;
	padding: 0.32rem 0.72rem;
	border-radius: 999px;
	background-color: rgba(124, 58, 245, 0.16);
	border: 1px solid rgba(167, 154, 217, 0.22);
	font-size: 0.75rem;
	color: var(--wp--preset--color--text-2) !important;
	text-decoration: none;
	transition: border-color 160ms ease, background-color 160ms ease;
}
.alrasly-crs-about [class*="tags"] a:hover {
	background-color: rgba(124, 58, 245, 0.26);
	border-color: rgba(255, 178, 122, 0.4);
}

@media (max-width: 781px) {
	.alrasly-crs-main .alrasly-course-desc ul,
	.alrasly-crs-about .tutor-course-details-widget-list {
		grid-template-columns: 1fr;
	}
}

/* ====================================================================
 * The star rating INPUT
 * --------------------------------------------------------------------
 * This course has four 1-star reviews whose text is unambiguously
 * positive («ما شاء الله جميلة جداً»، «اسلوب سلس وممتع»). Two of them
 * are approved and drag the public average from 4.71 to 3.89.
 *
 * The cause is in the widget, not in the opinions. Tutor's selectable
 * stars are <i> elements whose ONLY size comes from an icon-font glyph
 * (font-family: tutor, a Private Use Area codepoint). If that font fails
 * to arrive — cache, blocker, CSP, or a slow connection under
 * font-display: block — the stars collapse to ZERO WIDTH. They are still
 * in the DOM and still clickable, so the widget is invisible but live.
 *
 * Tutor validates a zero rating, so these were genuinely set. And in RTL
 * the star worth 1 is the RIGHTMOST — the first place an Arabic reader
 * taps. Someone who cannot see the stars, taps where the first one
 * should be, and submits praise with one star.
 *
 * Two independent fixes, either of which alone would have prevented it:
 *
 *   1. The stars are drawn here as SVG backgrounds and the glyph is made
 *      transparent, so the control no longer depends on a webfont at all.
 *   2. The value is stated in words next to the widget (see the readout
 *      script in single-course.php), so the choice is legible even if
 *      every graphic on the page fails.
 *
 * The row is also forced to LTR. Star scales are read left-to-right the
 * world over; mirroring it put "worst" under the reader's thumb.
 * ==================================================================== */

[tutor-ratings-selectable] {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	direction: ltr;
}

[tutor-ratings-selectable] i {
	/* Size comes from the box, never from the glyph. */
	inline-size: 2rem;
	block-size: 2rem;
	display: inline-block;
	color: transparent !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.75rem 1.75rem;
	cursor: pointer;
	/* comfortably over the 44px touch minimum with the gap included */
	padding: 0.4rem;
	box-sizing: content-box;
	transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
[tutor-ratings-selectable] i:hover { transform: scale(1.12); }

/* Empty star */
[tutor-ratings-selectable] i.tutor-icon-star-line {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A79AD9' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3.6l2.6 5.3 5.9.85-4.25 4.15 1 5.85L12 17l-5.25 2.75 1-5.85L3.5 9.75l5.9-.85z'/%3E%3C/svg%3E");
}

/* Chosen star */
[tutor-ratings-selectable] i.tutor-icon-star-bold {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFB27A' stroke='%23FFB27A' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3.6l2.6 5.3 5.9.85-4.25 4.15 1 5.85L12 17l-5.25 2.75 1-5.85L3.5 9.75l5.9-.85z'/%3E%3C/svg%3E");
}

/* The readout, injected beside the widget. Until something is chosen it
   says so, in words. */
.alrasly-rating-readout {
	display: inline-block;
	margin-inline-start: 0.85rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--text-3);
	vertical-align: middle;
}
.alrasly-rating-readout[data-chosen="1"] {
	color: var(--wp--preset--color--accent);
	font-weight: 500;
}

/* The review prompt for enrolled students who have not rated.
   Deliberately quiet — it is an ask, not a sales banner. */
.alrasly-crs-nudge {
	margin-block-end: 1.75rem;
	padding: 1.15rem 1.3rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.25rem;
	background-color: rgba(255, 178, 122, 0.07);
	border: 1px solid rgba(255, 178, 122, 0.22);
	border-radius: var(--wp--custom--radius--card, 12px);
}
.alrasly-crs-nudge__title {
	margin: 0;
	flex: 1 1 100%;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--text);
}
.alrasly-crs-nudge__body {
	margin: 0;
	flex: 1 1 16rem;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text-2);
}
.alrasly-crs-nudge__cta {
	flex: 0 0 auto;
	min-block-size: 44px;
	padding-inline: 1.2rem;
	border: none;
	border-radius: 999px;
	background-color: var(--wp--preset--color--accent);
	color: #1B1442;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	cursor: pointer;
	transition: filter 160ms ease, transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.alrasly-crs-nudge__cta:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* A course that is closed to new enrolments -------------------------------
 *
 * Replaces the buy box, so it sits in the same sticky sidebar card and has to
 * hold that space without pretending to be a purchase. Muted rather than
 * accented: an accent border here would read as an offer, which is the one
 * thing it is not.
 *
 * Enrolled students never see it — Tutor's entry box branches on enrolment
 * first, so they keep the "continue learning" panel. See inc/course-closed.php.
 */
.alrasly-crs-closed {
	padding: 1.35rem 1.3rem;
	border: 1px solid var(--wp--preset--color--line, rgba(255, 255, 255, 0.12));
	border-radius: var(--wp--custom--radius--card, 12px);
	background-color: rgba(255, 255, 255, 0.02);
}
.alrasly-crs-closed__title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--wp--preset--color--text);
}
.alrasly-crs-closed__body {
	margin: 0 0 1.15rem;
	font-size: 0.875rem;
	line-height: 1.75;
	color: var(--wp--preset--color--text-2);
}
.alrasly-crs-closed__cta {
	display: inline-flex;
	align-items: center;
	/* 44px, like every other control on this page. */
	min-block-size: 44px;
	padding-inline: 1.2rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.alrasly-crs-closed__cta:hover,
.alrasly-crs-closed__cta:focus-visible {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ground);
}

/* ===========================================================================
   جرّب قبل ما تشتري — the two qualifying steps, before the price.

   Two cards, whole-card links, numbered because the order is the argument:
   the assessment first because it can say "not yet". Same card treatment as
   .alrasly-toolcard so it reads as the site's one card shape, not a new one.
   ======================================================================== */
.alrasly-try {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: 0.9rem;
	margin-block: 1.1rem 1.25rem;
}
.alrasly-try__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 1.3rem 1.35rem 1.2rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--wp--custom--radius--card, 12px);
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms ease;
}
.alrasly-try__card:hover,
.alrasly-try__card:focus-visible {
	transform: translateY(-3px);
	border-color: rgba(255, 178, 122, 0.28);
	outline: none;
}
.alrasly-try__step {
	inline-size: 2rem;
	block-size: 2rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ground);
	font-family: var(--wp--preset--font-family--display, inherit);
	font-weight: 500;
	margin-block-end: 0.2rem;
}
.alrasly-try__card h3 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.5;
}
.alrasly-try__card p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.85;
	color: var(--wp--preset--color--text-2);
}
.alrasly-try__go {
	margin-block-start: auto;
	padding-block-start: 0.5rem;
	color: var(--wp--preset--color--accent);
	font-weight: 500;
	font-size: 0.9rem;
}

/* The CTA rows the copy places under the intro and under the price. */
.alrasly-crs-cta-row { margin-block: 1rem 0.25rem; }

/* FAQ as native disclosure — no script, keyboard-native, and each answer is
   in the DOM for a crawler whether or not it is open. */
.alrasly-faq {
	border-block-start: 1px solid rgba(255, 255, 255, 0.1);
	padding-block: 0.85rem;
}
.alrasly-faq:last-of-type { border-block-end: 1px solid rgba(255, 255, 255, 0.1); }
.alrasly-faq summary {
	cursor: pointer;
	font-weight: 500;
	line-height: 1.7;
	list-style: none;
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	min-block-size: 44px;   /* touch target */
}
.alrasly-faq summary::-webkit-details-marker { display: none; }
.alrasly-faq summary::before {
	content: "+";
	flex: none;
	inline-size: 1.25rem;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display, inherit);
	transition: transform 160ms ease;
}
.alrasly-faq[open] summary::before { content: "−"; }
.alrasly-faq summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 6px;
}
.alrasly-faq__a { padding-block: 0.4rem 0.2rem; color: var(--wp--preset--color--text-2); line-height: 1.85; }
.alrasly-faq__a p { margin: 0; }
.alrasly-faq__a a { color: var(--wp--preset--color--accent); }