/* Modern Reem Course Page Styles - Luxury Edition */

body.reem-course-page,
body.custom-background.reem-course-page {
	background-color: #faf7f2 !important;
	background-image: none !important;
}

body.reem-course-page .main-title-section-wrapper {
	display: none !important;
}

body.reem-course-page #header-wrapper {
	margin-bottom: 0 !important;
}

body.reem-course-page #main > .wdt-elementor-container-fluid,
body.reem-course-page #main > .container {
	padding-top: 0;
	padding-bottom: 0;
}

body.reem-course-page .elementor-widget-shortcode {
	width: 100% !important;
	max-width: 100%;
	flex: 1 0 100% !important;
}

/* Base Course Container */
.reem-course {
	--reem-primary: #243c32;
	--reem-primary-rgb: 36, 60, 50;
	--reem-primary-dark: #162821;
	--reem-primary-light: #355648;
	--reem-clay: #c76b3d;
	--reem-clay-rgb: 199, 107, 61;
	--reem-clay-light: #faede6;
	--reem-clay-hover: #b3592c;
	--reem-brown: #6e3b2e;
	--reem-rose: #9f4258;
	--reem-rose-light: #faedf0;
	--reem-emerald: #2d8a63;
	--reem-emerald-light: #e8f5ef;
	--reem-gold: #d99b26;
	--reem-gold-light: #fbf3e4;
	--reem-ink: #384842;
	--reem-ink-light: #64756e;
	--reem-paper: #ffffff;
	--reem-cream: #faf7f2;
	--reem-cream-subtle: #f4ede2;
	--reem-line: #e6ded3;
	--reem-line-subtle: rgba(230, 222, 211, 0.6);
	--reem-radius-sm: 0.6rem;
	--reem-radius-md: 1rem;
	--reem-radius-lg: 1.35rem;
	--reem-radius-xl: 1.85rem;
	--reem-shadow-sm: 0 4px 14px rgba(36, 60, 50, 0.04);
	--reem-shadow-md: 0 10px 30px -4px rgba(36, 60, 50, 0.07), 0 2px 6px rgba(0, 0, 0, 0.02);
	--reem-shadow-lg: 0 22px 50px -10px rgba(36, 60, 50, 0.1), 0 6px 16px rgba(0, 0, 0, 0.03);
	--reem-shadow-hover: 0 26px 55px -10px rgba(199, 107, 61, 0.18), 0 8px 22px rgba(36, 60, 50, 0.06);

	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 1.75rem clamp(1rem, 3.2vw, 2.5rem) 5rem;
	background:
		radial-gradient(circle at 95% 3%, rgba(199, 107, 61, 0.08) 0%, transparent 45%),
		radial-gradient(circle at 5% 30%, rgba(36, 60, 50, 0.06) 0%, transparent 40%),
		linear-gradient(180deg, #fbf8f4 0%, var(--reem-cream) 400px);
	color: var(--reem-ink);
	direction: rtl;
	font-family: Tajawal, "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	text-align: start;
	-webkit-font-smoothing: antialiased;
}

.reem-course *,
.reem-course *::before,
.reem-course *::after {
	box-sizing: border-box;
}

.reem-course__inner {
	width: min(1220px, 100%);
	margin-inline: auto;
}

.reem-icon {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.reem-course__hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
	gap: 2.5rem 3.2rem;
	align-items: center;
	margin: 0 0 3.2rem;
	padding: clamp(1.8rem, 3.5vw, 3rem);
	background: linear-gradient(135deg, #ffffff 0%, #fdfbf9 50%, #f8f1e7 100%);
	border: 1px solid var(--reem-line);
	border-radius: var(--reem-radius-xl);
	box-shadow: var(--reem-shadow-lg);
	overflow: hidden;
}

.reem-course__hero::before {
	content: "";
	position: absolute;
	top: -40%;
	right: -20%;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(199, 107, 61, 0.14) 0%, transparent 70%);
	pointer-events: none;
}

.reem-course__hero-copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
}

.reem-course__badge-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 1.1rem;
}

.reem-course__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.4rem 0.95rem;
	border-radius: 999px;
	background: var(--reem-rose-light);
	border: 1px solid rgba(159, 66, 88, 0.25);
	color: var(--reem-rose);
	font-size: 0.92rem;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(159, 66, 88, 0.08);
}

.reem-course__badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--reem-rose);
	box-shadow: 0 0 0 3px rgba(159, 66, 88, 0.25);
	animation: reem-dot-pulse 2s infinite;
}

@keyframes reem-dot-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.3); opacity: 0.7; }
}

.reem-course__trust-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	background: var(--reem-gold-light);
	border: 1px solid rgba(217, 155, 38, 0.3);
	color: #8c5804;
	font-size: 0.85rem;
	font-weight: 700;
}

.reem-course__trust-stars {
	color: #d99b26;
	letter-spacing: 1px;
}

/* Balanced Title */
.reem-course__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 1rem;
	margin: 0 0 0.85rem;
	font-family: inherit;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.reem-course__title-main {
	color: var(--reem-primary);
	font-size: clamp(2rem, 1.45rem + 1.8vw, 2.75rem);
	font-weight: 800;
	white-space: nowrap;
}

.reem-course__title-brand {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.95rem;
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(199, 107, 61, 0.12) 0%, rgba(159, 66, 88, 0.12) 100%);
	border: 1.5px solid rgba(199, 107, 61, 0.35);
	color: var(--reem-clay);
	font-family: "Tajawal", -apple-system, sans-serif;
	font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem);
	font-weight: 800;
	letter-spacing: 0.02em;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(199, 107, 61, 0.08);
}

.reem-course__instructor-line {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin-bottom: 1rem;
	color: var(--reem-clay);
	font-size: 1.05rem;
	font-weight: 700;
}

.reem-course__instructor-tag {
	color: var(--reem-ink-light);
	font-size: 0.95rem;
	font-weight: 500;
}

.reem-course__intro {
	color: var(--reem-ink);
	font-size: 1.12rem;
	line-height: 1.9;
	margin-bottom: 1.4rem;
}

.reem-course__intro p {
	margin: 0 0 0.75rem;
}

.reem-course__intro p:last-child {
	margin-bottom: 0;
}

/* Sleek Hero Highlights Bar */
.reem-course__hero-highlights {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem 0.85rem;
	margin: 0 0 1.85rem;
	padding: 0;
}

.reem-course__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.85rem;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(230, 222, 211, 0.9);
	border-radius: 999px;
	color: var(--reem-ink);
	font-size: 0.92rem;
	font-weight: 600;
	backdrop-filter: blur(8px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.reem-course__chip svg {
	color: var(--reem-clay);
}

/* CTA Group */
.reem-course__cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.95rem;
	align-items: center;
}

.reem-course__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	min-height: 3.4rem;
	padding: 0.85rem 2rem;
	border-radius: var(--reem-radius-md);
	font-family: inherit;
	font-size: 1.08rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	user-select: none;
}

.reem-course__button--primary {
	background: linear-gradient(135deg, var(--reem-clay) 0%, var(--reem-brown) 100%);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #ffffff !important;
	box-shadow: 0 12px 28px -4px rgba(199, 107, 61, 0.42), 0 4px 10px rgba(110, 59, 46, 0.25);
}

.reem-course__button--primary:hover {
	background: linear-gradient(135deg, var(--reem-clay-hover) 0%, #582a20 100%);
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 16px 36px -4px rgba(199, 107, 61, 0.5), 0 6px 14px rgba(110, 59, 46, 0.3);
}

.reem-course__button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
}

.reem-course__button--secondary {
	background: #ffffff;
	border: 1px solid var(--reem-line);
	color: var(--reem-primary) !important;
	box-shadow: var(--reem-shadow-sm);
}

.reem-course__button--secondary:hover {
	background: var(--reem-cream-subtle);
	border-color: #d8cdbf;
	color: var(--reem-primary-dark) !important;
	transform: translateY(-2px);
	box-shadow: var(--reem-shadow-md);
}

/* Hero Preview Card */
.reem-course__preview-wrapper {
	position: relative;
	z-index: 1;
}

.reem-course__preview {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #1e1917;
	border-radius: var(--reem-radius-lg);
	border: 2px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 20px 48px -10px rgba(36, 60, 50, 0.22), 0 6px 18px rgba(0, 0, 0, 0.08);
	text-decoration: none;
	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.reem-course__preview:hover {
	transform: translateY(-4px) scale(1.01);
	box-shadow: 0 26px 55px -8px rgba(199, 107, 61, 0.35), 0 8px 24px rgba(0, 0, 0, 0.12);
}

.reem-course__preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.08);
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.reem-course__preview:hover img {
	transform: scale(1.15);
}

.reem-course__preview-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1rem;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, transparent 40%, rgba(18, 14, 12, 0.85) 100%);
}

.reem-course__preview-pill {
	align-self: flex-start;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	background: rgba(18, 14, 12, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #ffffff;
	font-size: 0.85rem;
	font-weight: 700;
	backdrop-filter: blur(8px);
}

.reem-course__preview-center-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.96);
	color: var(--reem-clay);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.reem-course__preview:hover .reem-course__preview-center-play {
	transform: translate(-50%, -50%) scale(1.12);
	background: var(--reem-clay);
	color: #ffffff;
	box-shadow: 0 14px 36px rgba(199, 107, 61, 0.45);
}

.reem-course__play-pulse {
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 2px solid var(--reem-clay);
	opacity: 0;
	animation: reem-ripple 2.5s infinite;
}

@keyframes reem-ripple {
	0% { transform: scale(0.95); opacity: 0.8; }
	100% { transform: scale(1.35); opacity: 0; }
}

.reem-course__preview-bottom-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0.75rem 1rem;
	background: linear-gradient(180deg, transparent 0%, rgba(18, 14, 12, 0.9) 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #ffffff;
	font-size: 0.88rem;
	font-weight: 700;
}

.reem-course__preview-free-tag {
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: rgba(45, 138, 99, 0.85);
	color: #ffffff;
	font-size: 0.78rem;
	font-weight: 700;
}

/* ==========================================================================
   PROGRESS TRACKER WIDGET
   ========================================================================== */

.reem-course__progress-tracker {
	margin: 0 0 2.75rem;
	padding: 1.35rem 1.75rem;
	background: var(--reem-paper);
	border: 1px solid var(--reem-line);
	border-radius: var(--reem-radius-lg);
	box-shadow: var(--reem-shadow-sm);
	animation: reem-fade-in 0.4s ease;
}

@keyframes reem-fade-in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}

.reem-course__progress-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.95rem;
}

.reem-course__progress-info {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.reem-course__progress-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--reem-emerald-light);
	font-size: 1.3rem;
}

.reem-course__progress-title {
	margin: 0;
	color: var(--reem-primary);
	font-family: inherit;
	font-size: 1.12rem;
	font-weight: 800;
}

.reem-course__progress-text {
	margin: 0.2rem 0 0;
	color: var(--reem-ink-light);
	font-size: 0.95rem;
	font-weight: 600;
}

.reem-course__progress-percent {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.95rem;
	border-radius: 999px;
	background: var(--reem-emerald-light);
	color: var(--reem-emerald);
	font-size: 1.1rem;
	font-weight: 800;
}

.reem-course__progress-bar-bg {
	width: 100%;
	height: 10px;
	background: var(--reem-cream-subtle);
	border-radius: 999px;
	overflow: hidden;
}

.reem-course__progress-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--reem-emerald) 0%, #48bb78 100%);
	border-radius: 999px;
	transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   CURRICULUM / LESSONS GRID SECTION
   ========================================================================== */

.reem-course__lessons {
	margin: 0 0 4rem;
}

.reem-course__lessons-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.2rem;
	margin-bottom: 1.35rem;
	padding-bottom: 0.85rem;
	border-bottom: 2px solid var(--reem-line);
}

.reem-course__section-kicker {
	display: inline-block;
	margin: 0 0 0.35rem;
	color: var(--reem-clay);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.reem-course__lessons-head h2 {
	margin: 0;
	color: var(--reem-primary);
	font-family: inherit;
	font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem);
	font-weight: 800;
	line-height: 1.3;
}

.reem-course__count-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 1rem;
	border-radius: 999px;
	background: rgba(36, 60, 50, 0.08);
	border: 1px solid rgba(36, 60, 50, 0.15);
	color: var(--reem-primary);
	font-size: 0.92rem;
	font-weight: 700;
	white-space: nowrap;
}

/* Filter & Search Bar */
.reem-course__filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.8rem;
}

.reem-course__filter-tags {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.reem-course__filter-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 1.35rem;
	border-radius: 999px;
	background: var(--reem-primary);
	border: 1px solid var(--reem-primary);
	color: #ffffff;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(36, 60, 50, 0.15);
	transition: all 0.2s ease;
}

.reem-course__filter-btn:hover {
	background: var(--reem-primary-light);
	transform: translateY(-1px);
}

.reem-course .reem-course__search-box {
	position: relative;
	display: flex;
	align-items: center;
	width: min(360px, 100%);
}

.reem-course .reem-course__search-icon,
.reem-course .reem-course__search-box svg.reem-icon {
	position: absolute;
	top: 50%;
	right: 1.15rem;
	left: auto;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--reem-clay);
	pointer-events: none;
	z-index: 2;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.reem-course input[type="search"].reem-course__search-input,
.reem-course .reem-course__search-input {
	width: 100% !important;
	height: 48px !important;
	min-height: 48px !important;
	line-height: normal !important;
	padding: 0.5rem 3.2rem 0.5rem 2.5rem !important;
	padding-inline-start: 3.2rem !important;
	padding-inline-end: 2.5rem !important;
	padding-right: 3.2rem !important;
	padding-left: 2.5rem !important;
	background: #ffffff !important;
	border: 1.5px solid var(--reem-line) !important;
	border-radius: 999px !important;
	color: var(--reem-ink) !important;
	font-family: inherit !important;
	font-size: 0.96rem !important;
	font-weight: 600 !important;
	box-shadow: var(--reem-shadow-sm) !important;
	box-sizing: border-box !important;
	direction: rtl !important;
	text-align: right !important;
	transition: all 0.25s ease !important;
	-webkit-appearance: none;
}

.reem-course input[type="search"].reem-course__search-input:focus,
.reem-course .reem-course__search-input:focus {
	outline: none !important;
	border-color: var(--reem-clay) !important;
	box-shadow: 0 0 0 4px rgba(199, 107, 61, 0.15), var(--reem-shadow-md) !important;
	background: #ffffff !important;
}

.reem-course input[type="search"].reem-course__search-input::placeholder,
.reem-course .reem-course__search-input::placeholder {
	color: var(--reem-ink-light);
	opacity: 0.8;
	font-weight: 500;
	font-size: 0.94rem;
}

.reem-course .reem-course__search-clear {
	position: absolute;
	left: 0.95rem;
	right: auto;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--reem-cream-subtle);
	border: 0;
	color: var(--reem-ink-light);
	padding: 0;
	cursor: pointer;
	z-index: 2;
	transition: all 0.2s ease;
}

.reem-course .reem-course__search-clear:hover {
	background: var(--reem-clay-light);
	color: var(--reem-clay);
}

.reem-course__no-results {
	padding: 2.5rem 1.5rem;
	text-align: center;
	background: var(--reem-paper);
	border: 1px dashed var(--reem-line);
	border-radius: var(--reem-radius-lg);
	color: var(--reem-ink-light);
	font-size: 1.05rem;
}

/* Grid Layout */
.reem-course__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.reem-course__grid-item {
	display: flex;
	margin: 0;
}

.reem-course__card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	background: var(--reem-paper);
	border: 1px solid var(--reem-line);
	border-radius: var(--reem-radius-lg);
	box-shadow: var(--reem-shadow-sm);
	color: inherit;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.reem-course__card:hover {
	border-color: rgba(199, 107, 61, 0.45);
	transform: translateY(-5px);
	box-shadow: var(--reem-shadow-hover);
}

/* Completed Card Accent */
.reem-course__grid-item.is-completed .reem-course__card {
	border-color: rgba(45, 138, 99, 0.4);
}

/* Card Thumbnail */
.reem-course__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #241d1a;
}

.reem-course__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.08);
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.reem-course__card:hover .reem-course__thumb img {
	transform: scale(1.16);
}

.reem-course__thumb-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, transparent 50%, rgba(18, 14, 12, 0.75) 100%);
	transition: opacity 0.3s ease;
}

.reem-course__card:hover .reem-course__thumb-overlay {
	opacity: 0.9;
}

.reem-course__num-badge {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: rgba(18, 14, 12, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #ffffff;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	backdrop-filter: blur(8px);
}

.reem-course__status-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: rgba(45, 138, 99, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #ffffff;
	font-size: 0.82rem;
	font-weight: 700;
	backdrop-filter: blur(8px);
	box-shadow: 0 4px 12px rgba(45, 138, 99, 0.3);
}

.reem-course__play-trigger {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.9);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--reem-clay);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	opacity: 0.85;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.reem-course__card:hover .reem-course__play-trigger {
	transform: translate(-50%, -50%) scale(1.1);
	background: var(--reem-clay);
	color: #ffffff;
	opacity: 1;
	box-shadow: 0 10px 28px rgba(199, 107, 61, 0.45);
}

/* Card Body */
.reem-course__card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.25rem 1.35rem 1.35rem;
}

.reem-course__card-kicker {
	margin: 0 0 0.4rem;
	color: var(--reem-rose);
	font-size: 0.85rem;
	font-weight: 700;
}

.reem-course__card-title {
	margin: 0 0 1.15rem;
	color: var(--reem-primary);
	font-family: inherit;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.reem-course__card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.95rem;
	border-top: 1px solid var(--reem-line-subtle);
}

.reem-course__card-meta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--reem-ink-light);
	font-size: 0.9rem;
	font-weight: 600;
}

.reem-course__card-action {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--reem-clay);
	font-size: 0.96rem;
	font-weight: 700;
	transition: gap 0.25s ease;
}

.reem-course__card-arrow {
	transition: transform 0.25s ease;
}

.reem-course__card:hover .reem-course__card-action {
	color: var(--reem-clay-hover);
}

.reem-course__card:hover .reem-course__card-arrow {
	transform: translateX(-4px);
}

/* ==========================================================================
   ABOUT MONTI MOMS SECTION (BENTO 2-COLUMN)
   ========================================================================== */

.reem-course__about-section {
	margin: 4.5rem 0;
	padding: clamp(2rem, 4vw, 3rem);
	background: var(--reem-paper);
	border: 1px solid var(--reem-line);
	border-radius: var(--reem-radius-xl);
	box-shadow: var(--reem-shadow-md);
}

.reem-course__about-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
	gap: 2.5rem;
	align-items: center;
}

.reem-course__about-heading {
	margin: 0.35rem 0 1rem;
	color: var(--reem-primary);
	font-family: inherit;
	font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.35rem);
	font-weight: 800;
	line-height: 1.35;
}

.reem-course__about-lead {
	color: var(--reem-ink);
	font-size: 1.12rem;
	line-height: 1.9;
	margin-bottom: 0.95rem;
	font-weight: 500;
}

.reem-course__about-text {
	color: var(--reem-ink-light);
	font-size: 1.05rem;
	line-height: 1.85;
	margin: 0;
}

.reem-course__about-pillars {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.reem-course__pillar-card {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.15rem 1.35rem;
	background: var(--reem-cream);
	border: 1px solid var(--reem-line);
	border-radius: var(--reem-radius-md);
	transition: all 0.25s ease;
}

.reem-course__pillar-card:hover {
	background: #ffffff;
	border-color: rgba(199, 107, 61, 0.4);
	transform: translateY(-2px);
	box-shadow: var(--reem-shadow-sm);
}

.reem-course__pillar-icon {
	font-size: 1.6rem;
	flex-shrink: 0;
}

.reem-course__pillar-card h4 {
	margin: 0 0 0.3rem;
	color: var(--reem-primary);
	font-family: inherit;
	font-size: 1.08rem;
	font-weight: 700;
}

.reem-course__pillar-card p {
	margin: 0;
	color: var(--reem-ink-light);
	font-size: 0.94rem;
	line-height: 1.65;
}

/* ==========================================================================
   WHAT YOU WILL LEARN (BENTO GRID 8 CARDS)
   ========================================================================== */

.reem-course__learn-section {
	margin: 4.5rem 0;
}

.reem-course__learn-head {
	text-align: center;
	max-width: 44rem;
	margin: 0 auto 2.5rem;
}

.reem-course__learn-head h2 {
	margin: 0.35rem 0 0.65rem;
	color: var(--reem-primary);
	font-family: inherit;
	font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem);
	font-weight: 800;
	line-height: 1.35;
}

.reem-course__learn-head p {
	margin: 0;
	color: var(--reem-ink-light);
	font-size: 1.1rem;
	line-height: 1.8;
}

.reem-course__bento-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 1.4rem;
}

.reem-course__bento-card {
	position: relative;
	padding: 1.6rem;
	background: var(--reem-paper);
	border: 1px solid var(--reem-line);
	border-radius: var(--reem-radius-lg);
	box-shadow: var(--reem-shadow-sm);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.reem-course__bento-card:hover {
	border-color: rgba(199, 107, 61, 0.45);
	transform: translateY(-4px);
	box-shadow: var(--reem-shadow-md);
}

.reem-course__bento-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin-bottom: 1.1rem;
	border-radius: 50%;
	background: var(--reem-clay-light);
	font-size: 1.5rem;
}

.reem-course__bento-card h3 {
	margin: 0 0 0.55rem;
	color: var(--reem-primary);
	font-family: inherit;
	font-size: 1.18rem;
	font-weight: 800;
	line-height: 1.45;
}

.reem-course__bento-card p {
	margin: 0;
	color: var(--reem-ink);
	font-size: 0.98rem;
	line-height: 1.75;
}

/* ==========================================================================
   TARGET AUDIENCE SECTION (3 PERSONAS)
   ========================================================================== */

.reem-course__audience-section {
	margin: 4.5rem 0;
	padding: clamp(2rem, 3.5vw, 3rem);
	background: linear-gradient(135deg, #fbf8f4 0%, #f4ede1 100%);
	border: 1px solid var(--reem-line);
	border-radius: var(--reem-radius-xl);
}

.reem-course__audience-head {
	text-align: center;
	margin-bottom: 2.25rem;
}

.reem-course__audience-head h2 {
	margin: 0.35rem 0 0;
	color: var(--reem-primary);
	font-family: inherit;
	font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.3rem);
	font-weight: 800;
}

.reem-course__audience-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem;
}

.reem-course__audience-card {
	padding: 1.6rem 1.5rem;
	background: #ffffff;
	border: 1px solid var(--reem-line);
	border-radius: var(--reem-radius-lg);
	box-shadow: var(--reem-shadow-sm);
	transition: all 0.25s ease;
}

.reem-course__audience-card:hover {
	border-color: var(--reem-clay);
	transform: translateY(-3px);
	box-shadow: var(--reem-shadow-md);
}

.reem-course__audience-icon {
	font-size: 2rem;
	margin-bottom: 0.95rem;
}

.reem-course__audience-card h3 {
	margin: 0 0 0.5rem;
	color: var(--reem-primary);
	font-family: inherit;
	font-size: 1.15rem;
	font-weight: 800;
}

.reem-course__audience-card p {
	margin: 0;
	color: var(--reem-ink);
	font-size: 0.98rem;
	line-height: 1.8;
}

/* ==========================================================================
   PHILOSOPHY EDITORIAL QUOTE
   ========================================================================== */

.reem-course__philosophy-section {
	margin: 4.5rem 0;
}

.reem-course__philosophy-card {
	position: relative;
	padding: clamp(2rem, 4vw, 3.25rem);
	background: linear-gradient(135deg, #243c32 0%, #2f4e41 50%, #442a22 100%);
	border-radius: var(--reem-radius-xl);
	box-shadow: 0 24px 60px -10px rgba(36, 60, 50, 0.35);
	color: #ffffff;
	text-align: center;
	overflow: hidden;
}

.reem-course__quote-icon {
	font-size: 5rem;
	line-height: 1;
	color: rgba(199, 107, 61, 0.35);
	font-family: Georgia, serif;
	margin-bottom: -1.5rem;
}

.reem-course__philosophy-quote {
	margin: 0 auto 1.5rem;
	max-width: 48rem;
	border: 0;
	padding: 0;
}

.reem-course__philosophy-quote p {
	margin: 0;
	color: #ffffff;
	font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
	font-weight: 700;
	line-height: 1.85;
}

.reem-course__philosophy-footer {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding-top: 1.35rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	color: #faede6;
	font-size: 1.05rem;
}

.reem-course__philosophy-footer strong {
	color: #ffffff;
	font-size: 1.15rem;
}

/* ==========================================================================
   HOW TO STUDY 3 STEPS
   ========================================================================== */

.reem-course__steps-section {
	margin: 4.5rem 0;
}

.reem-course__steps-head {
	text-align: center;
	margin-bottom: 2.25rem;
}

.reem-course__steps-head h2 {
	margin: 0.35rem 0 0;
	color: var(--reem-primary);
	font-family: inherit;
	font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.3rem);
	font-weight: 800;
}

.reem-course__steps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.reem-course__step-card {
	position: relative;
	padding: 1.75rem 1.5rem;
	background: var(--reem-paper);
	border: 1px solid var(--reem-line);
	border-radius: var(--reem-radius-lg);
	box-shadow: var(--reem-shadow-sm);
	transition: all 0.25s ease;
}

.reem-course__step-card:hover {
	border-color: var(--reem-clay);
	transform: translateY(-3px);
	box-shadow: var(--reem-shadow-md);
}

.reem-course__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: var(--reem-clay);
	color: #ffffff;
	font-size: 1.15rem;
	font-weight: 800;
	box-shadow: 0 6px 16px rgba(199, 107, 61, 0.3);
}

.reem-course__step-card h3 {
	margin: 0 0 0.5rem;
	color: var(--reem-primary);
	font-family: inherit;
	font-size: 1.15rem;
	font-weight: 800;
}

.reem-course__step-card p {
	margin: 0;
	color: var(--reem-ink);
	font-size: 0.98rem;
	line-height: 1.75;
}

/* ==========================================================================
   INSTRUCTOR CARD SECTION
   ========================================================================== */

.reem-course__instructor-card {
	display: flex;
	gap: 2rem;
	align-items: center;
	margin: 4.5rem 0;
	padding: clamp(1.75rem, 3.5vw, 2.5rem);
	background: var(--reem-paper);
	border: 1px solid var(--reem-line);
	border-radius: var(--reem-radius-xl);
	box-shadow: var(--reem-shadow-md);
}

.reem-course__instructor-avatar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 95px;
	height: 95px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--reem-primary) 0%, var(--reem-clay) 100%);
	color: #ffffff;
	font-size: 1.85rem;
	font-weight: 800;
	box-shadow: 0 12px 28px rgba(36, 60, 50, 0.22);
}

.reem-course__instructor-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.reem-course__instructor-badge {
	color: var(--reem-rose);
	font-size: 0.9rem;
	font-weight: 700;
	margin-bottom: 0.35rem;
}

.reem-course__instructor-name {
	margin: 0 0 0.5rem;
	color: var(--reem-primary);
	font-family: inherit;
	font-size: 1.55rem;
	font-weight: 800;
}

.reem-course__instructor-bio {
	margin: 0 0 1rem;
	color: var(--reem-ink);
	font-size: 1.05rem;
	line-height: 1.85;
}

.reem-course__instructor-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 0.95rem;
}

.reem-course__instructor-tags span {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.85rem;
	border-radius: var(--reem-radius-sm);
	background: var(--reem-cream-subtle);
	color: var(--reem-primary);
	font-size: 0.9rem;
	font-weight: 700;
}

/* ==========================================================================
   FAQ ACCORDION SECTION
   ========================================================================== */

.reem-course__faq {
	margin: 4.5rem 0;
}

.reem-course__faq-head {
	margin-bottom: 1.6rem;
	border-bottom: 2px solid var(--reem-line);
	padding-bottom: 0.75rem;
}

.reem-course__faq-head h2 {
	margin: 0;
	color: var(--reem-primary);
	font-family: inherit;
	font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
	font-weight: 800;
}

.reem-course__faq-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.reem-course__faq-item {
	background: var(--reem-paper);
	border: 1px solid var(--reem-line);
	border-radius: var(--reem-radius-md);
	box-shadow: var(--reem-shadow-sm);
	transition: border-color 0.2s ease;
}

.reem-course__faq-item[open] {
	border-color: rgba(199, 107, 61, 0.45);
	box-shadow: var(--reem-shadow-md);
}

.reem-course__faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	color: var(--reem-primary);
	font-size: 1.1rem;
	font-weight: 700;
	cursor: pointer;
	user-select: none;
	list-style: none;
}

.reem-course__faq-item summary::-webkit-details-marker {
	display: none;
}

.reem-faq-arrow {
	color: var(--reem-clay);
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.reem-course__faq-item[open] .reem-faq-arrow {
	transform: rotate(180deg);
}

.reem-course__faq-body {
	padding: 0 1.5rem 1.35rem;
	color: var(--reem-ink);
	font-size: 1.05rem;
	line-height: 1.85;
}

.reem-course__faq-body p {
	margin: 0;
}

/* ==========================================================================
   CLOSING / BANNER SECTION
   ========================================================================== */

.reem-course__close-wrapper {
	position: relative;
	margin: 4.5rem auto 0;
	padding: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
	background: linear-gradient(135deg, #182e25 0%, #243c32 50%, #442a22 100%);
	border-radius: var(--reem-radius-xl);
	box-shadow: 0 24px 60px -10px rgba(24, 46, 37, 0.38);
	color: #ffffff;
	text-align: center;
	overflow: hidden;
}

.reem-course__close-wrapper::before {
	content: "";
	position: absolute;
	top: -50%;
	left: -20%;
	width: 450px;
	height: 450px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(199, 107, 61, 0.22) 0%, transparent 70%);
	pointer-events: none;
}

.reem-course__close {
	position: relative;
	z-index: 1;
	max-width: 46rem;
	margin: 0 auto;
}

.reem-course__close h2 {
	margin: 0 0 0.85rem;
	color: #ffffff;
	font-family: inherit;
	font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.6rem);
	font-weight: 800;
	line-height: 1.35;
}

.reem-course__close p {
	margin: 0 0 1.85rem;
	color: #faede6;
	font-size: 1.18rem;
	line-height: 1.85;
}

.reem-course__close p:last-child {
	margin-bottom: 0;
}

.reem-course__close-action {
	position: relative;
	z-index: 1;
	margin: 1.85rem 0 0;
}

/* Focus and Accessibility */
.reem-course a:focus-visible,
.reem-course button:focus-visible,
.reem-course summary:focus-visible {
	outline: 2px solid var(--reem-clay);
	outline-offset: 3px;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS - LUXURY MOBILE EDITION
   ========================================================================== */

@media (max-width: 980px) {
	.reem-course__hero {
		grid-template-columns: 1fr;
		gap: 2.2rem;
		padding: 2rem 1.75rem;
	}

	.reem-course__preview-wrapper {
		max-width: 540px;
		margin-inline: auto;
		width: 100%;
	}

	.reem-course__about-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.reem-course__audience-grid,
	.reem-course__steps-grid {
		grid-template-columns: 1fr;
	}

	.reem-course__instructor-card {
		flex-direction: column;
		text-align: center;
		gap: 1.25rem;
	}

	.reem-course__instructor-tags {
		justify-content: center;
	}
}

@media (max-width: 640px) {
	.reem-course {
		padding: 1rem 0.65rem 3.5rem;
	}

	.reem-course__hero {
		padding: 1.35rem 1.1rem;
		border-radius: var(--reem-radius-lg);
		gap: 1.6rem;
		margin-bottom: 2.2rem;
	}

	.reem-course__badge-row {
		gap: 0.45rem;
		margin-bottom: 0.85rem;
	}

	.reem-course__badge,
	.reem-course__trust-pill {
		font-size: 0.78rem;
		padding: 0.28rem 0.65rem;
	}

	.reem-course__title {
		gap: 0.5rem;
		margin-bottom: 0.65rem;
	}

	.reem-course__title-main {
		font-size: clamp(1.5rem, 5.5vw, 1.95rem);
		white-space: normal;
	}

	.reem-course__title-brand {
		font-size: 0.92rem;
		padding: 0.25rem 0.75rem;
	}

	.reem-course__instructor-line {
		font-size: 0.95rem;
		margin-bottom: 0.85rem;
	}

	.reem-course__intro {
		font-size: 0.98rem;
		line-height: 1.75;
		margin-bottom: 1.15rem;
	}

	.reem-course__hero-highlights {
		gap: 0.45rem;
		margin-bottom: 1.45rem;
	}

	.reem-course__chip {
		font-size: 0.82rem;
		padding: 0.35rem 0.65rem;
	}

	.reem-course__cta-group {
		flex-direction: column;
		align-items: stretch;
		gap: 0.65rem;
	}

	.reem-course__cta-group .reem-course__button {
		width: 100%;
		min-height: 3.2rem;
		font-size: 1rem;
	}

	.reem-course__filter-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
		margin-bottom: 1.25rem;
	}

	.reem-course__filter-tags {
		width: 100%;
	}

	.reem-course__filter-btn {
		width: 100%;
		justify-content: center;
		padding: 0.6rem 1rem;
	}

	.reem-course__search-box {
		width: 100%;
	}

	.reem-course__grid {
		grid-template-columns: 1fr;
		gap: 1.15rem;
	}

	.reem-course__bento-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.reem-course__bento-card,
	.reem-course__pillar-card,
	.reem-course__step-card,
	.reem-course__audience-card {
		padding: 1.25rem 1.15rem;
	}

	.reem-course__lessons-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.reem-course__close-wrapper {
		margin-top: 3rem;
		padding: 2rem 1.25rem;
		border-radius: var(--reem-radius-lg);
	}

	.reem-course__close h2 {
		font-size: clamp(1.5rem, 5vw, 1.95rem);
	}

	.reem-course__close p {
		font-size: 1rem;
		line-height: 1.7;
	}

	.reem-course__close-action .reem-course__button {
		width: 100%;
		min-height: 3.2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.reem-course__card,
	.reem-course__preview,
	.reem-course__button,
	.reem-course__thumb img,
	.reem-course__bento-card,
	.reem-course__step-card,
	.reem-course__audience-card,
	.reem-course__progress-bar-fill {
		transition: none !important;
	}

	.reem-course__card:hover,
	.reem-course__preview:hover,
	.reem-course__bento-card:hover,
	.reem-course__step-card:hover,
	.reem-course__audience-card:hover {
		transform: none !important;
	}

	.reem-course__badge-dot,
	.reem-course__play-pulse {
		animation: none !important;
	}
}